*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root {
  --red: #D41920;
  --red-l: #F2383F;
  --black: #111;
  --g900: #222;
  --g700: #444;
  --g600: #666;
  --g500: #888;
  --g400: #AAA;
  --g300: #CCC;
  --g200: #E2E2E2;
  --g100: #F2F2F2;
  --g50: #F8F8F8;
  --white: #FFF;
  --font: 'Outfit', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --r: 14px;
  --rs: 10px;
  --rx: 6px;
  --ease: cubic-bezier(.4,0,.2,1);
}
body { font-family: var(--font); background: var(--g100); color: var(--black); min-height: 100vh; -webkit-font-smoothing: antialiased; }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes slideIn { from { opacity:0; transform:translateY(12px) scale(.98) } to { opacity:1; transform:none } }
@keyframes shake { 0%,100% { transform:translateX(0) } 25% { transform:translateX(-8px) } 75% { transform:translateX(8px) } }
@keyframes tick { 0%,100% { opacity:1 } 50% { opacity:.4 } }
@keyframes drift { 0% { background-position:0% 50% } 50% { background-position:100% 50% } 100% { background-position:0% 50% } }
.s1 { animation-delay:.05s } .s2 { animation-delay:.1s } .s3 { animation-delay:.15s } .s4 { animation-delay:.2s }

/* ===== LOGIN ===== */
.lpage { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--black); position:relative; overflow:hidden; }
.lpage::before { content:''; position:absolute; top:-30%; right:-10%; width:70vw; height:70vw; background:radial-gradient(circle,rgba(212,25,32,.06) 0%,transparent 65%); animation:drift 8s ease infinite; pointer-events:none; }
.lpage::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--red),transparent); }
.lgrid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; }
.lcont { width:100%; max-width:400px; padding:20px; z-index:1; animation:fadeUp .7s var(--ease) both; }
.llogo { text-align:center; margin-bottom:44px; }
.llogo img { height:56px; filter:brightness(0) invert(1); }
.lcard { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:var(--r); padding:36px 28px; backdrop-filter:blur(20px); }
.lcard h2 { color:var(--white); font-size:24px; font-weight:700; letter-spacing:-.02em; }
.lsub { color:var(--g500); font-size:14px; margin-top:6px; margin-bottom:28px; }
.lerr { background:rgba(212,25,32,.08); border:1px solid rgba(212,25,32,.15); color:var(--red-l); padding:10px 14px; border-radius:var(--rs); font-size:13px; margin-bottom:18px; display:none; font-weight:500; }
.lerr.v { display:block; animation:shake .4s ease; }

/* ===== FORM ===== */
.fg { margin-bottom:18px; }
.fg label { display:block; color:var(--g400); font-size:11px; font-weight:700; margin-bottom:6px; letter-spacing:.06em; text-transform:uppercase; font-family:var(--mono); }
.fg input, .fg select, .fg textarea { width:100%; padding:11px 14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--rs); color:var(--white); font-family:var(--font); font-size:14px; transition:.2s var(--ease); outline:none; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(212,25,32,.12); }
.fg input::placeholder { color:var(--g600); }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; border:none; border-radius:var(--rs); font-family:var(--font); font-size:14px; font-weight:600; cursor:pointer; transition:.2s var(--ease); text-decoration:none; white-space:nowrap; }
.bp { background:var(--red); color:var(--white); }
.bp:hover { background:var(--red-l); transform:translateY(-1px); box-shadow:0 4px 20px rgba(212,25,32,.25); }
.bp.full { width:100%; padding:13px; font-size:15px; }
.bs2 { background:var(--g200); color:var(--black); }
.bs2:hover { background:var(--g300); }
.bgh { background:transparent; color:var(--g600); padding:8px 14px; }
.bgh:hover { color:var(--black); background:var(--g100); }
.bd { background:rgba(212,25,32,.08); color:var(--red); }
.bd:hover { background:rgba(212,25,32,.15); }
.bsm { padding:7px 14px; font-size:13px; }

/* ===== LAYOUT ===== */
.dpage { display:none; min-height:100vh; }
.dpage.active { display:block; animation:fadeIn .3s ease; }
.layout { display:flex; min-height:100vh; }

