/* =====================================================================
   Masters Cave — UGC NET Marks Analyzer
   Design language: "ink & gilt" — a law library after dark.
   Display: Bricolage Grotesque · Body: Inter · Data: JetBrains Mono
   ===================================================================== */

:root{
  /* Surfaces */
  --ink:        #14101c;
  --ink-2:      #1b1527;
  --ink-3:      #241d34;
  --ink-4:      #2f2743;
  --hairline:   rgba(244,239,230,.10);
  --hairline-2: rgba(244,239,230,.18);

  /* Type */
  --parchment:  #f4efe6;
  --muted:      #a294bb;
  --muted-2:    #7a6d92;

  /* Accents */
  --brass:      #e8b33c;
  --brass-dim:  #a87f1f;
  --rose:       #ff2d8f;
  --violet:     #8b5cf6;

  /* Semantic */
  --jade:       #2fd39b;
  --coral:      #ff5a5a;
  --slate:      #5b5170;

  /* Geometry */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;
  --r-pill: 999px;

  --shadow:      0 24px 70px rgba(0,0,0,.55);
  --shadow-soft: 0 10px 34px rgba(0,0,0,.35);
  --glow-brass:  0 0 0 1px rgba(232,179,60,.28), 0 12px 40px rgba(232,179,60,.14);
  --glow-rose:   0 0 0 1px rgba(255,45,143,.30), 0 12px 44px rgba(255,45,143,.20);

  --ff-display: 'Bricolage Grotesque','Outfit',system-ui,sans-serif;
  --ff-body:    'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ff-mono:    'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --maxw: 1080px;
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  font-family:var(--ff-body);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  background:var(--ink);
  color:var(--parchment);
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------
   Ambient backdrop — slow aurora over a fine ruled grid,
   echoing the ruled columns of a printed response sheet.
   --------------------------------------------------------------- */
.aurora{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% -6%,  rgba(139,92,246,.30), transparent 62%),
    radial-gradient(760px 480px at 92% 4%,   rgba(255,45,143,.22), transparent 60%),
    radial-gradient(820px 620px at 50% 108%, rgba(232,179,60,.16), transparent 62%);
  animation:drift 26s ease-in-out infinite alternate;
}
.aurora::after{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(244,239,230,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,239,230,.030) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 26%, #000 12%, transparent 74%);
  -webkit-mask-image:radial-gradient(circle at 50% 26%, #000 12%, transparent 74%);
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(0,-26px,0) scale(1.06); }
}

/* --------------------------------- Layout ---------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px; }
.stack   > * + *{ margin-top:16px; }
.stack-lg> * + *{ margin-top:34px; }
section{ scroll-margin-top:80px; }

/* --------------------------------- Masthead -------------------- */
.masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 0 6px;
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.brand-mark{
  width:38px; height:38px; border-radius:11px; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(145deg,var(--brass),#c98a12);
  color:#1a1204; font-family:var(--ff-display); font-weight:800; font-size:19px;
  box-shadow:var(--glow-brass);
}
.brand-name{ font-family:var(--ff-display); font-weight:700; font-size:16px; letter-spacing:-.015em; }
.brand-sub{ font-size:11.5px; color:var(--muted-2); letter-spacing:.10em; text-transform:uppercase; }
.masthead-links{ display:flex; gap:8px; }

/* --------------------------------- Hero ------------------------ */
.hero{ padding:34px 0 18px; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  border:1px solid rgba(232,179,60,.28); background:rgba(232,179,60,.07);
  padding:7px 15px; border-radius:var(--r-pill);
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--jade);
  box-shadow:0 0 0 0 rgba(47,211,155,.65); animation:pulse 2.1s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(47,211,155,0); }
  100%{ box-shadow:0 0 0 0 rgba(47,211,155,0); }
}

