/* Denning Annual Academic Review — royal purple + gold, with motion.
   Every animation is wrapped so it disappears under prefers-reduced-motion. */

:root {
  --ink:          #120818;
  --purple-900:   #22103C;
  --purple-800:   #2E1552;
  --purple-700:   #3D1C6B;
  --purple-600:   #512B8C;
  --purple-500:   #6D3FB5;
  --purple-400:   #8B5CD6;
  --purple-300:   #B18CEC;
  --purple-100:   #EFE9F8;
  --purple-050:   #F8F5FD;

  /* The brand gold, and only the brand gold. Every accent — headline, required
     markers, confetti — is drawn from this ramp so nothing drifts off-palette. */
  --gold:         #F2CA50;
  --gold-lt:      #FFE08A;
  --gold-pale:    #FFEFC0;
  --gold-deep:    #D4A72C;
  --gold-dark:    #A87F14;
  --gold-soft:    #FBF0CF;

  --paper:        #FFFFFF;
  --canvas:       #F4F1FA;
  --line:         #E4DCF2;
  --line-strong:  #CFC2E6;

  --text:         #241634;
  --muted:        #6B5C80;
  --faint:        #92859F;

  --ok:           #12805C;
  --ok-soft:      #E2F6EE;
  --warn:         #A8631B;
  --warn-soft:    #FCF0DF;
  --bad:          #C32B41;
  --bad-soft:     #FCE9EC;

  --radius:       18px;
  --radius-lg:    26px;
  --radius-sm:    11px;

  --shadow-sm:    0 1px 2px rgba(34,16,60,.06), 0 2px 8px rgba(34,16,60,.05);
  --shadow-md:    0 6px 16px rgba(34,16,60,.10), 0 16px 40px rgba(34,16,60,.09);
  --shadow-lg:    0 12px 30px rgba(34,16,60,.14), 0 32px 80px rgba(34,16,60,.16);
  --glow-purple:  0 0 0 1px rgba(109,63,181,.18), 0 8px 30px rgba(109,63,181,.28);
  --glow-gold:    0 8px 30px rgba(212,167,44,.42);

  --ease-out:     cubic-bezier(.22, 1, .36, 1);
  --ease-spring:  cubic-bezier(.34, 1.56, .64, 1);

  --font:         'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* .field sets display:flex, which outranks the UA rule for [hidden] and would
   leave conditionally-hidden fields on screen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--canvas);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--purple-600); }
h1, h2, h3, h4 { line-height: 1.08; margin: 0; font-weight: 800; letter-spacing: -.025em; }

.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.wrap-narrow { width: min(780px, 100% - 40px); margin-inline: auto; }

/* ============================================================= keyframes */

