/* The look of the app: friendly, modern, "learning languages". Loaded after the page's own styles,
   so it only restyles — every feature and button keeps working as before.
   - Navigation: a grid of icon tiles (desktop) / a bottom bar with a "More" sheet (phones).
   - Friendly rounded font, soft glass cards, a blue→mint gradient as the signature colour. */

:root {
  --grad: linear-gradient(135deg, #ff6b57 0%, #ffc247 100%);
  --grad-soft: linear-gradient(135deg, rgba(255,107,87,.20), rgba(255,194,71,.12));
  --glass: rgba(36,27,48, .72);
  --glass-border: rgba(255, 255, 255, .08);
  --radius: 20px;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
body {
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(255,107,87,.24), transparent 62%),
    radial-gradient(720px 520px at 100% 4%, rgba(255,194,71,.15), transparent 58%),
    radial-gradient(600px 400px at 50% 110%, rgba(255,107,139,.09), transparent 60%),
    linear-gradient(160deg, #17121f, #1c1527 60%, #17121f);
  background-attachment: fixed;
}
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.01em; }
select, button, input, textarea { font-family: inherit; }

/* ---------- cards ---------- */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.card > h3:first-child {
  display: flex; align-items: center; gap: 10px;
  margin-top: 0; font-size: 1.2rem;
}
.card > h3:first-child::after {
  content: ""; flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,107,87,.45), transparent);
}

/* ---------- header with a greeting that changes language ---------- */
#appScreen > header { margin-bottom: 18px; padding-top: 4px; }
#appScreen > header h1 {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.9rem; margin: 0 0 2px;
}
#appScreen > header h1 .brand-text {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#appScreen > header p { font-size: .95rem; }
.greet { min-height: 2.4rem; margin: 6px 0 4px; display: flex; justify-content: center; align-items: baseline; gap: 10px; }
.greet-word { font-size: 1.35rem; font-weight: 800; color: var(--text); transition: opacity .35s ease, transform .35s ease; }
.greet-lang {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #17121f;
  background: var(--grad); padding: 2px 9px; border-radius: 999px; transition: opacity .35s ease;
}
.greet.swap .greet-word { opacity: 0; transform: translateY(6px); }
.greet.swap .greet-lang { opacity: 0; }

/* ---------- level + voice ---------- */
.level-bar { justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; padding: 14px 20px; }
.level-bar .field { align-items: flex-start !important; }
.level-bar .voice-field { align-items: stretch !important; }
.level-bar > .field:first-child select {
  border: 0; color: #17121f; background: var(--grad); font-weight: 800; border-radius: 999px; padding: 10px 22px;
}
.level-bar > .field:first-child select option { color: #111; background: #fff; }
.level-bar label.small { font-weight: 700; letter-spacing: .02em; }
.voice-field { flex: 1 1 280px; min-width: 0; }

/* ---------- main navigation ---------- */
.tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  overflow: visible;
  padding: 0;
  margin-bottom: 20px;
}
.tabs-more { display: contents; }
.tabs .tab-more { display: none; }
.tabs .tab-btn[hidden], .tabs .tab-more[hidden] { display: none !important; }

.tabs .tab-btn {
  --c: #ff6b57;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  flex: 0 0 128px; white-space: normal; text-align: center;
  padding: 14px 8px 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  color: var(--text-dim);
  font-weight: 700; font-size: .85rem; line-height: 1.15;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tabs .tab-btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 55%, transparent); color: var(--text); }
.tabs .tab-btn .ti {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-size: 1.35rem;
  background: color-mix(in srgb, var(--c) 20%, transparent);
  transition: background .15s ease;
}
.tabs .tab-btn.active {
  color: var(--text);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 26%, transparent), rgba(36,27,48,.7));
  border-color: color-mix(in srgb, var(--c) 70%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--c) 28%, transparent);
}
.tabs .tab-btn.active .ti { background: var(--c); }

