:root{
    color-scheme:dark;
    --bg:#020617;
    --bg-soft:#071326;
    --panel:rgba(255,255,255,.055);
    --panel-strong:rgba(15,23,42,.78);
    --panel-soft:rgba(255,255,255,.075);
    --text:#f8fafc;
    --muted:#94a3b8;
    --muted-2:#64748b;
    --border:rgba(255,255,255,.10);
    --border-strong:rgba(103,232,249,.24);
    --primary:#22d3ee;
    --primary-dark:#2563eb;
    --primary-soft:rgba(34,211,238,.11);
    --danger:#fb7185;
    --success:#34d399;
    --warning:#fbbf24;
    --sidebar-bg:rgba(2,6,23,.74);
    --sidebar-text:#cbd5e1;
    --sidebar-muted:#64748b;
    --sidebar-hover:rgba(255,255,255,.065);
    --input-bg:rgba(15,23,42,.68);
    --table-head:rgba(255,255,255,.055);
    --shadow:0 24px 80px rgba(0,0,0,.32);
    --shadow-soft:0 18px 48px rgba(0,0,0,.22);
    --radius:24px;
    --radius-sm:16px;
    --gradient-blue:linear-gradient(135deg,rgba(14,165,233,.22),rgba(37,99,235,.09));
    --gradient-green:linear-gradient(135deg,rgba(20,184,166,.20),rgba(52,211,153,.08));
    --gradient-purple:linear-gradient(135deg,rgba(168,85,247,.20),rgba(37,99,235,.10));
    --gradient-amber:linear-gradient(135deg,rgba(251,191,36,.18),rgba(251,113,133,.08));
}

html[data-theme="light"]{
    color-scheme:light;
    --bg:#eef6fb;
    --bg-soft:#f8fbff;
    --panel:rgba(255,255,255,.82);
    --panel-strong:rgba(255,255,255,.94);
    --panel-soft:rgba(241,245,249,.86);
    --text:#0f172a;
    --muted:#64748b;
    --muted-2:#7c8aa0;
    --border:rgba(15,23,42,.10);
    --border-strong:rgba(37,99,235,.20);
    --primary:#0891b2;
    --primary-dark:#2563eb;
    --primary-soft:rgba(8,145,178,.10);
    --danger:#be123c;
    --success:#047857;
    --warning:#b45309;
    --sidebar-bg:rgba(2,6,23,.90);
    --sidebar-text:#e5edf8;
    --sidebar-muted:#94a3b8;
    --sidebar-hover:rgba(34,211,238,.10);
    --input-bg:rgba(255,255,255,.92);
    --table-head:rgba(241,245,249,.92);
    --shadow:0 24px 70px rgba(15,23,42,.12);
    --shadow-soft:0 14px 35px rgba(15,23,42,.08);
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
    margin:0;
    min-height:100vh;
    font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:14px;
    font-weight:500;
    letter-spacing:-.01em;
    background:
        radial-gradient(circle at top left,rgba(34,211,238,.22) 0,rgba(34,211,238,.08) 270px,transparent 620px),
        radial-gradient(circle at 75% 0%,rgba(37,99,235,.24) 0,transparent 520px),
        linear-gradient(135deg,var(--bg) 0%,var(--bg-soft) 48%,var(--bg) 100%);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}