h1.hero-title{
  font-family:var(--ff-display);
  font-size:clamp(2.5rem, 8.2vw, 4.6rem);
  font-weight:800; line-height:.96; letter-spacing:-.035em;
  margin:20px 0 0;
}
h1.hero-title .gilt{
  background:linear-gradient(100deg,var(--brass) 0%,#fff0c4 34%,var(--brass) 58%,var(--rose) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% 100%; animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

.hero-sub{
  max-width:56ch; margin:16px auto 0; color:var(--muted);
  font-size:clamp(.98rem,2.4vw,1.1rem);
}

/* Live counters under the hero */
.pulse-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:22px;
}
.pulse-chip{
  display:inline-flex; align-items:baseline; gap:7px;
  background:rgba(244,239,230,.045); border:1px solid var(--hairline);
  border-radius:var(--r-pill); padding:7px 14px; font-size:12.5px; color:var(--muted);
}
.pulse-chip b{ font-family:var(--ff-mono); font-size:14px; color:var(--parchment); font-weight:700; }

/* --------------------------------- Cards ----------------------- */
.card{
  background:linear-gradient(180deg,rgba(36,29,52,.86),rgba(27,21,39,.92));
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:26px;
}
.card-tight{ padding:18px; border-radius:var(--r); }

.card-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.card-title{ font-family:var(--ff-display); font-weight:700; font-size:1.18rem; letter-spacing:-.02em; }
.card-note{ font-size:12.5px; color:var(--muted-2); }

/* --------------------------------- Dropzone -------------------- */
.dropzone{
  /* A <label> is inline by default: without this the vertical padding
     reserves no space and the dashed border breaks into arcs. */
  display:block; width:100%;
  position:relative; border-radius:var(--r-lg);
  border:1.6px dashed rgba(232,179,60,.42);
  background:
    radial-gradient(560px 200px at 50% 0%, rgba(232,179,60,.10), transparent 68%),
    rgba(244,239,230,.028);
  padding:44px 24px; text-align:center; cursor:pointer;
  transition:border-color .22s, background .22s, transform .22s;
}
.dropzone:hover,.dropzone:focus-visible{
  border-color:var(--brass); background:rgba(232,179,60,.09); transform:translateY(-2px);
}
.dropzone.is-dragging{ border-color:var(--rose); background:rgba(255,45,143,.10); transform:scale(1.008); }
.dropzone.has-file{ border-style:solid; border-color:rgba(47,211,155,.55); background:rgba(47,211,155,.07); }
.dropzone input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }

.dz-icon{
  width:62px; height:62px; margin:0 auto 16px; border-radius:19px;
  display:grid; place-items:center; font-size:27px;
  background:linear-gradient(150deg,rgba(232,179,60,.20),rgba(255,45,143,.16));
  border:1px solid rgba(232,179,60,.28);
}
.dz-title{ font-family:var(--ff-display); font-weight:700; font-size:1.22rem; letter-spacing:-.02em; }
.dz-hint{ color:var(--muted); font-size:13.5px; margin-top:7px; }
.dz-file{ font-family:var(--ff-mono); font-size:12.5px; color:var(--jade); margin-top:11px; word-break:break-all; }