.tab-btn[data-tab="recording"]     { --c: #ff6b57; }
.tab-btn[data-tab="stories"]       { --c: #ff9f6b; }
.tab-btn[data-tab="grammar"]       { --c: #b58cff; }
.tab-btn[data-tab="conversations"] { --c: #ff8fb1; }
.tab-btn[data-tab="vocabulary"]    { --c: #ffa24c; }
.tab-btn[data-tab="speakingzone"]  { --c: #e879f9; }
.tab-btn[data-tab="dictionary"]    { --c: #c4a8ff; }
.tab-btn[data-tab="saved"]         { --c: #ffd98a; }
.tab-btn[data-tab="levelexam"]     { --c: #f5c542; }
.tab-btn[data-tab="fun"]           { --c: #ffd166; }
.tab-btn[data-tab="listening"]     { --c: #ff9f6b; }
.tab-btn[data-tab="admin"]         { --c: #b9aec6; }

/* ---------- buttons ---------- */
#micBtn { background: var(--grad); color: #17121f; font-weight: 800; box-shadow: 0 8px 22px rgba(255,107,87,.35); }
#micBtn.recording { background: var(--error); }
.tab-panel > .card:first-child { margin-top: 0; }

/* ---------- phones: bottom navigation bar ---------- */
@media (max-width: 700px) {
  body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; gap: 2px; margin: 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgba(26,19,36, .94);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid var(--glass-border);
  }
  .tabs .tab-btn, .tabs .tab-more {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; border: 0; background: transparent; border-radius: 14px;
    font-size: 11px; font-weight: 700; box-shadow: none; transform: none; color: var(--text-dim);
  }
  .tabs .tab-more { display: flex; --c: #b9aec6; cursor: pointer; }
  .tabs .tab-btn .ti, .tabs .tab-more .ti { width: 36px; height: 30px; border-radius: 12px; font-size: 1.2rem; display: grid; place-items: center;
    background: transparent; }
  .tabs .tab-more .ti { background: transparent; }
  .tabs .tab-btn .tl, .tabs .tab-more .tl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabs .tab-btn.active, .tabs .tab-more.active { background: transparent; box-shadow: none; color: var(--text); }
  .tabs .tab-btn.active .ti, .tabs .tab-more.active .ti { background: var(--c); }
  .tabs .tab-btn:hover { transform: none; }

  /* the sheet with the other sections */
  .tabs-more {
    display: none; position: absolute; left: 10px; right: 10px; bottom: calc(100% + 10px);
    grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px;
    background: #241b30; border: 1px solid var(--border); border-radius: 22px;
    box-shadow: 0 -10px 40px rgba(0,0,0,.5);
  }
  .tabs.open .tabs-more { display: grid; }
  .tabs-more .tab-btn {
    flex: none; padding: 12px 4px 10px; border-radius: 16px; background: rgba(255,255,255,.04); font-size: 12px;
  }
  .tabs-more .tab-btn .ti { width: 40px; height: 36px; background: color-mix(in srgb, var(--c) 20%, transparent); }
  .tabs-more .tab-btn.active { background: color-mix(in srgb, var(--c) 18%, transparent); }

  /* keep the text-size button above the bar */
  body:has(#appScreen:not([hidden])) #textSizeBox { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .level-bar { padding: 12px 14px; }
  #appScreen > header h1 { font-size: 1.6rem; }
}

/* short names only in the phone bottom bar (the "More" sheet and desktop show the full name) */
.tl-short { display: none; }
@media (max-width: 700px) {
  .tabs > .tab-btn .tl-full { display: none; }
  .tabs > .tab-btn .tl-short { display: inline; }
}

body.nav-open #textSizeBox { display: none; }

@media (prefers-reduced-motion: reduce) {
  .greet-word, .greet-lang, .tabs .tab-btn { transition: none; }
}

/* The voice picker (dropdown + Test button) must shrink/wrap instead of widening the page. */
.voice-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.voice-row select { flex: 1 1 180px; min-width: 0; max-width: 100%; width: auto; text-overflow: ellipsis; }
.voice-row button { flex: 0 0 auto; }
.level-bar select, .account-bar select, .field select { max-width: 100%; }

/* =====================================================================
   Landing page and sign-in (the screens before login)
   ===================================================================== */

/* The flags stay, but tinted into the app's colours so the card stands out. */
#flagBackdrop::after {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(23,18,31, .12) 0%, rgba(23,18,31, .50) 85%),
    linear-gradient(160deg, rgba(255,107,87,.16), rgba(255,194,71,.04) 55%, rgba(255,107,139,.08));
}

/* Hero: flags as round badges, gradient name, greeting, tagline. */
.auth-hero { margin-bottom: 22px; }
.auth-hero h1 { display: inline-flex; align-items: center; gap: 10px; font-size: 2.4rem; background: none; color: var(--text); margin: 0 0 2px; }
.auth-hero h1 .brand-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-hero .greet { margin: 4px 0 6px; }
.auth-hero p { font-size: 1rem; max-width: 520px; margin: 0 auto; line-height: 1.5; }
.auth-flags { gap: 14px; margin-bottom: 16px; }
.auth-flags img { width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255,255,255,.28); }

/* Landing card */
body.pre-auth .landing-card {
  max-width: 600px; padding: 26px; border-radius: 26px; gap: 16px;
  background: rgba(30,23,41, .86);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.landing-step { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; font-size: 1.12rem; }
.step-n {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); color: #17121f; font-weight: 800; font-size: .95rem;
}

.lang-choices { gap: 12px; }
.lang-choice {
  position: relative; gap: 10px; padding: 18px 8px 14px; color: var(--text);
  border: 2px solid transparent; border-radius: 20px;
  background: linear-gradient(var(--panel-2), var(--panel-2)) padding-box, linear-gradient(135deg, var(--border), var(--border)) border-box;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lang-choice:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.lang-choice img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.2); }
.lang-choice.selected {
  background: linear-gradient(var(--panel-2), var(--panel-2)) padding-box, var(--grad) border-box;
  box-shadow: 0 10px 28px rgba(255,107,87,.28);
}
.lang-choice.selected::after {
  content: "✓"; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad); color: #17121f; font-size: .8rem; font-weight: 900;
}

.browser-note { border-radius: 16px; padding: 12px 14px; font-size: .9rem; }

.big-test-btn {
  border-radius: 20px; padding: 22px 16px; background: var(--grad);
  box-shadow: 0 14px 38px rgba(255,107,87, .38);
  transition: transform .15s ease, box-shadow .15s ease;
}
.big-test-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(255,107,87,.5); }

.section-list { gap: 8px; }
.section-list li {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; font-size: .88rem;
  background: rgba(255,255,255,.04); border: 1px solid var(--glass-border);
}
.landing-hint { line-height: 1.5; }
.skip-link {
  padding: 10px 20px; border: 1px solid var(--border); border-radius: 999px; text-decoration: none;
  color: var(--text); background: rgba(255,255,255,.03); transition: background .15s ease;
}
.skip-link:hover { background: rgba(255,255,255,.08); }

/* Sign-in / sign-up card */
#authScreen .account-bar {
  max-width: 420px; width: 100%; padding: 26px; gap: 14px; border-radius: 26px;
  background: rgba(30,23,41, .9);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.auth-mode-tabs { padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); margin-bottom: 6px; }
.auth-mode-btn { padding: 10px 12px; border-radius: 999px; font-weight: 700; }
.auth-mode-btn.active { background: var(--grad); color: #17121f; box-shadow: 0 6px 16px rgba(255,107,87,.35); }
#authScreen input[type="text"], #authScreen input[type="email"], #authScreen input[type="password"], #authScreen input[type="tel"], #authScreen select {
  padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--border);
}
#authScreen input:focus, #authScreen select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,107,87,.25); }
#authScreen .auth-submit { padding: 14px; border-radius: 16px; font-size: 1.02rem; background: var(--grad); box-shadow: 0 10px 28px rgba(255,107,87,.35); }
#authScreen .auth-submit:hover { transform: translateY(-1px); }

@media (max-width: 560px) {
  .auth-hero h1 { font-size: 2rem; }
  .auth-flags img { width: 46px; height: 46px; }
  body.pre-auth .landing-card, #authScreen .account-bar { padding: 20px 16px; border-radius: 22px; }
  .section-list { grid-template-columns: 1fr; }
}

/* The big title must never be wider than the screen, even at the largest text size. */
.auth-hero h1, #appScreen > header h1 { max-width: 100%; flex-wrap: wrap; justify-content: center; font-size: min(2.4rem, 11vw); }
#appScreen > header h1 { font-size: min(1.9rem, 9vw); }

/* Keep the title and tagline readable over the bright flags. */
body.pre-auth .auth-hero { position: relative; z-index: 1; }
body.pre-auth .auth-hero::before {
  content: ""; position: absolute; inset: -14px -40px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(23,18,31,.82) 0%, rgba(23,18,31,.55) 55%, transparent 80%);
}
body.pre-auth .auth-hero p { color: var(--text); text-shadow: 0 2px 12px rgba(0,0,0,.9); }

/* =====================================================================
   The flag wall stays behind the whole site (not only the first page)
   ===================================================================== */
#flagBackdrop { display: block; }
.wrap { position: relative; z-index: 1; }
/* Inside the app: dimmer, so lessons and exams stay easy to read. */
body:not(.pre-auth) #flagBackdrop::after {
  background:
    linear-gradient(180deg, rgba(23,18,31,.72), rgba(23,18,31,.84)),
    linear-gradient(160deg, rgba(255,107,87,.20), rgba(255,194,71,.05) 55%, rgba(255,107,139,.10));
}

/* =====================================================================
   Placement test: top bar, part intro, questions, writing, speaking, result
   ===================================================================== */

/* top bar: steps as pills, timer as a chip */
.test-topbar {
  top: 8px; padding: 8px 10px; margin-bottom: 14px; border-radius: 18px;
  background: rgba(30,23,41, .88); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.test-steps li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.03); }
.test-steps li.active { background: var(--grad); border-color: transparent; color: #17121f; box-shadow: 0 6px 16px rgba(255,107,87,.35); }
.test-steps li.done { color: var(--ok); border-color: rgba(95,214,138,.4); }
.test-timer { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.06); }
.test-timer.low { background: rgba(255,107,107,.16); }

.test-card { max-width: 760px; padding: 26px; border-radius: 26px; }
@media (max-width: 560px) { .test-card { padding: 18px 14px; border-radius: 22px; } }

/* part intro */
.section-intro { gap: 14px; padding: 8px 0; }
.section-intro-icon {
  width: 92px; height: 92px; display: grid; place-items: center; font-size: 2.8rem; border-radius: 28px;
  background: var(--grad-soft); border: 1px solid var(--glass-border); box-shadow: 0 14px 34px rgba(255,107,87,.25);
}
.section-intro h2 { font-size: 1.6rem; }
.section-intro p { color: var(--text-dim); line-height: 1.6; max-width: 520px; margin: 0; }

.stage-banner { background: var(--grad-soft); border: 1px solid var(--glass-border); font-weight: 700; }
.part-label { color: var(--accent-2); letter-spacing: .1em; }
.stage-part { border-bottom: 1px dashed var(--glass-border); }

/* reading text */
.reading-text {
  position: relative; padding: 18px 20px 18px 24px; border-radius: 18px; line-height: 1.8; font-size: 1.05rem;
  font-family: "Nunito", Georgia, serif; background: rgba(255,255,255,.04); border: 1px solid var(--glass-border);
}
.reading-text::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: var(--grad); }

/* questions: answer cards with a letter badge */
.q-block { margin: 18px 0; }
.q-text { font-weight: 700; font-size: 1.04rem; }
.q-options { gap: 10px; }
.q-opt {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; line-height: 1.4; text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--text);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.q-opt:hover { transform: translateY(-1px); border-color: rgba(255,107,87,.55); }
.q-opt b {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,107,87,.18); color: var(--text); font-size: .9rem;
}
.q-opt.selected { border-color: transparent; background: linear-gradient(var(--panel-2), var(--panel-2)) padding-box, var(--grad) border-box; border: 2px solid transparent; box-shadow: 0 8px 22px rgba(255,107,87,.25); }
.q-opt.selected b { background: var(--grad); color: #17121f; }

/* listening */
.listen-intro { font-style: normal; }
.play-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 999px; border: 0;
  background: var(--grad); color: #17121f; box-shadow: 0 10px 28px rgba(255,107,87,.35);
}
.play-btn small { color: rgba(23,18,31,.75); }
.play-btn:disabled { opacity: .5; box-shadow: none; }

/* writing */
.writing-prompt { border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); border-left: 4px solid var(--accent); }
.writing-box { border-radius: 18px; background: rgba(255,255,255,.04); padding: 14px 16px; }
.writing-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,107,87,.25); }
.word-count { display: inline-block; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.05); }

