:root {
  --bg:#f4ecd9; --panel:#fffaf0; --panel2:#fbf1de; --line:#e4d5b4;
  --text:#261c0c; --muted:#8a754d; --accent:#b57a1f; --accent2:#8a5a12;
  --danger:#c0392b; --ok:#1e8a5a; --warn:#c07f17;
  --goldgrad:linear-gradient(135deg,#e9b04b,#b57a1f);
  --radius:14px;
  --shadow:0 14px 40px rgba(90,62,12,.18);
}
[data-theme="dark"] { --bg:#0b0d12; --panel:#141118; --panel2:#1c1722; --line:#33281f; --text:#f5e9d8; --muted:#b39d7f; --accent:#e9b04b; --accent2:#b57a1f; --goldgrad:linear-gradient(135deg,#e9b04b,#b57a1f); --shadow:0 10px 30px rgba(0,0,0,.45); }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font:15px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }

/* ---------- login ---------- */
.login-screen { min-height:100vh; display:grid; place-items:center; background:radial-gradient(1200px 500px at 70% -10%, rgba(233,176,75,.35) 0%, transparent 55%), radial-gradient(900px 400px at 0% 110%, rgba(181,122,31,.22) 0%, transparent 60%), var(--bg); }
.login-card { width:360px; background:var(--panel); border:1.5px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.brand .logo { width:48px; height:48px; border-radius:12px; background:var(--goldgrad); display:grid; place-items:center; font-weight:900; font-size:20px; color:#fff; box-shadow:0 8px 20px rgba(181,122,31,.4); }
.brand h1 { margin:0; font-size:19px; font-weight:800; }
.brand p { margin:0; color:var(--muted); font-size:13px; }
.login-card label { display:block; margin-bottom:15px; color:var(--muted); font-size:13px; font-weight:700; }
.login-card input { width:100%; margin-top:6px; padding:12px 13px; border:1.5px solid var(--line); border-radius:9px; background:var(--panel2); color:var(--text); font-size:14px; font-weight:600; }
.login-card input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,122,31,.25); }
.alert { padding:11px 13px; border-radius:9px; margin-bottom:15px; font-size:13px; font-weight:700; }
.alert.error { background:rgba(192,57,43,.1); color:var(--danger); border:1.5px solid var(--danger); }
.alert.ok { background:rgba(30,138,90,.1); color:var(--ok); border:1.5px solid var(--ok); }
.foot { color:var(--muted); font-size:12px; text-align:center; margin-top:18px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:9px; padding:11px 15px; font-size:14px; cursor:pointer; font-weight:800; transition:.15s; text-decoration:none; }
.btn.primary { background:var(--goldgrad); color:#fff; width:100%; box-shadow:0 10px 26px rgba(181,122,31,.4); }
.btn.primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.btn.primary:active { transform:translateY(0); }
.btn.ghost { background:transparent; color:var(--muted); border:1.5px solid var(--line); font-weight:700; }
.btn.ghost:hover { color:var(--accent); border-color:var(--accent); }
.btn.sm { padding:7px 11px; font-size:12px; }
.btn.danger { background:rgba(192,57,43,.12); color:var(--danger); border:1.5px solid var(--danger); }
.btn.danger:hover { background:var(--danger); color:#fff; }
button.link { background:none; border:0; color:var(--muted); cursor:pointer; font-size:13px; text-decoration:underline; padding:0; font-weight:700; }
button.link:hover { color:var(--accent); }

/* ---------- app shell ---------- */
.app { display:grid; grid-template-columns:230px 1fr; grid-template-rows:58px 1fr; min-height:100vh; }
.topbar { grid-column:1/3; display:flex; align-items:center; justify-content:space-between; padding:0 24px; background:var(--panel); border-bottom:1.5px solid var(--line); box-shadow:0 2px 14px rgba(90,62,12,.08); }
.topbar .brand { margin:0; font-weight:900; letter-spacing:.2px; }
.topbar .brand .logo { box-shadow:0 6px 18px rgba(181,122,31,.35); }
.who { display:flex; align-items:center; gap:12px; }
.who .badge { background:var(--goldgrad); color:#fff; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:800; box-shadow:0 4px 12px rgba(181,122,31,.3); }
.sidebar { background:var(--panel); border-right:1.5px solid var(--line); padding:18px 12px; }
.sidebar a { display:block; padding:11px 15px; border-radius:9px; color:var(--muted); cursor:pointer; font-size:14px; font-weight:700; margin-bottom:5px; border:1.5px solid transparent; }
.sidebar a:hover { color:var(--accent); background:var(--panel2); }
.sidebar a.active { background:var(--goldgrad); color:#fff; box-shadow:0 8px 18px rgba(181,122,31,.3); }
.main { padding:28px; overflow:auto; }
.view { max-width:1100px; }

/* ---------- widgets ---------- */
.card { background:var(--panel); border:1.5px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:18px; box-shadow:0 4px 16px rgba(90,62,12,.06); }
.card h3 { margin:0 0 14px; font-size:16px; color:var(--accent); font-weight:900; }
.card p.hint { color:var(--muted); font-size:13px; margin:6px 0 0; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.stat { background:var(--panel); border:1.5px solid var(--line); border-radius:12px; padding:18px; box-shadow:0 4px 14px rgba(90,62,12,.06); }
.stat .num { font-size:28px; font-weight:900; letter-spacing:.3px; }
.stat .lbl { color:var(--muted); font-size:12px; margin-top:2px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.stat .num.accent{ color:var(--accent);} .stat .num.green{ color:var(--ok);} .stat .num.orange{ color:var(--warn);}
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th, td { text-align:left; padding:11px 13px; border-bottom:1.5px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
tr:hover td { background:var(--panel2); }
.tag { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:800; }
.tag.active { background:rgba(30,138,90,.14); color:var(--ok); }
.tag.revoked { background:rgba(192,57,43,.14); color:var(--danger); }
.tag.rw { background:rgba(181,122,31,.16); color:var(--accent); } .tag.ro { background:rgba(47,128,237,.16); color:#2c6fd1; } .tag.wo { background:rgba(192,127,23,.15); color:var(--warn); }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; word-break:break-all; font-weight:600; }
input, select, textarea { background:var(--panel2); border:1.5px solid var(--line); color:var(--text); border-radius:9px; padding:10px 12px; font-size:13.5px; font-weight:600; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,122,31,.2); }
label.f { display:block; margin-bottom:13px; font-size:13px; color:var(--muted); font-weight:700; }
label.f input, label.f select { width:100%; margin-top:6px; }
.row { display:flex; gap:12px; flex-wrap:wrap; } .row > * { flex:1; min-width:180px; }
.mb { margin-bottom:14px; }
.toast { position:fixed; right:22px; bottom:22px; padding:13px 19px; border-radius:11px; font-size:14px; box-shadow:var(--shadow); z-index:50; animation:pop .2s ease; font-weight:800; }
.toast.ok { background:var(--ok); color:#fff; } .toast.err { background:var(--danger); color:#fff; } .toast.info { background:var(--accent); color:#fff; }
@keyframes pop { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
.code { background:#fffdf6; border:1.5px solid var(--line); border-radius:9px; padding:13px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; overflow:auto; white-space:pre-wrap; word-break:break-all; font-weight:600; }
[data-theme="dark"] .code { background:#0c0a07; }
.landing-toggle { display:flex; gap:8px; } .landing-toggle button { background:var(--panel2); border:1.5px solid var(--line); color:var(--muted); padding:9px 13px; border-radius:9px; cursor:pointer; font-size:12.5px; font-weight:700; } .landing-toggle button.active { border-color:var(--accent); color:var(--accent); background:rgba(181,122,31,.12); }
.linkbtn { color:var(--accent); cursor:pointer; text-decoration:underline; font-size:13px; font-weight:700; background:none; border:0; }