html[data-theme="light"] body{
    background:
        radial-gradient(circle at top left,rgba(8,145,178,.14) 0,rgba(8,145,178,.05) 300px,transparent 680px),
        radial-gradient(circle at 75% 0%,rgba(37,99,235,.10) 0,transparent 560px),
        linear-gradient(135deg,var(--bg) 0%,var(--bg-soft) 52%,var(--bg) 100%);
}
a{color:var(--primary);font-weight:850;text-decoration:none}
a:hover{text-decoration:none;color:color-mix(in srgb,var(--primary),#fff 18%)}
h1,h2,h3,.brand,.metric{font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:800;letter-spacing:-.045em}
p{font-weight:500}

.shell{display:grid;grid-template-columns:292px minmax(0,1fr);min-height:100vh}
.sidebar{
    position:sticky;
    top:0;
    height:100vh;
    overflow:auto;
    border-right:1px solid var(--border);
    background:var(--sidebar-bg);
    backdrop-filter:blur(18px);
    padding:18px 16px;
    box-shadow:18px 0 60px rgba(0,0,0,.18);
}
.brand-block{display:flex;align-items:center;gap:12px;color:#fff;margin-bottom:20px;padding:0 4px}
.brand-mark{
    width:46px;
    height:46px;
    border-radius:18px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#06121f;
    box-shadow:0 16px 36px rgba(34,211,238,.22);
    font-size:24px;
    font-weight:950;
    overflow:hidden;
}
.brand{font-size:25px;line-height:1;color:#fff;letter-spacing:.03em}
.brand-subtitle{display:block;margin-top:3px;color:var(--primary);font-size:10px;text-transform:uppercase;letter-spacing:.18em;font-weight:950;line-height:1.35}
.side-nav{display:grid;gap:3px;margin-top:8px}
.nav-group{margin-bottom:16px}
.nav-label{color:var(--sidebar-muted);font-size:10px;letter-spacing:.20em;text-transform:uppercase;font-weight:950;padding:0 10px 7px}
.side-nav a{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--sidebar-text);
    border:1px solid transparent;
    border-radius:15px;
    padding:8px 10px;
    font-weight:600;
    transition:.18s;
}
.side-nav a:hover{background:var(--sidebar-hover);color:#fff;border-color:transparent}
.side-nav a.active{background:var(--primary-soft);color:#fff;border-color:var(--border-strong)}
.side-nav a.active i{color:var(--primary)}
.side-nav i{width:18px;color:var(--muted);text-align:center}
.sidebar .muted{color:var(--sidebar-muted)}

.main{min-width:0;padding: 0px 28px 60px;overflow:auto}
.topbar{
    position:sticky;
    top:0;
    z-index:20;
    margin:-24px -28px 22px;
    padding:18px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:rgba(2,6,23,.70);
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(18px);
}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.72)}
.breadcrumb{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;font-weight:800;margin-bottom:4px}
.breadcrumb::after{content:"";display:none}
.topbar h1{margin:0;font-size:26px;line-height:1.1;color:var(--text)}
.topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.logout-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin:0}
.user-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 13px;
    border-radius:999px;
    color:var(--text);
    background:rgba(255,255,255,.055);
    border:1px solid var(--border);
    font-size:13px;
    font-weight:850;
}
html[data-theme="light"] .user-chip{background:rgba(255,255,255,.80)}

.card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px;
    margin-bottom:18px;
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(14px);
}
.card h2{margin-top:0;margin-bottom:8px;color:var(--text);letter-spacing:-.045em}
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.form-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}
.wide{grid-column:span 2}
.metric{font-size:38px;font-weight:950;line-height:1;letter-spacing:-.055em;color:#fff}
html[data-theme="light"] .metric{color:var(--text)}
.muted{color:var(--muted)}
.small{font-size:13px}.compact{font-size:13px}.stack{display:grid;gap:12px}

label{display:grid;gap:7px;font-weight:850;font-size:13px;color:color-mix(in srgb,var(--text),var(--muted) 10%)}
input,select,textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:14px;
    padding:11px 13px;
    background:var(--input-bg);
    color:var(--text);
    font:inherit;
    font-weight:650;
}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted),transparent 8%)}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--primary),transparent 62%);outline-offset:1px;border-color:var(--primary)}

.btn,button{
    border:1px solid color-mix(in srgb,var(--primary),transparent 60%);
    border-radius:999px;
    padding:11px 16px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 14px 28px rgba(34,211,238,.13);
    transition:.18s;
}
.btn.secondary,button.secondary{background:rgba(255,255,255,.055);color:var(--text);border:1px solid var(--border);box-shadow:none}
html[data-theme="light"] .btn.secondary,html[data-theme="light"] button.secondary{background:rgba(255,255,255,.80)}
.btn:hover,button:hover{filter:brightness(1.05);text-decoration:none;transform:translateY(-1px)}
.btn:active,button:active{transform:translateY(0)}
.theme-toggle{min-width:116px}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline-form input,.inline-form select{width:auto;min-width:160px}

