:root{
  --bg:#0f172a; --panel:#111827; --soft:#1f2937; --accent:#6366f1;
  --text:#e5e7eb; --muted:#9ca3af; --danger:#ef4444; --ok:#10b981; --warn:#f59e0b; --border:#374151;
}
*{box-sizing:border-box}
body{ margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
a{ color:var(--text); text-decoration:none } a:hover{ color:var(--accent) }
.container{ max-width:1200px; margin:1.5rem auto; padding:0 1rem }
.topbar{ position:sticky; top:0; z-index:10; background:linear-gradient(180deg, rgba(0,0,0,.4), transparent), var(--panel); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; }
.brand{ font-weight:700; letter-spacing:.3px }
.nav a{ margin:0 .5rem; padding:.4rem .6rem; border-radius:.5rem } .nav a:hover{ background:var(--soft) }
.card{ background:var(--panel); border:1px solid var(--border); border-radius:.8rem; padding:1rem; margin-bottom:1rem; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.grid{ display:grid; gap:1rem } .grid-2{ grid-template-columns:repeat(2,1fr) } .grid-3{ grid-template-columns:repeat(3,1fr) } .grid-4{ grid-template-columns:repeat(4,1fr) }
@media(max-width:960px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr } }
.table{ width:100%; border-collapse:collapse; font-size:.95rem } .table th,.table td{ padding:.6rem .5rem; border-bottom:1px solid var(--border) } .table th{ text-align:left; color:var(--muted); font-weight:600 } .table tr:hover td{ background:rgba(255,255,255,.02) }
.btn{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--border); border-radius:.6rem; padding:.45rem .75rem; background:var(--soft); color:var(--text); cursor:pointer; font-weight:600; }
.btn:hover{filter:brightness(1.05)} .btn-primary{ background:var(--accent); border-color:transparent } .btn-danger{ background:var(--danger); border-color:transparent } .btn-ok{ background:var(--ok); border-color:transparent } .btn-warn{ background:var(--warn); border-color:transparent } .btn-ghost{ background:transparent }
.input, select, textarea{ background:#0b1220; border:1px solid var(--border); border-radius:.5rem; padding:.55rem .65rem; color:var(--text); }
label{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:.25rem }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem } @media(max-width:640px){ .row{ grid-template-columns:1fr } }
.badge{ display:inline-block; padding:.2rem .5rem; background:var(--soft); border-radius:.5rem; font-size:.8rem; color:var(--muted) }
.kpi{ display:flex; align-items:center; justify-content:space-between } .kpi .value{ font-size:1.4rem; font-weight:800 } .kpi .label{ color:var(--muted); font-size:.85rem }
.calendar{ display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem }
.day{ min-height:100px; background:var(--panel); border:1px solid var(--border); border-radius:.6rem; padding:.5rem; position:relative; }
.day .date{ font-size:.85rem; color:var(--muted) } .day .sum{ position:absolute; right:.5rem; bottom:.5rem; font-weight:700; font-size:.9rem }
.day.today{ outline:2px solid var(--accent); box-shadow:0 0 0 2px rgba(99,102,241,.2) inset; }
.toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem } .toolbar .title{ font-size:1.2rem; font-weight:700 }
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:100; }
.modal.open{ display:flex } .modal .dialog{ width:min(900px, 94vw); max-height:90vh; overflow:auto; background:var(--panel); border:1px solid var(--border); border-radius:.8rem; padding:1rem; }
.help{ color:var(--muted); font-size:.85rem } hr{ border:0; border-top:1px solid var(--border); margin:1rem 0 }
.footer{ padding:2rem 1rem; color:var(--muted); text-align:center; }
.note{ color:var(--muted); font-size:.85rem }