:root { --bg:#0f172a; --panel:#fff; --line:#e2e8f0; --ink:#1e293b; --muted:#64748b; --brand:#1d4ed8; --danger:#dc2626; --ok:#16a34a; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; color: var(--ink); background:#f1f5f9; }
a { color: var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }

.topbar { display:flex; align-items:center; gap:18px; background:var(--bg); color:#fff; padding:10px 20px; }
.topbar .brand { font-weight:700; display:flex; align-items:center; gap:8px; }
.topbar .brand-mark { width:26px; height:26px; border-radius:7px; vertical-align:middle; }
.topbar .nav { display:flex; gap:14px; flex:1; flex-wrap:wrap; }
.topbar .nav a { color:#cbd5e1; }
.topbar .nav a:hover { color:#fff; text-decoration:none; }
.topbar .logout { display:flex; align-items:center; gap:10px; }
.topbar .who { color:#94a3b8; font-size:13px; }
.topbar button { background:#334155; color:#fff; border:0; padding:6px 12px; border-radius:6px; cursor:pointer; }

.content { max-width:1100px; margin:24px auto; padding:0 16px; }
h1 { font-size:22px; } h2 { font-size:16px; }
.muted { color: var(--muted); }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px; }
.stat .num { font-size:30px; font-weight:700; color:var(--brand); }
.stat .lbl { color:var(--muted); margin-top:4px; }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin:16px 0; }
.row { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
label { display:flex; flex-direction:column; font-size:13px; gap:4px; color:var(--muted); }
input, select, textarea { font-size:14px; padding:7px 9px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; }
button, .btn { background:var(--brand); color:#fff; border:0; padding:8px 14px; border-radius:6px; cursor:pointer; font-size:14px; display:inline-block; }
button.danger, .danger { background:var(--danger); }
button:hover, .btn:hover { opacity:.92; text-decoration:none; }

table.grid { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-top:8px; }
.grid th, .grid td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); font-size:14px; }
.grid th { background:#f8fafc; color:var(--muted); font-weight:600; }
.grid tr:last-child td { border-bottom:0; }

.flash { padding:10px 14px; border-radius:8px; margin:12px 0; }
.flash.ok { background:#dcfce7; color:#166534; }
.flash.err { background:#fee2e2; color:#991b1b; }

.login-card { max-width:380px; margin:9vh auto; background:#fff; border:1px solid var(--line); border-radius:12px; padding:28px; }
.login-card h1 { font-size:18px; margin:0 0 4px; }
.login-card h2 { font-size:14px; color:var(--muted); margin:0 0 18px; font-weight:500; }
.login-card form { display:flex; flex-direction:column; gap:14px; }
.login-card button { padding:10px; font-size:15px; }

.row.row-tight { gap:6px; }
.inp-wide { width:280px; max-width:100%; }

code, .mono { font-family: ui-monospace, Consolas, monospace; }
.codes { background:#0f172a; color:#e2e8f0; padding:12px; border-radius:8px; max-height:260px; overflow:auto; white-space:pre; font-family: ui-monospace, Consolas, monospace; font-size:13px; }