@keyframes floatY   { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-18px) } }
@keyframes floatSlow{ 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(24px,-30px) scale(1.08) } }
@keyframes drift    { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(-30px,26px) scale(1.12) } }
@keyframes rise     { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
/* Note the explicit opacity at 100%: without it the property interpolates back
   toward the element's own value and everything fades out again on landing. */
@keyframes popIn    { 0% { opacity: 0; transform: scale(.82) } 60% { opacity: 1; transform: scale(1.04) } 100% { opacity: 1; transform: scale(1) } }
@keyframes shimmer  { 0% { background-position: 200% 50% } 100% { background-position: -200% 50% } }
@keyframes marquee  { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes bounceCue{ 0%,100% { transform: translateY(0); opacity: .55 } 50% { transform: translateY(9px); opacity: 1 } }
@keyframes pulseRing{ 0% { box-shadow: 0 0 0 0 rgba(242,202,80,.55) } 70% { box-shadow: 0 0 0 14px rgba(242,202,80,0) } 100% { box-shadow: 0 0 0 0 rgba(242,202,80,0) } }
@keyframes confettiFall { to { transform: translateY(105vh) rotate(var(--spin)); opacity: 0 } }

/* ================================================================= hero */

.hero {
  position: relative;
  overflow: hidden;
  /* Sized for the trimmed hero — headline, one CTA row, nothing else. Taller
     and the composition reads as empty rather than airy. */
  min-height: min(82vh, 660px);
  display: flex;
  align-items: center;
  padding: 62px 0 104px;
  background: var(--ink);
  color: #fff;
  isolation: isolate;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  opacity: .42;
  filter: saturate(.75) contrast(1.05);
  transform: scale(1.08);
}

.hero-tint {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1000px 620px at 78% 6%,  rgba(242,202,80,.20), transparent 60%),
    radial-gradient(900px 700px at 4% 96%,   rgba(109,63,181,.68), transparent 62%),
    linear-gradient(155deg, rgba(18,8,24,.92) 0%, rgba(34,16,60,.86) 45%, rgba(46,21,82,.94) 100%);
}

/* Slow-drifting colour orbs for depth. */
.orb { position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; pointer-events: none; }
.orb-1 { width: 460px; height: 460px; top: -130px; right: -90px;  background: rgba(242,202,80,.30); animation: floatSlow 17s ease-in-out infinite; }
.orb-2 { width: 400px; height: 400px; bottom: -140px; left: -80px; background: rgba(139,92,214,.45); animation: drift 21s ease-in-out infinite; }
.orb-3 { width: 260px; height: 260px; top: 42%; left: 52%;         background: rgba(212,167,44,.20); animation: floatSlow 26s ease-in-out infinite reverse; }

.hero .wrap { position: relative; z-index: 2; }

.brandline {
  display: flex; align-items: center; gap: 20px;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  font-size: 11.5px; color: var(--gold); margin-bottom: 34px;
}
/* Real white artwork, tightly cropped — no brightness/invert filter.
   Sized by WIDTH, not height. The mark is 4.08:1, so 208px tall is 848px wide —
   wider than a tablet's content column. Capping the width and letting the
   height follow means it hits its full size on desktop and shrinks to fit
   everywhere else, with no breakpoints to keep in sync. */
.brandline img { width: min(848px, 100%); height: auto; }
.brandline .sep { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(242,202,80,.55), transparent); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
  background: rgba(242,202,80,.10);
  border: 1px solid rgba(242,202,80,.34);
  padding: 8px 16px; border-radius: 999px;
  margin-bottom: 26px;
  backdrop-filter: blur(8px);
}
.eyebrow .live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  animation: pulseRing 2.4s ease-out infinite;
}

.hero h1 {
  font-size: clamp(38px, 7.2vw, 82px);
  font-weight: 800;
  max-width: 15ch;
  margin-bottom: 24px;
  letter-spacing: -.038em;
}

/* Words animate in one after another. */
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(28px) rotate(2deg); }
.reveal-on .hero h1 .w { animation: rise .78s var(--ease-out) forwards; }

.hero h1 .grad {
  background: linear-gradient(100deg, var(--gold-pale) 0%, var(--gold-lt) 22%, var(--gold) 58%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; opacity: 0; }
.reveal-on .hero-cta { animation: rise .8s var(--ease-out) .7s forwards; }

.chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px; padding: 9px 16px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  transition: .25s var(--ease-out);
}
.chip:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.chip b { color: var(--gold); font-weight: 800; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 3; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.6); font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.scroll-cue svg { animation: bounceCue 1.9s ease-in-out infinite; }

/* Floating photo cards over the hero (desktop only). */
.hero-collage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-collage figure {
  position: absolute; margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.16);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  opacity: 0;
}
.hero-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-collage .c1 { width: 216px; height: 150px; top: 15%;  right: 4%;  transform: rotate(4deg);  }
.hero-collage .c2 { width: 176px; height: 226px; top: 42%;  right: 20%; transform: rotate(-5deg); }
.hero-collage .c3 { width: 196px; height: 132px; bottom: 13%; right: 7%; transform: rotate(3deg); }
.reveal-on .hero-collage .c1 { animation: popIn .8s var(--ease-spring) .9s forwards,  floatY 8s ease-in-out 1.7s infinite; }
.reveal-on .hero-collage .c2 { animation: popIn .8s var(--ease-spring) 1.05s forwards, floatY 10s ease-in-out 1.9s infinite; }
.reveal-on .hero-collage .c3 { animation: popIn .8s var(--ease-spring) 1.2s forwards, floatY 9s ease-in-out 2.1s infinite; }

/* The headline runs to five lines, so the floating photos need more room than
   they did — drop them earlier rather than let text crowd them. */
@media (max-width: 1260px) { .hero-collage { display: none; } }

/* ============================================================== marquee */