/* Sidebar */
.sb { width:260px; background:var(--black); color:var(--white); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:50; transition:transform .3s var(--ease); }
.sbh { padding:24px 20px 20px; border-bottom:1px solid rgba(255,255,255,.06); }
.sbh img { height:32px; filter:brightness(0) invert(1); }
.sbn { flex:1; padding:16px 12px; overflow-y:auto; }
.ns { margin-bottom:20px; }
.nl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--g600); padding:8px 12px 6px; font-family:var(--mono); }
.ni { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--rs); color:var(--g400); font-size:14px; font-weight:500; cursor:pointer; transition:.15s var(--ease); border:none; background:none; width:100%; text-align:left; font-family:var(--font); }
.ni:hover { background:rgba(255,255,255,.05); color:var(--g200); }
.ni.act { background:rgba(212,25,32,.12); color:var(--white); }
.ni.act .nic { color:var(--red); opacity:1; }
.nic { width:18px; height:18px; flex-shrink:0; opacity:.7; }
.ni.soon { opacity:.4; cursor:default; pointer-events:none; }
.ni.soon::after { content:'Bald'; margin-left:auto; font-size:9px; font-weight:700; letter-spacing:.06em; color:var(--g600); background:rgba(255,255,255,.05); padding:2px 6px; border-radius:4px; font-family:var(--mono); }
.sbf { padding:16px 12px; border-top:1px solid rgba(255,255,255,.06); }
.sbu { display:flex; align-items:center; gap:10px; padding:8px 12px; }
.sbav { width:32px; height:32px; border-radius:50%; background:var(--red); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.sbui { flex:1; min-width:0; }
.sbun { font-size:13px; font-weight:600; color:var(--white); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sbur { font-size:10px; color:var(--g500); font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.blo { width:100%; margin-top:8px; padding:8px; border:1px solid rgba(255,255,255,.08); background:none; color:var(--g500); border-radius:var(--rx); font-family:var(--font); font-size:12px; font-weight:600; cursor:pointer; transition:.15s var(--ease); }
.blo:hover { border-color:var(--red); color:var(--red); background:rgba(212,25,32,.05); }

/* Main */
.mn { flex:1; margin-left:260px; min-height:100vh; }
.mhd { background:var(--white); border-bottom:1px solid var(--g200); padding:0 32px; height:56px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:40; }
.mht { font-size:15px; font-weight:600; }
.mmb { display:none; width:40px; height:40px; border:none; background:none; cursor:pointer; color:var(--black); }
.mc { padding:28px 32px 48px; }

/* ===== DASHBOARD WIDGETS ===== */
.hero { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:28px; gap:20px; flex-wrap:wrap; }
.hero h1 { font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.2; }
.hsub { font-size:14px; color:var(--g500); margin-top:4px; }
.hclk { text-align:right; flex-shrink:0; }
.htime { font-family:var(--mono); font-size:42px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.htime .col { animation:tick 1s step-end infinite; }
.hdate { font-size:13px; color:var(--g500); margin-top:4px; font-weight:500; }

/* Stats */
.srow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
.scard { background:var(--white); border:1px solid var(--g200); border-radius:var(--r); padding:20px; transition:.2s var(--ease); animation:fadeUp .5s var(--ease) both; }
.scard:hover { border-color:var(--g300); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.04); }
.sico { width:36px; height:36px; border-radius:var(--rs); display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:12px; }
.slab { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--g500); margin-bottom:6px; font-family:var(--mono); }
.sval { font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.ssub { font-size:11px; color:var(--g400); margin-top:6px; }

/* Announcement */
.abanner { background:var(--white); border:1px solid var(--g200); border-left:4px solid var(--red); border-radius:var(--rs); padding:14px 18px; margin-bottom:28px; display:none; align-items:flex-start; gap:10px; }
.abanner.on { display:flex; }
.abanner svg { color:var(--red); flex-shrink:0; margin-top:1px; }
.atxt { font-size:13px; line-height:1.5; color:var(--g700); }
.atxt strong { color:var(--black); }

/* Sections */
.sec { margin-bottom:32px; }
.shd { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.shd h2 { font-size:18px; font-weight:700; }
.cnt { font-size:11px; color:var(--g400); font-family:var(--mono); }

/* App Cards */
.agrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.acard { background:var(--white); border:1px solid var(--g200); border-radius:var(--r); padding:22px 20px; text-decoration:none; color:inherit; transition:.2s var(--ease); display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; cursor:pointer; animation:fadeUp .5s var(--ease) both; }
.acard::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--acc,var(--red)); transform:scaleX(0); transform-origin:left; transition:.3s ease; }
.acard:hover { border-color:var(--g300); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.06); }
.acard:hover::after { transform:scaleX(1); }
.aico { width:42px; height:42px; border-radius:var(--rs); display:flex; align-items:center; justify-content:center; font-size:20px; }
.aname { font-size:15px; font-weight:600; }
.adesc { font-size:12px; color:var(--g500); line-height:1.4; margin-top:-6px; }
.aarr { position:absolute; top:20px; right:16px; color:var(--g300); transition:.2s var(--ease); }
.acard:hover .aarr { color:var(--red); transform:translateX(3px); }
.clab { font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--g400); margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid var(--g200); }

