/* ================================================================
   DTTASA MISSION CONTROL v9 — OBSIDIAN COMMAND
   Military-Luxury | Cinzel + IBM Plex Mono + DM Sans
   Full mobile support + Live Mission Clock Widget
   ================================================================ */
:root {
  --void:    #0c1109;
  --deep:    #111a0e;
  --base:    #172213;
  --lift:    #1e2e1b;
  --panel:   rgba(255,255,255,0.10);
  --panel2:  rgba(255,255,255,0.23);
  --border:  rgba(255,255,255,0.21);
  --bord2:   rgba(255,255,255,0.30);
  --gold:    #f0c832;
  --gold2:   #f7d94e;
  --gdim:    rgba(212,175,55,0.12);
  --gglow:   rgba(212,175,55,0.3);
  --gsoft:   rgba(212,175,55,0.055);
  --green:   #4cd657;
  --gndim:   rgba(67,177,75,0.12);
  --gnsoft:  rgba(67,177,75,0.055);
  --red:     #ff4848;
  --rdim:    rgba(232,64,64,0.12);
  --text:    #f2f7ee;
  --t2:      rgba(242,247,238,0.88);
  --t3:      rgba(242,247,238,0.62);
  --mono:    'IBM Plex Mono', monospace;
  --disp:    'Cinzel', serif;
  --body:    'DM Sans', sans-serif;
  --sbw:     278px;
  --hdh:     70px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--void); color:var(--text); font-family:var(--body); font-size:15px; -webkit-font-smoothing:antialiased; }

/* ── AMBIENT LAYERS ── */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(67,177,75,0.04) 0%, transparent 52%),
    radial-gradient(ellipse at 88% 100%, rgba(212,175,55,0.04) 0%, transparent 52%),
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.025) 2px,rgba(0,0,0,0.025) 4px);
}

/* ── SHELL ── */
#shell { position:fixed; inset:0; display:flex; flex-direction:column; z-index:1; overflow:hidden; }

/* ================================================================
   HEADER
   ================================================================ */
#hdr {
  height:var(--hdh); flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  background:rgba(0,0,0,0.38); border-bottom:1px solid var(--border);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  position:relative; z-index:500;
  animation:hdrDrop .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes hdrDrop { from{transform:translateY(-100%);opacity:0;} to{transform:translateY(0);opacity:1;} }

.hdr-left { display:flex; align-items:center; gap:12px; }
#hamburger {
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:38px; height:38px; background:var(--panel2); border:1px solid var(--border);
  border-radius:9px; cursor:pointer; transition:all .25s; flex-shrink:0;
}
#hamburger:hover { border-color:var(--gold); background:var(--gdim); }
#hamburger span { width:16px; height:2px; background:var(--t2); border-radius:2px; transition:all .35s cubic-bezier(.16,1,.3,1); display:block; }
#hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
#hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
#hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.brand { display:flex; flex-direction:row; align-items:center; gap:10px; }
.brand-text { display:flex; flex-direction:column; gap:1px; }
.brand-logo {
  font-family:var(--disp); font-size:24px; font-weight:900; letter-spacing:8px; line-height:1;
  background:linear-gradient(135deg,var(--green) 0%,var(--gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.brand-sub { font-size:9px; letter-spacing:3px; color:var(--gold); opacity:.55; text-transform:uppercase; }

.hdr-center {
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px;
}
.sys-pill {
  display:flex; align-items:center; gap:7px;
  background:var(--gndim); border:1px solid rgba(67,177,75,0.25);
  padding:5px 14px; border-radius:20px;
  font-size:10.5px; font-weight:800; color:var(--green); letter-spacing:1.5px;
}
.pip { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.pip-green { background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 2s infinite; }
.pip-gold  { background:var(--gold);  box-shadow:0 0 7px var(--gold); animation:blink 1.4s infinite; }
.pip-red   { background:var(--red);   box-shadow:0 0 7px var(--red);  animation:blink 0.8s infinite; }
.pip-grey  { background:rgba(255,255,255,0.25); }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.18;} }

.hdr-date { font-size:10.5px; color:var(--t3); letter-spacing:1px; text-transform:uppercase; }
.hdr-right { display:flex; align-items:center; gap:10px; }
.hdr-clock {
  font-family:var(--mono); font-size:15px; font-weight:700; color:var(--gold);
  border:1px solid rgba(212,175,55,.28); padding:7px 16px; border-radius:8px;
  background:var(--gdim); letter-spacing:2px; white-space:nowrap;
}
.hdr-icon-btn {
  position:relative; width:36px; height:36px; border-radius:50%;
  background:var(--panel); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--t2); font-size:14px; cursor:pointer;
  transition:background .2s, color .2s, box-shadow .2s;
}
.hdr-icon-btn:hover { background:var(--gdim); color:var(--gold); box-shadow:0 0 14px var(--gglow); }
.hdr-icon-badge {
  position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff;
  font-size:9px; font-weight:700; min-width:16px; height:16px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  padding:0 3px; animation:badgePop .3s ease both;
}
@keyframes badgePop { from{transform:scale(0);} to{transform:scale(1);} }
.hdr-notif-wrap { position:relative; }
.hdr-notif-dd {
  position:fixed; top:var(--hdh); right:10px; width:308px;
  background:#0d150c; border:1px solid var(--border);
  border-radius:13px; box-shadow:0 18px 52px rgba(0,0,0,.75);
  display:none; z-index:99999; overflow:hidden;
}
.hdr-notif-dd.open { display:block; animation:ddIn .2s ease both; }
@keyframes ddIn { from{opacity:0;transform:translateY(-7px);} to{opacity:1;transform:none;} }
.hdr-notif-hdr { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.hdr-notif-clear { font-size:11px; color:var(--t3); cursor:pointer; background:none; border:none; transition:color .2s; }
.hdr-notif-clear:hover { color:var(--gold); }
.hdr-notif-list { max-height:280px; overflow-y:auto; }
.hdr-notif-item { padding:10px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; display:flex; gap:9px; align-items:flex-start; }
.hdr-notif-item:hover { background:var(--panel); }
.hdr-notif-item.unread { background:rgba(212,175,55,.04); }
.hdr-ni-icon { width:28px; height:28px; border-radius:50%; background:var(--gdim); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:11px; flex-shrink:0; }
.hdr-ni-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.hdr-ni-msg { font-size:12px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px; }
.hdr-ni-time { font-size:11px; color:var(--t3); margin-top:2px; }
.hdr-notif-empty { padding:22px; text-align:center; color:var(--t3); font-size:12px; }

/* ================================================================
   BODY SPLIT
   ================================================================ */
#body { flex:1; display:flex; overflow:hidden; position:relative; z-index:2; }

/* Mobile overlay */
#sb-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.65); backdrop-filter:blur(6px); z-index:399;
}
#sb-overlay.show { display:block; animation:fadeIn .25s ease; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes mIn { from{opacity:0;transform:translateY(22px) scale(.96);} to{opacity:1;transform:none;} }

/* ================================================================
   SIDEBAR
   ================================================================ */
#sidebar {
  width:var(--sbw); flex-shrink:0;
  background:rgba(0,0,0,.42); border-right:1px solid var(--border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; flex-direction:column; overflow:hidden;
  animation:sbIn .75s cubic-bezier(.16,1,.3,1) both;
  transition:transform .38s cubic-bezier(.16,1,.3,1), box-shadow .38s;
  z-index:400; position:relative;
}
@keyframes sbIn { from{transform:translateX(-100%);opacity:0;} to{transform:translateX(0);opacity:1;} }

.sb-inner { padding:18px 13px 20px; flex:1; display:flex; flex-direction:column; gap:4px; overflow-y:auto; overflow-x:hidden; }
.sb-inner::-webkit-scrollbar { width:3px; }
.sb-inner::-webkit-scrollbar-thumb { background:rgba(212,175,55,.2); border-radius:10px; }

/* Profile card */
.profile-card {
  background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--gold);
  border-radius:14px; padding:15px; display:flex; align-items:flex-start; gap:12px;
  margin-bottom:10px; animation:pIn .8s .15s cubic-bezier(.16,1,.3,1) both;
  transition:border-color .3s; position:relative;
}
.profile-card:hover { border-color:rgba(212,175,55,.25); }
@keyframes pIn { from{opacity:0;transform:translateX(-18px);} to{opacity:1;transform:translateX(0);} }
.avatar {
  width:44px; height:44px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(135deg,var(--green),var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-size:19px; font-weight:700; color:var(--deep);
}
.profile-card > div:last-child { min-width:0; flex:1; padding-top:2px; }
.prof-name { font-size:13.5px; font-weight:700; line-height:1.4; overflow-wrap:break-word; }
.prof-role { font-size:11px; color:var(--t3); margin-top:3px; letter-spacing:.2px; line-height:1.45; overflow-wrap:break-word; }

/* Ops health */
.ops-block {
  background:var(--panel); border:1px solid var(--border); border-radius:13px;
  padding:14px; margin-bottom:10px;
}
.ops-lbl { font-size:10px; font-weight:800; letter-spacing:2px; color:var(--gold); text-transform:uppercase; margin-bottom:11px; }
.ops-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:6px; }
.ops-row .k { color:var(--t3); }
.ops-row .v { font-family:var(--mono); font-weight:700; color:var(--gold); font-size:12px; }
.ops-bar { height:3px; background:rgba(255,255,255,.06); border-radius:10px; margin:7px 0 3px; overflow:hidden; }
.ops-bar-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--gold)); border-radius:10px; transition:width 1.5s cubic-bezier(.16,1,.3,1); width:0%; }

