:root{
  --bg:#f4f5f9; --panel:#ffffff; --panel-2:#fafbfd; --line:#e4e7ee;
  --tx:#1b2130; --tx-2:#5b6478; --tx-3:#8b94a8;
  --brand:#4f46e5; --brand-soft:#eef0ff;
  --ok:#0f9d58; --ok-soft:#e6f6ee;
  --upd:#0891b2; --upd-soft:#e0f5f9;
  --dev:#d97706; --dev-soft:#fdf1e0;
  --danger:#e5484d; --danger-soft:#fdeaea;
  --shadow:0 1px 2px rgba(20,25,40,.05),0 8px 24px rgba(20,25,40,.06);
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1017; --panel:#161b25; --panel-2:#1b212d; --line:#262d3b;
    --tx:#e8ecf4; --tx-2:#9aa5bb; --tx-3:#6b768d;
    --brand:#8b8cf9; --brand-soft:#232449;
    --ok:#4ade80; --ok-soft:#16311f;
    --upd:#38bdf8; --upd-soft:#12303d;
    --dev:#fbbf24; --dev-soft:#3a2c10;
    --danger:#ff6369; --danger-soft:#3a1a1c;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:60px;
}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none !important}

/* ---------- 鎖定畫面 ---------- */
#lock{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
.lockbox{width:100%;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:32px 26px;box-shadow:var(--shadow);text-align:center}
.lockbox .ic{color:var(--brand);margin-bottom:12px}
.lockbox h1{font-size:19px;margin:0 0 4px}
.lockbox p{margin:0 0 20px;color:var(--tx-3);font-size:13px}
.lockbox input{width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--line);background:var(--panel-2);color:var(--tx);font-size:17px;text-align:center;letter-spacing:3px}
.lockbox input:focus{outline:none;border-color:var(--brand)}
.lockbox button{width:100%;margin-top:12px;padding:12px;border:0;border-radius:11px;background:var(--brand);color:#fff;font-weight:600}
.lockerr{color:var(--danger);font-size:13px;min-height:18px;margin-top:8px}

/* ---------- 頁首 ---------- */
header{max-width:1180px;margin:0 auto;padding:34px 20px 0}
.brandrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:0 0 auto}
h1.title{font-size:22px;margin:0;letter-spacing:-.3px}
.sub{color:var(--tx-3);font-size:13px;margin:2px 0 0}
.spacer{flex:1}
.ghost{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--tx-2);display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.ghost:hover{border-color:var(--brand);color:var(--brand)}
.ghost.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.ghost.primary:hover{filter:brightness(1.08);color:#fff}
.ghost:disabled{opacity:.5;cursor:default}

/* ---------- 統計 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.stat b{display:block;font-size:24px;line-height:1.2;letter-spacing:-.5px}
.stat span{font-size:12px;color:var(--tx-3)}
.stat.ok b{color:var(--ok)} .stat.upd b{color:var(--upd)} .stat.dev b{color:var(--dev)}

/* ---------- 工具列 ---------- */
.toolbar{position:sticky;top:0;z-index:20;background:var(--bg);padding:16px 0 12px;margin-top:18px}
.searchwrap{position:relative}
.searchwrap>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--tx-3)}
#q{width:100%;padding:12px 14px 12px 40px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--tx);font-size:15px;box-shadow:var(--shadow)}
#q:focus{outline:none;border-color:var(--brand)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px;color:var(--tx-2);display:inline-flex;align-items:center;gap:6px}
.chip .n{color:var(--tx-3);font-size:11px}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.on .n{color:rgba(255,255,255,.7)}

/* ---------- 分組 / 卡片 ---------- */
main{max-width:1180px;margin:0 auto;padding:0 20px}
.group{margin-top:26px}
.ghead{display:flex;align-items:center;gap:9px;margin-bottom:12px;color:var(--tx-2)}
.ghead h2{font-size:14px;margin:0;font-weight:700;letter-spacing:.3px;color:var(--tx)}
.ghead .cnt{font-size:12px;color:var(--tx-3)}
.ghead .ln{flex:1;height:1px;background:var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px;transition:transform .12s,border-color .12s}
.card:hover{transform:translateY(-2px);border-color:var(--brand)}
.ctop{display:flex;align-items:flex-start;gap:10px}
.cname{font-weight:650;font-size:15px;line-height:1.4;flex:1;letter-spacing:-.2px}
.badge{font-size:11px;padding:3px 9px;border-radius:999px;font-weight:600;white-space:nowrap;border:0}
.b-ok{background:var(--ok-soft);color:var(--ok)}
.b-upd{background:var(--upd-soft);color:var(--upd)}
.b-dev{background:var(--dev-soft);color:var(--dev)}
.curl{font-size:12px;color:var(--tx-3);word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.creds{background:var(--panel-2);border:1px dashed var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.cred{display:flex;align-items:center;gap:8px;font-size:12.5px}
.cred .k{color:var(--tx-3);flex:0 0 auto}
.cred .v{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tx);word-break:break-all}
.cred .v.mask{letter-spacing:2px;color:var(--tx-3)}
.mini{border:0;background:transparent;color:var(--tx-3);padding:2px;display:inline-flex;border-radius:6px}
.mini:hover{color:var(--brand);background:var(--brand-soft)}
.mini.del:hover{color:var(--danger);background:var(--danger-soft)}
.note{font-size:12.5px;color:var(--tx-2)}

.cbtm{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.open{flex:1;text-decoration:none;background:var(--brand);color:#fff;border-radius:10px;padding:9px;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.open:hover{filter:brightness(1.08)}
.copyurl{border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:0 12px;color:var(--tx-2);display:inline-flex;align-items:center}
.copyurl:hover{border-color:var(--brand);color:var(--brand)}
select.st{border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:0 8px;font-size:12.5px;color:var(--tx-2);height:36px}

.empty{text-align:center;color:var(--tx-3);padding:60px 0;font-size:14px}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--tx);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:13.5px;opacity:0;pointer-events:none;transition:.22s;z-index:120;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
footer{max-width:1180px;margin:40px auto 0;padding:0 20px;color:var(--tx-3);font-size:12px;text-align:center}

/* ================= 後台編輯 ================= */
.savebar{position:sticky;top:0;z-index:30;background:var(--bg);padding:14px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.savebar .hint{font-size:12.5px;color:var(--tx-3)}
.dirty{color:var(--dev);font-weight:600}

.row{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow)}
.rhead{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.rhead .idx{font-size:12px;color:var(--tx-3);font-family:ui-monospace,Menlo,monospace;min-width:24px}
.rhead .sp{flex:1}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f{display:flex;flex-direction:column;gap:4px}
.f.wide{grid-column:1/-1}
.f label{font-size:11.5px;color:var(--tx-3);letter-spacing:.2px}
.f input,.f select,.f textarea{
  width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--tx);font-size:14px;font-family:inherit
}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--brand)}
.f input.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}