/* --------------------------------- Forms ----------------------- */
.field{ display:block; }
.field + .field{ margin-top:14px; }
.req{
  display:inline-block; margin-left:6px; padding:2px 7px; border-radius:var(--r-pill);
  font-family:var(--ff-mono); font-size:9px; font-weight:600; letter-spacing:.10em;
  background:rgba(255,45,143,.16); border:1px solid rgba(255,45,143,.40); color:#ff92c4;
  text-transform:uppercase;
}
.field label{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.10em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:7px;
}
.input, .select, .textarea{
  width:100%; font-family:var(--ff-body); font-size:15px; color:var(--parchment);
  background:rgba(20,16,28,.72); border:1px solid var(--hairline-2);
  border-radius:var(--r-sm); padding:12px 14px; transition:border-color .18s, box-shadow .18s;
}
.textarea{ font-family:var(--ff-mono); font-size:13px; line-height:1.7; resize:vertical; min-height:220px; }
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(232,179,60,.16);
}
.input::placeholder,.textarea::placeholder{ color:var(--slate); }
.select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 19px) 20px, calc(100% - 14px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:38px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.help{ font-size:12px; color:var(--muted-2); margin-top:6px; }

/* --------------------------------- Buttons --------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ff-body); font-weight:650; font-size:14.5px; line-height:1;
  padding:13px 22px; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .16s, box-shadow .16s, background .16s, border-color .16s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn:disabled,.btn[aria-disabled=true]{ opacity:.5; cursor:not-allowed; transform:none; }

.btn-primary{
  background:linear-gradient(135deg,var(--brass),#f0c766 46%,var(--rose));
  background-size:180% 100%; color:#1a1204; box-shadow:var(--glow-brass);
}
.btn-primary:hover:not(:disabled){ background-position:100% 50%; transform:translateY(-2px); box-shadow:0 0 0 1px rgba(232,179,60,.4),0 16px 46px rgba(255,45,143,.26); }

.btn-ghost{ background:rgba(244,239,230,.055); border-color:var(--hairline-2); color:var(--parchment); }
.btn-ghost:hover{ background:rgba(244,239,230,.11); border-color:var(--hairline-2); transform:translateY(-1px); }

.btn-wa{ background:#25d366; color:#06331a; }
.btn-tg{ background:#2aabee; color:#03293d; }
.btn-wa:hover,.btn-tg:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); }

.btn-danger{ background:rgba(255,90,90,.13); border-color:rgba(255,90,90,.4); color:#ffb0b0; }
.btn-danger:hover{ background:rgba(255,90,90,.22); }

.btn-sm{ padding:9px 15px; font-size:13px; }
.btn-lg{ padding:16px 32px; font-size:16px; }
.btn-block{ width:100%; }

/* --------------------------------- Score seal (signature) ------ */
.reveal-grid{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:30px; align-items:center;
}
@media (max-width:760px){ .reveal-grid{ grid-template-columns:1fr; gap:24px; } }

.seal{
  position:relative; width:min(300px,78vw); aspect-ratio:1; margin-inline:auto;
  display:grid; place-items:center;
}
.seal-ring{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from -90deg, var(--brass) 0turn, var(--rose) var(--pct,0turn), rgba(244,239,230,.07) var(--pct,0turn) 1turn);
  transition:--pct 1.5s cubic-bezier(.22,1,.36,1);
  mask:radial-gradient(farthest-side,transparent calc(100% - 15px),#000 calc(100% - 14px));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 15px),#000 calc(100% - 14px));
  filter:drop-shadow(0 0 20px rgba(232,179,60,.30));
}
@property --pct{ syntax:'<angle>'; inherits:false; initial-value:0turn; }

.seal-face{
  position:absolute; inset:19px; border-radius:50%;
  background:radial-gradient(circle at 50% 22%, var(--ink-3), var(--ink) 74%);
  border:1px solid var(--hairline);
  display:grid; place-items:center; align-content:center; text-align:center; padding:14px;
}
.seal-score{
  font-family:var(--ff-display); font-weight:800; letter-spacing:-.05em;
  font-size:clamp(3.1rem,13vw,4.4rem); line-height:1;
  background:linear-gradient(160deg,#fff6dd,var(--brass) 62%,#c98a12);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.seal-out-of{ font-family:var(--ff-mono); font-size:13px; color:var(--muted-2); margin-top:5px; }
.seal-label{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.20em;
  text-transform:uppercase; color:var(--brass); margin-bottom:8px;
}

/* --------------------------------- Stat tiles ------------------ */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:12px; }
.stat{
  background:rgba(244,239,230,.038); border:1px solid var(--hairline);
  border-radius:var(--r); padding:16px 15px; position:relative; overflow:hidden;
}
.stat::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent,var(--slate)); }
.stat-k{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); }
.stat-v{ font-family:var(--ff-display); font-weight:750; font-size:1.72rem; letter-spacing:-.03em; margin-top:5px; line-height:1.05; }
.stat-x{ font-size:11.5px; color:var(--muted-2); margin-top:2px; }
.stat.is-correct{ --accent:var(--jade); }
.stat.is-wrong  { --accent:var(--coral); }
.stat.is-skip   { --accent:var(--slate); }
.stat.is-acc    { --accent:var(--brass); }
.stat.is-rank   { --accent:var(--rose); }
.stat.is-drop   { --accent:var(--violet); }