.marquee {
  overflow: hidden;
  padding: 18px 0;
  background: linear-gradient(90deg, var(--purple-900), var(--purple-700) 50%, var(--purple-900));
  border-block: 1px solid rgba(255,255,255,.08);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee figure {
  margin: 0; width: 186px; height: 106px; flex: none;
  border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.14);
  transition: transform .3s var(--ease-out);
}
.marquee figure:hover { transform: scale(1.06) rotate(-1.4deg); }
.marquee img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================= sections */

main { padding: 44px 0 90px; }

.steps-intro {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 16px; margin: 0 0 32px; position: relative; z-index: 4;
}

.step-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.step-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }

.step-card h3 { font-size: 15.5px; margin-bottom: 6px; letter-spacing: -.015em; }
.step-card p  { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5; }

/* Scroll-reveal utility. */
.rv { opacity: 0; transform: translateY(30px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }

/* ================================================================= card */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 36px;
  margin-bottom: 22px;
  position: relative;
}

/* ------------------------------------------------- the form shell + band */

.form-shell { padding: 0; overflow: hidden; }
.form-body  { padding: 30px 36px 34px; }

@media (max-width: 560px) { .form-body { padding: 24px 20px 26px; } }

.form-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 30px;
  background: linear-gradient(100deg, var(--purple-800) 0%, var(--purple-600) 58%, var(--purple-700) 100%);
  position: relative;
}
.form-band::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 45%, var(--gold-lt));
}

.form-band-brand {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.form-band-brand img { width: min(554px, 100%); height: auto; }

.form-band-step {
  /* At the larger logo size the brand block fills the row, so the counter wraps
     to its own line — keep it hard right rather than drifting to the left. */
  margin-left: auto;
  font-size: 12px; font-weight: 700; color: var(--gold-pale);
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(242,202,80,.32);
  border-radius: 999px; padding: 5px 14px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) { .form-band { padding: 14px 20px; } }

/* Descendant, not direct-child: the form's panes sit inside .form-body. */
.card h2 { font-size: 23px; margin-bottom: 7px; display: flex; align-items: center; gap: 13px; }

.card h2 .badge {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(140deg, var(--purple-500), var(--purple-800));
  color: var(--gold); font-size: 14px; font-weight: 800; flex: none;
  box-shadow: var(--glow-purple);
}

.card p.hint { color: var(--muted); font-size: 14.5px; margin: 0 0 26px; }

/* Gold rule only on the form's own step intros, not on the admin views. */
.pane > p.hint { border-left: 3px solid var(--gold); padding-left: 15px; border-radius: 2px; }

/* ================================================================ steps */

.progress { margin-bottom: 30px; }

.progress-track {
  height: 9px; border-radius: 999px; background: var(--purple-100);
  overflow: hidden; position: relative;
}
.progress-fill {
  height: 100%; width: 16.6%; border-radius: 999px;
  background: linear-gradient(90deg, var(--purple-500), var(--purple-400) 40%, var(--gold));
  transition: width .6s var(--ease-spring);
  position: relative;
  box-shadow: 0 0 14px rgba(212,167,44,.6);
}
.progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
}

.progress-labels {
  display: flex; justify-content: space-between; gap: 6px; margin-top: 14px;
  font-size: 12px; font-weight: 700; color: var(--faint); letter-spacing: .01em;
}

.progress-labels span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 6px; border-radius: 999px;
  border: 1px solid transparent;
  transition: color .3s, background .3s, border-color .3s, transform .35s var(--ease-out);
}
.progress-labels .dot {
  width: 21px; height: 21px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none;
  font-size: 11px; font-weight: 800;
  background: var(--purple-100); color: var(--purple-500);
  transition: background .3s, color .3s;
}

.progress-labels span.on {
  color: var(--purple-700);
  background: var(--purple-050);
  border-color: var(--line-strong);
  transform: scale(1.03);
}
.progress-labels span.on .dot {
  background: linear-gradient(140deg, var(--purple-500), var(--purple-800));
  color: var(--gold);
}

.progress-labels span.done { color: var(--gold-dark); }
.progress-labels span.done .dot {
  background: linear-gradient(140deg, var(--gold-lt), var(--gold-deep));
  color: var(--purple-900);
}