.credlist{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.credrow{display:flex;gap:7px;align-items:center}
.credrow input{flex:1;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--tx);font-size:13px}
.credrow input.k{flex:0 0 34%}
.addcred{align-self:flex-start;background:transparent;border:1px dashed var(--line);border-radius:9px;padding:6px 11px;font-size:12.5px;color:var(--tx-2);display:inline-flex;align-items:center;gap:5px}
.addcred:hover{border-color:var(--brand);color:var(--brand)}

.faqedit{display:flex;flex-direction:column;gap:10px}
.faqrow{display:flex;flex-direction:column;gap:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.faqrow input,.faqrow textarea{width:100%;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--tx);font-size:13.5px;font-family:inherit;resize:vertical}
.faqrow input:focus,.faqrow textarea:focus{outline:none;border-color:var(--brand)}
.faqrow2{display:flex;gap:7px;align-items:flex-start}
.faqrow2 textarea{flex:1}
.faqrow2 .mini{margin-top:6px}

.sec{margin-top:28px}
.sec>h2{font-size:15px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.panelbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.pwgrid{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.warn{background:var(--dev-soft);color:var(--dev);border-radius:10px;padding:10px 13px;font-size:12.5px;margin-top:10px}

/* ================= 常見問題 / 回報頁 ================= */
.f textarea{resize:vertical;line-height:1.6}
.faqlist{display:flex;flex-direction:column;gap:6px}
.faq{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px}
.faq summary{cursor:pointer;color:var(--tx);font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋ ";color:var(--brand)}
.faq[open] summary::before{content:"− "}
.faq>div{margin-top:7px;color:var(--tx-2);white-space:pre-wrap;line-height:1.7}
.shot{position:relative;margin-top:8px;display:inline-block}
.shot img{max-width:100%;max-height:280px;border-radius:10px;border:1px solid var(--line);display:block}
.shot .mini{position:absolute;top:6px;right:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px}

/* ================= 帳密庫圖示 ================= */
.vname{display:flex;align-items:center;gap:9px}
.vname .vicon{flex:0 0 auto;color:var(--brand);opacity:.9}
.vname span{flex:1;min-width:0}

/* ================= 健康狀態 ================= */
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;display:inline-block}
.dot.up{background:var(--ok)} .dot.down{background:var(--danger)} .dot.unknown{background:var(--tx-3)}
.card.down{border-color:var(--danger)}
.downtag{background:var(--danger-soft);color:var(--danger);border-radius:8px;padding:6px 10px;font-size:12px;display:flex;align-items:center;gap:7px}

/* ================= 回報清單 ================= */
.rep{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow)}
.rep.open{border-left:3px solid var(--dev)}
.rep.closed{opacity:.62}
.rephead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.rephead .sys{font-weight:650;font-size:14px}
.rephead .who{font-size:12.5px;color:var(--tx-2)}
.rephead .when{font-size:12px;color:var(--tx-3);font-family:ui-monospace,Menlo,monospace}
.rephead .sp{flex:1}
.repmsg{font-size:14px;white-space:pre-wrap;line-height:1.7;background:var(--panel-2);border-radius:10px;padding:11px 13px}
.repmeta{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px;font-size:11.5px;color:var(--tx-3)}
.repmeta span{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.repmeta span.bad{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.repmeta span.good{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.repimg{margin-top:10px}
.repimg img{max-width:100%;border-radius:10px;border:1px solid var(--line);cursor:zoom-in}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px}

@media (max-width:720px){
  .stats{grid-template-columns:repeat(2,1fr)}
  header{padding-top:22px}
  h1.title{font-size:19px}
  .fields{grid-template-columns:1fr}
  .pwgrid{grid-template-columns:1fr}
  .credrow input.k{flex:0 0 40%}
}