:root{ --bg:#0f172a; --card:#111c33; --text:#e5e7eb; --muted:#9ca3af; --accent:#f97316; --border:rgba(255,255,255,.08); }
[data-theme="light"]{ --bg:#f7f7fb; --card:#ffffff; --text:#111827; --muted:#6b7280; --accent:#f97316; --border:rgba(17,24,39,.10); }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text); }
a{ color:var(--text); text-decoration:none; }
.container{ max-width:1200px; margin:0 auto; padding:24px; }
.topbar{ display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--border); background:rgba(0,0,0,.05); position:sticky; top:0; backdrop-filter: blur(8px); }
.brand{ display:flex; gap:12px; align-items:center; }
.brand img{ height:34px; width:auto; border-radius:8px; background:transparent; }
.brand .title{ font-weight:900; letter-spacing:.3px; }
.pill{ padding:8px 12px; border:1px solid var(--border); border-radius:999px; color:var(--muted); }
.grid{ display:grid; grid-template-columns: 260px 1fr; gap:18px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.12); }
.nav a{ display:flex; justify-content:space-between; padding:10px 12px; border-radius:12px; color:var(--text); }
.nav a:hover{ background:rgba(255,255,255,.06); }
.nav a.active{ background:rgba(249,115,22,.16); border:1px solid rgba(249,115,22,.35); }
.h{ margin:0 0 12px 0; font-size:18px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; }
input, select, textarea{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:transparent; color:var(--text); outline:none; }
label{ color:var(--muted); font-size:12px; display:block; margin:10px 0 6px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--text); cursor:pointer; }
.btn.primary{ background:rgba(249,115,22,.20); border:1px solid rgba(249,115,22,.45); }
.btn.danger{ background:rgba(239,68,68,.16); border:1px solid rgba(239,68,68,.35); }
.btn.small{ padding:8px 10px; border-radius:10px; font-size:12px; }
.table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:14px; border:1px solid var(--border); }
.table th, .table td{ padding:10px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.table th{ color:var(--muted); font-weight:800; font-size:12px; }
.table tr:last-child td{ border-bottom:none; }
.badge{ padding:6px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted); font-size:12px; }
.flash{ margin:0 0 12px 0; }
.flash .item{ padding:10px 12px; border-radius:14px; border:1px solid var(--border); margin-bottom:8px; }
.flash .ok{ border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.12); }
.flash .err{ border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.12); }
small{ color:var(--muted); }
.login-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card{ width:min(440px, 100%); }
.footer{ color:var(--muted); font-size:12px; margin-top:14px; text-align:center; }
hr{ border:none; border-top:1px solid var(--border); margin:14px 0; }
.kbd{ font-size:12px; padding:2px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted); }