/* results.nprep.in — the nprep.in design system.
 *
 * Colours, type and components are read off the live nprep.in DOM, not guessed:
 * the same navy ground with three radial glows, the same rounded pill nav, the
 * same blue-gradient cards, the same two-line heading with the second line in
 * the cyan-to-blue brand gradient. Mira is the site's own character and she is
 * used deliberately here — full body in the hero, and one speech bubble on the
 * screen where a student most needs a human voice.
 *
 * THERE IS NO AMBER IN THIS BRAND. #F59E0B appears on nprep.in only as the star
 * rating glyph. Never as an accent, never as a warning.
 *
 * Motion lives at the bottom of this file, in the order it happens.
 */

@import url('/fonts/poppins.css');

:root{
  /* ground + surfaces, taken from nprep.in */
  --navy:#030623; --panel:#0C1240; --panel-2:#111a52;
  --card-a:rgba(30,58,138,.55); --card-b:rgba(30,64,175,.32);
  --edge:rgba(96,165,250,.26); --edge-soft:rgba(96,165,250,.14);
  /* brand */
  --cyan:#00FFD0; --blue:#0077FF; --indigo:#4B2EFF; --indigo-lt:#7C6BFF; --indigo-txt:#9B8CFF;
  /* ink */
  --ink:#fff; --ink-2:rgba(255,255,255,.76); --ink-3:rgba(255,255,255,.56); --ink-4:rgba(255,255,255,.38);
  --radius:24px;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.3,1);
  --spring:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.62; font-weight:400; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 620px at 18% 8%, rgba(0,119,255,.16) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(760px 560px at 86% 34%, rgba(75,46,255,.15) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(0,255,208,.07) 0%, rgba(0,0,0,0) 60%),
    var(--navy);
  background-attachment:fixed;
}
[hidden]{display:none !important}


.wrap{position:relative; z-index:1; max-width:560px; margin:0 auto;
  padding:22px 20px 90px; display:flex; flex-direction:column; gap:24px}

/* ---------- nav pill (site component) ---------- */
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:linear-gradient(135deg, rgba(30,58,138,.72), rgba(17,26,82,.62));
  border:1px solid var(--edge); border-radius:999px; padding:10px 12px 10px 18px;
  backdrop-filter:blur(8px)}
.nav .brand{display:flex; align-items:center; gap:10px}
.nav .brand img{height:26px; width:auto; display:block}
.nav .stamp{background:#000; color:#fff; font-size:12px; font-weight:600;
  padding:8px 16px; border-radius:999px; white-space:nowrap}

/* ---------- type ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--edge-soft); border-radius:999px; padding:6px 15px; margin:0;
  align-self:flex-start}
.eyebrow i{width:6px; height:6px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 10px var(--cyan)}
/* 38px, not 44px. The column is 560px and the longest headline this page shows
   is "result is not out yet" — at 44px that wrapped onto a fourth line, which
   made the page look like it had run out of room before the form even started. */
h1{font-weight:600; font-size:clamp(27px,6.4vw,38px); line-height:1.14; letter-spacing:-.02em;
  margin:0; text-wrap:balance}
h2{font-weight:600; font-size:21px; line-height:1.25; letter-spacing:-.015em; margin:0}
.grad{background:linear-gradient(to right,var(--cyan),var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent}
p{margin:0; color:var(--ink-2); line-height:1.62}
.note{font-size:13.5px; color:var(--ink-3); line-height:1.6}
.tiny{font-size:12px; color:var(--ink-4); line-height:1.55}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:12px; font-weight:500; color:var(--ink-2); background:rgba(255,255,255,.05);
  border:1px solid var(--edge-soft); border-radius:999px; padding:6px 13px}
.chip b{color:var(--cyan); font-weight:600}

/* ---------- cards ---------- */
.card{background:linear-gradient(135deg,var(--card-a),var(--card-b));
  border:1px solid var(--edge); border-radius:var(--radius); padding:24px 22px;
  box-shadow:0 22px 48px -30px rgba(0,0,0,.9);
  display:flex; flex-direction:column; gap:16px}

/* ---------- forms ---------- */
label{font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-4); display:block; margin-bottom:7px}
input,select,textarea{width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  background:rgba(255,255,255,.06); border:1px solid var(--edge-soft); border-radius:14px;
  padding:13px 15px; outline:none; transition:border-color .16s ease, background .16s ease}