/* --------------------------------- Response grid --------------- */
/* The exam's own artifact, re-drawn: one tile per question. */
.qgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(38px,1fr));
  gap:6px; margin-top:6px;
}
.qtile{
  aspect-ratio:1; border-radius:8px; border:1px solid var(--hairline);
  display:grid; place-items:center; position:relative;
  font-family:var(--ff-mono); font-size:11px; font-weight:600;
  background:rgba(244,239,230,.04); color:var(--muted);
  cursor:pointer; transition:transform .14s, box-shadow .14s, filter .14s;
  animation:tilein .34s backwards cubic-bezier(.22,1,.36,1);
}
.qtile:hover{ transform:translateY(-3px) scale(1.06); z-index:3; box-shadow:var(--shadow-soft); }
.qtile.correct    { background:rgba(47,211,155,.18);  border-color:rgba(47,211,155,.48);  color:#a8f2d7; }
.qtile.incorrect  { background:rgba(255,90,90,.18);   border-color:rgba(255,90,90,.48);   color:#ffc0c0; }
.qtile.unattempted{ background:rgba(244,239,230,.045); border-color:var(--hairline);      color:var(--muted-2); }
.qtile.dropped    { background:rgba(139,92,246,.20);  border-color:rgba(139,92,246,.50);  color:#ddd0ff; }
.qtile.nokey      { background:rgba(232,179,60,.10);  border-color:rgba(232,179,60,.32);  color:var(--brass); }
.qtile.is-hidden  { display:none; }
.qtile .flagdot{
  position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%;
  background:var(--rose); border:1.5px solid var(--ink-2);
}
@keyframes tilein{ from{ opacity:0; transform:scale(.4) translateY(8px); } to{ opacity:1; transform:none; } }

.legend{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.legend button{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--ff-body); font-size:12.5px; font-weight:600;
  background:rgba(244,239,230,.045); border:1px solid var(--hairline);
  color:var(--muted); border-radius:var(--r-pill); padding:7px 13px; transition:all .16s;
}
.legend button:hover{ color:var(--parchment); border-color:var(--hairline-2); }
.legend button[aria-pressed=true]{ background:rgba(232,179,60,.14); border-color:rgba(232,179,60,.45); color:var(--parchment); }
.swatch{ width:10px; height:10px; border-radius:3px; flex:none; }
.sw-correct{ background:var(--jade); } .sw-incorrect{ background:var(--coral); }
.sw-unattempted{ background:var(--slate); } .sw-dropped{ background:var(--violet); }
.sw-nokey{ background:var(--brass); } .sw-all{ background:linear-gradient(135deg,var(--brass),var(--rose)); }

/* --------------------------------- Question detail panel ------- */
.qpanel{
  margin-top:16px; border:1px solid var(--hairline-2); border-radius:var(--r);
  background:rgba(20,16,28,.65); padding:18px;
}
.qpanel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.qpanel-id{ font-family:var(--ff-mono); font-size:12.5px; color:var(--muted); }
.opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:9px; margin-top:14px; }
.opt{
  border:1px solid var(--hairline); border-radius:var(--r-sm); padding:11px 12px;
  font-family:var(--ff-mono); font-size:12px; color:var(--muted); text-align:center;
}
.opt b{ display:block; font-family:var(--ff-display); font-size:15px; color:var(--parchment); margin-bottom:3px; }
.opt.is-correct{ border-color:rgba(47,211,155,.55); background:rgba(47,211,155,.12); color:#a8f2d7; }
.opt.is-chosen { border-color:rgba(255,45,143,.55); background:rgba(255,45,143,.12); }
.opt.is-both   { border-color:rgba(47,211,155,.7);  background:rgba(47,211,155,.20); }

.steps{ list-style:none; counter-reset:step; margin:0; padding:0; }
.steps li{
  counter-increment:step; position:relative;
  padding:0 0 0 44px; margin-bottom:16px;
  font-size:14.5px; color:var(--muted); line-height:1.6;
}
.steps li:last-child{ margin-bottom:0; }
.steps li::before{
  content:counter(step); position:absolute; left:0; top:-1px;
  width:29px; height:29px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--ff-mono); font-size:13px; font-weight:700;
  background:rgba(232,179,60,.14); border:1px solid rgba(232,179,60,.42);
  color:var(--brass);
}
.steps strong{ color:var(--parchment); font-weight:650; }
.steps em{ color:var(--parchment); font-style:normal; }
.steps a{ color:var(--brass); text-decoration:underline; text-underline-offset:2px; }

.kbd{
  display:inline-block; font-family:var(--ff-mono); font-size:11.5px;
  padding:2px 7px; border-radius:5px; color:var(--parchment);
  background:rgba(244,239,230,.09); border:1px solid var(--hairline-2);
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* --------------------------------- Badges / pills -------------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ff-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(244,239,230,.07); border:1px solid var(--hairline); color:var(--muted);
}
.badge.ok  { background:rgba(47,211,155,.14); border-color:rgba(47,211,155,.42); color:#7ee8c0; }
.badge.bad { background:rgba(255,90,90,.14);  border-color:rgba(255,90,90,.42);  color:#ff9d9d; }
.badge.warn{ background:rgba(232,179,60,.14); border-color:rgba(232,179,60,.42); color:var(--brass); }
.badge.rose{ background:rgba(255,45,143,.14); border-color:rgba(255,45,143,.42); color:#ff92c4; }

/* --------------------------------- Share row ------------------- */
.share-row{ display:flex; flex-wrap:wrap; gap:10px; }
.share-row .btn{ flex:1 1 auto; min-width:150px; }

.share-note{
  margin-top:12px; font-size:12.5px; color:var(--muted-2);
  display:flex; align-items:center; gap:8px; justify-content:center; text-align:center;
}

/* --------------------------------- Course offer ---------------- */
/* The only rose-led surface in the app, so it reads as an offer rather
   than as another block of result data. */
.offer{
  position:relative; overflow:hidden;
  border:1px solid rgba(255,45,143,.30);
  background:
    radial-gradient(680px 240px at 12% 0%, rgba(255,45,143,.15), transparent 66%),
    radial-gradient(520px 220px at 92% 100%, rgba(139,92,246,.13), transparent 62%),
    linear-gradient(180deg,rgba(36,29,52,.90),rgba(27,21,39,.94));
  border-radius:var(--r-lg); padding:26px;
}
.offer::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--rose),var(--brass));
}
.offer-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-mono); font-size:10px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:#ff92c4;
  border:1px solid rgba(255,45,143,.34); background:rgba(255,45,143,.10);
  padding:6px 13px; border-radius:var(--r-pill);
}
.offer-title{
  font-family:var(--ff-display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.42rem,4vw,1.95rem); line-height:1.12; margin-top:14px;
}
.offer-read{ color:var(--muted); font-size:14.5px; margin-top:10px; max-width:60ch; }
.offer-read b{ color:var(--parchment); font-weight:650; }

