/* LEXIO · Space Learning theme (concept 1i).
   Visual layer only: loaded AFTER the existing stylesheets, it overrides colours, type, surfaces and the desktop shell layout.
   No markup, JS, routes or API change. All existing classes, states (aria-current, aria-pressed, .right/.wrong …) and
   breakpoints keep working. The admin "brand colour" still drives the accent through var(--brand). Suggested value: #d9486b. */

@font-face { font-family: "Exo 2"; src: url("/fonts/Exo2-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* latin-ext carries the new Uzbek letters Ŏ Ğ Ş Ç */
@font-face { font-family: "Exo 2"; src: url("/fonts/Exo2-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Exo 2"; src: url("/fonts/Exo2-cyrillic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

html:root:root:root {
  --bg: #05061a; --surface: rgba(18, 20, 58, .72); --surface-2: rgba(160, 175, 255, .08); --ink: #e8ecff; --ink-2: #b4bce6; --line: rgba(160, 175, 255, .22);
  --space-solid: #0b0d2a; --coral: #ff8a6b; --cyan: #8fd3ff; --glow: rgba(255, 138, 107, .45);
  --brand-ink: #ffb89c; --brand-soft: rgba(255, 138, 107, .16); --on-brand: #ffffff;
  --gold: #ffb27a; --gold-soft: rgba(255, 178, 122, .14); --gold-ink: #ffc7a8; --flame: #ffb27a;
  --danger: #ff8aa6; --danger-btn: #d9486b; --danger-soft: rgba(255, 93, 143, .14);
  --info: #8fd3ff; --info-soft: rgba(143, 211, 255, .12); --info-btn: #2b5fcf; --ok: #6fe0b8; --ok-soft: rgba(62, 230, 168, .12);
  --radius: 24px; --radius-sm: 14px;
  --shadow: 0 10px 40px rgba(0, 0, 0, .35);
  --font: "Exo 2", ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --focus: 0 0 0 3px rgba(143, 211, 255, .6);
  color-scheme: dark;
}

/* ---------- cosmic backdrop ---------- */
body { background: #05061a; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, #fff, transparent), radial-gradient(1px 1px at 70% 50%, #fff, transparent),
    radial-gradient(1px 1px at 85% 85%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 90%, #fff, transparent),
    radial-gradient(1px 1px at 92% 30%, #fff, transparent), radial-gradient(1px 1px at 20% 45%, #cdd, transparent),
    radial-gradient(1px 1px at 63% 33%, #fff, transparent), radial-gradient(1px 1px at 5% 88%, #fff, transparent),
    radial-gradient(ellipse at 70% 120%, #3a1d6e, transparent 60%), #05061a; }
body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; width: 420px; height: 420px; right: -140px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffb27a, #d9486b 55%, #4a1650); box-shadow: 0 0 90px rgba(255, 120, 120, .28); opacity: .85; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.01em; }
a { color: var(--brand-ink); }

/* ---------- shell: desktop sidebar becomes a floating top bar ---------- */
@media (min-width: 900px) {
  .app { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px clamp(16px, 3vw, 32px);
    border: 0; background: linear-gradient(#05061a 40%, rgba(5, 6, 26, 0)); overflow: visible; }
  .sidebar .brand { order: 1; padding: 0; color: var(--ink); letter-spacing: .3em; text-transform: uppercase; font-size: 1.3rem; }
  .sidebar .nav { order: 2; flex-direction: row; gap: 2px; margin: 0 auto; padding: 5px; border-radius: 999px; background: rgba(5, 6, 26, .65); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(10px); }
  .sidebar .nav a { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 0; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .92rem; color: #d3d8f5; gap: 8px; }
  .sidebar .nav a svg { width: 18px; height: 18px; }
  .sidebar .nav a:hover { background: rgba(255, 255, 255, .08); }
  .sidebar .nav a[aria-current="page"] { background: #fff; color: #05061a; }
  .sidebar #side-chips { order: 3; padding: 0 !important; }
  .sidebar .side-lang { order: 4; margin: 0; padding: 0; }
  .sidebar .side-lang .lang-list { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; }
  .sidebar .lang-switcher.wide { display: inline-block; }
  .sidebar .lang-switcher.wide .lang-btn { width: auto; }
  .sidebar .spacer { display: none; }
  .sidebar > .btn { order: 5; }
  .main { padding-top: 8px; }
  .content { max-width: 1120px; }
}
@media (min-width: 900px) and (max-width: 1279px) { .sidebar .nav a svg { display: none; } .sidebar .nav { margin: 0; } }

/* mobile top bar + tab bar */
.topbar { background: rgba(5, 6, 26, .82); border-bottom: 1px solid var(--line); }
.topbar .brand { color: var(--ink); letter-spacing: .2em; text-transform: uppercase; }
.tabbar { background: rgba(5, 6, 26, .92); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.tabbar a { color: var(--ink-2); font-weight: 600; }
.tabbar a[aria-current="page"] { color: #fff; background: rgba(255, 138, 107, .18); box-shadow: inset 0 0 0 1px rgba(255, 138, 107, .45); }

/* ---------- surfaces ---------- */
.card, dialog, .lang-list, .q-sentence, .passage, .flash-inner, .tile-area { background: var(--surface); border: 1px solid var(--line); }
/* a blur behind every card makes the browser re-composite dozens of layers on each scroll; only the one overlay that needs it keeps it */
dialog { backdrop-filter: blur(10px); }
.card { border-radius: var(--radius); padding: 22px; }
dialog { background: var(--space-solid); }
dialog::backdrop { background: rgba(3, 4, 18, .7); backdrop-filter: blur(4px); }
.notice { background: var(--info-soft); border: 1px solid rgba(143, 211, 255, .3); }
.empty { color: var(--ink-2); }
.input, select.input, textarea.input { background: var(--space-solid); border: 1px solid rgba(160, 175, 255, .3); color: var(--ink); border-radius: 14px; }
.input:focus { background: var(--space-solid); border-color: var(--cyan); }
select.input option { background: var(--space-solid); color: var(--ink); }
.toast { background: #e8ecff; color: #05061a; }

/* ---------- buttons ---------- */
.btn { background: linear-gradient(90deg, var(--coral), var(--brand)); color: #fff; border-radius: 999px; box-shadow: 0 0 24px var(--glow); text-transform: none; letter-spacing: .01em; font-weight: 700; font-size: 1rem; }
.btn:hover { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 0 12px var(--glow); }
.btn:disabled, .btn[aria-disabled="true"] { background: rgba(255, 255, 255, .08); color: var(--ink-2); box-shadow: none; }
.btn.secondary { background: rgba(5, 6, 26, .5); color: var(--ink); border: 1px solid rgba(255, 255, 255, .35); box-shadow: none; }
.btn.secondary:hover { background: rgba(255, 255, 255, .08); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--brand-ink); box-shadow: none; }
.btn.small { box-shadow: 0 0 14px var(--glow); }
.btn.secondary.small, .btn.ghost.small { box-shadow: none; }
.icon-btn { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.icon-btn:hover { background: var(--surface-2); }
.lang-btn { background: rgba(5, 6, 26, .65); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; color: var(--ink); font-weight: 600; }
.lang-btn:active { border-bottom-width: 1px; transform: none; }
.lang-option:hover, .lang-option.active { background: rgba(255, 255, 255, .08); }

/* ---------- chips, progress, badges ---------- */
.chip { background: rgba(5, 6, 26, .65); border: 1px solid var(--line); font-weight: 600; }
.chip.flame { color: #ffc7a8; border-color: rgba(255, 178, 122, .5); }
.chip.bolt { color: #bfe6ff; border-color: rgba(143, 211, 255, .5); }
.chip.heart { color: #ffb3c6; border-color: rgba(255, 138, 166, .5); }
.chip.ok, .chip.warn, .chip.bad, .chip.info { background: rgba(5, 6, 26, .65); }
.chip.ok { border-color: rgba(111, 224, 184, .5); } .chip.warn { border-color: rgba(255, 178, 122, .5); } .chip.bad { border-color: rgba(255, 138, 166, .5); } .chip.info { border-color: rgba(143, 211, 255, .5); }
.progress { background: rgba(255, 255, 255, .1); border: 0; height: 8px; }
.progress > i { background: linear-gradient(90deg, #ffb27a, var(--coral)); box-shadow: 0 0 12px var(--glow); }
.badge { background: transparent; border: 1px solid rgba(143, 211, 255, .5); color: #bfe6ff; }

/* ---------- dashboard ---------- */
.hello img { filter: drop-shadow(0 0 18px rgba(143, 211, 255, .35)); }
.continue-card { background: linear-gradient(120deg, rgba(217, 72, 107, .45), rgba(43, 95, 207, .35)); border: 1px solid rgba(255, 175, 150, .45); box-shadow: 0 0 50px rgba(217, 72, 107, .2); padding: 26px; }
.continue-card h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.continue-card .btn { background: #fff; color: #05061a; box-shadow: 0 0 24px rgba(255, 255, 255, .3); }
.stat .ico { background: rgba(5, 6, 26, .6); border: 1px solid var(--line); border-radius: 50%; }
.stat b { font-size: 1.6rem; font-weight: 800; }
.ring { background: conic-gradient(var(--cyan) calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0); box-shadow: 0 0 30px rgba(143, 211, 255, .25); }
.ring > div { background: var(--space-solid); }
.ring.met { background: conic-gradient(var(--coral) 100%, transparent 0); }
.week .bar i { background: rgba(143, 211, 255, .55); border-radius: 4px; }
.week .bar:last-child i { background: var(--coral); box-shadow: 0 0 12px var(--glow); }
.week .bar.zero i { background: rgba(255, 255, 255, .08); }
.ach-mini { background: rgba(5, 6, 26, .6); border: 1px solid var(--line); border-radius: 999px; font-weight: 600; }
.ach-mini svg { color: var(--gold); }

/* ---------- learning path: orbit nodes ---------- */
.level-tab { background: rgba(5, 6, 26, .6); border: 1px solid var(--line); border-radius: 999px; font-weight: 600; }
.level-tab[aria-selected="true"] { background: #fff; color: #05061a; border-color: #fff; }
.unit-banner { background: linear-gradient(90deg, rgba(255, 138, 107, .3), rgba(43, 95, 207, .2)); border: 1px solid rgba(255, 175, 150, .4); box-shadow: none; border-radius: 22px; }
.node { background: radial-gradient(circle at 35% 35%, #8fd3ff, #2b5fcf 60%, #0e1c55); box-shadow: 0 0 22px rgba(143, 211, 255, .45); color: #fff; }
.node:active { transform: scale(.96); box-shadow: 0 0 12px rgba(143, 211, 255, .45); }
.node.completed { background: radial-gradient(circle at 35% 35%, #ffb27a, #d9486b 60%, #5a1b55); color: #fff; box-shadow: 0 0 22px var(--glow); }
.node.locked { background: rgba(255, 255, 255, .05); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.node.current { background: var(--space-solid); box-shadow: inset 0 0 0 3px var(--coral), 0 0 34px var(--glow); }
.node.current::after { border-color: rgba(255, 138, 107, .5); }
.start-pill { background: #fff; color: #05061a; border: 0; border-radius: 999px; }
.node-label { font-weight: 600; color: #d3d8f5; }

/* ---------- vocabulary, review ---------- */
.fchip { background: rgba(5, 6, 26, .6); border: 1px solid var(--line); font-weight: 600; }
.fchip[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #05061a; }
.word .en { font-weight: 800; font-size: 1.3rem; }
.word .ex { border-left: 2px solid rgba(255, 138, 107, .5); font-style: italic; }
.mode-card .ico { background: rgba(255, 138, 107, .16); color: #ffc7a8; border-radius: 50%; }
.mode-card:hover { border-color: rgba(255, 175, 150, .6); box-shadow: 0 0 22px rgba(217, 72, 107, .2); }
.flash-inner { min-height: 280px; background: radial-gradient(circle at 50% -20%, rgba(255, 138, 107, .35), rgba(11, 13, 42, .92) 60%); border: 1px solid rgba(255, 175, 150, .45); box-shadow: 0 0 50px rgba(217, 72, 107, .2); border-radius: 28px; }
.flash-inner .big { font-weight: 800; }

/* ---------- lesson player ---------- */
.lesson { background: transparent; }
.lesson-top .progress { height: 10px; }
.hearts { color: #ffb3c6; }
.q-title { font-weight: 800; }
.q-sentence { border-radius: 20px; }
.speak { background: var(--info-btn); box-shadow: 0 0 18px rgba(143, 211, 255, .4); border-radius: 50%; }
.speak.slow { background: transparent; border: 1px solid var(--line); box-shadow: none; }
.option, .tile { background: var(--surface); border: 1px solid var(--line); box-shadow: none; border-radius: 18px; font-weight: 600; }
.option:hover, .tile:hover { background: rgba(255, 255, 255, .06); }
.option .key { border: 1px solid var(--line); }
.option[aria-pressed="true"], .option.selected { border-color: var(--cyan); background: rgba(143, 211, 255, .12); box-shadow: 0 0 20px rgba(143, 211, 255, .3); }
.option.right { border-color: var(--ok); background: var(--ok-soft); box-shadow: 0 0 20px rgba(62, 230, 168, .25); }
.option.wrong { border-color: var(--danger); background: var(--danger-soft); }
.tile-area { border: 1px dashed var(--line); }
.tile-area.answer { border-style: solid; }
.blank { color: var(--coral); border-bottom-color: var(--ink-2); }
.lesson-foot { background: rgba(5, 6, 26, .92); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.lesson-foot.good { background: rgba(8, 40, 36, .95); border-color: var(--ok); }
.lesson-foot.bad { background: rgba(50, 10, 30, .95); border-color: var(--danger); }
.result-stats .card { border-radius: 20px; }

/* ---------- profile, leaderboard, achievements ---------- */
.avatar-pick[aria-checked="true"] { border-color: var(--coral); box-shadow: 0 0 16px var(--glow); }
.board li { border-bottom: 1px solid var(--line); }
.board li.you { background: linear-gradient(90deg, rgba(255, 138, 107, .22), rgba(43, 95, 207, .15)); box-shadow: inset 0 0 0 1px rgba(255, 175, 150, .45); border-radius: 16px; }
.ach-card .ico { background: radial-gradient(circle at 35% 35%, #ffb27a, #d9486b 60%, #5a1b55); color: #fff; border-radius: 50%; box-shadow: 0 0 18px var(--glow); }
.ach-card.locked { opacity: .6; filter: grayscale(1); }
.switch input { accent-color: var(--coral); }

/* ---------- start-up screen ---------- */
.splash { background: #05061a !important; color: var(--ink); }
.splash-name { color: var(--ink); letter-spacing: .3em; text-transform: uppercase; }

/* ---------- accessibility fixes ---------- */
/* a visible focus ring everywhere (the glow of buttons and chips must not replace it) */
html :focus-visible { outline: none; box-shadow: var(--focus) !important; }
/* the selected level tab is white: its secondary text must be dark */
.level-tab[aria-selected="true"] .muted, .level-tab[aria-selected="true"] span { color: #3a4070; }