.table-wrap{overflow:auto;border-radius:var(--radius);border:1px solid var(--border);background:rgba(15,23,42,.30)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;border-bottom:1px solid var(--border);padding:13px 14px;vertical-align:top}
tr:last-child td{border-bottom:0}
th{background:var(--table-head);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.15em;font-weight:950}
tbody tr:hover{background:rgba(255,255,255,.035)}
.badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.055);
    color:var(--text);
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    font-weight:950;
    line-height:1;
}
.badge.warning{border-color:rgba(251,191,36,.26);background:rgba(251,191,36,.10);color:#fde68a}
.badge.success{border-color:rgba(52,211,153,.25);background:rgba(52,211,153,.10);color:#a7f3d0}
html[data-theme="light"] .badge.warning{color:#92400e}html[data-theme="light"] .badge.success{color:#065f46}
.alert{padding:12px 15px;border-radius:16px;margin-bottom:12px;border:1px solid var(--border);background:var(--panel);color:var(--text)}
.alert.error{border-color:rgba(251,113,133,.28);background:rgba(251,113,133,.12);color:#fecdd3}
.alert.success{border-color:rgba(52,211,153,.25);background:rgba(52,211,153,.10);color:#a7f3d0}
html[data-theme="light"] .alert.error{color:#9f1239}html[data-theme="light"] .alert.success{color:#065f46}

.guest{display:grid;place-items:center;min-height:100vh;background:radial-gradient(circle at 20% 10%,rgba(34,211,238,.18),transparent 35%),#020617}
.login-card{width:min(420px,92vw);background:#fff;color:#1f2937;border-radius:24px;padding:28px;box-shadow:0 25px 80px rgba(0,0,0,.25)}
.login-card h1{margin-top:0}.login-card .muted{color:#6b7280}.login-card input{background:#fff;color:#1f2937;border-color:#d9dee8}
code{white-space:pre-wrap;word-break:break-word;font-size:12px}

@media(max-width:1200px){.cards,.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shell{grid-template-columns:250px minmax(0,1fr)}.wide{grid-column:auto}}
@media(max-width:760px){.shell{display:block}.sidebar{height:auto;width:auto;position:static}.main{padding:18px}.topbar{align-items:flex-start;display:grid;margin:-18px -18px 18px;padding:16px 18px}.topbar-actions,.logout-form{justify-content:flex-start}.cards,.form-grid{grid-template-columns:1fr}.inline-form input,.inline-form select{width:100%}}

/* WAM fine-tune: topbar separation and cleaner light mode */
.topbar{
    margin-bottom: 40px;
}
.main > .topbar + *{
    margin-top:8px;
}
html[data-theme="light"]{
    --bg:#f4f7fb;
    --bg-soft:#ffffff;
    --panel:rgba(255,255,255,.92);
    --panel-strong:#ffffff;
    --panel-soft:#f8fafc;
    --text:#101827;
    --muted:#5b6b82;
    --muted-2:#7b8797;
    --border:rgba(15,23,42,.11);
    --border-strong:rgba(8,145,178,.24);
    --primary:#0ea5e9;
    --primary-dark:#2563eb;
    --primary-soft:rgba(14,165,233,.12);
    --input-bg:#ffffff;
    --table-head:#f1f5f9;
    --shadow:0 24px 70px rgba(15,23,42,.10);
    --shadow-soft:0 14px 38px rgba(15,23,42,.08);
}
html[data-theme="light"] body{
    background:
        radial-gradient(circle at 0% 0%,rgba(14,165,233,.13) 0,rgba(14,165,233,.045) 320px,transparent 720px),
        radial-gradient(circle at 80% 0%,rgba(37,99,235,.09) 0,transparent 620px),
        linear-gradient(135deg,#f4f7fb 0%,#ffffff 48%,#eef4fb 100%);
}
html[data-theme="light"] .topbar{
    background:rgba(255,255,255,.88);
    box-shadow:0 12px 34px rgba(15,23,42,.06);
}
html[data-theme="light"] .card{
    background:rgba(255,255,255,.92);
    border-color:rgba(15,23,42,.10);
    box-shadow:0 16px 42px rgba(15,23,42,.08);
}
html[data-theme="light"] .table-wrap{
    background:#ffffff;
    border-color:rgba(15,23,42,.14);
}
html[data-theme="light"] th{
    background:#f1f5f9;
    color:#64748b;
}
html[data-theme="light"] td{
    color:#172033;
    border-bottom-color:rgba(15,23,42,.10);
}
html[data-theme="light"] tbody tr:hover{
    background:#f8fafc;
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
    background:#ffffff;
    border-color:#d6dee9;
    color:#111827;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{
    color:#94a3b8;
}
html[data-theme="light"] .btn.secondary,
html[data-theme="light"] button.secondary,
html[data-theme="light"] .user-chip{
    background:#ffffff;
    border-color:#d6dee9;
    color:#111827;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
}
html[data-theme="light"] .badge{
    background:#f8fafc;
    border-color:#d6dee9;
    color:#111827;
}
html[data-theme="light"] .alert{
    background:#ffffff;
}

@media(max-width:760px){
    .topbar{margin-bottom:22px}
    .main > .topbar + *{margin-top:4px}
}