/* ================================================================
   LIVE MISSION CLOCK WIDGET
   Reads from localStorage — identical source to timer.html
   Ticks every 250ms for near-perfect sync
   ================================================================ */
#mission-widget {
  background:linear-gradient(135deg,rgba(212,175,55,.07) 0%,rgba(67,177,75,.04) 100%);
  border:1px solid rgba(212,175,55,.2); border-radius:14px;
  padding:15px 13px; margin-bottom:10px; position:relative; overflow:hidden;
  cursor:pointer; transition:all .3s cubic-bezier(.16,1,.3,1);
  animation:wgIn .9s .25s cubic-bezier(.16,1,.3,1) both;
}
@keyframes wgIn { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
#mission-widget::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.5;
}
#mission-widget:hover { border-color:rgba(212,175,55,.42); transform:translateY(-1px); box-shadow:0 8px 28px rgba(0,0,0,.32); }

.wg-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.wg-title { font-size:10px; font-weight:800; letter-spacing:2px; color:var(--gold); text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.wg-status { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:1.2px; }

/* The actual timer digits — same monospace font as timer.html */
#widget-elapsed {
  font-family:var(--mono); font-weight:700; letter-spacing:2px; line-height:1;
  display:block; margin-bottom:9px; transition:color .5s, text-shadow .5s;
  font-size:26px; color:var(--t3);
}
#widget-elapsed.active {
  font-size:26px; color:var(--gold2);
  text-shadow:0 0 18px rgba(212,175,55,.4), 0 0 36px rgba(212,175,55,.14);
  animation:glow 2s ease-in-out infinite;
}
#widget-elapsed.debrief { font-size:26px; color:var(--gold); }
@keyframes glow { 0%,100%{text-shadow:0 0 12px rgba(212,175,55,.28);} 50%{text-shadow:0 0 32px rgba(212,175,55,.6),0 0 60px rgba(212,175,55,.2);} }

.wg-shift-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
#widget-shift-label { font-size:11px; font-weight:700; letter-spacing:.8px; }
#widget-shift-window { font-family:var(--mono); font-size:11px; color:var(--t3); }

.wg-pbar { height:2px; background:rgba(255,255,255,.06); border-radius:10px; overflow:hidden; margin-bottom:10px; }
.wg-pbar-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--gold)); border-radius:10px; width:0%; transition:width 1s linear; }

.wg-launch {
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.18);
  border-radius:8px; padding:8px; font-size:10.5px; font-weight:800;
  color:var(--gold); letter-spacing:1px; cursor:pointer; transition:all .25s;
}
.wg-launch:hover { background:var(--gdim); border-color:rgba(212,175,55,.38); }
.wg-launch i { font-size:11px; }

/* ── Mission Clock widget — full redesign ── */
#mission-widget {
  background:linear-gradient(135deg,rgba(212,175,55,.09) 0%,rgba(67,177,75,.05) 100%);
  border:1px solid rgba(212,175,55,.24); border-radius:15px;
  padding:18px 16px 16px; margin-bottom:12px; position:relative; overflow:visible;
  cursor:pointer; transition:all .3s cubic-bezier(.16,1,.3,1);
}
#mission-widget:hover { border-color:rgba(212,175,55,.45); transform:translateY(-1px); box-shadow:0 10px 32px rgba(0,0,0,.35); }
.wg-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:6px; }
.wg-title { font-size:9.5px; font-weight:800; letter-spacing:2px; color:var(--gold); text-transform:uppercase; display:flex; align-items:center; gap:5px; flex-shrink:0; }
.wg-status { display:flex; align-items:center; gap:5px; font-size:9px; font-weight:800; letter-spacing:1px; flex-shrink:0; }
#widget-elapsed {
  font-family:var(--mono); font-weight:700; letter-spacing:1.5px; line-height:1;
  display:block; margin-bottom:8px; font-size:26px; color:var(--t3);
  transition:color .5s, text-shadow .5s;
}
#widget-elapsed.active {
  font-size:26px; color:var(--gold2);
  text-shadow:0 0 18px rgba(212,175,55,.45), 0 0 36px rgba(212,175,55,.18);
  animation:glow 2s ease-in-out infinite;
}
#widget-elapsed.debrief { font-size:26px; color:var(--gold); }
.wg-shift-row { display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin-bottom:8px; }
#wg-shift-name { font-size:12px; font-weight:700; letter-spacing:.5px; }
#wg-shift-win  { font-family:var(--mono); font-size:10px; color:var(--t3); }
.wg-pbar { height:3px; background:rgba(255,255,255,.06); border-radius:10px; overflow:hidden; margin-bottom:10px; }
.wg-pbar-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--gold)); border-radius:10px; width:0%; transition:width 1s linear; }
.wg-launch {
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.2);
  border-radius:8px; padding:8px 10px; font-size:10px; font-weight:800;
  color:var(--gold); letter-spacing:.8px; cursor:pointer; transition:all .25s;
}
.wg-launch:hover { background:var(--gdim); border-color:rgba(212,175,55,.4); }
.wg-launch i { font-size:10px; }

/* ── nav section ── */
.nav-lbl { font-size:10px; font-weight:800; letter-spacing:2.5px; color:var(--t3); text-transform:uppercase; padding:8px 7px 3px; margin-top:4px; }
.nav-div { height:1px; background:var(--border); margin:6px 0; }
.nav-spc { flex:1; min-height:12px; }

.mi {
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:10px; font-size:13px; font-weight:600; color:var(--t3);
  cursor:pointer; border:1px solid transparent; letter-spacing:.3px;
  transition:all .25s ease; position:relative; overflow:hidden;
  animation:miIn .6s cubic-bezier(.16,1,.3,1) both;
}
.mi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,rgba(212,175,55,.1),transparent); transition:width .3s; }
.mi:hover::before { width:100%; }
.mi:hover { color:var(--text); transform:translateX(3px); }
.mi.active { background:var(--gdim); border-color:rgba(212,175,55,.22); color:var(--gold); }
.mi.active::before { width:100%; }
.mi i { width:16px; text-align:center; font-size:13px; flex-shrink:0; }
.mi.danger { color:rgba(232,64,64,.55); }
.mi.danger:hover { color:var(--red); background:var(--rdim); border-color:rgba(232,64,64,.15); }
.nav-badge { margin-left:auto; background:var(--red); color:#fff; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px; animation:badgePop .3s ease both; }
.mi:nth-child(1){animation-delay:.06s} .mi:nth-child(2){animation-delay:.10s}
.mi:nth-child(3){animation-delay:.14s} .mi:nth-child(4){animation-delay:.18s}
.mi:nth-child(5){animation-delay:.22s} .mi:nth-child(6){animation-delay:.26s}
.mi:nth-child(7){animation-delay:.30s} .mi:nth-child(8){animation-delay:.34s}
.mi:nth-child(9){animation-delay:.38s} .mi:nth-child(10){animation-delay:.42s}
@keyframes miIn { from{opacity:0;transform:translateX(-14px);} to{opacity:1;transform:translateX(0);} }

/* ================================================================
   MAIN WORKSPACE
   ================================================================ */
#main { flex:1; overflow-y:auto; overflow-x:hidden; padding:32px 30px 56px; height:100%; position:relative; }
#main::-webkit-scrollbar { width:5px; }
#main::-webkit-scrollbar-thumb { background:rgba(212,175,55,.22); border-radius:10px; }
#sidebar .sb-inner::-webkit-scrollbar { width:3px; }

/* ================================================================
   CONTENT SECTIONS
   ================================================================ */
.cv { display:none; }
.cv.active { display:block; animation:cvIn .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes cvIn { from{opacity:0;transform:translateY(16px);filter:blur(5px);} to{opacity:1;transform:translateY(0);filter:blur(0);} }

.sec-head { margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--border); display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.sec-head h2 { font-family:var(--disp); font-size:22px; font-weight:700; letter-spacing:3px; line-height:1.2; }
.sec-head p { font-size:12px; color:var(--t3); letter-spacing:1px; margin-top:4px; }

/* Glass panels */
.glass { background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:22px; position:relative; overflow:hidden; transition:border-color .3s; }
.glass::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent); }
.glass:hover { border-color:var(--bord2); }
.glass-gold { border-color:rgba(212,175,55,.18); background:linear-gradient(135deg,var(--gsoft) 0%,var(--panel) 65%); }
.glass-green { border-color:rgba(67,177,75,.18); background:linear-gradient(135deg,var(--gnsoft) 0%,var(--panel) 65%); }

