/* ============================================================
   TOPEDUPREP — DESIGN SYSTEM v2
   Concept: Apple product-page language (iPad / iPad Pro marketing).
   White + light-gray canvas, single Apple-blue accent, a blue→violet
   mesh-gradient hero, pill buttons, borderless soft-shadow cards,
   restrained fade-up motion.
   ============================================================ */

@import url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/pretendard.css');

:root{
  /* ---- Color tokens ---- */
  --bg-000:#FFFFFF;
  --bg-050:#F5F5F7;          /* Apple light-gray section bg */
  --bg-black:#1D1D1F;        /* Apple near-black */
  --ink-900:#1D1D1F;         /* headline text */
  --ink-600:#6E6E73;         /* secondary text */
  --ink-400:#86868B;         /* tertiary / caption text */
  --blue-600:#0071E3;        /* Apple blue — primary accent */
  --blue-700:#0058B0;        /* hover state */
  --blue-100:#E8F2FD;        /* pale blue wash */
  --violet-500:#7C6CF0;      /* gradient partner */
  --teal-500:#2FB6A6;        /* "online" accent */
  --teal-100:#E4F6F3;
  --red-600:#E0432B;         /* urgency / D-day */
  --line:#E8E8ED;            /* Apple hairline separator */

  --font-display:'Pretendard', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --font-body:'Pretendard', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  --font-mono:'SF Mono', 'IBM Plex Mono', 'Roboto Mono', monospace;

  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-card:0 2px 8px rgba(0,0,0,.04), 0 16px 40px rgba(0,0,0,.06);
  --shadow-lift:0 24px 64px rgba(0,0,0,.16);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg-000);
  color:var(--ink-900);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.006em;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;color:var(--ink-900);margin:0 0 .5em;line-height:1.15;letter-spacing:-.02em;}
p{margin:0 0 1em;color:var(--ink-600);}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
:focus-visible{outline:3px solid var(--blue-600);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ---- Eyebrow ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:13px;letter-spacing:.02em;
  color:var(--blue-600);font-weight:600;margin-bottom:14px;
}

/* ============================================================
   TOP UTILITY BAR — Apple-style slim black strip
   ============================================================ */
.utility-bar{background:var(--bg-black);color:#f5f5f7;font-size:12px;}
.utility-bar .container{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 24px;gap:16px;flex-wrap:wrap;
}
.utility-bar .ub-locations{display:flex;gap:18px;flex-wrap:wrap;color:#a1a1a6;}
.utility-bar .ub-locations b{color:#f5f5f7;font-weight:600;}
.utility-bar .ub-contact{display:flex;gap:16px;}
.utility-bar .ub-contact a{color:#f5f5f7;opacity:.9;}
.utility-bar .ub-contact a:hover{opacity:1;color:var(--blue-600);}

/* ============================================================
   HEADER / NAV — translucent blur, Apple.com structure
   ============================================================ */
header.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.78);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 24px;max-width:var(--maxw);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--ink-900);}
.brand .brand-mark{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--blue-600),var(--violet-500));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:12px;color:#fff;font-weight:800;
}
.brand small{display:block;font-size:10px;letter-spacing:.03em;color:var(--ink-400);font-weight:500;}

nav.main-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end;}
nav.main-nav a{
  padding:8px 12px;font-size:13px;color:var(--ink-900);font-weight:500;border-radius:999px;
  transition:color .15s, background .15s;white-space:nowrap;
}
nav.main-nav a:hover{color:var(--blue-600);background:var(--blue-100);}
nav.main-nav a.active{color:var(--blue-600);font-weight:700;}

.nav-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--blue-600);color:#fff;font-weight:600;font-size:13px;
  padding:9px 18px;border-radius:999px;white-space:nowrap;
  transition:transform .15s, box-shadow .15s, background .15s;
}
.nav-cta:hover{background:var(--blue-700);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,113,227,.32);}

.nav-toggle{display:none;background:none;border:none;color:var(--ink-900);font-size:22px;cursor:pointer;padding:4px 8px;}