/* Quick Actions */
.qgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.qcard { background:var(--white); border:1px solid var(--g200); border-radius:var(--r); padding:18px 16px; text-align:center; transition:.2s var(--ease); }
.qcard.dis { opacity:.35; pointer-events:none; }
.qico { font-size:24px; margin-bottom:8px; }
.qlab { font-size:13px; font-weight:600; }
.qsub { font-size:11px; color:var(--g400); margin-top:2px; }

/* ===== ADMIN ===== */
.adcard { background:var(--white); border:1px solid var(--g200); border-radius:var(--r); overflow:hidden; }
.adch { padding:18px 22px; border-bottom:1px solid var(--g200); display:flex; align-items:center; justify-content:space-between; }
.adch h3 { font-size:15px; font-weight:700; }
.adt { width:100%; border-collapse:collapse; }
.adt th { text-align:left; padding:10px 22px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--g400); border-bottom:1px solid var(--g200); background:var(--g50); font-family:var(--mono); }
.adt td { padding:12px 22px; font-size:13px; border-bottom:1px solid var(--g100); }
.adt tr:last-child td { border-bottom:none; }
.adt tr:hover td { background:var(--g50); }
.tact { display:flex; gap:6px; }
.badge { display:inline-flex; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; }
.badm { background:rgba(212,25,32,.08); color:var(--red); }
.busr { background:var(--g100); color:var(--g600); }
.bcat { background:var(--g100); color:var(--g700); font-size:10px; font-family:var(--mono); }
.adtabs { display:flex; gap:2px; background:var(--g100); border:1px solid var(--g200); border-radius:var(--rs); padding:3px; margin-bottom:20px; width:fit-content; }
.adtab { padding:8px 18px; border:none; background:none; border-radius:var(--rx); font-family:var(--font); font-size:13px; font-weight:600; color:var(--g500); cursor:pointer; transition:.15s var(--ease); }
.adtab.act { background:var(--white); color:var(--black); box-shadow:0 1px 3px rgba(0,0,0,.06); }
.adtab:hover:not(.act) { color:var(--black); }

/* ===== MODAL ===== */
.moverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(6px); }
.moverlay.act { display:flex; animation:fadeIn .15s ease; }
.mdlg { background:var(--white); border-radius:var(--r); width:100%; max-width:460px; box-shadow:0 20px 60px rgba(0,0,0,.15); animation:slideIn .25s var(--ease); }
.mdh { padding:22px 22px 0; display:flex; align-items:center; justify-content:space-between; }
.mdh h3 { font-size:17px; font-weight:700; }
.mdx { width:30px; height:30px; border:none; background:var(--g100); border-radius:var(--rx); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--g600); font-size:14px; }
.mdx:hover { background:var(--g200); color:var(--black); }
.mdb { padding:22px; }
.mdb .fg label { color:var(--g600); }
.mdb .fg input, .mdb .fg select, .mdb .fg textarea { background:var(--white); border-color:var(--g200); color:var(--black); }
.mdb .fg input:focus, .mdb .fg select:focus, .mdb .fg textarea:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(212,25,32,.08); }
.mdb .fg textarea { resize:vertical; min-height:70px; font-family:var(--font); }
.mdf { padding:0 22px 22px; display:flex; gap:10px; justify-content:flex-end; }

