:root { --bg:#0f1115; --panel:#1a1d24; --line:#2a2e38; --fg:#e6e8ee; --muted:#8b91a0; --accent:#4f8cff; --err:#ff6b6b; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--fg); }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--panel); }
.brand { font-weight:600; color:var(--fg); text-decoration:none; }
.topbar nav { display:flex; align-items:center; gap:14px; }
.user { color:var(--muted); }
.inline { display:inline; margin:0; }
.linkbtn { background:none; border:none; color:var(--accent); cursor:pointer; font:inherit; padding:0; }
.container { max-width:880px; margin:32px auto; padding:0 20px; }
h1 { font-size:22px; margin:0 0 20px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px; }
.card.narrow { max-width:380px; margin:48px auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.card-label { color:var(--muted); font-size:13px; }
.card-value { font-size:26px; font-weight:600; margin:6px 0; }
.card-sub { color:var(--muted); font-size:12px; }
label { display:block; margin:0 0 14px; color:var(--muted); font-size:13px; }
input { display:block; width:100%; margin-top:6px; padding:9px 11px; background:var(--bg); border:1px solid var(--line); border-radius:7px; color:var(--fg); font:inherit; }
button[type=submit] { width:100%; padding:10px; background:var(--accent); color:#fff; border:none; border-radius:7px; font:inherit; cursor:pointer; }
.error { background:rgba(255,107,107,.12); border:1px solid var(--err); color:var(--err); padding:10px 12px; border-radius:7px; margin-bottom:14px; font-size:14px; }
.flash { background:rgba(79,140,255,.12); border:1px solid var(--accent); padding:10px 12px; border-radius:7px; margin-bottom:18px; }
.links { display:flex; gap:16px; margin-top:22px; }
.links a { color:var(--accent); text-decoration:none; }
.row-form { display:flex; gap:10px; }
.row-form input { flex:1; margin-top:0; }
.row-form button { width:auto; padding:9px 16px; white-space:nowrap; }
.tbl { width:100%; border-collapse:collapse; margin-top:18px; }
.tbl th, .tbl td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); font-size:14px; }
.tbl th { color:var(--muted); font-weight:500; font-size:12px; }
.muted { color:var(--muted); }
.linkbtn.danger { color:var(--err); }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.newkey .keyval { display:block; margin-top:8px; padding:8px 10px; background:var(--bg); border:1px solid var(--line); border-radius:6px; word-break:break-all; }
.topbar nav a { color:var(--accent); text-decoration:none; }
.card-value.danger { color:var(--err); }
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; }
.b-active { background:rgba(80,200,120,.15); color:#50c878; }
.b-cooling, .b-degraded { background:rgba(255,180,0,.15); color:#ffb400; }
.b-dead { background:rgba(255,107,107,.15); color:var(--err); }
.b-draining, .b-revoked { background:rgba(139,145,160,.18); color:var(--muted); }
.stack-form label { display:block; }
.stack-form input { width:100%; }
.stack-form button, .stack-form .row4 ~ button { width:auto; padding:9px 18px; margin-top:6px; }
.row4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.cb { display:flex; align-items:center; gap:8px; }
.cb input { width:auto; margin:0; }
.codes { width:100%; margin-top:8px; background:var(--bg); border:1px solid var(--line); border-radius:6px; color:var(--fg); font-family:ui-monospace,monospace; font-size:12px; padding:8px; }
.sub { font-size:16px; margin:18px 0 12px; }