/* speaking */
.read-aloud, .talk-prompt {
  border-left: 0; position: relative; padding: 18px 20px 18px 26px; border-radius: 18px;
  background: var(--grad-soft); border: 1px solid var(--glass-border);
}
.read-aloud::before, .talk-prompt::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: var(--grad); }
.rec-btn { border-radius: 999px; padding: 16px 26px; border: 0; background: var(--grad); color: #17121f; box-shadow: 0 10px 28px rgba(255,107,87,.35); }
.rec-btn.recording { background: var(--error); color: #fff; }
.heard { padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px dashed var(--glass-border); }

/* navigation */
.test-nav button { padding: 12px 20px; border-radius: 999px; }
.test-nav button.primary, .complete-actions button.primary { background: var(--grad); border: 0; color: #17121f; font-weight: 800; box-shadow: 0 8px 22px rgba(255,107,87,.3); }
.too-hard-btn { border-radius: 999px; }

/* result */
.result-overlay { background: rgba(16,11,22, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.result-card {
  max-width: 640px; border-radius: 28px; padding: 30px 22px; gap: 16px;
  background: rgba(30,23,41, .96); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.result-level { font-size: 5rem; letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.skill-grid { gap: 12px; }
.skill-card { border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); padding: 14px 6px; }
.skill-card:nth-child(1) { box-shadow: inset 0 3px 0 #ff9f6b; }
.skill-card:nth-child(2) { box-shadow: inset 0 3px 0 #b58cff; }
.skill-card:nth-child(3) { box-shadow: inset 0 3px 0 #ffc247; }
.skill-card:nth-child(4) { box-shadow: inset 0 3px 0 #ff6b57; }
.skill-level { font-size: 1.7rem; }
.result-feedback { border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); }

/* "Need more voices?" help under the AI speaker picker */
.voice-help { margin-top: 8px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); font-size: .88rem; color: var(--text-dim); }
.voice-help summary { cursor: pointer; font-weight: 700; color: var(--text); }
.voice-help p { margin: 8px 0 4px; }
.voice-help ol { margin: 6px 0 8px; padding-left: 20px; line-height: 1.55; }
.voice-help li { margin-bottom: 4px; }

/* coloured highlights on the words clicked in a story (and the colour choice in the translation card) */
.story-word.hl { border-radius: 4px; padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.story-word.hl-0 { background: rgba(80, 200, 120, .45); }
.story-word.hl-1 { background: rgba(240, 80, 80, .42); }
.story-word.hl-2 { background: rgba(160, 100, 240, .42); }
.story-word.hl-3 { background: rgba(255, 150, 50, .5); }
.story-word.hl-4 { background: rgba(255, 220, 50, .55); }
.story-word.hl-5 { background: rgba(70, 150, 255, .45); }
.story-word.hl-6 { background: rgba(255, 120, 190, .5); }
.story-word.hl-7 { background: rgba(150, 100, 60, .5); }
.story-word.hl-8 { background: rgba(40, 200, 200, .45); }
.story-word.hl-9 { background: rgba(160, 165, 175, .5); }
.hl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.hl-label { font-size: .8rem; opacity: .75; margin-right: 2px; }
.hl-dot { width: 24px; height: 24px; min-width: 24px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); cursor: pointer; }
.hl-dot.on { outline: 3px solid var(--accent, #ff6b57); outline-offset: 1px; }
.hl-dot-0 { background: #50c878; } .hl-dot-1 { background: #f05050; } .hl-dot-2 { background: #a064f0; } .hl-dot-3 { background: #ff9632; }
.hl-dot-4 { background: #ffdc32; } .hl-dot-5 { background: #4696ff; } .hl-dot-6 { background: #ff78be; } .hl-dot-7 { background: #96643c; }
.hl-dot-8 { background: #28c8c8; } .hl-dot-9 { background: #a0a5af; }
.hl-clear { width: 24px; height: 24px; min-width: 24px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: transparent; color: inherit; font-size: .75rem; line-height: 1; cursor: pointer; }

/* ---------- messages with the admin ---------- */
.sp-chat { max-height: 22rem; min-height: 6rem; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .6rem; margin: .6rem 0; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); }
.sp-row { display: flex; } .sp-row.me { justify-content: flex-end; }
.sp-bubble { max-width: 82%; padding: .55rem .8rem; border-radius: 16px; line-height: 1.45; font-size: 1rem; word-wrap: break-word; overflow-wrap: anywhere; }
.sp-row.them .sp-bubble { background: rgba(255,255,255,.1); border-bottom-left-radius: 4px; }
.sp-row.me .sp-bubble { background: var(--accent, #ff6b57); color: #fff; border-bottom-right-radius: 4px; }
.sp-bubble small { display: block; margin-top: .2rem; opacity: .7; font-size: .72rem; }
.sp-input { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.06); color: inherit; }
.sp-actions { display: flex; align-items: center; gap: .8rem; margin-top: .5rem; }
.sp-badge { display: inline-block; min-width: 1.1rem; padding: 0 .3rem; margin-left: .3rem; border-radius: 999px; background: #ff4d4f; color: #fff; font-size: .7rem; font-weight: 800; line-height: 1.1rem; text-align: center; }
.tab-btn { position: relative; } .tab-btn .sp-badge { position: absolute; top: .2rem; right: .4rem; margin: 0; }
.sp-threads { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0; max-height: 16rem; overflow-y: auto; }
.sp-thread { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; text-align: left; padding: .5rem .8rem; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.04); color: inherit; cursor: pointer; }
.sp-thread.new { border-color: var(--accent, #ff6b57); } .sp-thread.on { background: rgba(255,255,255,.1); }
.sp-thread span, .sp-thread small { grid-column: 1 / -1; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-thread i { font-style: normal; background: #ff4d4f; color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; font-weight: 800; }

.sp-attach { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.06); font-size: 1.3rem; cursor: pointer; }
.sp-chip { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(255,255,255,.1); font-size: .9rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-chip[hidden] { display: none; }
.sp-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; padding: 0 .2rem; }
.sp-file { display: block; margin-bottom: .35rem; color: inherit; }
.sp-file.img img { display: block; max-width: 100%; max-height: 14rem; border-radius: 10px; background: rgba(0,0,0,.2); min-width: 4rem; min-height: 3rem; }
.sp-file.pdf { text-decoration: underline; font-weight: 700; }

.pw-change { flex-basis: 100%; display: flex; flex-direction: column; gap: .6rem; max-width: 26rem; margin-top: .6rem; }
.pw-change[hidden] { display: none; }
.pw-change input { width: 100%; box-sizing: border-box; font: inherit; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.06); color: inherit; }
.pw-actions { display: flex; align-items: center; gap: .8rem; }

.contact-pay { width: 100%; max-width: 26rem; padding: .9rem 1rem; border-radius: 14px; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 1.05rem; color: #fff; background: linear-gradient(135deg, #ff6b57, #ff9a57); }
.pay-note { margin: .2rem 0; font-weight: 700; color: var(--accent-2, #ffc247); }
.pay-or { margin: .6rem 0 .2rem; opacity: .8; font-size: .95rem; }

/* ---------- Arabic interface (right-to-left): learning content stays left-to-right ---------- */
html[dir="rtl"] :where([lang="en"], [lang="es"], [lang="fr"]):not(html) { direction: ltr; text-align: left; }
html[dir="rtl"] :where(#storyText, .story-text, .k-scene-text, .fn-paper, .k-w, .k-word b, .k-ws) { direction: ltr; }
html[dir="rtl"] .sp-row.me { justify-content: flex-start; } html[dir="rtl"] .sp-row.them { justify-content: flex-end; }
html[dir="rtl"] .sp-page, html[dir="rtl"] .k-page { text-align: right; }

.confirm-title { font-size: 2rem; margin: .2rem 0; }
.confirm-big { font-size: 1.35rem; line-height: 1.55; max-width: 34rem; }
.lock-card .big-test-btn.alt { background: rgba(255,255,255,.1); box-shadow: none; border: 2px solid var(--glass-border); }

/* required fields: a red star, and a red outline on the empty ones after pressing the button */
label.req::after { content: " *"; color: #ff6b57; font-weight: 800; }
.field-missing { border-color: #ff4d4f !important; box-shadow: 0 0 0 3px rgba(255,77,79,.28) !important; }

/* the logo next to the name in the header and on the sign-in screen */
.brand-logo { width: 1.5em; height: 1.5em; vertical-align: -.38em; margin-inline-end: .15em; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); }

/* admin: accounts waiting for approval */
.pending-pill { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 800; background: rgba(255,179,71,.22); color: #ffb347; border: 1px solid rgba(255,179,71,.5); }
.pending-stat { color: #ffb347; font-weight: 800; }

/* Soft email verification banner (email-verify.js) */
.email-verify { text-align: center; border: 2px solid rgba(255,179,71,.55); }
.email-verify h3 { margin: 0 0 6px; font-size: 1.2rem; }
.email-verify p { margin: 4px 0; }
.email-verify .ev-mail { font-size: 1.05rem; word-break: break-all; }
.email-verify .ev-small, .email-verify .ev-msg { font-size: .9rem; opacity: .85; }
.email-verify .ev-msg { color: #ffb347; font-weight: 700; opacity: 1; }
.email-verify .ev-big {
  display: block; width: 100%; box-sizing: border-box; margin: 12px 0 6px; padding: 22px 16px; border: 0; border-radius: 20px;
  background: var(--grad); color: #fff; font-size: 1.25rem; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 0 14px 38px rgba(255,107,87,.38);
}
.email-verify .ev-big:disabled { opacity: .6; cursor: default; }
.email-verify .ev-links { display: flex; justify-content: center; gap: 18px; margin-top: 6px; }
.access-locked #emailVerifyBar { display: none; }
.lock-card .ev-mail { font-size: 1.05rem; word-break: break-all; text-align: center; }

/* Plan basket (access.js): items, period, original price / discount / total */
.basket-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.basket-flag { width: 28px; height: 20px; object-fit: cover; border-radius: 3px; font-size: 1.4rem; line-height: 1; }
.basket-name { font-weight: 800; }
.basket-active { color: var(--accent-2, #ffc247); font-size: .75rem; }
.basket-total { width: 100%; box-sizing: border-box; border: 2px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--panel-2); }
.basket-total .bt-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; text-align: left; }
.basket-total s { opacity: .6; }
.basket-total .bt-orig { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 8px; }
.basket-total .bt-off { color: #25d366; font-weight: 800; }
.basket-total .bt-total { border-top: 2px solid var(--border); margin-top: 6px; padding-top: 8px; font-size: 1.3rem; font-weight: 900; }
.basket-total .bt-total small { font-size: .8rem; font-weight: 600; opacity: .8; }
.basket-empty { margin: 4px 0; }
.contact-pay:disabled { opacity: .5; cursor: not-allowed; }