:root {
  color-scheme: light;
  --bg: #f7f9ff;
  --bg-soft: #eef5ff;
  --surface: #ffffff;
  --surface-2: #f1f5ff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #dbe5f4;
  --primary: #2563eb;
  --primary-2: #5b3ff0;
  --accent: #14b8a6;
  --danger: #dc2626;
  --success: #059669;
  --warning: #b45309;
  --shadow: 0 22px 70px rgba(15, 23, 42, 0.10);
  --shadow-soft: 0 12px 30px rgba(37, 99, 235, 0.10);
  --radius: 20px;
  --radius-sm: 14px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07111f;
  --bg-soft: #0c182c;
  --surface: #101c31;
  --surface-2: #17233a;
  --text: #f8fafc;
  --muted: #9aa8bd;
  --line: #25364f;
  --primary: #60a5fa;
  --primary-2: #8b5cf6;
  --accent: #2dd4bf;
  --danger: #f87171;
  --success: #4ade80;
  --warning: #fbbf24;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 12px 30px rgba(96, 165, 250, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 12% 16%, rgba(91, 63, 240, .13), transparent 32rem),
    radial-gradient(circle at 88% 10%, rgba(20, 184, 166, .14), transparent 34rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 52%, var(--bg) 100%);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 50;
  background: var(--text);
  color: var(--bg);
  padding: .7rem .95rem;
  border-radius: 999px;
}
.skip-link:focus { top: 1rem; }

.shell-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
  padding: .8rem clamp(1rem, 4vw, 2.35rem);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
}

.brand { display: inline-flex; align-items: center; gap: .78rem; min-width: 0; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #071a3d, #312e81);
  color: #fff;
  box-shadow: 0 16px 36px rgba(37, 99, 235, .18);
  overflow: hidden;
}
.brand-mark svg { width: 42px; height: 42px; }
.brand-copy strong, .brand-copy small { display: block; line-height: 1.05; }
.brand-copy strong { font-size: 1.1rem; letter-spacing: -.03em; }
.brand-copy strong span { color: var(--accent); }
.brand-copy small { margin-top: .22rem; color: var(--muted); font-size: .78rem; }

.top-nav { display: none; align-items: center; gap: .35rem; }
.top-nav.open {
  position: absolute;
  inset: 76px 1rem auto 1rem;
  display: grid;
  gap: .45rem;
  padding: .7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.top-nav a, .top-nav button {
  min-height: 42px;
  padding: .65rem .88rem;
  border-radius: 999px;
  color: var(--muted);
  border: 0;
  background: transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.top-nav a.active, .top-nav a:hover, .top-nav button:hover { background: var(--surface-2); color: var(--text); }
.top-nav a#userBadge {
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
}
.nav-toggle { display: inline-grid; }
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.app-shell { width: min(1200px, 100%); margin: 0 auto; padding: clamp(1rem, 2.5vw, 2rem); }

.hero {
  display: grid;
  min-height: calc(100svh - 100px);
  align-content: center;
  padding: clamp(1rem, 5vw, 4rem) 0;
}
.hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.hero h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(3.25rem, 10vw, 6.8rem);
  line-height: .89;
  letter-spacing: -.075em;
}
.hero p { max-width: 700px; margin: 0; color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.28rem); }
.hero .grid:first-child {
  position: relative;
  padding: clamp(1.2rem, 3vw, 2rem);
}
.hero .grid:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.22));
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  opacity: .8;
}
[data-theme="dark"] .hero .grid:first-child::before { background: linear-gradient(135deg, rgba(16,28,49,.65), rgba(16,28,49,.22)); }

.section { padding: clamp(1.6rem, 3vw, 3rem) 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.05; }
h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); margin: 0 0 .8rem; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 .55rem; }
h3 { margin: 0 0 .45rem; }
.eyebrow { display: inline-block; color: var(--primary-2); font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.muted { color: var(--muted); }
.small { font-size: .92rem; }

.grid { display: grid; gap: 1rem; }
.two, .three { grid-template-columns: 1fr; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
.card, .panel, .mode-card, .stat-card, .topic-card, .empty {
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-soft);
}
.card, .panel, .mode-card, .empty { padding: clamp(1rem, 2.5vw, 1.35rem); }
.panel { box-shadow: var(--shadow); }
.stat-card {
  padding: 1.2rem;
  min-height: 110px;
  display: grid;
  align-content: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, white), color-mix(in srgb, var(--surface-2) 58%, var(--surface)));
}
.stat-card strong { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; }
.stat-card span { color: var(--muted); margin-top: .35rem; }

.topic-card { position: relative; overflow: hidden; display: grid; gap: .78rem; }
.topic-card::after {
  content: "";
  position: absolute;
  inset: auto -30px -45px auto;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--topic-color, var(--primary)) 24%, transparent), transparent 70%);
  pointer-events: none;
}
.topic-top { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.topic-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--topic-color, var(--primary)), color-mix(in srgb, var(--topic-color, var(--primary)) 72%, #fff));
  box-shadow: 0 18px 36px color-mix(in srgb, var(--topic-color, var(--primary)) 22%, transparent);
}
.topic-image, .question-image, .flash-image, .option-image { border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--line); }
.topic-image { width: 100%; max-height: 260px; }
.question-image { width: 100%; max-height: 360px; margin: .75rem 0; }
.flash-image { width: 100%; max-height: 280px; margin: .8rem 0; }
.option-image { width: 100%; max-height: 180px; margin-bottom: .6rem; }
.progress { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.sticky-progress { position: sticky; top: 76px; z-index: 18; margin-bottom: 1rem; }

.actions, .toolbar, .button-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.button, .ghost-button, .danger-button, .success-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .72rem 1.05rem;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 16px 34px rgba(37, 99, 235, .22); }
.button:hover, .ghost-button:hover, .danger-button:hover, .success-button:hover { transform: translateY(-1px); }
.ghost-button { color: var(--text); background: var(--surface); border-color: var(--line); }
.danger-button { color: #fff; background: var(--danger); }
.success-button { color: #fff; background: var(--success); }
.badge, .chips span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 700;
  font-size: .82rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }

.quiz-frame, .flash-stage { max-width: 850px; margin: 0 auto; }
.option-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; margin-top: 1rem; }
.option {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem;
  background: var(--option-bg, var(--surface));
  color: var(--option-fg, var(--text));
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, opacity .18s ease, border .18s ease;
}
.option:hover { transform: translateY(-1px); }
.option.correct { background: var(--success) !important; color: #fff !important; border-color: transparent; }
.option.wrong { background: var(--danger) !important; color: #fff !important; border-color: transparent; }
.flashcard { perspective: 1400px; min-height: 330px; }
.flash-face {
  min-height: 330px;
  display: grid;
  align-content: center;
  text-align: center;
  gap: .7rem;
  border-radius: 28px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), color-mix(in srgb, var(--accent) 10%, var(--surface)));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: clamp(1.2rem, 4vw, 2rem);
}
.flash-back { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), color-mix(in srgb, var(--primary-2) 11%, var(--surface))); }

.field { display: grid; gap: .4rem; }
.field label { color: var(--muted); font-weight: 800; font-size: .9rem; }
input, select, textarea, .search-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .72rem .88rem;
  background: var(--surface);
  color: var(--text);
  outline: none;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--primary) 65%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent); }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: .9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: .88rem; }
tr:last-child td { border-bottom: 0; }
.admin-shell { display: grid; gap: 1rem; }
.admin-nav { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.admin-body { display: grid; gap: 1rem; }
.empty { text-align: center; color: var(--muted); }

.site-footer {
  width: min(1200px, calc(100% - 2rem));
  margin: 3rem auto 1rem;
  padding: clamp(1rem, 3vw, 1.6rem);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
}
.footer-grid { display: grid; gap: 1.2rem; }
.footer-brand img { width: min(270px, 100%); height: auto; margin-bottom: .7rem; }
.site-footer h3 { margin-bottom: .75rem; }
.site-footer a { display: block; color: var(--muted); padding: .18rem 0; }
.site-footer a:hover { color: var(--primary); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .92rem;
}
.backend-pill { display: inline-flex; margin-top: .4rem; padding: .35rem .7rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 800; }
.backend-pill.online { background: color-mix(in srgb, var(--success) 14%, var(--surface-2)); color: var(--success); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  z-index: 80;
  transform: translate(-50%, 120%);
  opacity: 0;
  padding: .8rem 1rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow);
  transition: .25s ease;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (min-width: 760px) {
  .two { grid-template-columns: repeat(2, 1fr); }
  .three { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.4fr .7fr .7fr 1fr; }
  .admin-shell { grid-template-columns: 220px 1fr; align-items: start; }
  .admin-nav { position: sticky; top: 96px; display: grid; }
}

@media (min-width: 920px) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; }
  .nav-toggle { display: none; }
  .top-nav { display: flex; }
}

@media (max-width: 520px) {
  .brand-copy small { display: none; }
  .brand-mark { width: 42px; height: 42px; }
  .hero h1 { font-size: clamp(2.75rem, 15vw, 4rem); }
  .actions a, .actions button { width: 100%; }
  .section-head { align-items: stretch; flex-direction: column; }
}

/* Full-screen Kahoot-inspired QuizLuck study mode */
body.study-active {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .22), transparent 18rem),
    radial-gradient(circle at 90% 70%, rgba(236, 72, 153, .28), transparent 26rem),
    linear-gradient(135deg, #2d026f 0%, #5f13c7 38%, #8b1ee6 70%, #260047 100%);
  color: #fff;
}
body.study-active::before,
body.study-active::after {
  content: "";
  position: fixed;
  inset: auto auto -18vw -10vw;
  width: 58vw;
  height: 58vw;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  transform: rotate(-18deg);
  pointer-events: none;
}
body.study-active::after {
  inset: -16vw -12vw auto auto;
  width: 52vw;
  height: 52vw;
  background: rgba(255,255,255,.075);
}
body.study-active .shell-header,
body.study-active .site-footer { display: none !important; }
body.study-active .app-shell {
  width: 100%;
  height: 100dvh;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.study-screen {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}
.study-close {
  position: fixed;
  z-index: 90;
  top: calc(env(safe-area-inset-top) + 14px);
  left: calc(env(safe-area-inset-left) + 14px);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(12, 10, 35, .45);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  backdrop-filter: blur(18px) saturate(1.4);
  transition: transform .18s ease, background .18s ease;
}
.study-close:hover { transform: scale(1.04); background: rgba(12, 10, 35, .7); }
.study-progress-line {
  position: fixed;
  z-index: 85;
  top: calc(env(safe-area-inset-top) + 31px);
  left: calc(env(safe-area-inset-left) + 96px);
  right: calc(env(safe-area-inset-right) + 26px);
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.22), 0 12px 32px rgba(0,0,0,.12);
}
.study-progress-line span {
  display: block;
  width: var(--value, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00e5ff, #35ff99, #fff12b);
  transition: width .34s ease;
}
.study-deck {
  height: 100dvh;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.study-deck::-webkit-scrollbar { display: none; }
.study-slide {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100dvh;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top) + 58px) clamp(.7rem, 3vw, 2rem) calc(env(safe-area-inset-bottom) + 12px);
}
.study-card.kahoot-card {
  position: relative;
  width: min(1160px, 100%);
  height: min(780px, calc(100dvh - 82px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(.55rem, 1.1vw, .85rem);
  padding: clamp(.72rem, 1.5vw, 1.05rem);
  border-radius: clamp(20px, 2.6vw, 30px);
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 34px 110px rgba(0,0,0,.28);
  backdrop-filter: blur(22px) saturate(1.35);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.study-card.kahoot-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(120deg, rgba(255,255,255,.13), transparent 38%),
    radial-gradient(circle at 80% 12%, rgba(255,255,255,.16), transparent 20rem);
}
.study-card-head.compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-height: 40px;
}
.mini-brand {
  display: inline-flex;
  align-items: center;
  gap: .05rem;
  padding: .48rem .72rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.16);
  font-weight: 1000;
  letter-spacing: -.02em;
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.mini-brand span { color: #2ff4d8; }
.study-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 40px;
  padding: 0 .85rem;
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 1000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.study-content.kahoot-content {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(84px, 30%) auto minmax(0, 1fr);
  gap: clamp(.5rem, 1.1vw, .8rem);
}
.study-media {
  position: relative;
  width: min(520px, 62%);
  height: 100%;
  min-height: 90px;
  justify-self: center;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.study-media.has-image .question-image {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  border: 0;
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
}
.study-media.no-image {
  width: min(470px, 70%);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.09));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 20px 60px rgba(0,0,0,.14);
}
.emoji-orb {
  width: clamp(82px, 10vw, 145px);
  height: clamp(82px, 10vw, 145px);
  display: grid;
  place-items: center;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  box-shadow: 0 20px 52px rgba(0,0,0,.18);
  transform: rotate(-4deg);
}
.emoji-orb span { font-size: clamp(3rem, 7vw, 5.8rem); filter: drop-shadow(0 4px 0 rgba(0,0,0,.10)); }
.emoji-caption {
  position: absolute;
  right: 16px;
  bottom: 12px;
  display: grid;
  text-align: right;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.emoji-caption strong { font-size: .95rem; font-weight: 1000; }
.emoji-caption small { opacity: .85; font-size: .76rem; }
.study-question {
  width: min(920px, 100%);
  justify-self: center;
  margin: 0;
  padding: clamp(.65rem, 1.4vw, 1rem) clamp(.85rem, 2vw, 1.35rem);
  color: #221d2b;
  background: rgba(255,255,255,.78);
  border-radius: 12px;
  text-align: center;
  font-size: clamp(1.2rem, 3.35vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-shadow: none;
  box-shadow: inset 18vw 0 0 rgba(255,255,255,.18), inset -18vw 0 0 rgba(255,255,255,.12);
  max-height: 18dvh;
  overflow: hidden;
}
.study-options.kahoot-options {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.45rem, 1vw, .72rem);
}
.study-option.kahoot-option {
  width: 100%;
  min-height: clamp(70px, 12dvh, 108px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(.6rem, 1.2vw, .9rem);
  padding: clamp(.58rem, 1.2vw, .9rem);
  border: 0;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  font-weight: 1000;
  font-size: clamp(1.05rem, 2.4vw, 1.68rem);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.22), 0 14px 26px rgba(0,0,0,.14);
  text-shadow: 0 2px 0 rgba(0,0,0,.24);
  overflow: hidden;
  transition: transform .12s ease, filter .16s ease, opacity .16s ease;
}
.study-option.kahoot-option:hover { transform: translateY(-2px) scale(1.006); filter: brightness(1.05); }
.kahoot-option.option-0 { background: #e81b3a; }
.kahoot-option.option-1 { background: #1368ce; }
.kahoot-option.option-2 { background: #d89e00; }
.kahoot-option.option-3 { background: #26890c; }
.option-shape {
  display: grid;
  place-items: center;
  width: clamp(30px, 4.2vw, 46px);
  height: clamp(30px, 4.2vw, 46px);
  color: #fff;
  font-size: clamp(1.1rem, 2.5vw, 1.55rem);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.22));
}
.option-label { min-width: 0; display: grid; place-items: center; }
.option-label strong {
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.study-option.correct { background: #52c41a !important; color: #fff !important; }
.study-option.wrong { background: #ff3355 !important; color: #fff !important; }
.study-option.dimmed { opacity: .45; filter: grayscale(.1) brightness(.85); }
.option-image {
  width: min(240px, 100%);
  max-height: 110px;
  object-fit: contain;
  margin: 0 auto .4rem;
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  border: 0;
}
.study-card.is-correct { border-color: rgba(82,196,26,.75); }
.study-card.is-wrong {
  border-color: rgba(255, 51, 85, .8);
  animation: studyShake .48s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes studyShake {
  10%, 90% { transform: translateX(-2px) rotate(-.1deg); }
  20%, 80% { transform: translateX(5px) rotate(.2deg); }
  30%, 50%, 70% { transform: translateX(-10px) rotate(-.35deg); }
  40%, 60% { transform: translateX(10px) rotate(.35deg); }
}
.result-ribbon {
  position: absolute;
  z-index: 14;
  top: 44%;
  left: -8%;
  right: -8%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: clamp(58px, 8vw, 92px);
  color: #fff;
  font-size: clamp(1.65rem, 4.5vw, 3.2rem);
  font-weight: 1000;
  letter-spacing: -.035em;
  text-shadow: 0 3px 0 rgba(0,0,0,.22);
  transform: rotate(-3.8deg);
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
  animation: ribbonDrop .22s ease both;
}
.result-ribbon.good { background: #52c41a; }
.result-ribbon.bad { background: #ff3355; }
.result-ribbon span {
  display: inline-grid;
  place-items: center;
  width: clamp(38px, 5vw, 58px);
  height: clamp(38px, 5vw, 58px);
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.28);
}
@keyframes ribbonDrop { from { opacity: 0; transform: translateY(-8px) rotate(-3.8deg) scale(.98); } to { opacity: 1; transform: translateY(0) rotate(-3.8deg) scale(1); } }
body.study-feedback-correct .study-screen::before,
body.study-feedback-wrong .study-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  animation: feedbackFade 1.35s ease forwards;
}
body.study-feedback-correct .study-screen::before { background: rgba(82,196,26,.16); }
body.study-feedback-wrong .study-screen::before { background: rgba(255,51,85,.20); }
@keyframes feedbackFade { from { opacity: 1; } to { opacity: 0; } }
.wrong-popup {
  position: relative;
  z-index: 15;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: clamp(.7rem, 1.3vw, 1rem);
  border-radius: 16px;
  background: linear-gradient(135deg, #ff3355, #b80f2f);
  color: #fff;
  box-shadow: 0 24px 70px rgba(255,51,85,.35);
  animation: popupIn .22s ease both;
}
.wrong-popup strong { display: block; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.1; }
.wrong-popup p { margin: .15rem 0 0; font-weight: 1000; }
.wrong-popup small { display: block; margin-top: .1rem; opacity: .92; }
.wrong-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .5rem; }
.wrong-popup .ghost-button { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.38); box-shadow: none; }
.wrong-popup .button { background: #fff; color: #b80f2f; box-shadow: none; }
@keyframes popupIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.study-bottom-actions.clean-actions,
.study-bottom-actions.auto-note {
  position: relative;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  align-items: center;
  color: #fff;
}
.study-bottom-actions.clean-actions .ghost-button,
.study-bottom-actions.clean-actions .success-button,
.study-bottom-actions.clean-actions .danger-button,
.study-bottom-actions.auto-note .button {
  min-height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  border-color: rgba(255,255,255,.22);
  box-shadow: none;
  backdrop-filter: blur(12px);
}
.study-bottom-actions.clean-actions .success-button { background: rgba(38,137,12,.86); }
.study-bottom-actions.clean-actions .danger-button { background: rgba(232,27,58,.86); }
.study-bottom-actions.auto-note span {
  padding: .55rem .8rem;
  border-radius: 999px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 900;
}
.finish-screen { display: grid; place-items: center; padding: 1rem; }
.finish-card {
  width: min(860px, 100%);
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: 32px;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 30px 90px rgba(0,0,0,.22);
}
@media (max-width: 760px) {
  .study-close { width: 46px; height: 46px; border-radius: 15px; font-size: 1.75rem; }
  .study-progress-line { top: calc(env(safe-area-inset-top) + 28px); left: calc(env(safe-area-inset-left) + 76px); right: 12px; height: 7px; }
  .study-slide { padding: calc(env(safe-area-inset-top) + 60px) .5rem calc(env(safe-area-inset-bottom) + 8px); }
  .study-card.kahoot-card { height: calc(100dvh - 72px); padding: .55rem; border-radius: 22px; gap: .42rem; }
  .study-card-head.compact { min-height: 34px; }
  .mini-brand { font-size: .78rem; padding: .36rem .54rem; }
  .study-count { min-width: 54px; height: 32px; font-size: .78rem; }
  .study-content.kahoot-content { grid-template-rows: minmax(70px, 26%) auto minmax(0, 1fr); gap: .42rem; }
  .study-media { width: min(360px, 76%); min-height: 72px; }
  .study-media.no-image { border-radius: 22px; }
  .emoji-orb { width: clamp(70px, 18vw, 96px); height: clamp(70px, 18vw, 96px); border-radius: 24px; }
  .emoji-orb span { font-size: clamp(2.75rem, 12vw, 4rem); }
  .emoji-caption { display: none; }
  .study-question { font-size: clamp(1.05rem, 5.6vw, 1.85rem); line-height: 1.08; max-height: 17dvh; padding: .58rem .66rem; }
  .study-options.kahoot-options { grid-template-columns: 1fr; gap: .4rem; }
  .study-option.kahoot-option { min-height: 56px; font-size: clamp(.95rem, 4.6vw, 1.22rem); border-radius: 10px; padding: .46rem .52rem; box-shadow: inset 0 -4px 0 rgba(0,0,0,.22); }
  .option-shape { width: 28px; height: 28px; font-size: 1rem; }
  .option-label strong { -webkit-line-clamp: 2; }
  .result-ribbon { top: 42%; min-height: 54px; font-size: clamp(1.35rem, 8vw, 2.1rem); }
  .wrong-popup { flex-direction: column; align-items: stretch; gap: .55rem; border-radius: 14px; padding: .62rem; }
  .wrong-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .wrong-popup .button, .wrong-popup .ghost-button { min-height: 40px; padding: .48rem .65rem; }
  .wrong-popup small { display: none; }
  .study-bottom-actions.clean-actions .ghost-button,
  .study-bottom-actions.clean-actions .success-button,
  .study-bottom-actions.clean-actions .danger-button { min-height: 38px; padding: .45rem .62rem; font-size: .85rem; flex: 1 1 auto; }
}
@media (max-width: 430px) {
  .study-content.kahoot-content { grid-template-rows: minmax(62px, 22%) auto minmax(0, 1fr); }
  .study-media { width: min(280px, 70%); }
  .study-question { font-size: clamp(1rem, 5vw, 1.45rem); }
  .study-option.kahoot-option { min-height: 50px; }
  .study-bottom-actions.clean-actions { gap: .35rem; }
}

/* QuizLuck v2.2 polish: locked wrong answers, AdSense space, adaptive text, top feedback */
body.study-active {
  height: 100dvh;
  overflow: hidden !important;
  overscroll-behavior: none;
}
.study-deck.lock-scroll {
  overflow-x: hidden !important;
  scroll-snap-type: none;
}
.study-ad-slot {
  position: fixed;
  z-index: 86;
  top: calc(env(safe-area-inset-top) + 46px);
  right: calc(env(safe-area-inset-right) + 24px);
  width: min(320px, 34vw);
  height: 50px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  border: 1px dashed rgba(255,255,255,.34);
  color: rgba(255,255,255,.86);
  box-shadow: 0 12px 38px rgba(0,0,0,.12);
  backdrop-filter: blur(14px) saturate(1.25);
  pointer-events: none;
}
.study-ad-slot span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(0,0,0,.20);
  font-weight: 1000;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.study-ad-slot small {
  font-weight: 900;
  font-size: .8rem;
  opacity: .82;
}
.result-ribbon {
  top: clamp(58px, 8dvh, 78px) !important;
  left: 50% !important;
  right: auto !important;
  width: min(430px, calc(100% - 2rem));
  min-height: 54px !important;
  padding: .5rem .9rem;
  border-radius: 999px;
  transform: translateX(-50%) rotate(0deg) !important;
  font-size: clamp(1.2rem, 2.7vw, 2rem) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  pointer-events: none;
}
@keyframes ribbonDrop {
  from { opacity: 0; transform: translate(-50%, -8px) scale(.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.study-content.kahoot-content {
  grid-template-rows: minmax(74px, 24%) auto minmax(0, 1fr);
}
.study-card.kahoot-card.is-wrong .study-content.kahoot-content,
.study-card.kahoot-card.is-correct .study-content.kahoot-content {
  padding-top: clamp(18px, 5dvh, 48px);
}
.study-question {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-size: clamp(1.12rem, 2.55vw, 2.28rem) !important;
  min-height: clamp(70px, 12dvh, 132px);
  max-height: none !important;
}
.study-question.text-md { font-size: clamp(1.05rem, 2.2vw, 2rem) !important; }
.study-question.text-lg { font-size: clamp(.98rem, 1.9vw, 1.72rem) !important; line-height: 1.12; }
.study-question.text-xl { font-size: clamp(.9rem, 1.55vw, 1.38rem) !important; line-height: 1.16; letter-spacing: -.025em; }
.study-question.text-xxl { font-size: clamp(.82rem, 1.28vw, 1.12rem) !important; line-height: 1.18; letter-spacing: -.01em; }
.study-option.kahoot-option {
  min-height: clamp(64px, 10.4dvh, 102px);
  font-size: clamp(1rem, 2vw, 1.48rem) !important;
}
.option-label strong {
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-line-clamp: 4;
  line-height: 1.08;
}
.option-text-lg strong { font-size: .88em; line-height: 1.12; }
.option-text-xl strong { font-size: .76em; line-height: 1.14; -webkit-line-clamp: 5; }
.option-text-xxl strong { font-size: .66em; line-height: 1.16; -webkit-line-clamp: 6; }
.wrong-popup {
  min-height: 74px;
  max-height: 128px;
  overflow: hidden;
  align-self: stretch;
  margin-top: .2rem;
}
.wrong-popup p,
.wrong-popup small {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.wrong-popup p { -webkit-line-clamp: 1; }
.wrong-popup small { -webkit-line-clamp: 2; }
@media (max-width: 900px) {
  .study-ad-slot {
    top: calc(env(safe-area-inset-top) + 42px);
    right: 12px;
    width: min(260px, 46vw);
    height: 42px;
    opacity: .76;
  }
  .study-ad-slot small { font-size: .72rem; }
}
@media (max-width: 760px) {
  .study-ad-slot {
    top: calc(env(safe-area-inset-top) + 70px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(320px, calc(100vw - 7rem));
    height: 38px;
    opacity: .62;
  }
  .study-ad-slot span { width: 26px; height: 26px; border-radius: 8px; font-size: .68rem; }
  .study-card.kahoot-card { height: calc(100dvh - 82px); }
  .study-content.kahoot-content { grid-template-rows: minmax(54px, 19%) auto minmax(0, 1fr); }
  .study-card.kahoot-card.is-wrong .study-content.kahoot-content,
  .study-card.kahoot-card.is-correct .study-content.kahoot-content { padding-top: 34px; }
  .study-question {
    min-height: clamp(64px, 14dvh, 112px);
    font-size: clamp(.98rem, 4.8vw, 1.52rem) !important;
  }
  .study-question.text-md { font-size: clamp(.92rem, 4.2vw, 1.36rem) !important; }
  .study-question.text-lg { font-size: clamp(.84rem, 3.65vw, 1.12rem) !important; }
  .study-question.text-xl { font-size: clamp(.76rem, 3.05vw, .98rem) !important; }
  .study-question.text-xxl { font-size: clamp(.7rem, 2.55vw, .86rem) !important; }
  .study-option.kahoot-option { min-height: 52px; font-size: clamp(.86rem, 3.8vw, 1.05rem) !important; }
  .option-text-lg strong { font-size: .84em; }
  .option-text-xl strong { font-size: .72em; }
  .option-text-xxl strong { font-size: .62em; }
  .result-ribbon { top: 46px !important; width: min(300px, calc(100% - 5rem)); min-height: 44px !important; }
  .wrong-popup { max-height: 108px; }
}
@media (max-width: 430px) {
  .study-ad-slot { width: min(260px, calc(100vw - 6.5rem)); }
  .study-question { min-height: 58px; }
  .wrong-popup { max-height: 98px; }
}


/* QuizLuck v2.3: true horizontal one-by-one deck. No more reset animation from question 1. */
.study-deck {
  scroll-behavior: auto !important;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  will-change: scroll-position;
}
.study-deck.instant-position {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}
.study-slide {
  scroll-snap-align: start !important;
  contain: layout paint style;
}
.study-nav-arrow {
  position: fixed;
  z-index: 95;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(12, 10, 35, .52);
  color: #fff;
  font-size: 2.1rem;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 18px 50px rgba(0,0,0,.26);
  backdrop-filter: blur(16px) saturate(1.4);
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}
.study-nav-arrow:hover { transform: translateY(-50%) scale(1.06); background: rgba(12, 10, 35, .72); }
.study-nav-arrow:disabled { opacity: .28; cursor: not-allowed; transform: translateY(-50%) scale(.96); }
.study-nav-arrow.prev { left: calc(env(safe-area-inset-left) + 20px); }
.study-nav-arrow.next { right: calc(env(safe-area-inset-right) + 20px); }
@media (max-width: 760px) {
  .study-nav-arrow {
    width: 42px;
    height: 42px;
    font-size: 1.65rem;
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 16px);
    transform: none;
  }
  .study-nav-arrow:hover { transform: scale(1.04); }
  .study-nav-arrow:disabled { transform: scale(.96); }
  .study-nav-arrow.prev { left: 12px; }
  .study-nav-arrow.next { right: 12px; }
}

/* QuizLuck explanation + no-repeat final polish */
.study-explanation-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  width: min(100%, 980px);
  margin: 12px auto 0;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.90);
  color: #101828;
  box-shadow: 0 18px 45px rgba(15,23,42,.16);
  text-align: left;
  backdrop-filter: blur(14px);
}
.study-explanation-panel.wrong {
  border-color: rgba(255,255,255,.55);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,236,241,.94));
}
.study-explanation-panel.correct {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(231,255,245,.94));
}
.study-explanation-panel .explain-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: rgba(79,70,229,.12);
  font-size: 24px;
}
.study-explanation-panel strong {
  display: block;
  font-size: clamp(18px, 2vw, 24px);
  margin-bottom: 4px;
}
.study-explanation-panel p {
  margin: 4px 0 0;
  font-size: clamp(14px, 1.45vw, 17px);
  line-height: 1.45;
  color: #263248;
}
.study-explanation-panel .correct-line {
  color: #0f5132;
  font-weight: 700;
}
.wrong-popup.compact-review {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.wrong-popup.compact-review p { margin: 4px 0 0; }
.setting-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.70);
}
.setting-toggle span {
  display: grid;
  gap: 4px;
}
.setting-toggle small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.setting-toggle input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
}
.import-help {
  margin-top: 18px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(37, 99, 235, .08);
  color: var(--text);
}
.import-help code {
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(15, 23, 42, .08);
}
.study-bottom-actions.auto-note {
  flex-wrap: wrap;
}
.study-bottom-actions.auto-note .ghost-button,
.study-bottom-actions.auto-note .button {
  min-width: 150px;
}
@media (max-width: 760px) {
  .study-explanation-panel {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 13px 14px;
    border-radius: 18px;
  }
  .study-explanation-panel .explain-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    font-size: 21px;
  }
  .wrong-popup.compact-review {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Publisher marketplace final layer */
.publisher-section,
.publisher-marketplace,
.publisher-course-detail,
.publisher-auth-section {
  --publisher-ink: #172033;
  --publisher-line: rgba(23, 32, 51, .12);
  --publisher-panel: #ffffff;
  --publisher-accent: #0f766e;
  --publisher-gold: #b7791f;
}

[data-theme="dark"] .publisher-section,
[data-theme="dark"] .publisher-marketplace,
[data-theme="dark"] .publisher-course-detail,
[data-theme="dark"] .publisher-auth-section {
  --publisher-ink: #edf5ff;
  --publisher-line: rgba(237, 245, 255, .14);
  --publisher-panel: rgba(12, 18, 30, .92);
  --publisher-accent: #2dd4bf;
  --publisher-gold: #f6c453;
}

.publisher-head { align-items: center; }
.publisher-shell { gap: 18px; }
.publisher-body { min-width: 0; }
.publisher-auth-grid { align-items: start; }
.publisher-auth-card h2 { margin-top: 6px; }

.publisher-split-band {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--publisher-line);
  background: linear-gradient(90deg, rgba(15, 118, 110, .10), rgba(183, 121, 31, .10));
  border-radius: 8px;
  color: var(--publisher-ink);
}

.publisher-split-band span {
  color: var(--muted);
  font-size: .92rem;
}

.publisher-course-form { margin: 18px 0; }
.publisher-course-list { margin-top: 18px; }

.publisher-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.publisher-course-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--publisher-line);
  border-radius: 8px;
  background: var(--publisher-panel);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .08);
}

.publisher-course-media {
  display: grid;
  place-items: center;
  min-height: 150px;
  background: linear-gradient(135deg, rgba(15, 118, 110, .16), rgba(37, 99, 235, .10));
  color: var(--publisher-accent);
  font-weight: 900;
  font-size: 2rem;
  text-decoration: none;
}

.publisher-course-media img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.publisher-course-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.publisher-course-content h3 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.25;
}

.publisher-course-content h3 a {
  color: inherit;
  text-decoration: none;
}

.publisher-course-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.publisher-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  color: var(--muted);
  font-size: .92rem;
}

.publisher-course-meta strong {
  color: var(--publisher-ink);
  font-size: 1.15rem;
}

.success-badge {
  background: rgba(15, 118, 110, .12);
  color: #0f766e;
  border-color: rgba(15, 118, 110, .22);
}

.publisher-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .75fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 20px;
}

.publisher-detail-hero > div:first-child {
  padding: 28px;
  border: 1px solid var(--publisher-line);
  border-radius: 8px;
  background: var(--publisher-panel);
}

.publisher-detail-hero h1 {
  margin: 6px 0 10px;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
}

.publisher-detail-hero p {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.publisher-detail-media {
  display: grid;
  place-items: center;
  min-height: 280px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(183, 121, 31, .16), rgba(15, 118, 110, .14));
  color: var(--publisher-gold);
  font-weight: 900;
  font-size: 3rem;
}

.publisher-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-meta { margin: 16px 0; }
.publisher-course-description p {
  white-space: pre-wrap;
  line-height: 1.65;
}

.publisher-wallet-panel .table-wrap { margin-top: 10px; }

@media (max-width: 760px) {
  .publisher-split-band {
    align-items: flex-start;
    flex-direction: column;
  }

  .publisher-detail-hero { grid-template-columns: 1fr; }
  .publisher-detail-hero > div:first-child { padding: 20px; }
  .publisher-detail-media { min-height: 210px; }
  .publisher-course-grid { grid-template-columns: 1fr; }
}

