:root {
  --bg: #070b16;
  --bg2: #0c1226;
  --card: rgba(255,255,255,0.045);
  --card-border: rgba(255,255,255,0.09);
  --text: #e8ecf6;
  --muted: #93a0bd;
  --accent: #6ea8ff;
  --accent2: #a78bfa;
  --cyan: #22d3ee;
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --radius: 18px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
#bg3d { position: fixed; inset: 0; z-index: 0; opacity: .85; }
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(110,168,255,.12), transparent 60%),
              radial-gradient(900px 500px at 10% 110%, rgba(167,139,250,.10), transparent 60%),
              linear-gradient(180deg, rgba(7,11,22,.25), rgba(7,11,22,.88) 70%, var(--bg)); }
.wrap { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 0 18px 90px; }

/* Hero */
.hero { padding: 72px 0 34px; }
.kicker { display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.25);
  padding:6px 12px; border-radius:999px; margin-bottom:18px; }
.kicker .dot { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
h1 { font-size: clamp(30px, 6vw, 52px); line-height:1.06; font-weight:800; letter-spacing:-0.02em;
  background: linear-gradient(100deg, #fff 20%, var(--accent) 55%, var(--accent2) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.sub { margin-top:14px; color:var(--muted); font-size:15px; max-width:640px; line-height:1.6; }
.updated { margin-top:16px; font-size:12.5px; color:var(--muted); line-height:1.6; }
.updated b { color:var(--text); font-weight:600; }

/* Stats */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:30px 0 8px; perspective:900px; }
.stat { background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:16px 16px 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform-style:preserve-3d; transition:transform .18s ease, border-color .2s; position:relative; overflow:hidden; }
.stat::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(110,168,255,.12), transparent 45%); pointer-events:none; }
.stat .num { font-size:30px; font-weight:800; letter-spacing:-0.02em; transform:translateZ(24px); }
.stat .lbl { font-size:11.5px; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.09em; transform:translateZ(16px); }
.stat.g .num{color:var(--good)} .stat.w .num{color:var(--warn)} .stat.b .num{color:var(--accent)} .stat.c .num{color:var(--cyan)} .stat.v .num{color:var(--accent2)}