input:focus,select:focus,textarea:focus{border-color:var(--cyan); background:rgba(255,255,255,.09)}
input::placeholder{color:var(--ink-4)}
textarea{min-height:78px; resize:vertical; line-height:1.5}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
  linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat}
select option{background:var(--panel); color:var(--ink)}

button{appearance:none; cursor:pointer; font-family:inherit; font-size:15px; font-weight:600;
  border:none; border-radius:999px; padding:14px 22px; width:100%;
  color:#04143a; background:linear-gradient(to right,var(--cyan),var(--blue));
  transition:transform .12s var(--ease), filter .16s ease}
button:hover{filter:brightness(1.06)}
button:active{transform:scale(.985)}
button:disabled{opacity:.5; cursor:not-allowed; transform:none}
button.ghost{background:transparent; color:var(--ink-2); border:1px solid var(--edge)}
button.link{background:none; color:var(--indigo-txt); width:auto; padding:6px 0;
  font-size:13.5px; text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

.err{font-size:13.5px; color:#FFC9DA; background:rgba(255,80,140,.11);
  border:1px solid rgba(255,120,165,.34); border-radius:12px; padding:11px 14px}
.row{display:flex; gap:10px; align-items:flex-start}
.row > *{flex:1; min-width:0}
.field + .field{margin-top:14px}
/* ...but not side by side. Inside a .row the two fields ARE adjacent siblings,
   so the stacking margin above pushed the right-hand one down by 14px and the
   two labels stopped sharing a baseline. */
.row .field + .field{margin-top:0}
.step{display:none; flex-direction:column; gap:20px}
.step.on{display:flex}

/* ---------- hero ----------
 * Mira floats rather than sitting in a grid column. A grid column has to be
 * sized for the longest headline this page will ever show, and it is not the
 * same headline before and after the result — "result is not out yet" and
 * "NORCET 11 Prelims?" want very different widths. A float lets the text close
 * up underneath her instead of being squeezed into a fixed track.
 */
.hero{display:block}
.hero .mira{float:right; width:clamp(104px, 27vw, 148px); height:auto;
  margin:0 0 6px 16px; shape-outside:margin-box;
  filter:drop-shadow(0 22px 44px rgba(0,119,255,.34))}
.hero .eyebrow{margin-bottom:14px}
.hero h1{margin-bottom:0}
.hero::after{content:""; display:block; clear:both}

/* ---------- Mira speech bubble (site component) ---------- */
.mira-say{display:flex; flex-direction:column; align-items:center}
.mira-say .bubble{position:relative; width:100%;
  background:linear-gradient(135deg, rgba(59,49,214,.95), rgba(40,63,190,.92));
  border:1px solid rgba(129,140,248,.42); border-radius:22px; padding:20px 22px}
.mira-say .bubble:after{content:""; position:absolute; bottom:-9px; left:50%; width:18px; height:18px;
  transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg, rgba(40,63,190,.92), rgba(40,63,190,.92));
  border-right:1px solid rgba(129,140,248,.42); border-bottom:1px solid rgba(129,140,248,.42)}
.mira-say .bubble p{font-size:14.5px; line-height:1.66; color:#fff}
.mira-say .bubble p + p{margin-top:10px}
.mira-say .say{font-style:italic; font-weight:500; font-size:15.5px}
.mira-say .face{width:66px; height:66px; border-radius:50%; margin-top:16px; overflow:hidden;
  border:2px solid rgba(129,140,248,.5); background:#1E3A8A; flex:none}
.mira-say .face img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block}
.mira-say .who{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-4); margin-top:8px}

/* ---------- OTP boxes ---------- */
.otp{display:flex; gap:11px; justify-content:center}
.otp input{width:56px; height:66px; text-align:center; font-family:var(--mono);
  font-size:26px; font-weight:600; padding:0; border-radius:16px}
.otp input.filled{border-color:var(--cyan); background:rgba(0,255,208,.10)}

/* ---------- roll entry ---------- */
.rollin{font-family:var(--mono); font-size:24px; letter-spacing:.28em; text-align:center;
  padding:16px 12px}
.tabs{display:flex; gap:6px; background:rgba(255,255,255,.05); border-radius:999px; padding:5px}
.tabs button{background:none; color:var(--ink-3); font-size:13.5px; padding:9px 14px;
  border-radius:999px; font-weight:500}