@media (max-width: 999px) {
  .hybrid-header .hybrid-nav.quizlet-mobile-nav {
    --study-menu-bg: #ffffff;
    --study-menu-text: #1f2937;
    --study-menu-muted: #58627d;
    --study-menu-soft: #eef0ff;
    --study-menu-line: #eef1f7;
    --study-menu-blue: #4255ff;
    --study-menu-icon: #58627d;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-width: min(420px, calc(100vw - 24px)) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--study-menu-line) !important;
    border-radius: 0 !important;
    background: var(--study-menu-bg) !important;
    color: var(--study-menu-text) !important;
    box-shadow: 26px 0 80px rgba(31, 41, 55, .18) !important;
    overflow: hidden !important;
    transform: translateX(-106%) !important;
    transition: transform .22s ease !important;
    z-index: 1000 !important;
  }

  .hybrid-header .hybrid-nav.quizlet-mobile-nav.open {
    transform: translateX(0) !important;
  }

  [data-theme="dark"] .hybrid-header .hybrid-nav.quizlet-mobile-nav,
  html.dark .hybrid-header .hybrid-nav.quizlet-mobile-nav,
  body.dark .hybrid-header .hybrid-nav.quizlet-mobile-nav {
    --study-menu-bg: #0f172a;
    --study-menu-text: #eef2ff;
    --study-menu-muted: #a3aec5;
    --study-menu-soft: rgba(66, 85, 255, .18);
    --study-menu-line: rgba(148, 163, 184, .18);
    --study-menu-blue: #7c8cff;
    --study-menu-icon: #b6c0d6;
    box-shadow: 30px 0 90px rgba(0, 0, 0, .38) !important;
  }

  .hybrid-header .hybrid-nav.quizlet-mobile-nav > a.mobile-primary-hidden,
  .hybrid-header .hybrid-nav.quizlet-mobile-nav > button,
  .hybrid-header .hybrid-nav.quizlet-mobile-nav > .user-menu-shell {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .hybrid-header .hybrid-nav.quizlet-mobile-nav {
    width: min(88vw, 390px) !important;
    max-width: min(88vw, 390px) !important;
  }
}

/* QuizLuck v2.4 student preference toolbar + bilingual study text */
.student-study-toolbar {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  background: rgba(20, 10, 58, .54);
  color: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,.24);
  backdrop-filter: blur(20px);
}
.mini-switch-row,
.mini-lang-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.mini-switch-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mini-switch-row i {
  position: relative;
  width: 44px;
  height: 25px;
  border-radius: 999px;
  background: rgba(255,255,255,.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  cursor: pointer;
  transition: .2s ease;
}
.mini-switch-row i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.20);
  transition: .2s ease;
}
.mini-switch-row input:checked + i {
  background: linear-gradient(135deg, #21d4bd, #54e346);
}
.mini-switch-row input:checked + i::after {
  transform: translateX(19px);
}
.mini-lang-row select {
  height: 34px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  padding: 0 34px 0 12px;
  background: rgba(255,255,255,.94);
  color: #0f172a;
  font-weight: 900;
  outline: none;
}
.dual-study-text,
.dual-option-text {
  display: grid;
  gap: 5px;
  align-items: center;
}
.english-main {
  display: block;
}
.translated-line {
  display: block;
  font-size: .64em;
  line-height: 1.22;
  opacity: .88;
  font-weight: 800;
}
.dual-option-text .translated-line {
  font-size: .66em;
  opacity: .9;
}
.translated-explanation {
  margin-top: 8px !important;
  padding-top: 8px;
  border-top: 1px dashed rgba(15,23,42,.16);
}
.import-help {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.import-help code {
  margin-left: 0 !important;
}
.study-card .study-question .dual-study-text {
  max-width: 100%;
}
.study-card .option-label strong {
  width: 100%;
}
.study-card .option-label .dual-option-text {
  width: 100%;
}
@media (max-width: 980px) {
  .student-study-toolbar {
    top: auto;
    right: 12px;
    bottom: 12px;
    gap: 8px;
    padding: 7px 8px;
  }
  .mini-switch-row,
  .mini-lang-row {
    font-size: 12px;
  }
  .mini-switch-row i {
    width: 40px;
    height: 23px;
  }
  .mini-switch-row i::after {
    width: 15px;
    height: 15px;
  }
  .mini-switch-row input:checked + i::after {
    transform: translateX(17px);
  }
  .mini-lang-row select {
    height: 31px;
    max-width: 96px;
    padding-left: 10px;
  }
}
@media (max-width: 560px) {
  .student-study-toolbar {
    left: 12px;
    right: 12px;
    justify-content: space-between;
    border-radius: 18px;
  }
  .student-study-toolbar .mini-lang-row span,
  .student-study-toolbar .mini-switch-row span {
    display: none;
  }
  .translated-line {
    font-size: .58em;
  }
}

/* QuizLuck v2.5 one-file import and flashcard explanation polish */
.import-report { margin-top: 14px; }
.flash-explanation-always {
  width: min(100%, 760px);
  margin: 10px auto 0;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 34px rgba(15,23,42,.12);
  text-align: left;
}
.flash-explanation-always strong {
  display: block;
  color: var(--primary);
  font-size: clamp(16px, 1.8vw, 22px);
  margin-bottom: 4px;
}
.flash-explanation-always p {
  margin: 4px 0 0;
  color: var(--text);
  line-height: 1.48;
  font-size: clamp(14px, 1.5vw, 17px);
}
.flash-face h1 .dual-study-text,
.flash-face h1 .english-main,
.flash-face h1 .translated-line {
  display: block;
}
@media (max-width: 720px) {
  .flash-explanation-always { padding: 13px 14px; border-radius: 16px; }
  .import-help code { display: inline-flex; margin: 5px 5px 0 0; }
}

/* QuizLuck v2.7 premium flashcard + saved-only controls */
.study-session-pill{
  position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:20;
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  color:#fff;background:rgba(15,23,42,.34);border:1px solid rgba(255,255,255,.22);
  font-weight:900;box-shadow:0 14px 34px rgba(0,0,0,.18);backdrop-filter:blur(14px)
}
.topic-hero-section{padding-top:40px}.premium-topic-card{text-align:center;overflow:hidden}.topic-emoji-hero{width:96px;height:96px;margin:0 auto 18px;display:grid;place-items:center;border-radius:30px;font-size:54px;background:linear-gradient(135deg,#e0f2fe,#f5d0fe);box-shadow:0 22px 50px rgba(79,70,229,.18)}
.topic-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.mode-launch{min-height:76px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none}.mode-launch b{font-size:17px}.mode-launch span{font-size:12px;opacity:.78}.saved-grid{margin-top:12px}.saved-button{border:0;border-radius:18px;padding:14px 18px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-weight:950;box-shadow:0 16px 34px rgba(239,68,68,.24);cursor:pointer;text-align:center;text-decoration:none}.saved-button:hover{transform:translateY(-1px);filter:saturate(1.05)}.saved-mini-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.saved-mini-actions a{font-size:12px;font-weight:900;text-decoration:none;color:#4f46e5;background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:7px 10px}
.flash-screen .study-deck{scroll-snap-type:x mandatory}.flash-premium-card{max-width:min(1040px,90vw);min-height:min(720px,calc(100vh - 170px));margin:auto;background:linear-gradient(150deg,rgba(255,255,255,.20),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 90px rgba(21,11,89,.38), inset 0 1px 0 rgba(255,255,255,.25);position:relative;overflow:hidden}.flash-premium-card::before{content:"";position:absolute;inset:-35% -10% auto auto;width:65%;height:65%;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%);pointer-events:none}.flash-game-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:22px;width:100%;align-items:stretch;min-height:430px}.flash-media-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.18);padding:22px}.flash-emoji-card{width:min(240px,34vw);height:min(240px,34vw);display:grid;place-items:center;border-radius:42px;font-size:clamp(82px,12vw,132px);background:linear-gradient(145deg,#fff,#e0f2fe 48%,#ddd6fe);box-shadow:0 28px 70px rgba(15,23,42,.25);transform:rotate(-2deg)}.flash-game-image{max-width:100%;max-height:260px;object-fit:contain;border-radius:28px;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.18)}.flash-caption{text-align:center;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.25)}.flash-caption b{display:block;font-size:20px}.flash-caption span{font-size:13px;opacity:.82}.flash-game-card{appearance:none;border:0;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border-radius:30px;padding:34px;cursor:pointer;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,246,255,.94));box-shadow:0 20px 60px rgba(0,0,0,.18);color:#101828;min-height:430px;max-height:calc(100vh - 320px);overflow:auto}.flash-game-card h1{font-size:clamp(30px,4.6vw,68px);line-height:1.04;margin:0;font-weight:1000;letter-spacing:-.04em}.flash-game-card .translated-line{font-size:.42em;line-height:1.2;margin-top:14px;color:#4f46e5;display:block}.flash-study-explanation{width:100%;text-align:left;background:#fff;border:1px solid #dbeafe;border-radius:24px;padding:18px 20px;box-shadow:0 12px 32px rgba(15,23,42,.1)}.flash-study-explanation strong{display:block;color:#2563eb;font-size:20px;margin-bottom:6px}.flash-study-explanation p{margin:4px 0;font-size:clamp(15px,1.5vw,19px);line-height:1.45;color:#0f172a}.flash-status-bar{margin-top:14px;padding:10px 16px;border-radius:18px;background:rgba(255,255,255,.16);color:#fff;font-weight:900;text-align:center}.flash-status-bar.active{background:rgba(16,185,129,.22);border:1px solid rgba(255,255,255,.22)}.flash-actions{position:relative!important;inset:auto!important;margin-top:16px;width:100%;display:flex!important;justify-content:center!important;flex-wrap:wrap;gap:10px}.flash-actions button{min-width:128px}.flash-finish-screen .finish-card{background:rgba(255,255,255,.95)}
.student-study-toolbar{right:auto;left:82px}.student-study-toolbar select{font-weight:900}
@media(max-width:860px){.topic-mode-grid{grid-template-columns:1fr}.study-session-pill{top:64px;font-size:12px;padding:8px 12px}.flash-premium-card{min-height:calc(100vh - 150px);max-width:94vw}.flash-game-layout{grid-template-columns:1fr;gap:12px;min-height:auto}.flash-media-panel{padding:14px;min-height:160px}.flash-emoji-card{width:132px;height:132px;border-radius:30px;font-size:78px}.flash-caption span{display:none}.flash-game-card{min-height:290px;max-height:none;padding:22px}.flash-game-card h1{font-size:clamp(26px,9vw,44px)}.flash-actions button{flex:1 1 42%;min-width:0}.student-study-toolbar{left:12px;right:auto;top:74px;max-width:calc(100vw - 24px)}}
@media(max-width:540px){.flash-actions button{flex-basis:100%}.flash-study-explanation{padding:14px}.study-session-pill{display:none}.flash-game-card h1{letter-spacing:-.025em}.flash-media-panel{display:none}}

/* Final fullscreen flashcard layout and professional top controls */
.student-study-toolbar {
  top: calc(env(safe-area-inset-top) + 14px);
  left: calc(env(safe-area-inset-left) + 82px);
  right: auto;
  min-height: 54px;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(12, 10, 35, .62);
}
.mini-switch-row,
.mini-lang-row {
  min-height: 36px;
}
.mini-lang-row select {
  min-width: 118px;
}
.study-ad-slot {
  top: calc(env(safe-area-inset-top) + 14px);
  right: calc(env(safe-area-inset-right) + 24px);
}
.study-session-pill {
  top: calc(env(safe-area-inset-top) + 82px);
}
.study-progress-line {
  top: calc(env(safe-area-inset-top) + 82px);
  left: calc(env(safe-area-inset-left) + 24px);
  right: calc(env(safe-area-inset-right) + 24px);
}
.flash-screen .study-deck,
.flash-screen .study-slide {
  height: 100dvh;
}
.flash-screen .study-slide {
  padding: calc(env(safe-area-inset-top) + 108px) clamp(12px, 2.2vw, 28px) calc(env(safe-area-inset-bottom) + 12px);
}
.flash-premium-card {
  width: min(1220px, 100%);
  max-width: 100%;
  height: min(820px, calc(100dvh - 124px));
  min-height: 0;
  border-radius: clamp(18px, 2.2vw, 28px);
}
.flash-game-layout {
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
}
.flash-game-card {
  min-height: 0;
  max-height: none;
  height: 100%;
  overflow: auto;
  overflow-wrap: anywhere;
}
.flash-game-card h1 {
  max-width: 100%;
}
.flash-status-bar {
  margin-top: 0;
}
.flash-actions {
  margin-top: 0;
}
.flash-actions button {
  min-width: 118px;
}
@media (max-width: 980px) {
  .study-ad-slot {
    width: min(260px, 36vw);
    height: 44px;
    top: calc(env(safe-area-inset-top) + 16px);
    right: 12px;
  }
  .student-study-toolbar {
    top: calc(env(safe-area-inset-top) + 14px);
    left: calc(env(safe-area-inset-left) + 68px);
    bottom: auto;
    max-width: calc(100vw - 352px);
  }
  .flash-screen .study-slide {
    padding-top: calc(env(safe-area-inset-top) + 104px);
  }
  .flash-game-layout {
    grid-template-columns: 1fr;
  }
  .flash-media-panel {
    min-height: 132px;
  }
}
@media (max-width: 720px) {
  .study-close {
    top: calc(env(safe-area-inset-top) + 10px);
    left: calc(env(safe-area-inset-left) + 10px);
    width: 44px;
    height: 44px;
  }
  .student-study-toolbar {
    left: calc(env(safe-area-inset-left) + 62px);
    right: auto;
    width: calc(100vw - 74px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-width: none;
    justify-content: space-between;
  }
  .study-ad-slot {
    top: calc(env(safe-area-inset-top) + 72px);
    right: 10px;
    left: auto;
    transform: none;
    width: min(190px, 44vw);
    opacity: .78;
  }
  .study-progress-line {
    top: calc(env(safe-area-inset-top) + 124px);
    left: 10px;
    right: 10px;
  }
  .flash-screen .study-slide {
    padding: calc(env(safe-area-inset-top) + 142px) 8px calc(env(safe-area-inset-bottom) + 8px);
  }
  .flash-premium-card {
    height: calc(100dvh - 152px);
    padding: 8px;
    gap: 6px;
  }
  .flash-game-card {
    padding: 18px 14px;
    gap: 12px;
  }
  .flash-actions {
    gap: 6px;
  }
  .flash-actions button {
    flex: 1 1 calc(50% - 6px);
    min-height: 40px;
    min-width: 0;
    padding: 8px 10px;
    font-size: 13px;
  }
}
@media (max-width: 430px) {
  .mini-lang-row select {
    min-width: 92px;
    max-width: 110px;
  }
  .flash-premium-card {
    height: calc(100dvh - 150px);
  }
  .flash-game-card h1 {
    font-size: clamp(24px, 8vw, 36px);
  }
  .flash-actions button {
    flex-basis: 100%;
  }
}

/* Launch-ready account, report, request, and ad controls */
.auth-card,
.account-panel,
.launch-settings {
  display: grid;
  gap: 1rem;
}
.google-login-slot {
  min-height: 44px;
  display: grid;
  align-items: center;
}
.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}
.launch-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 28px);
  background: rgba(2, 6, 23, .64);
  backdrop-filter: blur(12px);
}
.launch-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(760px, calc(100dvh - 32px));
  overflow: auto;
  display: grid;
  gap: .9rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
}
.report-button {
  white-space: nowrap;
}
.subscription-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.upgrade-mini {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: #fff;
  color: #1e1b4b;
  font-weight: 950;
}
.student-study-toolbar.free-access {
  border-style: dashed;
}
.student-study-toolbar select:disabled,
.student-study-toolbar input:disabled + i {
  opacity: .58;
  cursor: not-allowed;
}
.study-post-preview,
.study-post-page {
  display: grid;
  gap: 1rem;
}
.study-post-preview {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: var(--shadow-soft);
}
.post-note {
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.post-note:last-child {
  border-bottom: 0;
}
.post-hero-image {
  max-height: 420px;
  object-fit: cover;
}
.study-ad-slot.adsense-live {
  display: block;
  width: min(336px, 34vw);
  min-height: 50px;
  height: auto;
  padding: 0;
  border-style: solid;
  overflow: hidden;
  pointer-events: auto;
}
.study-ad-slot.adsense-live ins,
.study-ad-slot.adsense-live iframe {
  max-width: 100%;
}
@media (max-width: 720px) {
  .subscription-panel {
    align-items: stretch;
    flex-direction: column;
  }
  .report-button {
    flex: 1 1 100%;
  }
  .study-ad-slot.adsense-live {
    width: min(190px, 44vw);
  }
}

/* Final mobile study polish: compact footer icons, Kahoot grid, no duplicate progress bar */
@media (max-width: 760px) {
  .study-progress-line {
    display: none !important;
  }
  .study-slide {
    padding: calc(env(safe-area-inset-top) + 88px) 6px calc(env(safe-area-inset-bottom) + 6px) !important;
  }
  .flash-screen .study-slide {
    padding: calc(env(safe-area-inset-top) + 116px) 6px calc(env(safe-area-inset-bottom) + 6px) !important;
  }
  .study-card.kahoot-card,
  .flash-premium-card {
    height: calc(100dvh - 100px) !important;
    padding: 6px !important;
    gap: 5px !important;
    border-radius: 20px !important;
  }
  .flash-premium-card {
    height: calc(100dvh - 124px) !important;
  }
  .study-card-head.compact {
    min-height: 34px;
  }
  .study-content.kahoot-content {
    grid-template-rows: minmax(68px, 20%) auto minmax(0, 1fr) !important;
    gap: 5px !important;
    min-height: 0;
  }
  .study-card.kahoot-card.is-wrong .study-content.kahoot-content,
  .study-card.kahoot-card.is-correct .study-content.kahoot-content {
    padding-top: 28px !important;
  }
  .study-media {
    width: min(420px, 88%) !important;
    min-height: 70px !important;
  }
  .study-media.has-image .question-image {
    max-height: 22dvh !important;
  }
  .study-question {
    min-height: 64px !important;
    padding: 9px 10px !important;
    border-radius: 12px !important;
    font-size: clamp(1rem, 4.4vw, 1.45rem) !important;
    line-height: 1.08 !important;
  }
  .study-question.text-md {
    min-height: 76px !important;
    font-size: clamp(1.02rem, 4.55vw, 1.54rem) !important;
    line-height: 1.08 !important;
  }
  .study-question .translated-line {
    margin-top: 5px;
  }
  .study-options.kahoot-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(96px, 1fr);
    gap: 7px !important;
    min-height: 0;
  }
  .study-option.kahoot-option {
    min-height: 96px !important;
    height: 100%;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    align-content: center;
    border-radius: 10px !important;
    padding: 6px !important;
    font-size: clamp(.86rem, 3.5vw, 1.08rem) !important;
    box-shadow: inset 0 -5px 0 rgba(0,0,0,.22), 0 10px 18px rgba(0,0,0,.16) !important;
  }
  .option-shape {
    width: 22px !important;
    height: 22px !important;
    align-self: start;
    margin-top: 2px;
  }
  .option-label strong {
    -webkit-line-clamp: 4 !important;
  }
  .study-explanation-panel,
  .flash-study-explanation {
    max-height: 34dvh;
    overflow: auto;
    padding: 12px 14px !important;
    border-radius: 18px !important;
  }
  .study-explanation-panel strong,
  .flash-study-explanation strong {
    font-size: 1rem !important;
  }
  .study-explanation-panel p,
  .flash-study-explanation p {
    font-size: .94rem !important;
    line-height: 1.35 !important;
  }
  .translated-explanation {
    margin-top: 6px !important;
    padding-top: 6px !important;
  }
  .wrong-popup.compact-review,
  .wrong-popup {
    min-height: 0 !important;
    max-height: 118px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .wrong-popup.compact-review strong,
  .wrong-popup strong {
    font-size: 1rem !important;
  }
  .wrong-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .study-bottom-actions.clean-actions,
  .study-bottom-actions.auto-note,
  .flash-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center !important;
    gap: 6px !important;
    width: 100%;
    margin-top: 0 !important;
    padding: 6px;
    border-radius: 18px;
    background: rgba(92, 24, 140, .32);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
  }
  .study-bottom-actions.auto-note {
    flex-wrap: nowrap !important;
  }
  .study-bottom-actions.auto-note > span {
    display: none;
  }
  .study-bottom-actions.clean-actions button,
  .study-bottom-actions.auto-note button,
  .flash-actions button,
  .wrong-actions button {
    min-width: 0 !important;
    width: auto;
    flex: 0 1 46px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    overflow: hidden;
  }
  .study-bottom-actions.clean-actions button::before,
  .study-bottom-actions.auto-note button::before,
  .flash-actions button::before,
  .wrong-actions button::before {
    display: inline-grid;
    place-items: center;
    width: 100%;
    font-size: 1.28rem;
    line-height: 1;
  }
  [data-mobile-icon="answer"]::before { content: "👁"; }
  [data-mobile-icon="dislike"]::before { content: "👎"; }
  [data-mobile-icon="like"]::before { content: "👍"; }
  [data-mobile-icon="love"]::before { content: "❤"; color: #fff; }
  [data-mobile-icon="report"]::before { content: "⚑"; }
  [data-mobile-icon="next"] {
    font-size: .98rem !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
    flex: 1 1 72px !important;
  }
  [data-mobile-icon="next"]::before {
    content: none !important;
  }
  .flash-status-bar {
    display: none !important;
  }
  .flash-game-layout {
    min-height: 0 !important;
    height: 100% !important;
  }
  .flash-game-card {
    padding: 10px 10px !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .flash-game-card h1 {
    font-size: clamp(1.45rem, 7vw, 2.15rem) !important;
  }
}
@media (max-width: 430px) {
  .study-options.kahoot-options {
    grid-auto-rows: minmax(86px, 1fr);
    gap: 6px !important;
  }
  .study-option.kahoot-option {
    min-height: 86px !important;
    padding: 5px !important;
    font-size: clamp(.78rem, 3.25vw, .98rem) !important;
  }
  .study-bottom-actions.clean-actions,
  .flash-actions {
    gap: 5px !important;
    padding: 5px;
  }
  .study-bottom-actions.clean-actions button,
  .study-bottom-actions.auto-note button,
  .flash-actions button,
  .wrong-actions button {
    min-height: 40px !important;
    border-radius: 12px !important;
    flex-basis: 40px !important;
  }
  [data-mobile-icon="next"] { flex-basis: 62px !important; }
  .study-explanation-panel,
  .flash-study-explanation {
    max-height: 30dvh;
  }
}

/* Final minimal study UI: no know/don't-know controls, compact feedback, professional explanation overlay */
.result-ribbon {
  position: absolute !important;
  top: clamp(54px, 8dvh, 72px) !important;
  right: clamp(16px, 4vw, 30px) !important;
  left: auto !important;
  width: 48px !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  transform: none !important;
  font-size: 0 !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.22) !important;
}
.result-ribbon span {
  width: 100% !important;
  height: 100% !important;
  border: 2px solid rgba(255,255,255,.32) !important;
  font-size: 1.7rem !important;
}
.result-ribbon.good { background: rgba(34,197,94,.92) !important; }
.result-ribbon.bad { background: rgba(244,63,94,.94) !important; }
.final-study-actions {
  justify-content: flex-end !important;
}
.final-study-actions .next-text-button {
  min-width: 96px;
}
@media (max-width: 760px) {
  .study-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    font-size: 1.45rem !important;
  }
  .student-study-toolbar {
    top: calc(env(safe-area-inset-top) + 10px) !important;
    left: calc(env(safe-area-inset-left) + 56px) !important;
    width: calc(100vw - 68px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    min-height: 42px !important;
    padding: 5px 7px !important;
    gap: 6px !important;
    border-radius: 14px !important;
  }
  .mini-switch-row,
  .mini-lang-row {
    min-height: 30px !important;
    gap: 5px !important;
    font-size: 11px !important;
  }
  .mini-switch-row i {
    width: 34px !important;
    height: 20px !important;
  }
  .mini-switch-row i::after {
    width: 12px !important;
    height: 12px !important;
  }
  .mini-switch-row input:checked + i::after {
    transform: translateX(14px) !important;
  }
  .mini-lang-row select {
    min-width: 88px !important;
    max-width: 112px !important;
    height: 30px !important;
    padding: 0 26px 0 10px !important;
    font-size: 12px !important;
  }
  .upgrade-mini {
    min-height: 30px;
    padding: 0 9px;
    font-size: 11px;
  }
  .study-ad-slot {
    top: calc(env(safe-area-inset-top) + 58px) !important;
    height: 34px !important;
    width: min(160px, 42vw) !important;
    padding: 4px 8px !important;
    gap: 6px !important;
  }
  .study-ad-slot span {
    width: 24px !important;
    height: 24px !important;
    font-size: .65rem !important;
  }
  .study-ad-slot small {
    font-size: .68rem !important;
  }
  .study-slide {
    padding-top: calc(env(safe-area-inset-top) + 76px) !important;
  }
  .flash-screen .study-slide {
    padding-top: calc(env(safe-area-inset-top) + 98px) !important;
  }
  .study-card.kahoot-card {
    height: calc(100dvh - 86px) !important;
  }
  .flash-premium-card {
    height: calc(100dvh - 106px) !important;
  }
  .study-explanation-panel {
    position: absolute;
    z-index: 40;
    left: 10px;
    right: 10px;
    bottom: 62px;
    max-height: min(42dvh, 340px);
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 24px 80px rgba(15,23,42,.30) !important;
    backdrop-filter: blur(18px) saturate(1.2);
  }
  .study-card.kahoot-card.is-wrong::after,
  .study-card.kahoot-card.is-correct::after {
    display: none !important;
    content: none !important;
  }
  .study-explanation-panel {
    z-index: 45;
  }
  .result-ribbon {
    top: 58px !important;
    right: 18px !important;
    width: 38px !important;
    min-height: 38px !important;
    height: 38px !important;
  }
  .result-ribbon span {
    font-size: 1.25rem !important;
  }
  .wrong-popup,
  .wrong-popup.compact-review,
  .flash-status-bar {
    display: none !important;
  }
  .final-study-actions {
    justify-content: flex-end !important;
    background: rgba(38, 9, 77, .30) !important;
  }
  .final-study-actions button {
    flex: 0 1 44px !important;
  }
  .final-study-actions .next-text-button,
  .final-study-actions [data-mobile-icon="next"] {
    flex: 0 0 86px !important;
    max-width: 96px;
    margin-left: auto;
    font-size: .98rem !important;
  }
}

/* Final mobile compact study layout: larger prompt area, smaller choices, text footer. */
@media (max-width: 760px) {
  .study-card.kahoot-card {
    padding: 8px 8px 6px !important;
    gap: 6px !important;
  }

  .study-card-head.compact {
    min-height: 28px !important;
    margin-bottom: 2px !important;
  }

  .study-content.kahoot-content {
    grid-template-rows: minmax(132px, 30%) minmax(62px, auto) auto !important;
    gap: 7px !important;
    min-height: 0 !important;
  }

  .study-media {
    min-height: clamp(128px, 28dvh, 230px) !important;
    padding: 8px !important;
    border-radius: 18px !important;
  }

  .study-media.no-image {
    min-height: clamp(126px, 27dvh, 210px) !important;
  }

  .study-media img {
    max-height: clamp(122px, 27dvh, 220px) !important;
    object-fit: contain !important;
  }

  .emoji-orb {
    width: clamp(70px, 17vw, 104px) !important;
    height: clamp(70px, 17vw, 104px) !important;
    font-size: clamp(2.2rem, 8vw, 3.4rem) !important;
  }

  .study-question,
  .study-question.text-sm,
  .study-question.text-md,
  .study-question.text-lg,
  .study-content.kahoot-content > h1 {
    min-height: 58px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: clamp(1.05rem, 4vw, 1.42rem) !important;
    line-height: 1.08 !important;
  }

  .study-options.kahoot-options {
    align-self: start !important;
    align-content: start !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 7px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .study-option.kahoot-option {
    grid-template-columns: minmax(0, 1fr) !important;
    place-items: center !important;
    min-height: clamp(72px, 12dvh, 108px) !important;
    height: auto !important;
    padding: 5px 7px !important;
    border-radius: 12px !important;
    font-size: clamp(.82rem, 3.1vw, 1rem) !important;
    box-shadow: inset 0 -5px 0 rgba(0,0,0,.18) !important;
  }

  .option-shape {
    display: none !important;
  }

  .option-label {
    width: 100% !important;
    min-width: 0 !important;
    place-items: center !important;
    text-align: center !important;
  }

  .option-label strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.06 !important;
  }

  .final-study-actions,
  .study-bottom-actions.clean-actions.final-study-actions,
  .flash-actions.clean-actions.final-study-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    min-height: 40px !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  .final-study-actions button,
  .study-bottom-actions.clean-actions.final-study-actions button,
  .flash-actions.clean-actions.final-study-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
    font-size: clamp(.68rem, 2.8vw, .82rem) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  .final-study-actions button::before,
  .study-bottom-actions.clean-actions.final-study-actions button::before,
  .flash-actions.clean-actions.final-study-actions button::before {
    content: none !important;
    display: none !important;
  }

  .final-study-actions .save-review,
  .final-study-actions .saved-button,
  .final-study-actions [data-card-mark] {
    flex: 0 1 58px !important;
    max-width: 68px !important;
  }

  .final-study-actions .report-button {
    flex: 0 1 66px !important;
    max-width: 76px !important;
  }

  .final-study-actions [data-mobile-icon="answer"] {
    flex: 0 1 64px !important;
    max-width: 74px !important;
  }

  .final-study-actions .next-text-button,
  .final-study-actions [data-mobile-icon="next"] {
    flex: 0 0 66px !important;
    max-width: 74px !important;
    margin-left: auto !important;
    font-size: clamp(.74rem, 3vw, .9rem) !important;
  }
}

@media (max-width: 430px) {
  .study-content.kahoot-content {
    grid-template-rows: minmax(116px, 28%) minmax(56px, auto) auto !important;
    gap: 6px !important;
  }

  .study-media,
  .study-media.no-image {
    min-height: clamp(112px, 25dvh, 176px) !important;
  }

  .study-option.kahoot-option {
    min-height: clamp(66px, 11dvh, 92px) !important;
    padding: 4px 5px !important;
    font-size: clamp(.76rem, 3.25vw, .94rem) !important;
  }

  .final-study-actions,
  .study-bottom-actions.clean-actions.final-study-actions,
  .flash-actions.clean-actions.final-study-actions {
    gap: 4px !important;
    padding: 4px !important;
  }

  .final-study-actions button,
  .study-bottom-actions.clean-actions.final-study-actions button,
  .flash-actions.clean-actions.final-study-actions button {
    min-height: 32px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    font-size: .68rem !important;
  }

  .final-study-actions .save-review,
  .final-study-actions .saved-button,
  .final-study-actions [data-card-mark] {
    flex-basis: 52px !important;
    max-width: 60px !important;
  }

  .final-study-actions .report-button {
    flex-basis: 60px !important;
    max-width: 68px !important;
  }

  .final-study-actions [data-mobile-icon="answer"] {
    flex-basis: 58px !important;
    max-width: 66px !important;
  }

  .final-study-actions .next-text-button,
  .final-study-actions [data-mobile-icon="next"] {
    flex-basis: 58px !important;
    max-width: 66px !important;
  }
}

/* Final mobile navigation cleanup: no floating arrows over action buttons. */
@media (max-width: 760px) {
  .study-nav-arrow {
    display: none !important;
  }

  .study-bottom-actions.clean-actions.final-study-actions,
  .flash-actions.clean-actions.final-study-actions {
    justify-content: flex-start !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .final-study-actions .next-text-button,
  .final-study-actions [data-mobile-icon="next"] {
    margin-left: auto !important;
  }

  .topic-mode-grid,
  .topic-mode-grid.saved-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }

  .topic-mode-grid .mode-launch {
    min-height: 64px !important;
    padding: 10px 8px !important;
    border-radius: 14px !important;
  }

  .topic-mode-grid .mode-launch b {
    font-size: clamp(1rem, 4vw, 1.18rem) !important;
  }

  .topic-mode-grid .mode-launch span {
    font-size: .78rem !important;
  }
}

@media (max-width: 380px) {
  .topic-mode-grid,
  .topic-mode-grid.saved-grid {
    gap: 8px !important;
  }

  .topic-mode-grid .mode-launch {
    min-height: 58px !important;
    padding: 8px 6px !important;
  }
}

.study-progress-line {
  display: none !important;
}

.topic-share {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 4px;
}

.topic-share .ghost-button {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .86rem;
}

.final-study-actions button,
.study-bottom-actions.clean-actions.final-study-actions button {
  font-size: 1.05rem !important;
}

@media (max-width: 760px) {
  .final-study-actions button,
  .study-bottom-actions.clean-actions.final-study-actions button {
    font-size: clamp(.85rem, 3.5vw, 1.03rem) !important;
  }

  .final-study-actions .next-text-button,
  .final-study-actions [data-mobile-icon="next"] {
    font-size: clamp(.92rem, 3.75vw, 1.12rem) !important;
  }
}

@media (max-width: 430px) {
  .final-study-actions button,
  .study-bottom-actions.clean-actions.final-study-actions button {
    font-size: .85rem !important;
  }
}

/* Final study space balance: smaller media, stronger question/explanation focus. */
.study-content.kahoot-content {
  grid-template-rows: minmax(80px, 18%) minmax(88px, auto) minmax(160px, .52fr) !important;
  gap: clamp(.45rem, .8vw, .65rem) !important;
}

.study-media {
  min-height: 72px !important;
  width: min(420px, 48%) !important;
}

.study-media.no-image {
  width: min(380px, 52%) !important;
  min-height: 76px !important;
  border-radius: 18px !important;
}

.study-media.has-image .question-image,
.study-media img {
  max-height: min(22dvh, 190px) !important;
  object-fit: contain !important;
}

.emoji-orb {
  width: clamp(64px, 7vw, 98px) !important;
  height: clamp(64px, 7vw, 98px) !important;
}

.emoji-orb span {
  font-size: clamp(2.2rem, 4.6vw, 3.8rem) !important;
}

.study-question,
.study-content.kahoot-content > h1 {
  min-height: clamp(86px, 14dvh, 170px) !important;
  max-height: none !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(.85rem, 1.5vw, 1.2rem) clamp(1rem, 2vw, 1.6rem) !important;
  font-size: clamp(1.6rem, 3vw, 3rem) !important;
  line-height: 1.08 !important;
}

.study-options.kahoot-options {
  align-self: start !important;
  align-content: start !important;
  grid-auto-rows: auto !important;
  min-height: 0 !important;
  height: auto !important;
}

.study-option.kahoot-option {
  min-height: clamp(54px, 6.2dvh, 74px) !important;
  padding: clamp(.35rem, .7vw, .55rem) clamp(.55rem, 1vw, .8rem) !important;
  font-size: clamp(.95rem, 1.5vw, 1.18rem) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 8px 16px rgba(0,0,0,.12) !important;
}

.study-explanation-panel {
  position: absolute !important;
  z-index: 55 !important;
  left: clamp(12px, 3vw, 34px) !important;
  right: clamp(12px, 3vw, 34px) !important;
  top: clamp(88px, 15dvh, 150px) !important;
  bottom: clamp(56px, 8dvh, 86px) !important;
  max-height: none !important;
  overflow: auto !important;
  padding: clamp(1rem, 2vw, 1.6rem) !important;
  border-radius: 18px !important;
}

.study-explanation-panel p {
  font-size: clamp(1rem, 1.65vw, 1.35rem) !important;
  line-height: 1.45 !important;
}

@media (max-width: 760px) {
  .study-content.kahoot-content {
    grid-template-rows: minmax(58px, 12%) minmax(104px, auto) auto !important;
    gap: 6px !important;
  }

  .study-media,
  .study-media.no-image {
    width: min(260px, 54%) !important;
    min-height: clamp(56px, 12dvh, 88px) !important;
    padding: 4px !important;
    border-radius: 14px !important;
  }

  .study-media.has-image .question-image,
  .study-media img {
    max-height: clamp(54px, 12dvh, 92px) !important;
  }

  .emoji-orb {
    width: clamp(48px, 13vw, 72px) !important;
    height: clamp(48px, 13vw, 72px) !important;
    border-radius: 16px !important;
  }

  .emoji-orb span {
    font-size: clamp(1.7rem, 6vw, 2.45rem) !important;
  }

  .study-question,
  .study-question.text-sm,
  .study-question.text-md,
  .study-question.text-lg,
  .study-content.kahoot-content > h1 {
    min-height: clamp(102px, 22dvh, 190px) !important;
    padding: 10px 12px !important;
    font-size: clamp(1.18rem, 5vw, 1.85rem) !important;
    line-height: 1.1 !important;
  }

  .study-options.kahoot-options {
    gap: 6px !important;
  }

  .study-option.kahoot-option {
    min-height: clamp(58px, 9dvh, 82px) !important;
    padding: 4px 6px !important;
    font-size: clamp(.84rem, 3.3vw, 1.03rem) !important;
  }

  .study-explanation-panel {
    left: 8px !important;
    right: 8px !important;
    top: calc(env(safe-area-inset-top) + 112px) !important;
    bottom: 52px !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 430px) {
  .study-content.kahoot-content {
    grid-template-rows: minmax(50px, 10%) minmax(96px, auto) auto !important;
  }

  .study-media,
  .study-media.no-image {
    min-height: clamp(48px, 10dvh, 74px) !important;
    width: min(220px, 50%) !important;
  }

  .study-question,
  .study-content.kahoot-content > h1 {
    min-height: clamp(96px, 21dvh, 168px) !important;
    font-size: clamp(1.08rem, 5.2vw, 1.62rem) !important;
  }

  .study-option.kahoot-option {
    min-height: clamp(52px, 8.4dvh, 72px) !important;
  }
}

/* Final feedback/explanation polish. */
.result-ribbon {
  position: absolute !important;
  z-index: 60 !important;
  top: clamp(76px, 13dvh, 130px) !important;
  left: 50% !important;
  right: auto !important;
  width: auto !important;
  min-width: 156px !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 8px 22px 8px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: clamp(1.15rem, 2.5vw, 1.65rem) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
}

.result-ribbon span {
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255,255,255,.38) !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
}

.result-ribbon.good {
  background: rgba(34,197,94,.94) !important;
}

.result-ribbon.bad {
  background: rgba(244,63,94,.96) !important;
}

.study-explanation-panel {
  grid-template-columns: auto 1fr !important;
  padding-top: clamp(2.3rem, 4vw, 3rem) !important;
}

@media (max-width: 760px) {
  .result-ribbon {
    top: calc(env(safe-area-inset-top) + 118px) !important;
    min-width: 126px !important;
    min-height: 40px !important;
    padding: 6px 16px 6px 8px !important;
    gap: 8px !important;
    font-size: 1rem !important;
  }

  .result-ribbon span {
    width: 28px !important;
    height: 28px !important;
    font-size: 1.08rem !important;
  }

}

/* Final mobile flashcard stability: one active card, no scroll-snap index drift. */
.flash-screen .study-deck.flash-deck {
  overflow: hidden !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

.flash-screen .flash-study-slide,
.flash-screen .study-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  scroll-snap-align: none !important;
}

.study-progress-line {
  display: none !important;
}


/* Button tuning: slightly bigger Save/Report/Next + small report icon + a bit more spacing */
.final-study-actions,
.study-bottom-actions.clean-actions.final-study-actions,
.flash-actions.clean-actions.final-study-actions {
  gap: 9px !important;
  padding: 8px 10px !important;
}

.final-study-actions button,
.study-bottom-actions.clean-actions.final-study-actions button,
.flash-actions.clean-actions.final-study-actions button {
  min-height: 48px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  font-size: clamp(.84rem, 2.4vw, 1rem) !important;
}

.final-study-actions .save-review,
.final-study-actions .saved-button,
.final-study-actions [data-card-mark] {
  flex: 0 1 88px !important;
  max-width: 104px !important;
}

.final-study-actions .report-button {
  flex: 0 1 116px !important;
  max-width: 132px !important;
  gap: 8px !important;
}

.final-study-actions .report-button::before {
  content: "⚑" !important;
  display: inline-block !important;
  font-size: .86em !important;
  line-height: 1 !important;
  opacity: .9 !important;
}

.final-study-actions .next-text-button,
.final-study-actions [data-mobile-icon="next"] {
  flex: 0 0 106px !important;
  max-width: 126px !important;
  margin-left: auto !important;
  font-size: clamp(.9rem, 2.5vw, 1.05rem) !important;
}

@media (max-width: 760px) {
  .final-study-actions,
  .study-bottom-actions.clean-actions.final-study-actions,
  .flash-actions.clean-actions.final-study-actions {
    gap: 8px !important;
    padding: 8px 9px !important;
  }

  .final-study-actions button,
  .study-bottom-actions.clean-actions.final-study-actions button,
  .flash-actions.clean-actions.final-study-actions button {
    min-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 15px !important;
    font-size: .88rem !important;
  }

  .final-study-actions .save-review,
  .final-study-actions .saved-button,
  .final-study-actions [data-card-mark] {
    flex-basis: 86px !important;
    max-width: 102px !important;
  }

  .final-study-actions .report-button {
    flex-basis: 110px !important;
    max-width: 126px !important;
    gap: 7px !important;
  }

  .final-study-actions .report-button::before {
    font-size: .8em !important;
  }

  .final-study-actions .next-text-button,
  .final-study-actions [data-mobile-icon="next"] {
    flex-basis: 100px !important;
    max-width: 118px !important;
  }
}

@media (max-width: 430px) {
  .final-study-actions,
  .study-bottom-actions.clean-actions.final-study-actions,
  .flash-actions.clean-actions.final-study-actions {
    gap: 7px !important;
    padding: 7px 8px !important;
  }

  .final-study-actions button,
  .study-bottom-actions.clean-actions.final-study-actions button,
  .flash-actions.clean-actions.final-study-actions button {
    min-height: 45px !important;
    padding: 0 12px !important;
    font-size: .84rem !important;
  }

  .final-study-actions .save-review,
  .final-study-actions .saved-button,
  .final-study-actions [data-card-mark] {
    flex-basis: 84px !important;
    max-width: 98px !important;
  }

  .final-study-actions .report-button {
    flex-basis: 106px !important;
    max-width: 120px !important;
    gap: 6px !important;
  }

  .final-study-actions .report-button::before {
    font-size: .76em !important;
  }

  .final-study-actions .next-text-button,
  .final-study-actions [data-mobile-icon="next"] {
    flex-basis: 98px !important;
    max-width: 114px !important;
  }
}

/* Single native share button for topic and play toolbar */
.share-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.share-action-button::before {
  content: "↗";
  display: inline-block;
  font-size: .95em;
  line-height: 1;
  font-weight: 900;
}

.topic-share {
  justify-content: center;
}

.topic-share .share-action-button {
  min-width: 108px;
}

.student-study-toolbar .share-action-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 980px) {
  .student-study-toolbar {
    gap: 8px;
  }

  .student-study-toolbar .share-action-button {
    min-height: 32px;
    padding: 0 11px;
    font-size: 12px;
  }
}

@media (max-width: 560px) {
  .student-study-toolbar {
    display: grid !important;
    grid-template-columns: auto minmax(82px, 1fr) auto auto;
    align-items: center;
    justify-content: stretch;
    column-gap: 6px;
    row-gap: 0;
    padding: 6px 7px !important;
  }

  .student-study-toolbar .mini-switch-row {
    justify-self: start;
  }

  .student-study-toolbar .mini-lang-row {
    min-width: 0;
    width: 100%;
  }

  .student-study-toolbar .mini-lang-row select {
    min-width: 0 !important;
    width: 100%;
    max-width: none !important;
  }

  .student-study-toolbar .share-action-button {
    min-width: 0;
    padding: 0 10px;
    gap: 5px;
  }

  .student-study-toolbar .share-action-button span {
    display: inline !important;
  }
}


/* QuizLuck custom patch v2.9 */
.nav-upgrade-button{padding:.72rem 1rem;border-radius:999px;min-height:auto;font-size:.96rem;line-height:1;border:0;box-shadow:none}
.share-action-button{display:inline-flex;align-items:center;justify-content:center;gap:.46rem}
.share-button-icon{font-size:1rem;line-height:1}
.topic-card-pro{display:grid;gap:.82rem}
.topic-top-utility-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.topic-top-utility-row>.share-action-button{flex:0 0 auto;min-width:132px}
.topic-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.72rem}
.topic-action-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.topic-action-grid .button,.topic-action-grid .ghost-button{width:100%;justify-content:center;text-align:center;min-height:50px}
.topic-view-stats{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.view-pill{display:inline-flex;align-items:center;gap:.38rem;padding:.38rem .68rem;border-radius:999px;background:#f8fafc;border:1px solid #dbe4ff;color:#334155;font-weight:800}
.view-pill-icon{display:inline-flex;align-items:center;justify-content:center;color:#64748b}
.view-pill-icon svg{width:14px;height:14px;display:block}
.view-pill b{font-size:.76rem;white-space:nowrap}
.view-pill small{font-size:.8rem;color:#4f46e5;font-weight:900}
.topic-share{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap}
.topic-share .ghost-button,.topic-share .button{min-width:140px}
.student-study-toolbar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.student-study-toolbar>.share-action-button{order:2}
.student-study-toolbar>.mini-lang-row{order:3}
.student-study-toolbar>.upgrade-mini{order:4}
@media (max-width:860px){
  .top-nav .nav-upgrade-button{display:inline-flex}
}
@media (max-width:700px){
  .topic-action-grid{grid-template-columns:1fr 1fr}
  .topic-action-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .topic-top-utility-row{align-items:stretch}
  .topic-top-utility-row>.share-action-button{min-width:124px}
}
@media (max-width:540px){
  .topic-card-pro .saved-mini-actions{justify-content:center}
  .topic-top-utility-row{display:grid;grid-template-columns:minmax(118px,auto) 1fr;align-items:center}
  .topic-view-stats{justify-content:flex-end}
  .view-pill{padding:.34rem .56rem}
  .view-pill b{font-size:.72rem}
  .view-pill small{font-size:.76rem}
  .student-study-toolbar{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .student-study-toolbar>.mini-switch-row{grid-column:1/-1}
  .student-study-toolbar>.share-action-button,.student-study-toolbar>.mini-lang-row,.student-study-toolbar>.upgrade-mini{min-width:0;width:100%}
  .topic-action-grid .button,.topic-action-grid .ghost-button{min-height:46px;padding:.72rem .45rem;font-size:.93rem}
}


.topic-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.topic-share-inline {
  margin: 0;
  justify-content: flex-start;
  flex: 0 0 auto;
}

.topic-share-inline .share-action-button {
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, .28);
  background: linear-gradient(135deg, rgba(220, 252, 231, .98), rgba(187, 247, 208, .94));
  color: #166534;
  box-shadow: 0 10px 24px rgba(16, 185, 129, .14);
}

.topic-share-inline .share-action-button:hover {
  transform: translateY(-1px);
  filter: saturate(1.03);
}

.topic-view-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.topic-view-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(17, 24, 39, .74);
  color: #fff;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .15);
}

.topic-view-eye {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.6px solid rgba(255,255,255,.95);
  border-radius: 999px;
  font-size: 8px;
  line-height: 1;
  color: rgba(255,255,255,.95);
}

.topic-mode-row {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.topic-mode-row-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.topic-mode-row a {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
}

@media (max-width: 860px) {
  .topic-meta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .topic-share-inline,
  .topic-view-pills {
    width: 100%;
  }

  .topic-view-pills {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .topic-mode-row-three {
    grid-template-columns: 1fr;
  }

  .topic-view-pill {
    font-size: .84rem;
    padding: 6px 10px;
  }
}


/* Final topic card row fixes */
.topic-meta-row,.topic-detail-meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.topic-share-inline{margin:0;display:flex;align-items:center;justify-content:flex-start;flex:0 0 auto}
.topic-share-inline .share-action-button,
.topic-meta-row .share-action-button,
.topic-detail-meta-row .share-action-button{min-height:36px;padding:8px 16px;border-radius:999px;border:1px solid rgba(22,163,74,.22);background:linear-gradient(135deg,#ecfdf5,#d1fae5);color:#166534;box-shadow:0 8px 20px rgba(22,163,74,.12);font-weight:800}
.topic-share-inline .share-action-button:hover,
.topic-meta-row .share-action-button:hover,
.topic-detail-meta-row .share-action-button:hover{transform:translateY(-1px);filter:saturate(1.03)}
.topic-view-pills{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;align-items:center}
.topic-view-pill{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 10px;border-radius:999px;border:1px solid rgba(17,24,39,.08);background:rgba(17,24,39,.74);color:#fff;font-size:.83rem;font-weight:800;letter-spacing:-.01em;box-shadow:0 8px 18px rgba(15,23,42,.14)}
.topic-view-pill b{font-size:.82rem;font-weight:800;color:#fff;opacity:.96}
.topic-view-pill small{font-size:.98rem;font-weight:900;color:#fff}
.topic-view-eye{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:11px;line-height:1;color:#fff;opacity:.95}
.topic-view-eye svg{width:14px;height:14px;display:block}
.topic-mode-row{display:grid;gap:12px;margin-top:8px}
.topic-mode-row-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.topic-mode-row a{min-height:58px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:1rem;font-weight:900}
.topic-action-grid-tertiary{display:none!important}
@media (max-width: 860px){.topic-meta-row,.topic-detail-meta-row{align-items:stretch}.topic-share-inline,.topic-view-pills{width:100%}.topic-view-pills{justify-content:flex-start}}
@media (max-width: 640px){.topic-mode-row-three{grid-template-columns:1fr}.topic-view-pill{font-size:.79rem;padding:6px 9px}}


/* QuizLuck custom patch v3.0 compact topic analytics */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.topic-meta-row.topic-meta-row-compact,
.topic-detail-meta-row.topic-meta-row-compact{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap}
.topic-share-inline{margin:0;display:flex;align-items:center;justify-content:flex-start;flex:0 0 auto;min-width:0}
.topic-share-inline .share-action-button.topic-share-compact,
.topic-meta-row .share-action-button.topic-share-compact,
.topic-detail-meta-row .share-action-button.topic-share-compact{min-height:34px;padding:7px 14px;border-radius:999px;border:1px solid rgba(22,163,74,.24);background:linear-gradient(135deg,#f0fdf4,#dcfce7);color:#166534;box-shadow:0 6px 16px rgba(22,163,74,.12);font-weight:800;font-size:.92rem;gap:.42rem;white-space:nowrap}
.topic-share-inline .share-action-button.topic-share-compact .share-button-icon{font-size:.95rem;line-height:1}
.topic-share-inline .share-action-button.topic-share-compact:hover,
.topic-meta-row .share-action-button.topic-share-compact:hover,
.topic-detail-meta-row .share-action-button.topic-share-compact:hover{transform:translateY(-1px);filter:saturate(1.03)}
.topic-view-pills{display:flex;justify-content:flex-end;align-items:center;gap:7px;flex-wrap:nowrap;min-width:0}
.topic-view-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:5px 9px;border-radius:999px;border:1px solid rgba(15,23,42,.08);background:rgba(15,23,42,.72);backdrop-filter:blur(6px);color:#fff;font-size:.8rem;font-weight:800;letter-spacing:-.01em;box-shadow:0 8px 18px rgba(15,23,42,.12);white-space:nowrap}
.topic-view-pill small{font-size:.86rem;font-weight:900;color:#fff;line-height:1}
.view-pill-icon{display:inline-flex;align-items:center;justify-content:center;color:#fff;opacity:.95}
.view-pill-icon svg{width:13px;height:13px;display:block}
@media (max-width: 860px){
  .topic-meta-row.topic-meta-row-compact,
  .topic-detail-meta-row.topic-meta-row-compact{gap:8px}
  .topic-share-inline .share-action-button.topic-share-compact,
  .topic-meta-row .share-action-button.topic-share-compact,
  .topic-detail-meta-row .share-action-button.topic-share-compact{padding:7px 12px;font-size:.88rem}
  .topic-view-pill{padding:5px 8px;font-size:.76rem}
  .topic-view-pill small{font-size:.81rem}
}
@media (max-width: 640px){
  .topic-meta-row.topic-meta-row-compact,
  .topic-detail-meta-row.topic-meta-row-compact{justify-content:space-between;gap:7px;flex-wrap:nowrap}
  .topic-share-inline .share-action-button.topic-share-compact,
  .topic-meta-row .share-action-button.topic-share-compact,
  .topic-detail-meta-row .share-action-button.topic-share-compact{padding:6px 11px;font-size:.84rem;min-height:32px}
  .topic-view-pills{gap:6px}
  .topic-view-pill{padding:4px 7px;min-height:28px;border-radius:999px}
  .topic-view-pill small{font-size:.78rem}
  .view-pill-icon svg{width:12px;height:12px}
}

/* QuizLuck custom patch v3.1 mobile topic rows */
.share-action-button.topic-share-compact::before{content:none!important;display:none!important}

.topic-card-pro .topic-mode-row .ghost-button{
  background:linear-gradient(135deg,#f8fbff,#eef4ff);
  border-color:#dbe7ff;
  color:#111827;
}
.topic-card-pro .topic-mode-row .ghost-button:hover{
  background:linear-gradient(135deg,#f4f8ff,#e7efff);
  border-color:#cfdcff;
}

@media (max-width: 640px){
  .topic-meta-row.topic-meta-row-compact,
  .topic-detail-meta-row.topic-meta-row-compact{
    display:grid!important;
    grid-template-columns:auto 1fr;
    align-items:center!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
  }

  .topic-share-inline{
    width:auto!important;
    min-width:max-content;
  }

  .topic-share-inline .share-action-button.topic-share-compact,
  .topic-meta-row .share-action-button.topic-share-compact,
  .topic-detail-meta-row .share-action-button.topic-share-compact{
    min-height:30px!important;
    padding:6px 10px!important;
    font-size:.82rem!important;
    gap:.34rem!important;
  }

  .topic-share-inline .share-action-button.topic-share-compact .share-button-icon{
    font-size:.86rem!important;
  }

  .topic-view-pills{
    width:auto!important;
    justify-content:flex-end!important;
    gap:5px!important;
    flex-wrap:nowrap!important;
    min-width:0!important;
  }

  .topic-view-pill{
    min-height:26px!important;
    padding:4px 6px!important;
    gap:4px!important;
    font-size:.72rem!important;
  }

  .topic-view-pill small{
    font-size:.75rem!important;
  }

  .view-pill-icon svg{
    width:10px!important;
    height:10px!important;
  }

  .topic-mode-row-three{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:9px!important;
  }

  .topic-mode-row a{
    min-height:48px!important;
    padding:.78rem .28rem!important;
    font-size:.88rem!important;
    border-radius:18px!important;
  }

  .topic-card-pro .topic-mode-row .button{
    box-shadow:0 12px 28px rgba(79,70,229,.18)!important;
  }

  .topic-card-pro .topic-mode-row .ghost-button{
    background:linear-gradient(135deg,#f9fbff,#eef3ff)!important;
    border:1px solid #d9e4ff!important;
    color:#162033!important;
    box-shadow:0 8px 18px rgba(148,163,184,.12)!important;
  }
}


/* QuizLuck enroll patch v2.0 */
.topic-meta-actions{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0}
.topic-enroll-inline{display:flex;align-items:center;justify-content:flex-start;flex:0 0 auto}
.topic-enroll-inline .enroll-compact-button,
.topic-meta-row .enroll-compact-button,
.topic-detail-meta-row .enroll-compact-button{min-height:34px;padding:7px 13px;border-radius:999px;border:1px solid rgba(99,102,241,.18);background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#3730a3;box-shadow:0 6px 16px rgba(99,102,241,.12);font-weight:800;font-size:.9rem;gap:.4rem;white-space:nowrap;display:inline-flex;align-items:center}
.topic-enroll-inline .enroll-compact-button.is-active,
.topic-meta-row .enroll-compact-button.is-active,
.topic-detail-meta-row .enroll-compact-button.is-active{background:linear-gradient(135deg,#ede9fe,#ddd6fe);border-color:#c4b5fd;color:#5b21b6}
.topic-enroll-inline .enroll-compact-button:hover,
.topic-meta-row .enroll-compact-button:hover,
.topic-detail-meta-row .enroll-compact-button:hover{transform:translateY(-1px);filter:saturate(1.03)}
.enroll-button-icon{font-size:.95em;line-height:1}
@media (max-width:640px){
  .topic-meta-row.topic-meta-row-compact,
  .topic-detail-meta-row.topic-meta-row-compact{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;flex-wrap:nowrap!important}
  .topic-meta-actions{gap:6px;min-width:0;overflow:hidden}
  .topic-share-inline .share-action-button.topic-share-compact,
  .topic-enroll-inline .enroll-compact-button{min-height:30px!important;padding:6px 9px!important;font-size:.78rem!important;gap:.28rem!important}
  .topic-view-pill{padding:4px 6px!important;min-height:26px!important}
  .topic-view-pill small{font-size:.74rem!important}
}

/* QuizLuck wishlist patch v1.0 */
.top-nav a[href="/enroll"].active{background:#eef2ff;color:#0f172a;border-radius:999px}
.wishlist-head{align-items:flex-start;gap:1rem}
.wishlist-head-side{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:flex-end}
.wishlist-count-pill{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:.62rem 1rem;border-radius:999px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border:1px solid #c7d2fe;color:#4338ca;font-weight:900;box-shadow:0 10px 24px rgba(67,56,202,.1)}
.wishlist-sync-panel{margin:0 0 1rem}
.wishlist-empty-state{text-align:center;padding:2rem 1.2rem}
.wishlist-empty-icon{width:72px;height:72px;margin:0 auto 1rem;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#4338ca;font-size:2rem;font-weight:900;box-shadow:0 16px 36px rgba(67,56,202,.12)}
.saved-mini-actions .wishlist-mini-button,
.saved-mini-actions .wishlist-compact-button,
.saved-mini-actions .enroll-mini-button,
.saved-mini-actions .enroll-compact-button{font-size:12px;font-weight:900;text-decoration:none;border-radius:999px;padding:7px 12px;border:1px solid #f5c2d9;background:linear-gradient(135deg,#fff1f7,#ffe4ef);color:#be185d;display:inline-flex;align-items:center;gap:6px;cursor:pointer;box-shadow:0 8px 18px rgba(190,24,93,.08)}
.saved-mini-actions .wishlist-mini-button:hover,
.saved-mini-actions .wishlist-compact-button:hover,
.saved-mini-actions .enroll-mini-button:hover,
.saved-mini-actions .enroll-compact-button:hover{transform:translateY(-1px);filter:saturate(1.03)}
.saved-mini-actions .wishlist-mini-button.is-active,
.saved-mini-actions .wishlist-compact-button.is-active,
.saved-mini-actions .enroll-mini-button.is-active,
.saved-mini-actions .enroll-compact-button.is-active{background:linear-gradient(135deg,#fdf2f8,#f5f3ff);border-color:#e9d5ff;color:#7c3aed}
.saved-mini-actions .wishlist-mini-button.is-remove,
.saved-mini-actions .wishlist-compact-button.is-remove,
.saved-mini-actions .enroll-mini-button.is-remove,
.saved-mini-actions .enroll-compact-button.is-remove{background:linear-gradient(135deg,#fff7ed,#ffedd5);border-color:#fed7aa;color:#c2410c}
.wishlist-button-icon,.enroll-button-icon{font-size:.94em;line-height:1}
.wishlist-saved-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.wishlist-mode-slot{display:flex}
.wishlist-card-button,.enroll-card-button{width:100%;min-height:76px;border:1px solid #f5c2d9;border-radius:18px;background:linear-gradient(135deg,#fff1f7,#ffe4ef);color:#be185d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:950;text-decoration:none;box-shadow:0 16px 34px rgba(190,24,93,.12);cursor:pointer}
.wishlist-card-button span:last-child,.enroll-card-button span:last-child{font-size:17px}
.wishlist-card-button .wishlist-button-icon,.enroll-button-icon{font-size:22px}
.wishlist-card-button.is-active,.enroll-card-button.is-active{background:linear-gradient(135deg,#fdf2f8,#f5f3ff);border-color:#e9d5ff;color:#7c3aed}
.wishlist-card-button:hover,.enroll-card-button:hover{transform:translateY(-1px);filter:saturate(1.03)}
.wishlist-grid .topic-card-pro{position:relative}
.wishlist-grid .saved-mini-actions{justify-content:flex-start}
@media (max-width: 860px){
  .wishlist-saved-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .wishlist-head{gap:.75rem}
  .wishlist-head-side{width:100%;justify-content:flex-start}
  .wishlist-count-pill{min-height:34px;padding:.52rem .86rem;font-size:.88rem}
  .saved-mini-actions{gap:7px}
  .saved-mini-actions .wishlist-mini-button,
  .saved-mini-actions .wishlist-compact-button,
  .saved-mini-actions .enroll-mini-button,
  .saved-mini-actions .enroll-compact-button{padding:7px 11px;font-size:12px}
  .wishlist-saved-grid{grid-template-columns:1fr 1fr;gap:10px}
  .wishlist-card-button,.enroll-card-button{min-height:66px;border-radius:16px}
  .wishlist-card-button span:last-child,.enroll-card-button span:last-child{font-size:15px}
}


/* QuizLuck legal pages + enroll auth patch v5.0 */
.legal-page-shell{padding-top:1rem}
.legal-page-card{padding:clamp(1.2rem,2vw,2rem);border-radius:28px;border:1px solid #dbe5f4;box-shadow:0 24px 60px rgba(37,99,235,.08);background:linear-gradient(180deg,#ffffff,#f8fbff)}
.legal-page-card h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.05;margin:.45rem 0 1rem}
.legal-summary{font-size:1.05rem;max-width:860px}
.legal-body{display:grid;gap:1rem;margin-top:1.4rem}
.legal-body h2,.legal-body h3{margin:1rem 0 0;color:#0f172a}
.legal-body p,.legal-body li{color:#475569;line-height:1.8}
.legal-body ul{margin:0;padding-left:1.2rem}
.legal-link-grid{margin-top:.2rem}
.legal-link-card{text-decoration:none;transition:transform .18s ease, box-shadow .18s ease}
.legal-link-card:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(37,99,235,.12)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.25rem 0 1.1rem}
.pricing-card{border:1px solid #dbe5f4;border-radius:22px;padding:1.15rem;background:linear-gradient(180deg,#f8fbff,#fff);box-shadow:0 18px 36px rgba(37,99,235,.08);display:grid;gap:.6rem;align-content:start}
.pricing-card h3{font-size:2rem;line-height:1;margin:0}
.button-static{pointer-events:none;opacity:.92}
.page-editor-shell{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:1rem}
.page-editor-panel,.page-editor-preview{border-radius:24px}
.page-editor-grid{display:grid;gap:1rem}
.page-editor-grid .field textarea{min-height:140px}
.compact-head{margin-bottom:1rem}
.enroll-locked-card{padding:1.6rem;border-radius:28px;text-align:left;max-width:780px;margin-inline:auto;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 24px 60px rgba(37,99,235,.08)}
.topic-meta-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}
.topic-enroll-inline .enroll-compact-button,.topic-meta-row .enroll-compact-button,.topic-detail-meta-row .enroll-compact-button{min-height:34px;padding:7px 12px;border-radius:999px;border:1px solid rgba(99,102,241,.18);background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#3730a3;box-shadow:0 6px 16px rgba(99,102,241,.12);font-weight:800;font-size:.88rem;gap:.36rem;white-space:nowrap;display:inline-flex;align-items:center}
.topic-enroll-inline .enroll-compact-button.is-active,.topic-meta-row .enroll-compact-button.is-active,.topic-detail-meta-row .enroll-compact-button.is-active{background:linear-gradient(135deg,#ede9fe,#ddd6fe);border-color:#c4b5fd;color:#5b21b6}
.enroll-button-icon{font-size:.82rem;line-height:1}
@media (max-width: 980px){.pricing-grid{grid-template-columns:1fr}.page-editor-shell{grid-template-columns:1fr}}
@media (max-width: 640px){
  .legal-page-card{border-radius:22px;padding:1rem}
  .topic-meta-actions{width:100%;justify-content:space-between}
  .topic-share-inline,.topic-enroll-inline{flex:0 0 auto}
  .topic-meta-row.topic-meta-row-compact,.topic-detail-meta-row.topic-meta-row-compact{display:grid!important;grid-template-columns:auto auto 1fr!important;align-items:center!important;gap:8px!important}
  .topic-view-pills{justify-content:flex-end;width:auto}
  .topic-mode-row-three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .topic-mode-row-three>.button,.topic-mode-row-three>.ghost-button{min-height:54px;font-size:1rem}
}

/* QuizLuck site pages + global links patch v6.0 */
.top-nav{flex-wrap:wrap;justify-content:flex-end}
.top-nav a#headerUpgradeButton{background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#312e81;font-weight:800}
.site-links-shell{width:min(1200px,100%);margin:0 auto;padding:0 clamp(1rem,2.5vw,2rem) .4rem}
.site-link-ribbon{display:flex;gap:.55rem;overflow:auto;padding:.15rem 0 .55rem;scrollbar-width:none}
.site-link-ribbon::-webkit-scrollbar{display:none}
.site-link-ribbon a{flex:0 0 auto;text-decoration:none;padding:.72rem 1rem;border-radius:999px;border:1px solid #dbe5f4;background:linear-gradient(180deg,#fff,#f8fbff);color:#475569;font-weight:700;box-shadow:0 10px 24px rgba(37,99,235,.06);transition:transform .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease}
.site-link-ribbon a:hover,.site-link-ribbon a.active{transform:translateY(-1px);color:#0f172a;border-color:#c7d7f3;box-shadow:0 14px 28px rgba(37,99,235,.10)}
.footer-grid-expanded{grid-template-columns:1.4fr .85fr .85fr .95fr}
.hub-hero-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr);gap:1.1rem;padding:clamp(1.2rem,2.5vw,2rem);border-radius:30px;border:1px solid #dbe5f4;background:linear-gradient(135deg,#ffffff,#f4f8ff 52%,#eef6ff);box-shadow:0 26px 64px rgba(37,99,235,.10)}
.hub-hero-card h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.02;margin:.5rem 0 .9rem}
.hub-hero-copy p{max-width:720px}
.hub-feature-stack,.hub-hero-side{display:grid;gap:.9rem;align-content:start}
.hub-mini-card,.hub-feature-card,.hub-grid-card,.weak-review-card,.empty-state-card{border:1px solid #dbe5f4;border-radius:24px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 18px 38px rgba(37,99,235,.08)}
.hub-feature-card{padding:1.1rem}
.hub-feature-card h3,.hub-grid-card h3,.weak-review-card h3{margin:.2rem 0 .4rem}
.hub-feature-list{display:grid;gap:.65rem;margin-top:.6rem}
.hub-feature-list li{display:flex;gap:.65rem;align-items:flex-start;color:#475569;line-height:1.55}
.hub-feature-list li::before{content:"";width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,#4f46e5,#14b8a6);margin-top:.4rem;flex:0 0 auto}
.hub-cta-grid,.weak-review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
.hub-grid-card,.weak-review-card{padding:1.1rem;text-decoration:none;color:inherit;display:grid;gap:.7rem;align-content:start}
.hub-grid-card:hover,.weak-review-card:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(37,99,235,.12)}
.hub-grid-card .button,.hub-grid-card .ghost-button,.weak-review-card .button,.weak-review-card .ghost-button{width:100%;justify-content:center}
.hub-chip-row,.weak-chip-row{display:flex;flex-wrap:wrap;gap:.55rem}
.hub-chip,.weak-count-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:800}
.hub-mini-card{padding:1rem;display:grid;gap:.5rem}
.weak-review-shell .stats{margin-top:1rem}
.weak-review-actions{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.empty-state-card{padding:1.4rem;text-align:left}
.empty-state-card .actions{margin-top:1rem}
@media (max-width: 980px){
  .hub-hero-card{grid-template-columns:1fr}
  .hub-cta-grid,.weak-review-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 920px){
  .top-nav.open{max-height:calc(100svh - 110px);overflow:auto}
}
@media (max-width: 760px){
  .footer-grid-expanded{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .site-links-shell{padding-bottom:.2rem}
  .site-link-ribbon a{padding:.62rem .9rem;font-size:.94rem}
  .hub-hero-card{padding:1rem;border-radius:24px}
  .hub-cta-grid,.weak-review-grid,.weak-review-actions{grid-template-columns:1fr}
  .footer-grid-expanded{grid-template-columns:1fr}
}


.admin-topic-shell {
  display: grid;
  gap: 1.25rem;
}

.admin-topic-create,
.admin-topic-list-panel,
.admin-topic-studio,
.subtle-panel {
  border-radius: 22px;
}

.topic-post-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem .95rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, .12);
  color: #1d4ed8;
  font-weight: 700;
  font-size: .82rem;
}

.topic-row-active {
  background: rgba(37, 99, 235, .06);
}

.topic-editor-grid {
  align-items: start;
}

.topic-post-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  margin: .9rem 0 1rem;
}

.summary-box {
  border: 1px solid var(--border);
  background: var(--panel-soft, rgba(255,255,255,.72));
  border-radius: 18px;
  padding: 1rem;
  display: grid;
  gap: .25rem;
}

.summary-box strong {
  font-size: 1.15rem;
}

.topic-permalink-card {
  display: block;
  padding: .9rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel-soft, rgba(255,255,255,.72));
  text-decoration: none;
  word-break: break-word;
  margin-bottom: .85rem;
}

.topic-question-editor-list {
  display: grid;
  gap: 1rem;
}

.question-editor-card {
  border: 1px solid var(--border);
  background: var(--panel-soft, rgba(255,255,255,.78));
  border-radius: 20px;
  padding: 1rem;
  display: grid;
  gap: .9rem;
}

.question-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.question-meta-grid {
  align-items: end;
}

.option-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.option-editor-card {
  display: grid;
  gap: .55rem;
  padding: .85rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
}

.option-editor-card input[type="text"],
.option-editor-card input:not([type]) {
  width: 100%;
}

.option-editor-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  font-size: .95rem;
}

.option-correct-switch {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--muted);
  font-size: .82rem;
}

.small-button {
  padding: .7rem 1rem;
}

@media (max-width: 900px) {
  .topic-post-summary-grid,
  .option-editor-grid {
    grid-template-columns: 1fr;
  }

  .question-editor-head,
  .option-editor-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* QuizLuck professional launch layer v6.0 */
:root {
  --bg: #f5f7fb;
  --bg-soft: #eef3f8;
  --surface: #ffffff;
  --surface-2: #f3f6fb;
  --text: #101828;
  --muted: #5d697c;
  --line: #d9e1ec;
  --primary: #1769e0;
  --primary-2: #0f8f8c;
  --accent: #f4a62a;
  --shadow: 0 18px 48px rgba(16, 24, 40, .09);
  --shadow-soft: 0 10px 28px rgba(23, 105, 224, .08);
  --radius: 12px;
  --radius-sm: 10px;
}

body {
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 48%, #f8fafc 100%);
}

.shell-header {
  min-height: 72px;
  background: rgba(255, 255, 255, .92);
  border-bottom-color: rgba(16, 24, 40, .08);
}

.brand-mark,
.icon-button,
.top-nav a,
.top-nav button,
.button,
.ghost-button,
.danger-button,
.success-button,
.card,
.panel,
.mode-card,
.stat-card,
.topic-card,
.empty,
input,
select,
textarea,
.search-input {
  border-radius: var(--radius);
}

.app-shell {
  width: min(1240px, 100%);
}

.site-links-shell {
  background: rgba(255, 255, 255, .7);
  border-bottom: 1px solid rgba(16, 24, 40, .06);
}

.site-link-ribbon {
  width: min(1240px, calc(100% - 2rem));
  margin: 0 auto;
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .55rem 0;
}

.site-link-ribbon a {
  white-space: nowrap;
  color: var(--muted);
  font-weight: 800;
  font-size: .88rem;
  padding: .45rem .7rem;
  border-radius: 999px;
}

.site-link-ribbon a:hover {
  color: var(--primary);
  background: var(--surface);
}

.professional-hero,
.page-heading-pro,
.topic-detail-pro {
  display: grid;
  gap: clamp(1rem, 3vw, 1.5rem);
  align-items: stretch;
}

.professional-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
  min-height: auto;
  padding-top: clamp(1.5rem, 5vw, 4rem);
}

.home-hero h1,
.professional-hero h1,
.page-heading-pro h1,
.topic-detail-main h1 {
  max-width: 860px;
  font-size: clamp(2.55rem, 6vw, 5.35rem);
  line-height: .96;
  letter-spacing: 0;
}

.hero-copy-pro,
.page-heading-pro,
.topic-detail-main,
.hero-dashboard {
  min-width: 0;
}

.hero-copy-pro {
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(.4rem, 2vw, 1rem) 0;
}

.search-bar-pro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  width: min(760px, 100%);
  padding: .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.search-bar-pro .search-input {
  border: 0;
  background: transparent;
  min-height: 48px;
  box-shadow: none;
}

.search-bar-pro.compact {
  align-self: end;
  width: min(520px, 100%);
}

.hero-dashboard {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.stat-card {
  min-height: 94px;
  border-radius: 10px;
  background: #fff;
}

.stat-card strong {
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  letter-spacing: 0;
}

.mini-check-list {
  display: grid;
  gap: .55rem;
}

.mini-check-list span {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  font-weight: 800;
}

.mini-check-list span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--primary-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-2) 14%, transparent);
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.trust-strip span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 800;
  font-size: .9rem;
}

.professional-topic-card {
  gap: .9rem;
  border-color: rgba(16, 24, 40, .08);
  box-shadow: 0 14px 32px rgba(16, 24, 40, .08);
}

.professional-topic-card::after {
  background: linear-gradient(135deg, color-mix(in srgb, var(--topic-color) 15%, transparent), transparent);
}

.topic-letter {
  width: 100%;
  min-height: 142px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--topic-color, var(--primary)) 16%, #fff), #fff);
  color: var(--topic-color, var(--primary));
  border: 1px solid color-mix(in srgb, var(--topic-color, var(--primary)) 20%, var(--line));
  font-size: clamp(2.8rem, 8vw, 5rem);
  font-weight: 950;
}

.topic-letter.large {
  min-height: 220px;
  margin-bottom: 1rem;
}

.topic-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}

.topic-action-row.big {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.topic-action-row .button,
.topic-action-row .ghost-button {
  width: 100%;
  min-height: 46px;
  padding-inline: .7rem;
}

.topic-detail-pro {
  grid-template-columns: minmax(0, 1fr) minmax(290px, .38fr);
}

.topic-detail-main,
.topic-detail-side {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.topic-detail-image {
  max-height: 360px;
  border-radius: 10px;
}

.dashboard-grid-pro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .75fr) minmax(250px, .55fr);
  gap: 1rem;
  align-items: start;
}

.weak-row {
  display: grid;
  gap: .2rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}

.weak-row:last-child {
  border-bottom: 0;
}

.weak-row span {
  color: var(--muted);
  font-size: .92rem;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.search-result-card {
  display: grid;
  gap: .55rem;
  color: inherit;
}

.search-result-card:hover,
.professional-topic-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.contact-card-pro {
  display: grid;
  gap: .25rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.contact-card-pro a,
.footer-contact a,
.trust-strip a {
  color: var(--primary);
  font-weight: 900;
}

.admin-overview-pro {
  display: grid;
  gap: 1rem;
}

.launch-checklist,
.settings-pro {
  display: grid;
  gap: 1rem;
}

.toggle-field {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  padding: .75rem .9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.toggle-field input {
  width: auto;
  min-height: auto;
}

.footer-contact {
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
}

@media (max-width: 980px) {
  .professional-hero,
  .topic-detail-pro,
  .dashboard-grid-pro {
    grid-template-columns: 1fr;
  }

  .search-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topic-action-row.big {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .app-shell {
    padding: .85rem;
  }

  .home-hero h1,
  .professional-hero h1,
  .page-heading-pro h1,
  .topic-detail-main h1 {
    font-size: clamp(2.35rem, 12vw, 3.6rem);
  }

  .search-bar-pro,
  .search-bar-pro.compact {
    grid-template-columns: 1fr;
  }

  .search-results-grid,
  .topic-action-row,
  .topic-action-row.big {
    grid-template-columns: 1fr;
  }

  .trust-strip span {
    width: 100%;
  }

  .top-nav.open {
    inset-inline: .75rem;
    border-radius: 12px;
  }
}

/* Admin branding/menu/footer editor */
.branding-admin-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr);
  gap: 1rem;
  align-items: start;
}

.branding-admin-form,
.branding-preview-card {
  display: grid;
  gap: 1rem;
}

.branding-admin-form textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .92rem;
  line-height: 1.5;
}

.brand-preview-lockup {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.brand-preview-lockup .brand-mark {
  box-shadow: none;
}

.brand-preview-lockup .brand-mark img,
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.branding-link-preview {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.branding-link-preview a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: .35rem .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 800;
  font-size: .88rem;
}

.footer-contact {
  white-space: normal;
}

@media (max-width: 980px) {
  .branding-admin-shell {
    grid-template-columns: 1fr;
  }
}

/* Final menu request: desktop uses site-links ribbon in the header, mobile stays unchanged. */
.topic-title-link,
.topic-description-link,
.topic-card-media-link,
.topic-icon-link {
  color: inherit;
  text-decoration: none;
}

.topic-description-link {
  display: block;
}

.topic-title-link:hover,
.topic-description-link:hover {
  color: var(--primary);
}

.topic-icon-link:hover,
.topic-card-media-link:hover {
  transform: translateY(-1px);
}

@media (min-width: 920px) {
  .shell-header {
    display: flex;
    align-items: center;
  }

  .top-nav {
    display: flex !important;
  }

  .nav-toggle {
    display: none !important;
  }
}

/* Final responsive polish: scrollable quick links, footer alignment, and theme state. */
#themeToggle {
  position: relative;
  border-color: color-mix(in srgb, var(--line) 82%, var(--primary));
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

#themeToggle:hover {
  transform: translateY(-1px);
}

#themeToggle[aria-pressed="true"] {
  background: color-mix(in srgb, #facc15 16%, var(--surface));
  border-color: color-mix(in srgb, #facc15 48%, var(--line));
  color: #f59e0b;
}

[data-theme="dark"] .site-link-ribbon a,
[data-theme="dark"] .site-footer {
  background: color-mix(in srgb, var(--surface) 92%, #0f172a);
}

.site-link-ribbon {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.site-link-ribbon a {
  scroll-snap-align: start;
}

.footer-grid.footer-grid-expanded {
  align-items: start;
}

.footer-brand {
  display: grid;
  gap: .55rem;
  align-content: start;
}

.footer-brand p {
  margin: 0;
}

.footer-contact {
  line-height: 1.65;
}

@media (min-width: 920px) {
  .site-links-shell {
    width: 100%;
  }

  .site-link-ribbon {
    width: min(1200px, calc(100% - 2rem));
    max-width: min(1200px, calc(100% - 2rem));
    margin-inline: auto;
    justify-content: center;
    overflow: visible;
    flex-wrap: wrap;
    padding: .3rem 0 .65rem;
  }

  .footer-grid.footer-grid-expanded {
    grid-template-columns: minmax(280px, 1.25fr) repeat(3, minmax(150px, .62fr));
    gap: clamp(1.2rem, 2.5vw, 2rem);
  }

  .footer-bottom {
    align-items: center;
  }
}

@media (min-width: 641px) and (max-width: 919px) {
  .site-links-shell {
    width: 100%;
    padding-left: clamp(1rem, 3vw, 1.5rem);
    padding-right: 0;
    overflow: hidden;
  }

  .site-link-ribbon {
    width: 50vw;
    max-width: 50vw;
    margin-left: 0;
    margin-right: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding: .45rem .35rem .7rem 0;
  }

  .footer-grid.footer-grid-expanded {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .footer-grid.footer-grid-expanded > div:not(.footer-brand) {
    order: 1;
    min-width: 0;
    text-align: center;
  }

  .footer-brand {
    order: 2;
    grid-column: 1 / -1;
    justify-items: center;
    text-align: center;
  }

  .footer-brand img {
    margin-inline: auto;
  }

  .footer-contact {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .site-links-shell {
    width: 100%;
    padding-left: .85rem;
    padding-right: 0;
    overflow: hidden;
  }

  .site-link-ribbon {
    width: 75vw;
    max-width: 75vw;
    margin-left: 0;
    margin-right: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding: .4rem .35rem .65rem 0;
  }

  .site-link-ribbon::-webkit-scrollbar {
    display: block;
    height: 4px;
  }

  .site-link-ribbon::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted) 34%, transparent);
    border-radius: 999px;
  }

  .footer-grid.footer-grid-expanded {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
  }

  .footer-grid.footer-grid-expanded > div:not(.footer-brand) {
    order: 1;
    min-width: 0;
    text-align: center;
  }

  .footer-grid.footer-grid-expanded > div:not(.footer-brand) h3 {
    font-size: .9rem;
    margin-bottom: .45rem;
  }

  .footer-grid.footer-grid-expanded > div:not(.footer-brand) a {
    font-size: .84rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .footer-brand {
    order: 2;
    grid-column: 1 / -1;
    justify-items: center;
    text-align: center;
    margin-top: .25rem;
  }

  .footer-brand img {
    width: min(180px, 82vw);
    margin-inline: auto;
  }

  .footer-contact {
    width: min(100%, 320px);
    text-align: center;
  }

  .backend-pill {
    justify-self: center;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}

/* Final study play polish: smaller toolbar, separate mobile ad, no flash share. */
.student-study-toolbar {
  z-index: 72 !important;
  gap: .47rem !important;
  padding: 6px 8px !important;
  border-radius: 18px !important;
  min-height: auto !important;
}

.student-study-toolbar .mini-switch-row,
.student-study-toolbar .mini-lang-row {
  gap: 6px !important;
  min-height: 31px !important;
  font-size: 11px !important;
}

.student-study-toolbar .mini-switch-row i {
  width: 36px !important;
  height: 21px !important;
}

.student-study-toolbar .mini-switch-row i::after {
  top: 3px !important;
  left: 3px !important;
  width: 15px !important;
  height: 15px !important;
}

.student-study-toolbar .mini-switch-row input:checked + i::after {
  transform: translateX(15px) !important;
}

.student-study-toolbar .mini-lang-row select {
  height: 29px !important;
  min-height: 29px !important;
  min-width: 100px !important;
  padding: 0 28px 0 10px !important;
  font-size: 11px !important;
}

.student-study-toolbar .upgrade-mini {
  min-height: 29px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
}

.flash-actions .share-action-button,
.flash-screen .share-action-button {
  display: none !important;
}

.study-ad-slot {
  z-index: 58 !important;
}

@media (max-width: 720px) {
  .student-study-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    top: calc(env(safe-area-inset-top) + 10px) !important;
    left: calc(env(safe-area-inset-left) + 58px) !important;
    right: calc(env(safe-area-inset-right) + 10px) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 36px !important;
    max-height: 42px !important;
    overflow: hidden !important;
  }

  .student-study-toolbar > .mini-switch-row,
  .student-study-toolbar > .mini-lang-row,
  .student-study-toolbar > .upgrade-mini {
    grid-column: auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .student-study-toolbar > .mini-switch-row {
    flex: 0 0 auto !important;
  }

  .student-study-toolbar > .mini-lang-row {
    flex: 1 1 auto !important;
  }

  .student-study-toolbar > .upgrade-mini {
    flex: 0 0 auto !important;
  }

  .study-ad-slot,
  .study-ad-slot.adsense-live {
    top: calc(env(safe-area-inset-top) + 60px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(300px, calc(100vw - 96px)) !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 58px !important;
    padding: 4px 8px !important;
    gap: 6px !important;
    opacity: .84 !important;
    border-radius: 12px !important;
  }

  .study-ad-slot span {
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
    font-size: .64rem !important;
  }

  .study-ad-slot small {
    font-size: .68rem !important;
  }

  .study-slide {
    padding-top: calc(env(safe-area-inset-top) + 104px) !important;
  }
}

@media (max-width: 430px) {
  .student-study-toolbar {
    max-height: 40px !important;
    left: calc(env(safe-area-inset-left) + 54px) !important;
    gap: 5px !important;
    padding: 5px 6px !important;
  }

  .student-study-toolbar .mini-lang-row select {
    min-width: 78px !important;
    max-width: 96px !important;
  }

  .study-ad-slot,
  .study-ad-slot.adsense-live {
    width: min(250px, calc(100vw - 90px)) !important;
  }
}


/* Final verified dark-mode/menu/scroll stability patch */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07111f;
  --bg-soft: #0c182c;
  --surface: #101c31;
  --surface-2: #17233a;
  --text: #f8fafc;
  --muted: #a8b3c7;
  --line: #25364f;
  --primary: #60a5fa;
  --primary-2: #8b5cf6;
  --accent: #2dd4bf;
  --danger: #f87171;
  --success: #4ade80;
  --warning: #fbbf24;
  --shadow: 0 22px 70px rgba(0, 0, 0, .34);
  --shadow-soft: 0 12px 30px rgba(96, 165, 250, .12);
}

[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 16%, rgba(96, 165, 250, .14), transparent 32rem),
    radial-gradient(circle at 88% 10%, rgba(45, 212, 191, .12), transparent 34rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 52%, var(--bg) 100%);
  color: var(--text);
}

[data-theme="dark"] .shell-header,
[data-theme="dark"] .site-links-shell {
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .top-nav.open {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .top-nav a,
[data-theme="dark"] .top-nav button,
[data-theme="dark"] .site-link-ribbon a,
[data-theme="dark"] .ghost-button,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .mode-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .topic-card,
[data-theme="dark"] .empty,
[data-theme="dark"] .hub-hero-card,
[data-theme="dark"] .hub-mini-card,
[data-theme="dark"] .hub-feature-card,
[data-theme="dark"] .hub-grid-card,
[data-theme="dark"] .weak-review-card,
[data-theme="dark"] .empty-state-card,
[data-theme="dark"] .site-page-card,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .search-input {
  background: color-mix(in srgb, var(--surface) 94%, #020617) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .top-nav a.active,
[data-theme="dark"] .top-nav a:hover,
[data-theme="dark"] .top-nav button:hover,
[data-theme="dark"] .site-link-ribbon a.active,
[data-theme="dark"] .site-link-ribbon a:hover,
[data-theme="dark"] .ghost-button:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .muted,
[data-theme="dark"] .small,
[data-theme="dark"] .hub-feature-list li {
  color: var(--muted) !important;
}

[data-theme="dark"] .site-footer {
  background: color-mix(in srgb, var(--surface) 96%, #020617) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

@media (max-width: 919px) {
  .top-nav.open {
    max-height: calc(100svh - 96px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.study-deck {
  overscroll-behavior-x: contain;
}

/* Final responsive contract: mobile/tablet header through 999px, desktop starts at 1000px. */
.mobile-theme-toggle { display: none !important; }

@media (max-width: 999px) {
  .shell-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: .55rem !important;
    min-height: 72px !important;
    padding: .7rem clamp(.85rem, 3vw, 1.2rem) !important;
  }

  .brand {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .brand-copy {
    min-width: 0 !important;
  }

  .brand-copy strong,
  .brand-copy small {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-theme-toggle,
  .nav-toggle {
    display: inline-grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 auto !important;
  }

  .top-nav:not(.open) {
    display: none !important;
  }

  .top-nav.open {
    position: absolute !important;
    top: calc(100% + .55rem) !important;
    right: clamp(.75rem, 3vw, 1.25rem) !important;
    left: auto !important;
    bottom: auto !important;
    display: grid !important;
    align-content: start !important;
    justify-content: stretch !important;
    gap: .45rem !important;
    max-height: calc(100svh - 92px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: .85rem !important;
    border-radius: 24px !important;
    border: 1px solid var(--line) !important;
    background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .20) !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
    z-index: 80 !important;
  }

  .top-nav.open a,
  .top-nav.open button {
    width: 100% !important;
    justify-content: flex-start !important;
    min-height: 44px !important;
    padding: .78rem .9rem !important;
    border-radius: 16px !important;
  }

  .top-nav #themeToggle {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .top-nav.open {
    width: 75vw !important;
    max-width: 75vw !important;
  }
}

@media (min-width: 641px) and (max-width: 999px) {
  .top-nav.open {
    width: 50vw !important;
    max-width: 50vw !important;
  }
}

@media (min-width: 1000px) {
  .shell-header {
    display: flex !important;
    align-items: center !important;
  }

  .mobile-theme-toggle,
  .nav-toggle {
    display: none !important;
  }

  .top-nav {
    display: flex !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .top-nav #themeToggle {
    display: inline-grid !important;
  }
}


/* QuizLuck final request v9: remove quick-ribbon system + safe study panel spacing. */
.site-links-shell,
.site-link-ribbon {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Learn/quiz top controls must never fight the card/post area. */
.quiz-screen .study-slide,
.learn-screen .study-slide {
  padding-top: calc(env(safe-area-inset-top) + 104px) !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 18px) !important;
}

.quiz-screen .study-card.kahoot-card,
.learn-screen .study-card.kahoot-card {
  height: min(760px, calc(100dvh - 132px)) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

.quiz-screen .study-content.kahoot-content,
.learn-screen .study-content.kahoot-content {
  grid-template-rows: minmax(56px, 24%) auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding: 0 4px clamp(16px, 2dvh, 24px) !important;
  scrollbar-width: thin;
}

.quiz-screen .study-content.kahoot-content::-webkit-scrollbar,
.learn-screen .study-content.kahoot-content::-webkit-scrollbar {
  width: 6px;
}
.quiz-screen .study-content.kahoot-content::-webkit-scrollbar-thumb,
.learn-screen .study-content.kahoot-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.32);
  border-radius: 999px;
}

.quiz-screen .study-explanation-panel,
.learn-screen .study-explanation-panel {
  position: relative !important;
  z-index: 1 !important;
  grid-column: 1 / -1 !important;
  width: min(100%, 920px) !important;
  max-height: clamp(132px, 24dvh, 240px) !important;
  overflow-y: auto !important;
  margin: clamp(12px, 1.6dvh, 18px) auto clamp(18px, 2.4dvh, 28px) !important;
  transform: none !important;
}

.quiz-screen .study-bottom-actions.clean-actions,
.learn-screen .study-bottom-actions.clean-actions,
.quiz-screen .study-bottom-actions.auto-note,
.learn-screen .study-bottom-actions.auto-note,
.quiz-screen .wrong-popup.compact-review,
.learn-screen .wrong-popup.compact-review {
  flex-shrink: 0 !important;
  margin-top: clamp(10px, 1.5dvh, 16px) !important;
  padding-top: 0 !important;
  z-index: 20 !important;
}

.quiz-screen .wrong-popup.compact-review,
.learn-screen .wrong-popup.compact-review {
  max-height: none !important;
}

/* Top study toolbar and ad: professional separated lanes. */
.quiz-screen .student-study-toolbar,
.learn-screen .student-study-toolbar,
.flash-screen .student-study-toolbar {
  z-index: 86 !important;
}
.quiz-screen .study-ad-slot,
.learn-screen .study-ad-slot,
.flash-screen .study-ad-slot {
  z-index: 84 !important;
}

@media (min-width: 1000px) {
  .quiz-screen .student-study-toolbar,
  .learn-screen .student-study-toolbar,
  .flash-screen .student-study-toolbar {
    left: calc(env(safe-area-inset-left) + 92px) !important;
    right: auto !important;
    max-width: min(520px, calc(100vw - 620px)) !important;
  }
  .quiz-screen .study-ad-slot,
  .learn-screen .study-ad-slot,
  .flash-screen .study-ad-slot {
    top: calc(env(safe-area-inset-top) + 14px) !important;
    right: calc(env(safe-area-inset-right) + 24px) !important;
    left: auto !important;
  }
}

@media (min-width: 721px) and (max-width: 999px) {
  .quiz-screen .student-study-toolbar,
  .learn-screen .student-study-toolbar,
  .flash-screen .student-study-toolbar {
    top: calc(env(safe-area-inset-top) + 12px) !important;
    left: calc(env(safe-area-inset-left) + 68px) !important;
    right: auto !important;
    max-width: calc(100vw - 360px) !important;
  }
  .quiz-screen .study-ad-slot,
  .learn-screen .study-ad-slot,
  .flash-screen .study-ad-slot {
    top: calc(env(safe-area-inset-top) + 14px) !important;
    right: calc(env(safe-area-inset-right) + 12px) !important;
    width: min(250px, 34vw) !important;
  }
  .quiz-screen .study-slide,
  .learn-screen .study-slide {
    padding-top: calc(env(safe-area-inset-top) + 112px) !important;
  }
  .quiz-screen .study-card.kahoot-card,
  .learn-screen .study-card.kahoot-card {
    height: calc(100dvh - 130px) !important;
  }
}

@media (max-width: 720px) {
  .quiz-screen .student-study-toolbar,
  .learn-screen .student-study-toolbar,
  .flash-screen .student-study-toolbar {
    top: calc(env(safe-area-inset-top) + 10px) !important;
    left: calc(env(safe-area-inset-left) + 62px) !important;
    right: calc(env(safe-area-inset-right) + 10px) !important;
    width: auto !important;
    max-width: none !important;
  }
  .quiz-screen .study-ad-slot,
  .learn-screen .study-ad-slot,
  .flash-screen .study-ad-slot {
    top: calc(env(safe-area-inset-top) + 72px) !important;
    right: calc(env(safe-area-inset-right) + 10px) !important;
    left: auto !important;
    width: min(190px, 44vw) !important;
    height: 38px !important;
    opacity: .82;
  }
  .quiz-screen .study-session-pill,
  .learn-screen .study-session-pill {
    top: calc(env(safe-area-inset-top) + 72px) !important;
    left: calc(env(safe-area-inset-left) + 10px) !important;
    right: auto !important;
    transform: none !important;
    max-width: calc(56vw - 18px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .quiz-screen .study-slide,
  .learn-screen .study-slide {
    padding-top: calc(env(safe-area-inset-top) + 126px) !important;
  }
  .quiz-screen .study-card.kahoot-card,
  .learn-screen .study-card.kahoot-card {
    height: calc(100dvh - 140px) !important;
    border-radius: 20px !important;
  }
  .quiz-screen .study-content.kahoot-content,
  .learn-screen .study-content.kahoot-content {
    grid-template-rows: minmax(44px, 18%) auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding-bottom: 18px !important;
  }
  .quiz-screen .study-explanation-panel,
  .learn-screen .study-explanation-panel {
    max-height: 22dvh !important;
    margin-bottom: 22px !important;
  }
  .quiz-screen .study-bottom-actions.clean-actions,
  .learn-screen .study-bottom-actions.clean-actions,
  .quiz-screen .study-bottom-actions.auto-note,
  .learn-screen .study-bottom-actions.auto-note,
  .quiz-screen .wrong-popup.compact-review,
  .learn-screen .wrong-popup.compact-review {
    margin-top: 12px !important;
  }
}

@media (max-width: 430px) {
  .quiz-screen .study-explanation-panel,
  .learn-screen .study-explanation-panel {
    max-height: 20dvh !important;
    padding: 11px 12px !important;
  }
  .quiz-screen .study-option.kahoot-option,
  .learn-screen .study-option.kahoot-option {
    min-height: 50px !important;
  }
}

/* QuizLuck final request v10: explanation must cover the full question/options area only.
   It is locked inside .study-content, so it cannot overlap/touch the bottom action bar. */
.quiz-screen .study-content.kahoot-content,
.learn-screen .study-content.kahoot-content {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.quiz-screen .study-content.kahoot-content > .study-explanation-panel,
.learn-screen .study-content.kahoot-content > .study-explanation-panel {
  position: absolute !important;
  inset: 0 !important;
  z-index: 48 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  border-radius: clamp(18px, 2.8vw, 28px) !important;
  padding: clamp(46px, 7dvh, 76px) clamp(18px, 4vw, 48px) clamp(22px, 4dvh, 42px) !important;
  box-sizing: border-box !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-content: start !important;
}

.quiz-screen .study-bottom-actions.clean-actions,
.learn-screen .study-bottom-actions.clean-actions,
.quiz-screen .study-bottom-actions.auto-note,
.learn-screen .study-bottom-actions.auto-note {
  position: relative !important;
  z-index: 70 !important;
  margin-top: clamp(12px, 1.8dvh, 20px) !important;
}

@media (max-width: 720px) {
  .quiz-screen .study-content.kahoot-content > .study-explanation-panel,
  .learn-screen .study-content.kahoot-content > .study-explanation-panel {
    max-height: none !important;
    padding: clamp(38px, 6dvh, 58px) clamp(14px, 4vw, 22px) clamp(18px, 3dvh, 30px) !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 430px) {
  .quiz-screen .study-content.kahoot-content > .study-explanation-panel,
  .learn-screen .study-content.kahoot-content > .study-explanation-panel {
    max-height: none !important;
    padding: clamp(34px, 5.6dvh, 48px) 13px 18px !important;
  }
}


/* Final logo-only branding patch: same image logo in header and footer on mobile, tablet, and desktop. */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  text-decoration: none !important;
  min-width: 0 !important;
}
.brand-logo-img {
  display: block !important;
  width: clamp(138px, 15vw, 190px) !important;
  height: auto !important;
  max-height: 54px !important;
  object-fit: contain !important;
}
.brand .brand-mark {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.brand .brand-mark img {
  display: block !important;
  width: clamp(138px, 15vw, 190px) !important;
  height: auto !important;
  max-height: 54px !important;
  object-fit: contain !important;
}
.brand .brand-mark svg,
.brand-copy,
.brand .brand-copy {
  display: none !important;
}
.footer-brand > img {
  display: block !important;
  width: min(270px, 100%) !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 0 .8rem !important;
}
.logo-only-preview {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.logo-only-preview .brand-logo-img {
  width: min(260px, 100%) !important;
  max-height: 76px !important;
}
@media (max-width: 999px) {
  .brand-logo-img,
  .brand .brand-mark img {
    width: clamp(126px, 38vw, 168px) !important;
    max-height: 46px !important;
  }
}
@media (max-width: 380px) {
  .brand-logo-img,
  .brand .brand-mark img {
    width: 118px !important;
    max-height: 42px !important;
  }
}


/* Final request v12: complete dark-mode capability, dark-mode logo, and result pill anchored to explanation panel. */
:root {
  --ql-overlay: rgba(255,255,255,.92);
  --ql-overlay-strong: rgba(255,255,255,.98);
  --ql-soft-text: #334155;
}
[data-theme="dark"] {
  --ql-overlay: rgba(15, 27, 46, .94);
  --ql-overlay-strong: rgba(16, 28, 49, .98);
  --ql-soft-text: #cbd5e1;
}
[data-theme="dark"] .brand-logo-img,
[data-theme="dark"] .brand .brand-mark img,
[data-theme="dark"] .footer-brand > img,
[data-theme="dark"] .logo-only-preview img {
  content: url("/assets/quizluck-logo-dark.png") !important;
}
[data-theme="dark"] .app-shell,
[data-theme="dark"] .section,
[data-theme="dark"] .admin-shell,
[data-theme="dark"] .admin-body,
[data-theme="dark"] .branding-admin-shell,
[data-theme="dark"] .dashboard-grid,
[data-theme="dark"] .topic-grid,
[data-theme="dark"] .topic-mode-grid,
[data-theme="dark"] .page-shell,
[data-theme="dark"] .study-hub,
[data-theme="dark"] .search-page,
[data-theme="dark"] .enroll-page,
[data-theme="dark"] .upgrade-page {
  color: var(--text) !important;
}
[data-theme="dark"] .hero,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .mode-card,
[data-theme="dark"] .topic-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .question-editor-card,
[data-theme="dark"] .branding-preview-card,
[data-theme="dark"] .branding-admin-form,
[data-theme="dark"] .page-editor-shell,
[data-theme="dark"] .site-page-card,
[data-theme="dark"] .empty-state-card,
[data-theme="dark"] .hub-hero-card,
[data-theme="dark"] .hub-mini-card,
[data-theme="dark"] .hub-feature-card,
[data-theme="dark"] .hub-grid-card,
[data-theme="dark"] .weak-review-card,
[data-theme="dark"] .quiz-summary-card,
[data-theme="dark"] .finish-card,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .auth-card {
  background: color-mix(in srgb, var(--surface) 94%, #020617) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.34) !important;
}
[data-theme="dark"] .hero p,
[data-theme="dark"] .card p,
[data-theme="dark"] .panel p,
[data-theme="dark"] .site-page-card p,
[data-theme="dark"] .site-page-card li,
[data-theme="dark"] .footer-brand p,
[data-theme="dark"] .footer-contact,
[data-theme="dark"] .admin-body p,
[data-theme="dark"] .topic-card .small,
[data-theme="dark"] .topic-card .muted,
[data-theme="dark"] .muted,
[data-theme="dark"] .small,
[data-theme="dark"] .eyebrow + p {
  color: var(--muted) !important;
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] strong,
[data-theme="dark"] label,
[data-theme="dark"] th,
[data-theme="dark"] td,
[data-theme="dark"] .brand,
[data-theme="dark"] .section-head,
[data-theme="dark"] .topic-card h3,
[data-theme="dark"] .site-page-card h1,
[data-theme="dark"] .site-page-card h2 {
  color: var(--text) !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .search-input,
[data-theme="dark"] .admin-nav button,
[data-theme="dark"] .option-editor,
[data-theme="dark"] .field-preview,
[data-theme="dark"] .topic-meta-row,
[data-theme="dark"] .topic-view-pill,
[data-theme="dark"] .backend-pill,
[data-theme="dark"] .mini-lang-row,
[data-theme="dark"] .mini-switch-row {
  background: color-mix(in srgb, var(--surface-2) 86%, #020617) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent) !important;
}
[data-theme="dark"] table,
[data-theme="dark"] thead,
[data-theme="dark"] tbody,
[data-theme="dark"] tr {
  color: var(--text) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] a:not(.button):not(.ghost-button):not(.danger-button):not(.success-button) {
  color: inherit;
}
[data-theme="dark"] .ghost-button,
[data-theme="dark"] .icon-button,
[data-theme="dark"] .nav-toggle,
[data-theme="dark"] .mobile-theme-toggle,
[data-theme="dark"] #themeToggle,
[data-theme="dark"] .share-button,
[data-theme="dark"] .report-button {
  background: color-mix(in srgb, var(--surface-2) 90%, #020617) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .top-nav.open,
[data-theme="dark"] .shell-header,
[data-theme="dark"] .site-footer {
  background: color-mix(in srgb, var(--surface) 90%, #020617) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .study-screen {
  background:
    radial-gradient(circle at 18% 18%, rgba(96,165,250,.16), transparent 34rem),
    radial-gradient(circle at 82% 2%, rgba(45,212,191,.14), transparent 36rem),
    linear-gradient(135deg, #07111f 0%, #111827 48%, #2e1065 100%) !important;
  color: #f8fafc !important;
}
[data-theme="dark"] .study-card.kahoot-card,
[data-theme="dark"] .flash-premium-card {
  background: linear-gradient(145deg, rgba(15,23,42,.74), rgba(30,41,59,.46)) !important;
  border-color: rgba(148,163,184,.26) !important;
  color: #f8fafc !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
[data-theme="dark"] .study-card-head,
[data-theme="dark"] .study-count,
[data-theme="dark"] .mini-brand,
[data-theme="dark"] .study-session-pill,
[data-theme="dark"] .study-ad-slot,
[data-theme="dark"] .student-study-toolbar {
  color: #f8fafc !important;
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(15,23,42,.58) !important;
}
[data-theme="dark"] .study-question,
[data-theme="dark"] .study-content.kahoot-content > h1,
[data-theme="dark"] .flash-game-card {
  background: rgba(15, 23, 42, .72) !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.24) !important;
}
[data-theme="dark"] .english-main,
[data-theme="dark"] .dual-study-text,
[data-theme="dark"] .dual-option-text,
[data-theme="dark"] .flash-game-card h1,
[data-theme="dark"] .study-question .english-main {
  color: inherit !important;
}
[data-theme="dark"] .translated-line,
[data-theme="dark"] .translated-explanation {
  color: #bfdbfe !important;
}
[data-theme="dark"] .study-explanation-panel,
[data-theme="dark"] .flash-study-explanation {
  background: linear-gradient(180deg, rgba(15,23,42,.97), rgba(30,41,59,.94)) !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.32) !important;
  box-shadow: 0 26px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .study-explanation-panel p,
[data-theme="dark"] .study-explanation-panel .correct-line,
[data-theme="dark"] .study-explanation-panel .correct-line b,
[data-theme="dark"] .flash-study-explanation p {
  color: #e5edf8 !important;
}
[data-theme="dark"] .study-explanation-panel strong,
[data-theme="dark"] .flash-study-explanation strong {
  color: #f8fafc !important;
}
.study-explanation-panel.has-result {
  position: relative !important;
  padding-top: clamp(72px, 9dvh, 104px) !important;
}
.study-explanation-panel .explanation-result-ribbon {
  position: absolute !important;
  top: clamp(12px, 2.2dvh, 24px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
  min-width: clamp(126px, 20vw, 176px) !important;
  min-height: clamp(42px, 6dvh, 58px) !important;
  padding: 8px 20px 8px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: clamp(1.02rem, 2.4vw, 1.55rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
}
.study-explanation-panel .explanation-result-ribbon span {
  width: clamp(28px, 4.4dvh, 36px) !important;
  height: clamp(28px, 4.4dvh, 36px) !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255,255,255,.42) !important;
  line-height: 1 !important;
  font-size: 1.16em !important;
}
.study-explanation-panel .explanation-result-ribbon.good { background: rgba(34,197,94,.96) !important; }
.study-explanation-panel .explanation-result-ribbon.bad { background: rgba(244,63,94,.96) !important; }
.quiz-screen .study-content.kahoot-content > .study-explanation-panel.has-result,
.learn-screen .study-content.kahoot-content > .study-explanation-panel.has-result {
  padding-top: clamp(74px, 9dvh, 108px) !important;
}
@media (max-width: 720px) {
  .study-explanation-panel.has-result,
  .quiz-screen .study-content.kahoot-content > .study-explanation-panel.has-result,
  .learn-screen .study-content.kahoot-content > .study-explanation-panel.has-result {
    padding-top: clamp(58px, 8dvh, 78px) !important;
  }
  .study-explanation-panel .explanation-result-ribbon {
    top: 10px !important;
    min-width: 116px !important;
    min-height: 38px !important;
    padding: 6px 15px 6px 8px !important;
    font-size: .98rem !important;
  }
  .study-explanation-panel .explanation-result-ribbon span {
    width: 26px !important;
    height: 26px !important;
  }
}


/* --------------------------------------------------------------------------
   QuizLuck premium-unlocked mode
   When subscriptions are OFF, every user is displayed as Premium/unlocked.
   -------------------------------------------------------------------------- */
.premium-access-card,
.subscription-unlocked-card,
.account-premium-strip {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34, 197, 94, .36) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 197, 94, .18), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(59, 130, 246, .16), transparent 36%),
    var(--card, #ffffff) !important;
  box-shadow: 0 22px 70px rgba(21, 128, 61, .12) !important;
}
.premium-access-card::before,
.subscription-unlocked-card::before,
.account-premium-strip::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #22c55e, #06b6d4, #8b5cf6);
}
.premium-status-pill,
.premium-unlocked-pill,
.admin-effective-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, .35);
  background: linear-gradient(135deg, rgba(34, 197, 94, .15), rgba(59, 130, 246, .13));
  color: #065f46;
  font-weight: 1000;
  letter-spacing: -.01em;
  box-shadow: 0 10px 24px rgba(21, 128, 61, .10);
  white-space: nowrap;
}
.premium-status-pill::before,
.premium-unlocked-pill::before,
.admin-effective-premium::before {
  content: "★";
  font-size: .9em;
}
.premium-unlocked-note {
  margin-top: .6rem;
  color: var(--muted, #64748b);
  font-weight: 800;
}
.student-study-toolbar .premium-unlocked-pill {
  min-height: 36px;
  padding-inline: 12px;
  font-size: .86rem;
}
.top-nav a.premium-nav-link,
.site-footer a.premium-nav-link {
  background: linear-gradient(135deg, rgba(34, 197, 94, .16), rgba(59, 130, 246, .13));
  color: #065f46 !important;
  border: 1px solid rgba(34, 197, 94, .28);
}
.user-premium-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-user-plan-cell {
  min-width: 180px;
}
.admin-user-plan-cell .raw-plan {
  display: block;
  margin-top: .4rem;
  color: var(--muted, #64748b);
  font-size: .86rem;
  font-weight: 800;
}
.pricing-card.premium-free-mode {
  border-color: rgba(34, 197, 94, .45) !important;
  background: linear-gradient(145deg, rgba(34, 197, 94, .12), rgba(255,255,255,.95)) !important;
}
[data-theme="dark"] .premium-access-card,
[data-theme="dark"] .subscription-unlocked-card,
[data-theme="dark"] .account-premium-strip,
html.dark .premium-access-card,
html.dark .subscription-unlocked-card,
html.dark .account-premium-strip,
body.dark .premium-access-card,
body.dark .subscription-unlocked-card,
body.dark .account-premium-strip {
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 197, 94, .18), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(96, 165, 250, .16), transparent 36%),
    #0f1b2e !important;
  border-color: rgba(74, 222, 128, .34) !important;
}
[data-theme="dark"] .premium-status-pill,
[data-theme="dark"] .premium-unlocked-pill,
[data-theme="dark"] .admin-effective-premium,
html.dark .premium-status-pill,
html.dark .premium-unlocked-pill,
html.dark .admin-effective-premium,
body.dark .premium-status-pill,
body.dark .premium-unlocked-pill,
body.dark .admin-effective-premium {
  background: linear-gradient(135deg, rgba(34, 197, 94, .18), rgba(96, 165, 250, .15));
  color: #bbf7d0;
  border-color: rgba(74, 222, 128, .34);
}
[data-theme="dark"] .top-nav a.premium-nav-link,
[data-theme="dark"] .site-footer a.premium-nav-link,
html.dark .top-nav a.premium-nav-link,
html.dark .site-footer a.premium-nav-link,
body.dark .top-nav a.premium-nav-link,
body.dark .site-footer a.premium-nav-link {
  color: #bbf7d0 !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, .18), rgba(96, 165, 250, .14));
}


/* QuizLuck final security/account menu/premium gold polish */
.quizluck-captcha-shell {
  display: grid;
  gap: .45rem;
  margin: .75rem 0 1rem;
  padding: .65rem;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  overflow: hidden;
}
.quizluck-captcha-shell .g-recaptcha { transform-origin: left top; max-width: 100%; }
.captcha-note { margin: 0 !important; }
.security-settings-card {
  display: grid;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #fff), color-mix(in srgb, var(--surface-2) 88%, #dbeafe));
  margin: 1rem 0;
}
.user-menu-shell { position: relative; display: inline-flex; align-items: center; }
.user-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 42px;
  border-radius: 999px;
  padding: .42rem .75rem .42rem .42rem;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  font-weight: 1000;
  cursor: pointer;
}
.user-menu-button.is-premium {
  color: #713f12;
  border-color: rgba(245, 158, 11, .55);
  background: linear-gradient(135deg, #fff7ed, #fef3c7 52%, #fde68a);
  box-shadow: 0 14px 34px rgba(245, 158, 11, .18);
}
.user-mini-avatar {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #0f766e);
  color: #fff;
  font-weight: 1000;
}
.user-menu-button.is-premium .user-mini-avatar { background: linear-gradient(135deg, #f59e0b, #b45309); }
.user-account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: min(92vw, 390px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .24);
  overflow: hidden;
  z-index: 130;
  color: var(--text);
}
.account-menu-top {
  display: grid;
  justify-items: center;
  gap: .45rem;
  padding: 1.45rem 1.15rem 1.15rem;
  text-align: center;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}
.account-menu-top.premium {
  background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .65), transparent 30%), linear-gradient(135deg, #fbbf24, #f59e0b 48%, #92400e);
  color: #111827;
}
.account-menu-top.free { background: linear-gradient(135deg, #f8fafc, #eef2ff); }
.account-big-avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 2.45rem;
  font-weight: 1000;
  border: 7px solid rgba(255,255,255,.92);
  background: linear-gradient(135deg, #14b8a6, #0f766e);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
}
.account-menu-top.premium .account-big-avatar { background: linear-gradient(135deg, #f59e0b, #78350f); }
.account-menu-top strong { font-size: 1.35rem; letter-spacing: -.04em; }
.account-menu-top > span { color: color-mix(in srgb, currentColor 78%, transparent); font-weight: 800; }
.gold-premium-banner,
.upgrade-banner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 38px;
  padding: .5rem .8rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 1000;
  margin-top: .25rem;
}
.gold-premium-banner {
  background: rgba(255, 255, 255, .75);
  color: #78350f;
  border: 1px solid rgba(120, 53, 15, .18);
}
.upgrade-banner { background: #1769e0; color: #fff; }
.account-menu-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin-top:.35rem; }
.account-menu-list { display:grid; padding:.65rem 0; }
.account-menu-list a,
.account-signout {
  display:flex;
  align-items:center;
  min-height: 50px;
  padding: .75rem 1.25rem;
  color: var(--text);
  text-decoration:none;
  font-size: 1rem;
  font-weight: 850;
  background: transparent;
  border:0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  text-align:left;
}
.account-menu-list a:hover { background: var(--surface-2); }
.account-menu-list .gold-menu-item { color:#92400e; background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(251,191,36,.10)); }
.account-menu-list .upgrade-menu-item { color: var(--primary); }
.account-signout { width:100%; color:#be123c; cursor:pointer; font-size: 1.05rem; }
.gold-premium-nav,
.top-nav a.gold-premium-nav,
.site-footer a.gold-premium-nav,
.premium-status-pill,
.premium-unlocked-pill,
.admin-effective-premium {
  background: linear-gradient(135deg, #fff7ed, #fde68a 50%, #f59e0b) !important;
  color: #78350f !important;
  border-color: rgba(245, 158, 11, .55) !important;
  box-shadow: 0 14px 34px rgba(245, 158, 11, .16) !important;
}
.premium-status-pill::before,
.premium-unlocked-pill::before,
.admin-effective-premium::before { content: "🏆" !important; }
.upgrade-needed-nav { background: linear-gradient(135deg, #1769e0, #7c3aed) !important; color: #fff !important; }
.student-study-toolbar.premium-toolbar,
.subscriptions-disabled-premium .student-study-toolbar {
  background: linear-gradient(135deg, rgba(255, 247, 237, .92), rgba(253, 230, 138, .82)) !important;
  border-color: rgba(245, 158, 11, .45) !important;
}
@media (max-width: 999px) {
  .top-nav.open .user-menu-shell { width: 100%; display: grid; }
  .top-nav.open .user-menu-button { width: 100%; justify-content: flex-start; border-radius: 16px; }
  .top-nav.open .user-account-menu {
    position: static;
    width: 100%;
    margin-top: .45rem;
    box-shadow: none;
    border-radius: 20px;
  }
  .account-big-avatar { width: 86px; height: 86px; font-size: 2rem; }
  .quizluck-captcha-shell .g-recaptcha { transform: scale(.92); transform-origin: left top; }
}
[data-theme="dark"] .security-settings-card,
html.dark .security-settings-card,
body.dark .security-settings-card {
  background: linear-gradient(135deg, #111827, #0f172a) !important;
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line)) !important;
}
[data-theme="dark"] .user-account-menu,
html.dark .user-account-menu,
body.dark .user-account-menu { background: #0f172a; border-color: rgba(148, 163, 184, .22); color: #e5e7eb; }
[data-theme="dark"] .account-menu-top.free,
html.dark .account-menu-top.free,
body.dark .account-menu-top.free { background: linear-gradient(135deg, #111827, #172033); }
[data-theme="dark"] .account-menu-list a,
[data-theme="dark"] .account-signout,
html.dark .account-menu-list a,
html.dark .account-signout,
body.dark .account-menu-list a,
body.dark .account-signout { color: #e5e7eb; border-color: rgba(148, 163, 184, .16); }
[data-theme="dark"] .gold-premium-nav,
[data-theme="dark"] .premium-status-pill,
[data-theme="dark"] .premium-unlocked-pill,
[data-theme="dark"] .admin-effective-premium,
html.dark .gold-premium-nav,
html.dark .premium-status-pill,
html.dark .premium-unlocked-pill,
html.dark .admin-effective-premium,
body.dark .gold-premium-nav,
body.dark .premium-status-pill,
body.dark .premium-unlocked-pill,
body.dark .admin-effective-premium {
  background: linear-gradient(135deg, #78350f, #b45309 50%, #f59e0b) !important;
  color: #fff7ed !important;
}
[data-theme="dark"] .student-study-toolbar.premium-toolbar,
[data-theme="dark"].subscriptions-disabled-premium .student-study-toolbar,
html.dark .student-study-toolbar.premium-toolbar,
body.dark .student-study-toolbar.premium-toolbar {
  background: linear-gradient(135deg, rgba(120, 53, 15, .52), rgba(180, 83, 9, .35)) !important;
  border-color: rgba(251, 191, 36, .38) !important;
}

/* Gold premium play toolbar for all premium users */
.student-study-toolbar.pro-access,
.student-study-toolbar.gold-premium-study-toolbar {
  background: linear-gradient(135deg, rgba(255, 247, 237, .96), rgba(253, 230, 138, .88)) !important;
  border-color: rgba(245, 158, 11, .48) !important;
  box-shadow: 0 18px 42px rgba(245, 158, 11, .12) !important;
}
.gold-study-premium-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 34px;
  padding: .35rem .78rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #92400e);
  color: #fff7ed;
  font-weight: 1000;
  white-space: nowrap;
  box-shadow: 0 12px 26px rgba(146, 64, 14, .18);
}
[data-theme="dark"] .student-study-toolbar.pro-access,
[data-theme="dark"] .student-study-toolbar.gold-premium-study-toolbar,
html.dark .student-study-toolbar.pro-access,
html.dark .student-study-toolbar.gold-premium-study-toolbar,
body.dark .student-study-toolbar.pro-access,
body.dark .student-study-toolbar.gold-premium-study-toolbar {
  background: linear-gradient(135deg, rgba(120, 53, 15, .58), rgba(180, 83, 9, .34)) !important;
  border-color: rgba(251, 191, 36, .40) !important;
}


/* --------------------------------------------------------------------------
   Final universal home-style header/footer patch
   Same polished home-page header on dashboard, quiz, learn, admin, and public pages.
   -------------------------------------------------------------------------- */
:root{
  --h-bg:#f6f8ff;
  --h-card:#ffffff;
  --h-card-soft:#f8fbff;
  --h-text:#0f172a;
  --h-muted:#526179;
  --h-border:#dde7f6;
  --h-primary:#2563eb;
  --h-accent:#7c3aed;
  --h-shadow:0 22px 70px rgba(15,23,42,.10);
}
[data-theme="dark"], html.dark, body.dark{
  --h-bg:#07111f;
  --h-card:#0f1b2e;
  --h-card-soft:#13243c;
  --h-text:#eaf2ff;
  --h-muted:#a9b8cf;
  --h-border:#29405f;
  --h-primary:#60a5fa;
  --h-accent:#a78bfa;
  --h-shadow:0 24px 90px rgba(0,0,0,.42);
}
body:not(.study-active){
  background:
    radial-gradient(circle at 12% -10%,rgba(124,58,237,.22),transparent 35%),
    radial-gradient(circle at 88% 8%,rgba(37,99,235,.18),transparent 32%),
    var(--h-bg) !important;
}
.shell-header.universal-header,
.shell-header.hybrid-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  width: min(1180px, calc(100% - 28px)) !important;
  min-height: auto !important;
  margin: 12px auto 0 !important;
  padding: 12px 14px !important;
  border: 1px solid var(--h-border) !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--h-card) 88%, transparent) !important;
  box-shadow: var(--h-shadow) !important;
  backdrop-filter: blur(18px) !important;
}
.shell-header.universal-header .brand,
.shell-header.hybrid-header .brand,
.shell-header.universal-header .hybrid-brand,
.shell-header.hybrid-header .hybrid-brand{
  display: inline-flex !important;
  align-items: center !important;
  color: var(--h-text) !important;
  text-decoration: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}
.shell-header.universal-header .brand-logo-img,
.shell-header.hybrid-header .brand-logo-img{
  width: clamp(142px,16vw,190px) !important;
  height: auto !important;
  max-height: 54px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  display: block !important;
}
.universal-mobile-controls,
.shell-header.hybrid-header .hybrid-mobile-controls{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}
.shell-header.hybrid-header .hybrid-theme-toggle,
.shell-header.hybrid-header .hybrid-nav-toggle,
.shell-header.universal-header .hybrid-theme-toggle,
.shell-header.universal-header .hybrid-nav-toggle{
  border: 1px solid var(--h-border) !important;
  background: var(--h-card-soft) !important;
  color: var(--h-text) !important;
  border-radius: 16px !important;
  min-width: 46px !important;
  width: 46px !important;
  height: 46px !important;
  font-weight: 1000 !important;
  font-size: 1.05rem !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
  cursor: pointer !important;
  padding: 0 !important;
}
.shell-header.hybrid-header .top-nav.hybrid-nav,
.shell-header.universal-header .top-nav.universal-nav{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 0 !important;
}
.shell-header.hybrid-header .top-nav.hybrid-nav a,
.shell-header.hybrid-header .top-nav.hybrid-nav button,
.shell-header.universal-header .top-nav.universal-nav a,
.shell-header.universal-header .top-nav.universal-nav button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  color: var(--h-muted) !important;
  text-decoration: none !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.shell-header.hybrid-header .top-nav.hybrid-nav a:hover,
.shell-header.hybrid-header .top-nav.hybrid-nav a.active,
.shell-header.universal-header .top-nav.universal-nav a:hover,
.shell-header.universal-header .top-nav.universal-nav a.active{
  background: linear-gradient(135deg,var(--h-primary),var(--h-accent)) !important;
  color: #fff !important;
}
.shell-header.hybrid-header .top-nav #themeToggle,
.shell-header.universal-header .top-nav #themeToggle{
  display: none !important;
}
.shell-header.hybrid-header .user-menu-shell,
.shell-header.universal-header .user-menu-shell{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}
.shell-header.hybrid-header .user-menu-button,
.shell-header.universal-header .user-menu-button{
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  background: var(--h-card-soft) !important;
  border: 1px solid var(--h-border) !important;
  color: var(--h-text) !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}
.shell-header.hybrid-header .user-menu-button.is-premium,
.shell-header.universal-header .user-menu-button.is-premium,
.shell-header.hybrid-header .top-nav a.gold-premium-nav,
.shell-header.universal-header .top-nav a.gold-premium-nav{
  background: linear-gradient(135deg,#fff7ed,#fde68a 50%,#f59e0b) !important;
  color: #78350f !important;
  border: 1px solid rgba(245,158,11,.55) !important;
}
.shell-header.hybrid-header .top-nav a.upgrade-needed-nav,
.shell-header.universal-header .top-nav a.upgrade-needed-nav{
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
  color: #fff !important;
}
.site-footer{
  width: min(1180px, calc(100% - 28px)) !important;
  margin: 20px auto !important;
  padding: 28px !important;
  border: 1px solid var(--h-border) !important;
  border-radius: 28px !important;
  background: var(--h-card) !important;
  box-shadow: var(--h-shadow) !important;
  color: var(--h-text) !important;
}
.site-footer a,
.site-footer p,
.footer-bottom{
  color: var(--h-muted) !important;
}
@media (max-width: 999px){
  .shell-header.universal-header,
  .shell-header.hybrid-header{
    width: min(calc(100% - 20px), 980px) !important;
    margin-top: 10px !important;
    border-radius: 22px !important;
    gap: 8px !important;
  }
  .shell-header.universal-header .top-nav.universal-nav,
  .shell-header.hybrid-header .top-nav.hybrid-nav{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 75vw !important;
    max-width: 420px !important;
    height: 100dvh !important;
    padding: 86px 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    background: var(--h-card) !important;
    border-left: 1px solid var(--h-border) !important;
    border-radius: 0 !important;
    box-shadow: -24px 0 70px rgba(0,0,0,.25) !important;
    transform: translateX(105%) !important;
    transition: transform .22s ease !important;
    overflow-y: auto !important;
    z-index: 999 !important;
    margin: 0 !important;
  }
  .shell-header.universal-header .top-nav.universal-nav.open,
  .shell-header.hybrid-header .top-nav.hybrid-nav.open{
    transform: translateX(0) !important;
  }
  .shell-header.hybrid-header .top-nav.hybrid-nav a,
  .shell-header.hybrid-header .top-nav.hybrid-nav button,
  .shell-header.universal-header .top-nav.universal-nav a,
  .shell-header.universal-header .top-nav.universal-nav button{
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 48px !important;
  }
  .shell-header.hybrid-header .user-menu-shell,
  .shell-header.universal-header .user-menu-shell{
    width: 100% !important;
    display: grid !important;
  }
  .shell-header.hybrid-header .user-account-menu,
  .shell-header.universal-header .user-account-menu{
    position: static !important;
    width: 100% !important;
    margin-top: .45rem !important;
    box-shadow: none !important;
    border-radius: 20px !important;
  }
  .shell-header.universal-header .brand-logo-img,
  .shell-header.hybrid-header .brand-logo-img{
    width: clamp(126px, 38vw, 168px) !important;
    max-height: 46px !important;
  }
}
@media (min-width:700px) and (max-width:999px){
  .shell-header.universal-header .top-nav.universal-nav,
  .shell-header.hybrid-header .top-nav.hybrid-nav{
    width: 50vw !important;
  }
}
@media (min-width:1000px){
  .shell-header.universal-header .nav-toggle,
  .shell-header.hybrid-header .nav-toggle{
    display: none !important;
  }
  .shell-header.universal-header .hybrid-theme-toggle,
  .shell-header.hybrid-header .hybrid-theme-toggle{
    display: inline-grid !important;
    place-items: center !important;
  }
  .shell-header.universal-header .hybrid-mobile-controls,
  .shell-header.hybrid-header .hybrid-mobile-controls{
    order: 3 !important;
    margin-left: 0 !important;
  }
  .shell-header.universal-header .top-nav,
  .shell-header.hybrid-header .top-nav{
    order: 2 !important;
  }
}
@media (max-width:520px){
  .shell-header.universal-header .brand-logo-img,
  .shell-header.hybrid-header .brand-logo-img{
    width: 132px !important;
    max-height: 44px !important;
  }
  .shell-header.hybrid-header .hybrid-theme-toggle,
  .shell-header.hybrid-header .hybrid-nav-toggle,
  .shell-header.universal-header .hybrid-theme-toggle,
  .shell-header.universal-header .hybrid-nav-toggle{
    min-width: 42px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }
}
[data-theme="dark"] .shell-header.hybrid-header .brand-logo-img,
[data-theme="dark"] .shell-header.universal-header .brand-logo-img,
[data-theme="dark"] .site-footer .footer-brand > img{
  content: url('/assets/quizluck-logo-dark.png') !important;
}


/* --------------------------------------------------------------------------
   Final Premium UI polish: free shows Upgrade; premium shows Initial + Premium.
   Removes duplicate Gold/Premium unlocked pills from header and play toolbar.
   -------------------------------------------------------------------------- */
.top-nav a.gold-premium-nav,
.top-nav a.premium-nav-link.user-premium-mini,
.top-nav a[href="/upgrade"][aria-hidden="true"] {
  display: none !important;
}

.top-nav a[href="/upgrade"].upgrade-needed-nav,
.hybrid-nav a[href="/upgrade"].upgrade-needed-nav,
#headerUpgradeButton:not([hidden]) {
  background: linear-gradient(135deg, #fff7d6 0%, #fde68a 46%, #f59e0b 100%) !important;
  color: #7c2d12 !important;
  border: 1px solid rgba(245, 158, 11, .48) !important;
  box-shadow: 0 14px 36px rgba(245, 158, 11, .18) !important;
  font-weight: 1000 !important;
}

.user-menu-shell.final-user-menu-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 4000;
}

.user-menu-button.is-premium {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 56px !important;
  padding: 10px 20px 10px 12px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #fffaf0 0%, #fef3c7 55%, #fde68a 100%) !important;
  color: #7c2d12 !important;
  box-shadow: 0 18px 44px rgba(245, 158, 11, .18) !important;
  font-size: clamp(1rem, 1.6vw, 1.35rem) !important;
  font-weight: 1000 !important;
}

.user-menu-button.is-premium .user-mini-avatar,
.premium-member-initial {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #f59e0b, #b45309) !important;
  color: #ffffff !important;
  font-weight: 1000 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px rgba(146, 64, 14, .20) !important;
}

.user-menu-button.is-premium .user-menu-button-text {
  color: #7c2d12 !important;
  letter-spacing: -.02em !important;
}

.user-menu-button.is-free {
  font-weight: 900 !important;
}

.premium-member-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 54px !important;
  padding: 8px 18px 8px 8px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #fffaf0 0%, #fef3c7 55%, #fde68a 100%) !important;
  color: #7c2d12 !important;
  border: 1px solid rgba(245, 158, 11, .30) !important;
  box-shadow: 0 14px 30px rgba(245, 158, 11, .14) !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
}

.premium-member-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 16px auto 12px;
}
.premium-member-card small {
  color: #92400e;
  font-weight: 900;
}
.account-menu-top.premium .gold-premium-banner,
.gold-premium-banner,
.gold-study-premium-badge,
.premium-unlocked-pill {
  display: none !important;
}

.premium-menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 12px 14px !important;
}
.premium-menu-item .premium-member-badge {
  min-height: 44px !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
.premium-menu-item .premium-member-initial {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
}

.student-study-toolbar.premium-member-toolbar,
.student-study-toolbar.pro-access.premium-member-toolbar,
.student-study-toolbar.gold-premium-study-toolbar {
  background: linear-gradient(135deg, rgba(255, 247, 214, .96), rgba(253, 230, 138, .88), rgba(255, 251, 235, .94)) !important;
  border: 1px solid rgba(245, 158, 11, .45) !important;
  color: #7c2d12 !important;
  box-shadow: 0 18px 44px rgba(245, 158, 11, .18) !important;
}

.student-study-toolbar.premium-member-toolbar .mini-switch-row,
.student-study-toolbar.premium-member-toolbar .mini-lang-row,
.student-study-toolbar.gold-premium-study-toolbar .mini-switch-row,
.student-study-toolbar.gold-premium-study-toolbar .mini-lang-row {
  color: #7c2d12 !important;
}

.toolbar-premium-member {
  min-height: 52px !important;
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important;
  color: white !important;
  border: 0 !important;
  box-shadow: 0 14px 30px rgba(146, 64, 14, .25) !important;
}
.toolbar-premium-member .premium-member-initial {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28) !important;
}

[data-theme="dark"] .user-menu-button.is-premium,
html.dark .user-menu-button.is-premium,
body.dark .user-menu-button.is-premium,
[data-theme="dark"] .premium-member-badge,
html.dark .premium-member-badge,
body.dark .premium-member-badge {
  background: linear-gradient(135deg, #451a03 0%, #78350f 55%, #92400e 100%) !important;
  color: #fff7ed !important;
  border-color: rgba(251, 191, 36, .36) !important;
}

@media (max-width: 999px) {
  .user-menu-button.is-premium {
    width: 100% !important;
    justify-content: flex-start !important;
    min-height: 58px !important;
  }
  .student-study-toolbar.premium-member-toolbar {
    align-items: stretch !important;
  }
  .toolbar-premium-member {
    width: 100% !important;
  }
}

/* Compatibility aliases after final Premium wording cleanup. */
.premium-member-pill { display:none !important; }
.premium-member-note { color:#92400e; font-weight:850; }
[data-theme="dark"] .premium-member-note, html.dark .premium-member-note, body.dark .premium-member-note { color:#fde68a; }

/* Final mobile account drawer polish */
.mobile-menu-backdrop,
.mobile-drawer-top,
.mobile-drawer-account,
.mobile-account-shortcuts,
.mobile-primary-title,
.mobile-support-section {
  display: none;
}

@media (max-width: 999px) {
  body.mobile-menu-open {
    overflow: hidden;
    touch-action: none;
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: rgba(15, 23, 42, .54);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 990;
  }

  body.mobile-menu-open .mobile-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .shell-header.universal-header .top-nav.universal-nav,
  .shell-header.hybrid-header .top-nav.hybrid-nav {
    --drawer-bg: #f8fafc;
    --drawer-surface: #ffffff;
    --drawer-soft: #f1f5f9;
    --drawer-border: #dbe4f0;
    --drawer-text: #0f172a;
    --drawer-muted: #64748b;
    --drawer-blue: #3b82f6;
    inset: -10px -10px auto auto !important;
    width: min(82vw, 420px) !important;
    max-width: calc(100vw - 10px) !important;
    height: calc(100dvh + 10px) !important;
    min-height: calc(100dvh + 10px) !important;
    max-height: calc(100dvh + 10px) !important;
    padding: 22px 16px max(18px, env(safe-area-inset-bottom)) !important;
    gap: 12px !important;
    background: var(--drawer-bg) !important;
    border-left: 1px solid var(--drawer-border) !important;
    color: var(--drawer-text) !important;
    box-shadow: -28px 0 80px rgba(15, 23, 42, .26) !important;
    z-index: 1000 !important;
  }

  [data-theme="dark"] .shell-header.universal-header .top-nav.universal-nav,
  [data-theme="dark"] .shell-header.hybrid-header .top-nav.hybrid-nav,
  html.dark .shell-header.universal-header .top-nav.universal-nav,
  html.dark .shell-header.hybrid-header .top-nav.hybrid-nav,
  body.dark .shell-header.universal-header .top-nav.universal-nav,
  body.dark .shell-header.hybrid-header .top-nav.hybrid-nav {
    --drawer-bg: #0b1222;
    --drawer-surface: #141e31;
    --drawer-soft: #18243a;
    --drawer-border: #26344f;
    --drawer-text: #f3f7ff;
    --drawer-muted: #9aa8bf;
    --drawer-blue: #3b82f6;
  }

  .mobile-drawer-top {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 56px;
    align-items: center;
    gap: 12px;
    margin: 8px 0 18px;
  }

  .mobile-drawer-top img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    object-position: left center;
    border-radius: 16px;
  }

  .mobile-drawer-pill {
    justify-self: end;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    width: auto !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--drawer-blue) 18%, var(--drawer-soft)) !important;
    color: var(--drawer-blue) !important;
    border: 0 !important;
    font-size: .88rem !important;
    font-weight: 1000 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    white-space: nowrap !important;
  }

  .mobile-drawer-close {
    width: 56px;
    height: 56px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--drawer-soft);
    color: var(--drawer-text);
    font-size: 2.25rem;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-drawer-account {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 104px;
    padding: 16px;
    border: 1px solid var(--drawer-border);
    border-radius: 28px;
    background: var(--drawer-surface);
  }

  .mobile-drawer-avatar {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--drawer-blue) 14%, var(--drawer-soft));
    border: 1px solid color-mix(in srgb, var(--drawer-blue) 42%, var(--drawer-border));
    color: var(--drawer-blue);
    font-size: 1.45rem;
    font-weight: 1000;
    position: relative;
  }

  .mobile-drawer-avatar:empty::before {
    content: "";
    width: 22px;
    height: 22px;
    border: 4px solid var(--drawer-blue);
    border-radius: 999px;
    transform: translateY(-8px);
  }

  .mobile-drawer-avatar:empty::after {
    content: "";
    width: 36px;
    height: 20px;
    border: 4px solid var(--drawer-blue);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    position: absolute;
    bottom: 14px;
  }

  .mobile-drawer-user {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  .mobile-drawer-user strong {
    color: var(--drawer-text);
    font-size: 1.14rem;
    font-weight: 1000;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .mobile-drawer-user small {
    color: var(--drawer-muted);
    font-size: .98rem;
    font-weight: 850;
    overflow-wrap: anywhere;
  }

  .mobile-drawer-signin {
    display: inline-flex !important;
    width: auto !important;
    min-height: 52px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--drawer-blue) !important;
    color: #fff !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
  }

  .mobile-account-shortcuts,
  .mobile-support-section {
    display: grid;
    gap: 10px;
  }

  .mobile-account-row,
  .mobile-support-row,
  .shell-header.hybrid-header .top-nav.hybrid-nav a.mobile-primary-link,
  .shell-header.universal-header .top-nav.universal-nav a.mobile-primary-link,
  .shell-header.hybrid-header .top-nav.hybrid-nav .final-login-link,
  .shell-header.universal-header .top-nav.universal-nav .final-login-link,
  .shell-header.hybrid-header .top-nav.hybrid-nav .user-menu-button,
  .shell-header.universal-header .top-nav.universal-nav .user-menu-button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 62px !important;
    padding: 0 24px !important;
    border: 1px solid var(--drawer-border) !important;
    border-radius: 24px !important;
    background: var(--drawer-surface) !important;
    color: var(--drawer-text) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: 1.03rem !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  .mobile-account-row span,
  .mobile-support-row span {
    width: 30px;
    min-width: 30px;
    display: inline-grid;
    place-items: center;
    color: var(--drawer-blue);
    font-size: 1.18rem;
    font-weight: 1000;
  }

  .mobile-account-row strong,
  .mobile-support-row strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .shell-header.hybrid-header .top-nav.hybrid-nav a.mobile-primary-hidden,
  .shell-header.universal-header .top-nav.universal-nav a.mobile-primary-hidden {
    display: none !important;
  }

  .mobile-primary-title {
    display: block;
    margin: 14px 0 2px;
    padding-top: 16px;
    border-top: 1px solid var(--drawer-border);
    color: var(--drawer-muted);
    font-size: .84rem;
    font-weight: 1000;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  .mobile-support-section .mobile-primary-title {
    margin-top: 2px;
  }

  .shell-header.hybrid-header .top-nav.hybrid-nav .user-menu-shell,
  .shell-header.universal-header .top-nav.universal-nav .user-menu-shell {
    display: none !important;
  }

  .shell-header.hybrid-header .top-nav.hybrid-nav .user-account-menu,
  .shell-header.universal-header .top-nav.universal-nav .user-account-menu {
    display: none !important;
  }

  .shell-header.hybrid-header .top-nav.hybrid-nav a:hover,
  .shell-header.universal-header .top-nav.universal-nav a:hover,
  .mobile-account-row:hover,
  .mobile-support-row:hover {
    background: color-mix(in srgb, var(--drawer-blue) 10%, var(--drawer-surface)) !important;
    color: var(--drawer-text) !important;
  }
}

@media (max-width: 520px) {
  .shell-header.universal-header .top-nav.universal-nav,
  .shell-header.hybrid-header .top-nav.hybrid-nav {
    width: min(82vw, 390px) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .mobile-drawer-top {
    grid-template-columns: 60px minmax(0, 1fr) 50px;
    gap: 10px;
  }

  .mobile-drawer-top img {
    width: 50px;
    height: 50px;
  }

  .mobile-drawer-close {
    width: 50px;
    height: 50px;
    font-size: 2rem;
  }

  .mobile-drawer-pill {
    min-height: 44px !important;
    padding: 0 16px !important;
    font-size: .76rem !important;
  }

  .mobile-drawer-account {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    min-height: 0;
    padding: 14px;
    gap: 8px;
  }

  .mobile-drawer-avatar {
    width: 50px;
    height: 50px;
  }

  .mobile-account-row,
  .mobile-support-row,
  .shell-header.hybrid-header .top-nav.hybrid-nav a.mobile-primary-link,
  .shell-header.universal-header .top-nav.universal-nav a.mobile-primary-link,
  .shell-header.hybrid-header .top-nav.hybrid-nav .final-login-link,
  .shell-header.universal-header .top-nav.universal-nav .final-login-link,
  .shell-header.hybrid-header .top-nav.hybrid-nav .user-menu-button,
  .shell-header.universal-header .top-nav.universal-nav .user-menu-button {
    min-height: 56px !important;
    padding: 0 18px !important;
    border-radius: 20px !important;
    font-size: .98rem !important;
  }
}

@media (max-width: 360px) {
  .mobile-drawer-account {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .mobile-drawer-signin {
    grid-column: 1 / -1;
    width: 100% !important;
  }
}

/* Quizlet-inspired final mobile study drawer */
.mobile-study-drawer,
.mobile-study-brand,
.mobile-study-scroll,
.mobile-study-section,
.mobile-study-footer,
.mobile-drawer-profile {
  display: none;
}

@media (max-width: 999px) {
  .shell-header.universal-header .top-nav.universal-nav,
  .shell-header.hybrid-header .top-nav.hybrid-nav {
    --study-menu-bg: #ffffff;
    --study-menu-text: #1f2937;
    --study-menu-muted: #58627d;
    --study-menu-soft: #eef0ff;
    --study-menu-line: #eef1f7;
    --study-menu-blue: #4255ff;
    --study-menu-icon: #58627d;
    inset: -10px auto auto -10px !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-width: min(420px, calc(100vw - 24px)) !important;
    height: calc(100dvh + 10px) !important;
    min-height: calc(100dvh + 10px) !important;
    max-height: calc(100dvh + 10px) !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
    background: var(--study-menu-bg) !important;
    border: 0 !important;
    border-right: 1px solid var(--study-menu-line) !important;
    box-shadow: 26px 0 80px rgba(31, 41, 55, .18) !important;
    transform: translateX(-106%) !important;
    color: var(--study-menu-text) !important;
    overflow: hidden !important;
  }

  .shell-header.universal-header .top-nav.universal-nav.open,
  .shell-header.hybrid-header .top-nav.hybrid-nav.open {
    transform: translateX(0) !important;
  }

  [data-theme="dark"] .shell-header.universal-header .top-nav.universal-nav,
  [data-theme="dark"] .shell-header.hybrid-header .top-nav.hybrid-nav,
  html.dark .shell-header.universal-header .top-nav.universal-nav,
  html.dark .shell-header.hybrid-header .top-nav.hybrid-nav,
  body.dark .shell-header.universal-header .top-nav.universal-nav,
  body.dark .shell-header.hybrid-header .top-nav.hybrid-nav {
    --study-menu-bg: #0f172a;
    --study-menu-text: #eef2ff;
    --study-menu-muted: #a3aec5;
    --study-menu-soft: rgba(66, 85, 255, .18);
    --study-menu-line: rgba(148, 163, 184, .18);
    --study-menu-blue: #7c8cff;
    --study-menu-icon: #b6c0d6;
    box-shadow: 30px 0 90px rgba(0, 0, 0, .38) !important;
  }

  .mobile-menu-backdrop {
    background: rgba(31, 41, 55, .42) !important;
    backdrop-filter: blur(1px);
  }

  [data-theme="dark"] .mobile-menu-backdrop,
  html.dark .mobile-menu-backdrop,
  body.dark .mobile-menu-backdrop {
    background: rgba(2, 6, 23, .62) !important;
  }

  .mobile-study-drawer {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    background: var(--study-menu-bg);
    color: var(--study-menu-text);
  }

  .mobile-study-brand {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 116px;
    padding: calc(22px + env(safe-area-inset-top)) 28px 18px;
  }

  .mobile-drawer-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--study-menu-icon) !important;
    box-shadow: none !important;
  }

  .mobile-drawer-close span,
  .mobile-drawer-close span::before,
  .mobile-drawer-close span::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
  }

  .mobile-drawer-close span {
    position: relative;
  }

  .mobile-drawer-close span::before,
  .mobile-drawer-close span::after {
    position: absolute;
    left: 0;
  }

  .mobile-drawer-close span::before { top: -10px; }
  .mobile-drawer-close span::after { top: 10px; }

  .mobile-study-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    width: auto !important;
    min-height: 60px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--study-menu-blue) !important;
    text-decoration: none !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
  }

  .mobile-study-logo span {
    font-size: 4.15rem;
    line-height: .8;
    font-weight: 1000;
    letter-spacing: -.08em;
  }

  .mobile-study-logo b {
    font-size: 3.05rem;
    line-height: 1;
    font-weight: 1000;
  }

  .mobile-study-scroll {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 24px max(24px, env(safe-area-inset-bottom));
  }

  .mobile-study-section {
    display: grid;
    gap: 10px;
    padding: 20px 0 22px;
    border-top: 1px solid var(--study-menu-line);
  }

  .mobile-study-section:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .mobile-study-section p {
    margin: 0 0 12px;
    color: var(--study-menu-muted);
    font-size: 1.04rem;
    font-weight: 900;
  }

  .mobile-study-row {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 64px !important;
    width: 100% !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--study-menu-muted) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: 1.22rem !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  .mobile-study-row span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .mobile-study-row.is-active {
    background: var(--study-menu-soft) !important;
    color: var(--study-menu-blue) !important;
  }

  .mobile-study-row:hover {
    background: color-mix(in srgb, var(--study-menu-soft) 72%, transparent) !important;
    color: var(--study-menu-blue) !important;
  }

  .mobile-nav-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    position: relative;
    color: currentColor;
  }

  .mobile-nav-icon::before,
  .mobile-nav-icon::after {
    content: "";
    box-sizing: border-box;
    display: block;
  }

  .mobile-nav-icon-home::before {
    width: 25px;
    height: 22px;
    border: 3px solid currentColor;
    border-top: 0;
    border-radius: 4px;
    transform: translateY(5px);
  }

  .mobile-nav-icon-home::after {
    width: 22px;
    height: 22px;
    border-left: 3px solid currentColor;
    border-top: 3px solid currentColor;
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
  }

  .mobile-nav-icon-folder::before {
    width: 30px;
    height: 22px;
    border: 3px solid currentColor;
    border-radius: 5px;
    transform: translateY(3px);
  }

  .mobile-nav-icon-folder::after {
    width: 16px;
    height: 8px;
    border-left: 3px solid currentColor;
    border-top: 3px solid currentColor;
    border-radius: 4px 4px 0 0;
    position: absolute;
    left: 2px;
    top: 5px;
  }

  .mobile-nav-icon-group::before {
    width: 24px;
    height: 14px;
    border: 3px solid currentColor;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    transform: translateY(8px);
  }

  .mobile-nav-icon-group::after {
    width: 30px;
    height: 12px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
    border-radius: 999px;
    position: absolute;
    top: 8px;
    box-shadow: inset 0 0 0 4px transparent;
  }

  .mobile-nav-icon-bell::before {
    width: 24px;
    height: 24px;
    border: 3px solid currentColor;
    border-bottom: 0;
    border-radius: 16px 16px 5px 5px;
    transform: translateY(2px);
  }

  .mobile-nav-icon-bell::after {
    width: 12px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    position: absolute;
    bottom: 3px;
  }

  .mobile-nav-icon-plus::before {
    width: 31px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
  }

  .mobile-nav-icon-plus::after {
    width: 3px;
    height: 31px;
    border-radius: 999px;
    background: currentColor;
    position: absolute;
  }

  .mobile-nav-icon-cards::before {
    width: 22px;
    height: 27px;
    border: 3px solid currentColor;
    border-radius: 4px;
    transform: rotate(-14deg);
  }

  .mobile-nav-icon-cards::after {
    width: 12px;
    height: 20px;
    border-right: 3px solid currentColor;
    border-top: 3px solid currentColor;
    border-radius: 4px;
    position: absolute;
    right: 2px;
    top: 5px;
    transform: rotate(-14deg);
  }

  .mobile-nav-icon-guide::before {
    width: 25px;
    height: 27px;
    border: 3px solid currentColor;
    border-radius: 4px;
  }

  .mobile-nav-icon-guide::after {
    width: 13px;
    height: 3px;
    background: currentColor;
    position: absolute;
    bottom: 8px;
    left: 11px;
    box-shadow: 0 -7px 0 currentColor;
  }

  .mobile-nav-icon-check::before {
    width: 30px;
    height: 24px;
    border-top: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    box-shadow: 0 9px 0 -6px currentColor;
  }

  .mobile-nav-icon-check::after {
    width: 10px;
    height: 17px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    position: absolute;
    left: 0;
    top: 1px;
    transform: rotate(40deg);
    box-shadow: 12px 8px 0 -2px transparent;
  }

  .mobile-nav-icon-book::before {
    width: 24px;
    height: 28px;
    border: 3px solid currentColor;
    border-radius: 4px;
  }

  .mobile-nav-icon-book::after {
    width: 18px;
    height: 3px;
    background: currentColor;
    position: absolute;
    bottom: 8px;
  }

  .mobile-nav-icon i {
    position: absolute;
    right: -7px;
    top: -5px;
    min-width: 21px;
    height: 21px;
    display: inline-grid;
    place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff3b75;
    color: #fff;
    font-size: .68rem;
    line-height: 1;
    font-style: normal;
    font-weight: 1000;
  }

  .mobile-drawer-profile {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin: 14px 0 18px;
    padding: 14px 12px;
    border: 1px solid var(--study-menu-line) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--study-menu-soft) 42%, transparent) !important;
    color: var(--study-menu-text) !important;
    text-decoration: none !important;
  }

  .mobile-profile-avatar {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #4255ff, #2dd4bf);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 1000;
  }

  .mobile-drawer-profile strong,
  .mobile-drawer-profile small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-drawer-profile strong {
    font-size: 1rem;
    font-weight: 1000;
  }

  .mobile-drawer-profile small {
    margin-top: 2px;
    color: var(--study-menu-muted);
    font-size: .86rem;
    font-weight: 800;
  }

  .mobile-study-footer {
    display: grid;
    gap: 4px;
    padding: 8px 0 18px;
    border-top: 1px solid var(--study-menu-line);
  }

  .mobile-study-footer a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    width: 100% !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--study-menu-muted) !important;
    font-size: .95rem !important;
    font-weight: 850 !important;
    text-decoration: none !important;
  }

  .mobile-study-footer a:hover {
    color: var(--study-menu-blue) !important;
    background: var(--study-menu-soft) !important;
  }

  .shell-header.hybrid-header .top-nav.hybrid-nav > a.mobile-primary-hidden,
  .shell-header.universal-header .top-nav.universal-nav > a.mobile-primary-hidden,
  .shell-header.hybrid-header .top-nav.hybrid-nav > button,
  .shell-header.universal-header .top-nav.universal-nav > button,
  .shell-header.hybrid-header .top-nav.hybrid-nav > .user-menu-shell,
  .shell-header.universal-header .top-nav.universal-nav > .user-menu-shell {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .shell-header.universal-header .top-nav.universal-nav,
  .shell-header.hybrid-header .top-nav.hybrid-nav {
    width: min(88vw, 390px) !important;
    max-width: min(88vw, 390px) !important;
  }

  .mobile-study-brand {
    min-height: 104px;
    padding-left: 22px;
    padding-right: 22px;
  }

  .mobile-study-scroll {
    padding-left: 18px;
    padding-right: 18px;
  }

  .mobile-study-row {
    min-height: 58px !important;
    padding: 0 14px !important;
    font-size: 1.05rem !important;
  }

  .mobile-study-logo span {
    font-size: 3.55rem;
  }

  .mobile-study-logo b {
    font-size: 2.6rem;
  }
}

/* --------------------------------------------------------------------------
 * Single App SPA UI: one shared header, search, footer, and mobile drawer.
 * -------------------------------------------------------------------------- */
.single-spa-ui .shell-header.universal-header{
  display:flex;
  align-items:center;
  gap:14px;
  max-width:1180px;
  width:calc(100% - 28px);
  box-sizing:border-box;
}
.global-header-search-spa{
  flex:1 1 280px;
  max-width:420px;
  min-width:180px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border:1px solid var(--border, #dbe5f3);
  border-radius:18px;
  background:color-mix(in srgb, var(--card, #fff) 82%, transparent);
  box-shadow:0 10px 28px rgba(15,23,42,.06);
}
.global-header-search-spa input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text, #0f172a);
  font:800 .92rem/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  padding:8px 7px 8px 10px;
}
.global-header-search-spa input::placeholder{color:var(--muted, #64748b);font-weight:750}
.global-header-search-spa button{
  width:36px;
  height:36px;
  border:0;
  border-radius:13px;
  cursor:pointer;
  background:linear-gradient(135deg,var(--primary, #2563eb),var(--accent, #7c3aed));
  color:#fff;
  font-weight:1000;
  display:grid;
  place-items:center;
}
.single-spa-ui .top-nav > a[aria-current="page"]{
  background:linear-gradient(135deg,var(--primary, #2563eb),var(--accent, #7c3aed));
  color:#fff;
}
.single-ui-mobile-nav .mobile-study-drawer{
  overflow:hidden;
}
.single-ui-mobile-nav .mobile-drawer-search{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:10px;
  margin:0 0 12px;
  border:1px solid var(--border, #dbe5f3);
  border-radius:18px;
  background:var(--card, #fff);
}
.single-ui-mobile-nav .mobile-drawer-search input{
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text, #0f172a);
  font-weight:850;
}
.single-ui-mobile-nav .mobile-drawer-search button{
  border:0;
  border-radius:13px;
  padding:0 12px;
  min-height:38px;
  background:linear-gradient(135deg,var(--primary, #2563eb),var(--accent, #7c3aed));
  color:#fff;
  font-weight:1000;
}
.single-ui-mobile-section{
  display:grid;
  gap:4px;
}
.single-ui-mobile-nav .mobile-study-row span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width: 999px){
  .single-spa-ui .shell-header.universal-header{
    width:calc(100% - 20px);
    gap:10px;
    padding:10px;
  }
  .single-spa-ui .shell-header .brand,
  .single-spa-ui .shell-header .hybrid-brand{
    flex:0 0 auto;
  }
  .global-header-search-spa{
    order:3;
    flex:1 0 100%;
    max-width:none;
    display:none;
  }
  .single-spa-ui.search-visible .global-header-search-spa{
    display:flex;
  }
}
@media (min-width: 1000px){
  .single-spa-ui .hybrid-mobile-controls,
  .single-spa-ui .universal-mobile-controls{
    order:3;
  }
  .single-spa-ui .top-nav{
    flex:0 0 auto;
  }
}

/* Single UI desktop fit tuning */
@media (min-width: 1000px) {
  .single-spa-ui .shell-header.universal-header {
    flex-wrap: nowrap;
  }
  .single-spa-ui .brand-logo-img {
    width: clamp(130px, 13vw, 170px) !important;
  }
  .single-spa-ui .global-header-search-spa {
    max-width: 330px;
    flex-basis: 240px;
  }
  .single-spa-ui .shell-header.universal-header .top-nav.universal-nav {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 5px !important;
  }
  .single-spa-ui .shell-header.universal-header .top-nav.universal-nav::-webkit-scrollbar { display: none; }
  .single-spa-ui .shell-header.universal-header .top-nav.universal-nav > a,
  .single-spa-ui .shell-header.universal-header .top-nav.universal-nav > button,
  .single-spa-ui .shell-header.universal-header .user-menu-button {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: .92rem !important;
  }
}
@media (min-width: 1180px) {
  .single-spa-ui .global-header-search-spa { max-width: 380px; flex-basis: 280px; }
  .single-spa-ui .shell-header.universal-header .top-nav.universal-nav > a,
  .single-spa-ui .shell-header.universal-header .top-nav.universal-nav > button,
  .single-spa-ui .shell-header.universal-header .user-menu-button {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

.direct-question-options{display:grid;gap:10px;margin:18px 0}
.direct-question-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:14px 16px;border:1px solid var(--h-border,var(--line));border-radius:18px;background:var(--h-card-soft,var(--surface-2));font-weight:850;color:var(--h-text,var(--text))}
.direct-question-option.is-correct{border-color:#16a34a;background:color-mix(in srgb,#16a34a 12%,var(--h-card,#fff));color:#166534}
[data-theme="dark"] .direct-question-option.is-correct, html.dark .direct-question-option.is-correct, body.dark .direct-question-option.is-correct{color:#bbf7d0}
.direct-question-option b{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#16a34a}
@media (max-width:640px){.direct-question-option{grid-template-columns:auto minmax(0,1fr)}.direct-question-option b{grid-column:2}}


/* QuizLuck Activities page v1.0 */
.activities-page,
.activities-row {
  position: relative;
}
.activities-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.35rem);
  padding: clamp(1.1rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 10px);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 14%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent));
  box-shadow: var(--shadow-soft);
}
.activities-hero-card h1 {
  margin: .25rem 0 .45rem;
  font-size: clamp(1.85rem, 4vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}
.activities-search-pro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  width: min(920px, 100%);
  padding: .5rem;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 18px 50px rgba(15,23,42,.08);
}
.activities-search-pro input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 750;
  padding: .75rem 1rem;
}
.activities-search-pro button {
  border: 0;
  border-radius: 999px;
  padding: .78rem 1.25rem;
  background: var(--primary);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}
.activities-recent-pills {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .92rem;
}
.activities-recent-pills span {
  font-weight: 950;
  color: var(--text);
}
.activities-recent-pills a,
.activities-recent-pills em {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  color: var(--text);
  font-style: normal;
  font-weight: 850;
  text-decoration: none;
}
.activities-rtl-rail {
  display: flex;
  gap: .9rem;
  overflow-x: auto;
  padding: .2rem .1rem 1rem;
  direction: rtl;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.activities-mini-card {
  direction: ltr;
  flex: 0 0 clamp(230px, 28vw, 330px);
  scroll-snap-align: end;
  display: grid;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-soft);
}
.activities-mini-link {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.activities-mini-link img,
.activities-mini-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  object-fit: cover;
}
.activities-mini-icon,
.activities-topic-icon {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--topic-color) 18%, var(--surface-soft));
  color: var(--topic-color);
  font-size: 1.7rem;
  font-weight: 950;
}
.activities-mini-body {
  min-width: 0;
  display: grid;
  gap: .2rem;
}
.activities-mini-body small,
.activities-mini-body em {
  color: var(--muted);
  font-style: normal;
  font-size: .8rem;
  font-weight: 750;
}
.activities-mini-body strong {
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.15;
}
.activities-mini-actions,
.activities-topic-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.activities-mini-actions a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
}
.global-third-row-ad {
  margin-top: clamp(.75rem, 2vw, 1.25rem);
  margin-bottom: clamp(.75rem, 2vw, 1.25rem);
}
.activities-google-ad-placeholder,
.activities-ad-live {
  width: 100%;
  min-height: clamp(88px, 12vw, 138px);
  display: grid;
  place-items: center;
  text-align: center;
  gap: .25rem;
  padding: 1rem;
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: 24px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  color: var(--muted);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.activities-google-ad-placeholder span {
  color: var(--primary);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .76rem;
}
.activities-google-ad-placeholder strong {
  color: var(--text);
  font-size: clamp(1rem, 2vw, 1.35rem);
}
.activities-google-ad-placeholder small {
  max-width: 540px;
}
.activities-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.1rem);
}
.activities-topic-card {
  display: grid;
  gap: .85rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-soft);
}
.activities-topic-main {
  display: grid;
  gap: .55rem;
  color: inherit;
  text-decoration: none;
}
.activities-topic-main img,
.activities-topic-icon {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  object-fit: cover;
}
.activities-topic-main h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.activities-topic-main p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}
.activities-topic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.activities-topic-meta span {
  padding: .28rem .52rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}
@media (max-width: 1100px) {
  .activities-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .activities-search-pro {
    border-radius: 24px;
    grid-template-columns: 1fr;
  }
  .activities-search-pro button {
    width: 100%;
  }
  .activities-rtl-rail {
    gap: .75rem;
    margin-inline: calc(var(--page-pad, 1rem) * -1);
    padding-inline: var(--page-pad, 1rem);
  }
  .activities-mini-card {
    flex-basis: min(82vw, 310px);
  }
  .activities-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  .activities-topic-card {
    padding: .72rem;
    border-radius: 18px;
  }
  .activities-topic-main img,
  .activities-topic-icon {
    border-radius: 14px;
  }
  .activities-topic-main h3 {
    font-size: .96rem;
  }
  .activities-topic-main p {
    font-size: .78rem;
    min-height: 2.45em;
  }
  .activities-topic-actions {
    grid-template-columns: 1fr;
  }
  .activities-topic-actions .button,
  .activities-topic-actions .ghost-button {
    min-height: 34px;
    padding: .45rem .55rem;
    font-size: .82rem;
  }
}


/* QuizLuck language full-space and colorful flashcard animation final */
.quiz-screen.language-media-disabled .study-content.kahoot-content,
.learn-screen.language-media-disabled .study-content.kahoot-content,
.study-content.kahoot-content.language-text-only {
  grid-template-rows: minmax(0, auto) minmax(0, 1fr) !important;
  align-content: stretch !important;
  gap: clamp(10px, 1.4vw, 18px) !important;
  padding-top: clamp(10px, 1.4vw, 18px) !important;
}

.quiz-screen.language-media-disabled .study-media,
.learn-screen.language-media-disabled .study-media,
.study-card.language-text-only .study-media,
.study-card.language-text-only .question-image,
.study-card.language-text-only .option-image {
  display: none !important;
}

.study-card.language-text-only .study-content.kahoot-content > h1,
.quiz-screen.language-media-disabled .study-content.kahoot-content > h1,
.learn-screen.language-media-disabled .study-content.kahoot-content > h1 {
  width: 100% !important;
  max-width: min(1180px, 96%) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  font-size: clamp(26px, 4.9vw, 74px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}

.study-card.language-text-only .translated-line,
.quiz-screen.language-media-disabled .translated-line,
.learn-screen.language-media-disabled .translated-line {
  display: block !important;
  margin-top: .35em !important;
  font-size: .48em !important;
  line-height: 1.18 !important;
  letter-spacing: -.012em !important;
}

.study-card.language-text-only .study-options.kahoot-options,
.quiz-screen.language-media-disabled .study-options.kahoot-options,
.learn-screen.language-media-disabled .study-options.kahoot-options {
  width: 100% !important;
  max-width: min(1240px, 98%) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.2vw, 18px) !important;
}

.study-card.language-text-only .study-option.kahoot-option,
.quiz-screen.language-media-disabled .study-option.kahoot-option,
.learn-screen.language-media-disabled .study-option.kahoot-option {
  min-height: clamp(94px, 14vh, 170px) !important;
  padding: clamp(14px, 2vw, 28px) !important;
  align-items: center !important;
}

.study-card.language-text-only .option-label,
.quiz-screen.language-media-disabled .option-label,
.learn-screen.language-media-disabled .option-label {
  width: 100% !important;
}

.study-card.language-text-only .dual-option-text .translated-line,
.quiz-screen.language-media-disabled .dual-option-text .translated-line,
.learn-screen.language-media-disabled .dual-option-text .translated-line {
  font-size: .72em !important;
  margin-top: .25em !important;
  opacity: .96 !important;
}

.flash-animated-deck .flash-slide-animate {
  animation: quizluckFlashSlideIn .42s cubic-bezier(.2,.72,.22,1) both;
  will-change: transform, opacity;
}
.flash-animated-deck[data-flash-direction="prev"] .flash-slide-animate {
  animation-name: quizluckFlashSlideInPrev;
}
@keyframes quizluckFlashSlideIn {
  from { opacity: 0; transform: translateX(58px) scale(.965) rotate(.65deg); }
  to { opacity: 1; transform: translateX(0) scale(1) rotate(0); }
}
@keyframes quizluckFlashSlideInPrev {
  from { opacity: 0; transform: translateX(-58px) scale(.965) rotate(-.65deg); }
  to { opacity: 1; transform: translateX(0) scale(1) rotate(0); }
}

.flash-premium-card[class*="flash-color-"] {
  color: #fff;
  isolation: isolate;
}
.flash-premium-card.flash-color-0 { background: radial-gradient(circle at 12% 0%, rgba(255,255,255,.34), transparent 28%), linear-gradient(135deg,#2563eb 0%,#7c3aed 52%,#ec4899 100%) !important; }
.flash-premium-card.flash-color-1 { background: radial-gradient(circle at 12% 0%, rgba(255,255,255,.34), transparent 28%), linear-gradient(135deg,#0891b2 0%,#0d9488 48%,#84cc16 100%) !important; }
.flash-premium-card.flash-color-2 { background: radial-gradient(circle at 12% 0%, rgba(255,255,255,.34), transparent 28%), linear-gradient(135deg,#f97316 0%,#e11d48 52%,#7c3aed 100%) !important; }
.flash-premium-card.flash-color-3 { background: radial-gradient(circle at 12% 0%, rgba(255,255,255,.34), transparent 28%), linear-gradient(135deg,#0f766e 0%,#2563eb 48%,#4f46e5 100%) !important; }
.flash-premium-card.flash-color-4 { background: radial-gradient(circle at 12% 0%, rgba(255,255,255,.34), transparent 28%), linear-gradient(135deg,#9333ea 0%,#db2777 52%,#f59e0b 100%) !important; }
.flash-premium-card.flash-color-5 { background: radial-gradient(circle at 12% 0%, rgba(255,255,255,.34), transparent 28%), linear-gradient(135deg,#1d4ed8 0%,#0f172a 52%,#14b8a6 100%) !important; }
.flash-premium-card[class*="flash-color-"]::after {
  content: "";
  position: absolute;
  inset: auto -12% -24% auto;
  width: 46%;
  height: 52%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.24), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.flash-premium-card[class*="flash-color-"] > * { position: relative; z-index: 1; }
.flash-premium-card[class*="flash-color-"] .flash-media-panel {
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.28) !important;
}
.flash-premium-card[class*="flash-color-"] .flash-game-card {
  background: linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,247,255,.94)) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  transform-style: preserve-3d;
  transition: transform .28s ease, box-shadow .28s ease;
}
.flash-premium-card[class*="flash-color-"] .flash-game-card:hover {
  transform: translateY(-3px) rotateX(1deg);
  box-shadow: 0 26px 76px rgba(0,0,0,.24);
}
.flash-premium-card.is-flipped .flash-game-card {
  animation: quizluckFlashFlipGlow .38s ease both;
}
@keyframes quizluckFlashFlipGlow {
  0% { transform: rotateY(-7deg) scale(.985); }
  58% { transform: rotateY(3deg) scale(1.012); }
  100% { transform: rotateY(0) scale(1); }
}
.flash-premium-card[class*="flash-color-"] .flash-emoji-card {
  animation: quizluckFlashEmojiFloat 3.2s ease-in-out infinite;
}
@keyframes quizluckFlashEmojiFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-9px) rotate(2deg); }
}

@media(max-width:860px){
  .study-card.language-text-only .study-content.kahoot-content,
  .quiz-screen.language-media-disabled .study-content.kahoot-content,
  .learn-screen.language-media-disabled .study-content.kahoot-content {
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .study-card.language-text-only .study-content.kahoot-content > h1,
  .quiz-screen.language-media-disabled .study-content.kahoot-content > h1,
  .learn-screen.language-media-disabled .study-content.kahoot-content > h1 {
    font-size: clamp(22px, 8vw, 44px) !important;
    line-height: 1.02 !important;
    max-width: 100% !important;
  }
  .study-card.language-text-only .study-options.kahoot-options,
  .quiz-screen.language-media-disabled .study-options.kahoot-options,
  .learn-screen.language-media-disabled .study-options.kahoot-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .study-card.language-text-only .study-option.kahoot-option,
  .quiz-screen.language-media-disabled .study-option.kahoot-option,
  .learn-screen.language-media-disabled .study-option.kahoot-option {
    min-height: clamp(78px, 19vh, 136px) !important;
    padding: 10px !important;
  }
}

@media(max-width:520px){
  .study-card.language-text-only .study-options.kahoot-options,
  .quiz-screen.language-media-disabled .study-options.kahoot-options,
  .learn-screen.language-media-disabled .study-options.kahoot-options {
    grid-template-columns: 1fr !important;
  }
  .study-card.language-text-only .study-option.kahoot-option,
  .quiz-screen.language-media-disabled .study-option.kahoot-option,
  .learn-screen.language-media-disabled .study-option.kahoot-option {
    min-height: 56px !important;
    padding: 9px 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flash-animated-deck .flash-slide-animate,
  .flash-premium-card.is-flipped .flash-game-card,
  .flash-premium-card[class*="flash-color-"] .flash-emoji-card {
    animation: none !important;
  }
}


/* Senior admin/data-control upgrade styles */
.admin-control-center-form .admin-settings-group,
.admin-users-control,
.user-detail-card,
.account-danger-zone,
.account-data-control-card,
.senior-admin-summary {
  border: 1px solid rgba(148, 163, 184, .26);
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,246,255,.8));
  border-radius: 24px;
  padding: 18px;
  margin: 16px 0;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
}
.admin-control-center-form h3,
.admin-users-control h2,
.user-detail-card strong { color: var(--text); }
.admin-users-table td { vertical-align: top; }
.admin-user-actions { min-width: 260px; }
.admin-user-actions .small-button { margin: 3px; }
.warning-badge { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.admin-json-detail { margin-top: 18px; border-top: 1px solid rgba(148,163,184,.25); padding-top: 14px; }
.admin-json-detail summary { cursor: pointer; font-weight: 800; color: var(--text); }
.admin-json-detail pre { white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto; padding: 14px; border-radius: 16px; background: rgba(15, 23, 42, .92); color: #e5e7eb; font-size: 12px; }
.account-danger-zone { margin-top: 18px; background: linear-gradient(145deg, #fff7ed, #fff1f2); border-color: #fed7aa; }
.account-data-control-card { background: linear-gradient(145deg, #ffffff, #f8fafc); }
.login-remember-note { text-align: center; margin: 18px auto 0; max-width: 760px; }
.all-posts-edit-note { margin-top: 16px; padding: 14px 16px; border-radius: 16px; border: 1px dashed rgba(37, 99, 235, .35); background: rgba(37, 99, 235, .07); color: var(--text); }
.security-settings-card { background: linear-gradient(145deg, rgba(236,253,245,.95), rgba(239,246,255,.95)); }
@media (max-width: 760px) {
  .admin-user-actions { min-width: 0; display: grid; gap: 8px; }
  .admin-user-actions .small-button { width: 100%; margin: 0; }
  .admin-control-center-form .admin-settings-group { padding: 14px; }
}


/* QuizLuck final flashcard motion: click-to-flip + both-direction slide */
.flash-click-flip-ready .flash-game-card,
.flash-premium-card .flash-game-card,
.flashcard {
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform, opacity, filter !important;
}
.flash-premium-card.flash-flip-out .flash-game-card,
.flashcard.flash-flip-out {
  animation: qlFinalFlashFlipOut .16s cubic-bezier(.42,0,.72,1) forwards !important;
  pointer-events: none !important;
}
.flash-premium-card.flash-flip-enter .flash-game-card,
.flashcard.flash-flip-enter {
  animation: qlFinalFlashFlipIn .30s cubic-bezier(.16,1,.3,1) both !important;
}
.flash-premium-card.is-flipped.flash-flip-enter .flash-game-card,
.flashcard.flipped.flash-flip-enter {
  animation-name: qlFinalFlashFlipInBack !important;
}
@keyframes qlFinalFlashFlipOut {
  0% { opacity: 1; transform: perspective(1100px) rotateY(0deg) scale(1); filter: brightness(1); }
  100% { opacity: .72; transform: perspective(1100px) rotateY(88deg) scale(.965); filter: brightness(1.08); }
}
@keyframes qlFinalFlashFlipIn {
  0% { opacity: .72; transform: perspective(1100px) rotateY(-88deg) scale(.965); filter: brightness(1.08); }
  62% { opacity: 1; transform: perspective(1100px) rotateY(7deg) scale(1.012); filter: brightness(1.02); }
  100% { opacity: 1; transform: perspective(1100px) rotateY(0deg) scale(1); filter: brightness(1); }
}
@keyframes qlFinalFlashFlipInBack {
  0% { opacity: .72; transform: perspective(1100px) rotateY(88deg) scale(.965); filter: brightness(1.08); }
  62% { opacity: 1; transform: perspective(1100px) rotateY(-7deg) scale(1.012); filter: brightness(1.02); }
  100% { opacity: 1; transform: perspective(1100px) rotateY(0deg) scale(1); filter: brightness(1); }
}
.flash-motion-enhanced-deck,
.flash-screen .study-deck.flash-deck {
  overflow: hidden !important;
  position: relative !important;
  touch-action: pan-y !important;
}
.flash-motion-enhanced-deck .flash-slide-animate,
.flash-animated-deck .flash-slide-animate {
  animation: qlFinalFlashSlideRightToLeft .46s cubic-bezier(.16,1,.3,1) both !important;
  will-change: transform, opacity !important;
}
.flash-motion-enhanced-deck[data-flash-direction="prev"] .flash-slide-animate,
.flash-animated-deck[data-flash-direction="prev"] .flash-slide-animate,
.flash-slide-animate[data-flash-direction="prev"] {
  animation-name: qlFinalFlashSlideLeftToRight !important;
}
.flash-motion-enhanced-deck[data-flash-direction="next"] .flash-slide-animate,
.flash-animated-deck[data-flash-direction="next"] .flash-slide-animate,
.flash-slide-animate[data-flash-direction="next"] {
  animation-name: qlFinalFlashSlideRightToLeft !important;
}
@keyframes qlFinalFlashSlideRightToLeft {
  0% { opacity: 0; transform: translateX(92px) scale(.965) rotate(.8deg); }
  62% { opacity: 1; transform: translateX(-7px) scale(1.006) rotate(-.1deg); }
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(0); }
}
@keyframes qlFinalFlashSlideLeftToRight {
  0% { opacity: 0; transform: translateX(-92px) scale(.965) rotate(-.8deg); }
  62% { opacity: 1; transform: translateX(7px) scale(1.006) rotate(.1deg); }
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(0); }
}
.flash-premium-card.flash-click-flip-ready .flash-game-card:active {
  transform: perspective(1100px) scale(.985) rotateX(.6deg) !important;
}
@media (prefers-reduced-motion: reduce) {
  .flash-premium-card.flash-flip-out .flash-game-card,
  .flash-premium-card.flash-flip-enter .flash-game-card,
  .flash-motion-enhanced-deck .flash-slide-animate,
  .flash-animated-deck .flash-slide-animate {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* QuizLuck flashcard no-shake professional motion final
   Only the card flips or slides. No bounce, jitter, hover lift, scale pop, or shake. */
.flash-premium-card.flash-click-flip-ready .flash-game-card,
.flash-premium-card[class*="flash-color-"] .flash-game-card,
.flashcard {
  transition: none !important;
  transform-origin: center center !important;
}
.flash-premium-card[class*="flash-color-"] .flash-game-card:hover,
.flash-premium-card.flash-click-flip-ready .flash-game-card:active,
.flash-premium-card[class*="flash-color-"] .flash-game-card:active {
  transform: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.18) !important;
}
.flash-premium-card.is-flipped .flash-game-card {
  animation: none !important;
}
.flash-premium-card[class*="flash-color-"] .flash-emoji-card {
  animation: none !important;
}
.flash-premium-card.flash-flip-out .flash-game-card,
.flashcard.flash-flip-out {
  animation: qlNoShakeFlashFlipOut .18s cubic-bezier(.4,0,.2,1) forwards !important;
  pointer-events: none !important;
}
.flash-premium-card.flash-flip-enter .flash-game-card,
.flashcard.flash-flip-enter {
  animation: qlNoShakeFlashFlipIn .24s cubic-bezier(.2,.8,.2,1) both !important;
}
.flash-premium-card.is-flipped.flash-flip-enter .flash-game-card,
.flashcard.flipped.flash-flip-enter {
  animation-name: qlNoShakeFlashFlipInBack !important;
}
@keyframes qlNoShakeFlashFlipOut {
  0% { opacity: 1; transform: perspective(1200px) rotateY(0deg); filter: none; }
  100% { opacity: .96; transform: perspective(1200px) rotateY(90deg); filter: none; }
}
@keyframes qlNoShakeFlashFlipIn {
  0% { opacity: .96; transform: perspective(1200px) rotateY(-90deg); filter: none; }
  100% { opacity: 1; transform: perspective(1200px) rotateY(0deg); filter: none; }
}
@keyframes qlNoShakeFlashFlipInBack {
  0% { opacity: .96; transform: perspective(1200px) rotateY(90deg); filter: none; }
  100% { opacity: 1; transform: perspective(1200px) rotateY(0deg); filter: none; }
}
.flash-motion-enhanced-deck .flash-slide-animate,
.flash-animated-deck .flash-slide-animate {
  animation: qlNoShakeSlideRightToLeft .34s cubic-bezier(.22,1,.36,1) both !important;
  will-change: transform, opacity !important;
}
.flash-motion-enhanced-deck[data-flash-direction="prev"] .flash-slide-animate,
.flash-animated-deck[data-flash-direction="prev"] .flash-slide-animate,
.flash-slide-animate[data-flash-direction="prev"] {
  animation-name: qlNoShakeSlideLeftToRight !important;
}
.flash-motion-enhanced-deck[data-flash-direction="next"] .flash-slide-animate,
.flash-animated-deck[data-flash-direction="next"] .flash-slide-animate,
.flash-slide-animate[data-flash-direction="next"] {
  animation-name: qlNoShakeSlideRightToLeft !important;
}
@keyframes qlNoShakeSlideRightToLeft {
  0% { opacity: 0; transform: translate3d(64px,0,0); }
  100% { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes qlNoShakeSlideLeftToRight {
  0% { opacity: 0; transform: translate3d(-64px,0,0); }
  100% { opacity: 1; transform: translate3d(0,0,0); }
}

/* QuizLuck guaranteed flashcard flip 100% final
   Professional flip remains active; no shake, bounce, scale pop, or hover jump. */
.flash-premium-card.flash-click-flip-ready .flash-game-card,
.flashcard.flash-click-flip-ready,
.flash-game-card {
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-origin: center center !important;
}
.flash-premium-card.ql-flip-100-out .flash-game-card,
.flash-premium-card.flash-flip-out .flash-game-card,
.flashcard.ql-flip-100-out,
.flashcard.flash-flip-out {
  animation: qlFlip100Out .17s cubic-bezier(.4,0,.2,1) forwards !important;
  transition: none !important;
}
.flash-premium-card.ql-flip-100-enter .flash-game-card,
.flash-premium-card.flash-flip-enter .flash-game-card,
.flashcard.ql-flip-100-enter,
.flashcard.flash-flip-enter {
  animation: qlFlip100InFront .28s cubic-bezier(.2,.8,.2,1) both !important;
  transition: none !important;
}
.flash-premium-card.is-flipped.ql-flip-100-enter .flash-game-card,
.flash-premium-card.is-flipped.flash-flip-enter .flash-game-card,
.flashcard.flipped.ql-flip-100-enter,
.flashcard.flipped.flash-flip-enter {
  animation-name: qlFlip100InBack !important;
}
.flash-premium-card.flash-click-flip-ready .flash-game-card:hover,
.flash-premium-card.flash-click-flip-ready .flash-game-card:active,
.flash-premium-card[class*="flash-color-"] .flash-game-card:hover,
.flash-premium-card[class*="flash-color-"] .flash-game-card:active {
  transform: none !important;
}
@keyframes qlFlip100Out {
  0% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
  100% { opacity: .98; transform: perspective(1200px) rotateY(90deg); }
}
@keyframes qlFlip100InFront {
  0% { opacity: .98; transform: perspective(1200px) rotateY(-90deg); }
  100% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
}
@keyframes qlFlip100InBack {
  0% { opacity: .98; transform: perspective(1200px) rotateY(90deg); }
  100% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
}

/* QuizLuck flashcard frame-locked motion final
   The outer flashcard frame never moves. Only the inner card face flips or slides. */
.flash-screen #studyDeck.flash-deck,
.flash-motion-enhanced-deck,
.flash-animated-deck {
  overflow: hidden !important;
  perspective: 1200px !important;
}

.flash-screen .flash-study-slide,
.flash-motion-enhanced-deck .flash-study-slide,
.flash-animated-deck .flash-study-slide,
.flash-screen .flash-premium-card,
.flash-screen .study-card.flash-premium-card {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  rotate: 0deg !important;
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}

.flash-motion-enhanced-deck .flash-study-slide.flash-slide-animate,
.flash-animated-deck .flash-study-slide.flash-slide-animate,
.flash-study-slide.flash-slide-animate {
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}

.flash-motion-enhanced-deck .flash-study-slide.flash-slide-animate .flash-game-card,
.flash-animated-deck .flash-study-slide.flash-slide-animate .flash-game-card,
.flash-study-slide.flash-slide-animate .flash-game-card {
  animation: qlFrameLockedInnerSlideRightToLeft .32s cubic-bezier(.22,1,.36,1) both !important;
  transform-origin: center center !important;
  will-change: transform, opacity !important;
}

.flash-motion-enhanced-deck[data-flash-direction="prev"] .flash-study-slide.flash-slide-animate .flash-game-card,
.flash-animated-deck[data-flash-direction="prev"] .flash-study-slide.flash-slide-animate .flash-game-card,
.flash-study-slide.flash-slide-animate[data-flash-direction="prev"] .flash-game-card {
  animation-name: qlFrameLockedInnerSlideLeftToRight !important;
}

.flash-motion-enhanced-deck[data-flash-direction="next"] .flash-study-slide.flash-slide-animate .flash-game-card,
.flash-animated-deck[data-flash-direction="next"] .flash-study-slide.flash-slide-animate .flash-game-card,
.flash-study-slide.flash-slide-animate[data-flash-direction="next"] .flash-game-card {
  animation-name: qlFrameLockedInnerSlideRightToLeft !important;
}

@keyframes qlFrameLockedInnerSlideRightToLeft {
  0% { opacity: 0; transform: perspective(1200px) translate3d(42px,0,0); }
  100% { opacity: 1; transform: perspective(1200px) translate3d(0,0,0); }
}
@keyframes qlFrameLockedInnerSlideLeftToRight {
  0% { opacity: 0; transform: perspective(1200px) translate3d(-42px,0,0); }
  100% { opacity: 1; transform: perspective(1200px) translate3d(0,0,0); }
}

.flash-premium-card.ql-flip-100-out .flash-game-card,
.flash-premium-card.flash-flip-out .flash-game-card,
.flashcard.ql-flip-100-out,
.flashcard.flash-flip-out {
  animation: qlFrameLockedFlipOut .17s cubic-bezier(.4,0,.2,1) forwards !important;
  transition: none !important;
}
.flash-premium-card.ql-flip-100-enter .flash-game-card,
.flash-premium-card.flash-flip-enter .flash-game-card,
.flashcard.ql-flip-100-enter,
.flashcard.flash-flip-enter {
  animation: qlFrameLockedFlipInFront .28s cubic-bezier(.2,.8,.2,1) both !important;
  transition: none !important;
}
.flash-premium-card.is-flipped.ql-flip-100-enter .flash-game-card,
.flash-premium-card.is-flipped.flash-flip-enter .flash-game-card,
.flashcard.flipped.ql-flip-100-enter,
.flashcard.flipped.flash-flip-enter {
  animation-name: qlFrameLockedFlipInBack !important;
}
@keyframes qlFrameLockedFlipOut {
  0% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
  100% { opacity: .98; transform: perspective(1200px) rotateY(90deg); }
}
@keyframes qlFrameLockedFlipInFront {
  0% { opacity: .98; transform: perspective(1200px) rotateY(-90deg); }
  100% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
}
@keyframes qlFrameLockedFlipInBack {
  0% { opacity: .98; transform: perspective(1200px) rotateY(90deg); }
  100% { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
}

.flash-premium-card.flash-click-flip-ready .flash-game-card:hover,
.flash-premium-card.flash-click-flip-ready .flash-game-card:active,
.flash-premium-card[class*="flash-color-"] .flash-game-card:hover,
.flash-premium-card[class*="flash-color-"] .flash-game-card:active {
  transform: none !important;
}

/* --------------------------------------------------------------------------
 * QuizLuck final mobile/tablet study toolbar fix
 * Keeps Premium + explanation + language controls inside the screen.
 * Prevents the bar from overlapping the close button, progress pill, or content.
 * -------------------------------------------------------------------------- */
.student-study-toolbar,
.student-study-toolbar.premium-member-toolbar,
.student-study-toolbar.pro-access.premium-member-toolbar,
.student-study-toolbar.gold-premium-study-toolbar {
  box-sizing: border-box !important;
  max-width: calc(100vw - 120px) !important;
  max-height: none !important;
  overflow: visible !important;
}

.student-study-toolbar > *,
.student-study-toolbar .mini-switch-row,
.student-study-toolbar .mini-lang-row,
.student-study-toolbar .premium-member-badge,
.student-study-toolbar .toolbar-premium-member,
.student-study-toolbar .gold-study-premium-badge {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.student-study-toolbar .mini-switch-row,
.student-study-toolbar .mini-lang-row {
  white-space: nowrap !important;
  flex-shrink: 1 !important;
}

.student-study-toolbar .mini-lang-row select,
.student-study-toolbar select[data-student-language] {
  max-width: 100% !important;
  text-overflow: ellipsis !important;
}

@media (min-width: 721px) and (max-width: 999px) {
  .quiz-screen .student-study-toolbar,
  .learn-screen .student-study-toolbar,
  .flash-screen .student-study-toolbar,
  .quiz-screen .student-study-toolbar.premium-member-toolbar,
  .learn-screen .student-study-toolbar.premium-member-toolbar,
  .flash-screen .student-study-toolbar.premium-member-toolbar,
  .quiz-screen .student-study-toolbar.gold-premium-study-toolbar,
  .learn-screen .student-study-toolbar.gold-premium-study-toolbar,
  .flash-screen .student-study-toolbar.gold-premium-study-toolbar {
    top: calc(env(safe-area-inset-top) + 10px) !important;
    left: calc(env(safe-area-inset-left) + 86px) !important;
    right: calc(env(safe-area-inset-right) + 12px) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 58px !important;
    padding: 7px 9px !important;
    display: grid !important;
    grid-template-columns: minmax(170px, 1fr) max-content minmax(150px, 190px) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 8px !important;
    border-radius: 24px !important;
    overflow: visible !important;
  }

  .student-study-toolbar.premium-member-toolbar .toolbar-premium-member,
  .student-study-toolbar.gold-premium-study-toolbar .gold-study-premium-badge,
  .student-study-toolbar .premium-member-badge.toolbar-premium-member {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    justify-content: center !important;
    padding: 0 14px !important;
    border-radius: 22px !important;
    font-size: clamp(15px, 2.4vw, 20px) !important;
  }

  .student-study-toolbar .toolbar-premium-member .premium-member-initial,
  .student-study-toolbar .premium-member-badge .premium-member-initial {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 1rem !important;
  }

  .student-study-toolbar .mini-switch-row,
  .student-study-toolbar .mini-lang-row {
    min-height: 42px !important;
    height: 42px !important;
    justify-content: center !important;
    font-size: 14px !important;
    gap: 7px !important;
  }

  .student-study-toolbar .mini-switch-row i {
    width: 48px !important;
    height: 28px !important;
  }

  .student-study-toolbar .mini-switch-row i::after {
    width: 20px !important;
    height: 20px !important;
    top: 4px !important;
    left: 4px !important;
  }

  .student-study-toolbar .mini-switch-row input:checked + i::after {
    transform: translateX(20px) !important;
  }

  .student-study-toolbar .mini-lang-row select,
  .student-study-toolbar select[data-student-language] {
    min-width: 112px !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 22px !important;
    font-size: 15px !important;
    padding: 0 34px 0 14px !important;
  }

  .quiz-screen .study-session-pill,
  .learn-screen .study-session-pill,
  .flash-screen .study-session-pill {
    top: calc(env(safe-area-inset-top) + 84px) !important;
  }

  .quiz-screen .study-progress-line,
  .learn-screen .study-progress-line,
  .flash-screen .study-progress-line {
    top: calc(env(safe-area-inset-top) + 92px) !important;
  }

  .quiz-screen .study-slide,
  .learn-screen .study-slide,
  .flash-screen .study-slide {
    padding-top: calc(env(safe-area-inset-top) + 122px) !important;
  }

  .quiz-screen .study-card.kahoot-card,
  .learn-screen .study-card.kahoot-card {
    height: calc(100dvh - 142px) !important;
  }
}

@media (max-width: 720px) {
  .quiz-screen .study-close,
  .learn-screen .study-close,
  .flash-screen .study-close {
    top: calc(env(safe-area-inset-top) + 10px) !important;
    left: calc(env(safe-area-inset-left) + 10px) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 20px !important;
    z-index: 95 !important;
  }

  .quiz-screen .student-study-toolbar,
  .learn-screen .student-study-toolbar,
  .flash-screen .student-study-toolbar,
  .quiz-screen .student-study-toolbar.premium-member-toolbar,
  .learn-screen .student-study-toolbar.premium-member-toolbar,
  .flash-screen .student-study-toolbar.premium-member-toolbar,
  .quiz-screen .student-study-toolbar.gold-premium-study-toolbar,
  .learn-screen .student-study-toolbar.gold-premium-study-toolbar,
  .flash-screen .student-study-toolbar.gold-premium-study-toolbar {
    top: calc(env(safe-area-inset-top) + 8px) !important;
    left: calc(env(safe-area-inset-left) + 68px) !important;
    right: calc(env(safe-area-inset-right) + 8px) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 6px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(118px, 38%) !important;
    grid-auto-rows: minmax(38px, auto) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 7px !important;
    border-radius: 22px !important;
    overflow: visible !important;
  }

  .student-study-toolbar.premium-member-toolbar .toolbar-premium-member,
  .student-study-toolbar.gold-premium-study-toolbar .gold-study-premium-badge,
  .student-study-toolbar .premium-member-badge.toolbar-premium-member {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 24px !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 12px !important;
    font-size: clamp(17px, 5vw, 24px) !important;
    line-height: 1 !important;
  }

  .student-study-toolbar .toolbar-premium-member .premium-member-initial,
  .student-study-toolbar .premium-member-badge .premium-member-initial {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 1rem !important;
  }

  .student-study-toolbar .mini-switch-row,
  .student-study-toolbar .mini-lang-row {
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    justify-content: center !important;
    font-size: 13px !important;
    gap: 6px !important;
  }

  .student-study-toolbar .mini-switch-row {
    grid-column: 1 !important;
  }

  .student-study-toolbar .mini-lang-row {
    grid-column: 2 !important;
  }

  .student-study-toolbar .mini-switch-row i {
    width: 42px !important;
    height: 25px !important;
    flex: 0 0 auto !important;
  }

  .student-study-toolbar .mini-switch-row i::after {
    width: 19px !important;
    height: 19px !important;
    top: 3px !important;
    left: 3px !important;
  }

  .student-study-toolbar .mini-switch-row input:checked + i::after {
    transform: translateX(17px) !important;
  }

  .student-study-toolbar .mini-lang-row select,
  .student-study-toolbar select[data-student-language] {
    min-width: 104px !important;
    width: 100% !important;
    max-width: 136px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    padding: 0 30px 0 12px !important;
  }

  .quiz-screen .study-ad-slot,
  .learn-screen .study-ad-slot,
  .flash-screen .study-ad-slot {
    top: calc(env(safe-area-inset-top) + 126px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(320px, calc(100vw - 20px)) !important;
    height: 36px !important;
    opacity: .78 !important;
  }

  .quiz-screen .study-session-pill,
  .learn-screen .study-session-pill,
  .flash-screen .study-session-pill {
    top: calc(env(safe-area-inset-top) + 126px) !important;
    right: calc(env(safe-area-inset-right) + 10px) !important;
    max-width: calc(100vw - 20px) !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
  }

  .quiz-screen .study-progress-line,
  .learn-screen .study-progress-line,
  .flash-screen .study-progress-line {
    top: calc(env(safe-area-inset-top) + 164px) !important;
    left: 10px !important;
    right: 10px !important;
  }

  .quiz-screen .study-slide,
  .learn-screen .study-slide,
  .flash-screen .study-slide {
    padding-top: calc(env(safe-area-inset-top) + 184px) !important;
  }

  .quiz-screen .study-card.kahoot-card,
  .learn-screen .study-card.kahoot-card {
    height: calc(100dvh - 200px) !important;
  }

  .flash-screen .flash-premium-card {
    height: calc(100dvh - 196px) !important;
  }
}

@media (max-width: 390px) {
  .student-study-toolbar .mini-switch-row span,
  .student-study-toolbar .mini-lang-row span {
    display: none !important;
  }

  .quiz-screen .student-study-toolbar,
  .learn-screen .student-study-toolbar,
  .flash-screen .student-study-toolbar {
    grid-template-columns: minmax(0, .9fr) minmax(104px, 1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   Final global professional header lock: same header on every SPA page.
   Mobile/tablet shows logo + dark toggle + menu only; desktop keeps logo,
   search, navigation, account, and theme in one polished shell.
   -------------------------------------------------------------------------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.shell-header.universal-header,
.shell-header.hybrid-header {
  position: sticky !important;
  top: 8px !important;
  z-index: 5000 !important;
  width: min(1380px, calc(100% - 28px)) !important;
  max-width: min(1380px, calc(100% - 28px)) !important;
  margin: 8px auto 0 !important;
  min-height: 78px !important;
  padding: 12px clamp(14px, 2vw, 22px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  border: 1px solid rgba(219, 229, 244, .92) !important;
  border-radius: 30px !important;
  background: color-mix(in srgb, var(--surface, #ffffff) 92%, transparent) !important;
  box-shadow: 0 18px 55px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter: blur(20px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.22) !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .shell-header.universal-header,
[data-theme="dark"] .shell-header.hybrid-header,
html.dark .shell-header.universal-header,
html.dark .shell-header.hybrid-header,
body.dark .shell-header.universal-header,
body.dark .shell-header.hybrid-header {
  border-color: rgba(71, 85, 105, .72) !important;
  background: color-mix(in srgb, var(--surface, #101c31) 90%, transparent) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.shell-header.universal-header .brand,
.shell-header.hybrid-header .brand,
.shell-header.universal-header .hybrid-brand,
.shell-header.hybrid-header .hybrid-brand {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.shell-header.universal-header .brand-logo-img,
.shell-header.hybrid-header .brand-logo-img {
  width: clamp(150px, 16vw, 198px) !important;
  height: auto !important;
  max-height: 58px !important;
  object-fit: contain !important;
}

.shell-header.universal-header .hybrid-mobile-controls,
.shell-header.hybrid-header .hybrid-mobile-controls,
.shell-header.universal-header .universal-mobile-controls,
.shell-header.hybrid-header .universal-mobile-controls {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

.shell-header.universal-header .icon-button,
.shell-header.hybrid-header .icon-button,
.shell-header.universal-header .mobile-theme-toggle,
.shell-header.hybrid-header .mobile-theme-toggle,
.shell-header.universal-header .hybrid-nav-toggle,
.shell-header.hybrid-header .hybrid-nav-toggle,
.shell-header.universal-header .nav-toggle,
.shell-header.hybrid-header .nav-toggle {
  flex: 0 0 auto !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 22px !important;
  border: 1px solid color-mix(in srgb, var(--line, #dbe5f4) 86%, var(--primary, #2563eb)) !important;
  background: color-mix(in srgb, var(--surface, #ffffff) 95%, transparent) !important;
  color: var(--text, #0f172a) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08) !important;
  font-size: 1.5rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
}

.shell-header.universal-header .icon-button:hover,
.shell-header.hybrid-header .icon-button:hover,
.shell-header.universal-header .nav-toggle:hover,
.shell-header.hybrid-header .nav-toggle:hover,
.shell-header.universal-header .mobile-theme-toggle:hover,
.shell-header.hybrid-header .mobile-theme-toggle:hover {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--primary, #2563eb) 38%, var(--line, #dbe5f4)) !important;
}

@media (max-width: 999px) {
  .shell-header.universal-header,
  .shell-header.hybrid-header {
    top: 6px !important;
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    min-height: 86px !important;
    padding: 13px 16px !important;
    border-radius: 30px !important;
    gap: 10px !important;
  }

  .shell-header.universal-header .brand-logo-img,
  .shell-header.hybrid-header .brand-logo-img {
    width: clamp(154px, 46vw, 230px) !important;
    max-height: 60px !important;
  }

  .single-spa-ui .global-header-search-spa,
  .global-header-search-spa {
    display: none !important;
  }

  .shell-header.universal-header .top-nav.universal-nav,
  .shell-header.hybrid-header .top-nav.hybrid-nav,
  .shell-header.universal-header .top-nav,
  .shell-header.hybrid-header .top-nav {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: min(88vw, 430px) !important;
    max-width: min(88vw, 430px) !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: translateX(106%) !important;
    transition: transform .22s ease !important;
    overflow: visible !important;
    z-index: 6000 !important;
  }

  .shell-header.universal-header .top-nav.universal-nav.open,
  .shell-header.hybrid-header .top-nav.hybrid-nav.open,
  .shell-header.universal-header .top-nav.open,
  .shell-header.hybrid-header .top-nav.open {
    transform: translateX(0) !important;
  }

  .shell-header.universal-header .top-nav.universal-nav > a,
  .shell-header.hybrid-header .top-nav.hybrid-nav > a,
  .shell-header.universal-header .top-nav.universal-nav > button,
  .shell-header.hybrid-header .top-nav.hybrid-nav > button,
  .shell-header.universal-header .top-nav.universal-nav > .user-menu-shell,
  .shell-header.hybrid-header .top-nav.hybrid-nav > .user-menu-shell {
    display: none !important;
  }

  .app-shell {
    padding-top: clamp(1.1rem, 3vw, 1.6rem) !important;
  }
}

@media (max-width: 520px) {
  .shell-header.universal-header,
  .shell-header.hybrid-header {
    min-height: 78px !important;
    padding: 10px 12px !important;
    border-radius: 26px !important;
  }

  .shell-header.universal-header .brand-logo-img,
  .shell-header.hybrid-header .brand-logo-img {
    width: clamp(132px, 48vw, 178px) !important;
    max-height: 52px !important;
  }

  .shell-header.universal-header .icon-button,
  .shell-header.hybrid-header .icon-button,
  .shell-header.universal-header .mobile-theme-toggle,
  .shell-header.hybrid-header .mobile-theme-toggle,
  .shell-header.universal-header .hybrid-nav-toggle,
  .shell-header.hybrid-header .hybrid-nav-toggle,
  .shell-header.universal-header .nav-toggle,
  .shell-header.hybrid-header .nav-toggle {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    border-radius: 20px !important;
    font-size: 1.35rem !important;
  }

  .shell-header.universal-header .hybrid-mobile-controls,
  .shell-header.hybrid-header .hybrid-mobile-controls,
  .shell-header.universal-header .universal-mobile-controls,
  .shell-header.hybrid-header .universal-mobile-controls {
    gap: 10px !important;
  }
}

@media (min-width: 1000px) {
  .shell-header.universal-header,
  .shell-header.hybrid-header {
    top: 10px !important;
  }

  .shell-header.universal-header .nav-toggle,
  .shell-header.hybrid-header .nav-toggle,
  .shell-header.universal-header .hybrid-nav-toggle,
  .shell-header.hybrid-header .hybrid-nav-toggle {
    display: none !important;
  }

  .shell-header.universal-header .top-nav.universal-nav,
  .shell-header.hybrid-header .top-nav.hybrid-nav,
  .shell-header.universal-header .top-nav,
  .shell-header.hybrid-header .top-nav {
    position: static !important;
    transform: none !important;
    height: auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    gap: 5px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .shell-header.universal-header .top-nav::-webkit-scrollbar,
  .shell-header.hybrid-header .top-nav::-webkit-scrollbar {
    display: none !important;
  }

  .shell-header.universal-header .mobile-theme-toggle,
  .shell-header.hybrid-header .mobile-theme-toggle {
    display: none !important;
  }

  .shell-header.universal-header #themeToggle,
  .shell-header.hybrid-header #themeToggle {
    display: inline-grid !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 16px !important;
    font-size: 1.1rem !important;
  }

  .single-spa-ui .global-header-search-spa,
  .global-header-search-spa {
    display: flex !important;
    flex: 1 1 260px !important;
    max-width: 360px !important;
  }
}

/* --------------------------------------------------------------------------
 * Final compact study toolbar: mobile/tablet uses the same one-row PC style.
 * Premium, explanation, and language stay small, professional, and in one row.
 * -------------------------------------------------------------------------- */
@media (max-width: 999px) {
  .quiz-screen .student-study-toolbar,
  .learn-screen .student-study-toolbar,
  .flash-screen .student-study-toolbar,
  .quiz-screen .student-study-toolbar.premium-member-toolbar,
  .learn-screen .student-study-toolbar.premium-member-toolbar,
  .flash-screen .student-study-toolbar.premium-member-toolbar,
  .quiz-screen .student-study-toolbar.gold-premium-study-toolbar,
  .learn-screen .student-study-toolbar.gold-premium-study-toolbar,
  .flash-screen .student-study-toolbar.gold-premium-study-toolbar {
    top: calc(env(safe-area-inset-top) + 10px) !important;
    left: calc(env(safe-area-inset-left) + 86px) !important;
    right: calc(env(safe-area-inset-right) + 12px) !important;
    width: auto !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  .student-study-toolbar.premium-member-toolbar .toolbar-premium-member,
  .student-study-toolbar.gold-premium-study-toolbar .gold-study-premium-badge,
  .student-study-toolbar .premium-member-badge.toolbar-premium-member {
    grid-column: auto !important;
    width: auto !important;
    min-width: 150px !important;
    max-width: 220px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 1 1 170px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: clamp(16px, 2.4vw, 20px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .student-study-toolbar .toolbar-premium-member .premium-member-initial,
  .student-study-toolbar .premium-member-badge .premium-member-initial {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 1rem !important;
  }

  .student-study-toolbar .mini-switch-row,
  .student-study-toolbar .mini-lang-row {
    grid-column: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .student-study-toolbar .mini-switch-row i {
    width: 46px !important;
    height: 28px !important;
    flex: 0 0 46px !important;
  }
  .student-study-toolbar .mini-switch-row i::after {
    width: 20px !important;
    height: 20px !important;
    top: 4px !important;
    left: 4px !important;
  }
  .student-study-toolbar .mini-switch-row input:checked + i::after {
    transform: translateX(18px) !important;
  }

  .student-study-toolbar .mini-lang-row select,
  .student-study-toolbar select[data-student-language] {
    min-width: 118px !important;
    width: 132px !important;
    max-width: 132px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    padding: 0 34px 0 14px !important;
  }

  .quiz-screen .study-session-pill,
  .learn-screen .study-session-pill,
  .flash-screen .study-session-pill {
    top: calc(env(safe-area-inset-top) + 76px) !important;
  }
  .quiz-screen .study-progress-line,
  .learn-screen .study-progress-line,
  .flash-screen .study-progress-line {
    top: calc(env(safe-area-inset-top) + 86px) !important;
  }
  .quiz-screen .study-slide,
  .learn-screen .study-slide,
  .flash-screen .study-slide {
    padding-top: calc(env(safe-area-inset-top) + 116px) !important;
  }
  .quiz-screen .study-card.kahoot-card,
  .learn-screen .study-card.kahoot-card {
    height: calc(100dvh - 136px) !important;
  }
  .flash-screen .flash-premium-card {
    height: calc(100dvh - 132px) !important;
  }
}

@media (max-width: 720px) {
  .quiz-screen .study-close,
  .learn-screen .study-close,
  .flash-screen .study-close {
    top: calc(env(safe-area-inset-top) + 9px) !important;
    left: calc(env(safe-area-inset-left) + 9px) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 20px !important;
  }

  .quiz-screen .student-study-toolbar,
  .learn-screen .student-study-toolbar,
  .flash-screen .student-study-toolbar,
  .quiz-screen .student-study-toolbar.premium-member-toolbar,
  .learn-screen .student-study-toolbar.premium-member-toolbar,
  .flash-screen .student-study-toolbar.premium-member-toolbar,
  .quiz-screen .student-study-toolbar.gold-premium-study-toolbar,
  .learn-screen .student-study-toolbar.gold-premium-study-toolbar,
  .flash-screen .student-study-toolbar.gold-premium-study-toolbar {
    top: calc(env(safe-area-inset-top) + 9px) !important;
    left: calc(env(safe-area-inset-left) + 68px) !important;
    right: calc(env(safe-area-inset-right) + 8px) !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 5px !important;
    gap: 5px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  .student-study-toolbar .mini-switch-row span,
  .student-study-toolbar .mini-lang-row span {
    display: none !important;
  }

  .student-study-toolbar.premium-member-toolbar .toolbar-premium-member,
  .student-study-toolbar.gold-premium-study-toolbar .gold-study-premium-badge,
  .student-study-toolbar .premium-member-badge.toolbar-premium-member {
    min-width: 98px !important;
    max-width: 138px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: 1 1 112px !important;
    gap: 7px !important;
    padding: 0 9px !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
  }

  .student-study-toolbar .toolbar-premium-member .premium-member-initial,
  .student-study-toolbar .premium-member-badge .premium-member-initial {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: .9rem !important;
  }

  .student-study-toolbar .mini-switch-row {
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 4px !important;
  }
  .student-study-toolbar .mini-switch-row i {
    width: 42px !important;
    height: 25px !important;
    flex: 0 0 42px !important;
  }
  .student-study-toolbar .mini-switch-row i::after {
    width: 19px !important;
    height: 19px !important;
    top: 3px !important;
    left: 3px !important;
  }
  .student-study-toolbar .mini-switch-row input:checked + i::after {
    transform: translateX(17px) !important;
  }

  .student-study-toolbar .mini-lang-row {
    flex: 0 0 98px !important;
    width: 98px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
  }
  .student-study-toolbar .mini-lang-row select,
  .student-study-toolbar select[data-student-language] {
    min-width: 0 !important;
    width: 98px !important;
    max-width: 98px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    padding: 0 26px 0 10px !important;
  }

  .quiz-screen .study-ad-slot,
  .learn-screen .study-ad-slot,
  .flash-screen .study-ad-slot {
    top: calc(env(safe-area-inset-top) + 72px) !important;
  }
  .quiz-screen .study-session-pill,
  .learn-screen .study-session-pill,
  .flash-screen .study-session-pill {
    top: calc(env(safe-area-inset-top) + 72px) !important;
    right: calc(env(safe-area-inset-right) + 10px) !important;
  }
  .quiz-screen .study-progress-line,
  .learn-screen .study-progress-line,
  .flash-screen .study-progress-line {
    top: calc(env(safe-area-inset-top) + 110px) !important;
  }
  .quiz-screen .study-slide,
  .learn-screen .study-slide,
  .flash-screen .study-slide {
    padding-top: calc(env(safe-area-inset-top) + 132px) !important;
  }
  .quiz-screen .study-card.kahoot-card,
  .learn-screen .study-card.kahoot-card {
    height: calc(100dvh - 148px) !important;
  }
  .flash-screen .flash-premium-card {
    height: calc(100dvh - 146px) !important;
  }
}

@media (max-width: 380px) {
  .student-study-toolbar.premium-member-toolbar .toolbar-premium-member,
  .student-study-toolbar.gold-premium-study-toolbar .gold-study-premium-badge,
  .student-study-toolbar .premium-member-badge.toolbar-premium-member {
    min-width: 88px !important;
    flex-basis: 92px !important;
    padding: 0 7px !important;
    font-size: 14px !important;
  }
  .student-study-toolbar .toolbar-premium-member .premium-member-initial,
  .student-study-toolbar .premium-member-badge .premium-member-initial {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: .82rem !important;
  }
  .student-study-toolbar .mini-switch-row { flex-basis: 48px !important; width: 48px !important; }
  .student-study-toolbar .mini-switch-row i { width: 38px !important; height: 24px !important; flex-basis: 38px !important; }
  .student-study-toolbar .mini-switch-row input:checked + i::after { transform: translateX(14px) !important; }
  .student-study-toolbar .mini-lang-row { flex-basis: 90px !important; width: 90px !important; }
  .student-study-toolbar .mini-lang-row select,
  .student-study-toolbar select[data-student-language] { width: 90px !important; max-width: 90px !important; font-size: 13px !important; }
}

/* QuizLuck final responsive option safety: answer options must never be clipped/hidden on any screen. */
.study-card.kahoot-card {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
}
.study-card.kahoot-card::-webkit-scrollbar { display: none !important; }

.study-content.kahoot-content {
  min-height: 0 !important;
  overflow: visible !important;
  align-content: stretch !important;
  grid-template-rows: minmax(0, clamp(42px, 9dvh, 112px)) minmax(62px, auto) minmax(128px, auto) !important;
  gap: clamp(.38rem, .75vw, .62rem) !important;
}

.study-content.kahoot-content.language-text-only,
.study-card.kahoot-card.language-text-only .study-content.kahoot-content {
  grid-template-rows: minmax(82px, auto) minmax(146px, auto) !important;
}

.study-content.kahoot-content > h1,
.study-question {
  min-height: 0 !important;
  max-height: clamp(96px, 30dvh, 260px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  padding: clamp(.58rem, 1.05vw, .95rem) clamp(.72rem, 1.35vw, 1.15rem) !important;
  letter-spacing: -.032em !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

.study-content.kahoot-content > h1.text-md,
.study-question.text-md { font-size: clamp(1.2rem, 2.35vw, 2.05rem) !important; line-height: 1.08 !important; }
.study-content.kahoot-content > h1.text-lg,
.study-question.text-lg { font-size: clamp(1.05rem, 1.95vw, 1.65rem) !important; line-height: 1.1 !important; }
.study-content.kahoot-content > h1.text-xl,
.study-question.text-xl { font-size: clamp(.92rem, 1.55vw, 1.28rem) !important; line-height: 1.13 !important; }
.study-content.kahoot-content > h1.text-xxl,
.study-question.text-xxl { font-size: clamp(.82rem, 1.25vw, 1.06rem) !important; line-height: 1.16 !important; letter-spacing: -.012em !important; }

.study-options.kahoot-options {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-self: stretch !important;
  align-content: start !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(clamp(50px, 6.3dvh, 76px), auto) !important;
  gap: clamp(.32rem, .7vw, .58rem) !important;
}

.study-option.kahoot-option {
  min-width: 0 !important;
  width: 100% !important;
  min-height: clamp(50px, 6.3dvh, 76px) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: clamp(.34rem, .65vw, .55rem) clamp(.46rem, .85vw, .75rem) !important;
  border-radius: 10px !important;
  font-size: clamp(.82rem, 1.38vw, 1.08rem) !important;
  line-height: 1.08 !important;
}

.option-label,
.study-option.kahoot-option .option-label {
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.option-label strong,
.study-option.kahoot-option .option-label strong,
.study-option.kahoot-option .dual-option-text,
.study-option.kahoot-option .dual-option-text span {
  max-width: 100% !important;
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
  line-height: 1.08 !important;
}

.option-text-lg strong { font-size: .9em !important; }
.option-text-xl strong { font-size: .78em !important; line-height: 1.12 !important; }
.option-text-xxl strong { font-size: .68em !important; line-height: 1.14 !important; }

/* Landscape and tablet safety: keep the four option boxes visible above the action row. */
@media (max-height: 850px) and (min-width: 761px) {
  .study-slide {
    padding-top: calc(env(safe-area-inset-top) + 86px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px) !important;
  }

  .study-card.kahoot-card {
    height: min(720px, calc(100dvh - 108px)) !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  .study-card-head.compact {
    min-height: 30px !important;
  }

  .mini-brand,
  .study-count {
    min-height: 30px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: .88rem !important;
  }

  .study-content.kahoot-content {
    grid-template-rows: minmax(0, clamp(0px, 7dvh, 62px)) minmax(48px, auto) minmax(110px, auto) !important;
    gap: 6px !important;
  }

  .study-content.kahoot-content.language-text-only,
  .study-card.kahoot-card.language-text-only .study-content.kahoot-content {
    grid-template-rows: minmax(58px, auto) minmax(112px, auto) !important;
  }

  .study-media,
  .study-media.no-image {
    min-height: 38px !important;
    max-height: 62px !important;
    width: min(220px, 36%) !important;
    padding: 2px !important;
  }

  .study-media.has-image .question-image,
  .study-media img { max-height: 58px !important; }

  .study-content.kahoot-content > h1,
  .study-question {
    max-height: 25dvh !important;
    padding: 8px 10px !important;
  }

  .study-content.kahoot-content > h1.text-md,
  .study-question.text-md { font-size: clamp(1.06rem, 2vw, 1.7rem) !important; }
  .study-content.kahoot-content > h1.text-lg,
  .study-question.text-lg { font-size: clamp(.94rem, 1.6vw, 1.35rem) !important; }
  .study-content.kahoot-content > h1.text-xl,
  .study-question.text-xl { font-size: clamp(.82rem, 1.28vw, 1.08rem) !important; }
  .study-content.kahoot-content > h1.text-xxl,
  .study-question.text-xxl { font-size: clamp(.74rem, 1.08vw, .92rem) !important; }

  .study-options.kahoot-options {
    grid-auto-rows: minmax(clamp(42px, 6.8dvh, 58px), auto) !important;
    gap: 6px !important;
  }

  .study-option.kahoot-option {
    min-height: clamp(42px, 6.8dvh, 58px) !important;
    padding: 4px 7px !important;
    font-size: clamp(.74rem, 1.15vw, .92rem) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.16), 0 6px 12px rgba(0,0,0,.10) !important;
  }

  .study-bottom-actions.clean-actions.final-study-actions {
    min-height: 42px !important;
    padding: 5px 8px !important;
  }

  .study-bottom-actions.clean-actions.final-study-actions button {
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
  }
}

/* Mobile safety: compact question + two-by-two answers; no answer is clipped behind the bottom buttons. */
@media (max-width: 760px) {
  .study-card.kahoot-card {
    height: min(760px, calc(100dvh - 122px)) !important;
    overflow-y: auto !important;
  }

  .study-content.kahoot-content {
    grid-template-rows: minmax(0, clamp(0px, 8dvh, 70px)) minmax(66px, auto) minmax(156px, auto) !important;
    gap: 6px !important;
  }

  .study-content.kahoot-content.language-text-only,
  .study-card.kahoot-card.language-text-only .study-content.kahoot-content {
    grid-template-rows: minmax(74px, auto) minmax(168px, auto) !important;
  }

  .study-content.kahoot-content > h1,
  .study-question {
    max-height: 28dvh !important;
    padding: 8px 10px !important;
  }

  .study-content.kahoot-content > h1.text-md,
  .study-question.text-md { font-size: clamp(.98rem, 4.2vw, 1.38rem) !important; }
  .study-content.kahoot-content > h1.text-lg,
  .study-question.text-lg { font-size: clamp(.88rem, 3.65vw, 1.16rem) !important; }
  .study-content.kahoot-content > h1.text-xl,
  .study-question.text-xl { font-size: clamp(.78rem, 3.05vw, 1rem) !important; }
  .study-content.kahoot-content > h1.text-xxl,
  .study-question.text-xxl { font-size: clamp(.7rem, 2.55vw, .88rem) !important; }

  .study-options.kahoot-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(clamp(48px, 8.2dvh, 68px), auto) !important;
    gap: 6px !important;
  }

  .study-option.kahoot-option {
    min-height: clamp(48px, 8.2dvh, 68px) !important;
    padding: 4px 6px !important;
    font-size: clamp(.74rem, 3.1vw, .94rem) !important;
  }
}

@media (max-width: 430px) {
  .study-card.kahoot-card {
    height: min(720px, calc(100dvh - 116px)) !important;
  }

  .study-content.kahoot-content {
    grid-template-rows: minmax(0, clamp(0px, 7dvh, 54px)) minmax(58px, auto) minmax(148px, auto) !important;
  }

  .study-content.kahoot-content.language-text-only,
  .study-card.kahoot-card.language-text-only .study-content.kahoot-content {
    grid-template-rows: minmax(64px, auto) minmax(154px, auto) !important;
  }

  .study-options.kahoot-options {
    grid-auto-rows: minmax(46px, auto) !important;
    gap: 5px !important;
  }

  .study-option.kahoot-option {
    min-height: 46px !important;
    padding: 4px 5px !important;
    font-size: .72rem !important;
    border-radius: 8px !important;
  }
}

/* QuizLuck final fixed study text sizes: quiz + learn only. */
.quiz-screen .study-content.kahoot-content > h1,
.learn-screen .study-content.kahoot-content > h1,
.quiz-screen .study-question,
.learn-screen .study-question,
.quiz-screen .study-question.text-sm,
.learn-screen .study-question.text-sm,
.quiz-screen .study-question.text-md,
.learn-screen .study-question.text-md,
.quiz-screen .study-question.text-lg,
.learn-screen .study-question.text-lg,
.quiz-screen .study-question.text-xl,
.learn-screen .study-question.text-xl,
.quiz-screen .study-question.text-xxl,
.learn-screen .study-question.text-xxl,
.quiz-screen .study-question .dual-study-text,
.learn-screen .study-question .dual-study-text,
.quiz-screen .study-question .translated-line,
.learn-screen .study-question .translated-line {
  font-size: 23px !important;
  line-height: 1.18 !important;
}

.quiz-screen .study-option.kahoot-option,
.learn-screen .study-option.kahoot-option,
.quiz-screen .study-option.kahoot-option .option-label,
.learn-screen .study-option.kahoot-option .option-label,
.quiz-screen .study-option.kahoot-option .option-label strong,
.learn-screen .study-option.kahoot-option .option-label strong,
.quiz-screen .study-option.kahoot-option .dual-option-text,
.learn-screen .study-option.kahoot-option .dual-option-text,
.quiz-screen .study-option.kahoot-option .dual-option-text span,
.learn-screen .study-option.kahoot-option .dual-option-text span,
.quiz-screen .option-text-lg strong,
.learn-screen .option-text-lg strong,
.quiz-screen .option-text-xl strong,
.learn-screen .option-text-xl strong,
.quiz-screen .option-text-xxl strong,
.learn-screen .option-text-xxl strong {
  font-size: 20px !important;
  line-height: 1.16 !important;
}

.quiz-screen .study-explanation-panel,
.learn-screen .study-explanation-panel,
.quiz-screen .study-explanation-panel p,
.learn-screen .study-explanation-panel p,
.quiz-screen .study-explanation-panel strong,
.learn-screen .study-explanation-panel strong,
.quiz-screen .study-explanation-panel b,
.learn-screen .study-explanation-panel b,
.quiz-screen .study-explanation-panel .correct-line,
.learn-screen .study-explanation-panel .correct-line,
.quiz-screen .study-explanation-panel .translated-explanation,
.learn-screen .study-explanation-panel .translated-explanation {
  font-size: 20px !important;
  line-height: 1.35 !important;
}

@media (max-width: 760px), (max-width: 430px), (max-height: 850px) and (min-width: 761px) {
  .quiz-screen .study-content.kahoot-content > h1,
  .learn-screen .study-content.kahoot-content > h1,
  .quiz-screen .study-question,
  .learn-screen .study-question,
  .quiz-screen .study-question.text-sm,
  .learn-screen .study-question.text-sm,
  .quiz-screen .study-question.text-md,
  .learn-screen .study-question.text-md,
  .quiz-screen .study-question.text-lg,
  .learn-screen .study-question.text-lg,
  .quiz-screen .study-question.text-xl,
  .learn-screen .study-question.text-xl,
  .quiz-screen .study-question.text-xxl,
  .learn-screen .study-question.text-xxl,
  .quiz-screen .study-question .dual-study-text,
  .learn-screen .study-question .dual-study-text,
  .quiz-screen .study-question .translated-line,
  .learn-screen .study-question .translated-line {
    font-size: 23px !important;
    line-height: 1.18 !important;
  }

  .quiz-screen .study-option.kahoot-option,
  .learn-screen .study-option.kahoot-option,
  .quiz-screen .study-option.kahoot-option .option-label,
  .learn-screen .study-option.kahoot-option .option-label,
  .quiz-screen .study-option.kahoot-option .option-label strong,
  .learn-screen .study-option.kahoot-option .option-label strong,
  .quiz-screen .study-option.kahoot-option .dual-option-text,
  .learn-screen .study-option.kahoot-option .dual-option-text,
  .quiz-screen .study-option.kahoot-option .dual-option-text span,
  .learn-screen .study-option.kahoot-option .dual-option-text span,
  .quiz-screen .option-text-lg strong,
  .learn-screen .option-text-lg strong,
  .quiz-screen .option-text-xl strong,
  .learn-screen .option-text-xl strong,
  .quiz-screen .option-text-xxl strong,
  .learn-screen .option-text-xxl strong {
    font-size: 20px !important;
    line-height: 1.16 !important;
  }

  .quiz-screen .study-explanation-panel,
  .learn-screen .study-explanation-panel,
  .quiz-screen .study-explanation-panel p,
  .learn-screen .study-explanation-panel p,
  .quiz-screen .study-explanation-panel strong,
  .learn-screen .study-explanation-panel strong,
  .quiz-screen .study-explanation-panel b,
  .learn-screen .study-explanation-panel b,
  .quiz-screen .study-explanation-panel .correct-line,
  .learn-screen .study-explanation-panel .correct-line,
  .quiz-screen .study-explanation-panel .translated-explanation,
  .learn-screen .study-explanation-panel .translated-explanation {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }
}

/* QuizLuck final v14: exact quiz/learn text sizes with smaller translated lines and no question overlap. */
.quiz-screen .study-content.kahoot-content > h1,
.learn-screen .study-content.kahoot-content > h1,
.quiz-screen .study-question,
.learn-screen .study-question,
.quiz-screen .study-question.text-sm,
.learn-screen .study-question.text-sm,
.quiz-screen .study-question.text-md,
.learn-screen .study-question.text-md,
.quiz-screen .study-question.text-lg,
.learn-screen .study-question.text-lg,
.quiz-screen .study-question.text-xl,
.learn-screen .study-question.text-xl,
.quiz-screen .study-question.text-xxl,
.learn-screen .study-question.text-xxl {
  font-size: 23px !important;
  line-height: 1.22 !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
  text-shadow: none !important;
}

.quiz-screen .study-question .dual-study-text,
.learn-screen .study-question .dual-study-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.quiz-screen .study-question .english-main,
.learn-screen .study-question .english-main {
  display: block !important;
  width: 100% !important;
  font-size: 23px !important;
  line-height: 1.22 !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.quiz-screen .study-question .translated-line,
.learn-screen .study-question .translated-line,
.quiz-screen .study-question .dual-study-text > .translated-line,
.learn-screen .study-question .dual-study-text > .translated-line {
  display: block !important;
  width: 100% !important;
  margin-top: 0 !important;
  font-size: 18px !important;
  line-height: 1.32 !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  opacity: .96 !important;
}

.quiz-screen .study-option.kahoot-option,
.learn-screen .study-option.kahoot-option,
.quiz-screen .study-option.kahoot-option .option-label,
.learn-screen .study-option.kahoot-option .option-label,
.quiz-screen .study-option.kahoot-option .option-label strong,
.learn-screen .study-option.kahoot-option .option-label strong,
.quiz-screen .option-text-lg strong,
.learn-screen .option-text-lg strong,
.quiz-screen .option-text-xl strong,
.learn-screen .option-text-xl strong,
.quiz-screen .option-text-xxl strong,
.learn-screen .option-text-xxl strong {
  font-size: 20px !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.quiz-screen .study-option.kahoot-option .dual-option-text,
.learn-screen .study-option.kahoot-option .dual-option-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.quiz-screen .study-option.kahoot-option .dual-option-text .english-main,
.learn-screen .study-option.kahoot-option .dual-option-text .english-main {
  display: block !important;
  width: 100% !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.quiz-screen .study-option.kahoot-option .translated-line,
.learn-screen .study-option.kahoot-option .translated-line,
.quiz-screen .study-option.kahoot-option .dual-option-text > .translated-line,
.learn-screen .study-option.kahoot-option .dual-option-text > .translated-line {
  display: block !important;
  width: 100% !important;
  margin-top: 0 !important;
  font-size: 18px !important;
  line-height: 1.28 !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  opacity: .96 !important;
}

.quiz-screen .study-explanation-panel,
.learn-screen .study-explanation-panel,
.quiz-screen .study-explanation-panel p,
.learn-screen .study-explanation-panel p,
.quiz-screen .study-explanation-panel strong,
.learn-screen .study-explanation-panel strong,
.quiz-screen .study-explanation-panel b,
.learn-screen .study-explanation-panel b,
.quiz-screen .study-explanation-panel .correct-line,
.learn-screen .study-explanation-panel .correct-line,
.quiz-screen .study-explanation-panel .translated-explanation,
.learn-screen .study-explanation-panel .translated-explanation,
.quiz-screen .study-explanation-panel .translated-explanation b,
.learn-screen .study-explanation-panel .translated-explanation b {
  font-size: 18px !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.quiz-screen .translated-line,
.learn-screen .translated-line,
.quiz-screen .translated-explanation,
.learn-screen .translated-explanation {
  font-size: 18px !important;
  letter-spacing: normal !important;
}

/* QuizLuck final option-image support: admin upload/edit UI + professional quiz/learn display */
.option-editor-card-with-image {
  align-content: start;
  gap: .75rem !important;
}

.option-editor-card-with-image .option-text-field {
  margin: 0;
}

.option-image-admin-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  padding: .72rem;
  border-radius: 16px;
  background: rgba(15, 23, 42, .035);
  border: 1px dashed rgba(100, 116, 139, .38);
}

.option-image-admin-preview {
  width: 96px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffffff, #eef2ff);
  border: 1px solid rgba(148, 163, 184, .42);
  color: #64748b;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  padding: .4rem;
}

.option-image-admin-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.option-image-admin-card .field {
  margin: 0;
}

.option-image-admin-card .option-image-upload-field {
  grid-column: 2;
}

.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 28px);
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(8px);
}

.admin-modal-card {
  width: min(1120px, 96vw);
  max-height: 92vh;
  overflow: auto;
  display: grid;
  gap: 1rem;
  padding: clamp(16px, 2.4vw, 28px);
  border-radius: 26px;
  background: var(--panel, #fff);
  border: 1px solid var(--border, rgba(148,163,184,.35));
  box-shadow: 0 30px 90px rgba(15, 23, 42, .28);
}

.question-full-edit-card .option-editor-grid,
.topic-new-option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quiz-screen .study-option.kahoot-option .option-image,
.learn-screen .study-option.kahoot-option .option-image,
.study-option.kahoot-option .professional-option-image {
  display: block !important;
  width: auto !important;
  max-width: min(180px, 78%) !important;
  max-height: clamp(44px, 9dvh, 92px) !important;
  object-fit: contain !important;
  margin: 0 auto .38rem !important;
  padding: 5px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .16) !important;
  flex: 0 0 auto !important;
}

.quiz-screen .study-option.kahoot-option .option-label:has(.option-image),
.learn-screen .study-option.kahoot-option .option-label:has(.option-image) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

.quiz-screen .study-card.language-text-only .study-option.kahoot-option .option-image,
.learn-screen .study-card.language-text-only .study-option.kahoot-option .option-image,
.quiz-screen.language-media-disabled .study-option.kahoot-option .option-image,
.learn-screen.language-media-disabled .study-option.kahoot-option .option-image {
  display: block !important;
}

@media (max-width: 760px) {
  .option-editor-grid,
  .question-full-edit-card .option-editor-grid,
  .topic-new-option-grid {
    grid-template-columns: 1fr !important;
  }

  .option-image-admin-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .option-image-admin-preview {
    width: 82px;
    height: 66px;
  }

  .admin-modal-card {
    width: 100%;
    max-height: 94vh;
    border-radius: 22px;
  }
}

@media (max-height: 740px) {
  .quiz-screen .study-option.kahoot-option .option-image,
  .learn-screen .study-option.kahoot-option .option-image {
    max-height: 54px !important;
    padding: 4px !important;
    margin-bottom: .25rem !important;
  }
}


/* QuizLuck final patch: professional week/all-time view pills with compact K/M/B numbers */
.topic-view-pills.topic-view-pills-pro,
.topic-meta-row .topic-view-pills.topic-view-pills-pro,
.topic-detail-meta-row .topic-view-pills.topic-view-pills-pro {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.topic-view-pills-pro .topic-view-pill,
.topic-view-pills-pro .topic-view-pill-week,
.topic-view-pills-pro .topic-view-pill-alltime {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  white-space: nowrap !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
}

.topic-view-pills-pro .topic-view-pill-week {
  background: linear-gradient(135deg, #eef0ff, #e7e9ff) !important;
  color: #30364f !important;
  box-shadow: 0 8px 18px rgba(80, 89, 140, .10) !important;
}

.topic-view-pills-pro .topic-view-pill-alltime {
  background: rgba(72, 78, 94, .94) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(15, 23, 42, .15) !important;
}

.topic-view-pills-pro .topic-view-pill strong {
  font-size: 1rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  color: inherit !important;
}

.topic-view-pills-pro .topic-view-pill span:not(.view-pill-icon):not(.trend-pill-icon) {
  font-size: .86rem !important;
  font-weight: 900 !important;
  color: inherit !important;
  line-height: 1 !important;
}

.topic-view-pills-pro .trend-pill-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: inherit !important;
}

.topic-view-pills-pro .view-pill-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  opacity: .98 !important;
}

.topic-view-pills-pro .view-pill-icon svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
}

@media (max-width: 860px) {
  .topic-view-pills.topic-view-pills-pro,
  .topic-meta-row .topic-view-pills.topic-view-pills-pro,
  .topic-detail-meta-row .topic-view-pills.topic-view-pills-pro {
    justify-content: flex-end !important;
    gap: 6px !important;
  }
}

@media (max-width: 640px) {
  .topic-view-pills.topic-view-pills-pro {
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }

  .topic-view-pills-pro .topic-view-pill,
  .topic-view-pills-pro .topic-view-pill-week,
  .topic-view-pills-pro .topic-view-pill-alltime {
    min-height: 28px !important;
    padding: 5px 8px !important;
    gap: 4px !important;
  }

  .topic-view-pills-pro .topic-view-pill strong {
    font-size: .84rem !important;
  }

  .topic-view-pills-pro .topic-view-pill span:not(.view-pill-icon):not(.trend-pill-icon) {
    font-size: .70rem !important;
  }

  .topic-view-pills-pro .trend-pill-icon {
    width: 13px !important;
    height: 13px !important;
    font-size: 13px !important;
  }

  .topic-view-pills-pro .view-pill-icon svg {
    width: 12px !important;
    height: 12px !important;
  }
}

@media (max-width: 390px) {
  .topic-view-pills-pro .topic-view-pill-week span:not(.trend-pill-icon),
  .topic-view-pills-pro .topic-view-pill-alltime span:not(.view-pill-icon) {
    font-size: .64rem !important;
  }

  .topic-view-pills-pro .topic-view-pill-week,
  .topic-view-pills-pro .topic-view-pill-alltime {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* QuizLuck admin analytics + access control polish */
.admin-nav-pro{gap:10px;flex-wrap:wrap;align-items:center}.admin-analytics-hero{background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(14,165,233,.12));border:1px solid rgba(99,102,241,.18)}.admin-analytics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0}.analytics-card{border:1px solid rgba(99,102,241,.16);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.9));box-shadow:0 16px 40px rgba(15,23,42,.08);padding:18px;display:flex;flex-direction:column;gap:5px}.analytics-card span{font-weight:800;color:#64748b;font-size:13px;text-transform:uppercase;letter-spacing:.04em}.analytics-card strong{font-size:32px;line-height:1;color:#111827}.analytics-card small{color:#64748b;font-weight:700}.analytics-panel{overflow:hidden}.analytics-panel table th,.analytics-panel table td{vertical-align:top}.analytics-note{border-color:rgba(245,158,11,.35);background:rgba(255,251,235,.9)}.admin-feature-chip{display:inline-flex;align-items:center;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:900;font-size:12px;padding:5px 9px;margin:2px;border:1px solid rgba(79,70,229,.16)}.admin-access-cell{min-width:190px}.admin-user-actions{display:flex;flex-wrap:wrap;gap:7px}.admin-access-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(10px)}.admin-access-modal-card{width:min(920px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:28px;padding:22px;box-shadow:0 28px 80px rgba(15,23,42,.32);border:1px solid rgba(255,255,255,.55)}[data-theme="dark"] .admin-access-modal-card{background:#0f172a;color:#e5e7eb;border-color:rgba(148,163,184,.25)}.admin-access-modal-card .field select,.admin-access-modal-card .field input{width:100%}.access-settings-card{border:1px solid rgba(16,185,129,.22);background:linear-gradient(180deg,rgba(236,253,245,.72),rgba(255,255,255,.95))}.premium-ads-toggle{border-color:rgba(234,179,8,.35)!important;background:rgba(254,252,232,.7)!important}.admin-user-detail-pro{margin-top:16px;border:1px solid rgba(59,130,246,.18);border-radius:24px;padding:18px;background:linear-gradient(135deg,rgba(239,246,255,.9),rgba(255,255,255,.96))}@media (max-width:900px){.admin-analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-analytics-tables{grid-template-columns:1fr!important}.admin-access-modal-card{border-radius:22px;padding:16px}}@media (max-width:560px){.admin-analytics-grid{grid-template-columns:1fr}.analytics-card strong{font-size:26px}.admin-nav-pro button{font-size:13px;padding:9px 12px}.admin-user-actions .small-button{width:100%;justify-content:center}.admin-access-modal-backdrop{padding:10px;align-items:flex-start}.admin-access-modal-card{max-height:96vh}}


/* --------------------------------------------------------------------------
   QuizLuck final mobile drawer + topic card professional polish
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
  body.mobile-menu-open { overflow: hidden !important; }

  .shell-header.universal-header .top-nav.universal-nav.quizlet-mobile-nav,
  .shell-header.hybrid-header .top-nav.hybrid-nav.quizlet-mobile-nav,
  .hybrid-header .hybrid-nav.quizlet-mobile-nav.single-ui-mobile-nav {
    --study-menu-bg: #f7f9ff;
    --study-menu-surface: #ffffff;
    --study-menu-text: #0f172a;
    --study-menu-muted: #59677f;
    --study-menu-line: #dbe7f6;
    --study-menu-soft: #eef5ff;
    --study-menu-blue: #1769e0;
    --study-menu-teal: #0f8f8c;
    inset: 0 0 0 auto !important;
    width: min(88vw, 430px) !important;
    max-width: calc(100vw - 10px) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid rgba(15, 23, 42, .10) !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 16% 8%, rgba(23,105,224,.12), transparent 34%),
      radial-gradient(circle at 92% 18%, rgba(15,143,140,.12), transparent 34%),
      linear-gradient(180deg, #ffffff 0%, var(--study-menu-bg) 58%, #eef5ff 100%) !important;
    color: var(--study-menu-text) !important;
    box-shadow: -30px 0 90px rgba(15, 23, 42, .24) !important;
    overflow: hidden !important;
    z-index: 1000 !important;
  }

  [data-theme="dark"] .shell-header.universal-header .top-nav.universal-nav.quizlet-mobile-nav,
  [data-theme="dark"] .shell-header.hybrid-header .top-nav.hybrid-nav.quizlet-mobile-nav,
  html.dark .shell-header.universal-header .top-nav.universal-nav.quizlet-mobile-nav,
  html.dark .shell-header.hybrid-header .top-nav.hybrid-nav.quizlet-mobile-nav,
  body.dark .shell-header.universal-header .top-nav.universal-nav.quizlet-mobile-nav,
  body.dark .shell-header.hybrid-header .top-nav.hybrid-nav.quizlet-mobile-nav {
    --study-menu-bg: #0b1424;
    --study-menu-surface: #111d32;
    --study-menu-text: #f8fbff;
    --study-menu-muted: #a6b4ca;
    --study-menu-line: rgba(148, 163, 184, .22);
    --study-menu-soft: rgba(59,130,246,.14);
    background:
      radial-gradient(circle at 16% 8%, rgba(96,165,250,.18), transparent 34%),
      radial-gradient(circle at 92% 18%, rgba(45,212,191,.14), transparent 34%),
      linear-gradient(180deg, #0b1424 0%, #111d32 100%) !important;
  }

  .single-ui-mobile-nav .mobile-study-drawer,
  .quizlet-mobile-nav .mobile-study-drawer {
    height: 100dvh !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    background: transparent !important;
  }

  .single-ui-mobile-nav .mobile-study-brand,
  .quizlet-mobile-nav .mobile-study-brand {
    min-height: 104px !important;
    padding: calc(18px + env(safe-area-inset-top)) 22px 14px !important;
    gap: 14px !important;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
  }

  .single-ui-mobile-nav .mobile-drawer-close,
  .quizlet-mobile-nav .mobile-drawer-close {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.82) !important;
    border: 1px solid var(--study-menu-line) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
    color: #475569 !important;
  }

  .single-ui-mobile-nav .mobile-study-logo,
  .quizlet-mobile-nav .mobile-study-logo,
  .single-ui-mobile-nav .mobile-study-logo.has-real-logo,
  .quizlet-mobile-nav .mobile-study-logo.has-real-logo {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  .single-ui-mobile-nav .mobile-study-logo span,
  .single-ui-mobile-nav .mobile-study-logo b,
  .quizlet-mobile-nav .mobile-study-logo span,
  .quizlet-mobile-nav .mobile-study-logo b { display: none !important; }

  .single-ui-mobile-nav .mobile-study-logo img,
  .quizlet-mobile-nav .mobile-study-logo img {
    display: block !important;
    width: min(188px, 100%) !important;
    height: auto !important;
    max-height: 64px !important;
    object-fit: contain !important;
    object-position: left center !important;
    border: 0 !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .08));
  }

  .mobile-drawer-upgrade-bar {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 12px 22px 14px !important;
    padding: 13px 14px !important;
    border: 1px solid rgba(23, 105, 224, .18) !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(23,105,224,.10), rgba(15,143,140,.13)), #fff !important;
    color: var(--study-menu-text) !important;
    text-decoration: none !important;
    box-shadow: 0 16px 36px rgba(23, 105, 224, .10) !important;
  }

  .mobile-drawer-upgrade-bar > span {
    grid-row: span 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--study-menu-blue), var(--study-menu-teal));
    color: #fff;
    font-size: 1.2rem;
    font-weight: 1000;
  }

  .mobile-drawer-upgrade-bar strong,
  .mobile-drawer-upgrade-bar small { display: block; min-width: 0; }
  .mobile-drawer-upgrade-bar strong { font-size: .98rem; font-weight: 1000; line-height: 1.1; }
  .mobile-drawer-upgrade-bar small { margin-top: 3px; color: var(--study-menu-muted); font-size: .78rem; font-weight: 800; line-height: 1.25; }

  .single-ui-mobile-nav .mobile-study-scroll,
  .quizlet-mobile-nav .mobile-study-scroll {
    padding: 0 22px max(22px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .single-ui-mobile-nav .mobile-drawer-search,
  .quizlet-mobile-nav .mobile-drawer-search {
    margin: 0 0 14px !important;
    padding: 8px !important;
    border: 1px solid var(--study-menu-line) !important;
    border-radius: 18px !important;
    background: var(--study-menu-surface) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
  }

  .single-ui-mobile-nav .mobile-drawer-search input,
  .quizlet-mobile-nav .mobile-drawer-search input {
    color: var(--study-menu-text) !important;
    font-size: .94rem !important;
    font-weight: 850 !important;
    padding-left: 8px !important;
  }

  .single-ui-mobile-nav .mobile-drawer-search button,
  .quizlet-mobile-nav .mobile-drawer-search button {
    min-height: 40px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--study-menu-blue), var(--study-menu-teal)) !important;
    color: #fff !important;
    font-weight: 1000 !important;
  }

  .single-ui-mobile-nav .single-ui-mobile-section,
  .quizlet-mobile-nav .single-ui-mobile-section {
    gap: 6px !important;
    padding: 6px 0 14px !important;
    border-top: 0 !important;
  }

  .single-ui-mobile-nav .mobile-study-row,
  .quizlet-mobile-nav .mobile-study-row {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: 56px !important;
    padding: 0 12px !important;
    border-radius: 16px !important;
    color: var(--study-menu-muted) !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
  }

  .single-ui-mobile-nav .mobile-nav-icon,
  .quizlet-mobile-nav .mobile-nav-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(23,105,224,.10), rgba(15,143,140,.10)) !important;
    color: #506078 !important;
    transform: scale(.82);
  }

  .single-ui-mobile-nav .mobile-study-row.is-active,
  .quizlet-mobile-nav .mobile-study-row.is-active,
  .single-ui-mobile-nav .mobile-study-row:hover,
  .quizlet-mobile-nav .mobile-study-row:hover {
    background: linear-gradient(135deg, rgba(23,105,224,.10), rgba(15,143,140,.10)) !important;
    color: var(--study-menu-blue) !important;
  }

  .single-ui-mobile-nav .mobile-study-row.is-active .mobile-nav-icon,
  .quizlet-mobile-nav .mobile-study-row.is-active .mobile-nav-icon {
    color: var(--study-menu-blue) !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(23,105,224,.10) !important;
  }

  .single-ui-mobile-nav .mobile-drawer-profile,
  .quizlet-mobile-nav .mobile-drawer-profile {
    margin: 12px 0 16px !important;
    border-color: var(--study-menu-line) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.74) !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.06) !important;
  }

  .mobile-profile-avatar.logo-avatar {
    overflow: hidden;
    background: #fff !important;
    border: 1px solid var(--study-menu-line) !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
  }

  .mobile-profile-avatar.logo-avatar img {
    width: 82% !important;
    height: 82% !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 430px) {
  .shell-header.universal-header .top-nav.universal-nav.quizlet-mobile-nav,
  .shell-header.hybrid-header .top-nav.hybrid-nav.quizlet-mobile-nav,
  .hybrid-header .hybrid-nav.quizlet-mobile-nav.single-ui-mobile-nav {
    width: min(92vw, 390px) !important;
  }
  .single-ui-mobile-nav .mobile-study-brand,
  .quizlet-mobile-nav .mobile-study-brand { padding-left: 18px !important; padding-right: 18px !important; }
  .mobile-drawer-upgrade-bar { margin-left: 18px !important; margin-right: 18px !important; }
  .single-ui-mobile-nav .mobile-study-scroll,
  .quizlet-mobile-nav .mobile-study-scroll { padding-left: 18px !important; padding-right: 18px !important; }
  .single-ui-mobile-nav .mobile-study-logo img,
  .quizlet-mobile-nav .mobile-study-logo img { width: min(165px, 100%) !important; }
}

.topic-grid-professional.grid.three,
.grid.three.topic-grid-professional,
.wishlist-grid.topic-grid-professional {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
  align-items: stretch !important;
}

.topic-card.topic-card-pro,
.topic-card.professional-topic-card {
  overflow: hidden !important;
  isolation: isolate;
  gap: clamp(.9rem, 1.6vw, 1.1rem) !important;
  padding: clamp(1.05rem, 1.8vw, 1.35rem) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96)) !important;
  border-color: rgba(16, 24, 40, .08) !important;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .08) !important;
}

.topic-card.topic-card-pro > *,
.topic-card.professional-topic-card > * { position: relative; z-index: 1; }

.topic-card-pro .topic-top,
.professional-topic-card .topic-top {
  align-items: flex-start !important;
  gap: 14px !important;
}

.topic-card-pro .topic-top h3,
.professional-topic-card .topic-top h3 {
  margin-bottom: 0 !important;
  font-size: clamp(1.16rem, 1.6vw, 1.45rem) !important;
  line-height: 1.12 !important;
}

.topic-card-pro .topic-description-link,
.topic-card-pro > p.muted,
.professional-topic-card > p.muted {
  display: block !important;
  min-height: 3.1em;
  line-height: 1.42 !important;
  color: #1f2937 !important;
}

.topic-card-pro .topic-icon,
.professional-topic-card .topic-icon,
.topic-card-pro .topic-icon-link {
  width: clamp(54px, 6vw, 70px) !important;
  height: clamp(54px, 6vw, 70px) !important;
  border-radius: 22px !important;
  opacity: .96;
}

.topic-card-pro .progress,
.professional-topic-card .progress {
  height: 9px !important;
  background: #f1f5ff !important;
}

.topic-card-pro .topic-meta-row.topic-meta-row-compact,
.topic-detail-meta-row.topic-meta-row-compact,
.topic-card-pro .topic-meta-row,
.topic-detail-meta-row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 10px !important;
  overflow: visible !important;
}

.topic-card-pro .topic-meta-actions,
.topic-detail-meta-row .topic-meta-actions {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  overflow: visible !important;
}

.topic-card-pro .topic-share-inline,
.topic-card-pro .topic-enroll-inline,
.topic-detail-meta-row .topic-share-inline,
.topic-detail-meta-row .topic-enroll-inline {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

.topic-card-pro .topic-share-inline .share-action-button,
.topic-card-pro .topic-enroll-inline .enroll-compact-button,
.topic-detail-meta-row .topic-share-inline .share-action-button,
.topic-detail-meta-row .topic-enroll-inline .enroll-compact-button {
  min-height: 38px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: .9rem !important;
  white-space: nowrap !important;
}

.topic-card-pro .topic-view-pills,
.topic-detail-meta-row .topic-view-pills,
.topic-view-pills.topic-view-pills-pro {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
}

.topic-card-pro .topic-view-pill,
.topic-detail-meta-row .topic-view-pill,
.topic-view-pill {
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  font-size: .84rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.topic-view-pill-week {
  background: linear-gradient(135deg, #eef2ff, #f5f7ff) !important;
  color: #28324b !important;
  border-color: #d8defa !important;
  box-shadow: 0 10px 24px rgba(79, 70, 229, .10) !important;
}

.topic-view-pill-week strong,
.topic-view-pill-week span,
.topic-view-pill-week .trend-pill-icon { color: #28324b !important; }
.topic-view-pill-alltime { background: #586071 !important; color: #fff !important; }
.topic-view-pill-alltime strong,
.topic-view-pill-alltime span { color: #fff !important; }

.topic-card-pro .topic-mode-row-three,
.topic-mode-row-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.topic-card-pro .topic-mode-row a,
.topic-mode-row a {
  min-width: 0 !important;
  min-height: 54px !important;
  border-radius: 18px !important;
  font-size: clamp(.88rem, 1.2vw, 1rem) !important;
  padding: .75rem .42rem !important;
}

.topic-card-pro .saved-mini-actions {
  justify-content: center !important;
  gap: 8px !important;
}

.topic-card-pro .saved-mini-actions a {
  white-space: nowrap !important;
  font-size: .82rem !important;
  padding: 7px 11px !important;
}

@media (min-width: 760px) and (max-width: 1180px) {
  .topic-grid-professional.grid.three,
  .grid.three.topic-grid-professional,
  .wishlist-grid.topic-grid-professional {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .topic-card.topic-card-pro,
  .topic-card.professional-topic-card {
    border-radius: 22px !important;
    padding: 1rem !important;
  }
  .topic-card-pro .topic-top,
  .professional-topic-card .topic-top { gap: 10px !important; }
  .topic-card-pro .topic-icon,
  .professional-topic-card .topic-icon,
  .topic-card-pro .topic-icon-link {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
  }
  .topic-card-pro .topic-description-link,
  .topic-card-pro > p.muted,
  .professional-topic-card > p.muted { min-height: 0 !important; }
  .topic-card-pro .topic-meta-actions,
  .topic-detail-meta-row .topic-meta-actions { justify-content: flex-start !important; }
  .topic-card-pro .topic-view-pills,
  .topic-detail-meta-row .topic-view-pills,
  .topic-view-pills.topic-view-pills-pro { justify-content: flex-end !important; gap: 7px !important; }
  .topic-card-pro .topic-view-pill,
  .topic-detail-meta-row .topic-view-pill,
  .topic-view-pill { min-height: 31px !important; padding: 5px 9px !important; font-size: .78rem !important; }
  .topic-card-pro .topic-mode-row-three,
  .topic-mode-row-three { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .topic-card-pro .topic-mode-row a,
  .topic-mode-row a { min-height: 50px !important; font-size: .86rem !important; border-radius: 16px !important; }
  .topic-card-pro .saved-mini-actions { display: flex !important; flex-wrap: wrap !important; }
}

@media (max-width: 390px) {
  .topic-card-pro .topic-share-inline .share-action-button,
  .topic-card-pro .topic-enroll-inline .enroll-compact-button,
  .topic-detail-meta-row .topic-share-inline .share-action-button,
  .topic-detail-meta-row .topic-enroll-inline .enroll-compact-button { font-size: .8rem !important; padding: 7px 10px !important; }
  .topic-card-pro .topic-view-pill,
  .topic-detail-meta-row .topic-view-pill,
  .topic-view-pill { font-size: .72rem !important; padding: 5px 7px !important; }
}


/* QuizLuck final language media keep-visible patch: selecting Spanish/Hindi must never hide question or option images. */
.quiz-screen.language-media-disabled .study-media,
.learn-screen.language-media-disabled .study-media,
.study-card.language-text-only .study-media {
  display: flex !important;
}

.quiz-screen.language-media-disabled .study-media.has-image,
.learn-screen.language-media-disabled .study-media.has-image,
.study-card.language-text-only .study-media.has-image {
  display: flex !important;
}

.quiz-screen.language-media-disabled .question-image,
.learn-screen.language-media-disabled .question-image,
.study-card.language-text-only .question-image,
.quiz-screen.language-media-disabled .option-image,
.learn-screen.language-media-disabled .option-image,
.study-card.language-text-only .option-image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.quiz-screen .study-content.kahoot-content,
.learn-screen .study-content.kahoot-content {
  overflow: visible !important;
}


/* QuizLuck final option placeholder fix: never show "Image option" text unless there is a real option image. */
.option-text-empty {
  display: none !important;
}

.study-option.kahoot-option strong:has(.option-text-empty) {
  display: none !important;
}

/* QuizLuck final v16: keep long quiz/learn question and option text inside the box with professional inner scrolling. */
.quiz-screen .study-question,
.learn-screen .study-question,
.quiz-screen .study-content.kahoot-content > h1,
.learn-screen .study-content.kahoot-content > h1 {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: clamp(92px, 18dvh, 168px) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(88, 80, 140, .45) transparent !important;
  overscroll-behavior: contain !important;
}

.quiz-screen .study-question::-webkit-scrollbar,
.learn-screen .study-question::-webkit-scrollbar,
.quiz-screen .study-content.kahoot-content > h1::-webkit-scrollbar,
.learn-screen .study-content.kahoot-content > h1::-webkit-scrollbar {
  width: 6px !important;
}
.quiz-screen .study-question::-webkit-scrollbar-thumb,
.learn-screen .study-question::-webkit-scrollbar-thumb,
.quiz-screen .study-content.kahoot-content > h1::-webkit-scrollbar-thumb,
.learn-screen .study-content.kahoot-content > h1::-webkit-scrollbar-thumb {
  background: rgba(88, 80, 140, .46) !important;
  border-radius: 999px !important;
}

.quiz-screen .study-option.kahoot-option,
.learn-screen .study-option.kahoot-option {
  overflow: hidden !important;
  height: clamp(84px, 12dvh, 132px) !important;
  max-height: clamp(84px, 12dvh, 132px) !important;
  align-items: stretch !important;
  contain: layout paint !important;
}

.quiz-screen .study-option.kahoot-option .option-label,
.learn-screen .study-option.kahoot-option .option-label {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 2px 8px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, .72) rgba(255, 255, 255, .08) !important;
}

.quiz-screen .study-option.kahoot-option .option-label::-webkit-scrollbar,
.learn-screen .study-option.kahoot-option .option-label::-webkit-scrollbar {
  width: 5px !important;
}
.quiz-screen .study-option.kahoot-option .option-label::-webkit-scrollbar-track,
.learn-screen .study-option.kahoot-option .option-label::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .08) !important;
  border-radius: 999px !important;
}
.quiz-screen .study-option.kahoot-option .option-label::-webkit-scrollbar-thumb,
.learn-screen .study-option.kahoot-option .option-label::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .72) !important;
  border-radius: 999px !important;
}

.quiz-screen .study-option.kahoot-option .option-label strong,
.learn-screen .study-option.kahoot-option .option-label strong,
.quiz-screen .study-option.kahoot-option .dual-option-text,
.learn-screen .study-option.kahoot-option .dual-option-text,
.quiz-screen .study-option.kahoot-option .dual-option-text .english-main,
.learn-screen .study-option.kahoot-option .dual-option-text .english-main,
.quiz-screen .study-option.kahoot-option .dual-option-text .translated-line,
.learn-screen .study-option.kahoot-option .dual-option-text .translated-line {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: none !important;
}

.quiz-screen .study-option.kahoot-option .dual-option-text,
.learn-screen .study-option.kahoot-option .dual-option-text {
  display: grid !important;
  place-items: center !important;
  gap: 5px !important;
}

.quiz-screen .study-option.kahoot-option .dual-option-text .english-main,
.learn-screen .study-option.kahoot-option .dual-option-text .english-main {
  font-size: 20px !important;
  line-height: 1.18 !important;
}

.quiz-screen .study-option.kahoot-option .dual-option-text .translated-line,
.learn-screen .study-option.kahoot-option .dual-option-text .translated-line {
  font-size: 18px !important;
  line-height: 1.24 !important;
}

@media (max-width: 760px) {
  .quiz-screen .study-question,
  .learn-screen .study-question,
  .quiz-screen .study-content.kahoot-content > h1,
  .learn-screen .study-content.kahoot-content > h1 {
    max-height: clamp(104px, 20dvh, 160px) !important;
  }

  .quiz-screen .study-options.kahoot-options,
  .learn-screen .study-options.kahoot-options {
    align-content: start !important;
    overflow: visible !important;
  }

  .quiz-screen .study-option.kahoot-option,
  .learn-screen .study-option.kahoot-option {
    height: clamp(104px, 16dvh, 138px) !important;
    max-height: clamp(104px, 16dvh, 138px) !important;
    padding: 6px 5px !important;
  }

  .quiz-screen .study-option.kahoot-option .option-label,
  .learn-screen .study-option.kahoot-option .option-label {
    padding: 4px 8px !important;
  }
}

@media (max-width: 430px) {
  .quiz-screen .study-option.kahoot-option,
  .learn-screen .study-option.kahoot-option {
    height: clamp(96px, 15dvh, 126px) !important;
    max-height: clamp(96px, 15dvh, 126px) !important;
  }

  .quiz-screen .study-option.kahoot-option .dual-option-text .english-main,
  .learn-screen .study-option.kahoot-option .dual-option-text .english-main {
    font-size: 20px !important;
  }

  .quiz-screen .study-option.kahoot-option .dual-option-text .translated-line,
  .learn-screen .study-option.kahoot-option .dual-option-text .translated-line {
    font-size: 18px !important;
  }
}

/* QuizLuck final admin roles, publisher control, and student auth polish. */
.student-auth-section .hero-grid,
.student-auth-grid {
  align-items: start;
}

.student-auth-card {
  min-width: 0;
}

.student-auth-card h1,
.student-auth-card h2 {
  overflow-wrap: anywhere;
}

.auth-error-box {
  border: 1px solid rgba(220, 38, 38, .22);
  background: rgba(254, 242, 242, .94);
  color: #991b1b;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 800;
  line-height: 1.35;
  margin: 10px 0 14px;
}

.auth-error-box.success {
  border-color: rgba(22, 163, 74, .24);
  background: rgba(240, 253, 244, .94);
  color: #166534;
}

.auth-error-box[hidden] {
  display: none;
}

.student-account-panel .admin-grid {
  margin: 18px 0;
}

.admin-create-user-panel,
.admin-publisher-panel {
  margin-bottom: 18px;
}

.admin-create-user-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.admin-create-actions {
  align-self: end;
  flex-wrap: wrap;
}

.admin-users-role-table select,
.admin-publisher-panel select,
.admin-price-input {
  width: 100%;
  min-width: 130px;
  border: 1px solid rgba(148, 163, 184, .36);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: #111827;
  font-weight: 800;
}

.role-pill {
  display: inline-flex;
  margin-top: 8px;
  border-radius: 999px;
  padding: 5px 9px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid rgba(99, 102, 241, .18);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.publisher-admin-stats {
  margin-bottom: 18px;
}

.admin-publisher-panel pre,
.admin-user-detail-pro pre {
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 8px;
  padding: 14px;
  background: rgba(15, 23, 42, .05);
}

[data-theme="dark"] .auth-error-box {
  border-color: rgba(248, 113, 113, .34);
  background: rgba(127, 29, 29, .38);
  color: #fecaca;
}

[data-theme="dark"] .auth-error-box.success {
  border-color: rgba(74, 222, 128, .34);
  background: rgba(20, 83, 45, .38);
  color: #bbf7d0;
}

[data-theme="dark"] .admin-users-role-table select,
[data-theme="dark"] .admin-publisher-panel select,
[data-theme="dark"] .admin-price-input {
  background: #111827;
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, .32);
}

[data-theme="dark"] .role-pill {
  background: rgba(79, 70, 229, .18);
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, .26);
}

[data-theme="dark"] .admin-publisher-panel pre,
[data-theme="dark"] .admin-user-detail-pro pre {
  background: rgba(2, 6, 23, .55);
}

@media (max-width: 980px) {
  .admin-create-user-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .admin-create-user-grid {
    grid-template-columns: 1fr;
  }

  .admin-create-actions,
  .admin-create-actions .button,
  .admin-create-actions .ghost-button {
    width: 100%;
    justify-content: center;
  }

  .admin-users-role-table select,
  .admin-publisher-panel select,
  .admin-price-input {
    min-width: 0;
  }
}

/* QuizLuck final Google login and role-menu admin controls. */
.google-login-card {
  margin: 18px 0;
}

.google-login-slot {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.google-login-slot > div {
  max-width: 100%;
}

.google-login-fallback {
  opacity: .72;
  cursor: not-allowed;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted, #64748b);
  font-weight: 900;
  margin: 16px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(148, 163, 184, .32);
}

.role-menu-admin-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: start;
}

.role-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.role-menu-field textarea {
  min-height: 190px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
}

.role-menu-preview {
  position: sticky;
  top: 18px;
}

.role-menu-preview .branding-link-preview,
.role-menu-shortcut .branding-link-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-menu-preview .branding-link-preview a,
.role-menu-shortcut .branding-link-preview a {
  border: 1px solid rgba(99, 102, 241, .18);
  border-radius: 999px;
  padding: 7px 10px;
  background: #eef2ff;
  color: #3730a3;
  font-weight: 900;
  text-decoration: none;
}

.role-menu-shortcut {
  border: 1px solid rgba(59, 130, 246, .18);
  border-radius: 8px;
  padding: 14px;
  background: rgba(239, 246, 255, .62);
}

.admin-control-shortcuts .panel {
  min-width: 0;
}

.seo-editor-card,
.seo-settings-card {
  border: 1px solid rgba(20, 184, 166, .2);
  border-radius: 8px;
  padding: 16px;
  background: rgba(240, 253, 250, .6);
}

.seo-editor-card {
  margin-top: 14px;
}

.seo-editor-card h3,
.seo-settings-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.seo-editor-card .setting-toggle,
.seo-settings-card .setting-toggle {
  margin-top: 10px;
}

[data-theme="dark"] .auth-divider::before,
[data-theme="dark"] .auth-divider::after {
  background: rgba(148, 163, 184, .22);
}

[data-theme="dark"] .role-menu-preview .branding-link-preview a,
[data-theme="dark"] .role-menu-shortcut .branding-link-preview a {
  background: rgba(79, 70, 229, .18);
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, .28);
}

[data-theme="dark"] .role-menu-shortcut {
  background: rgba(30, 41, 59, .54);
  border-color: rgba(148, 163, 184, .22);
}

[data-theme="dark"] .seo-editor-card,
[data-theme="dark"] .seo-settings-card {
  background: rgba(15, 118, 110, .12);
  border-color: rgba(45, 212, 191, .22);
}

@media (max-width: 980px) {
  .role-menu-admin-shell {
    grid-template-columns: 1fr;
  }

  .role-menu-preview {
    position: static;
  }
}

@media (max-width: 700px) {
  .role-menu-grid {
    grid-template-columns: 1fr;
  }
}


/* Publisher PDF material sales + topic builder */
.publisher-builder-form .publisher-builder-grid {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(320px, 1.15fr);
  gap: 18px;
  margin: 18px 0;
  align-items: stretch;
}
.publisher-builder-card,
.publisher-import-option {
  position: relative;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94));
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}
[data-theme="dark"] .publisher-builder-card,
[data-theme="dark"] .publisher-import-option {
  background: linear-gradient(180deg, rgba(15,23,42,.94), rgba(2,6,23,.92));
  border-color: rgba(148, 163, 184, .18);
}
.builder-step {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  margin-bottom: 10px;
}
.publisher-import-options {
  display: grid;
  gap: 14px;
}
.publisher-material-list,
.publisher-question-list,
.course-material-public-list,
.publisher-study-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.publisher-material-row,
.publisher-question-row,
.course-material-public-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
}
[data-theme="dark"] .publisher-material-row,
[data-theme="dark"] .publisher-question-row,
[data-theme="dark"] .course-material-public-row {
  background: rgba(15, 23, 42, .64);
}
.mini-empty {
  padding: 14px;
  margin-top: 12px;
  border-radius: 16px;
}
.warning-text { color: #b45309; }
.publisher-answer-grid {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}
.publisher-answer-grid > div {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(248, 250, 252, .8);
}
.publisher-answer-grid .answer-correct,
.publisher-flash-answer {
  border-color: rgba(34, 197, 94, .38);
  background: rgba(34, 197, 94, .12);
}
.publisher-flash-answer {
  padding: 18px;
  border-radius: 18px;
  font-size: 1.15rem;
  font-weight: 800;
  margin: 14px 0;
}
.import-help code {
  display: inline-block;
  margin: 4px 5px 0 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .08);
  font-size: .76rem;
}
@media (max-width: 900px) {
  .publisher-builder-form .publisher-builder-grid { grid-template-columns: 1fr; }
  .publisher-material-row,
  .publisher-question-row,
  .course-material-public-row { align-items: stretch; flex-direction: column; }
  .publisher-material-row .actions,
  .course-material-public-row .actions { width: 100%; }
  .publisher-material-row .actions > *,
  .course-material-public-row .actions > * { flex: 1; justify-content: center; }
}

/* Server-rendered SEO body content. Crawlers/no-JS users see full public pages; app.js replaces this when the SPA starts. */
.server-seo-content{width:min(1120px,calc(100% - 32px));margin:0 auto 42px;padding:18px 0 36px;color:var(--text,#0f172a)}
.server-seo-content a{color:inherit;text-decoration:none}
.server-seo-content a:hover{text-decoration:underline}
.seo-breadcrumbs{margin:8px 0 18px;font-size:14px;color:var(--muted,#64748b)}
.seo-breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;align-items:center}
.seo-breadcrumbs li{display:flex;align-items:center;gap:8px}
.seo-breadcrumbs li+li::before{content:"/";opacity:.55}
.seo-hero,.seo-section{background:var(--card,#fff);border:1px solid var(--border,rgba(148,163,184,.28));border-radius:26px;box-shadow:var(--shadow,0 18px 55px rgba(15,23,42,.10));padding:clamp(22px,4vw,42px);margin:0 0 22px}
.seo-hero h1{font-size:clamp(32px,5vw,58px);line-height:1.02;margin:8px 0 14px;letter-spacing:-.04em;color:var(--text,#0f172a)}
.seo-section h2{font-size:clamp(22px,3vw,34px);line-height:1.12;margin:0 0 16px;color:var(--text,#0f172a)}
.seo-card h3,.seo-question-card h3{font-size:clamp(17px,2.2vw,22px);line-height:1.2;margin:0 0 10px;color:var(--text,#0f172a)}
.seo-eyebrow{display:inline-flex;margin:0 0 4px;padding:7px 12px;border-radius:999px;background:rgba(79,70,229,.10);color:var(--accent,#4f46e5);font-weight:900;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.seo-intro{font-size:clamp(17px,2vw,21px);line-height:1.65;color:var(--muted,#475569);max-width:860px;margin:0}
.seo-pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.seo-pill-row span{display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--border,rgba(148,163,184,.32));background:rgba(255,255,255,.72);padding:9px 12px;font-weight:800;font-size:13px;color:var(--text,#0f172a)}
.seo-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.seo-card,.seo-question-card{border:1px solid var(--border,rgba(148,163,184,.25));border-radius:20px;background:rgba(248,250,252,.72);padding:18px;min-width:0}
.seo-card p,.seo-question-card p,.seo-page-body p,.seo-section li{line-height:1.62;color:var(--muted,#475569)}
.seo-muted{font-size:13px;font-weight:800;color:var(--muted,#64748b)!important;margin-bottom:0}
.seo-question-list{display:grid;gap:14px}
.seo-options{margin:10px 0 12px;padding-left:24px}
.seo-options li{padding:4px 0}
.seo-options-large li{font-size:16px}
.seo-answer{border-radius:18px;background:rgba(20,184,166,.10);padding:14px 16px;color:var(--text,#0f172a)!important}
.seo-answer-label{display:inline-flex;margin-left:8px;color:var(--accent,#0f766e);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.seo-related ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.seo-related a{display:inline-flex;border:1px solid var(--border,rgba(148,163,184,.32));border-radius:999px;background:rgba(255,255,255,.72);padding:10px 14px;font-weight:850}
.seo-page-body h2{margin:20px 0 8px;font-size:24px;color:var(--text,#0f172a)}
.seo-page-body ul{padding-left:22px}
@media (max-width:720px){.server-seo-content{width:min(100% - 20px,1120px);padding-top:10px}.seo-hero,.seo-section{border-radius:20px;padding:20px}.seo-card-grid{grid-template-columns:1fr}.seo-related ul{display:grid;grid-template-columns:1fr}.seo-related a{justify-content:center;text-align:center}.seo-pill-row span{font-size:12px}}