/* ui.css — 登入頁 / 安裝頁 / 管理後台共用樣式,沿用 portal 視覺語言 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --bg:#e8ecf1; --panel:#fff; --ink:#141a22; --muted:#5b6675; --line:#d3dae2;
  --metal-1:#222b36; --metal-2:#323e4d;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --body:system-ui,-apple-system,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);min-height:100vh;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 18% -10%,rgba(37,99,235,.06),transparent 40%),
                   radial-gradient(circle at 100% 0%,rgba(13,148,136,.06),transparent 35%);}
button{font-family:var(--body);cursor:pointer}
a{color:#1f6feb}

.topbar{background:linear-gradient(180deg,var(--metal-2),var(--metal-1));color:#eef2f6;border-bottom:1px solid #11161d;position:relative;overflow:hidden}
.topbar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(95deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px);pointer-events:none}
.accent-line{height:3px;background:linear-gradient(90deg,#2563eb,#0d9488,#b45309,#7c3aed)}
.topwrap{max-width:1100px;margin:0 auto;padding:18px 28px 20px;position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand .eyebrow{font-family:var(--disp);font-weight:500;letter-spacing:.32em;text-transform:uppercase;font-size:11px;color:#8fa6c4}
.brand h1{margin:.18em 0 0;font-family:var(--disp);font-weight:700;font-size:clamp(22px,3vw,32px);letter-spacing:.02em;line-height:1.05}
.topwrap .who{font-family:var(--mono);color:#aebdd0;font-size:12.5px;text-align:right}
.topwrap .who a{color:#cfe0f5}

.wrap{max-width:1100px;margin:0 auto;padding:24px 28px 48px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 22px}
.panel + .panel{margin-top:16px}
.panel h2{margin:0 0 4px;font-family:var(--disp);font-size:18px;font-weight:700}
.panel .sub{color:var(--muted);font-size:13px;margin:0 0 16px}

label.fld{display:block;margin:0 0 12px}
label.fld span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
input[type=text],input[type=password],input[type=number],select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font-family:var(--body);font-size:14px;color:var(--ink);outline:none}
input.mono{font-family:var(--mono)}
input:focus,select:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.14)}

.btn{font-size:13.5px;padding:10px 16px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:600;transition:.15s;white-space:nowrap}
.btn:hover{border-color:#9aa7b5}
.btn.primary{background:#1f6feb;border-color:#1f6feb;color:#fff}
.btn.primary:hover{background:#1a5fd0}
.btn.ghost{background:transparent;border-color:#c2cbd5}
.btn.danger{background:#fff;border-color:#e6b3b3;color:#b42318}
.btn.danger:hover{background:#fdecec}
.btn.sm{padding:6px 10px;font-size:12.5px}

.msg{border-radius:9px;padding:10px 13px;font-size:13.5px;margin:0 0 14px}
.msg.err{background:#fdecec;border:1px solid #f3c6c6;color:#b42318}
.msg.ok{background:#e7f6ee;border:1px solid #b6e3c9;color:#0d7a43}
.msg.info{background:#eaf1fb;border:1px solid #cadbf5;color:#1a4b8f}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
td.mono,th.mono{font-family:var(--mono)}
tr:hover td{background:#f7f9fc}
.pill{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.pill.on{background:#e7f6ee;border-color:#b6e3c9;color:#0d7a43}
.pill.off{background:#f3f4f6;color:#8a8f98}
.pill.admin{background:#eef0ff;border-color:#c9cffc;color:#4531b7}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.matrix td{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left;font-family:var(--mono);font-size:12px}
.matrix input[type=checkbox]{width:17px;height:17px;cursor:pointer}
code{font-family:var(--mono);background:#f3f5f8;border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:12px}
.qrbox{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.secret{font-family:var(--mono);font-size:15px;letter-spacing:.06em;background:#f3f5f8;border:1px dashed #b9c2cd;border-radius:8px;padding:10px 12px;word-break:break-all}
@media(max-width:640px){.grid2{grid-template-columns:1fr}.topwrap .who{text-align:left}}

/* 登入頁置中卡 */
.loginwrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.logincard{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 18px 40px rgba(20,26,34,.10)}
.logincard .head{background:linear-gradient(180deg,var(--metal-2),var(--metal-1));color:#eef2f6;padding:22px 24px 20px;position:relative}
.logincard .head .accent-line{position:absolute;left:0;right:0;top:0}
.logincard .head .eyebrow{font-family:var(--disp);letter-spacing:.3em;text-transform:uppercase;font-size:10.5px;color:#8fa6c4;margin-top:4px}
.logincard .head h1{font-family:var(--disp);font-weight:700;font-size:24px;margin:.2em 0 0}
.logincard .body{padding:22px 24px 26px}