/* ---------- hero countdown ---------- */
.hero{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:var(--s5);position:relative;overflow:hidden;margin-bottom:var(--s4);
}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 260px at 88% -30%, var(--accent-glow), transparent 68%);
}
.hero-top{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);position:relative;}
.hero-label{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
.hero-exam{font-family:var(--f-display);font-weight:700;font-size:clamp(23px,4.4vw,31px);line-height:1.1;position:relative;}
.hero-meta{font-family:var(--f-mono);font-size:12px;color:var(--dim);margin-top:5px;position:relative;}

.countdown{display:flex;gap:var(--s3);margin-top:var(--s5);position:relative;flex-wrap:wrap;}
.cd-unit{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3) var(--s4);min-width:78px;text-align:center;flex:1;
}
.cd-n{
  font-family:var(--f-display);font-weight:700;font-size:clamp(28px,5.5vw,38px);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.cd-n.flash{animation:pop .35s var(--ease-out);}
.cd-l{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:6px;}
.cd-unit.urgent .cd-n{color:var(--coral);}

/* ---------- stat tiles ---------- */
.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4);box-shadow:var(--sh-sm);transition:transform var(--dur) var(--ease),border-color var(--dur);
}
.tile:hover{transform:translateY(-2px);border-color:var(--line);}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);}
.tile-n{font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;}
.tile-n small{font-size:15px;color:var(--dim);font-weight:600;}
.tile-l{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin-top:6px;}
.tile-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;}
.tile-ico svg{width:15px;height:15px;stroke-width:2;}
.tile-ico.a{background:var(--accent-glow);color:var(--accent);}
.tile-ico.t{background:var(--teal-glow);color:var(--teal);}
.tile-ico.v{background:var(--violet-glow);color:var(--violet);}
.tile-ico.c{background:var(--coral-glow);color:var(--coral);}

.ring-wrap{display:flex;align-items:center;gap:var(--s4);}
.ring-val{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;font-size:19px;}
.ring-box{position:relative;width:78px;height:78px;flex:0 0 auto;}

/* ---------- departures ---------- */
.flight{
  display:grid;grid-template-columns:70px 1fr auto;gap:var(--s4);align-items:center;
  padding:var(--s3) var(--s5);border-top:1px solid var(--line-soft);
  animation:flipIn .5s var(--ease-out) backwards;transition:background var(--dur);
}
.flight:hover{background:var(--surface-2);}
.flight:first-child{border-top:none;}
.f-gate{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;}
.f-date{font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.1;}
.f-label{font-size:14.5px;font-weight:500;line-height:1.35;}
.f-code{font-family:var(--f-mono);font-size:10.5px;color:var(--dim);margin-top:2px;}
.f-status{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:right;white-space:nowrap;}
.f-departed{color:var(--faint);text-decoration:line-through;}
.f-next{color:var(--coral);}
.f-future{color:var(--dim);}
.f-final{color:var(--accent);}
.flight.is-final{background:linear-gradient(90deg,var(--accent-glow),transparent 60%);}

/* ---------- unit progress ---------- */
.unit-row{display:flex;align-items:center;gap:var(--s3);padding:9px 0;}
.unit-name{font-size:13.5px;font-weight:600;flex:0 0 96px;}
.unit-name.physics{color:var(--accent);} .unit-name.maths{color:var(--violet);}
.unit-bar{flex:1;}
.unit-n{font-family:var(--f-mono);font-size:11px;color:var(--dim);flex:0 0 46px;text-align:right;}

@media (max-width:860px){
  .flight{grid-template-columns:64px 1fr;gap:var(--s3);}
  .f-status{grid-column:2;text-align:left;}
  .cd-unit{min-width:62px;padding:var(--s3) var(--s2);}
}
.f-gatetime{color:var(--coral);font-weight:500;}