:root{
  --bg:#0b0f17; --panel:#101723; --line:#1e2a3d; --txt:#e8edf6; --muted:#9fb1c9;
  --brand:#ff7a1a; --brand-2:#ffb15e; --ok:#16a34a; --err:#ef4444; --warn:#f59e0b;
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--txt);
  font:14.5px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;}
a{color:var(--brand); text-decoration:none}
.container{display:grid; grid-template-columns: 240px 1fr; min-height:100vh}
.aside{background:linear-gradient(180deg,#0e1522,#0b111c); border-right:1px solid var(--line)}
.brand{padding:16px 18px; font-weight:800; letter-spacing:.2px}
.nav{display:flex; flex-direction:column; gap:6px; padding:6px}
.nav a{display:flex; align-items:center; gap:10px; color:#cfe3ff;padding:10px 12px; border-radius:10px; border:1px solid transparent}
.nav a.sub{padding-left:28px; font-size:13px; opacity:.92}
.nav a:hover{background:#0f1828; border-color:#1f2c46}
.nav a.active{background:linear-gradient(180deg,#16233a,#111b2d); border-color:#2a405f; box-shadow:inset 0 0 0 1px #2a405f}
.main{display:flex; flex-direction:column; min-width:0}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#0f1624,#0b111a)}
.user{display:flex; align-items:center; gap:10px; color:#cfe3ff}
.page{padding:18px 18px 32px}
.h1{font-size:22px; margin:0 0 12px}
.grid{display:grid; gap:14px}
.grid.kpis{grid-template-columns: repeat(4, minmax(180px,1fr))}
.card{background:linear-gradient(180deg,#121a2a,#0f1624); border:1px solid #1f2b44; border-radius:14px; padding:14px}
.card h3{margin:0 0 8px; font-size:15px; color:#cfe3ff}
.kpi{font-size:28px; font-weight:800}
.badge{display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; border:1px solid #2a3c5a; background:#0f1828; color:#9fb1c9; font-size:12px}
.toolbar{display:flex; gap:10px; align-items:center; margin:10px 0 2px}
.input{padding:10px 12px;border-radius:10px;border:1px solid #2a3c5a;background:#0f1624;color:#e8edf6;outline:none}
.btn{--g:linear-gradient(90deg,var(--brand),var(--brand-2)); border:0;color:#111;background:var(--g); padding:10px 14px; font-weight:700;border-radius:12px; cursor:pointer}
.btn.ghost{background:#0f1828; color:#cfe3ff; border:1px solid #253753}
.btn.warn{background:linear-gradient(90deg,#eab308,#f59e0b)}
.list{display:grid; gap:10px}
.item{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border:1px solid #223453; border-radius:12px; background:linear-gradient(180deg,#111a2b,#0e1524)}
.item .meta{color:#9fb1c9}
.item.event-today{border-color:rgba(255,122,26,.75); box-shadow:0 0 0 1px rgba(255,122,26,.35), 0 0 22px rgba(255,122,26,.22)}
.small{font-size:12px; color:#9fb1c9}
.table{width:100%; border-collapse:collapse; font-size:13px}
.table th,.table td{border-bottom:1px solid #20304a; padding:10px}
.table th{color:#cfe3ff; text-align:left; background:#0f1828}
.toast{position:fixed; left:50%; bottom:26px; translate:-50% 10px; opacity:0; pointer-events:none; transition:.25s; background:#0f1624; border:1px solid #2a3c5a; padding:10px 14px; border-radius:12px}
.toast.show{opacity:1; translate:-50% 0}
.bubble{position:fixed; right:18px; bottom:18px}
.bubble button{width:56px;height:56px;border-radius:50%; border:0; cursor:pointer; background:linear-gradient(135deg,#ff7a1a,#ffb15e); color:#111; font-weight:900; box-shadow:0 12px 28px #ff7a1a44}
.bubble button:hover{transform:translateY(-1px)}