@media (max-width: 760px) {
  .progress-labels span { display: none; }
  .progress-labels span.on {
    display: inline-flex; font-size: 13px;
    background: transparent; border-color: transparent; padding-left: 0;
  }
}

.pane { display: none; }
.pane.active { display: block; }
.motion .pane.active { animation: rise .5s var(--ease-out); }

/* ================================================================ forms */

.grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.span-2 { grid-column: 1 / -1; }
@media (max-width: 700px) { .grid, .grid-3 { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .005em; }
.field .req { color: var(--gold-dark); font-weight: 800; }
.field .note { font-size: 12px; color: var(--faint); font-weight: 500; }

input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  font-family: inherit; font-size: 14.5px; color: var(--text);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px; width: 100%;
  transition: border-color .2s, box-shadow .25s var(--ease-out), background .2s;
}
textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--purple-400);
  box-shadow: 0 0 0 4px rgba(139,92,214,.16);
}
input::placeholder, textarea::placeholder { color: #AEA2BE; }

/* A quiet gold edge, and a gold tick on the label, once a required field is
   happy — so completion reads as brand colour rather than a stray green. */
input.ok:not(:focus), select.ok:not(:focus), textarea.ok:not(:focus) {
  border-color: rgba(212,167,44,.62);
  background: linear-gradient(0deg, rgba(242,202,80,.05), rgba(242,202,80,.05));
}

.field.done > label::after {
  content: '✓';
  color: var(--gold-dark); font-weight: 800; margin-left: 7px;
  display: inline-block;
}
.motion .field.done > label::after { animation: popIn .4s var(--ease-spring); }

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--bad); box-shadow: 0 0 0 4px rgba(195,43,65,.13);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B5C80' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}

.err-msg { font-size: 12.5px; color: var(--bad); font-weight: 700; display: none; }
.err-msg.show { display: block; animation: popIn .35s var(--ease-spring); }

.counter { font-size: 11.5px; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }

/* Where this submission is headed — shown as soon as the CNIC identifies them. */
.route-note {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(100deg, var(--gold-soft), #fff 70%);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 14px 18px; margin-bottom: 20px;
  font-size: 14.5px; color: #6B4E05;
}
.route-note strong { color: var(--purple-700); }
.motion .route-note { animation: popIn .45s var(--ease-spring); }

/* Fields filled from HR: readable, obviously not editable, no focus ring. */
input.locked, input[readonly].locked {
  background: linear-gradient(160deg, var(--purple-050), #fff);
  border-style: dashed;
  border-color: var(--line-strong);
  color: var(--text);
  font-weight: 600;
  cursor: default;
}
input.locked:focus { border-color: var(--line-strong); box-shadow: none; }

/* Locked fields are labelled in words rather than with a padlock glyph. */
.field:has(input.locked) > label::after {
  content: 'from HR';
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  background: var(--purple-100); color: var(--purple-600); vertical-align: middle;
}

/* Campus photo preview under the campus picker. */
.campus-peek {
  margin-top: 10px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); position: relative;
  height: 0; opacity: 0;
  transition: height .5s var(--ease-out), opacity .4s var(--ease-out);
}
.campus-peek.show { height: 132px; opacity: 1; }
.campus-peek img { width: 100%; height: 100%; object-fit: cover; display: block; }
.campus-peek figcaption {
  position: absolute; inset: auto 0 0 0; padding: 18px 14px 10px;
  background: linear-gradient(transparent, rgba(18,8,24,.86));
  color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
}

/* ====================================================== repeatable rows */

.repeat-item {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 24px; margin-bottom: 16px;
  background: linear-gradient(160deg, var(--purple-050), #fff 65%);
  position: relative;
  transition: border-color .3s, box-shadow .3s var(--ease-out);
}
.motion .repeat-item.fresh { animation: popIn .45s var(--ease-spring); }
.repeat-item:focus-within { border-color: var(--purple-300); box-shadow: var(--glow-purple); }

.repeat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.repeat-head .idx {
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--purple-600);
  display: inline-flex; align-items: center; gap: 8px;
}
.repeat-head .idx::before {
  content: ''; width: 22px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-lt));
}

.btn-remove {
  border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--muted);
  border-radius: 9px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: .2s var(--ease-out);
}
.btn-remove:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); transform: translateY(-1px); }

