/* zdreader 管理后台 · 经典后台布局（左侧固定 nav bar + 右侧内容区）
 *
 * 独立站点：部署到 Cloudflare Pages 项目 zdreader-admin，对外域名 admin.zdreader.com。
 * 所有数据请求打到 /api/*，由 Pages Function 同源反代到 Worker（浏览器不直连 Worker）。
 * 深色主题是刻意选择：后台长时间盯表格，暗色更省眼。
 */

:root{
  --bg:#0f1117; --panel:#161923; --panel2:#1c2029; --line:#262b38;
  --text:#e6e8ee; --dim:#8b93a7; --accent:#4c8dff; --ok:#3fb950; --warn:#d29922; --bad:#f85149;
  --radius:8px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--text);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  display:flex;
}
a{color:var(--accent);text-decoration:none}
code{background:var(--panel2);padding:1px 5px;border-radius:4px;font-size:12px}

/* ---------- 左菜单 ---------- */
aside{
  width:212px;flex:0 0 212px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;height:100vh;position:sticky;top:0;
}
.brand{padding:18px 16px;border-bottom:1px solid var(--line);font-weight:600;letter-spacing:.3px}
.brand small{display:block;color:var(--dim);font-weight:400;font-size:11px;margin-top:2px}
nav{padding:10px 0;overflow:auto;flex:1}
nav a{
  display:flex;align-items:center;gap:9px;padding:9px 16px;color:var(--dim);
  border-left:2px solid transparent;cursor:pointer;
}
nav a:hover{background:var(--panel2);color:var(--text)}
nav a.on{color:var(--text);background:var(--panel2);border-left-color:var(--accent)}
nav a .ico{width:15px;text-align:center;opacity:.85}
nav .grp{padding:14px 16px 6px;color:#5b637a;font-size:11px;text-transform:uppercase;letter-spacing:.8px}
.side-foot{border-top:1px solid var(--line);padding:12px 16px;font-size:11px;color:var(--dim)}

/* ---------- 主区 ---------- */
main{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh}
header{
  height:56px;flex:0 0 56px;border-bottom:1px solid var(--line);background:var(--panel);
  display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:5;
}
header h1{font-size:15px;margin:0;font-weight:600}
header .sp{flex:1}
input,button,select{font:inherit}
input[type=password],input[type=text],select{
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:6px 9px;border-radius:6px;outline:none;
}
input:focus{border-color:var(--accent)}
button{
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:6px 12px;border-radius:6px;cursor:pointer;
}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button:disabled{opacity:.5;cursor:default}
#content{padding:20px;overflow:auto;flex:1}
.hidden{display:none!important}

/* ---------- 组件 ---------- */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:1fr}}
@media(max-width:720px){.g4,.g3{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.card h3{margin:0 0 12px;font-size:13px;color:var(--dim);font-weight:500;letter-spacing:.3px}
.kpi .v{font-size:23px;font-weight:600;font-variant-numeric:tabular-nums}
.kpi .l{color:var(--dim);font-size:12px}
.kpi .d{font-size:11px;margin-top:4px;color:var(--dim)}
.kpi .d.up{color:var(--ok)}.kpi .d.down{color:var(--bad)}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--dim);font-weight:500;font-size:12px;position:sticky;top:0;background:var(--panel)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr:hover td{background:var(--panel2)}
tbl-wrap{display:block;max-height:460px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}
.tbl-wrap{display:block;max-height:460px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}
.tbl-wrap table{min-width:100%}
.tbl-wrap thead th{position:sticky;top:0;z-index:1}

.bar{height:6px;border-radius:3px;background:var(--panel2);overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;background:var(--accent)}
.badge{display:inline-block;padding:1px 7px;border-radius:20px;font-size:11px;background:var(--panel2);color:var(--dim)}
.badge.ok{color:var(--ok)}.badge.warn{color:var(--warn)}.badge.bad{color:var(--bad)}

.tag{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--panel2);font-size:12px;margin:2px 4px 2px 0}
.spark{display:flex;align-items:flex-end;gap:2px;height:52px}
.spark i{flex:1;background:var(--accent);border-radius:2px 2px 0 0;min-height:2px;opacity:.75}
.spark i:hover{opacity:1}

.empty{color:var(--dim);padding:28px;text-align:center}
.err{color:var(--bad);padding:12px;border:1px solid var(--bad);border-radius:var(--radius);margin-bottom:14px}
.note{color:var(--dim);font-size:12px;margin:8px 0 0}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{background:var(--panel2);border:1px solid var(--line);padding:3px 10px;border-radius:20px;font-size:12px;cursor:pointer}
.pill.on{border-color:var(--accent);color:var(--accent)}