.offer-grid{
  display:grid; grid-template-columns:230px minmax(0,1fr);
  gap:22px; align-items:start; margin-top:22px;
}

/* Thumbnail. Falls back to a branded gradient tile if the file is absent. */
.offer-media{
  position:relative; display:block; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--hairline-2); aspect-ratio:16/10;
  background:linear-gradient(140deg,rgba(232,179,60,.22),rgba(255,45,143,.20));
  transition:transform .25s, box-shadow .25s;
}
.offer-media:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.offer-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.offer-media-fallback{ display:none; }
.offer-media.is-empty .offer-media-fallback{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; position:absolute; inset:0; text-align:center; padding:12px;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(20,16,28,.72);
}
.offer-media.is-empty .offer-media-fallback b{
  font-family:var(--ff-display); font-size:17px; letter-spacing:-.02em;
  text-transform:none; color:#1a1204;
}

.offer-body{ min-width:0; }
.offer-course-name{
  font-family:var(--ff-display); font-weight:700; font-size:1.06rem;
  letter-spacing:-.015em; color:var(--parchment); margin-bottom:12px;
}
.offer-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.offer-list li{
  position:relative; padding-left:24px; font-size:13.8px;
  color:var(--muted); line-height:1.5;
}
.offer-list li::before{
  content:''; position:absolute; left:5px; top:7px; width:7px; height:7px;
  border-radius:2px; background:linear-gradient(135deg,var(--brass),var(--rose));
}