.btn-add {
  width: 100%; border: 2px dashed var(--line-strong); background: transparent;
  color: var(--purple-600); border-radius: var(--radius);
  padding: 16px; font: inherit; font-size: 14.5px; font-weight: 700;
  cursor: pointer; transition: .25s var(--ease-out);
}
.btn-add:hover {
  border-color: var(--purple-400); background: var(--purple-050);
  transform: translateY(-2px); box-shadow: var(--glow-purple);
}

/* Live tally that gets more enthusiastic as they add more. */
.tally {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--purple-050); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px;
  font-size: 13px; font-weight: 700; color: var(--purple-700);
  margin-bottom: 18px;
  transition: .3s var(--ease-out);
}
.tally.hot { background: var(--gold-soft); border-color: var(--gold); color: #7A5A08; }
.motion .tally.bump { animation: popIn .45s var(--ease-spring); }
.tally .n { font-size: 16px; font-variant-numeric: tabular-nums; }

/* ============================================================== buttons */

.actions {
  display: flex; gap: 12px; justify-content: space-between; align-items: center;
  margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line);
}

.btn {
  font: inherit; font-size: 15px; font-weight: 700;
  border-radius: 13px; padding: 14px 28px; cursor: pointer;
  border: 1.5px solid transparent; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
  position: relative; overflow: hidden;
  transition: transform .22s var(--ease-out), box-shadow .28s var(--ease-out), background .2s;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35), transparent 70%);
  background-size: 250% 100%; background-position: 200% 0;
  transition: background-position .7s var(--ease-out);
}
.btn:hover::after { background-position: -50% 0; }

