
:root{
  --bg:#0e1320;
  --header:#0b1c37;
  --panel:#0f1c33;
  --card:#ffffff;
  --ink:#0b1220;
  --muted:#6b7280;
  --ring:rgba(14,165,233,.35);
  --accent:#2563eb; /* blue-600 */
  --accent-2:#60a5fa;
  --holiday:#ef4444;
  --today:#10b981;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:#e5e7eb;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}
.header{
  background:linear-gradient(180deg,var(--header) 0%, var(--panel) 100%);
  border-bottom:1px solid rgba(255,255,255,.08); position:sticky; top:0; z-index:20;
}
.container{max-width:1200px;margin:0 auto;padding:20px 16px}
h1{margin:0 0 6px; font-size:clamp(24px,2.7vw,42px); letter-spacing:.2px}
.subtitle{color:#c7d2fe; font-size:15px}
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:14px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:#071225;color:#cfdefa; cursor:pointer; font-weight:600
}
.chip.active,.chip:hover{background:#12376e; color:#fff}
.switch{display:flex;gap:8px;align-items:center;color:#e5e7eb;font-size:13px}
.search{display:flex;gap:8px;align-items:center; margin-left:auto}
.search input{
  width:min(420px,80vw); padding:10px 14px; border-radius:12px; border:1px solid #21395d;
  background:#0a1a2e; color:#dbeafe;
}
.search button{padding:10px 12px;border-radius:10px;border:1px solid #21395d;background:transparent;color:#cfe1ff}
.grid{display:grid; gap:18px; margin-top:18px}
@media(min-width:740px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1040px){ .grid{grid-template-columns:repeat(3,1fr)} }

.card{background:var(--card);border-radius:20px;box-shadow:0 14px 40px rgba(0,0,0,.28);overflow:hidden}
.card .top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #eef2f7;color:var(--ink);background:#f8fafc}
.top b{font:700 16px/1 Inter,system-ui}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;border:1px solid #d2e3ff;
  background:#fff;color:#0b3a8a;font-size:12px;font-weight:600
}
.btn svg{width:14px;height:14px}
.table{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:12px}
.cell{
  aspect-ratio:1/1;border-radius:8px;background:#f3f6fb;color:#0f172a; display:flex; align-items:center; justify-content:center; font-size:13px
}
.cell.muted{opacity:.5;background:#fafcff}
.cell.holiday{background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca;font-weight:700; cursor:pointer}
.cell.today{outline:2px solid var(--accent); outline-offset:1px; background:#e0f2fe}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;color:#c7d2fe}
.legend .dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px}
.legend .h{background:var(--holiday)}
.legend .t{background:var(--accent)}
.badge{display:inline-flex;gap:6px;align-items:center;background:#0f2b62;border:1px solid #224b9a;color:#cfe1ff;padding:6px 10px;border-radius:999px;font-size:12px}
.toast{position:fixed;right:16px;bottom:18px;background:#071523;border:1px solid #1a3a53;color:#cde9f9;padding:10px 12px;border-radius:12px;opacity:0;transform:translateY(8px);transition:.25s;max-width:340px}
.toast.show{opacity:1;transform:none}
.compact .cell{font-size:12px;border-radius:6px}
.compact .table{gap:1px}
.footer{color:#c7d2fe;font-size:14px;padding:18px 0;margin-top:10px;border-top:1px solid rgba(255,255,255,.1)}
