/* WEES Radio Manager — design system */
:root{
  --teal:#1f9aa1; --teal-deep:#0e3137; --coral:#ff6b54; --green:#1aa34a; --red:#e04141; --amber:#e0a106;
  --ink:#14232a; --ink-2:#2c3f47; --muted:#6a818a; --line:#e7edf0; --line-2:#eef3f5;
  --bg:#f4f6f8; --card:#ffffff;
  --sb:#0e2c31; --sb-2:#0a2227; --sb-ink:#d6ebed; --sb-mut:#7fa6ab; --sb-active:#1f9aa1;
  --shadow:0 1px 2px rgba(16,55,60,.04), 0 4px 16px rgba(16,55,60,.06);
  --shadow-lg:0 12px 34px rgba(16,55,60,.14);
  --radius:14px; --radius-sm:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#e9f1f2; --ink-2:#c6d6d9; --muted:#8ba3a9; --line:#1e3238; --line-2:#182a2f;
  --bg:#0a1518; --card:#102128; --sb:#081c20; --sb-2:#061417; --sb-ink:#cfe6e8; --sb-mut:#5f898f;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 16px 40px rgba(0,0,0,.5);
}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14.5px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.1px}
a{color:var(--teal);text-decoration:none}
.ic{width:18px;height:18px;flex:0 0 18px;display:inline-block;vertical-align:-3px}

/* ---- layout ---- */
.shell{display:flex;min-height:100vh}
.sidebar{width:244px;flex:0 0 244px;background:linear-gradient(180deg,var(--sb),var(--sb-2));color:var(--sb-ink);
  position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:18px 18px 16px;font-weight:800;font-size:15.5px;color:#fff;letter-spacing:-.2px}
.sidebar .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,107,84,.22)}
.sidebar nav{padding:6px 12px 26px}
.sidebar .grp{display:flex;align-items:center;gap:8px;font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--sb-mut);font-weight:700;padding:16px 10px 6px}
.sidebar .grp .ic{width:14px;height:14px;flex-basis:14px;opacity:.85}
.sidebar a.nl{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;color:var(--sb-ink);
  font-weight:550;font-size:13.5px;transition:background .12s,color .12s;position:relative}
.sidebar a.nl .ic{opacity:.75}
.sidebar a.nl:hover{background:rgba(255,255,255,.06)}
.sidebar a.nl.active{background:rgba(31,154,161,.18);color:#fff}
.sidebar a.nl.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--sb-active)}
.sidebar a.nl.active .ic{opacity:1;color:var(--teal)}
.sidebar .home-link{color:#fff;font-weight:700}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;height:58px;background:color-mix(in srgb,var(--card) 88%,transparent);
  backdrop-filter:saturate(1.3) blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 22px}
.topbar .burger{display:none;font-size:20px;background:none;border:0;color:var(--ink);cursor:pointer}
.topbar .sp{flex:1}
.topbar .acc{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);font-weight:600}
.topbar .acc .ic{width:16px;height:16px;flex-basis:16px}
.content{padding:26px 28px;max-width:1200px;width:100%}

/* ---- live pills ---- */
.live{display:flex;gap:8px;align-items:center}
.pill{display:none;align-items:center;gap:7px;font-weight:800;font-size:11px;letter-spacing:.05em;padding:5px 12px;border-radius:999px}
.pill .b{width:8px;height:8px;border-radius:50%;background:#fff}
.pill.onair{background:var(--green);color:#fff;box-shadow:0 0 0 3px rgba(26,163,74,.2)}
.pill.mic{background:var(--red);color:#fff;box-shadow:0 0 0 3px rgba(224,65,65,.2)}
.pill.show{display:inline-flex;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.72}}

/* ---- typography / components ---- */
h1{font-size:24px;font-weight:800;letter-spacing:-.4px;margin:0 0 3px}
.sub{color:var(--muted);margin:0 0 18px}
h2.sec{display:flex;align-items:center;gap:9px;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:800;margin:26px 0 13px}
h2.sec .ic{width:15px;height:15px;flex-basis:15px}
h2.sec::after{content:"";flex:1;height:1px;background:var(--line)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:17px 19px}
.grid{display:grid;gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 20px;box-shadow:var(--shadow)}
.stat .l{display:flex;align-items:center;gap:7px;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.stat .v{font-size:29px;font-weight:800;line-height:1.1;letter-spacing:-.6px;margin-top:3px}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:8px 14px;font-weight:600;font-size:13px;color:var(--ink);cursor:pointer;transition:border-color .12s,transform .05s}
.btn:hover{border-color:var(--teal)} .btn:active{transform:translateY(1px)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff} .btn.primary:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.5;cursor:default}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);font-size:12.5px;font-weight:600;color:var(--ink-2)}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--line);padding:9px 10px}
table.t td{border-bottom:1px solid var(--line-2);padding:11px 10px}
table.t tr:last-child td{border-bottom:0}
input,select,textarea{font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(31,154,161,.25);border-color:var(--teal)}
label{font-size:12px;color:var(--muted);font-weight:600}
code{background:var(--line-2);padding:1px 6px;border-radius:6px;font-size:.88em}

footer.wees{padding:16px 28px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;display:flex;gap:10px;align-items:center}
footer.wees .pb{margin-left:auto;font-weight:700;color:var(--teal)}

/* ---- dashboard module cards ---- */
.mcard{display:block;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);transition:transform .13s,box-shadow .13s,border-color .13s;overflow:hidden}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.mcard .mtop{display:flex;align-items:center;gap:11px;padding:15px 16px 0}
.mcard .mi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;background:var(--accent)}
.mcard .mi .ic{width:20px;height:20px;flex-basis:20px}
.mcard .mname{font-weight:750;font-size:15.5px}
.mcard .mbody{padding:9px 16px 16px}
.mcard .mdesc{color:var(--muted);font-size:12.5px;line-height:1.45}
.mdim{opacity:.5}

/* ---- auth ---- */
.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;
  background:radial-gradient(1100px 560px at 50% -15%,rgba(31,154,161,.22),transparent),var(--bg)}
.auth-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:28px}
.auth-card .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;margin-bottom:20px}
.auth-card .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,107,84,.22)}
.auth-card label{display:block;margin:0 0 5px}
.auth-card input{width:100%;margin-bottom:14px}
.auth-card .btn.primary{width:100%;justify-content:center;padding:11px;font-size:15px}
.auth-foot{font-size:12px;color:var(--muted)} .auth-foot a{color:var(--teal);font-weight:700}

@media (max-width:860px){
  .sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .topbar .burger{display:block}
  .content{padding:18px 16px}
}