/* ==========================================================================
   READ VPN Learning — Learning group
   1. Learning player  (.page-learn · .lp-*)   learn.html
   2. Quiz             (.page-quiz · .qz-*)    quiz.html
   3. Result           (.page-result · .rs-*)  result.html
   4. Instructor review(.page-review · .rv-*)  prototype-quiz-review.html
   5. Certificate      (.page-cert · .cert-*)  certificate.html (+ print)
   ========================================================================== */

/* =========================================================================
   1. LEARNING PLAYER
   ========================================================================= */
.page-learn {
  --lp-bg: var(--surface-soft);
  --lp-surface: #FFFFFF;
  --lp-surface-2: var(--surface-soft);
  --lp-hover: var(--surface-soft);
  --lp-border: var(--border-default);
  --lp-text: var(--ink-primary);
  --lp-ink: var(--ink-primary);
  --lp-muted: var(--ink-secondary);
  --lp-accent: var(--brand-primary);
  --lp-accent-ink: var(--brand-primary-dark);
  --lp-accent-tint: var(--brand-primary-soft);
  --lp-cyan: var(--brand-primary-dark);
  --lp-success: var(--c-success);
  --lp-side-w: 380px;
  background: var(--lp-bg);
  color: var(--lp-text);
}
.page-learn .site-header .container { max-width: calc(1640px + var(--page-pad) * 2); }
.page-learn .site-header--compact .hdr { background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }

/* header extras: course progress ring + Focus Mode toggle */
.lp-ring { width: 44px; height: 44px; flex-shrink: 0; }
.lp-ring span { width: 35px; height: 35px; font-size: 15px; color: var(--ink-primary); font-variant-numeric: tabular-nums; }
.lp-focus-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; flex-shrink: 0;
  border-radius: var(--r-pill); border: 1px solid var(--border-default); background: #fff; color: var(--ink-primary);
  font-size: 19px; font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-btn), border-color var(--dur-btn), color var(--dur-btn);
}
.lp-focus-btn svg { width: 18px; height: 18px; }
.lp-focus-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary-dark); }
.lp-focus-btn[aria-pressed="true"] { background: var(--ink-primary); border-color: var(--ink-primary); color: #fff; }
.lp-focus-btn[aria-pressed="true"] svg { color: #FFD68A; }

/* layout */
.lp-root { padding: 20px var(--page-pad) 36px; }
.lp-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--lp-side-w); gap: 24px; max-width: 1640px; margin: 0 auto; align-items: start; }
.lp-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.lp-stage { scroll-margin-top: calc(var(--lp-hdr, 77px) + 12px); }
.lp-error { padding: 48px 0; }
@media (max-width: 1239px) { .page-learn { --lp-side-w: 340px; } }

/* ---------- stage frame (16:9) ---------- */
.lp-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  border-radius: 20px; background: #0B1314; color: #fff;
  box-shadow: 0 30px 60px -36px rgba(13, 22, 24, .7);
  container-type: inline-size;
}
.lp-frame--skeleton { display: grid; place-items: center; background: linear-gradient(135deg, #142124, #203236); }
.lp-frame--skeleton .spinner { color: #8FE3EE; }
.lp-frame--center { display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px; background: radial-gradient(70% 90% at 50% 0%, rgba(0, 194, 214, .35), rgba(12, 19, 21, 0) 70%), #0B1314; }
.lp-frame--center .spinner { color: #8FE3EE; }
.lp-frame--center p { margin: 0; color: #CFE4E7; font-size: 20.5px; }

/* ---------- mock video player ---------- */
.lp-media { position: absolute; inset: 0; z-index: 0; cursor: pointer; }
.lp-poster { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transform-origin: 62% 42%; }
.lp-player[data-state="playing"] .lp-poster { animation: lp-drift 48s linear infinite alternate; }
@keyframes lp-drift { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
.lp-scrim {
  position: absolute; inset: 0; pointer-events: none; transition: background-color .35s;
  background: linear-gradient(180deg, rgba(8, 14, 15, .55) 0%, rgba(8, 14, 15, .08) 28%, rgba(8, 14, 15, .1) 58%, rgba(8, 14, 15, .82) 100%);
}
.lp-player[data-state="paused"] .lp-scrim, .lp-player[data-state="ended"] .lp-scrim { background-color: rgba(8, 14, 15, .38); }
.lp-tag {
  position: absolute; z-index: 3; top: 14px; left: 14px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px;
  background: rgba(10, 17, 19, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .16); color: #E6EEEF; font-size: 17px; font-weight: 600; letter-spacing: .01em;
}
.lp-tag svg { width: 14px; height: 14px; color: #8FE3EE; }
.lp-tag--right { left: auto; right: 14px; }
.lp-caption {
  position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 88px; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; transition: opacity .3s, transform .3s;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}
.lp-cap-mod { font-size: 17px; font-weight: 700; letter-spacing: .05em; color: #9FE8F1; }
.lp-caption b { max-width: min(640px, 78%); font-size: clamp(24.5px, 3.38cqw, 36.5px); line-height: 1.15; font-weight: 700; }
.lp-cap-resume { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 17px; font-weight: 600; text-shadow: none; }
.lp-cap-resume svg { width: 14px; height: 14px; }
.lp-player[data-state="playing"] .lp-caption { opacity: 0; transform: translateY(8px); }
.lp-player[data-state="ended"] .lp-caption { opacity: 0; }
@container (max-width: 760px) {
  .lp-cap-mod, .lp-cap-resume { display: none; }
  .lp-caption { bottom: 80px; }
  .lp-caption b { font-size: 23px; max-width: 86%; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}
@container (max-width: 460px) { .lp-caption { display: none; } }

.lp-bigplay {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px;
  display: grid; place-items: center; border-radius: 50%; color: #fff;
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, .55);
  transition: transform .2s var(--ease-out), background-color .2s, border-color .2s, opacity .25s, visibility .25s;
}
.lp-bigplay::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .16); }
.lp-bigplay svg { width: 34px; height: 34px; margin-left: 5px; }
.lp-bigplay:hover { transform: scale(1.06); background: var(--grad-primary); border-color: transparent; }
.lp-bigplay:focus-visible { outline: 3px solid #8FE3EE; outline-offset: 6px; border-radius: 50%; }
.lp-player[data-state="playing"] .lp-bigplay, .lp-player[data-state="ended"] .lp-bigplay { opacity: 0; visibility: hidden; transform: scale(.9); }

.lp-end {
  position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 24px; text-align: center; background: rgba(8, 14, 15, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.lp-end[hidden] { display: none; }
.lp-end-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(31, 157, 99, .22); color: #7CE3A4; }
.lp-end-ico svg { width: 28px; height: 28px; }
.lp-end b { font-size: 25.5px; }
.lp-end p { margin: 0; max-width: 420px; color: #CED9DA; font-size: 20px; }
.lp-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* controls: timeline row + button row */
.lp-controls {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 36px 14px 8px;
  background: linear-gradient(180deg, rgba(8, 14, 15, 0) 0%, rgba(8, 14, 15, .76) 70%);
  transition: opacity .3s, transform .3s;
}
.lp-player.is-idle .lp-controls { opacity: 0; transform: translateY(8px); pointer-events: none; }
.lp-player.is-idle { cursor: none; }
.lp-tl { position: relative; height: 24px; margin: 0 6px; display: flex; align-items: center; cursor: pointer; touch-action: none; border-radius: 6px; --pos: 0%; --max: 0%; --tip: 0%; }
.lp-tl-track { position: relative; width: 100%; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .24); overflow: hidden; transition: height .15s; }
.lp-tl:hover .lp-tl-track, .lp-tl:focus-visible .lp-tl-track, .is-scrubbing .lp-tl-track { height: 6px; }
.lp-tl-max { position: absolute; inset: 0 auto 0 0; width: var(--max); background: rgba(255, 255, 255, .34); }
.lp-tl-fill { position: absolute; inset: 0 auto 0 0; width: var(--pos); background: linear-gradient(90deg, var(--brand-primary), #5EE0EE); }
.lp-tl-thumb {
  position: absolute; left: var(--pos); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 5px rgba(0, 194, 214, .32); transform: scale(0); transition: transform .15s; pointer-events: none;
}
.lp-tl:hover .lp-tl-thumb, .lp-tl:focus-visible .lp-tl-thumb, .is-scrubbing .lp-tl-thumb { transform: scale(1); }
.lp-tl:focus-visible { outline: 2px solid #8FE3EE; outline-offset: 3px; }
.lp-tl-tip {
  position: absolute; bottom: 26px; left: clamp(22px, var(--tip), calc(100% - 22px)); transform: translateX(-50%);
  padding: 4px 8px; border-radius: 8px; background: rgba(10, 17, 19, .92); color: #fff; font-size: 16.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.lp-tl.is-tip .lp-tl-tip { opacity: 1; }
.lp-cbar { display: flex; align-items: center; gap: 4px; }
.lp-cbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; flex-shrink: 0; transition: background-color .15s; }
.lp-cbtn:hover { background: rgba(255, 255, 255, .14); }
.lp-cbtn svg { width: 22px; height: 22px; }
.lp-cbtn:focus-visible { outline: 2px solid #8FE3EE; outline-offset: 0; border-radius: 50%; }
.lp-time { padding-left: 4px; font-size: 18.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .95); white-space: nowrap; }
.lp-time-sep { color: rgba(255, 255, 255, .55); }
.lp-cspace { flex: 1; }

/* fullscreen */
.lp-frame:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.lp-frame:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.lp-player:fullscreen .lp-caption b { font-size: 41.5px; }

/* ---------- lock overlay ---------- */
.lp-lock { display: grid; place-items: center; }
.lp-lock-bg { position: absolute; inset: 0; z-index: -1; }
.lp-lock-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 90% at 50% 40%, rgba(12, 19, 21, .62), rgba(12, 19, 21, .9)); }
.lp-lock-img { width: 100%; height: 100%; object-fit: cover; filter: blur(10px) saturate(.85); transform: scale(1.12); }
.lp-lock--ended .lp-lock-img, .lp-lock--expired .lp-lock-img { filter: blur(10px) grayscale(.8); }
.lp-lock-body { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 560px; padding: 24px; text-align: center; }
.lp-lock-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.lp-lock-ico svg { width: 26px; height: 26px; }
.lp-lock--expired .lp-lock-ico { background: rgba(255, 196, 87, .16); border-color: rgba(255, 196, 87, .4); color: #FFD68A; }
.lp-lock--ended .lp-lock-ico { background: rgba(255, 255, 255, .1); color: #D4DDDE; }
.lp-lock-title { margin: 4px 0 0; color: #fff; font-size: clamp(24.5px, 4.03cqw, 31px); line-height: 1.2; }
.lp-lock-text { margin: 0; color: #C8D3D5; font-size: 20px; line-height: 1.35; }
.lp-lock-chip { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 0; padding: 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #E6EEEF; font-size: 18.5px; text-align: left; }
.lp-lock-chip svg { width: 16px; height: 16px; flex-shrink: 0; color: #FFD68A; }
.lp-lock-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.lp-lock-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 10px; color: #9FE8F1; font-size: 18.5px; font-weight: 600; }
.lp-lock-link:hover { background: rgba(255, 255, 255, .08); text-decoration: underline; }
.lp-lock-link svg { width: 16px; height: 16px; }
.lp-lock-note { display: none; }
@container (max-width: 640px) {
  .lp-lock-body { gap: 8px; padding: 16px; }
  .lp-lock-ico { width: 46px; height: 46px; }
  .lp-lock-ico svg { width: 22px; height: 22px; }
  .lp-lock-text { font-size: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lp-lock-actions .btn { min-height: 42px; padding: 0 18px; font-size: 19px; }
}
@container (max-width: 520px) {
  .lp-lock-text, .lp-lock-chip { display: none; }
  .lp-lock-ico { width: 40px; height: 40px; }
  .lp-lock-link { min-height: 30px; font-size: 17px; }
  .lp-lock-actions { margin-top: 2px; }
}

/* ---------- document viewer ---------- */
.lp-doc { background: radial-gradient(70% 100% at 100% 0%, rgba(0, 194, 214, .28), rgba(0, 194, 214, 0) 60%), linear-gradient(135deg, #18272A 0%, #1F3A3F 60%, #005560 100%); }
.lp-doc-cover { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 4cqw; padding: 5cqw 6cqw; }
.lp-doc-stack { position: relative; height: 78%; max-height: 360px; }
.lp-mini {
  position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 210 / 297; margin-left: -22%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 6%; padding: 9% 8%; border-radius: 6px; background: #fff; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
}
.lp-mini i { display: block; height: 4%; border-radius: 99px; background: var(--border-default); }
.lp-mini i:first-child { width: 64%; height: 6%; background: linear-gradient(90deg, var(--brand-primary-dark), var(--brand-primary)); }
.lp-mini i:nth-child(3) { width: 82%; } .lp-mini i:nth-child(4) { width: 70%; }
.lp-mini:nth-child(1) { transform: translate(-38%, -50%) rotate(-9deg); opacity: .7; }
.lp-mini:nth-child(2) { transform: translate(-18%, -52%) rotate(-3deg); opacity: .88; }
.lp-mini:nth-child(3) { transform: translate(4%, -54%) rotate(4deg); }
.lp-doc-copy { min-width: 0; }
.lp-doc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #9FE8F1; }
.lp-doc-eyebrow svg { width: 16px; height: 16px; }
.lp-doc-title { margin: 0 0 6px; color: #fff; font-size: clamp(24.5px, 4.16cqw, 36.5px); line-height: 1.15; }
.lp-doc-meta { margin: 0 0 18px; color: #B8C6C8; font-size: 19px; }
.lp-doc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-doc-hint { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: #CED9DA; font-size: 18.5px; }
.lp-doc-hint svg { width: 16px; height: 16px; flex-shrink: 0; color: #8FE3EE; }
.lp-doc-reader { position: absolute; inset: 0; display: flex; flex-direction: column; background: #172326; }
.lp-doc-reader[hidden] { display: none; }
.lp-doc-bar { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 4px 6px 4px 16px; background: #111C1F; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lp-doc-bar-title { flex: 1; min-width: 0; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-doc-page { font-size: 18px; font-weight: 600; color: #B8C6C8; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 6px; }
.lp-doc-state { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; color: #9FE8F1; white-space: nowrap; }
.lp-doc-state svg { width: 15px; height: 15px; color: #7CE3A4; }
.lp-doc-scroll { flex: 1; overflow: auto; padding: 20px 16px 32px; display: flex; flex-direction: column; align-items: center; gap: 20px; overscroll-behavior: contain; }
.lp-doc-scroll:focus-visible { outline: 2px solid #8FE3EE; outline-offset: -4px; }
.lp-doc-pdf { flex: 1; width: 100%; max-width: 980px; min-height: 70vh; border: 0; border-radius: 6px; background: #fff; }
.lp-doc-err { display: flex; align-items: center; gap: 8px; margin: auto; color: #DDE7E9; font-size: 15px; }
.lp-sheet {
  position: relative; flex-shrink: 0; width: min(100%, 560px); aspect-ratio: 210 / 297; padding: 7% 8% 9%; border-radius: 4px;
  background: #fff; color: var(--ink-primary); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: 2.4%;
}
.lp-sheet-head { display: flex; align-items: center; gap: 8px; padding-bottom: 3%; margin-bottom: 2%; border-bottom: 1px solid var(--border-default); font-size: 15px; font-weight: 700; color: var(--ink-secondary); }
.lp-sheet-logo { width: auto; height: 13px; }
.lp-sheet-pg { margin-left: auto; font-weight: 600; }
.lp-sheet-kicker { margin: 0; font-size: 15px; font-weight: 700; color: var(--brand-primary-dark); }
.lp-sheet-title { margin: 0 0 2%; font-size: clamp(20.5px, 4.48cqw, 29px); line-height: 1.15; color: var(--ink-primary); }
.lp-sheet-h { margin: 0; font-size: 19px; font-weight: 700; color: var(--ink-primary); }
.lp-line { display: block; height: 7px; border-radius: 99px; background: var(--border-default); }
.lp-sheet-table { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; margin: 2% 0; padding: 8px; border-radius: 8px; background: var(--surface-soft); }
.lp-sheet-table span { height: 9px; border-radius: 4px; background: var(--border-default); }
.lp-sheet-table span:nth-child(-n+3) { background: var(--border-strong); }
.lp-sheet-box { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 8px; border-left: 3px solid var(--brand-primary); background: var(--brand-primary-soft); }
.lp-sheet-foot { margin: auto 0 0; font-size: 14.5px; color: var(--ink-muted); text-align: center; }
@container (max-width: 560px) {
  .lp-doc-cover { grid-template-columns: 1fr; padding: 16px 18px; }
  .lp-doc-stack { display: none; }
  .lp-doc-meta { margin-bottom: 12px; font-size: 18px; }
  .lp-doc-hint { font-size: 17px; margin-top: 10px; }
  .lp-doc-actions .btn { min-height: 42px; padding: 0 18px; font-size: 19px; }
  .lp-doc-state { display: none; }
}

/* ---------- quiz lesson card ---------- */
.lp-quizcard {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px;
  padding: 32px; border-radius: 20px; color: #fff;
  background: radial-gradient(55% 90% at 100% 0%, rgba(0, 194, 214, .35), rgba(0, 194, 214, 0) 65%), var(--grad-panel);
  box-shadow: 0 30px 60px -36px rgba(13, 22, 24, .7);
}
.lp-quizcard::after { content: ""; position: absolute; width: 420px; height: 420px; right: -160px; bottom: -240px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .12); pointer-events: none; }
.lp-qc-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 16px; background: rgba(255, 255, 255, .14); color: #9FE8F1; }
.lp-qc-ico svg { width: 26px; height: 26px; }
.lp-qc-eyebrow { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: .06em; color: #9FE8F1; }
.lp-qc-title { margin: 0 0 18px; color: #fff; font-size: clamp(27px, 2.6vw, 34px); line-height: 1.2; }
.lp-qc-facts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-qc-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 20px; line-height: 1.3; color: rgba(255, 255, 255, .9); }
.lp-qc-facts svg { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; color: #9FE8F1; }
.lp-qc-status { position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border-radius: 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.lp-qc-desc { margin: 0; color: rgba(255, 255, 255, .9); font-size: 20.5px; }
.lp-qc-note { display: flex; gap: 8px; margin: 0; font-size: 18.5px; color: #CED9DA; }
.lp-qc-note svg { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: #FFD68A; }
.lp-qc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }

/* ---------- lesson info ---------- */
.lp-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.lp-info-main { flex: 1; min-width: 0; }
.lp-course-line { display: none; margin: 0 0 6px; font-size: 18.5px; font-weight: 600; color: var(--lp-muted); }
.lp-crumb { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: .02em; color: var(--lp-cyan); }
.lp-title { margin: 0 0 10px; font-size: clamp(29px, 2.6vw, 39px); line-height: 1.15; color: var(--lp-text); }
.lp-title small { display: block; margin-top: 2px; font-size: 22px; font-weight: 500; color: var(--lp-muted); }
.lp-title:focus { outline: none; }
.lp-title:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
.lp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 19px; color: var(--lp-muted); }
.lp-meta > span:not(.badge) { display: inline-flex; align-items: center; gap: 6px; }
.lp-meta svg { width: 16px; height: 16px; }
.lp-auto { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 18.5px; color: var(--lp-muted); }
.lp-auto svg { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: var(--lp-cyan); }
.lp-curr-btn {
  display: none; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px 10px 12px; text-align: left;
  border-radius: 16px; background: var(--lp-surface); border: 1px solid var(--lp-border); color: var(--lp-text);
  transition: border-color var(--dur-btn), background-color var(--dur-btn);
}
.lp-curr-btn:hover { border-color: var(--lp-accent); }
.lp-curr-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--lp-accent-tint); color: var(--lp-accent-ink); flex-shrink: 0; }
.lp-curr-ico svg { width: 20px; height: 20px; }
.lp-curr-txt { flex: 1; min-width: 0; }
.lp-curr-txt b { display: block; font-size: 20.5px; }
.lp-curr-txt small { display: block; font-size: 18px; color: var(--lp-muted); }
.lp-curr-chev { width: 20px; height: 20px; color: var(--lp-muted); }

/* ---------- tabs card ---------- */
.lp-tabs { padding: 0 24px 26px; border-radius: 20px; background: var(--lp-surface); border: 1px solid var(--lp-border); }
.lp-tabs .tabs { margin: 0 -24px; padding: 4px 14px 0; border-bottom-color: var(--lp-border); }
.lp-tabs .tab { min-height: 54px; }
.lp-tabs .tab-count:empty { display: none; }
.lp-pan { padding-top: 24px; }
.lp-pan:focus-visible { outline-offset: 4px; }
.lp-pan-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; font-size: 23px; line-height: 1.25; color: var(--lp-text); }
.lp-pan-count { font-size: 18px; font-weight: 600; color: var(--lp-muted); }
.lp-ov { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
.lp-ov-main > .lp-pan-h:not(:first-child) { margin-top: 26px; }
.lp-points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-points li { display: flex; gap: 10px; font-size: 20.5px; line-height: 1.35; color: var(--lp-ink); }
.lp-points svg { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; padding: 2px; border-radius: 50%; background: var(--c-success-tint); color: var(--c-success); }
.lp-mocknote { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 17px; color: var(--lp-muted); }
.lp-mocknote svg { width: 14px; height: 14px; }
.lp-ov-desc { margin: 0; font-size: 20.5px; line-height: 1.45; color: var(--lp-ink); }
.lp-ov-inst { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.lp-ov-label { font-size: 18px; font-weight: 700; color: var(--lp-muted); }
.lp-facts { display: grid; gap: 2px; align-self: start; margin: 0; padding: 8px 18px; border-radius: 16px; background: var(--lp-surface-2); border: 1px solid var(--lp-border); }
.lp-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--lp-border); }
.lp-fact:last-child { border-bottom: 0; }
.lp-fact dt { display: inline-flex; align-items: center; gap: 8px; font-size: 18.5px; color: var(--lp-muted); white-space: nowrap; }
.lp-fact dt svg { width: 16px; height: 16px; }
.lp-fact dd { margin: 0; font-size: 19px; font-weight: 600; text-align: right; color: var(--lp-text); min-width: 0; }

.lp-docs .notice { margin-bottom: 14px; }
.lp-files { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-file { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 14px; border-radius: 16px; border: 1px solid var(--lp-border); background: var(--lp-surface); }
.lp-file-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #FDECEC; color: #B42318; flex-shrink: 0; }
.lp-file-ico svg { width: 20px; height: 20px; }
.lp-file-body { flex: 1; min-width: 0; }
.lp-file-body b { display: block; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; color: var(--lp-text); }
.lp-file-body small { display: block; font-size: 17px; color: var(--lp-muted); }
.lp-file-lock { display: grid; place-items: center; width: 40px; height: 40px; color: var(--lp-muted); }
.lp-file-lock svg { width: 18px; height: 18px; }

.lp-gate { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; padding: 18px; border-radius: 16px; background: var(--lp-surface-2); border: 1px dashed var(--border-strong); }
.lp-gate-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--lp-surface); color: var(--lp-accent-ink); box-shadow: var(--shadow-card); flex-shrink: 0; }
.lp-gate-ico svg { width: 20px; height: 20px; }
.lp-gate-body { flex: 1; min-width: 200px; }
.lp-gate-body b { display: block; font-size: 21.5px; }
.lp-gate-body p { margin: 2px 0 0; font-size: 19px; color: var(--lp-muted); }
.lp-gate-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.lp-notes { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; }
.lp-note-field .field-row { flex-wrap: wrap; }
.lp-note-ta { min-height: 168px; }
.lp-note-status { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; color: var(--lp-muted); min-height: 20px; }
.lp-note-status svg { width: 14px; height: 14px; }
.lp-note-status.is-saved { color: var(--lp-success); }
.lp-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: lp-blink 1s ease-in-out infinite; }
@keyframes lp-blink { 50% { opacity: .25; } }
.lp-note-tools .btn { font-variant-numeric: tabular-nums; }
.lp-notelist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; max-height: 420px; overflow: auto; }
.lp-noteitem { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--lp-border); background: var(--lp-surface); }
.lp-noteitem.is-current { border-color: color-mix(in srgb, var(--lp-accent) 45%, transparent); background: var(--lp-accent-tint); }
.lp-noteitem-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lp-notelink { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 19px; font-weight: 700; color: var(--lp-text); text-align: left; }
.lp-notelink svg { width: 15px; height: 15px; color: var(--lp-muted); flex-shrink: 0; }
.lp-notelink:hover { color: var(--lp-accent-ink); text-decoration: underline; }
.lp-note-time { font-size: 17px; color: var(--lp-muted); }
.lp-note-text { margin: 4px 0 0; font-size: 19px; line-height: 1.4; color: var(--lp-ink); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lp-stamp { display: inline-flex; align-items: center; gap: 3px; margin: 0 2px; padding: 0 7px; height: 22px; border-radius: 99px; background: var(--lp-accent-tint); color: var(--lp-accent-ink); font-size: 16.5px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.lp-stamp svg { width: 10px; height: 10px; }
.lp-stamp:hover { background: var(--lp-accent); color: #fff; }
.lp-empty { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 16px; border-radius: 14px; background: var(--lp-surface-2); color: var(--lp-muted); font-size: 19px; }
.lp-empty svg { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }

.lp-qa { display: grid; gap: 22px; }
.lp-qa-form { padding: 18px; border-radius: 16px; background: var(--lp-surface-2); border: 1px solid var(--lp-border); }
.lp-qa-form .textarea { min-height: 96px; }
.lp-qa-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.lp-qa-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lp-qa-item { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--lp-border); background: var(--lp-surface); }
.lp-qa-item.is-mine { border-color: #F1D899; background: color-mix(in srgb, var(--c-warning-tint) 55%, var(--lp-surface)); }
.lp-qa-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-qa-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.lp-qa-who b { font-size: 19px; color: var(--lp-text); }
.lp-qa-who span { font-size: 17px; color: var(--lp-muted); }
.lp-qa-ref { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 17px; font-weight: 600; color: var(--lp-muted); }
.lp-qa-ref svg { width: 14px; height: 14px; }
.lp-qa-q { margin: 8px 0 0; font-size: 20.5px; line-height: 1.35; color: var(--lp-text); overflow-wrap: anywhere; }
.lp-qa-ans { display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--lp-surface-2); border-left: 3px solid var(--lp-accent); }
.lp-qa-ans p { margin: 0; font-size: 19px; line-height: 1.35; color: var(--lp-ink); }
.lp-qa-by { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px !important; }
.lp-qa-by b { font-size: 18.5px; color: var(--lp-text); }
.lp-qa-by .badge { height: 22px; font-size: 16px; }

/* ---------- curriculum sidebar ---------- */
.lp-side {
  position: sticky; top: calc(var(--lp-hdr, 77px) + 20px); display: flex; flex-direction: column;
  max-height: calc(100vh - var(--lp-hdr, 77px) - 40px); max-height: calc(100dvh - var(--lp-hdr, 77px) - 40px);
  border-radius: 20px; background: var(--lp-surface); border: 1px solid var(--lp-border); overflow: hidden;
}
.lp-side-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--lp-border); }
.lp-side-h { margin: 0 0 12px; font-size: 24.5px; color: var(--lp-text); }
.lp-side-sub { margin: 8px 0 0; font-size: 18.5px; color: var(--lp-muted); }
.lp-side-sub b { color: var(--lp-text); font-variant-numeric: tabular-nums; }
.lp-side-chip { margin: 12px 0 0; }
.lp-side-body { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lp-mod { border-bottom: 1px solid var(--lp-border); }
.lp-mod:last-child { border-bottom: 0; }
.lp-mod-h { margin: 0; font-size: inherit; }
.lp-mod-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 18px 12px 20px; text-align: left; color: var(--lp-text); transition: background-color var(--dur-fast); }
.lp-mod-btn:hover { background: var(--lp-hover); }
.lp-mod-btn:focus-visible, .lp-les:focus-visible { outline-offset: -3px; border-radius: 12px; }
.lp-mod-idx { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--lp-surface-2); border: 1px solid var(--lp-border); font-size: 18px; font-weight: 800; flex-shrink: 0; color: var(--lp-text); }
.lp-mod-idx svg { width: 15px; height: 15px; }
.lp-mod.is-complete .lp-mod-idx { background: var(--c-success-tint); border-color: transparent; color: var(--c-success); }
.lp-mod-title { flex: 1; min-width: 0; font-size: 20.5px; font-weight: 700; line-height: 1.2; }
.lp-mod-kicker { display: block; font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-cyan); }
.lp-mod-title small { display: block; margin-top: 1px; font-size: 17px; font-weight: 500; color: var(--lp-muted); }
.lp-mod-chev { width: 18px; height: 18px; flex-shrink: 0; color: var(--lp-muted); transition: transform .2s; }
.lp-mod-btn[aria-expanded="true"] .lp-mod-chev { transform: rotate(180deg); }
.lp-mod-list { margin: 0; padding: 0 10px 12px; list-style: none; }
.lp-les {
  position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 54px; padding: 10px 10px 10px 12px;
  border-radius: 12px; text-align: left; color: var(--lp-text); transition: background-color var(--dur-fast);
}
.lp-les:hover { background: var(--lp-hover); }
.lp-les.is-current { background: var(--lp-accent-tint); }
.lp-les.is-current::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--lp-accent); }
.lp-les-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--lp-surface-2); color: var(--lp-muted); flex-shrink: 0; }
.lp-les-ico svg { width: 15px; height: 15px; }
.lp-les.is-current .lp-les-ico { background: var(--lp-accent); color: #fff; }
.lp-les.is-done:not(.is-current) .lp-les-ico { color: var(--lp-success); }
.lp-les-body { flex: 1; min-width: 0; }
.lp-les-title { display: block; font-size: 20px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.lp-les.is-current .lp-les-title { color: var(--lp-accent-ink); }
.lp-les.is-locked:not(.is-current) .lp-les-title { color: var(--lp-ink); font-weight: 500; }
.lp-les-subt { display: block; font-size: 17px; color: var(--lp-muted); line-height: 1.2; }
.lp-les-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: 17px; color: var(--lp-muted); }
.lp-les-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; background: var(--brand-primary-soft); color: var(--brand-primary-deep); font-size: 16px; font-weight: 700; }
.lp-les-tag--resume { background: var(--c-warning-tint); color: var(--c-warning); }
.lp-les-tag--warn { background: var(--c-warning-tint); color: var(--c-warning); }
.lp-les-bar { display: block; height: 3px; margin-top: 7px; border-radius: 3px; background: var(--lp-border); overflow: hidden; }
.lp-les-bar span { display: block; height: 100%; border-radius: inherit; background: var(--lp-accent); }
.lp-les.is-locked .lp-les-bar span { background: var(--ink-muted); }
.lp-les-state { flex-shrink: 0; margin-top: 6px; }
.lp-les-state svg { width: 18px; height: 18px; }
.lp-les-state--done { color: var(--lp-success); }
.lp-les-state--lock { color: var(--lp-muted); }

/* curriculum drawer (tablet: right drawer · mobile: bottom sheet) */
.lp-drawer .modal-body { padding: 0 0 16px; }
.lp-drawer .lp-side-head { padding: 4px 20px 16px; }
.lp-drawer .lp-side-body { overflow: visible; }
@media (min-width: 768px) {
  .lp-drawer-root { place-items: stretch end; padding: 0; }
  .lp-drawer-root .modal.lp-drawer { width: min(440px, 92vw); height: 100%; max-height: none; border-radius: 24px 0 0 24px; animation: drawer-in-r .28s var(--ease-out); }
}

/* ---------- ads ---------- */
.lp-ads { max-width: 1640px; margin: 36px auto 0; }

/* ---------- responsive ---------- */
@media (max-width: 959px) {
  .lp-layout { grid-template-columns: minmax(0, 1fr); }
  .lp-side { display: none; }
  .lp-curr-btn { display: flex; }
  .lp-course-line { display: block; }
  .lp-info { flex-direction: column; align-items: stretch; }
  .lp-ov { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lp-notes { grid-template-columns: minmax(0, 1fr); }
  .lp-quizcard { grid-template-columns: minmax(0, 1fr); padding: 26px; gap: 22px; }
}
@media (max-width: 767px) {
  .lp-root { padding: 0 0 24px; }
  .lp-main { gap: 16px; }
  .lp-stage .lp-frame { border-radius: 0; box-shadow: none; }
  .lp-stage .lp-quizcard { margin: 12px var(--page-pad) 0; padding: 22px 18px; border-radius: 20px; }
  .lp-info, .lp-tabs, .lp-ads { margin-inline: var(--page-pad); }
  .lp-tabs { padding: 0 16px 20px; }
  .lp-tabs .tabs { margin: 0 -16px; padding: 2px 4px 0; }
  .lp-tabs .tab { padding: 0 14px; font-size: 20px; }
  .lp-title { font-size: 29px; }
  .lp-lock-note { display: block; }
  .lp-caption { left: 16px; bottom: 72px; }
  .lp-caption b { font-size: 23px; max-width: 92%; }
  .lp-cap-mod { font-size: 16px; }
  .lp-bigplay { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .lp-bigplay svg { width: 26px; height: 26px; margin-left: 4px; }
  .lp-tag { top: 10px; left: 10px; height: 24px; font-size: 16px; padding: 0 9px; }
  .lp-tag--right { left: auto; right: 10px; }
  .lp-controls { padding: 26px 6px 2px; }
  .lp-time { font-size: 17px; }
  .lp-end b { font-size: 22px; }
  .lp-end p { font-size: 18px; }
  .lp-focus-btn { width: 44px; padding: 0; justify-content: center; }
  .lp-focus-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lp-ring { width: 40px; height: 40px; }
  .lp-ring span { width: 32px; height: 32px; font-size: 14.5px; }
  .lp-file { flex-wrap: nowrap; }
  .lp-ads { margin-top: 28px; }
}
@media (max-width: 479px) {
  .lp-caption { display: none; }
  .lp-qc-status { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-player[data-state="playing"] .lp-poster { animation: none; }
  .lp-dot { animation: none; }
}

/* ---------- Focus Dark Mode (learn.html only · body.focus-dark) ---------- */
html.lp-dark { color-scheme: dark; background: #0D1618; }
.page-learn.focus-dark {
  --lp-bg: var(--fd-bg);
  --lp-surface: var(--fd-surface);
  --lp-surface-2: var(--fd-surface-2);
  --lp-hover: #203236;
  --lp-border: var(--fd-border);
  --lp-text: var(--fd-text);
  --lp-ink: #CFD9DA;
  --lp-muted: var(--fd-muted);
  --lp-accent: var(--fd-accent);
  --lp-accent-ink: var(--fd-accent);
  --lp-accent-tint: rgba(0, 194, 214, .12);
  --lp-cyan: var(--fd-accent);
  --lp-success: #6EE7A8;
}
/* remap shared-component tokens inside the learning area (Ads keep their gray placeholder) */
.focus-dark .lp-main, .focus-dark .lp-side, .focus-dark .site-header--compact, .focus-dark .lp-drawer, .focus-dark .lp-error {
  --ink-primary: var(--fd-text); --ink-secondary: var(--fd-muted); --ink-muted: #7E9092;
  --border-default: var(--fd-border); --border-strong: #33494D;
  --surface-soft: var(--fd-surface-2); --surface-subtle: var(--fd-surface-2);
  --brand-primary-dark: var(--fd-accent-2); --brand-primary-deep: var(--fd-accent-2);
  --brand-primary-soft: rgba(0, 194, 214, .14);
}
/* document pages stay paper-white in Focus Mode → restore the light palette inside them */
.focus-dark .lp-sheet, .focus-dark .lp-mini {
  --ink-primary: #18272A; --ink-secondary: #465255; --ink-muted: #7A8587;
  --border-default: #E1E5E5; --border-strong: #CDD3D4; --surface-soft: #F6F8F8;
  --brand-primary-dark: #00C2D6; --brand-primary-soft: #EAFDFF;
}
.focus-dark .site-header--compact .hdr { background: rgba(13, 22, 24, .92); border-bottom-color: var(--fd-border); }
.focus-dark .hdr-back:hover { background: var(--fd-surface-2); }
.focus-dark .avatar-btn { background: var(--fd-surface); border-color: var(--fd-border); }
.focus-dark .lp-ring { background: conic-gradient(var(--fd-accent) calc(var(--p) * 1%), rgba(255, 255, 255, .12) 0); }
.focus-dark .lp-ring span { background: var(--fd-bg); color: var(--fd-text); }
.focus-dark .lp-focus-btn { background: var(--fd-surface); border-color: var(--fd-border); color: var(--fd-text); }
.focus-dark .lp-focus-btn:hover { border-color: var(--fd-accent); color: var(--fd-accent); }
.focus-dark .lp-focus-btn[aria-pressed="true"] { background: var(--fd-surface-2); border-color: #3D5559; color: var(--fd-text); }
.focus-dark .lp-frame, .focus-dark .lp-quizcard { box-shadow: 0 0 0 1px var(--fd-border), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.focus-dark .lp-les.is-current .lp-les-ico { color: var(--fd-bg); }
.focus-dark .lp-les-tag { background: rgba(0, 194, 214, .14); color: var(--fd-accent); }
.focus-dark .lp-les-tag--resume, .focus-dark .lp-les-tag--warn { background: rgba(255, 214, 138, .14); color: #FFD68A; }
.focus-dark .lp-mod.is-complete .lp-mod-idx, .focus-dark .lp-points svg { background: rgba(110, 231, 168, .14); color: #6EE7A8; }
.focus-dark .lp-file-ico { background: rgba(255, 156, 143, .14); color: #FF9C8F; }
.focus-dark .lp-gate { border-color: var(--fd-border); }
.focus-dark .lp-gate-ico { box-shadow: none; border: 1px solid var(--fd-border); }
.focus-dark .lp-qa-item.is-mine { background: rgba(255, 214, 138, .06); border-color: rgba(255, 214, 138, .3); }
.focus-dark .lp-noteitem.is-current { border-color: rgba(0, 194, 214, .4); }
.focus-dark .progress-track, .focus-dark .lp-les-bar { background: rgba(255, 255, 255, .1); }
.focus-dark .lp-main .textarea, .focus-dark .lp-main .input { background: var(--fd-bg); border-color: #33494D; color: var(--fd-text); }
.focus-dark .lp-main .textarea::placeholder { color: #7E9092; }
.focus-dark .lp-main .textarea:focus { border-color: var(--fd-accent); box-shadow: 0 0 0 4px rgba(0, 194, 214, .16); }
.focus-dark .lp-main .btn--secondary, .focus-dark .lp-drawer .btn--secondary { background: transparent; border-color: #3D5559; color: var(--fd-text); }
.focus-dark .lp-main .btn--secondary:hover { border-color: var(--fd-accent); color: var(--fd-accent); }
.focus-dark .lp-frame .btn--secondary, .focus-dark .lp-quizcard .btn--secondary { background: #fff; border-color: #fff; color: #00C2D6; }
.focus-dark .lp-frame .btn--white { color: #00C2D6; }
.focus-dark .lp-frame .btn--white:hover { background: var(--brand-primary); color: #fff; }
.focus-dark .lp-stamp:hover { color: var(--fd-bg); }
.focus-dark .lp-main .notice--info { background: rgba(127, 227, 238, .08); border-color: rgba(127, 227, 238, .3); color: #BFF1F6; }
.focus-dark .lp-main .notice--warning { background: rgba(255, 214, 138, .08); border-color: rgba(255, 214, 138, .3); color: #FFE3AE; }
.focus-dark .lp-main .field-error { color: #FF9C8F; }
.focus-dark .lp-main .counter.is-near { color: #FFD68A; }
.focus-dark .lp-main .tab:hover { color: var(--fd-text); }
.focus-dark .lp-main .tab[aria-selected="true"] { border-bottom-color: var(--fd-accent); }
.focus-dark .lp-main .tab[aria-selected="true"] .tab-count { background: rgba(0, 194, 214, .16); color: var(--fd-accent); }
.focus-dark .lp-main .avatar, .focus-dark .lp-drawer .avatar { border-color: var(--fd-surface); }
.focus-dark .lp-main .inst-names .more { color: var(--fd-accent-2); }
.focus-dark .lp-main .badge--info, .focus-dark .lp-side .badge--info { background: rgba(127, 227, 238, .16); color: #BFF1F6; }
.focus-dark .lp-side .badge--package { background: rgba(175, 150, 255, .16); color: #D5C8FF; }
.focus-dark .lp-drawer.modal { background: var(--fd-surface); color: var(--fd-text); }
.focus-dark .lp-drawer .modal-head { color: var(--fd-text); }
.focus-dark .lp-drawer .sheet-grabber { background: #3D5559; }
.focus-dark .lp-error .state-box { background: var(--fd-surface); border-color: var(--fd-border); }
.focus-dark .lp-error .state-ico { background: var(--fd-surface-2); box-shadow: none; }
.focus-dark .lp-mocknote, .focus-dark .lp-empty { color: var(--fd-muted); }
.focus-dark .sk { background: linear-gradient(90deg, #1A2729 0, #213336 40%, #1A2729 80%); background-size: 800px 100%; }

/* =========================================================================
   2. QUIZ
   ========================================================================= */
.page-quiz { background: var(--surface-soft); }
.qz-root { min-height: calc(100vh - var(--qz-hdr, 77px)); padding-bottom: 56px; }
.qz-wrap { padding-top: 32px; }
.qz-wrap > .state-box { max-width: 760px; margin-inline: auto; }
.qz-skel { display: grid; gap: 14px; padding: 40px; }
.qz-h1 { margin: 0 0 10px; font-size: clamp(34px, 3.25vw, 47px); line-height: 1.15; }
.qz-course { display: flex; align-items: center; gap: 8px; margin: 0 0 26px; font-size: 20.5px; color: var(--ink-secondary); }
.qz-course svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--brand-primary-dark); }

/* intro */
.qz-intro-card {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); max-width: 1120px; margin: 0 auto;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card);
}
.qz-intro-main { padding: 40px 44px 44px; min-width: 0; }
.qz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 24px; }
.qz-stat { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface-soft); border: 1px solid var(--border-default); min-width: 0; }
.qz-stat-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--brand-primary-dark); flex-shrink: 0; box-shadow: var(--shadow-card); }
.qz-stat-ico svg { width: 20px; height: 20px; }
.qz-stat b { display: block; font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink-primary); }
.qz-stat small { display: block; margin-top: 2px; font-size: 18px; line-height: 1.3; color: var(--ink-secondary); }
.qz-notices { display: grid; gap: 10px; margin-bottom: 26px; }
.qz-summary { padding: 18px 20px; border-radius: 18px; background: var(--surface-soft); border: 1px solid var(--border-default); }
.qz-summary-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.qz-summary p { margin: 0; font-size: 20.5px; color: var(--ink-primary); }
.qz-intro-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.qz-intro-side {
  position: relative; overflow: hidden; padding: 40px 36px; color: #fff;
  background: radial-gradient(60% 70% at 100% 0%, rgba(0, 194, 214, .35), rgba(0, 194, 214, 0) 65%), var(--grad-panel);
}
.qz-intro-side::after { content: ""; position: absolute; width: 360px; height: 360px; right: -150px; bottom: -190px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .14); pointer-events: none; }
.qz-side-h { margin: 0 0 18px; color: #fff; font-size: 24.5px; }
.qz-rules { position: relative; z-index: 1; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.qz-rules li { display: flex; gap: 12px; font-size: 20px; line-height: 1.35; color: rgba(255, 255, 255, .9); }
.qz-rules svg { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; color: #9FE8F1; }
.qz-lock { max-width: 760px; margin: 0 auto; }
.qz-lock-h { margin: 4px 0 0; font-size: 29px; }

/* sticky status bar */
.qz-bar { position: sticky; top: var(--qz-hdr, 77px); z-index: 30; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-default); }
.qz-bar-in { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; min-height: 62px; max-width: calc(1120px + var(--page-pad) * 2); }
.qz-bar-prog { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 200px; }
.qz-bar-label { font-size: 19px; color: var(--ink-secondary); white-space: nowrap; }
.qz-bar-label b { color: var(--ink-primary); font-variant-numeric: tabular-nums; }
.qz-bar-track { position: relative; flex: 1; max-width: 360px; height: 8px; border-radius: 99px; background: var(--border-default); overflow: hidden; }
.qz-bar-track span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--grad-primary); transition: width .4s var(--ease-out); }
.qz-save { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; font-size: 18px; font-weight: 600; color: var(--ink-secondary); white-space: nowrap; }
.qz-save svg { width: 16px; height: 16px; }
.qz-save.is-saved { color: var(--c-success); }
.qz-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: lp-blink 1s ease-in-out infinite; }
.qz-timer { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 99px; background: var(--brand-primary-soft); color: var(--brand-primary-deep); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.qz-timer-ico { display: inline-grid; }
.qz-timer-ico svg { width: 18px; height: 18px; }
.qz-timer.is-warn { background: var(--c-warning-tint); color: var(--c-warning); }
.qz-timer.is-danger { background: var(--c-danger-tint); color: var(--c-danger); animation: qz-pulse 1.2s ease-in-out infinite; }
@keyframes qz-pulse { 50% { box-shadow: 0 0 0 6px rgba(180, 35, 24, .14); } }

/* question screen */
.qz-run { padding-top: 26px; }
.qz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; max-width: 1120px; margin: 0 auto; align-items: start; }
.qz-card { min-width: 0; padding: 32px 36px 28px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--border-default); box-shadow: var(--shadow-card); scroll-margin-top: calc(var(--qz-hdr, 77px) + 80px); }
.qz-card.is-enter { animation: rv-fade-up .3s var(--ease-out) both; }
.qz-qhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qz-qnum { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .02em; color: var(--brand-primary-dark); }
.qz-qtext { margin: 0 0 10px; font-size: clamp(27px, 2.34vw, 31px); line-height: 1.3; }
.qz-qtext:focus { outline: none; }
.qz-qtext:focus-visible { outline: var(--focus-ring); outline-offset: 6px; }
.qz-hint { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 6px 12px 6px 10px; border-radius: 99px; background: var(--brand-primary-soft); color: var(--brand-primary-deep); font-size: 18.5px; font-weight: 700; }
.qz-hint svg { width: 16px; height: 16px; }
.qz-choices { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.qz-opt { align-items: center; min-height: 66px; padding: 14px 18px; }
.qz-opt .radio, .qz-opt .check { min-height: 0; }
.qz-opt-body { display: flex; align-items: center; gap: 14px; }
.qz-opt-key { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--surface-subtle); color: var(--ink-primary); font-size: 19px; font-weight: 700; flex-shrink: 0; transition: background-color var(--dur-btn), color var(--dur-btn); }
.qz-opt:has(input:checked) .qz-opt-key { background: var(--brand-primary); color: #fff; }
.qz-opt-text { font-size: 22px; line-height: 1.3; color: var(--ink-primary); overflow-wrap: anywhere; }
.qz-qfoot { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border-default); }
.qz-essay-field { margin-top: 14px; }
.qz-essay-ta { min-height: 230px; }
.qz-attach { margin-top: 20px; }
.qz-attach .file-drop { flex-wrap: wrap; }
.qz-chip .btn { min-height: 38px; padding: 0 12px; }
.qz-restore { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 18.5px; text-decoration: none; }
.qz-ro { display: grid; gap: 12px; margin-top: 16px; padding: 18px; border-radius: 18px; background: var(--surface-soft); border: 1px solid var(--border-default); }
.qz-ro-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.qz-ro-time { font-size: 18px; color: var(--ink-secondary); }
.qz-ro-note { display: flex; gap: 8px; margin: 0; font-size: 19px; color: var(--ink-primary); }
.qz-ro-note svg { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: var(--brand-primary-dark); }
.qz-ro-text { margin: 0; max-height: 260px; overflow: auto; padding: 14px 16px; border-radius: 14px; background: #fff; border-left: 3px solid var(--brand-primary); font-size: 20.5px; line-height: 1.45; color: var(--ink-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.qz-ro-edit { justify-self: start; }

/* navigator */
.qz-nav { position: sticky; top: calc(var(--qz-hdr, 77px) + 86px); }
.qz-nav-card { padding: 22px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--border-default); }
.qz-nav-h { margin: 0 0 14px; font-size: 22px; }
.qz-nav-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.qz-nb {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-height: 44px; border-radius: 12px;
  border: 1.5px solid var(--border-strong); background: #fff; color: var(--ink-secondary); font-size: 20.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-btn), border-color var(--dur-btn), color var(--dur-btn), box-shadow var(--dur-btn);
}
.qz-nb:hover { border-color: var(--brand-primary); color: var(--brand-primary-dark); }
.qz-nb.is-answered { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.qz-nb.is-current { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink-primary); color: var(--ink-primary); border-color: var(--ink-primary); }
.qz-nb.is-current.is-answered { color: #fff; border-color: var(--brand-primary); }
.qz-nb-ico { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; opacity: .75; }
.qz-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 17px; color: var(--ink-secondary); }
.qz-legend li { display: inline-flex; align-items: center; gap: 6px; }
.qz-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border-strong); background: #fff; }
.qz-sw.is-answered { background: var(--brand-primary); border-color: var(--brand-primary); }
.qz-sw.is-current { border-color: var(--ink-primary); box-shadow: 0 0 0 1.5px var(--ink-primary); }
.qz-nav-sum { margin: 14px 0 16px; font-size: 19px; color: var(--ink-primary); }
.qz-nav-sum b { font-variant-numeric: tabular-nums; }
.qz-sheet-body .qz-nav-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.qz-sheet-body .qz-nb { aspect-ratio: auto; height: 52px; }

/* mobile / tablet bottom bar */
.qz-mbar { display: none; }
.qz-mb-btn { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border-default); background: #fff; color: var(--ink-primary); }
.qz-mb-btn svg { width: 20px; height: 20px; }
.qz-mb-btn:disabled { opacity: .4; cursor: not-allowed; }
.qz-mb-btn--primary { border: 0; background: var(--grad-primary); color: #fff; box-shadow: 0 8px 20px -6px rgba(0, 194, 214, .45); }
.qz-mb-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 4px 8px; border-radius: 14px; background: var(--surface-soft); border: 1px solid var(--border-default); }
.qz-mb-mid span { font-size: 20.5px; font-weight: 700; line-height: 1.15; }
.qz-mb-mid small { font-size: 16.5px; color: var(--ink-secondary); line-height: 1.15; }
.qz-timeup { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0 4px; text-align: center; }
.qz-timeup p { margin: 0; color: var(--ink-primary); }

/* essay revision (mode=essay) */
.qz-edit-head { max-width: 1120px; margin: 0 auto 22px; }
.qz-edit-head .qz-course { margin-bottom: 0; }
.qz-edit-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; max-width: 1120px; margin: 0 auto; align-items: start; }
.qz-feedback { position: sticky; top: calc(var(--qz-hdr, 77px) + 20px); padding: 26px; border-radius: var(--r-card); background: #FFF8F7; border: 1px solid #F3C7C2; }
.qz-fb-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.qz-fb-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 23px; }
.qz-fb-h svg { width: 20px; height: 20px; color: var(--c-danger); }
.qz-fb-who { display: flex; align-items: center; gap: 12px; }
.qz-fb-who b { display: block; font-size: 20.5px; }
.qz-fb-who small { display: block; font-size: 18px; color: var(--ink-secondary); }
.qz-fb-quote { margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; background: #fff; border-left: 3px solid var(--c-danger); font-size: 20.5px; line-height: 1.45; color: var(--ink-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.qz-fb-file { display: grid; gap: 8px; margin-top: 14px; }
.qz-fb-label { font-size: 18px; font-weight: 700; color: var(--ink-secondary); }
.qz-fb-hist { margin-top: 18px; font-size: 19px; }
.qz-edit-card { padding: 28px 32px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--border-default); box-shadow: var(--shadow-card); min-width: 0; }
.qz-qtext--edit { font-size: 25.5px; }
.qz-edit-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-default); }

@media (max-width: 959px) {
  .qz-intro-card { grid-template-columns: minmax(0, 1fr); }
  .qz-intro-main { padding: 32px 28px; }
  .qz-intro-side { padding: 28px; }
  .qz-grid { grid-template-columns: minmax(0, 1fr); }
  .qz-nav { display: none; }
  .qz-qfoot { display: none; }
  .qz-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--border-default); box-shadow: 0 -10px 30px rgba(24, 39, 42, .08); }
  .qz-run { padding-bottom: 96px; }
  .qz-edit-grid { grid-template-columns: minmax(0, 1fr); }
  .qz-feedback { position: static; }
}
@media (max-width: 767px) {
  .qz-wrap { padding-top: 18px; }
  .qz-intro-main { padding: 24px 20px 26px; }
  .qz-intro-side { padding: 24px 20px; }
  .qz-intro-actions .btn { width: 100%; }
  .qz-stats { grid-template-columns: minmax(0, 1fr); }
  .qz-bar-in { min-height: 54px; gap: 6px 12px; }
  .qz-bar-prog { min-width: 0; flex-basis: 100%; order: 3; padding-bottom: 8px; }
  .qz-bar-track { max-width: none; }
  .qz-save { flex: 1; }
  .qz-timer { height: 36px; font-size: 20.5px; }
  .qz-run { padding-top: 16px; }
  .qz-card { padding: 22px 18px 20px; }
  .qz-qtext { font-size: 25.5px; }
  .qz-opt { padding: 12px 14px; gap: 12px; }
  .qz-opt-text { font-size: 20.5px; }
  .qz-opt-key { width: 28px; height: 28px; font-size: 18px; }
  .qz-edit-card, .qz-feedback { padding: 20px; }
  .qz-edit-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .qz-timer.is-danger, .qz-dot { animation: none; } }

/* =========================================================================
   3. RESULT
   ========================================================================= */
.page-result { background: var(--surface-soft); }
.rs-root { padding-bottom: 64px; }
.rs-wrap { max-width: calc(1180px + var(--page-pad) * 2); padding-top: 28px; }
.rs-skel { display: grid; gap: 14px; padding: 40px; }
.rs-flash { margin-bottom: 16px; }
.rs-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px; align-items: center;
  margin-bottom: 24px; padding: 36px 40px; border-radius: var(--r-section); background: var(--grad-soft); overflow: hidden;
}
.rs-hero::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 5px; border-radius: 0 5px 5px 0; background: var(--brand-primary); }
.rs-hero--success { background: radial-gradient(60% 90% at 0% 0%, rgba(23, 117, 74, .16), rgba(23, 117, 74, 0) 62%), var(--grad-soft); }
.rs-hero--success::before { background: var(--c-success); }
.rs-hero--warning { background: radial-gradient(60% 90% at 0% 0%, rgba(197, 138, 0, .16), rgba(197, 138, 0, 0) 62%), var(--grad-soft); }
.rs-hero--warning::before { background: #C58A00; }
.rs-hero--danger { background: radial-gradient(60% 90% at 0% 0%, rgba(180, 35, 24, .13), rgba(180, 35, 24, 0) 62%), var(--grad-soft); }
.rs-hero--danger::before { background: var(--c-danger); }
.rs-hero--neutral::before { background: var(--ink-muted); }
.rs-hero-main { min-width: 0; }
.rs-h1 { margin: 0 0 16px; font-size: clamp(31px, 3.12vw, 44px); line-height: 1.15; }
.rs-hero-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 8px; }
.rs-hero-title { font-size: 24.5px; font-weight: 700; line-height: 1.25; color: var(--ink-primary); }
.rs-hero-text { max-width: 580px; margin: 0 0 22px; font-size: 21.5px; color: var(--ink-primary); }
.rs-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rs-hero-media { position: relative; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-float); background: var(--surface-subtle); }
.rs-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.rs-medal { position: absolute; left: 16px; bottom: 16px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--brand-primary-dark); box-shadow: 0 12px 28px rgba(13, 22, 24, .22); }
.rs-medal svg { width: 30px; height: 30px; }
.rs-hero--success .rs-medal { color: var(--c-success); }
.rs-hero--warning .rs-medal { color: #B07A00; }
.rs-hero--danger .rs-medal { color: var(--c-danger); }

.rs-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rs-col { display: grid; gap: 20px; min-width: 0; }
.rs-card { min-width: 0; padding: 24px 26px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--border-default); scroll-margin-top: calc(77px + 16px); }
.rs-card--empty { padding: 0; border: 0; background: transparent; }
.rs-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.rs-card-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--brand-primary-soft); color: var(--brand-primary-dark); flex-shrink: 0; }
.rs-card-ico svg { width: 21px; height: 21px; }
.rs-card-ttl { flex: 1; min-width: 0; }
.rs-card-ttl h2 { margin: 0; font-size: 24.5px; line-height: 1.2; }
.rs-card-ttl p { margin: 2px 0 0; font-size: 18.5px; color: var(--ink-secondary); }
.rs-card-head > .badge { flex-shrink: 0; margin-top: 8px; }
.rs-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.rs-score { display: flex; align-items: center; gap: 24px; }
.rs-meter { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.rs-meter svg { width: 100%; height: 100%; }
.rs-meter-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; font-size: 39px; font-weight: 800; color: var(--ink-primary); font-variant-numeric: tabular-nums; }
.rs-meter-val small { font-size: 20.5px; font-weight: 700; margin-top: 8px; }
.rs-score-txt { min-width: 0; }
.rs-score-main { margin: 0; font-size: 27px; font-weight: 700; line-height: 1.25; color: var(--ink-primary); }
.rs-score-main span { font-size: 20.5px; font-weight: 600; color: var(--ink-secondary); white-space: nowrap; }
.rs-score-sub { margin: 6px 0 0; font-size: 20px; color: var(--ink-primary); }
.rs-score-note { display: flex; gap: 6px; margin: 10px 0 0; font-size: 17px; color: var(--ink-secondary); }
.rs-score-note svg { width: 14px; height: 14px; margin-top: 3px; flex-shrink: 0; }
.rs-q { margin: 0 0 14px; font-size: 20.5px; font-weight: 600; line-height: 1.35; color: var(--ink-primary); }
.rs-q span { display: block; margin-bottom: 2px; font-size: 17px; font-weight: 700; color: var(--ink-secondary); }
.rs-flabel { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 700; color: var(--ink-secondary); }
.rs-answer { padding: 14px 16px; border-radius: 16px; background: var(--surface-soft); border: 1px solid var(--border-default); }
.rs-answer-text { margin: 0; font-size: 20.5px; line-height: 1.5; color: var(--ink-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.rs-answer-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rs-answer-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; font-size: 17px; color: var(--ink-secondary); }
.rs-answer-meta .link { font-size: 18px; }
.rs-files { margin-top: 14px; }
.rs-chip { max-width: 520px; }
.rs-muted { margin: 0; font-size: 19px; color: var(--ink-secondary); }
.rs-feedback { margin-top: 18px; padding: 18px; border-radius: 18px; background: #FFF8F7; border: 1px solid #F3C7C2; }
.rs-feedback--ok { background: #F2FAF5; border-color: #BFE3CE; }
.rs-fb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 20.5px; }
.rs-fb-head svg { width: 18px; height: 18px; color: var(--c-danger); }
.rs-feedback--ok .rs-fb-head svg { color: var(--c-success); }
.rs-fb-who { display: flex; align-items: center; gap: 10px; }
.rs-fb-who b { display: block; font-size: 20px; }
.rs-fb-who small { display: block; font-size: 17px; color: var(--ink-secondary); }
.rs-fb-quote { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: #fff; border-left: 3px solid var(--c-danger); font-size: 20px; line-height: 1.45; color: var(--ink-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.rs-feedback--ok .rs-fb-quote { border-left-color: var(--c-success); }
.rs-feedback--ok .rs-muted { margin-top: 8px; font-size: 18px; }
.rs-timeline { margin-top: 6px; }
.rs-timeline .tl-head .badge { height: 22px; font-size: 16px; }
.rs-tl-excerpt { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rs-timeline .file-chip { max-width: 460px; margin-top: 10px; }
.rs-tl-by { display: block; font-size: 18px; color: var(--ink-secondary); }
.rs-check { display: grid; margin: 0; padding: 0; list-style: none; }
.rs-ck { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-default); }
.rs-ck:first-child { padding-top: 0; }
.rs-ck:last-child { border-bottom: 0; padding-bottom: 0; }
.rs-ck-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--c-gray-tint); color: var(--ink-muted); }
.rs-ck-ico svg { width: 15px; height: 15px; }
.rs-ck--done .rs-ck-ico { background: var(--c-success-tint); color: var(--c-success); }
.rs-ck--fail .rs-ck-ico { background: var(--c-danger-tint); color: var(--c-danger); }
.rs-ck--wait .rs-ck-ico { background: var(--c-warning-tint); color: var(--c-warning); }
.rs-ck-body { flex: 1; min-width: 0; }
.rs-ck-body b { display: block; font-size: 20px; line-height: 1.25; }
.rs-ck-body small { display: block; font-size: 18px; color: var(--ink-secondary); }
.rs-ck-body .link { font-size: 18px; }
.rs-ce { display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: 18px; background: var(--surface-soft); border: 1px solid var(--border-default); }
.rs-ce-big { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px; flex-shrink: 0; border-radius: 20px; background: var(--grad-panel); color: #fff; line-height: 1.15; text-align: center; }
.rs-ce-big b { font-size: 39px; font-weight: 800; }
.rs-ce-big small { font-size: 16px; opacity: .88; }
.rs-ce-st { min-width: 0; }
.rs-ce-date { margin-left: 8px; font-size: 18px; color: var(--ink-secondary); }
.rs-ce-st p { margin: 8px 0 0; font-size: 18.5px; color: var(--ink-primary); }
.rs-cert { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.rs-cert-thumb {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 84px; aspect-ratio: 297 / 210; flex-shrink: 0;
  border-radius: 6px; background: #fff; border: 1px solid var(--border-default); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px var(--border-default), 0 6px 16px -8px rgba(24, 39, 42, .3);
}
.rs-cert-logo { width: 30px; height: auto; }
.rs-cert-thumb i { display: block; width: 50%; height: 3px; border-radius: 3px; background: var(--border-default); }
.rs-cert-thumb i:nth-of-type(2) { width: 64%; height: 4px; background: var(--ink-muted); }
.rs-cert-info { min-width: 0; }
.rs-cert-info b { display: block; font-size: 20px; }
.rs-cert-info small { display: block; font-size: 17px; color: var(--ink-secondary); overflow-wrap: anywhere; }
.rs-cert-lock { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--c-gray-tint); color: var(--ink-secondary); }
.rs-cert-lock svg { width: 18px; height: 18px; }
.rs-ce-link { margin-top: 16px; font-size: 19px; }
.rs-proto .notice { border-radius: 20px; }
@media (max-width: 959px) {
  .rs-hero { grid-template-columns: minmax(0, 1fr); padding: 30px 30px 32px; }
  .rs-hero-media { display: none; }
  .rs-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .rs-wrap { padding-top: 16px; }
  .rs-hero { padding: 24px 20px 26px 24px; border-radius: 20px; }
  .rs-hero-actions .btn { width: 100%; }
  .rs-card { padding: 20px 18px; }
  .rs-card-head { flex-wrap: wrap; }
  .rs-card-head > .badge { margin-top: 0; }
  .rs-score { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rs-meter { width: 112px; height: 112px; }
  .rs-meter-val { font-size: 34px; }
  .rs-ce { align-items: flex-start; }
  .rs-ce-big { width: 72px; height: 72px; }
}

/* =========================================================================
   4. INSTRUCTOR REVIEW (prototype-quiz-review.html)
   ========================================================================= */
.page-review { background: var(--surface-soft); }
.rv-root { padding: 24px 0 72px; }
.rv-wrap { max-width: calc(1180px + var(--page-pad) * 2); }
.rv-banner { margin-bottom: 28px; }
.rv-banner .notice { padding: 18px 20px; border-radius: 20px; font-size: 20.5px; }
.rv-banner .notice b { font-size: 23px; margin-bottom: 2px; }
.rv-banner .notice > svg { width: 24px; height: 24px; }
.rv-skel { display: grid; gap: 14px; }
.rv-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 24px; }
.rv-head .eyebrow { margin-bottom: 10px; }
.rv-h1 { margin: 0 0 6px; font-size: clamp(34px, 3.12vw, 44px); line-height: 1.15; }
.rv-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0; font-size: 20.5px; color: var(--ink-secondary); }
.rv-stats { display: flex; gap: 12px; }
.rv-stat { min-width: 124px; padding: 14px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--border-default); }
.rv-stat b { display: block; font-size: 36.5px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rv-stat span { font-size: 18.5px; color: var(--ink-secondary); }
.rv-tabs .tabs--pill { margin-bottom: 18px; }
.rv-pan:focus-visible { outline-offset: 6px; }
.rv-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rv-item {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--border-default); color: var(--ink-primary);
  transition: border-color .2s, box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.rv-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.rv-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rv-item-who { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.rv-item-who b { font-size: 21.5px; }
.rv-item-course { font-size: 20px; color: var(--ink-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-item-meta { display: flex; align-items: flex-start; gap: 6px; font-size: 18px; line-height: 1.3; color: var(--ink-secondary); }
.rv-item-meta svg { width: 14px; height: 14px; margin-top: 3px; flex-shrink: 0; }
.rv-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.rv-item-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 700; color: var(--brand-primary-dark); }
.rv-item-cta svg { width: 16px; height: 16px; transition: transform .2s; }
.rv-item:hover .rv-item-cta svg { transform: translateX(3px); }
.rv-pan .state-box { padding: 40px 24px; }

.rv-crumbs { margin-bottom: 14px; }
.rv-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rv-col { display: grid; gap: 20px; min-width: 0; }
.rv-col--side { position: sticky; top: 104px; }
.rv-card { min-width: 0; padding: 24px 26px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--border-default); }
.rv-card-h { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 24.5px; line-height: 1.2; }
.rv-card-h svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand-primary-dark); }
.rv-learner { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; padding: 14px; border-radius: 16px; background: var(--surface-soft); }
.rv-learner b { display: block; font-size: 22px; }
.rv-learner .badge { margin-top: 4px; }
.rv-learner small { display: block; margin-top: 4px; font-size: 18px; color: var(--ink-secondary); overflow-wrap: anywhere; }
.rv-kvs { display: grid; margin: 0; }
.rv-kv { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-default); }
.rv-kv:first-child { border-top: 0; }
.rv-kv dt { font-size: 18.5px; color: var(--ink-secondary); }
.rv-kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 20px; font-weight: 600; color: var(--ink-primary); min-width: 0; }
.rv-kv dd small { font-weight: 500; color: var(--ink-secondary); }
.rv-q { margin: 0 0 14px; font-size: 21.5px; font-weight: 600; line-height: 1.35; color: var(--ink-primary); }
.rv-q span { display: block; margin-bottom: 2px; font-size: 17px; font-weight: 700; color: var(--ink-secondary); }
.rv-answer { padding: 16px 18px; border-radius: 16px; background: var(--surface-soft); border: 1px solid var(--border-default); }
.rv-answer-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.rv-answer-head .rv-flabel { margin: 0; }
.rv-count { font-size: 17px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.rv-answer-text { margin: 8px 0 0; font-size: 20.5px; line-height: 1.55; color: var(--ink-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-files { margin-top: 16px; }
.rv-flabel { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 700; color: var(--ink-secondary); }
.rv-muted { margin: 0; font-size: 19px; color: var(--ink-secondary); }
.rv-timeline .file-chip { max-width: 460px; margin-top: 10px; }
.rv-tl-excerpt { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-tl-by { display: block; font-size: 18px; color: var(--ink-secondary); }
.rv-form { display: grid; gap: 18px; }
.rv-form .rv-card-h { margin-bottom: 0; }
.rv-choices { display: grid; gap: 10px; }
.rv-opt .oc-title svg { width: 18px; height: 18px; }
.rv-opt--pass .oc-title svg { color: var(--c-success); }
.rv-opt--fail .oc-title svg { color: var(--c-danger); }
.rv-opt--pass:has(input:checked) { border-color: var(--c-success); background: #F2FAF5; box-shadow: 0 0 0 3px rgba(23, 117, 74, .1); }
.rv-opt--fail:has(input:checked) { border-color: var(--c-danger); background: #FFF8F7; box-shadow: 0 0 0 3px rgba(180, 35, 24, .1); }
.rv-opt--pass input:checked { background: var(--c-success); border-color: var(--c-success); }
.rv-opt--fail input:checked { background: var(--c-danger); border-color: var(--c-danger); }
.rv-comment-field .textarea { min-height: 150px; }
.rv-attach .file-drop { flex-wrap: wrap; }
.rv-form-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; color: var(--ink-secondary); }
.rv-form-note svg { width: 15px; height: 15px; flex-shrink: 0; }
.rv-done { display: flex; flex-direction: column; gap: 14px; background: #F4FBF7; border-color: #BFE3CE; }
.rv-done-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--c-success); box-shadow: var(--shadow-card); }
.rv-done-ico svg { width: 28px; height: 28px; }
.rv-done-h { margin: 0; font-size: 25.5px; line-height: 1.25; }
.rv-done-h:focus { outline: none; }
.rv-done-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 20px; }
.rv-done-note { display: flex; gap: 8px; margin: 0; font-size: 19px; color: var(--ink-primary); }
.rv-done-note svg { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: var(--c-success); }
.rv-notif { padding: 14px; border-radius: 18px; background: var(--ink-primary); }
.rv-notif-label { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 17px; font-weight: 700; color: #9FAEB1; }
.rv-notif-label svg { width: 15px; height: 15px; }
.rv-notif-card { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: #fff; }
.rv-notif-card + .rv-notif-card { margin-top: 8px; }
.rv-new { color: var(--brand-primary-dark); }
.rv-notif-cta { color: var(--brand-primary-dark); font-weight: 600; }
.rv-done-actions { display: grid; gap: 10px; }
.rv-ro-sum { margin: 0 0 8px; }
.rv-ro-text { margin: 0 0 14px; font-size: 20px; color: var(--ink-primary); }
.rv-ro-last { margin-bottom: 16px; }
.rv-ro-last .file-chip { margin-top: 10px; }
@media (max-width: 959px) {
  .rv-grid { grid-template-columns: minmax(0, 1fr); }
  .rv-col--side { position: static; }
  .rv-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 767px) {
  .rv-root { padding-top: 16px; }
  .rv-banner { margin-bottom: 20px; }
  .rv-banner .notice { padding: 14px 16px; font-size: 19px; }
  .rv-stats { width: 100%; }
  .rv-stat { flex: 1; min-width: 0; }
  .rv-item { flex-wrap: wrap; align-items: flex-start; padding: 16px; }
  .rv-item-course { white-space: normal; }
  .rv-item-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding-left: 56px; }
  .rv-card { padding: 20px 18px; }
}

/* =========================================================================
   5. CERTIFICATE
   ========================================================================= */
.page-cert { background: var(--surface-soft); }
.cert-root { padding: 24px 0 72px; }
.cert-wrap { max-width: calc(1240px + var(--page-pad) * 2); }
.cert-skel { padding: 24px 0; }
.cert-skel-sheet { max-width: 860px; aspect-ratio: 297 / 210; border-radius: 12px; }
.cert-crumbs { margin-bottom: 18px; }
.cert-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 24px; }
.cert-head .eyebrow { margin-bottom: 8px; }
.cert-h1 { margin: 0 0 6px; font-size: clamp(36.5px, 3.38vw, 49.5px); line-height: 1.15; }
.cert-sub { margin: 0; font-size: 21.5px; color: var(--ink-secondary); }
.cert-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.cert-stage { min-width: 0; }
.cert-paper { padding: clamp(10px, 2.4vw, 28px); border-radius: var(--r-card); background: linear-gradient(135deg, var(--surface-soft) 0%, var(--surface-subtle) 100%); box-shadow: inset 0 0 0 1px rgba(24, 39, 42, .05); }
.cert-stage-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.cert-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; color: var(--ink-secondary); }
.cert-hint svg { width: 15px; height: 15px; flex-shrink: 0; }
.cert-note { margin-top: 14px; }
.cert-note .notice { border-radius: 16px; }
.cert-side { position: sticky; top: 104px; display: grid; gap: 16px; }
.cert-card { padding: 22px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--border-default); }
.cert-card-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 23px; }
.cert-card-h svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand-primary-dark); }
.cert-actions { display: grid; gap: 10px; }
.cert-actions .btn.is-attn { animation: cert-attn 1.3s ease-in-out 3; }
@keyframes cert-attn { 50% { box-shadow: 0 0 0 7px rgba(0, 194, 214, .22); } }
.cert-tip { display: flex; gap: 8px; margin: 14px 0 0; font-size: 18px; color: var(--ink-secondary); }
.cert-tip svg { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.cert-kv { display: grid; margin: 0; }
.cert-kv-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-default); font-size: 19px; }
.cert-kv-row:first-child { border-top: 0; padding-top: 0; }
.cert-kv-row dt { color: var(--ink-secondary); }
.cert-kv-row dd { margin: 0; font-weight: 600; color: var(--ink-primary); overflow-wrap: anywhere; }
.cert-code { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cert-card--ce p { margin: 0 0 12px; font-size: 20px; color: var(--ink-primary); }
.cert-state { max-width: 760px; margin: 24px auto 0; }
.cert-state-h { margin: 4px 0 0; font-size: 27px; }

/* the sheet — inner sizes use cqw (1cqw = 1% of the sheet width) so it looks identical at any size */
.cert-sheet {
  position: relative; width: 100%; aspect-ratio: 297 / 210; overflow: hidden; container-type: inline-size;
  border-radius: 4px; background: var(--cream-soft); color: var(--ink-primary); font-family: var(--font); text-align: center;
  box-shadow: 0 30px 60px -30px rgba(24, 39, 42, .45), 0 2px 6px rgba(24, 39, 42, .08);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cert-bg { position: absolute; inset: 0; color: rgba(0, 194, 214, .11); background: radial-gradient(60% 60% at 50% 55%, rgba(0, 194, 214, .06), rgba(0, 194, 214, 0) 70%), radial-gradient(40% 50% at 0% 100%, rgba(239, 227, 202, .16), rgba(239, 227, 202, 0) 70%); }
.cert-guilloche { position: absolute; inset: 0; width: 100%; height: 100%; }
.cert-watermark { position: absolute; left: 50%; top: 54%; width: 36cqw; height: auto; transform: translate(-50%, -50%); opacity: .06; }
.cert-edge { position: absolute; inset: 0; border: .65cqw solid; border-image: linear-gradient(120deg, var(--brand-primary-dark), var(--brand-primary) 55%, var(--ink-primary)) 1; }
.cert-frame { position: absolute; inset: 2.3cqw; border: .15cqw solid var(--cream-dark); }
.cert-frame::before { content: ""; position: absolute; inset: .7cqw; border: .07cqw solid var(--border-default); }
.cert-corner { position: absolute; width: 5.4cqw; height: 5.4cqw; }
.cert-corner svg { display: block; width: 100%; height: 100%; }
.cert-corner--tl { left: 3.1cqw; top: 3.1cqw; }
.cert-corner--tr { right: 3.1cqw; top: 3.1cqw; transform: scaleX(-1); }
.cert-corner--bl { left: 3.1cqw; bottom: 3.1cqw; transform: scaleY(-1); }
.cert-corner--br { right: 3.1cqw; bottom: 3.1cqw; transform: scale(-1, -1); }
.cert-inner { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5.4cqw 8.2cqw 3.1cqw; }
.cert-top { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.cert-brand { display: flex; align-items: center; gap: 1.1cqw; }
.cert-logo { width: auto; height: 3.4cqw; }
.cert-no { text-align: right; line-height: 1.15; }
.cert-no span { display: block; font-size: 1.27cqw; color: var(--ink-secondary); }
.cert-no b { font-size: 1.76cqw; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.cert-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cert-kicker { margin: 0; font-size: 1.82cqw; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; color: var(--brand-primary-dark); }
.cert-title { margin: .5cqw 0 0; font-size: 5.59cqw; line-height: 1.15; font-weight: 700; color: var(--ink-primary); }
.cert-rule { display: flex; align-items: center; gap: 1cqw; margin: 1.2cqw 0 1.5cqw; }
.cert-rule i { display: block; width: 9cqw; height: .12cqw; background: linear-gradient(90deg, rgba(0, 194, 214, 0), var(--brand-primary)); }
.cert-rule i:last-child { transform: scaleX(-1); }
.cert-rule b { display: block; width: .85cqw; height: .85cqw; transform: rotate(45deg); background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)); }
.cert-lead { margin: 0; font-size: 1.9cqw; line-height: 1.3; color: var(--ink-secondary); }
.cert-name { margin: .5cqw 0 .9cqw; padding: 0 3cqw .5cqw; font-size: 5.33cqw; font-weight: 700; line-height: 1.15; color: var(--ink-primary); border-bottom: .12cqw solid var(--cream-primary); }
.cert-course { max-width: 70cqw; margin: .5cqw 0 0; font-size: 2.73cqw; font-weight: 600; line-height: 1.25; color: var(--ink-primary); }
.cert-date { margin: .9cqw 0 0; font-size: 1.82cqw; color: var(--ink-secondary); }
.cert-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 4cqw; margin-top: 1.2cqw; }
.cert-sign { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cert-sig-svg { width: 15cqw; height: auto; margin-bottom: -.3cqw; }
.cert-sign-line { display: block; width: 19cqw; max-width: 100%; height: .1cqw; margin-bottom: .7cqw; background: var(--ink-muted); }
.cert-sign b { font-size: 1.54cqw; font-weight: 700; line-height: 1.15; color: var(--ink-primary); }
.cert-sign small { font-size: 1.21cqw; line-height: 1.2; color: var(--ink-secondary); }
.cert-seal { display: flex; flex-direction: column; align-items: center; gap: .5cqw; }
.cert-qr-svg { width: 8.2cqw; height: 8.2cqw; padding: .3cqw; background: #fff; border: .1cqw solid var(--border-default); border-radius: .6cqw; }
.cert-seal small { font-size: 1.16cqw; white-space: nowrap; color: var(--ink-secondary); }
.cert-mock { margin: 1.3cqw 0 0; font-size: 1.16cqw; letter-spacing: .02em; color: var(--ink-muted); }

/* zoom viewer */
.cert-zoom-modal .modal-body { display: flex; flex-direction: column; padding: 0 0 18px; }
.cert-zoom { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; }
.cert-zoom-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 24px; }
.cert-zoom-val { min-width: 56px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cert-zoom-hint { margin-left: auto; font-size: 17px; color: var(--ink-secondary); }
.cert-zoom-vp { position: relative; display: flex; align-items: center; margin: 0 24px; overflow: hidden; border-radius: 16px; background: var(--surface-subtle); touch-action: none; }
.cert-zoom-vp:focus-visible { outline-offset: 3px; }
.cert-zoom-vp.is-zoomed { cursor: grab; }
.cert-zoom-vp.is-drag { cursor: grabbing; }
.cert-zoom-inner { width: 100%; flex-shrink: 0; transform-origin: center center; transition: transform .2s var(--ease-out); will-change: transform; }
.cert-zoom-vp.is-drag .cert-zoom-inner { transition: none; }
.cert-zoom-inner .cert-sheet { border-radius: 0; box-shadow: none; }

@media (max-width: 1099px) { .cert-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 959px) {
  .cert-layout { grid-template-columns: minmax(0, 1fr); }
  .cert-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-side .cert-card:first-child { grid-column: 1 / -1; }
  .cert-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cert-actions .btn { padding: 0 12px; }
}
@media (max-width: 767px) {
  .cert-root { padding-top: 16px; }
  .cert-head .badge { display: none; }
  .cert-paper { padding: 8px; border-radius: 16px; }
  .cert-side { grid-template-columns: minmax(0, 1fr); }
  .cert-actions { grid-template-columns: minmax(0, 1fr); }
  .cert-zoom-btn { width: 100%; min-height: 48px; }
  .cert-zoom-modal .modal-body { padding-bottom: 0; }
  .cert-zoom-bar { padding: 0 16px; }
  .cert-zoom-hint { display: none; }
  .cert-zoom-vp { flex: 1; margin: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .cert-zoom-inner { transition: none; } .cert-actions .btn.is-attn { animation: none; } }

/* print: only the certificate, A4 landscape, no margins */
@page cert { size: A4 landscape; margin: 0; }
@media print {
  .page-cert { background: #fff !important; }
  .page-cert .cert-root { padding: 0; }
  .page-cert .cert-wrap { max-width: none; margin: 0; padding: 0; }
  .page-cert .cert-crumbs, .page-cert .cert-head, .page-cert .cert-side, .page-cert .cert-stage-tools,
  .page-cert .cert-note, .page-cert .modal-root, .page-cert .skip-link, .page-cert nav { display: none !important; }
  .page-cert .cert-layout { display: block; }
  .page-cert .cert-paper { padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .page-cert .cert-paper .cert-sheet { page: cert; width: 297mm; height: 209.6mm; aspect-ratio: auto; border-radius: 0; box-shadow: none; break-inside: avoid; }
}