.mlbl { font-size:11px; font-weight:800; letter-spacing:2.5px; color:var(--gold); text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.mlbl::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Welcome banner ── */
.welcome {
  background:linear-gradient(135deg,rgba(67,177,75,.07) 0%,rgba(212,175,55,.05) 100%);
  border:1px solid rgba(212,175,55,.13); border-radius:20px; padding:26px 28px;
  margin-bottom:20px; position:relative; overflow:hidden;
  animation:wlcIn .9s .04s cubic-bezier(.16,1,.3,1) both;
}
@keyframes wlcIn { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }
.welcome::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.welcome h2 { font-family:var(--disp); font-size:22px; font-weight:700; letter-spacing:2px; margin-bottom:5px; }
.welcome p { font-size:12px; color:var(--t2); letter-spacing:.5px; }
.gold-text { color:var(--gold); }
.green-text { color:var(--green); }
.sbadge {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(67,177,75,.3); color:var(--green);
  padding:3px 12px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:1px;
  background:rgba(67,177,75,.08); margin-top:8px;
}

/* ── Stat cards ── */
.dash-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.stat-card {
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:20px;
  transition:all .35s cubic-bezier(.16,1,.3,1);
  animation:scIn .7s cubic-bezier(.16,1,.3,1) both;
}
.stat-card:hover { transform:translateY(-4px); border-color:rgba(212,175,55,.25); box-shadow:0 14px 36px rgba(0,0,0,.32),0 0 22px rgba(212,175,55,.06); }
.stat-card:nth-child(1){animation-delay:.12s} .stat-card:nth-child(2){animation-delay:.22s} .stat-card:nth-child(3){animation-delay:.32s}
@keyframes scIn { from{opacity:0;transform:translateY(22px) scale(.97);} to{opacity:1;transform:translateY(0) scale(1);} }
.card-ico { font-size:18px; color:var(--gold); margin-bottom:12px; }
.card-title { font-size:11px; font-weight:800; letter-spacing:1.5px; color:var(--t3); text-transform:uppercase; margin-bottom:9px; }
.card-val { font-family:var(--mono); font-size:26px; font-weight:700; color:var(--gold); line-height:1; }
.card-sub { font-size:11px; color:var(--t3); margin-top:5px; }
.card-mini { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:12px; }
.mini-item label { font-size:10px; color:var(--t3); letter-spacing:.8px; text-transform:uppercase; display:block; }
.mini-item p { font-size:12px; font-weight:700; font-family:var(--mono); margin-top:2px; }

/* ── Rota strip ── */
.rota-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:9px; }
.rota-day {
  background:rgba(0,0,0,.28); border:1px solid var(--border); border-radius:10px;
  padding:11px 6px; text-align:center; transition:all .3s ease; cursor:default;
}
.rota-day:hover { border-color:var(--gold); transform:translateY(-2px); }
.rota-day.today { border-color:rgba(212,175,55,.35); background:rgba(212,175,55,.04); }
.rota-day-name { font-size:10px; letter-spacing:1px; color:var(--t3); text-transform:uppercase; margin-bottom:5px; }
.rota-day-date { font-family:var(--mono); font-size:11px; color:var(--t2); margin-bottom:7px; }
.sbadge-day { font-size:10px; font-weight:800; letter-spacing:.5px; padding:3px 7px; border-radius:5px; display:inline-block; }
.day-time { font-size:9px; color:var(--t3); margin-top:4px; font-family:var(--mono); }