@media (max-width: 980px){
  nav.main-nav{
    position:fixed;inset:56px 0 0 0;background:#fff;
    flex-direction:column;align-items:stretch;padding:12px;gap:0;
    transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav a{padding:16px 10px;border-bottom:1px solid var(--line);border-radius:0;font-size:16px;}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
  .nav-wrap .nav-cta.mobile-cta{display:inline-flex;margin:14px 10px;}
}

/* ============================================================
   DEADLINE TICKER — slim pill banner
   ============================================================ */
.deadline-ticker{background:var(--bg-050);border-bottom:1px solid var(--line);}
.deadline-ticker .container{
  display:flex;align-items:center;gap:14px;padding:9px 24px;font-size:13px;flex-wrap:wrap;
}
.deadline-ticker .dt-label{
  font-size:11px;font-weight:700;letter-spacing:.03em;color:#fff;
  background:var(--ink-900);padding:3px 9px;border-radius:999px;
}
.deadline-ticker .dt-value{font-family:var(--font-mono);font-weight:700;color:var(--red-600);}
.deadline-ticker a{color:var(--blue-600);font-weight:600;}
.deadline-ticker a:hover{text-decoration:underline;}

/* ============================================================
   HERO — mesh-gradient, huge type, floating glass card
   ============================================================ */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(124,108,240,.55), transparent 55%),
    radial-gradient(1000px 700px at 90% 10%, rgba(47,182,166,.35), transparent 55%),
    linear-gradient(160deg, #0A2A6B 0%, #1B3FA0 35%, #5B3FCB 75%, #7C6CF0 100%);
}
.hero-grid{
  max-width:var(--maxw);margin:0 auto;padding:96px 24px 84px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:1;
}
.hero h1{color:#fff;font-size:clamp(34px,4.6vw,54px);letter-spacing:-.03em;font-weight:800;}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#fff,#CFE0FF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero .lede{color:rgba(255,255,255,.82);font-size:18px;max-width:52ch;font-weight:400;}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 30px;}
.hero-badges span{
  font-size:12.5px;color:#fff;font-weight:600;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  padding:7px 14px;border-radius:999px;backdrop-filter:blur(6px);
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  padding:13px 26px;border-radius:999px;cursor:pointer;border:none;
  transition:transform .15s, box-shadow .15s, background .15s;
}
.btn-primary{background:var(--blue-600);color:#fff;}
.btn-primary:hover{background:var(--blue-700);transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,113,227,.4);}
.btn-ghost{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(6px);}
.btn-ghost:hover{background:rgba(255,255,255,.22);}
.btn-dark{background:var(--ink-900);color:#fff;}
.btn-dark:hover{background:#000;}

/* Transcript / progress card — glass over the gradient hero */
.transcript-card{
  background:rgba(255,255,255,.92);color:var(--ink-900);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);overflow:hidden;backdrop-filter:blur(20px);
}
.transcript-card .tc-head{
  background:rgba(29,29,31,.94);color:#fff;padding:18px 22px;
  display:flex;justify-content:space-between;align-items:center;
}
.transcript-card .tc-head span{font-size:11px;letter-spacing:.03em;color:#a1a1a6;}
.transcript-card .tc-head strong{font-size:15px;font-weight:700;}
.transcript-card .tc-body{padding:20px 22px;}
.tc-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;
}
.tc-row:last-child{border-bottom:none;}
.tc-row .tc-subject{font-weight:600;color:var(--ink-900);}
.tc-row .tc-meta{font-size:11.5px;color:var(--ink-400);}
.tc-score{font-family:var(--font-mono);font-weight:700;color:var(--teal-500);font-size:15px;}
.tc-bar{height:5px;background:var(--bg-050);border-radius:3px;margin-top:6px;overflow:hidden;}
.tc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue-600),var(--violet-500));border-radius:3px;}
.tc-foot{background:var(--bg-050);padding:12px 22px;font-size:11px;color:var(--ink-400);border-top:1px solid var(--line);}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:96px 0;}
.section-head{max-width:640px;margin:0 0 44px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);}
.section-head p{color:var(--ink-600);font-size:17px;}
.bg-ink{background:var(--bg-black);color:#fff;}
.bg-ink h2,.bg-ink h3,.bg-ink h4{color:#fff;}
.bg-ink .section-head p{color:#a1a1a6;}
.bg-panel{background:var(--bg-050);}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

/* ---- Exam cards — borderless, soft shadow, big radius ---- */
.exam-card{
  background:#fff;border:none;border-radius:var(--radius-lg);
  padding:30px 26px;box-shadow:var(--shadow-card);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
.exam-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);}
.exam-card .ec-icon{
  width:46px;height:46px;border-radius:13px;
  background:linear-gradient(135deg,var(--blue-600),var(--violet-500));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;margin-bottom:18px;
}
.exam-card h3{font-size:19px;margin-bottom:6px;}
.exam-card .ec-tag{font-size:11.5px;color:var(--ink-400);margin-bottom:12px;display:block;font-weight:600;}
.exam-card p{font-size:14.5px;color:var(--ink-600);margin-bottom:14px;}
.exam-card a.ec-link{font-size:13.5px;font-weight:700;color:var(--blue-600);}
.exam-card a.ec-link:hover{text-decoration:underline;}

/* ---- Stat strip ---- */
.stat-strip{
  background:var(--bg-black);color:#fff;border-radius:var(--radius-lg);
  display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;
}
.stat-strip .stat{padding:34px 22px;border-right:1px solid rgba(255,255,255,.1);text-align:center;}
.stat-strip .stat:last-child{border-right:none;}
.stat b{display:block;font-family:var(--font-mono);font-size:32px;background:linear-gradient(90deg,#fff,#B9C9FF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat span{font-size:13px;color:#a1a1a6;}
@media(max-width:760px){.stat-strip{grid-template-columns:1fr 1fr;}.stat-strip .stat:nth-child(2){border-right:none;}}

/* ---- Teacher cards ---- */
.teacher-card{background:#fff;border:none;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.teacher-card .tch-top{
  background:linear-gradient(135deg,#1B3FA0,#7C6CF0);color:#fff;padding:30px 24px 64px;position:relative;
}
.teacher-card .tch-avatar{
  width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.95);color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;
}
.teacher-card .tch-role{font-size:11px;color:rgba(255,255,255,.75);letter-spacing:.04em;margin-top:14px;font-weight:600;}
.teacher-card .tch-name{font-size:20px;margin-top:4px;color:#fff;font-weight:700;}
.teacher-card .tch-body{padding:22px 24px 26px;margin-top:-40px;background:#fff;border-radius:20px 20px 0 0;position:relative;}
.teacher-card .tch-subjects{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.teacher-card .tch-subjects span{font-size:11.5px;background:var(--teal-100);color:var(--teal-500);padding:5px 10px;border-radius:999px;font-weight:600;}
.teacher-card p{font-size:14px;color:var(--ink-600);}
.tch-quote{font-size:14px;color:var(--ink-900);border-left:3px solid var(--blue-600);padding-left:12px;margin-top:12px;font-weight:500;}

/* ---- Curriculum timeline ---- */
.timeline{border-top:1px solid var(--line);}
.timeline-row{display:grid;grid-template-columns:150px 1fr;gap:28px;padding:28px 0;border-bottom:1px solid var(--line);}
.timeline-row .tl-when{font-family:var(--font-mono);font-weight:700;color:var(--blue-600);font-size:14px;}
.timeline-row .tl-when small{display:block;color:var(--ink-400);font-weight:400;font-size:11.5px;margin-top:4px;font-family:var(--font-body);}
.timeline-row h4{font-size:17px;margin-bottom:6px;}
.timeline-row p{font-size:14.5px;color:var(--ink-600);margin-bottom:10px;}
.tl-tags{display:flex;gap:8px;flex-wrap:wrap;}
.tl-tags span{font-size:12px;background:var(--bg-050);padding:5px 11px;border-radius:999px;color:var(--ink-600);font-weight:500;}
@media(max-width:640px){.timeline-row{grid-template-columns:1fr;gap:8px;}}

/* ---- Compare cards ---- */
.compare-card{border:none;border-radius:var(--radius-lg);background:#fff;padding:32px;box-shadow:var(--shadow-card);}
.compare-card .cc-tag{font-size:11px;font-weight:700;letter-spacing:.03em;padding:6px 12px;border-radius:999px;display:inline-block;margin-bottom:16px;}
.compare-card.on .cc-tag{background:var(--teal-100);color:var(--teal-500);}
.compare-card.off .cc-tag{background:var(--blue-100);color:var(--blue-600);}
.compare-card ul{margin-top:14px;}
.compare-card li{display:flex;gap:10px;padding:9px 0;font-size:14.5px;border-bottom:1px solid var(--line);color:var(--ink-600);}
.compare-card li:last-child{border-bottom:none;}
.compare-card li::before{content:'✓';color:var(--teal-500);font-weight:700;}
.compare-card.off li::before{color:var(--blue-600);}

/* ---- Location cards ---- */
.loc-card{background:#fff;border:none;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.loc-card .loc-head{padding:22px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;}
.loc-card h3{font-size:19px;margin-bottom:4px;}
.loc-card .loc-badge{font-size:11px;font-weight:700;background:var(--ink-900);color:#fff;padding:5px 11px;border-radius:999px;white-space:nowrap;}
.loc-card .loc-body{padding:20px 24px;font-size:14px;color:var(--ink-600);}
.loc-card .loc-body dt{font-weight:700;color:var(--ink-900);font-size:12px;margin-top:12px;}
.loc-card .loc-body dd{margin:2px 0 0;}

/* ---- Review cards ---- */
.review-card{background:#fff;border:none;border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-card);}
.review-card .rv-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;}
.review-card .rv-id{font-size:12px;color:var(--ink-400);}
.review-card .rv-score{font-family:var(--font-mono);font-weight:700;color:var(--teal-500);font-size:12.5px;background:var(--teal-100);padding:5px 10px;border-radius:999px;white-space:nowrap;}
.review-card p{font-size:14.5px;color:var(--ink-900);}
.review-card .rv-tag{font-size:12px;color:var(--blue-600);font-weight:700;margin-top:10px;display:block;}

/* ---- FAQ ---- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer;padding:22px 4px;font-weight:600;font-size:16px;color:var(--ink-900);
  display:flex;justify-content:space-between;align-items:center;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:22px;color:var(--blue-600);font-weight:400;}
.faq-item[open] summary::after{content:'–';}
.faq-item .faq-a{padding:0 4px 22px;color:var(--ink-600);font-size:14.5px;}

/* ---- Table ---- */
table.ledger-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
table.ledger-table th{background:var(--bg-black);color:#fff;text-align:left;padding:15px 18px;font-size:12.5px;font-weight:600;}
table.ledger-table td{padding:15px 18px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-600);}
table.ledger-table tr:last-child td{border-bottom:none;}
table.ledger-table tr:hover td{background:var(--bg-050);}
.ledger-table .tag-month{font-family:var(--font-mono);font-weight:700;color:var(--blue-600);}

/* ---- CTA band ---- */
.cta-band{
  background:linear-gradient(135deg,#0A2A6B,#5B3FCB);color:#fff;border-radius:28px;
  padding:56px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
}
.cta-band h3{color:#fff;font-size:27px;max-width:520px;}
.cta-band p{color:rgba(255,255,255,.78);}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ---- Footer ---- */
footer.site-footer{background:var(--bg-050);color:var(--ink-600);padding:60px 0 24px;font-size:13.5px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-bottom:36px;border-bottom:1px solid var(--line);}
.footer-grid h5{color:var(--ink-900);font-size:12px;letter-spacing:.03em;margin-bottom:16px;font-weight:700;}
.footer-grid a{display:block;color:var(--ink-600);padding:5px 0;}
.footer-grid a:hover{color:var(--blue-600);}
.footer-brand{font-size:19px;color:var(--ink-900);margin-bottom:10px;font-weight:700;}
.footer-bottom{display:flex;justify-content:space-between;padding-top:20px;flex-wrap:wrap;gap:10px;color:var(--ink-400);font-size:12px;}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr;}.hero-grid{grid-template-columns:1fr;}.cta-band{flex-direction:column;align-items:flex-start;}}

/* ---- Inner-page hero ---- */
.page-hero{
  background:
    radial-gradient(900px 500px at 10% -20%, rgba(124,108,240,.5), transparent 55%),
    radial-gradient(800px 500px at 95% 0%, rgba(47,182,166,.3), transparent 55%),
    linear-gradient(160deg,#0A2A6B,#1B3FA0 45%,#5B3FCB 100%);
  color:#fff;padding:64px 0 52px;
}
.page-hero .crumb{font-size:12px;color:rgba(255,255,255,.6);margin-bottom:14px;font-weight:600;}
.page-hero h1{color:#fff;font-size:clamp(28px,3.8vw,42px);}
.page-hero p{color:rgba(255,255,255,.82);max-width:62ch;font-size:16px;}

/* ---- Mock test widget ---- */
.mock-shell{background:#fff;border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);overflow:hidden;}
.mock-topbar{background:var(--bg-black);color:#fff;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:13.5px;}
.mock-topbar .mt-timer{font-family:var(--font-mono);font-weight:700;color:#7FD8CE;font-size:16px;}
.mock-progress{height:4px;background:var(--bg-050);}
.mock-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue-600),var(--violet-500));width:0%;transition:width .3s;}
.mock-body{padding:36px;}
.mock-qtag{font-size:12px;color:var(--ink-400);margin-bottom:10px;font-weight:600;}
.mock-question{font-size:18px;font-weight:600;color:var(--ink-900);margin-bottom:24px;line-height:1.6;}
.mock-choices{display:grid;gap:10px;}
.mock-choice{
  display:flex;gap:12px;align-items:flex-start;padding:15px 17px;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);cursor:pointer;font-size:14.5px;transition:border-color .15s, background .15s;
}
.mock-choice:hover{border-color:var(--blue-600);background:var(--blue-100);}
.mock-choice .mc-letter{
  font-family:var(--font-mono);font-weight:700;color:var(--ink-400);border:1px solid var(--line);
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12.5px;
}
.mock-choice.selected{border-color:var(--blue-600);background:var(--blue-100);}
.mock-choice.correct{border-color:var(--teal-500);background:var(--teal-100);}
.mock-choice.correct .mc-letter{background:var(--teal-500);color:#fff;border-color:var(--teal-500);}
.mock-choice.incorrect{border-color:var(--red-600);background:#FDEBE8;}
.mock-choice.incorrect .mc-letter{background:var(--red-600);color:#fff;border-color:var(--red-600);}
.mock-explain{margin-top:20px;padding:18px 20px;background:var(--bg-050);border-left:3px solid var(--blue-600);font-size:14px;color:var(--ink-600);border-radius:0 12px 12px 0;display:none;}
.mock-explain.show{display:block;}
.mock-footer{padding:18px 32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.mock-result{padding:44px 32px;text-align:center;}
.mock-result .mr-score{font-family:var(--font-mono);font-size:54px;font-weight:800;background:linear-gradient(90deg,var(--blue-600),var(--violet-500));-webkit-background-clip:text;background-clip:text;color:transparent;}
.btn-sm{padding:9px 18px;font-size:13.5px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:600;cursor:pointer;}
.btn-sm:disabled{opacity:.35;cursor:not-allowed;}

[id]{scroll-margin-top:110px;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ============================================================
   TI-84 CALCULATOR — floating action button + inline banner
   ============================================================ */
.calc-fab{
  position:fixed;right:22px;bottom:22px;z-index:200;
  display:flex;align-items:center;gap:10px;
  background:rgba(29,29,31,.88);color:#fff;
  padding:14px;border-radius:999px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, padding .2s, background .2s;
  overflow:hidden;
}
.calc-fab-icon{
  width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue-600),var(--violet-500));border-radius:8px;
}
.calc-fab-label{
  font-size:13.5px;font-weight:600;white-space:nowrap;
  max-width:0;opacity:0;overflow:hidden;transition:max-width .3s ease, opacity .25s ease;
}
.calc-fab:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.34);background:rgba(0,0,0,.92);}
.calc-fab:hover .calc-fab-label{max-width:160px;opacity:1;margin-right:4px;}
@media (max-width:640px){
  .calc-fab{right:16px;bottom:16px;padding:14px;}
  .calc-fab-label{display:none;}
}

.calc-banner{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(120deg,#0A2A6B,#3A2E9E 55%,#7C6CF0);
  color:#fff;border-radius:var(--radius-lg);padding:24px 28px;
  box-shadow:var(--shadow-card);
}
.calc-banner-icon{
  width:52px;height:52px;flex-shrink:0;border-radius:14px;
  background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
}
.calc-banner-text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:220px;}
.calc-banner-text strong{font-size:16px;font-weight:700;}
.calc-banner-text span{font-size:13.5px;color:rgba(255,255,255,.82);font-weight:400;}
.calc-banner-btn{background:#fff;color:var(--blue-700);white-space:nowrap;padding:11px 20px;font-size:14px;}
.calc-banner-btn:hover{background:#f0f0f0;transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.22);}