/* Deadline banner */
.banner { margin:22px 0 6px; border:1px solid rgba(251,191,36,.35); background:linear-gradient(120deg, rgba(251,191,36,.10), rgba(251,191,36,.03));
  border-radius:var(--radius); padding:18px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.banner h3 { font-size:15px; display:flex; align-items:center; gap:8px; color:var(--warn); }
.banner p { margin-top:8px; font-size:13.5px; color:var(--text); line-height:1.55; }
.banner .cd { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.banner .cd .cell { background:rgba(0,0,0,.35); border:1px solid rgba(251,191,36,.25); border-radius:12px; padding:8px 12px; text-align:center; min-width:64px; }
.banner .cd .cell .v { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
.banner .cd .cell .u { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.banner .fine { font-size:11.5px; color:var(--muted); margin-top:10px; }

/* Controls */
.controls { position:sticky; top:0; z-index:5; padding:14px 0 10px; margin-top:26px;
  background:linear-gradient(180deg, rgba(7,11,22,.92), rgba(7,11,22,.75) 80%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.search { width:100%; background:var(--card); border:1px solid var(--card-border); color:var(--text);
  border-radius:14px; padding:13px 16px 13px 42px; font-size:14.5px; outline:none; backdrop-filter:blur(14px); transition:border-color .2s; }
.search:focus { border-color:var(--accent); }
.searchbox { position:relative; }
.searchbox svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); opacity:.5; }
.chips { display:flex; gap:8px; overflow-x:auto; padding:12px 2px 4px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip { flex:0 0 auto; font-size:12.5px; padding:8px 14px; border-radius:999px; border:1px solid var(--card-border);
  background:var(--card); color:var(--muted); cursor:pointer; transition:all .18s; user-select:none; }
.chip.active { color:#0a0f1e; background:linear-gradient(120deg,var(--accent),var(--cyan)); border-color:transparent; font-weight:700; }
.chip .n { opacity:.75; font-weight:600; margin-left:4px; }

/* Sections & cards */
.section-label { margin:26px 0 12px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px; }
.section-label::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--card-border), transparent); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; perspective:1200px; }
.card { background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:18px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transform-style:preserve-3d; transition:transform .18s ease, border-color .2s, box-shadow .2s; position:relative; }
.card:hover { border-color:rgba(110,168,255,.4); box-shadow:0 18px 44px -18px rgba(110,168,255,.28); }
.card .top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px 10px; flex-wrap:wrap; transform:translateZ(20px); }
.card .top > div:first-child { flex:1 1 55%; min-width:0; }
.card h4 { font-size:16px; font-weight:700; letter-spacing:-0.01em; }
.card .role { font-size:12.5px; color:var(--muted); margin-top:2px; }
.badge { flex:0 0 auto; font-size:10.5px; font-weight:700; padding:5px 9px; border-radius:999px; letter-spacing:.04em; white-space:nowrap; }
.b-action{ background:rgba(251,191,36,.14); color:var(--warn); border:1px solid rgba(251,191,36,.35);}
.b-applied{ background:rgba(110,168,255,.12); color:var(--accent); border:1px solid rgba(110,168,255,.3);}
.b-confirmed{ background:rgba(52,211,153,.12); color:var(--good); border:1px solid rgba(52,211,153,.35);}
.b-decision{ background:rgba(167,139,250,.12); color:var(--accent2); border:1px solid rgba(167,139,250,.35);}
.b-lead{ background:rgba(34,211,238,.10); color:var(--cyan); border:1px solid rgba(34,211,238,.3);}
.b-mismatch{ background:rgba(248,113,113,.10); color:var(--bad); border:1px solid rgba(248,113,113,.3);}
.b-skipped{ background:rgba(147,160,189,.10); color:var(--muted); border:1px solid rgba(147,160,189,.25);}
.card .meta { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; font-size:12px; color:var(--muted); transform:translateZ(14px); }
.card .meta b { color:var(--text); font-weight:600; }
.card .notes { margin-top:10px; font-size:13px; line-height:1.6; color:#c6cfe4; transform:translateZ(10px); }
.flags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; transform:translateZ(12px); }
.flag { font-size:10.5px; padding:4px 9px; border-radius:8px; background:rgba(251,191,36,.08); color:#f4d488; border:1px solid rgba(251,191,36,.2); }
.card a.src { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:12.5px; color:var(--cyan); text-decoration:none; transform:translateZ(12px); }
.card a.src:hover { text-decoration:underline; }
.hidden { display:none !important; }

/* Timeline */
.timeline { margin-top:8px; position:relative; padding-left:22px; }
.timeline::before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--accent), var(--accent2), transparent); border-radius:2px; }
.t-item { position:relative; padding:10px 0 10px 14px; }
.t-item::before { content:""; position:absolute; left:-21px; top:16px; width:11px; height:11px; border-radius:50%;
  background:var(--bg2); border:2px solid var(--accent); box-shadow:0 0 10px rgba(110,168,255,.6); }
.t-item .when { font-size:11.5px; color:var(--cyan); text-transform:uppercase; letter-spacing:.1em; }
.t-item .what { font-size:13.5px; margin-top:3px; color:#c6cfe4; line-height:1.5; }

/* Footer */
footer { margin-top:44px; border-top:1px solid var(--card-border); padding-top:20px; font-size:12px; color:var(--muted); line-height:1.7; }
footer b { color:var(--text); }
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
  background:#101830; border:1px solid var(--card-border); color:var(--text); font-size:13px; padding:11px 18px; border-radius:12px;
  transition:all .3s; z-index:20; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:560px){
  .hero{ padding:52px 0 26px; }
  .grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(3,1fr); }
  .stat{ padding:14px 10px 12px; }
  .stat .num{ font-size:22px; }
  .stat .lbl{ font-size:9.5px; letter-spacing:.05em; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }
