/* ============================================================
   Quick Fix — "circuit board" light theme
   Display: Space Grotesk | Body: Inter | Mono: IBM Plex Mono
   Signature: animated LED-gradient ring (kept from v1) + a small
   glowing "status dot" motif used sparingly throughout.
   ============================================================ */

:root {
  --paper: #F6F8FB;
  --panel: #FFFFFF;
  --panel-2: #EFF2F8;
  --bg: var(--panel-2);
  --border: rgba(18, 20, 28, 0.10);
  --border-soft: rgba(18, 20, 28, 0.06);
  --ink: #12141C;
  --text: var(--ink);
  --card: var(--panel);
  --muted: #5B6272;
  --muted-2: #9299AB;

  /* shifting accent spectrum — the LED signature */
  --led-1: #3B6FE0;
  --led-2: #7C4DFF;
  --led-3: #E8447F;
  --led-4: #F2A93B;
  --led-5: #17A876;
  --led-6: #14B8C4;

  --success: #17A876;
  --danger: #E5484D;
  --warning: #F2A93B;
  --primary: #12141C;
  --action-strong: #12141C;
  --action-strong-hover: #2A2E3D;

  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --radius: 20px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background-image:
    radial-gradient(rgba(18, 20, 28, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  background-attachment: fixed;
}

a { color: inherit; }
button { font-family: var(--font-body); cursor: pointer; }
::selection { background: var(--led-1); color: #fff; }

:focus-visible {
  outline: 2px solid var(--led-1);
  outline-offset: 2px;
}

.mono { font-family: var(--font-mono); letter-spacing: 0.01em; }

/* ==================== LED FRAME (signature element) ====================
   A slow, smoothly shifting multicolor gradient acting as a thin rounded
   ring, with a solid white card sitting inside — a PCB component with a
   glowing edge. Used sparingly: course cards, the active quiz card, the
   results screen, and the #1 leaderboard spot. */

.led-frame {
  padding: 2px;
  border-radius: var(--radius);
  background: linear-gradient(115deg, var(--led-1), var(--led-2), var(--led-3), var(--led-4), var(--led-5), var(--led-6), var(--led-1));
  background-size: 300% 300%;
  animation: led-flow 9s ease infinite;
  box-shadow: 0 12px 28px -14px rgba(59, 111, 224, 0.35);
}
.led-frame.fast { animation-duration: 4.5s; }
.led-frame-inner {
  background: var(--panel);
  border-radius: calc(var(--radius) - 2px);
  height: 100%;
}

@keyframes led-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes led-flow-x {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .led-frame { animation: none; background-position: 30% 50%; }
}

/* ---- status dot motif: a small glowing indicator light ---- */
.led-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
  flex-shrink: 0;
}

/* ---- power-on reveal for grid content ---- */
@keyframes power-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .power-in { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==================== FOX SPLASH ==================== */

.fox-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.96), rgba(255,250,241,.95) 38%, transparent 70%),
    linear-gradient(145deg, #f7fbff 0%, #eef4fa 55%, #fff7ed 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.42s;
  overflow: hidden;
}
.fox-splash::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 24% 34%, rgba(34, 212, 205, .09), transparent 38%),
    radial-gradient(circle at 77% 65%, rgba(255, 123, 62, .08), transparent 37%),
    radial-gradient(circle at 50% 45%, rgba(52,76,101,.055) 1px, transparent 1.5px);
  background-size: auto, auto, 30px 30px;
  pointer-events: none;
  animation: fox-splash-ambient 2.8s ease-in-out infinite alternate;
}
.fox-splash.is-exit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.fox-splash-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}
.fox-splash-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 250px;
  transform: translate(-50%, -62%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 194, 193, .20) 0%, rgba(255, 125, 62, .10) 46%, transparent 70%);
  filter: blur(20px);
  opacity: 0;
  animation: fox-splash-glow 1s cubic-bezier(0.22, 1, 0.36, 1) .05s forwards;
  pointer-events: none;
}
.fox-splash-logo {
  width: 92px;
  height: 92px;
  border-radius: 25px;
  object-fit: cover;
  background: #fffaf1;
  box-shadow:
    0 16px 38px -13px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255,255,255,.24),
    0 0 36px rgba(20,194,193,.16);
  opacity: 0;
  transform: scale(.72) translateY(10px);
  animation: fox-splash-logo-in .62s cubic-bezier(.2,1.35,.45,1) .04s both, fox-splash-logo-out .35s cubic-bezier(.55,0,1,.45) 1.2s forwards;
}
.fox-splash-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4.5vw, 1.9rem);
  letter-spacing: -.045em;
  color: #172033;
  text-shadow: 0 2px 24px rgba(35,59,80,.12);
  opacity: 0;
  transform: translateY(10px);
  animation: fox-splash-text-in .42s cubic-bezier(.22,1,.36,1) .28s both, fox-splash-text-out .25s ease-in 1.22s forwards;
}
.fox-splash-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #68778b;
  max-width: calc(100vw - 42px);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(8px);
  animation: fox-splash-text-in .38s cubic-bezier(.22,1,.36,1) .4s both, fox-splash-text-out .22s ease-in 1.22s forwards;
}
.fox-splash-bar {
  width: min(148px, 42vw);
  height: 3px;
  margin-top: 12px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(44, 67, 91, .12);
  opacity: 0;
  animation: fox-splash-text-in .35s ease-out .5s both, fox-splash-text-out .2s ease-in 1.25s forwards;
}
.fox-splash-bar span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #00b9b2, #ff8046);
  animation: fox-splash-progress 1.05s cubic-bezier(.4,0,.2,1) .42s forwards;
}

@keyframes fox-splash-logo-in {
  0% { opacity: 0; transform: scale(.72) translateY(10px) rotate(-5deg); }
  72% { opacity: 1; transform: scale(1.045) translateY(0) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}
@keyframes fox-splash-text-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fox-splash-logo-out {
  to { opacity: 0; transform: scale(.9) translateY(-8px) rotate(4deg); }
}
@keyframes fox-splash-text-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes fox-splash-progress { to { transform: scaleX(1); } }
@keyframes fox-splash-glow {
  0% { opacity: 0; transform: translate(-50%, -62%) scale(.86); }
  100% { opacity: .85; transform: translate(-50%, -62%) scale(1); }
}
@keyframes fox-splash-ambient {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.035) translate(1%, -1%); }
}

/* Hide main content until splash finishes */
body.fox-splash-pending .login-shell,
body.fox-splash-pending #app {
  opacity: 0;
  pointer-events: none;
}
body.fox-splash-done .login-shell,
body.fox-splash-done #app {
  opacity: 1;
  pointer-events: auto;
  animation: fox-content-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fox-content-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .fox-splash-logo,
  .fox-splash-name,
  .fox-splash-tag,
  .fox-splash-bar,
  .fox-splash-bar span,
  .fox-splash-glow,
  .fox-splash::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .fox-splash-glow { display: none !important; }
  body.fox-splash-done .login-shell,
  body.fox-splash-done #app {
    animation: none !important;
  }
}

/* ==================== LOGIN PAGE ==================== */

.login-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  text-align: center;
}
.login-brand .brand-logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 10px 28px -12px rgba(18, 20, 28, 0.35);
  background: #faf7f0;
}
.login-brand .mark {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--action-strong);
  position: relative;
}
.login-brand .mark::after {
  content: "";
  position: absolute;
  top: -3px; right: -3px;
  width: 9px; height: 9px;
  border-radius: 50%;
  animation: dot-cycle 8s linear infinite;
  box-shadow: 0 0 8px 1px currentColor;
}
@keyframes dot-cycle {
  0%, 100% { background: var(--led-1); color: var(--led-1); }
  20% { background: var(--led-2); color: var(--led-2); }
  40% { background: var(--led-3); color: var(--led-3); }
  60% { background: var(--led-4); color: var(--led-4); }
  80% { background: var(--led-5); color: var(--led-5); }
}
.login-brand .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -30px rgba(18, 20, 28, 0.22);
  overflow: hidden;
}

.login-card-top {
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-card-top .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.login-card-top .blip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(23, 168, 118, 0.18);
}

.login-card-body { padding: 30px; }

.login-card-body h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  margin: 0 0 8px;
  line-height: 1.25;
}
.login-card-body p {
  margin: 0 0 26px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--action-strong);
  color: #fff;
  border: none;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.google-btn svg { background: #fff; border-radius: 3px; padding: 2px; }
.google-btn:hover { box-shadow: 0 8px 24px -8px rgba(18, 20, 28, 0.5); }
.google-btn:active { transform: scale(0.98); }

.login-error {
  margin-top: 14px;
  font-size: 13px;
  color: var(--danger);
  display: none;
}

.login-foot {
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-2);
  text-align: center;
  letter-spacing: 0.05em;
}
.login-foot.login-support {
  margin-top: 8px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.login-foot.login-support a {
  color: var(--led-1);
  text-decoration: none;
}
.login-foot.login-support a:hover {
  text-decoration: underline;
}
.login-support-ico {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 3px;
}

/* ==================== WELCOME / SIGN-IN PAGE ==================== */

.welcome-shell {
  min-height: 100svh;
  justify-content: flex-start;
  padding: 18px clamp(20px, 5vw, 72px) 24px;
}
.welcome-header,
.welcome-main {
  width: min(1120px, 100%);
  margin-inline: auto;
}
.welcome-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}
.welcome-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
}
.welcome-brand img {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  object-fit: cover;
  background: #faf7f0;
}
.welcome-audience,
.welcome-kicker,
.welcome-signin-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
}
.welcome-audience {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.welcome-audience .led-dot { color: var(--led-5); }
.welcome-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(34px, 7vh, 76px) 24px;
}
.welcome-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  align-items: center;
  gap: clamp(36px, 7vw, 88px);
}
.welcome-kicker { color: #078e9e; }
.welcome-copy h1 {
  max-width: 690px;
  margin: 18px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(42px, 5.5vw, 68px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.04;
}
.welcome-copy h1 span {
  display: block;
  color: var(--led-1);
}
.welcome-description {
  max-width: 590px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
}
.welcome-features {
  display: grid;
  gap: 15px;
  margin-top: 32px;
}
.welcome-feature {
  display: flex;
  align-items: center;
  gap: 13px;
}
.welcome-feature-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(20, 184, 196, .18);
  border-radius: 12px;
  background: rgba(20, 184, 196, .08);
  color: #078e9e;
  font-size: 21px;
}
.welcome-feature-icon-purple {
  border-color: rgba(124, 77, 255, .16);
  background: rgba(124, 77, 255, .07);
  color: var(--led-2);
}
.welcome-feature-icon-orange {
  border-color: rgba(242, 169, 59, .2);
  background: rgba(242, 169, 59, .1);
  color: #c88112;
}
.welcome-feature h2 {
  margin: 0 0 3px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.3;
}
.welcome-feature p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.welcome-signin {
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 24px 70px -42px rgba(18, 20, 28, .35);
}
.welcome-signin-mark {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 17px;
  background: #faf7f0;
}
.welcome-signin-mark img { width: 48px; height: 48px; object-fit: contain; }
.welcome-signin-label { color: #078e9e; }
.welcome-signin h2 {
  margin: 9px 0 8px;
  font-family: var(--font-display);
  font-size: 25px;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.welcome-signin > p:not(.login-error) {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.welcome-signin .google-btn {
  min-height: 48px;
  margin-top: 0;
}
.auth-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: 20px 0 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #f4f6f7;
}
.auth-mode-tab {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: 600 13px var(--font-body);
  cursor: pointer;
}
.auth-mode-tab.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(18, 20, 28, .08);
}
.auth-mode-tab:focus-visible,
.auth-mode-switch button:focus-visible,
.auth-forgot:focus-visible,
.auth-text-button:focus-visible {
  outline: 3px solid rgba(12, 164, 177, .35);
  outline-offset: 2px;
}
.auth-field { margin: 0 0 13px; }
.auth-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.auth-field input {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: 14px var(--font-body);
}
.auth-field input:focus {
  outline: 3px solid rgba(12, 164, 177, .14);
  border-color: var(--led-1);
}
.auth-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  justify-content: center;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted-2);
  font-size: 11px;
}
.auth-divider::before,
.auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.auth-mode-switch {
  margin: 15px 0 0 !important;
  text-align: center;
  font-size: 12px !important;
}
.auth-mode-switch button,
.auth-forgot,
.auth-text-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #087f8c;
  font: 600 12px var(--font-body);
  cursor: pointer;
}
.auth-mode-switch button:hover,
.auth-forgot:hover,
.auth-text-button:hover { text-decoration: underline; }
.auth-forgot { display: block; margin: 10px 0 0 auto; }
.auth-verify-panel[hidden],
#authFormPanel[hidden] { display: none !important; }
.auth-verify-panel {
  padding-top: 5px;
  text-align: center;
}
.auth-verify-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 14px auto 10px;
  place-items: center;
  border-radius: 15px;
  background: rgba(12, 164, 177, .1);
  color: #087f8c;
  font-size: 22px;
}
.auth-verify-panel h3 {
  margin: 8px 0;
  font: 700 18px var(--font-display);
}
.auth-verify-panel p {
  margin: 0 0 16px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.auth-verify-panel p strong { color: var(--ink); }
.auth-text-button {
  display: block;
  margin: 15px auto 0;
  color: var(--muted);
  font-weight: 500;
}
.auth-text-button + .auth-text-button { margin-top: 10px; }
.welcome-private {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 17px 0 0;
  font-size: 11px !important;
}
.welcome-private span { color: var(--led-5); font-size: 9px; padding-top: 3px; }
.welcome-signin .login-error:empty { display: none; }
.welcome-signin .login-error { line-height: 1.45; }
.welcome-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 42px;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .035em;
}
.welcome-footer-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.welcome-support { white-space: nowrap; }
.welcome-support a {
  color: var(--muted);
  text-decoration: none;
}
.welcome-support a:hover { color: var(--led-1); text-decoration: underline; }

/* ==================== FIRST-VISIT WELCOME FLOW ==================== */

.welcome-intro[hidden],
.welcome-signin-screen[hidden] { display: none !important; }
.welcome-main { width: min(1120px, 100%); }
.welcome-intro {
  width: min(100%, 1020px);
  min-height: clamp(470px, 68vh, 660px);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  align-items: center;
  gap: clamp(32px, 6vw, 78px);
}
.welcome-intro-copy { min-width: 0; }
.welcome-step-count {
  margin: 38px 0 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .09em;
}
.welcome-step-count span { color: var(--muted-2); }
.welcome-intro-copy h1 {
  max-width: 600px;
  margin: 14px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(42px, 5.4vw, 64px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.04;
}
.welcome-intro-copy h1 span { display: block; color: var(--led-1); }
.welcome-intro-copy .welcome-description { max-width: 520px; }
.welcome-progress {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 36px;
}
.welcome-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #cbd3d9;
  cursor: pointer;
  transition: width .2s ease, background-color .2s ease, transform .2s ease;
}
.welcome-dot:hover { transform: scale(1.16); }
.welcome-dot.is-active { width: 27px; background: var(--led-1); }
.welcome-dot:focus-visible,
.welcome-next:focus-visible,
.welcome-skip:focus-visible {
  outline: 3px solid rgba(12, 164, 177, .35);
  outline-offset: 3px;
}
.welcome-intro-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 25px;
}
.welcome-skip {
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 600 13px var(--font-body);
  cursor: pointer;
}
.welcome-skip:hover { color: var(--ink); }
.welcome-next {
  min-width: 138px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  background: var(--action-strong);
  color: #fff;
  font: 600 14px var(--font-body);
  cursor: pointer;
  box-shadow: 0 12px 26px -17px rgba(18, 20, 28, .55);
  transition: transform .16s ease, box-shadow .16s ease;
}
.welcome-next:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -17px rgba(18, 20, 28, .65); }
.welcome-next span { font-size: 19px; line-height: 1; }
.welcome-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.welcome-art-glow { display: none; }
.welcome-art-logo {
  position: absolute;
  width: 74px;
  height: 74px;
  object-fit: contain;
  border-radius: 20px;
  opacity: .14;
  filter: saturate(.85);
}
.welcome-art-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: transparent;
}
.welcome-art.is-static .welcome-art-canvas { opacity: 0; }
.welcome-art.is-static .welcome-art-logo { opacity: .96; }
.welcome-art-caption {
  display: none;
}
.welcome-signin-screen {
  width: min(1120px, 100%);
  margin: auto;
  display: grid;
  gap: 8px;
  align-content: center;
}
.welcome-login-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  align-items: center;
  gap: clamp(36px, 7vw, 88px);
}
.welcome-login-hero .welcome-copy h1 {
  max-width: 690px;
  margin: 18px 0 16px;
  font-size: clamp(42px, 5.2vw, 62px);
}
.welcome-login-hero .welcome-copy h1 span { display: block; color: var(--led-1); }
.welcome-login-hero .welcome-description { max-width: 590px; }
.welcome-login-hero .welcome-features { gap: 13px; margin-top: 26px; }
.welcome-login-hero .welcome-feature-icon { width: 36px; height: 36px; flex-basis: 36px; }
.welcome-login-hero .welcome-signin { padding: clamp(25px, 3vw, 32px); }
.welcome-intro.is-changing .welcome-intro-copy > * {
  animation: welcome-copy-in .28s ease both;
}
.welcome-intro.is-changing .welcome-intro-copy > *:nth-child(2) { animation-delay: .02s; }
.welcome-intro.is-changing .welcome-intro-copy > *:nth-child(3) { animation-delay: .04s; }
.welcome-intro.is-changing .welcome-intro-copy > *:nth-child(4) { animation-delay: .06s; }
@keyframes welcome-copy-in {
  from { opacity: .35; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 820px) {
  .welcome-intro { grid-template-columns: minmax(0, 1fr) minmax(250px, .82fr); gap: 28px; }
  .welcome-intro-copy h1 { font-size: clamp(38px, 5.6vw, 52px); }
  .welcome-login-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); gap: 28px; }
  .welcome-login-hero .welcome-copy h1 { font-size: clamp(38px, 5.5vw, 52px); }
  .welcome-login-hero .welcome-signin { padding: 24px; }
}
@media (max-width: 680px) {
  .welcome-shell { min-height: 100svh; }
  .welcome-main { padding-top: clamp(22px, 5vh, 42px); padding-bottom: 20px; }
  .welcome-intro {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 15px;
    align-content: center;
  }
  .welcome-intro-copy { display: contents; }
  .welcome-intro-copy .welcome-kicker { grid-row: 1; }
  .welcome-step-count { grid-row: 2; margin: 0; }
  .welcome-intro-copy h1 { grid-row: 3; margin: 0; max-width: 540px; font-size: clamp(38px, 10vw, 52px); }
  .welcome-intro-copy .welcome-description { grid-row: 4; font-size: 14px; line-height: 1.62; }
  .welcome-art { grid-row: 5; width: min(100%, 330px); justify-self: center; aspect-ratio: 1.13 / 1; }
  .welcome-progress { grid-row: 6; margin-top: 0; }
  .welcome-intro-actions { grid-row: 7; margin-top: 0; }
  .welcome-signin-screen { align-content: start; }
  .welcome-login-hero { grid-template-columns: 1fr; gap: 24px; }
  .welcome-login-hero .welcome-copy h1 { max-width: 520px; margin: 14px 0 13px; font-size: clamp(38px, 10vw, 52px); }
  .welcome-login-hero .welcome-description { font-size: 14px; }
  .welcome-login-hero .welcome-features { gap: 11px; margin-top: 20px; }
  .welcome-login-hero .welcome-feature { align-items: flex-start; gap: 10px; }
  .welcome-login-hero .welcome-feature-icon { width: 33px; height: 33px; flex-basis: 33px; border-radius: 10px; font-size: 18px; }
  .welcome-login-hero .welcome-feature h2 { font-size: 14px; }
  .welcome-login-hero .welcome-feature p { font-size: 12px; }
  .welcome-login-hero .welcome-signin { padding: 23px; }
  .welcome-footer { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-dot, .welcome-next { transition: none; }
  .welcome-intro.is-changing .welcome-intro-copy > * { animation: none !important; }
}

@media (max-width: 820px) {
  .welcome-main { justify-content: flex-start; padding-top: 48px; }
  .welcome-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); gap: 28px; }
  .welcome-copy h1 { font-size: clamp(40px, 6vw, 54px); }
  .welcome-signin { padding: 24px; }
}
@media (max-width: 680px) {
  .welcome-shell { padding: 12px 20px max(18px, env(safe-area-inset-bottom, 0px)); }
  .welcome-header { min-height: 48px; }
  .welcome-brand { font-size: 18px; }
  .welcome-brand img { width: 38px; height: 38px; }
  .welcome-audience { font-size: 9px; letter-spacing: .07em; }
  .welcome-main { padding-top: 42px; }
  .welcome-hero { grid-template-columns: 1fr; gap: 30px; }
  .welcome-copy h1 { max-width: 520px; margin-top: 14px; font-size: clamp(39px, 11vw, 54px); }
  .welcome-description { font-size: 15px; }
  .welcome-features { gap: 13px; margin-top: 25px; }
  .welcome-signin { padding: 23px; }
  .welcome-signin-mark { margin-bottom: 17px; }
  .welcome-footer { flex-direction: column; align-items: flex-start; margin-top: 26px; font-size: 10px; }
  .welcome-footer-right { flex-wrap: wrap; justify-content: flex-start; gap: 10px 14px; }
}

/* ==================== USERNAME MODAL ==================== */

.username-card {
  width: 100%;
  max-width: 380px;
}
.username-card.onboard-card {
  max-width: 440px;
  max-height: min(92vh, 720px);
  overflow-y: auto;
}
.username-card h1 { font-size: 21px; }
.username-taken-warning {
  font-size: 12px;
  color: var(--danger);
  margin-top: 8px;
  display: none;
}
.terms-field {
  margin-top: 4px;
  margin-bottom: 18px;
}
.terms-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #9aa3b2);
  cursor: pointer;
  font-weight: 500;
}
.terms-label input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #33E1FF);
  flex-shrink: 0;
}
.terms-link {
  color: var(--accent, #33E1FF);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.terms-link:hover { opacity: 0.85; }
.onboard-card .field-row {
  display: flex;
  gap: 12px;
}
.onboard-card .field-row .field {
  flex: 1;
  min-width: 0;
}
@media (max-width: 420px) {
  .onboard-card .field-row {
    flex-direction: column;
    gap: 0;
  }
}

/* ---- avatar preview + shuffle, shown while picking a username ---- */
.avatar-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.avatar-preview {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 2px solid var(--border);
  padding: 4px;
  transform-origin: 70% 90%;
}
.avatar-preview.rolling {
  animation: avatar-roll 0.4s ease;
}
@keyframes avatar-roll {
  0% { transform: scale(0.85) rotate(-6deg); opacity: 0.4; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ==================== APP SHELL ==================== */

#app { display: none; min-height: 100vh; }
#app.ready { display: block; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 248, 251, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
.brand-mini .brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  background: #faf7f0;
  flex-shrink: 0;
}
.brand-mini .brand-name {
  line-height: 1;
}
.brand-mini .mark {
  width: 28px; height: 28px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #fff;
  background: var(--action-strong);
  position: relative;
}
.brand-mini .mark::after {
  content: "";
  position: absolute;
  top: -2px; right: -2px;
  width: 7px; height: 7px;
  border-radius: 50%;
  animation: dot-cycle 8s linear infinite;
  box-shadow: 0 0 6px 1px currentColor;
}

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.breadcrumb .sep { margin: 0 6px; color: var(--muted-2); }
.breadcrumb .current { color: var(--ink); }
.breadcrumb button {
  background: none; border: none; color: var(--muted);
  font-family: var(--font-mono); font-size: 12px; padding: 0;
}
.breadcrumb button:hover { color: var(--led-1); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.announcement-bell{position:relative;min-width:40px;padding:8px 10px}
.announcement-bell .qf-icon{width:19px;height:19px;margin:0}
.announcement-count{position:absolute;top:-5px;right:-5px;display:grid;min-width:19px;height:19px;place-items:center;padding:0 5px;border:2px solid var(--paper);border-radius:999px;background:#dc566d;color:#fff;font-size:10px;font-weight:800;line-height:1}
.announcement-inbox{position:absolute;top:calc(100% + 8px);right:clamp(12px,2.5vw,28px);z-index:1000;width:min(410px,calc(100vw - 24px));max-height:min(66vh,560px);overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:0 16px 42px rgba(18,31,50,.18);color:var(--ink)}
.announcement-inbox[hidden]{display:none}
.announcement-inbox-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.announcement-inbox-head strong{font-size:14px}.announcement-inbox-head button{width:29px;height:29px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--ink);font-size:19px;cursor:pointer}
.announcement-inbox-items{max-height:calc(min(66vh,560px) - 54px);overflow:auto;padding:5px}
.announcement-inbox-empty{padding:24px 16px;text-align:center;color:var(--muted);font-size:12px}
.announcement-card{display:grid;grid-template-columns:minmax(0,1fr) 29px;gap:5px 7px;align-items:center;margin:0;padding:8px;border-bottom:1px solid var(--border);border-radius:11px;background:transparent;color:inherit}
.announcement-card:last-child{border-bottom:0}.announcement-card.is-unread{background:color-mix(in srgb,var(--led-1) 6%,var(--panel))}
.announcement-card-open{grid-column:1;grid-row:1;display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:10px;width:100%;min-width:0;padding:0;border:0;border-radius:8px;background:transparent;color:inherit;text-align:left;cursor:pointer}
.announcement-card-open:hover .announcement-card-title{color:var(--led-1)}.announcement-card-open:focus-visible,.announcement-card-delete:focus-visible{outline:2px solid var(--led-1);outline-offset:2px}
.announcement-card-media{display:grid;place-items:center;width:54px;height:54px;overflow:hidden;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}
.announcement-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.announcement-card-placeholder{display:grid;place-items:center;width:100%;height:100%;color:var(--led-1)}.announcement-card-placeholder .qf-icon{width:23px;height:23px}
.announcement-card-content{display:grid;gap:3px;min-width:0}
.announcement-card-kicker{display:flex;align-items:center;justify-content:space-between;gap:7px;color:var(--led-1);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.announcement-card-kicker time{flex:none;color:var(--muted);font-size:9px;font-weight:500;letter-spacing:0;text-transform:none}
.announcement-card-title{display:block;overflow:hidden;font-size:12px;font-weight:750;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.announcement-card-body{display:-webkit-box;overflow:hidden;color:var(--muted);font-size:11px;line-height:1.35;white-space:pre-wrap;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.announcement-card-expand{grid-column:1;grid-row:2;justify-self:start;margin:0 0 1px 64px;padding:2px 0;border:0;background:transparent;color:var(--led-1);font:750 10px/1.35 var(--font-display);cursor:pointer}
.announcement-card-expand:hover{text-decoration:underline}.announcement-card-expand:focus-visible{outline:2px solid var(--led-1);outline-offset:2px;border-radius:3px}
.announcement-card.is-expanded .announcement-card-body{display:block;overflow:visible;-webkit-line-clamp:unset}
.feedback-sent-backdrop{position:fixed;z-index:16020;inset:0;display:grid;place-items:center;overflow:auto;padding:18px;background:rgba(5,11,20,.7);backdrop-filter:blur(9px);animation:feedbackSentFade .2s ease both}
.feedback-sent-dialog{position:relative;display:grid;justify-items:center;width:min(420px,100%);padding:26px 25px 23px;border:1px solid color-mix(in srgb,var(--led-1) 34%,var(--border));border-radius:22px;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--led-1) 12%,transparent),transparent 52%),var(--panel);color:var(--ink);text-align:center;box-shadow:0 24px 76px rgba(0,0,0,.38);animation:feedbackSentRise .32s cubic-bezier(.2,.8,.2,1) both}
.feedback-sent-close{position:absolute;top:10px;right:10px;display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--border);border-radius:11px;background:var(--panel-2);color:var(--muted);font-size:21px;cursor:pointer}
.feedback-sent-animation{display:block;width:150px;height:150px;margin:-4px 0 2px}
.feedback-sent-kicker{color:var(--led-1);font:800 10px/1.4 var(--font-mono,ui-monospace,monospace);letter-spacing:.15em}
.feedback-sent-dialog h2{margin:8px 0 7px;font:800 24px/1.15 var(--font-display,system-ui);letter-spacing:-.025em}
.feedback-sent-dialog p{max-width:32ch;margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.6}
.feedback-sent-done{min-width:120px;justify-content:center}
@keyframes feedbackSentFade{from{opacity:0}to{opacity:1}}
@keyframes feedbackSentRise{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:480px){.feedback-sent-dialog{padding:22px 18px 19px;border-radius:19px}.feedback-sent-animation{width:132px;height:132px}.feedback-sent-dialog h2{font-size:21px}.feedback-sent-dialog p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.feedback-sent-backdrop,.feedback-sent-dialog{animation:none}}

/* Study planner and dashboard task preview */
.home-daily-plan{display:grid;gap:11px;margin:0 0 22px;padding:clamp(14px,2.2vw,21px);border:1px solid color-mix(in srgb,var(--led-1) 22%,var(--border));border-radius:17px;background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--led-1) 9%,transparent),transparent 44%),var(--panel);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.home-daily-plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.home-daily-plan-head h2{margin:3px 0 0;font:750 17px/1.2 var(--font-display,system-ui)}.home-daily-plan-head>a,.home-daily-plan-cta{display:inline-flex;align-items:center;gap:6px;color:var(--led-1);font-size:11px;font-weight:750;text-decoration:none}.home-daily-plan-content{display:grid;gap:9px;min-width:0}.home-daily-plan-content>p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.home-daily-plan-empty{max-width:70ch}.home-daily-plan-summary{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}.home-daily-plan-count{display:grid;width:38px;height:38px;place-items:center;border:1px solid color-mix(in srgb,var(--led-1) 28%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--led-1) 10%,var(--panel-2));color:var(--led-1);font-weight:850}.home-daily-plan-preview-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.home-daily-plan-preview-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:7px;min-width:0;padding:10px 11px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}.home-daily-plan-preview-row>span{color:var(--led-1);font-weight:900}.home-daily-plan-preview-row strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.home-daily-plan-preview-row small{color:var(--muted);font-size:10px;white-space:nowrap}.home-daily-plan-preview-row.is-done strong{text-decoration:line-through;opacity:.7}.home-daily-plan-cta{justify-self:start}
.study-planner-page{display:grid;gap:17px;width:min(1080px,100%);margin:0 auto;padding:8px 0 calc(96px + env(safe-area-inset-bottom,0px));color:var(--ink)}.study-planner-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:clamp(19px,3vw,30px);border:1px solid color-mix(in srgb,var(--led-1) 24%,var(--border));border-radius:20px;background:radial-gradient(ellipse at 95% 0%,color-mix(in srgb,var(--led-1) 16%,transparent),transparent 43%),linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--panel) 82%,var(--led-1)))}.study-planner-kicker{color:var(--led-1);font:800 10px/1.4 var(--font-mono,ui-monospace,monospace);letter-spacing:.13em}.study-planner-hero h1{margin:7px 0;font:800 clamp(25px,4vw,36px)/1.05 var(--font-display,system-ui);letter-spacing:-.035em}.study-planner-hero p{max-width:56ch;margin:0;color:var(--muted);font-size:12px;line-height:1.55}.study-planner-date-nav{display:grid;grid-template-columns:40px minmax(130px,1fr) 40px;align-items:center;gap:8px;flex:none}.study-planner-date-nav>div{display:grid;gap:4px;text-align:center}.study-planner-date-nav small{color:var(--led-1);font:800 9px var(--font-mono,monospace);letter-spacing:.13em}.study-planner-date-nav strong{font-size:13px}.study-planner-date-arrow{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--border);border-radius:50%;background:var(--panel-2);color:var(--ink);font-size:19px;text-decoration:none}.study-planner-day-tabs{display:flex;gap:7px}.study-planner-day-tabs a{display:grid;min-height:37px;place-items:center;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--panel);color:var(--muted);font-size:11px;font-weight:750;text-decoration:none}.study-planner-day-tabs a.is-active{border-color:color-mix(in srgb,var(--led-1) 35%,var(--border));background:color-mix(in srgb,var(--led-1) 12%,var(--panel));color:var(--led-1)}.study-planner-section{display:grid;gap:12px;padding:clamp(14px,2.5vw,21px);border:1px solid var(--border);border-radius:17px;background:var(--panel)}.study-planner-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.study-planner-section-head h2{margin:4px 0;font:750 19px/1.2 var(--font-display,system-ui)}.study-planner-section-head p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.study-add-task-shortcut{min-height:39px;padding:0 12px;border:1px solid color-mix(in srgb,var(--led-1) 30%,var(--border));border-radius:11px;background:color-mix(in srgb,var(--led-1) 10%,var(--panel-2));color:var(--led-1);font:750 11px var(--font-display,system-ui);cursor:pointer}.study-task-list{display:grid;gap:8px}.study-task-card{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:11px;min-width:0;padding:13px;border:1px solid var(--border);border-radius:14px;background:var(--panel-2);transition:border-color .18s,background .18s}.study-task-card.is-running{border-color:color-mix(in srgb,var(--led-1) 44%,var(--border));background:color-mix(in srgb,var(--led-1) 6%,var(--panel-2))}.study-task-card.is-complete{opacity:.78}.study-task-mark{display:grid;width:34px;height:34px;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--led-1) 13%,var(--panel));color:var(--led-1);font-size:17px;font-weight:850}.study-task-copy{display:grid;gap:3px;min-width:0}.study-task-type{color:var(--led-1);font:800 8px var(--font-mono,monospace);letter-spacing:.1em}.study-task-copy>strong{overflow-wrap:anywhere;font-size:13px}.study-task-copy>small,.study-task-duration{color:var(--muted);font-size:10px;line-height:1.45}.study-task-timer-label{color:var(--led-1)!important}.study-task-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.study-task-focus,.study-task-done{min-height:38px;padding:0 11px;border:1px solid color-mix(in srgb,var(--led-1) 38%,var(--border));border-radius:10px;background:var(--led-1);color:#06271f;font:800 10px var(--font-display,system-ui);white-space:nowrap;cursor:pointer}.study-task-focus.is-ready{background:#c3f6e7;color:#064531}.study-task-done{background:var(--panel);color:var(--muted);border-color:var(--border)}.study-task-countdown{min-width:83px;color:var(--led-1);font:850 19px var(--font-mono,monospace);font-variant-numeric:tabular-nums;text-align:center}.study-task-completion{color:var(--led-1);font-size:11px;font-weight:800;white-space:nowrap}.study-task-delete,.study-session-row>button{display:grid;width:30px;height:30px;place-items:center;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}.study-task-delete:hover,.study-session-row>button:hover{border-color:var(--border);background:var(--panel);color:var(--danger)}.study-planner-empty{display:grid;justify-items:center;gap:7px;padding:28px 12px;border:1px dashed var(--border);border-radius:13px;text-align:center}.study-planner-empty>span{color:var(--led-1);font-size:24px}.study-planner-empty>strong{font-size:14px}.study-planner-empty>p,.study-planner-empty-inline{max-width:52ch;margin:0;color:var(--muted);font-size:11px;line-height:1.5;text-align:center}.study-manual-task-form,.study-planner-form{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr) 120px auto;align-items:end;gap:9px;padding:13px;border:1px solid var(--border);border-radius:13px;background:color-mix(in srgb,var(--panel) 70%,var(--panel-2))}.study-manual-task-form label,.study-planner-form label{display:grid;gap:5px;min-width:0;color:var(--muted);font-size:10px;font-weight:700}.study-manual-task-form input,.study-planner-form input,.study-planner-form select,.study-manual-task-form select{width:100%;min-width:0;min-height:39px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--panel);color:var(--ink);font:inherit;font-size:11px}.study-manual-task-form>.btn,.study-planner-form>.btn{min-height:39px;justify-content:center;white-space:nowrap}.study-planner-form-status{grid-column:1/-1;margin:0;color:var(--danger);font-size:10px}.study-planner-timetable-section{margin-top:0}.study-session-list{display:grid;gap:7px}.study-session-row{display:grid;grid-template-columns:92px 70px minmax(0,1fr) 30px;align-items:center;gap:9px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}.study-session-day{color:var(--led-1);font-size:10px;font-weight:800}.study-session-time{font:750 11px var(--font-mono,monospace);font-variant-numeric:tabular-nums}.study-session-copy{display:grid;gap:3px;min-width:0}.study-session-copy strong{overflow-wrap:anywhere;font-size:11px}.study-session-copy small{color:var(--muted);font-size:9px}.study-planner-form-disclosure{overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}.study-planner-form-disclosure>summary{display:flex;align-items:center;gap:8px;min-height:43px;padding:0 12px;color:var(--ink);font-size:11px;font-weight:750;cursor:pointer;list-style:none}.study-planner-form-disclosure>summary::-webkit-details-marker{display:none}.study-planner-form-disclosure>summary span{color:var(--led-1);font-size:17px}.study-planner-form{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 9px 9px;padding:11px}.study-planner-form-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.study-planner-reminder{grid-column:1/-1;display:flex!important;grid-template-columns:none!important;align-items:center;gap:9px!important;padding:6px 1px}.study-planner-reminder input{width:17px!important;min-height:17px!important;accent-color:var(--led-1)}.study-planner-reminder span{display:grid;gap:3px}.study-planner-reminder strong{color:var(--ink);font-size:10px}.study-planner-reminder small{font-size:9px;font-weight:450}.study-planner-footnote{display:flex;justify-content:space-between;gap:10px;padding:0 3px;color:var(--muted);font-size:9px}.study-planner-error{padding:20px;border:1px solid color-mix(in srgb,var(--danger) 35%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--danger) 7%,var(--panel))}.study-planner-error strong{font-size:14px}.study-planner-error p{color:var(--muted);font-size:11px;line-height:1.5}.study-planner-error small{color:var(--led-1);font:700 10px var(--font-mono,monospace)}
.study-planner-empty-inline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);font-size:11px;line-height:1.5}.study-planner-empty-inline>span{max-width:60ch}.study-use-recommended{min-height:37px;flex:none;padding:0 11px;border:1px solid color-mix(in srgb,var(--led-1) 30%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--led-1) 10%,var(--panel));color:var(--led-1);font:750 10px var(--font-display,system-ui);cursor:pointer}.study-use-recommended:disabled{opacity:.55;cursor:wait}
@media(max-width:740px){.study-planner-page{gap:12px}.study-planner-hero{align-items:flex-start;flex-direction:column;gap:14px}.study-planner-date-nav{align-self:stretch;grid-template-columns:38px minmax(0,1fr) 38px}.study-planner-date-nav strong{font-size:12px}.study-planner-date-arrow{width:36px;height:36px}.study-planner-preview-list{grid-template-columns:1fr}.study-task-card{grid-template-columns:32px minmax(0,1fr);gap:8px;padding:10px}.study-task-mark{width:31px;height:31px}.study-task-actions{grid-column:2;justify-content:flex-start}.study-manual-task-form{grid-template-columns:repeat(2,minmax(0,1fr))}.study-manual-task-form label:first-child{grid-column:1/-1}.study-manual-task-form>.btn{grid-column:1/-1}.study-session-row{grid-template-columns:76px 54px minmax(0,1fr) 28px;gap:6px}.study-planner-empty-inline{align-items:stretch;flex-direction:column}.study-use-recommended{align-self:flex-start}.study-planner-footnote{flex-direction:column}.home-daily-plan-preview-list{grid-template-columns:1fr}}
@media(max-width:420px){.study-planner-page{padding-inline:0}.study-planner-hero{padding:15px;border-radius:15px}.study-planner-hero p{font-size:11px}.study-planner-section{padding:12px;border-radius:14px}.study-planner-section-head{align-items:flex-start}.study-planner-section-head h2{font-size:17px}.study-planner-section-head p{font-size:10px}.study-add-task-shortcut{min-height:35px;padding-inline:8px;font-size:10px}.study-task-copy>strong{font-size:12px}.study-task-actions{gap:5px}.study-task-focus,.study-task-done{min-height:35px;padding-inline:8px;font-size:9px}.study-manual-task-form{grid-template-columns:1fr 1fr;gap:7px;padding:9px}.study-manual-task-form label:nth-child(2){grid-column:1/-1}.study-session-row{grid-template-columns:65px 47px minmax(0,1fr) 24px;padding:8px}.study-session-day{font-size:9px}.study-session-time{font-size:10px}.study-session-copy strong{font-size:10px}.study-planner-form-row{grid-template-columns:1fr 1fr}.study-planner-form-row label:last-child{grid-column:1/-1}.home-daily-plan{padding:12px}.home-daily-plan-head h2{font-size:15px}}
.study-active-focus-notice{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--led-1) 35%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--led-1) 8%,var(--panel-2));color:var(--ink);text-decoration:none}.study-active-focus-notice>span:first-child{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--led-1) 16%,var(--panel));color:var(--led-1)}.study-active-focus-notice>span:nth-child(2){display:grid;gap:3px;min-width:0}.study-active-focus-notice strong{font-size:11px}.study-active-focus-notice small{color:var(--muted);font-size:10px}.study-active-focus-notice>b{margin-left:auto;color:var(--led-1);font-size:10px;white-space:nowrap}
@media(max-width:520px){.study-active-focus-notice{align-items:flex-start;flex-wrap:wrap}.study-active-focus-notice>b{margin-left:44px}}

/* Drawing Tutor · Gemini image interpretation prototype */
.drawing-tutor-page{--dt-green:#37e0a4;--dt-blue:#54b8ff;display:grid;gap:18px;width:min(1160px,100%);margin:0 auto;padding:10px 0 calc(100px + env(safe-area-inset-bottom,0px));color:var(--ink)}
.dt-status.is-error{padding:9px 11px;border:1px solid color-mix(in srgb,#ff6b72 42%,var(--border));border-radius:10px;background:color-mix(in srgb,#ff6b72 10%,var(--panel));color:#ff9298}
.dt-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;overflow:hidden;min-height:190px;padding:clamp(22px,4vw,40px);border:1px solid color-mix(in srgb,var(--dt-green) 30%,var(--border));border-radius:22px;background:radial-gradient(ellipse at 94% 12%,rgba(55,224,164,.17),transparent 38%),radial-gradient(ellipse at 78% 100%,rgba(84,184,255,.1),transparent 40%),linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--panel) 83%,#102b2a))}
.dt-hero-copy{position:relative;z-index:1;max-width:700px}.dt-eyebrow{color:var(--dt-green);font:800 10px/1.4 var(--font-mono,ui-monospace,monospace);letter-spacing:.14em}.dt-hero h1{margin:8px 0;font:800 clamp(30px,5vw,46px)/1.04 var(--font-display,system-ui);letter-spacing:-.045em}.dt-hero p{max-width:64ch;margin:0;color:var(--muted);font-size:13px;line-height:1.65}.dt-hero-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.dt-hero-chips span{padding:6px 9px;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--panel-2) 75%,transparent);color:var(--muted);font-size:10px;font-weight:700}.dt-hero-mark{display:grid;flex:0 0 106px;width:106px;height:106px;place-items:center;border:1px solid color-mix(in srgb,var(--dt-green) 35%,var(--border));border-radius:28px;background:linear-gradient(145deg,rgba(55,224,164,.18),rgba(84,184,255,.08));box-shadow:0 12px 40px rgba(0,0,0,.17);transform:rotate(4deg)}.dt-hero-mark svg{width:58px;height:58px;fill:none;stroke:var(--dt-green);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dt-steps{display:flex;align-items:center;justify-content:center;gap:12px;padding:3px 0;color:var(--muted);font-size:11px;font-weight:750}.dt-steps span{display:flex;align-items:center;gap:7px;white-space:nowrap}.dt-steps i{display:grid;width:25px;height:25px;place-items:center;border:1px solid var(--border);border-radius:50%;background:var(--panel);font-style:normal;font-size:10px}.dt-steps span.is-current{color:var(--ink)}.dt-steps span.is-current i{border-color:var(--dt-green);background:color-mix(in srgb,var(--dt-green) 15%,var(--panel));color:var(--dt-green)}.dt-steps>b{width:min(10vw,75px);height:1px;background:var(--border)}
.dt-workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.8fr);align-items:start;gap:14px}.dt-upload-column,.dt-guide-card,.dt-analysis,.dt-confirmed{min-width:0;padding:clamp(15px,2.4vw,22px);border:1px solid var(--border);border-radius:18px;background:var(--panel)}.dt-upload-column{display:grid;gap:13px}.dt-section-heading h2,.dt-result-head h2,.dt-confirmed h2{margin:5px 0;font:760 20px/1.2 var(--font-display,system-ui);letter-spacing:-.025em}.dt-section-heading p,.dt-result-head p,.dt-confirmed p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.dt-dropzone{display:grid;min-height:165px;place-content:center;justify-items:center;gap:8px;padding:18px;border:1px dashed color-mix(in srgb,var(--dt-green) 50%,var(--border));border-radius:15px;background:linear-gradient(145deg,color-mix(in srgb,var(--dt-green) 5%,var(--panel-2)),var(--panel-2));text-align:center;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}.dt-dropzone.is-dragging{border-style:solid;background:color-mix(in srgb,var(--dt-green) 11%,var(--panel-2));transform:scale(.995)}.dt-dropzone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.dt-upload-icon{display:grid;width:38px;height:38px;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--dt-green) 15%,var(--panel));color:var(--dt-green);font-size:25px}.dt-dropzone strong{font-size:12px}.dt-dropzone strong u{color:var(--dt-green);text-decoration:none}.dt-dropzone small{color:var(--muted);font-size:10px}.dt-preview{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:13px;background:var(--panel-2)}.dt-preview[hidden]{display:none}.dt-preview img,.dt-preview object{display:block;width:100%;max-height:360px;min-height:140px;object-fit:contain;background:#0a0f16}.dt-preview>div{display:flex;align-items:center;gap:9px;padding:9px 11px}.dt-preview>div strong{overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.dt-preview>div small{color:var(--muted);font-size:9px;white-space:nowrap}.dt-preview>div button{display:grid;width:29px;height:29px;place-items:center;margin-left:auto;border:1px solid var(--border);border-radius:9px;background:var(--panel);color:var(--ink);font-size:17px;cursor:pointer}.dt-consent{display:flex;align-items:flex-start;gap:9px;padding:9px 2px;cursor:pointer}.dt-consent input,.dt-confirm-check input{width:16px;height:16px;flex:none;margin:2px 0 0;accent-color:var(--dt-green)}.dt-consent span{display:grid;gap:3px}.dt-consent strong{font-size:10px}.dt-consent small{color:var(--muted);font-size:9px;line-height:1.45}.dt-analyze-button,.dt-confirm-button{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:45px;padding:0 15px;border:1px solid color-mix(in srgb,var(--dt-green) 45%,var(--border));border-radius:12px;background:linear-gradient(100deg,#0c9c75,#22c895);color:#06241b;font:800 12px var(--font-display,system-ui);cursor:pointer;transition:filter .18s,transform .18s}.dt-analyze-button:not(:disabled):hover,.dt-confirm-button:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-1px)}.dt-analyze-button:disabled,.dt-confirm-button:disabled{opacity:.48;cursor:not-allowed}.dt-analyze-button b,.dt-confirm-button b{font-size:17px}.dt-analyze-button.is-loading span:before{display:inline-block;width:11px;height:11px;margin-right:8px;border:2px solid rgba(0,0,0,.2);border-top-color:#06241b;border-radius:50%;content:"";vertical-align:-2px;animation:dt-spin .7s linear infinite}@keyframes dt-spin{to{transform:rotate(360deg)}}.dt-status{min-height:15px;margin:0;color:var(--muted);font-size:10px;line-height:1.5}.dt-guide-card{position:sticky;top:14px;display:grid;gap:9px;background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--dt-blue) 10%,transparent),transparent 50%),var(--panel)}.dt-guide-icon{display:grid;width:40px;height:40px;place-items:center;margin-bottom:3px;border-radius:13px;background:color-mix(in srgb,var(--dt-blue) 14%,var(--panel-2));color:var(--dt-blue);font-size:25px}.dt-guide-card h3{margin:0;font:740 16px/1.25 var(--font-display,system-ui)}.dt-guide-card ul,.dt-ambiguities ul{display:grid;gap:8px;margin:2px 0;padding-left:18px;color:var(--muted);font-size:10px;line-height:1.55}.dt-guide-note{margin-top:5px;padding:11px;border:1px solid color-mix(in srgb,var(--dt-green) 24%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--dt-green) 6%,var(--panel-2))}.dt-guide-note strong{font-size:10px}.dt-guide-note p{margin:5px 0 0;color:var(--muted);font-size:9px;line-height:1.55}
.dt-analysis{display:grid;gap:14px;scroll-margin-top:12px}.dt-analysis[hidden],.dt-confirmed[hidden]{display:none}.dt-result-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.dt-confidence-badge{flex:none;padding:7px 9px;border:1px solid color-mix(in srgb,var(--dt-green) 32%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--dt-green) 9%,var(--panel-2));color:var(--dt-green);font-size:10px;font-weight:800}.dt-result-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,.75fr);gap:14px}.dt-result-main{display:grid;align-content:start;gap:12px}.dt-field-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.dt-field-row label,.dt-dimensions label{display:grid;gap:6px;color:var(--muted);font-size:10px;font-weight:700}.dt-field-row select,.dt-dimension-input input,.dt-dimension-input select{width:100%;min-width:0;min-height:37px;padding:0 9px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--ink);font:600 10px var(--font-display,system-ui)}.dt-review-section{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--border)}.dt-review-section h3,.dt-ambiguities h3{margin:0;font:740 12px var(--font-display,system-ui)}.dt-empty-hint{margin:0;color:var(--muted);font-size:10px;line-height:1.5}.dt-dimensions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.dt-dimensions label{padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}.dt-dimensions label>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}.dt-dimensions label small{font-weight:500}.dt-dimension-input{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:5px}.dt-confidence{color:var(--muted);font-size:9px;font-weight:500}.dt-chip-list{display:flex;flex-wrap:wrap;gap:6px}.dt-chip-list span{padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--muted);font-size:9px}.dt-feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}.dt-feature-list li{display:grid;gap:3px;padding:8px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2)}.dt-feature-list strong{font-size:9px}.dt-feature-list span{color:var(--muted);font-size:9px;line-height:1.4}.dt-ambiguities{display:flex;flex-direction:column;gap:10px;padding:13px;border:1px solid color-mix(in srgb,#f6ad55 27%,var(--border));border-radius:13px;background:color-mix(in srgb,#f6ad55 5%,var(--panel-2))}.dt-ambiguities>span{display:grid;width:26px;height:26px;place-items:center;border-radius:50%;background:color-mix(in srgb,#f6ad55 18%,var(--panel));color:#f6ad55;font-weight:900}.dt-ambiguities p{margin:0;color:var(--muted);font-size:10px;line-height:1.5}.dt-confirm-check{display:flex;align-items:flex-start;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--border);color:var(--muted);font-size:9px;line-height:1.45;cursor:pointer}.dt-confirm-button{min-height:40px;padding:0 11px;font-size:10px}.dt-confirmed{display:flex;align-items:flex-start;gap:13px;border-color:color-mix(in srgb,var(--dt-green) 35%,var(--border));background:color-mix(in srgb,var(--dt-green) 6%,var(--panel));scroll-margin-top:12px}.dt-confirmed-icon{display:grid;width:36px;height:36px;flex:none;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--dt-green) 20%,var(--panel));color:var(--dt-green);font-weight:900}.dt-confirmed small{display:block;margin-top:8px;color:var(--muted);font-size:9px;line-height:1.5}.dt-disclaimer{margin:0;padding:0 3px;color:var(--muted);font-size:9px;line-height:1.5}.sim-drawing-tutor-link{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;margin:15px 0;padding:14px 16px;border:1px solid color-mix(in srgb,#37e0a4 30%,var(--border));border-radius:15px;background:linear-gradient(110deg,color-mix(in srgb,#37e0a4 8%,var(--panel)),var(--panel-2));color:var(--ink);text-decoration:none;transition:transform .18s,border-color .18s}.sim-drawing-tutor-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,#37e0a4 60%,var(--border))}.sim-drawing-tutor-icon{display:grid;width:44px;height:44px;place-items:center;border-radius:14px;background:color-mix(in srgb,#37e0a4 16%,var(--panel));color:#37e0a4;font-size:26px}.sim-drawing-tutor-link>span:nth-child(2){display:grid;gap:3px;min-width:0}.sim-drawing-tutor-link small{color:#37e0a4;font:800 9px var(--font-mono,monospace);letter-spacing:.1em}.sim-drawing-tutor-link strong{font-size:13px}.sim-drawing-tutor-link em{overflow:hidden;color:var(--muted);font-size:10px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.sim-drawing-tutor-link>b{color:#37e0a4;font-size:10px;white-space:nowrap}
@media(max-width:760px){.dt-workspace{grid-template-columns:1fr}.dt-guide-card{position:static;grid-template-columns:40px minmax(0,1fr);column-gap:11px}.dt-guide-card>.dt-eyebrow,.dt-guide-card h3,.dt-guide-card ul,.dt-guide-note{grid-column:2}.dt-guide-card>.dt-guide-icon{grid-row:1/3}.dt-guide-card ul{margin-top:0}.dt-guide-note{grid-column:1/-1}.dt-result-grid{grid-template-columns:1fr}.dt-ambiguities{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start}.dt-ambiguities h3,.dt-ambiguities p,.dt-ambiguities ul,.dt-confirm-check,.dt-confirm-button{grid-column:2}.dt-ambiguities>span{grid-row:1/3}.dt-confirm-check{margin-top:0}.sim-drawing-tutor-link{grid-template-columns:42px minmax(0,1fr)}.sim-drawing-tutor-link>b{grid-column:2}.sim-drawing-tutor-icon{width:40px;height:40px}}
@media(max-width:480px){.drawing-tutor-page{gap:12px;padding-top:3px}.dt-hero{min-height:0;padding:19px;border-radius:17px}.dt-hero p{max-width:42ch;font-size:11px}.dt-hero-mark{flex-basis:54px;width:54px;height:54px;border-radius:17px}.dt-hero-mark svg{width:32px;height:32px}.dt-hero-chips{gap:5px;margin-top:12px}.dt-hero-chips span{padding:5px 7px;font-size:8px}.dt-steps{justify-content:flex-start;gap:6px;overflow-x:auto;padding:3px 2px;font-size:9px}.dt-steps i{width:22px;height:22px}.dt-steps>b{width:18px;flex:none}.dt-upload-column,.dt-guide-card,.dt-analysis,.dt-confirmed{padding:13px;border-radius:14px}.dt-section-heading h2,.dt-result-head h2,.dt-confirmed h2{font-size:17px}.dt-dropzone{min-height:145px;padding:14px}.dt-dropzone strong{font-size:10px}.dt-dropzone small{font-size:9px}.dt-field-row{grid-template-columns:1fr 1fr}.dt-field-row label:last-child{grid-column:1/-1}.dt-dimensions{grid-template-columns:1fr}.dt-result-head{flex-direction:column;gap:8px}.dt-confidence-badge{align-self:flex-start}.dt-feature-list{grid-template-columns:1fr}.dt-confirmed{gap:9px}.dt-confirmed p{font-size:10px}.sim-drawing-tutor-link em{white-space:normal}}
.announcement-card-action{display:inline-flex;align-items:center;gap:4px;margin-top:2px;color:var(--led-1);font-size:10px;font-weight:750}
.announcement-card-delete{grid-column:2;grid-row:1;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.announcement-card-delete:hover{border-color:color-mix(in srgb,#dc566d 24%,var(--border));background:color-mix(in srgb,#dc566d 9%,var(--panel));color:#c8485e}
.announcement-card-delete:disabled{opacity:.55;cursor:wait}.announcement-card-delete .qf-icon{width:15px;height:15px}

.points-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px 7px 12px;
}
.points-pill::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--led-1);
  box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.16);
}
.points-pill .pill-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--panel-2);
  transform-origin: 70% 90%;
}
.points-pill .uname {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.points-pill .pts {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--led-1);
}
.points-pill .pts::after { content: " PTS"; font-size: 9px; color: var(--muted); font-family: var(--font-mono); font-weight: 500; }

.icon-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 6px;
}
.icon-btn:hover { border-color: var(--warning); color: #A8720F; }

.signout-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.signout-btn:hover { border-color: var(--danger); color: var(--danger); }

.main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--led-1);
  box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.16);
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---------------- Course grid & cards ---------------- */

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .course-grid { grid-template-columns: 1fr; } }

.course-card {
  display: block;
  border: none;
  text-align: left;
  padding: 0;
  background: none;
  transition: transform 0.15s ease;
  animation: power-in 0.5s ease backwards;
}
.course-grid .course-card:nth-child(1) { animation-delay: 0.02s; }
.course-grid .course-card:nth-child(2) { animation-delay: 0.08s; }
.course-grid .course-card:nth-child(3) { animation-delay: 0.14s; }
.course-grid .course-card:nth-child(4) { animation-delay: 0.20s; }
.course-grid .course-card:nth-child(5) { animation-delay: 0.26s; }
.course-grid .course-card:nth-child(6) { animation-delay: 0.32s; }

.course-card:hover { transform: translateY(-3px); }
.course-card:hover .led-frame { animation-duration: 4s; box-shadow: 0 16px 34px -14px rgba(59, 111, 224, 0.45); }

.course-card-body { padding: 20px; }

.course-card .code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--card-color, var(--led-1));
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.course-card .code::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--card-color, var(--led-1));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-color, var(--led-1)) 18%, transparent);
}

.course-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  margin: 10px 0 16px;
  line-height: 1.3;
  color: var(--ink);
}

.course-card .counts {
  display: flex;
  gap: 14px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--muted);
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}
.course-card .counts span { display: flex; gap: 4px; align-items: center; }
.course-card .counts b { color: var(--ink); font-weight: 700; }

/* ---------------- Course detail ---------------- */

.course-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 10px;
}
.course-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  margin: 4px 0 0;
}
.course-header .code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--course-color, var(--led-1));
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.course-header .code::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--course-color, var(--led-1));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--course-color, var(--led-1)) 18%, transparent);
}

.full-quiz-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--row-color, var(--led-1));
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin-bottom: 28px;
}
.full-quiz-banner .label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.full-quiz-banner .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}
.full-quiz-banner .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.slide-list-heading {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--row-color, var(--led-1));
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  margin-bottom: 10px;
}
.item-row .info { min-width: 0; }
.item-row .title { font-weight: 600; font-size: 14px; }
.item-row .desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.item-row .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-2);
  margin-top: 6px;
}
.item-row .actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

.btn {
  font-size: 12px;
  padding: 9px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.btn:hover { border-color: var(--led-1); color: var(--led-1); }
.btn.primary {
  background: var(--action-strong);
  border-color: var(--action-strong);
  color: #fff;
}
.btn.primary:hover { background: var(--action-strong-hover); border-color: var(--action-strong-hover); color: #fff; }
.btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.btn.small { padding: 7px 11px; font-size: 11px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  background: var(--panel);
}
.empty-state .big {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  margin-bottom: 6px;
}

/* ---------------- Quiz taking ---------------- */

.quiz-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.quiz-score-live {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.quiz-score-live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.quiz-score-live.pos { color: var(--success); }
.quiz-score-live.neg { color: var(--danger); }
.quiz-score-live.zero { color: var(--muted); }

.quiz-q {
  padding: 26px;
  position: relative;
  overflow: visible;
}
.quiz-q .qtext {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 22px;
  line-height: 1.4;
}
.quiz-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 9px;
  cursor: pointer;
  font-size: 14px;
  transition: border-color 0.1s ease, background 0.1s ease;
}
.quiz-opt:hover { border-color: var(--muted-2); background: var(--panel-2); }
.quiz-opt.correct { border-color: var(--success); background: rgba(23,168,118,0.08); }
.quiz-opt.incorrect { border-color: var(--danger); background: rgba(229,72,77,0.08); }
.quiz-opt .letter {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-2);
  width: 20px;
}
.quiz-opt.correct .letter { color: var(--success); }
.quiz-opt.incorrect .letter { color: var(--danger); }
.quiz-answer-lottie {
  display: block;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin-left: auto;
}
.quiz-result-celebration {
  display: block;
  width: clamp(112px, 24vw, 164px);
  height: clamp(112px, 24vw, 164px);
  margin: -8px auto 4px;
}
.action-button-lottie {
  display: block;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
}
.btn:has(.action-button-lottie) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.action-button-lottie + span { text-align: left; }
.notification .icon:has(.install-success-lottie) { position: relative; width: 40px; height: 40px; margin-top: -7px; }
.install-success-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.install-success-lottie { position: relative; display: block; width: 40px; height: 40px; }

.quiz-nav {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}

/* Roast animation — floats up on a wrong answer */
.roast-float {
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
  z-index: 5;
  animation: roast-rise 1.6s ease-out forwards;
}
.roast-float .emojis { font-size: 26px; letter-spacing: 2px; white-space: nowrap; }
.roast-float .caption {
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--danger);
  white-space: nowrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
  box-shadow: 0 6px 16px -6px rgba(18,20,28,0.25);
}
@keyframes roast-rise {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.9); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1.02); }
}

.quiz-result {
  padding: 36px;
  text-align: center;
}
.result-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.result-badge.pass { color: var(--success); background: rgba(23,168,118,0.12); }
.result-badge.fail { color: var(--danger); background: rgba(229,72,77,0.12); }
.quiz-result .pct {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  margin: 6px 0 4px;
  color: var(--ink);
}
.quiz-result .pct-label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.quiz-result .breakdown {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 22px 0 6px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.quiz-result .breakdown .num { font-size: 20px; font-family: var(--font-display); font-weight: 700; display: block; }
.quiz-result .breakdown .correct .num { color: var(--success); }
.quiz-result .breakdown .wrong .num { color: var(--danger); }
.quiz-result .net-points {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.quiz-result .net-points b { font-family: var(--font-display); font-size: 16px; }
.quiz-result .net-points b.pos { color: var(--success); }
.quiz-result .net-points b.neg { color: var(--danger); }

/* ---------------- Leaderboard ---------------- */

.leaderboard-row, .leaderboard-row .led-frame-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.leaderboard-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 8px;
  animation: power-in 0.4s ease backwards;
}
.leaderboard-row.me { border-color: var(--led-1); }
.leaderboard-row .rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  width: 34px;
  color: var(--muted);
  flex-shrink: 0;
}
.leaderboard-row:nth-child(1) .rank { color: var(--warning); }
.leaderboard-row:nth-child(2) .rank { color: #9AA2B5; }
.leaderboard-row:nth-child(3) .rank { color: #C08A52; }
.leaderboard-row .name { flex: 1; font-weight: 600; font-size: 14px; }
.leaderboard-row .score { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--led-1); }
.leaderboard-row.top1 { padding: 0; border: none; background: transparent; }
.leaderboard-row.top1 .led-frame-inner {
  padding: 14px 18px;
}
.leaderboard-row.top1 .rank::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(242,169,59,0.2);
  margin-right: 6px;
}

/* ---- avatars: circular, smiling (via DiceBear mood param in JS),
   and a periodic little hand-wave so the leaderboard feels alive.
   The wave keyframe sits still for most of the cycle and only
   wiggles briefly, so it reads as a wave rather than a nervous
   twitch. Rows are staggered so avatars don't all wave in sync. ---- */
.lb-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  transform-origin: 70% 90%;
  animation: avatar-wave 5s ease-in-out infinite;
}
.lb-avatar-top {
  border: 2px solid var(--row-color, var(--warning));
}
.leaderboard-row:nth-child(3n+1) .lb-avatar { animation-delay: 0s; }
.leaderboard-row:nth-child(3n+2) .lb-avatar { animation-delay: 0.6s; }
.leaderboard-row:nth-child(3n+3) .lb-avatar { animation-delay: 1.2s; }

@keyframes avatar-wave {
  0%, 55%, 100% { transform: rotate(0deg); }
  60% { transform: rotate(-14deg); }
  67% { transform: rotate(12deg); }
  74% { transform: rotate(-10deg); }
  81% { transform: rotate(6deg); }
  88%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lb-avatar, .avatar-preview.rolling { animation: none !important; }
}

/* ---------------- Modal (admin add forms) ---------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 20, 28, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }

.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--radius);
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 26px;
  position: relative;
  box-shadow: 0 30px 80px -30px rgba(18, 20, 28, 0.35);
}
.modal::before {
  content: "";
  position: sticky;
  top: -26px;
  display: block;
  margin: -26px -26px 22px;
  height: 4px;
  background: linear-gradient(90deg, var(--led-1), var(--led-2), var(--led-3), var(--led-4), var(--led-5), var(--led-6), var(--led-1));
  background-size: 200% 100%;
  animation: led-flow-x 6s linear infinite;
}
.modal h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 18px;
}
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="url"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--panel-2);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--led-1);
  background: var(--panel);
}
.field textarea { resize: vertical; min-height: 90px; font-family: var(--font-mono); font-size: 13px; }
.field .hint { font-size: 11px; color: var(--muted-2); margin-top: 6px; line-height: 1.5; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 0;
  text-decoration: underline;
}

.loading-line {
  text-align: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 40px 0;
}

/* Shared dotLottie treatment for pages waiting on remote or local data. */
.loading-line.has-lottie-loading,
.pdf-loading.has-lottie-loading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 176px;
  padding: 20px;
  text-align: center;
}
.pdf-loading.has-lottie-loading { min-height: 210px; padding: 30px 20px; }
.quickfix-loading-animation {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto;
  opacity: 0;
  transition: opacity .18s ease;
}
.has-lottie-loading.is-ready .quickfix-loading-animation { opacity: 1; }
.has-lottie-loading.is-fallback .quickfix-loading-animation { display: none; }
.quickfix-loading-message {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font: 500 12px/1.45 var(--font-mono);
}
.has-lottie-loading.is-pending::before,
.has-lottie-loading.is-fallback::before {
  content: "";
  position: absolute;
  top: calc(50% - 38px);
  left: calc(50% - 17px);
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--led-1) 18%, transparent);
  border-top-color: var(--led-1);
  border-radius: 50%;
}
.has-lottie-loading.is-pending::before { animation: spin .8s linear infinite; }
.has-lottie-loading.is-ready::before { display: none; }
.sim-maintenance-loader {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--ink);
  text-align: center;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(5px);
}
.sim-maintenance-loader[hidden] { display: none; }
.sim-maintenance-loader canvas {
  display: block;
  width: 144px;
  height: 144px;
  opacity: 0;
  transition: opacity .18s ease;
}
.sim-maintenance-loader span {
  font: 600 13px/1.45 var(--font-mono);
  color: var(--muted);
}
.sim-maintenance-loader::before {
  content: "";
  position: absolute;
  top: calc(50% - 48px);
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border: 3px solid color-mix(in srgb, var(--led-1) 18%, transparent);
  border-top-color: var(--led-1);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.sim-maintenance-loader:not(.is-fallback) canvas { position: relative; z-index: 1; }
.sim-maintenance-loader:not(.is-fallback) span { position: relative; z-index: 1; }
.sim-maintenance-loader.is-fallback canvas { display: none; }
.sim-maintenance-loader.is-fallback::before { top: calc(50% - 24px); }
.sim-maintenance-loader.is-fallback span { margin-top: 28px; }
.sim-maintenance-loader.is-ready canvas { opacity: 1; }
.sim-maintenance-loader.is-ready::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sim-maintenance-loader::before { animation: none; }
}
.arduino-lab-frame-wrap,
.circuit-frame-wrap { position: relative; }
.home-study-loading.quickfix-inline-loading {
  position: relative;
  display: block;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 0;
  animation: none;
}
.home-study-loading.quickfix-inline-loading .quickfix-loading-animation {
  width: 52px;
  height: 52px;
  margin: 0;
}
.home-study-loading.quickfix-inline-loading.is-pending::before,
.home-study-loading.quickfix-inline-loading.is-fallback::before {
  top: 15px;
  left: 15px;
  width: 16px;
  height: 16px;
  border-width: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .quickfix-loading-animation { transition: none; }
  .has-lottie-loading.is-pending::before { animation: none; }
}

.parse-summary {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--success);
  margin-top: 10px;
  display: none;
}
.parse-error {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--danger);
  margin-top: 10px;
  display: none;
  white-space: pre-wrap;
}
/* ==================== PDF Viewer ==================== */

.pdf-viewer-container {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 16px;
  position: relative;
}

.pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.pdf-toolbar .page-info {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0 8px;
}

.pdf-toolbar .zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.pdf-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, var(--led-1));
  border-radius: 11px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--panel-2) 90%, var(--led-1)), var(--panel));
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.06);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.pdf-toolbar button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--led-1) 68%, var(--border));
  box-shadow: 0 7px 16px color-mix(in srgb, var(--led-1) 16%, transparent), inset 0 1px rgba(255,255,255,.08);
}
.pdf-toolbar button:focus-visible { outline: 2px solid var(--led-1); outline-offset: 2px; }
.pdf-toolbar button:disabled { opacity: .42; cursor: not-allowed; }
.pdf-toolbar .pdf-tool-primary,
.pdf-toolbar .pdf-summary-action {
  border-color: color-mix(in srgb, var(--led-1) 72%, transparent);
  background: linear-gradient(135deg, var(--action-strong), color-mix(in srgb, var(--action-strong) 74%, var(--led-1)));
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--led-1) 22%, transparent), inset 0 1px rgba(255,255,255,.18);
}
.pdf-toolbar .pdf-tool-primary:hover:not(:disabled),
.pdf-toolbar .pdf-summary-action:hover:not(:disabled) {
  border-color: var(--action-strong-hover);
  background: linear-gradient(135deg, var(--action-strong-hover), var(--action-strong));
  color: #fff;
}
.pdf-toolbar .pdf-summary-saved-action { min-height: 38px; }

.pdf-toolbar .pdf-summary-action {
  min-height: 38px;
  padding-inline: 14px;
}

.slide-summary-panel[hidden],
.slide-summary-saved-list[hidden] { display: none !important; }
.slide-summary-panel {
  margin-top: 14px;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid color-mix(in srgb, var(--led-1) 32%, var(--border));
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, var(--led-1)), var(--panel));
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
}
.slide-summary-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.slide-summary-kicker { color:var(--led-1); font:800 10px/1.4 var(--font-mono); letter-spacing:.12em; }
.slide-summary-head h2 { margin:5px 0 4px; color:var(--ink); font-size:clamp(19px,2vw,24px); }
.slide-summary-head p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.slide-summary-close { display:grid; width:40px; height:40px; flex:0 0 auto; place-items:center; border:1px solid var(--border); border-radius:12px; background:var(--panel-2); color:var(--ink); font-size:23px; cursor:pointer; }
.slide-summary-controls { display:grid; grid-template-columns:minmax(180px,1.5fr) repeat(2,minmax(90px,.55fr)) auto auto; align-items:end; gap:10px; margin-top:18px; }
.slide-summary-controls label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.slide-summary-controls select,.slide-summary-controls input { width:100%; min-width:0; height:42px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); color:var(--ink); font:inherit; }
.slide-summary-controls .btn { min-height:42px; white-space:nowrap; }
.slide-summary-quota { margin:12px 0 0; color:var(--muted); font-size:12px; }
.slide-summary-result { margin-top:12px; }
.slide-summary-result-card { padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--panel-2); }
.slide-summary-result-meta { margin:0 0 10px; color:var(--led-1); font-size:11px; font-weight:750; }
.slide-summary-result-text { margin:0; color:var(--ink); font-family:var(--font-body); font-size:14px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.slide-summary-saved-list { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.slide-summary-saved-list h3 { margin:0 0 10px; font-size:15px; }
.slide-summary-list-status { color:var(--muted); font-size:13px; }
.slide-summary-list-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:9px; }
.slide-summary-saved-item { display:grid; grid-template-columns:minmax(0,1fr) 36px; gap:8px; align-items:center; min-width:0; padding:8px; border:1px solid var(--border); border-radius:12px; background:var(--panel-2); }
.slide-summary-saved-open { display:grid; gap:4px; min-width:0; padding:5px; border:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.slide-summary-saved-open strong,.slide-summary-saved-open span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slide-summary-saved-open strong { font-size:13px; }
.slide-summary-saved-open span,.slide-summary-saved-open small { color:var(--muted); font-size:11px; }
.slide-summary-delete { width:34px; height:34px; border:1px solid var(--border); border-radius:9px; background:var(--panel); color:var(--muted); font-size:19px; cursor:pointer; }
.slide-summary-delete:hover { border-color:var(--danger); color:var(--danger); }

.pdf-canvas-wrapper {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #e8eaed;
  min-height: 400px;
  max-height: 80vh;
  overflow: auto;
}

.pdf-canvas-wrapper canvas {
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  max-width: 100%;
  height: auto !important;
  width: auto !important;
  display: block;
  background: white;
}

.pdf-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--muted);
  gap: 12px;
}

.pdf-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--led-1);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.pdf-error {
  padding: 40px;
  text-align: center;
  color: var(--danger);
}

.pdf-error .icon {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
}
/* ==================== Video Player ==================== */

.video-container {
  margin-top: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 20px;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* If you want videos to appear in a list/grid under slides */
.video-section-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.video-section-label::before {
  content: "▶";
  color: var(--led-3);
  font-size: 10px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.video-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.12);
}

.video-card .thumbnail {
  position: relative;
  padding-bottom: 56.25%;
  background: #000;
  overflow: hidden;
}

.video-card .thumbnail iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none; /* Prevent interaction with thumbnails */
}

.video-card .info {
  padding: 12px 16px;
}

.video-card .info .title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}

.video-card .info .desc {
  font-size: 12px;
  color: var(--muted);
}

.video-card .watch-btn {
  width: 100%;
  border: none;
  border-top: 1px solid var(--border);
  padding: 10px;
  background: var(--panel-2);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  transition: background 0.12s ease;
}

.video-card .watch-btn:hover {
  background: var(--led-1);
  color: white;
}
/* ==================== Praise Animation ==================== */

.roast-float.praise .emojis {
  font-size: 28px;
  letter-spacing: 3px;
  white-space: nowrap;
}

.roast-float.praise .caption {
  background: var(--success);
  color: white !important;
  border: none;
  font-weight: 700;
  font-size: 18px;
  padding: 6px 18px;
}

/* Override the default roast caption for praise */
.praise-caption {
  background: var(--success) !important;
  color: white !important;
  border: none !important;
  font-weight: 700;
  font-size: 18px;
}

/* Make the positive animation slightly different */
.roast-float.praise {
  animation: praise-rise 1.6s ease-out forwards;
}

@keyframes praise-rise {
  0% { 
    opacity: 0; 
    transform: translate(-50%, 10px) scale(0.8); 
  }
  15% { 
    opacity: 1; 
    transform: translate(-50%, 0) scale(1.1); 
  }
  30% { 
    transform: translate(-50%, 0) scale(1); 
  }
  75% { 
    opacity: 1; 
  }
  100% { 
    opacity: 0; 
    transform: translate(-50%, -80px) scale(1.05); 
  }
}
/* ==================== Circular Timer ==================== */

.quiz-timer-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--panel-2);
  border-radius: 999px;
  padding: 4px 16px 4px 4px;
  border: 1px solid var(--border);
}

.quiz-timer-container .timer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.timer-circle {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.timer-circle svg {
  transform: rotate(-90deg);
  width: 44px;
  height: 44px;
}

.timer-circle .bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 4;
}

.timer-circle .progress {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease, stroke 0.5s ease;
}

.timer-circle .center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

/* Timer color states */
.timer-circle .progress.good {
  stroke: var(--success);
}

.timer-circle .progress.warning {
  stroke: var(--warning);
  animation: pulse-stroke 1s ease-in-out infinite;
}

.timer-circle .progress.critical {
  stroke: var(--danger);
  animation: pulse-stroke 0.5s ease-in-out infinite;
}

@keyframes pulse-stroke {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Timer glow effect */
.timer-circle .progress.good {
  filter: drop-shadow(0 0 6px rgba(23, 168, 118, 0.3));
}

.timer-circle .progress.warning {
  filter: drop-shadow(0 0 8px rgba(242, 169, 59, 0.4));
}

.timer-circle .progress.critical {
  filter: drop-shadow(0 0 12px rgba(229, 72, 77, 0.5));
}

/* Timer text color changes */
.timer-circle .center-text.warning-text {
  color: var(--warning);
}

.timer-circle .center-text.critical-text {
  color: var(--danger);
  animation: pulse-text 0.5s ease-in-out infinite;
}

@keyframes pulse-text {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.95); }
}

/* Timer pulse ring effect */
.timer-circle .pulse-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
  animation: pulse-ring 1.5s ease-out infinite;
}

.timer-circle .pulse-ring.active {
  border-color: var(--led-1);
  opacity: 0.3;
}

.timer-circle .pulse-ring.warning-ring {
  border-color: var(--warning);
  animation-duration: 1s;
}

.timer-circle .pulse-ring.critical-ring {
  border-color: var(--danger);
  animation-duration: 0.5s;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Timer container in quiz top line */
.quiz-topline .quiz-timer-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--border);
}

.quiz-topline .quiz-timer-wrapper .timer-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Responsive timer */
@media (max-width: 600px) {
  .timer-circle {
    width: 36px;
    height: 36px;
  }
  .timer-circle svg {
    width: 36px;
    height: 36px;
  }
  .timer-circle .center-text {
    font-size: 11px;
  }
  .quiz-topline .quiz-timer-wrapper {
    padding: 2px 8px 2px 2px;
  }
  .quiz-topline .quiz-timer-wrapper .timer-label {
    font-size: 8px;
  }
  .timer-circle .pulse-ring {
    width: 44px;
    height: 44px;
    top: -4px;
    left: -4px;
  }
}
/* ==================== Question Images ==================== */

.question-image {
  margin: 0 0 16px 0;
  text-align: center;
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 12px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.question-image img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  object-fit: contain;
  background: white;
  display: block;
  margin: 0 auto;
  transition: transform 0.2s ease;
}

.question-image img:hover {
  transform: scale(1.02);
}

/* Optional: Add a zoom button for larger images */
.question-image .zoom-hint {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 10px;
  color: var(--muted-2);
  background: rgba(255,255,255,0.8);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.question-image:hover .zoom-hint {
  opacity: 1;
}

/* Image loading state */
.question-image img.loading {
  opacity: 0.5;
  min-height: 100px;
  background: var(--panel-2);
}

.question-image img.loaded {
  opacity: 1;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .question-image img {
    max-height: 200px;
  }
  .question-image {
    padding: 8px;
  }
}
/* ==================== Quiz Review Screen ==================== */

.review-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.review-tab {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  transition: transform 0.1s ease;
}
.review-tab:hover { transform: translateY(-1px); }

.review-tab.correct { border-color: var(--success); color: var(--success); }
.review-tab.incorrect { border-color: var(--danger); color: var(--danger); }

.review-tab.active {
  background: var(--action-strong);
  color: #fff;
  border-color: var(--action-strong);
}
.review-tab.correct.active { background: var(--success); border-color: var(--success); }
.review-tab.incorrect.active { background: var(--danger); border-color: var(--danger); }

/* Review options behave like the quiz options visually, but aren't
   clickable — no hover state, no cursor change, answers are fixed. */
.quiz-opt.review-opt {
  cursor: default;
}
.quiz-opt.review-opt:hover {
  border-color: var(--border);
  background: none;
}
.quiz-opt.review-opt.correct:hover { border-color: var(--success); }
.quiz-opt.review-opt.incorrect:hover { border-color: var(--danger); }

.review-tag {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  margin-top: 3px;
  opacity: 0.7;
}
/* ==================== Multiplayer ==================== */

.multiplayer-lobby {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.multiplayer-lobby .room-code {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  background: var(--panel-2);
  padding: 16px;
  border-radius: var(--radius-sm);
  letter-spacing: 8px;
  color: var(--led-1);
  border: 2px dashed var(--border);
}

.multiplayer-lobby .player-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.multiplayer-lobby .player-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.multiplayer-lobby .player-item .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--panel-2);
}

.multiplayer-lobby .player-item .name {
  flex: 1;
  font-weight: 500;
}

.multiplayer-lobby .player-item .badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--led-1);
  color: white;
}

.multiplayer-lobby .player-item .kick-btn {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
}

/* Progress Line */
.multiplayer-progress {
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  overflow-x: auto;
}

.multiplayer-progress .track {
  position: relative;
  height: 48px;
  background: var(--border);
  border-radius: 999px;
  min-width: 200px;
}

.multiplayer-progress .track .player-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: left 0.5s ease;
}

.multiplayer-progress .track .player-marker .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.multiplayer-progress .track .player-marker .name {
  font-size: 8px;
  white-space: nowrap;
  margin-top: 2px;
  color: var(--muted);
}

/* Podium */
.podium-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  padding: 32px 16px 16px;
  min-height: 300px;
}

.podium-container .podium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.podium-container .podium-item .podium {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: var(--panel-2);
  border-radius: 8px 8px 0 0;
  padding: 12px 8px 8px;
  border: 1px solid var(--border);
  border-bottom: none;
  transition: height 0.5s ease;
}

.podium-container .podium-item .podium.gold {
  background: linear-gradient(180deg, #FFD700, #F2A93B);
  height: 180px;
  width: 90px;
}

.podium-container .podium-item .podium.silver {
  background: linear-gradient(180deg, #C0C0C0, #9AA2B5);
  height: 140px;
  width: 80px;
}

.podium-container .podium-item .podium.bronze {
  background: linear-gradient(180deg, #CD7F32, #C08A52);
  height: 100px;
  width: 80px;
}

.podium-container .podium-item .podium .rank {
  font-size: 20px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.podium-container .podium-item .podium .score {
  font-size: 14px;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.podium-container .podium-item .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.podium-container .podium-item .name {
  font-weight: 600;
  font-size: 12px;
  text-align: center;
}

/* Floating players (non-podium) */
.floating-players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  margin-top: 16px;
  border-top: 1px solid var(--border);
}

.floating-players .float-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--panel);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.floating-players .float-item .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.floating-players .float-item .name {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}

/* Countdown overlay */
.countdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 20, 28, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.countdown-overlay .number {
  font-family: var(--font-display);
  font-size: 120px;
  font-weight: 800;
  color: white;
  animation: countdown-pulse 1s ease-in-out;
}

.countdown-overlay .label {
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--muted-2);
  margin-top: 16px;
}

@keyframes countdown-pulse {
  0% { transform: scale(1.5); opacity: 0; }
  50% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}

/* Multiplayer toast notification */
.multiplayer-toast {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 500;
  animation: toast-rise 2s ease-out forwards;
  display: flex;
  align-items: center;
  gap: 12px;
}

.multiplayer-toast .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.multiplayer-toast .message {
  font-size: 14px;
  font-weight: 500;
}

.multiplayer-toast .message .highlight {
  color: var(--led-1);
  font-weight: 700;
}

@keyframes toast-rise {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(0.9); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(0.95); }
}
/* ==================== Multiplayer Pages (Full View) ==================== */

.multiplayer-host-form,
.multiplayer-join-form {
  max-width: 600px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

.join-scan-trigger { display: block; width: 100%; margin-top: 10px; }
.join-qr-feedback { min-height: 1.35em; margin: 9px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.join-qr-dialog { width: min(92vw, 480px); max-width: 480px; max-height: min(92dvh, 760px); padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: 22px; color: var(--ink); background: var(--panel); box-shadow: 0 24px 80px rgba(10, 15, 30, .28); }
.join-qr-dialog::backdrop { background: rgba(12, 17, 30, .68); backdrop-filter: blur(5px); }
.join-qr-dialog-card { padding: clamp(18px, 4vw, 26px); }
.join-qr-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.join-qr-dialog-head h2 { margin: 5px 0 0; font-size: clamp(1.25rem, 4vw, 1.6rem); }
.join-qr-close { display: grid; flex: none; place-items: center; width: 42px; height: 42px; padding: 0; font-size: 1.5rem; line-height: 1; }
.join-qr-instructions { margin: 12px 0 16px; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.join-qr-video-frame { position: relative; display: grid; place-items: center; min-height: 230px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: #10131b; }
.join-qr-video-frame video { display: block; width: 100%; max-height: min(52dvh, 420px); aspect-ratio: 4 / 3; object-fit: cover; }
.join-qr-guide { position: absolute; width: min(62vw, 230px); aspect-ratio: 1; border: 3px solid #fff; border-radius: 22px; box-shadow: 0 0 0 999px rgba(0,0,0,.12); pointer-events: none; }
.join-qr-guide::after { position: absolute; right: 9%; left: 9%; top: 50%; height: 2px; background: #31d2a0; box-shadow: 0 0 12px rgba(49,210,160,.8); content: ""; animation: join-qr-scan 2s ease-in-out infinite alternate; }
.join-qr-status { min-height: 2.8em; margin: 13px 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.join-qr-cancel { width: 100%; min-height: 46px; }
@keyframes join-qr-scan { from { transform: translateY(-42px); } to { transform: translateY(42px); } }

.multiplayer-host-form .field-row {
  display: flex;
  gap: 16px;
}

.multiplayer-host-form .field-row .field {
  flex: 1;
}

/* Room page */
.multiplayer-room {
  max-width: 800px;
  margin: 0 auto;
}

.multiplayer-room .room-code-display {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  background: var(--panel-2);
  padding: 20px;
  border-radius: var(--radius-sm);
  letter-spacing: 10px;
  color: var(--led-1);
  border: 2px dashed var(--border);
  margin-bottom: 16px;
}

.multiplayer-room .room-code-display .copy-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 8px;
  transition: background 0.2s;
}

.multiplayer-room .room-code-display .copy-btn:hover {
  background: var(--panel-2);
}

.multiplayer-room .player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.multiplayer-room .player-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s;
}

.multiplayer-room .player-card .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.multiplayer-room .player-card .name {
  flex: 1;
  font-weight: 500;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multiplayer-room .player-card .badge-host {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--led-1);
  color: white;
  flex-shrink: 0;
}

.multiplayer-room .player-card .kick-btn {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}

.multiplayer-room .room-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 600px) {
  .multiplayer-host-form .field-row {
    flex-direction: column;
    gap: 0;
  }
  
  .multiplayer-room .room-code-display {
    font-size: 24px;
    letter-spacing: 6px;
    padding: 16px;
  }
  
  .multiplayer-room .player-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  
  .multiplayer-room .player-card {
    padding: 8px 10px;
  }
}
/* ==================== In-App Notifications ==================== */

.notification-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  width: 100%;
  pointer-events: none;
}

.notification {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  animation: notif-slide-in 0.3s ease-out forwards;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.notification::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.notification.success::before {
  background: var(--success);
}

.notification.error::before {
  background: var(--danger);
}

.notification.warning::before {
  background: var(--warning);
}

.notification.info::before {
  background: var(--led-1);
}

.notification .icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.notification .content {
  flex: 1;
  min-width: 0;
}

.notification .content .title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}

.notification .content .message {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  word-wrap: break-word;
}

.notification .close-btn {
  background: none;
  border: none;
  color: var(--muted-2);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.2s;
}

.notification .close-btn:hover {
  color: var(--ink);
}

.notification .progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--led-1);
  border-radius: 0 0 0 4px;
  animation: notif-progress 3s linear forwards;
}

.notification.success .progress-bar {
  background: var(--success);
}

.notification.error .progress-bar {
  background: var(--danger);
}

.notification.warning .progress-bar {
  background: var(--warning);
}

@keyframes notif-slide-in {
  0% {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes notif-slide-out {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }
}

@keyframes notif-progress {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

.notification.hiding {
  animation: notif-slide-out 0.25s ease-in forwards;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .notification-container {
    top: 70px;
    right: 10px;
    left: 10px;
    max-width: none;
    width: auto;
  }
  
  .notification {
    padding: 14px 16px;
  }
  
  .notification .content .title {
    font-size: 13px;
  }
  
  .notification .content .message {
    font-size: 12px;
  }
}
/* ==================== Music Controls ==================== */

.music-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  font-size: 12px;
  color: var(--muted);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  user-select: none;
}

.music-indicator.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.music-indicator .icon {
  font-size: 14px;
}

.music-indicator .status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.music-indicator .status.playing {
  color: var(--success);
}

.music-indicator .status.muted {
  color: var(--muted-2);
}

.music-indicator .track-name {
  font-size: 10px;
  color: var(--muted-2);
  font-family: var(--font-mono);
  background: var(--panel-2);
  padding: 2px 8px;
  border-radius: 999px;
  opacity: 0.7;
}

/* ============================================================
   RACE MODE — append to style.css
   ============================================================ */

.field-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.field-row .field { flex: 1; min-width: 160px; }

/* ============================================================
   SPEED RACE — Live Stage + Bottom Sheet (circular track)
   Game world owns the majority of the screen.
   Question lives in a sliding bottom sheet (Mavis Beacon style).
   ============================================================ */

.race-screen {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 56px);
  max-height: 100dvh;
  overflow: hidden;
  position: relative;
  background: radial-gradient(ellipse at 50% 40%, #12141c 0%, #0a0b10 70%);
}

/* Tiny top HUD */
.race-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 4px;
  flex-shrink: 0;
  z-index: 10;
}
.race-hud-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.race-hud-title {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.race-hud-meta {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono, monospace);
}
.race-hud-stats {
  display: flex;
  gap: 8px;
  align-items: center;
}
.race-stat-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.race-stat-pill.streak {
  border-color: rgba(255, 107, 77, 0.45);
  background: rgba(255, 107, 77, 0.12);
  color: #ff8f6b;
}
.race-stat-pill.progress {
  border-color: rgba(51, 225, 255, 0.35);
  background: rgba(51, 225, 255, 0.1);
  color: #33e1ff;
}

/* ---- Main stage (majority of screen) ---- */
.race-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 4px 8px 12px;
}

/* Circular / oval circuit */
.race-circuit {
  position: relative;
  width: min(94vw, 520px);
  aspect-ratio: 1.28 / 1;
  max-height: 100%;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.55));
}

/* Outer glow ring */
.track-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50% / 47%;
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(51, 225, 255, 0.15),
    0 0 28px 4px rgba(51, 225, 255, 0.12),
    inset 0 0 40px rgba(0,0,0,0.4);
  pointer-events: none;
}

/* The road surface */
.track-road {
  position: absolute;
  inset: 0;
  border-radius: 50% / 47%;
  background:
    radial-gradient(ellipse at 50% 50%, #2a2e38 0%, #1a1d26 55%, #12141c 100%);
  border: 3px solid #3a4150;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 0 30px rgba(0,0,0,0.5);
  overflow: hidden;
}

/* Subtle asphalt noise via repeating gradient */
.track-road::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg 3deg,
    rgba(255,255,255,0.015) 3deg 4deg
  );
  opacity: 0.7;
  pointer-events: none;
}

/* Inner edge of the track (curb) */
.track-inner-edge {
  position: absolute;
  inset: 19% 15%;
  border-radius: 50% / 47%;
  border: 2px solid #4a5568;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    inset 0 0 20px rgba(0,0,0,0.35);
  pointer-events: none;
}

/* Infield (center of the oval) */
.track-infield {
  position: absolute;
  inset: 22% 18%;
  border-radius: 50% / 47%;
  background:
    radial-gradient(ellipse at 50% 40%, #161a22 0%, #0d0f14 80%);
  border: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 2;
  overflow: hidden;
}
.track-infield-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
}
.track-infield-lap {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: #33e1ff;
  text-shadow: 0 0 18px rgba(51, 225, 255, 0.45);
  line-height: 1;
}
.track-infield-sub {
  font-size: 10px;
  color: var(--muted);
}

/* Start / finish checkered marker (top of oval) */
.track-finish {
  position: absolute;
  top: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 22px;
  background:
    linear-gradient(45deg, #fff 25%, transparent 25%),
    linear-gradient(-45deg, #fff 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #fff 75%),
    linear-gradient(-45deg, transparent 75%, #fff 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-color: #111;
  border-radius: 2px;
  z-index: 3;
  box-shadow: 0 0 10px rgba(255,255,255,0.25);
  opacity: 0.9;
}
.track-finish-flag {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Cars layer */
.cars-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Individual car + floating head */
.race-car-wrap {
  position: absolute;
  width: 64px;
  height: 72px;
  /* left/top set inline in pixels from circuit top-left.
     Negative margins center the box on that point. */
  margin-left: -32px;
  margin-top: -36px;
  transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              top  0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: left, top;
  z-index: 6;
  pointer-events: none;
}
.race-car-wrap.is-me {
  z-index: 8;
}

.race-car-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* Floating avatar head */
.race-car-head {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--car-color, #33e1ff);
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.45),
    0 0 12px var(--car-color, #33e1ff);
  object-fit: cover;
  background: #1a1d26;
  flex-shrink: 0;
}
.race-car-wrap.is-me .race-car-head {
  width: 32px;
  height: 32px;
  border-width: 2.5px;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.5),
    0 0 16px var(--car-color),
    0 0 28px rgba(51, 225, 255, 0.35);
}

/* Car body */
.race-car-body {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
  transition: filter 0.3s ease;
}
.race-car-wrap.is-me .race-car-body {
  font-size: 26px;
  filter: drop-shadow(0 0 10px var(--car-color));
}

/* Name label under the car */
.race-car-name {
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,0.65);
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(255,255,255,0.12);
  margin-top: 1px;
}
.race-car-wrap.is-me .race-car-name {
  background: color-mix(in srgb, var(--car-color) 35%, #000);
  border-color: var(--car-color);
  font-size: 10px;
}

/* Nitro / streak trail (optional visual) */
.race-car-wrap.has-nitro .race-car-body {
  filter: drop-shadow(0 0 12px var(--car-color)) drop-shadow(0 0 4px #fff);
}

/* ---- Bottom question sheet ---- */
.question-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--panel);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 40px rgba(0,0,0,0.45);
  transform: translateY(105%);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 46%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.question-sheet.is-open {
  transform: translateY(0);
}
.question-sheet.is-collapsed {
  transform: translateY(calc(100% - 44px));
}

.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  margin: 10px auto 6px;
  flex-shrink: 0;
}

.sheet-body {
  padding: 4px 16px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
}

.sheet-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}

.sheet-qtext {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 12px;
  color: var(--ink);
}

.sheet-qimage {
  margin-bottom: 10px;
}
.sheet-qimage img {
  max-height: 100px;
  width: auto;
  border-radius: 10px;
  display: block;
  max-width: 100%;
}

.sheet-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sheet-opts .quiz-opt {
  padding: 11px 12px;
  font-size: 13px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sheet-opts .quiz-opt .letter {
  flex-shrink: 0;
}

.race-opt.correct {
  border-color: var(--success) !important;
  background: rgba(57, 255, 136, 0.1) !important;
}
.race-opt.incorrect {
  border-color: var(--danger) !important;
  background: rgba(229, 72, 77, 0.1) !important;
}

.sheet-finished {
  text-align: center;
  padding: 18px 12px;
  font-weight: 600;
  color: var(--success);
}

/* Mobile refinements */
@media (max-width: 640px) {
  .race-screen {
    height: calc(100dvh - 52px);
  }
  .race-circuit {
    width: min(96vw, 420px);
  }
  .race-car-head {
    width: 24px;
    height: 24px;
  }
  .race-car-wrap.is-me .race-car-head {
    width: 28px;
    height: 28px;
  }
  .race-car-body {
    font-size: 18px;
  }
  .race-car-wrap.is-me .race-car-body {
    font-size: 22px;
  }
  .race-car-name {
    font-size: 8px;
    max-width: 60px;
  }
  .question-sheet {
    max-height: 48%;
  }
  .sheet-qtext {
    font-size: 14px;
  }
  .sheet-opts {
    gap: 7px;
  }
  .sheet-opts .quiz-opt {
    padding: 10px 10px;
    font-size: 12.5px;
  }
}

/* Slightly taller phones / desktop */
@media (min-width: 700px) {
  .race-circuit {
    width: min(90vw, 560px);
  }
  .question-sheet {
    max-height: 42%;
    left: 50%;
    right: auto;
    width: min(520px, 94vw);
    transform: translate(-50%, 105%);
    border-radius: 20px 20px 12px 12px;
    margin-bottom: 10px;
  }
  .question-sheet.is-open {
    transform: translate(-50%, 0);
  }
}
/* ============================================================
   SUMMIT CLIMB — Live Stage + Bottom Sheet
   ============================================================ */

.summit-screen {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 56px);
  max-height: 100dvh;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(180deg, #0b1220 0%, #12182a 40%, #1a2238 100%);
}

.summit-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 4px;
  flex-shrink: 0;
  z-index: 10;
}
.summit-hud-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.summit-hud-title {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.summit-hud-meta {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono, monospace);
}
.summit-hud-stats {
  display: flex;
  gap: 8px;
  align-items: center;
}
.summit-stat-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.summit-stat-pill.streak {
  border-color: rgba(255, 107, 77, 0.45);
  background: rgba(255, 107, 77, 0.12);
  color: #ff8f6b;
}
.summit-stat-pill.floors {
  border-color: rgba(57, 255, 136, 0.35);
  background: rgba(57, 255, 136, 0.1);
  color: #39ff88;
}

.summit-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 5px 10px 8px;
  position: relative;
}

.summit-scene-frame {
  position: relative;
  width: min(100%, 1100px);
  min-height: 170px;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(168, 195, 255, .2);
  border-radius: 18px;
  background: linear-gradient(180deg, #101a31, #34415c 72%, #17243a);
  box-shadow: inset 0 0 56px rgba(11, 18, 35, .58), 0 18px 45px rgba(0, 0, 0, .18);
}
.summit-scene-frame canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 170px;
  outline: none;
}
.summit-scene-caption {
  position: absolute;
  inset: 12px 14px auto;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
  color: #d8e6ff;
  font: 700 10px/1.2 var(--font-mono, monospace);
  letter-spacing: .12em;
  text-shadow: 0 2px 10px #0b1220;
}
.summit-scene-caption [data-summit-status] { color: #8ee4ff; }
.summit-player-rail {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}
.summit-player-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: min(190px, 46vw);
  padding: 5px 9px;
  color: #dfe9fb;
  background: rgba(8, 16, 31, .78);
  border: 1px solid color-mix(in srgb, var(--climber-color) 48%, transparent);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  font-size: 10px;
}
.summit-player-chip.is-me { background: rgba(31, 54, 87, .92); }
.summit-player-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--climber-color); box-shadow: 0 0 9px var(--climber-color); }
.summit-player-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summit-player-chip strong { color: var(--climber-color); font: 700 10px var(--font-mono, monospace); white-space: nowrap; }
.summit-player-chip small { color: #9cadc8; font-size: 9px; }

/* Summit's quiz belongs below the 3D room, never layered on top of it. */
.summit-screen > .question-sheet {
  position: relative;
  inset: auto;
  z-index: 1;
  flex: 0 1 auto;
  width: 100%;
  max-height: 44%;
  margin: 0;
  border-radius: 18px 18px 0 0;
  transform: none;
  transition: none;
}
.summit-screen > .question-sheet:not(.is-open) { display: none; }
.summit-screen > .question-sheet.is-collapsed { transform: none; }
.summit-screen > .question-sheet .sheet-body { overflow: auto; }

.summit-skyline {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(80,140,255,0.08) 0%, transparent 35%),
    linear-gradient(180deg, #0e1422 0%, #151c2e 100%);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.35);
}

.summit-goal-line {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #39ff88, transparent);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.summit-goal-flag {
  font-size: 14px;
  filter: drop-shadow(0 0 6px rgba(57,255,136,0.5));
}
.summit-goal-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #39ff88;
  text-shadow: 0 0 10px rgba(57,255,136,0.4);
}

.summit-towers {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding: 28px 12px 8px;
  min-height: 0;
}

.summit-tower {
  flex: 1;
  max-width: 90px;
  min-width: 52px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.tower-stack {
  width: 70%;
  max-width: 48px;
  min-height: 8px;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tower-color) 35%, transparent),
    0 8px 20px -8px color-mix(in srgb, var(--tower-color) 50%, transparent);
}

.tower-block {
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}

.summit-tower.is-me .tower-stack {
  width: 78%;
  max-width: 56px;
  box-shadow:
    0 0 0 2px var(--tower-color),
    0 0 18px color-mix(in srgb, var(--tower-color) 45%, transparent);
}

.tower-base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  width: 100%;
}

.tower-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--tower-color, #33e1ff);
  box-shadow: 0 0 8px color-mix(in srgb, var(--tower-color) 40%, transparent);
  object-fit: cover;
  background: #1a1d26;
}
.summit-tower.is-me .tower-avatar {
  width: 32px;
  height: 32px;
  border-width: 2.5px;
}

.tower-name {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}
.summit-tower.is-me .tower-name {
  color: var(--tower-color);
}

.tower-floors {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--muted);
}
.summit-tower.is-me .tower-floors {
  color: #39ff88;
}

@media (max-width: 640px) {
  .summit-screen {
    height: calc(100dvh - 52px);
  }
  .summit-stage { flex: 0 1 42%; min-height: 170px; padding: 4px 7px 6px; }
  .summit-screen > .question-sheet { max-height: 53%; }
  .summit-player-chip { padding: 4px 7px; font-size: 9px; }
  .summit-towers {
    gap: 6px;
    padding: 24px 8px 6px;
  }
  .summit-tower {
    min-width: 44px;
    max-width: 72px;
  }
  .tower-block {
    height: 8px;
  }
  .tower-avatar {
    width: 24px;
    height: 24px;
  }
  .summit-tower.is-me .tower-avatar {
    width: 28px;
    height: 28px;
  }
  .tower-name {
    font-size: 9px;
  }
}

/* ============================================================
   ACCOUNT PANEL + PREFERENCES + DARK MODE + MOBILE TOPBAR
   ============================================================ */

/* ---- Account trigger (points pill as button) ---- */
.points-pill.account-trigger {
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.points-pill.account-trigger:hover {
  border-color: var(--led-1);
  box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.12);
}
.points-pill.account-trigger:active {
  transform: scale(0.98);
}

/* ---- Backdrop + panel shell ---- */
.account-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(18, 20, 28, 0.45);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.account-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.account-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  width: min(400px, 100vw);
  max-width: 100vw;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(18, 20, 28, 0.12);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.account-panel.open {
  transform: translateX(0);
}

.account-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px 28px;
  gap: 20px;
  box-sizing: border-box;
}

.account-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.account-header-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
.account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--panel-2);
  flex-shrink: 0;
  object-fit: cover;
}
.account-identity {
  min-width: 0;
}
.account-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  word-break: break-word;
}
.account-email {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  word-break: break-all;
}
.account-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.account-close:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.account-share-quickfix{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;border:1px solid color-mix(in srgb,#30c995 38%,var(--border));border-radius:14px;background:linear-gradient(110deg,color-mix(in srgb,#15a978 16%,var(--panel)),color-mix(in srgb,#187e97 12%,var(--panel)));color:var(--ink);text-align:left;cursor:pointer;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}.account-share-quickfix:hover{transform:translateY(-1px);border-color:#30c995;box-shadow:0 8px 22px rgba(23,178,128,.14)}.account-share-quickfix>span:nth-child(2){display:grid;gap:3px;min-width:0;flex:1}.account-share-quickfix strong{font-size:13px;font-weight:800}.account-share-quickfix small{font-size:11px;color:var(--muted)}.account-share-icon{display:grid;flex:none;width:34px;height:34px;place-items:center;border:1px solid rgba(73,225,173,.3);border-radius:11px;background:rgba(43,207,151,.12);color:#48d7a5;font-size:21px;font-weight:850}.account-share-arrow{color:#48d7a5;font-size:17px}

.referral-share-backdrop{position:fixed;inset:0;z-index:12010;display:grid;place-items:center;padding:18px;background:rgba(4,10,18,.72);opacity:0;transition:opacity .2s ease;backdrop-filter:blur(8px)}.referral-share-backdrop[hidden]{display:none}.referral-share-backdrop.open{opacity:1}.referral-share-sheet{position:relative;width:min(480px,100%);padding:30px 26px 23px;border:1px solid color-mix(in srgb,#32ca98 32%,var(--border));border-radius:24px;background:radial-gradient(ellipse at 100% 0%,rgba(39,185,135,.13),transparent 45%),var(--panel);box-shadow:0 28px 80px rgba(0,0,0,.48);transform:translateY(12px) scale(.985);transition:transform .24s cubic-bezier(.2,.8,.2,1)}.referral-share-backdrop.open .referral-share-sheet{transform:translateY(0) scale(1)}.referral-share-close{position:absolute;top:13px;right:13px;width:34px;height:34px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--muted);font-size:22px;line-height:1;cursor:pointer}.referral-share-kicker,.referral-reward-kicker{display:block;color:#48d7a5;font-family:var(--font-mono);font-size:9px;font-weight:850;letter-spacing:.13em}.referral-share-sheet h2{margin:9px 38px 7px 0;color:var(--ink);font-family:var(--font-display);font-size:25px;line-height:1.13}.referral-share-sheet>p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.referral-share-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:19px 0;padding:11px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.referral-share-stats>div{display:grid;gap:3px;text-align:center}.referral-share-stats strong{color:#46d5a2;font-family:var(--font-mono);font-size:15px}.referral-share-stats span{color:var(--muted);font-size:9px}.referral-share-link-label{display:block;margin-bottom:7px;color:var(--ink);font-size:11px;font-weight:750}.referral-share-link-row{display:flex;gap:8px}.referral-share-link-row input{width:0;min-width:0;flex:1;padding:0 11px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--ink);font-family:var(--font-mono);font-size:10px}.referral-share-link-row .btn{flex:none;padding:9px 15px}.referral-share-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.referral-share-action{display:flex;align-items:center;justify-content:center;gap:5px;min-height:38px;padding:7px 5px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--ink);font:700 10px var(--font-body);text-align:center;text-decoration:none;cursor:pointer}.referral-share-action:hover{border-color:#48d7a5}.referral-share-action.is-whatsapp{color:#53d59b}.referral-share-action.is-telegram{color:#55b8ed}.referral-share-action.is-messenger{color:#81a7ff}.referral-share-status{min-height:17px;margin:10px 0 0!important;color:var(--muted);font-size:10px!important}

.referral-reward-backdrop{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(3,8,16,.78);opacity:0;transition:opacity .2s ease;backdrop-filter:blur(9px)}.referral-reward-backdrop.open{opacity:1}.referral-reward-dialog{position:relative;display:flex;width:min(410px,100%);flex-direction:column;align-items:center;overflow:hidden;padding:27px 24px 23px;border:1px solid rgba(73,225,173,.42);border-radius:25px;background:radial-gradient(ellipse at 50% 0%,rgba(46,207,151,.18),transparent 52%),var(--panel);box-shadow:0 25px 90px rgba(0,0,0,.5);text-align:center;transform:translateY(10px) scale(.98);transition:transform .25s cubic-bezier(.2,.8,.2,1)}.referral-reward-backdrop.open .referral-reward-dialog{transform:translateY(0) scale(1)}.referral-reward-close{position:absolute;top:11px;right:12px;z-index:2;width:32px;height:32px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--muted);font-size:20px;cursor:pointer}.referral-reward-confetti{position:absolute;top:0;left:50%;width:240px;height:180px;transform:translateX(-50%);pointer-events:none}.referral-reward-icon{display:grid;width:66px;height:66px;margin:14px 0 12px;place-items:center;border:1px solid rgba(73,225,173,.45);border-radius:50%;background:rgba(34,188,132,.12);box-shadow:0 0 36px rgba(31,209,148,.25);color:#54e0ad;font-size:34px}.referral-reward-dialog h2{position:relative;margin:9px 0 9px;color:var(--ink);font-family:var(--font-display);font-size:22px;line-height:1.2}.referral-reward-xp{color:#ffd36a;font-family:var(--font-mono);font-size:30px}.referral-reward-dialog p{margin:8px 0 19px;color:var(--muted);font-size:13px}.referral-reward-done{min-width:150px}

.achievement-referral-summary{display:flex;align-items:center;gap:14px;margin:15px 0;padding:16px;border:1px solid color-mix(in srgb,#30c995 32%,var(--border));border-radius:16px;background:linear-gradient(105deg,color-mix(in srgb,#19a979 11%,var(--panel)),var(--panel))}.achievement-referral-icon{display:grid;flex:none;width:42px;height:42px;place-items:center;border:1px solid rgba(73,225,173,.3);border-radius:13px;background:rgba(43,207,151,.12);color:#48d7a5;font-size:24px;font-weight:850}.achievement-referral-copy{min-width:0;flex:1}.achievement-referral-copy h2{margin:4px 0;color:var(--ink);font-family:var(--font-display);font-size:14px}.achievement-referral-copy p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}.achievement-referral-copy p strong{color:#48d7a5}.achievement-referral-summary>.btn{flex:none;font-size:11px}

@media(max-width:520px){.referral-share-backdrop{align-items:end;padding:10px}.referral-share-sheet{padding:26px 18px max(18px,env(safe-area-inset-bottom)) ;border-radius:22px 22px 15px 15px}.referral-share-sheet h2{font-size:22px}.referral-share-action{font-size:9px}.achievement-referral-summary{align-items:flex-start;flex-wrap:wrap;padding:13px}.achievement-referral-copy{width:calc(100% - 58px);flex:initial}.achievement-referral-summary>.btn{width:100%;margin-left:56px}.referral-reward-dialog{padding:22px 18px}.referral-reward-dialog h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.referral-share-backdrop,.referral-share-sheet,.referral-reward-backdrop,.referral-reward-dialog,.account-share-quickfix{transition:none!important}}

/* ---- Stats strip ---- */
.account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.account-stat {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
}
.account-stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--led-1);
  line-height: 1.2;
}
.account-stat-label {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---- Sections ---- */
.account-section {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.account-section-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.account-section-hint {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* ---- Toggle switches ---- */
.account-toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.account-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
}
.account-toggle:hover {
  background: var(--panel-2);
}
.account-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.account-toggle-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.account-toggle-hint {
  font-size: 11.5px;
  color: var(--muted);
}
.account-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.toggle-track {
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--border);
  border: 1px solid var(--border);
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform 0.2s ease;
}
.account-toggle input:checked + .toggle-track {
  background: var(--led-1);
  border-color: var(--led-1);
}
.account-toggle input:checked + .toggle-track .toggle-thumb {
  transform: translateX(18px);
}
.account-toggle input:focus-visible + .toggle-track {
  outline: 2px solid var(--led-1);
  outline-offset: 2px;
}

/* ---- Rating + comment ---- */
.rating-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.star-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: 26px;
  line-height: 1;
  color: var(--border);
  cursor: pointer;
  transition: color 0.12s ease, transform 0.12s ease;
}
.star-btn:hover,
.star-btn.is-active {
  color: var(--warning);
}
.star-btn:hover {
  transform: scale(1.08);
}
.account-comment {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 72px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--ink);
  margin-bottom: 10px;
}
.account-comment:focus {
  outline: none;
  border-color: var(--led-1);
  box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.15);
}
.account-feedback-btn {
  width: 100%;
}

.support-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.support-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: inherit;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.support-link:hover {
  border-color: var(--led-1);
  background: var(--panel);
  transform: translateY(-1px);
}
.support-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--panel);
}
.support-ico img {
  width: 22px;
  height: 22px;
  display: block;
}
.support-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.support-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.support-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
}
.support-whatsapp .support-ico {
  background: rgba(37, 211, 102, 0.16);
}
.support-email .support-ico {
  background: rgba(59, 111, 224, 0.16);
}

.account-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.axel-credit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted-2);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.axel-credit img {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.axel-credit strong { color: var(--muted); font-weight: 700; }
.axel-credit-nav { position: absolute; top: 50%; right: 20px; margin-left: 0; padding-left: 0; transform: translateY(-50%); }
.axel-credit-account { justify-content: center; width: 100%; padding: 4px 0 10px; }
.axel-credit-welcome img { width: 22px; height: 22px; }
.btn.danger-outline {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
}
.btn.danger-outline:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(229, 72, 77, 0.06);
}

/* ---- Topbar label helpers (desktop shows text, mobile icons) ---- */
.icon-btn .btn-ico { display: inline; }
.icon-btn .btn-label { display: inline; }

/* ---- Dark mode (class on <html>) ---- */
html.dark-mode {
  color-scheme: dark;
}
html.dark-mode {
  --paper: #0f1117;
  --panel: #171a22;
  --panel-2: #1e2230;
  --bg: var(--panel-2);
  --border: rgba(255, 255, 255, 0.10);
  --border-soft: rgba(255, 255, 255, 0.06);
  --ink: #E8EAF0;
  --text: var(--ink);
  --card: var(--panel);
  --muted: #9AA3B5;
  --muted-2: #6B7385;
  --primary: #E8EAF0;
}
html.dark-mode body {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
html.dark-mode .topbar {
  background: rgba(15, 17, 23, 0.88);
}
html.dark-mode .code-input {
  background: #0d1117;
  color: #e6edf3;
  border-color: #30363d;
}
html.dark-mode .led-frame-inner {
  background: var(--panel);
}
html.dark-mode .toggle-thumb {
  background: #e8eaf0;
}
html.dark-mode .music-indicator {
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
html.dark-mode .account-panel {
  box-shadow: -12px 0 40px rgba(0,0,0,0.45);
}

/* ---- Mobile-friendly topbar + account panel ---- */
@media (max-width: 720px) {
  .topbar {
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    gap: 8px;
    flex-wrap: nowrap;
  }
  .topbar-left {
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .brand-mini .brand-name {
    display: none;
  }
  .breadcrumb {
    display: none;
  }
  .topbar-right {
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: nowrap;
  }
  .mode-toggle-btn {
    padding: 7px 10px;
    font-size: 12px;
  }
  .icon-btn {
    padding: 7px 9px;
    font-size: 14px;
  }
  .icon-btn .btn-label {
    display: none;
  }
  .points-pill {
    padding: 5px 10px 5px 8px;
    gap: 6px;
  }
  .points-pill .uname {
    display: none;
  }
  .points-pill .pts {
    font-size: 13px;
  }
  .points-pill::before {
    display: none;
  }
  .account-panel {
    width: 100vw;
    max-width: 100vw;
    border-left: none;
  }
  .account-panel-inner {
    padding: 16px 16px 24px;
    gap: 16px;
  }
  .account-stat-value {
    font-size: 18px;
  }
  .music-indicator {
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .slide-summary-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .slide-summary-controls label:first-child { grid-column:1/-1; }
  .slide-summary-controls .btn { width:100%; min-height:44px; }
}

@media (max-width: 400px) {
  .mode-toggle-btn #modeToggleLabel {
    font-size: 11px;
  }
  .points-pill .pts::after {
    content: "";
  }
}

/* ============================================================
   MOBILE DENSITY — tighter spacing for phones
   ============================================================ */
@media (max-width: 640px) {
  /* Main content — less vertical waste */
  .main {
    padding: 20px 14px 56px;
    padding-bottom: max(56px, calc(env(safe-area-inset-bottom, 0px) + 40px));
  }

  .section-label {
    margin-bottom: 12px;
    font-size: 11px;
  }

  /* Course grid & cards */
  .course-grid {
    gap: 12px;
  }
  .course-card-body {
    padding: 14px 16px;
  }
  .course-card h3 {
    font-size: 17px;
    margin: 8px 0 12px;
  }
  .course-card .counts {
    gap: 10px;
    padding-top: 10px;
    font-size: 10.5px;
  }

  /* Course header */
  .course-header h1 {
    font-size: 22px;
  }
  .course-header {
    margin-bottom: 16px;
  }

  /* Quiz card */
  .quiz-q {
    padding: 16px 14px;
  }
  .quiz-q .qtext {
    font-size: 16.5px;
    margin-bottom: 14px;
  }
  .quiz-opt {
    padding: 11px 12px;
    margin-bottom: 7px;
    font-size: 13.5px;
    gap: 10px;
    min-height: 44px;
  }
  .quiz-nav {
    margin-top: 16px;
  }

  /* Login / onboard */
  .login-shell {
    padding: 16px 14px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
  .login-card-body {
    padding: 22px 18px;
  }
  .login-card-body h1 {
    font-size: 20px;
  }
  .login-brand {
    margin-bottom: 20px;
  }
  .login-brand .brand-logo {
    width: 60px;
    height: 60px;
  }
  .login-foot {
    margin-top: 20px;
  }

  /* Quicky + floating elements respect safe area */
  .quicky-root {
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
  .quicky-head {
    width: 56px;
    height: 56px;
  }

  /* Generic buttons a bit more compact but still tappable */
  .btn {
    min-height: 40px;
  }
  .btn.small {
    min-height: 36px;
  }
}

@media (max-width: 420px) {
  .main {
    padding-left: 12px;
    padding-right: 12px;
  }
  .quiz-q .qtext {
    font-size: 15.5px;
  }
  .course-card h3 {
    font-size: 16px;
  }
}

/* ============================================================
   QUICKY — Floating AI companion
   ============================================================ */

.quicky-root {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 9990;
  font-family: Inter, system-ui, sans-serif;
  pointer-events: none;
}

.quicky-root > * {
  pointer-events: auto;
}

/* Floating head button */
.quicky-head {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: #0f1115;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 210, 180, 0.15);
  cursor: grab;
  padding: 0;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  touch-action: none;
  user-select: none;
}

.quicky-head:active {
  cursor: grabbing;
}

.quicky-head:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(0, 210, 180, 0.35);
}

.quicky-head img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.quicky-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(0, 210, 180, 0.5);
  opacity: 0;
  pointer-events: none;
  animation: quickyPulse 2.4s ease-out infinite;
}

@keyframes quickyPulse {
  0%   { transform: scale(0.92); opacity: 0.6; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* Chat panel */
.quicky-panel {
  position: absolute;
  right: 0;
  bottom: 78px;
  width: min(360px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 120px));
  background: var(--panel, #16161c);
  border: 1px solid var(--border, #2a2a33);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: quickySlideIn 0.22s ease;
}
.quicky-panel[hidden] { display: none !important; }

@keyframes quickySlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.quicky-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #2a2a33);
  background: var(--panel-2, #1c1c22);
}

.quicky-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quicky-mini {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.quicky-mini-badge{display:grid;width:36px;height:36px;flex:none;place-items:center;border:1px solid color-mix(in srgb,#258ef2 46%,var(--border));border-radius:50%;background:linear-gradient(145deg,#168be8,#425ce3);color:#fff;font:800 10px/1 var(--font-display,system-ui);letter-spacing:.03em;box-shadow:0 4px 14px rgba(37,142,242,.22)}

.quicky-panel-title strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.quicky-sub {
  font-size: 11px;
  color: var(--muted, #8b949e);
}

.quicky-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--muted, #8b949e);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}

.quicky-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
}

/* Messages */
.quicky-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quicky-msg {
  display: flex;
  max-width: 92%;
}

.quicky-msg.user {
  align-self: flex-end;
}

.quicky-msg.assistant {
  align-self: flex-start;
}

.quicky-bubble {
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  word-break: break-word;
}

.quicky-msg.user .quicky-bubble {
  background: #00b89a;
  color: #041410;
  border-bottom-right-radius: 4px;
}

.quicky-msg.assistant .quicky-bubble {
  background: var(--panel-2, #1c1c22);
  border: 1px solid var(--border, #2a2a33);
  border-bottom-left-radius: 4px;
}

.quicky-bubble code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
}

.quicky-hint {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  opacity: 0.7;
}

/* Status line */
.quicky-status {
  min-height: 18px;
  padding: 0 14px 4px;
  font-size: 11.5px;
  color: var(--muted, #8b949e);
}

.quicky-voice-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 4px;
  background: var(--panel-2, #1c1c22);
}
.quicky-voice-toggle,
.quicky-speak-toggle {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border, #2a2a33);
  border-radius: 10px;
  padding: 0 10px;
  background: var(--panel, #16161c);
  color: inherit;
  font: inherit;
  font-size: 11.5px;
}
.quicky-voice-toggle { cursor: pointer; }
.quicky-voice-toggle:hover { border-color: #00b89a; }
.quicky-voice-toggle.is-listening {
  border-color: rgba(0, 184, 154, .7);
  background: rgba(0, 184, 154, .12);
  color: #65e3ca;
}
.quicky-voice-mic { font-size: 14px; }
.quicky-speak-toggle { cursor: pointer; white-space: nowrap; }
.quicky-speak-toggle input { accent-color: #00b89a; }
.quicky-voice-status {
  padding: 0 14px 6px;
  background: var(--panel-2, #1c1c22);
  color: var(--muted, #8b949e);
  font-size: 10.5px;
  line-height: 1.4;
}
.quicky-voice-privacy {
  padding: 0 14px 8px;
  background: var(--panel-2, #1c1c22);
  color: var(--muted, #8b949e);
  font-size: 9.5px;
  line-height: 1.35;
  opacity: .78;
}
.quicky-voice-toggle:focus-visible,
.quicky-speak-toggle:focus-within {
  outline: 2px solid #00b89a;
  outline-offset: 2px;
}

/* Input row */
.quicky-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border, #2a2a33);
  background: var(--panel-2, #1c1c22);
}

.quicky-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border, #2a2a33);
  background: var(--panel, #16161c);
  color: inherit;
  border-radius: 12px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.35;
  max-height: 120px;
  outline: none;
}

.quicky-input:focus {
  border-color: #00b89a;
}

.quicky-send {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: #00b89a;
  color: #041410;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.quicky-send:hover:not(:disabled) {
  transform: scale(1.05);
}

.quicky-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Quick action chips */
.quicky-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 12px;
  background: var(--panel-2, #1c1c22);
}

.quicky-quick-actions button {
  border: 1px solid var(--border, #2a2a33);
  background: transparent;
  color: inherit;
  font-size: 11.5px;
  font-family: inherit;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.quicky-quick-actions button:hover {
  background: rgba(0, 184, 154, 0.12);
  border-color: #00b89a;
}

/* Dark / light already handled by CSS variables used above */

@media (max-width: 480px) {
  .quicky-root {
    right: 12px;
    bottom: 16px;
  }
  .quicky-head {
    width: 56px;
    height: 56px;
  }
  .quicky-panel {
    bottom: 70px;
    width: calc(100vw - 24px);
  }
}

/* ---------- Quicky: permission bar ---------- */
.quicky-perm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border, #2a2a33);
  background: rgba(0, 0, 0, 0.15);
  font-size: 12px;
}

.quicky-perm-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.quicky-perm-label input {
  accent-color: #00b89a;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.quicky-perm-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border, #2a2a33);
  color: var(--muted, #8b949e);
  background: transparent;
}

.quicky-perm-badge.is-unlocked {
  border-color: #00b89a;
  color: #00b89a;
  background: rgba(0, 184, 154, 0.12);
}

/* Compact daily Study Buddy allowance with an at-a-glance progress ring. */
.quicky-usage-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border, #2a2a33);
  background: linear-gradient(100deg, color-mix(in srgb, var(--led-1, #00b89a) 9%, var(--panel, #16161c)), var(--panel, #16161c) 72%);
}
.quicky-usage-ring { display: block; width: 42px; height: 42px; flex: 0 0 42px; overflow: visible; }
.quicky-usage-ring circle { fill: none; stroke-width: 3.5; }
.quicky-usage-ring-track { stroke: color-mix(in srgb, var(--border, #2a2a33) 75%, #8795a7); }
.quicky-usage-ring-value { stroke: var(--led-1, #00b89a); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 22px 22px; transition: stroke-dashoffset .45s cubic-bezier(.2,.75,.25,1), stroke .2s ease; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--led-1, #00b89a) 35%, transparent)); }
.quicky-usage-ring.is-empty .quicky-usage-ring-value { stroke: #f0a34a; filter: none; }
.quicky-usage-ring text { fill: var(--ink, #f5f7fb); font: 800 11px/1 var(--font-display, system-ui); }
.quicky-usage-copy { display: grid; min-width: 0; gap: 3px; }
.quicky-usage-copy strong { color: var(--ink, #f5f7fb); font-size: 12px; font-weight: 750; line-height: 1.3; }
.quicky-usage-copy small { color: var(--muted, #8b949e); font-size: 10.5px; line-height: 1.3; }

/* ---------- Quicky: "Need a hint?" bubble ---------- */
.quicky-hint-bubble {
  position: absolute;
  right: 0;
  bottom: 78px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  background: var(--panel, #16161c);
  border: 1px solid #00b89a;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  font-size: 13px;
  white-space: nowrap;
  animation: quickySlideIn 0.22s ease;
  z-index: 2;
}

.quicky-hint-bubble[hidden] {
  display: none !important;
}

.quicky-hint-yes {
  border: none;
  background: #00b89a;
  color: #041410;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.quicky-hint-yes:hover {
  filter: brightness(1.08);
}

.quicky-hint-dismiss {
  border: none;
  background: transparent;
  color: var(--muted, #8b949e);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}

.quicky-hint-dismiss:hover {
  color: inherit;
  background: rgba(255, 255, 255, 0.06);
}
.quicky-hint-bubble.qf-code-reminder{max-width:min(350px,calc(100vw - 32px));white-space:normal;flex-wrap:wrap;line-height:1.4}
.quicky-hint-bubble.qf-code-reminder>span{flex:1 1 100%}
.quicky-hint-bubble.qf-code-reminder>.quicky-hint-yes{margin-left:auto}

/* In-lesson study buddy welcome and voice controls */
.quicky-lesson-bubble{position:absolute;right:-7px;bottom:calc(100% + 14px);display:grid;gap:9px;width:min(360px,calc(100vw - 28px));padding:17px 17px 14px;border:1px solid color-mix(in srgb,#258ef2 42%,var(--border));border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,#168be8 9%,var(--panel)),var(--panel) 60%);color:var(--ink);box-shadow:0 18px 48px rgba(4,12,24,.32);animation:quickyLessonBubbleIn .24s cubic-bezier(.2,.8,.2,1) both}.quicky-lesson-bubble[hidden]{display:none!important}.quicky-lesson-bubble:after{position:absolute;right:27px;bottom:-8px;width:15px;height:15px;content:"";transform:rotate(45deg);border-right:1px solid color-mix(in srgb,#258ef2 42%,var(--border));border-bottom:1px solid color-mix(in srgb,#258ef2 42%,var(--border));border-bottom-right-radius:4px;background:var(--panel)}.quicky-lesson-bubble-kicker{color:#2389ed;font:750 9px var(--font-mono);letter-spacing:.13em}.quicky-lesson-bubble p{margin:0;padding-right:8px;font-size:13px;line-height:1.55}.quicky-lesson-bubble-actions{display:flex;flex-wrap:wrap;gap:8px}.quicky-lesson-bubble-actions button{min-height:36px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:11px;background:var(--panel-2);color:var(--ink);font:700 11px var(--font-display);cursor:pointer;transition:transform .16s,border-color .16s,background .16s}.quicky-lesson-bubble-actions button:hover{transform:translateY(-1px);border-color:#258ef2}.quicky-lesson-bubble-actions .quicky-lesson-listen{border-color:transparent;background:linear-gradient(100deg,#168be8,#3568e8);color:#fff}.quicky-lesson-bubble-actions button:disabled{cursor:wait;opacity:.7}.quicky-lesson-bubble audio{width:100%;height:35px}.quicky-lesson-bubble-close{position:absolute;top:7px;right:8px;display:grid;width:28px;height:28px;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:19px;cursor:pointer}.quicky-lesson-bubble-close:hover{background:var(--panel-2);color:var(--ink)}@keyframes quickyLessonBubbleIn{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:480px){.quicky-lesson-bubble{right:-7px;width:min(330px,calc(100vw - 24px));padding:15px}.quicky-lesson-bubble p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.quicky-lesson-bubble{animation:none}}
.quicky-lesson-bubble-actions[hidden]{display:none!important}.quicky-lesson-bubble.is-praise{border-color:color-mix(in srgb,#00b89a 50%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,#00b89a 13%,var(--panel)),var(--panel) 68%)}.quicky-lesson-bubble.is-praise .quicky-lesson-bubble-kicker{color:#078d74}.quicky-lesson-bubble.is-praise:after{border-color:color-mix(in srgb,#00b89a 50%,var(--border));border-top:0;border-left:0}html.dark-mode .quicky-lesson-bubble.is-praise .quicky-lesson-bubble-kicker{color:#5bd9bb}

/* Soft nudge when offering a hint */
.quicky-head.quicky-nudge {
  animation: quickyNudge 0.9s ease;
}

/* ---------- Driver.js home tour with the student's study buddy ---------- */
.driver-overlay {
  z-index: 10020 !important;
}
.driver-popover.qf-home-tour-popover {
  --driver-popover-bg: var(--panel, #fff);
  --driver-popover-text-color: var(--ink, #14243a);
  --driver-popover-title-color: var(--ink, #14243a);
  --driver-popover-description-color: var(--muted, #62728a);
  --driver-popover-border: 1px solid var(--border, #d9e1eb);
  --driver-popover-border-radius: 20px;
  --driver-popover-shadow: 0 24px 70px rgba(4, 16, 36, .28);
  z-index: 10021 !important;
  width: min(450px, calc(100vw - 28px));
  max-width: min(450px, calc(100vw - 28px));
  padding: 20px;
  border: var(--driver-popover-border);
  border-radius: var(--driver-popover-border-radius);
  background: var(--driver-popover-bg);
  color: var(--driver-popover-text-color);
  box-shadow: var(--driver-popover-shadow);
}
.driver-popover.qf-home-tour-popover .driver-popover-title {
  color: var(--driver-popover-title-color);
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.025em;
}
.driver-popover.qf-home-tour-popover .driver-popover-description {
  width: 100%;
  max-width: none;
  margin-top: 12px;
  color: var(--driver-popover-description-color);
  font-size: 13.5px;
  line-height: 1.5;
}
.qf-tour-buddy-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.qf-tour-buddy-visual {
  position: relative;
  display: flex;
  min-width: 0;
  height: 132px;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(61, 133, 216, .16);
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 90%, rgba(56, 133, 220, .20), transparent 70%), linear-gradient(145deg, rgba(231, 242, 255, .92), rgba(246, 249, 253, .8));
}
.qf-tour-buddy-visual::after {
  position: absolute;
  right: 16px;
  bottom: 8px;
  left: 16px;
  height: 7px;
  border-radius: 50%;
  background: rgba(22, 57, 100, .13);
  content: "";
  filter: blur(5px);
}
.qf-tour-buddy-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 106px;
  height: 124px;
}
.qf-tour-buddy-identity {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 8px;
  padding: 3px 7px;
  border: 1px solid rgba(50, 118, 202, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: #2468b8;
  font-size: 10px;
  font-weight: 750;
}
.qf-tour-buddy-status {
  position: absolute;
  z-index: 3;
  right: 5px;
  bottom: 5px;
  left: 5px;
  color: #53708e;
  font-size: 9px;
  text-align: center;
}
.qf-tour-buddy-copy {
  min-width: 0;
}
.qf-tour-buddy-copy strong {
  display: block;
  margin-bottom: 7px;
  color: var(--ink, #14243a);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.4;
}
.qf-tour-buddy-copy p {
  margin: 0;
  color: var(--muted, #62728a);
  font-size: 12.5px;
  line-height: 1.5;
}
.driver-popover.qf-home-tour-popover .driver-popover-footer {
  align-items: center;
  margin-top: 16px;
}
.driver-popover.qf-home-tour-popover .driver-popover-progress-text {
  color: var(--muted, #738198);
  font-size: 11px;
  font-weight: 650;
}
.driver-popover.qf-home-tour-popover .driver-popover-prev-btn,
.driver-popover.qf-home-tour-popover .driver-popover-next-btn {
  border-radius: 10px;
  font-weight: 700;
}
.driver-popover.qf-home-tour-popover .driver-popover-next-btn {
  border-color: #347fd0;
  background: #347fd0;
  color: white;
  text-shadow: none;
}
.driver-popover.qf-home-tour-popover .driver-popover-prev-btn {
  border-color: var(--border, #d9e1eb);
  background: var(--panel, #fff);
  color: var(--ink, #14243a);
  text-shadow: none;
}
.driver-popover.qf-home-tour-popover .driver-popover-close-btn {
  color: var(--muted, #738198);
}
.qf-page-tour-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 9px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, #20bfa1 40%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, #20bfa1 9%, var(--panel));
  color: color-mix(in srgb, #087e70 86%, var(--ink));
  font: 700 12px/1.2 var(--font-display, "Space Grotesk", system-ui, sans-serif);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.qf-page-tour-button:hover { transform: translateY(-1px); border-color: #20bfa1; background: color-mix(in srgb, #20bfa1 16%, var(--panel)); }
.qf-page-tour-button:focus-visible { outline: 2px solid #20bfa1; outline-offset: 2px; }
html.dark-mode .qf-page-tour-button { color: #79ead5; }
body.dark .driver-popover.qf-home-tour-popover .qf-tour-buddy-visual,
html[data-theme="dark"] .driver-popover.qf-home-tour-popover .qf-tour-buddy-visual,
html.dark-mode .driver-popover.qf-home-tour-popover .qf-tour-buddy-visual {
  border-color: rgba(103, 172, 255, .2);
  background: radial-gradient(ellipse at 50% 90%, rgba(56, 133, 220, .24), transparent 70%), linear-gradient(145deg, #1b2c43, #152236);
}
body.dark .driver-popover.qf-home-tour-popover .qf-tour-buddy-identity,
html[data-theme="dark"] .driver-popover.qf-home-tour-popover .qf-tour-buddy-identity,
html.dark-mode .driver-popover.qf-home-tour-popover .qf-tour-buddy-identity {
  border-color: rgba(103, 172, 255, .2);
  background: rgba(19, 36, 57, .9);
  color: #9bcaff;
}
@media (max-width: 720px) {
  .driver-popover.qf-home-tour-popover {
    width: min(320px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 11px 12px 10px;
  }
  .driver-popover.qf-home-tour-popover .driver-popover-title {
    padding-right: 24px;
    font-size: 16px;
    line-height: 1.2;
  }
  .driver-popover.qf-home-tour-popover .driver-popover-description {
    margin-top: 7px;
  }
  .qf-tour-buddy-row {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 9px;
  }
  .qf-tour-buddy-visual {
    height: 74px;
    border-radius: 12px;
  }
  .qf-tour-buddy-visual::after { right: 8px; bottom: 5px; left: 8px; height: 4px; }
  .qf-tour-buddy-canvas { width: 56px; height: 70px; }
  .qf-tour-buddy-identity,
  .qf-tour-buddy-status { display: none; }
  .qf-tour-buddy-copy strong {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 3px;
    font-size: 12px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .qf-tour-buddy-copy p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .driver-popover.qf-home-tour-popover .driver-popover-footer {
    margin-top: 9px;
  }
  .driver-popover.qf-home-tour-popover .driver-popover-prev-btn,
  .driver-popover.qf-home-tour-popover .driver-popover-next-btn {
    padding: 5px 9px;
    font-size: 12px;
  }
  .driver-popover.qf-home-tour-popover .driver-popover-progress-text {
    font-size: 10px;
  }
}
#accountTourBtn { width: 100%; }

@keyframes quickyNudge {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.12); }
  50% { transform: scale(1.05); }
  70% { transform: scale(1.1); }
}

/* ---------- Account: song flow + background ---------- */
.pref-block {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #2a2a33);
}

.pref-block-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.pref-block-hint {
  font-size: 12px;
  color: var(--muted, #8b949e);
  margin: 0 0 10px;
  line-height: 1.4;
}

.push-pref-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.push-pref-options { display: grid; gap: 10px; margin: 12px 0; }
.push-pref-options label { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.push-pref-options input[type="checkbox"] { accent-color: #00b89a; }
.push-learning-paths-setting{display:grid;gap:8px;padding:13px;border:1px solid var(--border);border-radius:13px;background:var(--panel-2)}.push-learning-paths-setting>strong{font-size:12px}.push-learning-paths-setting>div{display:grid;gap:7px}.push-learning-path-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}.push-learning-path-row>span{display:grid;gap:3px;min-width:0}.push-learning-path-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.push-learning-path-row small,.push-path-empty{margin:0;color:var(--muted);font-size:11px;line-height:1.45}.push-learning-path-row button{flex:none;padding:7px 10px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--muted);font-size:10px;font-weight:750;cursor:pointer}.push-learning-path-row button:hover{border-color:#00b89a;color:#008e7a}.push-path-empty.is-error{color:var(--danger)}
.push-pref-time input { margin-left: auto; max-width: 120px; padding: 7px 9px; border: 1px solid var(--border, #2a2a33); border-radius: 8px; background: var(--panel-2, #1c1c22); color: inherit; font: inherit; }
.push-pref-status.is-error { color: #e76855; }

.music-track-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.music-track-chip {
  border: 1px solid var(--border, #2a2a33);
  background: var(--panel-2, #1c1c22);
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.music-track-chip:hover {
  border-color: #00b89a;
}

.music-track-chip.is-selected {
  background: rgba(0, 184, 154, 0.15);
  border-color: #00b89a;
  color: #00b89a;
}

.music-flow-summary {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted, #8b949e);
}

.bg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bg-preview {
  width: 72px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--border, #2a2a33);
  background: var(--panel-2, #1c1c22) center/cover no-repeat;
  flex-shrink: 0;
}

.bg-preview.has-image {
  border-color: #00b89a;
}

.bg-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bg-upload-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* User custom background (device-only)
   IMPORTANT: never set position:relative on .account-panel /
   .account-backdrop — that overrides their fixed drawer
   positioning and dumps the panel into page flow. */
html.has-user-bg body,
html.has-user-bg #app {
  background-image: var(--user-bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

html.has-user-bg body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.55);
  pointer-events: none;
  z-index: 0;
}

/* Page content only — keep stacking above the dim overlay */
html.has-user-bg #app,
html.has-user-bg .main {
  position: relative;
  z-index: 1;
}

/* Account drawer must stay fixed above everything */
html.has-user-bg .account-panel {
  position: fixed;
  z-index: 90;
}
html.has-user-bg .account-backdrop {
  position: fixed;
  z-index: 80;
}

/* ---- Pill streak badge ---- */
.points-pill .pill-streak {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 107, 77, 0.4);
  color: #ff8f6b;
  white-space: nowrap;
  line-height: 1.2;
}
.points-pill .pill-streak.is-pulse {
  animation: streakPillPulse 0.7s ease;
}

/* ---- Streak celebration overlay (glass / transparent) ---- */
.streak-celeb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 8, 14, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.streak-celeb-backdrop[hidden] {
  display: none !important;
}
.streak-celeb-backdrop.is-open {
  opacity: 1;
}
.streak-celeb-card {
  width: min(340px, 100%);
  text-align: center;
  padding: 28px 22px 22px;
  border-radius: 22px;
  background: rgba(18, 20, 28, 0.45);
  border: 1px solid rgba(255, 140, 80, 0.28);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 20px 48px rgba(0, 0, 0, 0.28),
    0 0 40px rgba(255, 100, 40, 0.12);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transform: scale(0.86) translateY(12px);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.22, 1.2, 0.36, 1), opacity 0.3s ease;
}
.streak-celeb-backdrop.is-open .streak-celeb-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.streak-celeb-fire {
  font-size: 72px;
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(255, 120, 40, 0.75));
  animation: streakFirePulse 1.1s ease-in-out infinite;
  user-select: none;
}
.streak-celeb-count-wrap {
  margin: 10px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.streak-celeb-count {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffe08a 0%, #ff8c42 45%, #ff5c2b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 12px rgba(255, 100, 40, 0.35));
}
.streak-celeb-unit {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 180, 120, 0.85);
}
.streak-celeb-title {
  margin: 12px 0 6px;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, #f4f6fb);
}
.streak-celeb-msg {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted, #9aa3b2);
}
.streak-celeb-btn {
  min-width: 140px;
}
@keyframes streakFirePulse {
  0%, 100% { transform: scale(1) rotate(-2deg); filter: drop-shadow(0 0 14px rgba(255, 120, 40, 0.65)); }
  50% { transform: scale(1.12) rotate(2deg); filter: drop-shadow(0 0 28px rgba(255, 140, 50, 0.95)); }
}
@keyframes streakPillPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); box-shadow: 0 0 12px rgba(255, 120, 40, 0.5); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .streak-celeb-fire { animation: none; }
  .streak-celeb-card { transition: none; }
  .points-pill .pill-streak.is-pulse { animation: none; }
}

/* ---- Daily Fox card ---- */
.daily-fox-section {
  padding-top: 14px !important;
}
.daily-fox-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(51,225,255,0.06), rgba(255,61,203,0.05));
  border: 1px solid var(--border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.daily-fox-card.is-hot {
  border-color: rgba(255, 107, 77, 0.4);
  box-shadow: 0 0 20px rgba(255, 107, 77, 0.12);
}
.daily-fox-img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.08);
  background: var(--panel-2);
}
.daily-fox-body {
  min-width: 0;
  flex: 1;
}
.daily-fox-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}
.daily-fox-msg {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  margin-bottom: 8px;
}
.daily-fox-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.daily-fox-streak {
  font-size: 11px;
  font-weight: 700;
  color: #ff8f6b;
  background: transparent;
  border: 1px solid rgba(255, 107, 77, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
}
.daily-fox-stage {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(51, 225, 255, 0.1);
  border: 1px solid rgba(51, 225, 255, 0.25);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Stage accents */
.daily-fox-card[data-stage="glowing"] .daily-fox-img,
.daily-fox-card[data-stage="fire"] .daily-fox-img,
.daily-fox-card[data-stage="legend"] .daily-fox-img {
  box-shadow: 0 0 16px rgba(51, 225, 255, 0.35);
}

/* ---- Admin portal button ---- */
.account-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-portal-btn {
  text-align: center;
  text-decoration: none !important;
  display: block;
}
.admin-portal-btn[hidden] {
  display: none !important;
}



/* ---- Weak spot results card ---- */
.weak-spot-card {
  margin: 18px auto 0;
  max-width: 420px;
  text-align: left;
  background: rgba(255, 107, 77, 0.08);
  border: 1px solid rgba(255, 107, 77, 0.28);
  border-radius: 12px;
  padding: 14px 16px;
}
.weak-spot-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  color: #ff8f6b;
}
.weak-spot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.weak-spot-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.weak-name { font-weight: 600; color: var(--ink); }
.weak-meta { font-size: 11px; color: var(--muted); }


/* ============================================================
   PWA INSTALL — themed modal + account button
   ============================================================ */

.install-app-btn {
  text-align: center;
  width: 100%;
}
.install-app-btn[hidden] {
  display: none !important;
}

.install-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.install-modal-backdrop.open {
  opacity: 1;
}
.install-modal-backdrop[hidden] {
  display: none !important;
}

.install-modal {
  position: relative;
  width: min(380px, 100%);
  background: linear-gradient(165deg, #161a24 0%, #0e1118 100%);
  border: 1px solid rgba(51, 225, 255, 0.22);
  border-radius: 20px;
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(51, 225, 255, 0.08);
  overflow: hidden;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.install-modal-backdrop.open .install-modal {
  transform: translateY(0) scale(1);
}

.install-modal-glow {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(51, 225, 255, 0.22), transparent 70%);
  pointer-events: none;
}

.install-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}
.install-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

.install-modal-logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  margin-bottom: 12px;
  box-shadow: 0 0 24px rgba(51, 225, 255, 0.25);
  position: relative;
  z-index: 1;
}

.install-modal h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  position: relative;
  z-index: 1;
}

.install-modal-tag {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 16px;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

.install-modal-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.install-modal-perks li {
  font-size: 13px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.install-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.install-modal-cta {
  width: 100%;
  padding: 12px 16px;
  font-weight: 700;
}
.install-modal-actions .btn {
  width: 100%;
}

.install-modal-ios {
  text-align: left;
  font-size: 13px;
  color: var(--muted);
  position: relative;
  z-index: 1;
}
.install-modal-ios p {
  margin: 0 0 8px;
  color: var(--ink);
  font-weight: 600;
}
.install-modal-ios ol {
  margin: 0 0 16px;
  padding-left: 20px;
  line-height: 1.55;
}
.install-modal-ios .btn {
  width: 100%;
}
.ios-share {
  display: inline-block;
  padding: 0 4px;
  color: var(--accent);
}

/* ---- PWA update bar + offline banner ---- */
.pwa-update-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: linear-gradient(135deg, #161a24, #0e1118);
  border: 1px solid rgba(51, 225, 255, 0.3);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: calc(100vw - 24px);
}
.pwa-update-bar.show {
  transform: translateX(-50%) translateY(0);
}
.pwa-update-bar .btn.small {
  padding: 6px 12px;
  font-size: 12px;
}

.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  text-align: center;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 107, 77, 0.95);
  color: #1a0a08;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  pointer-events: none;
}
.offline-banner.show {
  transform: translateY(0);
}


/* ==================== TERMS OF AGREEMENT MODAL ==================== */
.terms-modal {
  width: 100%;
  max-width: 520px;
  max-height: min(88vh, 680px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.terms-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border, #333);
  flex-shrink: 0;
}
.terms-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.terms-close-btn {
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
}
.terms-close-btn:hover { opacity: 1; }
.terms-modal-body {
  padding: 16px 20px 8px;
  overflow-y: auto;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text, #e8eaed);
}
.terms-modal-body h3 {
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, #33E1FF);
}
.terms-modal-body h3:first-of-type { margin-top: 4px; }
.terms-modal-body p {
  margin: 0 0 8px;
  color: var(--muted, #9aa3b2);
}
.terms-modal-body ul {
  margin: 6px 0 10px 18px;
  padding: 0;
  color: var(--muted, #9aa3b2);
}
.terms-modal-body li {
  margin-bottom: 4px;
}
.terms-updated {
  font-size: 11.5px !important;
  opacity: 0.75;
  margin-bottom: 12px !important;
}
.terms-footer-note {
  margin-top: 16px !important;
  padding-top: 12px;
  border-top: 1px solid var(--border, #333);
  font-size: 12.5px !important;
  color: var(--text, #e8eaed) !important;
  font-weight: 500;
}
.terms-modal-actions {
  padding: 12px 20px 18px;
  border-top: 1px solid var(--border, #333);
  flex-shrink: 0;
}
.terms-modal-actions .btn {
  width: 100%;
}


/* Course grid filter hint (programme / level / semester) */
.course-filter-hint {
  font-size: 12.5px;
  color: var(--muted, #9aa3b2);
  margin: -4px 0 14px;
  letter-spacing: 0.01em;
}
.empty-courses {
  margin-top: 24px;
  text-align: center;
  color: var(--muted, #9aa3b2);
  font-size: 14px;
}


/* ==================== HOME HUB ==================== */
.brand-mini { cursor: pointer; }
.home-hero {
  margin-bottom: 22px;
}
.home-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #33E1FF);
  margin-bottom: 8px;
}
.home-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.home-sub {
  margin: 0;
  max-width: 520px;
  color: var(--muted, #9aa3b2);
  font-size: 14px;
  line-height: 1.5;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 860px) {
  .hub-grid { grid-template-columns: 1fr; }
}
.hub-card {
  text-align: left;
  border: 1px solid var(--border, #2a2e3a);
  background: var(--panel, #12141c);
  border-radius: 16px;
  padding: 18px 18px 16px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 0 0 0 transparent;
}
.hub-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--hub-color, #33E1FF) 55%, transparent);
  box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--hub-color, #33E1FF) 70%, transparent);
}
.hub-card:disabled,
.hub-card.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.hub-card-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.hub-card-body h2 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
}
.hub-card-body p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #9aa3b2);
}
.hub-card-cta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hub-color, #33E1FF);
}
.hub-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.placeholder-panel {
  border: 1px solid var(--border, #2a2e3a);
  background: var(--panel, #12141c);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  max-width: 520px;
}
.placeholder-icon { font-size: 36px; margin-bottom: 10px; }
.placeholder-panel h2 {
  margin: 0 0 8px;
  font-size: 20px;
}
.placeholder-panel p {
  margin: 0 0 18px;
  color: var(--muted, #9aa3b2);
  font-size: 14px;
  line-height: 1.5;
}
.placeholder-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ==================== CLASSROOMS ==================== */
.classroom-limits-hint {
  font-size: 12.5px;
  color: var(--muted, #9aa3b2);
  margin: -6px 0 14px;
}
.classroom-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 8px;
}
@media (max-width: 720px) {
  .classroom-actions-row { grid-template-columns: 1fr; }
}
.classroom-panel {
  border: 1px solid var(--border, #2a2e3a);
  background: var(--panel, #12141c);
  border-radius: 14px;
  padding: 16px;
}
.classroom-panel h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}
.classroom-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.classroom-card {
  border: 1px solid var(--border, #2a2e3a);
  background: var(--panel, #12141c);
  border-radius: 12px;
  padding: 14px 16px;
}
.classroom-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.classroom-card-top h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.classroom-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border, #333);
  color: var(--muted, #9aa3b2);
}
.classroom-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted, #9aa3b2);
}
.join-code-pill {
  color: var(--accent, #33E1FF);
}
.join-code-pill b {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
}
.hint-muted {
  font-size: 12.5px;
  color: var(--muted, #9aa3b2);
}


/* Classroom detail + roster */
button.classroom-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
button.classroom-card:hover {
  border-color: color-mix(in srgb, #9B5CFF 50%, transparent);
  transform: translateY(-1px);
}
.classroom-detail-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.classroom-detail-title {
  margin: 0;
  font-size: clamp(20px, 3.5vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.classroom-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.roster-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.roster-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border, #2a2e3a);
  background: var(--panel, #12141c);
  border-radius: 12px;
}
.roster-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--panel-2, #1c1c22);
  border: 1px solid var(--border, #333);
  flex-shrink: 0;
}
.roster-info { flex: 1; min-width: 0; }
.roster-name {
  font-weight: 600;
  font-size: 14px;
}
.roster-you {
  font-weight: 500;
  color: var(--muted, #9aa3b2);
  font-size: 12px;
}
.roster-sub {
  font-size: 12px;
  color: var(--muted, #9aa3b2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.roster-points {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #9aa3b2);
}
.roster-kick-btn {
  padding: 4px 10px;
  font-size: 12px;
}


/* Class leaderboard inside classroom */
.classroom-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 800px) {
  .classroom-detail-grid { grid-template-columns: 1fr; }
}
.class-lb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.class-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border, #2a2e3a);
  background: var(--panel, #12141c);
  border-radius: 12px;
}
.class-lb-row.is-you {
  border-color: color-mix(in srgb, #33E1FF 55%, transparent);
  background: color-mix(in srgb, #33E1FF 8%, var(--panel, #12141c));
}
.class-lb-row.is-top {
  box-shadow: 0 0 0 1px color-mix(in srgb, #FFD23D 20%, transparent);
}
.class-lb-rank {
  width: 36px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #9aa3b2);
  flex-shrink: 0;
}
.class-lb-pts {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--accent, #33E1FF);
  margin-left: auto;
  padding-left: 8px;
}
.class-lb-you-hint {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted, #9aa3b2);
}
.class-lb-you-hint b { color: var(--text, #e8eaed); }

/* Linked course + delete */
.course-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--chip-color, var(--led-1));
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--led-1)) 45%, transparent);
  background: color-mix(in srgb, var(--chip-color, var(--led-1)) 12%, transparent);
}
.linked-course-empty {
  opacity: 0.75;
}
.linked-course-panel {
  margin-top: 18px;
  border: 1px solid var(--border, #2a2e3a);
  border-left: 3px solid var(--link-color, var(--led-1));
  background: var(--panel, #12141c);
  border-radius: 14px;
  padding: 16px 18px 14px;
}
.linked-course-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--link-color, var(--led-1));
  margin-bottom: 8px;
}
.linked-course-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-end;
}
.linked-course-code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--link-color, var(--led-1));
}
.linked-course-body h2 {
  margin: 4px 0 4px;
  font-size: 18px;
  font-weight: 700;
}
.linked-course-body p,
.linked-course-missing {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #9aa3b2);
  line-height: 1.45;
}
.linked-course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.linked-course-edit {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #2a2e3a);
}
.linked-course-edit label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
.linked-course-edit-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.linked-course-edit-row select {
  flex: 1;
  min-width: 0;
}
.classroom-danger {
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border, #2a2e3a));
  border-radius: 14px;
  background: color-mix(in srgb, var(--danger) 6%, var(--panel, #12141c));
}
.classroom-danger h3 {
  margin: 0 0 6px;
  font-size: 15px;
}
.classroom-danger p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted, #9aa3b2);
  line-height: 1.45;
}
@media (max-width: 560px) {
  .linked-course-edit-row {
    flex-direction: column;
  }
  .classroom-detail-actions .btn,
  .linked-course-actions .btn {
    min-height: 40px;
  }
}

/* ============================================================
   CIRCUIT LAB
   ============================================================ */

.circuit-lab-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}
.circuit-lab-sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--muted);
  max-width: 520px;
  line-height: 1.5;
}

.circuit-quota {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  white-space: nowrap;
}
.circuit-quota .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--led-6);
  box-shadow: 0 0 0 3px rgba(20, 184, 196, 0.18);
}
.circuit-quota.is-premium .dot {
  background: var(--led-4);
  box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.22);
}
.circuit-quota.is-empty {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}
.circuit-quota.is-empty .dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.18);
}

.circuit-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .circuit-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .circuit-card-grid { grid-template-columns: 1fr; gap: 12px; }
}

.circuit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 18px 18px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  font: inherit;
  color: inherit;
}
.circuit-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--card-color, #33E1FF) 45%, var(--border));
  box-shadow: 0 12px 28px -16px rgba(51, 225, 255, 0.35);
}
.circuit-card-top {
  margin-bottom: 10px;
}
.circuit-level {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--card-color, #33E1FF);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--card-color, #33E1FF) 35%, transparent);
  background: color-mix(in srgb, var(--card-color, #33E1FF) 10%, transparent);
}
.circuit-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 8px;
  line-height: 1.3;
}
.circuit-card p {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  flex: 1;
}
.circuit-card-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--card-color, #33E1FF);
}

.circuit-personal {
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
}
.circuit-personal h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-family: var(--font-display);
}
.circuit-personal p {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.circuit-personal.is-locked {
  opacity: 0.85;
}

/* Runner */
.circuit-runner-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.circuit-runner-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  margin: 6px 0 4px;
}
.circuit-runner-blurb {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  max-width: 520px;
}

.circuit-runner-body {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 800px) {
  .circuit-runner-body {
    grid-template-columns: 1fr;
  }
}

.circuit-explain {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.circuit-steps {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.circuit-steps li {
  margin-bottom: 10px;
}
.circuit-steps li:last-child {
  margin-bottom: 0;
}
.circuit-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted-2);
  line-height: 1.4;
}

.circuit-frame-wrap {
  background: #0a0b10;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.circuit-iframe {
  width: 100%;
  height: min(70vh, 640px);
  min-height: 480px;
  border: none;
  background: #0a0b10;
  flex: 1;
}
.circuit-iframe-fallback {
  padding: 16px;
  text-align: center;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.circuit-iframe-fallback p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
}
.circuit-preview-wrap {
  position: relative;
  min-height: 320px;
}
.circuit-preview-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
  background: #0e1118;
}
.circuit-preview-cta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.circuit-credit {
  margin: 0;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--muted-2);
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.circuit-credit a {
  color: var(--led-6);
  text-decoration: none;
}
.circuit-credit a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .circuit-runner-title {
    font-size: 20px;
  }
  .circuit-iframe {
    height: 52vh;
    min-height: 300px;
  }
  .circuit-card {
    padding: 14px 14px 12px;
  }
  .circuit-card h3 {
    font-size: 16px;
  }
}

/* ============================================================
   CLASSROOM ROOM — members left + chat + owner tools
   ============================================================ */

.classroom-room {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100dvh - 120px);
}

.room-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.room-header-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.room-back-btn {
  flex-shrink: 0;
  min-width: 40px;
  padding-left: 12px;
  padding-right: 12px;
}
.room-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 3.5vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.room-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}
.room-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.room-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* Classroom study hub: shared goals and focus sessions are the primary room tools. */
.classroom-study-hub {
  --study-accent: var(--led-6, #08b99c);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(16px, 2.5vw, 26px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 96%, var(--study-accent));
  box-shadow: 0 12px 36px rgba(15, 23, 42, .06);
}
.classroom-study-heading,
.classroom-study-section-title,
.classroom-live-top,
.classroom-study-actions,
.classroom-goal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.classroom-study-heading h2,
.classroom-study-section-title h3,
.classroom-goal-card h3,
.classroom-start-session h3,
.classroom-goal-create h3,
.classroom-live-session h3 { margin: 4px 0; color: var(--ink); }
.classroom-study-heading h2 { font-size: clamp(20px, 3vw, 26px); }
.classroom-study-heading p,
.classroom-study-section-title p,
.classroom-live-session p,
.classroom-study-footnote { margin: 5px 0 0; color: var(--muted); line-height: 1.5; }
.study-eyebrow {
  color: var(--study-accent);
  font: 700 11px/1.3 var(--font-mono, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.classroom-study-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr); gap: 16px; align-items: start; }
.classroom-goals,
.classroom-start-session { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel-2, var(--panel)); }
.classroom-goal-list { display: grid; gap: 9px; margin-top: 12px; }
.classroom-goal-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.classroom-goal-card.is-done { border-color: color-mix(in srgb, #17a66a 48%, var(--border)); background: color-mix(in srgb, #17a66a 7%, var(--panel)); }
.classroom-goal-main { min-width: 0; }
.classroom-goal-main h3 { font-size: 16px; }
.classroom-goal-main p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.classroom-goal-status { color: var(--muted); font: 700 10px/1.3 var(--font-mono, monospace); letter-spacing: .09em; text-transform: uppercase; }
.classroom-goal-card.is-done .classroom-goal-status { color: #168653; }
.classroom-goal-actions { justify-content: flex-end; flex-wrap: wrap; }
.classroom-goal-create { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border); }
.classroom-study-form { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(120px, .75fr) auto; gap: 9px; align-items: end; margin-top: 10px; }
.classroom-study-hub label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
.classroom-study-hub select,
.classroom-study-hub input[type="date"] { width: 100%; min-width: 0; min-height: 42px; padding: 8px 10px; color: var(--ink); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; font: inherit; }
.classroom-start-session { display: grid; gap: 12px; }
.classroom-start-session .classroom-study-section-title { margin-bottom: 2px; }
.classroom-start-session > .btn { min-height: 44px; }
.classroom-study-footnote { font-size: 12px; }
.classroom-live-session { padding: 18px; border: 1px solid color-mix(in srgb, #17a66a 38%, var(--border)); border-radius: 18px; background: linear-gradient(130deg, color-mix(in srgb, #17a66a 12%, var(--panel)), var(--panel)); }
.classroom-live-session h3 { margin-top: 12px; font-size: clamp(19px, 3vw, 24px); }
.classroom-live-indicator { display: inline-flex; align-items: center; gap: 7px; color: #13834f; font: 700 11px var(--font-mono, monospace); letter-spacing: .08em; }
.classroom-live-indicator i { width: 8px; height: 8px; border-radius: 50%; background: #19b66c; box-shadow: 0 0 0 4px color-mix(in srgb, #19b66c 18%, transparent); animation: classroom-live-pulse 1.8s infinite; }
@keyframes classroom-live-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, #19b66c 7%, transparent); } }
.classroom-session-length { color: var(--muted); font-size: 12px; }
.classroom-session-timer { margin: 12px 0; color: var(--ink); font: 700 clamp(22px, 4vw, 32px)/1.2 var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
.classroom-session-timer.is-finished { color: #b45309; font-family: inherit; font-size: 14px; font-weight: 650; line-height: 1.4; }
.classroom-study-attendees { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.classroom-study-attendee { padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); background: var(--panel); font-size: 12px; }
.classroom-study-actions { justify-content: flex-start; flex-wrap: wrap; }
.classroom-study-recap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2, var(--panel)); }
.classroom-study-recap strong { color: var(--ink); }
.classroom-study-recap > span:not(.study-eyebrow) { color: var(--muted); font-size: 13px; }
.classroom-study-empty { padding: 15px; border: 1px dashed var(--border); border-radius: 13px; color: var(--muted); line-height: 1.5; }
.classroom-study-empty strong,
.classroom-study-empty span { display: block; }
.classroom-study-empty strong { margin-bottom: 4px; color: var(--ink); }
.classroom-link-course { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.classroom-link-course select { flex: 1 1 260px; }
.classroom-study-footer { color: var(--muted); font-size: 12px; }

@media (max-width: 820px) {
  .room-body {
    grid-template-columns: 1fr;
  }
  .classroom-study-columns { grid-template-columns: 1fr; }
}

/* Members sidebar */
.room-members {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100dvh - 160px);
}
.room-members-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 6px 10px;
}
.room-members-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
@media (max-width: 820px) {
  .room-members {
    max-height: none;
  }
  .room-members-list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding-bottom: 4px;
  }
  .room-member {
    min-width: 160px;
  }
}

.room-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--panel-2);
}
.room-member.is-you {
  border-color: color-mix(in srgb, var(--led-6) 40%, transparent);
}
.room-member.rank-1 {
  border-color: color-mix(in srgb, #FFD23D 55%, transparent);
  background: color-mix(in srgb, #FFD23D 12%, var(--panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, #FFD23D 20%, transparent);
}
.room-member.rank-2 {
  border-color: color-mix(in srgb, #C0C7D4 50%, transparent);
  background: color-mix(in srgb, #C0C7D4 10%, var(--panel));
}
.room-member.rank-3 {
  border-color: color-mix(in srgb, #E8A87C 50%, transparent);
  background: color-mix(in srgb, #E8A87C 12%, var(--panel));
}
.room-member-rank {
  width: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}
.room-member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--panel);
}
.room-member-info {
  min-width: 0;
  flex: 1;
}
.room-member-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-crown {
  margin-left: 2px;
}
.room-member-pts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* Main column */
.room-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.room-chat {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: min(70vh, 640px);
  flex: 1;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
  height: min(62vh, 580px);
  max-height: none;
}
.chat-empty {
  margin: auto;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 24px;
  max-width: 360px;
  line-height: 1.5;
}
.chat-empty-error {
  color: var(--danger);
  font-size: 13px;
}

.chat-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 100%;
}
.chat-msg.is-mine {
  flex-direction: row-reverse;
}
.chat-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--panel-2);
}
.chat-msg-body {
  max-width: min(520px, 85%);
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 8px 12px 10px;
}
.chat-msg.is-mine .chat-msg-body {
  background: color-mix(in srgb, var(--led-1) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--led-1) 25%, var(--border));
}
.chat-msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
}
.chat-msg-name {
  font-weight: 600;
  color: var(--ink);
}
.chat-msg-time {
  color: var(--muted-2);
}
.chat-msg-del {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.chat-msg-del:hover { color: var(--danger); }
.chat-bubble-text {
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-attach {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
}
.chat-attach-icon { font-size: 20px; }
.chat-attach a {
  color: var(--led-1);
  font-weight: 600;
  text-decoration: none;
}
.chat-attach a:hover { text-decoration: underline; }
.chat-attach-cap, .chat-attach-name {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.chat-audio-wrap audio {
  display: block;
  width: min(260px, 100%);
  margin-top: 6px;
  height: 32px;
}

.chat-poll-q, .chat-quiz-q {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}
.chat-poll-opts, .chat-quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-poll-opt, .chat-quiz-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  font: inherit;
  color: inherit;
  overflow: hidden;
}
.chat-poll-opt-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--led-1) 18%, transparent);
  z-index: 0;
  pointer-events: none;
}
.chat-poll-opt-text, .chat-poll-opt-n {
  position: relative;
  z-index: 1;
}
.chat-poll-opt-n {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.chat-poll-opt.is-selected {
  border-color: var(--led-1);
}
.chat-poll-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted-2);
}
.chat-quiz-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--led-4);
  margin-bottom: 4px;
}
.chat-quiz-opt.is-correct {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, var(--panel));
}
.chat-quiz-opt.is-wrong {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--panel));
}
.chat-quiz-result {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.chat-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.chat-compose-tools {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.chat-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  cursor: pointer;
  font-size: 15px;
}
.chat-attach-btn:hover {
  border-color: var(--muted-2);
}
.chat-text-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.chat-text-input:focus {
  outline: none;
  border-color: var(--led-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--led-1) 18%, transparent);
}
.chat-status {
  margin: 0;
  padding: 0 14px 8px;
  font-size: 12px;
  color: var(--muted);
  min-height: 1em;
}

/* Owner admin under chat */
.room-admin {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px 14px;
}
.room-admin-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.room-admin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.room-admin-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.room-admin-panel input[type="text"] {
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
}
.room-admin-hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.room-kick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 640px) {
  .classroom-room {
    min-height: calc(100dvh - 100px);
  }
  .room-chat {
    min-height: min(58vh, 520px);
  }
  .chat-messages {
    height: min(48vh, 420px);
    min-height: 260px;
  }
  .chat-compose {
    padding: 8px 10px;
    gap: 6px;
  }
  .room-header-actions .btn {
    min-height: 36px;
  }
  .classroom-study-hub { gap: 14px; padding: 14px; border-radius: 17px; }
  .classroom-study-heading { align-items: flex-start; }
  .classroom-study-heading > .btn { min-height: 40px; white-space: nowrap; }
  .classroom-goals, .classroom-start-session { padding: 12px; }
  .classroom-study-form { grid-template-columns: 1fr; }
  .classroom-study-form .btn { min-height: 44px; }
  .classroom-goal-card { align-items: flex-start; flex-direction: column; }
  .classroom-goal-actions { justify-content: flex-start; width: 100%; }
  .classroom-goal-actions .btn { flex: 1 1 auto; min-height: 42px; }
  .classroom-study-actions .btn { flex: 1 1 140px; min-height: 44px; }
  .classroom-live-session { padding: 14px; }
  .classroom-study-recap { align-items: flex-start; flex-direction: column; }
}

/* Classroom modals (poll / quiz / kick) — must stay display:none until opened */
.room-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(18, 20, 28, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.room-modal-backdrop.is-open {
  display: flex !important;
}
.room-modal {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
  padding: 20px 20px 18px;
  max-height: min(90vh, 640px);
  overflow-y: auto;
}
.room-modal h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}
.room-modal-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.room-modal-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.room-modal-fields input[type="text"] {
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
}
.room-modal-fields input:focus {
  outline: none;
  border-color: var(--led-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--led-1) 18%, transparent);
}
.room-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.room-modal .room-kick-list {
  margin-bottom: 8px;
}

/* ============================================================
   TD LAB — technical drawing player
   ============================================================ */

.td-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.td-player-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.td-player-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 3.5vw, 24px);
  margin: 6px 0 4px;
}
.td-player-blurb {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  max-width: 520px;
}
.td-player-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.td-stage-wrap {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 260px);
  gap: 14px;
  align-items: start;
}
@media (max-width: 760px) {
  .td-stage-wrap { grid-template-columns: 1fr; }
}

.td-canvas-wrap {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  background: #0e1118;
  line-height: 0;
}
.td-canvas-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

.td-step-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.td-step-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.td-step-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  min-height: 3.2em;
  margin-bottom: 12px;
}
.td-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
  margin-bottom: 8px;
}
.td-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--led-1), #FF3DCB);
  border-radius: 999px;
  transition: width 0.2s ease;
}
.td-step-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.td-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.td-speed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.td-speed select {
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}

/* ============================================================
   PREMIUM MODAL
   ============================================================ */
.premium-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(8, 10, 16, 0.72);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.premium-modal-backdrop.is-open {
  display: flex;
}
.premium-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, #33e1ff 28%, var(--border));
  border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow: 0 28px 80px -24px rgba(0, 0, 0, 0.62), 0 0 34px rgba(51, 225, 255, 0.08);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, #33e1ff 45%, transparent) transparent;
}
.premium-modal::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;
  height: 2px;
  border-radius: 0 0 99px 99px;
  background: linear-gradient(90deg, #33e1ff, #9b6dff, #ff55c8);
  box-shadow: 0 0 16px rgba(51, 225, 255, 0.48);
}
.premium-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.premium-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a0b10;
  background: linear-gradient(90deg, #ffd23d, #33e1ff);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 10px;
}
.premium-modal h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}
.premium-sub {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}
.premium-perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.35;
}
.premium-perks li {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, #8d72ff 22%, var(--border));
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(51, 225, 255, 0.055), rgba(155, 109, 255, 0.07) 58%, rgba(255, 85, 200, 0.035));
}
.premium-perks li span {
  display: block;
  margin-bottom: 3px;
  color: #7eeaff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.09em;
}
@media (max-width: 480px) {
  .premium-modal { padding: 20px 16px 16px; }
  .premium-perks { gap: 6px; font-size: 11px; }
  .premium-perks li { padding: 8px; }
}
.premium-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: var(--panel-2);
  border-radius: 12px;
  margin-bottom: 14px;
}
.premium-toggle-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.premium-toggle-btn.is-active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.premium-price-card {
  text-align: center;
  margin-bottom: 16px;
  padding: 16px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--led-1, #33e1ff) 35%, var(--border));
  background: color-mix(in srgb, var(--led-1, #33e1ff) 8%, var(--panel-2, #f0f2f7));
}
.premium-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.premium-currency {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}
.premium-amount {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  /* Always high-contrast vs card — works in light + dark */
  color: #0b6e8a;
  line-height: 1;
}
.premium-period {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
.premium-save {
  margin: 8px 0 0;
  font-size: 13px;
  color: #0d8a4a;
  font-weight: 600;
}

/* Dark mode (html.dark-mode): brighter amount so it still pops */
html.dark-mode .premium-amount {
  color: #5ce1ff;
}
html.dark-mode .premium-save {
  color: #39ff88;
}
html.dark-mode .premium-price-card {
  background: color-mix(in srgb, #33e1ff 12%, #12141c);
  border-color: color-mix(in srgb, #33e1ff 40%, #2a3142);
}
.premium-pay-btn {
  width: 100%;
  min-height: 48px;
  font-weight: 700;
}
.premium-fine {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--muted-2);
}

/* ============================================================
   BREADBOARD LAB — realistic protoboard
   ============================================================ */
.bb-lab { max-width: 1180px; margin: 0 auto; }
.bb-lab-top {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.bb-lab-title {
  margin: 2px 0 0;
  font: 700 clamp(1.35rem, 2.5vw, 1.9rem)/1.15 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -.035em;
  color: var(--ink, #e8ecf4);
}
.bb-lab-sub {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 540px;
  line-height: 1.45;
}
.bb-lab-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.bb-component-dock {
  position: relative;
  z-index: 5;
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(51,225,255,0.07), rgba(124,92,255,0.05)), var(--panel);
  overflow: hidden;
}
.bb-component-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
}
.bb-component-bar-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bb-component-eyebrow, .bb-component-group-title {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.bb-component-bar-copy strong { font-size: 13px; font-weight: 650; }
.bb-component-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(51,225,255,.32);
  border-radius: 11px;
  color: var(--ink, #e8ecf4);
  background: rgba(51,225,255,.08);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.bb-component-toggle:hover { background: rgba(51,225,255,.14); }
.bb-component-toggle-icon { color: var(--accent, #33e1ff); font-size: 18px; line-height: 1; }
.bb-component-toggle-caret { transition: transform .16s ease; }
.bb-component-toggle[aria-expanded="true"] .bb-component-toggle-caret { transform: rotate(180deg); }
.bb-component-drawer[hidden] { display: none !important; }
.bb-component-drawer:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}
.bb-component-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 11px;
  background: rgba(0,0,0,.12);
}
.bb-component-group-title { grid-column: 1 / -1; margin: 0 0 2px; }
.bb-component-group .bb-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 0;
  padding: 7px 9px;
  text-align: left;
  font-size: 11px;
}
.bb-part-icon {
  display: inline-flex;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  color: #d7e2ee;
  background: rgba(255,255,255,.04);
  font-size: 15px;
}
.bb-part-icon.led { color: #ff7272; }
.bb-part-icon.resistor { color: #f1d38a; }
.bb-part-icon.capacitor { color: #92d8ff; }
.bb-part-icon.wire { color: #ff7f73; }
.bb-part-icon.meter { color: #82ffc0; font: 700 11px ui-monospace, monospace; }
.bb-part-icon.erase { color: #ff9a8e; }
@media (max-width: 760px) {
  .bb-component-drawer:not([hidden]) { grid-template-columns: 1fr; }
  .bb-component-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .bb-component-bar { align-items: stretch; flex-direction: column; }
  .bb-component-toggle { justify-content: center; width: 100%; }
}
.bb-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 235px;
  gap: 12px;
  align-items: start;
}
@media (max-width: 960px) {
  .bb-workspace { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bb-board-wrap { order: 1; grid-column: 1; grid-row: 1; }
  .bb-palette { order: 2; grid-column: 1; grid-row: 2; }
  .bb-dmm { order: 3; grid-column: 1; grid-row: 3; }
}
.bb-palette, .bb-dmm {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
.bb-palette {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(270px, .9fr) minmax(320px, 1.4fr);
  gap: 10px 14px;
  align-items: start;
  padding: 11px 13px;
}
.bb-probe-panel { min-width: 0; }
.bb-probe-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bb-probe-tools .bb-tool { min-height: 38px; margin: 0; padding: 7px 6px; text-align: center; font-size: 10px; }
.bb-settings { min-width: 0; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; background: rgba(0,0,0,.12); }
.bb-settings summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 8px 11px;
  color: var(--ink, #e8ecf4);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.bb-settings summary::-webkit-details-marker { display: none; }
.bb-settings summary::after { content: "＋"; color: var(--accent, #33e1ff); font-size: 16px; }
.bb-settings[open] summary::after { content: "−"; }
.bb-settings-hint { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 500; }
.bb-settings-grid { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 2px 10px; padding: 0 11px 10px; border-top: 1px solid rgba(255,255,255,.06); }
.bb-settings-grid .bb-field { min-width: 0; }
.bb-settings-grid .bb-toggle { min-height: 34px; margin: 8px 0 2px; font-size: 10px; }
.bb-hint {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 16px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
}
.bb-board-wrap { grid-column: 1; min-width: 0; overflow-x: auto; padding: 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(ellipse at 50% 0%, rgba(65,89,112,.2), transparent 65%), linear-gradient(180deg, #111720, #0c1016); }
.bb-board { width: 100%; min-width: 0; display: flex; justify-content: center; }
.bb-dmm { grid-column: 2; }
.bb-palette-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.bb-tool {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2, rgba(255,255,255,0.03));
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.bb-tool.is-active {
  border-color: rgba(51,225,255,.55);
  box-shadow: 0 0 0 1px rgba(51,225,255,.16);
  background: rgba(51,225,255,.08);
}
.bb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0 6px;
  font-size: 11px;
  color: var(--muted);
}
.bb-field select {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg, #0e1218);
  color: inherit;
}
.bb-field input[type="range"] { width: 100%; accent-color: var(--accent, #33e1ff); }
.bb-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin: 8px 0;
  cursor: pointer;
}
.bb-hint {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

/* --- Board surface --- */
.bb-board-wrap {
  overflow: hidden;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(ellipse at 50% 0%, rgba(65,89,112,.2), transparent 65%), linear-gradient(180deg, #111720, #0c1016);
}
.bb-board {
  width: 100%;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Fixed pitch grid: num | 5 holes | gutter | 5 holes */
.bb-shell {
  --bb-pitch: clamp(22px, 2vw, 30px);
  --bb-hole: clamp(14px, 1vw, 17px);
  --bb-num: 22px;
  --bb-gutter: calc(var(--bb-pitch) * 1.3);
  --bb-cream: #d8cfc2;
  --bb-cream-deep: #c4b8a8;
  --bb-ink: #3a342c;
  width: calc(var(--bb-num) + 5 * var(--bb-pitch) + var(--bb-gutter) + 5 * var(--bb-pitch) + 20px);
  max-width: 100%;
  padding: 14px 10px 16px;
  border: 1px solid rgba(64,54,43,.3);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(90deg, #cfc4b4 0%, var(--bb-cream) 8%, var(--bb-cream) 92%, #b9ad9c 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -2px 0 rgba(0,0,0,.12) inset, 0 18px 35px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.3);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.bb-col-headers,
.bb-rail-row,
.bb-row {
  display: grid;
  grid-template-columns:
    var(--bb-num)
    repeat(5, var(--bb-pitch))
    var(--bb-gutter)
    repeat(5, var(--bb-pitch));
  align-items: center;
  justify-items: center;
  min-height: var(--bb-pitch);
}

.bb-col-headers {
  margin-bottom: 4px;
  min-height: 16px;
}
.bb-col-letter {
  font-size: 10px;
  font-weight: 700;
  color: var(--bb-ink);
  opacity: 0.75;
  text-transform: lowercase;
  line-height: 1;
}
.bb-row-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--bb-ink);
  opacity: 0.7;
  justify-self: end;
  padding-right: 2px;
  line-height: 1;
}
.bb-gutter {
  width: 100%;
  height: 100%;
  min-height: var(--bb-pitch);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08) 40%, rgba(0,0,0,0.08) 60%, transparent);
}

/* Power rails */
.bb-rail-pair {
  margin: 6px 0 8px;
  padding: 4px 0;
  border-radius: 6px;
  background: rgba(0,0,0,0.04);
}
.bb-rail-row {
  position: relative;
}
.bb-rail-row.is-pos {
  box-shadow: inset 0 2px 0 rgba(200, 40, 40, 0.55);
}
.bb-rail-row.is-neg {
  box-shadow: inset 0 -2px 0 rgba(40, 80, 180, 0.55);
}
.bb-rail-label {
  grid-column: 1;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  justify-self: center;
}
.bb-rail-row.is-pos .bb-rail-label { color: #c62828; }
.bb-rail-row.is-neg .bb-rail-label { color: #1565c0; }

/* Rail rows: label sits in num column; holes fill a–j columns */
.bb-rail-row .bb-rail-label {
  grid-column: 1;
}
/* holes are sequential grid auto-placement after label — force placement */
.bb-rail-row {
  grid-template-columns: repeat(30, minmax(0, 1fr));
}
.bb-rail-row .bb-rail-label { position: absolute; left: -18px; z-index: 1; }
.bb-rail-row .bb-rail-hole { width: var(--bb-hole); height: var(--bb-hole); }

.bb-mid-label {
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(58, 52, 44, 0.45);
  margin: 2px 0 6px;
  user-select: none;
}

/* Terminal holes */
.bb-hole {
  width: var(--bb-hole);
  height: var(--bb-hole);
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.45);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.16), transparent 45%),
    radial-gradient(circle at 50% 50%, #1a1a1a 0%, #0a0a0a 70%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25),
    inset 0 1px 2px rgba(0,0,0,0.85);
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow 0.12s ease, transform 0.1s ease, background .12s ease;
  touch-action: manipulation;
}
.bb-hole:hover {
  transform: scale(1.12);
  box-shadow:
    0 0 0 2px rgba(51, 225, 255, 0.55),
    inset 0 1px 2px rgba(0,0,0,0.85);
}
.bb-hole.is-pending {
  box-shadow:
    0 0 0 2px rgba(255, 210, 61, 0.9),
    0 0 10px rgba(255, 210, 61, 0.55),
    inset 0 1px 2px rgba(0,0,0,0.85);
}
.bb-hole.is-probe-a {
  box-shadow:
    0 0 0 2px #ff6b4d,
    0 0 8px rgba(255, 107, 77, 0.55),
    inset 0 1px 2px rgba(0,0,0,0.85);
}
.bb-hole.is-probe-b {
  box-shadow:
    0 0 0 2px #33E1FF,
    0 0 8px rgba(51, 225, 255, 0.5),
    inset 0 1px 2px rgba(0,0,0,0.85);
}
.bb-hole.is-used {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.1), transparent 45%),
    radial-gradient(circle at 50% 50%, #2a322e 0%, #121816 70%);
}
.bb-viewport-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 auto 10px;max-width:1160px;color:#768394;font-size:12px}
.bb-reset-view{min-height:34px;padding:0 13px;border:1px solid #d4dbe3;border-radius:9px;background:#fff;color:#263548;font:600 12px/1 inherit;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.bb-reset-view:hover{background:#f2f6f8;border-color:#aab8c7}
.bb-shell.bb-3d-active{position:relative;isolation:isolate;overflow:hidden;width:min(100%,1160px);max-width:1160px;height:clamp(300px,42vw,600px);min-height:0;padding:0;border-radius:16px;background:transparent;border-color:rgba(0,0,0,.2);box-shadow:none;touch-action:none}
.bb-shell.bb-3d-active>.bb-3d-canvas{position:absolute;inset:0;z-index:4;width:100%;height:100%;display:block;pointer-events:auto;touch-action:none;cursor:grab}
.bb-shell.bb-3d-active>.bb-3d-canvas:active{cursor:grabbing}
.bb-shell.bb-3d-active>.bb-col-headers,.bb-shell.bb-3d-active>.bb-rail-pair,.bb-shell.bb-3d-active>.bb-mid-label,.bb-shell.bb-3d-active>.bb-row,.bb-shell.bb-3d-active>.bb-parts-svg{visibility:hidden!important;pointer-events:none!important}
.bb-hole:focus-visible, .bb-tool:focus-visible, .bb-component-toggle:focus-visible, .bb-settings summary:focus-visible {
  outline: 2px solid var(--accent, #33e1ff);
  outline-offset: 2px;
}
.bb-rail-hole.is-pos {
  border-color: rgba(180, 40, 40, 0.55);
}
.bb-rail-hole.is-neg {
  border-color: rgba(40, 80, 170, 0.5);
}

/* DMM */
.bb-dmm-bezel {
  background: linear-gradient(160deg, #202a32, #10151b);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.bb-dmm-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #888;
  margin-bottom: 6px;
}
.bb-dmm-screen {
  font-family: ui-monospace, monospace;
  font-size: 26px;
  font-weight: 700;
  color: #7CFFB2;
  background: #0a120e;
  border-radius: 8px;
  padding: 12px 10px;
  text-align: right;
  margin-bottom: 10px;
  min-height: 48px;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.65);
}
.bb-dmm-modes { display: flex; gap: 6px; margin-bottom: 8px; }
.bb-dmm-mode {
  flex: 1;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: #ccc;
  font-weight: 700;
  cursor: pointer;
}
.bb-dmm-mode.is-active {
  background: rgba(124, 255, 178, 0.12);
  border-color: rgba(124, 255, 178, 0.4);
  color: #7CFFB2;
}
.bb-dmm-range {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: #9aa5ad;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bb-dmm-range select {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px;
  background: #151d23;
  color: #e8f0eb;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.bb-dmm-range select:focus-visible {
  outline: 2px solid rgba(124, 255, 178, 0.75);
  outline-offset: 2px;
}
.bb-dmm-range select:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}
.bb-dmm-meta { font-size: 11px; color: #888; }
.bb-parts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  max-height: 180px;
  overflow-y: auto;
}
.bb-parts-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  gap: 6px;
}
.bb-parts-list button {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.bb-empty { color: var(--muted); font-size: 11px; }
.bb-status {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  color: var(--muted);
}
.bb-status.is-err { color: #ff6b4d; }

@media (max-width: 960px) {
  .bb-dmm { grid-column: 1; }
  .bb-palette { grid-template-columns: minmax(0, 1fr); }
  .bb-settings-grid { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
  .bb-board-wrap { padding: 12px; }
  .bb-shell { --bb-pitch: 22px; --bb-hole: 16px; --bb-num: 20px; --bb-gutter: 25px; }
  .bb-dmm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bb-dmm-bezel { margin-bottom: 0; }
  .bb-dmm .bb-netlist, .bb-dmm .bb-status, .bb-dmm #bbWiperField { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bb-lab-top { align-items: stretch; }
  .bb-lab-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .bb-lab-actions .btn { min-height: 40px; padding: 8px 9px; font-size: 11px; }
  .bb-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-probe-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-probe-tools .bb-tool { min-height: 40px; font-size: 11px; }
  .bb-dmm { grid-template-columns: 1fr; }
  .bb-dmm .bb-netlist, .bb-dmm .bb-status, .bb-dmm #bbWiperField { grid-column: auto; }
  .bb-dmm-screen { font-size: 24px; }
  .bb-board-wrap { padding: 9px; }
  .bb-shell { --bb-pitch: 21px; --bb-hole: 16px; --bb-num: 19px; --bb-gutter: 24px; }
}

/* Component overlay on breadboard */
.bb-shell { position: relative; }
.bb-parts-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}
.bb-parts-svg .bb-part-hit {
  pointer-events: stroke;
  cursor: pointer;
}
.bb-part-label {
  fill: rgba(40, 30, 20, 0.75);
  font-size: 8px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  pointer-events: none;
}
.bb-led-halo { filter: blur(3px); animation: bb-led-breathe 1.4s ease-in-out infinite alternate; }
@keyframes bb-led-breathe { from { opacity: .22; } to { opacity: .48; } }
.bb-hole {
  position: relative;
  z-index: 2;
}

.bb-parts-svg { pointer-events: none; }
.bb-part-hit { pointer-events: stroke; cursor: pointer; }
.bb-part.is-selected .bb-wire { filter: drop-shadow(0 0 3px rgba(255, 213, 79, 0.9)); }
.bb-parts-list li.is-selected { background: rgba(255, 213, 79, 0.1); border-radius: 6px; }
.bb-part-pick {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  flex: 1;
  padding: 0;
}

.bb-save-bar, .bb-load-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.bb-save-bar[hidden], .bb-load-panel[hidden] { display: none !important; }
.bb-save-bar input[type="text"] {
  flex: 1;
  min-width: 180px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg, #0e1218);
  color: inherit;
}
.bb-load-panel { flex-direction: column; align-items: stretch; }
.bb-load-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.bb-load-meta {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}


/* ── Breadboard guided challenges ── */
.bb-challenge-panel {
  margin: 0 0 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border, #2a3142);
  background: var(--panel, #12141c);
}
.bb-challenge-panel[hidden] { display: none !important; }
.bb-challenge-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.bb-challenge-sub {
  font-size: 13px;
  color: var(--muted, #8b949e);
  margin-top: 4px;
  max-width: 560px;
  line-height: 1.45;
}
.bb-challenge-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.bb-chip {
  appearance: none;
  border: 1px solid var(--border, #2a3142);
  background: var(--panel-2, #1a1d26);
  color: var(--muted, #8b949e);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.bb-chip:hover { color: var(--ink, #e8ecf4); border-color: #3a4558; }
.bb-chip.is-active {
  background: rgba(51, 225, 255, 0.12);
  border-color: rgba(51, 225, 255, 0.45);
  color: var(--accent, #33e1ff);
}
.bb-challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.bb-ch-card {
  appearance: none;
  text-align: left;
  background: var(--panel-2, #1a1d26);
  border: 1px solid var(--border, #2a3142);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s, transform .12s;
  color: var(--ink, #e8ecf4);
  font-family: inherit;
}
.bb-ch-card:hover {
  border-color: #3a5a6a;
  transform: translateY(-1px);
}
.bb-ch-card.is-done {
  border-color: rgba(57, 255, 136, 0.35);
}
.bb-ch-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.bb-ch-level {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(51, 225, 255, 0.12);
  color: var(--accent, #33e1ff);
}
.bb-ch-level.level-Intro,
.level-Intro {
  background: rgba(57, 255, 136, 0.12);
  color: var(--ok, #39ff88);
}
.bb-ch-level.level-Core,
.level-Core {
  background: rgba(51, 225, 255, 0.12);
  color: var(--accent, #33e1ff);
}
.bb-ch-level.level-Advanced,
.level-Advanced {
  background: rgba(255, 143, 107, 0.14);
  color: var(--tool, #ff8f6b);
}
.bb-ch-mins {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--muted, #8b949e);
}
.bb-ch-card strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
}
.bb-ch-blurb {
  font-size: 12.5px;
  color: var(--muted, #8b949e);
  line-height: 1.4;
}
.bb-ch-done-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--ok, #39ff88);
  margin-top: 2px;
}
.bb-challenge-active {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #2a3142);
}
.bb-challenge-active-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bb-challenge-active-top strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
}
.bb-ch-goal {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(51, 225, 255, 0.06);
  border: 1px solid rgba(51, 225, 255, 0.2);
}
.bb-ch-fault {
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 143, 107, 0.1);
  border: 1px solid rgba(255, 143, 107, 0.35);
  color: var(--tool, #ff8f6b);
}
.bb-ch-steps {
  margin: 0 0 14px 18px;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink, #e8ecf4);
}
.bb-ch-steps li { margin-bottom: 6px; }
.bb-ch-steps li.is-current { color: var(--accent, #33e1ff); font-weight: 600; }
.bb-ch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.bb-ch-hints {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  font-size: 13px;
  color: var(--muted, #8b949e);
}
.bb-ch-hints li {
  padding: 4px 0 4px 16px;
  position: relative;
  line-height: 1.45;
}
.bb-ch-hints li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--warn, #ffd23d);
  font-weight: 700;
}
.bb-ch-status {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.4;
}
.bb-ch-status.idle {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, #2a3142);
  color: var(--muted, #8b949e);
}
.bb-ch-status.ok {
  background: rgba(57, 255, 136, 0.1);
  border: 1px solid rgba(57, 255, 136, 0.3);
  color: var(--ok, #39ff88);
}
.bb-ch-status.warn {
  background: rgba(255, 210, 61, 0.1);
  border: 1px solid rgba(255, 210, 61, 0.3);
  color: var(--warn, #ffd23d);
}

.bb-ch-steps li.is-done {
  color: var(--ok, #39ff88);
  opacity: 0.85;
}
.bb-ch-steps li.is-done .bb-ch-step-num {
  color: var(--ok, #39ff88);
}
.bb-ch-steps li.is-current {
  color: var(--accent, #33e1ff);
  font-weight: 600;
}
.bb-ch-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  margin-right: 6px;
  color: var(--muted, #8b949e);
}
.bb-ch-steps {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.bb-ch-steps li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  margin-bottom: 4px;
  border: 1px solid transparent;
}
.bb-ch-steps li.is-current {
  background: rgba(51, 225, 255, 0.08);
  border-color: rgba(51, 225, 255, 0.22);
}
.bb-ch-steps li.is-done {
  background: rgba(57, 255, 136, 0.06);
  border-color: rgba(57, 255, 136, 0.15);
}

/* ============================================================
   QUICKY CODE
   ============================================================ */
.qc-lobby {
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 4px 40px;
}
.qc-lobby-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
}
.qc-hero-art {
  width: 140px;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 12px 40px rgba(0, 201, 167, 0.18);
  flex-shrink: 0;
}
.qc-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00C9A7;
  margin-bottom: 6px;
}
.qc-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text, #e8eaef);
}
.qc-sub {
  margin: 0;
  color: var(--muted, #9aa3b2);
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 42ch;
}
.qc-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.qc-lang-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border, #2a2e3a);
  background: var(--card, #12141c);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.qc-lang-card.is-live:hover {
  border-color: color-mix(in srgb, var(--lang-accent) 55%, transparent);
  transform: translateY(-1px);
}
.qc-lang-card.is-locked {
  opacity: 0.72;
}
.qc-lang-icon {
  font-size: 1.75rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lang-accent) 18%, transparent);
  flex-shrink: 0;
}
.qc-lang-body {
  flex: 1;
  min-width: 0;
}
.qc-lang-body h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 650;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.qc-lang-body p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted, #9aa3b2);
  line-height: 1.35;
}
.qc-notes-entry {
  display: inline-block;
  margin-top: 7px;
  color: var(--lang-accent, #00c9a7);
  font-size: 0.78rem;
  font-weight: 650;
  text-decoration: none;
}
.qc-notes-entry:hover { text-decoration: underline; }
.qc-notes-library-link { margin: 8px 0; font-size: 0.85rem; }
.qc-notes-library-link a { color: var(--accent, #00c9a7); text-decoration: none; }
.qc-source-notes-link { margin-top: 8px; }
.qc-under-construction {
  color: #8b93a7 !important;
  font-style: italic;
}
.qc-badge-soon {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #8b93a7;
}
.qc-lang-action {
  flex-shrink: 0;
}

/* Enrollment */
.qc-enroll {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
  max-width: 720px;
  margin: 12px auto 40px;
  padding: 0 4px;
}
.qc-enroll-art img {
  width: 130px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(0, 201, 167, 0.15);
}
.qc-enroll-card {
  flex: 1;
  min-width: 260px;
  background: var(--card, #12141c);
  border: 1px solid var(--border, #2a2e3a);
  border-radius: 16px;
  padding: 22px 22px 24px;
}
.qc-enroll-card h1 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.35rem;
  margin: 0 0 8px;
}
.qc-form .field {
  margin-bottom: 14px;
}
.qc-form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 550;
  margin-bottom: 5px;
  color: var(--muted, #9aa3b2);
}
.qc-form .optional {
  font-weight: 400;
  opacity: 0.7;
}
.qc-form select,
.qc-form input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #2a2e3a);
  background: var(--bg, #0a0b10);
  color: var(--text, #e8eaef);
  font-size: 0.95rem;
}
.qc-form select:focus,
.qc-form input:focus {
  outline: none;
  border-color: #00C9A7;
}
.qc-cloud-check {
  margin: 10px 0 0;
  color: var(--muted, #687083);
  font-size: .78rem;
  line-height: 1.45;
  text-align: center;
}

/* Workspace */
.qc-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
  gap: 0;
  min-height: min(760px, calc(100vh - 120px));
  border: 1px solid var(--border, #2a2e3a);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card, #12141c);
}
.qc-workspace.is-study-mode {
  grid-template-columns: minmax(0, 1fr);
}
.qc-workspace.is-study-mode > .qc-plan-rail {
  display: none;
}
.qc-c-path{max-width:1120px;margin:0 auto;padding:8px 0 40px;color:var(--ink)}
.qc-c-path-head{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(165px,210px);align-items:center;gap:18px;margin-bottom:18px;padding:20px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(130deg,color-mix(in srgb,#A8B9CC 13%,var(--panel)),var(--panel))}
.qc-c-path-intro .qc-kicker{color:#536b82;font-size:10px;font-weight:800;letter-spacing:.11em}
.qc-c-path-intro h1{margin:7px 0;font:750 clamp(23px,3vw,34px)/1.15 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.03em}
.qc-c-path-intro p{max-width:62ch;margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.qc-c-progress-card{display:grid;gap:4px;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.qc-c-progress-card strong{font-size:20px}.qc-c-progress-card>span{color:var(--muted);font-size:11px}.qc-c-progress-card .qc-course-progress-track{margin-top:7px}
.qc-c-module-list{display:grid;gap:9px}
.qc-c-module-card{display:grid;grid-template-columns:42px minmax(0,1fr) minmax(150px,210px);align-items:center;gap:13px;width:100%;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--panel);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
.qc-c-module-card:not(:disabled):hover{transform:translateY(-1px);border-color:color-mix(in srgb,#A8B9CC 60%,var(--border));background:color-mix(in srgb,#A8B9CC 5%,var(--panel))}
.qc-c-module-card:disabled{cursor:not-allowed;opacity:.55}
.qc-c-module-index{display:grid;place-items:center;width:38px;height:38px;border:1px solid color-mix(in srgb,#A8B9CC 45%,var(--border));border-radius:12px;background:color-mix(in srgb,#A8B9CC 15%,var(--panel));font-size:13px;font-weight:800}
.qc-c-module-copy{display:grid;gap:4px;min-width:0}.qc-c-module-copy small{color:#62778d;font:750 9px var(--font-mono,monospace);letter-spacing:.08em}.qc-c-module-copy strong{font-size:14px}.qc-c-module-copy>span{color:var(--muted);font-size:11px;line-height:1.45}
.qc-c-module-status{justify-self:end;color:var(--muted);font-size:10px;text-align:right}.qc-c-module-card.is-complete .qc-c-module-index{border-color:#45b98d;background:#e6f7f0;color:#16835e}.qc-c-module-card.is-complete .qc-c-module-status{color:#16835e;font-weight:750}
.qc-c-workspace .qc-study-columns{grid-template-columns:minmax(180px,.65fr) minmax(340px,1.45fr) minmax(220px,.8fr)}
.qc-c-workspace .qc-study-editor{min-height:300px;font:12px/1.6 var(--font-mono,monospace);tab-size:4}
.qc-c-input-label{display:block;margin:12px 0 5px;color:var(--muted);font-size:10px;font-weight:750}
.qc-c-stdin{min-height:52px;margin:0;font:11px/1.5 var(--font-mono,monospace)}
.qc-c-workspace .qc-editor-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qc-c-workspace .qc-run-help{margin:0}
.qc-c-quiz-explanation{margin:8px 0 0;padding:8px 10px;border-left:2px solid #6072e8;border-radius:0 7px 7px 0;background:color-mix(in srgb,#6072e8 7%,var(--panel));color:var(--muted);font-size:11px;line-height:1.5}
.qc-c-workspace .qc-quiz-result{margin-top:12px}
html.dark-mode .qc-c-path-intro .qc-kicker,html.dark-mode .qc-c-module-copy small{color:#b9c8d7}
html.dark-mode .qc-c-module-card.is-complete .qc-c-module-index{border-color:#256e58;background:#183c32;color:#75dfb4}
html.dark-mode .qc-c-module-card.is-complete .qc-c-module-status{color:#75dfb4}
@media(max-width:900px){.qc-c-workspace .qc-study-columns{grid-template-columns:minmax(165px,.65fr) minmax(0,1.35fr)}.qc-c-workspace .qc-basics-panel{grid-column:1/-1;grid-template-columns:1fr 1.2fr 1fr}.qc-c-workspace .qc-basics-heading{grid-column:1/-1}}
@media(max-width:720px){.qc-c-path-head{grid-template-columns:1fr;align-items:start;padding:15px}.qc-c-path-head>.qc-back-btn{justify-self:start}.qc-c-progress-card{grid-template-columns:auto 1fr;align-items:center}.qc-c-progress-card .qc-course-progress-track{grid-column:1/-1}.qc-c-module-card{grid-template-columns:38px minmax(0,1fr);gap:10px;padding:11px}.qc-c-module-status{grid-column:2;justify-self:start;text-align:left}.qc-c-workspace .qc-study-columns{grid-template-columns:1fr}.qc-c-workspace .qc-basics-panel{grid-column:auto;grid-template-columns:1fr}.qc-c-workspace .qc-basics-heading{grid-column:auto}.qc-c-workspace .qc-study-editor{min-height:250px}}
.qc-plan-rail {
  border-right: 1px solid var(--border, #2a2e3a);
  background: var(--panel-2, #f4f6fa);
  padding: 14px 12px 20px;
  overflow-y: auto;
  max-height: calc(100vh - 120px);
}
.qc-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.qc-plan-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #00C9A7;
}
.qc-plan-reset {
  background: transparent;
  border: none;
  color: var(--muted, #9aa3b2);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 6px;
}
.qc-plan-reset:hover {
  color: var(--text, #e8eaef);
  background: rgba(255, 255, 255, 0.06);
}
.qc-plan-meta {
  font-size: 0.75rem;
  color: var(--muted, #9aa3b2);
  margin-bottom: 14px;
  line-height: 1.4;
}
.qc-goal-chip {
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0, 201, 167, 0.1);
  color: #087966;
  font-size: 0.72rem;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qc-unit {
  margin-bottom: 14px;
}
.qc-unit-title {
  font-size: 0.72rem;
  font-weight: 650;
  color: #8b93a7;
  margin-bottom: 6px;
  padding-left: 4px;
}
.qc-topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.qc-topic {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text, #e8eaef);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.12s ease;
}
.qc-topic:hover:not(.is-locked) {
  background: rgba(255, 255, 255, 0.05);
}
.qc-topic.is-active {
  background: rgba(0, 201, 167, 0.12);
  color: color-mix(in srgb, #00C9A7 72%, var(--ink));
  font-weight: 550;
}
.qc-topic.is-done .qc-topic-mark {
  color: #39FF88;
}
.qc-topic.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.qc-topic-mark {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}
.qc-topic-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.qc-level-section {
  padding: 0 0 7px;
  margin: 0 0 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #2a2e3a) 72%, transparent);
}
.qc-level-section:last-child { border-bottom: 0; }
.qc-level-section .qc-unit-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 7px;
  padding: 4px 5px;
  color: var(--ink, #e8eaef);
  font-size: .72rem;
  letter-spacing: .01em;
}
.qc-level-section .qc-unit-title small {
  color: var(--muted, #8b93a7);
  font-size: .65rem;
  font-weight: 550;
  white-space: nowrap;
}
.qc-topic-number {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 20px;
  flex: 0 0 22px;
  border: 1px solid var(--border, #2a2e3a);
  border-radius: 6px;
  color: var(--muted, #8b93a7);
  font-size: .61rem;
  font-variant-numeric: tabular-nums;
}
.qc-topic.is-active .qc-topic-number {
  border-color: color-mix(in srgb, #00C9A7 46%, var(--border, #2a2e3a));
  color: color-mix(in srgb, #00C9A7 72%, var(--ink, #e8eaef));
}
.qc-module-roadmap,
.qc-quiz-coming-soon {
  padding: clamp(16px, 2.5vw, 26px);
  border: 1px solid var(--border, #2a2e3a);
  border-radius: 16px;
  background: var(--panel, #fff);
}
.qc-module-roadmap h2,
.qc-quiz-coming-soon h2 { margin: 0 0 9px; }
.qc-module-roadmap > p:not(.qc-lesson-kicker),
.qc-quiz-coming-soon > p:not(.qc-lesson-kicker) {
  color: var(--muted, #8b93a7);
  line-height: 1.6;
}
.qc-module-roadmap ul { display: grid; gap: 8px; padding-left: 20px; }
.qc-roadmap-note { padding-top: 10px; border-top: 1px solid var(--border, #2a2e3a); }

.qc-session {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.qc-session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #2a2e3a);
}
.qc-session-coach {
  display: flex;
  align-items: center;
  gap: 12px;
}
.qc-coach-avatar {
  width: 44px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}
.qc-coach-name {
  font-weight: 650;
  font-size: 0.92rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.qc-coach-topic {
  font-size: 0.78rem;
  color: var(--muted, #9aa3b2);
  margin-top: 2px;
}
.qc-mode-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--panel-2, #f4f6fa);
  border: 1px solid var(--border, #2a2e3a);
}
.qc-mode-btn {
  border: none;
  background: transparent;
  color: var(--muted, #9aa3b2);
  font-size: 0.8rem;
  font-weight: 550;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.qc-mode-btn.is-on {
  background: #00C9A7;
  color: #041210;
}
html.dark-mode .qc-topic.is-active { color: #7dffd4; }
.qc-mode-btn:focus-visible,
.qc-ptype-btn:focus-visible,
.qc-plan-mobile-toggle:focus-visible {
  outline: 2px solid var(--led-1, #00a98f);
  outline-offset: 2px;
}
.qc-plan-mobile-toggle {
  display: none;
  border: 1px solid var(--border, #2a2e3a);
  background: var(--panel, #fff);
  color: var(--ink, #202431);
  border-radius: 9px;
  padding: 7px 10px;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}
.qc-session-body {
  flex: 1;
  padding: 18px 20px;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
}
.qc-session-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--border, #2a2e3a);
}
.qc-course-progress { min-width: 0; }
.qc-course-progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: var(--muted, #9aa3b2); font-size: .76rem; }
.qc-course-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(120, 130, 150, .18); }
.qc-course-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #00c9a7, #3980ff); transition: width .35s ease; }
.qc-course-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.qc-course-actions .btn { min-height: 42px; }
.qc-module-study { display: grid; gap: 20px; width: min(100%, 1180px); margin-inline: auto; }
.qc-study-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.qc-study-intro h2, .qc-source-reader-head h2, .qc-quiz-heading h2 { margin: 0 0 7px; font-size: clamp(1.2rem, 2vw, 1.65rem); }
.qc-study-intro p:not(.qc-lesson-kicker), .qc-source-reader-head p:not(.qc-lesson-kicker), .qc-quiz-heading p:not(.qc-lesson-kicker) { margin: 0; color: var(--muted, #9aa3b2); line-height: 1.55; }
.qc-lesson-kicker { margin: 0 0 7px; color: var(--led-1, #00a98f); font: 600 .72rem/1.3 "IBM Plex Mono", monospace; letter-spacing: .1em; }
.qc-source-reader, .qc-topic-quiz { min-width: 0; padding: clamp(14px, 2.5vw, 24px); border: 1px solid var(--border, #2a2e3a); border-radius: 16px; background: var(--panel, #fff); }
.qc-source-reader-head, .qc-quiz-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.qc-source-reader-head > div { min-width: 0; }
.qc-open-pdf { flex: none; }
.qc-topic-pdf { display: block; width: 100%; height: min(72vh, 820px); min-height: 460px; border: 1px solid var(--border, #2a2e3a); border-radius: 11px; background: #fff; }
.qc-topic-quiz { display: grid; gap: 16px; }
.qc-quiz-count { flex: none; padding: 7px 10px; border-radius: 999px; color: var(--led-1, #008f7c); background: rgba(0, 201, 167, .1); font-size: .78rem; font-weight: 650; }
.qc-quiz-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qc-quiz-question { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--border, #2a2e3a); border-radius: 12px; }
.qc-quiz-question legend { max-width: 100%; padding: 0 4px; font-weight: 650; line-height: 1.45; }
.qc-quiz-question legend span { display: block; margin-bottom: 4px; color: var(--muted, #9aa3b2); font: 600 .72rem "IBM Plex Mono", monospace; }
.qc-quiz-options { display: grid; gap: 7px; margin-top: 10px; }
.qc-quiz-options label { display: flex; align-items: flex-start; gap: 9px; min-height: 42px; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; line-height: 1.4; }
.qc-quiz-options label:has(input:checked) { border-color: rgba(0, 201, 167, .5); background: rgba(0, 201, 167, .08); }
.qc-quiz-options input { flex: none; margin-top: 3px; accent-color: #00a98f; }
.qc-quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qc-quiz-actions .btn { min-height: 44px; }
.qc-quiz-result { padding: 14px; border-radius: 12px; background: rgba(120, 130, 150, .08); }
.qc-quiz-result h3 { margin: 0 0 10px; }
.qc-quiz-result p { margin: 8px 0 0; line-height: 1.5; }
.qc-quiz-correct { color: #14845c; }
.qc-quiz-incorrect { color: #b44545; }
.qc-bubble {
  background: rgba(0, 201, 167, 0.08);
  border: 1px solid rgba(0, 201, 167, 0.18);
  border-radius: 12px 12px 12px 4px;
  padding: 12px 14px;
  margin: 0 0 10px;
  line-height: 1.45;
  font-size: 0.92rem;
  max-width: 56ch;
}
.qc-bubble-soft {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border, #2a2e3a);
}
.qc-study-outline {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px dashed var(--border, #2a2e3a);
  max-width: 52ch;
}
.qc-study-outline h3 {
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 650;
}
.qc-study-outline ul {
  margin: 0 0 10px;
  padding-left: 18px;
  color: var(--muted, #9aa3b2);
  font-size: 0.88rem;
  line-height: 1.5;
}
.qc-hint {
  font-size: 0.8rem;
  color: #8b93a7;
  margin: 0;
  line-height: 1.4;
}
.qc-practice-panel h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.qc-practice-panel {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: 22px;
  max-width: 1040px;
  margin-inline: auto;
}
.qc-practice-prompt,
.qc-code-area { min-width: 0; }
.qc-code-area {
  margin-top: 0;
  max-width: none;
  width: 100%;
}
.qc-code-label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted, #9aa3b2);
  margin-bottom: 6px;
}
.qc-code-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border, #2a2e3a);
  background: #0a0b10;
  color: #e8eaef;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 260px;
  max-height: 520px;
}
.qc-code-input:focus {
  outline: none;
  border-color: #00C9A7;
}
.qc-run-help {
  margin: 7px 0 0;
  color: var(--muted, #687083);
  font-size: .74rem;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .qc-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
    overflow: visible;
  }
  .qc-plan-rail {
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border, #2a2e3a);
    padding: 12px;
  }
  .qc-plan-label { margin-right: auto; }
  .qc-plan-mobile-toggle { display: inline-flex; align-items: center; }
  .qc-plan-nav {
    max-height: min(36vh, 240px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: 10px;
  }
  .qc-lobby-hero { flex-direction: row; align-items: center; gap: 14px; }
  .qc-hero-art {
    width: clamp(68px, 20vw, 96px);
    border-radius: 14px;
  }
  .qc-session-body { overflow: visible; padding: 16px 14px; }
  .qc-practice-panel { grid-template-columns: 1fr; gap: 18px; }
  .qc-session-head { align-items: flex-start; padding: 12px 14px; }
  .qc-session-foot { grid-template-columns: 1fr; padding: 12px 14px; }
  .qc-course-actions { display: grid; grid-template-columns: 1fr; }
  .qc-course-actions .btn { width: 100%; min-height: 46px; }
  .qc-study-intro, .qc-source-reader-head, .qc-quiz-heading { flex-direction: column; gap: 10px; }
  .qc-open-pdf { min-height: 44px; }
  .qc-topic-pdf { height: 65dvh; min-height: 390px; }
  .qc-quiz-list { grid-template-columns: 1fr; }
  .qc-source-reader, .qc-topic-quiz { padding: 14px; }
  .qc-code-input { min-height: 210px; }
}

@media (max-width: 430px) {
  .qc-lang-card { gap: 10px; padding: 13px; }
  .qc-lang-icon { width: 38px; height: 38px; font-size: 1.45rem; }
  .qc-lang-body h2 { font-size: 1rem; }
  .qc-lang-body p { font-size: .76rem; }
  .qc-lang-action .btn { padding: 8px 10px; font-size: .78rem; }
  .qc-session-actions { width: 100%; justify-content: space-between; }
  .qc-practice-types { gap: 5px; }
  .qc-ptype-btn { padding: 6px 9px; }
  .qc-course-progress-label { font-size: .7rem; }
  .qc-topic-pdf { height: 62dvh; min-height: 340px; }
}

/* Quicky Code — Gemini lesson / feedback boxes */
.qc-ai-box {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 201, 167, 0.22);
  background: rgba(0, 201, 167, 0.06);
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 62ch;
}
.qc-ai-box.is-loading {
  opacity: 0.85;
  font-style: italic;
  color: var(--muted, #9aa3b2);
}
.qc-ai-box p {
  margin: 0 0 0.75em;
}
.qc-ai-box p:last-child {
  margin-bottom: 0;
}
.qc-ai-error {
  color: #ff7b7b !important;
}
.qc-code-block {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #0a0b10;
  border: 1px solid var(--border, #2a2e3a);
  overflow-x: auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre;
}
.qc-ai-box code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85em;
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 5px;
  border-radius: 4px;
}
.qc-ai-box .qc-code-block code {
  background: transparent;
  padding: 0;
}
.qc-study-actions {
  margin-top: 12px;
}
.qc-practice-prompt .btn {
  margin-top: 10px;
}

/* Code actions (Run + Feedback) */
.qc-code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Pyodide run output */
.qc-run-output {
  margin-top: 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #2a2e3a);
  background: #0a0b10;
  overflow: hidden;
}
.qc-run-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #9aa3b2);
  padding: 6px 12px;
  border-bottom: 1px solid var(--border, #2a2e3a);
  background: rgba(255, 255, 255, 0.03);
}
.qc-run-pre {
  margin: 0;
  padding: 12px 14px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #c8d0e0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
}
.qc-run-pre.is-error {
  color: #ff9b9b;
}

/* Follow-up chat input */
.qc-followup {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  max-width: 560px;
}
.qc-followup-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #2a2e3a);
  background: #0a0b10;
  color: #e8eaef;
  font-size: 0.9rem;
}
.qc-followup-input:focus {
  outline: none;
  border-color: #00C9A7;
}
.qc-followup-input::placeholder {
  color: #6b7280;
}

/* Adaptive path banner */
.qc-adaptive-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.4;
  border: 1px solid var(--border, #2a2e3a);
  background: rgba(255, 255, 255, 0.04);
}
.qc-adaptive-review {
  border-color: rgba(255, 180, 70, 0.45);
  background: rgba(255, 180, 70, 0.1);
}
.qc-adaptive-struggle {
  border-color: rgba(255, 120, 120, 0.4);
  background: rgba(255, 80, 80, 0.08);
}
.qc-adaptive-jump {
  border-color: rgba(0, 201, 167, 0.4);
  background: rgba(0, 201, 167, 0.08);
}
.qc-adaptive-go {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 0.82rem;
}

/* Review-due markers in plan */
.qc-topic.is-review-due .qc-topic-name {
  color: #ffc56e;
}
.qc-review-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(255, 180, 70, 0.25);
  color: #ffc56e;
}

/* Self-check panel */
.qc-selfcheck {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 201, 167, 0.25);
  background: rgba(0, 201, 167, 0.05);
  max-width: 560px;
}
.qc-lesson-content h3 {
  margin: 1.05em 0 0.35em;
  font-size: 1rem;
}
.qc-lesson-kicker {
  color: var(--accent, #00c9a7);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.12em;
}
.qc-lesson-content .qc-run-pre {
  max-width: 100%;
  white-space: pre;
  overflow-x: auto;
}
.qc-check-options {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  border: 0;
}
.qc-check-options label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border, #2a2e3a);
  border-radius: 10px;
  cursor: pointer;
}
.qc-check-options label:has(input:checked) {
  border-color: var(--accent, #00c9a7);
  background: rgba(0, 201, 167, 0.08);
}
.qc-check-options input {
  margin-top: 0.25em;
  accent-color: var(--accent, #00c9a7);
}
.qc-selfcheck-q {
  font-size: 0.92rem;
  margin-bottom: 10px;
  line-height: 1.45;
}
.qc-selfcheck-answer-row {
  display: flex;
  gap: 8px;
}
.qc-selfcheck-answer-row .qc-followup-input {
  flex: 1;
}
.qc-pass {
  color: #3dd68c !important;
}
.qc-fail {
  color: #ff9b9b !important;
}
.qc-study-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Practice type chips */
.qc-practice-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 6px;
}
.qc-ptype-btn {
  border: 1px solid var(--border, #2a2e3a);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted, #9aa3b2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  cursor: pointer;
}
.qc-ptype-btn:hover {
  border-color: #00C9A7;
  color: #e8eaef;
}
.qc-ptype-btn.is-on {
  border-color: #00C9A7;
  background: rgba(0, 201, 167, 0.12);
  color: #00C9A7;
}

/* Markdown extras in AI boxes */
.qc-md-h {
  margin: 0.75em 0 0.35em;
  font-size: 1rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.qc-md-list {
  margin: 0.4em 0 0.8em 1.2em;
  padding: 0;
}
.qc-md-list li {
  margin: 0.25em 0;
}

/* Code block + Copy */
.qc-code-wrap {
  margin: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--border, #2a2e3a);
  overflow: hidden;
  background: #0a0b10;
}
.qc-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border, #2a2e3a);
  background: rgba(255, 255, 255, 0.03);
}
.qc-code-lang {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #9aa3b2);
}
.qc-copy-btn {
  border: none;
  background: transparent;
  color: #00C9A7;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.qc-copy-btn:hover {
  background: rgba(0, 201, 167, 0.12);
}
.qc-code-wrap .qc-code-block {
  margin: 0;
  border: none;
  border-radius: 0;
}

/* Session header actions */
.qc-session-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.qc-study-header-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.qc-study-topic-select {
  width: min(290px, 25vw);
  min-width: 150px;
  min-height: 36px;
  padding: 6px 30px 6px 10px;
  border: 1px solid var(--border, #2a2e3a);
  border-radius: 9px;
  background: var(--panel, #20232d);
  color: var(--ink, #e8eaef);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}
.qc-study-back,
.qc-study-reset {
  min-height: 36px;
  padding: 6px 10px;
  white-space: nowrap;
}
.qc-history-btn {
  font-size: 0.8rem;
  padding: 6px 12px;
}

/* Chat history drawer */
.qc-history-drawer {
  margin: 0 0 12px;
  border: 1px solid var(--border, #2a2e3a);
  border-radius: 12px;
  background: rgba(10, 11, 16, 0.95);
  overflow: hidden;
  max-height: 360px;
  display: flex;
  flex-direction: column;
}
.qc-history-drawer[hidden] {
  display: none !important;
}
.qc-history-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #2a2e3a);
  font-size: 0.9rem;
}
.qc-history-topic {
  color: var(--muted, #9aa3b2);
  font-size: 0.8rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qc-history-close {
  border: none;
  background: transparent;
  color: var(--muted, #9aa3b2);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.qc-history-body {
  overflow: auto;
  padding: 10px 14px;
  flex: 1;
  font-size: 0.85rem;
  line-height: 1.45;
}
.qc-history-empty {
  color: var(--muted, #9aa3b2);
  margin: 8px 0;
}
.qc-history-msg {
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.qc-history-msg.is-user {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border, #2a2e3a);
}
.qc-history-msg.is-model {
  background: rgba(0, 201, 167, 0.06);
  border-color: rgba(0, 201, 167, 0.2);
}
.qc-history-who {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #9aa3b2);
  margin-bottom: 4px;
}
.qc-history-text {
  word-break: break-word;
  max-height: 160px;
  overflow: auto;
}
.qc-history-foot {
  padding: 8px 14px 12px;
  border-top: 1px solid var(--border, #2a2e3a);
}

/* Skeleton loading */
.qc-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.qc-skel-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  background-size: 200% 100%;
  animation: qc-skel 1.2s ease-in-out infinite;
}
.qc-skel-short { width: 55%; }
.qc-skel-mid { width: 75%; }
@keyframes qc-skel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Unit celebration */
.qc-celebrate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 20px;
  animation: qc-fade-in 0.25s ease;
}
.qc-celebrate-card {
  background: #12141c;
  border: 1px solid rgba(0, 201, 167, 0.35);
  border-radius: 16px;
  padding: 28px 32px;
  text-align: center;
  max-width: 360px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.qc-celebrate-emoji {
  font-size: 2.5rem;
  margin-bottom: 8px;
}
.qc-celebrate-card h2 {
  margin: 0 0 6px;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.qc-celebrate-card p {
  margin: 0 0 6px;
  color: #e8eaef;
}
.qc-celebrate-sub {
  color: var(--muted, #9aa3b2) !important;
  font-size: 0.9rem;
  margin-bottom: 16px !important;
}
@keyframes qc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Keyboard focus on plan topics */
.qc-topic.is-kb-focus {
  outline: 2px solid rgba(0, 201, 167, 0.65);
  outline-offset: 1px;
  background: rgba(0, 201, 167, 0.08);
}
.qc-topic:focus-visible {
  outline: 2px solid rgba(0, 201, 167, 0.65);
  outline-offset: 1px;
}
.qc-kb-hint {
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--muted, #9aa3b2);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* Streak chip */
.qc-streak-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  background: rgba(255, 140, 60, 0.12);
  border: 1px solid rgba(255, 140, 60, 0.35);
  color: #ffb060;
  white-space: nowrap;
}

/* Rate limit banner */
.qc-rate-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 180, 70, 0.45);
  background: rgba(255, 180, 70, 0.12);
  font-size: 0.88rem;
  color: #ffe0a8;
}
.qc-rate-banner strong {
  color: #fff;
}

/* ========== Quicky Lang ========== */
.ql-lobby { max-width: 920px; margin: 0 auto; padding: 12px 0 40px; }
.ql-lobby-hero {
  display: flex; gap: 20px; align-items: center; margin-bottom: 28px;
}
.ql-hero-art {
  width: 120px; height: auto; border-radius: 16px; object-fit: cover;
}
.ql-kicker {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #3B82F6; font-weight: 600;
}
.ql-title {
  margin: 4px 0 8px; font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.75rem;
}
.ql-sub { margin: 0; color: var(--muted, #9aa3b2); line-height: 1.45; }
.ql-lang-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.ql-lang-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: 14px;
  border: 1px solid var(--border, #2a2e3a);
  background: rgba(255,255,255,0.02);
  border-top: 3px solid var(--lang-accent, #3B82F6);
}
.ql-lang-card.is-locked { opacity: 0.65; }
.ql-lang-icon { font-size: 1.75rem; }
.ql-lang-body h2 { margin: 0 0 4px; font-size: 1.1rem; }
.ql-lang-body p { margin: 0; font-size: 0.85rem; color: var(--muted, #9aa3b2); }
.ql-under-construction { font-style: italic; }
.ql-badge-soon {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 0.75rem; background: rgba(255,255,255,0.06); color: var(--muted, #9aa3b2);
}
.ql-enroll {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start;
  max-width: 720px; margin: 0 auto; padding: 20px 0;
}
.ql-enroll-card {
  flex: 1; min-width: 260px; padding: 22px;
  border-radius: 16px; border: 1px solid var(--border, #2a2e3a);
  background: rgba(255,255,255,0.03);
}
.ql-enroll-card h1 { margin: 6px 0 8px; font-size: 1.4rem; }
.ql-form .field { margin-bottom: 14px; }
.ql-form label { display: block; font-size: 0.82rem; margin-bottom: 6px; color: var(--muted, #9aa3b2); }
.ql-form .optional { opacity: 0.7; }
.ql-form select, .ql-form input[type="text"] {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border, #2a2e3a); background: #0a0b10; color: #e8eaef;
}

.ql-workspace {
  display: grid; grid-template-columns: 260px 1fr; gap: 0;
  min-height: 520px; border: 1px solid var(--border, #2a2e3a); border-radius: 16px; overflow: hidden;
}
.ql-plan-rail {
  border-right: 1px solid var(--border, #2a2e3a); background: rgba(0,0,0,0.2);
  padding: 14px; overflow: auto; max-height: 80vh;
}
.ql-plan-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.ql-plan-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #9aa3b2); }
.ql-plan-reset {
  border: none; background: transparent; color: var(--muted, #9aa3b2); cursor: pointer; font-size: 1rem;
}
.ql-plan-meta { font-size: 0.8rem; color: var(--muted, #9aa3b2); margin-bottom: 12px; line-height: 1.5; }
.ql-streak-chip, .ql-xp-chip {
  display: inline-block; margin: 4px 4px 0 0; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem;
}
.ql-streak-chip { background: rgba(255,140,60,0.12); border: 1px solid rgba(255,140,60,0.35); color: #ffb060; }
.ql-xp-chip { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.35); color: #93c5fd; }
.ql-goal-chip {
  margin-top: 6px; padding: 4px 8px; border-radius: 8px; font-size: 0.75rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border, #2a2e3a);
}
.ql-skill {
  display: flex; gap: 10px; width: 100%; text-align: left;
  padding: 10px; margin-bottom: 6px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer;
}
.ql-skill:hover { background: rgba(255,255,255,0.04); }
.ql-skill.is-active { border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.1); }
.ql-skill.is-done .ql-skill-mark { color: #3dd68c; }
.ql-skill.is-locked { opacity: 0.45; cursor: not-allowed; }
.ql-skill-mark { width: 1.2rem; flex-shrink: 0; }
.ql-skill-name { display: block; font-weight: 600; font-size: 0.9rem; }
.ql-skill-sum { display: block; font-size: 0.75rem; color: var(--muted, #9aa3b2); }

.ql-session { padding: 16px 20px; display: flex; flex-direction: column; min-width: 0; }
.ql-session-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ql-session-coach { display: flex; gap: 12px; align-items: center; }
.ql-coach-avatar { border-radius: 10px; object-fit: cover; }
.ql-coach-name { font-weight: 600; font-size: 0.95rem; }
.ql-coach-topic { font-size: 0.82rem; color: var(--muted, #9aa3b2); }
.ql-skill-intro h2 { margin: 0 0 8px; }
.ql-hint { color: var(--muted, #9aa3b2); font-size: 0.85rem; }

.ql-exercise { max-width: 560px; }
.ql-ex-progress {
  height: 6px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; margin-bottom: 10px;
}
.ql-ex-bar { height: 100%; background: #3B82F6; transition: width 0.25s ease; }
.ql-ex-meta { font-size: 0.75rem; color: var(--muted, #9aa3b2); margin-bottom: 12px; }
.ql-ex-prompt { font-size: 1.1rem; font-weight: 600; margin: 0 0 14px; line-height: 1.4; }
.ql-mc-options { display: flex; flex-direction: column; gap: 8px; }
.ql-mc-btn {
  text-align: left; padding: 12px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border, #2a2e3a); background: rgba(255,255,255,0.03); color: inherit;
}
.ql-mc-btn:hover:not(:disabled) { border-color: #3B82F6; }
.ql-mc-btn.is-correct { border-color: #3dd68c; background: rgba(61,214,140,0.12); }
.ql-mc-btn.is-wrong { border-color: #ff7b7b; background: rgba(255,80,80,0.1); }

/* Duolingo-style match cards */
.ql-match-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 8px 0 4px;
}
.ql-match-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ql-match-card {
  position: relative;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  color: #e8eaef;
  border: 2px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  box-shadow:
    0 4px 0 rgba(0,0,0,0.35),
    0 8px 18px rgba(0,0,0,0.2);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease,
    opacity 0.25s ease;
  user-select: none;
}
.ql-match-card:hover:not(:disabled):not(.is-matched) {
  transform: translateY(-2px);
  border-color: rgba(59,130,246,0.45);
}
.ql-match-card:active:not(.is-matched) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.ql-match-card-text {
  display: block;
  pointer-events: none;
}
.ql-match-card.is-picked {
  border-color: #3B82F6;
  background: rgba(59,130,246,0.18);
  box-shadow:
    0 4px 0 rgba(37,99,235,0.45),
    0 0 0 3px rgba(59,130,246,0.2);
  transform: translateY(-2px);
}
/* Bounce / pop when pair is correct */
.ql-match-card.is-pop {
  border-color: #3dd68c;
  background: rgba(61,214,140,0.22);
  animation: ql-card-pop 0.48s cubic-bezier(0.22, 1.4, 0.36, 1) both;
  z-index: 2;
}
.ql-match-card.is-matched {
  opacity: 0.4;
  border-color: rgba(61,214,140,0.5);
  background: rgba(61,214,140,0.08);
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
  cursor: default;
}
.ql-match-card.is-wrong {
  border-color: #ff7b7b;
  background: rgba(255,80,80,0.12);
  animation: ql-card-shake 0.42s ease both;
}
@keyframes ql-card-pop {
  0%   { transform: scale(1) translateY(0); }
  35%  { transform: scale(1.12) translateY(-14px); }
  55%  { transform: scale(0.96) translateY(-4px); }
  75%  { transform: scale(1.04) translateY(-10px); }
  100% { transform: scale(1) translateY(-6px); }
}
@keyframes ql-card-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.ql-order-built {
  min-height: 48px; padding: 8px; margin-bottom: 10px; border-radius: 10px;
  border: 1px dashed var(--border, #2a2e3a); display: flex; flex-wrap: wrap; gap: 6px;
}
.ql-order-bank { display: flex; flex-wrap: wrap; gap: 6px; }
.ql-order-chip {
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border, #2a2e3a); background: rgba(255,255,255,0.05); color: inherit;
}
.ql-order-chip.is-built { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.4); }

.ql-translate-input {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border, #2a2e3a); background: #0a0b10; color: #e8eaef; font-size: 1rem;
}
.ql-ex-feedback {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border, #2a2e3a); background: rgba(255,255,255,0.04);
}
.ql-ex-feedback.is-ok { border-color: rgba(61,214,140,0.4); background: rgba(61,214,140,0.08); }
.ql-ex-feedback.is-bad { border-color: rgba(255,120,120,0.4); background: rgba(255,80,80,0.08); }

.ql-results { text-align: center; padding: 24px 12px; max-width: 420px; margin: 0 auto; }
.ql-results-emoji { font-size: 2.5rem; margin-bottom: 8px; }
.ql-results-skill { color: var(--muted, #9aa3b2); }
.ql-results-stats {
  display: flex; justify-content: center; gap: 20px; margin: 18px 0;
}
.ql-results-stats div { display: flex; flex-direction: column; gap: 2px; }
.ql-results-stats strong { font-size: 1.25rem; }
.ql-results-stats span { font-size: 0.75rem; color: var(--muted, #9aa3b2); }

.ql-skeleton { display: flex; flex-direction: column; gap: 8px; }
.ql-skel-line {
  height: 12px; border-radius: 6px; width: 70%;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  background-size: 200% 100%; animation: qc-skel 1.2s ease-in-out infinite;
}

@media (max-width: 720px) {
  .ql-workspace { grid-template-columns: 1fr; }
  .ql-plan-rail { max-height: 220px; border-right: none; border-bottom: 1px solid var(--border, #2a2e3a); }
  .ql-lobby-hero { flex-direction: column; align-items: flex-start; }
}

/* Quicky Lang — hearts + listen */
.ql-ex-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.ql-hearts {
  letter-spacing: 2px;
  font-size: 0.95rem;
}
.ql-listen-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* Review banner */
.ql-review-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 180, 70, 0.4);
  background: rgba(255, 180, 70, 0.1);
  font-size: 0.88rem;
}

/* Speaking / mic */
.ql-speak-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 12px 0;
}
.ql-mic-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, 0.45);
  background: radial-gradient(circle at 40% 35%, rgba(59,130,246,0.25), rgba(10,11,16,0.9));
  color: #e8eaef;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ql-mic-btn:hover {
  border-color: #3B82F6;
  transform: scale(1.03);
}
.ql-mic-btn.is-listening {
  border-color: #ff5c7a;
  box-shadow: 0 0 0 6px rgba(255, 92, 122, 0.2);
  animation: ql-pulse 1s ease-in-out infinite;
}
.ql-mic-icon { font-size: 1.25rem; line-height: 1; }
.ql-mic-label { font-size: 0.75rem; color: var(--muted, #9aa3b2); }
.ql-speak-heard {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: #93c5fd;
}
@keyframes ql-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 92, 122, 0.15); }
  50% { box-shadow: 0 0 0 12px rgba(255, 92, 122, 0.08); }
}

.ql-phase { margin-bottom: 14px; }
.ql-phase-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #93c5fd;
  margin: 10px 0 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border, #2a2e3a);
}
.ql-phase:first-child .ql-phase-title {
  border-top: none;
  padding-top: 0;
}
.ql-tip {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.08);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Shared back nav for Quicky Code / Lang */
.qc-top-nav,
.ql-top-nav {
  margin-bottom: 12px;
}
.qc-back-btn,
.ql-back-btn {
  border: 1px solid var(--border, #2a2e3a);
  background: rgba(255,255,255,0.04);
  color: var(--muted, #9aa3b2);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  cursor: pointer;
}
.qc-back-btn:hover,
.ql-back-btn:hover {
  color: #e8eaef;
  border-color: rgba(59,130,246,0.45);
}
.qc-back-inline,
.ql-back-inline {
  padding: 4px 8px;
  font-size: 0.75rem;
  margin-right: 6px;
}
.qc-plan-head,
.ql-plan-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.qc-plan-head .qc-plan-label,
.ql-plan-head .ql-plan-label {
  flex: 1;
}


/* Notes + 5 tests + Monsieur Quicky */
.ql-notes, .ql-test-gate {
  max-width: 560px;
}
.ql-notes-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #3B82F6;
  font-weight: 600;
  margin-bottom: 6px;
}
.ql-notes-body {
  margin: 12px 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border, #2a2e3a);
  background: rgba(255,255,255,0.03);
  line-height: 1.55;
  font-size: 0.95rem;
}
.ql-notes-body p { margin: 0 0 10px; }
.ql-notes-body p:last-child { margin-bottom: 0; }
.ql-test-pips {
  display: flex;
  gap: 8px;
  margin: 14px 0 18px;
}
.ql-test-pip {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600;
  border: 1px solid var(--border, #2a2e3a);
  color: var(--muted, #9aa3b2);
}
.ql-test-pip.is-done {
  background: rgba(61,214,140,0.15);
  border-color: rgba(61,214,140,0.45);
  color: #3dd68c;
}
.ql-test-pip.is-active {
  background: rgba(59,130,246,0.2);
  border-color: #3B82F6;
  color: #93c5fd;
}
.ql-phase-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 12px 8px 24px;
}
.ql-monsieur {
  width: min(280px, 90%);
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.ql-phase-welcome-card {
  max-width: 420px;
}
.ql-monsieur-line {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 8px 0 12px;
}
.ql-results-monsieur {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 8px;
}
.ql-coach-avatar {
  object-fit: cover;
  border-radius: 10px;
}
.ql-hero-art {
  object-fit: cover;
  border-radius: 16px;
}

/* Interactive study notes */
.ql-notes { max-width: 640px; }
.ql-notes-scroll {
  max-height: min(62vh, 560px);
  overflow-y: auto;
  padding-right: 6px;
}
.ql-notes-lead { margin-top: 0; }
.ql-notes-hint-line {
  font-size: 0.85rem;
  color: var(--muted, #9aa3b2);
  margin: 6px 0 12px;
}
.ql-notes-h {
  margin: 18px 0 8px;
  font-size: 1rem;
  color: #93c5fd;
}
.ql-notes-list {
  margin: 8px 0 12px;
  padding-left: 1.2rem;
  line-height: 1.5;
  font-size: 0.92rem;
}
.ql-notes-list li { margin-bottom: 6px; }

.ql-letter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  margin: 10px 0 16px;
}
.ql-letter-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 8px 4px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.ql-letter-tile:hover {
  border-color: rgba(59,130,246,0.5);
  transform: translateY(-2px);
}
.ql-letter-tile.is-speaking,
.ql-say.is-speaking {
  border-color: #3B82F6;
  background: rgba(59,130,246,0.18);
}
.ql-letter-char {
  font-size: 1.15rem;
  font-weight: 700;
}
.ql-letter-name {
  font-size: 0.65rem;
  color: var(--muted, #9aa3b2);
  text-align: center;
  line-height: 1.2;
}

.ql-say-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.ql-say {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: inherit;
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ql-say:hover {
  border-color: rgba(59,130,246,0.5);
  background: rgba(59,130,246,0.12);
}
.ql-say-icon { font-size: 0.85rem; opacity: 0.85; }

.ql-notes-h4 {
  margin: 14px 0 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #c4b5fd;
}
.ql-notes-table-wrap {
  overflow-x: auto;
  margin: 10px 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border, #2a2e3a);
}
.ql-notes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.ql-notes-table th,
.ql-notes-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ql-notes-table th {
  color: var(--muted, #9aa3b2);
  font-weight: 600;
  background: rgba(255,255,255,0.03);
}
.ql-notes-table tr:last-child td { border-bottom: none; }

.ql-ex-image-wrap {
  margin: 10px 0 14px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border, #2a2e3a);
  background: rgba(255,255,255,0.03);
  max-width: 420px;
}
.ql-ex-image {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: #0f1218;
}

/* —— Story / dialogue mode —— */
.ql-story-skill .ql-skill-mark { color: #60a5fa; }
.ql-story {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
}
.ql-story-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ql-story-scene {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border, #2a2e3a);
  background: rgba(255,255,255,0.03);
}
.ql-story-image {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  object-position: center;
  background: #0f1218;
}
.ql-story-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 0.9rem;
  color: var(--muted, #9aa3b2);
}
.ql-story-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 2px 8px;
}
.ql-story-row {
  display: flex;
}
.ql-story-row.is-left { justify-content: flex-start; }
.ql-story-row.is-right { justify-content: flex-end; }
.ql-story-bubble {
  position: relative;
  max-width: 85%;
  padding: 10px 12px 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid color-mix(in srgb, var(--bubble-accent, #3B82F6) 45%, transparent);
  border-left: 3px solid var(--bubble-accent, #3B82F6);
}
.ql-story-row.is-right .ql-story-bubble {
  border-left: none;
  border-right: 3px solid var(--bubble-accent, #F59E0B);
  background: rgba(59, 130, 246, 0.08);
}
.ql-story-who {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bubble-accent, #3B82F6);
  margin-bottom: 4px;
}
.ql-story-text {
  font-size: 1rem;
  line-height: 1.45;
}
.ql-story-tts {
  margin-top: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  opacity: 0.85;
  padding: 0;
}
.ql-story-tts:hover { opacity: 1; }
.ql-story-check {
  margin-top: 4px;
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.06);
}
.ql-story-complete {
  text-align: center;
  padding: 18px 12px;
  border-radius: 12px;
  background: rgba(61, 214, 140, 0.08);
  border: 1px solid rgba(61, 214, 140, 0.25);
}
.ql-story-complete h3 { margin: 0 0 6px; }

/* ============================================================
   Quicky Docs — Official Document Generator
   ============================================================ */
.qd-lobby {
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 4px 48px;
}
.qd-top-nav {
  margin-bottom: 12px;
}
.qd-back-btn {
  border: none;
  background: transparent;
  color: var(--muted, #9aa3b2);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px 0;
}
.qd-back-btn:hover {
  color: var(--text, #e8eaef);
}
.qd-lobby-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}
.qd-hero-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: color-mix(in srgb, #F59E0B 18%, transparent);
  border: 1px solid color-mix(in srgb, #F59E0B 35%, transparent);
  flex-shrink: 0;
}
.qd-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F59E0B;
  margin-bottom: 6px;
}
.qd-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text, #e8eaef);
}
.qd-sub {
  margin: 0;
  color: var(--muted, #9aa3b2);
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 48ch;
}
.qd-section {
  margin-bottom: 28px;
}
.qd-section-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 650;
  margin: 0 0 4px;
  color: var(--text, #e8eaef);
}
.qd-section-hint {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--muted, #9aa3b2);
}
.qd-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.qd-doc-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border, #2a2e3a);
  background: var(--card, #12141c);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
  width: 100%;
}
.qd-doc-card:hover {
  border-color: color-mix(in srgb, var(--qd-accent, #F59E0B) 55%, transparent);
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--qd-accent, #F59E0B) 6%, var(--card, #12141c));
}
.qd-doc-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: color-mix(in srgb, var(--qd-accent, #F59E0B) 16%, transparent);
  flex-shrink: 0;
}
.qd-doc-icon-lg {
  width: 56px;
  height: 56px;
  font-size: 1.6rem;
  border-radius: 14px;
}
.qd-doc-body {
  flex: 1;
  min-width: 0;
}
.qd-doc-body h3 {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 650;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.qd-doc-body p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted, #9aa3b2);
  line-height: 1.35;
}
.qd-doc-meta {
  flex-shrink: 0;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.qd-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
}
.qd-badge-form {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.qd-badge-ai {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.qd-badge-free {
  background: rgba(57, 255, 136, 0.12);
  color: #39ff88;
  border: 1px solid rgba(57, 255, 136, 0.35);
}
.qd-badge-used {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.qd-quota {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border, #2a2e3a);
  background: var(--panel, #171a22);
  color: var(--ink, inherit);
}
#qdQuotaMount {
  margin: 0 0 12px;
}
.qd-quota .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #14b8c4;
  box-shadow: 0 0 0 3px rgba(20, 184, 196, 0.18);
  flex-shrink: 0;
}
.qd-quota.is-premium .dot {
  background: #f2a93b;
  box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.22);
}
.qd-quota.is-empty {
  color: var(--danger, #e5484d);
  border-color: color-mix(in srgb, var(--danger, #e5484d) 40%, var(--border, #2a2e3a));
}
.qd-quota.is-empty .dot {
  background: var(--danger, #e5484d);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.18);
}

/* Detail / placeholder */
.qd-detail {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 4px 48px;
}
.qd-detail-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
.qd-placeholder-panel {
  text-align: center;
  padding: 36px 24px;
  border-radius: 16px;
  border: 1px solid var(--border, #2a2e3a);
  background: rgba(255, 255, 255, 0.03);
}
.qd-placeholder-icon {
  font-size: 2.2rem;
  margin-bottom: 10px;
}
.qd-placeholder-panel h2 {
  margin: 0 0 10px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.25rem;
}
.qd-placeholder-panel p {
  margin: 0 0 10px;
  color: var(--muted, #9aa3b2);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}
.qd-placeholder-note {
  font-size: 0.82rem !important;
  opacity: 0.9;
  margin-bottom: 20px !important;
}

@media (max-width: 560px) {
  .qd-lobby-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .qd-detail-hero {
    flex-direction: column;
  }
}

/* ============================================================
   Quicky Docs — dual-pane workspace
   ============================================================ */
.qd-workspace {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);
  min-height: 520px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 4px 12px;
}
.qd-ws-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border, #2a2e3a);
  margin-bottom: 12px;
}
.qd-ws-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 140px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1rem;
  color: var(--text, #e8eaef);
}
.qd-ws-icon { font-size: 1.2rem; }
.qd-ws-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.qd-ws-body {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.qd-preview-pane {
  overflow: auto;
  padding: 8px 4px 24px;
  background: radial-gradient(ellipse at top, #1a1d28 0%, #0a0b10 70%);
  border-radius: 14px;
  border: 1px solid var(--border, #2a2e3a);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.qd-paper-wrap {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.qd-edit-chip {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
}
.qd-paper {
  width: 100%;
  min-height: 780px;
  background: #fff;
  color: #111;
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.12),
    0 12px 40px rgba(0,0,0,0.35);
  padding: 36px 40px 48px;
  position: relative;
}
.qd-paper-hint {
  color: #64748b;
  font-size: 0.95rem;
  text-align: center;
  margin-top: 120px;
  line-height: 1.5;
  font-family: system-ui, sans-serif;
}
.qd-letter {
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 12.5px;
  line-height: 1.5;
  min-height: 640px;
  outline: none;
  cursor: text;
}
.qd-letterhead {
  border-bottom: 2px solid #111;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.qd-lh-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.qd-lh-td-logo {
  width: 78px;
  vertical-align: middle;
  text-align: center;
}
.qd-lh-td-text {
  vertical-align: middle;
  text-align: center;
  padding: 0 8px;
}
.qd-lh-logo {
  width: 68px;
  height: 68px;
  object-fit: contain;
  display: inline-block;
}
.qd-lh-logo-coe {
  width: 74px;
  height: 74px;
}
.qd-lh-uni {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1.25;
}
.qd-lh-college {
  font-weight: 700;
  font-size: 11.5px;
  margin-top: 2px;
}
.qd-lh-dept {
  font-style: italic;
  font-size: 12px;
  margin-top: 3px;
}
.qd-lh-meta {
  font-size: 10.5px;
  margin-top: 4px;
}
.qd-letter-list {
  margin: 0 0 0.85em 1.2em;
  padding: 0;
}
.qd-letter-list li { margin: 0 0 0.2em; }
.qd-sign-line { margin-top: 2px; letter-spacing: 0.04em; }
.qd-enc { margin-top: 0.7em; }
.qd-endorse { margin-top: 1.6em; }
.qd-twimc { text-align: center; }
.qd-letter:focus {
  outline: 2px solid rgba(245, 158, 11, 0.35);
  outline-offset: 8px;
  border-radius: 2px;
}
.qd-letter-from { margin-bottom: 1.25em; }
.qd-letter-date { margin-top: 0.55em; }
.qd-letter-to { margin-bottom: 1.1em; }
.qd-letter-salutation { margin-bottom: 0.85em; }
.qd-letter-subject {
  margin-bottom: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.qd-letter-body p {
  margin: 0 0 0.85em;
  text-align: justify;
}
.qd-letter-close { margin-top: 1.5em; }
.qd-letter-sign-space { height: 42px; }
.qd-letter-sign-name { margin-top: 0.15em; }

.qd-form-pane {
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--border, #2a2e3a);
  background: var(--card, #12141c);
  padding: 14px 16px 24px;
}
.qd-form-section {
  margin-bottom: 18px;
}
.qd-form-section h3 {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F59E0B;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.qd-field {
  margin-bottom: 12px;
}
.qd-field label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted, #9aa3b2);
  margin-bottom: 5px;
}
.qd-field input,
.qd-field textarea {
  width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--border, #2a2e3a);
  background: var(--bg);
  color: var(--text, #e8eaef);
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}
.qd-field input:focus,
.qd-field textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, #F59E0B 55%, transparent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
.qd-form-footer {
  padding-top: 8px;
  border-top: 1px solid var(--border, #2a2e3a);
}
.qd-form-submit {
  width: 100%;
  margin-bottom: 8px;
}
.qd-form-tip {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted, #9aa3b2);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .qd-workspace {
    height: auto;
    min-height: 0;
  }
  .qd-ws-body {
    grid-template-columns: 1fr;
  }
  .qd-preview-pane {
    order: 2;
    max-height: none;
  }
  .qd-form-pane {
    order: 1;
    max-height: none;
  }
  .qd-paper {
    min-height: 520px;
    padding: 28px 24px 36px;
  }
}

.qd-cover { text-align: center; margin-top: 8px; }
.qd-cover-kicker {
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.qd-cover-on { margin: 6px 0; font-size: 12px; }
.qd-cover-title {
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 17px;
  margin: 8px 12px 10px;
  line-height: 1.3;
  text-transform: uppercase;
}
.qd-cover-sub, .qd-cover-aim {
  margin: 0 18px 10px;
  font-size: 12.5px;
  text-align: center;
}
.qd-cover-submit {
  margin: 14px 8px;
  text-align: justify;
  font-size: 12.5px;
}
.qd-cover-by { margin-top: 14px; letter-spacing: 0.12em; font-size: 11px; }
.qd-cover-name { font-weight: 700; font-size: 14px; margin-top: 4px; }
.qd-cover-meta { margin: 14px auto 0; text-align: left; border-collapse: collapse; }
.qd-cover-k { padding: 2px 10px 2px 0; font-weight: 700; white-space: nowrap; vertical-align: top; }
.qd-cover-v { padding: 2px 0; vertical-align: top; }
.qd-cover-members { text-align: left; margin: 14px 8px 0; font-size: 12.5px; }
.qd-cover-members ul { margin: 6px 0 0 18px; padding: 0; }
.qd-report-sec { text-align: left; margin-top: 18px; }
.qd-report-sec h2 {
  font-size: 13px;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qd-report-sec p { text-align: justify; margin: 0 0 8px; }

.qd-ceng-cover {
  text-align: center;
  padding: 8px 8px 28px;
}
.qd-ceng-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-bottom: 12px;
}
.qd-ceng-uni {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.35;
}
.qd-ceng-city { margin: 4px 0 10px; font-size: 12px; }
.qd-ceng-college,
.qd-ceng-dept,
.qd-ceng-prog,
.qd-ceng-course {
  font-weight: 700;
  margin-top: 7px;
  font-size: 12.5px;
  letter-spacing: 0.03em;
}
.qd-ceng-label {
  margin-top: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 12px;
}
.qd-ceng-topic {
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 15px;
  margin: 10px 12px 4px;
  line-height: 1.35;
  text-transform: uppercase;
}
.qd-ceng-name {
  font-weight: 700;
  font-size: 14px;
  margin: 6px 0 10px;
  letter-spacing: 0.04em;
}
.qd-ceng-id { font-size: 12.5px; margin-top: 3px; }
.qd-ceng-date {
  margin-top: 36px;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 13px;
}
.qd-ceng-break {
  border-top: 1px dashed #c4c4c4;
  margin: 32px 0 24px;
  page-break-before: always;
  break-before: page;
}
.qd-ceng-page,
.qd-ceng-ch {
  text-align: left;
}
.qd-ceng-page h2,
.qd-ceng-ch > h2 {
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.06em;
  margin: 18px 0 10px;
  text-transform: uppercase;
}
.qd-ceng-h3 {
  font-weight: 700;
  font-size: 12.5px;
  margin: 14px 0 6px;
}
.qd-ceng-h4 {
  font-weight: 700;
  font-size: 12.5px;
  margin: 10px 0 6px;
}
.qd-ceng-page p,
.qd-ceng-ch p {
  text-align: justify;
  margin: 0 0 8px;
}
.qd-ceng-sign { margin-top: 12px; }
.qd-ceng-ol,
.qd-ceng-refs {
  margin: 0 0 10px 22px;
  padding: 0;
}
.qd-ceng-ol li,
.qd-ceng-refs li {
  margin: 0 0 6px;
  text-align: justify;
}

/* ==================== HOME, COURSE & LEADERBOARD POLISH ==================== */
.course-filter-hint {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 12px 0 0;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.home-hero { margin-bottom: 28px; }
.home-kicker { color: #078e9e; }
.home-title { font-size: clamp(26px, 4vw, 34px); }
.home-sub { max-width: 600px; line-height: 1.65; }
.hub-grid:not(.sims-grid) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 0;
}
.hub-card {
  min-height: 154px;
  padding: 20px;
  gap: 13px;
  border-radius: 18px;
  box-shadow: 0 5px 18px -16px rgba(18, 20, 28, .4);
}
.hub-card:focus-visible { outline-offset: 3px; }
.hub-card-icon { font-size: 26px; }
.hub-card-body p { line-height: 1.55; }
.hub-card-cta {
  display: inline-block;
  margin-top: 2px;
  color: color-mix(in srgb, var(--hub-color, #33E1FF) 68%, var(--ink));
}

.course-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.full-quiz-banner { align-items: center; }
.full-quiz-copy { min-width: 0; flex: 1 1 280px; }
.full-quiz-banner .sub { max-width: 600px; line-height: 1.5; }
.full-quiz-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: min(100%, 210px);
  flex: 0 0 auto;
}
.full-quiz-actions .btn { min-height: 42px; }
.full-quiz-actions .btn:disabled,
.item-row .actions .btn:disabled { opacity: .56; }

#lbList { width: min(100%, 760px); margin-inline: auto; }
.leaderboard-header {
  align-items: center;
  margin: 4px auto 22px;
  width: min(100%, 760px);
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(125deg, color-mix(in srgb, var(--led-1) 9%, var(--panel)), var(--panel) 62%);
}
.leaderboard-header .code {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}
.leaderboard-header h1 { font-size: clamp(24px, 4vw, 32px); }
.leaderboard-intro {
  margin: 6px 0 0;
  max-width: 440px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.leaderboard-row .name { min-width: 0; overflow-wrap: anywhere; }
.leaderboard-row {
  position: relative;
  overflow: hidden;
  animation: leaderboard-enter .42s cubic-bezier(.2,.75,.25,1) backwards;
  animation-delay: var(--row-delay, 0ms);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.leaderboard-row:not(.top1):hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--led-1) 38%, var(--border));
  box-shadow: 0 8px 22px -16px color-mix(in srgb, var(--led-1) 65%, transparent);
}
.leaderboard-row:not(.top1):nth-child(2) { background: linear-gradient(100deg, color-mix(in srgb, #aab4c5 10%, var(--panel)), var(--panel) 55%); }
.leaderboard-row:not(.top1):nth-child(3) { background: linear-gradient(100deg, color-mix(in srgb, #c68c53 10%, var(--panel)), var(--panel) 55%); }
.leaderboard-row.top1 .led-frame { box-shadow: 0 13px 30px -18px color-mix(in srgb, var(--warning) 75%, transparent); }
.leaderboard-row.top1 .rank::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m2 8 5 4 5-7 5 7 5-4-2 12H4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m2 8 5 4 5-7 5 7 5-4-2 12H4z'/%3E%3C/svg%3E") center / contain no-repeat;
  border-radius: 0;
  box-shadow: none;
}
@keyframes leaderboard-enter {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.leaderboard-row .score {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
}
.leaderboard-row .score b { font: inherit; }
.leaderboard-row .score span {
  color: var(--muted);
  font: 500 10px var(--font-mono);
  letter-spacing: .04em;
}
.leaderboard-row.top1 .led-frame-inner { min-width: 0; }
.leaderboard-row.top1 .led-frame { width: 100%; }

@media (max-width: 1000px) {
  .hub-grid:not(.sims-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home-hero { margin-bottom: 20px; }
  .home-title { font-size: clamp(25px, 7vw, 32px); }
  .home-sub { font-size: 13.5px; }
  .course-filter-hint { max-width: 100%; border-radius: 10px; }
  .hub-grid:not(.sims-grid) { grid-template-columns: 1fr; gap: 10px; }
  .hub-card { min-height: 0; padding: 16px; gap: 12px; border-radius: 15px; }
  .hub-card-icon { width: 34px; text-align: center; font-size: 23px; }
  .hub-card-body h2 { font-size: 16px; }
  .hub-card-body p { margin-bottom: 7px; font-size: 12.5px; }
  .course-header { align-items: stretch; gap: 12px; }
  .course-header > div:first-child { min-width: 0; }
  .course-header h1 { overflow-wrap: anywhere; line-height: 1.2; }
  .course-header-actions { width: 100%; }
  .course-header-actions .btn { flex: 1 1 auto; min-height: 42px; }
  .full-quiz-banner { align-items: stretch; gap: 14px; padding: 16px; margin-bottom: 22px; }
  .full-quiz-copy { flex-basis: 100%; }
  .full-quiz-banner .title { font-size: 17px; }
  .full-quiz-actions { width: 100%; }
  .full-quiz-actions .btn { width: 100%; min-height: 44px; }
  .item-row { align-items: stretch; flex-direction: column; gap: 12px; padding: 14px; }
  .item-row .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .item-row .actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; }
  .leaderboard-row, .leaderboard-row .led-frame-inner { gap: 10px; }
  .leaderboard-row { padding: 12px; }
  .leaderboard-row.top1 .led-frame-inner { padding: 13px 12px; }
  .leaderboard-row .rank { width: 28px; font-size: 14px; }
  .leaderboard-row .name { font-size: 13px; }
  .leaderboard-row .score { font-size: 15px; }
  .leaderboard-header { align-items: flex-start; padding: 15px; margin-bottom: 16px; border-radius: 15px; }
  .leaderboard-header .btn { min-height: 40px; }
  .leaderboard-intro { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .leaderboard-row { animation: none; transition: none; }
  .leaderboard-row:not(.top1):hover { transform: none; }
}

@media (max-width: 560px) {
  .qd-lobby { padding: 4px 0 32px; }
  .qd-lobby-hero { align-items: flex-start; gap: 14px; margin-bottom: 24px; }
  .qd-hero-icon { width: 54px; height: 54px; border-radius: 14px; font-size: 1.5rem; }
  .qd-title { font-size: clamp(1.4rem, 6vw, 1.65rem); line-height: 1.15; overflow-wrap: anywhere; }
  .qd-sub { font-size: .88rem; }
  .qd-section { margin-bottom: 22px; }
  .qd-doc-grid { grid-template-columns: 1fr; gap: 10px; }
  .qd-doc-card { gap: 10px; padding: 13px; }
  .qd-doc-meta .qd-badge { padding: 3px 6px; font-size: 9px; }
}

@media (max-width: 430px) {
  .qc-practice-panel .qc-ptype-btn { padding: 6px 9px; }
}

/* Multiplayer — Live Quiz Show */
.live-quiz-editor { margin: 20px 0; padding: clamp(16px, 3vw, 28px); border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--panel) 88%, #7758ee 12%)); }
.live-quiz-editor[hidden] { display: none; }
.live-quiz-editor .field > input, .live-quiz-editor .field > select { width: 100%; box-sizing: border-box; }
.live-quiz-editor-title h2, .live-show-invite-copy h2 { margin: 2px 0 6px; font-size: clamp(1.3rem, 3vw, 1.9rem); }
.live-quiz-editor-title p, .live-show-invite-copy p { margin: 0 0 16px; color: var(--muted); line-height: 1.5; }
.live-show-kicker { display: inline-block; color: #7357e8; font: 700 .7rem/1.3 var(--font-mono, monospace); letter-spacing: .13em; }
.live-quiz-settings-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.live-leaderboard-toggle { display: flex; align-items: flex-start; gap: 11px; margin: 10px 0 18px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.live-leaderboard-check { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #fff; background: #7357e8; font-weight: 800; }
.live-leaderboard-toggle span { display: grid; gap: 4px; }
.live-leaderboard-toggle small { color: var(--muted); line-height: 1.4; }
.live-question-editor-list { display: grid; gap: 14px; margin: 14px 0; }
.live-question-editor { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.live-question-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.live-question-editor-head strong { color: var(--ink); }
.live-question-editor-head .btn { min-height: 36px; padding: 6px 11px; }
.live-question-label { display: grid; gap: 7px; font-size: .85rem; font-weight: 600; }
.live-question-label textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg, #fff); color: var(--ink); font: inherit; resize: vertical; }
.live-choice-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 16px 0 0; padding: 0; border: 0; }
.live-choice-editor legend { margin-bottom: 8px; color: var(--muted); font-size: .8rem; font-weight: 600; }
.live-choice-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.live-choice-field input[type="radio"] { width: 18px; height: 18px; accent-color: #7357e8; }
.live-choice-letter { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #6042d5; background: #eeeaff; font-size: .8rem; font-weight: 750; }
.live-choice-field input[type="text"] { min-width: 0; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg, #fff); color: var(--ink); font: inherit; font-size: .85rem; }
.live-show-invite { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; gap: 24px; margin: 8px 0 24px; padding: clamp(16px, 3vw, 28px); border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(120deg, #f5f2ff, var(--panel) 65%); }
.live-show-qr-wrap { display: grid; justify-items: center; gap: 8px; padding: 12px; border-radius: 16px; background: #fff; color: #5b6475; font-size: .75rem; text-align: center; }
.live-show-qr-wrap canvas { display: block; width: min(100%, 188px); height: auto; image-rendering: pixelated; }
.live-show-qr-wrap canvas[hidden] { display: none; }
.live-show-invite-copy { min-width: 0; }
.live-show-invite-copy p { max-width: 50ch; }
.live-show-room-code { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--ink); background: var(--panel); font: 750 1.4rem/1.2 var(--font-mono, monospace); letter-spacing: .12em; }
.live-show-room-code .copy-btn { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font: 600 .74rem var(--font-sans, system-ui); letter-spacing: 0; }
.live-show-join-link { display: block; color: #6042d5; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.live-show-screen { width: min(100%, 1280px); margin: 0 auto; padding: clamp(14px, 3vw, 32px); box-sizing: border-box; }
.live-show-game-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 24px; }
.live-show-game-head h1 { margin: 5px 0; font-size: clamp(1.35rem, 3.5vw, 2rem); }
.live-show-game-head p { margin: 0; color: var(--muted); }
.live-show-leave { min-height: 42px; }
.live-show-stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; color: var(--muted); font: 700 .85rem var(--font-mono, monospace); }
.live-show-timer { display: grid; place-items: center; width: 54px; height: 54px; border: 3px solid #7357e8; border-radius: 50%; color: #6042d5; background: var(--panel); font: 800 1.1rem var(--font-mono, monospace); }
.live-show-timer small { display: none; }
.live-show-timer-track { height: 8px; overflow: hidden; margin: 0 0 18px; border-radius: 99px; background: rgba(112, 95, 170, .15); }
.live-show-timer-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #20bea1, #7357e8, #f08b50); transition: width .25s linear; }
.live-show-question-card { min-width: 0; padding: clamp(18px, 4vw, 38px); border: 1px solid var(--border); border-radius: 22px; background: var(--panel); box-shadow: 0 14px 40px rgba(28, 33, 56, .07); }
.live-show-question-card h2 { margin: 0 0 24px; color: var(--ink); font-size: clamp(1.45rem, 4vw, 2.8rem); line-height: 1.18; text-align: center; overflow-wrap: anywhere; }
.live-show-question-image { display: block; max-width: 100%; max-height: 320px; margin: 0 auto 20px; border-radius: 12px; object-fit: contain; }
.live-show-host-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.live-show-host-option { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 70px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg, #f7f8fb); }
.live-show-host-option > span { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: #7254df; font-size: 1.1rem; font-weight: 800; }
.live-show-host-option:nth-child(2) > span { background: #168bd0; }
.live-show-host-option:nth-child(3) > span { background: #e27b34; }
.live-show-host-option:nth-child(4) > span { background: #29a477; }
.live-show-host-option strong { overflow-wrap: anywhere; }
.live-show-host-option.is-correct { border-color: #25a477; background: rgba(37, 164, 119, .09); }
.live-show-host-option.is-correct > span { background: #16865e; }
.live-show-host-option b { flex: none; margin-left: auto; color: #16865e; font-size: .78rem; }
.live-show-response-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; color: var(--muted); font-size: .88rem; }
.live-show-response-row strong { color: var(--ink); font-size: 1.2rem; }
.live-show-host-controls { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 20px 0 0; color: var(--muted); }
.live-show-host-controls .btn { min-height: 48px; padding-inline: 20px; }
.live-show-player-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.live-show-answer { display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 88px; padding: 16px; border: 2px solid var(--border); border-radius: 16px; color: var(--ink); background: var(--bg, #f7f8fb); text-align: left; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.live-show-answer:hover:not(:disabled) { transform: translateY(-2px); border-color: #8068e5; box-shadow: 0 8px 20px rgba(86, 66, 175, .12); }
.live-show-answer:focus-visible { outline: 3px solid #8068e5; outline-offset: 3px; }
.live-show-answer > span { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; color: #fff; background: #7254df; font-size: 1.35rem; font-weight: 850; }
.live-show-answer:nth-child(2) > span { background: #168bd0; }
.live-show-answer:nth-child(3) > span { background: #e27b34; }
.live-show-answer:nth-child(4) > span { background: #29a477; }
.live-show-answer strong { font-size: clamp(.95rem, 2vw, 1.15rem); overflow-wrap: anywhere; }
.live-show-answer.is-selected { border-color: #6042d5; background: #f0edff; }
.live-show-answer:disabled { cursor: default; opacity: .78; }
.live-show-answer-status, .live-show-player-wait { margin: 14px 0 0; color: var(--muted); text-align: center; }
.live-show-reveal-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); align-items: start; gap: 18px; }
.live-show-question-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 15px; color: var(--muted); font: 700 .72rem var(--font-mono, monospace); letter-spacing: .09em; }
.live-show-leaderboard, .live-show-waiting-card { padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }
.live-show-leaderboard-head { display: grid; gap: 5px; margin-bottom: 10px; }
.live-show-leaderboard ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.live-show-leaderboard li { display: grid; grid-template-columns: 26px 34px minmax(0,1fr) auto; align-items: center; gap: 9px; min-width: 0; padding: 9px; border-radius: 11px; background: var(--bg, #f7f8fb); }
.live-show-leaderboard li.rank-1 { background: #fff4d8; }
.live-show-leaderboard li.rank-2 { background: #f0f2f6; }
.live-show-leaderboard li.rank-3 { background: #fce9dd; }
.live-rank { color: var(--muted); font: 750 .8rem var(--font-mono, monospace); text-align: center; }
.live-show-leaderboard img, .live-show-final-rankings img { width: 32px; height: 32px; border-radius: 50%; background: #edf0f7; }
.live-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-show-waiting-card { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; text-align: center; }
.live-show-waiting-card > span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #16865e; background: #e1f6ed; font-size: 1.6rem; }
.live-show-waiting-card p { margin: 0; color: var(--muted); }
.live-show-final-rankings { display: grid; gap: 8px; max-width: 680px; margin: 24px auto; padding: 0; list-style: none; }
.live-show-final-rankings li { display: grid; grid-template-columns: 42px 36px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.live-show-final-rankings li > span:first-child { color: var(--muted); font-weight: 700; }
.live-podium-crown { margin-bottom: 4px; font-size: 1.5rem; animation: live-podium-pop .5s cubic-bezier(.2,.8,.2,1) both; }
.podium-item:nth-child(2) .live-podium-crown { animation-delay: .12s; }
.podium-item:nth-child(3) .live-podium-crown { animation-delay: .24s; }
.live-podium-detail { margin-top: 4px; color: var(--muted); font-size: .75rem; }
.live-show-results-heading { margin: 20px 0 8px; text-align: center; }
.live-show-results-heading h1 { margin: 5px 0; font-size: clamp(1.7rem, 5vw, 3rem); }
.live-show-results-heading p { color: var(--muted); }
.live-show-results-actions { display: flex; justify-content: center; margin: 26px 0; }
.live-show-results-actions .btn { min-width: 160px; min-height: 48px; }
@keyframes live-podium-pop { from { opacity: 0; transform: translateY(14px) scale(.85); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 720px) {
  .live-show-invite { grid-template-columns: 1fr; justify-items: stretch; gap: 16px; }
  .live-show-qr-wrap { grid-template-columns: 1fr; justify-items: center; width: min(100%, 220px); box-sizing: border-box; margin-inline: auto; padding: 14px; text-align: center; }
  .live-show-qr-wrap canvas { width: min(58vw, 188px); }
  .live-show-reveal-layout { grid-template-columns: 1fr; }
  .live-show-leaderboard ol { grid-template-columns: 1fr; }
  .live-show-screen { padding: 14px; }
  .live-show-game-head { margin-bottom: 16px; }
  .live-show-question-card { border-radius: 16px; }
}
@media (max-width: 520px) {
  .live-quiz-settings-row, .live-choice-editor, .live-show-host-options, .live-show-player-choices { grid-template-columns: 1fr; }
  .live-choice-field { min-height: 45px; }
  .live-show-room-code { display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; font-size: 1.1rem; letter-spacing: .08em; }
  .live-show-qr-wrap { width: min(100%, 228px); }
  .live-show-qr-wrap canvas { width: min(62vw, 196px); }
  .live-show-game-head { align-items: center; }
  .live-show-game-head h1 { font-size: 1.35rem; }
  .live-show-stage-bar { margin-top: 12px; }
  .live-show-answer { min-height: 72px; }
  .live-show-response-row { flex-direction: column; }
  .live-show-host-controls { flex-direction: column; align-items: stretch; }
  .live-show-host-controls .btn { width: 100%; }
  .live-show-final-rankings li { grid-template-columns: 28px 32px minmax(0,1fr) auto; gap: 8px; padding: 10px; }
  .podium-container { gap: 5px; }
  .podium-item .name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .live-show-answer, .live-show-timer-track span, .live-podium-crown { animation: none; transition: none; }
  .live-show-answer:hover:not(:disabled) { transform: none; }
}

/* Cooperative Boss Raid */
.raid-invite { background: linear-gradient(120deg, #fff4e9, var(--panel) 68%); }
.raid-kicker { color: #d75f37; }
.raid-screen { max-width: 1180px; }
.raid-arena { position: relative; overflow: hidden; margin: 8px 0 18px; padding: clamp(14px, 2.5vw, 26px); border: 1px solid rgba(244,153,91,.26); border-radius: 24px; background: radial-gradient(ellipse at 50% 48%, rgba(255,151,78,.12), transparent 37%), linear-gradient(145deg,#171c2c,#22243b 58%,#34263b); color: #fff; box-shadow: 0 20px 55px rgba(33,27,48,.16); }
.raid-arena::before { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: .2; background-image: radial-gradient(rgba(255,255,255,.6) .8px,transparent .8px); background-size: 27px 27px; mask-image: linear-gradient(to bottom,transparent,#000 25%,#000); }
.raid-arena-top { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.raid-health-card { min-width: 0; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(11,15,29,.53); backdrop-filter: blur(8px); }
.raid-health-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #ffd2a0; font: 750 .72rem var(--font-mono,monospace); letter-spacing: .08em; }
.raid-health-heading strong { color: #fff; font: 800 .92rem var(--font-sans,system-ui); letter-spacing: 0; white-space: nowrap; }
.raid-health-heading small { color: #aeb6c8; font-size: .72rem; font-weight: 600; }
.raid-boss-track,.raid-team-track,.raid-life-track { overflow: hidden; height: 9px; margin-top: 9px; border-radius: 99px; background: rgba(255,255,255,.14); }
.raid-boss-track i,.raid-team-track i,.raid-life-track i { display: block; height: 100%; border-radius: inherit; transition: width .55s cubic-bezier(.2,.8,.2,1); }
.raid-boss-track i { background: linear-gradient(90deg,#ff5b55,#ffb247); box-shadow: 0 0 13px rgba(255,113,66,.45); }
.raid-team-track i { background: linear-gradient(90deg,#23bc91,#8fe48c); }
.raid-boss-stage { position: relative; display: grid; justify-items: center; align-content: center; min-height: 244px; padding: 12px 0 4px; }
.raid-boss-visual { position: relative; z-index: 1; display: grid; width: min(100%, 440px); height: clamp(210px, 30vw, 290px); place-items: center; overflow: hidden; border: 1px solid rgba(181,194,255,.15); border-radius: 18px; background: radial-gradient(ellipse at 50% 75%,rgba(119,76,150,.3),transparent 50%),linear-gradient(180deg,#10182b 0%,#151a31 62%,#342545 100%); box-shadow: inset 0 0 35px rgba(5,8,20,.4),0 12px 28px rgba(0,0,0,.22); }
.raid-boss-visual::after { position: absolute; right: 0; bottom: 17%; left: 0; height: 1px; content: ""; background: linear-gradient(90deg,transparent,rgba(255,188,112,.34),transparent); }
.raid-boss-svg-fallback { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .3s ease; }
.raid-boss-svg-fallback .raid-boss-art { width: clamp(145px,22vw,220px); max-height: 205px; }
.raid-shooter-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100% !important; height: 100% !important; max-height: none; opacity: 0; animation: none; transition: opacity .35s ease; }
.raid-boss-visual.is-ready .raid-shooter-canvas { opacity: 1; }
.raid-boss-visual.is-ready .raid-boss-svg-fallback { opacity: 0; pointer-events: none; }
.raid-shooter-status { position: absolute; z-index: 2; right: 12px; bottom: 10px; left: 12px; width: fit-content; max-width: calc(100% - 24px); justify-self: center; padding: 6px 10px; border: 1px solid rgba(157,184,255,.28); border-radius: 99px; color: #d8e5ff; background: rgba(9,15,30,.82); font: 700 .64rem var(--font-mono,monospace); text-align: center; }
.raid-shooter-status[hidden] { display: none; }
.raid-fx-layer { position: absolute; z-index: 6; inset: 0; overflow: hidden; pointer-events: none; }
.raid-boss-aura { position: absolute; width: min(66vw,330px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(255,123,56,.24),rgba(255,104,73,.07) 45%,transparent 72%); animation: raid-aura 3.6s ease-in-out infinite alternate; }
.raid-boss-art { position: relative; z-index: 1; width: clamp(172px,25vw,245px); max-height: 205px; filter: drop-shadow(0 14px 20px rgba(0,0,0,.38)); animation: raid-boss-hover 3.4s ease-in-out infinite; }
.raid-boss-name { z-index: 1; margin-top: -3px; color: #ffd1a0; font: 800 .68rem var(--font-mono,monospace); letter-spacing: .2em; }
.raid-boss-taunt,.raid-volley-callout { z-index: 1; margin-top: 8px; color: #c8cede; font-size: .77rem; }
.raid-volley-callout { padding: 6px 11px; border: 1px solid rgba(255,188,112,.35); border-radius: 99px; color: #ffe0b5; background: rgba(226,112,62,.2); }
.raid-team-heading { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px; margin: 11px 0 9px; color: #ffd2a0; font: 750 .7rem var(--font-mono,monospace); letter-spacing: .12em; }
.raid-team-heading small { color: #adb5c7; font: 600 .74rem var(--font-sans,system-ui); letter-spacing: 0; }
.raid-player-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 9px; }
.raid-player-card { position: relative; min-width: 0; padding: 10px 11px; overflow: visible; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(255,255,255,.075); }
.raid-player-card.is-you { border-color: rgba(91,221,189,.72); background: rgba(30,168,140,.13); }
.raid-player-card.is-knocked-out { opacity: .62; filter: saturate(.55); }
.raid-player-identity { display: flex; align-items: center; min-width: 0; gap: 8px; color: #f7f7fa; font-size: .8rem; font-weight: 700; }
.raid-player-identity img { flex: none; width: 31px; height: 31px; border: 2px solid rgba(255,255,255,.2); border-radius: 50%; background: #fff; }
.raid-player-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raid-player-identity b { margin-left: auto; color: #75ebcf; font-size: .65rem; text-transform: uppercase; }
.raid-life-label { display: flex; justify-content: space-between; margin-top: 9px; color: #bfc7d5; font: 700 .62rem var(--font-mono,monospace); }
.raid-life-label strong { color: #f1f3f7; }
.raid-life-track { height: 5px; margin-top: 5px; background: rgba(255,255,255,.13); }
.raid-life-track i { background: linear-gradient(90deg,#e96a64,#f1bc68 50%,#65d5a2); }
.raid-player-card.is-knocked-out .raid-life-track i { background: #8d94a2; }
.raid-hit-label { margin-top: 5px; color: #ffd27e; font: 750 .65rem var(--font-mono,monospace); }
.raid-laser { position: absolute; z-index: 3; top: -235px; left: 50%; width: 5px; height: 235px; border-radius: 99px; background: linear-gradient(to top,rgba(255,224,125,.08),#fff4a6 28%,#ff9f45 72%,transparent); box-shadow: 0 0 11px #ffb450,0 0 25px rgba(255,114,65,.7); transform: translateX(-50%) scaleY(.05); transform-origin: bottom center; animation: raid-laser-shot .62s cubic-bezier(.16,.8,.24,1) var(--raid-delay,0ms) both; pointer-events: none; }
.raid-player-card.has-hit { border-color: rgba(255,210,126,.5); }
.raid-shot-beam { position: absolute; z-index: 5; height: 7px; border-radius: 99px; background: linear-gradient(90deg,rgba(255,233,151,.1),#fff4ad 35%,#ffae43); box-shadow: 0 0 9px #fff1a0,0 0 22px rgba(255,145,54,.9); transform: translateY(-50%) rotate(var(--beam-angle)) scaleX(0); transform-origin: left center; animation: raid-beam-to-boss .44s cubic-bezier(.15,.7,.18,1) forwards; }
.raid-fire-projectile { position: absolute; z-index: 5; display: grid; place-items: center; width: 38px; height: 38px; font-size: 29px; filter: drop-shadow(0 0 8px #ff7137); transform: translate(-50%,-50%); animation: raid-fire-to-player .5s cubic-bezier(.38,.05,.8,.28) forwards; }
.raid-fire-projectile::before { content: ""; display: block; width: 29px; height: 29px; background-color: #ff7137; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12.2 2.8c.7 3.1-.8 4.6-2.3 6.1-1.3 1.3-2.6 2.6-2.6 5.1a4.7 4.7 0 0 0 9.4 0c0-2-1-3.6-2.8-5.2.1 2-1 3.1-2.1 3.8.3-3.4 2.1-5.6.4-9.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12.2 2.8c.7 3.1-.8 4.6-2.3 6.1-1.3 1.3-2.6 2.6-2.6 5.1a4.7 4.7 0 0 0 9.4 0c0-2-1-3.6-2.8-5.2.1 2-1 3.1-2.1 3.8.3-3.4 2.1-5.6.4-9.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.raid-impact-pop { position: absolute; z-index: 7; display: grid; justify-items: center; gap: 0; min-width: 70px; color: #fff; text-align: center; transform: translate(-50%,-50%); animation: raid-impact-rise .95s cubic-bezier(.18,.78,.26,1) forwards; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.raid-comic-burst { display: grid; place-items: center; width: 57px; height: 48px; clip-path: polygon(50% 0,61% 20%,82% 8%,81% 31%,100% 39%,83% 54%,96% 75%,72% 75%,62% 100%,47% 80%,27% 96%,28% 71%,3% 68%,20% 49%,0 31%,25% 29%,32% 5%); color: #5a2236; background: #ffe26e; font: 1000 .69rem/1 var(--font-sans,system-ui); text-shadow: 0 1px #fff4bd; }
.raid-impact-pop > strong { margin-top: -3px; padding: 3px 7px; border: 1px solid rgba(255,255,255,.75); border-radius: 99px; color: #fff; background: #e94d3d; font: 900 .77rem/1.2 var(--font-mono,monospace); white-space: nowrap; }
.raid-impact-pop.is-player > strong { background: #d84b38; }
.raid-boss-art.is-hit { animation: raid-boss-impact .48s cubic-bezier(.2,.7,.25,1); filter: drop-shadow(0 0 13px rgba(255,91,68,.92)); }
.raid-player-identity img.raid-avatar-hit { animation: raid-avatar-impact .5s ease-in-out; box-shadow: 0 0 0 5px rgba(255,92,64,.6),0 0 20px rgba(255,100,51,.85); }
.raid-question-card,.raid-reveal-card { margin-top: 18px; padding: clamp(17px,3vw,30px); border: 1px solid var(--border); border-radius: 20px; background: var(--panel); box-shadow: 0 12px 34px rgba(30,35,55,.07); }
.raid-question-top { display: flex; align-items: center; justify-content: space-between; }
.raid-question-card h2,.raid-reveal-card h2 { margin: 7px 0 22px; color: var(--ink); font-size: clamp(1.35rem,3vw,2rem); line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.raid-question-card .live-show-timer.is-urgent { color: #d84e42; border-color: #e46a56; animation: raid-timer-pulse .7s ease-in-out infinite alternate; }
.raid-answer.is-selected { border-color: #12a985; background: #e8faf5; }
.raid-host-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; color: var(--muted); font-size: .85rem; }
.raid-host-controls .btn { min-height: 44px; }
.raid-round-feedback { margin: 16px 0 0; color: var(--muted); text-align: center; }
.raid-results-boss { display: flex; align-items: center; justify-content: center; gap: clamp(14px,4vw,36px); flex-wrap: wrap; max-width: 780px; margin: 20px auto 34px; padding: 16px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(130deg,#fff5eb,#fff); }
.raid-results-bosses { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; width: min(100%,780px); margin: 20px auto 0; }
.raid-result-boss { display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 14px 9px; border: 1px solid var(--border); border-radius: 14px; color: var(--muted); background: var(--panel); text-align: center; }
.raid-result-boss > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--border); border-radius: 50%; font-weight: 800; }
.raid-result-boss strong { color: var(--ink); font-size: .75rem; }
.raid-result-boss small { font: 750 .58rem var(--font-mono,monospace); letter-spacing: .08em; }
.raid-result-boss.is-defeated { border-color: rgba(35,188,145,.4); background: linear-gradient(145deg,rgba(35,188,145,.12),var(--panel)); }
.raid-result-boss.is-defeated > span { border-color: rgba(35,188,145,.5); color: #098361; background: rgba(35,188,145,.12); }
.raid-results-boss .raid-boss-art { width: 125px; height: 115px; animation: none; }
.raid-results-boss > div { display: grid; gap: 4px; text-align: center; }
.raid-results-boss > div strong { color: var(--ink); font-size: 1.35rem; }
.raid-results-boss > div span { color: var(--muted); font-size: .74rem; }
.raid-contribution-title { margin: 0 auto 12px; max-width: 820px; color: var(--muted); font: 750 .72rem var(--font-mono,monospace); letter-spacing: .14em; }
.raid-contribution-list { display: grid; gap: 8px; max-width: 820px; margin: 0 auto; padding: 0; list-style: none; }
.raid-contribution-list li { display: grid; grid-template-columns: 34px 38px minmax(90px,1fr) repeat(3,minmax(58px,auto)); align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.raid-contribution-list li.raid-top-contributor { border-color: #f2c47a; background: linear-gradient(100deg,#fff8e8,var(--panel)); }
.raid-contribution-rank { color: var(--muted); font: 750 .8rem var(--font-mono,monospace); text-align: center; }
.raid-contribution-list img { width: 36px; height: 36px; border-radius: 50%; background: #edf0f7; }
.raid-contribution-list li > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raid-contribution-stat { display: grid; justify-items: end; }
.raid-contribution-stat b { color: var(--ink); font-size: .9rem; }
.raid-contribution-stat small { color: var(--muted); font-size: .62rem; }
@keyframes raid-boss-hover { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes raid-aura { from{transform:scale(.94);opacity:.7} to{transform:scale(1.07);opacity:1} }
@keyframes raid-laser-shot { 0%{opacity:0;transform:translateX(-50%) scaleY(.05)} 18%{opacity:1} 72%{opacity:1;transform:translateX(-50%) scaleY(1)} 100%{opacity:0;transform:translateX(-50%) scaleY(1)} }
@keyframes raid-beam-to-boss { 0%{opacity:.2;transform:translateY(-50%) rotate(var(--beam-angle)) scaleX(0)} 68%{opacity:1;transform:translateY(-50%) rotate(var(--beam-angle)) scaleX(1)} 100%{opacity:0;transform:translateY(-50%) rotate(var(--beam-angle)) scaleX(1)} }
@keyframes raid-fire-to-player { 0%{opacity:.25;transform:translate(-50%,-50%) scale(.65)} 78%{opacity:1} 100%{opacity:.15;transform:translate(calc(-50% + var(--fire-dx)),calc(-50% + var(--fire-dy))) scale(1.15)} }
@keyframes raid-impact-rise { 0%{opacity:0;transform:translate(-50%,-35%) scale(.65)} 20%{opacity:1;transform:translate(-50%,-50%) scale(1.08)} 72%{opacity:1;transform:translate(-50%,-95%) scale(1)} 100%{opacity:0;transform:translate(-50%,-130%) scale(.95)} }
@keyframes raid-boss-impact { 0%,100%{transform:translateX(0) scale(1)} 18%{transform:translateX(-10px) scale(1.04,.92)} 42%{transform:translateX(8px) scale(.96,1.05)} 66%{transform:translateX(-4px) scale(1.02,.98)} }
@keyframes raid-avatar-impact { 0%,100%{transform:translateX(0)} 22%{transform:translateX(-5px) rotate(-8deg)} 48%{transform:translateX(5px) rotate(8deg)} 72%{transform:translateX(-3px) rotate(-4deg)} }
@keyframes raid-player-recoil { 0%,100%{transform:translateY(0)} 35%{transform:translateY(3px)} }
@keyframes raid-timer-pulse { to{transform:scale(1.07);box-shadow:0 0 0 5px rgba(228,106,86,.12)} }
@media(max-width:720px){.raid-boss-stage{min-height:210px}.raid-player-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.raid-laser{top:-205px;height:205px}.raid-health-heading{font-size:.64rem}.raid-health-card{padding:10px}.raid-contribution-list li{grid-template-columns:27px 34px minmax(72px,1fr) repeat(3,minmax(44px,auto));gap:7px;padding:9px}.raid-contribution-list img{width:32px;height:32px}}
@media(max-width:480px){.raid-arena{padding:12px;border-radius:17px}.raid-arena-top{gap:7px}.raid-health-heading{align-items:flex-start;flex-direction:column;gap:3px}.raid-health-heading strong{font-size:.8rem}.raid-boss-stage{min-height:190px}.raid-boss-visual{height:215px}.raid-boss-art{width:178px}.raid-player-grid{gap:7px}.raid-player-card{padding:8px}.raid-player-identity{gap:6px;font-size:.7rem}.raid-player-identity img{width:27px;height:27px}.raid-question-card,.raid-reveal-card{padding:15px;border-radius:16px}.raid-host-controls{align-items:stretch;flex-direction:column}.raid-contribution-list li{grid-template-columns:24px 30px minmax(55px,1fr) repeat(3,minmax(37px,auto));gap:5px;padding:8px 6px}.raid-contribution-list img{width:28px;height:28px}.raid-contribution-list li>strong{font-size:.72rem}.raid-contribution-stat b{font-size:.75rem}.raid-contribution-stat small{font-size:.55rem}.raid-results-boss{gap:12px;padding:10px}.raid-results-boss .raid-boss-art{width:95px;height:90px}}
@media(prefers-reduced-motion:reduce){.raid-boss-aura,.raid-boss-art,.raid-laser,.raid-shot-beam,.raid-fire-projectile,.raid-impact-pop,.raid-player-identity img.raid-avatar-hit,.raid-question-card .live-show-timer.is-urgent{animation:none!important}.raid-laser{opacity:.8;transform:translateX(-50%) scaleY(1)}.raid-shot-beam{opacity:.9;transform:translateY(-50%) rotate(var(--beam-angle)) scaleX(1)}.raid-fire-projectile{display:none}.raid-impact-pop{opacity:1;transform:translate(-50%,-50%)}.raid-boss-track i,.raid-team-track i,.raid-life-track i{transition:none}}

/* Three new multiplayer modes */
.live-show-invite.relay-invite{border-color:#60d3b2;background:linear-gradient(120deg,#edfff8,#fff 66%)}
.live-show-invite.escape-invite{border-color:#a994ff;background:linear-gradient(120deg,#f7f2ff,#fff 66%)}
.live-show-invite.last-stand-invite{border-color:#f58f9a;background:linear-gradient(120deg,#fff1f2,#fff 66%)}
.new-mode-screen{--mode-accent:#17a984;max-width:1120px;margin:0 auto;padding:clamp(16px,3vw,34px);border:1px solid var(--border);border-radius:26px;background:var(--panel);box-shadow:0 18px 54px rgba(24,31,48,.09)}
.relay-screen{--mode-accent:#0d9c79}.escape-screen{--mode-accent:#7653d8}.survival-screen{--mode-accent:#dc5268}
.new-mode-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px}
.new-mode-header h1{margin:5px 0 7px;color:var(--ink);font-size:clamp(1.55rem,4vw,2.65rem);line-height:1.05}
.new-mode-header p{max-width:660px;margin:0;color:var(--muted);line-height:1.55}
.mode-eyebrow{color:var(--mode-accent);font:750 .72rem var(--font-mono,monospace);letter-spacing:.14em;text-transform:uppercase}
.mode-leave{flex:none;min-height:42px}
.mode-question-card,.mode-round-reveal{margin-top:18px;padding:clamp(18px,3vw,30px);border:1px solid var(--border);border-radius:22px;background:linear-gradient(140deg,var(--panel),color-mix(in srgb,var(--mode-accent) 4%,var(--panel)));box-shadow:0 13px 38px rgba(20,28,47,.07)}
.mode-question-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--mode-accent);font:750 .75rem var(--font-mono,monospace);letter-spacing:.08em}
.mode-clock{padding:7px 12px;border:1px solid color-mix(in srgb,var(--mode-accent) 32%,transparent);border-radius:99px;color:var(--mode-accent);background:color-mix(in srgb,var(--mode-accent) 9%,transparent);font-size:.95rem;letter-spacing:0}
.mode-clock.is-urgent{color:#c13f53;border-color:#ea8995;background:#fff0f2;animation:raid-timer-pulse .7s infinite alternate}
.mode-question-card h2,.mode-round-reveal h2{max-width:850px;margin:22px auto;text-align:center;color:var(--ink);font-size:clamp(1.35rem,3.5vw,2.1rem);line-height:1.25;overflow-wrap:anywhere}
.mode-status,.mode-waiting{color:var(--muted);text-align:center;line-height:1.5}
.mode-round-reveal{text-align:center;animation:live-podium-pop .35s ease both}
.mode-round-reveal>p{color:var(--muted)}
.mode-round-reveal>.btn{min-height:48px;margin:16px auto 0}
.mode-squad-grid{display:flex;flex-wrap:wrap;gap:8px;margin:17px 0}
.mode-player-card{display:flex;align-items:center;gap:8px;min-width:150px;padding:8px 11px;border:1px solid var(--border);border-radius:13px;color:var(--muted);background:var(--panel);font-size:.82rem}
.mode-player-card img{width:30px;height:30px;border-radius:50%;background:#eef0f7}
.mode-player-card.is-you{border-color:var(--mode-accent);color:var(--ink);box-shadow:0 0 0 2px color-mix(in srgb,var(--mode-accent) 12%,transparent)}
.mode-player-card.is-active-team{background:color-mix(in srgb,var(--mode-accent) 8%,var(--panel))}
.relay-scoreboard{display:grid;grid-template-columns:minmax(120px,1fr) 42px minmax(120px,1fr) minmax(130px,.7fr);align-items:stretch;gap:10px}
.relay-team-score,.relay-time-bank{display:grid;align-content:center;justify-items:center;gap:2px;min-height:114px;padding:13px;border:1px solid var(--border);border-radius:19px;background:linear-gradient(145deg,#f0fbf7,var(--panel))}
.relay-team-score>span,.relay-time-bank>span{color:var(--muted);font:750 .68rem var(--font-mono,monospace);letter-spacing:.13em}
.relay-team-score>strong{color:var(--ink);font-size:2rem;line-height:1.05}
.relay-team-score>small{color:var(--mode-accent);font-weight:700}
.relay-team-score.team-b{background:linear-gradient(145deg,#f5f1ff,var(--panel))}
.relay-team-score.team-b>small{color:#7653d8}
.relay-vs{align-self:center;color:var(--muted);font:800 .7rem var(--font-mono,monospace);text-align:center}
.relay-time-bank{border-color:#f1cf91;background:linear-gradient(145deg,#fff7e7,var(--panel))}
.relay-time-bank>strong{color:#bd751c;font:800 1.55rem var(--font-mono,monospace)}
.relay-wait-card{display:grid;justify-items:center;gap:6px;max-width:410px;margin:20px auto;padding:22px;border:1px dashed color-mix(in srgb,var(--mode-accent) 45%,var(--border));border-radius:20px;background:color-mix(in srgb,var(--mode-accent) 5%,var(--panel));text-align:center}
.relay-baton{display:grid;place-items:center;width:55px;height:55px;border-radius:18px;background:#dff8ef;font-size:1.8rem;animation:relay-baton-bob 1.5s ease-in-out infinite}
.relay-wait-card strong{color:var(--ink)}.relay-wait-card span{color:var(--muted);font-size:.85rem}
.mode-skip-btn{display:block;margin:15px auto 0}.mode-skip-btn:disabled{opacity:.48;cursor:not-allowed}
.escape-hint-field{display:block;margin-top:10px}.escape-hint-field[hidden]{display:none!important}
.escape-hint-field textarea{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit}
.escape-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.escape-hud>div{display:grid;gap:4px;min-height:78px;padding:13px;border:1px solid #e6ddf6;border-radius:16px;background:linear-gradient(145deg,#f7f2ff,var(--panel))}
.escape-hud span,.escape-clue>span{color:#786a9d;font:750 .65rem var(--font-mono,monospace);letter-spacing:.12em}
.escape-hud strong{color:#392867;font-size:1.35rem}
.escape-hud-clues>strong{display:flex;gap:6px;align-items:center}.escape-hud-clues i{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;color:#fff;background:#7653d8;font:700 .75rem var(--font-sans,system-ui);font-style:normal}
.escape-progress{height:8px;margin:16px 0 22px;overflow:hidden;border-radius:99px;background:#eee9f7}.escape-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9b78f2,#5a39be);transition:width .35s ease}
.escape-hint-open,.escape-clue{max-width:700px;margin:14px auto;padding:14px 16px;border:1px solid #d8c9ff;border-radius:14px;background:#f7f2ff;text-align:left}
.escape-hint-open>span{color:#6844be;font:750 .66rem var(--font-mono,monospace);letter-spacing:.12em}.escape-hint-open p,.escape-clue p{margin:7px 0 0;color:#37265d;line-height:1.5}
.escape-hint-btn{display:flex;align-items:center;gap:8px;margin:15px auto 0;border-color:#d8c9ff;color:#6844be}.escape-hint-btn small{opacity:.72}.escape-hint-btn:disabled{opacity:.5}
.escape-clue{border-color:#bfe9d6;background:#edfff6}.escape-clue>span{color:#13835c}.escape-clue p{color:#15543e;font-weight:650}
.escape-unlock .mode-eyebrow{color:#168b63}
.survival-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}
.survival-hud>div{display:grid;justify-items:center;gap:3px;padding:14px;border:1px solid #f2d3d8;border-radius:16px;background:linear-gradient(145deg,#fff3f5,var(--panel))}
.survival-hud strong{color:#cb4057;font-size:1.5rem}.survival-hud span{color:var(--muted);font:750 .64rem var(--font-mono,monospace);letter-spacing:.1em}
.survival-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:8px;margin:15px 0}
.survival-player{display:flex;align-items:center;gap:9px;min-width:0;padding:9px 10px;border:1px solid var(--border);border-radius:14px;background:var(--panel);transition:transform .2s,border-color .2s}
.survival-player.is-you{border-color:#e76c7d;box-shadow:0 0 0 2px rgba(231,108,125,.12)}
.survival-player.is-out{filter:grayscale(.75);opacity:.62}
.survival-player img{flex:none;width:35px;height:35px;border-radius:50%;background:#f3e9eb}
.survival-player>div{display:grid;min-width:0;gap:2px}.survival-player strong{overflow:hidden;color:var(--ink);font-size:.82rem;text-overflow:ellipsis;white-space:nowrap}.survival-player small{color:var(--muted);font-size:.68rem}.survival-player>span{margin-left:auto;white-space:nowrap;font-size:.8rem}
.survival-hearts{min-height:34px;margin-top:-9px;text-align:center;font-size:1.5rem;letter-spacing:.2em;filter:drop-shadow(0 2px 3px rgba(210,70,95,.2))}
.spectator-note{max-width:520px;margin:18px auto;padding:15px;border:1px dashed #e6a9b3;border-radius:14px;color:#87505a;background:#fff4f5;text-align:center;line-height:1.5}
.revive-btn{display:block;margin:14px auto 0;border-color:#f0c977;color:#80561c;background:linear-gradient(100deg,#fff4cf,#fff9e8);font-weight:750}
.mode-results-screen{max-width:860px}.mode-results-hero{text-align:center;padding:24px 10px}.mode-results-hero h1{margin:8px 0;font-size:clamp(1.8rem,5vw,3.1rem);color:var(--ink)}.mode-results-hero p{color:var(--muted)}
.mode-results-screen>h2{margin:12px 0;color:var(--muted);font:750 .74rem var(--font-mono,monospace);letter-spacing:.13em}
.relay-result-score,.escape-result-stat{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;margin:20px auto;padding:17px;border:1px solid var(--border);border-radius:18px;background:var(--panel)}
.relay-result-score strong{color:#148866;font-size:1.2rem}.escape-result-stat strong{color:#6b4ac3;font-size:1.4rem}.escape-result-stat span{color:var(--muted);font-size:.78rem}
.mode-results-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.mode-results-list li{display:flex;align-items:center;gap:10px;min-height:60px;padding:9px 13px;border:1px solid var(--border);border-radius:14px;background:var(--panel)}
.mode-results-list li>span:first-child{width:28px;color:var(--muted);font:750 .8rem var(--font-mono,monospace)}.mode-results-list img{width:36px;height:36px;border-radius:50%;background:#eff1f6}.mode-results-list strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mode-results-list li>span:last-child{color:var(--mode-accent);font-weight:750;white-space:nowrap}
.mode-team-tag{padding:4px 7px;border-radius:99px;color:#148866;background:#e2f8ef;font-size:.65rem;white-space:nowrap}.mode-team-tag.team-b{color:#6949bc;background:#f0eaff}
@keyframes relay-baton-bob{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-5px) rotate(7deg)}}
@media(max-width:620px){.new-mode-screen{padding:14px;border-radius:18px}.new-mode-header{gap:8px}.new-mode-header h1{font-size:1.65rem}.mode-leave{padding:7px 10px;font-size:.78rem}.relay-scoreboard{grid-template-columns:1fr 28px 1fr}.relay-team-score,.relay-time-bank{min-height:92px;padding:9px}.relay-time-bank{grid-column:1/-1;min-height:66px}.relay-team-score>strong{font-size:1.65rem}.escape-hud{gap:6px}.escape-hud>div{min-height:67px;padding:10px}.escape-hud strong{font-size:1.12rem}.survival-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.survival-player{gap:6px;padding:7px}.survival-player img{width:30px;height:30px}.survival-player>span{font-size:.68rem}.mode-results-list li{gap:7px;padding:8px}.mode-results-list li>span:first-child{width:20px}.mode-results-list img{width:30px;height:30px}.mode-team-tag{font-size:.58rem;padding:4px 5px}.mode-results-list li>span:last-child{font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.relay-baton,.mode-round-reveal,.escape-progress i,.survival-player{animation:none!important;transition:none!important}}

/* Course progress and study continuation */
.home-study-card{--study-accent:#00a889;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 22px;padding:clamp(20px,3vw,30px);border:1px solid color-mix(in srgb,#00a889 24%,var(--border));border-radius:22px;background:radial-gradient(ellipse at 100% 0%,rgba(0,201,167,.12),transparent 42%),var(--panel);box-shadow:0 14px 36px -26px rgba(16,105,93,.38)}
.home-study-copy{min-width:0;flex:1}.home-study-eyebrow,.course-progress-kicker{display:block;margin-bottom:7px;color:var(--study-accent,#008f77);font:750 .68rem var(--font-mono,monospace);letter-spacing:.14em}
.home-study-copy h2{margin:0;color:var(--ink);font-size:clamp(1.2rem,2.5vw,1.65rem);line-height:1.25}.home-study-copy>p{margin:6px 0 0;color:var(--muted);line-height:1.45}.home-study-copy>p strong{color:var(--ink)}
.home-study-progress{max-width:440px;margin-top:15px}.home-study-progress>span,.course-card-progress-label{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:.77rem}.home-study-progress>span b,.course-card-progress-label b{color:var(--study-accent,#008f77);font-weight:800}.home-study-progress>i,.course-card-progress-track{display:block;height:8px;margin-top:7px;overflow:hidden;border-radius:99px;background:color-mix(in srgb,var(--border) 72%,transparent)}.home-study-progress>i em,.course-card-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#00b98f,#3c83ed);transition:width .35s ease}.home-study-progress small,.course-card-progress small{display:block;margin-top:5px;color:var(--muted);font-size:.7rem}
.home-study-cta{display:flex;flex:none;align-items:center;gap:10px;min-height:46px;border:0;border-radius:13px;background:#121722;color:white;font-weight:750}.home-study-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px -12px rgba(0,0,0,.55)}.home-study-cta span{font-size:1.15rem}.home-study-loading{width:26px;height:26px;flex:none;border:3px solid color-mix(in srgb,#00a889 20%,var(--border));border-top-color:#00a889;border-radius:50%;animation:study-spin .8s linear infinite}@keyframes study-spin{to{transform:rotate(360deg)}}
.course-card-progress{margin:0 0 13px;padding:10px 11px;border:1px solid color-mix(in srgb,#00a889 14%,var(--border));border-radius:12px;background:color-mix(in srgb,#00a889 4%,var(--panel))}.course-card-progress-label{font-size:.7rem}.course-card-progress-track{height:6px;margin-top:5px}.course-card-progress small{font-size:.66rem}
.course-coming-soon{display:inline-flex;align-items:center;margin:7px 0 11px;padding:5px 9px;border:1px solid color-mix(in srgb,#d28a1c 30%,var(--border));border-radius:999px;background:color-mix(in srgb,#f0b23b 11%,var(--panel));color:color-mix(in srgb,#9a5b00 82%,var(--ink));font-size:.7rem;font-weight:750;letter-spacing:.02em}.course-coming-soon[hidden]{display:none}
.primary-section-nav{display:flex;align-items:center;justify-content:center;gap:7px;min-height:54px;padding:7px 20px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--panel) 66%,transparent);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.primary-section-nav::-webkit-scrollbar{display:none}.primary-nav-group-label{padding:0 5px;color:var(--muted-2);font:600 9px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}.primary-nav-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 13px;border:1px solid transparent;border-radius:11px;color:var(--muted);font-size:12px;font-weight:650;text-decoration:none;white-space:nowrap;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}.primary-nav-link:hover{background:var(--panel);border-color:var(--border);color:var(--ink);transform:translateY(-1px)}.primary-nav-link[aria-current="page"]{background:color-mix(in srgb,var(--led-1) 10%,var(--panel));border-color:color-mix(in srgb,var(--led-1) 25%,var(--border));color:var(--led-1)}.primary-nav-link:focus-visible{outline:3px solid color-mix(in srgb,var(--led-1) 45%,transparent);outline-offset:2px}.primary-nav-divider{width:1px;height:23px;margin:0 5px;background:var(--border);flex:0 0 auto}
.qc-lobby,.qd-lobby,.ql-lobby{max-width:960px}.qc-lobby-hero,.qd-lobby-hero,.ql-lobby-hero{gap:22px;margin-bottom:30px}.qc-lobby-hero img,.qd-hero-icon,.ql-hero-art{flex:0 0 auto}.qc-title,.qd-title,.ql-title{font-size:clamp(27px,4vw,38px);line-height:1.12;letter-spacing:-.035em}.qc-sub,.qd-sub,.ql-sub{max-width:660px;font-size:15px;line-height:1.6}.qd-back-btn,.qc-back-btn,.ql-back-btn{min-height:37px;padding:7px 13px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--ink);font:600 12px/1.2 var(--font-body);cursor:pointer}.qd-back-btn:hover,.qc-back-btn:hover,.ql-back-btn:hover{border-color:var(--led-1);color:var(--led-1)}
@media(max-width:720px){.primary-section-nav{justify-content:flex-start;gap:5px;min-height:48px;padding:5px 10px;scroll-snap-type:x proximity}.primary-nav-group-label{font-size:8px;padding:0 3px}.primary-nav-link{min-height:35px;padding:0 10px;gap:5px;border-radius:10px;font-size:11px;scroll-snap-align:start}.primary-nav-divider{height:20px;margin:0 2px}.qc-lobby-hero,.qd-lobby-hero,.ql-lobby-hero{gap:13px;margin-bottom:22px}.qc-title,.qd-title,.ql-title{font-size:clamp(25px,7vw,32px)}.qc-sub,.qd-sub,.ql-sub{font-size:13px}.main{padding-top:24px}}
@media(max-width:420px){.primary-nav-link{padding:0 9px}.primary-nav-group-label{display:none}.primary-nav-divider{margin:0 4px}.qc-lobby-hero img,.ql-hero-art{width:76px;height:auto}.qd-hero-icon{width:58px;height:58px}}
.course-learning-progress{--study-accent:var(--row-color,#00a889);margin:0 0 20px;padding:18px 20px;border:1px solid var(--border);border-left:4px solid var(--study-accent);border-radius:16px;background:var(--panel);box-shadow:0 10px 28px -24px rgba(24,31,48,.35)}.course-learning-progress-main{display:flex;align-items:center;justify-content:space-between;gap:12px}.course-learning-progress-copy h2{margin:0;color:var(--ink);font-size:1.05rem}.course-learning-progress-copy p{margin:5px 0 0;color:var(--muted);font-size:.85rem}.course-learning-percent{color:var(--study-accent);font-size:1.65rem}.course-progress-kicker{color:var(--study-accent)}.course-learning-track{height:9px;margin:14px 0 0;overflow:hidden;border-radius:99px;background:color-mix(in srgb,var(--border) 72%,transparent)}.course-learning-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#00b98f,#3c83ed);transition:width .4s ease}.course-next-topic{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 13px;border-color:color-mix(in srgb,var(--study-accent) 35%,var(--border));color:var(--ink);white-space:normal;text-align:left}.course-next-topic strong{color:var(--study-accent)}.course-next-topic span{margin-left:auto;color:var(--study-accent);font-size:1.1rem}.course-all-complete{display:flex;align-items:center;gap:8px;margin-top:13px;color:#11845b;font-weight:700}.course-all-complete span{display:grid;width:23px;height:23px;place-items:center;border-radius:50%;background:#ddf8e9}
.study-topic-row{transition:border-color .2s,background-color .2s,box-shadow .2s}.study-topic-row.is-topic-complete{border-left:4px solid #18a66a;background:color-mix(in srgb,#16a66a 5%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,#16a66a 9%,transparent)}.topic-complete-badge{display:inline-flex;align-items:center;gap:5px;margin:5px 0;color:#128451;font-size:.72rem;font-weight:750}.topic-complete-badge span{display:grid;width:17px;height:17px;place-items:center;border-radius:50%;color:white;background:#18a66a;font-size:.65rem}.topic-complete-action.is-complete,.pdf-topic-complete.is-complete{border-color:#b7e7ca;color:#087342;background:#e9f9ef}.course-learning-progress .course-progress-kicker{color:var(--study-accent)}.pdf-next-topic[hidden]{display:none!important}.course-header-actions,.course-header>div:last-child{flex-wrap:wrap}.pdf-topic-complete{white-space:nowrap}
@media(max-width:650px){.home-study-card{align-items:stretch;flex-direction:column;gap:16px;padding:18px;border-radius:17px}.home-study-cta{justify-content:center;width:100%}.course-learning-progress{padding:15px}.course-learning-progress-copy h2{font-size:.96rem}.course-learning-percent{font-size:1.35rem}.course-next-topic{align-items:flex-start;flex-wrap:wrap;font-size:.84rem}.course-next-topic span{margin-left:auto}.course-header-actions{width:100%}}
@media(prefers-reduced-motion:reduce){.home-study-loading{animation:none}.home-study-progress>i em,.course-card-progress-track i,.course-learning-track i{transition:none}}
.course-learning-progress-copy p{max-width:640px}.course-topic-progress-label{font-size:.75rem}.study-topic-row.is-topic-read{border-left:4px solid #5688d8;background:color-mix(in srgb,#5688d8 4%,var(--panel))}.study-topic-row.is-topic-mastered{border-left-color:#18a66a;background:color-mix(in srgb,#16a66a 6%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,#16a66a 12%,transparent)}.topic-complete-badge{color:#3469ae}.topic-complete-badge span{background:#5688d8}.topic-mastered-badge{display:inline-flex;align-items:center;gap:5px;margin:5px 7px 0 0;padding:3px 8px;border-radius:999px;background:#e7f8ed;color:#087342;font-size:.7rem;font-weight:750}.topic-evidence-note{display:block;margin:3px 0;color:var(--muted);font-size:.69rem}.topic-learning-note{display:flex;align-items:baseline;gap:9px;margin:0 0 13px;padding:11px 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--muted);font-size:.8rem}.topic-learning-note strong{color:var(--ink);white-space:nowrap}.topic-learning-note.is-mastered{border-color:#b7e7ca;background:#effbf3}.topic-learning-note.is-mastered strong{color:#087342}.quiz-learning-feedback{margin:20px 0 8px;padding:18px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--panel) 94%,var(--led-1))}.quiz-learning-feedback-head h2{margin:0;font-size:1.15rem}.quiz-learning-feedback-head p{margin:5px 0 12px;color:var(--muted);font-size:.84rem}.quiz-learning-topic-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.quiz-learning-topic{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.quiz-learning-topic>div{display:grid;gap:3px;min-width:0}.quiz-learning-topic>div>strong{color:var(--ink);font-size:.88rem}.quiz-learning-topic>div>span,.quiz-learning-evidence{color:var(--muted);font-size:.73rem}.quiz-learning-evidence{font-size:.68rem}.quiz-learning-topic.needs-review{border-left:3px solid #e6a137}.quiz-learning-topic.looks-solid{border-left:3px solid #18a66a}.quiz-topic-accuracy{color:#128451;font-size:.85rem;font-weight:800}.quiz-learning-no-topics,.quiz-learning-unlinked{margin:8px 0 0;color:var(--muted);font-size:.78rem}.review-explanation{margin-top:14px;padding:12px 14px;border-left:3px solid var(--led-1);border-radius:8px;background:color-mix(in srgb,var(--led-1) 7%,var(--panel));color:var(--ink)}.review-explanation p{margin:5px 0 0;color:var(--muted);font-size:.85rem;line-height:1.5}.review-explanation-missing{color:var(--muted);font-size:.8rem}.pdf-topic-complete.is-complete{border-color:#c8dbf6;color:#3469ae;background:#edf4fd}
.qc-topic.is-mastered .qc-topic-mark{color:#07844e}.qc-result-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}.qc-result-groups>section{min-width:0;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.qc-result-groups h4{margin:0 0 8px;font-size:.83rem}.qc-result-groups ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}.qc-result-groups li{display:grid;gap:3px;padding-bottom:8px;border-bottom:1px solid var(--border)}.qc-result-groups li:last-child{padding-bottom:0;border:0}.qc-result-groups li strong{font-size:.74rem}.qc-result-groups li span{font-size:.78rem;color:var(--ink)}.qc-result-groups li p{margin:0;color:var(--muted);font-size:.73rem;line-height:1.45}.qc-result-review{border-left:3px solid #e6a137!important}.qc-mastery-status{color:var(--muted);font-size:.8rem}.qc-practise-weak-topic{margin-top:5px}
@media(max-width:650px){.topic-learning-note{align-items:flex-start;flex-direction:column;gap:3px}.quiz-learning-feedback{padding:13px}.quiz-learning-topic{align-items:flex-start;flex-direction:column}.quiz-learning-topic .btn{width:100%}.qc-result-groups{grid-template-columns:1fr}.quiz-learning-evidence{line-height:1.4}}
.quiz-learning-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quiz-learning-columns>section{min-width:0}.quiz-learning-columns>section>h3{margin:0 0 7px;font-size:.84rem}.quiz-learning-empty{padding:11px;border:1px dashed var(--border);border-radius:11px;color:var(--muted);font-size:.76rem;list-style:none}.ql-mastery-count{flex-basis:100%;color:var(--muted);font-size:.72rem;font-weight:650}.ql-skill.is-mastered .ql-skill-mark{color:#07844e}.ql-learning-answer-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:14px 0;text-align:left}.ql-learning-answer-groups>section{min-width:0;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.ql-learning-answer-groups>section.needs-review{border-left:3px solid #e6a137}.ql-learning-answer-groups h3{margin:0 0 8px;font-size:.82rem}.ql-learning-answer-groups ul{display:grid;gap:7px;margin:0;padding-left:18px}.ql-learning-answer-groups li{font-size:.77rem;line-height:1.4}.ql-learning-answer-groups li span{display:block;margin-top:3px;color:var(--muted)}
@media(max-width:650px){.quiz-learning-columns,.ql-learning-answer-groups{grid-template-columns:1fr}.ql-mastery-count{flex-basis:auto}}
.topic-complete-action.is-complete{border-color:#c8dbf6;color:#3469ae;background:#edf4fd}

/* Mobile-first finish: comfortable targets, uncluttered headers and natural page scrolling. */
@media(max-width:720px){
  :root{--mobile-topbar-height:calc(52px + max(10px,env(safe-area-inset-top,0px)))}
  html,body{min-height:100%;overflow-x:clip;overscroll-behavior-x:none}
  #app,#main,#main>*{min-width:0;max-width:100%}
  body{background-attachment:scroll}
  .main{width:100%;min-width:0;padding:20px 14px max(76px,calc(env(safe-area-inset-bottom,0px) + 60px))}
  .topbar{position:sticky;top:0;z-index:30;min-height:56px;padding-inline:12px}
  .topbar-right{min-width:0}
  .primary-section-nav{position:sticky;top:var(--mobile-topbar-height);z-index:25}
  :is(.course-header,.leaderboard-header,.new-mode-header,.room-header,.classroom-detail-header){flex-wrap:wrap;align-items:flex-start;gap:10px}
  :is(.course-header-actions,.leaderboard-header-actions,.room-header-actions){width:100%;display:flex;flex-wrap:wrap;gap:8px}
  .course-header-actions .btn,.leaderboard-header-actions .btn,.room-header-actions .btn{flex:1 1 auto}
  :is(.course-card,.item-row,.home-study-card,.course-learning-progress,.full-quiz-banner,.quiz-learning-feedback,.pdf-viewer-container,.new-mode-screen,.mode-question-card,.mode-round-reveal){min-width:0;max-width:100%}
  .course-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .course-card-body{padding:16px}
  .item-row{align-items:stretch;flex-direction:column;gap:11px;padding:14px}
  .item-row .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px}
  .item-row .actions .btn{width:100%;min-width:0;white-space:normal}
  .pdf-toolbar{position:static;gap:7px;padding:8px}
  .pdf-canvas-wrapper{max-height:none;min-height:240px;padding:8px;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .pdf-viewer-container{overflow:visible}
  :is(.quiz-opt,.live-show-answer,.raid-answer,.qc-quiz-options label,.mode-answer-option,.answer-option){min-height:48px;padding:12px 14px;touch-action:manipulation}
  :is(.quiz-options,.live-show-answers,.raid-answer-grid,.qc-quiz-options,.mode-answer-grid){gap:10px}
  :is(.btn,button,a[role="button"],input[type="button"],input[type="submit"]){touch-action:manipulation}
  .btn,.pdf-toolbar button{min-height:44px}
  .btn.small{min-height:42px;padding-inline:12px}
  .primary-nav-link{min-height:44px;padding-inline:12px}
  :is(.quiz-nav,.full-quiz-actions,.quiz-actions,.pdf-topic-actions){display:flex;flex-wrap:wrap;gap:9px}
  :is(.quiz-nav,.full-quiz-actions,.quiz-actions,.pdf-topic-actions) .btn{flex:1 1 145px}
  .course-learning-progress-main{align-items:flex-start}
  .course-next-topic{width:100%;min-height:48px}
  .account-panel{max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom,0px)}
  .qc-session-body,.ql-session-body{min-height:0;overflow:visible}
}
@media(max-width:420px){
  .main{padding-inline:12px}
  .topbar{padding-inline:9px}
  .topbar-right{gap:4px}
  .icon-btn{min-width:42px;min-height:42px;justify-content:center}
  .points-pill{min-height:40px}
  .item-row .actions{grid-template-columns:minmax(0,1fr)}
  .course-learning-progress-main{gap:6px}
  .course-learning-percent{flex:none}
}

/* Lift surfaces and borders in dark mode so cards remain distinct from the page. */
html.dark-mode{--border:rgba(205,216,240,.19);--border-soft:rgba(205,216,240,.12)}
html.dark-mode :is(.course-card .led-frame-inner,.item-row,.full-quiz-banner,.pdf-viewer-container,.quiz-learning-feedback,.quiz-learning-topic,.topic-learning-note,.course-learning-progress,.home-study-card,.course-card-progress,.qc-result-groups>section,.ql-learning-answer-groups>section,.new-mode-screen,.mode-question-card,.mode-round-reveal,.mode-results-list li,.live-show-question-card,.live-show-answer,.raid-question-card,.raid-reveal-card,.raid-contribution-list li,.account-stat,.classroom-card,.linked-course-card,.simulation-card,.multiplayer-card){border-color:color-mix(in srgb,var(--border) 88%,#d7e2ff 12%);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.22)}
html.dark-mode :is(.course-card .led-frame-inner,.item-row,.full-quiz-banner,.quiz-learning-topic,.topic-learning-note,.course-learning-progress,.home-study-card,.qc-result-groups>section,.ql-learning-answer-groups>section,.mode-results-list li,.raid-contribution-list li){background:var(--panel)}
html.dark-mode :is(.classroom-study-hub,.classroom-goals,.classroom-start-session,.classroom-study-recap){background:var(--panel);border-color:var(--border);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.22)}
html.dark-mode :is(.classroom-goal-card,.classroom-study-attendee,.classroom-study-hub select,.classroom-study-hub input[type="date"]){background:var(--panel-2);border-color:var(--border);color:var(--ink)}
html.dark-mode .classroom-live-session{background:linear-gradient(130deg,color-mix(in srgb,#168653 22%,var(--panel)),var(--panel));border-color:color-mix(in srgb,#50d395 42%,var(--border))}
html.dark-mode .classroom-goal-card.is-done{background:color-mix(in srgb,#168653 16%,var(--panel));border-color:color-mix(in srgb,#50d395 42%,var(--border))}
html.dark-mode .classroom-study-empty{background:color-mix(in srgb,var(--panel-2) 70%,transparent);border-color:var(--border);color:var(--muted)}
html.dark-mode .course-card-progress{background:color-mix(in srgb,#00a889 14%,var(--panel));border-color:color-mix(in srgb,#00c99f 32%,var(--border))}
html.dark-mode .study-topic-row.is-topic-read{background:color-mix(in srgb,#5688d8 14%,var(--panel))}
html.dark-mode .study-topic-row.is-topic-mastered{background:color-mix(in srgb,#16a66a 15%,var(--panel))}
html.dark-mode :is(.topic-mastered-badge,.topic-complete-badge,.topic-complete-action.is-complete,.pdf-topic-complete.is-complete){border-color:rgba(68,205,135,.4);background:color-mix(in srgb,#18a66a 18%,var(--panel));color:#8be2af}
html.dark-mode .course-all-complete{color:#8be2af}
html.dark-mode .course-all-complete span{background:color-mix(in srgb,#18a66a 24%,var(--panel))}
html.dark-mode .review-explanation{background:color-mix(in srgb,var(--led-1) 15%,var(--panel))}
html.dark-mode .quiz-learning-topic.needs-review,html.dark-mode .qc-result-review{border-left-color:#f1bd62!important}
html.dark-mode .quiz-learning-topic.looks-solid{border-left-color:#50d395}
html.dark-mode :is(.live-show-answer,.raid-answer):not(.is-selected):not(.is-correct):not(.is-wrong){background:var(--panel-2);border-color:var(--border);color:var(--ink)}
html.dark-mode .live-show-answer.is-selected,html.dark-mode .raid-answer.is-selected{background:color-mix(in srgb,#7653d8 26%,var(--panel));border-color:#a995ff;color:var(--ink)}
html.dark-mode :is(.quiz-opt.correct,.live-show-answer.is-correct,.raid-answer.is-correct){background:color-mix(in srgb,#18a66a 21%,var(--panel));border-color:#55cf91;color:var(--ink)}
html.dark-mode :is(.quiz-opt.incorrect,.live-show-answer.is-wrong,.raid-answer.is-wrong){background:color-mix(in srgb,#e5484d 20%,var(--panel));border-color:#f17f83;color:var(--ink)}
html.dark-mode .raid-results-boss{border-color:var(--border);background:linear-gradient(130deg,#34271f,var(--panel))}
html.dark-mode .mode-team-tag{background:color-mix(in srgb,#18a66a 24%,var(--panel));color:#8be2af}
html.dark-mode .mode-team-tag.team-b{background:color-mix(in srgb,#7653d8 25%,var(--panel));color:#c3b1ff}
html.dark-mode .pdf-canvas-wrapper{background:#252a35}

/* Quicky study feedback: inline encouragement plus a short, dismissible milestone toast. */
.quicky-result-nudge{display:flex;align-items:center;gap:10px;margin:12px 0;padding:10px 12px;border:1px solid color-mix(in srgb,#00b89a 28%,var(--border));border-radius:13px;background:color-mix(in srgb,#00b89a 6%,var(--panel))}
.quicky-result-nudge img{width:42px;height:42px;flex:none;object-fit:cover;border:1px solid var(--border);border-radius:50%;background:var(--panel)}
.quicky-result-nudge p{display:grid;gap:3px;margin:0;min-width:0;color:var(--muted);font-size:.8rem;line-height:1.45}
.quicky-result-nudge strong{color:var(--ink);font-size:.82rem}
.quicky-study-moment{position:fixed;z-index:9995;left:50%;bottom:max(94px,calc(env(safe-area-inset-bottom,0px) + 84px));display:flex;align-items:center;gap:12px;width:min(390px,calc(100vw - 28px));padding:12px 42px 12px 12px;border:1px solid color-mix(in srgb,#00b89a 42%,var(--border));border-radius:17px;background:var(--panel);color:var(--ink);box-shadow:0 14px 42px rgba(5,14,24,.28);transform:translateX(-50%);animation:quickyMomentIn .2s ease-out both}
.quicky-study-moment-avatar{display:grid;width:54px;height:54px;flex:none;place-items:center;border:1px solid color-mix(in srgb,#258ef2 45%,var(--border));border-radius:50%;background:linear-gradient(145deg,#168be8,#425ce3);color:#fff;font:800 11px/1 var(--font-display,system-ui);box-shadow:0 4px 14px rgba(37,142,242,.2)}
.quicky-study-moment-copy{display:grid;gap:3px;min-width:0}
.quicky-study-moment-copy strong{font-size:.76rem;color:#00a889}
.quicky-study-moment-copy span{font-size:.84rem;line-height:1.4}
.quicky-study-moment-action{justify-self:start;margin-top:5px;padding:5px 10px;border:1px solid color-mix(in srgb,#00a889 32%,var(--border));border-radius:8px;background:color-mix(in srgb,#00a889 9%,var(--panel));color:#087f6c;font-family:inherit;font-size:.76rem;font-weight:700;line-height:1.2;cursor:pointer}
.quicky-study-moment-action:hover{background:color-mix(in srgb,#00a889 15%,var(--panel))}
html.dark-mode .quicky-study-moment-action{color:#6bd4bd}
.quicky-study-moment-close{position:absolute;top:5px;right:5px;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:1.35rem;cursor:pointer}
.quicky-study-moment-close:hover{background:var(--panel-2);color:var(--ink)}
.quicky-study-moment.is-leaving{opacity:0;transform:translate(-50%,8px);transition:opacity .16s ease,transform .16s ease}
@keyframes quickyMomentIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
html.dark-mode .quicky-result-nudge{border-color:color-mix(in srgb,#00b89a 38%,var(--border));background:color-mix(in srgb,#00b89a 13%,var(--panel))}

/* Quicky Docs free, local-first word processor */
.qd-free-workspace{max-width:1500px;min-height:calc(100dvh - 120px);margin:0 auto;padding:4px 2px 26px;color:var(--ink)}
.qd-free-header{display:flex;align-items:center;gap:16px;padding:8px 0 14px;border-bottom:1px solid var(--border)}
.qd-free-header>.qd-back-btn{flex:0 0 auto}.qd-free-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.qd-free-title .qd-doc-icon{font-size:25px}.qd-free-title h1{margin:0;color:var(--ink);font:700 clamp(18px,2.4vw,23px)/1.15 "Space Grotesk",system-ui,sans-serif}.qd-free-title .qd-kicker{display:block;margin:0 0 4px;font-size:9px}
.qd-free-actions{display:flex;align-items:center;gap:10px}.qd-save-state{color:var(--muted);font-size:12px;white-space:nowrap}
.qd-ribbon-tabs{display:flex;align-items:center;gap:4px;margin-top:12px;border-bottom:1px solid var(--border);overflow-x:auto}.qd-ribbon-tabs button{flex:0 0 auto;min-height:42px;padding:8px 19px;border:0;border-radius:10px 10px 0 0;background:transparent;color:var(--muted);font-family:inherit;font-size:14px;font-weight:650;line-height:1.2;cursor:pointer}.qd-ribbon-tabs button.is-active{color:var(--ink);background:var(--panel);box-shadow:inset 0 -3px #eaa322}
.qd-ribbon-panel{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:60px;padding:9px 12px;border:1px solid var(--border);border-top:0;border-radius:0 0 14px 14px;background:var(--panel)}.qd-ribbon-panel[hidden]{display:none}.qd-ribbon-select{display:grid;gap:3px;color:var(--muted);font-size:10px;font-weight:650}.qd-ribbon-select select{min-height:34px;min-width:92px;padding:5px 8px;color:var(--ink);background:var(--panel-2);border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:12px;font-weight:500}
.qd-ribbon-divider{width:1px;height:30px;margin:0 3px;background:var(--border)}.qd-tool-btn,.qd-color-tool,.qd-image-tools button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:36px;min-height:36px;padding:6px 9px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}.qd-tool-btn:hover,.qd-tool-btn:focus-visible,.qd-image-tools button:hover{background:var(--panel-2);border-color:var(--border)}.qd-color-tool{position:relative;font-weight:800;border-bottom:3px solid #2736c6}.qd-color-tool input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.qd-logo-gallery{display:flex;align-items:center;gap:7px;max-width:100%;overflow-x:auto}.qd-logo-choice{display:flex;align-items:center;gap:7px;min-height:42px;max-width:185px;padding:5px 9px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--ink);cursor:pointer;white-space:nowrap}.qd-logo-choice:hover{border-color:#eaa322}.qd-logo-choice img{width:28px;height:28px;object-fit:contain}.qd-logo-choice span{overflow:hidden;text-overflow:ellipsis;font-size:11px}.qd-upload-btn{display:inline-flex;align-items:center;min-height:38px;white-space:nowrap;cursor:pointer}.qd-image-tools{display:flex;align-items:center;flex-wrap:wrap;gap:3px;padding-left:8px;border-left:1px solid var(--border);color:var(--muted);font-size:11px}.qd-image-tools[hidden]{display:none}
.qd-free-body{display:grid;grid-template-columns:minmax(215px,260px) minmax(0,1fr);gap:16px;min-height:calc(100dvh - 300px);margin-top:14px}.qd-coach-panel{align-self:start;position:sticky;top:12px;display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--panel)}.qd-coach-top{display:flex;align-items:center;gap:10px}.qd-coach-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,#eaa322 15%,var(--panel-2));font-size:24px}.qd-coach-top strong,.qd-coach-top small{display:block}.qd-coach-top strong{color:var(--ink)}.qd-coach-top small{margin-top:3px;color:var(--muted);font-size:11px}.qd-coach-intro{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.qd-example-btn,.qd-review-btn{min-height:42px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--ink);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}.qd-example-btn:hover,.qd-review-btn:hover{border-color:#eaa322}.qd-review-btn{background:#151721;color:#fff;border-color:#151721}.qd-review-panel{padding-top:12px;border-top:1px solid var(--border)}.qd-review-panel h2{margin:0 0 8px;color:var(--ink);font:650 13px "Space Grotesk",system-ui,sans-serif}.qd-review-panel ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}.qd-review-panel li{display:flex;align-items:flex-start;gap:7px;color:var(--muted);font-size:11px;line-height:1.45}.qd-review-panel li>span{display:grid;flex:0 0 17px;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--panel-2);color:var(--muted);font-weight:750}.qd-review-panel li.is-good>span{color:#11804f;background:rgba(22,166,106,.12)}.qd-review-panel li.is-warn>span{color:#a96600;background:rgba(245,158,11,.16)}.qd-coach-tip{display:grid;gap:4px;padding:11px;border-radius:10px;background:color-mix(in srgb,#eaa322 9%,var(--panel));color:var(--muted);font-size:11px;line-height:1.45}.qd-coach-tip strong{color:var(--ink)}
.qd-editor-section{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:15px;background:var(--panel)}.qd-editor-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:11px}.qd-editor-scroll{flex:1;min-height:540px;overflow:auto;padding:20px;background:color-mix(in srgb,var(--panel-2) 76%,#929db5 24%);overscroll-behavior:contain}.qd-editor-page{width:min(var(--qd-page-width,794px),100%);min-height:var(--qd-page-height,1123px);margin:0 auto;padding:var(--qd-page-margin,68px);outline:none;background:#fff;color:#161922;box-shadow:0 5px 24px rgba(14,20,35,.18);font-family:var(--qd-doc-font,"Times New Roman");font-size:var(--qd-doc-size,12pt);line-height:var(--qd-doc-leading,1.5);overflow-wrap:anywhere}.qd-editor-page:empty::before{content:attr(data-placeholder);color:#98a1af;pointer-events:none}.qd-editor-page:focus{box-shadow:0 5px 25px rgba(14,20,35,.2),0 0 0 2px rgba(234,163,34,.55)}.qd-editor-page img{max-width:100%;height:auto;object-fit:contain;vertical-align:middle;cursor:pointer}.qd-editor-page img.is-selected{outline:2px solid #eaa322;outline-offset:3px}.qd-editor-page table{width:100%;border-collapse:collapse}.qd-editor-page td,.qd-editor-page th{min-width:70px;padding:7px;border:1px solid #7a8290}
.qd-example-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px;background:rgba(12,16,25,.66);backdrop-filter:blur(5px)}.qd-example-overlay[hidden]{display:none}.qd-example-dialog{position:relative;display:flex;flex-direction:column;width:min(1040px,100%);max-height:min(92dvh,900px);padding:25px;overflow:auto;border:1px solid var(--border);border-radius:20px;background:var(--panel);color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.28)}.qd-example-dialog h2{margin:0 0 7px;font:700 25px "Space Grotesk",system-ui,sans-serif}.qd-example-dialog>p{max-width:70ch;margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.5}.qd-example-close{position:absolute;top:14px;right:15px;width:38px;height:38px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--ink);font-size:24px;cursor:pointer}.qd-example-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:15px;min-height:0}.qd-example-preview{max-height:470px;overflow:auto;padding:24px;border:1px solid #d4d8df;border-radius:10px;background:#fff;color:#161922;font:12px/1.55 "Times New Roman",serif}.qd-example-preview h1{font-size:18px}.qd-example-preview h2{margin-top:20px;font-size:14px}.qd-example-preview .qd-sample-letterhead,.qd-example-preview .qd-sample-logos{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:2px solid #1d2634;text-align:center;font-size:10px}.qd-example-preview .qd-sample-letterhead img,.qd-example-preview .qd-sample-logos img{width:55px;height:55px;object-fit:contain}.qd-example-preview .qd-sample-letterhead div{flex:1}.qd-example-preview .qd-sample-subject,.qd-example-preview .qd-sample-center{text-align:center}.qd-example-preview .qd-sample-sign{margin-top:30px}.qd-example-preview .qd-sample-note{color:#475569;font-size:11px}.qd-example-preview .qd-sample-report{min-height:570px}.qd-example-preview .qd-sample-logos{justify-content:center;border:0}.qd-example-preview .qd-sample-logos img{width:70px;height:70px}
.qd-example-notes{display:grid;align-content:start;gap:12px;margin:0;padding:5px 0 0 20px;color:var(--muted);font-size:12px;line-height:1.45}.qd-example-notes li{padding-left:4px}.qd-example-notes strong,.qd-example-notes span{display:block}.qd-example-notes strong{margin-bottom:3px;color:var(--ink)}.qd-example-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:15px}.qd-example-actions .btn{min-height:42px}
html.dark-mode .qd-ribbon-panel,html.dark-mode .qd-coach-panel,html.dark-mode .qd-editor-section,html.dark-mode .qd-example-dialog{background:var(--panel);border-color:var(--border)}html.dark-mode .qd-ribbon-tabs button.is-active,html.dark-mode .qd-ribbon-select select,html.dark-mode .qd-tool-btn:hover,html.dark-mode .qd-logo-choice,html.dark-mode .qd-example-close{background:var(--panel-2);color:var(--ink);border-color:var(--border)}
.qd-editor-page img{cursor:grab;touch-action:manipulation}.qd-editor-page img:active{cursor:grabbing}.qd-image-tools [data-img-move]{min-width:34px;font-size:17px}
.qd-ai-panel{display:flex;flex-direction:column;gap:10px;padding:13px;border:1px solid color-mix(in srgb,#635bff 24%,var(--border));border-radius:13px;background:linear-gradient(145deg,color-mix(in srgb,#635bff 5%,var(--panel)),var(--panel))}.qd-ai-heading{display:flex;align-items:center;gap:9px}.qd-ai-spark{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:color-mix(in srgb,#635bff 15%,var(--panel));color:#635bff;font-size:19px}.qd-ai-heading strong,.qd-ai-heading small{display:block}.qd-ai-heading small,.qd-ai-privacy{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.45}.qd-ai-focus-label{font-size:11px;font-weight:700;color:var(--muted)}.qd-ai-panel textarea{width:100%;resize:vertical;padding:8px 9px;border:1px solid var(--border);border-radius:9px;background:var(--panel);color:var(--ink);font:inherit;font-size:12px}.qd-ai-review-btn{min-height:42px}.qd-live-review,.qd-live-locked{display:flex;align-items:center;gap:9px;width:100%;min-height:51px;padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--ink);text-align:left}.qd-live-review{cursor:pointer}.qd-live-review input{position:absolute;opacity:0}.qd-live-switch{position:relative;flex:0 0 34px;height:20px;border-radius:99px;background:#9ba2b1}.qd-live-switch:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .18s}.qd-live-review input:checked+.qd-live-switch{background:#635bff}.qd-live-review input:checked+.qd-live-switch:after{transform:translateX(14px)}.qd-live-review span:nth-of-type(2),.qd-live-locked span:nth-child(2){flex:1}.qd-live-review strong,.qd-live-review small,.qd-live-locked strong,.qd-live-locked small{display:block}.qd-live-review strong,.qd-live-locked strong{font-size:11px}.qd-live-review small,.qd-live-locked small{margin-top:2px;color:var(--muted);font-size:10px}.qd-live-review em{font-size:8px;font-style:normal;font-weight:800;letter-spacing:.08em;color:#635bff}.qd-live-locked{cursor:pointer}.qd-ai-results{display:flex;flex-direction:column;gap:7px;font-size:11px;line-height:1.45}.qd-ai-results:empty{display:none}.qd-ai-results>p{margin:0;color:var(--muted)}.qd-ai-result-head{display:flex;justify-content:space-between;gap:6px;color:var(--ink)}.qd-ai-result-head span{color:var(--muted);font-size:10px}.qd-ai-issue{padding:8px;border:1px solid var(--border);border-radius:9px;background:var(--panel)}.qd-ai-issue>strong{color:var(--ink)}.qd-ai-issue p{margin:5px 0;color:var(--muted)}.qd-ai-suggestion{color:var(--ink)}.qd-ai-suggestion span{color:var(--muted)}.qd-ai-suggestion button,.qd-ai-message button{margin-left:5px;padding:4px 7px;border:1px solid var(--border);border-radius:7px;background:var(--panel-2);color:var(--ink);cursor:pointer}.qd-ai-strength{color:var(--ink)!important}.qd-ai-tips{margin:0;padding-left:18px;color:var(--muted)}.qd-ai-highlight{padding:1px 2px;border-radius:3px;background:#ffdf78;color:#28200d}.qd-ai-message{padding:9px;border-radius:9px;background:var(--panel-2);color:var(--ink)!important}
@media(max-width:980px){.qd-free-body{grid-template-columns:210px minmax(0,1fr);gap:11px}.qd-coach-panel{padding:12px}.qd-editor-scroll{padding:14px}}
@media(max-width:700px){.qd-free-workspace{min-height:0;padding:0 0 18px}.qd-free-header{align-items:flex-start;flex-wrap:wrap;gap:8px 12px}.qd-free-header>.qd-back-btn{order:0;width:100%}.qd-free-title{order:1}.qd-free-actions{order:2;width:100%;justify-content:space-between}.qd-free-actions .btn{flex:1;min-height:44px}.qd-save-state{font-size:10px}.qd-ribbon-panel{flex-wrap:nowrap;min-height:56px;overflow-x:auto;border-radius:0 0 11px 11px}.qd-layout-panel{flex-wrap:wrap}.qd-free-body{display:flex;flex-direction:column;min-height:0}.qd-editor-section{order:0}.qd-editor-scroll{min-height:55vh;padding:9px}.qd-editor-page{min-height:78vh;padding:26px 21px;font-size:var(--qd-doc-size,12pt)}.qd-coach-panel{order:1;position:static}.qd-logo-gallery{max-width:calc(100vw - 40px)}.qd-example-dialog{padding:21px 15px 15px}.qd-example-layout{grid-template-columns:1fr}.qd-example-preview{max-height:42vh;padding:14px}.qd-example-notes{grid-template-columns:1fr 1fr;gap:9px}.qd-example-actions{display:grid;grid-template-columns:1fr}}
@media(max-width:400px){.qd-free-title .qd-doc-icon{display:none}.qd-ribbon-tabs button{padding-inline:14px}.qd-example-notes{grid-template-columns:1fr}}
@media(max-width:480px){.quicky-study-moment{bottom:max(88px,calc(env(safe-area-inset-bottom,0px) + 76px));gap:9px;padding:10px 38px 10px 10px}.quicky-study-moment-avatar{width:46px;height:46px}.quicky-study-moment-copy span{font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.quicky-study-moment,.quicky-study-moment.is-leaving{animation:none;transition:none;transform:translateX(-50%)}}
.qd-editor-page .qd-sample-letterhead,.qd-editor-page .qd-sample-logos{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:2px solid #1d2634;text-align:center;font-size:.82em}.qd-editor-page .qd-sample-letterhead img,.qd-editor-page .qd-sample-logos img{width:64px;height:64px;object-fit:contain}.qd-editor-page .qd-sample-letterhead div{flex:1}.qd-editor-page .qd-sample-subject,.qd-editor-page .qd-sample-center{text-align:center}.qd-editor-page .qd-sample-sign{margin-top:30px}.qd-editor-page .qd-sample-note{color:#475569;font-size:.9em}

.qd-free-workspace{height:calc(100dvh - 145px);min-height:520px}.qd-free-body.ai-collapsed{grid-template-columns:210px minmax(0,1fr) 54px}.qd-free-workspace .qd-editor-section{min-height:0}.qd-free-workspace .qd-editor-scroll{min-height:0}.qd-free-workspace .qd-docs-nav{max-height:100%}.qd-free-workspace .qd-coach-panel{max-height:100%}.qd-theme-toggle,.qd-nav-home,.qd-nav-template,.qd-ai-open-mobile{font-family:inherit}
@media(max-width:1180px){.qd-free-body.ai-collapsed{grid-template-columns:180px minmax(0,1fr) 54px}}
@media(max-width:980px){.qd-free-workspace{height:auto;min-height:calc(100dvh - 145px)}.qd-free-body.ai-collapsed{grid-template-columns:170px minmax(0,1fr)}.qd-free-workspace .qd-coach-panel{max-height:none}}
@media(max-width:700px){.qd-free-workspace{height:auto;min-height:0}.qd-free-body.ai-collapsed{grid-template-columns:1fr}}

/* Word-style full-width canvas is scoped to the Docs route only. */
.main:has(> .qd-free-workspace){width:auto;max-width:none;margin:0;padding:12px clamp(10px,1.2vw,22px) 18px}
.qd-free-workspace{height:calc(100dvh - 155px);min-height:500px}
.qd-free-body{grid-template-columns:240px minmax(0,1fr) 360px;gap:12px;margin:12px 12px 0}
.qd-free-body.ai-collapsed{grid-template-columns:240px minmax(0,1fr) 54px}
.qd-free-workspace .qd-ribbon-tabs button{min-width:76px}
.qd-free-workspace .qd-ribbon-panel{gap:10px}
.qd-ribbon-section-title{padding:0 10px 0 2px;border-right:1px solid var(--qd-line);color:var(--qd-blue);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.qd-review-ribbon .qd-ribbon-note{margin-left:auto;color:var(--qd-muted);font-size:10px}
.qd-free-workspace .qd-editor-scroll{display:flex;justify-content:center;align-items:flex-start}
.qd-free-workspace .qd-editor-page{flex:0 0 auto;background:var(--qd-page-tone,#fff);border:var(--qd-page-frame,0)}
.qd-nav-ai-icon{color:#a991ff}
@media(max-width:1280px){.qd-free-body{grid-template-columns:210px minmax(0,1fr) 315px}.qd-free-body.ai-collapsed{grid-template-columns:210px minmax(0,1fr) 54px}}
@media(max-width:980px){.main:has(> .qd-free-workspace){padding:10px 12px 16px}.qd-free-workspace{height:auto;min-height:calc(100dvh - 155px)}.qd-free-body{grid-template-columns:190px minmax(0,1fr) 1fr}.qd-free-body.ai-collapsed{grid-template-columns:190px minmax(0,1fr)}.qd-free-workspace .qd-coach-panel{grid-column:2 / 4}.qd-free-workspace .qd-editor-section{grid-column:2;grid-row:1}.qd-docs-nav{grid-row:1 / span 2}}
@media(max-width:700px){.main:has(> .qd-free-workspace){padding:6px 7px max(68px,calc(env(safe-area-inset-bottom,0px) + 54px))}.qd-free-workspace{height:auto;min-height:0}.qd-free-body,.qd-free-body.ai-collapsed{display:flex;flex-direction:column;gap:8px;margin:8px 6px 0}.qd-free-workspace .qd-editor-section{order:0;min-height:70vh}.qd-free-workspace .qd-editor-scroll{min-height:58vh}.qd-free-workspace .qd-coach-panel{order:1}.qd-docs-nav{order:2}.qd-free-workspace .qd-ribbon-tabs button{min-width:auto}}

/* Let the Docs route use normal document scrolling; nested fixed-height panes clipped the workspace. */
.qd-free-workspace{height:auto;min-height:calc(100dvh - 155px);overflow:visible}
.qd-free-body{flex:0 0 auto;min-height:0;align-items:start}
.qd-docs-nav,.qd-free-workspace .qd-coach-panel{position:static;top:auto;align-self:start;max-height:none;overflow:visible}
.qd-free-workspace .qd-editor-section{min-height:0;overflow:visible}
.qd-free-workspace .qd-editor-scroll{flex:0 0 auto;min-height:0;overflow:visible;overscroll-behavior:auto}
@media(max-width:980px){.qd-free-workspace{height:auto;min-height:calc(100dvh - 155px)}.qd-free-workspace .qd-coach-panel{max-height:none}}
@media(max-width:700px){.qd-free-workspace{height:auto;min-height:0}}

/* Quicky Docs workspace foundation */
.qd-free-workspace{--qd-navy:#08172b;--qd-surface:#0d2038;--qd-raised:#122b49;--qd-line:#294564;--qd-text:#e9f1fc;--qd-muted:#9fb2c9;--qd-blue:#1688ff;--qd-gold:#f6b938;--panel:var(--qd-surface);--panel-2:var(--qd-raised);--ink:var(--qd-text);--muted:var(--qd-muted);--border:var(--qd-line);display:flex;flex-direction:column;max-width:none;min-height:calc(100dvh - 92px);margin:0;padding:0 0 12px;overflow:hidden;border:1px solid var(--qd-line);border-radius:20px;background:var(--qd-navy);color:var(--qd-text);box-shadow:0 18px 60px rgba(2,12,26,.16)}
.qd-free-workspace[data-qd-theme="light"]{--qd-navy:#f1f5fb;--qd-surface:#fff;--qd-raised:#eef3f9;--qd-line:#d4dfed;--qd-text:#18263b;--qd-muted:#64758b;--qd-blue:#176fe0;--qd-gold:#b77c08;box-shadow:0 18px 60px rgba(35,57,84,.08)}
.qd-free-workspace .qd-free-header{flex:0 0 auto;gap:20px;padding:13px 20px;border-bottom:1px solid var(--qd-line);background:var(--qd-surface)}
.qd-brand{display:flex;align-items:center;gap:9px;flex:0 0 190px;color:var(--qd-text);font:750 20px/1 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.04em}.qd-brand img{width:38px;height:38px;object-fit:contain}.qd-brand strong{color:var(--qd-gold)}
.qd-free-title{gap:10px}.qd-free-title .qd-doc-icon{width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--qd-blue) 16%,var(--qd-surface));color:var(--qd-blue);font-size:19px}.qd-free-title h1{font-size:16px;color:var(--qd-text)}.qd-free-title .qd-kicker{color:var(--qd-muted);letter-spacing:.12em}
.qd-free-actions{gap:8px}.qd-free-actions .btn{min-height:38px;padding:8px 13px;border:1px solid var(--qd-line);border-radius:10px;background:var(--qd-raised);color:var(--qd-text);font-size:12px}.qd-theme-toggle{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 11px;border:1px solid var(--qd-line);border-radius:10px;background:var(--qd-surface);color:var(--qd-text);font:600 12px inherit;cursor:pointer}.qd-theme-toggle:hover{border-color:var(--qd-blue)}
.qd-free-workspace .qd-ribbon-tabs{flex:0 0 auto;margin:0;padding:0 16px;border-bottom:1px solid var(--qd-line);background:var(--qd-surface)}.qd-free-workspace .qd-ribbon-tabs button{min-height:41px;padding:8px 16px;border-radius:0;color:var(--qd-muted);font-size:12px}.qd-free-workspace .qd-ribbon-tabs button.is-active{background:transparent;color:var(--qd-text);box-shadow:inset 0 -2px var(--qd-blue)}
.qd-free-workspace .qd-ribbon-panel{flex:0 0 auto;min-height:54px;padding:7px 16px;border:0;border-bottom:1px solid var(--qd-line);border-radius:0;background:var(--qd-surface)}.qd-free-workspace .qd-ribbon-select select{border-color:var(--qd-line);background:var(--qd-raised);color:var(--qd-text)}.qd-free-workspace .qd-tool-btn{color:var(--qd-text)}.qd-free-workspace .qd-tool-btn:hover,.qd-free-workspace .qd-logo-choice{background:var(--qd-raised);border-color:var(--qd-line);color:var(--qd-text)}
.qd-free-body{display:grid;grid-template-columns:210px minmax(0,1fr) 316px;gap:12px;flex:1;min-height:0;margin:12px 12px 0;align-items:stretch}
.qd-docs-nav{display:flex;flex-direction:column;gap:7px;min-width:0;max-height:calc(100dvh - 290px);position:sticky;top:10px;align-self:start;overflow:auto;padding:11px 9px;border:1px solid var(--qd-line);border-radius:15px;background:var(--qd-surface)}.qd-nav-home,.qd-nav-template{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:7px 9px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--qd-muted);font:550 12px inherit;text-align:left;cursor:pointer}.qd-nav-home{margin-bottom:7px;background:color-mix(in srgb,var(--qd-blue) 15%,var(--qd-surface));color:var(--qd-text)}.qd-nav-home>span:first-child{font-size:18px;color:var(--qd-blue)}.qd-nav-label{padding:8px 8px 3px;color:var(--qd-muted);font-size:9px;font-weight:800;letter-spacing:.12em}.qd-nav-current{display:flex;gap:9px;align-items:center;padding:10px 9px;border:1px solid color-mix(in srgb,var(--qd-blue) 38%,var(--qd-line));border-radius:10px;background:color-mix(in srgb,var(--qd-blue) 10%,var(--qd-surface));color:var(--qd-blue)}.qd-nav-current>span:first-child{font-size:18px}.qd-nav-current small,.qd-nav-current strong{display:block}.qd-nav-current small{font-size:8px;letter-spacing:.1em;color:var(--qd-muted)}.qd-nav-current strong{margin-top:3px;overflow:hidden;color:var(--qd-text);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.qd-nav-templates{display:grid;gap:2px}.qd-nav-template:hover,.qd-nav-template.is-current{border-color:var(--qd-line);background:var(--qd-raised);color:var(--qd-text)}.qd-nav-template.is-current{border-left:2px solid var(--qd-blue)}.qd-nav-icon{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:7px;background:color-mix(in srgb,var(--qd-gold) 12%,var(--qd-surface));color:var(--qd-gold)}.qd-nav-note{display:flex;gap:8px;margin-top:auto;padding:10px 8px 3px;border-top:1px solid var(--qd-line);color:var(--qd-gold)}.qd-nav-note p{margin:0;color:var(--qd-muted);font-size:10px;line-height:1.45}
.qd-free-workspace .qd-editor-section{min-height:600px;border-color:var(--qd-line);border-radius:15px;background:var(--qd-surface)}.qd-free-workspace .qd-editor-topline{min-height:38px;padding:7px 13px;border-color:var(--qd-line);color:var(--qd-muted)}.qd-editor-context{display:flex;align-items:center;gap:8px}.qd-live-dot{width:7px;height:7px;border-radius:50%;background:#39c79a;box-shadow:0 0 0 3px color-mix(in srgb,#39c79a 16%,transparent)}.qd-free-workspace .qd-editor-scroll{min-height:0;padding:clamp(18px,3vw,38px);background:var(--qd-raised)}.qd-free-workspace .qd-editor-page{min-height:var(--qd-page-height,1123px);box-shadow:0 10px 35px rgba(0,0,0,.25)}.qd-status-bar{display:flex;align-items:center;gap:10px;min-height:35px;padding:6px 13px;border-top:1px solid var(--qd-line);background:var(--qd-surface);color:var(--qd-muted);font-size:10px}.qd-status-separator{height:14px;border-left:1px solid var(--qd-line)}.qd-status-paper{margin-left:auto;text-transform:capitalize}.qd-ai-open-mobile{display:none;padding:6px 9px;border:1px solid var(--qd-line);border-radius:8px;background:var(--qd-raised);color:var(--qd-text);font:600 11px inherit;cursor:pointer}.qd-ai-open-mobile[hidden]{display:none}
.qd-free-workspace .qd-coach-panel{position:sticky;top:10px;align-self:start;max-height:calc(100dvh - 285px);overflow:auto;padding:13px;border-color:var(--qd-line);border-radius:15px;background:var(--qd-surface)}.qd-ai-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.qd-ai-collapse{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--qd-line);border-radius:8px;background:var(--qd-raised);color:var(--qd-muted);font:20px/1 inherit;cursor:pointer}.qd-free-workspace .qd-ai-panel{border-color:color-mix(in srgb,#805dff 38%,var(--qd-line));background:color-mix(in srgb,#805dff 8%,var(--qd-surface))}.qd-free-workspace .qd-ai-review-btn{background:var(--qd-blue);border-color:var(--qd-blue);color:#fff}.qd-free-workspace .qd-review-btn{background:var(--qd-raised);border-color:var(--qd-line);color:var(--qd-text)}.qd-free-workspace .qd-ai-panel textarea{border-color:var(--qd-line);background:var(--qd-navy);color:var(--qd-text)}.qd-coach-panel.is-collapsed{width:54px;max-height:none;padding:8px;overflow:hidden}.qd-coach-panel.is-collapsed>:not(.qd-ai-panel-head){display:none}.qd-coach-panel.is-collapsed .qd-ai-panel-head{flex-direction:column}.qd-coach-panel.is-collapsed .qd-coach-top{justify-content:center}.qd-coach-panel.is-collapsed .qd-coach-top>div{display:none}.qd-coach-panel.is-collapsed .qd-coach-avatar{width:34px;height:34px;font-size:19px}.qd-coach-panel.is-collapsed .qd-ai-collapse{width:34px;height:30px}
.qd-free-workspace[data-qd-theme="light"] .qd-ai-panel{background:linear-gradient(145deg,#f3f1ff,var(--qd-surface))}.qd-free-workspace[data-qd-theme="light"] .qd-editor-page{box-shadow:0 10px 35px rgba(27,46,73,.16)}
@media(max-width:1180px){.qd-free-body{grid-template-columns:180px minmax(0,1fr) 280px;gap:9px;margin-inline:9px}.qd-brand{flex-basis:155px}.qd-docs-nav{padding-inline:7px}}
@media(max-width:980px){.qd-free-body{grid-template-columns:170px minmax(0,1fr)}.qd-free-workspace .qd-coach-panel{position:static;grid-column:2;max-height:none}.qd-free-workspace .qd-editor-section{grid-column:2;grid-row:1}.qd-docs-nav{grid-row:1 / span 2}.qd-free-workspace .qd-coach-panel.is-collapsed{grid-column:2;width:auto;min-height:48px}.qd-coach-panel.is-collapsed .qd-ai-panel-head{flex-direction:row;justify-content:space-between}.qd-coach-panel.is-collapsed .qd-coach-top{justify-content:flex-start}.qd-coach-panel.is-collapsed .qd-coach-top>div{display:block}.qd-coach-panel.is-collapsed .qd-coach-avatar{width:34px;height:34px}}
@media(max-width:700px){.qd-free-workspace{min-height:0;border-radius:13px}.qd-free-workspace .qd-free-header{gap:9px;padding:10px 12px}.qd-brand{flex:0 0 auto;font-size:16px}.qd-brand img{width:32px;height:32px}.qd-free-title{order:3;flex-basis:100%;padding-top:8px;border-top:1px solid var(--qd-line)}.qd-free-title .qd-doc-icon{width:32px;height:32px}.qd-free-actions{margin-left:auto}.qd-free-actions .btn{min-height:36px;font-size:10px}.qd-theme-toggle{min-height:36px;padding:6px 8px}.qd-theme-toggle span{display:none}.qd-free-workspace .qd-ribbon-tabs{padding-inline:7px}.qd-free-workspace .qd-ribbon-tabs button{padding-inline:13px}.qd-free-workspace .qd-ribbon-panel{padding-inline:9px}.qd-free-body{display:flex;flex-direction:column;gap:9px;margin:9px 8px 0}.qd-free-workspace .qd-editor-section{order:0;min-height:66vh}.qd-free-workspace .qd-editor-scroll{min-height:56vh;padding:10px}.qd-free-workspace .qd-editor-page{min-height:78vh;padding:25px 20px}.qd-free-workspace .qd-coach-panel{order:1;position:static;max-height:none}.qd-docs-nav{order:2;position:static;max-height:none;overflow:visible}.qd-nav-templates{display:flex;overflow:auto;gap:5px;padding-bottom:4px}.qd-nav-template{flex:0 0 auto;width:auto;max-width:180px}.qd-nav-label:nth-of-type(2),.qd-nav-note{display:none}.qd-nav-current{display:none}.qd-nav-home{margin:0}.qd-ai-open-mobile{display:inline-flex}.qd-coach-panel.is-collapsed{width:auto;min-height:48px}.qd-free-workspace .qd-editor-topline{padding-inline:9px}.qd-status-bar{gap:7px;padding-inline:9px;font-size:9px}}

/* ==================== Technical Drawing Video Library ==================== */
.vl-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;max-width:1120px;margin:6px auto 25px;padding:34px 38px;overflow:hidden;border:1px solid color-mix(in srgb,var(--led-1) 20%,var(--border));border-radius:24px;background:radial-gradient(ellipse at 88% 10%,color-mix(in srgb,#39e3d0 15%,transparent),transparent 38%),linear-gradient(130deg,color-mix(in srgb,var(--panel) 97%,#12192e),var(--panel));box-shadow:0 20px 55px rgba(30,48,95,.08)}
.vl-hero:after{content:"";position:absolute;inset:auto -6% -130px 35%;height:180px;border:1px solid color-mix(in srgb,var(--led-1) 22%,transparent);border-radius:50%;transform:rotate(-10deg);pointer-events:none}
.vl-hero-copy{position:relative;z-index:1;max-width:670px}.vl-eyebrow{display:flex;align-items:center;gap:8px;color:var(--led-1);font:700 10px/1.2 var(--font-mono);letter-spacing:.16em}.vl-live-dot{width:8px;height:8px;border-radius:50%;background:#20c997;box-shadow:0 0 0 4px color-mix(in srgb,#20c997 16%,transparent)}
.vl-hero h1{margin:16px 0 10px;font:700 clamp(30px,4vw,48px)/1.06 var(--font-display);letter-spacing:-.045em}.vl-hero h1 span{color:var(--led-1)}.vl-hero-copy>p{max-width:540px;margin:0;color:var(--muted);font-size:15px;line-height:1.65}.vl-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:21px}.vl-hero-meta span{padding:8px 11px;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--panel-2) 82%,transparent);color:var(--muted);font-size:11px;font-weight:650}
.vl-hero-mark{position:relative;z-index:1;display:grid;place-items:center;flex:0 0 142px;width:142px;height:142px;border:1px solid color-mix(in srgb,var(--led-1) 28%,var(--border));border-radius:38px;background:linear-gradient(145deg,color-mix(in srgb,var(--led-1) 12%,var(--panel)),var(--panel-2));box-shadow:inset 0 1px rgba(255,255,255,.45),0 18px 40px rgba(30,48,95,.1);transform:rotate(4deg)}.vl-hero-mark span{font-size:58px;filter:drop-shadow(0 9px 12px rgba(0,0,0,.14))}.vl-hero-mark i{position:absolute;right:12px;bottom:13px;display:grid;place-items:center;width:36px;height:36px;border:3px solid var(--panel);border-radius:50%;background:var(--led-1);color:#fff;font-size:13px;font-style:normal}
.vl-collection-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;max-width:1120px;margin:0 auto 35px}.vl-collection-card{display:flex;align-items:center;gap:14px;min-width:0;padding:17px 19px;border:1px solid var(--border);border-radius:17px;background:var(--panel);color:var(--ink);text-align:left;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}.vl-collection-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--collection-color) 48%,var(--border));box-shadow:0 12px 28px rgba(30,48,95,.09)}.vl-collection-card.is-linework{--collection-color:#13b8c9}.vl-collection-card.is-tangency{--collection-color:#9065ee}.vl-collection-icon{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--collection-color) 13%,var(--panel));color:var(--collection-color);font-size:24px}.vl-collection-card>span:nth-child(2){display:grid;gap:3px;min-width:0}.vl-collection-card small{color:var(--collection-color);font:700 9px/1.2 var(--font-mono);letter-spacing:.11em}.vl-collection-card strong{font:700 17px/1.2 var(--font-display)}.vl-collection-card em{color:var(--muted);font-size:11px;font-style:normal}.vl-collection-card>b{margin-left:auto;color:var(--collection-color);font-size:20px}
.vl-popular-shelf{display:grid;grid-template-columns:minmax(150px,.55fr) minmax(0,1.45fr);gap:18px;margin:17px 0 21px;padding:16px;border:1px solid color-mix(in srgb,var(--led-1) 18%,var(--border));border-radius:17px;background:linear-gradient(115deg,color-mix(in srgb,var(--led-1) 5%,var(--panel)),var(--panel) 58%)}.vl-popular-heading{align-self:center}.vl-popular-heading p{margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.45}.vl-popular-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.vl-popular-group{min-width:0}.vl-popular-group h3{margin:0 0 7px;color:var(--ink);font:700 12px/1.2 var(--font-display)}.vl-popular-list{display:grid;grid-template-columns:1fr;gap:6px}.vl-popular-chip{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 9px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .16s,transform .16s}.vl-popular-chip:hover{transform:translateY(-1px);border-color:var(--led-1)}.vl-popular-rank{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;background:color-mix(in srgb,var(--led-1) 12%,var(--panel));color:var(--led-1);font:750 10px var(--font-mono)}.vl-popular-chip>span:nth-child(2){display:grid;gap:2px;min-width:0}.vl-popular-chip strong,.vl-popular-chip small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vl-popular-chip strong{font-size:10px}.vl-popular-chip small{color:var(--muted);font-size:8px}.vl-popular-chip>b{margin-left:auto;color:var(--led-1);font-size:15px}.vl-popular-empty{color:var(--muted);font-size:10px}
.vl-browse{max-width:1120px;margin:0 auto;padding-bottom:26px;scroll-margin-top:20px}.vl-browse-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.vl-browse-head h2{margin:7px 0 0;font:700 23px/1.2 var(--font-display);letter-spacing:-.025em}.vl-search{display:flex;align-items:center;gap:10px;width:min(100%,330px);min-height:44px;padding:0 13px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--muted)}.vl-search>span{font-size:24px;line-height:1}.vl-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:500 12px var(--font-body)}.vl-search:focus-within{border-color:var(--led-1);box-shadow:0 0 0 3px color-mix(in srgb,var(--led-1) 13%,transparent)}.vl-filter-row{display:flex;gap:7px;margin:19px 0 7px;overflow-x:auto;scrollbar-width:none}.vl-filter-row::-webkit-scrollbar{display:none}.vl-filter{display:flex;align-items:center;gap:9px;min-height:38px;padding:0 13px;border:1px solid var(--border);border-radius:999px;background:var(--panel);color:var(--muted);font:650 11px var(--font-body);white-space:nowrap;cursor:pointer}.vl-filter span{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--panel-2);font:700 9px var(--font-mono)}.vl-filter.is-active{border-color:color-mix(in srgb,var(--led-1) 45%,var(--border));background:color-mix(in srgb,var(--led-1) 10%,var(--panel));color:var(--led-1)}.vl-filter.is-active span{background:color-mix(in srgb,var(--led-1) 18%,var(--panel));color:var(--led-1)}.vl-results-note{min-height:24px;padding:4px 2px;color:var(--muted-2);font-size:10px}
.vl-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.vl-video-card{min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:0 7px 20px rgba(30,48,95,.045);animation:vl-card-in .35s both;animation-delay:calc(var(--vl-card-index,0)*25ms);transition:transform .18s,border-color .18s,box-shadow .18s}.vl-video-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--led-1) 35%,var(--border));box-shadow:0 14px 32px rgba(30,48,95,.11)}@keyframes vl-card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.vl-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;overflow:hidden;border:0;background:linear-gradient(135deg,#16223a,#192b3a);cursor:pointer}.vl-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s}.vl-video-card:hover .vl-thumb img{transform:scale(1.04)}.vl-thumb-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,12,22,.64),transparent 62%)}.vl-play-button{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:46px;height:46px;padding-left:3px;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(13,18,29,.72);color:white;font-size:15px;transform:translate(-50%,-50%);transition:background .16s,transform .16s}.vl-thumb:hover .vl-play-button{background:var(--led-1);transform:translate(-50%,-50%) scale(1.08)}.vl-duration{position:absolute;right:9px;bottom:8px;padding:4px 6px;border-radius:5px;background:rgba(6,9,15,.82);color:#fff;font:600 9px var(--font-mono)}.vl-video-card-body{padding:13px 14px 14px}.vl-card-kicker{display:flex;justify-content:space-between;gap:8px;color:var(--muted-2);font:700 9px var(--font-mono);letter-spacing:.09em}.vl-card-kicker .is-cyan{color:#079dad}.vl-card-kicker .is-violet{color:#8556d8}.vl-video-card h3{margin:8px 0 4px;font:700 15px/1.3 var(--font-display)}.vl-video-card p{margin:0;color:var(--muted);font-size:11px}.vl-watch-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;margin-top:14px;border:1px solid color-mix(in srgb,var(--led-1) 36%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--led-1) 9%,var(--panel));color:var(--led-1);font:700 11px var(--font-body);cursor:pointer;transition:background .15s,color .15s}.vl-watch-btn:hover{background:var(--led-1);color:#fff}.vl-watch-btn span{font-size:10px}.vl-empty{grid-column:1/-1;display:grid;place-items:center;gap:7px;min-height:180px;border:1px dashed var(--border);border-radius:15px;color:var(--muted);text-align:center}.vl-empty>span{font-size:28px}.vl-empty strong{color:var(--ink)}.vl-empty p{margin:0;font-size:12px}.vl-source-note{display:flex;align-items:flex-start;gap:10px;margin-top:20px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--panel-2) 72%,transparent);color:var(--muted);font-size:10px;line-height:1.5}.vl-source-note>span{color:var(--led-1);font-size:15px}.vl-source-note p{margin:0}
.vl-td-suggestion{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;max-width:1120px;margin:22px auto;padding:15px 17px;border:1px solid color-mix(in srgb,#ff8d54 32%,var(--border));border-radius:15px;background:linear-gradient(110deg,color-mix(in srgb,#ff8d54 8%,var(--panel)),var(--panel))}.vl-suggestion-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:color-mix(in srgb,#ff8d54 16%,var(--panel));font-size:23px}.vl-suggestion-copy{min-width:0}.vl-suggestion-copy>span{color:#d66d3c;font:700 8px var(--font-mono);letter-spacing:.12em}.vl-suggestion-copy strong{display:block;margin:4px 0;font:700 14px var(--font-display)}.vl-suggestion-copy p{margin:0;color:var(--muted);font-size:11px;line-height:1.4}.vl-suggest-play{min-height:40px;white-space:nowrap}.vl-suggestion-library{grid-column:2/-1;margin-top:-7px;color:var(--led-1);font-size:10px;font-weight:700;text-decoration:none}.vl-suggestion-library:hover{text-decoration:underline}
.video-library-player[hidden]{display:none}.video-library-player{position:fixed;z-index:90;right:20px;bottom:20px;width:min(430px,calc(100vw - 32px));overflow:hidden;border:1px solid rgba(135,153,183,.4);border-radius:17px;background:#10141d;color:#f4f6fb;box-shadow:0 22px 70px rgba(0,0,0,.34);animation:vl-player-in .22s ease-out}.video-library-player.is-library-route{width:min(580px,calc(100vw - 32px))}.video-library-player.is-minimized{width:min(380px,calc(100vw - 24px));right:12px;bottom:max(12px,env(safe-area-inset-bottom,0px))}.video-library-player-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px}.video-library-player-head>div:first-child{display:grid;gap:3px;min-width:0}.video-library-player-kicker{color:#5ce1d1;font:700 8px var(--font-mono);letter-spacing:.14em}.video-library-player-head strong{overflow:hidden;font:700 12px var(--font-display);text-overflow:ellipsis;white-space:nowrap}.video-library-player-controls{display:flex;gap:6px}.video-player-control{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(180,193,215,.26);border-radius:9px;background:#1a202c;color:#f4f6fb;font:500 20px/1 var(--font-body);cursor:pointer}.video-player-control:hover{background:#2b3444}.video-library-player-frame{width:100%;aspect-ratio:16/9;min-height:200px;background:#000}.video-library-player-frame iframe{display:block;width:100%;height:100%;min-height:200px;border:0}.video-library-player-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px 11px;color:#a4adc0;font-size:9px}.video-library-player-foot a{color:#6ce0d5;font-weight:700;text-decoration:none}.video-library-player-foot a:hover{text-decoration:underline}.video-library-player.is-minimized .video-library-player-head{padding:8px 10px}.video-library-player.is-minimized .video-library-player-kicker,.video-library-player.is-minimized .video-library-player-foot{display:none}.video-library-player.is-minimized .video-library-player-head strong{font-size:11px}.video-library-player.is-minimized .video-library-player-frame{aspect-ratio:16/9;min-height:200px}.video-library-player.is-minimized .video-library-player-frame iframe{min-height:200px}@keyframes vl-player-in{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
html.dark-mode .vl-hero{box-shadow:0 22px 60px rgba(0,0,0,.26)}html.dark-mode .vl-video-card{box-shadow:0 7px 20px rgba(0,0,0,.2)}html.dark-mode .vl-card-kicker .is-cyan{color:#51d9e7}html.dark-mode .vl-card-kicker .is-violet{color:#c2a2ff}html.dark-mode .vl-suggestion-copy>span{color:#ffab7b}
@media(max-width:800px){.vl-hero{padding:27px 25px}.vl-hero-mark{flex-basis:112px;width:112px;height:112px;border-radius:30px}.vl-hero-mark span{font-size:47px}.vl-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.vl-hero{align-items:flex-start;min-height:0;margin:2px auto 18px;padding:23px 19px;border-radius:18px}.vl-hero h1{font-size:clamp(28px,8vw,38px)}.vl-hero-copy>p{font-size:13px}.vl-hero-meta{gap:6px;margin-top:15px}.vl-hero-meta span{padding:7px 9px;font-size:9px}.vl-hero-mark{position:absolute;right:-16px;top:17px;flex-basis:auto;width:79px;height:79px;border-radius:23px;opacity:.68;transform:rotate(8deg)}.vl-hero-mark span{font-size:36px}.vl-hero-mark i{right:6px;bottom:6px;width:27px;height:27px;font-size:10px}.vl-hero-copy{padding-right:17px}.vl-collection-strip{gap:9px;margin-bottom:28px}.vl-collection-card{gap:9px;padding:12px 10px;border-radius:13px}.vl-collection-icon{flex-basis:36px;width:36px;height:36px;border-radius:11px;font-size:19px}.vl-collection-card strong{font-size:13px}.vl-collection-card em{font-size:9px}.vl-collection-card small{font-size:7px}.vl-collection-card>b{font-size:16px}.vl-browse-head{align-items:stretch;flex-direction:column;gap:13px}.vl-browse-head h2{font-size:21px}.vl-search{width:auto}.vl-video-grid{gap:10px}.vl-video-card{border-radius:12px}.vl-video-card-body{padding:10px}.vl-card-kicker{font-size:7px}.vl-video-card h3{font-size:12px}.vl-video-card p{font-size:9px;min-height:24px}.vl-watch-btn{min-height:42px;margin-top:10px;font-size:10px}.vl-play-button{width:38px;height:38px}.vl-td-suggestion{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:12px}.vl-suggestion-icon{width:36px;height:36px;font-size:19px}.vl-suggestion-copy strong{font-size:12px}.vl-suggestion-copy p{font-size:10px}.vl-suggest-play{grid-column:1/-1;width:100%}.vl-suggestion-library{grid-column:1/-1;margin:0}.video-library-player,.video-library-player.is-library-route{right:8px;bottom:max(8px,env(safe-area-inset-bottom,0px));width:calc(100vw - 16px);border-radius:14px}.video-library-player.is-minimized{right:8px;bottom:max(8px,env(safe-area-inset-bottom,0px));width:calc(100vw - 16px)}.video-library-player-frame,.video-library-player.is-minimized .video-library-player-frame{min-height:200px}.video-library-player-frame iframe,.video-library-player.is-minimized .video-library-player-frame iframe{min-height:200px}}
@media(max-width:600px){.vl-popular-shelf{grid-template-columns:1fr;gap:12px;margin:13px 0;padding:12px}.vl-popular-groups{grid-template-columns:1fr;gap:12px}.vl-popular-list{grid-template-columns:1fr}.vl-popular-chip{padding:7px}.vl-popular-chip small{font-size:7px}}
@media(max-width:370px){.vl-collection-strip{grid-template-columns:1fr}.vl-hero-mark{opacity:.42}.vl-video-grid{grid-template-columns:1fr}.vl-video-card{display:grid;grid-template-columns:42% minmax(0,1fr)}.vl-thumb{height:100%;min-height:130px;aspect-ratio:auto}.vl-video-card-body{display:flex;flex-direction:column;justify-content:center}.vl-video-card p{min-height:0}.vl-watch-btn{margin-top:8px}}

/* Shared mascot banners for the learning tools */
.section-feature-hero{--feature-accent:var(--led-1);min-height:246px}
.section-feature-hero h1 span{color:var(--feature-accent)}
.section-feature-hero .section-feature-mark{flex-basis:198px;width:198px;height:198px;padding:0;overflow:hidden;border-radius:24px;background:#07111f;transform:none}
.section-feature-hero .section-feature-mark img{display:block;width:100%;height:100%;object-fit:cover}
.section-feature-hero .section-feature-mark img{object-fit:contain}
.qc-feature-hero{--feature-accent:#15c7e8}
.sim-feature-hero{--feature-accent:#48a5ff}
.ql-feature-hero{--feature-accent:#a077ff}
@media(max-width:800px){.section-feature-hero{min-height:210px}.section-feature-hero .section-feature-mark{flex-basis:160px;width:160px;height:160px;border-radius:21px}}
@media(max-width:600px){.section-feature-hero{min-height:0}.section-feature-hero .section-feature-mark{right:10px;top:12px;flex-basis:auto;width:clamp(76px,22vw,100px);height:auto;aspect-ratio:1;border-radius:17px;opacity:1;transform:none;background:#07111f}.section-feature-hero .section-feature-mark img{height:auto;aspect-ratio:1;object-fit:contain}.section-feature-hero .vl-hero-copy{padding-right:clamp(76px,24vw,112px)}.section-feature-hero .vl-hero h1{font-size:clamp(25px,7vw,34px)}.section-feature-hero .vl-hero-meta{max-width:100%}}
@media(max-width:370px){.section-feature-hero .section-feature-mark{width:78px;height:78px;opacity:.9}.section-feature-hero .vl-hero-copy{padding-right:49px}}
@media(prefers-reduced-motion:reduce){.vl-video-card,.vl-hero,.video-library-player{animation:none;transition:none}}

/* The audio player lives outside #main so page navigation never interrupts it. */
.audio-global-player{position:fixed;z-index:92;right:20px;bottom:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;width:min(520px,calc(100vw - 32px));padding:13px;border:1px solid rgba(162,127,255,.36);border-radius:16px;background:color-mix(in srgb,var(--panel) 94%,#17102d);color:var(--ink);box-shadow:0 16px 48px rgba(5,8,20,.26);backdrop-filter:blur(18px);animation:audio-player-in .2s ease-out}.audio-global-player[hidden]{display:none}.audio-global-player-head{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0}.audio-global-player .audio-library-player-cover{width:48px;height:48px;border-radius:10px}.audio-global-player .audio-library-player-title{display:grid;gap:3px;min-width:0}.audio-global-player .audio-library-player-title .vl-eyebrow{color:#a889ff;font-size:8px}.audio-global-player .audio-library-player-title strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.audio-global-player .audio-library-player-title small{color:var(--muted);font-size:9px}.audio-global-player-actions{display:flex;gap:5px}.audio-global-player audio{display:block;width:100%;height:34px;accent-color:#9875f4}.audio-global-player .audio-library-player-tools{display:flex;align-items:center;justify-content:flex-end;gap:9px}.audio-global-player .audio-library-player-tools>label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:9px}.audio-global-player .audio-library-player-tools select{min-height:30px;padding:4px 22px 4px 7px}.audio-global-player .audio-library-transcript summary{padding:7px 9px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--ink);font-size:10px;cursor:pointer;white-space:nowrap}.audio-global-player .audio-library-transcript[open] .audio-library-transcript-text{position:absolute;right:12px;bottom:calc(100% + 8px);width:min(420px,calc(100vw - 36px));max-height:48vh;overflow:auto;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:0 12px 35px rgba(0,0,0,.2);color:var(--ink);font-size:11px;line-height:1.65;white-space:pre-wrap}.audio-global-player .audio-library-player-close{width:29px;height:29px;border:1px solid var(--border);border-radius:50%;background:var(--panel-2);color:var(--muted);font-size:17px;cursor:pointer}.audio-global-player .audio-library-player-close:hover{border-color:#a889ff;color:#a889ff}.audio-global-player.is-minimized{width:min(360px,calc(100vw - 32px));padding:9px 11px}.audio-global-player.is-minimized .audio-global-player-head{grid-template-columns:minmax(0,1fr) auto}.audio-global-player.is-minimized .audio-library-player-cover,.audio-global-player.is-minimized>audio,.audio-global-player.is-minimized .audio-library-player-tools{display:none}.audio-global-player.is-minimized .audio-library-player-title .vl-eyebrow{display:none}.audio-global-player.is-minimized .audio-library-player-title strong{font-size:11px}.audio-global-player.is-minimized .audio-library-player-title small{font-size:8px}.audio-library-search{display:flex;align-items:center;gap:8px;width:min(100%,390px);min-height:42px;padding:0 8px 0 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--muted)}.audio-library-search>span{font-size:21px;line-height:1}.audio-library-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:12px}.audio-library-search button{min-height:29px;padding:0 11px;border:1px solid rgba(157,124,255,.25);border-radius:8px;background:rgba(143,107,235,.1);color:#a98aff;font-size:10px;font-weight:750;cursor:pointer}.audio-library-search button:hover{background:rgba(143,107,235,.18)}.audio-library-filters label select:disabled{opacity:.65;cursor:not-allowed}.audio-library-filters{align-items:center}.audio-library-filters label{flex:0 1 300px}.audio-library-free-note{margin-left:auto}@keyframes audio-player-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
body:has(.video-library-player:not([hidden])) .audio-global-player{left:20px;right:auto}
@media(max-width:740px){.audio-global-player{right:12px;bottom:max(12px,env(safe-area-inset-bottom,0px));width:min(520px,calc(100vw - 24px));padding:10px}.audio-global-player.is-minimized{width:min(350px,calc(100vw - 24px))}.audio-library-search{width:100%;max-width:none}.audio-library-filters label{flex:1 1 100%}}
@media(max-width:600px){body:has(.video-library-player:not([hidden])) .audio-global-player{left:12px;right:12px;bottom:330px}.audio-global-player.is-minimized{width:min(340px,calc(100vw - 24px))}.audio-library-filters{align-items:stretch}.audio-library-free-note{margin-left:0}.audio-library-browse-head{align-items:stretch;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.audio-global-player{animation:none}}

/* Spanish A1 learning path */
.ql-spanish-page,.ql-spanish-start{max-width:1120px;margin:0 auto;padding:10px 0 40px}
.ql-spanish-top{display:flex;align-items:center;gap:18px;margin-bottom:22px}.ql-spanish-top>div{flex:1}.ql-spanish-top h1{margin:6px 0;font-size:clamp(26px,4vw,38px);letter-spacing:-.035em}.ql-spanish-top p{margin:0;color:var(--muted)}.ql-spanish-progress{display:grid;place-items:center;width:66px;height:66px;border:4px solid #c60b1e;border-radius:50%;font-weight:800;color:#c60b1e}
.ql-spanish-layout{display:grid;grid-template-columns:minmax(245px,.78fr) minmax(0,1.6fr);gap:18px;align-items:start}.ql-spanish-units,.ql-spanish-lesson,.ql-spanish-start-card{border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 8px 28px rgba(20,35,65,.06)}
.ql-spanish-units{display:grid;gap:7px;padding:10px;position:sticky;top:15px}.ql-spanish-unit{display:flex;align-items:flex-start;gap:10px;width:100%;padding:11px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}.ql-spanish-unit>span:first-child{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:50%;background:var(--panel-2);font-size:11px;font-weight:800}.ql-spanish-unit strong,.ql-spanish-unit small{display:block}.ql-spanish-unit strong{font-size:13px}.ql-spanish-unit small{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.4}.ql-spanish-unit.is-active{border-color:#c60b1e66;background:color-mix(in srgb,#c60b1e 8%,var(--panel))}.ql-spanish-unit.is-done>span:first-child{background:#d8f5e7;color:#07844e}
.ql-spanish-lesson{padding:clamp(18px,3vw,30px)}.ql-spanish-lesson-head{padding-bottom:18px;border-bottom:1px solid var(--border)}.ql-spanish-lesson-head h2{margin:7px 0;font-size:clamp(22px,3vw,31px)}.ql-spanish-lesson-head p{margin:0;color:var(--muted);line-height:1.55}.ql-spanish-notes,.ql-spanish-phrase-list{margin-top:20px}.ql-spanish-notes h3,.ql-spanish-phrase-list h3{margin:0 0 10px;font-size:16px}.ql-spanish-notes p{margin:8px 0;padding:12px 14px;border-left:3px solid #c60b1e;border-radius:0 10px 10px 0;background:var(--panel-2);font-size:13px;line-height:1.6}.ql-spanish-voice-status{color:var(--muted);font-size:12px;line-height:1.5}.ql-spanish-phrase{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 3px;border-bottom:1px solid var(--border)}.ql-spanish-phrase small,.ql-spanish-phrase strong{display:block}.ql-spanish-phrase small{color:var(--muted);font-size:11px}.ql-spanish-phrase strong{margin-top:3px;font-size:15px}.ql-spanish-phrase button{width:42px;height:42px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2);cursor:pointer}.ql-spanish-lesson>#spStartQuiz{margin-top:20px}.ql-spanish-done{margin-left:12px;color:#07844e;font-weight:700;font-size:13px}
.ql-spanish-quiz{padding-top:22px}.ql-spanish-quiz-count{color:#c60b1e;font-size:11px;font-weight:800;letter-spacing:.12em}.ql-spanish-quiz h3{margin:10px 0 18px;font-size:clamp(18px,2.5vw,23px)}.ql-spanish-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ql-spanish-options button{min-height:54px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2);color:var(--ink);font:600 14px/1.35 var(--font-body);text-align:left;cursor:pointer}.ql-spanish-options button:hover:not(:disabled){border-color:#c60b1e;background:color-mix(in srgb,#c60b1e 7%,var(--panel))}.ql-spanish-options button:disabled{opacity:.72}.ql-spanish-feedback{min-height:24px;margin:14px 0;color:var(--muted);font-size:13px}.ql-spanish-start-card{max-width:680px;margin:26px auto;padding:clamp(22px,5vw,42px)}.ql-spanish-start-card h1{margin:10px 0;font-size:clamp(27px,5vw,40px)}.ql-spanish-start-card p,.ql-spanish-start-card li{color:var(--muted);line-height:1.6}.ql-spanish-start-card ul{padding-left:20px}.ql-spanish-start-card label,.ql-spanish-start-card select{display:block;width:100%;margin:10px 0}.ql-spanish-start-card select{padding:11px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--ink)}
html.dark-mode .ql-spanish-unit.is-done>span:first-child{background:#17432f;color:#70e5a8}
@media(max-width:760px){.ql-spanish-layout{grid-template-columns:1fr}.ql-spanish-units{position:static;grid-template-columns:repeat(2,minmax(0,1fr));max-height:300px;overflow:auto}.ql-spanish-unit{padding:9px}.ql-spanish-top{align-items:flex-start;flex-wrap:wrap}.ql-spanish-top>div{flex-basis:calc(100% - 85px)}.ql-spanish-top>.ql-back-btn{order:2}.ql-spanish-progress{width:56px;height:56px}}
@media(max-width:460px){.ql-spanish-options{grid-template-columns:1fr}.ql-spanish-units{grid-template-columns:1fr;max-height:240px}.ql-spanish-unit small{font-size:10px}.ql-spanish-top{gap:10px}.ql-spanish-lesson{padding:18px 14px}}

/* Spanish meadow journey */
.ql-spanish-map-page{max-width:980px;margin:0 auto;padding:10px 0 42px;color:var(--ink)}
.ql-spanish-map-top{display:flex;align-items:center;gap:18px;margin-bottom:18px}.ql-spanish-map-top>.ql-back-btn{flex:none}.ql-map-title{flex:1;min-width:0}.ql-map-title h1{margin:5px 0;font-size:clamp(27px,4vw,40px);letter-spacing:-.04em}.ql-map-title p{margin:0;color:var(--muted);font-size:13px}.ql-map-progress{display:grid;place-content:center;flex:none;width:68px;height:68px;border:4px solid #c60b1e;border-radius:50%;color:#c60b1e;text-align:center}.ql-map-progress strong{font-size:17px;line-height:1}.ql-map-progress span{margin-top:4px;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.ql-map-landscape{overflow:hidden;padding:clamp(12px,3vw,24px);border:1px solid color-mix(in srgb,#539c58 23%,var(--border));border-radius:26px;background:radial-gradient(ellipse at 10% 8%,rgba(255,255,255,.46),transparent 30%),radial-gradient(ellipse at 86% 35%,rgba(255,255,255,.24),transparent 28%),linear-gradient(150deg,#d9f1d0 0%,#c2e8b5 44%,#d6edc5 100%);box-shadow:0 14px 38px rgba(39,91,43,.09)}
.ql-map-intro{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:154px;margin-bottom:17px;padding:clamp(17px,3vw,26px);border:1px solid rgba(255,255,255,.72);border-radius:20px;background:linear-gradient(110deg,rgba(255,255,255,.79),rgba(247,255,237,.72));box-shadow:0 8px 22px rgba(54,108,55,.08)}.ql-map-intro>div:first-child{max-width:620px}.ql-map-intro h2{margin:4px 0;font-size:clamp(20px,3vw,29px);letter-spacing:-.03em;color:#24492b}.ql-map-intro p{margin:0 0 12px;color:#58725b;font-size:13px;line-height:1.5}.ql-path-world-kicker{color:#527b50;font:750 10px var(--font-mono,monospace);letter-spacing:.13em}.ql-map-intro .btn{min-height:42px}.ql-map-critter{position:relative;flex:none;width:155px;height:125px}.ql-map-critter canvas{position:absolute;inset:0;width:100%;height:100%}.ql-map-critter span{position:absolute;inset:0;display:grid;place-items:center;font-size:50px;transition:opacity .2s}.ql-map-critter:has(canvas[data-loaded="true"]) span{opacity:0}
.ql-map-celebration{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 15px;border:1px solid rgba(19,141,87,.22);border-radius:15px;background:rgba(255,255,255,.8);color:#176640}.ql-map-celebration>div:last-child{display:grid;gap:2px}.ql-map-celebration strong{font-size:15px}.ql-map-celebration span{font-size:12px}.ql-map-celebration .ql-world-art{width:46px;height:46px;flex:none;border:0;background:transparent}
.ql-path-world{position:relative;margin:16px 0;padding:clamp(15px,3vw,23px);overflow:hidden;border:1px solid rgba(255,255,255,.72);border-radius:22px;background:rgba(255,255,255,.76);box-shadow:0 8px 22px rgba(50,103,49,.07)}.ql-path-world::after{position:absolute;right:-60px;bottom:-86px;width:200px;height:150px;border:1px solid rgba(91,155,78,.12);border-radius:50%;content:"";pointer-events:none}.ql-world-forest{background:linear-gradient(145deg,rgba(248,255,242,.9),rgba(236,250,228,.82))}.ql-world-home{background:linear-gradient(145deg,rgba(255,252,235,.93),rgba(247,241,214,.82))}.ql-world-town{background:linear-gradient(145deg,rgba(239,250,255,.91),rgba(232,245,248,.86))}.ql-path-world-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:100px;margin-bottom:5px}.ql-path-world-head h2{margin:4px 0;font-size:clamp(21px,3vw,28px);letter-spacing:-.035em;color:#264b2d}.ql-path-world-head>div:first-child{min-width:0}.ql-world-art{position:relative;display:grid;place-items:center;flex:none;width:132px;height:102px;border:1px solid rgba(79,133,67,.12);border-radius:18px;background:rgba(255,255,255,.62)}.ql-world-art canvas{position:absolute;inset:0;width:100%;height:100%}.ql-world-art>span{display:grid;place-items:center;width:100%;height:100%;font-size:41px;transition:opacity .18s}.ql-world-art.is-ready>span{opacity:0}.ql-world-art.has-error canvas{display:none}.ql-path-stones{position:relative;display:grid;gap:1px;padding:1px 0 7px}.ql-path-stones::before{position:absolute;top:0;bottom:4px;left:50%;width:13px;border:2px solid rgba(121,151,92,.23);border-radius:999px;background:repeating-linear-gradient(to bottom,#dfd2ad 0 13px,#f1e8d4 13px 22px);box-shadow:inset 0 0 0 3px rgba(255,255,255,.28);content:"";transform:translateX(-50%)}.ql-path-stop-row{position:relative;display:flex;align-items:center;min-height:86px;padding:8px 0}.ql-path-stop-row.is-left{justify-content:flex-start}.ql-path-stop-row.is-right{justify-content:flex-end}.ql-path-stone{position:relative;z-index:1;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:11px;width:min(380px,44%);min-height:72px;padding:10px 14px;border:1px solid rgba(126,119,91,.37);border-radius:26px 22px 25px 20px;background:linear-gradient(145deg,#fffdf4,#eae2cc);box-shadow:0 7px 0 rgba(117,111,83,.16),0 10px 18px rgba(48,77,43,.1);color:#3e4539;text-align:left;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}.ql-path-stop-row.is-right .ql-path-stone{margin-right:4%}.ql-path-stop-row.is-left .ql-path-stone{margin-left:4%}.ql-path-stone:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 9px 0 rgba(117,111,83,.14),0 13px 20px rgba(48,77,43,.13)}.ql-path-stone:focus-visible{outline:3px solid #eaa322;outline-offset:4px}.ql-path-stone-mark{display:grid;place-items:center;width:39px;height:39px;border:1px solid rgba(123,117,89,.27);border-radius:50%;background:rgba(255,255,255,.69);font-size:12px;font-weight:850;color:#69715b}.ql-path-stone-copy{display:grid;gap:3px;min-width:0}.ql-path-stone-copy strong{font-size:13px;line-height:1.25}.ql-path-stone-copy small{overflow:hidden;color:#6d7566;font-size:10px;line-height:1.35;text-overflow:ellipsis}.ql-path-stone-copy>span{color:#718264;font-size:9px;font-weight:750}.ql-path-stone.is-done{border-color:rgba(30,148,91,.38);background:linear-gradient(145deg,#f6fff8,#e3f4e7)}.ql-path-stone.is-done .ql-path-stone-mark{background:#d9f4e2;color:#087449}.ql-path-stone.is-next{border:2px solid #d99a2c;box-shadow:0 0 0 5px rgba(237,180,74,.18),0 7px 0 rgba(117,111,83,.16),0 10px 18px rgba(48,77,43,.12)}.ql-path-stone.is-locked{cursor:not-allowed;filter:saturate(.55);opacity:.65}.ql-path-coming{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding:19px;border:1px dashed rgba(70,130,69,.42);border-radius:20px;background:rgba(255,255,255,.56)}.ql-path-coming h2{margin:4px 0;font-size:20px;color:#35573a}.ql-path-coming p{max-width:390px;margin:0;color:#67806a;font-size:12px;line-height:1.5}.ql-path-coming-places{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;max-width:340px}.ql-path-coming-places span{padding:7px 10px;border:1px solid rgba(73,131,69,.15);border-radius:999px;background:rgba(255,255,255,.67);color:#547354;font-size:11px;white-space:nowrap}.ql-spanish-map-foot{margin:12px 5px 0;color:var(--muted);font-size:11px;line-height:1.5}
.ql-spanish-quiz-notice{margin:10px 0;padding:10px 12px;border-left:3px solid #e4a432;border-radius:0 9px 9px 0;background:color-mix(in srgb,#e4a432 10%,var(--panel));color:var(--muted);font-size:12px;line-height:1.45}
html.dark-mode .ql-map-landscape{border-color:#354f3a;background:radial-gradient(ellipse at 10% 8%,rgba(190,226,170,.12),transparent 34%),linear-gradient(150deg,#1d3025,#233d2a 55%,#263a2a)}html.dark-mode .ql-map-intro,html.dark-mode .ql-path-world,html.dark-mode .ql-path-coming{border-color:#455d45;background:rgba(27,42,31,.9)}html.dark-mode .ql-map-intro h2,html.dark-mode .ql-path-world-head h2,html.dark-mode .ql-path-coming h2{color:#e0f0d9}html.dark-mode .ql-map-intro p,html.dark-mode .ql-path-coming p,html.dark-mode .ql-path-world-kicker{color:#b2c7aa}html.dark-mode .ql-path-stone{border-color:#737660;background:linear-gradient(145deg,#4a4a3d,#35382f);color:#f3f2e5}html.dark-mode .ql-path-stone-copy small,html.dark-mode .ql-path-stone-copy>span{color:#c0c9b4}html.dark-mode .ql-path-stone.is-done{background:linear-gradient(145deg,#263f33,#203329)}html.dark-mode .ql-path-coming-places span{border-color:#465c47;background:#2d4032;color:#d0e3c7}html.dark-mode .ql-map-celebration{border-color:#315b42;background:#1b2c23;color:#9de0b8}

/* Illustrated 2D scenery across every Spanish journey world. */
.ql-path-world{isolation:isolate;min-height:620px}
.ql-path-world::after{display:none}
.ql-path-world.ql-world-forest{background:linear-gradient(145deg,#e8f5db,#d9edce 58%,#e8f1cd)}
.ql-path-world.ql-world-home{background:linear-gradient(145deg,#fbf3dc,#f5eaca 56%,#eee3be)}
.ql-path-world.ql-world-town{background:linear-gradient(145deg,#e7f4f5,#d9eded 55%,#e4efdf)}
.ql-path-scenery{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none;opacity:.78}
.ql-path-scenery svg{display:block;width:100%;height:100%;overflow:hidden}
.ql-path-world-head,.ql-path-stones{z-index:1}
.ql-path-world-head{padding:7px 10px;border-radius:16px;background:rgba(250,255,246,.72);backdrop-filter:blur(5px)}
.ql-world-home .ql-path-world-head{background:rgba(255,251,235,.76)}
.ql-world-town .ql-path-world-head{background:rgba(244,252,252,.76)}
.ql-path-stones::before{display:none}
.sp-hill-back{fill:#d8e9bb}.sp-hill-one{fill:url(#spForestHill);opacity:.67}.sp-hill-two{fill:url(#spForestHillNear);opacity:.72}
.sp-route-shadow{fill:none;stroke:#927d53;stroke-width:32;stroke-linecap:round;opacity:.28;transform:translateY(6px)}
.sp-route-edge{fill:none;stroke:#b1965e;stroke-width:28;stroke-linecap:round;opacity:.7}
.sp-route-fill{fill:none;stroke:#ead49b;stroke-width:21;stroke-linecap:round}
.sp-route-shine{fill:none;stroke:#fff1ca;stroke-width:2.5;stroke-linecap:round;opacity:.8}
.sp-river-bank{fill:none;stroke:#f1fffa;stroke-width:39;stroke-linecap:round;opacity:.86}
.sp-river{fill:none;stroke:url(#spRiver);stroke-width:29;stroke-linecap:round}
.sp-water-shine{fill:none;stroke:#e3fff8;stroke-width:3;stroke-linecap:round;opacity:.78}
.sp-bridge-shadow{fill:#725739;opacity:.35;transform:translateY(6px)}
.sp-bridge{fill:#b77e49;stroke:#835a36;stroke-width:2}
.sp-bridge-deck{fill:#e5c17e;stroke:#f6dfad;stroke-width:1}
.sp-bridge-lines{fill:none;stroke:#9a7045;stroke-width:2;stroke-linecap:round}
.sp-pine ellipse,.sp-leaves ellipse:first-child,.sp-home-house ellipse,.sp-home-plant ellipse:first-child,.sp-cafe ellipse,.sp-town-tree ellipse:first-child{fill:#527744;opacity:.2}
.sp-pine path:nth-of-type(1){fill:#456f3e}.sp-pine path:nth-of-type(2){fill:#c1d98b;opacity:.75}.sp-pine path:nth-of-type(3){fill:#906543}
.sp-pine-two{opacity:.92}
.sp-leaves circle{fill:#6d984e}.sp-leaves circle:nth-of-type(2){fill:#86ad5c}.sp-leaves ellipse:last-child{fill:#d6e8a0;opacity:.58}
.sp-flower circle{fill:#f4c961;stroke:#fff5c9;stroke-width:1}.sp-flower circle:nth-of-type(5n){fill:#fff0ae;stroke:none}
.sp-home-ground{fill:url(#spHomeGround)}.sp-home-garden{fill:#e7d9a7}.sp-home-lawn{fill:#d5dc91;opacity:.82}
.sp-home-house .house-wall{fill:#f4d9a5;stroke:#bd8b57;stroke-width:2}.sp-home-house .house-roof{fill:url(#spHomeRoof);stroke:#974f42;stroke-width:2;stroke-linejoin:round}.sp-home-house .house-door{fill:#91654a}.sp-home-house .house-window{fill:#91cbd0;stroke:#fff3d4;stroke-width:3}.sp-home-house .house-chimney{fill:#ba6250;stroke:#974f42;stroke-width:2}
.sp-home-plant path{fill:#749a4d;stroke:#577b3c;stroke-width:2;stroke-linecap:round}.sp-home-stone{fill:#c4b48c;stroke:#ad9a72;stroke-width:2}.sp-home-flower{fill:#edbd50;stroke:#fff0b6;stroke-width:2}
.sp-town-sky{fill:url(#spTownSky)}.sp-town-hill{fill:#bbd99b}.sp-town-road-bed{fill:#b49366}.sp-town-road{fill:url(#spTownRoad)}.sp-town-road-line{fill:none;stroke:#fff3d0;stroke-width:3;stroke-dasharray:14 12;stroke-linecap:round}
.sp-cafe .cafe-wall{fill:#f2dfb5;stroke:#bb9461;stroke-width:2}.sp-cafe .cafe-roof{fill:#c77c57;stroke:#a65d43;stroke-width:2}.sp-cafe .cafe-awning{fill:#e9a16e;stroke:#c47855;stroke-width:1}.sp-cafe .cafe-door{fill:#8b6650}.sp-cafe .cafe-window{fill:#91cbd0;stroke:#fff2d3;stroke-width:2}.sp-cafe .cafe-sign{fill:#fff3d3;stroke:#bf8257;stroke-width:2}.sp-cafe .cafe-signtext{fill:none;stroke:#ba684c;stroke-width:3;stroke-linecap:round}
.sp-town-tree>path{fill:#866545}.sp-town-tree>circle{fill:#71a258}.sp-town-tree>circle:nth-of-type(2){fill:#8ab968}.sp-town-tree>ellipse:last-child{fill:#c4dda0;opacity:.72}.sp-town-lamp{fill:none;stroke:#6c7f68;stroke-width:4;stroke-linecap:round}.sp-town-cloud{fill:#fff;opacity:.7}
.ql-world-forest .ql-path-stone,.ql-world-home .ql-path-stone,.ql-world-town .ql-path-stone{transform:none;border-color:#c7b995;box-shadow:0 2px 0 #d6c9a9,0 6px 0 #aa9a78,0 12px 20px rgba(49,73,43,.17),inset 0 2px 0 rgba(255,255,255,.95),inset 0 -3px 5px rgba(133,115,76,.12)}
.ql-world-forest .ql-path-stone::before,.ql-world-home .ql-path-stone::before,.ql-world-town .ql-path-stone::before{position:absolute;inset:1px 1px 45%;border-radius:24px 20px 18px 16px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0));content:"";pointer-events:none}
.ql-world-forest .ql-path-stone>*,.ql-world-home .ql-path-stone>*,.ql-world-town .ql-path-stone>*{position:relative;z-index:1}
.ql-world-forest .ql-path-stone:hover:not(:disabled),.ql-world-home .ql-path-stone:hover:not(:disabled),.ql-world-town .ql-path-stone:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 2px 0 #d6c9a9,0 8px 0 #aa9a78,0 17px 24px rgba(49,73,43,.2),inset 0 2px 0 rgba(255,255,255,.95)}
.ql-world-forest .ql-path-stone-mark,.ql-world-home .ql-path-stone-mark,.ql-world-town .ql-path-stone-mark{background:linear-gradient(145deg,#fffef8,#e3ddc8);border-color:#c2b796;box-shadow:inset 0 2px 2px rgba(255,255,255,.95),inset 0 -3px 4px rgba(111,98,68,.15),0 2px 2px rgba(67,72,46,.13)}
.ql-world-forest .ql-path-stone.is-next,.ql-world-home .ql-path-stone.is-next,.ql-world-town .ql-path-stone.is-next{box-shadow:0 0 0 5px rgba(237,180,74,.18),0 2px 0 #d6c9a9,0 7px 0 #a98c53,0 15px 24px rgba(49,73,43,.22),inset 0 2px 0 rgba(255,255,255,.95)}
.ql-world-forest .ql-path-stone.is-done .ql-path-stone-mark,.ql-world-home .ql-path-stone.is-done .ql-path-stone-mark,.ql-world-town .ql-path-stone.is-done .ql-path-stone-mark{background:linear-gradient(145deg,#f7fff8,#c9e9d2);box-shadow:inset 0 2px 2px rgba(255,255,255,.9),inset 0 -3px 4px rgba(63,136,81,.15),0 2px 3px rgba(38,90,53,.16)}
html.dark-mode .ql-path-world.ql-world-forest{background:linear-gradient(145deg,#213b2b,#294331 52%,#30432d)}
html.dark-mode .ql-path-world.ql-world-home{background:linear-gradient(145deg,#393526,#393526 58%,#373628)}
html.dark-mode .ql-path-world.ql-world-town{background:linear-gradient(145deg,#22353a,#293a3a 58%,#303c32)}
html.dark-mode .ql-path-scenery{opacity:.38;filter:saturate(.75) brightness(.78)}
html.dark-mode .ql-world-forest .ql-path-world-head{background:rgba(27,42,31,.78)}
html.dark-mode .ql-world-home .ql-path-world-head{background:rgba(43,40,30,.82)}
html.dark-mode .ql-world-town .ql-path-world-head{background:rgba(29,42,43,.82)}
html.dark-mode .ql-world-forest .ql-path-stone,html.dark-mode .ql-world-home .ql-path-stone,html.dark-mode .ql-world-town .ql-path-stone{box-shadow:0 2px 0 #545844,0 6px 0 #303c31,0 12px 20px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 5px rgba(0,0,0,.15)}
html.dark-mode .ql-world-forest .ql-path-stone::before,html.dark-mode .ql-world-home .ql-path-stone::before,html.dark-mode .ql-world-town .ql-path-stone::before{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0))}
@media(max-width:700px){.ql-path-world{min-height:570px}.ql-path-scenery{opacity:.55}}
@media(max-width:440px){.ql-path-world{min-height:555px}.ql-path-scenery{opacity:.42}}
@media(prefers-reduced-motion:reduce){.ql-world-forest .ql-path-stone,.ql-world-home .ql-path-stone,.ql-world-town .ql-path-stone{transition:none}}
/* Spanish journey: compact, responsive previews for future places. */
.ql-journey-icon{display:block;width:1.15em;height:1.15em;flex:none;vertical-align:middle}
.ql-world-art>span .ql-journey-icon{width:38px;height:38px;color:#548454}
.ql-path-stone-mark .ql-journey-icon{width:19px;height:19px}
.ql-path-stone-mark:has(.ql-journey-icon){font-size:0}
.ql-lang-icon{display:grid;place-items:center;width:46px;height:34px;border-radius:8px;background:var(--panel-2)}
.ql-lang-icon svg{display:block;width:36px;height:24px}
.ql-spanish-flag{display:inline-block;width:15px;height:10px;margin-right:5px;border-radius:2px;background:linear-gradient(to bottom,#c60b1e 0 25%,#ffc400 25% 75%,#c60b1e 75% 100%);vertical-align:middle}
.ql-streak-icon{width:14px;height:14px;flex:none;fill:currentColor;vertical-align:-2px}
.ql-spanish-map-top .ql-back-btn{display:inline-flex;align-items:center;gap:7px}
.ql-spanish-map-top .ql-back-btn .ql-journey-icon{width:16px;height:16px}
.ql-map-title p .ql-streak-icon{margin-left:4px}
.ql-path-coming-places .ql-future-place .ql-journey-icon{width:20px;height:20px;color:#63845b}
html.dark-mode .ql-path-coming-places .ql-future-place .ql-journey-icon{color:#c5d9bc}
.ql-path-coming{display:block}
.ql-path-coming-places{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:none;margin-top:15px}
.ql-path-coming-places article{display:grid;justify-items:center;gap:6px;min-width:0;color:#547354;font-size:10px;font-weight:700;text-align:center}
.ql-path-coming-places article .ql-world-art{width:100%;height:74px;border-radius:13px}
.ql-path-coming-places article .ql-world-art>span{font-size:27px}
.ql-path-coming-places article>span,.ql-path-coming-places .ql-future-place>span{padding:0;border:0;border-radius:0;background:transparent;color:inherit;font-size:inherit;white-space:normal}
.ql-path-coming-places .ql-future-place{display:grid;place-items:center;min-height:74px;padding:8px;border:1px dashed rgba(73,131,69,.22);border-radius:13px;background:rgba(255,255,255,.54);color:#547354;font-size:11px;white-space:normal;text-align:center}
html.dark-mode .ql-path-coming-places .ql-future-place{border-color:#465c47;background:#2d4032;color:#d0e3c7}
@media(max-width:700px){.ql-path-coming{align-items:stretch;flex-direction:initial}.ql-path-coming-places{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch}.ql-path-coming-places article .ql-world-art{height:68px}.ql-path-coming-places .ql-future-place{min-height:68px}}
@media(max-width:440px){.ql-path-coming{padding:14px}.ql-path-coming-places{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ql-path-coming-places article .ql-world-art{height:61px}.ql-path-coming-places .ql-future-place{min-height:61px}}
.ql-speaker-icon{display:block;width:19px;height:19px}
.ql-spanish-phrase button{display:grid;place-items:center}
.ql-streak-chip{display:inline-flex;align-items:center;gap:4px}
.vl-hero-meta svg{width:16px;height:12px;flex:none;vertical-align:middle}
.vl-hero-meta .ql-speaker-icon{width:15px;height:15px}

.qf-svg-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;margin-inline:.08em;vertical-align:-.14em;line-height:1;color:inherit;pointer-events:none}
.qf-svg-icon svg{display:block;width:100%;height:100%;overflow:visible}

/* Hands-on Digital Logic workbench */
.dl-player{max-width:1120px;margin:0 auto;padding:8px 0 36px;color:var(--ink)}.dl-player-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.dl-player-head h1{margin:8px 0 4px;font-size:clamp(25px,4vw,38px);letter-spacing:-.035em}.dl-player-head p{margin:0;color:var(--muted)}.dl-instruction{margin-bottom:16px;padding:16px 19px;border:1px solid color-mix(in srgb,#9b7bff 35%,var(--border));border-radius:15px;background:color-mix(in srgb,#9b7bff 8%,var(--panel))}.dl-instruction strong{color:#9b7bff}.dl-instruction p{margin:5px 0 0;color:var(--muted);font-size:14px;line-height:1.55}.dl-board{padding:clamp(16px,3vw,26px);border:1px solid var(--border);border-radius:20px;background:var(--panel);box-shadow:0 18px 45px rgba(14,22,42,.1)}.dl-board-top{display:flex;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid var(--border);font:700 11px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.dl-live-indicator{color:#1eaf77;letter-spacing:.04em}.dl-controls{display:flex;align-items:stretch;flex-wrap:wrap;gap:10px;padding:20px 0}.dl-switch{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;min-width:88px;padding:10px 12px;border:1px solid var(--border);border-radius:13px;background:var(--panel-2);color:var(--ink);text-align:left;cursor:pointer}.dl-switch>span{font:700 12px var(--font-mono)}.dl-switch>b{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#626d7d;color:#fff;font-size:16px}.dl-switch small{color:var(--muted);font-size:9px}.dl-switch.is-on>b{background:#12ad83}.dl-control{display:grid;gap:5px;min-width:160px;padding:0 3px;color:var(--muted);font-size:11px;font-weight:700}.dl-control select{height:45px;padding:0 12px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2);color:var(--ink);font:600 13px var(--font-body)}.dl-signal-flow{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(130px,.6fr) 30px minmax(0,1fr);align-items:center;gap:12px;min-height:118px;padding:18px;border:1px dashed color-mix(in srgb,#9b7bff 40%,var(--border));border-radius:16px;background:color-mix(in srgb,#9b7bff 3%,var(--panel))}.dl-signal-flow>div:first-child,.dl-signal-flow>div:last-child{display:grid;gap:8px}.dl-signal-flow small{font:700 9px var(--font-mono);letter-spacing:.1em;color:var(--muted)}.dl-signal-flow>div:first-child>span{overflow-wrap:anywhere;font:600 12px/1.7 var(--font-mono);color:var(--ink)}.dl-signal-flow>i{text-align:center;color:#9b7bff;font-style:normal;font-size:22px}.dl-gate-chip{padding:15px 8px;border:1px solid #9b7bff88;border-radius:13px;background:color-mix(in srgb,#9b7bff 12%,var(--panel));text-align:center;font:800 11px var(--font-mono);letter-spacing:.05em;color:#9b7bff}.dl-outputs{display:flex;flex-wrap:wrap;gap:7px}.dl-output{display:flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2)}.dl-output small{font:700 9px var(--font-mono);letter-spacing:0}.dl-output b{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#626d7d;color:#fff}.dl-output b.is-high{background:#12ad83}.dl-formula{margin-top:16px;padding:13px 15px;border-radius:12px;background:var(--panel-2)}.dl-formula code{font:700 14px var(--font-mono);color:#9b7bff}.dl-formula p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.55}.dl-challenge{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:15px;padding:14px;border:1px solid var(--border);border-radius:13px}.dl-challenge strong{width:100%;font-size:14px}.dl-challenge>span{flex:1;color:var(--muted);font-size:12px}.dl-challenge button{min-height:40px;padding:7px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--ink);font-weight:700;cursor:pointer}.dl-challenge button:hover:not(:disabled){border-color:#9b7bff;color:#9b7bff}.dl-challenge p{flex-basis:100%;margin:2px 0;color:var(--muted);font-size:12px}.dl-player-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;color:var(--muted);font-size:12px}html.dark-mode .dl-board{box-shadow:0 18px 45px rgba(0,0,0,.28)}
@media(max-width:650px){.dl-player-head{align-items:flex-start;flex-direction:column}.dl-player-head>.btn{width:100%}.dl-controls{gap:8px;padding:14px 0}.dl-switch{min-width:72px;flex:1;padding:8px}.dl-control{flex:1 1 100%}.dl-signal-flow{grid-template-columns:1fr;gap:10px;text-align:center}.dl-signal-flow>i{transform:rotate(90deg)}.dl-outputs{justify-content:center}.dl-challenge>span{flex-basis:100%}.dl-player-foot{align-items:flex-start;flex-direction:column}.dl-player-foot>.btn{width:100%}}

/* Adjustable Statics Lab models */
.st-player{max-width:1160px;margin:0 auto;padding:8px 0 36px;color:var(--ink)}.st-player-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.st-player-head h1{margin:8px 0 4px;font-size:clamp(25px,4vw,38px);letter-spacing:-.035em}.st-player-head p{margin:0;color:var(--muted)}.st-instruction{margin-bottom:16px;padding:15px 18px;border:1px solid color-mix(in srgb,#ff8f6b 35%,var(--border));border-radius:14px;background:color-mix(in srgb,#ff8f6b 8%,var(--panel))}.st-instruction strong{color:#e47750}.st-instruction p{margin:5px 0 0;color:var(--muted);font-size:14px;line-height:1.55}.st-workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:16px;align-items:stretch}.st-diagram,.st-panel{min-width:0;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 12px 32px rgba(20,35,65,.07)}.st-diagram{display:grid;place-items:center;overflow:hidden;padding:12px;background:linear-gradient(145deg,var(--panel),color-mix(in srgb,#ff8f6b 5%,var(--panel)))}.st-diagram svg{width:100%;height:auto;max-height:470px}.st-diagram text{font-family:var(--font-body)}.st-panel{padding:20px}.st-panel-title{display:flex;justify-content:space-between;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--border);font:700 9px var(--font-mono);letter-spacing:.1em;color:var(--muted)}.st-panel-title span:last-child{color:#e47750}.st-ranges{display:grid;gap:13px;padding:17px 0}.st-range{display:grid;gap:6px}.st-range>span{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}.st-range b{white-space:nowrap;color:var(--ink);font:700 11px var(--font-mono)}.st-range input{width:100%;height:7px;accent-color:#ff8f6b;cursor:pointer}.st-equation{margin:5px 0 12px;padding:10px;border-radius:10px;background:var(--panel-2);overflow-wrap:anywhere}.st-equation code{color:#e47750;font:700 11px/1.55 var(--font-mono)}.st-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.st-results>div{display:grid;gap:5px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}.st-results span{color:var(--muted);font-size:10px}.st-results strong{font-size:13px}.st-explanation{min-height:48px;margin:12px 0;color:var(--muted);font-size:12px;line-height:1.55}.st-panel>[data-st-reset]{width:100%}html.dark-mode .st-diagram,html.dark-mode .st-panel{box-shadow:0 14px 35px rgba(0,0,0,.25)}
@media(max-width:800px){.st-workspace{grid-template-columns:1fr}.st-diagram svg{max-height:none;max-width:700px}.st-player-head{align-items:flex-start;flex-direction:column}.st-player-head>.btn{width:100%}}
@media(max-width:480px){.st-panel{padding:15px}.st-diagram{padding:4px}.st-results{grid-template-columns:1fr 1fr}.st-player-head h1{font-size:27px}}

/* Quicky Code interactive study workspace */
.qc-session-head{display:block;padding:16px 18px 13px}
.qc-session-head-main{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;margin-bottom:13px}
.qc-course-progress-top{width:100%;max-width:none}
.qc-course-progress-top .qc-course-progress-label{font-size:.72rem}
.qc-course-progress-top .qc-course-progress-label span:first-child{font-weight:750;color:var(--ink,#202431)}
.qc-session-foot{grid-template-columns:1fr;justify-items:end}
.qc-session-foot .qc-course-actions{width:100%;justify-content:flex-end}
.qc-study-panel{display:grid;gap:14px;width:100%;max-width:1500px;margin:0 auto}
.qc-study-title{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:1px 2px 4px}
.qc-study-title h2{margin:0 0 5px;font:750 clamp(20px,2.2vw,28px)/1.2 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.025em;color:var(--ink,#202431)}
.qc-study-title p:not(.qc-lesson-kicker){margin:0;color:var(--muted,#687184);font-size:13px;line-height:1.45}
.qc-study-module-pill{flex:none;padding:7px 10px;border:1px solid color-mix(in srgb,#5373ef 22%,var(--border,#d9dee8));border-radius:999px;background:color-mix(in srgb,#5373ef 7%,var(--panel,#fff));color:#5866b4;font-size:11px;font-weight:750}
.qc-study-columns{display:grid;grid-template-columns:minmax(175px,.63fr) minmax(330px,1.45fr) minmax(205px,.76fr);align-items:start;gap:12px;min-width:0}
.qc-study-nav,.qc-active-lesson,.qc-basics-panel{min-width:0;border:1px solid var(--border,#d9dee8);border-radius:15px;background:var(--panel,#fff);box-shadow:0 7px 20px rgba(20,35,65,.055)}
.qc-study-nav{overflow:hidden}
.qc-study-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:7px;border-bottom:1px solid var(--border,#d9dee8);background:color-mix(in srgb,var(--panel-2,#f3f5f9) 80%,var(--panel,#fff))}
.qc-study-tab{min-height:37px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted,#687184);font-size:12px;font-weight:750;cursor:pointer}
.qc-study-tab.is-active{border-color:color-mix(in srgb,#596cf0 30%,var(--border,#d9dee8));background:color-mix(in srgb,#586df2 12%,var(--panel,#fff));color:#5866d9}
.qc-study-tab:focus-visible,.qc-lesson-step:focus-visible,.qc-basics-example:focus-visible,.qc-study-quiz-link:focus-visible{outline:2px solid #6072f2;outline-offset:2px}
.qc-study-tab-panel{max-height:600px;overflow:auto;overscroll-behavior:contain;padding:12px}
.qc-study-tab-panel[hidden]{display:none}
.qc-study-nav-label,.qc-basics-label{display:block;margin:0 0 9px;color:var(--muted,#7b8495);font:750 9px/1.3 var(--font-mono,monospace);letter-spacing:.11em}
.qc-lesson-steps{display:grid;gap:6px}
.qc-lesson-step{display:grid;grid-template-columns:31px minmax(0,1fr);align-items:center;gap:9px;width:100%;min-height:54px;padding:8px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink,#202431);text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.qc-lesson-step:hover{background:color-mix(in srgb,#6273eb 7%,var(--panel,#fff))}
.qc-lesson-step.is-active{border-color:color-mix(in srgb,#5c70ed 46%,var(--border,#d9dee8));background:color-mix(in srgb,#5c70ed 10%,var(--panel,#fff))}
.qc-lesson-step-number{display:grid;place-items:center;width:29px;height:29px;border:1px solid color-mix(in srgb,#6577ee 28%,var(--border,#d9dee8));border-radius:50%;background:color-mix(in srgb,#6577ee 13%,var(--panel,#fff));color:#5d6fd7;font:750 10px var(--font-mono,monospace)}
.qc-lesson-step.is-active .qc-lesson-step-number{background:#6577ee;color:#fff}
.qc-lesson-step>span:last-child{display:grid;gap:3px;min-width:0}
.qc-lesson-step strong{font-size:11px;line-height:1.3}
.qc-lesson-step small{color:var(--muted,#7b8495);font-size:9px}
.qc-study-quiz-link{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:39px;margin-top:12px;padding:8px 9px;border:1px solid var(--border,#d9dee8);border-radius:9px;background:var(--panel-2,#f3f5f9);color:var(--ink,#202431);font-size:11px;font-weight:700;text-align:left;cursor:pointer}
.qc-notes-list{display:grid;gap:9px}
.qc-notes-card{padding:10px;border:1px solid var(--border,#d9dee8);border-radius:10px;background:color-mix(in srgb,var(--panel-2,#f3f5f9) 55%,var(--panel,#fff))}
.qc-notes-card>span{color:#6575d7;font:750 8px var(--font-mono,monospace);letter-spacing:.1em}
.qc-notes-card h3{margin:5px 0;font-size:11px;line-height:1.35}
.qc-notes-card p{margin:5px 0 0;color:var(--muted,#687184);font-size:10px;line-height:1.5}
.qc-notes-card .qc-notes-takeaway{padding-top:7px;border-top:1px solid var(--border,#d9dee8)}
.qc-notes-takeaway strong{color:var(--ink,#202431)}
.qc-source-notes-toggle{margin-top:10px;border:1px solid var(--border,#d9dee8);border-radius:10px;background:var(--panel,#fff)}
.qc-source-notes-toggle>summary{padding:10px;color:var(--ink,#202431);font-size:10px;font-weight:750;cursor:pointer}
.qc-source-notes-toggle[open]>summary{border-bottom:1px solid var(--border,#d9dee8)}
.qc-source-notes-toggle .qc-source-reader{padding:10px;border:0;background:transparent}
.qc-source-notes-toggle .qc-source-reader-head{display:grid;gap:8px}
.qc-source-notes-toggle .qc-topic-pdf{width:100%;min-width:0;min-height:260px;height:38vh}
.qc-active-lesson{display:grid;gap:11px;padding:13px}
.qc-active-lesson-copy{padding:2px 2px 5px}
.qc-active-lesson-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.qc-active-lesson-label .qc-lesson-kicker{margin:0;font-size:9px}
.qc-active-lesson-label>span:last-child{color:var(--muted,#687184);font-size:10px}
.qc-active-lesson-copy h3{margin:0 0 6px;color:var(--ink,#202431);font:750 17px/1.25 "Space Grotesk",system-ui,sans-serif}
.qc-active-lesson-copy>p{margin:0;color:var(--muted,#687184);font-size:11px;line-height:1.55}
.qc-editor-card{overflow:hidden;border:1px solid color-mix(in srgb,#33415d 28%,var(--border,#d9dee8));border-radius:12px;background:#0e1421;box-shadow:0 5px 15px rgba(8,14,25,.13)}
.qc-editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:39px;padding:7px 10px;border-bottom:1px solid #273349;background:#151d2c;color:#d5dcef;font:600 10px var(--font-mono,monospace)}
.qc-editor-toolbar>span{display:flex;align-items:center;gap:8px}.qc-editor-toolbar i{width:8px;height:8px;border-radius:50%;background:#5de0b0;box-shadow:0 0 9px #5de0b088}
.qc-editor-reset{padding:5px 7px;border:1px solid #33415a;border-radius:7px;background:#1d293c;color:#c6d0e2;font:600 9px var(--font-body,system-ui);cursor:pointer}.qc-editor-reset:hover{border-color:#7383f5;color:#fff}
.qc-study-editor{display:block;min-height:280px;max-height:520px;margin:0;border:0;border-radius:0;background:#0e1421;color:#e7edf8;font-size:12px;line-height:1.7;tab-size:4;resize:vertical}
.qc-study-editor:focus{border:0;outline:2px solid #6678ef;outline-offset:-2px}
.qc-editor-actions{display:flex;align-items:center;gap:11px;padding:9px 10px;border-top:1px solid #273349;background:#121a28}
.qc-editor-actions .btn{min-height:34px;padding:6px 13px;font-size:11px}
.qc-editor-actions .qc-run-help{margin:0;color:#a3afc3;font-size:9px;line-height:1.35}
.qc-study-output{overflow:hidden;margin:0;border:1px solid var(--border,#d9dee8);border-radius:11px;background:color-mix(in srgb,var(--panel-2,#f3f5f9) 70%,var(--panel,#fff))}
.qc-study-output .qc-run-label{padding:8px 10px;border-bottom:1px solid var(--border,#d9dee8);font-size:10px;font-weight:750}
.qc-study-output .qc-run-pre{max-height:180px;min-height:44px;margin:0;padding:10px;color:var(--ink,#202431);font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere}
.qc-study-output .qc-run-pre.is-error{color:#c34444}
.qc-active-takeaway{display:grid;gap:4px;padding:10px 11px;border-left:3px solid #6a79eb;border-radius:0 9px 9px 0;background:color-mix(in srgb,#6477ef 9%,var(--panel,#fff));font-size:10px;line-height:1.45}
.qc-active-takeaway strong{color:#5968cc;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.qc-active-takeaway span{color:var(--muted,#687184)}
.qc-basics-panel{display:grid;align-content:start;gap:12px;padding:13px}
.qc-basics-heading{display:flex;align-items:center;gap:9px;padding-bottom:9px;border-bottom:1px solid var(--border,#d9dee8)}
.qc-basics-heading h3{margin:0;color:var(--ink,#202431);font:750 14px "Space Grotesk",system-ui,sans-serif}
.qc-basics-icon{display:grid;place-items:center;width:27px;height:27px;border:1px solid #cfcaff;border-radius:8px;background:#f1efff;color:#6853d8;font-size:15px}
.qc-basics-summary{margin:0;color:var(--muted,#687184);font-size:11px;line-height:1.55}
.qc-basics-examples{display:grid;gap:7px}.qc-basics-example{display:grid;gap:6px;width:100%;padding:8px;border:1px solid var(--border,#d9dee8);border-radius:9px;background:var(--panel-2,#f3f5f9);color:var(--ink,#202431);text-align:left;cursor:pointer}.qc-basics-example:hover{border-color:color-mix(in srgb,#6072ef 55%,var(--border,#d9dee8))}.qc-basics-example>span{font-size:9px;font-weight:700}.qc-basics-example code{display:block;overflow:hidden;color:#087e78;font:9px/1.5 var(--font-mono,monospace);white-space:pre-wrap;overflow-wrap:anywhere}
.qc-basics-concept{display:grid;gap:6px;padding:10px;border:1px solid color-mix(in srgb,#6175ee 24%,var(--border,#d9dee8));border-radius:10px;background:color-mix(in srgb,#6175ee 5%,var(--panel,#fff))}
.qc-basics-concept .qc-basics-label,.qc-basics-examples>.qc-basics-label{margin:0}
.qc-basics-code,.qc-basics-output pre{max-height:210px;overflow:auto;margin:0;padding:10px;border:1px solid var(--border,#d9dee8);border-radius:9px;background:var(--panel-2,#f3f5f9);color:var(--ink,#202431);font:10px/1.55 var(--font-mono,monospace);white-space:pre-wrap;overflow-wrap:anywhere}
.qc-basics-code code{font:inherit;color:#087e78}
.qc-basics-output{display:grid;gap:5px}.qc-basics-output>span{color:var(--muted,#687184);font:750 8px var(--font-mono,monospace);letter-spacing:.1em}.qc-basics-output pre{max-height:110px;color:var(--ink,#202431)}
.qc-basics-check{overflow:hidden;border:1px solid var(--border,#d9dee8);border-radius:10px;background:var(--panel-2,#f3f5f9)}.qc-basics-check[hidden],.qc-basics-output[hidden]{display:none!important}.qc-basics-check>summary{padding:10px;color:var(--ink,#202431);font-size:10px;font-weight:700;line-height:1.45;cursor:pointer}.qc-basics-check>div{padding:0 10px 10px;color:var(--muted,#687184);font-size:9px;line-height:1.5}.qc-basics-check strong{color:#5968cc}.qc-basics-check p{margin:4px 0 0}
html.dark-mode .qc-basics-code code{color:#70d8c7}html.dark-mode .qc-basics-check strong{color:#b7aaff}
.qc-basics-hint{display:flex;align-items:flex-start;gap:8px;padding:10px;border:1px solid color-mix(in srgb,#8371ea 36%,var(--border,#d9dee8));border-radius:10px;background:color-mix(in srgb,#7864e6 8%,var(--panel,#fff))}.qc-basics-hint>span{color:#826ce8;font-size:15px}.qc-basics-hint strong{display:block;color:#6d59cf;font-size:10px}.qc-basics-hint p{margin:3px 0 0;color:var(--muted,#687184);font-size:9px;line-height:1.45}
.qc-study-checkpoint{overflow:hidden;border:1px solid var(--border,#d9dee8);border-radius:13px;background:var(--panel,#fff)}
.qc-study-checkpoint>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:55px;padding:10px 13px;cursor:pointer;list-style:none}
.qc-study-checkpoint>summary::-webkit-details-marker{display:none}.qc-study-checkpoint>summary::after{content:"＋";color:var(--muted,#687184);font-size:17px}.qc-study-checkpoint[open]>summary::after{content:"−"}
.qc-study-checkpoint>summary>span:first-child{display:grid;gap:3px}.qc-study-checkpoint>summary small{color:#6575d7;font:750 8px var(--font-mono,monospace);letter-spacing:.1em}.qc-study-checkpoint>summary strong{color:var(--ink,#202431);font-size:12px}.qc-study-checkpoint>summary>span:nth-child(2){color:var(--muted,#687184);font-size:10px}
.qc-study-checkpoint>.qc-topic-quiz{border:0;border-top:1px solid var(--border,#d9dee8);border-radius:0;box-shadow:none}
.qc-study-project{overflow:hidden;border:1px solid color-mix(in srgb,#18a77b 30%,var(--border,#d9dee8));border-radius:13px;background:var(--panel,#fff)}
.qc-study-project>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:55px;padding:10px 13px;cursor:pointer;list-style:none}.qc-study-project>summary::-webkit-details-marker{display:none}.qc-study-project>summary::after{content:"＋";color:var(--muted,#687184);font-size:17px}.qc-study-project[open]>summary::after{content:"−"}
.qc-study-project>summary>span:first-child{display:grid;gap:3px}.qc-study-project>summary small{color:#159365;font:750 8px var(--font-mono,monospace);letter-spacing:.1em}.qc-study-project>summary strong{color:var(--ink,#202431);font-size:12px}.qc-study-project>summary>span:nth-child(2){color:var(--muted,#687184);font-size:10px}
.qc-study-project-body{margin:0;padding:12px 14px;border:0;border-top:1px solid var(--border,#d9dee8);border-radius:0;background:transparent}.qc-study-project-body>p{margin-top:0;color:var(--muted,#687184);font-size:12px;line-height:1.5}
.qc-study-project-body .qc-guide-editor{min-height:190px}.qc-study-project-body .qc-run-output{margin-top:12px}
.qc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html.dark-mode .qc-study-module-pill{border-color:#414b78;background:#292f56;color:#c0c8ff}html.dark-mode .qc-study-tab.is-active{border-color:#555f9c;background:#30375f;color:#c4ccff}html.dark-mode .qc-lesson-step.is-active{border-color:#5967a2;background:#292f50}html.dark-mode .qc-lesson-step-number{border-color:#555e90;background:#343c68;color:#d4d9ff}html.dark-mode .qc-lesson-step.is-active .qc-lesson-step-number{background:#6978e8;color:#fff}html.dark-mode .qc-notes-card{background:#202633}html.dark-mode .qc-notes-card>span,html.dark-mode .qc-notes-takeaway strong{color:#adb7ff}html.dark-mode .qc-basics-icon{border-color:#514c85;background:#302d4c;color:#c4baff}html.dark-mode .qc-basics-example code{color:#70d8c7}html.dark-mode .qc-basics-hint{border-color:#514c85;background:#29263f}html.dark-mode .qc-basics-hint strong,html.dark-mode .qc-active-takeaway strong{color:#b7aaff}html.dark-mode .qc-active-takeaway{border-left-color:#8d7bf3;background:#29263f}html.dark-mode .qc-course-progress-top .qc-course-progress-label span:first-child{color:#eef1f7}
@media(max-width:1120px){.qc-study-columns{grid-template-columns:minmax(170px,.65fr) minmax(0,1.4fr)}.qc-basics-panel{grid-column:1/-1;grid-template-columns:minmax(150px,.8fr) minmax(190px,1fr) minmax(190px,1fr);align-items:start}.qc-basics-heading{grid-column:1/-1}.qc-basics-hint{align-self:stretch}}
@media(max-width:850px){.qc-study-columns{grid-template-columns:minmax(150px,.62fr) minmax(0,1.38fr)}.qc-basics-panel{grid-template-columns:1fr 1fr}.qc-basics-heading{grid-column:1/-1}}
@media(max-width:720px){.qc-session-head-main{align-items:flex-start;flex-direction:column}.qc-session-actions{width:100%;justify-content:space-between}.qc-course-progress-top .qc-course-progress-label{align-items:flex-start;flex-direction:column;gap:3px}.qc-study-title{align-items:flex-start}.qc-study-columns{grid-template-columns:1fr}.qc-study-tab-panel{max-height:300px}.qc-lesson-steps{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity}.qc-lesson-step{flex:0 0 min(220px,72vw);scroll-snap-align:start}.qc-study-quiz-link{margin-top:5px}.qc-basics-panel{grid-column:auto;grid-template-columns:1fr}.qc-basics-heading{grid-column:auto}.qc-study-editor{min-height:240px}.qc-session-foot .qc-course-actions{display:grid;grid-template-columns:1fr}.qc-study-checkpoint>summary{align-items:flex-start}.qc-study-checkpoint>summary>span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){.qc-lesson-step,.qc-course-progress-track span{transition:none}}
@media(max-width:720px){.qc-study-header-controls{width:100%;flex-basis:100%}.qc-study-topic-select{width:auto;min-width:0;max-width:none;flex:1}.qc-session-actions{justify-content:flex-start}.qc-mode-toggle{margin-left:auto}}

/* Animated Signals & Waves lab */
.sw-player{max-width:1180px;margin:0 auto;padding:8px 0 42px;color:var(--ink)}.sw-player-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}.sw-player-head h1{margin:8px 0 4px;font-size:clamp(25px,4vw,38px);letter-spacing:-.035em}.sw-player-head p{margin:0;color:var(--muted)}.sw-concept{margin-bottom:16px;padding:15px 18px;border:1px solid color-mix(in srgb,#33e1ff 35%,var(--border));border-radius:14px;background:color-mix(in srgb,#33e1ff 7%,var(--panel))}.sw-concept strong{color:#079ab5}.sw-concept p{margin:5px 0 0;color:var(--muted);font-size:14px;line-height:1.55}.sw-scope-card,.sw-controls-card,.sw-results-card{min-width:0;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 12px 32px rgba(20,35,65,.07)}.sw-scope-card{overflow:hidden;padding:15px;background:linear-gradient(145deg,var(--panel),color-mix(in srgb,#33e1ff 4%,var(--panel)))}.sw-scope-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:1px 4px 12px;font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.sw-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.sw-legend>span{display:flex;align-items:center;gap:5px;font:600 9px var(--font-body);letter-spacing:0}.sw-legend i{width:9px;height:9px;border-radius:50%;background:var(--trace)}.sw-scope{display:block;width:100%;height:auto;aspect-ratio:24/11;border-radius:12px;background:#0b1220}.sw-scope-axis{display:flex;justify-content:space-between;padding:8px 4px 0;color:var(--muted);font-size:10px}.sw-work-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;margin-top:14px}.sw-controls-card,.sw-results-card{padding:clamp(15px,2.5vw,22px)}.sw-card-label{padding-bottom:12px;border-bottom:1px solid var(--border);font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.sw-ranges{display:grid;gap:14px;padding:17px 0}.sw-range{display:grid;gap:7px}.sw-range>span{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.sw-range output{color:var(--ink);font:700 11px var(--font-mono)}.sw-range input{width:100%;height:7px;accent-color:#17bcd7;cursor:pointer}.sw-actions{display:flex;gap:9px}.sw-actions button{flex:1;min-height:42px}.sw-formula{display:block;overflow-wrap:anywhere;margin:15px 0;padding:12px;border-radius:11px;background:var(--panel-2);color:#079ab5;font:700 12px/1.6 var(--font-mono)}.sw-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sw-stats>div{display:grid;gap:5px;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}.sw-stats span{color:var(--muted);font-size:10px}.sw-stats strong{font-size:14px}.sw-explanation{min-height:52px;margin:13px 0 0;color:var(--muted);font-size:12px;line-height:1.6}html.dark-mode .sw-scope-card,html.dark-mode .sw-controls-card,html.dark-mode .sw-results-card{box-shadow:0 14px 35px rgba(0,0,0,.25)}
@media(max-width:780px){.sw-work-grid{grid-template-columns:1fr}.sw-player-head{align-items:flex-start;flex-direction:column}.sw-player-head>.btn{width:100%}.sw-scope-head{align-items:flex-start;flex-direction:column}.sw-legend{justify-content:flex-start}}
@media(max-width:480px){.sw-scope-card{padding:9px}.sw-scope{aspect-ratio:1.25}.sw-scope-axis{font-size:9px}.sw-stats{grid-template-columns:1fr 1fr}.sw-stats>div{padding:9px}.sw-stats strong{font-size:12px}.sw-actions{flex-direction:column}}

/* The library accepts videos from any subject; subject and topic shelves wrap on small screens. */
.vl-subject-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 9px}
.vl-subject-row .vl-filter{border-color:color-mix(in srgb,var(--led-1) 23%,var(--border));background:color-mix(in srgb,var(--led-1) 5%,var(--panel));font-weight:700}
.vl-subject-row .vl-filter.is-active{background:var(--led-1);color:#fff}
.vl-collection-card small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Resizable floating player. Size is set and persisted by the player controls. */
.video-library-player{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:var(--vl-player-width,430px);height:var(--vl-player-height,320px);max-width:calc(100vw - 40px);max-height:calc(100vh - 24px);min-width:min(320px,calc(100vw - 40px));min-height:286px;overflow:visible;isolation:isolate}
.video-library-player[hidden]{display:none}
.video-library-player.is-library-route,.video-library-player.is-minimized{width:var(--vl-player-width,430px);height:var(--vl-player-height,320px);right:20px}
.video-library-player-frame{width:100%;height:100%;min-height:0;aspect-ratio:auto;overflow:hidden;background:#000}
.video-library-player-frame iframe,.video-library-player.is-minimized .video-library-player-frame iframe{width:100%;height:100%;min-height:0}
.video-library-pinch-zone{display:none}
.video-library-player-foot{min-height:34px}
.video-library-player.is-minimized{bottom:max(12px,env(safe-area-inset-bottom,0px))}
.video-player-resize{position:absolute;z-index:2;right:-1px;bottom:-1px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(135,153,183,.4);border-radius:11px 0 16px 0;background:#1a202c;color:#98a8c2;cursor:nwse-resize;touch-action:none;user-select:none}
.video-player-resize span{font-size:18px;line-height:1}
.video-player-resize:hover,.video-player-resize:focus-visible{background:#26334a;color:#74e3d6;outline:2px solid #5ce1d1;outline-offset:2px}
.video-library-player-foot{padding-left:42px}
@media(max-width:600px){
  .video-library-player,.video-library-player.is-library-route,.video-library-player.is-minimized{right:8px;bottom:max(8px,env(safe-area-inset-bottom,0px));width:var(--vl-player-width,calc(100vw - 16px));height:var(--vl-player-height,310px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 20px);min-width:min(280px,calc(100vw - 16px));min-height:286px;border-radius:14px}
  .video-library-player{grid-template-rows:auto minmax(0,1fr) auto auto}
  .video-library-player-frame,.video-library-player.is-minimized .video-library-player-frame{min-height:0}
  .video-library-player-frame iframe,.video-library-player.is-minimized .video-library-player-frame iframe{min-height:0}
  .video-library-pinch-zone{display:flex;align-items:center;justify-content:center;gap:7px;min-height:34px;background:linear-gradient(90deg,rgba(22,150,204,.16),rgba(92,225,209,.1));border-top:1px solid rgba(135,153,183,.2);border-bottom:1px solid rgba(135,153,183,.2);color:#aebdd2;font:600 10px var(--font-body);letter-spacing:.02em;touch-action:none;user-select:none;-webkit-user-select:none}
  .video-library-pinch-zone span:first-child{color:#5ce1d1;font-size:15px;line-height:1}
  .video-player-resize{right:-1px;bottom:-1px;width:48px;height:48px;border-radius:12px 0 14px 0}
  .video-library-player-foot{padding-left:45px}
}
.video-library-player-head{touch-action:manipulation}
.video-player-size{font-size:16px}
@media(max-width:600px){
  .video-library-player-head{min-height:68px;padding:10px 11px;touch-action:manipulation}
  .video-library-player-controls{gap:5px}
  .video-player-control{width:42px;height:42px;border-radius:12px;font-size:22px}
  .video-player-size{font-size:18px}
  .video-player-resize{width:48px;height:48px;border-radius:13px 0 16px 0}
}
.vl-hero-mark{flex-basis:190px;width:190px;height:190px;padding:8px;overflow:hidden;transform:none}
.vl-hero-mark img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.12))}
.vl-hero-mark i{display:none}
.vl-browse-actions{display:flex;align-items:center;gap:9px}
.vl-admin-add-btn{flex:0 0 auto;min-height:44px;white-space:nowrap}
.vl-admin-card-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:9px}
.vl-admin-card-actions button{padding:5px 8px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--muted);font:600 10px var(--font-body);cursor:pointer}
.vl-admin-card-actions button:hover{border-color:var(--led-1);color:var(--led-1)}
.video-library-form-modal{width:min(620px,calc(100vw - 28px));max-height:min(90vh,820px);overflow-y:auto}
.video-library-form-modal>p{margin:5px 0 17px;font-size:12px;line-height:1.5}
.video-library-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.video-library-form-modal .field{margin-bottom:12px}
.video-library-form-modal input,.video-library-form-modal textarea,.video-library-form-modal select{width:100%;box-sizing:border-box}
@media(max-width:720px){.vl-hero-mark{flex-basis:112px;width:112px;height:112px}.vl-browse-actions{width:100%;align-items:stretch;flex-direction:column-reverse}.vl-admin-add-btn{width:100%}.vl-browse-actions .vl-search{width:auto}.video-library-form-grid{grid-template-columns:1fr;gap:0}}

.video-link-editor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.video-link-row{display:grid;grid-template-columns:minmax(145px,1fr) minmax(140px,1fr) minmax(170px,1.2fr) auto;gap:8px;margin:8px 0}
.video-link-row select{min-width:0;width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}
.video-link-row [data-link-remove]{min-width:38px;padding-inline:8px}
.vl-context-suggestion{margin:20px auto;max-width:1100px}
@media(max-width:720px){.video-link-row{grid-template-columns:1fr 1fr}.video-link-row [data-link-topic]{grid-column:1}.video-link-row [data-link-remove]{grid-column:2;grid-row:2;justify-self:end}.video-link-editor-head{align-items:flex-start}}
@media(max-width:600px){.vl-hero-mark{opacity:1}}

.sm-player{max-width:1180px;margin:0 auto;padding:8px 0 42px;color:var(--ink)}.sm-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}.sm-head h1{margin:8px 0 4px;font-size:clamp(25px,4vw,38px);letter-spacing:-.035em}.sm-head p{margin:0;color:var(--muted)}.sm-concept{margin-bottom:15px;padding:15px 18px;border:1px solid color-mix(in srgb,#ffd23d 38%,var(--border));border-radius:14px;background:color-mix(in srgb,#ffd23d 7%,var(--panel))}.sm-concept strong{color:#bd8510}.sm-concept p{margin:5px 0 0;color:var(--muted);font-size:14px;line-height:1.55}.sm-stage-card,.sm-card{min-width:0;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 12px 32px rgba(20,35,65,.07)}.sm-stage-card{overflow:hidden;padding:14px;background:linear-gradient(145deg,var(--panel),color-mix(in srgb,#ffd23d 4%,var(--panel)))}.sm-stage-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 11px;font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.sm-live{display:flex;align-items:center;gap:7px;letter-spacing:.03em}.sm-live i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 12px #4ade80;animation:sm-pulse 1.6s infinite}.sm-canvas{display:block;width:100%;height:auto;aspect-ratio:32/13;border-radius:12px;background:#0b1220}.sm-stage-caption{min-height:28px;padding:9px 4px 0;color:var(--muted);font-size:11px}.sm-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:14px;margin-top:14px}.sm-card{padding:clamp(15px,2.5vw,22px)}.sm-label{padding-bottom:12px;border-bottom:1px solid var(--border);font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.sm-controls{display:grid;gap:14px;padding:16px 0}.sm-range{display:grid;gap:7px}.sm-range>span{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.sm-range output{color:var(--ink);font:700 11px var(--font-mono)}.sm-range input{width:100%;height:7px;accent-color:#eab934;cursor:pointer}.sm-buttons{display:flex;gap:9px}.sm-buttons button{flex:1;min-height:42px}.sm-formula{display:block;overflow-wrap:anywhere;margin:14px 0;padding:12px;border-radius:11px;background:var(--panel-2);color:#b98616;font:700 12px/1.6 var(--font-mono)}.sm-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sm-stats>div{display:grid;gap:5px;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}.sm-stats span{color:var(--muted);font-size:10px}.sm-stats strong{font-size:14px}.sm-note{min-height:52px;margin:13px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.sm-footnote{margin:12px 2px;color:var(--muted);font-size:10px;line-height:1.5}html.dark-mode .sm-stage-card,html.dark-mode .sm-card{box-shadow:0 14px 35px rgba(0,0,0,.25)}@keyframes sm-pulse{50%{opacity:.45;box-shadow:0 0 3px #4ade80}}
@media(max-width:780px){.sm-grid{grid-template-columns:1fr}.sm-head{align-items:flex-start;flex-direction:column}.sm-head>.btn{width:100%}}
@media(max-width:480px){.sm-stage-card{padding:9px}.sm-canvas{aspect-ratio:1.25}.sm-stage-head{font-size:9px}.sm-stats{grid-template-columns:1fr 1fr}.sm-stats>div{padding:9px}.sm-stats strong{font-size:12px}.sm-buttons{flex-direction:column}}

.fl-player{max-width:1180px;margin:0 auto;padding:8px 0 42px;color:var(--ink)}.fl-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}.fl-head h1{margin:8px 0 4px;font-size:clamp(25px,4vw,38px);letter-spacing:-.035em}.fl-head p{margin:0;color:var(--muted)}.fl-concept{margin-bottom:15px;padding:15px 18px;border:1px solid color-mix(in srgb,#39c0ff 38%,var(--border));border-radius:14px;background:color-mix(in srgb,#39c0ff 7%,var(--panel))}.fl-concept strong{color:#0787bb}.fl-concept p{margin:5px 0 0;color:var(--muted);font-size:14px;line-height:1.55}.fl-stage,.fl-card{min-width:0;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 12px 32px rgba(20,35,65,.07)}.fl-stage{overflow:hidden;padding:14px;background:linear-gradient(145deg,var(--panel),color-mix(in srgb,#39c0ff 5%,var(--panel)))}.fl-stage-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 11px;font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.fl-live{display:flex;align-items:center;gap:7px;letter-spacing:.03em}.fl-live i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 12px #4ade80;animation:fl-pulse 1.4s infinite}.fl-canvas{display:block;width:100%;height:auto;aspect-ratio:32/13;border-radius:12px;background:#071827}.fl-caption{min-height:28px;padding:9px 4px 0;color:var(--muted);font-size:11px}.fl-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:14px;margin-top:14px}.fl-card{padding:clamp(15px,2.5vw,22px)}.fl-label{padding-bottom:12px;border-bottom:1px solid var(--border);font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.fl-controls{display:grid;gap:14px;padding:16px 0}.fl-range{display:grid;gap:7px}.fl-range>span{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.fl-range output{color:var(--ink);font:700 11px var(--font-mono)}.fl-range input{width:100%;height:7px;accent-color:#27b6ed;cursor:pointer}.fl-buttons{display:flex;gap:9px}.fl-buttons button{flex:1;min-height:42px}.fl-formula{display:block;overflow-wrap:anywhere;margin:14px 0;padding:12px;border-radius:11px;background:var(--panel-2);color:#0787bb;font:700 12px/1.6 var(--font-mono)}.fl-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fl-stats>div{display:grid;gap:5px;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}.fl-stats span{color:var(--muted);font-size:10px}.fl-stats strong{font-size:14px}.fl-note{min-height:52px;margin:13px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.fl-footnote{margin:12px 2px;color:var(--muted);font-size:10px;line-height:1.5}html.dark-mode .fl-stage,html.dark-mode .fl-card{box-shadow:0 14px 35px rgba(0,0,0,.25)}@keyframes fl-pulse{50%{opacity:.4;box-shadow:0 0 3px #4ade80}}
@media(max-width:780px){.fl-grid{grid-template-columns:1fr}.fl-head{align-items:flex-start;flex-direction:column}.fl-head>.btn{width:100%}}
@media(max-width:480px){.fl-stage{padding:9px}.fl-canvas{aspect-ratio:1.25}.fl-stage-head{font-size:9px}.fl-stats{grid-template-columns:1fr 1fr}.fl-stats>div{padding:9px}.fl-stats strong{font-size:12px}.fl-buttons{flex-direction:column}}

.th-player{max-width:1180px;margin:0 auto;padding:8px 0 42px;color:var(--ink)}.th-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}.th-head h1{margin:8px 0 4px;font-size:clamp(25px,4vw,38px);letter-spacing:-.035em}.th-head p{margin:0;color:var(--muted)}.th-concept{margin-bottom:15px;padding:15px 18px;border:1px solid color-mix(in srgb,#ff6b6b 38%,var(--border));border-radius:14px;background:color-mix(in srgb,#ff6b6b 7%,var(--panel))}.th-concept strong{color:#d74f4f}.th-concept p{margin:5px 0 0;color:var(--muted);font-size:14px;line-height:1.55}.th-stage,.th-card{min-width:0;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 12px 32px rgba(20,35,65,.07)}.th-stage{overflow:hidden;padding:14px;background:linear-gradient(145deg,var(--panel),color-mix(in srgb,#ff6b6b 5%,var(--panel)))}.th-stage-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 11px;font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.th-live{display:flex;align-items:center;gap:7px;letter-spacing:.03em}.th-live i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 12px #4ade80;animation:th-pulse 1.4s infinite}.th-canvas{display:block;width:100%;height:auto;aspect-ratio:32/13;border-radius:12px;background:#17121a}.th-caption{min-height:28px;padding:9px 4px 0;color:var(--muted);font-size:11px}.th-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:14px;margin-top:14px}.th-card{padding:clamp(15px,2.5vw,22px)}.th-label{padding-bottom:12px;border-bottom:1px solid var(--border);font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.th-controls{display:grid;gap:14px;padding:16px 0}.th-range{display:grid;gap:7px}.th-range>span{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.th-range output{color:var(--ink);font:700 11px var(--font-mono)}.th-range input{width:100%;height:7px;accent-color:#ff6b6b;cursor:pointer}.th-buttons{display:flex;gap:9px}.th-buttons button{flex:1;min-height:42px}.th-formula{display:block;overflow-wrap:anywhere;margin:14px 0;padding:12px;border-radius:11px;background:var(--panel-2);color:#dc5f5f;font:700 12px/1.6 var(--font-mono)}.th-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.th-stats>div{display:grid;gap:5px;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}.th-stats span{color:var(--muted);font-size:10px}.th-stats strong{font-size:14px}.th-note{min-height:52px;margin:13px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.th-footnote{margin:12px 2px;color:var(--muted);font-size:10px;line-height:1.5}html.dark-mode .th-stage,html.dark-mode .th-card{box-shadow:0 14px 35px rgba(0,0,0,.25)}@keyframes th-pulse{50%{opacity:.4;box-shadow:0 0 3px #4ade80}}
@media(max-width:780px){.th-grid{grid-template-columns:1fr}.th-head{align-items:flex-start;flex-direction:column}.th-head>.btn{width:100%}}
@media(max-width:480px){.th-stage{padding:9px}.th-canvas{aspect-ratio:1.25}.th-stage-head{font-size:9px}.th-stats{grid-template-columns:1fr 1fr}.th-stats>div{padding:9px}.th-stats strong{font-size:12px}.th-buttons{flex-direction:column}}

.su-player{max-width:1180px;margin:0 auto;padding:8px 0 42px;color:var(--ink)}.su-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}.su-head h1{margin:8px 0 4px;font-size:clamp(25px,4vw,38px);letter-spacing:-.035em}.su-head p{margin:0;color:var(--muted)}.su-concept{margin-bottom:15px;padding:15px 18px;border:1px solid color-mix(in srgb,#7cfc9a 38%,var(--border));border-radius:14px;background:color-mix(in srgb,#7cfc9a 7%,var(--panel))}.su-concept strong{color:#28894a}.su-concept p{margin:5px 0 0;color:var(--muted);font-size:14px;line-height:1.55}.su-stage,.su-card{min-width:0;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 12px 32px rgba(20,35,65,.07)}.su-stage{overflow:hidden;padding:14px;background:linear-gradient(145deg,var(--panel),color-mix(in srgb,#7cfc9a 5%,var(--panel)))}.su-stage-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 11px;font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.su-live{display:flex;align-items:center;gap:7px;letter-spacing:.03em}.su-live i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 12px #4ade80;animation:su-pulse 1.4s infinite}.su-canvas{display:block;width:100%;height:auto;aspect-ratio:32/13;border-radius:12px;background:#101a18}.su-caption{min-height:28px;padding:9px 4px 0;color:var(--muted);font-size:11px}.su-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:14px;margin-top:14px}.su-card{padding:clamp(15px,2.5vw,22px)}.su-label{padding-bottom:12px;border-bottom:1px solid var(--border);font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.su-controls{display:grid;gap:14px;padding:16px 0}.su-range{display:grid;gap:7px}.su-range>span{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.su-range output{color:var(--ink);font:700 11px var(--font-mono)}.su-range input{width:100%;height:7px;accent-color:#45c775;cursor:pointer}.su-buttons{display:flex;gap:9px}.su-buttons button{flex:1;min-height:42px}.su-formula{display:block;overflow-wrap:anywhere;margin:14px 0;padding:12px;border-radius:11px;background:var(--panel-2);color:#28894a;font:700 12px/1.6 var(--font-mono)}.su-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.su-stats>div{display:grid;gap:5px;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}.su-stats span{color:var(--muted);font-size:10px}.su-stats strong{font-size:14px}.su-note{min-height:52px;margin:13px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.su-footnote{margin:12px 2px;color:var(--muted);font-size:10px;line-height:1.5}html.dark-mode .su-stage,html.dark-mode .su-card{box-shadow:0 14px 35px rgba(0,0,0,.25)}@keyframes su-pulse{50%{opacity:.4;box-shadow:0 0 3px #4ade80}}
@media(max-width:780px){.su-grid{grid-template-columns:1fr}.su-head{align-items:flex-start;flex-direction:column}.su-head>.btn{width:100%}}
@media(max-width:480px){.su-stage{padding:9px}.su-canvas{aspect-ratio:1.25}.su-stage-head{font-size:9px}.su-stats{grid-template-columns:1fr 1fr}.su-stats>div{padding:9px}.su-stats strong{font-size:12px}.su-buttons{flex-direction:column}}

.bm-player{max-width:1180px;margin:0 auto;padding:8px 0 42px;color:var(--ink)}.bm-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}.bm-head h1{margin:8px 0 4px;font-size:clamp(25px,4vw,38px);letter-spacing:-.035em}.bm-head p{margin:0;color:var(--muted)}.bm-concept{margin-bottom:15px;padding:15px 18px;border:1px solid color-mix(in srgb,#ff5c8a 38%,var(--border));border-radius:14px;background:color-mix(in srgb,#ff5c8a 7%,var(--panel))}.bm-concept strong{color:#cf3768}.bm-concept p{margin:5px 0 0;color:var(--muted);font-size:14px;line-height:1.55}.bm-monitor,.bm-card{min-width:0;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 12px 32px rgba(20,35,65,.07)}.bm-monitor{overflow:hidden;padding:14px;background:linear-gradient(145deg,#07130f,#101b18)}.bm-monitor-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 12px;color:#a2c0b1;font:700 10px var(--font-mono);letter-spacing:.1em}.bm-monitor-head>span:first-child{display:flex;align-items:center;gap:8px}.bm-monitor-head i{width:8px;height:8px;border-radius:50%;background:#57ffae;box-shadow:0 0 10px #38ff9a;animation:bm-pulse 1.2s infinite}.bm-canvas{display:block;width:100%;height:auto;aspect-ratio:1000/430;border-radius:10px;background:#06130f}.bm-monitor-footer{display:flex;justify-content:space-between;gap:12px;padding:9px 4px 1px;color:#a2c0b1;font:11px var(--font-mono)}.bm-values{color:#57ffae}.bm-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:14px;margin-top:14px}.bm-card{padding:clamp(15px,2.5vw,22px)}.bm-label{padding-bottom:12px;border-bottom:1px solid var(--border);font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.bm-controls{display:grid;gap:14px;padding:16px 0}.bm-range{display:grid;gap:7px}.bm-range>span{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.bm-range output{color:var(--ink);font:700 11px var(--font-mono)}.bm-range input{width:100%;height:7px;accent-color:#ff5c8a;cursor:pointer}.bm-buttons{display:flex;flex-wrap:wrap;gap:8px}.bm-buttons button{flex:1 1 130px;min-height:42px}.bm-buttons [aria-pressed="true"]{border-color:#ff5c8a;background:color-mix(in srgb,#ff5c8a 14%,var(--panel));color:var(--ink)}.bm-formula{display:block;overflow-wrap:anywhere;margin:14px 0;padding:12px;border-radius:11px;background:var(--panel-2);color:#cf3768;font:700 12px/1.6 var(--font-mono)}.bm-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.bm-stats>div{display:grid;gap:5px;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}.bm-stats span{color:var(--muted);font-size:10px}.bm-stats strong{font-size:14px}.bm-note{min-height:52px;margin:13px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.bm-footnote{margin:12px 2px;color:var(--muted);font-size:10px;line-height:1.5}html.dark-mode .bm-monitor,html.dark-mode .bm-card{box-shadow:0 14px 35px rgba(0,0,0,.25)}@keyframes bm-pulse{50%{opacity:.4;box-shadow:0 0 3px #38ff9a}}
@media(max-width:780px){.bm-grid{grid-template-columns:1fr}.bm-head{align-items:flex-start;flex-direction:column}.bm-head>.btn{width:100%}}
@media(max-width:480px){.bm-monitor{padding:9px}.bm-monitor-head{align-items:flex-start;flex-direction:column;gap:7px;font-size:9px}.bm-canvas{aspect-ratio:1.25}.bm-monitor-footer{align-items:flex-start;flex-direction:column;font-size:10px}.bm-stats{grid-template-columns:1fr 1fr}.bm-stats>div{padding:9px}.bm-stats strong{font-size:12px}.bm-buttons{flex-direction:column}.bm-buttons button{flex-basis:auto}}

.pr-player{max-width:1180px;margin:0 auto;padding:8px 0 42px;color:var(--ink)}.pr-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}.pr-head h1{margin:8px 0 4px;font-size:clamp(25px,4vw,38px);letter-spacing:-.035em}.pr-head p{margin:0;color:var(--muted)}.pr-concept{margin-bottom:15px;padding:15px 18px;border:1px solid color-mix(in srgb,#c0a060 40%,var(--border));border-radius:14px;background:color-mix(in srgb,#c0a060 8%,var(--panel))}.pr-concept strong{color:#9a7631}.pr-concept p{margin:5px 0 0;color:var(--muted);font-size:14px;line-height:1.55}.pr-stage,.pr-card{min-width:0;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 12px 32px rgba(20,35,65,.07)}.pr-stage{overflow:hidden;padding:14px;background:linear-gradient(145deg,var(--panel),color-mix(in srgb,#c0a060 5%,var(--panel)))}.pr-stage-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 11px;font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.pr-live{display:flex;align-items:center;gap:7px;letter-spacing:.03em}.pr-live i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 12px #4ade80;animation:pr-pulse 1.4s infinite}.pr-canvas{display:block;width:100%;height:auto;aspect-ratio:32/13;border-radius:12px;background:#171714}.pr-caption{min-height:28px;padding:9px 4px 0;color:var(--muted);font-size:11px}.pr-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:14px;margin-top:14px}.pr-card{padding:clamp(15px,2.5vw,22px)}.pr-label{padding-bottom:12px;border-bottom:1px solid var(--border);font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--muted)}.pr-controls{display:grid;gap:14px;padding:16px 0}.pr-range{display:grid;gap:7px}.pr-range>span{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.pr-range output{color:var(--ink);font:700 11px var(--font-mono)}.pr-range input{width:100%;height:7px;accent-color:#c0a060;cursor:pointer}.pr-buttons{display:flex;gap:9px}.pr-buttons button{flex:1;min-height:42px}.pr-formula{display:block;overflow-wrap:anywhere;margin:14px 0;padding:12px;border-radius:11px;background:var(--panel-2);color:#9a7631;font:700 12px/1.6 var(--font-mono)}.pr-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pr-stats>div{display:grid;gap:5px;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}.pr-stats span{color:var(--muted);font-size:10px}.pr-stats strong{font-size:14px}.pr-note{min-height:52px;margin:13px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.pr-footnote{margin:12px 2px;color:var(--muted);font-size:10px;line-height:1.5}html.dark-mode .pr-stage,html.dark-mode .pr-card{box-shadow:0 14px 35px rgba(0,0,0,.25)}@keyframes pr-pulse{50%{opacity:.4;box-shadow:0 0 3px #4ade80}}
@media(max-width:780px){.pr-grid{grid-template-columns:1fr}.pr-head{align-items:flex-start;flex-direction:column}.pr-head>.btn{width:100%}}
@media(max-width:480px){.pr-stage{padding:9px}.pr-canvas{aspect-ratio:1.25}.pr-stage-head{font-size:9px}.pr-stats{grid-template-columns:1fr 1fr}.pr-stats>div{padding:9px}.pr-stats strong{font-size:12px}.pr-buttons{flex-direction:column}}
.courses-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.courses-heading-row .section-label{margin:0}.courses-downloads-link{flex:none}.account-downloads-shortcut{padding-top:0}.account-downloads-btn{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px}.account-downloads-btn>span:nth-child(2){display:grid;gap:3px;flex:1}.account-downloads-btn small{color:var(--muted);font-size:.76rem}.downloads-page{max-width:1050px;margin:0 auto;padding:12px 0 48px}.downloads-page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.downloads-page-head h1{margin:5px 0;font-size:clamp(1.6rem,4vw,2.25rem)}.downloads-page-head p{margin:0;color:var(--muted)}.downloads-kicker{font:700 .72rem var(--font-mono,monospace);letter-spacing:.13em;color:var(--led-1)}.downloads-course-list{display:grid;gap:14px}.downloads-course-card,.downloads-empty{padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 12px 32px rgba(20,35,65,.06)}.downloads-course-copy>span{color:var(--led-1);font:700 .72rem var(--font-mono,monospace);letter-spacing:.1em}.downloads-course-copy h2{margin:5px 0;font-size:1.2rem}.downloads-course-copy p{margin:0;color:var(--muted);font-size:.85rem}.downloads-course-card{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}.downloads-course-actions{display:flex;gap:8px}.downloads-topics{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;padding-top:12px;border-top:1px solid var(--border)}.downloads-topic{display:flex;align-items:center;gap:8px;min-height:42px;padding:9px 11px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2);color:var(--ink);text-align:left;cursor:pointer}.downloads-topic span{color:#159365;font-weight:800}.downloads-empty{text-align:center;max-width:540px;margin:50px auto;padding:32px 24px}.downloads-empty-icon{font-size:2rem}.downloads-empty h2{margin:8px 0}.downloads-empty p{color:var(--muted);line-height:1.55}.offline-pdf-frame{display:block;width:100%;height:min(78vh,1000px);border:0;background:#fff}.offline-pdf-note{padding:8px 12px;color:var(--muted);font-size:.8rem}.offline-downloads-cta{margin-left:10px;padding:5px 9px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:inherit;font-weight:750;cursor:pointer}.offline-banner{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}html.dark-mode .downloads-course-card,html.dark-mode .downloads-empty{border-color:color-mix(in srgb,var(--border) 80%,#d7e2ff 20%)}@media(max-width:600px){.courses-heading-row{align-items:center}.courses-downloads-link{padding:8px 10px;font-size:.82rem}.downloads-page-head{align-items:flex-start;flex-direction:column}.downloads-page-head>.btn{width:100%}.downloads-course-card{grid-template-columns:1fr}.downloads-course-actions{display:grid;grid-template-columns:1fr 1fr}.downloads-topics{grid-template-columns:1fr}.downloads-empty{margin:25px auto;padding:25px 18px}.offline-banner{padding:8px 12px;font-size:.78rem}.offline-downloads-cta{margin-left:2px}}

/* Quicky Code technology roadmap */
.qc-path-sections{display:grid;gap:29px;margin-top:28px}
.qc-path-group{min-width:0}
.qc-path-heading{margin:0 0 12px;padding:0 2px}
.qc-path-index{display:block;margin-bottom:5px;color:var(--accent,#00c9a7);font:700 10px/1.2 var(--font-mono,monospace);letter-spacing:.14em}
.qc-path-heading h2{margin:0 0 5px;color:var(--text,var(--ink));font:700 clamp(18px,2.5vw,23px)/1.2 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.025em}
.qc-path-heading p{max-width:680px;margin:0;color:var(--muted,#9aa3b2);font-size:13px;line-height:1.5}
.qc-lang-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.qc-lang-card{min-height:112px;align-items:flex-start;gap:13px;padding:15px;border-color:color-mix(in srgb,var(--border,#343948) 78%,var(--lang-accent) 22%);background:var(--card,var(--panel,#171a23));box-shadow:0 5px 15px rgba(10,20,35,.035)}
.qc-lang-card.is-live{border-left:3px solid var(--lang-accent)}
.qc-lang-card.is-locked{opacity:1}
.qc-lang-icon{width:46px;height:46px;padding:8px;border:1px solid color-mix(in srgb,var(--lang-accent) 22%,#dce2eb);border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;gap:3px;flex:0 0 46px}
.qc-lang-icon img{display:block;width:100%;height:100%;max-width:30px;max-height:30px;object-fit:contain}
.qc-lang-icon.is-generative-ai{padding:5px;border-color:#ded5ff;background:linear-gradient(145deg,#f7f3ff,#ece5ff)}
.qc-lang-icon.is-generative-ai img{width:34px;height:34px;max-width:34px;max-height:34px}
.qc-lang-icon.has-pair{padding:6px;gap:2px}

/* Account and offline-download icon polish */
.account-downloads-btn .account-shortcut-icon{width:21px;height:21px;color:var(--led-1)}
.account-downloads-btn .account-certificate-icon{color:var(--led-4,#a66cff)}
.account-downloads-btn .account-shortcut-arrow{width:16px;height:16px;margin:0;color:var(--muted)}
.courses-downloads-link .qf-icon{color:var(--led-1)}
.downloads-empty-icon .qf-icon{width:38px;height:38px;color:var(--led-1);stroke-width:1.7}
.qc-lang-icon.has-pair img{width:50%;max-width:19px;height:25px}
.qc-lang-body{min-width:0;align-self:stretch}
.qc-lang-title-row{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:4px}
.qc-lang-title-row h3{margin:0;color:var(--text,var(--ink));font:700 15px/1.25 "Space Grotesk",system-ui,sans-serif}
.qc-lang-body p{font-size:12px;line-height:1.45}
.qc-lang-status{flex:0 0 auto;padding:3px 7px;border:1px solid var(--border,#343948);border-radius:999px;color:var(--muted,#9aa3b2);font-size:9px;font-weight:750;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap}
.qc-lang-status.is-live{border-color:color-mix(in srgb,#18a77b 35%,var(--border));background:color-mix(in srgb,#18a77b 10%,var(--card,var(--panel)));color:#14875f}
.qc-lang-status.is-premium{border-color:#c9a96a;background:linear-gradient(135deg,#fff8e8,#f5e8c8);color:#76551a}
html.dark-mode .qc-lang-status.is-live{color:#57ddb1}
.qc-lang-card.is-premium{border-color:color-mix(in srgb,#d4ad64 44%,var(--border,#343948));box-shadow:0 5px 18px rgba(131,93,28,.08)}
.qc-premium-info-btn{border:1px solid #d7bd85;background:linear-gradient(135deg,#fffaf0,#f5ebd6);color:#6f501b;font-weight:700;white-space:nowrap}
.qc-premium-info-btn:hover{background:#f4e6c6}
html.dark-mode .qc-lang-status.is-premium{border-color:#8e7646;background:#3b3427;color:#f1d79e}
html.dark-mode .qc-lang-card.is-premium{border-color:color-mix(in srgb,#c9a45c 42%,var(--border,#343948));box-shadow:0 5px 18px rgba(0,0,0,.16)}
html.dark-mode .qc-premium-info-btn{border-color:#8e7646;background:#3b3427;color:#f1d79e}
.qc-premium-dialog{width:min(480px,calc(100vw - 32px));max-width:none;padding:0;border:1px solid var(--border,#d9dee8);border-radius:22px;background:var(--panel,#fff);color:var(--ink,#171a23);box-shadow:0 28px 90px rgba(0,0,0,.32)}
.qc-premium-dialog::backdrop{background:rgba(12,16,25,.62);backdrop-filter:blur(5px)}
.qc-premium-dialog-card{position:relative;padding:30px}
.qc-premium-close{position:absolute;top:15px;right:17px;width:36px;height:36px;border:1px solid var(--border,#d9dee8);border-radius:11px;background:var(--panel-2,#f3f5f9);color:var(--ink,#171a23);font-size:23px;line-height:1;cursor:pointer}
.qc-premium-kicker{display:block;margin-bottom:11px;color:#9a742e;font:750 11px/1.3 var(--font-mono,monospace);letter-spacing:.11em}
.qc-premium-dialog h2{max-width:340px;margin:0 0 10px;font:750 25px/1.15 "Space Grotesk",system-ui,sans-serif}
.qc-premium-dialog p{margin:0;color:var(--muted,#687184);font-size:14px;line-height:1.6}
.qc-premium-dialog-actions{display:flex;justify-content:flex-end;margin-top:23px}
html.dark-mode .qc-premium-dialog{border-color:#41495a;background:#1a1e28;color:#f5f7fb}
html.dark-mode .qc-premium-close{border-color:#41495a;background:#272c38;color:#f5f7fb}
html.dark-mode .qc-premium-dialog p{color:#abb3c3}
.qc-guided-module{display:grid;gap:18px;margin:20px 0 28px}
.qc-guided-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px;border:1px solid var(--border,#dfe3ea);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,#18bfa3 8%,var(--panel,#fff)),var(--panel,#fff))}
.qc-guided-heading h2{margin:0 0 7px;font:750 clamp(21px,3vw,28px)/1.15 "Space Grotesk",system-ui,sans-serif;color:var(--ink,#171a23)}
.qc-guided-heading p:not(.qc-lesson-kicker){max-width:68ch;margin:0;color:var(--muted,#687184);line-height:1.55}
.qc-guide-count,.qc-guide-project-state{flex:0 0 auto;padding:7px 10px;border:1px solid color-mix(in srgb,#12a88e 28%,var(--border,#dfe3ea));border-radius:999px;background:color-mix(in srgb,#12a88e 9%,var(--panel,#fff));color:#087d6c;font-size:11px;font-weight:750}
.qc-guide-list{display:grid;gap:10px}
.qc-guide-lesson{overflow:hidden;border:1px solid var(--border,#dfe3ea);border-radius:15px;background:var(--panel,#fff)}
.qc-guide-lesson>summary{display:flex;align-items:center;gap:12px;min-height:62px;padding:13px 16px;cursor:pointer;list-style:none}
.qc-guide-lesson>summary::-webkit-details-marker,.qc-guide-output>summary::-webkit-details-marker,.qc-guide-check>summary::-webkit-details-marker{display:none}
.qc-guide-lesson>summary::after{content:"＋";margin-left:auto;color:var(--muted,#687184);font-size:17px}
.qc-guide-lesson[open]>summary::after{content:"−"}
.qc-guide-number{display:grid;place-items:center;width:31px;height:31px;flex:0 0 31px;border-radius:10px;background:color-mix(in srgb,#12bfa3 13%,var(--panel,#fff));color:#078b78;font:750 11px var(--font-mono,monospace)}
.qc-guide-title{font-weight:750;color:var(--ink,#171a23)}
.qc-guide-time{color:var(--muted,#687184);font-size:11px;white-space:nowrap}
.qc-guide-lesson-body{display:grid;gap:13px;padding:0 18px 18px 59px;color:var(--muted,#687184);font-size:14px;line-height:1.6}
.qc-guide-lesson-body>p{margin:0}
.qc-guide-example{overflow:hidden;border:1px solid var(--border,#dfe3ea);border-radius:12px;background:color-mix(in srgb,var(--panel,#fff) 90%,#74829a 10%)}
.qc-guide-code-head{padding:8px 12px;border-bottom:1px solid var(--border,#dfe3ea);font:700 10px var(--font-mono,monospace);letter-spacing:.06em;text-transform:uppercase}
.qc-guide-example>pre,.qc-guide-output>pre{margin:0;padding:14px;overflow:auto;color:var(--ink,#171a23);font:13px/1.65 var(--font-mono,monospace);white-space:pre-wrap}
.qc-guide-takeaway{padding:11px 13px;border-left:3px solid #16b89d;border-radius:0 10px 10px 0;background:color-mix(in srgb,#12bfa3 7%,var(--panel,#fff))}
.qc-guide-check{border:1px solid color-mix(in srgb,#8b70e8 28%,var(--border,#dfe3ea));border-radius:11px;background:color-mix(in srgb,#8b70e8 5%,var(--panel,#fff))}
.qc-guide-check>summary{padding:11px 13px;color:var(--ink,#171a23);font-weight:700;cursor:pointer;list-style:none}
.qc-guide-check>summary::after{content:"Show answer";float:right;margin-left:12px;color:#7558cf;font-size:11px}
.qc-guide-check[open]>summary::after{content:"Hide answer"}
.qc-guide-check>div{padding:0 13px 12px;color:var(--muted,#687184);font-size:13px}
.qc-guide-check>div strong{color:var(--ink,#171a23)}
.qc-guide-check>div p{margin:5px 0 0}
.qc-guide-project{padding:20px;border:1px solid color-mix(in srgb,#13aa91 36%,var(--border,#dfe3ea));border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,#12bfa3 6%,var(--panel,#fff)),var(--panel,#fff))}
.qc-guide-project-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.qc-guide-project h3{margin:0 0 9px;color:var(--ink,#171a23);font:750 20px/1.2 "Space Grotesk",system-ui,sans-serif}
.qc-guide-project>p{margin:0 0 15px;color:var(--muted,#687184);font-size:13px;line-height:1.55}
.qc-guide-editor{display:block;width:100%;min-height:190px;margin:7px 0 10px;padding:14px;border:1px solid var(--border,#dfe3ea);border-radius:12px;background:#111722;color:#eff4fb;font:13px/1.65 var(--font-mono,monospace);resize:vertical;tab-size:4}
.qc-guide-run-help{align-self:center;color:var(--muted,#687184);font-size:11px}
.qc-guide-project-feedback{margin-top:12px;padding:11px 13px;border:1px solid #e4bd77;border-radius:11px;background:#fff8e8;color:#735318;font-size:13px;line-height:1.5}
.qc-guide-project-feedback.is-success{border-color:#8fd2b9;background:#effbf5;color:#166b4f}
.qc-guide-project-feedback.is-error{border-color:#e6aaa5;background:#fff3f2;color:#9a3832}
.qc-guide-project-output{margin-top:12px}
.qc-guide-project-output .qc-run-pre{max-height:220px;overflow:auto}
.qc-guide-source>summary{padding:12px 15px;border:1px dashed var(--border,#cfd5df);border-radius:12px;color:var(--muted,#687184);font-size:12px;font-weight:700;cursor:pointer}
.qc-guide-source[open]>summary{margin-bottom:12px}
html.dark-mode .qc-guided-heading,html.dark-mode .qc-guide-project{border-color:#394354;background:linear-gradient(140deg,#202b36,#191e28)}
html.dark-mode .qc-guide-heading h2,html.dark-mode .qc-guide-title,html.dark-mode .qc-guide-check>summary,html.dark-mode .qc-guide-check>div strong,html.dark-mode .qc-guide-project h3{color:#f2f5fa}
html.dark-mode .qc-guide-lesson,html.dark-mode .qc-guide-example{border-color:#394354;background:#1b202a}
html.dark-mode .qc-guide-code-head{border-color:#394354}
html.dark-mode .qc-guide-example>pre,html.dark-mode .qc-guide-output>pre{color:#e8edf5}
html.dark-mode .qc-guide-takeaway{background:#192e2d;color:#b8dcd5}
html.dark-mode .qc-guide-check{border-color:#55477d;background:#242138}
html.dark-mode .qc-guide-project-feedback{border-color:#725d34;background:#30291d;color:#f1d99e}
html.dark-mode .qc-guide-project-feedback.is-success{border-color:#356c59;background:#1b3029;color:#a4e4c7}
html.dark-mode .qc-guide-project-feedback.is-error{border-color:#754744;background:#342322;color:#f0b2ad}
@media(max-width:600px){.qc-guided-module{gap:13px;margin:15px 0 22px}.qc-guided-heading{display:block;padding:17px}.qc-guide-count{display:inline-block;margin-top:12px}.qc-guide-lesson>summary{gap:9px;min-height:58px;padding:11px}.qc-guide-lesson-body{padding:0 12px 14px;gap:11px;font-size:13px}.qc-guide-time{font-size:10px}.qc-guide-project{padding:15px}.qc-guide-project-heading{display:block}.qc-guide-project-state{display:inline-block;margin:2px 0 10px}.qc-guide-run-help{font-size:10px}.qc-guide-check>summary::after{float:none;display:block;margin:5px 0 0}}
.qc-lang-sequence{display:block;margin-top:7px;color:var(--muted,#9aa3b2);font:600 9px/1.3 var(--font-mono,monospace);letter-spacing:.035em;text-transform:uppercase}
.qc-lang-action{align-self:center}
.qc-lang-action .btn{min-height:38px;padding:8px 12px;white-space:nowrap;font-size:12px}
html.dark-mode .qc-lang-card{background:color-mix(in srgb,var(--panel,#171a23) 90%,#fff 3%);border-color:color-mix(in srgb,var(--border,#343948) 80%,#cbd5e1 20%)}
html.dark-mode .qc-lang-icon{border-color:#465066}
@media(max-width:600px){.qc-path-sections{gap:23px;margin-top:22px}.qc-path-heading{margin-bottom:10px}.qc-path-heading p{font-size:12px}.qc-lang-grid{grid-template-columns:1fr;gap:9px}.qc-lang-card{min-height:100px;padding:13px;gap:11px}.qc-lang-icon{width:42px;height:42px;flex-basis:42px}.qc-lang-title-row h3{font-size:14px}.qc-lang-body p{font-size:11px}.qc-lang-action .btn{padding:8px 10px;font-size:11px}}
@media(max-width:390px){.qc-lang-card{flex-wrap:wrap}.qc-lang-body{flex:1 1 calc(100% - 60px)}.qc-lang-action{width:100%;padding-left:53px}.qc-lang-action .btn{width:100%}.qc-lang-title-row{align-items:flex-start;flex-wrap:wrap}.qc-lang-status{margin-top:1px}}

/* Personalized course certificates */
.account-certificates-btn{margin-top:8px}
.certificate-page{max-width:1120px;margin:0 auto;padding:12px 0 54px}
.certificate-page-head,.certificate-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.certificate-page-head h1{margin:5px 0;font-size:clamp(1.65rem,4vw,2.35rem)}
.certificate-page-head p,.certificate-preview-heading p{margin:0;color:var(--muted);line-height:1.5}
.certificate-setup-note{margin:14px 0;padding:12px 15px;border:1px solid color-mix(in srgb,var(--warning) 45%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--warning) 8%,var(--panel));color:var(--ink);font-size:.86rem;line-height:1.5}.certificate-setup-note code{font-family:var(--font-mono,monospace);font-size:.82em}
.certificate-readiness{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start;padding:24px;border:1px solid color-mix(in srgb,var(--led-1) 30%,var(--border));border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--led-1) 8%,var(--panel)),var(--panel));box-shadow:0 16px 38px rgba(20,35,65,.06)}
.certificate-readiness-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:19px;background:color-mix(in srgb,var(--led-1) 12%,var(--panel));font-size:2rem}
.certificate-status-pill,.certificate-preview-label{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--warning) 50%,var(--border));border-radius:999px;color:color-mix(in srgb,var(--warning) 65%,var(--ink));font:700 .68rem var(--font-mono,monospace);letter-spacing:.08em}
.certificate-status-pill i{width:8px;height:8px;border-radius:50%;background:var(--warning);box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 16%,transparent)}
.certificate-readiness-copy h2{margin:12px 0 7px;font-size:1.28rem}.certificate-readiness-copy p{max-width:780px;margin:0;color:var(--muted);line-height:1.6}
.certificate-readiness-copy ul{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 12px;padding:0;list-style:none}.certificate-readiness-copy li{padding:9px 12px;border:1px solid var(--border);border-radius:11px;background:var(--panel);color:var(--muted);font-size:.83rem}.certificate-readiness-copy li b{color:var(--ink)}
.certificate-readiness-copy>small,.certificate-privacy-note{color:var(--muted);line-height:1.5}
.certificate-preview-section,.certificate-issued-list{margin-top:32px}.certificate-preview-heading h2,.certificate-issued-list>h2{margin:5px 0;font-size:1.25rem}.certificate-preview-heading p{max-width:690px;font-size:.88rem}.certificate-preview-label{flex:none;color:var(--muted)}
.certificate-sheet{--cert-navy:#12376d;--cert-blue:#087cc8;--cert-gold:#f4a51c;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;overflow:hidden;width:100%;aspect-ratio:1.414;min-height:560px;padding:3.4% 5.4%;border:2px solid var(--cert-navy);border-radius:8px;background:radial-gradient(ellipse at center,#fffef9 0%,#fffdf4 64%,#fff7df 100%);color:var(--cert-navy);box-shadow:0 18px 50px rgba(12,35,72,.12);text-align:center}
.certificate-sheet:before{position:absolute;z-index:-1;inset:12px;border:2px solid var(--cert-navy);content:"";clip-path:polygon(0 0,8% 0,10% 2%,90% 2%,92% 0,100% 0,100% 100%,92% 100%,90% 98%,10% 98%,8% 100%,0 100%)}
.certificate-sheet:after{position:absolute;z-index:-1;inset:20px;border:1px solid var(--cert-blue);content:"";clip-path:polygon(0 0,9% 0,11% 2%,89% 2%,91% 0,100% 0,100% 100%,91% 100%,89% 98%,11% 98%,9% 100%,0 100%)}
.certificate-corner{position:absolute;z-index:-1;width:130px;height:130px;border:14px double var(--cert-gold);opacity:.85;transform:rotate(45deg)}.certificate-corner-tl{top:-94px;left:-94px}.certificate-corner-br{right:-94px;bottom:-94px}
.certificate-brand{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:17%}.certificate-brand-lockup{display:flex;align-items:center;gap:10px}.certificate-brand-logo{width:clamp(46px,7.5vw,84px);height:clamp(46px,7.5vw,84px);object-fit:contain}.certificate-brand-lockup>span{font:700 clamp(1.55rem,3.6vw,2.7rem)/1 var(--font-display,sans-serif);letter-spacing:-.055em}.certificate-brand-lockup b{color:var(--cert-navy)}.certificate-brand-lockup strong{color:var(--cert-blue)}
.certificate-fox{position:absolute;right:2%;top:0;width:clamp(54px,10vw,120px);height:clamp(54px,10vw,120px);border:3px solid var(--cert-navy);border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 4px white,0 0 0 6px var(--cert-gold)}
.certificate-title-block{width:100%;margin:1.8% 0 .8%}.certificate-title-block h2{margin:0;font:700 clamp(1.4rem,4.1vw,3.25rem)/1.1 Georgia,"Times New Roman",serif;letter-spacing:.015em;text-transform:uppercase}
.certificate-divider{display:flex;align-items:center;justify-content:center;gap:12px;width:52%;margin:12px auto 0;color:var(--cert-blue)}.certificate-divider span{height:2px;flex:1;background:linear-gradient(90deg,var(--cert-blue),var(--cert-gold))}.certificate-divider b{font:700 1.25rem var(--font-mono,monospace)}
.certificate-presented,.certificate-for{margin:1.3% 0 .4%;font:1.1rem Georgia,"Times New Roman",serif}.certificate-student{max-width:88%;margin:0;font:700 clamp(1.35rem,3.5vw,2.7rem)/1.15 Georgia,"Times New Roman",serif;text-transform:uppercase;overflow-wrap:anywhere}.certificate-name-rule{width:61%;height:2px;margin:7px 0 0;background:var(--cert-gold)}
.certificate-course{max-width:90%;margin:0;font:700 clamp(1.1rem,3vw,2.3rem)/1.16 Georgia,"Times New Roman",serif;text-transform:uppercase;overflow-wrap:anywhere}.certificate-meta{display:grid;gap:5px;margin:1.4% 0 0;font:clamp(.72rem,1.5vw,1rem) Georgia,"Times New Roman",serif}
.certificate-footer{display:flex;flex:1;align-items:flex-end;justify-content:center;width:100%;min-height:95px;padding-bottom:.5%}.certificate-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:3px}.certificate-qr{display:block;width:clamp(58px,8vw,88px);height:auto;padding:4px;border:1px solid var(--cert-blue);border-radius:5px;background:#fff}.certificate-qr-placeholder{display:grid;place-items:center;width:clamp(58px,8vw,88px);aspect-ratio:1;border:2px solid var(--cert-blue);border-radius:6px;font-size:1.5rem}.certificate-qr-wrap small{font:700 .55rem var(--font-mono,monospace);letter-spacing:.06em}
.certificate-issued-by{position:absolute;bottom:5.3%;display:flex;align-items:center;justify-content:center;gap:13px;font:700 clamp(.78rem,1.45vw,1.05rem) Georgia,"Times New Roman",serif}.certificate-issued-by span{width:60px;height:1px;background:var(--cert-gold)}.certificate-circuit{position:absolute;color:#68b8dd;opacity:.22;font:700 1.6rem var(--font-mono,monospace);line-height:1.8}.certificate-circuit-left{left:3%;top:44%}.certificate-circuit-right{right:3%;top:43%}
.certificate-preview-stamp{position:absolute;top:58%;right:-38px;padding:7px 45px;transform:rotate(35deg);border:2px solid #b87d10;background:rgba(255,250,220,.9);color:#95620a;font:700 .6rem var(--font-mono,monospace);letter-spacing:.08em}
.certificate-issued-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:14px}.certificate-issued-card{padding:14px;border:1px solid var(--border);border-radius:17px;background:var(--panel);box-shadow:0 12px 32px rgba(20,35,65,.06)}.certificate-issued-card .certificate-sheet{min-height:480px;box-shadow:none}.certificate-print-btn{display:block;margin:12px auto 0}.certificate-privacy-note{margin-top:18px;font-size:.82rem}
.certificate-verify-card{max-width:640px;margin:8vh auto;padding:34px;border:1px solid var(--border);border-radius:22px;background:var(--panel);box-shadow:0 18px 46px rgba(20,35,65,.1);text-align:center}.certificate-verify-mark{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 16px;border-radius:50%;background:#e5f6ee;color:#13835c;font-size:2rem;font-weight:800}.certificate-verify-card.is-invalid .certificate-verify-mark{background:#fff0ed;color:#bd453d}.certificate-verify-card h1{margin:7px 0;font-size:1.8rem}.certificate-verify-card>p{color:var(--muted)}.certificate-verify-card dl{display:grid;gap:0;margin:24px 0;text-align:left}.certificate-verify-card dl>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--border)}.certificate-verify-card dt{color:var(--muted)}.certificate-verify-card dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
html.dark-mode .certificate-readiness,html.dark-mode .certificate-issued-card{border-color:color-mix(in srgb,var(--border) 75%,#c6d5f2 25%)}
@media(max-width:680px){.certificate-page-head,.certificate-preview-heading{align-items:flex-start;flex-direction:column}.certificate-page-head>.btn{width:100%}.certificate-readiness{grid-template-columns:1fr;padding:18px}.certificate-readiness-icon{width:52px;height:52px}.certificate-sheet{min-height:390px;padding:4%}.certificate-fox{right:0}.certificate-brand{min-height:16%}.certificate-brand-logo{width:clamp(34px,8vw,54px);height:clamp(34px,8vw,54px)}.certificate-brand-lockup{gap:5px}.certificate-brand-lockup>span{font-size:clamp(1.1rem,4.5vw,1.6rem)}.certificate-title-block h2{font-size:clamp(1rem,5.4vw,1.7rem)}.certificate-presented,.certificate-for{font-size:.82rem}.certificate-student{font-size:clamp(1rem,4.4vw,1.55rem)}.certificate-course{font-size:clamp(.9rem,3.8vw,1.4rem)}.certificate-meta{font-size:.63rem}.certificate-footer{min-height:70px}.certificate-issued-by{bottom:5%;font-size:.68rem}.certificate-issued-by span{width:28px}.certificate-preview-stamp{top:55%;right:-44px;font-size:.48rem}.certificate-verify-card{margin:30px 0;padding:25px 18px}.certificate-verify-card dl>div{align-items:flex-start;flex-direction:column;gap:4px}.certificate-verify-card dd{text-align:left}}
@page{size:A4 landscape;margin:0}
@media print{html,body{width:297mm!important;height:210mm!important;margin:0!important;background:#fff!important}body.printing-certificate *{visibility:hidden!important}body.printing-certificate .certificate-sheet[data-printing="true"],body.printing-certificate .certificate-sheet[data-printing="true"] *{visibility:visible!important}body.printing-certificate .certificate-sheet[data-printing="true"]{position:fixed!important;inset:0!important;width:297mm!important;height:210mm!important;min-height:0!important;aspect-ratio:auto!important;padding:12mm 16mm!important;border-radius:0!important;box-shadow:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}body.printing-certificate .certificate-sheet[data-printing="true"] .certificate-brand{min-height:17%}body.printing-certificate .certificate-sheet[data-printing="true"] .certificate-title-block h2{font-size:29pt}body.printing-certificate .certificate-sheet[data-printing="true"] .certificate-student{font-size:27pt}body.printing-certificate .certificate-sheet[data-printing="true"] .certificate-course{font-size:22pt}body.printing-certificate .certificate-sheet[data-printing="true"] .certificate-fox{width:27mm;height:27mm}body.printing-certificate .certificate-sheet[data-printing="true"] .certificate-qr{width:22mm}body.printing-certificate .certificate-sheet[data-printing="true"] .certificate-issued-by{font-size:11pt}}

/* Canva certificate artwork with variable student details and verification QR. */
.certificate-sheet{container-type:inline-size;display:block;aspect-ratio:3/2;min-height:0;padding:0;border:0;border-radius:4px;background:#fffdf7;box-shadow:0 18px 50px rgba(12,35,72,.12)}
.certificate-artwork{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:fill}
.certificate-student,.certificate-course,.certificate-meta,.certificate-qr-wrap{position:absolute;z-index:1;margin:0;color:#12376d;text-align:center}
.certificate-student{top:45.6%;left:13%;display:grid;place-items:center;width:74%;height:8.5%;font:700 clamp(14px,3.2cqw,42px)/1.1 Georgia,"Times New Roman",serif;text-transform:uppercase;overflow-wrap:anywhere}
.certificate-course{top:60.5%;left:12%;display:grid;place-items:center;width:76%;height:8%;font:700 clamp(12px,2.7cqw,36px)/1.1 Georgia,"Times New Roman",serif;text-transform:uppercase;overflow-wrap:anywhere}
.certificate-meta{top:71.6%;left:8%;display:grid;gap:3px;width:84%;font:clamp(8px,1.05cqw,15px)/1.15 Georgia,"Times New Roman",serif}.certificate-meta span{overflow-wrap:anywhere}
.certificate-qr-wrap{top:76.5%;left:50%;display:flex;flex-direction:column;align-items:center;gap:2px;transform:translateX(-50%)}
.certificate-qr{display:block;width:clamp(48px,6.4cqw,94px);height:auto;padding:3px;border:1px solid #087cc8;border-radius:3px;background:#fff}.certificate-qr-placeholder{display:grid;place-items:center;width:clamp(48px,6.4cqw,94px);aspect-ratio:1;border:1px solid #087cc8;border-radius:3px;background:#fff;font-size:1.2rem}.certificate-qr-wrap small{font:700 clamp(6px,.55cqw,9px)/1 var(--font-mono,monospace);letter-spacing:.04em}
.certificate-issued-card .certificate-sheet{min-height:0}
@media(max-width:680px){.certificate-student{font-size:clamp(11px,3.2cqw,20px)}.certificate-course{font-size:clamp(9px,2.7cqw,17px)}.certificate-meta{font-size:clamp(6px,1.05cqw,9px)}.certificate-qr,.certificate-qr-placeholder{width:clamp(38px,6.4cqw,60px)}}
@media print{body.printing-certificate .certificate-sheet[data-printing="true"]{inset:auto!important;top:6mm!important;left:0!important;width:297mm!important;height:198mm!important;aspect-ratio:3/2!important;padding:0!important;border-radius:0!important;box-shadow:none!important}body.printing-certificate .certificate-sheet[data-printing="true"] .certificate-student{font-size:27pt}body.printing-certificate .certificate-sheet[data-printing="true"] .certificate-course{font-size:22pt}body.printing-certificate .certificate-sheet[data-printing="true"] .certificate-meta{font-size:9pt}body.printing-certificate .certificate-sheet[data-printing="true"] .certificate-qr{width:19mm}}

/* Installation Hub */
.installation-hub-hero{--feature-accent:#13c8ef}.installation-hub-hero .vl-hero-mark{border-color:color-mix(in srgb,#13c8ef 45%,var(--border));box-shadow:0 18px 42px rgba(12,113,190,.22)}
.installation-hub-content{max-width:1120px;margin:0 auto 30px}.installation-hub-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 14px}.installation-hub-section-head h2{margin:6px 0;font-size:clamp(21px,3vw,28px)}.installation-hub-section-head p{max-width:620px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}.installation-hub-count{flex:none;padding:8px 11px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:11px;font-weight:700}
.installation-python-card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:17px;padding:20px;border:1px solid color-mix(in srgb,#13c8ef 26%,var(--border));border-radius:18px;background:linear-gradient(115deg,color-mix(in srgb,#13c8ef 5%,var(--panel)),var(--panel));box-shadow:0 12px 30px rgba(20,70,120,.07)}.installation-python-logo{display:grid;place-items:center;width:64px;height:64px;border:1px solid #d8e8f4;border-radius:17px;background:#fff}.installation-python-logo img{width:40px;height:40px;object-fit:contain}.installation-python-badges{display:flex;flex-wrap:wrap;gap:6px}.installation-badge{padding:5px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font:700 9px/1 var(--font-mono);letter-spacing:.05em}.installation-badge.is-ready{border-color:color-mix(in srgb,#13c8ef 35%,var(--border));background:color-mix(in srgb,#13c8ef 11%,var(--panel));color:color-mix(in srgb,#008eb5 75%,var(--ink))}.installation-python-copy h3{margin:8px 0 4px;font-size:21px}.installation-python-copy p{max-width:700px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}.installation-python-status{padding:9px 12px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2);color:var(--muted);font-size:11px;font-weight:750;white-space:nowrap}.installation-hub-note{display:flex;align-items:flex-start;gap:9px;margin:15px 2px 0;color:var(--muted);font-size:11px;line-height:1.5}.installation-hub-note span{flex:none}
html.dark-mode .installation-python-card{border-color:color-mix(in srgb,#13c8ef 34%,var(--border));box-shadow:0 12px 30px rgba(0,0,0,.2)}html.dark-mode .installation-python-logo{border-color:#dae7f1;background:#f7fbff}
@media(max-width:600px){.installation-hub-content{margin-bottom:20px}.installation-hub-section-head{align-items:flex-start;flex-direction:column;gap:10px}.installation-python-card{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:15px;border-radius:15px}.installation-python-logo{width:48px;height:48px;border-radius:13px}.installation-python-logo img{width:31px;height:31px}.installation-python-copy h3{font-size:18px}.installation-python-copy p{font-size:12px}.installation-python-status{grid-column:2;justify-self:start;margin-top:-4px}.installation-badge{font-size:8px}}
.python-installer-panel{margin-top:16px;padding:clamp(16px,3vw,26px);border:1px solid var(--border);border-radius:20px;background:var(--panel);box-shadow:0 12px 34px rgba(20,70,120,.07)}
.python-installer-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.python-installer-heading h3{margin:6px 0 0;font-size:clamp(20px,3vw,26px)}.python-installer-source{padding:7px 10px;border:1px solid color-mix(in srgb,#13c8ef 38%,var(--border));border-radius:999px;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap}
.python-os-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0 15px}.python-os-option{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:10px;border:1px solid var(--border);border-radius:13px;background:var(--panel-2);color:var(--ink);font-family:inherit;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;transition:border-color .16s,background .16s,transform .16s}.python-os-option:hover{border-color:#13b9db;transform:translateY(-1px)}.python-os-option.is-selected{border-color:#13b9db;background:color-mix(in srgb,#13c8ef 13%,var(--panel));box-shadow:inset 0 0 0 1px #13b9db;color:var(--ink)}.python-os-option span{font-size:18px}
.python-installer-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.python-select-field{display:grid;gap:7px;color:var(--muted);font-size:11px;font-weight:750}.python-select-field[hidden]{display:none}.python-select-field select{width:100%;min-height:44px;padding:9px 36px 9px 12px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2);color:var(--ink);font-family:inherit;font-size:13px;font-weight:600}.python-download-area{margin-top:15px}.python-download-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid color-mix(in srgb,#13c8ef 34%,var(--border));border-radius:14px;background:color-mix(in srgb,#13c8ef 6%,var(--panel))}.python-download-summary>div{display:grid;gap:4px;min-width:0}.python-download-summary strong{font-size:14px}.python-download-summary span{overflow-wrap:anywhere;color:var(--muted);font-size:11px}.python-download-button,.python-copy-command{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:10px 15px;border:0;border-radius:11px;background:#0868c9;color:#fff;text-decoration:none;font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer}.python-download-button:hover,.python-copy-command:hover{background:#0756a7;color:#fff}.python-download-button span{font-size:21px;line-height:12px}
.python-install-guide{margin-top:16px;padding:18px;border:1px solid var(--border);border-radius:15px;background:var(--panel-2)}.python-guide-title h4{margin:5px 0 10px;font-size:17px}.python-install-guide ol{display:grid;gap:9px;margin:0;padding-left:22px;color:var(--muted);font-size:13px;line-height:1.55}.python-install-guide li{padding-left:3px}.python-install-guide strong{color:var(--ink)}.python-install-guide code,.python-guide-tip code{padding:2px 5px;border:1px solid var(--border);border-radius:5px;background:var(--panel);color:var(--ink);font:600 12px/1.4 var(--font-mono)}.python-guide-tip{margin-top:13px;padding:11px 12px;border-left:3px solid #13b9db;border-radius:7px;background:color-mix(in srgb,#13c8ef 7%,var(--panel));color:var(--muted);font-size:12px;line-height:1.5}.python-linux-callout{display:grid;gap:5px;padding:13px;border:1px solid color-mix(in srgb,#13c8ef 34%,var(--border));border-radius:12px;background:color-mix(in srgb,#13c8ef 6%,var(--panel))}.python-linux-callout strong{font-size:13px}.python-linux-callout span{color:var(--muted);font-size:12px;line-height:1.45}.python-command-block{overflow-x:auto;margin:12px 0 10px;padding:13px;border:1px solid #27354b;border-radius:11px;background:#101722;color:#d5e8ff;font:12px/1.65 var(--font-mono);white-space:pre-wrap}.python-copy-command{min-height:39px;padding:9px 13px}.python-copy-status{margin-left:9px;color:var(--muted);font-size:11px}.python-guide-tip{overflow-wrap:anywhere}
html.dark-mode .python-installer-panel{box-shadow:0 12px 34px rgba(0,0,0,.2)}html.dark-mode .python-download-button,html.dark-mode .python-copy-command{background:#087ed0}html.dark-mode .python-download-button:hover,html.dark-mode .python-copy-command:hover{background:#1598e8}
@media(max-width:600px){.python-installer-panel{padding:15px;border-radius:16px}.python-installer-heading{align-items:flex-start;flex-direction:column;gap:9px}.python-installer-source{font-size:10px}.python-os-picker{gap:7px;margin:15px 0 12px}.python-os-option{min-height:44px;gap:5px;padding:8px 4px;font-size:12px}.python-os-option span{font-size:15px}.python-installer-options{grid-template-columns:1fr}.python-download-summary{align-items:stretch;flex-direction:column}.python-download-button{width:100%}.python-install-guide{padding:14px}.python-install-guide ol{font-size:12px}.python-copy-status{display:block;margin:8px 0 0}}
.installation-app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:14px}
.installation-python-card{display:flex;min-width:0;flex-direction:column;align-items:stretch;gap:14px;padding:15px;border-radius:17px}
.installation-python-card-head{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:11px}
.installation-python-logo{width:48px;height:48px;border-radius:13px}.installation-python-logo img{width:31px;height:31px}
.installation-python-copy h3{margin:5px 0 3px;font-size:18px}.installation-python-copy p{font-size:12px;line-height:1.4}
.installation-python-status{display:none}
.python-installer-panel{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.python-installer-heading{align-items:center}.python-installer-heading .vl-eyebrow{font-size:9px}.python-installer-source{padding:5px 7px;font-size:9px}
.python-os-picker{gap:5px;margin:10px 0}.python-os-option{min-height:42px;gap:4px;padding:7px 3px;border-radius:10px;font-size:11px}.python-os-option span{font-size:14px}
.python-installer-options{grid-template-columns:1fr;gap:8px}.python-select-field{gap:5px;font-size:10px}.python-select-field select{min-height:40px;padding:8px 28px 8px 9px;font-size:11px}
.python-download-area{margin-top:10px}.python-download-summary{align-items:stretch;flex-direction:column;gap:9px;padding:10px;border-radius:11px}.python-download-summary strong{font-size:12px}.python-download-summary span{font-size:10px}.python-download-button{width:100%;min-height:42px;padding:9px 12px;font-size:12px}
.python-linux-callout{padding:10px}.python-linux-callout strong{font-size:11px}.python-linux-callout span{font-size:10px}
.python-steps-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:40px;margin-top:9px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--ink);font-family:inherit;font-size:12px;font-weight:700;line-height:1.2;cursor:pointer}
.python-steps-toggle:hover{border-color:#13b9db;background:color-mix(in srgb,#13c8ef 8%,var(--panel))}
.python-install-guide{margin-top:10px;padding:12px;border-radius:12px}.python-install-guide[hidden]{display:none}.python-guide-title h4{font-size:14px}.python-install-guide ol{gap:7px;padding-left:18px;font-size:11px;line-height:1.5}.python-install-guide code,.python-guide-tip code{font-size:10px}.python-guide-tip{margin-top:10px;padding:9px;font-size:10px}.python-command-block{font-size:10px}.python-copy-command{width:100%;min-height:40px;font-size:11px}
html.dark-mode .python-installer-panel{box-shadow:none}
@media(max-width:900px){.installation-app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.installation-app-grid{grid-template-columns:1fr;gap:11px}.installation-python-card{padding:14px}.python-installer-heading{flex-direction:row;align-items:center}.python-os-option{font-size:12px}.python-select-field select{font-size:12px}.python-download-summary{padding:11px}.python-install-guide{padding:12px}}
.python-os-option img{flex:none;width:17px;height:17px;padding:2px;border-radius:4px;background:#fff;object-fit:contain}.installation-extra-card .installation-python-logo{overflow:hidden}.installation-extra-card .installation-python-logo img{width:32px;height:32px;object-fit:contain}.installation-extra-card .installation-python-copy h3{font-size:16px}.installation-extra-card .installation-python-copy p{min-height:34px}.installation-extra-card [data-hub-options]:not(:empty){margin-bottom:9px}

/* Compact section navigation: reveal each set of destinations on demand. */
.primary-section-nav{position:relative;top:auto;z-index:29;justify-content:center;gap:12px;overflow:visible;scroll-snap-type:none}
.primary-nav-group{position:relative;flex:0 0 auto}
.primary-nav-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:122px;min-height:38px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--ink);font:700 13px/1 var(--font-body);text-decoration:none;cursor:pointer;transition:background .16s,border-color .16s,color .16s,box-shadow .16s}
.primary-nav-trigger:hover,.primary-nav-trigger[aria-expanded="true"],.primary-nav-group.has-current-page .primary-nav-trigger{border-color:color-mix(in srgb,var(--led-1) 38%,var(--border));background:color-mix(in srgb,var(--led-1) 8%,var(--panel));color:var(--led-1)}
.primary-nav-trigger:focus-visible{outline:3px solid color-mix(in srgb,var(--led-1) 45%,transparent);outline-offset:2px}
.primary-nav-chevron{font-size:16px;line-height:.8;transition:transform .16s}
.primary-nav-trigger[aria-expanded="true"] .primary-nav-chevron{transform:rotate(180deg)}
.primary-nav-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:40;display:grid;grid-template-columns:1fr;gap:4px;width:max-content;min-width:220px;max-width:min(360px,calc(100vw - 24px));padding:8px;border:1px solid var(--border);border-radius:15px;background:var(--panel);box-shadow:0 16px 42px rgba(15,28,48,.2)}
.primary-nav-menu[hidden]{display:none!important}
.primary-nav-menu .primary-nav-link{justify-content:flex-start;min-height:42px;padding-inline:12px;font-size:13px}
.primary-nav-menu .primary-nav-link[aria-current="page"]{background:color-mix(in srgb,var(--led-1) 11%,var(--panel))}
@media(max-width:720px){.primary-section-nav{position:sticky;top:var(--mobile-topbar-height,62px);justify-content:space-between;gap:6px;min-height:50px;padding:5px 8px}.primary-nav-group{flex:1 1 0;min-width:0}.primary-nav-trigger{width:100%;min-width:0;min-height:42px;gap:clamp(3px,1.1vw,6px);padding-inline:clamp(5px,1.9vw,10px);font-size:clamp(10px,2.9vw,12px);white-space:nowrap}.primary-nav-menu{position:fixed;top:var(--primary-menu-top,112px);left:var(--primary-menu-left,12px);right:auto;transform:none;width:var(--primary-menu-width,min(460px,calc(100vw - 24px)));max-width:none;max-height:calc(100dvh - var(--primary-menu-top,112px) - 12px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:9px}.primary-nav-menu .primary-nav-link{min-width:0;white-space:normal;justify-content:flex-start;padding:8px 10px;font-size:12px}}
@media(max-width:380px){.primary-section-nav{gap:4px;padding-inline:6px}.primary-nav-trigger{gap:3px;padding-inline:4px;font-size:10px}.primary-nav-menu{grid-template-columns:1fr}}
@media(max-width:480px){.vl-video-grid{grid-template-columns:1fr}.vl-video-card h3{font-size:14px}.vl-video-card p{font-size:11px;min-height:0}.vl-card-kicker{font-size:8px}}
@media(max-width:600px){.vl-hero-mark{position:absolute;right:10px;top:12px;flex-basis:auto;width:clamp(74px,22vw,94px);height:auto;aspect-ratio:1;padding:4px;border-radius:19px;transform:none;opacity:1}.vl-hero-mark img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}.vl-hero-copy{padding-right:clamp(86px,25vw,108px)}}
@media(max-width:370px){.vl-hero-mark{width:72px}.vl-hero-copy{padding-right:82px}}
html.dark-mode .primary-nav-menu{box-shadow:0 18px 46px rgba(0,0,0,.5)}
.installation-badge.is-license{border-color:color-mix(in srgb,#df9d35 48%,var(--border));background:color-mix(in srgb,#df9d35 10%,var(--panel));color:color-mix(in srgb,#a86708 88%,var(--ink))}
.installation-python-logo.has-logo-error:after{content:attr(data-fallback);display:grid;place-items:center;width:100%;height:100%;color:#1769aa;font-size:15px;font-weight:850;letter-spacing:-.04em}
.installation-extra-card .installation-python-logo.is-wide-mark img{width:54px;height:auto;max-height:26px;object-fit:contain}
.installation-web-only-note{margin:9px 0;color:var(--muted);font-size:11px}
@media(max-width:600px){.installation-extra-card .installation-python-logo.is-wide-mark img{width:42px;max-height:22px}}
html.dark-mode .installation-badge.is-license{color:#f0bd63}
.installation-hub-admin-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.installation-hub-admin-actions .btn{min-height:38px;white-space:nowrap}.installation-extra-card>.vl-admin-card-actions{grid-column:1/-1;margin:0;padding-top:10px;border-top:1px solid var(--border)}.installation-hub-app-modal{max-width:760px}.installation-hub-app-modal fieldset{min-width:0}.installation-hub-app-modal textarea{width:100%;resize:vertical}.installation-hub-app-modal input[readonly]{opacity:.65}

/* Video Library refresh: clearer hierarchy, brighter cards, and compact phone browsing. */
.video-library-screen{max-width:1280px;margin:0 auto;padding:6px 0 32px}
.video-library-screen .vl-hero{max-width:none;min-height:238px;margin:0 0 18px;padding:clamp(23px,3.2vw,38px);border-color:color-mix(in srgb,#21c7bc 28%,var(--border));border-radius:22px;background:radial-gradient(ellipse at 86% 12%,color-mix(in srgb,#28d6c7 22%,transparent),transparent 39%),linear-gradient(125deg,color-mix(in srgb,var(--panel) 98%,#e4f7f5),color-mix(in srgb,var(--panel) 88%,#b5f2e9));box-shadow:0 16px 38px rgba(21,91,112,.09)}
.video-library-screen .vl-hero h1 span{color:#008f91}
.video-library-screen .vl-hero-mark{border-color:rgba(0,164,164,.24);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(224,255,249,.72));box-shadow:0 16px 38px rgba(16,102,120,.16)}
.video-library-screen .vl-collection-strip{max-width:none;gap:11px;margin:0 0 18px}
.video-library-screen .vl-collection-card{min-height:86px;border-color:color-mix(in srgb,var(--collection-color) 24%,var(--border));background:linear-gradient(120deg,color-mix(in srgb,var(--collection-color) 8%,var(--panel)),var(--panel) 74%);box-shadow:0 7px 18px rgba(30,48,95,.045)}
.video-library-screen .vl-collection-icon{background:color-mix(in srgb,var(--collection-color) 18%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--collection-color) 12%,transparent)}
.video-library-screen .vl-browse{max-width:none;padding:20px;border:1px solid color-mix(in srgb,var(--led-1) 14%,var(--border));border-radius:21px;background:color-mix(in srgb,var(--panel) 96%,#e8f5ff);box-shadow:0 12px 32px rgba(24,48,84,.055)}
.video-library-screen .vl-browse-head h2{font-size:25px}
.video-library-screen .vl-search{border-color:color-mix(in srgb,#4a93e8 24%,var(--border));background:var(--panel)}
.video-library-screen .vl-popular-shelf{border-color:color-mix(in srgb,#19b9b0 24%,var(--border));background:linear-gradient(115deg,color-mix(in srgb,#19b9b0 8%,var(--panel)),var(--panel) 70%)}
.video-library-screen .vl-video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.video-library-screen .vl-video-card{display:flex;flex-direction:column;border-color:color-mix(in srgb,#4a93e8 17%,var(--border));border-radius:16px;background:linear-gradient(160deg,var(--panel),color-mix(in srgb,#eaf6ff 25%,var(--panel)));box-shadow:0 8px 22px rgba(30,48,95,.065)}
.video-library-screen .vl-thumb{flex:none}
.video-library-screen .vl-video-card-body{display:flex;flex:1;flex-direction:column;align-items:stretch;padding:14px}
.video-library-screen .vl-video-card h3{display:-webkit-box;overflow:hidden;min-height:39px;margin:8px 0 5px;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.video-library-screen .vl-video-card p{display:-webkit-box;overflow:hidden;min-height:31px;margin-bottom:2px;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.45}
.video-library-screen .vl-watch-btn{margin-top:auto;padding:0 10px;background:linear-gradient(105deg,color-mix(in srgb,var(--led-1) 15%,var(--panel)),color-mix(in srgb,#328cf4 9%,var(--panel)));font-size:11px}
.video-library-screen .vl-watch-btn:hover{background:linear-gradient(105deg,var(--led-1),color-mix(in srgb,#328cf4 60%,var(--led-1)))}
.video-library-screen .vl-source-note{border-color:color-mix(in srgb,#4a93e8 16%,var(--border));background:color-mix(in srgb,#4a93e8 5%,var(--panel))}
html.dark-mode .video-library-screen .vl-hero{border-color:rgba(44,211,199,.23);background:radial-gradient(ellipse at 84% 15%,rgba(20,190,183,.17),transparent 40%),linear-gradient(125deg,#172333,#142b37 58%,#152535);box-shadow:0 17px 40px rgba(0,0,0,.2)}
html.dark-mode .video-library-screen .vl-hero h1 span{color:#4be0d2}
html.dark-mode .video-library-screen .vl-hero-mark{border-color:rgba(56,215,203,.28);background:linear-gradient(145deg,#1f3e4a,#182b3b)}
html.dark-mode .video-library-screen .vl-browse{background:linear-gradient(145deg,#151e2b,#172332 70%,#14212d);box-shadow:0 14px 36px rgba(0,0,0,.16)}
html.dark-mode .video-library-screen .vl-video-card{border-color:rgba(104,157,220,.22);background:linear-gradient(155deg,#1d2a3b,#192536 75%,#1b2939);box-shadow:0 10px 26px rgba(0,0,0,.16)}
html.dark-mode .video-library-screen .vl-watch-btn{background:linear-gradient(105deg,rgba(32,204,191,.14),rgba(63,137,237,.12))}
@media(max-width:900px){.video-library-screen .vl-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.video-library-screen{padding:2px 0 26px}.video-library-screen .vl-hero{min-height:202px;margin-bottom:12px;padding:19px;border-radius:19px}.video-library-screen .vl-collection-strip{gap:8px;margin-bottom:12px}.video-library-screen .vl-collection-card{min-height:74px;padding:10px}.video-library-screen .vl-collection-card strong{font-size:12px}.video-library-screen .vl-collection-card small{font-size:7px}.video-library-screen .vl-browse{padding:14px;border-radius:18px}.video-library-screen .vl-browse-head h2{font-size:21px}.video-library-screen .vl-popular-shelf{margin:11px 0;padding:11px}.video-library-screen .vl-popular-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.video-library-screen .vl-popular-group h3{font-size:11px}.video-library-screen .vl-subject-row,.video-library-screen .vl-filter-row{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding:0 1px 5px;scrollbar-width:none}.video-library-screen .vl-subject-row::-webkit-scrollbar,.video-library-screen .vl-filter-row::-webkit-scrollbar{display:none}.video-library-screen .vl-filter{flex:none;min-height:36px}.video-library-screen .vl-results-note{min-height:20px}.video-library-screen .vl-video-grid{grid-template-columns:1fr;gap:9px}.video-library-screen .vl-video-card{display:grid;grid-template-columns:minmax(116px,.39fr) minmax(0,1fr);align-items:stretch;border-radius:14px}.video-library-screen .vl-thumb{height:100%;min-height:132px;aspect-ratio:auto}.video-library-screen .vl-video-card-body{justify-content:center;min-width:0;padding:11px}.video-library-screen .vl-card-kicker{font-size:8px}.video-library-screen .vl-video-card h3{min-height:0;margin:5px 0 4px;font-size:13px}.video-library-screen .vl-video-card p{min-height:0;margin:0;font-size:10px}.video-library-screen .vl-watch-btn{min-height:36px;margin-top:8px;font-size:10px}.video-library-screen .vl-play-button{width:37px;height:37px}.video-library-screen .vl-source-note{margin-top:13px}}
@media(max-width:390px){.video-library-screen .vl-hero{padding:17px}.video-library-screen .vl-hero h1{font-size:clamp(25px,7.4vw,32px)}.video-library-screen .vl-hero-copy>p{font-size:12px}.video-library-screen .vl-hero-meta span{font-size:8px}.video-library-screen .vl-collection-card{gap:7px;padding:9px 7px}.video-library-screen .vl-collection-icon{flex-basis:32px;width:32px;height:32px;font-size:17px}.video-library-screen .vl-collection-card strong{font-size:11px}.video-library-screen .vl-collection-card em{font-size:8px}.video-library-screen .vl-browse{padding:11px}.video-library-screen .vl-video-card{grid-template-columns:minmax(104px,.39fr) minmax(0,1fr)}.video-library-screen .vl-video-card-body{padding:9px}.video-library-screen .vl-video-card h3{font-size:12px}.video-library-screen .vl-video-card p{font-size:9px}.video-library-screen .vl-watch-btn{min-height:34px;padding-inline:6px;font-size:9px}}
@media(max-width:350px){.video-library-screen .vl-popular-groups{grid-template-columns:1fr}.video-library-screen .vl-collection-card small{letter-spacing:.04em}.video-library-screen .vl-video-card{grid-template-columns:minmax(96px,.37fr) minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.video-library-screen .vl-video-card,.video-library-screen .vl-thumb img,.video-library-screen .vl-watch-btn{animation:none;transition:none}}
@media(max-width:600px){.installation-hub-admin-actions{width:100%;justify-content:flex-start}.installation-hub-app-modal{max-height:90vh;padding:18px}.installation-hub-app-modal .video-library-form-grid{grid-template-columns:1fr}}
.installation-hub-app-modal{max-width:790px;padding:clamp(18px,3vw,30px)}.installation-form-heading{display:flex;align-items:center;gap:15px;margin:0 0 22px;padding:0 0 18px;border-bottom:1px solid var(--border)}.installation-form-icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid color-mix(in srgb,#13c8ef 40%,var(--border));border-radius:15px;background:color-mix(in srgb,#13c8ef 11%,var(--panel));color:#087fa8;font-size:25px;font-weight:500}.installation-form-heading h2,.installation-form-heading h3{margin:3px 0 4px!important;font-size:22px!important;letter-spacing:-.035em}.installation-form-heading p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.installation-form-section{margin:0 0 18px;padding:17px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--panel-2) 42%,var(--panel))}.installation-form-section-title{display:flex;align-items:center;gap:11px;margin-bottom:15px}.installation-form-section-title>span{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid color-mix(in srgb,#13c8ef 45%,var(--border));border-radius:10px;background:color-mix(in srgb,#13c8ef 9%,var(--panel));color:#0784a9;font:750 11px var(--font-mono)}.installation-form-section-title div{display:grid;gap:2px}.installation-form-section-title strong{font-size:14px}.installation-form-section-title small,.installation-form-hint,.installation-hub-app-modal .field small{color:var(--muted);font-size:11px;line-height:1.45}.installation-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.installation-hub-app-modal .field{min-width:0;margin-bottom:13px}.installation-hub-app-modal .field>span{display:block;margin:0 0 6px;color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.025em}.installation-hub-app-modal .field>span em{font-style:normal;font-weight:500}.installation-hub-app-modal .field input,.installation-hub-app-modal .field textarea{min-height:43px;padding:10px 12px;border-radius:10px}.installation-hub-app-modal .field textarea{min-height:76px;font-family:var(--font-body);line-height:1.5}.installation-hub-app-modal .field input::placeholder,.installation-hub-app-modal .field textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent);font-size:12px}.installation-hub-app-modal .field small{display:block;margin-top:5px}.installation-platform-fields{min-width:0;margin:12px 0 0;padding:13px 14px 4px;border:1px solid var(--border);border-radius:13px;background:var(--panel)}.installation-platform-fields legend{display:flex;align-items:center;gap:8px;padding:0 7px;font-size:12px;font-weight:800}.installation-platform-dot{width:8px;height:8px;border-radius:50%;background:#18b8d0;box-shadow:0 0 0 4px color-mix(in srgb,#18b8d0 14%,transparent)}.installation-form-hint{margin:0 0 11px}.installation-order-row{display:flex;align-items:center;justify-content:space-between;gap:15px}.installation-order-row .field{width:120px;margin:0}.installation-order-row .field input{text-align:center}.installation-hub-app-modal .modal-actions{padding-top:15px;border-top:1px solid var(--border)}html.dark-mode .installation-form-icon,html.dark-mode .installation-form-section-title>span{color:#7be3f4}
@media(max-width:600px){.installation-form-heading{align-items:flex-start;gap:11px}.installation-form-icon{width:40px;height:40px;border-radius:12px}.installation-form-heading h2{font-size:19px!important}.installation-form-section{padding:13px}.installation-form-grid{grid-template-columns:1fr;gap:0}.installation-order-row{align-items:flex-start;flex-direction:column}.installation-order-row .field{width:100%}}
.installation-hub-search{display:grid;gap:6px;max-width:620px;margin:0 0 16px}.installation-hub-search>label{font-size:12px;font-weight:800;color:var(--ink)}.installation-hub-search-control{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 13px;border:1px solid var(--border);border-radius:13px;background:var(--panel);color:var(--muted);transition:border-color .18s,box-shadow .18s}.installation-hub-search-control:focus-within{border-color:#13b9db;box-shadow:0 0 0 3px color-mix(in srgb,#13b9db 16%,transparent)}.installation-hub-search-control>span{font-size:23px;line-height:1}.installation-hub-search-control input{width:100%;min-width:0;min-height:44px;padding:8px 0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:14px}.installation-hub-search-control input::placeholder{color:var(--muted)}.installation-hub-search-hint{color:var(--muted);font-size:11px;line-height:1.4}.installation-app-grid .installation-python-card.is-search-hidden{display:none!important}.installation-search-empty{grid-column:1/-1;padding:24px;border:1px dashed var(--border);border-radius:15px;color:var(--muted);text-align:center;font-size:14px}.installation-search-empty[hidden]{display:none!important}
@media(max-width:600px){.installation-hub-search{max-width:none;margin-bottom:12px}.installation-hub-search-control{min-height:46px}.installation-hub-search-control input{font-size:13px}}

/* Quicky Docs insert tools: keep the mobile ribbon organized and touch-friendly. */
.qd-insert-group{display:grid;gap:6px;min-width:0}
.qd-insert-label{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.qd-insert-element-actions{display:flex;align-items:center;gap:5px}
.qd-insert-upload-group .qd-upload-btn{justify-content:center}
@media(max-width:700px){
  .qd-ribbon-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;overflow:visible}
  .qd-ribbon-tabs button{min-width:0;padding:8px 3px;font-size:11px}
  #qdRibbonInsert.qd-ribbon-panel{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:13px;max-height:min(58dvh,460px);overflow-y:auto;overflow-x:hidden;padding:13px;border-radius:0 0 13px 13px;overscroll-behavior:contain}
  #qdRibbonInsert.qd-ribbon-panel[hidden]{display:none}
  #qdRibbonInsert .qd-ribbon-divider{display:none}
  #qdRibbonInsert .qd-insert-group{width:100%}
  #qdRibbonInsert .qd-logo-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%;max-width:none;overflow:visible}
  #qdRibbonInsert .qd-logo-choice{width:100%;min-width:0;max-width:none;min-height:49px;padding:7px 8px;white-space:normal}
  #qdRibbonInsert .qd-logo-choice img{width:30px;height:30px;flex:0 0 30px}
  #qdRibbonInsert .qd-logo-choice span{min-width:0;overflow-wrap:anywhere;text-align:left;font-size:10px;line-height:1.2}
  #qdRibbonInsert .qd-upload-btn{width:100%;min-height:46px}
  #qdRibbonInsert .qd-insert-element-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #qdRibbonInsert .qd-insert-element-actions .qd-tool-btn{min-height:44px;padding:8px 7px;border-color:var(--border);background:var(--panel-2);font-size:11px;line-height:1.2;text-align:center}
  #qdRibbonInsert .qd-image-tools{display:flex;gap:5px;padding:10px 0 0;border-top:1px solid var(--border);border-left:0}
  #qdRibbonInsert .qd-image-tools>span{width:100%;padding-bottom:3px}
  #qdRibbonInsert .qd-image-tools button{flex:1 0 40px;min-height:42px;border:1px solid var(--border);background:var(--panel-2)}
}
.arduino-lab-page{max-width:1440px;margin:0 auto;padding:8px 0 40px;color:var(--ink)}.arduino-lab-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}.arduino-lab-kicker{font:700 .72rem var(--font-mono,monospace);letter-spacing:.13em;color:#159365}.arduino-lab-head h1{margin:6px 0;font-size:clamp(1.65rem,4vw,2.35rem);letter-spacing:-.035em}.arduino-lab-head p{margin:0;color:var(--muted);line-height:1.5}.arduino-lab-open{flex:none}.arduino-lab-frame-wrap{overflow:hidden;min-height:560px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 12px 32px rgba(20,35,65,.08)}.arduino-lab-frame{display:block;width:100%;height:min(78vh,920px);min-height:560px;border:0;background:#fff}.arduino-lab-fallback{margin:10px 2px 16px;color:var(--muted);font-size:.85rem;line-height:1.5}.arduino-lab-fallback a{color:var(--led-1);font-weight:700;text-decoration:underline;text-underline-offset:2px}@media(max-width:700px){.arduino-lab-page{padding-top:2px}.arduino-lab-head{align-items:flex-start;flex-direction:column}.arduino-lab-open{width:100%;text-align:center}.arduino-lab-frame-wrap{min-height:68vh;border-radius:12px}.arduino-lab-frame{height:72vh;min-height:520px}.arduino-lab-fallback{font-size:.8rem}}html.dark-mode .arduino-lab-frame-wrap{box-shadow:0 14px 35px rgba(0,0,0,.25)}
.bb-quicky-guide{position:fixed;left:12px;top:12px;z-index:9994;width:min(340px,calc(100vw - 28px));padding:14px;border:1px solid color-mix(in srgb,#34dff5 42%,var(--border));border-radius:16px;background:var(--panel);color:var(--ink);box-shadow:0 14px 38px rgba(6,20,34,.3);transition:left .24s ease,top .24s ease}
.bb-quicky-guide[hidden]{display:none!important}
.bb-guide-heading{display:flex;align-items:center;gap:10px}.bb-guide-heading img{width:38px;height:38px;border-radius:50%;object-fit:cover}.bb-guide-heading div{display:grid;gap:3px;flex:1;min-width:0}.bb-guide-heading span{color:var(--led-1,#159365);font:800 9px var(--font-mono,monospace);letter-spacing:.1em}.bb-guide-heading strong{font-size:14px;line-height:1.25}.bb-guide-heading>button{align-self:flex-start;border:0;background:transparent;color:var(--muted);font-size:22px;cursor:pointer}.bb-quicky-guide>p{margin:11px 0;color:var(--muted);font-size:12px;line-height:1.55}.bb-guide-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:9px;border-top:1px solid var(--border)}.bb-guide-footer span{color:var(--muted);font-size:10px}.bb-guide-footer .btn{min-height:34px;padding:6px 10px;font-size:11px}
.quicky-root.bb-guide-following{z-index:9995;transition:left .28s ease,top .28s ease,right .28s ease,bottom .28s ease}
.bb-guide-target{position:relative;z-index:50!important;outline:3px solid #34dff5!important;outline-offset:5px;box-shadow:0 0 0 8px color-mix(in srgb,#34dff5 17%,transparent),0 0 22px color-mix(in srgb,#34dff5 48%,transparent)!important;transition:outline-color .18s ease,box-shadow .18s ease}
.bb-hole.is-tutor-focus{position:relative;z-index:2;outline:3px solid #34e4ff;outline-offset:2px;box-shadow:0 0 13px rgba(52,228,255,.68),inset 0 1px 2px rgba(0,0,0,.85)!important;animation:bb-tutor-pulse 1.15s ease-in-out infinite alternate}.bb-part.is-tutor-target{filter:drop-shadow(0 0 5px rgba(52,228,255,.95))}.bb-part.is-tutor-target .bb-wire{filter:drop-shadow(0 0 4px rgba(52,228,255,.95))}@keyframes bb-tutor-pulse{to{outline-color:#a1f5ff;box-shadow:0 0 18px rgba(52,228,255,.9),inset 0 1px 2px rgba(0,0,0,.85)!important}}
@media(max-width:600px){.bb-quicky-guide{left:12px;width:min(360px,calc(100vw - 24px));padding:12px}.bb-guide-heading img{width:34px;height:34px}.bb-guide-heading strong{font-size:13px}.bb-quicky-guide>p{font-size:11px}}
/* Code Debugger multiplayer mode */
.code-debugger-host-form{max-width:860px;margin:22px auto;padding:clamp(18px,3vw,30px);border:1px solid var(--border);border-radius:18px;background:var(--panel)}
.code-task-preview,.code-task-card{padding:20px;border:1px solid var(--border);border-radius:15px;background:color-mix(in srgb,var(--panel) 90%,#7667ff 10%)}
.code-task-preview h2,.code-task-card h2{margin:8px 0;font-size:1.3rem}
.code-task-preview p,.code-task-card p{line-height:1.65;color:var(--text)}
.code-task-preview pre{overflow:auto;padding:14px;border-radius:10px;background:#111827;color:#e5efff}
.code-task-example{color:var(--muted)!important;font-size:.92rem}
.code-pick-status{display:flex;align-items:center;gap:12px;margin:18px 0;padding:16px;border:1px solid color-mix(in srgb,#7667ff 35%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--panel) 88%,#7667ff 12%);font-weight:700}
.code-pick-status[hidden]{display:none}.code-pick-spinner{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#7667ff;color:#fff;animation:code-pick-pulse 1s ease-in-out infinite alternate}.code-pick-spinner.is-found{animation:none;background:#219653}.code-pick-spinner.is-error{animation:none;background:#c24138}
@keyframes code-pick-pulse{to{transform:rotate(180deg) scale(.85);opacity:.55}}
.code-task-eyebrow{font-size:.72rem;letter-spacing:.11em;font-weight:800;text-transform:uppercase;color:#7667ff}
.code-debugger-game,.code-debugger-results{max-width:1220px;margin:0 auto;padding:clamp(12px,2vw,24px)}
.code-debugger-game-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--panel)}
.code-debugger-game-head h1{margin:7px 0;font-size:clamp(1.45rem,3vw,2.2rem)}
.code-debugger-game-head p{margin:0;color:var(--muted)}
.code-game-clock{flex:0 0 auto;min-width:92px;padding:13px 16px;border-radius:14px;background:#171c2b;color:#fff;text-align:center;font:700 1.5rem ui-monospace,monospace}
.code-game-head-actions{display:flex;align-items:center;gap:10px}
.code-game-clock.is-urgent{color:#ff7068}
.code-debugger-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,310px);gap:18px;align-items:start}
.code-debugger-main{min-width:0;padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--panel)}
.code-editor-label{display:block;margin:20px 0 8px;font-weight:700}
.code-debugger-editor{display:block;width:100%;min-height:340px;resize:vertical;padding:16px;border:1px solid #333b4d;border-radius:12px;background:#101521;color:#edf3ff;font:14px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:4;white-space:pre;}
.code-debugger-editor:focus{outline:2px solid #7667ff;outline-offset:2px}
.code-editor-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.code-editor-actions>span,.code-game-note{color:var(--muted);font-size:.85rem}
.code-run-feedback{margin-top:14px;padding:13px 15px;border-radius:10px;background:#f2f4f8;color:var(--text);line-height:1.5}
.code-run-feedback.is-success{background:#e9f9ef;color:#176b36}.code-run-feedback.is-error{background:#fff0ee;color:#ad3028}
.code-game-note{line-height:1.5}
.code-end-round{margin-top:12px}
.code-debugger-standings{position:sticky;top:16px;padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--panel)}
.code-standings-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:12px}.code-standings-head>strong{font-size:.85rem}
.code-debugger-standings ol,.code-results-list{list-style:none;margin:0;padding:0}
.code-debugger-standings li{display:grid;grid-template-columns:26px 32px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 0;border-top:1px solid var(--border);font-size:.83rem}
.code-debugger-standings li img,.code-results-list img{width:32px;height:32px;border-radius:50%}.code-debugger-standings li strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.code-debugger-standings li>span:nth-of-type(2){grid-column:3}.code-debugger-standings li b{grid-column:4;grid-row:1/3;color:#6b59e8}
.code-rank{font-weight:800;color:var(--muted)}.code-debugger-standings .is-current-player{color:#634de4}
.code-debugger-standings>p{margin:14px 0 0;color:var(--muted);font-size:.82rem;line-height:1.5}
.code-results-hero{text-align:center;padding:30px 15px}.code-results-hero h1{margin:10px 0;font-size:clamp(1.7rem,4vw,2.6rem)}.code-results-hero p{color:var(--muted)}
.code-debugger-results>h2{font-size:1.1rem}.code-results-list li{display:grid;grid-template-columns:44px 40px minmax(120px,1fr) repeat(3,minmax(72px,auto));align-items:center;gap:12px;padding:13px;border:1px solid var(--border);border-bottom:0;background:var(--panel)}.code-results-list li:first-child{border-radius:12px 12px 0 0}.code-results-list li:last-child{border-bottom:1px solid var(--border);border-radius:0 0 12px 12px}.code-results-list li.is-winner{background:color-mix(in srgb,var(--panel) 88%,#ffe08a 12%)}.code-results-list li>b{color:#6b59e8}.code-results-list li>span{color:var(--muted);font-size:.85rem}
@media(max-width:760px){.code-debugger-columns{grid-template-columns:1fr}.code-debugger-standings{position:static}.code-debugger-editor{min-height:280px}.code-editor-actions{align-items:stretch;flex-direction:column}.code-editor-actions button{width:100%}.code-results-list li{grid-template-columns:28px 34px minmax(0,1fr) auto;gap:8px}.code-results-list li>span:nth-of-type(1){display:none}.code-results-list li>span:nth-of-type(2),.code-results-list li>span:nth-of-type(3){display:none}.code-results-list li>b{font-size:.82rem}.code-debugger-game-head{align-items:flex-start}}

/* Opportunity Hub */
.opportunity-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:26px;max-width:1180px;min-height:250px;margin:10px auto 22px;padding:clamp(25px,5vw,52px);overflow:hidden;border:1px solid color-mix(in srgb,#eaa322 24%,var(--border));border-radius:25px;background:radial-gradient(ellipse at 85% 30%,color-mix(in srgb,#f6bb4d 17%,transparent),transparent 48%),linear-gradient(125deg,color-mix(in srgb,var(--panel) 96%,#fff),color-mix(in srgb,#f1b13c 8%,var(--panel)));box-shadow:0 18px 44px rgba(35,42,55,.07)}
.opportunity-hero-copy{position:relative;z-index:1;max-width:720px}.opportunity-hero h1{margin:12px 0 9px;font-size:clamp(32px,5.2vw,54px);line-height:1.05;letter-spacing:-.055em}.opportunity-hero h1 span{color:#b87b12}.opportunity-hero p{max-width:620px;margin:0;color:var(--muted);font-size:clamp(14px,1.7vw,17px);line-height:1.6}.opportunity-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:21px}.opportunity-hero-meta span{padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--panel) 80%,transparent);color:var(--muted);font-size:11px;font-weight:700}.opportunity-hero-art{position:relative;display:grid;place-items:center;flex:0 0 176px;width:176px;height:176px;border:1px solid color-mix(in srgb,#eaa322 24%,var(--border));border-radius:50%;background:color-mix(in srgb,#eaa322 11%,var(--panel));box-shadow:inset 0 0 0 15px color-mix(in srgb,#eaa322 5%,transparent)}.opportunity-hero-art div{font-size:72px;filter:drop-shadow(0 10px 14px rgba(30,35,45,.15))}.opportunity-hero-art span,.opportunity-hero-art i,.opportunity-hero-art b{position:absolute;color:#d8951f}.opportunity-hero-art span{top:17px;right:27px;font-size:21px}.opportunity-hero-art i{bottom:24px;left:16px;width:8px;height:8px;border-radius:50%;background:#27bd9b;box-shadow:0 0 0 6px color-mix(in srgb,#27bd9b 17%,transparent)}.opportunity-hero-art b{top:43px;left:24px;width:10px;height:10px;border:2px solid currentColor;border-radius:3px;transform:rotate(45deg)}
.opportunity-content{max-width:1180px;margin:0 auto 48px}.opportunity-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:28px 2px 15px}.opportunity-toolbar h2{margin:4px 0;font-size:clamp(22px,3vw,30px);letter-spacing:-.035em}.opportunity-toolbar p{margin:0;color:var(--muted);font-size:13px}.opportunity-add{flex:none;min-height:42px}.opportunity-categories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.opportunity-category{display:flex;align-items:center;gap:11px;min-width:0;min-height:75px;padding:12px;border:1px solid var(--border);border-radius:15px;background:var(--panel);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .16s,background .16s,transform .16s}.opportunity-category:hover{transform:translateY(-2px);border-color:color-mix(in srgb,#eaa322 55%,var(--border))}.opportunity-category.is-active{border-color:color-mix(in srgb,#eaa322 68%,var(--border));background:color-mix(in srgb,#eaa322 9%,var(--panel));box-shadow:0 5px 18px color-mix(in srgb,#eaa322 9%,transparent)}.opportunity-category-icon{display:grid;place-items:center;flex:none;width:39px;height:39px;border-radius:12px;background:color-mix(in srgb,#eaa322 12%,var(--panel-2));font-size:18px}.opportunity-category>span:last-child{display:grid;gap:4px;min-width:0}.opportunity-category strong{font-size:12px;line-height:1.25}.opportunity-category small{color:var(--muted);font-size:10px}.opportunity-search-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0 12px}.opportunity-search-row .vl-search{width:min(540px,100%);min-height:44px}.opportunity-search-row .vl-search input{width:100%}.opportunity-search-hint{color:var(--muted);font-size:11px;text-align:right}.opportunity-list{display:grid;gap:11px}.opportunity-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(145px,auto);align-items:start;gap:15px;padding:17px;border:1px solid var(--border);border-radius:17px;background:var(--panel);box-shadow:0 7px 20px rgba(25,35,55,.035)}.opportunity-card.is-muted{opacity:.72}.opportunity-card-icon{display:grid;place-items:center;width:45px;height:45px;border:1px solid color-mix(in srgb,#eaa322 23%,var(--border));border-radius:14px;background:color-mix(in srgb,#eaa322 10%,var(--panel-2));font-size:20px}.opportunity-card-main{min-width:0}.opportunity-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.opportunity-card-category{color:#9d6a12;font:750 9px var(--font-mono,monospace);letter-spacing:.11em;text-transform:uppercase}.opportunity-status{padding:3px 7px;border-radius:999px;font-size:9px;font-weight:800}.opportunity-status.is-featured{background:color-mix(in srgb,#eaa322 17%,var(--panel));color:#9d6a12}.opportunity-status.is-paused{background:var(--panel-2);color:var(--muted)}.opportunity-status.is-expired{background:color-mix(in srgb,#eb6a5d 13%,var(--panel));color:#bf443a}.opportunity-card h3{margin:8px 0 3px;font-size:17px;line-height:1.3;letter-spacing:-.025em}.opportunity-org{color:var(--muted);font-size:12px;font-weight:700}.opportunity-card-main>p{max-width:760px;margin:9px 0 10px;color:var(--muted);font-size:12px;line-height:1.55;white-space:pre-line}.opportunity-card-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:10px}.opportunity-card-actions{display:flex;align-items:flex-end;flex-direction:column;gap:8px;min-width:145px}.opportunity-open{min-height:39px;white-space:nowrap}.opportunity-source{color:var(--muted);font-size:10px;text-decoration:none}.opportunity-source:hover{color:var(--led-1);text-decoration:underline}.opportunity-closed{padding:10px 0;color:var(--muted);font-size:11px;text-align:right}.opportunity-card-actions .vl-admin-card-actions{margin-top:3px}.opportunity-empty{display:grid;justify-items:center;gap:7px;max-width:540px;margin:12px auto;padding:35px 20px;border:1px dashed var(--border);border-radius:18px;background:color-mix(in srgb,var(--panel-2) 40%,var(--panel));text-align:center}.opportunity-empty>span{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:color-mix(in srgb,#eaa322 12%,var(--panel));color:#b87b12;font-size:22px}.opportunity-empty h3{margin:5px 0 0;font-size:17px}.opportunity-empty p{margin:0 0 8px;color:var(--muted);font-size:12px;line-height:1.5}.opportunity-disclaimer{margin:14px 2px;color:var(--muted);font-size:10px;line-height:1.5}.opportunity-alert{display:flex;flex-direction:column;gap:4px;max-width:1180px;margin:0 auto 16px;padding:12px 15px;border:1px solid color-mix(in srgb,#eaa322 35%,var(--border));border-radius:12px;background:color-mix(in srgb,#eaa322 8%,var(--panel));font-size:12px}.opportunity-alert span{color:var(--muted)}.opportunity-form-modal{max-width:660px;max-height:min(90vh,850px);overflow:auto}.opportunity-form-modal>p{color:var(--muted);font-size:12px;line-height:1.5}.opportunity-form-modal .field{min-width:0;margin-bottom:11px}.opportunity-form-modal .field label{display:block;margin:0 0 6px;color:var(--muted);font-size:11px;font-weight:750}.opportunity-form-modal .field input,.opportunity-form-modal .field textarea,.opportunity-form-modal .field select{box-sizing:border-box;width:100%;min-height:42px}.opportunity-form-modal .field textarea{resize:vertical}.opportunity-form-modal .modal-actions{position:sticky;bottom:-22px;padding:12px 0;background:var(--panel)}
@media(max-width:900px){.opportunity-categories{grid-template-columns:repeat(3,minmax(0,1fr))}.opportunity-category:first-child{grid-column:span 3}}
@media(max-width:650px){.opportunity-hero{min-height:0;margin:4px auto 18px;padding:23px 19px;border-radius:19px}.opportunity-hero-art{flex-basis:94px;width:94px;height:94px}.opportunity-hero-art div{font-size:43px}.opportunity-hero-art span{top:7px;right:15px}.opportunity-hero-art b{top:22px;left:12px}.opportunity-hero-art i{bottom:12px;left:9px}.opportunity-hero-meta{gap:6px;margin-top:15px}.opportunity-hero-meta span{font-size:9px}.opportunity-toolbar{align-items:flex-start;flex-direction:column}.opportunity-add{width:100%}.opportunity-categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.opportunity-category{min-height:67px;padding:9px;gap:8px}.opportunity-category:first-child{grid-column:span 2}.opportunity-category-icon{width:34px;height:34px;font-size:16px}.opportunity-category strong{font-size:11px}.opportunity-search-row{align-items:stretch;flex-direction:column}.opportunity-search-hint{text-align:left}.opportunity-card{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:13px}.opportunity-card-icon{width:39px;height:39px}.opportunity-card h3{font-size:15px}.opportunity-card-actions{grid-column:2;align-items:flex-start;min-width:0}.opportunity-closed{text-align:left}.opportunity-form-modal .video-library-form-grid{grid-template-columns:1fr;gap:0}}
@media(max-width:390px){.opportunity-hero-art{display:none}.opportunity-category{align-items:flex-start;flex-direction:column;min-height:92px}.opportunity-category:first-child{align-items:center;flex-direction:row;min-height:60px}.opportunity-card-meta{gap:6px 10px}}

.opportunity-card-icon{position:relative;overflow:hidden}.opportunity-card-icon.has-image{background:var(--panel);padding:3px}.opportunity-card-icon .opportunity-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:11px;background:var(--panel)}.opportunity-card-icon.has-image>span{display:none}

.opportunity-card-icon{width:64px;height:64px}.opportunity-card-icon.has-image{padding:3px}.opportunity-card-icon .opportunity-image{border-radius:11px}
@media(max-width:650px){.opportunity-card-icon{width:50px;height:50px}}

.opportunity-calendar{position:relative;align-self:flex-end;width:max-content;max-width:100%;z-index:2}
.opportunity-calendar summary{display:flex;align-items:center;justify-content:center;min-height:36px;padding:0 11px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--ink);font-size:11px;font-weight:750;cursor:pointer;list-style:none;white-space:nowrap}
.opportunity-calendar summary::-webkit-details-marker{display:none}
.opportunity-calendar summary::after{content:"▾";margin-left:8px;color:var(--muted);font-size:10px}
.opportunity-calendar[open] summary{border-color:color-mix(in srgb,#eaa322 58%,var(--border));background:color-mix(in srgb,#eaa322 8%,var(--panel))}
.opportunity-calendar summary:focus-visible,.opportunity-calendar-menu a:focus-visible,.opportunity-calendar-menu button:focus-visible{outline:2px solid #eaa322;outline-offset:2px}
.opportunity-calendar-menu{position:absolute;top:calc(100% + 6px);right:0;display:grid;gap:3px;min-width:185px;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:0 12px 30px rgba(20,28,42,.18)}
.opportunity-calendar-menu a,.opportunity-calendar-menu button{display:block;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:11px;text-align:left;text-decoration:none;cursor:pointer}
.opportunity-calendar-menu a:hover,.opportunity-calendar-menu button:hover{background:var(--panel-2)}
.opportunity-calendar-note{padding:5px 10px 7px;color:var(--muted);font-size:10px;line-height:1.4}
.opportunity-calendar-hint{display:block;margin-top:6px;color:var(--muted);font-size:10px;line-height:1.45}
@media(max-width:650px){.opportunity-calendar{align-self:flex-start}.opportunity-calendar-menu{right:auto;left:0}}

/* Illustrated 2D scenery across all Spanish journey worlds. */
.ql-path-world{isolation:isolate;min-height:620px}
.ql-path-world::after{display:none}
.ql-path-world.ql-world-forest{background:linear-gradient(145deg,#e8f5db,#d9edce 58%,#e8f1cd)}
.ql-path-world.ql-world-home{background:linear-gradient(145deg,#fbf3dc,#f5eaca 56%,#eee3be)}
.ql-path-world.ql-world-town{background:linear-gradient(145deg,#e7f4f5,#d9eded 55%,#e4efdf)}
.ql-path-scenery{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none;opacity:.78}
.ql-path-scenery svg{display:block;width:100%;height:100%;overflow:hidden}
.ql-path-world-head,.ql-path-stones{z-index:1}
.ql-path-world-head{padding:7px 10px;border-radius:16px;background:rgba(250,255,246,.72);backdrop-filter:blur(5px)}
.ql-world-home .ql-path-world-head{background:rgba(255,251,235,.76)}
.ql-world-town .ql-path-world-head{background:rgba(244,252,252,.76)}
.ql-path-stones::before{display:none}
.sp-hill-back{fill:#d8e9bb}.sp-hill-one{fill:url(#spForestHill);opacity:.67}.sp-hill-two{fill:url(#spForestHillNear);opacity:.72}
.sp-route-shadow{fill:none;stroke:#927d53;stroke-width:32;stroke-linecap:round;opacity:.28;transform:translateY(6px)}
.sp-route-edge{fill:none;stroke:#b1965e;stroke-width:28;stroke-linecap:round;opacity:.7}
.sp-route-fill{fill:none;stroke:#ead49b;stroke-width:21;stroke-linecap:round}
.sp-route-shine{fill:none;stroke:#fff1ca;stroke-width:2.5;stroke-linecap:round;opacity:.8}
.sp-river-bank{fill:none;stroke:#f1fffa;stroke-width:39;stroke-linecap:round;opacity:.86}
.sp-river{fill:none;stroke:url(#spRiver);stroke-width:29;stroke-linecap:round}
.sp-water-shine{fill:none;stroke:#e3fff8;stroke-width:3;stroke-linecap:round;opacity:.78}
.sp-bridge-shadow{fill:#725739;opacity:.35;transform:translateY(6px)}
.sp-bridge{fill:#b77e49;stroke:#835a36;stroke-width:2}.sp-bridge-deck{fill:#e5c17e;stroke:#f6dfad;stroke-width:1}
.sp-bridge-lines{fill:none;stroke:#9a7045;stroke-width:2;stroke-linecap:round}
.sp-pine ellipse,.sp-leaves ellipse:first-child,.sp-home-house ellipse,.sp-home-plant ellipse:first-child,.sp-cafe ellipse,.sp-town-tree ellipse:first-child{fill:#527744;opacity:.2}
.sp-pine path:nth-of-type(1){fill:#456f3e}.sp-pine path:nth-of-type(2){fill:#78a653}.sp-pine path:nth-of-type(3){fill:#c1d98b;opacity:.75}.sp-pine path:nth-of-type(4){fill:#906543}
.sp-pine-two{opacity:.92}.sp-leaves circle{fill:#6d984e}.sp-leaves circle:nth-of-type(2){fill:#86ad5c}.sp-leaves ellipse:last-child{fill:#d6e8a0;opacity:.58}
.sp-flower circle{fill:#f4c961;stroke:#fff5c9;stroke-width:1}.sp-flower circle:nth-of-type(5n){fill:#fff0ae;stroke:none}
.sp-home-ground{fill:url(#spHomeGround)}.sp-home-garden{fill:#e7d9a7}.sp-home-lawn{fill:#d5dc91;opacity:.82}
.sp-home-house .house-wall{fill:#f4d9a5;stroke:#bd8b57;stroke-width:2}.sp-home-house .house-roof{fill:url(#spHomeRoof);stroke:#974f42;stroke-width:2;stroke-linejoin:round}.sp-home-house .house-door{fill:#91654a}.sp-home-house .house-window{fill:#91cbd0;stroke:#fff3d4;stroke-width:3}.sp-home-house .house-chimney{fill:#ba6250;stroke:#974f42;stroke-width:2}
.sp-home-plant path{fill:#749a4d;stroke:#577b3c;stroke-width:2;stroke-linecap:round}.sp-home-stone{fill:#c4b48c;stroke:#ad9a72;stroke-width:2}.sp-home-flower{fill:#edbd50;stroke:#fff0b6;stroke-width:2}
.sp-town-sky{fill:url(#spTownSky)}.sp-town-hill{fill:#bbd99b}.sp-town-road-bed{fill:#b49366}.sp-town-road{fill:url(#spTownRoad)}.sp-town-road-line{fill:none;stroke:#fff3d0;stroke-width:3;stroke-dasharray:14 12;stroke-linecap:round}
.sp-cafe .cafe-wall{fill:#f2dfb5;stroke:#bb9461;stroke-width:2}.sp-cafe .cafe-roof{fill:#c77c57;stroke:#a65d43;stroke-width:2}.sp-cafe .cafe-awning{fill:#e9a16e;stroke:#c47855;stroke-width:1}.sp-cafe .cafe-door{fill:#8b6650}.sp-cafe .cafe-window{fill:#91cbd0;stroke:#fff2d3;stroke-width:2}.sp-cafe .cafe-sign{fill:#fff3d3;stroke:#bf8257;stroke-width:2}.sp-cafe .cafe-signtext{fill:none;stroke:#ba684c;stroke-width:3;stroke-linecap:round}
.sp-town-tree>path{fill:#866545}.sp-town-tree>circle{fill:#71a258}.sp-town-tree>circle:nth-of-type(2){fill:#8ab968}.sp-town-tree>ellipse:last-child{fill:#c4dda0;opacity:.72}.sp-town-lamp{fill:none;stroke:#6c7f68;stroke-width:4;stroke-linecap:round}.sp-town-cloud{fill:#fff;opacity:.7}
.ql-world-forest .ql-path-stone,.ql-world-home .ql-path-stone,.ql-world-town .ql-path-stone{transform:perspective(700px) rotateX(1deg);border-color:#c7b995;box-shadow:0 2px 0 #d6c9a9,0 6px 0 #aa9a78,0 12px 20px rgba(49,73,43,.17),inset 0 2px 0 rgba(255,255,255,.95),inset 0 -3px 5px rgba(133,115,76,.12)}
.ql-world-forest .ql-path-stone::before,.ql-world-home .ql-path-stone::before,.ql-world-town .ql-path-stone::before{position:absolute;inset:1px 1px 45%;border-radius:24px 20px 18px 16px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0));content:"";pointer-events:none}
.ql-world-forest .ql-path-stone>*,.ql-world-home .ql-path-stone>*,.ql-world-town .ql-path-stone>*{position:relative;z-index:1}
.ql-world-forest .ql-path-stone:hover:not(:disabled),.ql-world-home .ql-path-stone:hover:not(:disabled),.ql-world-town .ql-path-stone:hover:not(:disabled){transform:perspective(700px) rotateX(1deg) translateY(-3px);box-shadow:0 2px 0 #d6c9a9,0 8px 0 #aa9a78,0 17px 24px rgba(49,73,43,.2),inset 0 2px 0 rgba(255,255,255,.95)}
.ql-world-forest .ql-path-stone-mark,.ql-world-home .ql-path-stone-mark,.ql-world-town .ql-path-stone-mark{background:linear-gradient(145deg,#fffef8,#e3ddc8);border-color:#c2b796;box-shadow:inset 0 2px 2px rgba(255,255,255,.95),inset 0 -3px 4px rgba(111,98,68,.15),0 2px 2px rgba(67,72,46,.13)}
.ql-world-forest .ql-path-stone.is-next,.ql-world-home .ql-path-stone.is-next,.ql-world-town .ql-path-stone.is-next{box-shadow:0 0 0 5px rgba(237,180,74,.18),0 2px 0 #d6c9a9,0 7px 0 #a98c53,0 15px 24px rgba(49,73,43,.22),inset 0 2px 0 rgba(255,255,255,.95)}
.ql-world-forest .ql-path-stone.is-done .ql-path-stone-mark,.ql-world-home .ql-path-stone.is-done .ql-path-stone-mark,.ql-world-town .ql-path-stone.is-done .ql-path-stone-mark{background:linear-gradient(145deg,#f7fff8,#c9e9d2);box-shadow:inset 0 2px 2px rgba(255,255,255,.9),inset 0 -3px 4px rgba(63,136,81,.15),0 2px 3px rgba(38,90,53,.16)}
html.dark-mode .ql-path-world.ql-world-forest{background:linear-gradient(145deg,#213b2b,#294331 52%,#30432d)}
html.dark-mode .ql-path-world.ql-world-home{background:linear-gradient(145deg,#393526,#393526 58%,#373628)}
html.dark-mode .ql-path-world.ql-world-town{background:linear-gradient(145deg,#22353a,#293a3a 58%,#303c32)}
html.dark-mode .ql-path-scenery{opacity:.38;filter:saturate(.75) brightness(.78)}
html.dark-mode .ql-world-forest .ql-path-world-head{background:rgba(27,42,31,.78)}html.dark-mode .ql-world-home .ql-path-world-head{background:rgba(43,40,30,.82)}html.dark-mode .ql-world-town .ql-path-world-head{background:rgba(29,42,43,.82)}
html.dark-mode .ql-world-forest .ql-path-stone,html.dark-mode .ql-world-home .ql-path-stone,html.dark-mode .ql-world-town .ql-path-stone{box-shadow:0 2px 0 #545844,0 6px 0 #303c31,0 12px 20px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 5px rgba(0,0,0,.15)}
html.dark-mode .ql-world-forest .ql-path-stone::before,html.dark-mode .ql-world-home .ql-path-stone::before,html.dark-mode .ql-world-town .ql-path-stone::before{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0))}
@media(max-width:700px){.ql-path-world{min-height:570px}.ql-path-scenery{opacity:.55}.ql-world-forest .ql-path-stone,.ql-world-home .ql-path-stone,.ql-world-town .ql-path-stone{transform:perspective(700px) rotateX(.5deg)}}
@media(max-width:440px){.ql-path-world{min-height:555px}.ql-path-scenery{opacity:.42}}
@media(prefers-reduced-motion:reduce){.ql-world-forest .ql-path-stone,.ql-world-home .ql-path-stone,.ql-world-town .ql-path-stone{transform:none}.ql-world-forest .ql-path-stone:hover:not(:disabled),.ql-world-home .ql-path-stone:hover:not(:disabled),.ql-world-town .ql-path-stone:hover:not(:disabled){transform:none}}

/* French learning route: a snowy, illustrated companion to the Spanish meadow map. */
.ql-french-map-page{max-width:980px;margin:0 auto;padding:10px 0 42px;color:var(--ink)}
.ql-french-map-top{display:flex;align-items:center;gap:18px;margin-bottom:18px}.ql-french-map-title{flex:1;min-width:0}.ql-french-map-title h1{margin:5px 0;font-size:clamp(27px,4vw,40px);letter-spacing:-.04em;color:#183b50}.ql-french-map-title p{margin:0;color:var(--muted);font-size:13px}.ql-french-kicker{color:#39758f;font:750 10px var(--font-mono,monospace);letter-spacing:.13em}.ql-french-progress{display:grid;place-content:center;flex:none;width:68px;height:68px;border:4px solid #4b9fc2;border-radius:50%;color:#287d9e;text-align:center;background:rgba(255,255,255,.75)}.ql-french-progress strong{font-size:17px;line-height:1}.ql-french-progress span{margin-top:4px;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.ql-french-top-actions{display:flex;align-items:center;gap:10px}.ql-french-top-actions .ql-plan-reset{width:38px;height:38px}
.ql-french-landscape{overflow:hidden;padding:clamp(12px,3vw,24px);border:1px solid #c4deea;border-radius:26px;background:radial-gradient(ellipse at 12% 4%,rgba(255,255,255,.96),transparent 35%),linear-gradient(150deg,#eaf8fc 0%,#cce9f3 48%,#dff2f6 100%);box-shadow:0 14px 38px rgba(35,92,119,.12)}
.ql-french-welcome{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:150px;margin-bottom:18px;padding:clamp(17px,3vw,26px);border:1px solid rgba(255,255,255,.9);border-radius:20px;background:linear-gradient(110deg,rgba(255,255,255,.91),rgba(237,249,255,.82));box-shadow:0 8px 22px rgba(50,103,132,.1)}.ql-french-welcome>div:first-child{max-width:650px}.ql-french-welcome h2{margin:4px 0;color:#183f56;font-size:clamp(20px,3vw,29px);letter-spacing:-.03em}.ql-french-welcome p{margin:0 0 12px;color:#577688;font-size:13px;line-height:1.5}.ql-french-welcome .btn{min-height:42px}.ql-french-quicky{flex:none;width:132px;height:132px;overflow:hidden;border:1px solid rgba(255,255,255,.92);border-radius:20px;background:#dceff5;box-shadow:0 7px 18px rgba(48,114,144,.17)}.ql-french-quicky img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
.ql-french-region{position:relative;isolation:isolate;min-height:600px;margin:16px 0;padding:clamp(15px,3vw,23px);overflow:hidden;border:1px solid rgba(255,255,255,.86);border-radius:23px;background:linear-gradient(145deg,#e7f6fb,#d8eef5 56%,#e9f6f8);box-shadow:0 8px 22px rgba(43,98,123,.1)}.ql-french-region.ql-french-village{background:linear-gradient(145deg,#eaf5f8,#d7eaf0 56%,#f0f6f7)}.ql-french-region.ql-french-aurora{background:linear-gradient(145deg,#cfebf2,#b6dce9 53%,#d9eef2)}.ql-french-snow-art{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none;opacity:.83}.ql-french-snow-art svg{display:block;width:100%;height:100%;overflow:hidden}.ql-french-region-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:94px;margin-bottom:5px;padding:8px 12px;border:1px solid rgba(255,255,255,.75);border-radius:16px;background:rgba(249,254,255,.76);backdrop-filter:blur(5px)}.ql-french-region-head h2{margin:4px 0;color:#214c60;font-size:clamp(21px,3vw,28px);letter-spacing:-.035em}.ql-french-region-head p{margin:0;color:#648093;font-size:11px}.ql-french-region-badge{display:grid;place-items:center;width:54px;height:54px;border:1px solid #c4e2ec;border-radius:17px;background:linear-gradient(145deg,#fff,#e1f4f9);color:#4e9ab3;font-size:28px;box-shadow:0 4px 12px rgba(54,112,137,.1)}
.ql-french-stops{position:relative;display:grid;gap:1px;padding:3px 0 8px}.ql-french-stops::before{position:absolute;top:0;bottom:3px;left:50%;width:14px;border:2px solid rgba(90,151,174,.24);border-radius:999px;background:repeating-linear-gradient(to bottom,#d1e8ee 0 13px,#f8fdff 13px 23px);box-shadow:inset 0 0 0 3px rgba(255,255,255,.4);content:"";transform:translateX(-50%)}.ql-french-stop-row{position:relative;display:flex;align-items:center;min-height:88px;padding:8px 0}.ql-french-stop-row.is-left{justify-content:flex-start}.ql-french-stop-row.is-right{justify-content:flex-end}.ql-french-stop{position:relative;z-index:1;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:11px;width:min(390px,45%);min-height:73px;padding:10px 14px;border:1px solid #a9cad7;border-radius:24px 20px 24px 19px;background:linear-gradient(145deg,#fff,#e7f4f8);box-shadow:0 3px 0 #c3dce5,0 8px 17px rgba(45,97,118,.13),inset 0 2px 0 rgba(255,255,255,.96);color:#294d5d;text-align:left;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}.ql-french-stop-row.is-right .ql-french-stop{margin-right:4%}.ql-french-stop-row.is-left .ql-french-stop{margin-left:4%}.ql-french-stop::before{position:absolute;inset:1px 1px 48%;border-radius:22px 18px 9px 9px;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent);content:"";pointer-events:none}.ql-french-stop>*{position:relative;z-index:1}.ql-french-stop:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 0 #b7d3de,0 12px 21px rgba(45,97,118,.17),inset 0 2px 0 #fff}.ql-french-stop:focus-visible{outline:3px solid #e49c43;outline-offset:4px}.ql-french-stop-mark{display:grid;place-items:center;width:39px;height:39px;border:1px solid #bbd9e3;border-radius:50%;background:linear-gradient(145deg,#fff,#deeff4);color:#477b8f;font-size:12px;font-weight:850;box-shadow:inset 0 2px 2px #fff,0 2px 4px rgba(47,97,118,.1)}.ql-french-stop-copy{display:grid;gap:3px;min-width:0}.ql-french-stop-copy strong{font-size:13px;line-height:1.25}.ql-french-stop-copy small{overflow:hidden;color:#668291;font-size:10px;line-height:1.35;text-overflow:ellipsis}.ql-french-stop-copy>span{color:#3e819a;font-size:9px;font-weight:750}.ql-french-stop.is-done{border-color:#8fcbb8;background:linear-gradient(145deg,#f4fffb,#dff5ed)}.ql-french-stop.is-done .ql-french-stop-mark{border-color:#9dd6c1;background:#e0f8ed;color:#168062}.ql-french-stop.is-next{border:2px solid #e0a145;box-shadow:0 0 0 5px rgba(241,186,90,.19),0 3px 0 #c3dce5,0 10px 18px rgba(45,97,118,.15),inset 0 2px 0 #fff}.ql-french-stop.is-locked{cursor:not-allowed;filter:saturate(.55);opacity:.65}.ql-french-map-foot{margin:12px 5px 0;color:var(--muted);font-size:11px;line-height:1.5}
.ql-workspace.is-french-lesson{grid-template-columns:minmax(0,1fr)}.ql-workspace.is-french-lesson>.ql-plan-rail{display:none}.ql-french-map-return{margin-bottom:10px}.ql-session-head:has(.ql-french-map-return){display:block}
html.dark-mode .ql-french-map-title h1{color:#d9f0fb}html.dark-mode .ql-french-landscape{border-color:#315266;background:radial-gradient(ellipse at 12% 4%,rgba(196,235,248,.1),transparent 35%),linear-gradient(150deg,#1b303a,#203b47 52%,#243c43);box-shadow:0 14px 38px rgba(0,0,0,.22)}html.dark-mode .ql-french-welcome,html.dark-mode .ql-french-region-head{border-color:#405d68;background:rgba(27,47,57,.87)}html.dark-mode .ql-french-welcome h2,html.dark-mode .ql-french-region-head h2{color:#e0f4fb}html.dark-mode .ql-french-welcome p,html.dark-mode .ql-french-region-head p{color:#afcbd6}html.dark-mode .ql-french-kicker{color:#8ccce0}html.dark-mode .ql-french-progress{border-color:#4c9ab4;background:#203d48;color:#9eddf0}html.dark-mode .ql-french-region{border-color:#3e5964;background:linear-gradient(145deg,#243b45,#263e48 58%,#2c4547)}html.dark-mode .ql-french-region.ql-french-village{background:linear-gradient(145deg,#2c4047,#2b414b 56%,#3c4547)}html.dark-mode .ql-french-region.ql-french-aurora{background:linear-gradient(145deg,#253c4b,#26394c 53%,#2e494b)}html.dark-mode .ql-french-stop{border-color:#587381;background:linear-gradient(145deg,#3b5662,#2d4650);color:#edf8fb;box-shadow:0 3px 0 #263e48,0 8px 17px rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.2)}html.dark-mode .ql-french-stop-copy small{color:#b4ced8}html.dark-mode .ql-french-stop-copy>span{color:#9bd4e5}html.dark-mode .ql-french-stop.is-done{background:linear-gradient(145deg,#294c46,#28443f)}html.dark-mode .ql-french-region-badge{border-color:#557581;background:linear-gradient(145deg,#3d5a64,#29454f);color:#a9e0ef}
@media(max-width:700px){.ql-french-map-top{align-items:flex-start;gap:10px;flex-wrap:wrap}.ql-french-map-top>.ql-back-btn{order:0}.ql-french-top-actions{order:1;margin-left:auto}.ql-french-map-title{order:2;flex-basis:100%}.ql-french-progress{width:58px;height:58px}.ql-french-region{min-height:570px}.ql-french-snow-art{opacity:.58}.ql-french-stop{width:48%;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:9px 10px}.ql-french-stop-row.is-left .ql-french-stop{margin-left:0}.ql-french-stop-row.is-right .ql-french-stop{margin-right:0}.ql-french-stop-mark{width:33px;height:33px}.ql-french-stop-copy strong{font-size:12px}.ql-french-stop-copy small{font-size:9px}.ql-french-stop-copy>span{font-size:8px}}
@media(max-width:440px){.ql-french-welcome{min-height:130px}.ql-french-quicky{width:76px;height:76px}.ql-french-region{min-height:545px;padding:12px}.ql-french-region-head{min-height:82px;padding:7px 9px}.ql-french-region-badge{width:42px;height:42px;font-size:22px}.ql-french-stops::before{width:10px}.ql-french-stop{min-height:68px;width:49%;padding:8px 7px;grid-template-columns:30px minmax(0,1fr);gap:6px}.ql-french-stop-mark{width:28px;height:28px;font-size:10px}.ql-french-stop-copy small{display:none}.ql-french-stop-copy strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){.ql-french-stop,.ql-french-stop:hover:not(:disabled){transition:none;transform:none}}
.qc-js-path .qc-c-module-card:not(:disabled):hover{border-color:color-mix(in srgb,#F7DF1E 60%,var(--border));background:color-mix(in srgb,#F7DF1E 5%,var(--panel))}
.qc-js-path .qc-c-module-index{border-color:color-mix(in srgb,#F7DF1E 55%,var(--border));background:color-mix(in srgb,#F7DF1E 18%,var(--panel))}
.qc-js-workspace .qc-study-columns{grid-template-columns:minmax(180px,.65fr) minmax(360px,1.5fr) minmax(220px,.8fr)}
.qc-js-workspace .qc-study-editor{min-height:275px;font:12px/1.6 var(--font-mono,monospace);tab-size:2}
.qc-js-icon{border-color:#ead66a;background:#fff8cf;color:#746000;font-size:11px;font-weight:850}
html.dark-mode .qc-js-icon{border-color:#6b5c1e;background:#3b351e;color:#f2da55}
.qc-js-output-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px;min-width:0}
.qc-js-output-grid:has(.qc-js-preview-card:not([hidden])){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.qc-js-preview-card{overflow:hidden;min-width:0;border:1px solid var(--border,#d9dee8);border-radius:12px;background:var(--panel,#fff)}
.qc-js-preview-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-bottom:1px solid var(--border,#d9dee8)}
.qc-js-preview-head strong{font-size:10px}.qc-js-preview-head span{color:var(--muted,#7b8495);font-size:9px}
.qc-js-preview-frame{display:block;width:100%;height:210px;border:0;background:#fff}
.qc-js-workspace .qc-run-output{margin:0;min-width:0}.qc-js-workspace .qc-run-pre{max-height:210px;min-height:100px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.qc-js-workspace .qc-c-quiz-explanation{line-height:1.55}
@media(max-width:1120px){.qc-js-workspace .qc-study-columns{grid-template-columns:minmax(170px,.65fr) minmax(0,1.4fr)}}
@media(max-width:850px){.qc-js-output-grid:has(.qc-js-preview-card:not([hidden])){grid-template-columns:1fr}}
@media(max-width:720px){.qc-js-workspace .qc-study-columns{grid-template-columns:1fr}.qc-js-workspace .qc-study-editor{min-height:240px}.qc-js-preview-frame{height:230px}}
.qc-js-workspace .qc-notes-card pre{overflow:auto;margin:8px 0 0;padding:9px;border:1px solid var(--border,#d9dee8);border-radius:9px;background:var(--panel-2,#f3f5f9);color:var(--ink,#202431);font:10px/1.55 var(--font-mono,monospace);white-space:pre-wrap;overflow-wrap:anywhere}
html.dark-mode .qc-js-workspace .qc-notes-card pre{background:#171d28;color:#d4deed}
/* Quick Fix visual polish: calmer surfaces, consistent color and a single icon language. */
:root{
  --paper:#f3f6fa;
  --panel:#ffffff;
  --panel-2:#edf2f7;
  --bg:var(--paper);
  --ink:#17243a;
  --muted:#66758b;
  --muted-2:#8996a8;
  --border:rgba(31,48,72,.13);
  --border-soft:rgba(31,48,72,.08);
  --led-1:#4778d0;
  --led-2:#765fc1;
  --led-3:#c75579;
  --led-4:#c98e37;
  --led-5:#168c75;
  --led-6:#1b91a1;
  --success:#168c75;
  --warning:#c98e37;
  --danger:#d34c57;
  --radius:18px;
}
html,body{background-color:var(--paper);color:var(--ink)}
body{background-image:radial-gradient(rgba(46,67,97,.045) .8px,transparent .8px);background-size:28px 28px}
html.dark-mode{--paper:#101722;--panel:#182231;--panel-2:#202c3d;--bg:var(--paper);--ink:#edf3fb;--muted:#afbdcf;--muted-2:#8291a6;--border:rgba(202,218,240,.15);--border-soft:rgba(202,218,240,.09);--led-1:#83a9f5;--led-2:#aa95f0;--led-3:#f08bac;--led-4:#e9b963;--led-5:#55c8a8;--led-6:#54c4d4;--success:#55c8a8;--warning:#e9b963;--danger:#f17d85}
html.dark-mode body{background-image:radial-gradient(rgba(204,219,240,.035) .8px,transparent .8px);background-size:28px 28px}
.qf-icon-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.qf-icon{display:inline-block;width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.qf-hub-icon{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qf-arrow-icon{display:inline-block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;transition:transform .18s ease}
.qf-streak-icon{display:inline-block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.topbar{padding:12px clamp(14px,2.5vw,28px);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(16px);border-bottom-color:var(--border-soft)}
.brand-mini .brand-logo{width:30px;height:30px;border-radius:10px;box-shadow:0 2px 8px rgba(18,34,57,.12)}
.brand-mini .brand-name{font-size:15px;letter-spacing:-.02em}
.topbar-right{gap:8px}
.primary-section-nav{min-height:58px;padding:8px 20px;border-bottom-color:var(--border-soft);background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(12px)}
.primary-nav-group{--nav-accent:#4778d0}
.primary-nav-group[data-nav-group="tools"]{--nav-accent:#168c75}
.primary-nav-group[data-nav-group="practice"]{--nav-accent:#765fc1}
.primary-nav-group[data-nav-group="discover"]{--nav-accent:#c98e37}
.primary-nav-trigger{min-width:126px;min-height:40px;gap:9px;padding:0 15px;border-color:var(--border-soft);border-radius:12px;background:var(--panel);box-shadow:0 2px 6px rgba(23,36,58,.035);font-size:12.5px;letter-spacing:.005em}
.primary-nav-trigger>.qf-icon{width:17px;height:17px;padding:2px;box-sizing:content-box;border-radius:7px;background:color-mix(in srgb,var(--nav-accent) 11%,var(--panel));color:var(--nav-accent)}
.primary-nav-trigger:hover,.primary-nav-trigger[aria-expanded="true"],.primary-nav-group.has-current-page .primary-nav-trigger{border-color:color-mix(in srgb,var(--nav-accent) 34%,var(--border));background:color-mix(in srgb,var(--nav-accent) 5%,var(--panel));color:var(--ink);box-shadow:0 5px 15px color-mix(in srgb,var(--nav-accent) 10%,transparent)}
.primary-nav-menu{top:calc(100% + 9px);gap:4px;min-width:238px;padding:7px;border-radius:14px;border-color:var(--border);background:var(--panel);box-shadow:0 18px 42px rgba(20,35,58,.16)}
.primary-nav-menu .primary-nav-link{min-height:43px;border-radius:10px;color:var(--muted);font-size:12px;font-weight:600}
.primary-nav-menu .primary-nav-link>.qf-icon{width:17px;height:17px;color:var(--led-1)}
.primary-nav-menu .primary-nav-link:hover{background:var(--panel-2)}
.primary-nav-menu .primary-nav-link[aria-current="page"]{background:color-mix(in srgb,var(--led-1) 9%,var(--panel));color:var(--led-1)}
.mode-toggle-btn,.icon-btn{min-height:38px;border-radius:11px;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.mode-toggle-btn:hover,.icon-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(23,36,58,.08)}
.mode-toggle-btn .qf-icon,.icon-btn .qf-icon{margin-right:5px;color:var(--led-1)}
.pill-streak{display:inline-flex;align-items:center;gap:4px;color:#bd7d1a}
html.dark-mode .pill-streak{color:#e9b963}
.main{padding-top:clamp(22px,3vw,34px)}
.home-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:174px;margin:0 0 20px;padding:clamp(22px,3.5vw,34px);overflow:hidden;border:1px solid color-mix(in srgb,#4778d0 16%,var(--border));border-radius:22px;background:radial-gradient(ellipse at 95% 5%,color-mix(in srgb,#20bba2 10%,transparent),transparent 33%),linear-gradient(120deg,var(--panel),color-mix(in srgb,#eaf1fd 36%,var(--panel)));box-shadow:0 12px 30px -25px rgba(27,48,82,.34)}
.home-hero::after{position:absolute;right:17%;bottom:-100px;width:340px;height:190px;border:1px solid color-mix(in srgb,#4778d0 12%,transparent);border-radius:50%;content:"";transform:rotate(-12deg);pointer-events:none}
.home-hero-text{position:relative;z-index:1;max-width:700px;min-width:0}
.home-kicker{margin-bottom:9px;color:#287e84;font-size:10px;letter-spacing:.15em}
.home-title{margin:0 0 7px;font-size:clamp(26px,3.5vw,38px);font-weight:720;letter-spacing:-.045em;line-height:1.1}
.home-sub{max-width:620px;color:var(--muted);font-size:14px;line-height:1.6}
.home-quote-source{display:block;margin-top:9px;color:var(--muted);font-size:12px;font-weight:650;letter-spacing:.02em}
.home-hero-mascot{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:106px;height:106px;overflow:hidden;border:3px solid color-mix(in srgb,#20bba2 36%,var(--panel));border-radius:50%;background:#172940;box-shadow:0 8px 22px rgba(23,41,64,.19),0 0 0 7px color-mix(in srgb,#20bba2 8%,transparent)}
.home-hero-mascot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 29%;transform:scale(1.35)}
.course-filter-hint{display:inline-flex;margin-top:11px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--panel) 85%,transparent);color:var(--muted);font-size:11px;font-weight:650}
.hub-grid:not(.sims-grid){grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:0}
.hub-card{position:relative;min-height:150px;gap:14px;padding:19px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(140deg,color-mix(in srgb,var(--hub-color) 3.5%,var(--panel)),var(--panel) 64%);box-shadow:0 5px 18px -15px rgba(20,36,59,.32);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.hub-card:hover:not(:disabled){transform:translateY(-2px);border-color:color-mix(in srgb,var(--hub-color) 40%,var(--border));box-shadow:0 12px 24px -17px color-mix(in srgb,var(--hub-color) 38%,transparent)}
.hub-card:focus-visible{outline:3px solid color-mix(in srgb,var(--hub-color) 45%,transparent);outline-offset:3px}
.hub-card-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--hub-color) 22%,var(--border));border-radius:13px;background:color-mix(in srgb,var(--hub-color) 11%,var(--panel));color:var(--hub-color)}
.hub-card-body{min-width:0}
.hub-card-body h2{margin:1px 0 6px;font-size:15px;font-weight:720;letter-spacing:-.015em}
.hub-card-body p{margin:0 0 11px;color:var(--muted);font-size:11.5px;line-height:1.55}
.hub-card-cta{display:inline-flex;align-items:center;gap:5px;color:color-mix(in srgb,var(--hub-color) 75%,var(--ink));font-size:11px;font-weight:720}
.hub-card:hover .qf-arrow-icon{transform:translateX(3px)}
.home-study-card{border-radius:18px;box-shadow:0 10px 28px -23px rgba(16,105,93,.32)}
.btn{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.btn:not(:disabled):hover{transform:translateY(-1px)}

/* Simulations catalogue: compact lab cards with an image-led featured lab. */
.sim-page{display:grid;gap:17px;width:100%;max-width:1240px;margin:0 auto;padding:0 0 34px;color:var(--ink)}
.sim-feature-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(150px,19vw,218px);overflow:hidden;border:1px solid color-mix(in srgb,#10c8e7 25%,var(--border));border-radius:19px;background:linear-gradient(120deg,#062c59,#087ab0 62%,#08b8d0);box-shadow:0 14px 34px -25px rgba(0,92,150,.58)}
.sim-feature-image,.sim-feature-shade{position:absolute;inset:0;width:100%;height:100%}
.sim-feature-image{z-index:-2;display:block;object-fit:cover;object-position:center 54%}
.sim-feature-shade{z-index:-1;background:linear-gradient(90deg,rgba(3,27,57,.94) 0%,rgba(3,38,71,.87) 31%,rgba(4,60,91,.5) 57%,rgba(4,55,88,.06) 100%),linear-gradient(0deg,rgba(3,27,57,.34),transparent 65%)}
.sim-feature-copy{width:min(530px,65%);padding:clamp(18px,3vw,30px);color:#f5fbff}
.sim-eyebrow,.sim-section-kicker{display:inline-flex;align-items:center;gap:7px;color:#78ead8;font:750 10px/1.2 var(--font-mono);letter-spacing:.11em;text-transform:uppercase}
.sim-eyebrow i{width:7px;height:7px;border-radius:50%;background:#56e5ca;box-shadow:0 0 11px #56e5ca}
.sim-feature-copy h1{margin:9px 0 6px;font:750 clamp(24px,3vw,36px)/1.08 var(--font-display);letter-spacing:-.04em}
.sim-feature-copy p{max-width:410px;margin:0;color:rgba(239,248,255,.82);font-size:13px;line-height:1.55}
.sim-feature-cta{display:inline-flex;align-items:center;gap:10px;min-height:37px;margin-top:13px;padding:0 16px;border:0;border-radius:999px;background:#08b99f;color:#052d39;font:750 12px/1 var(--font-body);cursor:pointer;box-shadow:0 5px 15px rgba(0,26,48,.18);transition:transform .16s,background .16s,box-shadow .16s}
.sim-feature-cta:hover{transform:translateY(-1px);background:#27d7bd;box-shadow:0 8px 20px rgba(0,26,48,.24)}
.sim-feature-cta:focus-visible,.sim-filter-chip:focus-visible,.sim-card:focus-visible{outline:3px solid color-mix(in srgb,#11b99e 62%,white);outline-offset:3px}
.sim-feature-caption{position:absolute;right:14px;bottom:12px;color:rgba(239,248,255,.74);font:700 8px/1 var(--font-mono);letter-spacing:.11em}
.sim-filter-strip{display:flex;align-items:center;gap:7px;min-width:0;overflow-x:auto;padding:1px 1px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sim-filter-strip::-webkit-scrollbar{display:none}
.sim-filter-chip{flex:0 0 auto;min-height:32px;padding:0 12px;border:1px solid color-mix(in srgb,#438ac2 18%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--panel) 90%,#dff7f3);color:var(--muted);font:650 11px/1 var(--font-body);cursor:pointer;transition:color .16s,border-color .16s,background .16s,box-shadow .16s}
.sim-filter-chip:hover{border-color:color-mix(in srgb,#08b99f 38%,var(--border));color:var(--ink)}
.sim-filter-chip.is-active{border-color:#10b99d;background:linear-gradient(135deg,#14c9ac,#8debd9);color:#073d3a;box-shadow:0 4px 12px rgba(14,166,144,.16)}
.sim-list-heading{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-top:1px}
.sim-section-kicker{color:#318a89;font-size:9px}
.sim-list-heading h2{margin:4px 0 3px;font:750 clamp(19px,2.2vw,25px)/1.12 var(--font-display);letter-spacing:-.03em}
.sim-list-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.4}
.sim-sort-control{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;white-space:nowrap}
.sim-sort-control select{min-height:34px;padding:0 28px 0 10px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--ink);font:650 11px var(--font-body)}
.sim-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.sim-card-grid[hidden]{display:none}
.sim-card{position:relative;display:grid;grid-template-columns:clamp(48px,6vw,68px) minmax(0,1fr);align-content:start;align-items:start;gap:10px;width:100%;min-width:0;min-height:128px;padding:11px;border:1px solid color-mix(in srgb,var(--sim-accent) 23%,var(--border));border-radius:15px;background:linear-gradient(135deg,color-mix(in srgb,var(--sim-accent) 7%,var(--panel)),var(--panel) 72%);color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 5px 16px -14px color-mix(in srgb,var(--sim-accent) 48%,transparent);transition:transform .17s,border-color .17s,box-shadow .17s}
.sim-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--sim-accent) 56%,var(--border));box-shadow:0 10px 21px -15px color-mix(in srgb,var(--sim-accent) 60%,transparent)}
.sim-card.is-coming-soon,.sim-card.is-coming-soon:hover{cursor:default;transform:none;border-color:color-mix(in srgb,var(--sim-accent) 34%,var(--border));box-shadow:0 5px 16px -14px color-mix(in srgb,var(--sim-accent) 35%,transparent)}
.sim-card.is-coming-soon .sim-card-bottom{width:100%}
.sim-card.is-coming-soon .sim-card-bottom b{color:color-mix(in srgb,var(--sim-accent) 78%,var(--ink))}
.bb-coming-soon{min-height:55vh;align-content:center}
.bb-coming-soon .empty-state{width:min(100%,640px);margin:auto;padding:clamp(28px,6vw,52px);border-style:solid;border-color:color-mix(in srgb,#ffd23d 28%,var(--border));background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,#ffd23d 8%,transparent),transparent 65%),var(--panel)}
.bb-coming-soon .empty-state .big{color:#dfb82e}
.bb-coming-soon h1{margin:8px 0;color:var(--ink);font:760 clamp(25px,4vw,36px)/1.15 var(--font-display)}
.bb-coming-soon p{max-width:48ch;margin:0 auto 18px;color:var(--muted);line-height:1.6}
.bb-coming-soon .button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:11px;text-decoration:none}
.sim-card-art{position:relative;display:grid;place-items:center;grid-row:1;grid-column:1;width:100%;aspect-ratio:1/1;overflow:hidden;border:1px solid color-mix(in srgb,var(--sim-accent) 35%,transparent);border-radius:13px;background:radial-gradient(circle at 68% 26%,color-mix(in srgb,var(--sim-accent) 37%,transparent),transparent 38%),linear-gradient(145deg,color-mix(in srgb,var(--sim-accent) 26%,#10283d),color-mix(in srgb,var(--sim-accent) 52%,#071a2c));color:#fff}
.sim-card-art-grid{position:absolute;inset:0;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.19) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.19) 1px,transparent 1px);background-size:12px 12px;mask-image:linear-gradient(135deg,#000,transparent 82%)}
.sim-card-icon{position:relative;z-index:1;display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.14);color:#fff;filter:drop-shadow(0 2px 8px color-mix(in srgb,var(--sim-accent) 58%,transparent))}
.qf-sim-icon{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sim-card-content{display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:104px}
.sim-card-meta{display:flex;align-items:center;gap:5px;max-width:100%;overflow:hidden;color:color-mix(in srgb,var(--sim-accent) 70%,var(--muted));font:750 9px/1.25 var(--font-mono);text-overflow:ellipsis;white-space:nowrap}
.sim-card-meta i{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--sim-accent);box-shadow:0 0 7px color-mix(in srgb,var(--sim-accent) 68%,transparent)}
.sim-card-content>strong{display:-webkit-box;overflow:hidden;width:100%;margin-top:5px;font:750 14px/1.15 var(--font-display);letter-spacing:-.02em;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.sim-card-description{display:-webkit-box;overflow:hidden;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.sim-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:5px;width:calc(100% + clamp(48px,6vw,68px) + 10px);margin-top:auto;padding-top:8px;color:var(--muted-2);font:600 9px/1.2 var(--font-body)}
.sim-card-bottom>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sim-card-bottom b{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;color:#079f8b;font-weight:750}
.sim-card-bottom b span{font-size:13px;transition:transform .16s}
.sim-card:hover .sim-card-bottom b span{transform:translateX(2px)}
.sim-empty-state{margin:0;padding:22px;border:1px dashed var(--border);border-radius:14px;color:var(--muted);text-align:center;font-size:13px}
html.dark-mode .sim-feature-hero{border-color:rgba(51,225,255,.25);box-shadow:0 15px 38px -25px rgba(0,135,220,.4)}
html.dark-mode .sim-filter-chip{background:color-mix(in srgb,var(--panel) 84%,#102d3c)}
html.dark-mode .sim-filter-chip.is-active{border-color:#27d7bd;background:linear-gradient(135deg,#12a990,#6bdcc9);color:#062f31}
html.dark-mode .sim-section-kicker{color:#63d9c8}
html.dark-mode .sim-card-bottom b{color:#69dfcb}
@media(min-width:1180px){.sim-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){.sim-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sim-feature-copy{width:min(470px,72%)}}
@media(max-width:600px){.sim-page{gap:13px;padding-bottom:22px}.sim-feature-hero{min-height:116px;border-radius:16px}.sim-feature-image{object-position:57% center}.sim-feature-shade{background:linear-gradient(90deg,rgba(3,27,57,.96),rgba(3,38,71,.82) 46%,rgba(4,60,91,.22) 100%)}.sim-feature-copy{width:76%;padding:14px}.sim-eyebrow{gap:5px;font-size:8px;letter-spacing:.07em}.sim-feature-copy h1{margin:6px 0 4px;font-size:21px}.sim-feature-copy p{font-size:11px;line-height:1.35}.sim-feature-cta{min-height:30px;margin-top:8px;padding:0 11px;font-size:10px}.sim-feature-caption{right:9px;bottom:8px;font-size:7px}.sim-filter-strip{gap:6px;margin-inline:-2px}.sim-filter-chip{min-height:31px;padding-inline:10px;font-size:10px}.sim-list-heading{align-items:center;gap:8px}.sim-section-kicker{font-size:8px}.sim-list-heading h2{font-size:19px}.sim-list-heading p{max-width:215px;font-size:10px}.sim-sort-control{gap:4px;font-size:9px}.sim-sort-control select{min-height:31px;padding-left:8px;font-size:10px}.sim-card-grid{gap:8px}.sim-card{grid-template-columns:44px minmax(0,1fr);gap:8px;min-height:126px;padding:9px;border-radius:13px}.sim-card-art{border-radius:11px}.sim-card-icon{width:29px;height:29px}.qf-sim-icon{width:18px;height:18px}.sim-card-content{min-height:106px}.sim-card-meta{font-size:8px}.sim-card-content>strong{margin-top:4px;font-size:12px;line-height:1.2}.sim-card-description{margin-top:4px;font-size:10px;line-height:1.35}.sim-card-bottom{width:calc(100% + 52px);gap:4px;padding-top:7px;font-size:8px}.sim-card-bottom b{font-size:9px}}
@media(max-width:360px){.sim-feature-hero{min-height:108px}.sim-feature-copy{width:82%;padding:12px}.sim-feature-copy h1{font-size:19px}.sim-feature-copy p{font-size:10px}.sim-card{grid-template-columns:39px minmax(0,1fr);gap:7px;min-height:132px;padding:8px}.sim-card-bottom{width:calc(100% + 46px);font-size:7px}.sim-card-bottom b{font-size:8px}}
@media(prefers-reduced-motion:reduce){.sim-feature-cta,.sim-filter-chip,.sim-card,.sim-card-bottom b span{transition:none}}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid color-mix(in srgb,var(--led-1) 70%,transparent);outline-offset:2px}
html.dark-mode .topbar{background:color-mix(in srgb,var(--paper) 90%,transparent)}
html.dark-mode .primary-section-nav{background:color-mix(in srgb,var(--panel) 88%,transparent)}
html.dark-mode .primary-nav-trigger{background:var(--panel);box-shadow:none}
html.dark-mode .primary-nav-trigger:hover,html.dark-mode .primary-nav-trigger[aria-expanded="true"],html.dark-mode .primary-nav-group.has-current-page .primary-nav-trigger{background:color-mix(in srgb,var(--nav-accent) 12%,var(--panel));color:var(--ink)}
html.dark-mode .primary-nav-menu{box-shadow:0 18px 42px rgba(0,0,0,.38)}
html.dark-mode .home-hero{border-color:color-mix(in srgb,#83a9f5 23%,var(--border));background:radial-gradient(ellipse at 95% 5%,rgba(28,164,142,.13),transparent 35%),linear-gradient(120deg,#182231,#1c2b3c)}
html.dark-mode .home-kicker{color:#6fc5c4}
html.dark-mode .hub-card{background:linear-gradient(140deg,color-mix(in srgb,var(--hub-color) 8%,var(--panel)),var(--panel) 68%);box-shadow:none}
html.dark-mode .hub-card:hover:not(:disabled){box-shadow:0 12px 24px -17px color-mix(in srgb,var(--hub-color) 33%,transparent)}
html.dark-mode .hub-card-cta{color:color-mix(in srgb,var(--hub-color) 72%,#fff)}
html.dark-mode .course-filter-hint{background:var(--panel)}
@media(max-width:900px){.hub-grid:not(.sims-grid){grid-template-columns:repeat(2,minmax(0,1fr))}.home-hero{min-height:154px}}
@media(max-width:620px){.topbar{gap:8px}.primary-section-nav{justify-content:flex-start;gap:8px;padding-inline:12px}.primary-nav-trigger{min-width:112px;min-height:42px;padding-inline:12px}.home-hero{min-height:140px;gap:12px;padding:20px 17px;border-radius:18px}.home-hero-mascot{width:76px;height:76px;border-width:2px}.home-title{font-size:clamp(24px,7vw,31px)}.home-sub{font-size:12px}.hub-grid:not(.sims-grid){grid-template-columns:1fr;gap:10px}.hub-card{min-height:112px;padding:15px}.hub-card-icon{width:40px;height:40px;border-radius:12px}.hub-card-body h2{font-size:14px}.hub-card-body p{font-size:11px;margin-bottom:7px}}
@media(prefers-reduced-motion:reduce){.hub-card,.qf-arrow-icon,.btn{transition:none!important}}
.qf-sim-icon{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qf-category-icon-svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qd-line-icon{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qd-doc-icon{color:var(--qd-accent,#c98e37)}.qd-doc-icon .qd-line-icon{width:21px;height:21px}.qd-doc-icon-lg .qd-line-icon{width:29px;height:29px}
.qd-hero-icon .qd-line-icon{width:34px;height:34px;color:#c98e37}.qd-ws-icon .qd-line-icon{width:19px;height:19px;color:var(--led-1)}
.qd-placeholder-icon .qd-line-icon{width:36px;height:36px;color:var(--led-2)}

/* Daily Quicky Test */
.daily-home-card{--daily-accent:#189c87;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:17px;margin:0 0 18px;padding:clamp(17px,2.6vw,24px);border:1px solid color-mix(in srgb,var(--daily-accent) 28%,var(--border));border-radius:18px;background:linear-gradient(110deg,color-mix(in srgb,var(--daily-accent) 9%,var(--panel)),var(--panel) 62%);box-shadow:0 10px 26px -22px color-mix(in srgb,var(--daily-accent) 45%,transparent)}
.daily-home-card.is-complete{--daily-accent:#5387cf}
.daily-home-mark{display:grid;place-items:center;width:48px;height:48px;border:1px solid color-mix(in srgb,var(--daily-accent) 28%,var(--border));border-radius:15px;background:color-mix(in srgb,var(--daily-accent) 12%,var(--panel));color:var(--daily-accent)}
.daily-home-mark svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.daily-home-copy{min-width:0}.daily-home-copy>span,.daily-challenge-kicker{display:block;margin-bottom:5px;color:var(--daily-accent,#168e7e);font-family:var(--font-mono);font-size:10px;font-weight:800;letter-spacing:.12em}
.daily-home-copy h2{margin:0 0 4px;font-size:clamp(16px,2vw,20px);letter-spacing:-.025em}.daily-home-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.daily-home-action{white-space:nowrap;border-color:color-mix(in srgb,var(--daily-accent) 36%,var(--border));color:var(--daily-accent);font-weight:750}.daily-home-action span{margin-left:6px}
.daily-challenge-page{--daily-accent:#168e7e;max-width:980px;margin:0 auto;padding:0 0 40px}
.daily-challenge-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:0 0 20px;padding:clamp(20px,3vw,30px);border:1px solid color-mix(in srgb,var(--daily-accent) 24%,var(--border));border-radius:20px;background:linear-gradient(120deg,color-mix(in srgb,var(--daily-accent) 8%,var(--panel)),var(--panel) 70%)}
.daily-challenge-heading h1{margin:0 0 8px;font-size:clamp(24px,4vw,34px);line-height:1.15;letter-spacing:-.04em}.daily-challenge-heading p{max-width:660px;margin:0;color:var(--muted);line-height:1.6}.daily-challenge-heading p strong{color:var(--ink)}
.daily-challenge-xp-chip{display:flex;flex:none;min-width:145px;flex-direction:column;gap:4px;padding:13px 15px;border:1px solid var(--border);border-radius:14px;background:var(--panel-2)}.daily-challenge-xp-chip strong{font-size:14px}.daily-challenge-xp-chip span,.daily-challenge-xp-chip b{color:var(--muted);font-size:11px}.daily-challenge-xp-chip b{color:var(--daily-accent);font-family:var(--font-mono)}
.daily-challenge-instructions{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 15px}.daily-challenge-instructions span{padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--panel);color:var(--muted);font-size:11px;font-weight:700}
.daily-challenge-form{display:grid;gap:13px}.daily-challenge-question{min-width:0;margin:0;padding:clamp(17px,2.8vw,24px);border:1px solid var(--border);border-radius:17px;background:var(--panel);box-shadow:0 6px 22px -20px rgba(20,36,59,.4)}
.daily-challenge-question-heading{display:grid;gap:9px;margin:0 0 15px;color:var(--ink)}.daily-challenge-question-heading span{color:var(--daily-accent);font-family:var(--font-mono);font-size:10px;font-weight:800;letter-spacing:.12em}.daily-challenge-question-heading strong{font-size:clamp(15px,2vw,18px);font-weight:700;line-height:1.5}
.daily-challenge-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.daily-challenge-option{display:flex;align-items:center;gap:10px;min-width:0;min-height:48px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2);cursor:pointer;line-height:1.45;transition:border-color .15s ease,background .15s ease}.daily-challenge-option:hover{border-color:color-mix(in srgb,var(--daily-accent) 45%,var(--border))}.daily-challenge-option:has(input:checked){border-color:var(--daily-accent);background:color-mix(in srgb,var(--daily-accent) 9%,var(--panel))}.daily-challenge-option input{flex:none;accent-color:var(--daily-accent)}.daily-challenge-option-letter{display:grid;place-items:center;flex:none;width:25px;height:25px;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-family:var(--font-mono);font-size:11px;font-weight:800}.daily-challenge-option>span:nth-of-type(2){min-width:0;overflow-wrap:anywhere}.daily-challenge-option.is-correct{border-color:#3aaf7a;background:color-mix(in srgb,#3aaf7a 10%,var(--panel))}.daily-challenge-option.is-selected-wrong{border-color:#e17a72;background:color-mix(in srgb,#e17a72 9%,var(--panel))}.daily-answer-mark{margin-left:auto;color:#278958;font-size:17px}.daily-challenge-option.is-selected-wrong .daily-answer-mark{color:#c54f49}
.daily-challenge-image{display:block;max-width:min(100%,520px);max-height:280px;margin:0 0 14px;border-radius:10px;object-fit:contain}.daily-challenge-explanation{margin-top:14px;padding:12px 14px;border-left:3px solid var(--daily-accent);border-radius:0 10px 10px 0;background:color-mix(in srgb,var(--daily-accent) 7%,var(--panel))}.daily-challenge-explanation strong{font-size:12px}.daily-challenge-explanation p{margin:5px 0;color:var(--muted);font-size:12px;line-height:1.55}.daily-challenge-explanation small{color:var(--muted);font-size:10px}
.daily-challenge-submit-row{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding-top:4px}.daily-challenge-submit-row p{margin:0;color:var(--danger);font-size:12px}.daily-challenge-submit{min-height:46px;padding-inline:18px}.daily-challenge-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}.daily-complete-note{color:var(--muted);font-size:11px}
.daily-challenge-result{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;margin:0 0 17px;padding:17px 20px;border:1px solid color-mix(in srgb,var(--daily-accent) 32%,var(--border));border-radius:16px;background:linear-gradient(110deg,color-mix(in srgb,var(--daily-accent) 10%,var(--panel)),var(--panel) 68%)}.daily-challenge-result.is-level-up{--daily-accent:#b78029}.daily-result-score{display:grid;place-items:center;width:76px;height:76px;border:2px solid color-mix(in srgb,var(--daily-accent) 40%,var(--border));border-radius:50%;color:var(--daily-accent)}.daily-result-score strong{font-size:25px;line-height:1}.daily-result-score strong span{font-size:14px;color:var(--muted)}.daily-result-score>span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.daily-result-kicker{color:var(--daily-accent);font-family:var(--font-mono);font-size:10px;font-weight:800;letter-spacing:.13em}.daily-challenge-result h2{margin:4px 0;font-size:18px}.daily-challenge-result p{margin:0 0 9px;color:var(--muted);font-size:12px}.daily-xp-progress{display:grid;gap:5px}.daily-xp-progress>span,.account-xp-track{display:block;height:7px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--muted) 17%,transparent)}.daily-xp-progress i,.account-xp-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#20b99b,#5d9be6);transition:width .45s ease}.daily-xp-progress small{color:var(--muted);font-size:10px}.daily-challenge-loading{display:grid;min-height:240px;place-items:center;align-content:center;gap:14px;color:var(--muted)}
.account-xp-card{padding:14px;border:1px solid color-mix(in srgb,#168e7e 25%,var(--border));border-radius:14px;background:linear-gradient(115deg,color-mix(in srgb,#168e7e 8%,var(--panel)),var(--panel))}.account-xp-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}.account-xp-heading>div{display:grid;gap:4px}.account-xp-heading span{font-size:12px;font-weight:750}.account-xp-heading strong{color:#168e7e;font-family:var(--font-mono);font-size:11px}.account-xp-heading svg{width:24px;height:24px;fill:none;stroke:#168e7e;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.account-xp-track{margin-bottom:7px}.account-xp-card>small{color:var(--muted);font-size:10px}
.daily-challenge-page .btn{min-height:42px}
html.dark-mode .daily-home-card,html.dark-mode .daily-challenge-heading,html.dark-mode .daily-challenge-result{background:linear-gradient(110deg,color-mix(in srgb,var(--daily-accent) 12%,var(--panel)),var(--panel) 68%)}
html.dark-mode .daily-home-action{background:color-mix(in srgb,var(--daily-accent) 14%,var(--panel))}
@media(max-width:650px){.daily-home-card{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:15px}.daily-home-mark{width:40px;height:40px;border-radius:12px}.daily-home-mark svg{width:23px;height:23px}.daily-home-copy h2{font-size:15px}.daily-home-copy p{font-size:11px}.daily-home-action{grid-column:1/-1;width:100%;justify-content:center;min-height:42px}.daily-challenge-heading{display:grid;gap:14px;padding:18px;border-radius:16px}.daily-challenge-xp-chip{display:grid;grid-template-columns:1fr auto;min-width:0}.daily-challenge-xp-chip span{grid-column:1}.daily-challenge-xp-chip b{grid-column:2;grid-row:1/3;align-self:center}.daily-challenge-options{grid-template-columns:1fr}.daily-challenge-question{padding:16px}.daily-challenge-result{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px}.daily-result-score{width:62px;height:62px}.daily-challenge-result h2{font-size:15px}.daily-challenge-actions{align-items:flex-start;flex-direction:column}.daily-complete-note{padding-left:2px}}
@media(prefers-reduced-motion:reduce){.daily-challenge-option,.daily-xp-progress i,.account-xp-track i{transition:none}}

/* Points / XP leaderboard controls */
.leaderboard-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:14px;border:1px solid var(--border);border-radius:15px;background:var(--panel)}
.leaderboard-metric-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}
.leaderboard-metric-tabs button{min-height:36px;padding:0 15px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:750;cursor:pointer}
.leaderboard-metric-tabs button[aria-selected="true"]{background:color-mix(in srgb,#4385d8 16%,var(--panel));color:var(--ink);box-shadow:0 2px 7px rgba(20,36,59,.1)}
.leaderboard-filter{display:grid;gap:5px;min-width:190px;flex:1}.leaderboard-filter span{color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.leaderboard-filter select{width:100%;min-height:40px;padding:0 32px 0 11px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--ink);font:inherit;font-size:12px}
html.dark-mode .leaderboard-metric-tabs button[aria-selected="true"]{background:color-mix(in srgb,#4385d8 24%,var(--panel));color:var(--ink)}
@media(max-width:620px){.leaderboard-controls{align-items:stretch;gap:10px;padding:11px}.leaderboard-metric-tabs{width:100%}.leaderboard-metric-tabs button{flex:1}.leaderboard-filter{min-width:100%}}
.account-progress-link{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:0;border:0;background:transparent;color:var(--led-1,#198c7c);font-family:inherit;font-size:11px;font-weight:700;line-height:1.4;cursor:pointer}.account-progress-link span{transition:transform .18s ease}.account-progress-link:hover span{transform:translateX(3px)}
.milestone-tabs{display:flex;gap:6px;margin:0 0 18px;padding:5px;border:1px solid var(--border);border-radius:13px;background:var(--panel-2);width:max-content;max-width:100%}.milestone-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-family:inherit;font-size:12px;font-weight:700;line-height:1;cursor:pointer}.milestone-tabs button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:0 2px 8px rgba(25,42,67,.1)}.milestone-tabs .qf-icon{width:16px;height:16px}
.achievement-intro{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;margin:0 0 18px;padding:19px;border:1px solid color-mix(in srgb,#d3a54e 28%,var(--border));border-radius:17px;background:linear-gradient(115deg,color-mix(in srgb,#d3a54e 9%,var(--panel)),var(--panel) 72%)}.achievement-intro-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:color-mix(in srgb,#d3a54e 15%,var(--panel));color:#bd8a2d}.achievement-intro-icon .qf-icon{width:26px;height:26px}.achievement-intro h2{margin:4px 0;font-size:20px;letter-spacing:-.025em}.achievement-intro p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.achievement-intro>strong{color:var(--ink);font-size:24px;text-align:right}.achievement-intro>strong small{display:block;color:var(--muted);font-size:10px;font-weight:650}
.achievement-unlock-backdrop{position:fixed;z-index:15000;inset:0;display:grid;place-items:center;overflow:auto;padding:18px;background:rgba(8,15,27,.68);backdrop-filter:blur(7px);animation:achievement-backdrop-in .2s ease-out both}.achievement-unlock-dialog{position:relative;display:grid;justify-items:center;width:min(100%,460px);max-height:min(88dvh,780px);overflow:auto;padding:24px;border:1px solid color-mix(in srgb,#d9ac51 34%,var(--border));border-radius:22px;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,#d9ac51 12%,var(--panel)),var(--panel) 54%);color:var(--ink);text-align:center;box-shadow:0 28px 90px rgba(0,0,0,.36);animation:achievement-card-in .38s cubic-bezier(.2,.8,.25,1) both}.achievement-unlock-close{position:absolute;z-index:2;top:10px;right:12px;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--muted);font-size:23px;line-height:1;cursor:pointer}.achievement-unlock-confetti{position:absolute;top:-28px;left:50%;width:min(62vw,280px);height:min(62vw,280px);transform:translateX(-50%);pointer-events:none}.achievement-unlock-badge{position:relative;display:grid;place-items:center;width:112px;height:112px;margin:2px 0 7px;border:1px solid color-mix(in srgb,#d9ac51 40%,var(--border));border-radius:50%;background:color-mix(in srgb,#d9ac51 10%,var(--panel));box-shadow:0 10px 35px color-mix(in srgb,#d9ac51 17%,transparent)}.achievement-unlock-badge canvas{width:100%;height:100%}.achievement-unlock-kicker{color:#b48325;font:800 9px/1.4 var(--font-mono,monospace);letter-spacing:.14em}.achievement-unlock-dialog h2{margin:5px 0;font-size:clamp(22px,5vw,29px);letter-spacing:-.035em}.achievement-unlock-dialog>p{max-width:38ch;margin:0 0 15px;color:var(--muted);font-size:12px;line-height:1.5}.achievement-unlock-list{display:grid;gap:7px;width:100%;margin-bottom:16px;text-align:left}.achievement-unlock-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}.achievement-unlock-item>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:color-mix(in srgb,#d9ac51 15%,var(--panel));color:#b48325}.achievement-unlock-item .qf-icon{width:17px;height:17px}.achievement-unlock-item>div{display:grid;gap:3px;min-width:0}.achievement-unlock-item strong{font-size:11px}.achievement-unlock-item small{color:var(--muted);font-size:9px;line-height:1.35}.achievement-unlock-item>b{color:#168a70;font-size:9px}.achievement-unlock-done{min-height:42px;padding-inline:22px}.achievement-unlock-backdrop[hidden]{display:none}
@keyframes achievement-backdrop-in{from{opacity:0}to{opacity:1}}@keyframes achievement-card-in{from{opacity:0;transform:translateY(13px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.achievement-unlock-badge canvas{position:relative;z-index:1}.achievement-unlock-badge-fallback{position:absolute;display:grid;place-items:center;color:#b48325}.achievement-unlock-badge-fallback .qf-icon{width:42px;height:42px}
.weekly-reward-card{--weekly-accent:#c88a35;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;margin:0 0 18px;padding:clamp(15px,2.2vw,21px);border:1px solid color-mix(in srgb,var(--weekly-accent) 30%,var(--border));border-radius:17px;background:linear-gradient(108deg,color-mix(in srgb,var(--weekly-accent) 9%,var(--panel)),var(--panel) 67%);box-shadow:0 9px 25px -22px color-mix(in srgb,var(--weekly-accent) 55%,transparent)}.weekly-reward-card.is-earned{--weekly-accent:#168c75}.weekly-reward-mark{display:grid;place-items:center;width:46px;height:46px;border:1px solid color-mix(in srgb,var(--weekly-accent) 28%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--weekly-accent) 13%,var(--panel));color:var(--weekly-accent)}.weekly-reward-mark svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.weekly-reward-copy{min-width:0}.weekly-reward-copy>span,.weekly-reward-kicker{display:block;margin-bottom:4px;color:var(--weekly-accent);font:800 9px/1.4 var(--font-mono,monospace);letter-spacing:.12em}.weekly-reward-copy h2{margin:0 0 4px;font-size:clamp(15px,1.9vw,18px);letter-spacing:-.02em}.weekly-reward-copy p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.weekly-reward-value{min-width:54px;color:var(--weekly-accent);font:800 17px/1 var(--font-mono,monospace);text-align:right;white-space:nowrap}.weekly-reward-track{height:5px;overflow:hidden;margin-top:10px;border-radius:99px;background:color-mix(in srgb,var(--muted) 16%,transparent)}.weekly-reward-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e3ad56,#c7832d);transition:width .35s ease}.weekly-reward-card.is-earned .weekly-reward-track i{background:linear-gradient(90deg,#20a98b,#55b994)}
.weekly-reward-backdrop{position:fixed;z-index:16000;inset:0;display:grid;place-items:center;overflow:auto;padding:16px;background:rgba(8,15,27,.7);backdrop-filter:blur(7px);animation:achievement-backdrop-in .2s ease-out both}.weekly-reward-dialog{position:relative;display:grid;justify-items:center;width:min(100%,420px);max-height:min(90dvh,680px);overflow:auto;padding:25px;border:1px solid color-mix(in srgb,#d9ac51 38%,var(--border));border-radius:22px;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,#d9ac51 14%,var(--panel)),var(--panel) 56%);color:var(--ink);text-align:center;box-shadow:0 28px 90px rgba(0,0,0,.38);animation:achievement-card-in .38s cubic-bezier(.2,.8,.25,1) both}.weekly-reward-close{position:absolute;z-index:2;top:10px;right:12px;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--muted);font-size:23px;line-height:1;cursor:pointer}.weekly-reward-animation{width:min(72vw,260px);height:min(62vw,220px);margin:2px 0 4px}.weekly-reward-kicker{color:#b48325;font:800 9px/1.4 var(--font-mono,monospace);letter-spacing:.14em}.weekly-reward-dialog h2{margin:5px 0;font-size:clamp(21px,5vw,27px);letter-spacing:-.035em}.weekly-reward-dialog>p{max-width:36ch;margin:0;color:var(--muted);font-size:12px;line-height:1.55}.weekly-reward-xp{display:block;margin:12px 0 18px;color:#168c75;font:850 clamp(35px,9vw,48px)/1 var(--font-mono,monospace);letter-spacing:-.06em}.weekly-reward-xp small{font-size:.42em;letter-spacing:.02em}.weekly-reward-done{min-height:42px;padding-inline:22px}
.weekly-reward-art{position:relative;display:grid;place-items:center;width:min(72vw,260px);height:min(62vw,220px);margin:2px 0 4px}.weekly-reward-art .weekly-reward-animation{position:relative;z-index:1;width:100%;height:100%;margin:0}.weekly-reward-fallback{position:absolute;display:grid;place-items:center;width:98px;height:98px;border:1px solid color-mix(in srgb,#d9ac51 30%,var(--border));border-radius:27px;background:color-mix(in srgb,#d9ac51 12%,var(--panel));color:#b48325;box-shadow:0 12px 34px color-mix(in srgb,#d9ac51 14%,transparent)}.weekly-reward-fallback svg{width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:650px){.weekly-reward-card{grid-template-columns:auto minmax(0,1fr);gap:11px;padding:14px}.weekly-reward-mark{grid-row:1/3;align-self:start;width:40px;height:40px;border-radius:12px}.weekly-reward-mark svg{width:22px;height:22px}.weekly-reward-copy h2{font-size:15px}.weekly-reward-copy p{font-size:10px}.weekly-reward-value{grid-column:2;grid-row:2;justify-self:end;align-self:center;font-size:12px}.weekly-reward-track{margin-top:8px}.weekly-reward-dialog{padding:22px 17px;border-radius:18px}}
@media(prefers-reduced-motion:reduce){.weekly-reward-backdrop,.weekly-reward-dialog{animation:none}.weekly-reward-track i{transition:none}}
.home-seasonal-banner{--seasonal-accent:#18a88d;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:0 0 18px;padding:clamp(14px,2vw,20px);border:1px solid color-mix(in srgb,var(--seasonal-accent) 34%,var(--border));border-radius:16px;background:linear-gradient(105deg,color-mix(in srgb,var(--seasonal-accent) 10%,var(--panel)),var(--panel) 72%);box-shadow:0 9px 24px -21px color-mix(in srgb,var(--seasonal-accent) 58%,transparent)}.home-seasonal-mark,.home-seasonal-animation{display:grid;place-items:center;width:48px;height:48px;flex:none;border:1px solid color-mix(in srgb,var(--seasonal-accent) 30%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--seasonal-accent) 12%,var(--panel));color:var(--seasonal-accent)}.home-seasonal-mark svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.home-seasonal-animation{border:0}.home-seasonal-copy{min-width:0}.home-seasonal-copy>span{display:block;margin-bottom:3px;color:var(--seasonal-accent);font:800 9px/1.4 var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase}.home-seasonal-copy h2{margin:0 0 3px;font-size:clamp(15px,1.9vw,19px);letter-spacing:-.025em}.home-seasonal-copy p{margin:0;color:var(--muted);font-size:11px;line-height:1.5;white-space:pre-line}.home-seasonal-action{border-color:color-mix(in srgb,var(--seasonal-accent) 42%,var(--border));background:color-mix(in srgb,var(--seasonal-accent) 12%,var(--panel));font-size:11px;font-weight:750;white-space:nowrap}.home-seasonal-action span{margin-left:5px;color:var(--seasonal-accent)}html.has-seasonal-campaign .home-kicker{color:var(--seasonal-accent)}html.has-seasonal-campaign .daily-home-card{--daily-accent:var(--seasonal-accent)}html.has-seasonal-campaign .home-study-card .home-study-eyebrow{color:var(--seasonal-accent)}
.home-seasonal-animation-shell{position:relative;overflow:hidden}.home-seasonal-animation-shell svg{position:relative;z-index:0}.home-seasonal-animation{position:absolute;z-index:1;inset:0;width:100%;height:100%;border:0;background:transparent}
@media(max-width:650px){.home-seasonal-banner{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:13px}.home-seasonal-mark,.home-seasonal-animation{width:40px;height:40px;border-radius:12px}.home-seasonal-mark svg{width:22px;height:22px}.home-seasonal-copy h2{font-size:15px}.home-seasonal-copy p{font-size:10px}.home-seasonal-action{grid-column:1/-1;justify-content:center;width:100%;min-height:40px}}
.achievement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.achievement-card{position:relative;display:grid;grid-template-columns:auto 1fr;align-content:start;column-gap:11px;min-height:166px;padding:15px;border:1px solid var(--border);border-radius:15px;background:var(--panel);box-shadow:0 5px 16px rgba(24,38,61,.035)}.achievement-card.is-earned{border-color:color-mix(in srgb,#23a785 34%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,#23a785 6%,var(--panel)),var(--panel) 65%)}.achievement-card-icon{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,#507ed0 13%,var(--panel-2));color:#507ed0}.achievement-card.is-earned .achievement-card-icon{background:color-mix(in srgb,#23a785 16%,var(--panel-2));color:#168a70}.achievement-card-icon .qf-icon{width:21px;height:21px}.achievement-status{justify-self:end;padding:4px 7px;border-radius:99px;background:var(--panel-2);color:var(--muted);font-size:9px;font-weight:750}.achievement-card.is-earned .achievement-status{background:color-mix(in srgb,#23a785 12%,var(--panel));color:#168a70}.achievement-card h3{grid-column:1/-1;margin:13px 0 3px;font-size:14px}.achievement-card p{grid-column:1/-1;min-height:32px;margin:0;color:var(--muted);font-size:11px;line-height:1.45}.achievement-progress{grid-column:1/-1;height:5px;overflow:hidden;margin:12px 0 7px;border-radius:99px;background:color-mix(in srgb,var(--muted) 16%,transparent)}.achievement-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4e82d0,#27a98e);transition:width .35s ease}.achievement-card>small{grid-column:1/-1;color:var(--muted);font-size:10px}.achievement-note{margin:14px 0;color:var(--muted);font-size:11px;line-height:1.5}
.progress-dashboard{max-width:1120px;margin:0 auto;padding:12px 0 52px}.progress-dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 19px;padding:22px 24px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(120deg,color-mix(in srgb,#168e7e 8%,var(--panel)),var(--panel) 70%)}.progress-dashboard-head h1{margin:5px 0;font-size:clamp(1.65rem,4vw,2.3rem)}.progress-dashboard-head p{max-width:60ch;margin:0;color:var(--muted);line-height:1.5}.progress-dashboard-loading{display:grid;min-height:190px;place-items:center;align-content:center;gap:12px;color:var(--muted)}.progress-dashboard-loading p{margin:0;font-size:12px}.progress-dashboard.is-ready>.progress-dashboard-loading{display:none}
.progress-level-card{margin:0 0 14px;padding:20px 22px;border:1px solid color-mix(in srgb,#168e7e 26%,var(--border));border-radius:17px;background:linear-gradient(115deg,color-mix(in srgb,#168e7e 9%,var(--panel)),var(--panel) 75%)}.progress-level-top{display:flex;align-items:center;gap:13px}.progress-level-icon{display:grid;place-items:center;width:45px;height:45px;flex:none;border-radius:14px;background:color-mix(in srgb,#168e7e 13%,var(--panel-2));color:#168e7e}.progress-level-icon .qf-icon{width:24px;height:24px}.progress-level-top>div{display:grid;gap:2px;min-width:0;flex:1}.progress-level-top>div>span{color:#168e7e;font:800 9px/1.4 var(--font-mono,monospace);letter-spacing:.12em}.progress-level-top h2{margin:0;font-size:17px}.progress-level-top small{color:var(--muted);font-size:10px}.progress-level-top>strong{color:#168e7e;font:800 16px/1 var(--font-mono,monospace)}.progress-level-track,.progress-course-track{height:7px;overflow:hidden;border-radius:99px;background:color-mix(in srgb,var(--muted) 17%,transparent)}.progress-level-track{margin-top:15px}.progress-level-track i,.progress-course-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#19a88d,#64a1e9);transition:width .4s ease}.progress-level-card>p{margin:7px 0 0;color:var(--muted);font-size:10px}.progress-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:14px}.progress-stat-card{display:grid;align-content:start;gap:6px;min-width:0;padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--panel)}.progress-stat-card>span{display:grid;place-items:center;width:31px;height:31px;margin-bottom:2px;border-radius:10px;background:color-mix(in srgb,#4d7fcb 12%,var(--panel-2));color:#4d7fcb}.progress-stat-card>span .qf-icon{width:17px;height:17px}.progress-stat-card:nth-child(2)>span{background:color-mix(in srgb,#d8803c 13%,var(--panel-2));color:#d8803c}.progress-stat-card:nth-child(3)>span{background:color-mix(in srgb,#8067c7 13%,var(--panel-2));color:#8067c7}.progress-stat-card:nth-child(4)>span{background:color-mix(in srgb,#19957f 13%,var(--panel-2));color:#19957f}.progress-stat-card>small{color:var(--muted);font-size:10px}.progress-stat-card>strong{overflow:hidden;font-size:clamp(20px,2.4vw,27px);letter-spacing:-.03em;text-overflow:ellipsis;white-space:nowrap}.progress-stat-card>strong i{color:var(--muted);font-size:14px;font-style:normal}.progress-stat-card>em{overflow:hidden;color:var(--muted);font-size:9px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
.progress-detail-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:13px;margin-bottom:13px}.progress-panel{min-width:0;padding:17px;border:1px solid var(--border);border-radius:15px;background:var(--panel)}.progress-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.progress-panel-heading h2{margin:4px 0 0;font-size:16px}.progress-panel-heading>small,.progress-panel-heading>span,.progress-panel-heading>a{color:var(--muted);font-size:10px}.progress-panel-heading>a{color:var(--led-1,#168e7e);text-decoration:none;font-weight:700}.progress-week-chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:9px;height:138px;padding:5px 2px 0}.progress-week-day{display:grid;grid-template-rows:17px 1fr 16px;justify-items:center;gap:4px;height:100%;min-width:0}.progress-week-day>span{color:var(--muted);font-size:9px}.progress-week-day>i{display:flex;align-items:flex-end;justify-content:center;width:min(100%,30px);height:100%;overflow:hidden;border-radius:7px;background:color-mix(in srgb,#168e7e 9%,var(--panel-2));font-style:normal}.progress-week-day>i>b{display:block;width:100%;min-height:3px;border-radius:7px 7px 4px 4px;background:linear-gradient(180deg,#4c9ce0,#18a88d)}.progress-week-day>small{color:var(--muted);font-size:9px}.progress-recent-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}.progress-recent-list li{display:grid;grid-template-columns:31px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 2px;border-bottom:1px solid var(--border)}.progress-recent-list li:last-child{border-bottom:0}.progress-activity-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:color-mix(in srgb,#8067c7 12%,var(--panel-2));color:#8067c7}.progress-activity-icon .qf-icon{width:16px;height:16px}.progress-recent-list li>span:nth-child(2){display:grid;gap:3px;min-width:0}.progress-recent-list li strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.progress-recent-list li small{color:var(--muted);font-size:9px}.progress-recent-list li>b{font-size:11px;font-variant-numeric:tabular-nums}.progress-empty-note{padding:20px 12px;border:1px dashed var(--border);border-radius:11px;color:var(--muted);font-size:11px;line-height:1.5;text-align:center}.progress-courses-panel{margin-bottom:14px}.progress-course-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.progress-course-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;padding:12px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}.progress-course-copy{display:grid;gap:4px;min-width:0}.progress-course-copy>span{color:var(--led-1,#168e7e);font:800 9px/1.3 var(--font-mono,monospace);letter-spacing:.08em}.progress-course-copy>strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.progress-course-row>b{align-self:center;color:var(--led-1,#168e7e);font-size:12px}.progress-course-track{grid-column:1/-1;height:5px}.progress-course-row>small{grid-column:1/-1;color:var(--muted);font-size:9px}.progress-dashboard-footer{display:flex;align-items:center;justify-content:space-between;gap:13px;color:var(--muted);font-size:10px;line-height:1.5}.progress-dashboard-footer>.btn{flex:none;font-size:11px}
@media(max-width:800px){.achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.progress-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.progress-detail-grid{grid-template-columns:1fr}}
@media(max-width:600px){.milestone-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.milestone-tabs button{padding:0 8px;font-size:11px}.achievement-intro{grid-template-columns:auto minmax(0,1fr);gap:11px;padding:15px}.achievement-intro>strong{grid-column:2;display:flex;align-items:baseline;gap:4px;text-align:left;font-size:19px}.achievement-intro>strong small{display:inline}.achievement-intro h2{font-size:17px}.achievement-intro p{font-size:10px}.achievement-grid{grid-template-columns:1fr 1fr;gap:8px}.achievement-card{min-height:164px;padding:11px;column-gap:7px}.achievement-card-icon{width:34px;height:34px;border-radius:10px}.achievement-card h3{font-size:12px}.achievement-card p{font-size:10px}.achievement-unlock-backdrop{padding:10px}.achievement-unlock-dialog{padding:20px 15px;border-radius:18px}.achievement-unlock-badge{width:92px;height:92px}.achievement-unlock-close{top:8px;right:8px}.progress-dashboard-head{align-items:flex-start;flex-direction:column;gap:12px;padding:17px;border-radius:15px}.progress-dashboard-head>.btn{width:100%}.progress-level-card{padding:16px}.progress-stat-grid{gap:8px}.progress-stat-card{padding:12px}.progress-stat-card>strong{font-size:22px}.progress-stat-card>em{white-space:normal}.progress-panel{padding:13px}.progress-panel-heading{align-items:flex-start}.progress-panel-heading>small{text-align:right}.progress-week-chart{height:122px;gap:5px}.progress-course-list{grid-template-columns:1fr}.progress-dashboard-footer{align-items:stretch;flex-direction:column}.progress-dashboard-footer>.btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.account-progress-link span,.achievement-progress i,.progress-level-track i,.progress-course-track i,.achievement-unlock-backdrop,.achievement-unlock-dialog{transition:none;animation:none}}
/* Progress dashboard refreshed to follow the compact, visual Figma layout. */
.progress-dashboard{max-width:1080px;padding:10px 0 54px}
.progress-dashboard-head{align-items:center;margin:0 0 16px;padding:5px 2px;border:0;background:none}
.progress-dashboard-head .downloads-kicker{color:#168e7e;font-size:10px;font-weight:850;letter-spacing:.13em}
.progress-dashboard-head h1{margin:4px 0;font-size:clamp(25px,3vw,34px);letter-spacing:-.035em}
.progress-dashboard-head p{font-size:13px}
.progress-period-chip{display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:0 13px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--ink);font-size:12px;font-weight:750;white-space:nowrap}
.progress-period-chip i{color:var(--muted);font-size:16px;font-style:normal}
.progress-level-card{position:relative;isolation:isolate;min-height:172px;margin:0 0 13px;padding:22px 25px;overflow:hidden;border:1px solid rgba(68,214,201,.27);border-radius:21px;background:radial-gradient(ellipse at 80% 120%,rgba(21,206,184,.42),transparent 48%),linear-gradient(112deg,#073557 0%,#064a68 58%,#08786f 100%);color:#f5fbff;box-shadow:0 10px 25px rgba(9,68,93,.12)}
.progress-level-card::after{position:absolute;z-index:-1;top:-110px;right:18%;width:290px;height:290px;border:1px solid rgba(170,244,231,.12);border-radius:50%;box-shadow:0 0 0 28px rgba(170,244,231,.035),0 0 0 64px rgba(170,244,231,.025);content:""}
.progress-level-copy{position:relative;z-index:1;display:flex;align-items:center;gap:13px;width:min(76%,620px)}
.progress-level-icon{width:50px;height:50px;border:1px solid rgba(180,239,255,.18);border-radius:16px;background:linear-gradient(145deg,#2498e8,#3864db);color:#fff;box-shadow:0 7px 18px rgba(0,0,0,.18)}
.progress-level-icon .qf-icon{width:26px;height:26px}
.progress-level-title{display:grid;gap:3px;min-width:0;flex:1}
.progress-level-title>span{color:#83e4d5;font:800 9px/1.4 var(--font-mono,monospace);letter-spacing:.15em}
.progress-level-title h2{margin:0;color:#fff;font-size:clamp(17px,2.1vw,23px);line-height:1.2}
.progress-level-title small{color:#c8e3f1;font-size:11px}
.progress-level-copy>strong{color:#7af0d8;font:850 15px/1 var(--font-mono,monospace)}
.progress-level-track{position:relative;z-index:1;width:min(72%,590px);height:8px;margin-top:17px;background:rgba(225,246,255,.16)}
.progress-level-track i{background:linear-gradient(90deg,#10d6b4,#47e0e2,#5c9dff);box-shadow:0 0 12px rgba(51,222,206,.35)}
.progress-level-bottom{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;width:min(72%,590px);gap:12px;margin-top:7px}
.progress-level-bottom p{margin:0;color:#c8e3f1;font-size:10px}
.progress-level-bottom>span{color:#d9f4f4;font-size:10px;font-weight:750}
.progress-level-mascot{position:absolute;z-index:0;right:6%;bottom:-20px;width:155px;height:155px;border:4px solid rgba(204,255,249,.58);border-radius:50%;object-fit:cover;object-position:center 42%;box-shadow:0 0 0 10px rgba(123,232,222,.11),0 12px 24px rgba(0,0,0,.22)}
.progress-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.progress-stat-card{position:relative;gap:4px;padding:12px 13px;border:1px solid color-mix(in srgb,var(--progress-accent,#168e7e) 17%,var(--border));border-radius:15px;background:color-mix(in srgb,var(--progress-accent,#168e7e) 5%,var(--panel));box-shadow:0 4px 14px rgba(30,57,89,.035)}
.progress-stat-card:nth-child(1){--progress-accent:#08a98f}.progress-stat-card:nth-child(2){--progress-accent:#7858d5}.progress-stat-card:nth-child(3){--progress-accent:#e59a24}.progress-stat-card:nth-child(4){--progress-accent:#208bd4}
.progress-stat-card>span{width:31px;height:31px;margin-bottom:2px;background:color-mix(in srgb,var(--progress-accent) 14%,var(--panel));color:var(--progress-accent)}
.progress-stat-card>small{font-size:10px;font-weight:650}
.progress-stat-card>strong{color:var(--ink);font-size:22px}
.progress-stat-card>em{font-size:9px}
.progress-detail-grid{grid-template-columns:minmax(0,1.07fr) minmax(270px,.93fr);gap:12px;margin-bottom:12px}
.progress-panel{padding:15px;border-radius:16px;box-shadow:0 4px 16px rgba(30,57,89,.035)}
.progress-panel-heading{margin-bottom:10px}
.progress-panel-heading .downloads-kicker{font-size:9px;letter-spacing:.12em}
.progress-panel-heading h2{font-size:15px}
.progress-courses-panel{margin:0}
.progress-course-list{grid-template-columns:1fr;gap:7px}
.progress-course-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:9px 10px;border-radius:11px;background:color-mix(in srgb,#168e7e 3%,var(--panel-2))}
.progress-course-copy>span{font-size:8px}
.progress-course-copy>strong{font-size:10px}
.progress-course-row>small{font-size:8px;line-height:1.35}
.progress-course-track{height:5px}
.progress-week-chart{height:140px;gap:8px}
.progress-week-day>i{width:min(100%,25px);border-radius:9px;background:color-mix(in srgb,#168e7e 8%,var(--panel-2))}
.progress-week-day>i>b{border-radius:8px;background:linear-gradient(180deg,#18c7b0,#418fef)}
.progress-week-day>span{color:var(--led-1,#168e7e);font-size:9px;font-weight:750}
.progress-recent-panel{margin-bottom:12px}
.progress-recent-list li{padding:9px 3px}
.progress-recent-list li strong{font-size:11px}
.progress-recent-list li small{font-size:9px}
html.dark-mode .progress-stat-card{background:color-mix(in srgb,var(--progress-accent) 10%,var(--panel));border-color:color-mix(in srgb,var(--progress-accent) 24%,var(--border));box-shadow:none}
html.dark-mode .progress-stat-card>span{background:color-mix(in srgb,var(--progress-accent) 20%,var(--panel));color:color-mix(in srgb,var(--progress-accent) 70%,white)}
html.dark-mode .progress-panel{box-shadow:none}
html.dark-mode .progress-course-row{background:color-mix(in srgb,#168e7e 7%,var(--panel))}
@media(max-width:800px){.progress-detail-grid{grid-template-columns:1fr}.progress-course-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.progress-dashboard{padding:5px 0 calc(84px + env(safe-area-inset-bottom))}.progress-dashboard-head{align-items:center;flex-direction:row;gap:8px;margin-bottom:11px;padding:0 1px}.progress-dashboard-head .downloads-kicker{font-size:8px}.progress-dashboard-head h1{font-size:23px}.progress-dashboard-head p{max-width:32ch;font-size:10px;line-height:1.35}.progress-period-chip{min-height:33px;padding:0 9px;border-radius:10px;font-size:10px}.progress-level-card{min-height:158px;padding:17px 15px;border-radius:18px}.progress-level-copy{width:77%;gap:8px}.progress-level-icon{width:39px;height:39px;border-radius:12px}.progress-level-icon .qf-icon{width:21px;height:21px}.progress-level-title>span{font-size:7px}.progress-level-title h2{font-size:16px}.progress-level-title small{font-size:9px}.progress-level-copy>strong{font-size:12px}.progress-level-track,.progress-level-bottom{width:73%}.progress-level-track{height:7px;margin-top:14px}.progress-level-bottom p,.progress-level-bottom>span{font-size:8px}.progress-level-mascot{right:3%;bottom:-9px;width:105px;height:105px;border-width:3px;box-shadow:0 0 0 6px rgba(123,232,222,.11),0 8px 16px rgba(0,0,0,.2)}.progress-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:10px}.progress-stat-card{grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;column-gap:8px;min-height:67px;padding:9px}.progress-stat-card>span{grid-row:1/3;width:29px;height:29px;margin:0}.progress-stat-card>small{align-self:end;font-size:9px}.progress-stat-card>strong{align-self:start;font-size:18px}.progress-stat-card>em{grid-column:2;font-size:8px}.progress-detail-grid{gap:9px;margin-bottom:9px}.progress-panel{padding:11px;border-radius:14px}.progress-panel-heading{align-items:center;gap:6px;margin-bottom:8px}.progress-panel-heading h2{font-size:13px}.progress-panel-heading .downloads-kicker{font-size:8px}.progress-panel-heading>span,.progress-panel-heading>small{font-size:8px}.progress-course-list{grid-template-columns:1fr;gap:6px}.progress-course-row{padding:8px}.progress-course-copy>strong{font-size:10px}.progress-course-row>small{font-size:8px}.progress-week-chart{height:112px;gap:5px}.progress-week-day{grid-template-rows:14px 1fr 14px;gap:3px}.progress-week-day>i{width:min(100%,22px)}.progress-week-day>span,.progress-week-day>small{font-size:8px}.progress-recent-list li{grid-template-columns:27px minmax(0,1fr) auto;gap:7px;padding:8px 1px}.progress-activity-icon{width:26px;height:26px;border-radius:8px}.progress-recent-list li strong{font-size:10px}.progress-recent-list li small{font-size:8px}.progress-dashboard-footer{font-size:9px}}
.qd-free-title .qd-doc-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--qd-accent,#c98e37) 14%,var(--panel));color:var(--qd-accent,#c98e37)}
.qd-live-locked .qd-line-icon{width:16px;height:16px;color:var(--muted)}
.opportunity-category{--opp-accent:#4778d0;border-radius:13px;box-shadow:0 3px 10px rgba(23,36,58,.025)}
.opportunity-category:nth-child(2){--opp-accent:#4778d0}.opportunity-category:nth-child(3){--opp-accent:#168c75}.opportunity-category:nth-child(4){--opp-accent:#765fc1}.opportunity-category:nth-child(5){--opp-accent:#c98e37}
.opportunity-category:hover{border-color:color-mix(in srgb,var(--opp-accent) 45%,var(--border))}
.opportunity-category.is-active{border-color:color-mix(in srgb,var(--opp-accent) 52%,var(--border));background:color-mix(in srgb,var(--opp-accent) 7%,var(--panel));box-shadow:0 5px 15px color-mix(in srgb,var(--opp-accent) 10%,transparent)}
.opportunity-category-icon{background:color-mix(in srgb,var(--opp-accent) 11%,var(--panel-2));color:var(--opp-accent)}
.opportunity-category>span:last-child{align-self:center}
.opportunity-card{border-radius:15px;box-shadow:0 5px 16px rgba(25,35,55,.035)}
.opportunity-card-icon{color:#4778d0}.opportunity-card-meta{align-items:center}.opportunity-card-meta>span{display:inline-flex;align-items:center;gap:4px}.opportunity-card-meta .qf-icon{width:13px;height:13px;color:var(--led-1)}
.opportunity-hero-meta .qf-icon{width:14px;height:14px;margin-right:4px;color:var(--led-1)}
.qf-opportunity-hero-icon{display:block;width:61px;height:61px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 4px 9px rgba(20,36,58,.22))}
html.dark-mode .opportunity-card{box-shadow:none}html.dark-mode .opportunity-category{box-shadow:none}
.btn .qf-icon,.mode-badge .qf-icon,.slide-list-heading .qf-icon,.video-section-label .qf-icon{width:15px;height:15px;margin-right:5px;color:var(--led-1)}
.vl-hero-meta .qf-icon{width:15px;height:15px;margin-right:4px;vertical-align:-3px}
.btn{border-radius:10px;font-weight:650}
.btn.primary{box-shadow:0 5px 14px -10px color-mix(in srgb,var(--led-1) 80%,transparent)}
.btn.primary:hover:not(:disabled){box-shadow:0 8px 17px -10px color-mix(in srgb,var(--led-1) 72%,transparent)}
.home-study-cta{border:1px solid #178f7d;background:linear-gradient(130deg,#147f78,#186b86);box-shadow:0 7px 18px -12px rgba(14,103,111,.64)}
html.dark-mode .home-study-cta{border-color:#248f88;background:linear-gradient(130deg,#16766f,#205e79)}
.opportunity-card-icon .qf-category-icon-svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-attach-icon,.installation-hub-note>span,.weak-spot-title,.pdf-error .icon,.certificate-readiness-icon{display:inline-flex;align-items:center;justify-content:center}
.chat-attach-icon .qf-icon{width:19px;height:19px;color:var(--led-1)}
.chat-attach-btn .qf-icon{width:18px;height:18px;color:var(--led-1)}
.installation-hub-note>span .qf-icon{width:17px;height:17px;color:var(--success)}
.weak-spot-title .qf-icon{width:18px;height:18px;margin-right:6px;color:var(--led-2)}
.pdf-error .icon .qf-icon{width:25px;height:25px;color:var(--led-1)}
.certificate-readiness-icon .qf-icon{width:28px;height:28px;color:var(--led-4)}
.multiplayer-menu-icon{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;border:1px solid color-mix(in srgb,var(--led-1) 23%,var(--border));border-radius:17px;background:color-mix(in srgb,var(--led-1) 10%,var(--panel));color:var(--led-1)}
.multiplayer-menu-icon .qf-hub-icon{width:27px;height:27px}
@media(max-width:620px){.home-study-cta{min-height:46px}}

/* Responsive home hero artwork carousel */
.home-hero{min-height:224px}
.home-hero::after{z-index:0}
.home-hero-text{position:relative;z-index:3;max-width:58%;padding-right:1%}
.home-hero-art{position:absolute;inset:0 0 0 auto;z-index:1;width:62%;overflow:hidden;isolation:isolate}
.home-hero-art{background:linear-gradient(135deg,#142237,#1a3046)}
.home-hero-art-image.is-image-unavailable{display:none}
.home-hero-art-frame{position:absolute;inset:0;overflow:hidden}
.home-hero-art-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;filter:saturate(.92);transition:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 100%)}
.home-hero-art-image.is-active{opacity:.82}
.home-hero-art::after{position:absolute;inset:0;z-index:1;content:"";background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 15%,transparent),transparent 78%),linear-gradient(0deg,color-mix(in srgb,var(--panel) 12%,transparent),transparent 36%);pointer-events:none}
.home-hero-art-controls{position:absolute;right:clamp(15px,2vw,25px);bottom:15px;z-index:2;display:flex;align-items:center;gap:3px;padding:5px 7px;border:1px solid color-mix(in srgb,var(--border) 72%,transparent);border-radius:999px;background:color-mix(in srgb,var(--panel) 76%,transparent);box-shadow:0 4px 14px rgba(15,26,42,.12);backdrop-filter:blur(9px)}
.home-hero-dot{display:grid;place-items:center;width:19px;height:18px;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer}
.home-hero-dot span{display:block;width:6px;height:6px;border-radius:999px;background:color-mix(in srgb,var(--muted) 72%,transparent);transition:width .2s ease,background .2s ease}
.home-hero-dot.is-active span{width:16px;background:var(--led-1)}
.home-hero-dot:focus-visible{outline:2px solid var(--led-1);outline-offset:1px}
html.dark-mode .home-hero-art-image{filter:brightness(.82) saturate(.88)}
html.dark-mode .home-hero-art-image.is-active{opacity:.88}
@media(max-width:900px){.home-hero{min-height:206px}.home-hero-text{max-width:62%}.home-hero-art{width:64%}}
@media(max-width:620px){.home-hero{min-height:196px}.home-hero-text{max-width:100%;padding-right:7%}.home-hero-art{width:76%}.home-hero-art-image.is-active{opacity:.48}html.dark-mode .home-hero-art-image.is-active{opacity:.58}.home-hero-art::after{background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 28%,transparent),transparent 100%),linear-gradient(0deg,color-mix(in srgb,var(--panel) 8%,transparent),transparent 55%)}.home-hero-art-controls{right:10px;bottom:10px;gap:1px;padding:4px 5px}.home-hero-dot{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){.home-hero-art-image,.home-hero-dot span{transition:none!important}}

/* Contextual photo artwork for major learning hubs */
.feature-photo-hero{isolation:isolate}
.feature-photo-hero .vl-hero-copy,.feature-photo-hero .vl-hero-mark{z-index:2}
.feature-hero-photo{position:absolute;inset:0 0 0 auto;z-index:0;display:block;width:67%;height:100%;object-fit:cover;object-position:center;opacity:.34;filter:saturate(.9);pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%)}
html.dark-mode .feature-hero-photo{opacity:.39;filter:brightness(.72) saturate(.86)}
.context-photo-hero{position:relative;display:flex;align-items:center;min-height:190px;margin:0 0 19px;padding:27px clamp(20px,3vw,32px);overflow:hidden;isolation:isolate;border:1px solid color-mix(in srgb,#4778d0 18%,var(--border));border-radius:19px;background:linear-gradient(115deg,var(--panel),color-mix(in srgb,#eaf1fd 25%,var(--panel)));box-shadow:0 10px 28px -23px rgba(24,42,70,.3)}
.context-photo-hero>img{position:absolute;inset:0 0 0 auto;z-index:0;width:59%;height:100%;object-fit:cover;object-position:center 42%;opacity:.68;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 100%)}
.context-photo-copy{position:relative;z-index:2;max-width:67%}
.context-photo-copy h1{margin:7px 0 6px;font:700 clamp(24px,3vw,34px)/1.1 var(--font-display);letter-spacing:-.04em}
.context-photo-copy p{max-width:540px;margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.context-course-chip{display:inline-block;margin-top:10px;padding:6px 9px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--panel) 84%,transparent);color:var(--muted);font-size:10px;font-weight:650}
html.dark-mode .context-photo-hero{border-color:color-mix(in srgb,#83a9f5 24%,var(--border));background:linear-gradient(115deg,#182231,#1c2b3c)}
html.dark-mode .context-photo-hero>img{opacity:.48;filter:brightness(.78) saturate(.86)}
.qd-lobby-hero{position:relative;min-height:190px;padding:24px clamp(18px,3vw,30px);overflow:hidden;border:1px solid color-mix(in srgb,#f59e0b 23%,var(--border));border-radius:19px;background:linear-gradient(115deg,var(--panel),color-mix(in srgb,#fff1cf 20%,var(--panel)))}
.qd-lobby-photo{position:absolute;inset:0 0 0 auto;width:52%;height:100%;object-fit:cover;object-position:center 48%;opacity:.55;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 100%)}
.qd-lobby-hero::after{position:absolute;inset:0;z-index:0;content:"";background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 12%,transparent),transparent 75%);pointer-events:none}
.qd-lobby-hero .qd-hero-icon,.qd-lobby-hero .qd-hero-text{position:relative;z-index:1}
.qd-lobby-hero .qd-hero-text{max-width:720px;padding-right:10px}
html.dark-mode .qd-lobby-hero{border-color:color-mix(in srgb,#e6ab49 24%,var(--border));background:linear-gradient(115deg,#1b2431,#282c35)}
html.dark-mode .qd-lobby-photo{opacity:.42;filter:brightness(.74) saturate(.82)}
.opportunity-hero-art.has-photo{overflow:hidden}
.opportunity-hero-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center 52%}
.opportunity-hero-rocket{position:absolute;right:11px;bottom:11px;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.56);border-radius:50%;background:linear-gradient(145deg,#e5a128,#bd7d12);box-shadow:0 5px 16px rgba(31,39,51,.25);backdrop-filter:blur(6px)}
.opportunity-hero-rocket .qf-opportunity-hero-icon{width:25px;height:25px;filter:none}
/* Opportunity artwork follows the wide, blended hero treatment used elsewhere. */
.opportunity-hero-art.has-photo{position:absolute;inset:0 0 0 auto;z-index:0;display:block;flex:none;width:59%;height:auto;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:none}
.opportunity-hero-art.has-photo::after{position:absolute;inset:0;z-index:1;content:"";background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 24%,transparent),transparent 57%),linear-gradient(0deg,color-mix(in srgb,var(--panel) 17%,transparent),transparent 42%)}
.opportunity-hero-photo{z-index:0;opacity:.62;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%);mask-image:linear-gradient(90deg,transparent 0%,#000 24%)}
.opportunity-hero-art.has-photo .opportunity-hero-rocket{top:auto;right:clamp(14px,2.2vw,28px);bottom:clamp(14px,2.2vw,28px);z-index:2;pointer-events:auto}
.opportunity-hero-copy{z-index:2}
html.dark-mode .opportunity-hero-photo{opacity:.48;filter:brightness(.78) saturate(.84)}
html.dark-mode .opportunity-hero-art.has-photo::after{background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 33%,transparent),transparent 60%),linear-gradient(0deg,color-mix(in srgb,var(--panel) 22%,transparent),transparent 42%)}
@media(max-width:650px){.opportunity-hero-art.has-photo{right:0;width:70%;height:100%;flex:none}.opportunity-hero-photo{opacity:.32;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%)}html.dark-mode .opportunity-hero-photo{opacity:.28}}
@media(max-width:390px){.opportunity-hero-art.has-photo{display:block;width:82%;height:100%}.opportunity-hero-art.has-photo .opportunity-hero-rocket{right:8px;bottom:8px;width:34px;height:34px}.opportunity-hero-photo{opacity:.23}}
@media(max-width:800px){.context-photo-hero{min-height:174px}.context-photo-copy{max-width:72%}}
@media(max-width:600px){.feature-hero-photo{width:100%;opacity:.19;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 50%);mask-image:linear-gradient(90deg,transparent 0%,#000 50%)}html.dark-mode .feature-hero-photo{opacity:.23}.context-photo-hero{min-height:174px;padding:20px 17px;border-radius:16px}.context-photo-copy{max-width:100%;padding-right:8%}.context-photo-hero>img{width:82%;opacity:.26;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 43%);mask-image:linear-gradient(90deg,transparent 0%,#000 43%)}html.dark-mode .context-photo-hero>img{opacity:.3}.context-photo-copy p{max-width:90%;font-size:12px}.qd-lobby-hero{min-height:190px;padding:19px 15px;border-radius:16px;gap:11px}.qd-lobby-photo{width:75%;opacity:.29}.qd-lobby-hero .qd-hero-text{padding-right:clamp(26px,10vw,52px)}html.dark-mode .qd-lobby-photo{opacity:.23}.opportunity-hero-rocket{right:5px;bottom:5px;width:36px;height:36px}.opportunity-hero-rocket .qf-opportunity-hero-icon{width:19px;height:19px}}

/* Keep the four primary destinations inside the mobile viewport. */
@media(max-width:620px){
  .primary-section-nav{box-sizing:border-box;display:flex;justify-content:space-between;gap:5px;padding-inline:8px;overflow:visible}
  .primary-nav-group{box-sizing:border-box;flex:1 1 0;min-width:0}
  .primary-nav-trigger{box-sizing:border-box;width:100%;min-width:0;gap:4px;padding-inline:5px;font-size:clamp(10px,2.5vw,12px);letter-spacing:0}
  .primary-nav-trigger>.qf-icon{width:15px;height:15px;flex:none}
  .primary-nav-chevron{flex:none;font-size:13px}
}
@media(max-width:420px){
  .primary-section-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:7px 10px}
  .primary-nav-group{width:100%}
  .primary-nav-trigger{min-height:38px;justify-content:flex-start;gap:7px;padding-inline:10px;font-size:12px}
  .primary-nav-trigger>.qf-icon{width:17px;height:17px}
  .primary-nav-chevron{margin-left:auto}
}
@media(max-width:600px){
  .announcement-inbox{right:10px;width:calc(100vw - 20px);max-height:min(62dvh,480px);border-radius:14px}
  .announcement-inbox-items{max-height:calc(min(62dvh,480px) - 52px);padding:4px}
  .announcement-card{padding:7px;gap:5px}
  .announcement-card-open{grid-template-columns:48px minmax(0,1fr);gap:8px}
  .announcement-card-media{width:48px;height:48px;border-radius:9px}
  .announcement-card-title{font-size:11px}
  .announcement-card-body{font-size:10px}
  .announcement-card-expand{margin-left:56px;font-size:10px}
}
/* Keep high-contrast dark-filled controls dark in dark mode too. */
html.dark-mode{--action-strong:#365da8;--action-strong-hover:#4773c4}
/* Multiplayer event rounds: focused single-question play with a unique visual arena per mode. */
.event-game-shell{--event-ink:#f1f5fb;--event-muted:#a7b2c5;--event-panel:#111b2a;--event-panel-2:#172438;--event-line:rgba(155,181,214,.16);width:min(1060px,calc(100% - 28px));margin:24px auto 48px;color:var(--event-ink)}
.event-game-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;padding:13px 16px;border:1px solid var(--event-line);border-radius:15px;background:linear-gradient(120deg,#111b2a,#17283c)}
.event-game-top h2{overflow:hidden;margin:0;color:#dce7f8;font-size:14px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.event-game-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px;padding:22px 24px;border:1px solid var(--event-line);border-radius:18px;background:radial-gradient(ellipse at 85% 0%,rgba(72,126,196,.14),transparent 45%),linear-gradient(140deg,#142236,#101927 76%);box-shadow:0 14px 36px rgba(4,10,20,.18)}
.event-game-head .event-game-round-label,.event-game-round-label{color:#64dfc7;font:750 10px/1.4 var(--mono,ui-monospace,monospace);letter-spacing:.1em}
.event-game-head h1{margin:7px 0 4px;font-size:clamp(23px,3vw,31px);letter-spacing:-.035em}
.event-game-head p{max-width:650px;margin:0;color:var(--event-muted);font-size:13px;line-height:1.55}
.event-game-clock{flex:none;min-width:100px;padding:12px 15px;border:1px solid rgba(115,174,240,.25);border-radius:13px;background:rgba(7,14,24,.52);color:#eaf4ff;text-align:center;font:750 25px/1 var(--mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;box-shadow:inset 0 0 20px rgba(83,156,238,.05)}
.event-game-timer-track{height:4px;overflow:hidden;margin:-5px 8px 14px;border-radius:9px;background:rgba(132,158,194,.16)}
.event-game-timer-track span{display:block;width:100%;height:100%;transform-origin:left center;border-radius:inherit;background:linear-gradient(90deg,#39d6b4,#68b9ff);transition:width .35s linear}
.event-game-body{display:grid;gap:14px}
.event-mode-eyebrow{display:flex;align-items:center;gap:8px;color:#8b9db6;font:750 9px/1.4 var(--mono,ui-monospace,monospace);letter-spacing:.1em}
.event-raid-arena{position:relative;display:grid;grid-template-columns:minmax(180px,.72fr) minmax(0,1.5fr);align-items:center;gap:20px;overflow:hidden;padding:18px 24px;border:1px solid rgba(250,154,91,.25);border-radius:20px;background:radial-gradient(ellipse at 18% 55%,rgba(255,111,66,.17),transparent 35%),radial-gradient(ellipse at 90% 4%,rgba(226,78,79,.11),transparent 38%),linear-gradient(135deg,#281d2a,#161c2a 60%,#111a28);box-shadow:0 16px 38px rgba(25,10,19,.18)}
.event-raid-arena:after{position:absolute;right:-45px;bottom:-102px;width:260px;height:180px;border:1px solid rgba(255,177,105,.09);border-radius:50%;box-shadow:0 0 0 24px rgba(255,177,105,.025),0 0 0 50px rgba(255,177,105,.02);content:"";pointer-events:none}
.event-raid-boss-art{position:relative;display:grid;place-items:center;min-height:184px;isolation:isolate}
.event-raid-boss-art:before{position:absolute;z-index:-1;width:154px;height:154px;border-radius:50%;background:radial-gradient(circle,rgba(255,124,62,.23),rgba(255,124,62,0) 70%);content:"";animation:event-boss-aura 3.4s ease-in-out infinite}
.event-raid-boss-art .raid-boss-art{display:block;width:min(100%,230px);height:190px;overflow:visible;filter:drop-shadow(0 12px 16px rgba(246,96,54,.22))}
.event-raid-impact{position:absolute;top:22%;right:20%;color:#fff4b8;font-size:26px;opacity:0;text-shadow:0 0 18px #ff8e55;pointer-events:none}
.event-raid-main{position:relative;z-index:1;min-width:0}
.event-raid-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px}
.event-raid-title-row h2{margin:0;color:#fff1e8;font-size:clamp(20px,2.5vw,27px);letter-spacing:-.03em}
.event-raid-title-row p{margin:4px 0 0;color:#c0a9aa;font-size:12px}
.event-raid-score{display:grid;min-width:68px;justify-items:end;color:#ffd38d}
.event-raid-score strong{font:750 22px/1 var(--mono,ui-monospace,monospace);font-variant-numeric:tabular-nums}
.event-raid-score span{margin-top:4px;color:#af9ca3;font:700 8px var(--mono,ui-monospace,monospace);letter-spacing:.12em}
.event-raid-health>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;color:#c2a8aa;font:750 9px var(--mono,ui-monospace,monospace);letter-spacing:.1em}
.event-raid-health b{color:#fff0db;font-size:12px;font-variant-numeric:tabular-nums}
.event-raid-health>i{display:block;height:11px;overflow:hidden;border:1px solid rgba(255,196,160,.14);border-radius:99px;background:#0b111b;box-shadow:inset 0 2px 4px rgba(0,0,0,.45)}
.event-raid-health em{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffb34f,#ff744c 58%,#df4e59);box-shadow:0 0 15px rgba(255,106,70,.43);transition:width .48s cubic-bezier(.2,.8,.2,1)}
.event-raid-bonus{display:flex;align-items:center;gap:9px;margin-top:13px;padding:9px 11px;border:1px solid rgba(255,194,122,.13);border-radius:11px;background:rgba(255,166,94,.055)}
.event-bonus-medal{display:grid;width:25px;height:25px;flex:none;place-items:center;border-radius:8px;background:rgba(255,190,111,.13);color:#ffca7d}
.event-raid-bonus>span:last-child{display:grid;gap:2px}.event-raid-bonus strong{color:#eed9c4;font-size:10px}.event-raid-bonus small{color:#a89ca5;font-size:9px;line-height:1.4}
.event-raid-arena.is-defeated{border-color:rgba(90,224,179,.36);background:radial-gradient(ellipse at 20% 50%,rgba(71,211,168,.16),transparent 40%),linear-gradient(135deg,#172d31,#151f2c)}
.event-raid-arena.is-defeated .event-raid-boss-art .raid-boss-art{filter:drop-shadow(0 0 20px rgba(89,255,196,.5));animation:event-boss-defeated .65s ease-out both}
.event-summit-hud{overflow:hidden;border:1px solid rgba(111,209,187,.23);border-radius:20px;background:linear-gradient(150deg,#102834,#152b37 58%,#162437);box-shadow:0 16px 38px rgba(4,20,25,.18)}
.event-summit-scene{position:relative;height:clamp(210px,31vw,310px);overflow:hidden;background:radial-gradient(ellipse at 88% 14%,rgba(255,223,148,.22),transparent 13%),linear-gradient(180deg,#164256 0%,#277080 47%,#347b70 100%)}
.event-summit-scene:after{position:absolute;right:-5%;bottom:-32px;left:-5%;height:70px;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#285f50,#1a483e);content:""}
.event-summit-sun{position:absolute;top:13%;right:14%;width:50px;height:50px;border-radius:50%;background:#ffd98b;box-shadow:0 0 0 13px rgba(255,221,157,.08),0 0 55px rgba(255,214,127,.3)}
.event-summit-mountain{position:absolute;inset:0;width:100%;height:100%}
.event-mountain-back{fill:#37647a;opacity:.83}.event-mountain-front{fill:url(#eventMountainFill)}
.event-mountain-trail{fill:none;stroke:#e6c68a;stroke-width:8;stroke-linecap:round;stroke-dasharray:1 0;filter:drop-shadow(0 2px 2px rgba(14,42,39,.3))}
.event-mountain-snow{fill:#eaf5f0;opacity:.9}
.event-summit-peak{position:absolute;top:7%;left:72%;display:grid;justify-items:center;color:#fff}
.event-summit-peak span{padding:4px 7px;border:1px solid rgba(225,244,255,.32);border-radius:7px;background:rgba(12,34,46,.44);font:700 9px var(--mono,ui-monospace,monospace)}
.event-summit-peak b{margin-top:4px;color:#d8f7ed;font:750 8px var(--mono,ui-monospace,monospace);letter-spacing:.14em}
.event-summit-climber{position:absolute;z-index:2;display:grid;justify-items:center;transform:translate(-50%,-50%);will-change:left,top}
.event-summit-climber img{width:42px;height:42px;border:2px solid #effff8;border-radius:50%;background:#e8f7ee;box-shadow:0 5px 13px rgba(7,25,28,.3)}
.event-summit-climber span{margin-top:3px;padding:2px 5px;border-radius:5px;background:#102e36;color:#e3fff6;font:750 7px var(--mono,ui-monospace,monospace);letter-spacing:.1em}
.event-summit-distance{position:absolute;right:15px;bottom:14px;z-index:2;display:grid;justify-items:end;color:#fff}
.event-summit-distance strong{font:750 21px var(--mono,ui-monospace,monospace);text-shadow:0 1px 5px rgba(10,31,35,.35)}
.event-summit-distance strong small{font-size:11px}.event-summit-distance>span{color:#d0e8df;font-size:9px}
.event-summit-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px}
.event-summit-footer>div:first-child{display:grid;gap:5px}.event-summit-footer>div:first-child>strong{color:#e5f6ef;font-size:13px}
.event-summit-stats{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.event-summit-stats span{padding:6px 8px;border:1px solid rgba(177,219,209,.13);border-radius:8px;color:#9db9b3;font-size:9px;white-space:nowrap}
.event-summit-stats b{color:#e1f9ed}
.event-quiz-hud,.event-escape-hud,.event-hearts-hud{display:flex;flex-wrap:wrap;justify-content:space-around;gap:12px;padding:15px;border:1px solid var(--event-line);border-radius:15px;background:linear-gradient(130deg,#142438,#111c2b)}
.event-question-progress{display:flex;align-items:center;gap:4px;padding:4px 2px 0;color:var(--event-muted);font-size:10px}
.event-question-progress i{height:5px;flex:1;border-radius:5px;background:#26364b}.event-question-progress i.is-current{background:#66bda9;box-shadow:0 0 9px rgba(74,215,181,.42)}.event-question-progress i.is-correct{background:#4ed0a4}.event-question-progress i.is-wrong{background:#e8847f}.event-question-progress span{margin-left:8px;white-space:nowrap}
.event-game-question{padding:clamp(18px,3vw,28px);border:1px solid var(--event-line);border-radius:18px;background:linear-gradient(150deg,#172438,#101a29 72%);box-shadow:0 14px 35px rgba(4,10,20,.14)}
.event-question-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.event-question-card-top .event-game-round-label i{padding:0 4px;color:#61728a;font-style:normal}.event-question-counter{color:#8292a9;font:650 10px var(--mono,ui-monospace,monospace)}
.event-game-question h2{margin:14px 0 18px;color:#eef4fc;font-size:clamp(18px,2.3vw,23px);line-height:1.38;letter-spacing:-.02em}
.event-game-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.event-game-option{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 12px;border:1px solid rgba(156,181,215,.16);border-radius:11px;background:rgba(9,17,29,.36);color:#d9e3f1;font-size:12px;line-height:1.4;cursor:pointer;transition:border-color .16s,background .16s,transform .16s}
.event-game-option:hover{transform:translateY(-1px);border-color:rgba(87,201,181,.44);background:rgba(45,142,130,.11)}
.event-game-option:has(input:checked){border-color:#4dc9ad;background:rgba(48,191,160,.12);box-shadow:0 0 0 2px rgba(68,201,173,.08)}
.event-game-option input{width:16px;height:16px;flex:none;margin:0;accent-color:#32c6a1}
.event-option-letter{display:grid;width:25px;height:25px;flex:none;place-items:center;border:1px solid rgba(152,180,214,.18);border-radius:7px;color:#95a8c3;font:750 10px var(--mono,ui-monospace,monospace)}
.event-answer-action{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px;padding-top:14px;border-top:1px solid rgba(158,181,212,.1)}
.event-answer-action>span{color:#91a0b5;font-size:10px;line-height:1.4}.event-answer-action .btn{display:flex;align-items:center;gap:12px;white-space:nowrap}
.event-questions-done{display:flex;align-items:center;gap:14px}.event-questions-done-icon{display:grid;width:42px;height:42px;flex:none;place-items:center;border-radius:13px;background:rgba(58,207,161,.13);color:#71e1b8;font-size:22px}
.event-questions-done h2{margin:0 0 5px;font-size:16px}.event-questions-done p{margin:0;color:var(--event-muted);font-size:11px;line-height:1.5}.event-questions-done>strong{margin-left:auto;color:#a5b6cc;font:700 11px var(--mono,ui-monospace,monospace);white-space:nowrap}
.event-winner-spotlight{position:relative;overflow:hidden;border:1px solid rgba(249,207,122,.3);border-radius:22px;background:radial-gradient(ellipse at 50% 0%,rgba(250,194,92,.16),transparent 60%),linear-gradient(150deg,#24253a,#161d2d)}
.event-game-rank{display:grid;grid-template-columns:32px 34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--event-line)}.event-game-rank img{width:31px;height:31px;border-radius:50%}.event-game-rank strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-game-rank b{color:#9fe6d2;font-size:11px}
.event-game-intermission{padding:clamp(18px,3vw,30px);border:1px solid var(--event-line);border-radius:20px;background:linear-gradient(145deg,#142237,#101927)}
.event-game-intermission>h1{margin:8px 0;font-size:clamp(24px,3vw,34px)}.event-game-intermission>p{color:var(--event-muted);font-size:13px}
.event-game-eliminated{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;border:1px solid rgba(255,139,117,.25);border-radius:12px;background:rgba(235,99,92,.08);color:#ffb5a5}.event-game-eliminated span{font-size:11px}
@keyframes event-boss-aura{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.08);opacity:1}}
@keyframes event-boss-defeated{0%{transform:scale(1)}55%{transform:scale(1.1) rotate(-4deg)}100%{transform:scale(1.04)}}
@media(max-width:680px){.event-game-shell{width:calc(100% - 20px);margin:12px auto 30px}.event-game-head{align-items:flex-start;padding:17px}.event-game-head>div:first-child{min-width:0}.event-game-clock{min-width:76px;padding:10px;font-size:20px}.event-raid-arena{grid-template-columns:110px minmax(0,1fr);gap:10px;padding:12px}.event-raid-boss-art{min-height:144px}.event-raid-boss-art .raid-boss-art{height:145px}.event-mode-eyebrow{font-size:8px}.event-raid-title-row h2{font-size:19px}.event-raid-score{min-width:44px}.event-raid-bonus small{font-size:8px}.event-summit-scene{height:230px}.event-summit-footer{align-items:flex-start;flex-direction:column}.event-summit-stats{justify-content:flex-start}.event-game-options{grid-template-columns:1fr}.event-answer-action{align-items:flex-start;flex-direction:column}.event-answer-action .btn{width:100%;justify-content:center}.event-question-progress{gap:3px}.event-question-progress span{font-size:9px}.event-game-question{padding:17px}.event-questions-done{align-items:flex-start;flex-wrap:wrap}.event-questions-done>strong{margin:0 0 0 auto}}
@media(prefers-reduced-motion:reduce){.event-raid-boss-art:before,.event-raid-arena.is-defeated .raid-boss-art{animation:none!important}.event-game-shell *{scroll-behavior:auto!important;transition-duration:.01ms!important}}
.event-game-head-stats{display:flex;align-items:center;gap:9px;flex:none}
.event-game-my-score{display:grid;min-width:91px;gap:4px;place-items:center;padding:9px 12px;border:1px solid rgba(72,209,176,.24);border-radius:12px;background:rgba(22,122,108,.13);color:#dffcf2}
.event-game-my-score span{color:#87cdb9;font:750 8px var(--mono,ui-monospace,monospace);letter-spacing:.1em}
.event-game-my-score strong{font:750 20px/1 var(--mono,ui-monospace,monospace);font-variant-numeric:tabular-nums}
.event-winner-reveal{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:20px;background:rgba(8,14,26,.78);backdrop-filter:blur(5px);opacity:1;transition:opacity .42s ease}
.event-winner-reveal.is-leaving{opacity:0;pointer-events:none}
.event-winner-reveal-card{position:relative;display:grid;width:min(440px,calc(100vw - 36px));justify-items:center;padding:30px 24px 25px;overflow:hidden;border:1px solid rgba(255,213,126,.42);border-radius:24px;background:radial-gradient(ellipse at 50% 4%,rgba(255,210,112,.22),transparent 54%),linear-gradient(150deg,#202a3e,#151c2c 78%);box-shadow:0 25px 90px rgba(2,7,17,.5),0 0 45px rgba(255,197,88,.13);text-align:center;animation:event-winner-card-in .55s cubic-bezier(.2,.8,.2,1) both}
.event-winner-reveal-card:before,.event-winner-reveal-card:after{position:absolute;top:-65px;width:145px;height:260px;border-radius:50%;background:linear-gradient(180deg,rgba(255,222,148,.18),transparent);content:"";filter:blur(15px);pointer-events:none}
.event-winner-reveal-card:before{left:10%}.event-winner-reveal-card:after{right:10%;transform:rotate(25deg)}
.event-winner-reveal-kicker{position:relative;z-index:1;color:#ffda8c;font:750 10px var(--mono,ui-monospace,monospace);letter-spacing:.16em}
.event-winner-reveal-avatar{position:relative;z-index:1;display:grid;width:104px;height:104px;margin:19px 0 14px;place-items:center;border:3px solid #ffe29b;border-radius:50%;background:#192435;box-shadow:0 0 0 8px rgba(255,213,126,.09),0 0 34px rgba(255,207,103,.47)}
.event-winner-reveal-avatar:after{position:absolute;inset:-13px;border:1px solid rgba(255,219,139,.35);border-radius:50%;content:"";animation:event-winner-glow 2s ease-in-out infinite}
.event-winner-reveal-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.event-winner-reveal-card h2{position:relative;z-index:1;margin:7px 0;color:#fff5dc;font-size:clamp(19px,4vw,26px);line-height:1.3;letter-spacing:-.025em}
.event-winner-reveal-card p{position:relative;z-index:1;margin:3px 0 0;color:#c8d4e4;font-size:13px;font-weight:650}
@keyframes event-winner-card-in{from{transform:translateY(12px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes event-winner-glow{0%,100%{transform:scale(.96);opacity:.6}50%{transform:scale(1.08);opacity:1}}
@media(max-width:680px){.event-game-head-stats{flex-direction:column;align-items:stretch;gap:6px}.event-game-my-score{min-width:76px;padding:7px 8px}.event-game-my-score strong{font-size:17px}.event-winner-reveal-card{padding:25px 18px 22px}.event-winner-reveal-avatar{width:86px;height:86px}}
@media(prefers-reduced-motion:reduce){.event-winner-reveal-card,.event-winner-reveal-avatar:after{animation:none!important}.event-winner-reveal{transition:none}}
.event-escape-game{overflow:hidden;border:1px solid rgba(130,177,218,.2);border-radius:18px;background:linear-gradient(145deg,#152438,#101a29);color:#edf4fb}
.event-escape-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid rgba(160,188,219,.12)}
.event-escape-topline>div:first-child{display:grid;gap:4px}.event-escape-topline>div:first-child>strong{font-size:15px}.event-escape-topline small{color:#9cacc0;font-size:10px}
.event-escape-doors{display:flex;align-items:center;gap:6px}.event-escape-doors>span{margin-right:3px;color:#9caec2;font:750 8px var(--mono,ui-monospace,monospace);letter-spacing:.12em}
.event-escape-doors i{display:grid;width:24px;height:24px;place-items:center;border:1px solid rgba(185,203,223,.2);border-radius:7px;background:#182337;color:#91a0b5;font-size:13px;font-style:normal}.event-escape-doors i.is-open{border-color:rgba(85,223,178,.42);background:rgba(55,199,151,.15);color:#8cf1c4}.event-escape-doors i.is-tried{border-color:rgba(255,145,128,.3);background:rgba(204,98,87,.1);color:#e39a8d}
.event-escape-scene{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:12px;padding:14px;min-height:260px;background:radial-gradient(ellipse at 50% 0,rgba(99,153,197,.11),transparent 66%)}
.event-escape-room{position:relative;min-height:245px;overflow:hidden;border:1px solid rgba(214,192,155,.2);border-radius:14px;background:linear-gradient(180deg,#344356 0%,#455062 68%,#946e57 68%,#785644 100%);box-shadow:inset 0 -5px 0 rgba(40,28,25,.16)}
.event-escape-room:before{position:absolute;inset:0 0 32% 0;background:linear-gradient(140deg,rgba(255,255,255,.05),transparent 46%),repeating-linear-gradient(90deg,transparent 0 96px,rgba(13,24,39,.08) 97px 100px);content:""}
.event-room-window{position:absolute;top:18px;left:25px;display:grid;width:78px;height:52px;grid-template-columns:1fr 1fr;gap:3px;padding:4px;border:4px solid #7e9aaa;border-radius:5px;background:#263648;box-shadow:0 5px 14px rgba(6,12,22,.16)}.event-room-window i{background:linear-gradient(145deg,#bce4ef,#88c2db)}
.event-room-exit{position:absolute;right:16px;bottom:31%;display:grid;width:50px;height:75px;justify-items:center;padding-top:5px;border:3px solid #a97d4c;border-bottom:0;border-radius:26px 26px 0 0;background:linear-gradient(90deg,#553d35,#75513f 52%,#4c3732);box-shadow:0 0 20px rgba(255,214,139,.09)}.event-room-exit span{position:absolute;top:-17px;color:#d8c19d;font:750 7px var(--mono,ui-monospace,monospace);letter-spacing:.15em}.event-room-exit i{position:absolute;right:6px;top:39px;width:4px;height:4px;border-radius:50%;background:#e9c279}
.event-room-furniture{position:absolute;z-index:0;background:#547581;box-shadow:0 8px 8px rgba(22,24,32,.15)}.event-room-sofa{bottom:33%;left:13%;width:84px;height:34px;border-radius:11px 11px 5px 5px}.event-room-sofa:before{position:absolute;right:8px;bottom:-9px;left:8px;height:9px;background:#374b58;content:""}.event-room-table{right:25%;bottom:34%;width:57px;height:7px;border-radius:4px;background:#b48352}.event-room-table:after{position:absolute;top:5px;left:7px;width:4px;height:17px;background:#75543d;box-shadow:39px 0 #75543d;content:""}
.event-escape-person{position:absolute;z-index:2;display:grid;justify-items:center;width:76px;transform-origin:50% 100%;animation:event-room-wander 4.2s ease-in-out var(--wander-delay,0s) infinite alternate}.event-escape-person.is-you .event-escape-head{border-color:#ffdf9b;box-shadow:0 0 0 4px rgba(255,213,119,.16),0 0 17px rgba(255,213,119,.27)}
.event-escape-head{position:relative;z-index:1;width:39px;height:39px;overflow:hidden;border:2px solid #e5edf5;border-radius:50%;background:#d9eaf0;box-shadow:0 3px 8px rgba(18,28,39,.3)}.event-escape-head img{width:100%;height:100%;object-fit:cover}
.event-escape-body{position:relative;display:block;width:28px;height:31px;margin-top:-2px;border-radius:11px 11px 8px 8px;background:linear-gradient(140deg,#5ab7aa,#317e81);box-shadow:inset 0 -6px rgba(24,63,71,.22)}.event-escape-body:after{position:absolute;bottom:-8px;left:5px;width:6px;height:10px;border-radius:0 0 4px 4px;background:#334653;box-shadow:12px 0 #334653;content:""}
.event-escape-person>span{max-width:100%;margin-top:7px;padding:3px 6px;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:5px;background:rgba(17,27,41,.78);color:#f0f5fb;font-size:8px;text-overflow:ellipsis;white-space:nowrap}
.event-escape-empty-room{position:absolute;top:50%;left:50%;color:rgba(242,245,250,.55);font-size:11px;transform:translate(-50%,-50%)}
.event-escape-exit{position:relative;display:flex;align-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:9px;padding:34px 9px 10px;border:1px dashed rgba(131,213,183,.26);border-radius:13px;background:linear-gradient(150deg,rgba(45,142,111,.14),rgba(28,62,64,.13))}.event-escape-exit-title{position:absolute;top:11px;left:11px;color:#a2d9c2;font:750 8px var(--mono,ui-monospace,monospace);letter-spacing:.12em}.event-escape-exit-title b{display:inline-grid;width:17px;height:17px;margin-left:3px;place-items:center;border-radius:50%;background:rgba(80,211,157,.18);color:#a5f1cc}
.event-escape-person.is-escaped{position:relative;left:auto!important;bottom:auto!important;width:60px;animation:none}.event-escape-person.is-escaped .event-escape-head{width:31px;height:31px}.event-escape-person.is-escaped .event-escape-body{width:23px;height:24px}.event-escape-person.is-escaped>span{max-width:60px;font-size:7px}
.event-escape-no-exits{align-self:center;color:#87a396;font-size:9px;line-height:1.4}.event-escape-footnote{padding:0 17px 13px;color:#9cacc0;font-size:10px;line-height:1.45}
@keyframes event-room-wander{0%{transform:translate(0,0)}45%{transform:translate(var(--wander-x),var(--wander-y))}100%{transform:translate(calc(var(--wander-x)*-.65),calc(var(--wander-y)*.6))}}
.event-last-stand{display:grid;grid-template-columns:minmax(150px,.55fr) minmax(0,1.7fr);overflow:hidden;border:1px solid rgba(117,176,222,.22);border-radius:18px;background:linear-gradient(145deg,#15263a,#111a2a);color:#eef5ff}
.event-last-stand-stats{display:grid;align-content:center;gap:8px;padding:18px}.event-last-stand-status{font-size:18px}.event-last-stand-stats small{color:#a0b1c5;font-size:10px;line-height:1.45}.event-last-stand-hearts{display:flex;gap:7px}.event-last-stand-hearts span{color:#ff6f82;font-size:20px;text-shadow:0 2px 12px rgba(255,74,103,.3);transition:opacity .2s,transform .25s}.event-last-stand-hearts span.is-lost{color:#596579;opacity:.42;text-shadow:none;transform:scale(.86)}
.event-last-stand-scene{position:relative;min-height:190px;overflow:hidden;background:linear-gradient(180deg,#a5c8d6 0%,#d4d7cd 67%,#5e827c 68%,#263847 69%)}
.event-city-skyline{position:absolute;right:3%;bottom:33%;left:0;display:flex;align-items:flex-end;justify-content:space-around;height:66px;opacity:.55}.event-city-skyline i{width:12%;height:45px;background:linear-gradient(90deg,#8699a2,#667986)}.event-city-skyline i:nth-child(2){height:62px}.event-city-skyline i:nth-child(3){height:38px}.event-city-skyline i:nth-child(4){height:55px}.event-city-skyline i:nth-child(5){height:48px}
.event-road{position:absolute;right:0;bottom:0;left:0;height:43%;overflow:hidden;background:linear-gradient(180deg,#485462,#303d4d)}.event-road:before{position:absolute;top:4px;right:0;left:0;height:1px;background:rgba(227,233,235,.65);content:""}.event-road-markings{position:absolute;top:50%;left:0;width:200%;border-top:3px dashed rgba(241,223,159,.85);animation:event-road-flow 1.1s linear infinite}
.event-road-player{position:absolute;z-index:2;bottom:8px;left:17%;display:grid;justify-items:center;transition:transform .3s}.event-road-player img{z-index:1;width:38px;height:38px;border:2px solid #f4f7f7;border-radius:50%;background:#dfeced;box-shadow:0 3px 9px rgba(12,23,34,.32)}.event-road-player>i{width:23px;height:31px;margin-top:-3px;border-radius:8px 8px 4px 4px;background:linear-gradient(140deg,#58c5ad,#32827b);box-shadow:inset 0 -5px rgba(17,53,60,.24)}.event-road-player.is-down{transform:translate(-8px,7px) rotate(72deg);transform-origin:50% 90%}
.event-road-car{position:absolute;z-index:3;bottom:2px;left:-160px;width:136px;height:62px;filter:drop-shadow(0 5px 4px rgba(9,14,22,.33))}.event-road-car svg{width:100%;height:100%}.event-last-stand.is-eliminated .event-road-player{filter:grayscale(.65);opacity:.72}
@keyframes event-road-flow{to{transform:translateX(-60px)}}
@media(max-width:680px){.event-escape-scene{grid-template-columns:minmax(0,1fr) 105px;gap:7px;padding:9px;min-height:220px}.event-escape-room{min-height:218px}.event-escape-exit{gap:5px;padding-right:4px;padding-left:4px}.event-escape-topline{align-items:flex-start;flex-direction:column}.event-last-stand{grid-template-columns:110px minmax(0,1fr)}.event-last-stand-stats{gap:6px;padding:12px}.event-last-stand-status{font-size:14px}.event-last-stand-scene{min-height:170px}.event-road-player{left:12%}}
@media(prefers-reduced-motion:reduce){.event-escape-person,.event-road-markings{animation:none!important}.event-escape-person.is-escaped{transform:none!important}}

/* Multiplayer coding challenge editor */
.event-coding-task{padding:clamp(16px,2.5vw,24px);border:1px solid rgba(115,156,199,.2);border-radius:18px;background:linear-gradient(145deg,#162337,#101927 75%);box-shadow:0 14px 32px rgba(4,10,20,.14)}
.event-coding-task-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.event-coding-points{color:#9babc0;font-size:10px}
.event-coding-task>h2{margin:11px 0 7px;color:#edf4fc;font-size:clamp(19px,2.5vw,25px);letter-spacing:-.025em}.event-coding-prompt{max-width:82ch;margin:0 0 17px;color:#bdcad9;font-size:13px;line-height:1.65;white-space:pre-wrap}
.event-code-editor{overflow:hidden;border:1px solid #2c3c53;border-radius:12px;background:#0b1220;box-shadow:0 8px 24px rgba(1,7,16,.24)}
.event-code-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 14px;border-bottom:1px solid #26354a;background:linear-gradient(180deg,#1a2638,#141f30)}
.event-code-file{display:flex;align-items:center;gap:9px;color:#dbe5f2;font-size:11px;font-weight:700}.event-code-file i{width:8px;height:8px;border-radius:50%;background:#62d6b4;box-shadow:0 0 10px rgba(98,214,180,.35)}
.event-code-language{padding:4px 7px;border:1px solid rgba(128,163,206,.2);border-radius:6px;color:#a9bad1;font:700 8px var(--mono,ui-monospace,monospace);letter-spacing:.12em}
.event-code-workspace{display:grid;grid-template-columns:42px minmax(0,1fr);height:clamp(260px,39vh,430px);min-height:240px;background:radial-gradient(ellipse at 90% 0,rgba(30,62,91,.12),transparent 45%),#0b1220}
.event-code-gutter{display:flex;flex-direction:column;overflow:hidden;padding:14px 10px 20px 0;border-right:1px solid rgba(126,153,185,.12);color:#60738e;text-align:right;user-select:none;scrollbar-width:none}.event-code-gutter span{height:22px;flex:none;font:12px/22px var(--mono,ui-monospace,monospace)}
.event-game-code{display:block;width:100%;height:100%;min-height:0;resize:vertical;padding:14px 16px;border:0;border-radius:0;outline:0;background:transparent;color:#dce8f7;caret-color:#5dd9bb;font:13px/22px var(--mono,ui-monospace,monospace);tab-size:4;white-space:pre;overflow:auto;scrollbar-color:#34445b #0b1220}.event-game-code:focus{box-shadow:inset 0 0 0 1px rgba(72,201,174,.24)}.event-game-code:disabled{color:#91a0b4;opacity:.82}
.event-code-footer{display:flex;justify-content:space-between;gap:12px;padding:7px 12px;border-top:1px solid rgba(126,153,185,.12);background:#101a29;color:#8092aa;font:9px var(--mono,ui-monospace,monospace)}
.event-code-submit-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px}.event-code-submit-row>span{color:#91a1b7;font-size:10px}.event-code-submit-row .btn{display:flex;align-items:center;gap:12px}.event-game-submitted{padding:11px 13px;border:1px solid rgba(71,206,161,.23);border-radius:9px;background:rgba(45,173,132,.09);color:#9be4c5;font-size:11px}
@media(max-width:680px){.event-coding-task-heading{align-items:flex-start;flex-direction:column;gap:6px}.event-code-workspace{grid-template-columns:34px minmax(0,1fr);height:clamp(240px,43vh,380px)}.event-code-gutter{padding-right:7px}.event-game-code{padding-right:9px;padding-left:10px;font-size:12px}.event-code-submit-row{align-items:stretch;flex-direction:column}.event-code-submit-row .btn{justify-content:center}}
@media(prefers-reduced-motion:reduce){.event-summit-climber{will-change:auto}}
.event-team-player-picker{position:relative;display:grid;gap:6px}.event-team-player-picker>label{color:var(--text);font-size:12px;font-weight:650}.event-team-player-picker>input{width:100%}
.event-team-player-results{position:absolute;z-index:30;top:100%;right:0;left:0;display:grid;gap:4px;max-height:260px;overflow:auto;margin-top:4px;padding:5px;border:1px solid var(--border);border-radius:11px;background:var(--surface,#fff);box-shadow:0 14px 32px rgba(9,20,35,.2)}.event-team-player-results[hidden],.event-team-player-selected[hidden]{display:none}
.event-team-player-option{display:flex;align-items:center;gap:9px;width:100%;padding:8px;border:0;border-radius:8px;background:transparent;text-align:left;cursor:pointer}.event-team-player-option:hover{background:rgba(63,125,206,.1)}.event-team-player-option img,.event-team-player-selected img{width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover}.event-team-player-option>span,.event-team-player-selected>span{display:grid;gap:3px;min-width:0}.event-team-player-option strong,.event-team-player-selected strong{overflow:hidden;color:var(--text);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.event-team-player-option small,.event-team-player-selected small{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.event-team-player-option b{margin-left:auto;color:var(--primary,#316ee8);font-size:10px}.event-team-player-empty{padding:10px;color:var(--muted);font-size:11px}.event-team-player-selected{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid rgba(53,174,137,.26);border-radius:9px;background:rgba(53,174,137,.08)}.event-team-player-selected b{display:none}.event-team-registration-note{color:var(--muted);font-size:11px;line-height:1.45}
.event-team-collaboration{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:12px;margin-top:14px;padding:13px;border:1px solid rgba(115,156,199,.2);border-radius:15px;background:linear-gradient(145deg,#162337,#101927 78%);color:#e6eef8}
.event-team-roster{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:8px 11px;border:1px solid rgba(136,166,201,.14);border-radius:11px;background:rgba(7,15,26,.25)}.event-team-roster>div:first-child{display:grid;gap:6px;min-width:0}.event-team-roster>div:first-child>strong{overflow:hidden;color:#dbe7f4;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.event-team-avatars{display:flex;flex:none;padding-left:6px}.event-team-avatars img{width:30px;height:30px;margin-left:-6px;border:2px solid #172438;border-radius:50%;object-fit:cover}
.event-team-chat{display:grid;grid-template-rows:auto minmax(78px,120px) auto;gap:8px;min-width:0;padding:9px 11px;border:1px solid rgba(136,166,201,.14);border-radius:11px;background:rgba(7,15,26,.25)}.event-team-chat-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.event-team-chat-heading strong{font-size:11px}.event-team-chat-heading span{color:#899bb2;font-size:9px}.event-team-chat-log{display:flex;flex-direction:column;gap:5px;overflow:auto;padding:3px 2px;scrollbar-color:#34445b transparent}.event-team-chat-message{display:grid;grid-template-columns:minmax(65px,auto) minmax(0,1fr);gap:8px;align-items:baseline;font-size:10px}.event-team-chat-message strong{overflow:hidden;color:#78d9bc;text-overflow:ellipsis;white-space:nowrap}.event-team-chat-message span{overflow-wrap:anywhere;color:#ced9e7;line-height:1.4}.event-team-chat-message.is-mine strong{color:#89baff}.event-team-chat-empty{align-self:center;margin:0;color:#899bb2;font-size:10px}.event-team-chat-form{display:flex;gap:7px}.event-team-chat-form input{width:100%;min-width:0;height:34px;padding:0 9px;border:1px solid rgba(136,166,201,.2);border-radius:8px;background:#0c1523;color:#e8f0fa;font-size:10px}.event-team-chat-form input::placeholder{color:#71839b}.event-team-chat-form .btn{flex:none;min-height:34px;padding:0 11px;font-size:10px}
.event-team-editor-control{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 11px;padding:9px 11px;border:1px solid rgba(106,180,205,.2);border-radius:9px;background:rgba(47,133,148,.08)}.event-team-editor-control>span{color:#a9c6d5;font-size:10px;line-height:1.45}.event-team-editor-control .btn{flex:none}
.event-team-error{display:grid;gap:4px;margin:0 0 12px;padding:10px 12px;border:1px solid rgba(255,130,106,.32);border-radius:10px;background:rgba(151,58,48,.12);color:#f1c5ba}.event-team-error strong{font-size:12px}.event-team-error span,.event-team-error small{overflow-wrap:anywhere;font-size:10px;line-height:1.45}.event-team-error small{color:#d4aa9f}
@media(max-width:680px){.event-team-collaboration{grid-template-columns:minmax(0,1fr);padding:9px}.event-team-roster{min-height:56px}.event-team-chat{grid-template-rows:auto minmax(70px,110px) auto}.event-team-chat-heading span{font-size:8px}.event-team-editor-control{align-items:flex-start;flex-direction:column}.event-team-editor-control .btn{align-self:flex-end}}
/* Student controlled public profiles */
.public-profile-settings-page{max-width:1050px;margin:0 auto;padding:12px 0 48px}.public-profile-settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}.public-profile-settings-head h1{margin:5px 0;font-size:clamp(1.7rem,4vw,2.35rem)}.public-profile-settings-head p{max-width:68ch;margin:0;color:var(--muted);line-height:1.55}.public-profile-settings-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;align-items:start;gap:15px}.public-profile-edit-card,.public-profile-privacy-note{padding:clamp(16px,2.6vw,24px);border:1px solid var(--border);border-radius:17px;background:var(--panel)}.public-profile-identity{display:flex;align-items:center;gap:12px;margin-bottom:19px;padding-bottom:16px;border-bottom:1px solid var(--border)}.public-profile-identity img{width:52px;height:52px;border:2px solid color-mix(in srgb,var(--led-1) 32%,var(--border));border-radius:50%;background:var(--panel-2)}.public-profile-identity div{display:grid;gap:3px}.public-profile-identity strong{font-size:16px}.public-profile-identity span{color:var(--muted);font-size:11px}.public-profile-edit-card>.field{display:grid;gap:7px;margin:0 0 14px}.public-profile-edit-card>.field>span{font-size:12px;font-weight:750}.public-profile-edit-card>.field small{margin-left:5px;color:var(--muted);font-weight:450}.public-profile-edit-card textarea,.public-profile-edit-card input[type=text],.public-profile-edit-card input:not([type]){width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--ink);font:inherit;font-size:13px}.public-profile-edit-card textarea{min-height:78px;resize:vertical}.public-profile-visibility,.public-profile-badge-picker{margin-top:20px;padding-top:17px;border-top:1px solid var(--border)}.public-profile-visibility h2,.public-profile-badge-picker h2{margin:0 0 8px;font-size:15px}.public-profile-visibility-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 1px;border-bottom:1px solid color-mix(in srgb,var(--border) 75%,transparent);cursor:pointer}.public-profile-visibility-row:last-child{border-bottom:0}.public-profile-visibility-row>span{display:grid;gap:3px}.public-profile-visibility-row strong{font-size:12px}.public-profile-visibility-row small,.public-profile-badge-picker p{margin:0;color:var(--muted);font-size:10px;line-height:1.45}.public-profile-visibility-row input{width:18px;height:18px;flex:none;accent-color:var(--led-1);cursor:pointer}.public-profile-badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:7px;margin-top:11px}.public-profile-badge-option{position:relative;display:flex;min-height:78px;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:10px 10px 10px 34px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2);cursor:pointer}.public-profile-badge-option:has(input:checked){border-color:color-mix(in srgb,var(--led-1) 55%,var(--border));background:color-mix(in srgb,var(--led-1) 8%,var(--panel-2))}.public-profile-badge-option input{position:absolute;top:12px;left:10px;width:15px;height:15px;accent-color:var(--led-1)}.public-profile-badge-option>span{color:var(--led-1)}.public-profile-badge-option svg{width:19px;height:19px}.public-profile-badge-option b{font-size:10px;line-height:1.3}.public-profile-no-badges{grid-column:1/-1;padding:14px;border:1px dashed var(--border);border-radius:10px}.public-profile-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:19px;padding-top:14px;border-top:1px solid var(--border)}.public-profile-form-actions>span{flex:1;color:var(--muted);font-size:10px;line-height:1.45}.public-profile-privacy-note{position:sticky;top:16px}.public-profile-lock{display:grid;width:38px;height:38px;place-items:center;border:1px solid color-mix(in srgb,var(--led-1) 28%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--led-1) 9%,var(--panel));color:var(--led-1)}.public-profile-lock svg{width:20px;height:20px}.public-profile-privacy-note h2{margin:12px 0 7px;font-size:16px}.public-profile-privacy-note p{margin:0 0 10px;color:var(--muted);font-size:11px;line-height:1.55}.public-profile-card-backdrop{position:fixed;z-index:10050;inset:0;display:grid;place-items:center;padding:18px;background:rgba(7,13,23,.62);backdrop-filter:blur(5px)}.public-profile-card-dialog{position:relative;width:min(100%,470px);max-height:min(86vh,760px);overflow:auto;padding:23px;border:1px solid var(--border);border-radius:20px;background:var(--panel);color:var(--ink);box-shadow:0 24px 80px rgba(4,11,20,.36);animation:publicProfileEnter .18s ease-out}.public-profile-card-close{position:absolute;top:12px;right:13px;display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--ink);font-size:21px;cursor:pointer}.public-profile-card-identity{display:flex;align-items:center;gap:13px;padding-right:35px}.public-profile-card-identity img{width:66px;height:66px;border:3px solid color-mix(in srgb,var(--led-1) 34%,var(--border));border-radius:50%;background:var(--panel-2)}.public-profile-card-identity h2{margin:3px 0;font-size:21px;overflow-wrap:anywhere}.public-profile-card-bio{margin:17px 0 0;color:var(--ink);font-size:13px;line-height:1.6}.public-profile-card-section{margin-top:18px;padding-top:15px;border-top:1px solid var(--border)}.public-profile-card-section h3{margin:0 0 10px;font-size:12px}.public-profile-card-section>p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.public-profile-interest-tags{display:flex;gap:7px;flex-wrap:wrap}.public-profile-interest-tags span{padding:6px 9px;border:1px solid var(--border);border-radius:999px;background:var(--panel-2);color:var(--muted);font-size:10px}.public-profile-achievements{display:flex;gap:8px;flex-wrap:wrap}.public-profile-achievement{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid color-mix(in srgb,var(--warning) 34%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--warning) 7%,var(--panel-2));font-size:10px}.public-profile-achievement svg{width:16px;height:16px;color:var(--warning)}.public-profile-progress-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.public-profile-progress-stats>div{display:grid;gap:3px;padding:10px 8px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);text-align:center}.public-profile-progress-stats strong{font-size:12px}.public-profile-progress-stats span{color:var(--muted);font-size:9px}.public-profile-card-private{padding:20px 8px 8px;color:var(--muted);font-size:12px;line-height:1.5}.public-profile-card-private h2{color:var(--ink);font-size:18px}@keyframes publicProfileEnter{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.leaderboard-profile-trigger{cursor:pointer}.leaderboard-profile-trigger:focus-visible{outline:3px solid color-mix(in srgb,var(--led-1) 68%,transparent);outline-offset:2px}
@media(max-width:760px){.public-profile-settings-grid{grid-template-columns:1fr}.public-profile-privacy-note{position:static;order:-1;display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:14px}.public-profile-privacy-note .public-profile-lock{grid-row:1/3}.public-profile-privacy-note h2{align-self:end;margin:0 0 4px}.public-profile-privacy-note p{grid-column:2;margin:0}.public-profile-settings-head{align-items:stretch;flex-direction:column}.public-profile-settings-head>.btn{align-self:flex-start}}@media(max-width:520px){.public-profile-edit-card,.public-profile-privacy-note{padding:15px}.public-profile-form-actions{align-items:stretch}.public-profile-form-actions>span{flex-basis:100%}.public-profile-form-actions>.btn{flex:1}.public-profile-card-backdrop{padding:10px}.public-profile-card-dialog{padding:19px 16px;border-radius:16px}.public-profile-card-identity img{width:58px;height:58px}.public-profile-progress-stats{grid-template-columns:1fr}.public-profile-progress-stats>div{grid-template-columns:1fr auto;align-items:center;text-align:left}.public-profile-progress-stats span{grid-column:1}}
.leaderboard-profile-trigger .name::after{display:block;content:"View profile";margin-top:2px;color:var(--muted);font-size:9px;font-weight:500;opacity:0;transition:opacity .15s ease}.leaderboard-profile-trigger:hover .name::after,.leaderboard-profile-trigger:focus-visible .name::after{opacity:1}@media(max-width:760px){.leaderboard-profile-trigger .name::after{opacity:1}}
.course-rep-managed{margin-bottom:15px;padding:17px}.course-rep-managed-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.course-rep-managed-heading h2{margin:3px 0 0;font-size:17px}.course-rep-managed-heading>span{color:var(--muted);font-size:10px}.course-rep-managed-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.course-rep-managed-columns>div{min-width:0;padding:12px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}.course-rep-managed-columns h3{margin:0 0 10px;font-size:11px}.course-rep-managed-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;border-top:1px solid var(--border)}.course-rep-managed-row>span{display:grid;gap:3px;min-width:0}.course-rep-managed-row strong{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.course-rep-managed-row small,.course-rep-managed-empty{margin:0;color:var(--muted);font-size:9px;line-height:1.4}.course-rep-managed-row .btn{flex:none}.account-rep-badge{display:inline-flex;width:max-content;margin-top:3px;padding:3px 7px;border:1px solid color-mix(in srgb,#18a879 35%,var(--border));border-radius:999px;background:color-mix(in srgb,#18a879 10%,var(--panel));color:var(--led-1);font-size:9px;font-weight:800}
@media(max-width:760px){.course-rep-managed-columns{grid-template-columns:1fr}}
@media(max-width:420px){.course-rep-managed{padding:13px}.course-rep-managed-heading{align-items:flex-start;flex-direction:column}}

/* Programme representative application and workspace */
.course-rep-apply-card{grid-column:1/-1;padding:clamp(17px,2.4vw,24px);border:1px solid color-mix(in srgb,var(--led-1) 28%,var(--border));border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--led-1) 7%,var(--panel)),var(--panel) 70%)}
.course-rep-apply-card h2{margin:5px 0 7px;font-size:20px}.course-rep-apply-card>p{max-width:75ch;margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.6}.course-rep-review-pill,.course-rep-approved-badge,.public-profile-rep-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid color-mix(in srgb,#18a879 35%,var(--border));border-radius:999px;background:color-mix(in srgb,#18a879 10%,var(--panel));color:color-mix(in srgb,#18a879 80%,var(--ink));font-size:10px;font-weight:800}.course-rep-review-pill i{width:7px;height:7px;border-radius:50%;background:#e9a337;box-shadow:0 0 0 3px color-mix(in srgb,#e9a337 18%,transparent)}.course-rep-review-note{padding:10px;border-radius:9px;background:color-mix(in srgb,var(--warning) 8%,var(--panel-2))}.course-rep-application-form,.course-rep-tool-form{display:grid;gap:11px}.course-rep-application-form label,.course-rep-tool-form label{display:grid;gap:5px;color:var(--ink);font-size:11px;font-weight:700}.course-rep-application-form input,.course-rep-tool-form input,.course-rep-tool-form select,.course-rep-tool-form textarea{width:100%;min-width:0;padding:10px 11px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--ink);font:inherit;font-size:12px}.course-rep-application-form input:read-only{opacity:.75}.course-rep-tool-form textarea,.course-rep-application-form textarea{resize:vertical}.course-rep-prefilled{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.course-rep-submit-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}.course-rep-form-status{color:var(--muted);font-size:10px;line-height:1.45}.course-rep-workspace{max-width:1180px;margin:0 auto;padding:10px 0 45px}.course-rep-workspace-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:19px;padding:clamp(18px,3vw,27px);border:1px solid color-mix(in srgb,var(--led-1) 24%,var(--border));border-radius:18px;background:linear-gradient(120deg,color-mix(in srgb,var(--led-1) 9%,var(--panel)),var(--panel) 70%)}.course-rep-workspace-head h1{margin:4px 0 7px;font-size:clamp(24px,4vw,34px)}.course-rep-workspace-head p{max-width:72ch;margin:0;color:var(--muted);font-size:12px;line-height:1.6}.course-rep-approved-badge{flex:none}.course-rep-approved-badge svg,.public-profile-rep-badge svg{width:13px;height:13px}.course-rep-workspace-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px}.course-rep-tool-card{display:grid;gap:14px;min-width:0;padding:clamp(15px,2vw,20px);border:1px solid var(--border);border-radius:15px;background:var(--panel)}.course-rep-tool-heading{display:flex;align-items:center;gap:11px}.course-rep-tool-heading h2,.course-rep-more-tools h2{margin:0 0 4px;font-size:16px}.course-rep-tool-heading p,.course-rep-more-tools p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.course-rep-tool-icon{display:grid;width:38px;height:38px;flex:none;place-items:center;border:1px solid color-mix(in srgb,var(--led-1) 25%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--led-1) 9%,var(--panel-2));color:var(--led-1)}.course-rep-tool-icon svg{width:20px;height:20px}.course-rep-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.course-rep-more-tools{align-content:start}.course-rep-more-tools .btn{justify-self:start}.course-rep-push-option{display:flex!important;align-items:flex-start;gap:9px!important;padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2)}.course-rep-push-option input{width:16px;height:16px;flex:none;accent-color:var(--led-1)}.course-rep-push-option span{display:grid;gap:3px}.course-rep-push-option small,.course-rep-tool-form>label>small{color:var(--muted);font-size:10px;font-weight:500}.public-profile-rep-badge{margin-top:5px;width:max-content;max-width:100%;font-size:9px}
@media(max-width:760px){.course-rep-workspace-grid{grid-template-columns:1fr}.course-rep-prefilled{grid-template-columns:repeat(2,minmax(0,1fr))}.course-rep-workspace-head{flex-direction:column}.course-rep-submit-row{align-items:stretch;flex-direction:column}.course-rep-submit-row .btn{width:100%}}
@media(max-width:420px){.course-rep-prefilled,.course-rep-form-row{grid-template-columns:1fr}.course-rep-tool-card{padding:14px}}

/* Quicky Predictor arcade */
.predictor-page{max-width:1120px;margin:0 auto;padding:10px 0 42px}.predictor-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:22px;overflow:hidden;margin:4px 0 20px;padding:clamp(20px,3vw,32px);border:1px solid color-mix(in srgb,var(--led-1) 25%,var(--border));border-radius:22px;background:radial-gradient(ellipse at 95% 8%,color-mix(in srgb,#21c7bc 17%,transparent),transparent 38%),linear-gradient(130deg,color-mix(in srgb,var(--panel) 93%,#15243a),var(--panel));box-shadow:0 16px 42px rgba(24,48,84,.08)}.predictor-hero h1{margin:10px 0 8px;font:700 clamp(29px,4vw,43px)/1.05 var(--font-display);letter-spacing:-.04em}.predictor-hero h1 em{color:var(--led-1);font-style:normal}.predictor-hero p{max-width:600px;margin:0;color:var(--muted);font-size:13px;line-height:1.65}.predictor-eyebrow{color:var(--led-1);font:700 9px/1.2 var(--font-mono);letter-spacing:.16em}.predictor-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.predictor-hero-meta span{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--panel-2) 80%,transparent);color:var(--muted);font-size:10px;font-weight:650}.predictor-hero-meta .qf-icon{width:15px;height:15px;color:var(--led-1)}.predictor-xp-wallet{display:grid;min-width:135px;gap:5px;padding:15px 18px;border:1px solid color-mix(in srgb,var(--led-1) 30%,var(--border));border-radius:15px;background:color-mix(in srgb,var(--panel-2) 85%,transparent);text-align:center}.predictor-xp-wallet span{color:var(--muted);font:700 9px var(--font-mono);letter-spacing:.13em}.predictor-xp-wallet strong{color:var(--led-1);font:700 25px var(--font-display)}.predictor-xp-wallet small{color:var(--muted);font-size:9px}.predictor-list{display:grid;gap:14px}.predictor-card{display:grid;grid-template-columns:minmax(200px,.78fr) minmax(0,1.35fr);overflow:hidden;border:1px solid var(--border);border-radius:17px;background:var(--panel);box-shadow:0 9px 26px rgba(25,42,72,.055)}.predictor-card:not(:has(.predictor-card-art)){grid-template-columns:minmax(0,1fr)}.predictor-card-art{position:relative;min-height:100%;background:var(--panel-2)}.predictor-card-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.predictor-card-main{min-width:0;padding:clamp(15px,2vw,22px)}.predictor-card-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.predictor-status{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font:700 9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.predictor-status i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.6}.predictor-status.is-open{color:var(--led-1)}.predictor-status.is-open i{background:#21bc8b;opacity:1;box-shadow:0 0 0 4px color-mix(in srgb,#21bc8b 17%,transparent)}.predictor-multiplier{padding:6px 9px;border:1px solid color-mix(in srgb,#e2ae43 32%,var(--border));border-radius:999px;background:color-mix(in srgb,#e2ae43 10%,var(--panel-2));color:color-mix(in srgb,#d59a21 78%,var(--ink));font-size:10px;font-weight:750}.predictor-card h2{margin:12px 0 8px;font:700 clamp(19px,2.4vw,25px)/1.2 var(--font-display);letter-spacing:-.025em}.predictor-matchup{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--ink);font-size:12px;font-weight:700}.predictor-matchup b{color:var(--muted);font:600 9px var(--font-mono)}.predictor-draw-chip{padding:4px 7px;border-radius:999px;background:var(--panel-2);color:var(--muted);font-size:9px}.predictor-dates{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;color:var(--muted);font-size:9px}.predictor-video-link{display:inline-block;margin-top:9px;color:var(--led-1);font-size:10px;font-weight:650}.predictor-entry-form{display:grid;gap:11px;margin-top:14px;padding-top:13px;border-top:1px solid var(--border)}.predictor-entry-form fieldset{min-width:0;margin:0;padding:0;border:0}.predictor-entry-form legend,.predictor-stake-label>span:first-child{margin-bottom:7px;color:var(--muted);font-size:10px;font-weight:700}.predictor-options{display:flex;flex-wrap:wrap;gap:7px}.predictor-option{position:relative;display:inline-flex;align-items:center;min-height:38px;padding:7px 11px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--ink);font-size:11px;font-weight:650;cursor:pointer;transition:border-color .15s,background .15s}.predictor-option:has(input:checked){border-color:color-mix(in srgb,var(--led-1) 70%,var(--border));background:color-mix(in srgb,var(--led-1) 12%,var(--panel-2));box-shadow:0 0 0 2px color-mix(in srgb,var(--led-1) 12%,transparent)}.predictor-option input{position:absolute;opacity:0;pointer-events:none}.predictor-option:focus-within{outline:2px solid var(--led-1);outline-offset:2px}.predictor-stake-label{display:flex;align-items:center;justify-content:space-between;gap:10px}.predictor-stake-input{display:flex;align-items:center;gap:8px}.predictor-stake-input input{width:112px;min-height:37px;padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--ink);font:600 12px var(--font-mono)}.predictor-stake-input small{color:var(--muted);font-size:9px}.predictor-payout-preview{color:var(--led-1);font-size:10px;font-weight:700}.predictor-risk-note{margin:-5px 0 0;color:var(--muted);font-size:9px;line-height:1.4}.predictor-entry-actions{display:flex;gap:8px;flex-wrap:wrap}.predictor-entry-actions .btn{min-height:38px;padding:8px 13px;font-size:10px}.predictor-lock-button{border-color:color-mix(in srgb,#e2ae43 40%,var(--border))!important;color:color-mix(in srgb,#bd8415 82%,var(--ink))!important}.predictor-entry-state{display:grid;gap:5px;margin-top:14px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);font-size:10px}.predictor-entry-state span{color:var(--muted);font-size:9px}.predictor-entry-state.is-won{border-color:color-mix(in srgb,#21bc8b 40%,var(--border));background:color-mix(in srgb,#21bc8b 8%,var(--panel-2))}.predictor-entry-state.is-lost{border-color:color-mix(in srgb,#e3796e 34%,var(--border));background:color-mix(in srgb,#e3796e 7%,var(--panel-2))}.predictor-empty{display:grid;justify-items:center;gap:9px;margin:20px 0;padding:clamp(28px,6vw,54px) 18px;border:1px dashed var(--border);border-radius:18px;background:var(--panel);text-align:center}.predictor-empty h2,.predictor-empty h1{margin:0;font:700 19px var(--font-display)}.predictor-empty p{max-width:50ch;margin:0;color:var(--muted);font-size:11px;line-height:1.6}.predictor-empty-icon{display:grid;width:45px;height:45px;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--led-1) 12%,var(--panel-2));color:var(--led-1)}.predictor-empty-icon .qf-icon{width:23px;height:23px}.predictor-error{border-style:solid}.predictor-back-link{display:inline-block;margin-top:16px;color:var(--muted);font-size:10px}
@media(max-width:700px){.predictor-hero{align-items:flex-start;flex-direction:column}.predictor-xp-wallet{grid-template-columns:auto auto;align-items:center;justify-items:start;width:100%;padding:10px 13px;text-align:left}.predictor-xp-wallet strong{grid-row:span 2;font-size:22px}.predictor-xp-wallet small{font-size:8px}.predictor-card{grid-template-columns:1fr!important}.predictor-card-art{min-height:150px;max-height:200px}.predictor-card-art img{position:absolute}.predictor-card-main{padding:15px}}
@media(max-width:400px){.predictor-stake-label{align-items:flex-start;flex-direction:column}.predictor-stake-input{width:100%;justify-content:space-between}.predictor-stake-input input{width:44%}.predictor-entry-actions{display:grid;grid-template-columns:1fr}.predictor-entry-actions .btn{width:100%}}
.predictor-hero-tools{display:grid;justify-items:center;gap:8px;flex:none}.predictor-refresh{min-height:34px;padding:7px 10px;font-size:9px}
.predictor-video-preview{display:block;width:100%;max-height:250px;margin-top:11px;border:1px solid var(--border);border-radius:10px;background:#05080c}
@media(max-width:700px){.predictor-hero-tools{grid-template-columns:minmax(0,1fr) auto;align-items:center;width:100%}}
.predictor-option{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;min-width:min(180px,100%);padding:7px 9px}.predictor-option-image{width:46px;height:36px;border:1px solid var(--border);border-radius:6px;object-fit:cover;background:var(--panel)}.predictor-option-video{display:block;width:84px;height:52px;border:1px solid var(--border);border-radius:6px;object-fit:cover;background:#05080c}.predictor-option:not(:has(.predictor-option-image,.predictor-option-video)){grid-template-columns:minmax(0,1fr)}.predictor-matchup-team{display:inline-flex;align-items:center;gap:7px}.predictor-matchup-image{width:27px;height:27px;flex:none;border:1px solid var(--border);border-radius:50%;object-fit:cover;background:var(--panel-2)}
@media(max-width:480px){.predictor-options{display:grid;grid-template-columns:1fr}.predictor-option{width:100%}}
.predictor-page{max-width:1240px}.predictor-hero{min-height:190px;border-color:rgba(65,157,255,.26);background:radial-gradient(ellipse at 78% 25%,rgba(5,145,255,.25),transparent 36%),radial-gradient(ellipse at 10% 100%,rgba(44,89,213,.18),transparent 48%),linear-gradient(120deg,#09162a,#0d1f38 60%,#071324);color:#f4f8ff}.predictor-hero p,.predictor-hero-meta span{color:#b9cae3}.predictor-eyebrow,.predictor-hero h1 em{color:#47c9ff}.predictor-xp-wallet{border-color:rgba(70,201,255,.3);background:rgba(3,12,25,.58)}.predictor-xp-wallet strong{color:#75e2ff}.predictor-card,.predictor-card:not(:has(.predictor-card-art)){grid-template-columns:minmax(0,1.55fr) minmax(235px,.72fr);align-items:stretch;border-color:rgba(67,142,224,.25);border-radius:19px;background:linear-gradient(145deg,#0a1830,#0d1d35 65%,#0a172b);color:#f3f7ff;box-shadow:0 18px 45px rgba(1,8,20,.24)}.predictor-card-art{grid-column:1;grid-row:1;min-height:190px;max-height:220px;margin:16px 16px 0;overflow:hidden;border:1px solid rgba(72,169,255,.3);border-radius:14px}.predictor-card-art:after{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(3,12,25,.42));content:"";pointer-events:none}.predictor-card-main{grid-column:1;grid-row:2;padding:17px 20px 20px}.predictor-card:not(:has(.predictor-card-art)) .predictor-card-main{grid-row:1}.predictor-card-heading{margin-bottom:4px}.predictor-status,.predictor-card h2,.predictor-matchup{color:#f3f7ff}.predictor-status{letter-spacing:.1em}.predictor-multiplier{border-color:rgba(255,202,55,.34);background:rgba(255,193,36,.12);color:#ffdc65}.predictor-card h2{font-size:clamp(22px,2.5vw,30px)}.predictor-matchup{gap:11px;margin:11px 0 9px}.predictor-matchup b{color:#67d5ff;font-size:12px}.predictor-matchup-image{width:36px;height:36px;border-color:rgba(98,184,255,.45);background:#102744}.predictor-dates{gap:7px 16px;color:#a9bdd7;font-size:10px}.predictor-dates span{display:inline-flex;align-items:center;gap:5px}.predictor-dates .qf-icon{width:13px;height:13px;color:#68ceff}.predictor-entry-form{margin-top:16px;padding:15px;border:1px solid rgba(75,145,220,.24);border-radius:14px;background:rgba(3,13,28,.48)}.predictor-entry-form legend,.predictor-stake-label>span:first-child{color:#c3d4eb;font-size:12px}.predictor-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:9px;margin-top:10px}.predictor-option{display:flex;flex-direction:column;justify-content:center;gap:9px;min-height:98px;padding:9px;border-color:rgba(86,137,194,.26);border-radius:11px;background:linear-gradient(155deg,rgba(21,45,75,.92),rgba(8,23,44,.92));color:#eff6ff;text-align:center;font-size:12px}.predictor-option:has(input:checked){border-color:#1aa5ff;background:linear-gradient(155deg,rgba(10,93,160,.52),rgba(8,35,68,.96));box-shadow:0 0 0 1px rgba(28,162,255,.32),0 8px 24px rgba(0,104,218,.13)}.predictor-option-image{width:48px;height:48px;border-radius:50%;border-color:rgba(115,192,255,.35)}.predictor-option-video{width:min(100%,112px);height:58px;border-color:rgba(115,192,255,.35)}.predictor-option:not(:has(.predictor-option-image,.predictor-option-video)){grid-template-columns:1fr}.predictor-stake-label{margin-top:2px}.predictor-stake-input input{border-color:rgba(94,153,211,.36);background:#09182b;color:#f1f7ff}.predictor-stake-input small,.predictor-risk-note{color:#aabbd2}.predictor-payout-preview{color:#70e8ae;font-size:12px}.predictor-entry-actions{margin-top:3px}.predictor-entry-actions .btn.primary{min-height:43px;border:0;border-radius:10px;background:linear-gradient(100deg,#ffdc32,#ffc523);color:#192238;font-weight:800;box-shadow:0 7px 19px rgba(255,189,25,.17)}.predictor-entry-actions .predictor-lock-button{border-color:rgba(255,207,76,.38)!important;color:#ffdc65!important}.predictor-entry-state{border-color:rgba(94,153,211,.28);background:rgba(3,13,28,.6);color:#f3f7ff}.predictor-entry-state span{color:#b9c9de}.predictor-side-info{grid-column:2;grid-row:1 / span 2;display:grid;align-content:start;gap:11px;padding:16px;border-left:1px solid rgba(76,138,199,.23);background:rgba(4,13,27,.28)}.predictor-card:not(:has(.predictor-card-art)) .predictor-side-info{grid-row:1}.predictor-info-card{padding:14px;border:1px solid rgba(78,142,205,.24);border-radius:13px;background:linear-gradient(145deg,rgba(18,39,66,.88),rgba(8,22,41,.9))}.predictor-info-kicker{display:flex;align-items:center;gap:7px;margin-bottom:11px;color:#96b7de;font:750 9px var(--font-mono);letter-spacing:.1em}.predictor-info-kicker .qf-icon{width:14px;height:14px;color:#62ceff}.predictor-info-card dl{display:grid;gap:9px;margin:0}.predictor-info-card dl div{display:grid;gap:3px}.predictor-info-card dt{color:#8ea5c3;font-size:9px}.predictor-info-card dd{margin:0;color:#eef5ff;font-size:11px;font-weight:650;line-height:1.4}.predictor-how-card ol{display:grid;gap:10px;margin:0;padding:0;list-style:none}.predictor-how-card li{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:8px;color:#bdcce0;font-size:10px;line-height:1.45}.predictor-how-card li i{display:grid;width:21px;height:21px;place-items:center;border-radius:50%;background:#126cce;color:white;font-size:10px;font-style:normal;font-weight:800}.predictor-info-reward{padding:13px 14px;border:1px solid rgba(255,193,36,.25);border-radius:13px;background:linear-gradient(120deg,rgba(255,190,28,.09),rgba(7,25,45,.78))}.predictor-info-reward>span{display:block;color:#c2d0e2;font:700 9px var(--font-mono);letter-spacing:.09em}.predictor-info-reward strong{display:block;margin-top:8px;color:#ffdc65;font:750 23px var(--font-display)}.predictor-info-reward strong small{font-size:11px}.predictor-info-reward p{margin:5px 0 0;color:#aabbd2;font-size:9px;line-height:1.45}.predictor-video-preview{max-width:100%;margin-top:12px;border-color:rgba(84,150,215,.32)}
@media(max-width:760px){.predictor-card,.predictor-card:not(:has(.predictor-card-art)){grid-template-columns:minmax(0,1fr)}.predictor-card-art,.predictor-card-main,.predictor-card:not(:has(.predictor-card-art)) .predictor-card-main{grid-column:1;grid-row:auto}.predictor-card-art{min-height:150px;margin:12px 12px 0}.predictor-card-main{padding:14px}.predictor-side-info,.predictor-card:not(:has(.predictor-card-art)) .predictor-side-info{grid-column:1;grid-row:auto;border-top:1px solid rgba(76,138,199,.23);border-left:0;padding:12px}.predictor-info-card dl{grid-template-columns:repeat(2,minmax(0,1fr))}.predictor-how-card ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.predictor-how-card ol,.predictor-info-card dl{grid-template-columns:1fr}.predictor-card-heading{align-items:flex-start}.predictor-multiplier{font-size:9px}.predictor-entry-form{padding:12px}.predictor-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.predictor-option{min-width:0;min-height:88px;padding:7px 4px;font-size:10px}.predictor-option-video{height:44px}}

/* Quicky Predictor event board and match detail */
.predictor-list-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:26px 0 14px}.predictor-list-toolbar h2{margin:4px 0 0;color:var(--ink);font:750 clamp(23px,3vw,31px) var(--font-display);letter-spacing:-.035em}.predictor-filters{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.predictor-filter-group{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid rgba(85,146,211,.24);border-radius:11px;background:color-mix(in srgb,var(--panel) 88%,#07172a)}.predictor-filter,.predictor-period-filter{min-height:34px;padding:7px 11px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:650 10px var(--font-body);cursor:pointer}.predictor-filter.is-active{background:linear-gradient(135deg,#146fcd,#273f91);color:#fff;box-shadow:0 4px 12px rgba(18,93,189,.23)}.predictor-period-filter{border:1px solid rgba(85,146,211,.24);background:var(--panel);color:var(--ink)}.predictor-event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px}.predictor-event-tile{position:relative;display:flex;min-width:0;min-height:235px;overflow:hidden;padding:17px;border:1px solid rgba(91,156,224,.25);border-radius:17px;background:radial-gradient(ellipse at 80% 0%,rgba(29,115,220,.3),transparent 54%),linear-gradient(135deg,#0c2039,#07152a);color:#f5f8ff;text-align:left;cursor:pointer;isolation:isolate;transition:transform .2s,border-color .2s,box-shadow .2s}.predictor-event-tile:hover,.predictor-event-tile:focus-visible{transform:translateY(-3px);border-color:rgba(75,183,255,.66);box-shadow:0 15px 32px rgba(1,12,28,.26);outline:none}.predictor-list-art,.predictor-event-scrim{position:absolute;z-index:-1;inset:0;width:100%;height:100%}.predictor-list-art{object-fit:cover;object-position:center}.predictor-event-scrim{background:linear-gradient(90deg,rgba(5,15,31,.94),rgba(5,18,37,.69) 58%,rgba(4,15,30,.3)),linear-gradient(0deg,rgba(4,12,25,.83),transparent 57%)}.predictor-event-content{display:flex;width:100%;flex-direction:column;justify-content:space-between;gap:16px}.predictor-event-top,.predictor-tile-bottom{display:flex;align-items:center;justify-content:space-between;gap:9px}.predictor-status{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(120,158,199,.22);border-radius:99px;background:rgba(8,19,35,.72);color:#c4d5ea;font:750 8px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.predictor-status i{width:7px;height:7px;border-radius:50%;background:#91a4bd}.predictor-status.is-live{border-color:rgba(30,220,146,.35);color:#76edbd}.predictor-status.is-live i{background:#2de09c;box-shadow:0 0 0 4px rgba(45,224,156,.14)}.predictor-status.is-upcoming{border-color:rgba(74,176,255,.32);color:#8dd5ff}.predictor-status.is-upcoming i{background:#52bcff}.predictor-status.is-closed i{background:#8290a2}.predictor-multiplier{padding:7px 9px;border:1px solid rgba(255,206,73,.26);border-radius:99px;background:rgba(32,29,20,.66);color:#ffdf78;font:750 9px var(--font-mono)}.predictor-tile-match{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;max-width:100%}.predictor-tile-match>b{color:#70cfff;font:850 11px var(--font-display);letter-spacing:.12em}.predictor-tile-side{display:grid;justify-items:center;gap:7px;min-width:0;text-align:center}.predictor-tile-logo{display:grid;width:58px;height:58px;place-items:center;overflow:hidden;border:1px solid rgba(167,207,245,.34);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(3,16,32,.44));box-shadow:0 6px 20px rgba(0,0,0,.23);object-fit:contain}.predictor-tile-side strong{max-width:100%;overflow:hidden;color:#f6f8fc;font:750 12px var(--font-display);text-overflow:ellipsis;white-space:nowrap}.predictor-side-logo-fallback{color:#d5edff;font:800 16px var(--font-display)}.predictor-tile-bottom{align-items:flex-end;color:#b1c3d9;font-size:9px;line-height:1.45}.predictor-tile-bottom span:first-child{max-width:64%}.predictor-tile-bottom b{padding-left:4px;color:#72d5ff;font-size:14px}.predictor-view-back{display:inline-flex;align-items:center;min-height:36px;margin:4px 0 13px;padding:6px 12px;border:1px solid rgba(94,153,211,.22);border-radius:10px;background:var(--panel);color:var(--ink);font:650 11px var(--font-body);cursor:pointer}.predictor-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,355px);align-items:start;gap:14px}.predictor-detail-main{display:grid;gap:12px;min-width:0}.predictor-showcase{position:relative;display:flex;min-height:clamp(370px,43vw,520px);overflow:hidden;flex-direction:column;align-items:center;justify-content:center;gap:19px;padding:28px;border:1px solid rgba(69,174,255,.32);border-radius:22px;background:radial-gradient(ellipse at 50% 40%,rgba(19,92,158,.5),transparent 48%),linear-gradient(140deg,#0e2745,#061326 70%,#0a1a31);color:#f8fbff;text-align:center;isolation:isolate;box-shadow:0 19px 50px rgba(1,9,22,.28)}.predictor-showcase-image,.predictor-showcase-video,.predictor-showcase-shade{position:absolute;z-index:-1;inset:0;width:100%;height:100%}.predictor-showcase-image,.predictor-showcase-video{object-fit:cover}.predictor-showcase-shade{background:radial-gradient(ellipse at center,rgba(4,13,26,.34),rgba(4,13,26,.56) 60%,rgba(3,10,21,.78)),linear-gradient(0deg,rgba(3,10,21,.84),transparent 65%)}.predictor-showcase-heading{position:absolute;top:18px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:9px}.predictor-showcase h2{position:relative;margin:20px 0 0;color:#f7fbff;font:750 clamp(20px,3vw,29px)/1.15 var(--font-display);text-shadow:0 2px 16px rgba(0,0,0,.45)}.predictor-showdown{position:relative;display:grid;width:min(100%,670px);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(14px,4vw,44px)}.predictor-showdown-team{display:grid;justify-items:center;gap:14px;min-width:0}.predictor-showdown-logo{display:grid;width:clamp(98px,14vw,156px);height:clamp(98px,14vw,156px);place-items:center;overflow:hidden;border:1px solid rgba(177,224,255,.5);border-radius:50%;background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.23),rgba(10,27,48,.42) 75%);box-shadow:0 12px 38px rgba(0,0,0,.28),0 0 32px rgba(44,166,255,.16);object-fit:contain}.predictor-showdown-team strong{max-width:100%;color:#fff;font:750 clamp(13px,2vw,19px) var(--font-display);text-shadow:0 2px 10px #06101f;overflow-wrap:anywhere}.predictor-showdown-logo.predictor-side-logo-fallback{color:#dff4ff;font-size:clamp(22px,4vw,38px)}.predictor-vs{display:grid;width:60px;height:60px;place-items:center;border:1px solid rgba(105,203,255,.42);border-radius:50%;background:linear-gradient(145deg,rgba(20,118,196,.72),rgba(21,40,98,.85));color:#e7f8ff;font:850 13px var(--font-display);letter-spacing:.1em;box-shadow:0 0 30px rgba(28,164,255,.21)}.predictor-showcase-footer{position:absolute;right:20px;bottom:17px;left:20px;display:flex;justify-content:space-between;gap:12px;color:#d4e2f2;font-size:10px}.predictor-detail-below{padding:16px 18px;border:1px solid rgba(85,147,210,.2);border-radius:14px;background:linear-gradient(145deg,#0c1b30,#0a1729);color:#f3f7ff}.predictor-detail-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.predictor-detail-title h3{margin:4px 0 0;font:700 16px var(--font-display)}.predictor-detail-title>span{color:#b8c9df;font-size:10px}.predictor-live-panel{position:sticky;top:14px;display:grid;gap:13px;min-width:0;padding:17px;border:1px solid rgba(77,156,226,.3);border-radius:18px;background:linear-gradient(150deg,#0d2037,#091729 70%,#0b1a2c);color:#f5f8ff;box-shadow:0 16px 42px rgba(1,9,22,.2)}.predictor-live-panel-head{display:flex;align-items:center;justify-content:space-between}.predictor-live-panel-head h2{margin:3px 0 0;font:750 21px var(--font-display)}.predictor-live-dot{width:9px;height:9px;border-radius:50%;background:#23df9b;box-shadow:0 0 0 5px rgba(35,223,155,.12),0 0 15px rgba(35,223,155,.6)}.predictor-vote-stats{display:grid;gap:12px;padding:13px;border:1px solid rgba(87,149,206,.23);border-radius:13px;background:rgba(4,14,27,.56)}.predictor-vote-stats-head,.predictor-vote-row>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.predictor-vote-stats-head strong{font-size:12px}.predictor-vote-stats-head span,.predictor-vote-row small{color:#a8bdd4;font-size:9px}.predictor-vote-row>div:first-child{color:#eaf4ff;font-size:10px}.predictor-vote-row>div:first-child strong{color:#74d7ff;font:750 10px var(--font-mono)}.predictor-vote-track{height:7px;margin-top:6px;overflow:hidden;border-radius:99px;background:rgba(137,166,197,.16)}.predictor-vote-track i{display:block;height:100%;min-width:0;border-radius:inherit;background:linear-gradient(90deg,#14b9c9,#4387ff);transition:width .45s ease}.predictor-vote-row:nth-of-type(3) .predictor-vote-track i{background:linear-gradient(90deg,#a76cff,#e070d1)}.predictor-vote-row small{display:block;margin-top:4px}.predictor-no-votes{margin:0;color:#9fb2c8;font-size:10px}.predictor-live-panel .predictor-entry-form{margin:0;padding:13px;border-color:rgba(88,150,211,.23);background:rgba(5,15,29,.42)}.predictor-live-panel .predictor-entry-form legend,.predictor-live-panel .predictor-stake-label>span:first-child{color:#d9e7f7;font-size:11px}.predictor-live-panel .predictor-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}.predictor-live-panel .predictor-option{min-width:0;min-height:98px;padding:8px 5px;border-radius:10px;font-size:10px}.predictor-choice-visual{display:grid;width:49px;height:49px;place-items:center;overflow:hidden;border:1px solid rgba(129,190,240,.34);border-radius:50%;background:rgba(255,255,255,.04)}.predictor-live-panel .predictor-option-image{width:100%;height:100%;border:0;border-radius:inherit;object-fit:contain}.predictor-live-panel .predictor-side-logo-fallback{font-size:13px}.predictor-live-panel .predictor-stake-input{display:grid;justify-items:end;gap:3px}.predictor-live-panel .predictor-stake-input input{width:112px;max-width:100%}.predictor-live-panel .predictor-payout-preview{font-size:10px}.predictor-live-panel .predictor-risk-note{font-size:9px}.predictor-live-panel .predictor-entry-actions{display:grid;grid-template-columns:1fr}.predictor-live-panel .predictor-entry-actions .btn{width:100%}.predictor-live-panel .predictor-entry-state{margin:0;padding:12px;font-size:11px}.predictor-live-panel .predictor-entry-state span{display:block;margin-top:5px}
@media(max-width:900px){.predictor-detail-layout{grid-template-columns:minmax(0,1fr) 310px}.predictor-live-panel{top:8px;padding:13px}}
@media(max-width:760px){.predictor-list-toolbar{align-items:flex-start;flex-direction:column}.predictor-filters{width:100%;justify-content:space-between}.predictor-filter-group{max-width:100%;overflow:auto}.predictor-filter{padding:7px 8px;white-space:nowrap}.predictor-detail-layout{grid-template-columns:1fr}.predictor-live-panel{position:static;grid-row:1}.predictor-detail-main{grid-row:2}.predictor-showcase{min-height:390px}.predictor-showdown{gap:15px}.predictor-showdown-logo{width:clamp(82px,22vw,130px);height:clamp(82px,22vw,130px)}}
@media(max-width:460px){.predictor-event-grid{grid-template-columns:1fr}.predictor-event-tile{min-height:220px}.predictor-detail-layout{gap:10px}.predictor-live-panel{padding:11px}.predictor-showcase{min-height:340px;padding:18px 12px}.predictor-showcase-heading{top:12px;left:12px;right:12px}.predictor-showcase-heading .predictor-status,.predictor-showcase-heading .predictor-multiplier{font-size:7px;padding:6px}.predictor-showcase h2{max-width:92%;margin-top:34px;font-size:20px}.predictor-showdown{gap:8px}.predictor-showdown-logo{width:76px;height:76px}.predictor-showdown-team{gap:9px}.predictor-showdown-team strong{font-size:12px}.predictor-vs{width:42px;height:42px;font-size:10px}.predictor-showcase-footer{right:11px;bottom:12px;left:11px;font-size:8px}.predictor-live-panel .predictor-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Audio Library browse and player */
.audio-library-browse{margin-top:22px}.audio-library-browse-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 0 15px}.audio-library-browse-head h2{margin:5px 0 4px;font-size:clamp(20px,2.5vw,27px);letter-spacing:-.035em}.audio-library-browse-head p{margin:0;color:var(--muted);font-size:12px}.audio-library-search{display:flex;align-items:center;gap:9px;width:min(100%,320px);min-height:42px;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--muted)}.audio-library-search>span{font-size:21px;line-height:1}.audio-library-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:12px}.audio-library-filters{display:flex;align-items:end;flex-wrap:wrap;gap:10px;padding:13px;border:1px solid var(--border);border-radius:15px;background:color-mix(in srgb,var(--panel) 94%,#a78bfa 6%)}.audio-library-filters label{display:grid;gap:5px;min-width:140px}.audio-library-filters label>span{color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.035em}.audio-library-filters select,.audio-library-player-tools select{min-height:36px;padding:7px 30px 7px 10px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--ink);font:inherit;font-size:11px}.audio-library-free-note{display:flex;align-items:center;gap:7px;margin-left:auto;padding:8px 10px;border:1px solid rgba(155,121,255,.2);border-radius:99px;background:rgba(141,103,236,.075);color:var(--muted);font-size:10px}.audio-library-free-note .qf-icon{width:13px;height:13px;color:#a889ff}.audio-library-results{margin:14px 2px 9px;color:var(--muted);font-size:10px;font-weight:650}.audio-library-course-list{display:grid;gap:13px}.audio-library-course{overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:0 8px 24px rgba(5,10,24,.035)}.audio-library-course-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);background:linear-gradient(110deg,color-mix(in srgb,var(--audio-course-accent) 8%,var(--panel)),var(--panel) 58%)}.audio-library-course-mark{display:grid;flex:none;width:39px;height:39px;place-items:center;border:1px solid color-mix(in srgb,var(--audio-course-accent) 35%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--audio-course-accent) 10%,var(--panel));color:var(--audio-course-accent)}.audio-library-course-mark .qf-icon{width:20px;height:20px}.audio-library-course-head>span:nth-child(2){display:grid;min-width:0;gap:2px}.audio-library-course-head small{color:var(--muted);font-size:9px}.audio-library-course-head strong{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.audio-library-course-head em{color:var(--muted);font-size:9px;font-style:normal}.audio-library-course-programme{max-width:32%;margin-left:auto;color:var(--muted);font-size:9px;text-align:right}.audio-library-episode-list{display:grid;padding:0 12px}.audio-library-episode{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent)}.audio-library-episode:last-child{border-bottom:0}.audio-library-episode-cover{display:grid;width:54px;height:54px;place-items:center;overflow:hidden;border-radius:11px;background:#171127;object-fit:cover}.audio-library-cover-placeholder{border:1px solid rgba(160,127,255,.22);color:#ad91ff}.audio-library-cover-placeholder .qf-icon{width:22px;height:22px}.audio-library-episode-copy{min-width:0}.audio-library-episode-kicker{color:#a889ff;font:750 8px var(--mono);letter-spacing:.1em}.audio-library-episode-copy h3{overflow:hidden;margin:4px 0;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.audio-library-episode-copy p{overflow:hidden;margin:0;color:var(--muted);font-size:10px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}.audio-library-episode-meta{display:block;margin-top:4px;color:var(--muted);font-size:9px}.audio-library-play-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:91px;min-height:34px;padding:0 11px;border:1px solid rgba(157,124,255,.35);border-radius:10px;background:rgba(143,107,235,.09);color:#a98aff;font-size:10px;font-weight:750;cursor:pointer}.audio-library-play-btn:hover{border-color:#a98aff;background:rgba(143,107,235,.16)}.audio-library-play-btn .qf-icon{width:13px;height:13px}.audio-library-episode.is-locked{opacity:.85}.audio-library-episode.is-locked .audio-library-episode-kicker{color:#c59b52}.audio-library-episode.is-locked .audio-library-play-btn{border-color:rgba(224,178,91,.25);background:rgba(224,178,91,.08);color:#d2a952}.audio-library-load-error{display:grid;gap:5px;margin:10px 0;padding:13px;border:1px solid rgba(227,91,112,.25);border-radius:12px;background:rgba(227,91,112,.06);font-size:11px}.audio-library-load-error span{color:var(--muted);line-height:1.5}.audio-library-player{position:sticky;z-index:25;bottom:12px;display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:17px;padding:13px;border:1px solid rgba(162,127,255,.32);border-radius:16px;background:color-mix(in srgb,var(--panel) 92%,#17102d);box-shadow:0 14px 42px rgba(5,8,20,.22);backdrop-filter:blur(18px)}.audio-library-player[hidden]{display:none}.audio-library-player-cover{width:62px;height:62px;border-radius:12px;object-fit:cover;background:#171127}.audio-library-player-main{min-width:0}.audio-library-player-title{display:grid;gap:3px}.audio-library-player-title .vl-eyebrow{color:#a889ff;font-size:8px}.audio-library-player-title strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.audio-library-player-title small{color:var(--muted);font-size:9px}.audio-library-player audio{display:block;width:100%;height:34px;margin-top:6px;accent-color:#9875f4}.audio-library-player-tools{display:flex;align-items:center;gap:10px}.audio-library-player-tools>label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:9px}.audio-library-player-tools select{min-height:31px;padding:5px 23px 5px 7px}.audio-library-transcript{position:relative}.audio-library-transcript summary{padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--ink);font-size:10px;cursor:pointer;white-space:nowrap}.audio-library-transcript[open] .audio-library-transcript-text{position:absolute;right:0;bottom:calc(100% + 9px);width:min(420px,80vw);max-height:48vh;overflow:auto;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:0 12px 35px rgba(0,0,0,.2);color:var(--ink);font-size:11px;line-height:1.65;white-space:pre-wrap}.audio-library-player-close{width:29px;height:29px;border:1px solid var(--border);border-radius:50%;background:var(--panel-2);color:var(--muted);font-size:17px;cursor:pointer}@media(max-width:740px){.audio-library-browse-head{align-items:stretch;flex-direction:column}.audio-library-search{width:100%}.audio-library-free-note{margin-left:0}.audio-library-player{grid-template-columns:48px minmax(0,1fr);gap:9px;padding:10px}.audio-library-player-cover{width:48px;height:48px}.audio-library-player-tools{grid-column:1/-1;justify-content:flex-end}.audio-library-player-main audio{height:31px}}@media(max-width:480px){.audio-library-filters{align-items:stretch}.audio-library-filters label{flex:1 1 calc(50% - 8px);min-width:0}.audio-library-filters label:first-child{flex-basis:100%}.audio-library-course-head{padding:12px}.audio-library-course-programme{display:none}.audio-library-episode{grid-template-columns:43px minmax(0,1fr) auto;gap:8px;padding:11px 0}.audio-library-episode-cover{width:43px;height:43px}.audio-library-episode-copy p{max-width:100%}.audio-library-play-btn{min-width:70px;padding:0 8px}.audio-library-player-tools{gap:6px}.audio-library-player-tools>label{gap:4px}.audio-library-player-tools select{font-size:10px}.audio-library-transcript summary{padding:7px 8px;font-size:9px}}

/* Keep the brand visible on compact screens; use an icon-only mode switch. */
.account-rep-badge[hidden]{display:none!important}
@media(max-width:720px){
  /* Keep the mobile notification inbox visible outside the sticky header. */
  .topbar{gap:8px;justify-content:space-between;overflow:visible}
  .topbar-left{flex:0 0 30px;min-width:30px;gap:0;overflow:visible}
  .topbar-left .brand-mini{flex:0 0 30px;width:30px;min-width:30px}
  .topbar-right{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:6px}
  .topbar .mode-toggle-btn{display:flex;flex:0 0 40px;width:40px;min-width:40px;height:40px;align-items:center;justify-content:center;padding:6px;overflow:hidden}
  .topbar .mode-toggle-btn #modeToggleLabel{display:flex;align-items:center;gap:0;font-size:0;line-height:0}
  #modeToggleLabel .qf-icon{flex:none;width:19px;height:19px}
}
@media(max-width:420px){
  .topbar{gap:6px}
  .topbar-right{gap:4px}
  .topbar .mode-toggle-btn{flex-basis:38px;width:38px;min-width:38px;height:38px}
  .topbar-right>.icon-btn{min-width:40px}
}

.account-founding-badge,.public-profile-founding-badge{display:inline-flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin-top:5px;padding:5px 8px;border:1px solid rgba(238,184,83,.48);border-radius:999px;background:linear-gradient(135deg,rgba(238,184,83,.16),rgba(191,130,39,.08));color:#e9bd63;font-size:9px;font-weight:850;letter-spacing:.015em;box-shadow:inset 0 0 12px rgba(238,184,83,.06)}
.public-profile-founding-badge{font-size:10px}
.account-founding-badge[hidden]{display:none!important}
.achievement-unlock-feature{position:relative;z-index:1;width:min(68vw,230px);aspect-ratio:1;margin:2px 0 13px;overflow:hidden;border:1px solid color-mix(in srgb,#d9ac51 43%,var(--border));border-radius:19px;background:var(--panel-2);box-shadow:0 14px 42px rgba(0,0,0,.2),0 0 30px color-mix(in srgb,#d9ac51 17%,transparent)}
.achievement-unlock-feature>img{display:block;width:100%;height:100%;object-fit:cover}
.achievement-unlock-feature>canvas{position:absolute;right:-7px;bottom:-7px;width:68px;height:68px;pointer-events:none}
.achievement-unlock-confetti{z-index:2}
.achievement-unlock-list{max-height:min(32dvh,300px);overflow:auto}
.achievement-unlock-item{grid-template-columns:48px minmax(0,1fr) auto}
.achievement-unlock-thumb{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.achievement-unlock-share{display:inline-flex;min-height:36px;align-items:center;gap:5px;padding:0 9px;border:1px solid color-mix(in srgb,var(--led-1) 28%,var(--border));border-radius:9px;background:color-mix(in srgb,var(--led-1) 8%,var(--panel));color:var(--led-1);font:750 10px var(--font-display);cursor:pointer}
.achievement-unlock-share:hover{background:color-mix(in srgb,var(--led-1) 15%,var(--panel))}
.achievement-share-backdrop{position:fixed;z-index:15010;inset:0;display:grid;place-items:center;overflow:auto;padding:16px;background:rgba(8,15,27,.76);backdrop-filter:blur(8px)}
.achievement-share-dialog{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:12px;width:min(100%,440px);padding:18px;border:1px solid color-mix(in srgb,var(--led-1) 27%,var(--border));border-radius:18px;background:var(--panel);color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.4)}
.achievement-share-dialog>img{width:88px;height:88px;grid-row:1;border:1px solid var(--border);border-radius:12px;object-fit:cover}
.achievement-share-dialog h2{margin:4px 0;font-size:18px}.achievement-share-dialog p{margin:0;color:var(--muted);font-size:10px;line-height:1.5}
.achievement-share-close{position:absolute;top:7px;right:7px;display:grid;width:30px;height:30px;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--muted);font-size:20px;cursor:pointer}
.achievement-share-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}.achievement-share-actions>.btn{min-height:40px;flex:1 1 110px;justify-content:center;padding-inline:10px;font-size:10px}
@media(max-width:600px){.achievement-unlock-feature{width:min(58vw,185px);border-radius:15px}.achievement-unlock-list{max-height:30dvh}.achievement-unlock-item{grid-template-columns:42px minmax(0,1fr) auto;gap:7px;padding:7px}.achievement-unlock-thumb{width:42px;height:42px}.achievement-unlock-share{min-height:36px;padding-inline:7px;font-size:9px}.achievement-share-backdrop{padding:12px}.achievement-share-dialog{grid-template-columns:72px minmax(0,1fr);gap:10px;padding:15px;border-radius:16px}.achievement-share-dialog>img{width:72px;height:72px}.achievement-share-actions>.btn{flex:1 1 calc(50% - 7px)}}
/* ---------- First profile setup: Quick Fix welcome before the tour ---------- */
.qf-signup-welcome-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 24px;
  background: rgba(232, 240, 250, .78);
  backdrop-filter: blur(9px);
  animation: qfSignupWelcomeFade .24s ease both;
}
.qf-signup-welcome-card {
  position: relative;
  width: min(930px, 100%);
  min-height: 470px;
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  color: #15243b;
  border: 1px solid #d9e5f2;
  border-radius: 27px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(28, 55, 91, .2), 0 3px 12px rgba(28, 55, 91, .08);
  animation: qfSignupWelcomeRise .42s cubic-bezier(.2,.8,.2,1) both;
}
.qf-signup-welcome-close { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #dce5f0; border-radius: 12px; color: #53647b; background: #f6f9fd; font: inherit; font-size: 24px; cursor: pointer; transition: background .18s, color .18s; }
.qf-signup-welcome-close:hover { color: #1269d3; background: #eaf3ff; }
.qf-signup-welcome-layout { display: grid; min-height: 400px; grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr); align-items: stretch; gap: clamp(24px, 4vw, 48px); }
.qf-signup-welcome-buddy-panel { display: grid; min-height: 400px; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; padding: 18px 17px 20px; border: 1px solid #dbe9f7; border-radius: 21px; background: radial-gradient(ellipse at 50% 35%, #fff 0%, #f0f7ff 59%, #e7f1fd 100%); }
.qf-signup-welcome-buddy-label { color: #3979bd; font: 750 10px/1.4 var(--font-mono, ui-monospace, monospace); letter-spacing: .13em; }
.qf-signup-welcome-mascot-stage { position: relative; display: grid; min-height: 300px; place-items: center; overflow: hidden; }
.qf-signup-welcome-mascot-stage:after { position: absolute; right: 12%; bottom: 8px; left: 12%; height: 18px; border-radius: 50%; background: rgba(62, 120, 187, .14); filter: blur(12px); content: ""; pointer-events: none; }
.qf-signup-welcome-mascot-stage canvas { position: relative; z-index: 1; display: block; width: min(100%, 340px); height: 320px; }
.qf-signup-welcome-mascot-status { position: absolute; z-index: 2; right: 8px; bottom: 7px; left: 8px; color: #647b95; font-size: 11px; text-align: center; pointer-events: none; }
.qf-signup-welcome-buddy-caption { display: grid; justify-items: center; gap: 3px; padding-top: 9px; text-align: center; }
.qf-signup-welcome-buddy-caption strong { color: #1c3150; font: 750 20px/1.2 var(--font-display, system-ui); }
.qf-signup-welcome-buddy-caption span { color: #657a93; font-size: 12px; }
.qf-signup-welcome-content { align-self: center; padding: 18px 10px 12px 0; }
.qf-signup-welcome-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 35px; color: #526783; font: 700 9px/1.4 var(--font-mono, ui-monospace, monospace); letter-spacing: .1em; }
.qf-signup-welcome-brand img { width: 42px; height: 42px; border: 1px solid #e1eaf4; border-radius: 12px; object-fit: cover; }
.qf-signup-welcome-brand i { color: #1e83ee; font-style: normal; }
.qf-signup-welcome-kicker { display: block; color: #2477d3; font: 750 10px/1.4 var(--font-mono, ui-monospace, monospace); letter-spacing: .12em; }
.qf-signup-welcome-card h1 { max-width: 430px; margin: 11px 0 12px; color: #172a45; font: 800 clamp(32px, 4.5vw, 46px)/1.05 var(--font-display, system-ui); letter-spacing: -.045em; }
.qf-signup-welcome-card h1 span { color: #1675dc; }
.qf-signup-welcome-content > p { max-width: 410px; margin: 0 0 24px; color: #61748d; font-size: 15px; line-height: 1.65; }
.qf-signup-channel-link { display: flex; align-items: center; gap: 12px; padding: 13px 14px; text-align: left; text-decoration: none; color: #18344d; border: 1px solid #bce9d4; border-radius: 14px; background: #f1fbf6; transition: border-color .2s, transform .2s, background .2s; }
.qf-signup-channel-link:hover { transform: translateY(-2px); border-color: #53c993; background: #e8f9f0; }
.qf-signup-channel-icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 13px; color: #062a1b; background: #5ae6a2; font-size: 22px; }
.qf-signup-channel-link strong, .qf-signup-channel-link small { display: block; }
.qf-signup-channel-link strong { font-size: 14px; }
.qf-signup-channel-link small { margin-top: 3px; color: #658271; font-size: 12px; }
.qf-signup-channel-arrow { margin-left: auto; color: #159560; font-size: 20px; }
.qf-signup-welcome-continue { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: space-between; margin-top: 14px; padding: 14px 18px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(105deg, #1269d3, #258af1); box-shadow: 0 8px 22px rgba(31, 113, 210, .2); font: 750 15px/1 var(--font-display, system-ui); cursor: pointer; transition: transform .18s, box-shadow .18s; }
.qf-signup-welcome-continue:hover { transform: translateY(-1px); box-shadow: 0 11px 26px rgba(31, 113, 210, .26); }
.qf-signup-welcome-continue span { font-size: 21px; }
.qf-signup-welcome-note { display: block; margin-top: 12px; color: #7a8ca3; font-size: 11px; line-height: 1.5; }
@keyframes qfSignupWelcomeFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qfSignupWelcomeRise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .qf-signup-welcome-backdrop { place-items: start center; padding: 14px; }
  .qf-signup-welcome-card { width: min(560px, 100%); min-height: 0; padding: 15px; border-radius: 21px; }
  .qf-signup-welcome-layout { grid-template-columns: 1fr; gap: 18px; }
  .qf-signup-welcome-buddy-panel { min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; padding: 13px 14px 14px; }
  .qf-signup-welcome-mascot-stage { min-height: 220px; }
  .qf-signup-welcome-mascot-stage canvas { width: min(100%, 260px); height: 230px; }
  .qf-signup-welcome-content { padding: 2px 4px 5px; }
  .qf-signup-welcome-brand { margin: 0 0 23px; }
  .qf-signup-welcome-card h1 { max-width: none; font-size: clamp(30px, 8vw, 40px); }
}
@media (max-width: 380px) { .qf-signup-welcome-backdrop { padding: 8px; } .qf-signup-welcome-card { padding: 12px; } .qf-signup-welcome-mascot-stage { min-height: 190px; } .qf-signup-welcome-mascot-stage canvas { height: 200px; } }

/* Final Docs scroll behavior overrides its earlier fixed shell rules. */
.main:has(> .qd-free-workspace){width:100%;max-width:none;padding-inline:clamp(12px,1.5vw,26px)}
.main:has(> .qd-free-workspace) > .qd-free-workspace{width:100%;max-width:none;height:auto;min-height:calc(100dvh - 155px);margin:0;padding-inline:0;overflow:visible!important}
.main:has(> .qd-free-workspace) .qd-docs-nav{position:sticky;top:130px;max-height:calc(100dvh - 145px);overflow:auto}
.main:has(> .qd-free-workspace) .qd-coach-panel{position:sticky;top:130px;max-height:calc(100dvh - 145px);overflow:auto}
.main:has(> .qd-free-workspace) .qd-editor-section{overflow:visible}
.main:has(> .qd-free-workspace) .qd-editor-scroll{overflow:visible;min-height:0}
.qd-editor-page>.qd-editor-content.ProseMirror{min-height:calc(var(--qd-page-height,1123px) - 2 * var(--qd-page-margin,68px));outline:none;cursor:text;white-space:normal}
.qd-editor-page>.qd-editor-content.ProseMirror>*:first-child{margin-top:0}
.qd-editor-page>.qd-editor-content.ProseMirror.is-empty::before{content:attr(data-placeholder);float:left;height:0;color:#98a1af;pointer-events:none}
.qd-editor-page>.qd-editor-content.ProseMirror .ProseMirror-selectednode{outline:2px solid #eaa322;outline-offset:3px}
.qd-editor-page>.qd-editor-content.ProseMirror table{table-layout:fixed;overflow:hidden}
.qd-editor-page>.qd-editor-content.ProseMirror th{font-weight:700;background:#edf2f7}
.qd-editor-page>.qd-editor-content.ProseMirror td,.qd-editor-page>.qd-editor-content.ProseMirror th{vertical-align:top}
.qd-editor-page:focus-within{box-shadow:0 5px 25px rgba(14,20,35,.2),0 0 0 2px rgba(234,163,34,.55)}
.qd-editor-page>.qd-editor-content.ProseMirror h1{margin:0 0 .65em;font-size:2em;line-height:1.15;font-weight:750}
.qd-editor-page>.qd-editor-content.ProseMirror h2{margin:1.1em 0 .55em;font-size:1.55em;line-height:1.25;font-weight:720}
.qd-editor-page>.qd-editor-content.ProseMirror h3{margin:1em 0 .45em;font-size:1.2em;line-height:1.3;font-weight:700}
.qd-editor-page>.qd-editor-content.ProseMirror a{color:#1769aa;text-decoration:underline;text-underline-offset:2px}
.qd-editor-page>.qd-editor-content.ProseMirror .qd-equation-line{margin:1em 0;padding:7px 12px;border-block:1px solid #d8e0ec;text-align:center;font-family:"Cambria Math",serif;font-size:1.15em}
.qd-tool-btn.is-active{border-color:color-mix(in srgb,#eaa322 38%,var(--border));background:color-mix(in srgb,#eaa322 12%,var(--panel));color:var(--ink)}
.qd-tool-btn:disabled{opacity:.42;cursor:not-allowed}
.qd-ribbon-select select:focus-visible,.qd-tool-btn:focus-visible{outline:2px solid #36b8f4;outline-offset:2px}
@media(max-width:700px){.qd-editor-page>.qd-editor-content.ProseMirror{min-height:calc(78vh - 50px)}}
@media(max-width:980px){.main:has(> .qd-free-workspace) .qd-docs-nav,.main:has(> .qd-free-workspace) .qd-coach-panel{position:static;top:auto;max-height:none;overflow:visible}}
@media(max-width:700px){.main:has(> .qd-free-workspace)>.qd-free-workspace{min-height:0}.main:has(> .qd-free-workspace) .qd-docs-nav,.main:has(> .qd-free-workspace) .qd-coach-panel{position:static;max-height:none;overflow:visible}}
@media(max-width:700px){.main:has(> .qd-free-workspace){padding-inline:10px}}

/* Keep the account drawer independent from route-specific workspace layouts.
   Quicky Docs uses a full-screen editor and its responsive flex/grid rules can
   otherwise leave the fixed drawer with a visible shell but a collapsed body. */
.account-panel[hidden],
.account-backdrop[hidden] {
  display: none !important;
}
.account-panel:not([hidden]) {
  display: flex !important;
  position: fixed !important;
  inset: 0 0 0 auto !important;
  z-index: 12000 !important;
  width: min(420px, 100vw) !important;
  max-width: 100vw !important;
  height: 100vh;
  height: 100dvh;
  flex-direction: column !important;
  overflow: hidden !important;
  color: var(--ink) !important;
  background: var(--panel) !important;
  visibility: visible !important;
}
.account-panel:not([hidden]) > .account-panel-inner {
  display: flex !important;
  position: relative;
  z-index: 1;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  color: var(--ink);
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-overflow-scrolling: touch;
}
.account-panel:not([hidden]) > .account-panel-inner > * {
  flex-shrink: 0;
  visibility: visible !important;
  opacity: 1 !important;
}
.account-backdrop:not([hidden]) {
  z-index: 11999 !important;
}
@media(max-width:720px) {
  .account-panel:not([hidden]) { width: 100vw !important; }
}

/* Quicky Lessons course view and the Slides / Past Questions switch. */
.course-material-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2) 76%, transparent);
}
#modeToggleBtn[hidden] { display: none !important; }
.course-material-switch > span {
  padding: 0 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.course-material-switch button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: 650 11px var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}
.course-material-switch button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--led-1) 28%, var(--border));
  background: color-mix(in srgb, var(--led-1) 12%, var(--panel));
  color: var(--ink);
}
.course-lessons-page { width: 100%; max-width: 1320px; margin: 0 auto; padding-bottom: 32px; }
.course-lessons-hero {
  position: relative;
  display: flex;
  min-height: 240px;
  align-items: center;
  overflow: hidden;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid color-mix(in srgb, var(--row-color) 30%, var(--border));
  border-radius: 22px;
  background: radial-gradient(ellipse at 93% 8%, color-mix(in srgb, var(--row-color) 21%, transparent), transparent 42%), linear-gradient(120deg, color-mix(in srgb, var(--row-color) 9%, var(--panel)), var(--panel) 66%);
}
.course-lessons-hero-copy { position: relative; z-index: 1; max-width: 720px; }
.course-lessons-kicker { color: var(--led-1); font: 750 10px var(--font-mono); letter-spacing: .12em; }
.course-lessons-hero h1 { margin: 9px 0; font: 750 clamp(28px, 4.2vw, 44px)/1.08 var(--font-display); letter-spacing: -.04em; }
.course-lessons-hero-copy > p { max-width: 58ch; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.course-lessons-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.course-lessons-hero-tags span { padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--panel) 78%, transparent); color: var(--muted); font-size: 10px; font-weight: 650; }
.course-lessons-hero-art { position: absolute; right: 7%; display: grid; width: 142px; height: 142px; place-items: center; border: 1px solid color-mix(in srgb, var(--row-color) 42%, var(--border)); border-radius: 38px; background: color-mix(in srgb, var(--row-color) 11%, var(--panel)); box-shadow: 0 20px 60px color-mix(in srgb, var(--row-color) 12%, transparent); transform: rotate(7deg); }
.course-lessons-hero-art span { color: color-mix(in srgb, var(--row-color) 70%, var(--led-1)); font: 800 72px var(--font-display); }
.course-lessons-hero-art i,.course-lessons-hero-art b { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--row-color); box-shadow: 0 0 24px color-mix(in srgb, var(--row-color) 55%, transparent); }
.course-lessons-hero-art i { top: 15px; right: 17px; }
.course-lessons-hero-art b { bottom: 18px; left: 17px; width: 8px; height: 8px; }
.course-lessons-list-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin: 26px 2px 14px; }
.course-lessons-list-head h2 { margin: 5px 0 0; font: 700 24px var(--font-display); }
.course-lessons-materials { display: inline-flex; align-items: center; gap: 8px; }
.course-lessons-empty { display: grid; justify-items: center; gap: 10px; min-height: 265px; padding: 35px 20px; border: 1px dashed var(--border); border-radius: 18px; background: color-mix(in srgb, var(--panel) 78%, transparent); text-align: center; }
.course-lessons-empty-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid color-mix(in srgb, var(--led-1) 35%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--led-1) 11%, var(--panel)); color: var(--led-1); font-size: 23px; }
.course-lessons-empty h2 { margin: 4px 0 0; font: 700 19px var(--font-display); }
.course-lessons-empty p { max-width: 58ch; margin: 0 0 5px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.course-lessons-list-head>div>p{margin:6px 0 0;color:var(--muted);font-size:12px}.course-lessons-topics{display:grid;gap:12px}.course-lesson-topic{overflow:hidden;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--panel) 82%,transparent)}.course-lesson-topic-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:17px 19px;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer}.course-lesson-topic-head>span{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 11px}.course-lesson-topic-head small{grid-column:1/-1;color:var(--led-1);font:750 9px var(--font-mono);letter-spacing:.1em}.course-lesson-topic-head b{font:700 17px var(--font-display)}.course-lesson-topic-head em{color:var(--muted);font-size:10px;font-style:normal}.course-lesson-topic-head>i{color:var(--muted);font-size:19px;transition:transform .2s}.course-lesson-topic[data-topic-open] .course-lesson-topic-head>i{transform:rotate(180deg)}.course-lesson-topic-list{display:grid;gap:8px;padding:0 12px 12px}.course-lesson-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--panel-2) 76%,transparent);transition:transform .16s,border-color .16s}.course-lesson-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--row-color) 50%,var(--border))}.course-lesson-card-index{display:grid;width:36px;height:36px;place-items:center;border:1px solid color-mix(in srgb,var(--row-color) 32%,var(--border));border-radius:11px;background:color-mix(in srgb,var(--row-color) 11%,var(--panel));color:var(--row-color);font:750 12px var(--font-mono)}.course-lesson-card.is-complete .course-lesson-card-index{color:#fff;background:#2fac8f}.course-lesson-card-copy{display:grid;gap:4px;min-width:0}.course-lesson-card-copy b{font-size:13px}.course-lesson-card-copy small{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.course-lesson-card-meta{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:10px}.course-lesson-card-meta i{color:var(--led-1);font-size:18px;font-style:normal}.student-lesson-page{width:100%;max-width:1120px;margin:0 auto;padding:0 0 36px}.student-lesson-crumb{display:flex;justify-content:space-between;gap:10px;margin:0 0 15px;color:var(--muted);font-size:11px}.student-lesson-crumb a{color:var(--led-1);font-weight:700}.student-lesson-hero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:19px;padding:24px;border:1px solid var(--border);border-radius:19px;background:linear-gradient(120deg,color-mix(in srgb,var(--row-color) 12%,var(--panel)),var(--panel))}.student-lesson-cover,.student-lesson-mark{width:108px;height:108px;object-fit:cover;border-radius:16px}.student-lesson-mark{display:grid;place-items:center;background:color-mix(in srgb,var(--row-color) 15%,var(--panel));color:var(--row-color);font-size:43px}.student-lesson-hero h1{margin:6px 0;font:750 clamp(24px,4vw,37px)/1.1 var(--font-display)}.student-lesson-hero p{max-width:68ch;margin:0;color:var(--muted);font-size:13px;line-height:1.65}.student-lesson-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.student-lesson-meta span{padding:6px 9px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:9px}.student-lesson-content{max-width:840px;margin:22px auto 0}.student-lesson-block{margin:14px 0;padding:22px;border:1px solid var(--border);border-radius:16px;background:var(--panel)}.student-lesson-block h2{margin:4px 0 13px;font:700 20px var(--font-display)}.student-lesson-step-label,.student-lesson-check-label{color:var(--led-1);font:750 9px var(--font-mono);letter-spacing:.12em}.student-lesson-rich-text{color:var(--ink);font-size:14px;line-height:1.85;white-space:pre-wrap}.student-lesson-illustration img,.student-lesson-interactive img{display:block;max-width:100%;max-height:520px;margin:8px auto;border-radius:12px;object-fit:contain}.student-lesson-illustration p,.student-lesson-interactive>p{color:var(--muted);font-size:12px;line-height:1.65}.student-lesson-hotspots{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.student-lesson-hotspots button,.student-lesson-check-options button{padding:10px 13px;border:1px solid var(--border-strong);border-radius:10px;background:var(--panel-2);color:var(--ink);cursor:pointer;transition:.18s}.student-lesson-hotspots button:hover,.student-lesson-hotspots button.active{border-color:var(--row-color);background:color-mix(in srgb,var(--row-color) 15%,var(--panel-2))}.student-lesson-hotspot-content{min-height:42px;margin:10px 0 0;padding:11px;border-radius:10px;background:color-mix(in srgb,var(--row-color) 8%,var(--panel-2));color:var(--muted);font-size:12px;line-height:1.6}.student-lesson-problem{padding:13px;border-left:3px solid var(--row-color);border-radius:8px;background:var(--panel-2);line-height:1.7}.student-lesson-example ol{display:grid;gap:9px;padding-left:22px;color:var(--ink);line-height:1.7}.student-lesson-example details{margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:10px}.student-lesson-example summary{color:var(--led-1);font-weight:700;cursor:pointer}.student-lesson-example details p{margin-bottom:0;line-height:1.7}.student-lesson-reveal>p{color:var(--muted);line-height:1.7}.student-lesson-reveal-answer{margin-top:12px;padding:13px;border-radius:10px;background:color-mix(in srgb,var(--row-color) 10%,var(--panel-2));line-height:1.7;white-space:pre-wrap}.student-lesson-check{border-color:color-mix(in srgb,var(--row-color) 34%,var(--border))}.student-lesson-check h3{margin:8px 0 14px;font:650 16px/1.5 var(--font-display)}.student-lesson-check-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.student-lesson-check-options button{text-align:left}.student-lesson-check-options button.correct{border-color:#2fac8f;background:rgba(47,172,143,.13)}.student-lesson-check-options button.incorrect{border-color:#ef7383;background:rgba(239,115,131,.1)}.student-lesson-check-feedback{min-height:20px;margin:10px 0 0;color:var(--led-1);font-size:11px}.student-lesson-finish{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:9px;margin:20px 0;padding:17px;border:1px solid var(--border);border-radius:14px;background:var(--panel)}.student-lesson-finish>span{margin-right:auto;color:var(--muted);font-size:11px}
@media(max-width:700px) {
  .course-material-switch { display: flex; width: fit-content; max-width: 100%; }
  .course-material-switch > span { display: none; }
  .course-material-switch button { padding-inline: 10px; font-size: 10px; }
  .course-lessons-hero { min-height: 225px; border-radius: 17px; }
  .course-lessons-hero-art { right: -14px; width: 105px; height: 105px; border-radius: 29px; opacity: .45; }
  .course-lessons-hero-art span { font-size: 54px; }
  .course-lessons-hero-copy { padding-right: 22px; }
  .course-lessons-hero-copy > p { max-width: 45ch; font-size: 12px; }
  .course-lessons-hero-tags { max-width: 290px; gap: 6px; }
  .course-lessons-hero-tags span { padding: 6px 8px; font-size: 9px; }
  .course-lessons-list-head { align-items: stretch; flex-direction: column; }
  .course-lessons-materials { justify-content: center; min-height: 42px; }
}
@media(max-width:600px){.course-lesson-card{grid-template-columns:34px minmax(0,1fr);gap:9px;padding:11px}.course-lesson-card-index{width:32px;height:32px}.course-lesson-card-meta{grid-column:2;justify-content:space-between}.course-lesson-card-copy small{white-space:normal}.student-lesson-hero{grid-template-columns:1fr;padding:17px}.student-lesson-cover,.student-lesson-mark{width:72px;height:72px}.student-lesson-block{padding:16px}.student-lesson-check-options{grid-template-columns:1fr}.student-lesson-finish{align-items:stretch;flex-direction:column}.student-lesson-finish>span{margin:0 0 4px}.student-lesson-finish .btn{justify-content:center}}
.lesson-diagram-student-canvas{position:relative;overflow:hidden;border-radius:12px;background:rgba(0,0,0,.1)}.lesson-diagram-student-canvas img{display:block;width:100%;height:auto;max-height:none;margin:0;object-fit:contain}.lesson-diagram-student-pin{position:absolute;z-index:2;display:grid;width:31px;height:31px;place-items:center;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.9);border-radius:50%;background:var(--row-color);color:#071421;font-size:10px;font-weight:800;box-shadow:0 0 0 0 color-mix(in srgb,var(--row-color) 35%,transparent);animation:lesson-pin-pulse 2s ease-out infinite;cursor:pointer}.lesson-diagram-student-pin:hover,.lesson-diagram-student-pin.active{background:#ffc34a;animation:none}.lesson-graph-frame{min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:#fff}.lesson-graph-board{width:100%;height:330px;touch-action:pan-x pan-y}.lesson-graph-status,.lesson-graph-error{margin:0;padding:18px;color:var(--muted);font-size:11px}.lesson-graph-error{color:var(--muted)}.lesson-graph-error button{margin-top:8px;padding:8px 12px;border:1px solid #b5c4d2;border-radius:8px;background:#fff;color:#26384c;cursor:pointer}.lesson-graph-equation{padding:8px 12px;border-bottom:1px solid #dce4ed;color:#304258;font:700 12px var(--font-display)}.lesson-graph-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 14px;border-top:1px solid #dce4ed;background:#f7f9fc}.lesson-graph-slider{display:grid;gap:4px;color:#304258;font:600 10px var(--font-body)}.lesson-graph-slider>span{display:flex;justify-content:space-between;gap:8px}.lesson-graph-slider output{color:#147dc6;font-variant-numeric:tabular-nums}.lesson-graph-slider input{width:100%;accent-color:#168be8}.lesson-graph-controls input:focus-visible{outline:2px solid #168be8;outline-offset:2px}.lesson-graph-equation~.lesson-graph-board{border:0}.lesson-graph-controls~.lesson-graph-status{color:#304258}
@keyframes lesson-pin-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--row-color) 42%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(max-width:600px){.lesson-graph-board{height:265px}.lesson-graph-controls{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.lesson-diagram-student-pin{animation:none}}

/* The selected study buddy replaces the Quicky launcher image with a lazy-loaded 3D character. */
.quicky-head{width:108px;height:138px;border:0;border-radius:28px;background:radial-gradient(ellipse at 50% 72%,rgba(7,21,36,.78),rgba(7,21,36,0) 72%);box-shadow:none;overflow:visible}
.quicky-head:hover{box-shadow:none}
.quicky-head img{position:absolute;inset:0;border-radius:50%;object-fit:cover}
.quicky-head img[hidden],.quicky-mascot-status[hidden]{display:none!important}
.quicky-mascot-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.quicky-head .quicky-mascot-status{position:absolute;left:50%;bottom:-2px;transform:translate(-50%,100%);width:max-content;max-width:180px;padding:4px 8px;border:1px solid rgba(76,190,244,.35);border-radius:999px;background:rgba(8,19,34,.92);color:#d8f4ff;font:600 10px/1.3 Inter,system-ui,sans-serif;box-shadow:0 4px 15px rgba(0,0,0,.3)}
.quicky-head.has-study-buddy{border:0;outline:0;background:transparent;box-shadow:none;filter:drop-shadow(0 8px 13px rgba(0,0,0,.3))}
.quicky-head.has-study-buddy:hover{filter:drop-shadow(0 10px 15px rgba(0,0,0,.4)) brightness(1.06)}
.quicky-head.has-study-buddy .quicky-pulse{display:none}
.quicky-head .quicky-pulse{inset:8px;border-radius:36px}
.quicky-panel{bottom:calc(100% + 12px)}
.quicky-hint-bubble{bottom:calc(100% + 12px)}
@media(max-width:480px){.quicky-head{width:84px;height:108px;border-radius:22px}.quicky-head .quicky-pulse{inset:5px;border-radius:29px}.quicky-panel{bottom:calc(100% + 10px)}.quicky-hint-bubble{bottom:calc(100% + 10px)}}

/* Gentle AI study-buddy checkpoints within lesson pages */
.student-lesson-buddy-checkpoint{display:grid;gap:12px;margin:18px 0;padding:18px clamp(15px,3vw,24px);border:1px solid color-mix(in srgb,var(--row-color) 38%,var(--border));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--row-color) 8%,var(--panel)),var(--panel) 65%);box-shadow:0 12px 30px rgba(7,18,36,.12);animation:lessonBuddyCheckpointIn .24s ease-out both}
.student-lesson-buddy-checkpoint[hidden]{display:none!important}
.student-lesson-buddy-checkpoint>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.student-lesson-buddy-checkpoint-kicker{display:block;color:var(--row-color);font:750 10px var(--font-mono);letter-spacing:.11em}
.student-lesson-buddy-checkpoint>header small{display:block;margin-top:5px;color:var(--muted);font-size:11px}
.student-lesson-buddy-checkpoint>header button{width:30px;height:30px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--muted);font-size:18px;cursor:pointer}
.student-lesson-buddy-checkpoint-status{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.student-lesson-buddy-checkpoint h3{margin:0;font:650 clamp(16px,2vw,20px)/1.45 var(--font-display);color:var(--ink)}
.student-lesson-buddy-checkpoint form{display:grid;gap:9px}
.student-lesson-buddy-checkpoint form[hidden]{display:none!important}
.student-lesson-buddy-checkpoint label{font-size:12px;font-weight:700}
.student-lesson-buddy-checkpoint textarea{width:100%;min-height:86px;resize:vertical;padding:12px 14px;border:1px solid var(--border-strong);border-radius:12px;background:var(--panel-2);color:var(--ink);font:500 13px/1.55 var(--font-display)}
.student-lesson-buddy-checkpoint textarea:focus{outline:2px solid color-mix(in srgb,var(--row-color) 65%,transparent);outline-offset:1px}
.student-lesson-buddy-checkpoint-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.student-lesson-buddy-checkpoint-actions .btn{min-height:38px;padding:8px 13px;font-size:12px}
.student-lesson-buddy-checkpoint-feedback{padding:13px 14px;border-radius:12px;background:color-mix(in srgb,var(--row-color) 8%,var(--panel-2));line-height:1.6}
.student-lesson-buddy-checkpoint-feedback[hidden]{display:none!important}
.student-lesson-buddy-checkpoint-feedback p{margin:0;color:var(--ink);font-size:13px}
.student-lesson-buddy-checkpoint-feedback small{display:block;margin-top:8px;color:var(--muted);font-size:11px}
.student-lesson-buddy-review{margin-top:11px;min-height:34px;padding:7px 10px;font-size:11px}
.student-lesson-block.is-buddy-highlight{position:relative;border-color:var(--row-color);animation:lessonBuddySourcePulse 2.8s ease both}
.student-lesson-buddy-checkpoint-voice{justify-self:start;padding:7px 10px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--muted);font:650 11px var(--font-display);cursor:pointer}
.student-lesson-buddy-checkpoint-voice[hidden]{display:none!important}
@keyframes lessonBuddyCheckpointIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes lessonBuddySourcePulse{0%,100%{box-shadow:0 0 0 0 transparent}20%,70%{box-shadow:0 0 0 5px color-mix(in srgb,var(--row-color) 24%,transparent)}}
@media(max-width:600px){.student-lesson-buddy-checkpoint{margin:14px 0;padding:15px}.student-lesson-buddy-checkpoint-actions{align-items:stretch}.student-lesson-buddy-checkpoint-actions .btn{flex:1;justify-content:center}}
@media(prefers-reduced-motion:reduce){.student-lesson-buddy-checkpoint,.student-lesson-block.is-buddy-highlight{animation:none}}

/* Mobile-first bottom navigation and a shorter, calmer home dashboard. */
.mobile-bottom-nav{display:none}
.mobile-home-stats{display:none}
@media(max-width:720px){
  .primary-section-nav{display:none!important}
  .mobile-bottom-nav{position:fixed;left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:9500;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:8px 9px;border:1px solid color-mix(in srgb,#4387d8 28%,var(--border));border-radius:22px;background:color-mix(in srgb,var(--panel) 93%,transparent);box-shadow:0 12px 38px rgba(3,12,27,.26),0 0 22px color-mix(in srgb,#19c7a2 8%,transparent);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
  .mobile-bottom-nav a{position:relative;display:grid;place-items:center;align-content:center;gap:4px;min-width:0;min-height:51px;border:1px solid transparent;border-radius:15px;color:var(--muted);text-decoration:none;transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;-webkit-tap-highlight-color:transparent}
  .mobile-bottom-nav a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px color-mix(in srgb,currentColor 34%,transparent))}
  .mobile-bottom-nav a span{font-size:10px;font-weight:650;line-height:1}
  .mobile-bottom-nav a:nth-child(1){--tab-neon:#25e3b5}.mobile-bottom-nav a:nth-child(2){--tab-neon:#55caff}.mobile-bottom-nav a:nth-child(3){--tab-neon:#a486ff}.mobile-bottom-nav a:nth-child(4){--tab-neon:#41c9ff}.mobile-bottom-nav a:nth-child(5){--tab-neon:#f2bd58}
  .mobile-bottom-nav a.is-active{border-color:color-mix(in srgb,var(--tab-neon) 28%,transparent);background:color-mix(in srgb,var(--tab-neon) 12%,var(--panel));color:var(--tab-neon);box-shadow:inset 0 0 16px color-mix(in srgb,var(--tab-neon) 8%,transparent),0 0 15px color-mix(in srgb,var(--tab-neon) 10%,transparent)}
  .mobile-bottom-nav a.is-active svg{stroke-width:2.2;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--tab-neon) 68%,transparent))}
  .mobile-bottom-nav a.is-active:after{position:absolute;bottom:3px;width:15px;height:3px;border-radius:4px;background:var(--tab-neon);box-shadow:0 0 10px var(--tab-neon);content:""}
  .mobile-bottom-nav a:active{transform:scale(.96)}
  .mobile-bottom-nav a:focus-visible{outline:2px solid #18b997;outline-offset:1px}
  .main{padding:16px 14px calc(106px + env(safe-area-inset-bottom,0px))}
  .topbar{min-height:58px;padding:8px 14px}
  .topbar .breadcrumb{display:none}
  .topbar-right{gap:6px}
  .topbar-right .btn-label{display:none}
  .audio-global-player{right:10px;bottom:calc(77px + env(safe-area-inset-bottom,0px));width:min(430px,calc(100vw - 20px));padding:9px}
  .audio-global-player.is-minimized{width:min(330px,calc(100vw - 20px))}
  .quicky-root{right:10px;bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  body:has(.audio-global-player:not([hidden])) .quicky-root{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  #main:has(>.home-hero){display:flex;flex-direction:column;gap:0}
  #main:has(>.home-hero)>.home-hero{order:1;min-height:148px;margin-bottom:12px;padding:18px 16px;border-radius:19px}
  #main:has(>.home-hero)>.home-seasonal-banner{order:2}
  #main:has(>.home-hero)>#homeDailyChallenge{order:3;margin:0 0 12px;padding:14px;border-radius:18px}
  #main:has(>.home-hero)>.mobile-home-stats{order:4}
  #main:has(>.home-hero)>#homeStudyCard{order:5;margin:0 0 12px;padding:15px;border-radius:18px}
  #main:has(>.home-hero)>#homeWeeklyReward{order:6;margin:0 0 14px;padding:13px;border-radius:16px}
  #main:has(>.home-hero)>.hub-grid{order:7}
  #main:has(>.home-hero)>#homeDailyChallenge{grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:64px;padding:10px 12px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-mark{width:36px;height:36px;border-radius:11px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-mark svg{width:21px;height:21px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-copy>span{margin:0 0 2px;font-size:8px;letter-spacing:.09em}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-copy h2{overflow:hidden;margin:0;font-size:13px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-copy p{display:none}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-action{grid-column:auto;width:auto;min-height:36px;padding:0 10px;font-size:10px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-action span{margin-left:3px}
  #main:has(>.home-hero)>.home-hero .home-title{font-size:clamp(25px,7vw,31px)}
  #main:has(>.home-hero)>.home-hero .home-sub{max-width:31ch;font-size:12px;line-height:1.45}
  .mobile-home-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
  .mobile-home-stats article{display:grid;justify-items:start;gap:3px;min-width:0;padding:10px 11px;border:1px solid var(--border);border-radius:14px;background:var(--panel)}
  .mobile-home-stats b{overflow:hidden;max-width:100%;color:var(--ink);font-size:14px;text-overflow:ellipsis;white-space:nowrap}
  .mobile-home-stats small{overflow:hidden;max-width:100%;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}
  .mobile-stat-icon{display:grid;width:25px;height:25px;place-items:center;border-radius:8px;font-size:14px;font-weight:800}
  .mobile-stat-icon.streak{background:rgba(246,174,63,.13);color:#e0a743}.mobile-stat-icon.xp{background:rgba(100,123,255,.14);color:#9298ff}.mobile-stat-icon.level{background:rgba(31,190,153,.14);color:#29bd9c}
  #homeWeeklyReward{grid-template-columns:32px minmax(0,1fr) auto;gap:9px}
  #homeWeeklyReward .weekly-reward-mark{width:32px;height:32px}
  #homeWeeklyReward .weekly-reward-copy h2{font-size:13px}
  #homeWeeklyReward .weekly-reward-copy p{font-size:10px;line-height:1.35}
  #homeWeeklyReward .weekly-reward-track{margin-top:7px}
  #main:has(>.home-hero)>.hub-grid{display:flex;gap:8px;margin:0 -2px 12px;padding:2px 2px 8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin}
  #main:has(>.home-hero)>.hub-grid .hub-card{position:relative;display:grid;grid-template-columns:1fr;justify-items:center;align-content:center;gap:7px;flex:0 0 88px;min-height:88px;padding:9px 6px;border-color:color-mix(in srgb,var(--hub-color) 72%,var(--border));border-radius:15px;background:linear-gradient(145deg,color-mix(in srgb,var(--hub-color) 42%,var(--panel)),color-mix(in srgb,var(--hub-color) 28%,var(--panel)));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--hub-color) 32%,transparent),0 6px 18px -10px color-mix(in srgb,var(--hub-color) 78%,transparent);scroll-snap-align:start;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
  #main:has(>.home-hero)>.hub-grid .hub-card:before{position:absolute;top:0;left:14px;right:14px;height:2px;border-radius:2px;background:var(--hub-color);box-shadow:0 0 11px color-mix(in srgb,var(--hub-color) 78%,transparent);content:""}
  #main:has(>.home-hero)>.hub-grid .hub-card-icon{width:37px;height:37px;border-color:color-mix(in srgb,var(--hub-color) 76%,white);border-radius:11px;background:var(--hub-color);color:#fff;box-shadow:0 2px 12px color-mix(in srgb,var(--hub-color) 58%,transparent)}
  #main:has(>.home-hero)>.hub-grid .hub-card-icon .qf-hub-icon{width:20px;height:20px;stroke-width:2.2}
  #main:has(>.home-hero)>.hub-grid .hub-card-body{display:contents}
  #main:has(>.home-hero)>.hub-grid .hub-card-body h2{margin:0;max-width:100%;overflow:hidden;font-size:10px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap;text-align:center}
  #main:has(>.home-hero)>.hub-grid .hub-card-body p{display:none}
  #main:has(>.home-hero)>.hub-grid .hub-card-cta{display:none}
  #main:has(>.home-hero)>.hub-grid .hub-card:active{transform:scale(.96)}
}
@media(max-width:380px){
  .mobile-bottom-nav{padding-inline:5px}.mobile-bottom-nav a span{font-size:9px}.mobile-bottom-nav a svg{width:20px;height:20px}
  .main{padding-inline:11px}.mobile-home-stats{gap:6px}.mobile-home-stats article{padding:9px 8px}
  #main:has(>.home-hero)>#homeDailyChallenge{grid-template-columns:32px minmax(0,1fr) auto;gap:7px;padding:9px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-mark{width:32px;height:32px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-action{min-height:34px;padding-inline:7px;font-size:9px}
  #main:has(>.home-hero)>.hub-grid .hub-card{flex-basis:80px;min-height:84px}
}
@media(prefers-reduced-motion:reduce){.mobile-bottom-nav *{scroll-behavior:auto!important;transition:none!important}}

/* Figma-aligned mobile Learning dashboard. Desktop keeps the existing hub layout. */
.mobile-home-section-heading,.mobile-quick-access{display:none}
.home-study-mobile-title{display:none}
.home-study-link{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;color:inherit;text-decoration:none}
.home-study-link:focus-visible{outline:2px solid #00b99b;outline-offset:4px;border-radius:14px}
.home-study-icon{display:grid;width:56px;height:56px;flex:none;place-items:center;border:1px solid color-mix(in srgb,var(--study-course-color,#4385d8) 30%,var(--border));border-radius:16px;background:color-mix(in srgb,var(--study-course-color,#4385d8) 12%,var(--panel));color:var(--study-course-color,#4385d8)}
.home-study-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8}
.daily-home-card{grid-template-columns:auto minmax(0,1fr) auto 1px auto}
.daily-home-divider{display:block;width:1px;height:48px;background:var(--border)}
.daily-home-rewards{display:grid;gap:8px;min-width:82px}
.daily-home-rewards>span{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.78rem;white-space:nowrap}
.daily-home-rewards svg{width:18px;height:18px;fill:none;stroke:#e89a26;stroke-width:2}
.daily-home-rewards b{color:var(--ink);font-size:.76rem}
@media(max-width:720px){
  #main:has(>.home-hero)> .mobile-home-section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 1px 9px}
  .mobile-home-section-heading h2{margin:0;color:var(--ink);font-size:17px;line-height:1.2;letter-spacing:-.025em}
  .mobile-home-section-heading a{display:inline-flex;align-items:center;gap:4px;min-height:38px;color:#00a98f;font-size:12px;font-weight:750;text-decoration:none}
  .mobile-home-section-heading a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
  #main:has(>.home-hero)>.home-hero{order:1}
  #main:has(>.home-hero)>.home-seasonal-banner{order:2}
  #main:has(>.home-hero)>#homeDailyChallenge{order:3;grid-template-columns:34px minmax(0,1fr) 1px auto;align-items:center;gap:8px;min-height:84px;margin-bottom:12px;padding:10px 11px;border-color:rgba(0,185,156,.65);background:linear-gradient(115deg,#dffff0 0%,#bbfff0 56%,#92f0e7 100%);box-shadow:0 8px 22px -14px rgba(0,169,143,.5);color:#073b46}
  #homeDailyChallenge .daily-home-mark{grid-column:1;grid-row:1/3;width:34px;height:34px;border:0;border-radius:11px;background:linear-gradient(145deg,#00c9a7,#009d97);color:#fff;box-shadow:0 4px 12px rgba(0,145,131,.2)}
  #homeDailyChallenge .daily-home-mark svg{width:22px;height:22px;stroke:currentColor}
  #homeDailyChallenge .daily-home-copy{grid-column:2;grid-row:1;min-width:0}
  #homeDailyChallenge .daily-home-copy>span{margin:0 0 2px;color:#087c75;font-size:8px;letter-spacing:.08em}
  #homeDailyChallenge .daily-home-copy h2{overflow:hidden;margin:0;color:#063344;font-size:15px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
  #homeDailyChallenge .daily-home-copy p{overflow:hidden;margin:2px 0 0;color:#28616d;font-size:11px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
  #homeDailyChallenge .daily-home-action{grid-column:2;grid-row:2;justify-content:center;width:min(100%,150px);min-height:32px;margin-top:6px;padding:0 10px;border:0;border-radius:999px;background:linear-gradient(100deg,#06c9a4,#00a99a);box-shadow:0 4px 10px rgba(0,143,131,.18);color:#fff;font-size:11px;font-weight:800}
  #homeDailyChallenge .daily-home-action span{margin-left:4px}
  #homeDailyChallenge .daily-home-divider{grid-column:3;grid-row:1/3;display:block;width:1px;height:54px;background:rgba(0,105,105,.18)}
  #homeDailyChallenge .daily-home-rewards{grid-column:4;grid-row:1/3;display:grid;gap:8px;min-width:60px}
  #homeDailyChallenge .daily-home-rewards>span{display:flex;align-items:center;gap:5px;color:#125364;font-size:10px;white-space:nowrap}
  #homeDailyChallenge .daily-home-rewards svg{width:16px;height:16px;fill:none;stroke:#e89a26;stroke-width:2}
  #homeDailyChallenge .daily-home-rewards b{font-size:10px;font-weight:750}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-mark{width:34px;height:34px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-copy>span{font-size:8px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-copy h2{font-size:15px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-copy p{display:block;font-size:11px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-action{grid-column:2;grid-row:2;width:min(100%,150px);min-height:32px;margin-top:6px;padding:0 10px;font-size:11px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-divider{grid-column:3;grid-row:1/3;display:block;width:1px;height:54px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-rewards{grid-column:4;grid-row:1/3;min-width:60px;gap:8px}
  .mobile-home-stats{order:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0 0 17px}
  .mobile-home-stats article{display:grid;align-content:start;justify-items:start;gap:3px;min-width:0;min-height:100px;padding:10px 8px;border:1px solid color-mix(in srgb,var(--stat-tone) 22%,transparent);border-radius:16px;background:linear-gradient(155deg,color-mix(in srgb,var(--stat-tone) 13%,var(--panel)),color-mix(in srgb,var(--stat-tone) 8%,var(--panel)));box-shadow:0 5px 16px -12px color-mix(in srgb,var(--stat-tone) 36%,transparent)}
  .mobile-home-stats .stat-streak{--stat-tone:#f08c48}.mobile-home-stats .stat-xp{--stat-tone:#7866e9}.mobile-home-stats .stat-courses{--stat-tone:#16aa91}.mobile-home-stats .stat-level{--stat-tone:#3999e8}
  .mobile-home-stats .mobile-stat-icon{display:grid;width:30px;height:30px;place-items:center;margin-bottom:3px;border-radius:10px;background:color-mix(in srgb,var(--stat-tone) 17%,var(--panel));color:var(--stat-tone)}
  .mobile-stat-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mobile-home-stats b{overflow:hidden;max-width:100%;color:var(--ink);font-size:14px;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
  .mobile-home-stats small{overflow:hidden;max-width:100%;color:var(--muted);font-size:10px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
  .mobile-stat-level-track{display:block;width:100%;height:4px;margin-top:4px;overflow:hidden;border-radius:99px;background:color-mix(in srgb,#3999e8 16%,var(--panel))}
  .mobile-stat-level-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#00c9a7,#3999e8)}
  #main:has(>.home-hero)>.mobile-home-learning-heading{order:5}
  #main:has(>.home-hero)>#homeStudyCard{order:6;display:block;margin:0 0 14px;padding:13px;border-color:color-mix(in srgb,#3f83ed 22%,var(--border));border-radius:17px;background:linear-gradient(130deg,color-mix(in srgb,#4387ed 8%,var(--panel)),var(--panel) 70%);box-shadow:0 8px 22px -18px rgba(42,96,173,.3)}
  #homeStudyCard .home-study-link{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:10px;color:inherit;text-decoration:none}
  #homeStudyCard .home-study-icon{display:grid;width:40px;height:40px;place-items:center;border:0;border-radius:12px;background:color-mix(in srgb,var(--study-course-color,#4385d8) 17%,var(--panel));color:var(--study-course-color,#4385d8)}
  #homeStudyCard .home-study-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}
  #homeStudyCard .home-study-copy{min-width:0}
  #homeStudyCard .home-study-eyebrow{margin:0 0 2px;font-size:8px;letter-spacing:.09em}
  #homeStudyCard .home-study-copy h2{font-size:15px;line-height:1.25}
  #homeStudyCard .home-study-desktop-title,#homeStudyCard .home-study-desktop-copy{display:none}
  #homeStudyCard .home-study-mobile-title{display:block}
  #homeStudyCard .home-study-copy>p{overflow:hidden;margin:2px 0 0;color:var(--muted);font-size:11px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
  #homeStudyCard .home-study-desktop-copy{display:none}
  #homeStudyCard .home-study-progress{grid-column:1/-1;max-width:none;margin:1px 0 0}
  #homeStudyCard .home-study-progress>span{font-size:10px}
  #homeStudyCard .home-study-progress>i{height:6px;margin-top:5px}
  #homeStudyCard .home-study-progress small{display:none}
  #homeStudyCard .home-study-cta{grid-column:1/-1;justify-content:center;min-height:38px;margin-top:0;border-radius:11px;font-size:12px}
  #homeStudyCard .home-study-cta span{font-size:1rem}
  #homeStudyCard .home-study-link.is-empty .home-study-copy h2{font-size:14px}
  #homeStudyCard .home-study-link.is-empty .home-study-copy p{white-space:normal}
  #main:has(>.home-hero)>.mobile-home-quick-heading{order:7;margin-top:1px}
  #main:has(>.home-hero)>.mobile-quick-access{order:8;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:0 0 15px}
  .mobile-quick-link{display:grid;justify-items:center;align-content:center;gap:6px;min-width:0;min-height:82px;padding:8px 3px;border:1px solid color-mix(in srgb,var(--quick-tone) 28%,transparent);border-radius:15px;background:linear-gradient(155deg,color-mix(in srgb,var(--quick-tone) 19%,var(--panel)),color-mix(in srgb,var(--quick-tone) 11%,var(--panel)));color:var(--ink);text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
  .mobile-quick-link>span{display:grid;width:39px;height:39px;place-items:center;border-radius:12px;background:var(--quick-tone);color:white;box-shadow:0 3px 12px color-mix(in srgb,var(--quick-tone) 42%,transparent)}
  .mobile-quick-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mobile-quick-link b{display:block;max-width:100%;overflow:hidden;font-size:10px;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap}
  .mobile-quick-link:active{transform:scale(.96)}
  .quick-courses{--quick-tone:#12b99b}.quick-practice{--quick-tone:#8155ee}.quick-tools{--quick-tone:#e89927}.quick-discover{--quick-tone:#159ce5}.quick-docs{--quick-tone:#e94c83}
  #main:has(>.home-hero)>#homeWeeklyReward{order:9;margin:0 0 14px}
  #main:has(>.home-hero)>.hub-grid{display:none}
  html.dark-mode #homeDailyChallenge{border-color:rgba(25,220,185,.5);background:linear-gradient(115deg,#073c43,#07515a 56%,#075366);color:#e6fffb;box-shadow:0 8px 24px -14px rgba(0,227,190,.25)}
  html.dark-mode #homeDailyChallenge .daily-home-copy>span{color:#63e7d0}
  html.dark-mode #homeDailyChallenge .daily-home-copy h2{color:#f2fffc}
  html.dark-mode #homeDailyChallenge .daily-home-copy p{color:#b6e7e4}
  html.dark-mode #homeDailyChallenge .daily-home-divider{background:rgba(190,255,248,.22)}
  html.dark-mode #homeDailyChallenge .daily-home-rewards>span{color:#d1f5ef}
  html.dark-mode #homeStudyCard{background:linear-gradient(130deg,color-mix(in srgb,#4387ed 15%,var(--panel)),var(--panel) 75%)}
  .mobile-quick-link:focus-visible,#homeStudyCard .home-study-link:focus-visible,#homeDailyChallenge .daily-home-action:focus-visible{outline:2px solid #00b99b;outline-offset:2px}
}
@media(max-width:380px){
  #homeDailyChallenge{grid-template-columns:30px minmax(0,1fr) 1px auto!important;gap:6px!important;padding:9px!important}
  #homeDailyChallenge .daily-home-mark{width:30px!important;height:30px!important}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-mark{width:30px;height:30px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-action{grid-column:2;grid-row:2;width:min(100%,150px);min-height:32px;margin-top:6px;padding:0 8px;font-size:10px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-copy h2{font-size:14px}
  #main:has(>.home-hero)>#homeDailyChallenge .daily-home-copy p{font-size:10px}
  #homeDailyChallenge .daily-home-rewards{min-width:54px;gap:6px}
  #homeDailyChallenge .daily-home-rewards>span{gap:3px;font-size:9px}
  #homeDailyChallenge .daily-home-rewards b{font-size:9px}
  .mobile-home-stats{gap:5px}
  .mobile-home-stats article{min-height:94px;padding:9px 6px}
  .mobile-home-stats b{font-size:13px}
  .mobile-home-stats small{font-size:9px}
  #main:has(>.home-hero)>.mobile-quick-access{gap:5px}
  .mobile-quick-link{min-height:76px;padding-inline:2px}
  .mobile-quick-link>span{width:35px;height:35px}
  .mobile-quick-link b{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.mobile-quick-link{transition:none}}

/* Learn destination hub, following the supplied Figma card list. */
.learning-hub-page{width:min(100%,680px);margin:0 auto;padding:clamp(4px,2vw,18px) 0 24px}
.learning-hub-heading{margin:0 0 16px}
.learning-hub-kicker{display:block;margin-bottom:5px;color:#00a99c;font:800 10px/1.4 var(--font-mono,monospace);letter-spacing:.12em}
.learning-hub-heading h1{margin:0;color:#103373;font-size:clamp(23px,4vw,30px);line-height:1.12;letter-spacing:-.035em}
.learning-hub-heading p{margin:6px 0 0;color:#6383af;font-size:14px;line-height:1.45}
.learning-hub-list{display:grid;gap:9px}
.learning-hub-card{--learn-tone:#00ad93;display:flex;align-items:center;gap:13px;min-width:0;min-height:78px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--learn-tone) 17%,var(--border));border-radius:16px;background:linear-gradient(105deg,color-mix(in srgb,var(--learn-tone) 9%,var(--panel)),color-mix(in srgb,var(--learn-tone) 5%,var(--panel)));color:var(--ink);text-decoration:none;box-shadow:0 5px 18px -15px color-mix(in srgb,var(--learn-tone) 52%,transparent);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;-webkit-tap-highlight-color:transparent}
.learning-hub-card--courses{--learn-tone:#00ad93}.learning-hub-card--code{--learn-tone:#8538ed}.learning-hub-card--languages{--learn-tone:#ff861d}.learning-hub-card--classrooms{--learn-tone:#269ce8}.learning-hub-card--video{--learn-tone:#159bff}.learning-hub-card--audio{--learn-tone:#f04491}.learning-hub-card--exams{--learn-tone:#5276e8}
.learning-hub-icon{display:grid;width:46px;height:46px;flex:none;place-items:center;border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--learn-tone) 88%,white),var(--learn-tone));color:#fff;box-shadow:0 4px 13px -5px color-mix(in srgb,var(--learn-tone) 75%,transparent)}
.learning-hub-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.learning-hub-card-copy{display:grid;gap:4px;min-width:0;flex:1}
.learning-hub-card-copy strong{color:#103373;font-size:15px;line-height:1.2}
.learning-hub-card-copy>span{color:#6383af;font-size:12px;line-height:1.35}
.learning-hub-chevron{width:18px;height:18px;flex:none;fill:none;stroke:var(--learn-tone);stroke-width:2;transition:transform .16s ease}
.learning-hub-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--learn-tone) 44%,var(--border));box-shadow:0 8px 20px -13px color-mix(in srgb,var(--learn-tone) 62%,transparent)}
.learning-hub-card:hover .learning-hub-chevron{transform:translateX(2px)}
.learning-hub-card:focus-visible{outline:3px solid color-mix(in srgb,var(--learn-tone) 60%,white);outline-offset:3px}
html.dark-mode .learning-hub-heading h1,html.dark-mode .learning-hub-card-copy strong{color:var(--ink)}
html.dark-mode .learning-hub-heading p,html.dark-mode .learning-hub-card-copy>span{color:var(--muted)}
html.dark-mode .learning-hub-card{border-color:color-mix(in srgb,var(--learn-tone) 30%,var(--border));background:linear-gradient(105deg,color-mix(in srgb,var(--learn-tone) 14%,var(--panel)),color-mix(in srgb,var(--learn-tone) 7%,var(--panel)));box-shadow:0 7px 20px -17px color-mix(in srgb,var(--learn-tone) 65%,transparent)}
@media(max-width:720px){
  .learning-hub-page{padding:4px 0 20px}
  .learning-hub-heading{margin-bottom:13px}
  .learning-hub-heading h1{font-size:23px}
  .learning-hub-heading p{margin-top:5px;font-size:13px}
  .learning-hub-list{gap:8px}
  .learning-hub-card{gap:12px;min-height:75px;padding:10px 11px;border-radius:15px}
  .learning-hub-icon{width:43px;height:43px;border-radius:12px}
  .learning-hub-icon svg{width:22px;height:22px}
  .learning-hub-card-copy{gap:3px}
  .learning-hub-card-copy strong{font-size:14px}
  .learning-hub-card-copy>span{font-size:12px;line-height:1.35}
  .learning-hub-chevron{width:17px;height:17px}
}
@media(max-width:360px){
  .learning-hub-card{gap:10px;min-height:72px;padding-inline:9px}
  .learning-hub-icon{width:40px;height:40px}
  .learning-hub-card-copy>span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.learning-hub-card,.learning-hub-chevron{transition:none}}

/* Courses page: real course data and lesson progress in a mobile-first layout. */
.courses-learning-page{width:min(100%,880px);margin:0 auto;padding:4px 0 40px}
.courses-learning-heading{margin:0 0 18px}
.courses-learning-kicker{display:block;margin-bottom:5px;color:#00a99c;font:800 10px/1.4 var(--font-mono,monospace);letter-spacing:.12em}
.courses-learning-heading h1{margin:0;color:#103373;font-size:clamp(27px,4vw,35px);line-height:1.12;letter-spacing:-.04em}
.courses-learning-heading p{margin:6px 0 0;color:#6383af;font-size:15px;line-height:1.45}
.courses-learning-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:0 0 14px}
.courses-search-box{display:flex;align-items:center;gap:11px;min-width:0;min-height:48px;padding:0 14px;border:1px solid #d7e7fc;border-radius:999px;background:var(--panel);color:#52709f;box-shadow:0 4px 16px -14px rgba(45,99,164,.32)}
.courses-search-box svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.courses-search-box input{width:100%;min-width:0;min-height:44px;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:14px}
.courses-search-box input::placeholder{color:#7893b6;opacity:1}
.courses-search-box:focus-within{border-color:#48b9c1;box-shadow:0 0 0 3px rgba(0,175,179,.12)}
.courses-filter-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:104px;min-height:48px;padding:0 14px;border:1px solid #d7e7fc;border-radius:999px;background:var(--panel);color:var(--ink);font-size:14px;font-weight:750;cursor:pointer;transition:border-color .16s,background .16s}
.courses-filter-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.courses-filter-button.has-filter{border-color:#00b79d;color:#008c7b;background:color-mix(in srgb,#00b79d 9%,var(--panel))}
.courses-filter-chevron{font-size:18px;line-height:1;transition:transform .16s}
.courses-filter-button[aria-expanded="true"] .courses-filter-chevron{transform:rotate(180deg)}
.courses-filter-options{display:flex;flex-wrap:wrap;gap:7px;margin:-4px 0 14px;padding:10px;border:1px solid var(--border);border-radius:15px;background:var(--panel);box-shadow:0 10px 26px -22px rgba(18,51,115,.35)}
.courses-filter-options[hidden]{display:none}
.courses-filter-options button{min-height:38px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:var(--panel-2);color:var(--muted);font-size:12px;font-weight:700;cursor:pointer}
.courses-filter-options button[aria-pressed="true"]{border-color:#89e8d6;background:#d9fff4;color:#087866}
.courses-feature-card{--featured-accent:#00ad93;position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:14px;min-height:176px;margin:0 0 24px;padding:22px;overflow:hidden;border:1px solid #a1f0e0;border-radius:22px;background:radial-gradient(ellipse at 88% 100%,rgba(53,221,200,.32),transparent 42%),linear-gradient(112deg,#dffff2 0%,#d4fbf1 50%,#a0f3e5 100%);box-shadow:0 14px 30px -23px rgba(0,158,137,.42);isolation:isolate}
.courses-feature-card::before{position:absolute;inset:auto auto -65px -26px;width:170px;height:120px;border-radius:50%;background:rgba(88,230,209,.16);content:"";pointer-events:none}
.courses-feature-icon{position:relative;z-index:2;display:grid;width:58px;height:58px;place-items:center;border-radius:17px;background:linear-gradient(145deg,#00c4a5,#00a88f);color:white;box-shadow:0 7px 18px -10px rgba(0,120,111,.75)}
.courses-feature-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8}
.courses-feature-copy{position:relative;z-index:2;max-width:540px;min-width:0;padding-top:1px}
.courses-feature-label{display:block;margin-bottom:4px;color:#00a98c;font:800 10px/1.35 var(--font-mono,monospace);letter-spacing:.12em}
.courses-feature-copy h2{margin:0;color:#103373;font-size:clamp(21px,3vw,27px);line-height:1.15;letter-spacing:-.03em}
.courses-feature-copy p{max-width:32ch;margin:7px 0 13px;color:#527aa7;font-size:14px;line-height:1.4}
.courses-feature-copy>a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:43px;padding:0 18px;border-radius:999px;background:linear-gradient(100deg,#00b99a,#00a998);box-shadow:0 8px 16px -12px rgba(0,130,116,.85);color:#fff;font-size:13px;font-weight:800;text-decoration:none;transition:transform .16s,box-shadow .16s}
.courses-feature-copy>a:hover{transform:translateY(-1px);box-shadow:0 10px 18px -11px rgba(0,130,116,.85)}
.courses-feature-copy>a span{font-size:16px}
.courses-feature-decoration{position:absolute;z-index:1;color:rgba(0,163,145,.16);font-family:Georgia,serif;pointer-events:none}
.courses-feature-decoration-one{right:37%;top:16px;font-size:33px}.courses-feature-decoration-two{right:28%;top:33px;font-size:22px}
.courses-feature-empty{display:flex;align-items:center;gap:14px;margin:0 0 24px;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--panel)}
.courses-feature-empty>span{font-size:28px}.courses-feature-empty strong{color:var(--ink)}.courses-feature-empty p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.courses-learning-section{margin:0 0 22px;scroll-margin-top:18px}
.courses-learning-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.courses-learning-section-heading h2{margin:0;color:#103373;font-size:clamp(19px,2.8vw,24px);line-height:1.2;letter-spacing:-.03em}
.courses-learning-section-heading>button{display:inline-flex;align-items:center;gap:4px;min-height:38px;padding:0 2px;border:0;background:transparent;color:#00a98f;font-size:13px;font-weight:800;cursor:pointer}
.courses-learning-section-heading>button span{font-size:18px}
.courses-result-count{color:var(--muted);font-size:12px;font-weight:700}
.courses-learning-list{display:grid;gap:10px}
.course-learning-row{--course-accent:#4288e5;display:grid;grid-template-columns:54px minmax(0,1fr) 20px;align-items:center;gap:13px;min-width:0;min-height:98px;padding:12px 14px;border:1px solid #dceafb;border-radius:19px;background:linear-gradient(110deg,var(--panel),color-mix(in srgb,#f0f6ff 45%,var(--panel)));color:var(--ink);text-decoration:none;box-shadow:0 8px 22px -22px rgba(25,71,136,.34);transition:transform .16s,border-color .16s,box-shadow .16s;-webkit-tap-highlight-color:transparent}
.course-learning-row:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--course-accent) 38%,#dceafb);box-shadow:0 10px 20px -18px color-mix(in srgb,var(--course-accent) 60%,transparent)}
.course-learning-row-icon{display:grid;width:54px;height:54px;place-items:center;border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--course-accent) 80%,white),var(--course-accent));box-shadow:0 5px 14px -8px color-mix(in srgb,var(--course-accent) 75%,transparent);color:#fff;font-size:29px;font-weight:700;line-height:1}
.course-learning-row-copy{display:grid;gap:4px;min-width:0}
.course-learning-row-copy strong{overflow:hidden;color:#103373;font-size:16px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.course-learning-row-copy>small{overflow:hidden;color:#6383af;font-size:12px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.course-learning-row-progress{display:flex;align-items:center;gap:10px;min-width:0;margin-top:2px}
.course-learning-row-progress>i{display:block;height:7px;flex:1;overflow:hidden;border-radius:99px;background:#e0edfc}
.course-learning-row-progress>i[hidden]{display:none}
.course-learning-row-progress>i em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#00b99d,#00c4a4)}
.course-learning-row-progress>b{min-width:35px;color:#6383af;font-size:11px;font-weight:700}
.course-learning-row-chevron{width:20px;height:20px;fill:none;stroke:#527fb6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.courses-all-section .courses-learning-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.courses-all-section .course-learning-row{grid-template-columns:45px minmax(0,1fr) 17px;gap:10px;min-height:84px;padding:11px}
.courses-all-section .course-learning-row-icon{width:45px;height:45px;border-radius:14px;font-size:24px}
.courses-all-section .course-learning-row-copy strong{font-size:14px}
.courses-all-section .course-learning-row-copy>small{font-size:11px}
.courses-all-section .course-learning-row-progress{gap:6px}
.courses-all-section .course-learning-row-progress>b{min-width:30px;font-size:10px}
.courses-all-section .course-learning-row-chevron{width:17px;height:17px}
.course-learning-row[hidden]{display:none!important}
.courses-list-empty{margin:0;padding:15px;border:1px dashed var(--border);border-radius:14px;color:var(--muted);font-size:13px;line-height:1.45}
.courses-list-empty[hidden]{display:none!important}
html.dark-mode .courses-learning-heading h1,html.dark-mode .courses-learning-section-heading h2,html.dark-mode .course-learning-row-copy strong{color:var(--ink)}
html.dark-mode .courses-learning-heading p,html.dark-mode .courses-learning-kicker{color:var(--muted)}
html.dark-mode .courses-search-box,html.dark-mode .courses-filter-button{border-color:var(--border);background:var(--panel);color:var(--ink)}
html.dark-mode .courses-search-box input::placeholder{color:var(--muted)}
html.dark-mode .courses-filter-options{border-color:var(--border);background:var(--panel)}
html.dark-mode .courses-filter-options button{border-color:var(--border);background:var(--panel-2);color:var(--muted)}
html.dark-mode .courses-filter-options button[aria-pressed="true"]{border-color:#1b907f;background:color-mix(in srgb,#00b79d 18%,var(--panel));color:#75ead3}
html.dark-mode .courses-feature-card{border-color:rgba(40,221,189,.42);background:radial-gradient(ellipse at 88% 100%,rgba(53,221,200,.18),transparent 42%),linear-gradient(112deg,#123e44,#12545a 54%,#17646a)}
html.dark-mode .courses-feature-icon{background:linear-gradient(145deg,#12c6aa,#079a87)}
html.dark-mode .courses-feature-copy h2{color:#f2fffc}
html.dark-mode .courses-feature-copy p{color:#c4e9e3}
html.dark-mode .courses-feature-label{color:#68e4d0}
html.dark-mode .courses-feature-decoration{color:rgba(191,255,244,.13)}
html.dark-mode .course-learning-row{border-color:color-mix(in srgb,var(--course-accent) 24%,var(--border));background:linear-gradient(110deg,var(--panel),color-mix(in srgb,var(--course-accent) 6%,var(--panel)));box-shadow:0 8px 22px -22px rgba(0,0,0,.6)}
html.dark-mode .course-learning-row-copy>small,.course-learning-row-progress>b{color:var(--muted)}
html.dark-mode .course-learning-row-progress>i{background:color-mix(in srgb,#87a8da 22%,var(--panel))}
html.dark-mode .courses-feature-empty{border-color:var(--border);background:var(--panel)}
@media(max-width:720px){
  .courses-learning-page{padding:1px 0 28px}
  .courses-learning-heading{margin-bottom:15px}
  .courses-learning-heading h1{font-size:27px}
  .courses-learning-heading p{font-size:14px}
  .courses-learning-toolbar{grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:12px}
  .courses-search-box{min-height:45px;gap:8px;padding-inline:12px}
  .courses-search-box svg{width:20px;height:20px}
  .courses-search-box input{min-height:42px;font-size:13px}
  .courses-filter-button{min-width:92px;min-height:45px;gap:6px;padding-inline:10px;font-size:13px}
  .courses-filter-button svg{width:18px;height:18px}
  .courses-filter-options{gap:6px;padding:8px}
  .courses-filter-options button{min-height:36px;padding-inline:10px;font-size:11px}
  .courses-feature-card{grid-template-columns:44px minmax(0,1fr);gap:11px;min-height:150px;margin-bottom:20px;padding:17px 15px;border-radius:19px}
  .courses-feature-icon{width:44px;height:44px;border-radius:13px}
  .courses-feature-icon svg{width:26px;height:26px}
  .courses-feature-copy{max-width:none;padding-top:0}
  .courses-feature-label{font-size:9px}
  .courses-feature-copy h2{font-size:20px;line-height:1.12}
  .courses-feature-copy p{margin:6px 0 10px;font-size:12px;line-height:1.35}
  .courses-feature-copy>a{min-height:39px;gap:7px;padding-inline:14px;font-size:12px}
  .courses-feature-decoration-one{right:38%;top:23px;font-size:26px}
  .courses-feature-decoration-two{right:29%;top:40px;font-size:18px}
  .courses-learning-section{margin-bottom:20px}
  .courses-learning-section-heading{margin-bottom:9px}
  .courses-learning-section-heading h2{font-size:20px}
  .courses-learning-section-heading>button{min-height:36px;font-size:12px}
  .courses-learning-list{gap:8px}
  .course-learning-row{grid-template-columns:46px minmax(0,1fr) 17px;gap:11px;min-height:86px;padding:10px 11px;border-radius:16px}
  .course-learning-row-icon{width:46px;height:46px;border-radius:14px;font-size:25px}
  .course-learning-row-copy{gap:3px}
  .course-learning-row-copy strong{font-size:14px}
  .course-learning-row-copy>small{font-size:11px}
  .course-learning-row-progress{gap:7px;margin-top:1px}
  .course-learning-row-progress>i{height:6px}
  .course-learning-row-progress>b{min-width:31px;font-size:10px}
  .course-learning-row-chevron{width:18px;height:18px}
  .courses-all-section .courses-learning-list{grid-template-columns:1fr;gap:8px}
  .courses-all-section .course-learning-row{grid-template-columns:46px minmax(0,1fr) 17px;min-height:82px;padding:10px 11px}
  .courses-all-section .course-learning-row-icon{width:46px;height:46px;border-radius:14px;font-size:25px}
}
@media(max-width:360px){
  .courses-learning-toolbar{grid-template-columns:minmax(0,1fr) 84px;gap:6px}
  .courses-search-box{padding-inline:9px}
  .courses-search-box input{font-size:12px}
  .courses-filter-button{min-width:84px;padding-inline:7px}
  .courses-feature-card{min-height:142px;gap:9px;padding:14px 12px}
  .courses-feature-copy h2{font-size:18px}
  .courses-feature-copy p{font-size:11px}
  .courses-feature-copy>a{min-height:36px;padding-inline:10px;font-size:11px}
  .course-learning-row{grid-template-columns:42px minmax(0,1fr) 15px;gap:9px;min-height:80px;padding:9px}
  .course-learning-row-icon{width:42px;height:42px;border-radius:13px;font-size:23px}
  .course-learning-row-copy strong{font-size:13px}
  .course-learning-row-copy>small{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.course-learning-row,.courses-feature-copy>a,.courses-filter-chevron{transition:none}}

/* Personal course selection */
.courses-add-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;margin-top:13px;padding:0 14px;border:1px solid #19a990;border-radius:12px;background:linear-gradient(110deg,#087e70,#0aa88f);box-shadow:0 8px 18px -13px #06d2ad;color:#f1fffa;font-size:12px;font-weight:800;cursor:pointer;transition:transform .15s,filter .15s}
.courses-add-button:hover{transform:translateY(-1px);filter:brightness(1.1)}.courses-add-button>span{font-size:18px;line-height:1}
.course-added-tag{display:inline-flex;vertical-align:middle;margin-left:8px;padding:3px 6px;border:1px solid #28a48d;border-radius:999px;background:#10372f;color:#6fe5ca;font:800 8px/1.2 var(--font-mono,monospace);letter-spacing:.06em}
.course-add-backdrop{position:fixed;z-index:10000;inset:0;padding:20px;display:grid;place-items:center;background:#020812c9;backdrop-filter:blur(8px);overflow-y:auto}
.course-add-backdrop[hidden]{display:none!important}
.course-add-dialog{width:min(540px,100%);max-height:min(90svh,820px);overflow:auto;padding:23px;border:1px solid #34506d;border-radius:22px;background:linear-gradient(145deg,#15263b,#0b1828);box-shadow:0 28px 100px #0009;color:#edf5fc}
.course-add-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding-bottom:17px;border-bottom:1px solid #ffffff12}
.course-add-dialog>header h2{margin:4px 0;font:750 23px/1.15 "Space Grotesk",Inter,sans-serif;letter-spacing:-.04em}
.course-add-dialog>header p{max-width:420px;margin:6px 0 0;color:#9eb1c6;font-size:11px;line-height:1.55}
.course-add-dialog>header>button{width:34px;height:34px;flex:none;border:1px solid #354b62;border-radius:10px;background:#1b2b40;color:#c7d5e3;font-size:21px;line-height:1;cursor:pointer}
.course-add-search,.course-add-select{display:grid;gap:7px;margin-top:16px;color:#bbcad9;font-size:10px;font-weight:750}
.course-add-search input{width:100%;min-height:42px;padding:0 12px;border:1px solid #304960;border-radius:11px;outline:0;background:#0b1929;color:#f2f7fb;font:inherit;font-size:12px}
.course-add-search input:focus{border-color:#24b99f;box-shadow:0 0 0 3px #24b99f20}
.course-add-select select{width:100%;height:198px;padding:5px;border:1px solid #304960;border-radius:11px;outline:0;background:#0b1929;color:#e0eaf4;font:500 11px/1.5 Inter,Arial,sans-serif}
.course-add-select option{padding:8px 9px;border-radius:6px}.course-add-select option:checked{background:#0e574e linear-gradient(#0e574e,#0e574e);color:#e8fff8}.course-add-select option:disabled{color:#728196}
.course-add-picked{min-height:38px;margin-top:10px;padding:10px 11px;border:1px solid #29465a;border-radius:10px;background:#102233;color:#99b2c5;font-size:10px;line-height:1.4}
.course-add-existing{margin-top:15px}.course-add-existing>strong{display:block;margin-bottom:7px;color:#a9c2d3;font-size:10px}.course-add-existing>div{display:grid;gap:6px;max-height:130px;overflow:auto}
.course-add-existing article{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid #2b4055;border-radius:10px;background:#122137}
.course-add-existing article>span{min-width:0;display:grid;gap:3px}.course-add-existing article b{font-size:10px}.course-add-existing article small{overflow:hidden;color:#8ea2b8;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.course-add-existing article button{min-height:30px;padding:0 9px;border:1px solid #633d4b;border-radius:8px;background:#32232d;color:#ffc9d0;font-size:9px;font-weight:800;cursor:pointer}
.course-add-dialog>footer{display:flex;justify-content:flex-end;gap:8px;margin-top:17px;padding-top:14px;border-top:1px solid #ffffff12}
.course-add-dialog>footer button{min-height:39px;padding:0 13px;border:1px solid #32485e;border-radius:10px;background:#17273a;color:#c0cedc;font-size:10px;font-weight:800;cursor:pointer}
.course-add-dialog>footer .course-add-submit{border-color:#168776;background:linear-gradient(105deg,#087f70,#0ba48b);color:#eefff9}.course-add-dialog>footer .course-add-submit:disabled{opacity:.45;cursor:not-allowed}.course-add-dialog>footer .course-add-submit span{margin-left:5px;font-size:14px}
.course-add-status{min-height:0;margin:8px 0 0;color:#9cb4c9;font-size:10px;line-height:1.45}.course-add-status:empty{display:none}
html:not(.dark-mode) .course-add-dialog{border-color:#d7e6ef;background:linear-gradient(145deg,#fff,#f1f8fb);color:#123353}
html:not(.dark-mode) .course-add-dialog>header p,html:not(.dark-mode) .course-add-search,html:not(.dark-mode) .course-add-select,html:not(.dark-mode) .course-add-existing>strong{color:#617d99}
html:not(.dark-mode) .course-add-dialog>header>button,html:not(.dark-mode) .course-add-dialog>footer button{border-color:#d5e2ed;background:#f4f8fc;color:#405e7d}
html:not(.dark-mode) .course-add-search input,html:not(.dark-mode) .course-add-select select{border-color:#d3e3ee;background:#fff;color:#1e3853}
html:not(.dark-mode) .course-add-picked,html:not(.dark-mode) .course-add-existing article{border-color:#d8e6ef;background:#f4f8fb;color:#4c6884}
@media(max-width:600px){.course-add-backdrop{padding:12px}.course-add-dialog{padding:17px;border-radius:18px}.course-add-dialog>header h2{font-size:20px}.course-add-select select{height:180px}.courses-add-button{min-height:36px;padding:0 12px;font-size:11px}}

/* Course module view inspired by the compact Figma course-content frame. */
.course-content-page{--module-accent:var(--row-color,#00b99a);width:100%;max-width:920px;margin:0 auto;padding:0 0 34px;display:grid;gap:14px;color:var(--ink)}
.course-content-banner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:126px;padding:20px 24px;overflow:hidden;border:1px solid #a1f0e0;border-radius:18px;background:linear-gradient(112deg,#dbfff7,#90f4e0);isolation:isolate}
.course-content-banner::after{position:absolute;right:8%;bottom:-62px;width:190px;height:150px;border-radius:50%;background:rgba(0,177,158,.1);content:"";pointer-events:none}
.course-content-banner-copy{position:relative;z-index:1;max-width:680px}
.course-content-banner .course-lessons-kicker{color:#008c7b}
.course-content-banner h1{margin:7px 0 4px;color:#063276;font:750 clamp(22px,3.5vw,30px)/1.14 var(--font-display);letter-spacing:-.035em}
.course-content-banner p{margin:0;color:#426d9d;font-size:13px;line-height:1.5}
.course-content-banner-art{position:relative;z-index:1;display:grid;width:56px;height:56px;place-items:center;flex:0 0 auto;border-radius:18px;background:rgba(255,255,255,.44)}
.course-content-banner-art img{display:block;width:30px;height:30px}
.course-content-progress{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:88px;padding:12px 14px;border:1px solid #ddeef9;border-radius:15px;background:#f8fcff;box-shadow:0 2px 20px rgba(82,142,184,.06)}
.course-content-progress-ring{position:relative;display:grid;width:50px;height:50px;place-items:center;flex:0 0 auto;border-radius:50%;background:conic-gradient(from -90deg,#00bfa6 0 var(--progress-percent),#e2f0fe var(--progress-percent) 100%)}
.course-content-progress-ring::before{position:absolute;inset:4px;border-radius:50%;background:#f8fcff;content:""}
.course-content-progress-ring>span{position:relative;color:#063276;font-size:11px;font-weight:800;line-height:1}
.course-content-progress-details{display:grid;gap:4px;min-width:0}
.course-content-progress-details>strong{color:#063276;font-size:13px;line-height:1.15}
.course-content-progress-details>p{margin:0;color:#668ac7;font-size:11px;line-height:1.25}
.course-content-progress-bar{display:block;height:6px;margin-top:2px;overflow:hidden;border-radius:99px;background:#e2f0fe}
.course-content-progress-bar>b{display:block;height:100%;border-radius:inherit;background:#00bfa6;transition:width .35s ease}
.course-content-continue{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 13px;border-radius:999px;background:#d9fcf5;color:#008e7b;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap;transition:background .16s,transform .16s}
.course-content-continue:hover{transform:translateY(-1px);background:#c7f8ee}
.course-content-continue img{display:block;width:14px;height:14px}
.course-modules-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 1px 0}
.course-modules-heading h2{margin:4px 0 0;color:var(--ink);font:700 20px/1.2 var(--font-display);letter-spacing:-.025em}
.course-modules-heading>button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 4px;border:0;background:transparent;color:#00a98f;font-size:12px;font-weight:800;cursor:pointer}
.course-modules-heading>button img{width:14px;height:14px}
.course-modules-list{display:grid;gap:9px}
.course-module{overflow:hidden;border:1px solid #ddeef9;border-radius:15px;background:var(--panel);transition:border-color .16s,box-shadow .16s}
.course-module.is-open{border-color:#b9f5ea;box-shadow:0 5px 16px -14px rgba(0,167,146,.5)}
.course-module-card{display:grid;width:100%;grid-template-columns:40px minmax(0,1fr) auto 12px;align-items:center;gap:12px;min-height:94px;padding:11px 13px;border:0;background:#fbfdff;color:var(--ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.course-module.is-open .course-module-card{background:#effdfb}
.course-module-icon{display:grid;width:40px;height:40px;place-items:center;overflow:hidden;border-radius:12px;background:linear-gradient(145deg,#00c3a4,#00a88f)}
.course-module:nth-child(4n + 2) .course-module-icon{background:linear-gradient(145deg,#b968fb,#8641ea)}
.course-module:nth-child(4n + 3) .course-module-icon{background:linear-gradient(145deg,#ffb21b,#ff8900)}
.course-module:nth-child(4n + 4) .course-module-icon{background:linear-gradient(145deg,#a84dff,#7434e9)}
.course-module-icon img{display:block;width:30px;height:30px;object-fit:contain}
.course-module-copy{display:grid;gap:3px;min-width:0}
.course-module-copy>strong{overflow:hidden;color:#063276;font-size:13px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.course-module-copy>small{overflow:hidden;color:#668ac7;font-size:10px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.course-module-copy>span{display:-webkit-box;overflow:hidden;color:#557ab7;font-size:10px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.course-module-progress{display:block;width:min(100%,200px);height:4px;margin-top:2px;overflow:hidden;border-radius:99px;background:#e2f0fe}
.course-module-progress>b{display:block;height:100%;border-radius:inherit;background:#00bfa6}
.course-module-status{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:23px;padding:0 8px;border-radius:999px;background:#edf4fd;color:#7294c6;font-size:9px;font-weight:750;white-space:nowrap}
.course-module-status.completed{background:#d9fcf5;color:#008e7b}
.course-module-status.in-progress{background:#e8f4ff;color:#2687ef}
.course-module-status>img{display:block;width:11px;height:11px;object-fit:contain}
.course-module-status>i{width:6px;height:6px;border-radius:50%;background:#8ba2c0}
.course-module-chevron{display:grid;width:12px;height:18px;place-items:center;overflow:hidden}
.course-module-chevron img{display:block;width:12px;height:auto}
.course-module.is-open .course-module-chevron{transform:rotate(90deg)}
.course-module-lessons{display:grid;gap:7px;padding:0 10px 10px}
.course-module-lessons[hidden]{display:none}
.course-module-lessons .course-lesson-card-row{display:grid;gap:5px}
.course-module-lessons .course-lesson-card{border-radius:11px}
.course-content-materials{justify-self:center;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;margin-top:1px;padding:0 16px;border:1px solid var(--border);border-radius:999px;background:var(--panel);color:var(--muted);font-size:12px;font-weight:700;cursor:pointer}
.course-content-materials:hover{border-color:#9ce9d9;color:#008e7b}
html.dark-mode .course-content-banner{border-color:rgba(40,221,189,.35);background:linear-gradient(112deg,#123e44,#17646a)}
html.dark-mode .course-content-banner .course-lessons-kicker{color:#78ead6}
html.dark-mode .course-content-banner h1,html.dark-mode .course-content-progress-details>strong,html.dark-mode .course-content-progress-ring>span,html.dark-mode .course-module-copy>strong{color:var(--ink)}
html.dark-mode .course-content-banner p,html.dark-mode .course-content-progress-details>p,html.dark-mode .course-module-copy>small,html.dark-mode .course-module-copy>span{color:var(--muted)}
html.dark-mode .course-content-progress{border-color:var(--border);background:var(--panel)}
html.dark-mode .course-content-progress-ring{background:conic-gradient(from -90deg,#00bfa6 0 var(--progress-percent),color-mix(in srgb,#87a8da 24%,var(--panel)) var(--progress-percent) 100%)}
html.dark-mode .course-content-progress-ring::before{background:var(--panel)}
html.dark-mode .course-content-progress-bar,html.dark-mode .course-module-progress{background:color-mix(in srgb,#87a8da 22%,var(--panel))}
html.dark-mode .course-module{border-color:var(--border);background:var(--panel)}
html.dark-mode .course-module-card,html.dark-mode .course-module.is-open .course-module-card{background:var(--panel)}
html.dark-mode .course-module.is-open{border-color:color-mix(in srgb,#28ddbd 36%,var(--border))}
html.dark-mode .course-module-status{background:color-mix(in srgb,#87a8da 15%,var(--panel));color:var(--muted)}
html.dark-mode .course-module-status.completed{background:rgba(0,191,166,.17);color:#61e2cb}
html.dark-mode .course-module-status.in-progress{background:rgba(38,135,239,.17);color:#8bc2ff}
html.dark-mode .course-content-materials{background:var(--panel);color:var(--muted)}
@media(max-width:720px){
  .course-content-page{gap:11px;padding-bottom:24px}
  .course-content-banner{min-height:105px;padding:15px;border-radius:15px}
  .course-content-banner-art{width:46px;height:46px;border-radius:14px}
  .course-content-banner-art img{width:27px;height:27px}
  .course-content-progress{grid-template-columns:48px minmax(0,1fr) auto;gap:9px;min-height:78px;padding:10px}
  .course-content-progress-ring{width:46px;height:46px}
  .course-content-continue{min-height:38px;padding:0 10px;font-size:11px}
  .course-modules-heading{margin-top:5px}
  .course-modules-heading h2{font-size:18px}
  .course-module-card{grid-template-columns:36px minmax(0,1fr) auto 10px;gap:9px;min-height:88px;padding:9px}
  .course-module-icon{width:36px;height:36px;border-radius:11px}
  .course-module-icon img{width:28px;height:28px}
  .course-module-copy>strong{font-size:12px}
  .course-module-copy>small,.course-module-copy>span{font-size:9px}
  .course-module-status{gap:3px;min-height:21px;padding:0 6px;font-size:8px}
}

/* Profile screen: account overview with native, expandable preferences. */
.account-full-profile-btn{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 12px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2);color:var(--ink);font:700 12px var(--font-body);cursor:pointer}
.account-full-profile-btn:hover{border-color:color-mix(in srgb,var(--led-1) 45%,var(--border));color:var(--led-1)}
#main .profile-page{display:grid;width:min(100%,980px);gap:16px;margin:0 auto;padding:clamp(12px,2vw,24px) 0 44px;color:var(--ink)}
.profile-page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.profile-page-heading h1{margin:4px 0 3px;font-family:var(--font-display);font-size:clamp(27px,4vw,36px);line-height:1.08}
.profile-page-heading p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.profile-home-link{flex:none}
.profile-identity-card{display:flex;align-items:center;gap:16px;min-width:0;padding:clamp(15px,2.5vw,22px);border:1px solid color-mix(in srgb,var(--led-1) 21%,var(--border));border-radius:19px;background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--led-1) 13%,transparent),transparent 48%),linear-gradient(120deg,color-mix(in srgb,var(--led-1) 6%,var(--panel)),var(--panel) 64%);box-shadow:0 12px 32px rgba(21,43,76,.06)}
.profile-page-avatar{width:72px;height:72px;flex:none;border:3px solid color-mix(in srgb,var(--led-1) 42%,var(--panel));border-radius:50%;background:var(--panel-2);object-fit:cover}
.profile-identity-copy{display:grid;gap:4px;min-width:0;flex:1}
.profile-identity-kicker,.profile-level-kicker{color:var(--led-1);font:800 9px var(--font-mono);letter-spacing:.12em}
.profile-identity-copy h2{overflow:hidden;margin:0;font-family:var(--font-display);font-size:clamp(18px,2.4vw,23px);line-height:1.18;text-overflow:ellipsis}
.profile-identity-copy p,.profile-identity-copy small{overflow:hidden;margin:0;color:var(--muted);font-size:11px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.profile-identity-copy p span{padding-inline:4px;color:var(--led-1)}
.profile-founding-badge{font-size:9px}
.profile-share-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;flex:none;padding:0 14px;border:1px solid color-mix(in srgb,#20b98a 36%,var(--border));border-radius:12px;background:color-mix(in srgb,#20b98a 11%,var(--panel));color:color-mix(in srgb,#168c70 80%,var(--ink));font:750 11px var(--font-body);cursor:pointer}
.profile-share-button>span{font-size:17px}
.profile-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.profile-stat-card{display:grid;min-width:0;min-height:112px;align-content:center;justify-items:start;gap:5px;padding:13px 15px;border:1px solid var(--border);border-radius:15px;background:linear-gradient(145deg,color-mix(in srgb,var(--profile-accent,#24b99b) 8%,var(--panel)),var(--panel) 72%)}
.profile-stat-icon{display:grid;width:29px;height:29px;place-items:center;border:1px solid color-mix(in srgb,var(--profile-accent,#24b99b) 25%,transparent);border-radius:9px;background:color-mix(in srgb,var(--profile-accent,#24b99b) 13%,var(--panel));color:var(--profile-accent,#24b99b)}
.profile-stat-icon svg{width:17px;height:17px}
.profile-stat-card strong{font-family:var(--font-display);font-size:20px;line-height:1.1}
.profile-stat-card small{color:var(--muted);font-size:10px;line-height:1.3}
.profile-stat-xp{--profile-accent:#3988ed}.profile-stat-streak{--profile-accent:#ef9b36}.profile-stat-quizzes{--profile-accent:#8c67e8}.profile-stat-lessons{--profile-accent:#13a889}
.profile-level-card{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;border:1px solid rgba(80,183,234,.35);border-radius:17px;background:radial-gradient(ellipse at 100% 0%,rgba(60,212,189,.16),transparent 40%),linear-gradient(112deg,#102e60,#075178 65%,#087f84);color:#f5fbff;box-shadow:0 12px 28px rgba(8,64,111,.15)}
.profile-level-emblem{display:grid;width:52px;height:52px;place-items:center;border:1px solid rgba(119,223,238,.4);border-radius:15px;background:rgba(17,181,195,.2);color:#70eee0}
.profile-level-emblem svg{width:29px;height:29px}
.profile-level-copy{display:grid;min-width:0;gap:5px}
.profile-level-kicker{color:#78e7d8}
.profile-level-copy h2{overflow:hidden;margin:0;font-family:var(--font-display);font-size:17px;text-overflow:ellipsis;white-space:nowrap}
.profile-level-track{height:8px;overflow:hidden;border-radius:99px;background:rgba(225,244,255,.2)}
.profile-level-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#25d9bc,#94f38c);transition:width .35s ease}
.profile-level-copy small{color:rgba(238,248,255,.77);font-size:10px}
.profile-level-action{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 11px;border:1px solid rgba(228,246,255,.28);border-radius:10px;background:rgba(255,255,255,.08);color:#f5fbff;font-size:10px;font-weight:750;text-decoration:none;white-space:nowrap}
.profile-links-section h2{margin:2px 0 10px;font-family:var(--font-display);font-size:18px}
.profile-link-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.profile-link-row{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;align-items:center;gap:11px;min-width:0;min-height:68px;padding:9px 12px;border:1px solid var(--border);border-radius:13px;background:var(--panel);color:var(--ink);text-decoration:none;transition:transform .16s,border-color .16s,background .16s}
.profile-premium-row{width:100%;font:inherit;text-align:left;cursor:pointer}
.profile-link-row:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--led-1) 36%,var(--border));background:color-mix(in srgb,var(--led-1) 4%,var(--panel))}
.profile-link-icon{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--profile-link-color,#3988ed) 12%,var(--panel));color:var(--profile-link-color,#3988ed)}
.profile-link-icon svg{width:20px;height:20px}
.profile-link-blue{--profile-link-color:#3988ed}.profile-link-teal{--profile-link-color:#12a88e}.profile-link-gold{--profile-link-color:#da9c31}.profile-link-purple{--profile-link-color:#8d65e6}
.profile-link-row>span:nth-child(2){display:grid;min-width:0;gap:3px}
.profile-link-row strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.profile-link-row small{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.profile-link-arrow{color:var(--muted);font-size:22px;line-height:1}
.profile-accordion{overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--panel)}
.profile-accordion>summary{display:grid;grid-template-columns:38px minmax(0,1fr) 24px;align-items:center;gap:11px;min-height:68px;padding:9px 13px;cursor:pointer;list-style:none}
.profile-accordion>summary::-webkit-details-marker{display:none}
.profile-accordion-icon{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--led-1) 10%,var(--panel-2));color:var(--led-1)}
.profile-accordion-icon svg{width:19px;height:19px}
.profile-accordion>summary>span:nth-child(2){display:grid;gap:3px}
.profile-accordion>summary strong{font-size:12px}
.profile-accordion>summary small{color:var(--muted);font-size:10px}
.profile-accordion-chevron{color:var(--muted);font-size:19px;text-align:center;transition:transform .18s}
.profile-accordion[open] .profile-accordion-chevron{transform:rotate(180deg)}
.profile-preferences-body{padding:0 15px 15px;border-top:1px solid var(--border)}
.profile-preferences-body .account-section{margin:0;padding:10px 0 0;border:0;background:transparent;box-shadow:none}
.profile-preferences-body .account-section-title{display:none}
.profile-preferences-body .account-toggles{gap:2px}
.profile-preferences-body .account-toggle{padding:11px 8px}
.profile-preferences-body .pref-block{margin-top:11px;padding-top:12px}
.profile-help-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 13px 13px;border-top:1px solid var(--border)}
.profile-help-actions .btn{min-height:40px;margin-top:11px}
.profile-help-actions .profile-signout-button{border-color:color-mix(in srgb,var(--danger) 30%,var(--border));color:var(--danger)}
.profile-page-footer{display:flex;justify-content:space-between;gap:12px;padding:2px 3px;color:var(--muted);font-size:10px}
.profile-page-footer strong{color:var(--ink)}
html.dark-mode .profile-identity-card{background:radial-gradient(ellipse at 100% 0%,rgba(28,190,164,.12),transparent 48%),linear-gradient(120deg,#182637,#172231 64%);box-shadow:none}
html.dark-mode .profile-stat-card{background:linear-gradient(145deg,color-mix(in srgb,var(--profile-accent,#24b99b) 11%,var(--panel)),var(--panel) 78%)}
html.dark-mode .profile-link-row{background:var(--panel)}
html.dark-mode .profile-link-row:hover{background:color-mix(in srgb,var(--led-1) 7%,var(--panel))}
@media(max-width:760px){#main .profile-page{gap:12px;padding:8px 0 calc(96px + env(safe-area-inset-bottom,0px))}.profile-page-heading{align-items:center}.profile-page-heading p{font-size:11px}.profile-home-link{min-height:38px;padding-inline:10px;font-size:11px}.profile-identity-card{display:grid;grid-template-columns:58px minmax(0,1fr);gap:11px;padding:14px;border-radius:16px}.profile-page-avatar{grid-row:span 2;width:56px;height:56px}.profile-identity-copy h2{font-size:18px}.profile-identity-copy p,.profile-identity-copy small{font-size:10px}.profile-share-button{grid-column:2;justify-self:start;min-height:36px;padding-inline:10px;font-size:10px}.profile-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.profile-stat-card{grid-template-columns:31px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;min-height:68px;gap:2px 8px;padding:10px}.profile-stat-icon{grid-row:span 2;width:30px;height:30px}.profile-stat-card strong{font-size:17px}.profile-stat-card small{font-size:9px}.profile-level-card{grid-template-columns:43px minmax(0,1fr);gap:10px;padding:12px;border-radius:14px}.profile-level-emblem{width:42px;height:42px;border-radius:12px}.profile-level-emblem svg{width:24px;height:24px}.profile-level-copy h2{font-size:15px}.profile-level-action{grid-column:2;justify-self:start;min-height:31px;margin-top:1px;font-size:9px}.profile-link-list{grid-template-columns:1fr;gap:7px}.profile-link-row{grid-template-columns:37px minmax(0,1fr) 16px;min-height:60px;padding:8px 10px}.profile-link-icon{width:35px;height:35px}.profile-link-row strong{font-size:11px}.profile-link-row small{font-size:9px}.profile-accordion>summary{min-height:62px;padding:8px 10px}.profile-preferences-body{padding:0 9px 11px}.profile-preferences-body .pref-block-hint{font-size:10px}.profile-page-footer{padding-bottom:6px;font-size:9px}}
@media(max-width:380px){.profile-page-heading p{max-width:250px}.profile-page-heading .profile-home-link{padding-inline:8px;font-size:10px}.profile-stat-card{padding:8px}.profile-stat-card small{font-size:8px}.profile-level-card{grid-template-columns:37px minmax(0,1fr);gap:8px;padding:10px}.profile-level-emblem{width:36px;height:36px}.profile-link-row{grid-template-columns:34px minmax(0,1fr) 14px;gap:8px;padding-inline:8px}.profile-link-icon{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.profile-level-track i,.profile-link-row,.profile-accordion-chevron{transition:none!important}}
@media(max-width:390px){
  .course-content-banner{min-height:96px;padding:13px}
  .course-content-banner-art{width:40px;height:40px}
  .course-content-banner h1{font-size:20px}
  .course-content-banner p{font-size:11px}
  .course-content-progress{grid-template-columns:43px minmax(0,1fr) auto;gap:7px;padding:8px}
  .course-content-progress-ring{width:42px;height:42px}
  .course-content-continue{gap:4px;min-height:36px;padding:0 7px;font-size:10px}
  .course-content-continue img{width:12px;height:12px}
  .course-module-card{grid-template-columns:32px minmax(0,1fr) auto 8px;gap:7px;min-height:82px;padding:8px}
  .course-module-icon{width:32px;height:32px;border-radius:10px}
  .course-module-icon img{width:25px;height:25px}
  .course-module-copy>strong{font-size:11px}
  .course-module-copy>small,.course-module-copy>span{font-size:8px}
  .course-module-status{max-width:74px;padding:0 5px;font-size:7px}
}
/* Author-authored Quicky Code curriculum */
.qc-authored-shell{width:min(1420px,100%);margin:0 auto;padding:clamp(16px,3vw,34px);color:var(--text,#eaf2ff)}.qc-authored-back,.qc-authored-study-head>button{border:1px solid var(--border,#2b3b52);border-radius:10px;background:var(--surface,#172334);color:inherit;padding:10px 14px;cursor:pointer}.qc-authored-track-hero{margin:18px 0 24px;padding:clamp(22px,4vw,42px);border:1px solid rgba(53,217,190,.28);border-radius:24px;background:radial-gradient(ellipse at top right,rgba(14,190,161,.19),transparent 55%),linear-gradient(140deg,#172b3e,#101a2b)}.qc-authored-kicker{display:block;color:#65dbc8;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.qc-authored-track-hero h1{margin:8px 0;font-size:clamp(28px,4vw,44px)}.qc-authored-track-hero p{max-width:760px;color:var(--muted,#aabbd0);line-height:1.6}.qc-authored-topic{margin:24px 0}.qc-authored-topic>header{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.qc-authored-topic>header h2{margin:4px 0;font-size:22px}.qc-authored-topic>header>span{color:var(--muted,#aabbd0);font-size:12px}.qc-authored-lesson-list{display:grid;gap:10px}.qc-authored-lesson{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px;border:1px solid var(--border,#2b3b52);border-radius:16px;background:var(--surface,#172334);color:inherit;text-decoration:none;transition:border-color .18s,transform .18s}.qc-authored-lesson:hover{border-color:#36cbb3;transform:translateY(-1px)}.qc-authored-index{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(41,206,177,.13);color:#54dbc2;font-weight:800}.qc-authored-lesson.is-complete .qc-authored-index{background:#0eb99a;color:white}.qc-authored-lesson-copy{display:grid;gap:5px;min-width:0}.qc-authored-lesson-copy b{font-size:15px}.qc-authored-lesson-copy small{overflow:hidden;color:var(--muted,#aabbd0);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.qc-authored-mini-progress,.qc-authored-page-progress{height:5px;overflow:hidden;border-radius:9px;background:rgba(144,166,195,.18)}.qc-authored-mini-progress i,.qc-authored-page-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#12b99b,#65e0c6)}.qc-authored-arrow{color:#51d6bd;font-size:12px;font-weight:700;white-space:nowrap}.qc-authored-empty,.qc-authored-loading{padding:28px;border:1px solid var(--border,#2b3b52);border-radius:16px;background:var(--surface,#172334);color:var(--muted,#aabbd0);text-align:center}.qc-authored-empty b{display:block;color:var(--text,#eaf2ff);font-size:17px}.qc-authored-empty button{margin-top:12px}.qc-authored-study-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin-bottom:20px}.qc-authored-study-head h1{margin:5px 0;font-size:clamp(21px,3vw,30px)}.qc-authored-study-head>span{color:var(--muted,#aabbd0);font-variant-numeric:tabular-nums}.qc-authored-study-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.8fr);align-items:start;gap:18px}.qc-authored-page,.qc-authored-editor,.qc-authored-editor-empty{min-width:0;padding:clamp(18px,3vw,30px);border:1px solid var(--border,#2b3b52);border-radius:20px;background:var(--surface,#172334)}.qc-authored-page-progress{margin-bottom:24px}.qc-authored-page h2{font-size:clamp(20px,2.6vw,28px)}.qc-authored-prose{font-size:16px;line-height:1.85;color:var(--muted,#c2cede)}.qc-authored-illustration,.qc-authored-diagram img{display:block;max-width:100%;max-height:520px;margin:18px auto;border-radius:14px;object-fit:contain}.qc-authored-check,.qc-authored-example,.qc-authored-project-callout{margin:18px 0;padding:18px;border:1px solid rgba(72,199,178,.2);border-radius:14px;background:rgba(13,26,42,.66)}.qc-authored-check>div{display:grid;gap:8px;margin-top:14px}.qc-authored-check button,.qc-authored-step-actions button,.qc-authored-empty button{min-height:42px;padding:9px 13px;border:1px solid var(--border,#2b3b52);border-radius:10px;background:rgba(255,255,255,.035);color:inherit;text-align:left;cursor:pointer}.qc-authored-feedback{min-height:20px;color:#69dcc5;font-weight:700}.qc-authored-check-explanation{display:block;color:var(--muted,#aabbd0);line-height:1.6}.qc-authored-step-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:28px;padding-top:18px;border-top:1px solid var(--border,#2b3b52)}.qc-authored-step-actions>span{color:var(--muted,#aabbd0);font-size:11px}.qc-authored-primary,.qc-authored-editor header button{border:0!important;background:linear-gradient(110deg,#0eb99a,#42d9bf)!important;color:#06271f!important;font-weight:800!important;text-align:center!important}.qc-authored-project-link{display:flex;justify-content:space-between;gap:10px;margin-top:16px;padding:14px;border-radius:12px;background:rgba(51,136,229,.1);font-size:12px}.qc-authored-project-link a{color:#64d9c2;font-weight:700}.qc-authored-editor{position:sticky;top:16px;display:grid;gap:12px}.qc-authored-editor header{display:flex;justify-content:space-between;align-items:center;gap:10px}.qc-authored-editor header>div{display:grid;gap:5px}.qc-authored-editor header button{min-height:40px;padding:9px 16px;border-radius:10px;cursor:pointer}.qc-authored-editor>p,.qc-authored-editor-empty p{margin:0;color:var(--muted,#aabbd0);font-size:13px;line-height:1.55}.qc-authored-editor textarea{width:100%;min-height:360px;resize:vertical;padding:16px;border:1px solid #293e59;border-radius:12px;background:#0a1220;color:#eaf2ff;font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}.qc-authored-output{min-height:72px;max-height:180px;overflow:auto;margin:0;padding:12px;border:1px solid var(--border,#2b3b52);border-radius:10px;background:#0a1220;color:#b8f5e7;white-space:pre-wrap}.qc-runtime-unavailable{color:#ffc86c}.qc-authored-diagram{position:relative;margin:18px 0}.qc-authored-diagram button{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:34px;height:34px;border:2px solid #fff;border-radius:50%;background:#13b99d;color:#fff;font-weight:800;cursor:pointer}.qc-project-timer{margin:18px 0;padding:12px;border-radius:11px;background:rgba(255,255,255,.04);color:var(--muted,#aabbd0)}.qc-project-timer b{margin-left:9px;color:#ffd17b;font-size:18px;font-variant-numeric:tabular-nums}
@media(max-width:800px){.qc-authored-study-grid{grid-template-columns:1fr}.qc-authored-editor{position:static;order:2}.qc-authored-editor textarea{min-height:240px}.qc-authored-study-head{grid-template-columns:auto minmax(0,1fr)}.qc-authored-study-head>span{grid-column:2}.qc-authored-lesson{grid-template-columns:40px minmax(0,1fr)}.qc-authored-arrow{grid-column:2}.qc-authored-lesson-copy small{white-space:normal}}
@media(max-width:480px){.qc-authored-shell{padding:14px}.qc-authored-lesson{gap:10px;padding:12px}.qc-authored-study-head{gap:9px}.qc-authored-step-actions{flex-wrap:wrap}.qc-authored-step-actions>span{order:3;width:100%;text-align:center}.qc-authored-project-link{flex-direction:column}}

/* Keep the draggable study buddy responsive and checkpoint reveals truly hidden. */
.qc-authored-check-explanation[hidden]{display:none!important}
.quicky-head{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;cursor:grab}
.quicky-head:active{cursor:grabbing}


/* Compact Quicky Code cards and keep the whole card inside narrow phone screens. */
@media(max-width:600px){
  .qc-lobby,.qc-path-sections,.qc-path-group,.qc-lang-grid{box-sizing:border-box;min-width:0;max-width:100%}
  .qc-lang-grid{grid-template-columns:minmax(0,1fr)}
  .qc-lang-card{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(72px,88px);align-items:center;gap:9px;width:100%;min-width:0;box-sizing:border-box;padding:11px}
  .qc-lang-icon{grid-row:1;width:40px;height:40px;flex:none}
  .qc-lang-body{width:auto;min-width:0;overflow:hidden}
  .qc-lang-title-row{justify-content:flex-start;flex-wrap:wrap;gap:5px}
  .qc-lang-title-row h3{min-width:0;font-size:14px;overflow-wrap:anywhere}
  .qc-lang-status{max-width:100%;white-space:normal}
  .qc-lang-body p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
  .qc-lang-sequence{display:none}
  .qc-lang-action{grid-column:3;grid-row:1;width:100%;min-width:0;max-width:88px;padding-left:0!important}
  .qc-enroll-btn,.qc-premium-info-btn{display:block;width:100%;box-sizing:border-box;min-width:0;max-width:88px;padding:8px 7px!important;font-size:11px!important;line-height:1.2;text-align:center;white-space:normal!important;overflow-wrap:anywhere}
  .qc-authored-shell{box-sizing:border-box;width:100%;min-width:0;max-width:100%;overflow-x:clip}
  .qc-authored-lesson{box-sizing:border-box;width:100%;min-width:0;max-width:100%;overflow:hidden}
  .qc-authored-lesson-copy{min-width:0;overflow:hidden}
  .qc-authored-lesson-copy b,.qc-authored-lesson-copy small{overflow-wrap:anywhere;white-space:normal}
  .qc-authored-lesson-copy small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
}
.quicky-head{-webkit-touch-callout:none}

/* Account drawer: keep high-value items visible and make the rest easy to scan. */
.account-disclosure{overflow:hidden;margin:10px 0;border:1px solid var(--border);border-radius:15px;background:color-mix(in srgb,var(--panel) 88%,var(--panel-2))}
.account-disclosure>summary{display:grid;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:10px;min-height:62px;padding:9px 12px;cursor:pointer;list-style:none}
.account-disclosure>summary::-webkit-details-marker{display:none}
.account-disclosure>summary>span:nth-child(2){display:grid;gap:3px;min-width:0}
.account-disclosure>summary strong{font-size:13px}
.account-disclosure>summary small{overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.account-disclosure-icon{display:grid;width:32px;height:32px;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--led-1) 13%,var(--panel-2));color:var(--led-1);font-size:17px;font-weight:800}
.account-disclosure-chevron{color:var(--muted);font-size:18px;text-align:center;transition:transform .18s}
.account-disclosure[open]>summary .account-disclosure-chevron{transform:rotate(180deg)}
.account-disclosure-content{padding:0 12px 12px;border-top:1px solid var(--border)}
.account-disclosure-content>.account-section{margin:10px 0 0;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.account-preferences-section{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.account-preferences-disclosure{margin:0}
.account-preferences-disclosure>.account-disclosure-content{padding:0 12px 14px}
.account-preferences-disclosure .account-toggles{padding-top:7px}
.account-panel-inner>.account-stats{margin-top:14px}
.daily-fox-disclosure .daily-fox-section{margin:10px 0 0;padding:0;border:0;background:transparent}
@media(max-width:600px){.account-disclosure{margin:8px 0}.account-disclosure>summary{min-height:58px;padding:8px 10px}.account-disclosure-content{padding-inline:9px}}

/* The profile page starts with identity and level; activity and secondary links expand on demand. */
.profile-activity-accordion{background:transparent}
.profile-activity-accordion>.profile-stat-grid{padding:0 13px 13px}
.profile-more-links{grid-column:1/-1;overflow:hidden;border:1px solid var(--border);border-radius:13px;background:color-mix(in srgb,var(--panel) 82%,var(--panel-2))}
.profile-more-links>summary{display:flex;align-items:center;justify-content:space-between;min-height:47px;padding:9px 13px;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;list-style:none}
.profile-more-links>summary::-webkit-details-marker{display:none}
.profile-more-links>summary span{font-size:17px;transition:transform .18s}
.profile-more-links[open]>summary span{transform:rotate(180deg)}
.profile-more-links-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 9px 9px;border-top:1px solid var(--border)}
.profile-more-links-list .profile-link-row{margin-top:8px}
@media(max-width:760px){.profile-more-links-list{grid-template-columns:1fr}}



.qc-premium-path-gate{display:grid;justify-items:start;gap:12px;max-width:680px;margin:clamp(24px,8vh,80px) auto;padding:clamp(22px,5vw,42px);border:1px solid color-mix(in srgb,#d4ad64 42%,var(--border,#343948));border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,#d4ad64 10%,var(--panel,#171a23)),var(--panel,#171a23));box-shadow:0 18px 48px rgba(10,20,35,.12)}
.qc-premium-path-gate h1{margin:0;color:var(--text,var(--ink));font:750 clamp(24px,4vw,36px)/1.15 "Space Grotesk",system-ui,sans-serif}
.qc-premium-path-gate p{max-width:58ch;margin:0 0 6px;color:var(--muted,#9aa3b2);font-size:14px;line-height:1.65}
.qc-premium-path-gate .btn{min-height:44px;padding:10px 18px}

/* Opt-in controls for course and coding-path study reminders */
.course-reminder-optin,.qc-reminder-optin{display:inline-flex;align-items:center;gap:8px;min-height:38px;margin-top:12px;padding:9px 13px;border:1px solid #17a87666;border-radius:12px;background:#17a87612;color:#168a69;font:700 12px var(--font-body,Inter,sans-serif);cursor:pointer;transition:background .16s,border-color .16s,transform .16s}
.course-reminder-optin:hover,.qc-reminder-optin:hover{transform:translateY(-1px);border-color:#17a876;background:#17a87620}
.course-reminder-optin[hidden],.qc-reminder-optin[hidden]{display:none!important}
.qc-reminder-optin{margin-top:7px;border-color:#35d9be55;background:#16c6a31a;color:#83f1d7}
.theme-light .course-reminder-optin{color:#087d63;background:#e6f8f3;border-color:#b9e8d9}

/* Quicky Docs: supplied PDF samples and their source-specific guidance */
.qd-reference-card{margin-top:16px;padding:16px;border:1px solid color-mix(in srgb,var(--accent,#18b99a) 34%,var(--border));border-radius:15px;background:color-mix(in srgb,var(--accent,#18b99a) 7%,var(--panel-2));}
.qd-reference-heading{display:flex;align-items:center;gap:11px}.qd-reference-icon{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:12px;background:#e4474766;color:#fff;font:800 11px var(--font-mono,monospace);letter-spacing:.04em}.qd-reference-heading strong,.qd-reference-heading small{display:block}.qd-reference-heading strong{font-size:13px;color:var(--ink)}.qd-reference-heading small{margin-top:3px;color:var(--muted);font-size:11px}
.qd-reference-caution{margin:12px 0 8px;padding:10px 12px;border-left:3px solid #e5a63b;border-radius:0 9px 9px 0;background:#e5a63b14;color:var(--ink);font-size:12px;line-height:1.5}
.qd-reference-steps{display:grid;gap:5px;margin:8px 0 13px;padding-left:20px;color:var(--muted);font-size:11px;line-height:1.45}.qd-reference-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px}.qd-reference-actions .btn{min-height:39px}.qd-reference-related{color:var(--accent,#18b99a);font-size:12px;font-weight:700;text-decoration:none}.qd-reference-related:hover{text-decoration:underline}
html.dark-mode .qd-reference-card{background:color-mix(in srgb,var(--accent,#18b99a) 8%,var(--panel))}.theme-light .qd-reference-caution{background:#fff7e8;color:#47391f}
@media(max-width:700px){.qd-reference-card{padding:13px}.qd-reference-heading{align-items:flex-start}.qd-reference-actions{align-items:stretch;flex-direction:column}.qd-reference-actions .btn{justify-content:center;text-align:center}.qd-reference-related{padding:8px 2px}}

/* Classroom chat: keep the message row, bubble, and composer within phone width. */
.classroom-room,.room-body,.room-main,.room-chat,.chat-messages{box-sizing:border-box;min-width:0;max-width:100%}
.room-body{width:100%}
.room-chat{width:100%;overflow:hidden}
.chat-messages{width:100%;overflow-x:hidden;align-items:stretch}
.chat-msg{box-sizing:border-box;width:100%;min-width:0;max-width:100%}
.chat-msg-body{box-sizing:border-box;flex:0 1 auto;min-width:0;max-width:min(520px,calc(100% - 42px));overflow-wrap:anywhere}
.chat-msg-meta{min-width:0}.chat-msg-name,.chat-msg-time{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-compose{box-sizing:border-box;width:100%;min-width:0}.chat-compose-tools{flex:0 0 auto}.chat-text-input{flex:1 1 0;min-width:0}.chat-compose>#chatSendBtn{flex:0 0 auto}
@media(max-width:640px){.classroom-room,.room-body,.room-main,.room-chat{width:100%;min-width:0;max-width:100%}.chat-messages{padding-inline:10px}.chat-msg-body{max-width:calc(100% - 42px)}.room-admin-row>.btn{flex:1 1 120px;min-width:0}.room-admin{min-width:0;max-width:100%;overflow:hidden}}
@media(max-width:820px){
  .room-body{grid-template-columns:minmax(0,1fr);}
  .room-members{width:100%;min-width:0;}
  .room-members-list{width:100%;min-width:0;}
  .room-main{width:100%;min-width:0;}
}

/* VIDEO LIBRARY VISUAL REFRESH v2 — final overrides kept at the end of the sheet. */
.video-library-screen{max-width:1320px!important;padding:18px 0 48px!important}
.video-library-screen .vl-hero{position:relative!important;min-height:260px!important;overflow:hidden!important;margin:0 0 22px!important;padding:clamp(28px,4vw,48px)!important;border:1px solid rgba(57,225,215,.48)!important;border-radius:26px!important;background:radial-gradient(ellipse at 78% 10%,rgba(37,217,203,.46),transparent 34%),radial-gradient(ellipse at 4% 110%,rgba(31,118,232,.5),transparent 42%),linear-gradient(112deg,#09253e 0%,#0e4258 54%,#087f83 100%)!important;box-shadow:0 22px 52px rgba(2,29,48,.28)!important;color:#f4fbff!important}
.video-library-screen .vl-hero:after{position:absolute;right:22%;bottom:-120px;width:320px;height:230px;border:1px solid rgba(126,248,232,.22);border-radius:50%;box-shadow:0 0 0 24px rgba(126,248,232,.045),0 0 0 52px rgba(126,248,232,.035);content:"";pointer-events:none}
.video-library-screen .vl-hero-copy{position:relative!important;z-index:2!important;max-width:760px!important}
.video-library-screen .vl-hero .vl-eyebrow{color:#80f4df!important}
.video-library-screen .vl-hero h1{max-width:740px!important;margin:13px 0!important;color:#fff!important;font-size:clamp(35px,5vw,58px)!important;line-height:1.03!important;letter-spacing:-.055em!important}
.video-library-screen .vl-hero h1 span{color:#69f2d8!important}
.video-library-screen .vl-hero-copy>p{max-width:590px!important;color:#d1e9f0!important;font-size:clamp(14px,1.5vw,17px)!important;line-height:1.6!important}
.video-library-screen .vl-hero-meta{gap:8px!important}
.video-library-screen .vl-hero-meta span{padding:8px 11px!important;border:1px solid rgba(200,250,245,.2)!important;border-radius:999px!important;background:rgba(4,22,39,.28)!important;color:#e1f8f5!important}
.video-library-screen .vl-hero-mark{position:relative!important;z-index:2!important;flex-basis:205px!important;width:205px!important;height:205px!important;border:1px solid rgba(132,246,222,.4)!important;border-radius:34px!important;background:linear-gradient(145deg,rgba(153,255,236,.24),rgba(21,96,119,.26))!important;box-shadow:0 20px 50px rgba(0,10,25,.28)!important}
.video-library-screen .vl-collection-strip{gap:14px!important;margin:0 0 24px!important}
.video-library-screen .vl-collection-card{position:relative!important;min-height:104px!important;overflow:hidden!important;padding:17px!important;border:1px solid rgba(255,255,255,.38)!important;border-radius:20px!important;background:linear-gradient(115deg,#0ba99b,#087f91 72%,#1269a6)!important;box-shadow:0 12px 26px rgba(11,117,135,.22)!important;color:#fff!important;transition:transform .18s ease,box-shadow .18s ease!important}
.video-library-screen .vl-collection-card.is-tangency{background:linear-gradient(115deg,#4f66d9,#6c4fd4 62%,#923bb1)!important;box-shadow:0 12px 26px rgba(92,76,189,.2)!important}
.video-library-screen .vl-collection-card:hover{transform:translateY(-3px)!important;box-shadow:0 17px 32px rgba(11,83,120,.28)!important}
.video-library-screen .vl-collection-icon{width:50px!important;height:50px!important;flex-basis:50px!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:15px!important;background:rgba(255,255,255,.18)!important;color:#fff!important;font-size:25px!important}
.video-library-screen .vl-collection-card small,.video-library-screen .vl-collection-card strong,.video-library-screen .vl-collection-card em,.video-library-screen .vl-collection-card>b{color:#fff!important}
.video-library-screen .vl-collection-card small{opacity:.8!important}
.video-library-screen .vl-collection-card em{opacity:.82!important}
.video-library-screen .vl-browse{padding:clamp(16px,2.3vw,28px)!important;border:1px solid color-mix(in srgb,#2795d4 22%,var(--border))!important;border-radius:24px!important;background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 96%,#d9f6f2),var(--panel) 78%)!important;box-shadow:0 16px 40px rgba(24,48,84,.09)!important}
.video-library-screen .vl-browse-head{margin-bottom:15px!important}
.video-library-screen .vl-browse-head h2{font-size:clamp(22px,2.5vw,30px)!important;letter-spacing:-.035em!important}
.video-library-screen .vl-popular-shelf{padding:16px!important;border-radius:18px!important;background:linear-gradient(110deg,color-mix(in srgb,#16b9ac 11%,var(--panel)),color-mix(in srgb,#4786ec 8%,var(--panel)))!important}
.video-library-screen .vl-popular-chip{border-radius:13px!important;background:var(--panel)!important;box-shadow:0 4px 12px rgba(26,45,82,.06)!important}
.video-library-screen .vl-filter{border-radius:999px!important}
.video-library-screen .vl-filter.is-active{border-color:#10b9a8!important;background:linear-gradient(110deg,#0ab99f,#078dac)!important;color:#fff!important;box-shadow:0 5px 14px rgba(8,155,150,.2)!important}
.video-library-screen .vl-video-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.video-library-screen .vl-video-card{overflow:hidden!important;border:1px solid color-mix(in srgb,#4199e8 25%,var(--border))!important;border-radius:19px!important;background:var(--panel)!important;box-shadow:0 10px 26px rgba(26,55,92,.1)!important;transition:transform .18s ease,box-shadow .18s ease!important}
.video-library-screen .vl-video-card:hover{transform:translateY(-4px)!important;box-shadow:0 18px 34px rgba(26,76,122,.17)!important}
.video-library-screen .vl-thumb{min-height:0!important;aspect-ratio:16/9!important;background:#0c1d34!important}
.video-library-screen .vl-thumb img{transition:transform .35s ease!important}
.video-library-screen .vl-video-card:hover .vl-thumb img{transform:scale(1.045)!important}
.video-library-screen .vl-thumb-shade{background:linear-gradient(180deg,rgba(6,19,34,.02) 35%,rgba(5,19,36,.65))!important}
.video-library-screen .vl-play-button{width:48px!important;height:48px!important;border:1px solid rgba(255,255,255,.6)!important;background:linear-gradient(140deg,#17d6c2,#1387d1)!important;box-shadow:0 5px 20px rgba(0,0,0,.3)!important;color:#fff!important}
.video-library-screen .vl-video-card-body{padding:16px!important}
.video-library-screen .vl-video-card h3{min-height:0!important;margin:7px 0 6px!important;font-size:16px!important;line-height:1.3!important}
.video-library-screen .vl-video-card p{min-height:0!important;font-size:12px!important;line-height:1.5!important}
.video-library-screen .vl-watch-btn{min-height:40px!important;margin-top:13px!important;border:1px solid color-mix(in srgb,#12b9ad 24%,var(--border))!important;border-radius:11px!important;background:linear-gradient(100deg,color-mix(in srgb,#13c9b0 16%,var(--panel)),color-mix(in srgb,#258cf1 13%,var(--panel)))!important;color:var(--ink)!important;font-size:12px!important}
.video-library-screen .vl-watch-btn:hover{background:linear-gradient(100deg,#13bca9,#2189d8)!important;color:#fff!important}
.video-library-screen .vl-source-note{border-radius:14px!important}
html.dark-mode .video-library-screen .vl-browse{background:linear-gradient(145deg,#162334,#192b3b 68%,#172638)!important}
html.dark-mode .video-library-screen .vl-video-card{border-color:rgba(86,171,232,.28)!important;background:linear-gradient(155deg,#1d2d41,#172638)!important}
html.dark-mode .video-library-screen .vl-watch-btn{color:#dffaf5!important}
@media(max-width:900px){.video-library-screen .vl-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:720px){
  .video-library-screen{padding:8px 0 32px!important}
  .video-library-screen .vl-hero{min-height:0!important;padding:24px 20px!important;border-radius:22px!important}
  .video-library-screen .vl-hero h1{max-width:440px!important;font-size:clamp(30px,8vw,42px)!important}
  .video-library-screen .vl-hero-copy{padding-right:clamp(76px,24vw,104px)!important}
  .video-library-screen .vl-hero-mark{position:absolute!important;top:18px!important;right:15px!important;flex-basis:auto!important;width:clamp(70px,21vw,96px)!important;height:auto!important;aspect-ratio:1!important;border-radius:21px!important}
  .video-library-screen .vl-hero-meta{gap:6px!important}
  .video-library-screen .vl-hero-meta span{padding:6px 8px!important;font-size:9px!important}
  .video-library-screen .vl-collection-strip{grid-template-columns:1fr!important;display:grid!important;gap:9px!important;margin-bottom:14px!important}
  .video-library-screen .vl-collection-card{min-height:78px!important;padding:12px!important;border-radius:16px!important}
  .video-library-screen .vl-collection-icon{width:42px!important;height:42px!important;flex-basis:42px!important}
  .video-library-screen .vl-browse{padding:14px!important;border-radius:19px!important}
  .video-library-screen .vl-browse-head h2{font-size:22px!important}
  .video-library-screen .vl-popular-shelf{padding:12px!important}
  .video-library-screen .vl-video-grid{grid-template-columns:1fr!important;gap:11px!important}
  .video-library-screen .vl-video-card{display:grid!important;grid-template-columns:minmax(118px,.42fr) minmax(0,1fr)!important;align-items:stretch!important;border-radius:15px!important}
  .video-library-screen .vl-thumb{height:100%!important;min-height:132px!important;aspect-ratio:auto!important}
  .video-library-screen .vl-play-button{width:38px!important;height:38px!important}
  .video-library-screen .vl-video-card-body{justify-content:center!important;min-width:0!important;padding:10px!important}
  .video-library-screen .vl-video-card h3{font-size:13px!important}
  .video-library-screen .vl-video-card p{font-size:10px!important}
  .video-library-screen .vl-watch-btn{min-height:35px!important;margin-top:8px!important;font-size:10px!important}
}
@media(max-width:390px){.video-library-screen .vl-hero{padding:21px 16px!important}.video-library-screen .vl-hero-copy{padding-right:77px!important}.video-library-screen .vl-video-card{grid-template-columns:minmax(104px,.39fr) minmax(0,1fr)!important}.video-library-screen .vl-video-card-body{padding:9px!important}.video-library-screen .vl-video-card h3{font-size:12px!important}.video-library-screen .vl-video-card p{font-size:9px!important}}
.dt-open-cad-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(100%,360px);min-height:44px;margin-top:12px;padding:0 14px;border:1px solid color-mix(in srgb,var(--dt-green) 45%,var(--border));border-radius:12px;background:linear-gradient(100deg,#0c9c75,#22c895);color:#06241b;font:800 12px var(--font-display,system-ui);cursor:pointer;transition:filter .18s,transform .18s}.dt-open-cad-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.dt-open-cad-button b{font-size:17px}
.dt-construction-steps{display:grid;gap:7px;margin:0;padding:0;list-style:none;counter-reset:dt-step}.dt-construction-steps li{display:grid;gap:3px;padding:9px 10px 9px 36px;position:relative;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);counter-increment:dt-step}.dt-construction-steps li:before{content:counter(dt-step,decimal-leading-zero);position:absolute;left:10px;top:10px;color:var(--dt-green);font:800 10px var(--font-mono,monospace)}.dt-construction-steps strong{font-size:10px;color:var(--ink)}.dt-construction-steps span{font-size:9px;line-height:1.45;color:var(--muted)}
.primary-nav-link.is-coming-soon{cursor:default;opacity:.78}.primary-nav-link.is-coming-soon small{margin-left:auto;padding:3px 7px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:9px;font-weight:700;white-space:nowrap}.sim-drawing-tutor-link.is-coming-soon{cursor:default}.sim-drawing-tutor-link.is-coming-soon:hover{transform:none;border-color:color-mix(in srgb,#37e0a4 30%,var(--border))}.sim-drawing-tutor-link.is-coming-soon>b{padding:7px 10px;border:1px solid color-mix(in srgb,#37e0a4 28%,var(--border));border-radius:999px;color:#37e0a4;font-size:10px}.drawing-tutor-coming-soon{display:flex;align-items:center;gap:18px;max-width:900px;margin:48px auto;padding:28px;border:1px solid var(--border);border-radius:20px;background:var(--panel)}.drawing-tutor-coming-soon-icon{display:grid;width:62px;height:62px;flex:none;place-items:center;border-radius:18px;background:color-mix(in srgb,#37e0a4 15%,var(--panel));color:#37e0a4;font-size:34px}.drawing-tutor-coming-soon h1{margin:8px 0;font-size:clamp(23px,4vw,34px)}.drawing-tutor-coming-soon p{max-width:60ch;margin:0 0 18px;color:var(--muted);line-height:1.6}.drawing-tutor-coming-soon .button{display:inline-flex;align-items:center;min-height:42px;padding:0 15px}@media(max-width:560px){.drawing-tutor-coming-soon{align-items:flex-start;margin:22px 0;padding:20px}.drawing-tutor-coming-soon-icon{width:48px;height:48px;border-radius:14px;font-size:28px}.sim-drawing-tutor-link.is-coming-soon{grid-template-columns:40px minmax(0,1fr)}.sim-drawing-tutor-link.is-coming-soon>b{grid-column:2;justify-self:start}}
.quicky-head.is-wake-listening::after{content:"";position:absolute;top:10px;right:10px;z-index:5;width:12px;height:12px;border:2px solid #101a27;border-radius:50%;background:#21d6a5;box-shadow:0 0 0 4px rgba(33,214,165,.2),0 0 14px rgba(33,214,165,.72);pointer-events:none}
.quicky-panel{width:min(400px,calc(100vw - 32px));height:min(590px,calc(100vh - 190px));height:min(590px,calc(100dvh - 190px));min-height:360px}
.quicky-voice-bar{flex:0 0 auto;gap:7px;padding:5px 10px 2px}
.quicky-voice-toggle,.quicky-speak-toggle{min-height:32px;padding-inline:8px;font-size:10.5px}
.quicky-voice-status{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:0;padding:2px 12px 5px;line-height:1.3}
.quicky-voice-privacy{padding:3px 12px 6px;font-size:10px;line-height:1.4}
.quicky-voice-privacy summary{min-height:20px;cursor:pointer;color:var(--muted,#8b949e);font-size:10px}
.quicky-voice-privacy span{display:block;margin-top:4px;color:var(--muted,#8b949e)}
@media(max-width:480px){.quicky-panel{width:calc(100vw - 24px);height:min(610px,calc(100vh - 160px));height:min(610px,calc(100dvh - 160px));min-height:320px}}
.quicky-mode-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:0 0 100%;gap:6px;width:100%;margin-top:2px}
.quicky-mode-actions button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:42px;padding:6px 7px;border:1px solid var(--border,#2a2a33);border-radius:12px;background:var(--panel,#16161c);color:var(--ink,#e8edf5);font:650 10px/1.2 var(--font-body,Inter,system-ui,sans-serif);text-align:center;white-space:normal;overflow-wrap:anywhere}
.quicky-mode-actions .quicky-voice-toggle,.quicky-mode-actions .quicky-speak-toggle{cursor:pointer}
.quicky-mode-actions .quicky-voice-toggle.is-listening,.quicky-mode-actions .quicky-speak-toggle.is-enabled{border-color:rgba(0,184,154,.72);background:rgba(0,184,154,.14);color:#65e3ca}
.quicky-mode-actions #quickyUnlockBtn{border-color:rgba(0,184,154,.6);background:linear-gradient(110deg,#10b89b,#20d1ae);color:#06251e;font-weight:750;cursor:pointer}
.quicky-mode-actions button:focus-visible{outline:2px solid #48dfbf;outline-offset:2px}
.quicky-mode-actions button:hover{filter:brightness(1.08)}

/* Study Buddy: keep the conversation readable and give it the flexible space. */
.quicky-panel{
  box-sizing:border-box;
  min-height:min(430px,calc(100dvh - 120px));
  display:flex;
  flex-direction:column;
}
.quicky-panel-header,
.quicky-perm-bar,
.quicky-usage-meter,
.quicky-status,
.quicky-voice-status,
.quicky-voice-privacy,
.quicky-input-row,
.quicky-quick-actions{flex:0 0 auto}
.quicky-panel-header{min-height:62px;padding:9px 12px}
.quicky-mini-badge,.quicky-mini{width:40px;height:40px;flex:0 0 40px}
.quicky-panel-title{min-width:0;gap:9px}
.quicky-panel-title>div{min-width:0}
.quicky-panel-title strong{font-size:14px;line-height:1.25}
.quicky-sub{display:block;margin-top:2px;font-size:11px}
.quicky-perm-bar{min-height:42px;padding:5px 12px;font-size:11.5px}
.quicky-usage-meter{min-height:54px;padding:5px 12px;gap:9px}
.quicky-usage-ring{width:36px;height:36px;flex-basis:36px}
.quicky-usage-copy{gap:1px}
.quicky-usage-copy strong{font-size:11.5px;line-height:1.2}
.quicky-usage-copy small{font-size:10px;line-height:1.2}
.quicky-messages{
  flex:1 1 0;
  min-height:120px;
  min-width:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:12px;
  scroll-behavior:smooth;
}
.quicky-msg{max-width:96%;flex:0 0 auto}
.quicky-bubble{font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.quicky-msg.assistant .quicky-bubble{background:color-mix(in srgb,var(--panel-2,#1c1c22) 88%,#258ef2 12%);border-color:color-mix(in srgb,var(--border,#2a2a33) 72%,#258ef2 28%)}
.quicky-status{min-height:0;padding:0 12px 2px;font-size:10.5px;line-height:1.25}
.quicky-voice-status{padding:3px 12px;font-size:10px;line-height:1.25;-webkit-line-clamp:1}
.quicky-voice-privacy{padding:0 12px 3px;font-size:9px;line-height:1.2}
.quicky-voice-privacy summary{min-height:17px;font-size:9px}
.quicky-input-row{gap:7px;padding:7px 10px}
.quicky-input{min-height:38px;max-height:72px;padding:8px 10px;font-size:13px}
.quicky-send{width:38px;height:38px;flex:0 0 38px}
.quicky-quick-actions{gap:5px;padding:0 10px 9px}
.quicky-quick-actions>button{padding:4px 9px;font-size:10.5px}
.quicky-mode-actions{gap:5px;margin-top:1px}
.quicky-mode-actions button{min-height:36px;padding:5px 5px;border-radius:10px;font-size:9.5px;line-height:1.15}
@media(max-width:480px){
  .quicky-panel{min-height:min(390px,calc(100dvh - 104px))}
  .quicky-panel-header{min-height:58px;padding:8px 10px}
  .quicky-perm-bar{min-height:38px;padding:4px 10px}
  .quicky-usage-meter{min-height:48px;padding:4px 10px}
  .quicky-messages{min-height:105px;padding:10px}
  .quicky-quick-actions{padding-bottom:8px}
  .quicky-mode-actions button{min-height:34px;font-size:9px}
}

.qfl-published-page{max-width:720px;margin:10vh auto;padding:clamp(26px,5vw,56px);border:1px solid rgba(74,146,255,.35);border-radius:24px;background:radial-gradient(ellipse at 50% 0,rgba(36,119,255,.2),transparent 55%),#0c1733;color:#edf4ff;text-align:center;box-shadow:0 30px 90px #0005}.qfl-published-icon{display:grid;width:64px;height:64px;place-items:center;margin:0 auto 18px;border:1px solid #21c59a88;border-radius:50%;background:#0c795b55;color:#60e2bd;font-size:30px}.qfl-published-page h1{margin:14px 0;font-size:clamp(26px,4vw,40px)}.qfl-published-page p{color:#a6b8d3;line-height:1.6}.qfl-published-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:24px}
.qfl-library-cover{width:100%;height:105px;object-fit:cover;margin:-4px 0 8px;border:1px solid var(--qfl-line);border-radius:9px;background:#091326}.qfl-question-workspace h2,.live-show-question-card h2{white-space:pre-line}
.qfl-template-question{width:100%;margin-top:7px}.qfl-cover-preview{grid-column:1/-1;max-width:100%;max-height:150px;object-fit:cover;border:1px solid var(--qfl-line);border-radius:11px}.qfl-import-preview-list{display:grid;gap:7px;max-height:min(48vh,440px);overflow:auto;margin:16px 0}.qfl-import-preview-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;align-items:start;padding:10px;border:1px solid var(--qfl-line);border-radius:9px;background:#ffffff06}.qfl-import-preview-row>span{color:#82baff;font-weight:800;font-size:11px}.qfl-import-preview-row>div{display:grid;gap:4px;min-width:0}.qfl-import-preview-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.qfl-import-preview-row small{color:#a6b7d0;font-size:10px;line-height:1.4}.qfl-import-preview-row.is-invalid{border-color:#ed9b4b77;background:#b75e1717}.qfl-import-preview-row.is-invalid small{color:#ffc27e}.qfl-import-preview-row.is-valid small{color:#63d8b7}.qfl-import-dialog .qfl-preview-card>footer{display:flex;justify-content:flex-end;gap:8px;padding-top:12px;border-top:1px solid var(--qfl-line)}.qfl-import-dialog #qflImportSummary{color:#a6b7d0;font-size:12px}

/* Compact, polished Study Buddy layout: conversation first, two clear actions. */
.quicky-panel{
  width:min(370px,calc(100vw - 24px));
  height:min(520px,calc(100dvh - 112px));
  min-height:min(390px,calc(100dvh - 112px));
  border-radius:20px;
  box-shadow:0 22px 65px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.025);
}
.quicky-panel-header{min-height:60px;padding:9px 12px;background:linear-gradient(135deg,color-mix(in srgb,var(--panel-2,#1c1c22) 92%,#258ef2 8%),var(--panel-2,#1c1c22))}
.quicky-perm-bar{min-height:40px;padding:4px 12px}
.quicky-usage-meter{min-height:50px;padding:4px 12px}
.quicky-messages{min-height:100px;padding:12px;gap:9px}
.quicky-msg{max-width:94%}
.quicky-bubble{padding:10px 12px;font-size:13px;line-height:1.55}
.quicky-quick-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:6px;
  padding:5px 10px 8px;
  border-top:1px solid var(--border,#2a2a33);
}
.quicky-quick-actions>button,
.quicky-mode-actions #quickyUnlockBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:32px;
  box-sizing:border-box;
  margin:0;
  padding:4px 7px;
  border:1px solid color-mix(in srgb,var(--border,#2a2a33) 78%,#258ef2 22%);
  border-radius:12px;
  background:color-mix(in srgb,var(--panel,#16161c) 88%,#258ef2 12%);
  color:var(--ink,#e8edf5);
  font:650 9px/1.15 var(--font-body,Inter,system-ui,sans-serif);
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
}
.quicky-quick-actions>button:hover{border-color:#258ef2;background:color-mix(in srgb,var(--panel,#16161c) 80%,#258ef2 20%)}
.quicky-quick-actions>#quickyWakeToggle{cursor:pointer}
.quicky-quick-actions>#quickyWakeToggle.is-listening{border-color:rgba(0,184,154,.72);background:rgba(0,184,154,.14);color:#65e3ca}
.quicky-quick-actions>#quickySpeakReplies{cursor:pointer}
.quicky-quick-actions>#quickySpeakReplies.is-enabled{border-color:rgba(0,184,154,.72);background:rgba(0,184,154,.14);color:#65e3ca}
.quicky-quick-actions>#quickyWakeToggle:focus-visible{outline:2px solid #48dfbf;outline-offset:2px}
.quicky-mode-actions{display:block;width:auto;margin:0;flex:none}
.quicky-mode-actions #quickyUnlockBtn{border-color:rgba(0,184,154,.48);background:linear-gradient(110deg,#0cae94,#19c8a7);color:#06251e;font-weight:750;cursor:pointer}
.quicky-mode-actions #quickyUnlockBtn:hover{filter:brightness(1.06)}

/* Quick Fix Live quiz authoring workspace */
.qfl-editor-page,.qfl-library-page,.qfl-launch-page{--qfl-blue:#2477ff;--qfl-panel:#101a2d;--qfl-panel-2:#14213a;--qfl-line:rgba(133,169,226,.2);color:#eef4ff}
.qfl-editor-page{min-height:calc(100vh - 80px);padding:20px clamp(14px,2.5vw,36px) 36px;background:radial-gradient(ellipse at 50% -20%,rgba(36,119,255,.15),transparent 55%)}
.qfl-editor-topbar{display:grid;grid-template-columns:auto auto minmax(180px,1fr) auto;align-items:center;gap:16px;padding:12px 16px;border:1px solid var(--qfl-line);border-radius:18px;background:rgba(12,20,36,.92);position:sticky;top:8px;z-index:5;backdrop-filter:blur(16px);box-shadow:0 12px 32px #050a1470}
.qfl-editor-brand{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;font-weight:800;white-space:nowrap}.qfl-editor-brand img{width:34px;height:34px;object-fit:contain}.qfl-editor-brand b{font-size:10px;letter-spacing:.12em;color:#82b5ff;background:#16356a;padding:4px 6px;border-radius:6px}
.qfl-title-wrap{display:grid;min-width:0;gap:3px}.qfl-title-wrap input{width:100%;min-width:0;border:0;background:transparent;color:#f5f8ff;font-size:18px;font-weight:750;outline:none}.qfl-title-wrap small{font-size:11px;color:#91a4c3}.qfl-title-wrap small[data-state=saving]{color:#83baff}.qfl-title-wrap small[data-state=dirty],.qfl-title-wrap small[data-state=error]{color:#ffbd78}.qfl-editor-actions{display:flex;align-items:center;gap:7px}.qfl-editor-actions .btn,.qfl-back-quizzes{white-space:nowrap}.qfl-quiz-details{margin:14px 0;padding:12px 16px;border:1px solid var(--qfl-line);border-radius:14px;background:var(--qfl-panel)}.qfl-quiz-details summary{cursor:pointer;font-weight:700}.qfl-quiz-details summary span{float:right;color:#91a4c3;font-size:12px;font-weight:500}.qfl-details-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:14px}.qfl-details-grid label,.qfl-question-settings>label,.qfl-media-input label{display:grid;gap:6px;color:#aab9d0;font-size:12px;font-weight:650}.qfl-details-grid input,.qfl-details-grid textarea,.qfl-details-grid select,.qfl-question-settings select,.qfl-question-prompt textarea,.qfl-choice-row input,.qfl-explanation textarea,.qfl-media-input input,.qfl-launch-page input,.qfl-launch-page select{width:100%;padding:11px 12px;border:1px solid var(--qfl-line);border-radius:10px;background:#0c172a;color:#eef4ff;font:inherit;outline:none}.qfl-details-grid input:focus,.qfl-details-grid textarea:focus,.qfl-details-grid select:focus,.qfl-question-prompt textarea:focus,.qfl-choice-row input:focus,.qfl-explanation textarea:focus{border-color:#438cff;box-shadow:0 0 0 3px #2679ff22}.qfl-details-readonly{display:grid;grid-template-columns:1fr auto;align-content:center;gap:7px;color:#95a8c6;font-size:12px}.qfl-details-readonly strong{color:#fff}
.qfl-editor-layout{display:grid;grid-template-columns:minmax(220px,280px) minmax(350px,1fr) minmax(210px,270px);gap:14px;align-items:start}.qfl-question-nav,.qfl-question-workspace,.qfl-question-settings{min-width:0;border:1px solid var(--qfl-line);border-radius:16px;background:linear-gradient(160deg,#111d32,#0e1728);box-shadow:0 12px 30px #050a1425}.qfl-question-nav{padding:14px;position:sticky;top:100px}.qfl-question-workspace{padding:clamp(16px,2.2vw,28px);min-height:580px}.qfl-question-settings{padding:15px;position:sticky;top:100px}.qfl-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--qfl-line)}.qfl-panel-heading>div{display:grid;gap:4px}.qfl-panel-heading span,.qfl-workspace-title>div>span,.qfl-preview-count{color:#69a8ff;font-size:10px;font-weight:800;letter-spacing:.12em}.qfl-panel-heading strong{font-size:14px}.qfl-panel-heading i{font-style:normal;color:#91a4c3}.qfl-question-list{display:grid;gap:7px;max-height:54vh;overflow:auto;padding:10px 2px}.qfl-question-nav-item{border:1px solid transparent;border-radius:11px;background:#ffffff06}.qfl-question-nav-item.is-selected{border-color:#3c83f5;background:#1b3b6b55}.qfl-question-select{display:grid;width:100%;grid-template-columns:18px 26px minmax(0,1fr);gap:8px;align-items:center;padding:10px 8px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.qfl-drag-handle{color:#7188a8}.qfl-question-select>i{font-style:normal;color:#83baff;font-size:11px}.qfl-question-select>span:last-child{display:grid;gap:3px;min-width:0}.qfl-question-select strong{font-size:11px}.qfl-question-select small{overflow:hidden;color:#9daec8;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.qfl-question-nav-tools{display:flex;justify-content:flex-end;gap:3px;padding:0 7px 6px}.qfl-question-nav-tools button,.qfl-option-remove{width:26px;height:25px;border:1px solid transparent;border-radius:7px;background:transparent;color:#9eb0ca;cursor:pointer}.qfl-question-nav-tools button:hover,.qfl-option-remove:hover{background:#ffffff10;color:white}.qfl-question-nav-tools button:disabled,.qfl-option-remove:disabled{opacity:.35;cursor:not-allowed}.qfl-add-question,.qfl-import-question{width:100%;margin-top:7px}.qfl-ready-count{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--qfl-line);font-size:11px;color:#93a5c2}.qfl-ready-count strong{color:#eaf2ff}.qfl-workspace-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}.qfl-workspace-title h1{margin:4px 0 0;font-size:22px}.qfl-workspace-title select{max-width:190px;padding:9px;border:1px solid var(--qfl-line);border-radius:9px;background:#111d32;color:#eaf2ff}.qfl-question-prompt,.qfl-explanation{display:grid;gap:8px;color:#cad7ea;font-size:13px;font-weight:700}.qfl-question-prompt>span,.qfl-explanation>span{display:flex;justify-content:space-between;gap:8px}.qfl-question-prompt small,.qfl-explanation small{color:#889bb8;font-size:10px;font-weight:500}.qfl-question-prompt textarea{resize:vertical;min-height:112px;font-size:16px;line-height:1.55}.qfl-media-details{margin:12px 0;border:1px dashed var(--qfl-line);border-radius:10px;padding:11px;color:#b6c6df;font-size:12px}.qfl-media-details summary{cursor:pointer}.qfl-media-input{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.qfl-media-preview{display:block;max-width:min(100%,380px);max-height:190px;object-fit:contain;margin-top:10px;border-radius:10px}.qfl-choices-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 10px}.qfl-choices-heading h2{margin:0;font-size:16px}.qfl-choices-heading p{margin:4px 0 0;color:#97aac8;font-size:11px}.qfl-choice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.qfl-choice-row{display:grid;grid-template-columns:35px minmax(0,1fr) 25px;gap:7px;align-items:center;padding:7px;border:1px solid var(--qfl-line);border-radius:11px;background:#ffffff05}.qfl-choice-row.tone-0{--answer-tone:#f35770}.qfl-choice-row.tone-1{--answer-tone:#357fe7}.qfl-choice-row.tone-2{--answer-tone:#d6a33a}.qfl-choice-row.tone-3{--answer-tone:#18ac83}.qfl-choice-row input{padding:10px;border:0;background:transparent}.qfl-correct-toggle{width:32px;height:32px;border:1px solid color-mix(in srgb,var(--answer-tone) 60%,transparent);border-radius:8px;background:color-mix(in srgb,var(--answer-tone) 20%,#0d1728);color:#eaf2ff;font-weight:800;cursor:pointer}.qfl-correct-toggle.is-correct{background:var(--answer-tone);color:white;box-shadow:0 0 15px color-mix(in srgb,var(--answer-tone) 30%,transparent)}.qfl-explanation{margin-top:16px}.qfl-explanation textarea{resize:vertical;min-height:56px;font-size:12px}.qfl-editor-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--qfl-line);color:#8fa3c1;font-size:11px}.qfl-question-settings>label{margin:14px 0}.qfl-question-settings fieldset{display:grid;gap:12px;margin:18px 0;padding:12px;border:1px solid var(--qfl-line);border-radius:11px}.qfl-question-settings legend{padding:0 5px;color:#91a8c8;font-size:11px}.qfl-setting-toggle{display:flex!important;align-items:center;gap:9px!important;color:#c2cee0!important;font-size:11px!important;line-height:1.4}.qfl-setting-toggle input{accent-color:#267bff}.qfl-setting-note{display:grid;gap:5px;margin:12px 0;padding:11px;border-radius:10px;background:#ffffff07;color:#a9bad2;font-size:11px;line-height:1.5}.qfl-setting-note strong{color:#eaf2ff}.qfl-empty-questions,.qfl-empty-workspace,.qfl-empty-settings{padding:24px 10px;text-align:center;color:#96a9c7;font-size:12px}.qfl-empty-questions strong,.qfl-empty-workspace h2{display:block;color:#eaf2ff}.qfl-empty-workspace{max-width:460px;margin:70px auto}.qfl-empty-workspace>div,.qfl-empty-questions>span{color:#6aabff;font-size:30px}.qfl-preview-dialog{max-width:min(620px,calc(100vw - 30px));width:100%;padding:0;border:1px solid #6489bd;border-radius:18px;background:#111c30;color:#eef4ff;box-shadow:0 30px 100px #0009}.qfl-preview-dialog::backdrop{background:#020611bb;backdrop-filter:blur(5px)}.qfl-preview-card{position:relative;padding:28px}.qfl-preview-close{position:absolute;top:14px;right:14px}.qfl-preview-card #qflPreviewBody{padding-top:20px}.qfl-preview-card h2{font-size:23px;line-height:1.35}.qfl-preview-card #qflPreviewBody>img{max-width:100%;max-height:250px;object-fit:contain}.qfl-preview-answers{display:grid;grid-template-columns:1fr 1fr;gap:9px}.qfl-preview-answers button{padding:13px;border:1px solid var(--qfl-line);border-radius:10px;background:#ffffff08;color:inherit;text-align:left}.qfl-preview-answers button.is-correct{border-color:#20c795;background:#117d6855}.qfl-preview-answers button.is-selected{outline:2px solid #4d9bff}.qfl-preview-feedback{padding:12px;border-radius:10px;background:#0b1425;color:#b8c8e0}.qfl-library-page,.qfl-launch-page{max-width:1200px;margin:0 auto;padding:28px 20px}.qfl-library-page>header{padding:28px;border:1px solid var(--qfl-line);border-radius:18px;background:radial-gradient(ellipse at 85% 0,#173f7a 0,transparent 43%),var(--qfl-panel)}.qfl-library-page>header>a,.qfl-launch-page>a{display:block;margin-bottom:20px;color:#a8c9ff;text-decoration:none}.qfl-library-page h1,.qfl-launch-page h1{margin:9px 0;font-size:clamp(28px,4vw,42px)}.qfl-library-page>header p,.qfl-launch-page>p{color:#9dafc9}.qfl-library-tabs{display:flex;gap:8px;margin:20px 0}.qfl-library-tabs button{padding:9px 14px;border:1px solid var(--qfl-line);border-radius:9px;background:var(--qfl-panel);color:#adbed7;cursor:pointer}.qfl-library-tabs button.is-active{border-color:#438eff;background:#173c72;color:white}.qfl-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:13px}.qfl-library-card{display:flex;flex-direction:column;min-height:210px;padding:18px;border:1px solid var(--qfl-line);border-radius:15px;background:linear-gradient(150deg,#152440,#101a2d)}.qfl-library-status{align-self:flex-start;padding:4px 8px;border-radius:20px;background:#ffffff12;color:#b3c3db;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.qfl-library-status.published{background:#087d6950;color:#65e5c7}.qfl-library-card h2{margin:12px 0 6px;font-size:18px}.qfl-library-card p{flex:1;color:#9daec7;font-size:12px}.qfl-library-card>div{display:flex;justify-content:space-between;color:#afc0da;font-size:11px}.qfl-library-card footer{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--qfl-line)}.qfl-library-empty{grid-column:1/-1;padding:45px 20px;border:1px dashed var(--qfl-line);border-radius:15px;text-align:center;color:#a9bad2}.qfl-library-empty strong{display:block;margin:7px;color:#f1f5fd}.qfl-launch-page{display:grid;gap:13px;max-width:740px}.qfl-launch-page label:not(.qfl-setting-toggle){display:grid;gap:7px;color:#afc0d8;font-size:12px}.qfl-launch-page .qfl-setting-toggle{padding:14px;border:1px solid var(--qfl-line);border-radius:11px;background:var(--qfl-panel)}.qfl-launch-page .btn{justify-self:start}
@media(max-width:1050px){.qfl-editor-layout{grid-template-columns:minmax(190px,250px) minmax(0,1fr)}.qfl-question-settings{position:static;grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.qfl-question-settings .qfl-panel-heading{grid-column:1/-1}.qfl-question-settings fieldset{margin:0}.qfl-setting-note{margin:0}}
@media(max-width:700px){.qfl-editor-page{padding:10px 8px 24px}.qfl-editor-topbar{position:static;grid-template-columns:1fr auto;gap:9px;padding:10px}.qfl-editor-brand{grid-column:1}.qfl-back-quizzes{grid-column:2;grid-row:1}.qfl-title-wrap{grid-column:1/-1;grid-row:2}.qfl-editor-actions{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:1fr 1fr 1fr}.qfl-editor-actions .btn{padding:8px 5px;font-size:11px}.qfl-details-grid{grid-template-columns:1fr 1fr}.qfl-editor-layout{grid-template-columns:1fr}.qfl-question-nav,.qfl-question-settings{position:static;grid-column:auto}.qfl-question-list{grid-template-columns:1fr 1fr;max-height:260px}.qfl-question-workspace{min-height:0;padding:16px}.qfl-question-settings{display:block}.qfl-question-settings fieldset{margin:14px 0}.qfl-choice-list,.qfl-preview-answers{grid-template-columns:1fr}.qfl-media-input{grid-template-columns:1fr}.qfl-editor-footer{align-items:flex-start;flex-direction:column}.qfl-quiz-details summary span{float:none;display:block;margin-top:4px}.qfl-library-page,.qfl-launch-page{padding:15px 10px}.qfl-library-page>header{padding:20px}.qfl-library-grid{grid-template-columns:1fr}}
@media(max-width:480px){
  .quicky-panel{width:calc(100vw - 24px);height:min(520px,calc(100dvh - 112px));min-height:min(360px,calc(100dvh - 112px))}
  .quicky-messages{min-height:90px}
  .quicky-quick-actions{gap:5px;padding:4px 9px 7px}
  .quicky-quick-actions>button,.quicky-mode-actions #quickyUnlockBtn{min-height:29px;padding:3px 5px;font-size:8.5px}
}

/* Quick Fix Live host display mode and account/guest join identity */
.qfl-display-mode{display:grid;gap:9px;margin:5px 0 9px;padding:14px;border:1px solid rgba(133,169,226,.2);border-radius:13px;background:#101a2d}.qfl-display-mode legend{padding:0 7px;color:#dce8fa;font-size:13px;font-weight:750}.qfl-display-mode>label{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid rgba(133,169,226,.2);border-radius:10px;background:#ffffff05;cursor:pointer}.qfl-display-mode>label:has(input:checked){border-color:#438cff;background:#15315a}.qfl-display-mode input{flex:none;margin:3px 0 0;accent-color:#2477ff}.qfl-display-mode label span,.qfl-account-join-note>span:last-child{display:grid;gap:4px}.qfl-display-mode strong{font-size:12px;color:#eef4ff}.qfl-display-mode small,.qfl-account-join-note small{font-size:11px;line-height:1.45;color:#9dafc9}.qfl-account-join-note{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 13px;border:1px solid rgba(133,169,226,.2);border-radius:12px;background:#101a2d}.qfl-account-join-avatar{display:grid;width:36px;height:36px;flex:none;place-items:center;border-radius:50%;background:#153b74;color:#dceaff;font-weight:800}.qfl-account-join-note>span:last-child{font-size:12px;color:#9dafc9}.qfl-account-join-note strong{color:#f3f7ff}.live-show-projector-prompt{display:grid;gap:7px;padding:clamp(18px,4vw,34px);border:1px solid rgba(88,160,255,.25);border-radius:15px;background:linear-gradient(135deg,#142a4a,#101a2d);color:#aebfda;font-size:14px;line-height:1.5}.live-show-projector-prompt strong{font-size:clamp(17px,2.4vw,23px);color:#f3f7ff}
.qfl-launch-page .qfl-display-mode{border:1px solid rgba(133,169,226,.2);border-radius:13px;background:#101a2d}.qfl-launch-page .qfl-display-mode>label{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid rgba(133,169,226,.2);border-radius:10px;background:#ffffff05;cursor:pointer}.qfl-launch-page .qfl-display-mode>label:has(input:checked){border-color:#438cff;background:#15315a}.qfl-launch-page .qfl-display-mode input{width:auto;flex:none;margin:3px 0 0;accent-color:#2477ff}

/* Quick Fix Live reveal polish: full-width standings, clear dark-mode contrast, and restrained motion. */
.live-show-reveal-screen{--live-row-bg:#f4f7fc;--live-row-border:#dce5f0;--live-score:#183a67;--live-accent:#2878ee}.live-show-reveal-screen .live-show-answer-recap{margin-bottom:16px;padding:clamp(14px,2vw,22px);border-radius:17px}.live-show-answer-recap h2{margin-bottom:15px;font-size:clamp(1.05rem,2.2vw,1.55rem);text-align:left}.live-show-answer-recap .live-show-host-options{gap:8px}.live-show-answer-recap .live-show-host-option{min-height:48px;padding:8px 11px}.live-show-answer-recap .live-show-host-option>span{width:30px;height:30px;font-size:.92rem}.live-show-answer-recap .live-show-response-count{margin:10px 0 0}.live-show-leaderboard-full{padding:clamp(15px,2.5vw,26px);border:1px solid var(--live-row-border);border-radius:20px;background:var(--panel);color:var(--ink);box-shadow:0 14px 40px rgba(14,28,51,.08)}.live-show-leaderboard-full .live-show-leaderboard-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:15px}.live-show-leaderboard-full .live-show-leaderboard-head>div{display:grid;gap:3px}.live-show-leaderboard-full .live-show-leaderboard-head h2{margin:0;font-size:clamp(1.3rem,3vw,1.8rem)}.live-show-leaderboard-full .live-show-leaderboard-head>strong{color:var(--muted);font-size:.8rem}.live-show-leaderboard-full ol{gap:8px}.live-show-leaderboard-full li{grid-template-columns:42px 42px minmax(0,1fr) auto;min-height:52px;padding:9px 13px;border:1px solid var(--live-row-border);background:var(--live-row-bg);color:var(--ink);animation:live-rank-arrive .42s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--rank-order,0)*45ms)}.live-show-leaderboard-full li.rank-1{background:#fff7e2;border-color:#f0d48c}.live-show-leaderboard-full li.rank-2{background:#f2f5fa;border-color:#d9e1eb}.live-show-leaderboard-full li.rank-3{background:#fff1e8;border-color:#f2d2bc}.live-show-leaderboard-full .live-rank{display:grid;width:30px;height:30px;place-items:center;margin:auto;border-radius:50%;background:#e8eef6;color:#334967;font-weight:850}.live-show-leaderboard-full li.rank-1 .live-rank{background:#e7b73f;color:#302000}.live-show-leaderboard-full li.rank-2 .live-rank{background:#b9c6d6;color:#182638}.live-show-leaderboard-full li.rank-3 .live-rank{background:#d59a70;color:#351b0b}.live-show-leaderboard-full img{width:38px;height:38px}.live-show-leaderboard-full .live-rank-name{font-size:clamp(.95rem,1.6vw,1.1rem);font-weight:700}.live-show-leaderboard-full .live-rank-score{min-width:80px;color:var(--live-score);font-size:clamp(1.05rem,2vw,1.35rem);font-variant-numeric:tabular-nums;text-align:right}.live-show-leaderboard-full .live-rank-score small{margin-left:4px;color:var(--muted);font-size:.68rem;font-weight:700}.live-show-question-card .live-show-projector-note{display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:100%;margin:0 auto 20px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--panel-2);color:var(--muted);font-size:.74rem;line-height:1.3;letter-spacing:.01em}.live-show-answer-recap .live-show-projector-note{margin:0 0 12px}.live-show-reveal-screen .live-show-host-controls{padding:12px 0 2px}.live-show-reveal-screen .live-show-player-wait{padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);font-size:.88rem}
@keyframes live-rank-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes live-screen-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.live-show-reveal-screen>.live-show-game-head,.live-show-answer-recap{animation:live-screen-arrive .36s ease-out both}.live-show-reveal-screen>.live-show-leaderboard-full{animation:live-screen-arrive .4s ease-out .06s both}.live-show-reveal-screen>.live-show-host-controls,.live-show-reveal-screen>.live-show-player-wait{animation:live-screen-arrive .35s ease-out .12s both}
html.dark-mode .live-show-screen{color:#edf3fc}html.dark-mode .live-show-game-head p,html.dark-mode .live-show-response-row,html.dark-mode .live-show-answer-status,html.dark-mode .live-show-player-wait,html.dark-mode .live-show-response-count,html.dark-mode .live-show-question-meta{color:#b3c0d2}html.dark-mode .live-show-kicker{color:#8bbaff}html.dark-mode .live-show-timer{border-color:#8d79ff;color:#e1d9ff;background:#18243a}html.dark-mode .live-show-timer-track{background:#27364d}html.dark-mode .live-show-question-card,html.dark-mode .live-show-leaderboard-full,html.dark-mode .live-show-waiting-card{border-color:#34465e;background:#141f30;color:#eff5ff;box-shadow:0 16px 38px rgba(0,0,0,.22)}html.dark-mode .live-show-answer,html.dark-mode .live-show-host-option{border-color:#3a4d65;background:#1b2a3e;color:#edf4ff}html.dark-mode .live-show-answer:hover:not(:disabled){border-color:#83b3ff;background:#223957;box-shadow:0 8px 22px rgba(0,0,0,.2)}html.dark-mode .live-show-answer.is-selected{border-color:#80adff;background:#233c62;box-shadow:0 0 0 1px #80adff55}html.dark-mode .live-show-answer:disabled{opacity:.88}html.dark-mode .live-show-host-option.is-correct{border-color:#33c99b;background:#123d36}html.dark-mode .live-show-host-option.is-correct>b{color:#64e3ba}html.dark-mode .live-show-leaderboard-full{--live-row-bg:#1a283b;--live-row-border:#34465e;--live-score:#f0f5ff}html.dark-mode .live-show-leaderboard-full li{border-color:var(--live-row-border);background:var(--live-row-bg);color:#f0f5ff}html.dark-mode .live-show-leaderboard-full li.rank-1{border-color:#9a7734;background:#332b1b}html.dark-mode .live-show-leaderboard-full li.rank-2{border-color:#53647a;background:#253246}html.dark-mode .live-show-leaderboard-full li.rank-3{border-color:#895d42;background:#34271f}html.dark-mode .live-show-leaderboard-full .live-rank{background:#34465e;color:#f2f6fd}html.dark-mode .live-show-leaderboard-full li.rank-1 .live-rank{background:#e5b94f;color:#261a00}html.dark-mode .live-show-leaderboard-full li.rank-2 .live-rank{background:#a8b7c9;color:#162131}html.dark-mode .live-show-leaderboard-full li.rank-3 .live-rank{background:#cf916b;color:#2a1308}html.dark-mode .live-show-leaderboard-full .live-rank-score{color:#f4f7fd}html.dark-mode .live-show-leaderboard-full .live-rank-score small{color:#bac6d6}html.dark-mode .live-show-question-card .live-show-projector-note{border-color:#3a4d65;background:#1b2a3e;color:#c2cede}html.dark-mode .live-show-reveal-screen .live-show-player-wait{border-color:#34465e;background:#141f30;color:#c1ccdb}
@media(max-width:720px){.live-show-leaderboard-full .live-show-leaderboard-head{align-items:flex-start;flex-direction:column}.live-show-leaderboard-full li{grid-template-columns:34px 36px minmax(0,1fr) auto;gap:8px;padding:8px}.live-show-leaderboard-full .live-rank-score{min-width:58px}.live-show-answer-recap .live-show-host-options{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.live-show-leaderboard-full li{grid-template-columns:28px 32px minmax(0,1fr) auto;gap:7px}.live-show-leaderboard-full .live-rank{width:25px;height:25px;font-size:.72rem}.live-show-leaderboard-full img{width:30px;height:30px}.live-show-leaderboard-full .live-rank-name{font-size:.88rem}.live-show-leaderboard-full .live-rank-score{min-width:48px;font-size:1rem}.live-show-leaderboard-full .live-rank-score small{font-size:.6rem}.live-show-answer-recap .live-show-host-options{grid-template-columns:1fr}.live-show-question-card .live-show-projector-note{font-size:.68rem;padding:6px 9px}}
@media(prefers-reduced-motion:reduce){.live-show-reveal-screen>.live-show-game-head,.live-show-answer-recap,.live-show-reveal-screen>.live-show-leaderboard-full,.live-show-reveal-screen>.live-show-host-controls,.live-show-reveal-screen>.live-show-player-wait,.live-show-leaderboard-full li{animation:none!important;transition:none!important}}
.live-show-screen:not(.live-show-reveal-screen)>.live-show-game-head{animation:live-screen-arrive .34s ease-out both}.live-show-screen:not(.live-show-reveal-screen)>.live-show-stage-bar{animation:live-screen-arrive .34s ease-out .04s both}.live-show-screen:not(.live-show-reveal-screen)>.live-show-timer-track{animation:live-screen-arrive .34s ease-out .07s both}.live-show-screen:not(.live-show-reveal-screen)>.live-show-question-card{animation:live-screen-arrive .38s ease-out .1s both}.live-show-player-choices .live-show-answer{animation:live-rank-arrive .35s ease-out both;animation-delay:calc(var(--answer-order,0)*45ms)}.live-show-player-choices .live-show-answer:nth-child(1){--answer-order:0}.live-show-player-choices .live-show-answer:nth-child(2){--answer-order:1}.live-show-player-choices .live-show-answer:nth-child(3){--answer-order:2}.live-show-player-choices .live-show-answer:nth-child(4){--answer-order:3}.live-show-player-choices .live-show-answer:nth-child(5){--answer-order:4}.live-show-player-choices .live-show-answer:nth-child(6){--answer-order:5}
@media(prefers-reduced-motion:reduce){.live-show-screen:not(.live-show-reveal-screen)>.live-show-game-head,.live-show-screen:not(.live-show-reveal-screen)>.live-show-stage-bar,.live-show-screen:not(.live-show-reveal-screen)>.live-show-timer-track,.live-show-screen:not(.live-show-reveal-screen)>.live-show-question-card,.live-show-player-choices .live-show-answer{animation:none!important}}
.live-show-results .podium-item .podium .rank,.live-show-results .podium-item .podium .score{color:#172033;text-shadow:none;font-weight:850}.live-show-results .podium-item .name{color:var(--ink)}.live-show-results .live-show-final-rankings li{color:var(--ink)}html.dark-mode .live-show-results{color:#eff5ff}html.dark-mode .live-show-results-heading p,html.dark-mode .live-show-results .live-podium-detail{color:#b8c5d6}html.dark-mode .live-show-results .podium-item .name{color:#f1f5fc}html.dark-mode .live-show-results .live-show-final-rankings li{border-color:#34465e;background:#172438;color:#f1f5fc}html.dark-mode .live-show-results .live-show-final-rankings li>span:first-child{color:#c0cada}html.dark-mode .live-show-results .podium-item .podium.gold{background:linear-gradient(180deg,#e3b939,#a87913)}html.dark-mode .live-show-results .podium-item .podium.silver{background:linear-gradient(180deg,#aab5c4,#69798e)}html.dark-mode .live-show-results .podium-item .podium.bronze{background:linear-gradient(180deg,#c47d4d,#87502d)}