/* shift colour classes */
.sc-off           { background:rgba(255,255,255,.04);  color:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.06); }
.sc-morning       { background:rgba(255,215,0,.13);    color:#FFD700; border:1px solid rgba(255,215,0,.3); }
.sc-afternoon     { background:rgba(135,206,235,.13);  color:#87CEEB; border:1px solid rgba(135,206,235,.3); }
.sc-evening       { background:rgba(96,128,232,.15);   color:#6080E8; border:1px solid rgba(96,128,232,.3); }
.sc-full_day      { background:rgba(67,177,75,.13);    color:#4cd657; border:1px solid rgba(67,177,75,.3); }
.sc-overtime      { background:rgba(255,140,0,.13);    color:#FF8C00; border:1px solid rgba(255,140,0,.3); }
.sc-day           { background:rgba(67,177,75,.13);    color:#4cd657; border:1px solid rgba(67,177,75,.3); }
.sc-training      { background:rgba(147,112,219,.13);  color:#9370DB; border:1px solid rgba(147,112,219,.3); }
.sc-shadowing     { background:rgba(32,178,170,.13);   color:#20B2AA; border:1px solid rgba(32,178,170,.3); }
/* leave type colour classes — match rota.html SHIFT_COLORS exactly */
.sc-annual_leave  { background:rgba(147,112,219,.15);  color:#9370DB; border:1px solid rgba(147,112,219,.35); }
.sc-al            { background:rgba(147,112,219,.15);  color:#9370DB; border:1px solid rgba(147,112,219,.35); }
.sc-sick_leave    { background:rgba(100,149,237,.15);  color:#6495ED; border:1px solid rgba(100,149,237,.35); }
.sc-sl            { background:rgba(100,149,237,.15);  color:#6495ED; border:1px solid rgba(100,149,237,.35); }
.sc-eml           { background:rgba(255,140,0,.15);    color:#FF8C00; border:1px solid rgba(255,140,0,.35); }
.sc-emergency_leave{ background:rgba(255,140,0,.15);   color:#FF8C00; border:1px solid rgba(255,140,0,.35); }
.sc-maternity_leave{ background:rgba(255,105,180,.15); color:#FF69B4; border:1px solid rgba(255,105,180,.35); }
.sc-paternity_leave{ background:rgba(180,130,255,.15); color:#B482FF; border:1px solid rgba(180,130,255,.35); }
.sc-compassionate { background:rgba(32,178,170,.15);   color:#20B2AA; border:1px solid rgba(32,178,170,.35); }
.sc-lwp           { background:rgba(136,136,136,.12);  color:#888;    border:1px solid rgba(136,136,136,.25); }
.sc-tor           { background:rgba(136,136,136,.12);  color:#888;    border:1px solid rgba(136,136,136,.25); }
.sc-public_holiday_ng { background:rgba(212,175,55,.13); color:#D4AF37; border:1px solid rgba(212,175,55,.3); }
.sc-leave { background:rgba(147,112,219,.15); color:#9370DB; border:1px solid rgba(147,112,219,.35); }

/* ── Dashboard Calendar ── */
.dash-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.dash-cal-hdr { font-size:8px; font-weight:800; letter-spacing:1px; color:var(--t3); text-align:center; padding:4px 0; text-transform:uppercase; }
.dash-cal-day {
  border-radius:7px; padding:5px 3px; min-height:48px; background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.05); cursor:default; text-align:center;
  transition:border-color .2s;
}
.dash-cal-day:hover { border-color:rgba(212,175,55,0.25); }
.dash-cal-day.cal-today { background:rgba(212,175,55,0.07); border-color:rgba(212,175,55,0.35); }
.dash-cal-day.cal-ph { background:rgba(212,175,55,0.04); }
.dash-cal-day.cal-empty { background:transparent; border-color:transparent; }
.cal-day-num { font-size:10px; font-weight:600; color:var(--text); line-height:1; }
.cal-today .cal-day-num { color:var(--gold); font-weight:800; }
.cal-shift-badge { font-size:7px; font-weight:800; letter-spacing:.3px; margin-top:3px; padding:1px 4px; border-radius:4px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ph-icon { font-size:8px; color:var(--gold); margin-top:2px; display:block; }

/* ── Data table ── */
.dtbl { width:100%; border-collapse:collapse; font-size:12px; }
.dtbl thead tr { background:rgba(0,0,0,.3); border-bottom:1px solid var(--border); }
.dtbl th { padding:13px 15px; text-align:left; font-size:11px; font-weight:800; letter-spacing:1.5px; color:var(--gold); text-transform:uppercase; white-space:nowrap; }
.dtbl td { padding:13px 15px; border-bottom:1px solid rgba(255,255,255,.03); vertical-align:middle; }
.dtbl tbody tr { transition:background .2s; }
.dtbl tbody tr:hover { background:rgba(255,255,255,.02); }
.dtbl tbody tr:last-child td { border-bottom:none; }

/* global rota scroll */
.rota-scroll { overflow-x:auto; border-radius:12px; background:rgba(0,0,0,.15); scrollbar-width:thin; scrollbar-color:rgba(212,175,55,.25) transparent; }
.rota-scroll::-webkit-scrollbar { height:5px; }
.rota-scroll::-webkit-scrollbar-thumb { background:rgba(212,175,55,.25); border-radius:10px; }
.grota { width:100%; border-collapse:separate; border-spacing:0; font-size:11px; min-width:1080px; }
.grota thead th { position:sticky; top:0; background:var(--base); z-index:5; padding:13px 11px; text-align:center; font-size:11px; font-weight:800; letter-spacing:1.5px; color:var(--gold); border-bottom:1px solid rgba(212,175,55,.2); }
.grota thead th.stk { position:sticky; left:0; z-index:20; text-align:left; min-width:200px; border-right:2px solid rgba(212,175,55,.22); background:var(--base); }
.grota tbody td { padding:9px 11px; text-align:center; border-bottom:1px solid rgba(255,255,255,.03); vertical-align:middle; }
.grota tbody td.stk { position:sticky; left:0; z-index:5; background:#080c08; border-right:2px solid rgba(212,175,55,.12); text-align:left; padding:10px 14px; }
.mem-name { font-weight:700; color:var(--gold); font-size:12px; }
.mem-role { font-size:9px; color:var(--t3); margin-top:2px; }
.probation-badge { background:linear-gradient(135deg,#ff4500,#ff8c00); color:#fff; font-size:7.5px; font-weight:800; padding:2px 5px; border-radius:3px; margin-left:5px; box-shadow:0 0 6px rgba(255,69,0,.35); vertical-align:middle; }

/* ── Buttons ── */
.btn { border:none; padding:13px 26px; border-radius:50px; font-weight:800; font-size:10px; letter-spacing:2px; cursor:pointer; text-transform:uppercase; transition:all .35s cubic-bezier(.175,.885,.32,1.275); position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:7px; }
.btn::after { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background:rgba(255,255,255,.12); transform:translate(-50%,-50%); transition:width .4s,height .4s; }
.btn:active::after { width:220px; height:220px; }
.btn-green { background:var(--green); color:#fff; box-shadow:0 6px 18px rgba(67,177,75,.28); }
.btn-green:hover { transform:scale(1.04) translateY(-2px); box-shadow:0 12px 26px rgba(67,177,75,.44); }
.btn-gold { background:var(--gold); color:var(--deep); box-shadow:0 6px 18px rgba(212,175,55,.24); }
.btn-gold:hover { background:var(--gold2); transform:scale(1.04) translateY(-2px); box-shadow:0 12px 26px rgba(212,175,55,.4); }
.btn-red { background:var(--red); color:#fff; }
.btn-red:hover { transform:scale(1.04) translateY(-2px); box-shadow:0 12px 26px rgba(232,64,64,.4); }
.btn-outline { background:transparent; border:1px solid var(--bord2); color:var(--t2); padding:9px 16px; font-size:9px; border-radius:9px; }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.btn-full { width:100%; border-radius:12px; padding:15px; font-size:11.5px; justify-content:center; }
.btn-sm { padding:9px 16px; font-size:9px; border-radius:8px; }
.btn-proc { opacity:.7; cursor:not-allowed !important; pointer-events:none; }
.spin-ico { display:inline-block; width:11px; height:11px; border:2px solid rgba(255,255,255,.2); border-top-color:currentColor; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }

/* ── Forms ── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.ig label { display:block; font-size:8.5px; font-weight:800; letter-spacing:2px; color:var(--gold); text-transform:uppercase; margin-bottom:5px; }
.gi { width:100%; background:rgba(0,0,0,.32); border:1px solid var(--border); border-radius:10px; color:var(--text); padding:11px 13px; font-size:13px; outline:none; font-family:var(--body); transition:border-color .25s,box-shadow .25s; }
.gi:focus { border-color:rgba(212,175,55,.4); box-shadow:0 0 0 3px rgba(212,175,55,.08); }
.gi-ta { min-height:90px; resize:vertical; }
select.gi option { background:#0b130a; }
select.gi optgroup { background:#080d07; color:var(--gold); }

/* timer gateway */
.timer-gw { text-align:center; padding:60px 24px; position:relative; overflow:hidden; }
.timer-gw::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:370px; height:370px; border-radius:50%; background:radial-gradient(circle,rgba(212,175,55,.04) 0%,transparent 70%); pointer-events:none; animation:gwP 4s ease-in-out infinite; }
@keyframes gwP { 0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.5;} 50%{transform:translate(-50%,-50%) scale(1.1);opacity:1;} }
.gw-icon { font-size:48px; color:var(--gold); text-shadow:0 0 34px rgba(212,175,55,.4); display:block; margin-bottom:17px; animation:ifl 3s ease-in-out infinite; position:relative; z-index:1; }
@keyframes ifl { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
.gw-title { font-family:var(--disp); font-size:18px; letter-spacing:4px; font-weight:700; color:var(--gold); margin-bottom:9px; position:relative; z-index:1; }
.gw-sub { font-size:12px; color:var(--t3); max-width:420px; margin:0 auto 26px; line-height:1.78; letter-spacing:.5px; position:relative; z-index:1; }
.gw-info { background:var(--gdim); border:1px solid rgba(212,175,55,.2); border-radius:11px; padding:14px 20px; max-width:430px; margin:0 auto 22px; font-size:12px; color:var(--t2); line-height:1.65; position:relative; z-index:1; }
.gw-info strong { color:var(--gold); }

/* skeleton */
.skel { background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%); background-size:400% 100%; animation:shim 1.5s infinite; border-radius:7px; }
@keyframes shim { from{background-position:100% 0;} to{background-position:-100% 0;} }

/* ================================================================
   LOGIN OVERLAY
   ================================================================ */
#login-overlay {
  position:fixed; inset:0; background:#050905; z-index:9999999;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card {
  width:100%; max-width:420px; background:var(--lift); border:1px solid rgba(212,175,55,.28);
  border-radius:24px; padding:44px 36px; text-align:center;
  position:relative; overflow:hidden;
  animation:lcIn .9s cubic-bezier(.16,1,.3,1) both;
  box-shadow:0 32px 80px rgba(0,0,0,.65),0 0 80px rgba(212,175,55,.05);
}
@keyframes lcIn { from{opacity:0;transform:translateY(26px) scale(.96);filter:blur(8px);} to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);} }
.login-card::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:180px; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.login-brand { font-family:var(--disp); font-size:34px; font-weight:900; letter-spacing:10px; background:linear-gradient(135deg,var(--green) 0%,var(--gold) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:5px; }
.login-sub { font-size:8.5px; letter-spacing:4px; color:var(--gold); opacity:.6; text-transform:uppercase; margin-bottom:32px; }
#login-err { color:var(--red); font-size:11px; margin-bottom:13px; display:none; background:rgba(232,64,64,.08); border:1px solid rgba(232,64,64,.2); border-radius:8px; padding:8px 11px; }

/* ── Toast ── */
#toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(80px);
  background:rgba(5,9,5,.98); border:1px solid var(--gold); border-left:4px solid var(--gold);
  padding:13px 20px; border-radius:8px; display:flex; align-items:center; gap:11px;
  font-size:12px; font-weight:600; z-index:600000; min-width:280px; max-width:460px;
  box-shadow:0 12px 40px rgba(0,0,0,.55); backdrop-filter:blur(16px);
  transition:transform .45s cubic-bezier(.175,.885,.32,1.275),opacity .45s; opacity:0;
}
#toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
#toast.error { border-color:var(--red); border-left-color:var(--red); }
#toast i { flex-shrink:0; }
#toast:not(.error) i { color:var(--gold); }
#toast.error i { color:var(--red); }

/* ── Latency modal ── */
#latency-modal { position:fixed; inset:0; background:rgba(0,0,0,.92); backdrop-filter:blur(20px); z-index:100000; display:none; align-items:center; justify-content:center; padding:20px; }
#latency-modal.show { display:flex; }
.lat-box { width:100%; max-width:460px; background:var(--lift); border:2px solid var(--red); border-radius:20px; padding:34px; box-shadow:0 0 60px rgba(232,64,64,.2),0 40px 80px rgba(0,0,0,.5); animation:mpop .4s cubic-bezier(.175,.885,.32,1.275); }
@keyframes mpop { from{transform:scale(.85);opacity:0;} to{transform:scale(1);opacity:1;} }
.lat-title { display:flex; align-items:center; gap:11px; color:var(--red); font-family:var(--disp); font-size:14px; letter-spacing:3px; margin-bottom:11px; }

/* nav bar controls */
.nbc { display:flex; gap:9px; align-items:center; }

/* ================================================================
   TOGGLE SWITCH — SYSTEM CONTROLS
   ================================================================ */
.toggle-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--border);
}
.toggle-row:last-child { border-bottom:none; padding-bottom:0; }
.toggle-info { flex:1; min-width:0; }
.toggle-info .ti-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:3px; }
.toggle-info .ti-sub { font-size:11px; color:var(--t3); line-height:1.55; }
.toggle-switch { position:relative; width:48px; height:26px; flex-shrink:0; cursor:pointer; }
.toggle-switch input { opacity:0; position:absolute; width:0; height:0; }
.toggle-track {
  position:absolute; inset:0; background:rgba(255,255,255,.08);
  border:1px solid var(--border); border-radius:26px;
  transition:background .3s, border-color .3s;
}
.toggle-switch input:checked + .toggle-track { background:var(--green); border-color:var(--green); }
.toggle-thumb {
  position:absolute; top:4px; left:4px; width:16px; height:16px;
  background:#fff; border-radius:50%; transition:transform .3s cubic-bezier(.16,1,.3,1);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.toggle-switch input:checked ~ .toggle-thumb { transform:translateX(22px); }
.toggle-switch.danger input:checked + .toggle-track { background:var(--red); border-color:var(--red); }

/* SA sys panel */
#sa-sys-panel { border-color:rgba(212,175,55,.22); background:linear-gradient(135deg,rgba(212,175,55,.03) 0%,var(--panel) 70%); }

/* ── ANNOUNCEMENT BAR ── */
#announce-bar { display:none; margin-bottom:18px; border-radius:14px; overflow:hidden; animation:scIn .5s cubic-bezier(.16,1,.3,1) both; }
#announce-bar.visible { display:block; }
.ab-item {
  display:flex; align-items:flex-start; gap:14px; padding:14px 18px;
  border-left:4px solid var(--gold); background:linear-gradient(135deg,rgba(212,175,55,.07) 0%,var(--panel) 100%);
  border-radius:12px; margin-bottom:8px; position:relative;
  animation:scIn .45s cubic-bezier(.16,1,.3,1) both;
}
.ab-item:last-child { margin-bottom:0; }
.ab-item.urgent { border-left-color:var(--red); background:linear-gradient(135deg,rgba(232,64,64,.09) 0%,var(--panel) 100%); }
.ab-item.info { border-left-color:#4a9eff; background:linear-gradient(135deg,rgba(74,158,255,.07) 0%,var(--panel) 100%); }
.ab-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; margin-top:1px; }
.ab-item .ab-icon { background:var(--gdim); color:var(--gold); }
.ab-item.urgent .ab-icon { background:var(--rdim); color:var(--red); }
.ab-item.info .ab-icon { background:rgba(74,158,255,.12); color:#4a9eff; }
.ab-body { flex:1; min-width:0; }
.ab-title { font-size:13px; font-weight:700; color:var(--text); line-height:1.4; margin-bottom:3px; }
.ab-text { font-size:12px; color:var(--t2); line-height:1.6; }
.ab-meta { font-size:10px; color:var(--t3); margin-top:5px; letter-spacing:.3px; }
.ab-dismiss { position:absolute; top:10px; right:12px; width:20px; height:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--t3); font-size:11px; border-radius:50%; transition:all .2s; }
.ab-dismiss:hover { color:var(--text); background:var(--panel2); }
/* urgent pulse dot */
.ab-item.urgent .ab-icon::after { content:''; position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(232,64,64,.5); animation:urgentPulse 1.4s infinite; }
@keyframes urgentPulse { 0%{box-shadow:0 0 0 0 rgba(232,64,64,.5);} 70%{box-shadow:0 0 0 8px rgba(232,64,64,0);} 100%{box-shadow:0 0 0 0 rgba(232,64,64,0);} }

/* urgent alert modal */
#urgent-alert-modal { display:none; position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.72); backdrop-filter:blur(12px); align-items:center; justify-content:center; }
#urgent-alert-modal.open { display:flex; }
.ual-card { background:var(--base); border:1px solid rgba(232,64,64,.4); border-radius:20px; padding:32px 28px; max-width:480px; width:92%; text-align:center; animation:scIn .4s cubic-bezier(.16,1,.3,1) both; box-shadow:0 0 60px rgba(232,64,64,.12); }
.ual-icon { font-size:36px; color:var(--red); margin-bottom:16px; animation:urgentPulse 1.4s infinite; display:inline-block; }
.ual-title { font-family:var(--disp); font-size:17px; font-weight:700; color:var(--red); letter-spacing:1px; margin-bottom:10px; }
.ual-body { font-size:13px; color:var(--t2); line-height:1.7; margin-bottom:20px; }
.ual-pub { font-size:11px; color:var(--t3); margin-bottom:24px; }
.ual-btn { background:linear-gradient(135deg,var(--red),#c0392b); color:#fff; border:none; border-radius:10px; padding:10px 28px; font-size:13px; font-weight:600; cursor:pointer; transition:opacity .2s; }
.ual-btn:hover { opacity:.85; }

/* Profile page redesign */
.prof-page-hero {
  display:flex; align-items:flex-start; gap:20px; margin-bottom:22px;
  padding:20px; background:linear-gradient(135deg,rgba(212,175,55,.06) 0%,var(--panel) 70%);
  border:1px solid rgba(212,175,55,.16); border-radius:16px; flex-wrap:wrap;
}
.prof-hero-photo {
  width:88px; height:88px; border-radius:16px; flex-shrink:0; overflow:hidden;
  background:linear-gradient(135deg,var(--green),var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-size:32px; font-weight:700; color:var(--deep);
  border:2px solid rgba(212,175,55,.3); box-shadow:0 0 20px rgba(212,175,55,.12);
}
.prof-hero-photo img { width:100%; height:100%; object-fit:cover; }
.prof-hero-info { flex:1; min-width:0; }
.prof-hero-name { font-family:var(--disp); font-size:20px; font-weight:700; letter-spacing:1.5px; color:var(--text); margin-bottom:4px; }
.prof-hero-role { font-size:12px; color:var(--gold); margin-bottom:3px; font-weight:600; }
.prof-hero-dept { font-size:11px; color:var(--t3); margin-bottom:10px; }
.prof-hero-badges { display:flex; gap:7px; flex-wrap:wrap; }
.prof-badge {
  display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:800;
  letter-spacing:1px; padding:3px 10px; border-radius:20px; text-transform:uppercase;
}
.prof-badge-green { background:rgba(67,177,75,.1); border:1px solid rgba(67,177,75,.28); color:var(--green); }
.prof-badge-gold  { background:var(--gdim); border:1px solid rgba(212,175,55,.3); color:var(--gold); }
.prof-badge-red   { background:var(--rdim); border:1px solid rgba(232,64,64,.3); color:var(--red); }
.prof-badge-grey  { background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--t3); }

.prof-section-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.prof-info-block {
  background:var(--panel); border:1px solid var(--border); border-radius:13px; padding:16px;
}
.prof-info-block.full { grid-column:span 2; }
.pib-title { font-size:9.5px; font-weight:800; letter-spacing:2px; color:var(--gold); text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.pib-title::after { content:''; flex:1; height:1px; background:var(--border); }
.pib-row { display:flex; justify-content:space-between; align-items:flex-start; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.03); gap:12px; }
.pib-row:last-child { border-bottom:none; padding-bottom:0; }
.pib-key { font-size:10.5px; color:var(--t3); flex-shrink:0; min-width:110px; }
.pib-val { font-size:12px; font-weight:600; color:var(--text); text-align:right; word-break:break-word; }
.pib-val.mono { font-family:var(--mono); color:var(--gold); }
.pib-val.green { color:var(--green); }
.pib-val.red { color:var(--red); }

.org-address-block {
  background:linear-gradient(135deg,rgba(67,177,75,.04) 0%,var(--panel) 70%);
  border:1px solid rgba(67,177,75,.15); border-radius:13px; padding:16px;
  display:flex; align-items:flex-start; gap:14px;
}
.org-addr-icon { width:40px; height:40px; border-radius:10px; background:var(--gndim); border:1px solid rgba(67,177,75,.2); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--green); flex-shrink:0; }
.org-addr-lines { flex:1; }
.org-addr-name { font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.org-addr-line { font-size:11px; color:var(--t3); line-height:1.7; }
.org-addr-line a { color:var(--gold); text-decoration:none; }
.org-addr-line a:hover { text-decoration:underline; }

@media (max-width:640px) {
  .prof-section-grid { grid-template-columns:1fr; }
  .prof-info-block.full { grid-column:span 1; }
  .pib-row { flex-direction:column; gap:3px; }
  .pib-val { text-align:left; }
  .pib-key { min-width:unset; }
  .prof-page-hero { flex-direction:column; align-items:center; text-align:center; }
  .prof-hero-badges { justify-content:center; }
}

/* ================================================================
   MOBILE RESPONSIVE — COMPREHENSIVE
   ================================================================ */
@media (max-width:1100px) {
  .dash-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px) {
  :root { --sbw:0px; --hdh:58px; }
  #sidebar {
    position:fixed; top:0; left:0; bottom:0; width:280px;
    transform:translateX(-100%); box-shadow:none; z-index:400; animation:none;
  }
  #sidebar.open { transform:translateX(0); box-shadow:8px 0 44px rgba(0,0,0,.7); }
  #hamburger { display:flex; }
  .hdr-center { display:none; }
  #main { padding:18px 14px 52px; }
  .dash-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .rota-strip { grid-template-columns:repeat(4,1fr); }
  .form-grid { grid-template-columns:1fr; }
  .hdr-date { display:none; }
  .brand-sub { display:none; }
  .hdr-clock { font-size:13px; padding:6px 10px; letter-spacing:1px; }
  .hdr-right { gap:7px; }
  .sec-head { flex-direction:column; align-items:flex-start; }
  .nbc { flex-wrap:wrap; gap:6px; }
  .hdr-notif-dd { width:calc(100vw - 20px); right:-60px; }
  /* Chat section mobile */
  #chat-sec > div { flex-direction:column !important; height:auto !important; min-height:480px; }
  #chat-sec > div > div:first-child { width:100% !important; border-right:none !important; border-bottom:1px solid var(--border); max-height:160px; }
  #dash-chat-main { min-height:320px; }
  /* Academy grid */
  .academy-grid { grid-template-columns:1fr !important; }
  /* Leave overview */
  .leave-overview { grid-template-columns:1fr 1fr; }
  /* Profile */
  .prof-section-grid { grid-template-columns:1fr; }
  .prof-info-block.full { grid-column:span 1; }
}

@media (max-width:640px) {
  .leave-overview { grid-template-columns:1fr 1fr; }
  .brand-logo { font-size:20px; letter-spacing:5px; }
  .ops-block { display:none; }
}

@media (max-width:540px) {
  :root { --hdh:52px; }
  .dash-grid { grid-template-columns:1fr; }
  .rota-strip { grid-template-columns:repeat(2,1fr); }
  .dash-cal-day { min-height:38px; padding:3px 2px; }
  .cal-day-num { font-size:9px; }
  .cal-shift-badge { font-size:6px; padding:1px 2px; }
  .cal-ph-icon { font-size:7px; }
  .welcome h2 { font-size:17px; letter-spacing:1px; }
  .welcome p { font-size:11px; }
  #widget-elapsed { font-size:26px; }
  #main { padding:12px 10px 56px; }
  .sec-head { margin-bottom:14px; padding-bottom:10px; }
  .sec-head h2 { font-size:18px; letter-spacing:2px; }
  .glass { padding:14px; border-radius:14px; }
  .brand-text { display:none; }
  .brand-logo-img { height:32px; }
  .hdr-clock { display:none; }
  .stat-card { padding:14px; }
  .card-val { font-size:22px; }
  .btn { padding:11px 18px; font-size:9px; }
  .btn-full { padding:14px; font-size:10.5px; }
  #toast { left:10px; right:10px; transform:translateY(80px); min-width:unset; width:auto; max-width:none; }
  #toast.show { transform:translateY(0); }
  .hdr-notif-dd { width:calc(100vw - 16px); right:-50px; top:48px; }
  .login-card { padding:32px 22px; border-radius:18px; }
  .login-brand { font-size:28px; letter-spacing:7px; }
  .dtbl { font-size:11px; }
  .dtbl th, .dtbl td { padding:9px 8px; }
  .form-grid { gap:12px; }
  .ig label { font-size:8px; }
  .leave-overview { grid-template-columns:1fr; }
  .grota { min-width:600px; }
  #test-mode-banner { font-size:9px; letter-spacing:1.5px; padding:5px 14px; }
  .prob-card { flex-direction:column; text-align:center; }
  .perf-chart { height:36px; }
}

@media (max-width:400px) {
  .brand-logo-img { height:28px; }
  .hdr-right { gap:5px; }
  .hdr-icon-btn { width:32px; height:32px; font-size:13px; }
  #main { padding:10px 8px 56px; }
  .sec-head h2 { font-size:16px; }
  .glass { padding:11px; }
  .leave-overview { grid-template-columns:1fr; }
}

/* ── THEME DEFINITIONS ── */
[data-theme="midnight"] {
  --void:#0d1526; --deep:#111c30; --base:#14223a; --lift:#1a2d4a;
  --gold:#7b9fd4; --gold2:#9ab5e0; --gdim:rgba(123,159,212,0.14);
  --gglow:rgba(123,159,212,0.3); --gsoft:rgba(123,159,212,0.07);
  --panel:rgba(255,255,255,0.10); --border:rgba(255,255,255,0.21);
}
[data-theme="slate"] {
  --void:#1a1a1a; --deep:#222222; --base:#2a2a2a; --lift:#333333;
  --gold:#b0b8c4; --gold2:#ccd4de; --gdim:rgba(176,184,196,0.12);
  --gglow:rgba(176,184,196,0.3); --gsoft:rgba(176,184,196,0.055);
}
[data-theme="forest"] {
  --void:#0b1a0d; --deep:#0f2214; --base:#132b18; --lift:#1a381f;
  --gold:#2ecc71; --gold2:#4be88a; --gdim:rgba(46,204,113,0.14);
  --gglow:rgba(46,204,113,0.3); --gsoft:rgba(46,204,113,0.07);
}
[data-theme="light"] {
  --void:#ffffff;--deep:#f4f6f4;--base:#e8ede8;--lift:#dce4dc;
  --panel:rgba(4,80,30,0.05);--panel2:rgba(4,80,30,0.09);
  --border:rgba(4,80,30,0.16);--bord2:rgba(4,80,30,0.26);
  --gold:#04501e;--gold2:#065a23;
  --gdim:rgba(4,80,30,0.10);--gglow:rgba(4,80,30,0.22);--gsoft:rgba(4,80,30,0.04);
  --green:#43b14b;--gndim:rgba(67,177,75,0.12);--gnsoft:rgba(67,177,75,0.05);
  --red:#c42020;--rdim:rgba(196,32,32,0.10);
  --text:#000000;--t2:rgba(0,0,0,0.80);--t3:rgba(0,0,0,0.52);
}
[data-theme="light"] body{background:#ffffff;}
[data-theme="light"] body::before{display:none;}
[data-theme="light"] .glass{background:rgba(255,255,255,0.88)!important;border-color:rgba(4,80,30,0.13)!important;}
[data-theme="light"] #hdr{background:rgba(255,255,255,0.96)!important;border-color:rgba(4,80,30,0.14)!important;}
[data-theme="light"] #sidebar{background:rgba(244,246,244,0.98)!important;}
[data-theme="light"] .login-card{background:rgba(255,255,255,0.97)!important;border-color:rgba(4,80,30,0.22)!important;}
[data-theme="light"] #login-overlay{background:#f4f6f4!important;}

/* ── LOGO IN HEADER ── */
.brand-logo-img {
  height: 36px;
  width: auto;
  display: block;
  opacity: 0;
  animation: logoRevealHdr 0.8s cubic-bezier(0.23,1,0.32,1) 0.3s forwards;
  cursor: pointer;
  transition: filter 0.3s, transform 0.3s;
  filter: drop-shadow(0 0 0px rgba(212,175,55,0));
}
.brand-logo-img:hover {
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.5));
  transform: scale(1.04);
}
@keyframes logoRevealHdr {
  to { opacity:1; }
}

/* ── LOGO IN LOGIN CARD ── */
.login-logo-img {
  height: 56px;
  width: auto;
  display: block;
  margin: 0 auto 14px;
  opacity: 0;
  animation: logoRevealHdr 0.8s cubic-bezier(0.23,1,0.32,1) 0.2s forwards;
}

/* ── THEME CARDS ── */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.theme-card {
  border-radius: 12px;
  padding: 14px 12px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s cubic-bezier(0.23,1,0.32,1);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  position: relative; overflow: hidden;
}
.theme-card:hover { transform: translateY(-3px); }
.theme-card.selected { border-color: var(--gold); box-shadow: 0 0 20px rgba(212,175,55,0.2); }
.theme-card.selected::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute; top: 6px; right: 8px;
  font-size: 9px; color: var(--gold);
}
.theme-swatch {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.theme-transition * { transition: background 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; }

/* ── PASSWORD REQUEST ── */
.pw-request-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.pw-request-card .req-name { font-size: 13px; font-weight: 700; }
.pw-request-card .req-meta { font-size: 10px; color: var(--t3); letter-spacing: 0.5px; }
.pw-request-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ── FIRST LOGIN OVERLAY ── */
#first-login-overlay {
  position: fixed; inset: 0; background: rgba(5,9,5,0.97);
  backdrop-filter: blur(20px); z-index: 9999998;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
#first-login-overlay.show { display: flex; }
.first-login-card {
  width: 100%; max-width: 420px; background: var(--lift);
  border: 1px solid rgba(212,175,55,0.3); border-radius: 24px;
  padding: 44px 36px; text-align: center; position: relative; overflow: hidden;
  animation: lcIn 0.9s cubic-bezier(0.16,1,0.3,1) both;
  box-shadow: 0 32px 80px rgba(0,0,0,0.65), 0 0 80px rgba(212,175,55,0.05);
}
.first-login-card::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 180px; height: 2px;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ================================================================
   PREMIUM ANIMATIONS — DTTASA MISSION CONTROL
   ================================================================ */

/* ── Header scan line (uses background-position so overflow:hidden is NOT needed) ── */
#hdr::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(212,175,55,.04) 50%,transparent 100%);
  background-size:250% 100%;
  animation:hdrScan 7s linear infinite;
}
@keyframes hdrScan { from{background-position:250% 0;} to{background-position:-250% 0;} }

/* ── Clock ambient pulse ── */
@keyframes clockPulse {
  0%,100% { border-color:rgba(212,175,55,.28); }
  50%      { border-color:rgba(212,175,55,.52); box-shadow:0 0 14px rgba(212,175,55,.18); }
}
#hdr-clock { animation:clockPulse 3.5s ease-in-out infinite; }

.prof-hero-photo:hover .photo-hover-overlay { opacity:1 !important; }

/* ── Avatar glow ── */
@keyframes avatarGlow {
  0%,100% { box-shadow:0 0 0 2px rgba(212,175,55,.1); }
  50%      { box-shadow:0 0 14px rgba(212,175,55,.3), 0 0 0 2px rgba(212,175,55,.22); }
}
.avatar { animation:avatarGlow 4s ease-in-out infinite; }

/* ── Notification badge heartbeat ── */
@keyframes badgeHeart {
  0%,90%,100% { transform:scale(1); }
  95%          { transform:scale(1.25); }
}
.hdr-icon-badge, .nav-badge { animation:badgePop .3s ease both, badgeHeart 3s 2s ease-in-out infinite; }

/* ── Mission widget ring ── */
#mission-widget { overflow:hidden; }
#mission-widget::after {
  content:''; position:absolute; inset:-1px; border-radius:15px;
  border:1px solid rgba(212,175,55,.08);
  animation:widgetRing 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes widgetRing {
  0%,100% { opacity:.4; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.004); }
}

/* ── Stat card 3D tilt on hover ── */
.stat-card { perspective:600px; }
.stat-card:hover { transform:translateY(-4px) rotateX(1.5deg); }

/* ── Welcome banner shimmer ── */
.welcome { isolation:isolate; }
.welcome > * { position:relative; z-index:1; }
.welcome::after {
  content:''; position:absolute; inset:0; border-radius:20px; z-index:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.018) 50%,transparent 60%);
  background-size:300% 100%; background-position:300% 0;
  animation:wlcShimmer 6s ease-in-out infinite 2s;
  pointer-events:none;
}
@keyframes wlcShimmer {
  0%   { background-position:300% 0; }
  100% { background-position:-300% 0; }
}

/* ── Section heading entrance ── */
.sec-head h2 { animation:headIn .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes headIn { from{opacity:0;transform:translateX(-10px);} to{opacity:1;transform:none;} }

/* ── Glass panel hover top shimmer ── */
.glass::before { transition:opacity .35s; }
.glass:hover::before { opacity:1 !important; }

/* ── Ops bar reveal animation ── */
.ops-bar-fill { animation:opsReveal 2s .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes opsReveal { from{width:0% !important;} }

/* ── Btn active feedback ── */
.btn:active { transform:scale(.96) !important; transition:transform .08s !important; }


/* ── EOM widget entrance ── */
#eom-widget { animation:eomWidgetIn .8s .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes eomWidgetIn {
  from{opacity:0;transform:translateY(14px) scale(.97);}
  to{opacity:1;transform:none;}
}

/* ── Chat Messenger Dropdown ── */
.chat-dd-item {
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s;
}
.chat-dd-item:hover { background:var(--panel); }
.chat-dd-item:last-child { border-bottom:none; }
.chat-dd-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:linear-gradient(135deg,var(--gold),#8b6914);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#000; position:relative;
}
.chat-dd-avatar img { width:100%; height:100%; object-fit:cover; }
.chat-dd-online { position:absolute; bottom:1px; right:1px; width:9px; height:9px; border-radius:50%; background:var(--green); border:2px solid #0d150c; }
.chat-dd-body { flex:1; min-width:0; }
.chat-dd-name { font-size:12px; font-weight:600; color:var(--text); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-dd-preview { font-size:11px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-dd-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.chat-dd-time { font-size:9px; color:var(--t3); }
.chat-dd-unread { background:var(--green); color:#fff; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px; }

/* ── Dropdown positioning by icon ── */
#conn-req-dd  { right:calc(2 * 46px + 10px + 10px); }
#hdr-chat-dd  { right:calc(1 * 46px + 10px + 10px); }
#hdr-notif-dd { right:10px; }

@media (max-width:600px) {
  .hdr-notif-dd { width:calc(100vw - 20px) !important; right:10px !important; left:auto !important; }
  #conn-req-dd  { right:10px !important; }
  #hdr-chat-dd  { right:10px !important; }
  #hdr-notif-dd { right:10px !important; }
}

/* ── Pin field regen button ── */
.pin-regen-wrap { display:flex; gap:8px; align-items:center; }
.pin-regen-wrap .gi { flex:1; font-family:var(--mono); letter-spacing:3px; font-size:16px; font-weight:700; color:var(--gold); }
.pin-regen-btn {
  flex-shrink:0; background:var(--gdim); border:1px solid rgba(212,175,55,.3);
  border-radius:9px; color:var(--gold); font-size:11px; font-weight:700;
  padding:10px 13px; cursor:pointer; letter-spacing:.5px;
  transition:background .2s, box-shadow .2s; white-space:nowrap;
}
.pin-regen-btn:hover { background:rgba(212,175,55,.2); box-shadow:0 0 12px rgba(212,175,55,.15); }

/* ================================================================
   TEST MODE BANNER
   ================================================================ */
#test-mode-banner {
  display:none; position:relative; z-index:490;
  background:linear-gradient(90deg,rgba(255,140,0,.14) 0%,rgba(255,180,0,.1) 50%,rgba(255,140,0,.14) 100%);
  border-bottom:1px solid rgba(255,165,0,.35);
  padding:6px 20px; text-align:center;
  font-size:10.5px; font-weight:800; letter-spacing:2.5px; color:#FF8C00;
  text-transform:uppercase;
  animation:testBannerIn .5s cubic-bezier(.16,1,.3,1) both;
}
#test-mode-banner.visible { display:block; }
@keyframes testBannerIn { from{opacity:0;transform:translateY(-100%);} to{opacity:1;transform:none;} }
#test-mode-banner::before {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,165,0,.04) 50%,transparent 100%);
  background-size:300% 100%;
  animation:testScan 3s linear infinite;
  pointer-events:none;
}
@keyframes testScan { from{background-position:200% 0;} to{background-position:-200% 0;} }

/* ================================================================
   LEAVE BALANCE PANEL
   ================================================================ */
.leave-overview {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin-bottom:20px;
}
.lb-card {
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:16px 14px; text-align:center; position:relative; overflow:hidden;
  transition:all .3s cubic-bezier(.16,1,.3,1);
  animation:scIn .7s cubic-bezier(.16,1,.3,1) both;
}
.lb-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); }
.lb-card:hover { transform:translateY(-3px); border-color:var(--bord2); }
.lb-card.green { border-color:rgba(67,177,75,.2); }
.lb-card.gold  { border-color:rgba(212,175,55,.2); }
.lb-card.red   { border-color:rgba(232,64,64,.2); }
.lb-lbl { font-size:9.5px; font-weight:800; letter-spacing:1.8px; color:var(--t3); text-transform:uppercase; margin-bottom:10px; }
.lb-val { font-family:var(--mono); font-size:24px; font-weight:700; line-height:1; margin-bottom:5px; }
.lb-unit { font-size:9px; color:var(--t3); letter-spacing:1px; }
.lb-ring { position:relative; width:58px; height:58px; margin:0 auto 10px; }
.lb-ring svg { transform:rotate(-90deg); width:58px; height:58px; }
.lb-ring-bg { fill:none; stroke:rgba(255,255,255,.06); stroke-width:4; }
.lb-ring-fill { fill:none; stroke-width:4; stroke-linecap:round; stroke-dasharray:163; stroke-dashoffset:163; transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1); }
.lb-ring-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; font-weight:700; }
.lb-empty {
  text-align:center; padding:28px 16px; color:var(--t3);
}
.lb-empty i { font-size:28px; display:block; margin-bottom:10px; opacity:.3; }
.lb-empty p { font-size:12px; line-height:1.6; }

/* ================================================================
   PROBATION COUNTDOWN
   ================================================================ */
.prob-card {
  background:linear-gradient(135deg,rgba(255,69,0,.06) 0%,var(--panel) 70%);
  border:1px solid rgba(255,140,0,.2); border-radius:16px; padding:18px 20px;
  display:flex; align-items:center; gap:16px; margin-bottom:20px;
  animation:scIn .7s .35s cubic-bezier(.16,1,.3,1) both;
  transition:all .3s;
}
.prob-card:hover { border-color:rgba(255,140,0,.35); transform:translateY(-2px); }
.prob-ring { position:relative; width:64px; height:64px; flex-shrink:0; }
.prob-ring svg { transform:rotate(-90deg); }
.prob-ring-bg { fill:none; stroke:rgba(255,255,255,.06); stroke-width:5; }
.prob-ring-fill { fill:none; stroke:#FF8C00; stroke-width:5; stroke-linecap:round; stroke-dasharray:178; stroke-dashoffset:178; transition:stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1); }
.prob-ring-txt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; font-weight:700; color:#FF8C00; }
.prob-info { flex:1; }
.prob-title { font-size:10px; font-weight:800; letter-spacing:2px; color:#FF8C00; text-transform:uppercase; margin-bottom:5px; }
.prob-main { font-size:15px; font-weight:700; color:var(--text); margin-bottom:3px; }
.prob-sub { font-size:11px; color:var(--t3); }

/* ================================================================
   PERFORMANCE TREND CHART
   ================================================================ */
.perf-chart {
  display:flex; align-items:flex-end; gap:4px; height:44px; margin-top:10px; margin-bottom:4px;
}
.perf-bar {
  flex:1; border-radius:3px 3px 0 0; min-height:4px;
  transition:height .8s cubic-bezier(.16,1,.3,1), background .5s;
  cursor:default; position:relative;
}
.perf-bar::after {
  content:attr(data-val);
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  font-size:8px; font-family:var(--mono); color:var(--t3);
  opacity:0; transition:opacity .2s;
}
.perf-bar:hover::after { opacity:1; }
.perf-trend-row { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--t3); margin-top:4px; }
.perf-trend-arrow { font-size:12px; font-weight:700; }

/* ================================================================
   ACADEMY CENTER
   ================================================================ */
.academy-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:6px; }
.academy-card {
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px;
  transition:all .3s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden;
  animation:scIn .6s cubic-bezier(.16,1,.3,1) both;
}
.academy-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent); }
.academy-card:hover { border-color:rgba(212,175,55,.3); transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.3); }
.academy-card-icon { width:38px; height:38px; border-radius:10px; background:var(--gdim); border:1px solid rgba(212,175,55,.2); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--gold); margin-bottom:12px; }
.academy-card-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; line-height:1.4; }
.academy-card-cat { font-size:9.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.academy-card-desc { font-size:11px; color:var(--t3); line-height:1.6; margin-bottom:12px; }
.academy-card-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:7px; font-size:10px; font-weight:700; letter-spacing:.8px;
  text-decoration:none; cursor:pointer; transition:all .25s;
  background:var(--gdim); border:1px solid rgba(212,175,55,.25); color:var(--gold);
}
.academy-card-btn:hover { background:rgba(212,175,55,.2); box-shadow:0 0 14px rgba(212,175,55,.15); }
.academy-empty { text-align:center; padding:52px 24px; color:var(--t3); }
.academy-empty i { font-size:44px; display:block; margin-bottom:16px; opacity:.2; }
.academy-empty h3 { font-family:var(--disp); font-size:16px; letter-spacing:2px; color:var(--t3); margin-bottom:8px; }
.academy-empty p { font-size:12px; line-height:1.7; max-width:360px; margin:0 auto; }

/* ================================================================
   EOM ELIGIBILITY BADGE (on dashboard)
   ================================================================ */
.eom-eligibility-row {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  margin-top:12px; font-size:12px;
}
.eom-elig-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.eom-elig-open { background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 1.8s infinite; }
.eom-elig-closed { background:rgba(255,255,255,.2); }

@media (max-width:1100px) { .leave-overview { grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px)  { .leave-overview { grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px)  { .leave-overview { grid-template-columns:1fr 1fr; } .prob-card { flex-direction:column; text-align:center; } }
@media (max-width:400px)  { .leave-overview { grid-template-columns:1fr; } }

#maint-banner{display:none;position:fixed;top:0;left:0;right:0;height:36px;z-index:999998;background:linear-gradient(90deg,rgba(180,120,0,.97),rgba(220,160,0,.97));border-bottom:2px solid rgba(255,200,50,.5);align-items:center;justify-content:center;gap:12px;font-size:10px;font-weight:900;letter-spacing:2px;color:#fff;text-transform:uppercase;backdrop-filter:blur(10px);}
#maint-banner.show{display:flex;animation:tmBIn .45s cubic-bezier(.16,1,.3,1) both;}
@keyframes tmBIn{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
.maint-toggle-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);color:#fff;padding:4px 14px;border-radius:20px;cursor:pointer;font-size:9px;font-weight:900;letter-spacing:1.5px;white-space:nowrap;transition:background .2s,transform .2s;}
.maint-toggle-btn:hover{background:rgba(255,255,255,.32);transform:scale(1.05);}
#maint-overlay{display:none;position:fixed;inset:0;z-index:999997;background:rgba(5,9,5,.96);align-items:center;justify-content:center;flex-direction:column;gap:16px;color:#fff;text-align:center;padding:32px;}
#maint-overlay.show{display:flex;}
#maint-overlay i{font-size:48px;color:var(--gold);margin-bottom:8px;}
#maint-overlay h2{font-family:var(--disp);font-size:28px;letter-spacing:4px;margin:0;}
#maint-overlay p{color:rgba(255,255,255,.6);font-size:13px;max-width:440px;line-height:1.7;}
/* ── SYSTEM NOTIFICATION BELL ── */
.sys-notif-wrap{position:relative;display:inline-flex;align-items:center;}.sys-notif-btn{width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);font-size:15px;position:relative;transition:all .2s;}.sys-notif-btn:hover{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.4);color:var(--blue);}.sys-notif-btn.has-alerts{color:var(--gold);animation:sysNBShake 2s ease infinite;}@keyframes sysNBShake{0%,100%{transform:rotate(0);}10%{transform:rotate(-14deg);}20%{transform:rotate(14deg);}30%{transform:rotate(-10deg);}40%{transform:rotate(10deg);}50%{transform:rotate(0);}}.sys-notif-count{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:9px;background:var(--red,#ff4848);color:#fff;font-size:9px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--void,#060a06);pointer-events:none;line-height:1;}.sys-notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:310px;background:var(--base,#0d1b0a);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.55);z-index:9999;display:none;overflow:hidden;}.sys-notif-panel.open{display:block;animation:snpIn .2s cubic-bezier(.16,1,.3,1) both;}@keyframes snpIn{from{opacity:0;transform:translateY(-8px) scale(.97);}to{opacity:1;transform:none;}}.snp-hdr{padding:12px 14px 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);}.snp-hdr-title{font-size:10px;font-weight:900;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;}.snp-mark-btn{background:none;border:none;color:var(--t3);font-size:10px;cursor:pointer;font-weight:700;padding:2px 7px;border-radius:4px;}.snp-mark-btn:hover{background:var(--panel);color:var(--text);}.snp-body{max-height:360px;overflow-y:auto;}.sn-item{display:flex;align-items:flex-start;gap:9px;padding:9px 14px;cursor:pointer;transition:background .15s;border-left:3px solid transparent;}.sn-item:hover{background:var(--panel);}.sn-item.sn-unread{background:rgba(255,255,255,.03);}.snp-empty{padding:26px 14px;text-align:center;color:var(--t3);font-size:12px;}.sn-unread-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0;align-self:center;margin-left:auto;}