.tabs button[aria-selected="true"]{background:linear-gradient(to right,var(--cyan),var(--blue));
  color:#04143a; font-weight:600}

/* ---------- drop zone ---------- */
.dz{position:relative; border:2px dashed var(--edge); border-radius:18px; min-height:150px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:22px; text-align:center; cursor:pointer; overflow:hidden;
  transition:border-color .18s ease, background .18s ease}
.dz:hover,.dz.over{border-color:var(--cyan); background:rgba(0,255,208,.05)}
.dz.busy{border-style:solid; border-color:var(--cyan); cursor:progress}
.dz .icon{font-size:26px; line-height:1}
.dz .sweep{position:absolute; left:0; right:0; top:0; height:3px; opacity:0;
  background:linear-gradient(to right,rgba(0,255,208,0),var(--cyan),rgba(0,255,208,0));
  box-shadow:0 0 18px var(--cyan)}
.dz input[type=file]{display:none}

/* ---------- the search ---------- */
.search{display:flex; flex-direction:column; align-items:center; gap:15px; padding:26px 0}
.search .digits{font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:.2em;
  font-variant-numeric:tabular-nums}
.track{width:100%; max-width:280px; height:4px; border-radius:99px;
  background:rgba(255,255,255,.09); overflow:hidden}
.track i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(to right,var(--cyan),var(--blue))}
.search .lbl{font-size:12.5px; color:var(--ink-3); min-height:20px}

/* ---------- result ---------- */
.result{position:relative; border-radius:var(--radius); padding:28px 22px; text-align:center;
  display:flex; flex-direction:column; gap:7px; align-items:center}
.result.win{background:linear-gradient(150deg,rgba(0,119,255,.30),rgba(0,255,208,.13));
  border:1px solid rgba(0,255,208,.42)}
.result.miss{background:linear-gradient(150deg,rgba(75,46,255,.26),rgba(30,58,138,.20));
  border:1px solid rgba(124,107,255,.38)}
.result .kicker{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); font-variant-numeric:tabular-nums}
.result .big{font-size:29px; font-weight:600; line-height:1.15; letter-spacing:-.02em}
.result .pct{font-size:44px; font-weight:600; line-height:1.05; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.result .sm{font-size:13.5px; color:var(--ink-2)}
/* Confetti sits BEHIND the text and bursts from the top of the card: the
   centre is exactly where the rank sits, and a burst over it hides the number
   the student came for. */
canvas.conf{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.result > *:not(canvas){position:relative; z-index:1}

/* ---------- derived rank ---------- */
.rankblock{display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:8px}
.rankblock .rk{font-size:56px; font-weight:600; line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(to right,var(--cyan),var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- cut-off meter ---------- */
.meter{width:100%; display:flex; flex-direction:column; gap:8px; margin-top:8px}
.meter .row2{display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-3)}
.meter .rail{position:relative; height:30px; border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.06); border:1px solid var(--edge-soft)}
.meter .fill{position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(to right,rgba(0,163,190,.60),rgba(0,255,208,.45))}
.meter .cut{position:absolute; top:0; bottom:0; width:3px; background:#fff; opacity:0;
  box-shadow:0 0 10px rgba(255,255,255,.75)}
.meter .cutrow{position:relative; height:16px}
.meter .cutlbl{position:absolute; top:4px; transform:translateX(-50%); font-size:10.5px;
  font-weight:500; color:var(--ink-2); white-space:nowrap; opacity:0}

/* ---------- echo the digits we searched ---------- */
.echo{display:flex; flex-direction:column; align-items:center; gap:8px}
.echo .digits{font-family:var(--mono); font-size:19px; letter-spacing:.22em; color:var(--ink-2)}

footer{text-align:center; font-size:11.5px; color:var(--ink-4); padding-top:4px}
footer a{color:var(--ink-3)}

/* ---------- motion, in the order it happens ---------- */
@keyframes rise{from{transform:translateY(12px)} to{transform:none}}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes glow{0%,100%{opacity:.13; transform:translateY(0)}
  50%{opacity:.19; transform:translateY(-10px)}}

.wrap > *{animation:rise .52s var(--ease) both}
.otp input.filled{animation:pop .14s ease-out}
.otp.wrong{animation:shake .34s ease-out}
.result.miss{animation:fadeUp .7s ease-out both}      /* no scale, no particles */
.mira-say,.formwrap,.formwrap .field{animation:fadeUp .36s ease-out both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}