.btn-primary {
  background: linear-gradient(140deg, var(--purple-500), var(--purple-800));
  color: #fff; box-shadow: 0 4px 14px rgba(61,28,107,.34);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(61,28,107,.44); }
.btn-primary:active { transform: translateY(0) scale(.985); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-gold {
  background: linear-gradient(140deg, var(--gold-lt), var(--gold) 45%, var(--gold-deep));
  color: #2B1B00; box-shadow: var(--glow-gold);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(212,167,44,.55); }
.btn-gold:active { transform: translateY(0) scale(.985); }

.btn-ghost { background: var(--paper); border-color: var(--line-strong); color: var(--muted); }
.btn-ghost:hover { border-color: var(--purple-400); color: var(--purple-600); transform: translateY(-1px); }

.btn-glass {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); color: #fff;
  backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }

.btn-sm { padding: 9px 16px; font-size: 13px; border-radius: 10px; }

/* =============================================================== upload */

.drop {
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  padding: 40px 22px; text-align: center;
  background: linear-gradient(160deg, var(--purple-050), #fff);
  cursor: pointer; transition: .28s var(--ease-out);
}
.drop:hover, .drop.over {
  border-color: var(--purple-400); background: var(--purple-100);
  transform: translateY(-2px); box-shadow: var(--glow-purple);
}
.drop strong { color: var(--purple-600); display: block; font-size: 15.5px; margin-bottom: 5px; }
.drop span { font-size: 13px; color: var(--muted); }

.file-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.file-list li {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13.5px;
}
.motion .file-list li { animation: popIn .4s var(--ease-spring); }
.file-list .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-list .fsize { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.file-list .bad { color: var(--bad); font-weight: 700; font-size: 12px; }

/* =============================================================== review */

.review-block { border-top: 1px solid var(--line); padding: 19px 0; }
.review-block:first-of-type { border-top: 0; padding-top: 0; }
.review-block h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--faint); margin-bottom: 10px; font-weight: 800;
}
.review-block dl { display: grid; grid-template-columns: 185px 1fr; gap: 7px 16px; margin: 0; font-size: 14px; }
.review-block dt { color: var(--muted); }
.review-block dd { margin: 0; font-weight: 600; }
.review-block ol { margin: 0; padding-left: 21px; font-size: 14px; }
.review-block ol li { margin-bottom: 6px; }
.review-block .empty { color: var(--faint); font-style: italic; font-size: 14px; }

@media (max-width: 560px) {
  .review-block dl { grid-template-columns: 1fr; gap: 2px; }
  .review-block dt { font-size: 12px; }
  .review-block dd { margin-bottom: 9px; }
}

/* ============================================================== notices */

.notice { border-radius: var(--radius-sm); padding: 14px 17px; font-size: 14px; margin-bottom: 20px; border: 1.5px solid; }
.notice-warn { background: var(--warn-soft); border-color: #EBCB9C; color: var(--warn); }
.notice-bad  { background: var(--bad-soft);  border-color: #F0BFC6; color: var(--bad); }
.notice-ok   { background: var(--ok-soft);   border-color: #A9E2CD; color: var(--ok); }
.notice-info { background: var(--purple-050); border-color: var(--line-strong); color: var(--muted); }
.notice ul { margin: 7px 0 0; padding-left: 20px; }

.draft-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; font-size: 12.5px; color: var(--faint); margin-top: 18px;
}
.draft-bar .saved { color: var(--ok); font-weight: 700; }

/* =============================================================== thanks */

.thanks-mark {
  width: 92px; height: 92px; border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-lt), var(--gold) 45%, var(--gold-deep));
  display: grid; place-items: center; margin: 0 auto 26px;
  box-shadow: 0 12px 40px rgba(212,167,44,.5);
}
.motion .thanks-mark { animation: popIn .8s var(--ease-spring) both; }
.thanks-mark svg { stroke-dasharray: 40; stroke-dashoffset: 40; }
.motion .thanks-mark svg { animation: draw .6s var(--ease-out) .45s forwards; }
@keyframes draw { to { stroke-dashoffset: 0 } }

.ref-chip {
  display: inline-block; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 22px; font-weight: 800; letter-spacing: .1em;
  color: var(--purple-700); background: var(--purple-050);
  border: 2px dashed var(--line-strong); border-radius: 14px; padding: 13px 26px;
}

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti i {
  position: absolute; top: -14px; width: 9px; height: 15px; border-radius: 2px;
  animation: confettiFall linear forwards;
}

/* ================================================================ admin */

.admin-top {
  background: linear-gradient(150deg, var(--purple-900), var(--ink));
  color: #fff; padding: 26px 0; border-bottom: 3px solid var(--gold);
}
.admin-top .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-top h1 { font-size: 22px; }
.admin-top p { margin: 4px 0 0; font-size: 13px; color: rgba(255,255,255,.64); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 19px 21px; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 800; }
.stat .v { font-size: 32px; font-weight: 800; color: var(--purple-700); line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat .sub { font-size: 12px; color: var(--muted); }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--paper); }
table.data th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); font-weight: 800; padding: 12px 14px;
  border-bottom: 1.5px solid var(--line-strong); white-space: nowrap;
}
table.data td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tbody tr { transition: background .2s; }
table.data tbody tr:hover { background: var(--purple-050); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.pill {
  display: inline-block; font-size: 11.5px; font-weight: 800; padding: 4px 10px;
  border-radius: 999px; background: var(--purple-100); color: var(--purple-700); white-space: nowrap;
}
.pill-ok  { background: var(--ok-soft);  color: var(--ok); }
.pill-bad { background: var(--bad-soft); color: var(--bad); }

.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 20px; }
.filters .field { flex: 1 1 180px; }

/* ================================================================ login */

.login-shell {
  min-height: 100vh; display: grid; place-items: center; padding: 30px 20px;
  position: relative; overflow: hidden;
  background: radial-gradient(760px 460px at 50% 0%, rgba(109,63,181,.42), transparent 66%), var(--ink);
}
.login-card {
  width: min(420px, 100%); background: var(--paper); border-radius: var(--radius-lg);
  padding: 38px; box-shadow: var(--shadow-lg); position: relative; z-index: 2;
}
.motion .login-card { animation: popIn .6s var(--ease-spring); }

/* =============================================================== footer */

.foot { text-align: center; padding: 34px 20px 46px; font-size: 13px; color: var(--faint); }
.foot a { color: var(--purple-600); }

/* ================================================================ print */

@media print {
  body { background: #fff; }
  .no-print, .admin-top, .foot, .actions, .marquee, .hero { display: none !important; }
  .card { box-shadow: none; border-color: #ccc; page-break-inside: avoid; }
}

/* ====================================================== reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero h1 .w, .hero-cta, .hero-collage figure { opacity: 1; transform: none; }
  .rv { opacity: 1; transform: none; }
  .hero-video { display: none; }
  .orb { display: none; }
}