/* Icon & Color Picker */
.ipick { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.iopt { width:38px; height:38px; border:2px solid var(--g200); border-radius:var(--rx); display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; background:var(--white); }
.iopt:hover { border-color:var(--g400); }
.iopt.sel { border-color:var(--red); background:rgba(212,25,32,.04); }
.cpick { display:flex; gap:6px; margin-top:4px; }
.copt { width:28px; height:28px; border-radius:50%; cursor:pointer; border:3px solid transparent; outline:2px solid transparent; }
.copt:hover { transform:scale(1.15); }
.copt.sel { outline-color:var(--g400); outline-offset:2px; }

/* Toast */
.toast { position:fixed; bottom:20px; right:20px; background:var(--black); color:var(--white); padding:12px 18px; border-radius:var(--rs); font-size:13px; font-weight:600; z-index:2000; transform:translateY(80px); opacity:0; transition:.3s var(--ease); }
.toast.v { transform:translateY(0); opacity:1; }
.toast.ok { border-left:3px solid #22C55E; }
.toast.err { border-left:3px solid var(--red); }

/* Pages */
.pv { display:none; }
.pv.act { display:block; animation:fadeUp .35s var(--ease) both; }
.sbov { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:45; }
.sbov.act { display:block; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) { .srow { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px) {
  .sb { transform:translateX(-100%); }
  .sb.open { transform:translateX(0); }
  .sbov.act { display:block; }
  .mn { margin-left:0; }
  .mmb { display:flex; align-items:center; justify-content:center; }
  .mc { padding:20px 16px 40px; }
  .mhd { padding:0 16px; }
  .hero { flex-direction:column; gap:12px; }
  .hclk { text-align:left; }
  .htime { font-size:28px; }
  .srow { grid-template-columns:1fr 1fr; gap:10px; }
  .agrid { grid-template-columns:1fr 1fr; gap:10px; }
  .qgrid { grid-template-columns:1fr 1fr; gap:10px; }
}
@media (max-width:480px) {
  .srow { grid-template-columns:1fr; }
  .agrid { grid-template-columns:1fr; }
}

/* ===== YEAR CALENDAR ===== */
.vcal-layout { display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; }
.vcal-sidebar { min-width:0; max-height:720px; overflow-y:auto; }
.vcal-sidebar .adch { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 0; }
.vcal-sidebar .adch h3 { font-size:14px; font-weight:700; }
.vcal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.vcal-head h3 { font-size:16px; font-weight:700; }
.vcal-nav { display:flex; gap:6px; }
.vcal-nav button { width:32px; height:32px; border:1px solid var(--g200); background:var(--white); border-radius:var(--rx); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--g600); transition:.15s var(--ease); }
.vcal-nav button:hover { border-color:var(--g400); color:var(--black); }
/* Horizontal scroll container for 12 month columns */
.vcal-scroll { overflow-x:auto; padding-bottom:4px; }
.vcal-year { display:flex; gap:0; }
.vcal-month { flex:1 1 0; min-width:44px; }
.vcal-month-title { font-size:10px; font-weight:700; text-align:center; color:var(--g700); padding:0 0 6px; white-space:nowrap; text-transform:uppercase; letter-spacing:.03em; }
.vcal-cell { width:100%; height:22px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; color:var(--g700); border-radius:4px; cursor:default; position:relative; transition:background .1s; }
.vcal-cell.empty { visibility:hidden; }
.vcal-cell.weekend { color:var(--g400); background:var(--g50); }
.vcal-cell.today { color:var(--white); background:var(--red); font-weight:700; border-radius:50%; }
.vcal-cell.pub-holiday { background:rgba(99,102,241,.15); color:#6366F1; font-weight:600; }
.vcal-cell.comp-holiday { background:rgba(212,25,32,.12); color:var(--red); font-weight:600; }
.vcal-cell.has-approved { background:rgba(22,163,74,.2); color:#15803d; font-weight:600; }
.vcal-cell.has-pending { background:rgba(217,119,6,.2); color:#b45309; font-weight:600; }
.vcal-cell.has-approved.has-pending { background:rgba(22,163,74,.2); color:#15803d; box-shadow:inset 0 -2px 0 #D97706; }
.vcal-cell.pub-holiday.has-approved, .vcal-cell.comp-holiday.has-approved { box-shadow:inset 0 -2px 0 #16A34A; }
/* Day of week label column */
.vcal-dow { flex:0 0 auto; width:22px; padding-top:20px; }
.vcal-dow-cell { height:22px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:600; color:var(--g400); font-family:var(--mono); }
/* Tooltip */
.vcal-cell[data-tip]:hover { opacity:.85; }
.vcal-cell[data-tip]:hover::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--g900); color:var(--white); font-size:11px; font-weight:500; padding:6px 10px; border-radius:6px; white-space:nowrap; z-index:100; pointer-events:none; line-height:1.4; max-width:220px; white-space:normal; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.vcal-cell[data-tip]:hover::before { content:''; position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--g900); z-index:100; }
.vcal-legend { display:flex; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--g200); flex-wrap:wrap; }
.vcal-legend-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--g600); }
.vcal-legend-dot { width:10px; height:10px; border-radius:3px; }
/* Sidebar lists */
.hol-section { padding:12px 16px; }
.hol-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--g500); margin-bottom:8px; }
.hol-item { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:7px 0; border-bottom:1px solid var(--g100); }
.hol-item:last-child { border-bottom:none; }
.hol-name { font-size:12px; font-weight:600; }
.hol-date { font-size:10px; color:var(--g500); margin-top:1px; }
.hol-del { background:none; border:none; color:var(--g400); cursor:pointer; font-size:13px; padding:2px; flex-shrink:0; }
.hol-del:hover { color:var(--red); }
.hol-empty { color:var(--g400); font-size:12px; text-align:center; padding:12px 0; }

@media (max-width:1200px) {
  .vcal-layout { grid-template-columns:1fr; }
  .vcal-sidebar { max-height:none; }
}

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--g300); border-radius:3px; }