/* ==========================================================================
   Premium layer: editorial layout + purposeful motion.
   Loaded after app.css. Only transform/opacity are animated (GPU, 60 fps).
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 640ms;
  --navy-900: #062c47;
  --navy: #004e7d;
  --sky: #007db7;
  --paper: #f5f7fa;
  --hair: #dfe5ec;
  --display: "Montserrat", Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body { background: var(--paper); font-feature-settings: "tnum" 1, "lnum" 1; }
::selection { background: #cfe4f2; color: var(--navy-900); }

/* ---------------------------------------------------------------- header */
.topbar { transition: box-shadow var(--t-med) var(--ease-out), min-height var(--t-med) var(--ease-out); }
.topbar.is-scrolled { box-shadow: 0 6px 24px rgba(6, 44, 71, 0.08); }
.brandmark img { transition: transform var(--t-med) var(--ease-out); }
.brandmark:hover img { transform: translateY(-1px); }

/* network activity line under the header */
#loader { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 200ms; }
#loader.on { opacity: 1; }
#loader::before { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--sky), transparent); animation: loaderSlide 900ms var(--ease-in) infinite; }
@keyframes loaderSlide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------------------------------------------------------------- screen choreography */
.screen { animation: screenIn var(--t-med) var(--ease-out) both; }
.screen.from-left { animation-name: screenInLeft; }
.screen.is-leaving { animation: screenOut 180ms var(--ease-in) both; pointer-events: none; }
@keyframes screenIn { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes screenInLeft { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes screenOut { to { opacity: 0; transform: translate3d(-22px, 0, 0); } }

[data-rise] { animation: rise var(--t-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
[data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
[data-reveal].in { opacity: 1; transform: none; }

.screen.still, .screen.still [data-rise], .screen.still .journey::after, .screen.still .skillrow, .screen.still .scale .bar, .screen.still .badge-level { animation: none; }
tbody.quiet tr { animation: none; }

/* ---------------------------------------------------------------- shared pieces */
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sky); }
.display { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--navy-900); }
.serif { font-family: var(--serif); }
.hairline { height: 1px; background: var(--hair); border: 0; margin: 28px 0; }
.btn { transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
.btn:active:not([disabled]) { transform: scale(0.98); }
.btn.primary { box-shadow: 0 6px 18px rgba(0, 78, 125, 0.22); }
.btn.primary:hover:not([disabled]) { box-shadow: 0 10px 26px rgba(0, 78, 125, 0.28); transform: translateY(-1px); }
.btn.lg { min-height: 54px; padding: 14px 28px; font-size: 16px; border-radius: 10px; }
.btn .arrow { display: inline-block; transition: transform var(--t-med) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn.ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn.ghost-light:hover { border-color: #fff; }
.btn.white { background: #fff; color: var(--navy); border-color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.btn.white:hover:not([disabled]) { transform: translateY(-1px); }
.kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--hair); border-bottom-width: 2px; border-radius: 5px; font-size: 11.5px; font-weight: 700; color: var(--muted); background: #fff; }
.hint { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 13px; }
@media (max-width: 760px) { .hint { display: none; } }

.panel { background: #fff; border: 1px solid #e3e8ef; border-radius: 18px; box-shadow: 0 1px 2px rgba(6, 44, 71, 0.04), 0 18px 48px -18px rgba(6, 44, 71, 0.16); padding: 40px; }
@media (max-width: 760px) { .panel { padding: 22px 18px; border-radius: 14px; } }
.wrap.narrow { max-width: 800px; }

/* ---------------------------------------------------------------- sign-in: CEFR ladder */
.auth { animation: screenInLeft var(--t-slow) var(--ease-out) both; }
.auth-hero { overflow: hidden; }
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero .lines { position: absolute; inset: 0; z-index: 0; opacity: 0.55; }
.auth-hero .lines path { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.4s var(--ease-out) forwards; }
.auth-hero .lines path:nth-child(2) { animation-delay: 0.15s; }
.auth-hero .lines path:nth-child(3) { animation-delay: 0.3s; }
.auth-hero .lines path:nth-child(4) { animation-delay: 0.45s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 108px; margin-top: 8px; max-width: 360px; }
.ladder div { position: relative; border-radius: 6px 6px 2px 2px; background: rgba(255, 255, 255, 0.12); transform-origin: bottom; animation: grow 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 300ms); }
.ladder div:last-child { background: var(--sky); }
.ladder div span { position: absolute; bottom: -24px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #d6e6f1; }
@keyframes grow { from { transform: scaleY(0.04); } to { transform: none; } }
.auth-form form { animation: rise var(--t-slow) var(--ease-out) both; animation-delay: 180ms; }
.field input { transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field input:focus { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(0, 125, 183, 0.14); outline: none; }

/* ---------------------------------------------------------------- welcome: journey */
.welcome-head h1 { font-size: clamp(30px, 4vw, 44px); margin: 10px 0 12px; }
.welcome-head p { font-size: 17px; color: var(--muted); max-width: 640px; }
.journey { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 34px 0 8px; }
.journey::before { content: ''; position: absolute; left: 8%; right: 8%; top: 31px; height: 2px; background: var(--hair); }
.journey::after { content: ''; position: absolute; left: 8%; right: 8%; top: 31px; height: 2px; background: var(--sky); transform-origin: left; animation: lineGrow 1.4s var(--ease-out) 0.3s both; }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.step { position: relative; z-index: 1; text-align: center; }
.step .dot { width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--hair); color: var(--navy); transition: transform var(--t-med) var(--ease-spring), border-color var(--t-med); }
.step:hover .dot { transform: translateY(-3px); border-color: var(--sky); }
.step .dot svg { width: 26px; height: 26px; }
.step b { display: block; font-size: 14px; color: var(--navy-900); }
.step small { color: var(--faint); font-size: 12.5px; }
@media (max-width: 760px) {
  .journey { grid-template-columns: 1fr; gap: 10px; }
  .journey::before, .journey::after { left: 30px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; transform-origin: top; }
  .journey::after { animation-name: lineGrowV; }
  .step { display: flex; align-items: center; gap: 14px; text-align: left; }
  .step .dot { margin: 0; width: 58px; height: 58px; flex: none; }
}
@keyframes lineGrowV { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .levels { grid-template-columns: 1fr; } }
.level-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; padding: 18px 18px 16px; border: 1.5px solid var(--hair); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color var(--t-fast), transform var(--t-med) var(--ease-out), box-shadow var(--t-med); overflow: hidden; }
.level-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(6, 44, 71, 0.3); border-color: #b9cfe0; }
.level-card .bars { display: flex; gap: 3px; margin-bottom: 12px; }
.level-card .bars i { width: 14px; height: 6px; border-radius: 2px; background: var(--hair); transition: background var(--t-med); }
.level-card .bars i.on { background: var(--sky); }
.level-card b { display: block; font-size: 15.5px; color: var(--navy-900); }
.level-card span { font-size: 13.5px; color: var(--muted); }
.level-card[aria-checked=true] { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 78, 125, 0.12); }
.level-card[aria-checked=true]::after { content: '✓'; position: absolute; right: 14px; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; animation: pop 360ms var(--ease-spring) both; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.cta-row { display: flex; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- equipment */
.equip { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .equip { grid-template-columns: 1fr; } }
.device { position: relative; border: 1.5px solid var(--hair); border-radius: 16px; padding: 26px; background: #fff; transition: border-color var(--t-med), box-shadow var(--t-med); }
.device.ok { border-color: #9fcaa0; box-shadow: 0 0 0 4px rgba(63, 135, 63, 0.08); }
.device.bad { border-color: #e9a59e; }
.device .ico { width: 56px; height: 56px; border-radius: 14px; background: #eef4f9; color: var(--navy); display: grid; place-items: center; margin-bottom: 16px; }
.device .ico svg { width: 28px; height: 28px; }
.device h3 { margin: 0 0 6px; }
.device p { color: var(--muted); font-size: 14.5px; }
.device .status { position: absolute; right: 22px; top: 22px; }
.check-anim { width: 30px; height: 30px; }
.check-anim circle { fill: #3f873f; transform-origin: center; animation: pop 360ms var(--ease-spring) both; }
.check-anim path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw 420ms var(--ease-out) 180ms forwards; }
.vu { display: flex; align-items: center; gap: 3px; height: 36px; margin: 12px 0; }
.vu i { flex: 1; max-width: 6px; height: 100%; border-radius: 3px; background: var(--sky); transform-origin: center; transform: scaleY(calc(0.08 + var(--l, 0) * var(--k, 1))); transition: transform 80ms linear; }

/* ---------------------------------------------------------------- section intro */
.intro-stage { position: relative; overflow: hidden; background: var(--navy); color: #fff; border-radius: 22px; padding: 64px 56px; display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; box-shadow: 0 30px 70px -30px rgba(0, 46, 76, 0.6); }
.intro-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--sky); transform-origin: left; animation: lineGrow 900ms var(--ease-out) 200ms both; }
.intro-num { font-size: clamp(110px, 16vw, 200px); line-height: 0.8; font-weight: 700; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.38); animation: numIn 900ms var(--ease-out) both; }
@keyframes numIn { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
.intro-stage .eyebrow { color: #9fd0ec; }
.intro-stage h1 { color: #fff; font-size: clamp(32px, 4.4vw, 52px); margin: 10px 0 14px; }
.intro-stage p { color: #dce9f3; font-size: 17px; max-width: 560px; }
.meta { display: flex; gap: 22px; flex-wrap: wrap; margin: 22px 0 30px; color: #cfe2ef; font-size: 14px; font-weight: 600; }
.meta span { display: inline-flex; align-items: center; gap: 8px; }
.meta svg { width: 18px; height: 18px; opacity: 0.9; }
@media (max-width: 760px) { .intro-stage { grid-template-columns: 1fr; padding: 34px 24px 40px; gap: 6px; border-radius: 16px; } .intro-num { font-size: 96px; } }

/* ---------------------------------------------------------------- test header (rail + ring) */
.stagebar { position: sticky; top: 68px; z-index: 5; display: flex; align-items: center; gap: 22px; padding: 14px 0 16px; margin-bottom: 18px; background: linear-gradient(var(--paper) 78%, rgba(245, 247, 250, 0)); }
.stagebar .sec { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.stagebar .sec b { font-size: 26px; font-weight: 700; color: var(--sky); letter-spacing: -0.03em; }
.stagebar .sec span { font-weight: 700; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stagebar .sec small { color: var(--faint); font-weight: 500; }
.rail { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; min-width: 120px; }
.rail i { position: relative; height: 5px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.rail i::after { content: ''; position: absolute; inset: 0; background: var(--sky); transform-origin: left; transform: scaleX(var(--f, 0)); transition: transform var(--t-slow) var(--ease-out); }
.rail i.done::after { background: var(--navy); }
.ring { position: relative; width: 52px; height: 52px; flex: none; }
.ring svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring .bg { stroke: var(--hair); }
.ring .fg { stroke: var(--navy); stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 * (1 - var(--p, 1))); transition: stroke-dashoffset 1s linear, stroke 300ms; }
.ring.low .fg { stroke: var(--ac-gold); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--navy-900); }
.ring.low b { color: var(--warn); }
@media (max-width: 760px) { .stagebar { top: 54px; gap: 12px; } .stagebar .sec small { display: none; } .stagebar .sec b { font-size: 20px; } }

/* ---------------------------------------------------------------- questions */
.qcard { padding: 48px 52px 36px; }
@media (max-width: 760px) { .qcard { padding: 26px 18px 22px; } }
.qcard .stem { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.45; color: var(--navy-900); margin: 4px 0 30px; letter-spacing: -0.005em; }
.gap { position: relative; display: inline-block; min-width: 96px; padding: 0 6px; border-bottom: 2.5px solid var(--navy); color: var(--sky); font-style: italic; text-align: center; vertical-align: baseline; transition: min-width var(--t-med) var(--ease-out); }
.gap:empty::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2.5px; height: 2.5px; background: var(--sky); transform-origin: left; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%, 100% { transform: scaleX(0.15); opacity: 0.4; } 50% { transform: scaleX(1); opacity: 1; } }
.gap.filled { animation: fillIn 360ms var(--ease-out) both; }
@keyframes fillIn { from { opacity: 0.2; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.opts { gap: 12px; }
.opts.grid2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .opts.grid2 { grid-template-columns: 1fr; } }
.opt { position: relative; overflow: hidden; border: 1.5px solid #d6dee8; border-radius: 12px; min-height: 58px; font-size: 17px; transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast), color var(--t-fast); isolation: isolate; }
.opt::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease-out); }
.opt:hover { border-color: #9db8cf; transform: translateY(-1px); box-shadow: 0 8px 22px -12px rgba(6, 44, 71, 0.35); }
.opt:active { transform: scale(0.985); }
.opt .key { transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-med) var(--ease-spring); }
.opt[aria-checked=true] { border-color: var(--navy); color: #fff; background: transparent; }
.opt[aria-checked=true]::before { transform: scaleX(1); }
.opt[aria-checked=true] .key { background: #fff; color: var(--navy); border-color: #fff; transform: scale(1.12); }
.q .opt { min-height: 48px; font-size: 16px; }
.q .opt[aria-checked=true] .key { transform: scale(1.08); }
.qfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair); }

.reading { gap: 32px; }
.passage { border: 0; background: #fbfcfd; box-shadow: inset 3px 0 0 var(--navy); border-radius: 4px 14px 14px 4px; padding: 30px 34px; }
.q { border-top-color: var(--hair); }
.q .qstem { font-size: 16.5px; color: var(--navy-900); }
.qnum { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eef4f9; color: var(--navy); font-size: 12.5px; font-weight: 700; margin-right: 8px; }

/* listening player: progress ring around the play button + live equaliser */
.lplayer { display: flex; align-items: center; gap: 22px; padding: 22px 24px; margin-bottom: 26px; border-radius: 16px; background: linear-gradient(180deg, #f7fafc, #f1f5f9); border: 1px solid var(--hair); }
.pbtn { position: relative; width: 76px; height: 76px; flex: none; border: 0; padding: 0; background: none; cursor: pointer; }
.pbtn svg.prog { position: absolute; inset: 0; transform: rotate(-90deg); }
.pbtn svg.prog circle { fill: none; stroke-width: 4; }
.pbtn .bg { stroke: #dbe4ed; }
.pbtn .fg { stroke: var(--sky); stroke-linecap: round; stroke-dasharray: 226.2; stroke-dashoffset: calc(226.2 * (1 - var(--p, 0))); transition: stroke-dashoffset 250ms linear; }
.pbtn .core { position: absolute; inset: 9px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; transition: transform var(--t-med) var(--ease-spring), background var(--t-fast); box-shadow: 0 10px 24px -8px rgba(0, 78, 125, 0.6); }
.pbtn:hover:not([disabled]) .core { transform: scale(1.05); }
.pbtn[disabled] { cursor: default; }
.pbtn[disabled] .core { background: #9fb1c3; box-shadow: none; }
.pbtn .core svg { width: 22px; height: 22px; }
.eq { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.eq i { width: 4px; height: 100%; border-radius: 2px; background: var(--sky); transform-origin: bottom; transform: scaleY(0.15); }
.lplayer.playing .eq i { animation: eq 900ms ease-in-out infinite; }
.lplayer.playing .eq i:nth-child(2n) { animation-duration: 700ms; }
.lplayer.playing .eq i:nth-child(3n) { animation-duration: 1100ms; }
.lplayer.playing .eq i:nth-child(4n) { animation-delay: -300ms; }
@keyframes eq { 0%, 100% { transform: scaleY(0.2); } 50% { transform: scaleY(1); } }
.plays { display: flex; gap: 6px; margin-top: 8px; }
.plays i { width: 22px; height: 6px; border-radius: 3px; background: var(--sky); transition: background var(--t-med); }
.plays i.used { background: var(--hair); }

/* ---------------------------------------------------------------- writing */
.write { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .write { grid-template-columns: 1fr; } }
.write .brief { position: sticky; top: 160px; }
.write .brief h3 { font-size: 20px; }
.write .brief ul { padding-left: 0; list-style: none; display: grid; gap: 10px; margin-top: 14px; }
.write .brief li { display: flex; gap: 10px; align-items: flex-start; }
.write .brief li::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 2px; background: var(--sky); transform: rotate(45deg); }
.editor textarea { min-height: 380px; border: 0; padding: 4px 2px; font-family: var(--serif); font-size: 18px; line-height: 1.75; resize: vertical; background: transparent; }
.editor textarea:focus { outline: none; box-shadow: none; }
.wbar { position: relative; height: 6px; border-radius: 3px; background: var(--hair); overflow: hidden; margin: 14px 0 10px; }
.wbar i { position: absolute; inset: 0; background: var(--sky); transform-origin: left; transform: scaleX(var(--f, 0)); transition: transform var(--t-med) var(--ease-out), background var(--t-med); }
.wbar.inrange i { background: #3f873f; }
.wbar.over i { background: var(--ac-gold); }
.saved { color: var(--faint); font-size: 12.5px; opacity: 0; transition: opacity var(--t-med); }
.saved.show { opacity: 1; }

/* ---------------------------------------------------------------- speaking */
.mic-stage { display: grid; place-items: center; gap: 16px; padding: 28px 0 8px; text-align: center; }
.orb { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }
.orb svg.cd { position: absolute; inset: 0; transform: rotate(-90deg); }
.orb svg.cd circle { fill: none; stroke-width: 5; }
.orb .bg { stroke: var(--hair); }
.orb .fg { stroke: var(--navy); stroke-linecap: round; stroke-dasharray: 559.2; stroke-dashoffset: calc(559.2 * (1 - var(--p, 1))); transition: stroke-dashoffset 1s linear; }
.orb.rec .fg { stroke: var(--bad); }
.orb .wave { position: absolute; inset: 26px; border-radius: 50%; background: rgba(202, 54, 37, 0.12); transform: scale(calc(0.7 + var(--lvl, 0) * 0.55)); transition: transform 90ms linear; }
.orb .wave.w2 { inset: 40px; background: rgba(202, 54, 37, 0.18); transform: scale(calc(0.75 + var(--lvl, 0) * 0.4)); }
.orb .center { position: relative; z-index: 1; display: grid; place-items: center; }
.orb .center b { font-size: 40px; font-weight: 700; color: var(--navy-900); letter-spacing: -0.03em; }
.orb .center small { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.orb.rec .center small { color: var(--bad); }
.recdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); margin-right: 6px; animation: pulse 1s infinite; }
.question-say { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); color: var(--navy-900); line-height: 1.4; }

/* ---------------------------------------------------------------- finish and report */
.done-mark { width: 92px; height: 92px; margin: 0 auto 6px; }
.done-mark circle { fill: none; stroke: var(--navy); stroke-width: 3; stroke-dasharray: 290; stroke-dashoffset: 290; animation: draw 900ms var(--ease-out) forwards; }
.done-mark path { fill: none; stroke: var(--sky); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 500ms var(--ease-out) 650ms forwards; }
.badge-level { animation: pop 700ms var(--ease-spring) both; }
.badge-level b.long { font-size: 26px; white-space: nowrap; }
.scale .bar { transform-origin: left; animation: barGrow 1.1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: none; } }
.skillrow { animation: rise var(--t-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }

/* ---------------------------------------------------------------- staff dashboard */
.tabs { position: relative; }
.tabs button { transition: color var(--t-fast); }
.tab-ink { position: absolute; bottom: -1px; height: 2px; background: var(--navy); transition: transform var(--t-med) var(--ease-out), width var(--t-med) var(--ease-out); pointer-events: none; }
.tabs button[aria-selected=true] { border-bottom-color: transparent; }
.kpi { transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med); }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(6, 44, 71, 0.35); }
table.data tbody tr { animation: rise 420ms var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 20) * 22ms); }
table.data tbody tr:hover td { background: #f6f9fc; }
dialog[open] { animation: dlgIn 280ms var(--ease-out) both; }
dialog[open]::backdrop { animation: fadeIn 280ms ease both; }
@keyframes dlgIn { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.toast-in { animation: toastIn 360ms var(--ease-out) both; }
@keyframes toastIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
[data-qlevel] { transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
[data-qlevel]:active { transform: scale(0.94); }

/* ---------------------------------------------------------------- add students */
.steps { margin: 0; padding-left: 0; list-style: none; counter-reset: st; display: grid; gap: 18px; }
.steps > li { position: relative; padding-left: 44px; counter-increment: st; }
.steps > li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.dropzone { margin-top: 10px; display: grid; place-items: center; gap: 4px; padding: 26px 16px; border: 2px dashed #b9cbdc; border-radius: 14px; background: #f7fafc; text-align: center; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-med) var(--ease-out); }
.dropzone:hover, .dropzone.over { border-color: var(--sky); background: #eef6fb; }
.dropzone.over { transform: scale(1.01); }
.dropzone.has-file { border-style: solid; border-color: #9fcaa0; background: #f2f8f2; }
.dz-ico { width: 40px; height: 40px; border-radius: 50%; background: #e3eef6; color: var(--navy); display: grid; place-items: center; font-weight: 700; margin-bottom: 4px; }

/* ---------------------------------------------------------------- accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}