.offer-price{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:18px; padding:13px 16px;
  border:1px dashed rgba(232,179,60,.46); background:rgba(232,179,60,.08);
  border-radius:var(--r);
}
.offer-price-amt{
  font-family:var(--ff-display); font-weight:800; font-size:1.72rem;
  color:var(--brass); line-height:1;
}
.offer-price-tag{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-top:5px;
}
.offer-price-note{ font-size:12.8px; color:var(--muted); line-height:1.5; flex:1 1 190px; }

.offer-urgency{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.offer-urgency span{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.10em;
  text-transform:uppercase; color:#ff92c4;
  background:rgba(255,45,143,.10); border:1px solid rgba(255,45,143,.32);
  padding:6px 12px; border-radius:var(--r-pill);
}
.offer-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }

@media (max-width:760px){
  .offer{ padding:20px 16px; border-radius:var(--r); }
  .offer-grid{ grid-template-columns:1fr; gap:16px; margin-top:18px; }
  .offer-read{ font-size:13.5px; }
  .offer-list li{ font-size:13.5px; }
  .offer-price{ gap:11px; padding:13px 14px; }
  .offer-price-note{ flex-basis:100%; }
  .offer-actions .btn{ width:100%; }
}

/* --------------------------------- Leaderboard ----------------- */
.board{ display:flex; flex-direction:column; gap:8px; }
.board-row{
  display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:13px;
  padding:11px 14px; border-radius:var(--r-sm);
  background:rgba(244,239,230,.035); border:1px solid var(--hairline);
}
.board-row.is-you{ border-color:rgba(255,45,143,.5); background:rgba(255,45,143,.10); box-shadow:var(--glow-rose); }
.board-rank{ font-family:var(--ff-display); font-weight:800; font-size:1.1rem; color:var(--muted-2); text-align:center; }
.board-row:nth-child(1) .board-rank{ color:var(--brass); }
.board-row:nth-child(2) .board-rank{ color:#d8d3e4; }
.board-row:nth-child(3) .board-rank{ color:#cd8b52; }
.board-name{ font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-meta{ font-family:var(--ff-mono); font-size:11.5px; color:var(--muted-2); }
.board-marks{ font-family:var(--ff-mono); font-weight:700; font-size:1.02rem; color:var(--brass); }

/* --------------------------------- Tables (admin) -------------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--hairline); border-radius:var(--r); }
table.data{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px; }
table.data th{
  text-align:left; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted-2); font-weight:600;
  padding:12px 14px; background:rgba(244,239,230,.045); border-bottom:1px solid var(--hairline);
  white-space:nowrap; position:sticky; top:0;
}
table.data td{ padding:11px 14px; border-bottom:1px solid rgba(244,239,230,.06); vertical-align:middle; }
table.data tbody tr:hover{ background:rgba(244,239,230,.035); }
table.data tbody tr:last-child td{ border-bottom:none; }
.mono{ font-family:var(--ff-mono); font-size:12.5px; }
.nowrap{ white-space:nowrap; }
.num{ text-align:right; font-family:var(--ff-mono); }

/* --------------------------------- Alerts ---------------------- */
.alert{
  border-radius:var(--r); padding:14px 16px; font-size:14px;
  border:1px solid var(--hairline-2); background:rgba(244,239,230,.05);
  display:flex; gap:11px; align-items:flex-start;
}
.alert.ok  { border-color:rgba(47,211,155,.42); background:rgba(47,211,155,.10); color:#bdf3de; }
.alert.err { border-color:rgba(255,90,90,.42);  background:rgba(255,90,90,.10);  color:#ffc9c9; }
.alert.warn{ border-color:rgba(232,179,60,.42); background:rgba(232,179,60,.10); color:#f6dfa8; }
.alert ul{ margin:7px 0 0 18px; font-size:13px; }

/* --------------------------------- Progress -------------------- */
.progress{ height:5px; border-radius:var(--r-pill); background:rgba(244,239,230,.10); overflow:hidden; }
.progress span{
  display:block; height:100%; width:0%; border-radius:inherit;
  background:linear-gradient(90deg,var(--brass),var(--rose));
  transition:width .35s ease;
}
.stage{ font-family:var(--ff-mono); font-size:12px; color:var(--muted); margin-top:10px; text-align:center; }

/* --------------------------------- Admin shell ----------------- */
.admin-bar{
  border-bottom:1px solid var(--hairline);
  background:rgba(20,16,28,.86); backdrop-filter:blur(14px);
  position:sticky; top:0; z-index:40;
}
.admin-bar .wrap{ display:flex; align-items:center; gap:18px; padding-block:12px; flex-wrap:wrap; }
.admin-nav{ display:flex; gap:3px; flex-wrap:wrap; margin-left:auto; }
.admin-nav a{
  font-size:13px; font-weight:600; color:var(--muted); text-decoration:none;
  padding:8px 13px; border-radius:var(--r-pill); transition:all .16s;
}
.admin-nav a:hover{ color:var(--parchment); background:rgba(244,239,230,.07); }
.admin-nav a.active{ color:#1a1204; background:linear-gradient(135deg,var(--brass),#f0c766); }
.page-head{ padding:28px 0 20px; }
.page-title{ font-family:var(--ff-display); font-weight:800; font-size:clamp(1.6rem,4.4vw,2.3rem); letter-spacing:-.032em; }
.page-sub{ color:var(--muted); font-size:14px; margin-top:6px; }

.login-shell{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card{ width:100%; max-width:420px; }

/* --------------------------------- Admin: wide screens ---------
   The public tool stays narrow because long text lines are tiring to
   read. The admin panel is the opposite problem: dense tables of names,
   numbers and buttons, on a desktop. So the shell widens there only.
   Scoped with :has() so no markup change is needed.
   ---------------------------------------------------------------- */
@media (min-width:1180px){
  body:has(.admin-bar) .wrap{ max-width:1500px; }

  /* More tiles per row instead of five cramped ones */
  body:has(.admin-bar) .stat-grid{
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  }

  /* Let the extra width become breathing room, not just longer rows */
  body:has(.admin-bar) table.data th,
  body:has(.admin-bar) table.data td{ padding:13px 18px; }

  body:has(.admin-bar) .grid-2{ gap:20px; }
}

@media (min-width:1700px){
  body:has(.admin-bar) .wrap{ max-width:1720px; }
  body:has(.admin-bar) table.data th,
  body:has(.admin-bar) table.data td{ padding:14px 22px; }
}

/* Long prospect and result lists: keep the column headings visible while
   scrolling, and cap the height so the page itself does not run for miles. */
@media (min-width:1180px){
  body:has(.admin-bar) .table-wrap{
    max-height:calc(100vh - 260px);
    overflow:auto;
  }
  body:has(.admin-bar) table.data th{
    position:sticky; top:0; z-index:5;
    background:#221b33;              /* solid: rows must not show through */
    box-shadow:inset 0 -1px 0 var(--hairline);
  }
}

/* --------------------------------- Footer ---------------------- */
.foot{
  margin-top:56px; padding:28px 0 44px; border-top:1px solid var(--hairline);
  color:var(--muted-2); font-size:13px; text-align:center;
}
.foot a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--hairline-2); }
.foot a:hover{ color:var(--brass); }

/* --------------------------------- Utilities ------------------- */
.hidden{ display:none !important; }
.center{ text-align:center; }
.muted{ color:var(--muted); }
.dim{ color:var(--muted-2); }
.small{ font-size:12.5px; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:34px}
.flex{ display:flex; }
.gap-1{gap:8px}.gap-2{gap:14px}
.between{ justify-content:space-between; }
.items-center{ align-items:center; }
.wrap-flex{ flex-wrap:wrap; }
.grow{ flex:1 1 auto; }

.fade-up{ animation:fadeUp .55s backwards cubic-bezier(.22,1,.36,1); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* Focus visibility — never remove it. */
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:4px; }

/* Confetti canvas sits above content but ignores pointer events. */
#confetti{ position:fixed; inset:0; pointer-events:none; z-index:60; }

/* --------------------------------- Responsive ------------------ */
@media (max-width:820px){
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .reveal-grid{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  .wrap{ padding-inline:16px; }

  /* Masthead: the wordmark was wrapping and the sub-line was too dim */
  .masthead{ padding:14px 0 4px; gap:10px; align-items:center; }
  .brand{ gap:9px; min-width:0; }
  .brand-mark{ width:34px; height:34px; font-size:17px; border-radius:10px; }
  .brand-name{ font-size:14.5px; white-space:nowrap; }
  .brand-sub{ font-size:9px; letter-spacing:.09em; color:var(--muted); white-space:nowrap; }
  .masthead-links{ gap:6px; flex:none; }
  .masthead-links .btn{ padding:8px 13px; font-size:12.5px; }

  /* Hero */
  .hero{ padding:24px 0 12px; }
  .eyebrow{
    font-size:9.5px; letter-spacing:.10em; padding:7px 14px;
    line-height:1.7; max-width:100%; text-align:center;
  }
  h1.hero-title{ font-size:clamp(2.05rem,10.2vw,3.1rem); letter-spacing:-.032em; margin-top:17px; }
  .hero-sub{ font-size:.95rem; margin-top:14px; }
  .pulse-row{ gap:7px; margin-top:18px; }
  .pulse-chip{ padding:6px 12px; font-size:11.5px; }
  .pulse-chip b{ font-size:13px; }

  /* Cards */
  .card{ padding:19px 16px; border-radius:var(--r); }
  .card-title{ font-size:1.08rem; }

  /* Dropzone: the big radius made the dashed border render as broken arcs */
  .dropzone{
    padding:30px 16px; border-radius:var(--r);
    border-width:2px; border-style:dashed;
  }
  .dz-icon{ width:54px; height:54px; font-size:23px; border-radius:16px; margin-bottom:13px; }
  .dz-title{ font-size:1.05rem; }
  .dz-hint{ font-size:12.5px; }
  .dz-file{ font-size:11.5px; }

  /* Buttons go full width so they are thumb-sized */
  .btn-lg{ padding:15px 24px; font-size:15px; width:100%; }
  .share-row .btn{ min-width:100%; }
  .flex.gap-1.wrap-flex > .btn{ flex:1 1 100%; }

  /* Result */
  .seal{ width:min(238px,68vw); }
  .seal-face{ inset:16px; }
  .seal-score{ font-size:clamp(2.5rem,15vw,3.5rem); }
  .stat-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat{ padding:13px 12px; }
  .stat-v{ font-size:1.44rem; }

  .legend{ gap:6px; }
  .legend button{ padding:6px 11px; font-size:11.5px; }
  .qgrid{ grid-template-columns:repeat(auto-fill,minmax(33px,1fr)); gap:5px; }

  .steps li{ padding-left:38px; font-size:13.5px; margin-bottom:14px; }
  .steps li::before{ width:26px; height:26px; font-size:12px; }

  .page-head{ padding:20px 0 16px; }
  .admin-bar .wrap{ padding-block:10px; }
  .admin-nav{ width:100%; margin-left:0; }
  .admin-nav a{ padding:7px 11px; font-size:12.5px; }
}

@media (max-width:420px){
  .wrap{ padding-inline:13px; }
  .brand-sub{ display:none; }
  .masthead-links .btn{ padding:8px 11px; font-size:12px; }
  h1.hero-title{ font-size:clamp(1.9rem,10.6vw,2.6rem); }
  .eyebrow{ font-size:9px; padding:6px 11px; }
  .qgrid{ grid-template-columns:repeat(auto-fill,minmax(30px,1fr)); gap:4px; }
  .qtile{ font-size:10px; border-radius:6px; }
  .stat-grid{ gap:8px; }
  .opts{ grid-template-columns:repeat(2,1fr); }
}

@media print{
  .aurora,.masthead-links,.share-row,.legend,#confetti{ display:none !important; }
  body{ background:#fff; color:#111; }
  .card{ border:1px solid #ccc; background:#fff; box-shadow:none; }
}

/* --------------------------------- Reduced motion -------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .aurora{ animation:none; }
}