/* Layout: a single centred column under a slim flag stripe; nav in the header on wide screens, a bottom tab bar on phones. */
:root {
  --paper: #f6f6f3;
  --surface: #ffffff;
  --ink: #17140f;
  --muted: #6a645a;
  --line: #e4e1da;
  --soft: #efede7;
  --red: #dd1c1a;
  --red-deep: #a8100e;
  --gold: #ffc61a;
  --gold-deep: #c99400;
  --gold-ink: #6b4d00;
  --black: #1b1915;
  --ok: #1f8f4e;
  --ok-deep: #146b39;
  --ok-soft: #e3f4ea;
  --bad-soft: #fde8e6;
  --shadow: 0 1px 2px rgba(23, 20, 15, .06), 0 6px 20px rgba(23, 20, 15, .06);
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --r: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12110f; --surface: #1c1a17; --ink: #f2efe8; --muted: #a49d91; --line: #2f2c27; --soft: #262420;
    --red: #ff4b45; --red-deep: #b5201b; --gold: #ffcf3d; --gold-deep: #a87c00; --gold-ink: #ffdd73; --black: #050505;
    --ok: #3cc277; --ok-deep: #1f7f4a; --ok-soft: #173525; --bad-soft: #3a1b19;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #12110f; --surface: #1c1a17; --ink: #f2efe8; --muted: #a49d91; --line: #2f2c27; --soft: #262420;
  --red: #ff4b45; --red-deep: #b5201b; --gold: #ffcf3d; --gold-deep: #a87c00; --gold-ink: #ffdd73; --black: #050505;
  --ok: #3cc277; --ok-deep: #1f7f4a; --ok-soft: #173525; --bad-soft: #3a1b19;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.55 var(--body);
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
[dir="rtl"] body, [lang="ar"] { font-family: var(--arabic); }
[lang="de"], [lang="en"] { font-family: var(--body); }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -.01em; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: var(--arabic); letter-spacing: 0; }
[dir="rtl"] [lang="de"] h1, h1[lang="de"] { font-family: var(--display); }
p { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[dir="rtl"] .back .ico, [dir="ltr"] .exam-teaser .arrow .ico { transform: scaleX(-1); }

/* flag stripe + header */
.flag { direction: ltr; display: flex; height: 5px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; }
.flag i { flex: 1; } .flag i:nth-child(1) { background: var(--black); } .flag i:nth-child(2) { background: var(--red); } .flag i:nth-child(3) { background: var(--gold); }
.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: calc(5px + env(safe-area-inset-top, 0px)); z-index: 20; }
.top-in {
  max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 16px;
  padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand b { font-family: var(--display); font-size: 1.25rem; font-weight: 800; display: block; line-height: 1; letter-spacing: -.02em; }
.brand small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.3; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark { display: grid; grid-template-rows: repeat(3, 1fr); width: 30px; height: 30px; border-radius: 9px; overflow: hidden; transform: rotate(-8deg); box-shadow: var(--shadow); flex: none; }
.mark i:nth-child(1) { background: var(--black); } .mark i:nth-child(2) { background: var(--red); } .mark i:nth-child(3) { background: var(--gold); }
.nav { display: flex; gap: 2px; margin-inline-start: auto; }
.nav a { display: flex; align-items: center; gap: 6px; padding: 8px 11px; white-space: nowrap; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem; }
.nav a:hover { background: var(--soft); color: var(--ink); }
.nav a.active { color: var(--ink); background: var(--soft); }
.nav a.active .ico { color: var(--red); }
.top-right { display: flex; align-items: center; gap: 10px; }
.stats { display: flex; align-items: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: var(--soft); font-size: .9rem; font-variant-numeric: tabular-nums; }
.chip-streak .ico { color: var(--red); fill: var(--red); stroke: var(--red); }
.chip-xp .ico { color: var(--gold-deep); fill: var(--gold); stroke: var(--gold-deep); }
.goal-mini { width: 40px; height: 7px; border-radius: 9px; background: var(--soft); overflow: hidden; display: inline-block; }
.goal-mini span { display: block; height: 100%; background: var(--gold); border-radius: 9px; }
.lang-switch { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lang-switch button { border: 0; background: transparent; padding: 5px 9px; font-size: .8rem; font-weight: 700; cursor: pointer; color: var(--muted); }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

@media (max-width: 1280px) { .brand small { display: none; } }
@media (max-width: 1140px) { .nav .lbl { display: none; } }
@media (max-width: 440px) { .brand b { display: none; } .chip { padding: 4px 7px; } }
@media (max-width: 720px) {
  .nav {
    position: fixed; inset: auto 0 0 0; z-index: 25; background: var(--surface); border-top: 1px solid var(--line);
    justify-content: space-around; margin: 0;
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  }
  .nav a { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: .68rem; flex: 1; justify-content: center; min-width: 0; }
  .nav .lbl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nav a.active { background: transparent; }
  .top-right { margin-inline-start: auto; }
  .goal-mini { display: none; }
}
@media (min-width: 721px) { body { padding-bottom: 40px; } }

/* page frame */
.view {
  max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px;
  padding-block: 28px 32px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.page-title { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; }
.section-title { font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.eyebrow, .label { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; color: var(--muted); }
[dir="rtl"] .eyebrow, [dir="rtl"] .label { letter-spacing: 0; text-transform: none; font-size: .85rem; }
.lead { font-size: 1.08rem; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); font-size: .92rem; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem; align-self: flex-start; }
.back:hover { color: var(--ink); }
.link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; align-self: flex-start; }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.note { background: var(--soft); border-radius: var(--r); padding: 12px 14px; font-size: .95rem; }
.note.bad { background: var(--bad-soft); }

/* buttons: chunky, with a pressed-down edge */
.btn {
  --b: var(--surface); --e: var(--line); --c: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 12px; border: 2px solid var(--e); background: var(--b); color: var(--c);
  font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 var(--e);
  transition: transform .08s, box-shadow .08s; align-self: flex-start;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--e); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { --b: var(--red); --e: var(--red-deep); --c: #fff; }
.btn-ok { --b: var(--ok); --e: var(--ok-deep); --c: #fff; }
.btn-ghost:hover { --b: var(--soft); }
.btn-danger { --c: var(--red); }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); display: inline-grid; place-items: center; cursor: pointer; flex: none; color: var(--ink); }
.icon-btn:hover { border-color: var(--gold); }

/* home */
.hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.hero-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; }
[dir="rtl"] .hero h1 { letter-spacing: 0; line-height: 1.35; }
.next-hint { color: var(--muted); font-size: .88rem; }
.today-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: var(--shadow); min-width: 220px; }
.today-meta { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.streak-line { display: flex; align-items: center; gap: 6px; }
.streak-line .ico { color: var(--red); fill: var(--red); }
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; }
  .today-card { flex-direction: row; min-width: 0; }
  .today-meta { align-items: flex-start; text-align: start; }
}
.ring {
  --p: 0; width: 104px; height: 104px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--gold) calc(var(--p) * 360deg), var(--soft) 0);
  display: grid; place-items: center;
}
.ring > div { width: 78%; height: 78%; border-radius: 50%; background: var(--surface); display: grid; place-content: center; text-align: center; line-height: 1.1; }
.ring b { font-family: var(--display); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.ring span { font-size: .72rem; color: var(--muted); }
.ring.big { width: 140px; height: 140px; }
.ring.big b { font-size: 2rem; }
.ring.pass { background: conic-gradient(var(--ok) calc(var(--p) * 360deg), var(--soft) 0); }

.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 720px) { .levels { grid-template-columns: repeat(2, 1fr); } }
.level-card {
  --lv: var(--black); --lv-ink: #fff;
  display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; text-decoration: none;
  background: var(--lv); color: var(--lv-ink); box-shadow: 0 4px 0 rgba(0, 0, 0, .22); transition: transform .12s;
  position: relative; overflow: hidden;
}
.level-card:hover { transform: translateY(-2px); }
.lv-A1 { --lv: var(--black); --lv-ink: #fff; }
.lv-A2 { --lv: var(--red); --lv-ink: #fff; }
.lv-B1 { --lv: var(--gold); --lv-ink: #2a2000; }
.lv-B2 { --lv: linear-gradient(180deg, var(--black) 0 33.3%, var(--red) 33.3% 66.6%, var(--gold) 66.6%); --lv-ink: #fff; }
.level-card.lv-B2 .lv-code, .level-card.lv-B2 .lv-name, .level-card.lv-B2 .lv-count { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.lv-code { font-family: var(--display); font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.lv-name { font-weight: 600; }
.lv-count { font-size: .8rem; opacity: .85; font-variant-numeric: tabular-nums; }
.level-card .bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .28); overflow: hidden; margin-top: 8px; }
.level-card .bar span { display: block; height: 100%; background: currentColor; border-radius: 6px; }
.exam-teaser { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 2px dashed var(--line); text-decoration: none; }
.exam-teaser > .ico { width: 32px; height: 32px; color: var(--red); }
.exam-teaser div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.exam-teaser span { color: var(--muted); font-size: .92rem; }
.exam-teaser:hover { border-color: var(--gold); }

/* learn */
.level-block { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 90px; }
.level-block header { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.level-block h2 { font-size: 1.3rem; }
.lv-badge { display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 8px; border-radius: 9px; background: var(--lv); color: var(--lv-ink); font-family: var(--display); font-weight: 800; font-size: .95rem; }
.unit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 560px) { .unit-grid { grid-template-columns: 1fr; } }
.unit-card { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; box-shadow: var(--shadow); }
.unit-card:hover { border-color: var(--gold); }
.unit-no { grid-column: 1 / -1; font-size: .78rem; color: var(--muted); font-weight: 600; }
.unit-card b { grid-column: 1 / -1; font-size: 1.08rem; }
.skill-dots { display: flex; gap: 6px; }
.skill-dots i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--soft); color: var(--muted); }
.skill-dots i.on { background: var(--gold); color: #2a2000; }
.skill-dots .ico { width: 16px; height: 16px; }
.unit-count { align-self: center; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }

/* unit */
.skill-list { display: flex; flex-direction: column; gap: 10px; }
.skill-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-decoration: none; box-shadow: var(--shadow); }
.skill-row:hover { border-color: var(--gold); }
.skill-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--soft); display: grid; place-items: center; flex: none; }
.skill-row.done .skill-ico { background: var(--gold); color: #2a2000; }
.skill-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.skill-txt span { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; }
.skill-state { font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }

/* lesson */
.lesson-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.steps { display: flex; gap: 6px; }
.steps a { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--soft); color: var(--muted); }
.steps a.on { background: var(--gold); color: #2a2000; }
.steps a.cur { outline: 2px solid var(--ink); outline-offset: 2px; }
.steps .ico { width: 17px; height: 17px; }
#lesson { display: flex; flex-direction: column; gap: 18px; }

.word-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.word-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.word-list li:first-child { border-top: 0; }
.word-list li > div { display: flex; flex-direction: column; min-width: 0; }
.word-list .ex { color: var(--muted); font-size: .88rem; }
.word-list .mean { text-align: end; font-weight: 600; max-width: 14em; }
@media (max-width: 480px) { .word-list li { grid-template-columns: auto 1fr; } .word-list .mean { grid-column: 2; text-align: start; } }

.explain, .task { background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--gold); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.explain p:not(.label) { max-width: 66ch; }
.task-de { color: var(--muted); font-size: .94rem; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; min-width: 100%; font-size: .95rem; }
th, td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; }
th { font-size: .8rem; color: var(--muted); font-weight: 700; }
td:first-child { color: var(--muted); }
td:not(:first-child) { font-weight: 600; }

.text-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; font-size: 1.05rem; line-height: 1.7; box-shadow: var(--shadow); }
.gapno { color: var(--red); }

/* listening player */
.player { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: var(--black); color: #fff; flex-wrap: wrap; }
.play-btn { width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--gold); color: #1b1500; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--gold-deep); flex: none; }
.play-btn .ico { fill: currentColor; width: 22px; height: 22px; }
.wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 40px; min-width: 120px; }
.wave i { flex: 1; height: var(--h); background: rgba(255, 255, 255, .25); border-radius: 3px; }
.player.on .wave i { background: var(--gold); animation: wave 0.9s ease-in-out var(--d) infinite alternate; }
@keyframes wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .player.on .wave i { animation: none; } }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex-wrap: wrap; }
.player .seg { border-color: rgba(255, 255, 255, .25); }
.seg button { border: 0; background: transparent; padding: 7px 12px; font-weight: 600; font-size: .88rem; cursor: pointer; color: inherit; }
.seg button[aria-pressed="true"] { background: var(--gold); color: #1b1500; }
.seg.big button { padding: 10px 16px; font-size: 1rem; }
.transcript { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.transcript b { display: inline-block; min-width: 1.6em; color: var(--red); }

/* quiz */
.quiz { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); }
.qbar { height: 10px; border-radius: 10px; background: var(--soft); overflow: hidden; }
.qbar span { display: block; height: 100%; background: var(--ok); border-radius: 10px; transition: width .3s; }
.qcount { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.qtext { font-size: 1.3rem; font-weight: 600; line-height: 1.45; }
.blank { display: inline-block; min-width: 3.5em; border-bottom: 3px solid var(--gold); margin: 0 2px; }
.opts { display: grid; gap: 10px; }
.opts.tf { grid-template-columns: 1fr 1fr; }
.opt { display: flex; align-items: center; gap: 12px; text-align: start; padding: 13px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); box-shadow: 0 3px 0 var(--line); cursor: pointer; font-size: 1.02rem; font-weight: 500; }
.opt:hover:not(:disabled) { border-color: var(--gold); box-shadow: 0 3px 0 var(--gold-deep); }
.opt kbd { font: 700 .75rem var(--body); width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line); display: grid; place-items: center; color: var(--muted); flex: none; }
.opt:disabled { cursor: default; }
.opt.ok { border-color: var(--ok); background: var(--ok-soft); box-shadow: 0 3px 0 var(--ok); }
.opt.bad { border-color: var(--red); background: var(--bad-soft); box-shadow: 0 3px 0 var(--red); animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .opt.bad { animation: none; } }
.gap-form { display: flex; gap: 10px; flex-wrap: wrap; }
.gap-form input, .eq input[type="text"], .eq input:not([type]), .form input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--paper); font-size: 1.05rem; }
.gap-form input:focus, .form input:focus, .write:focus { border-color: var(--gold); outline: none; }
.gap-form input.ok { border-color: var(--ok); background: var(--ok-soft); }
.gap-form input.bad { border-color: var(--red); background: var(--bad-soft); }
.feedback { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; }
.feedback > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.feedback b { display: flex; align-items: center; gap: 6px; font-size: 1.08rem; }
.feedback.ok { background: var(--ok-soft); color: var(--ink); }
.feedback.ok b { color: var(--ok); }
.feedback.bad { background: var(--bad-soft); }
.feedback.bad b { color: var(--red); }
.why { color: var(--muted); font-size: .93rem; }

.result { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 22px 10px; }
.result h2 { font-size: 1.6rem; }

/* writing */
.write { width: 100%; min-height: 220px; resize: vertical; padding: 16px; border-radius: var(--r); border: 2px solid var(--line); background: var(--surface); font-size: 1.05rem; line-height: 1.6; }
.write-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.write-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.write-meta b.enough { color: var(--ok); }
#res, #w, #exw { display: flex; flex-direction: column; gap: 14px; }
.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.loading span { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--soft); border-top-color: var(--red); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fb-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.fb-card h3 { font-size: 1.05rem; margin-top: 6px; }
.fb-top { display: flex; gap: 16px; align-items: center; }
.fb-top > div:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.corrected { background: var(--ok-soft); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.mistakes, .tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.mistakes li { border-inline-start: 4px solid var(--red); padding-inline-start: 12px; display: flex; flex-direction: column; gap: 2px; }
.mistakes s { color: var(--red); text-decoration-thickness: 2px; }
.mistakes ins { color: var(--ok); text-decoration: none; font-weight: 700; }
.mistakes p { color: var(--muted); font-size: .93rem; }
.tips li { padding-inline-start: 18px; position: relative; }
.tips li::before { content: ""; position: absolute; inset-inline-start: 0; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); }

/* flashcards */
.due-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--black); color: #fff; padding: 18px 20px; border-radius: 18px; }
.due-card > div { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.due-card .ico { width: 28px; height: 28px; color: var(--gold); }
.deck-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 560px) { .deck-grid { grid-template-columns: 1fr; } }
.deck { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; box-shadow: var(--shadow); }
.deck:hover { border-color: var(--gold); }
.deck-boxes { display: flex; gap: 3px; }
.deck-boxes i { flex: 1; height: 8px; border-radius: 3px; background: var(--soft); }
.deck-boxes i.b1 { background: var(--red); } .deck-boxes i.b2 { background: #f08a24; }
.deck-boxes i.b3, .deck-boxes i.b4 { background: var(--gold); } .deck-boxes i.b5 { background: var(--ok); }
.flash { perspective: 1000px; border: 0; padding: 0; background: none; cursor: pointer; height: 260px; display: grid; width: 100%; }
.face {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center;
  border-radius: 22px; backface-visibility: hidden; transition: transform .45s; border: 2px solid var(--line); box-shadow: 0 5px 0 var(--line);
}
.face.front { background: var(--surface); }
.face.backside { background: var(--gold); color: #2a2000; transform: rotateY(180deg); border-color: var(--gold-deep); box-shadow: 0 5px 0 var(--gold-deep); }
.flash.flipped .front { transform: rotateY(-180deg); }
.flash.flipped .backside { transform: rotateY(0); }
.face b { font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.2; }
.face.backside b[lang="ar"] { font-family: var(--arabic); }
.face small { color: var(--muted); font-size: .9rem; }
.face.backside small { color: #5a4600; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .face { transition: none; } }
.flash-actions { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.flash-actions .btn { align-self: auto; }

/* exams */
.exam-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 560px) { .exam-grid { grid-template-columns: 1fr; } }
.exam-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; position: relative; box-shadow: var(--shadow); border-top: 6px solid transparent; border-image: none; }
.exam-card.lv-A1 { border-top-color: var(--black); } .exam-card.lv-A2 { border-top-color: var(--red); } .exam-card.lv-B1 { border-top-color: var(--gold); } .exam-card.lv-B2 { border-top-color: var(--ink); }
.exam-card .lv-code { color: var(--ink); }
.exam-card:hover { border-color: var(--gold); }
.exam-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; }
.styles { display: flex; gap: 6px; flex-wrap: wrap; }
i[class^="st-"] { font-style: normal; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); white-space: nowrap; }
i.st-telc { background: var(--ink); color: var(--paper); }
.best { position: absolute; top: 16px; inset-inline-end: 16px; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.best.pass { color: var(--ok); }
.part-list { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; }
.part-list li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.exam-bar { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 70px; z-index: 5; background: var(--paper); padding-block: 8px; font-weight: 600; border-bottom: 1px solid var(--line); }
.timer { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.timer b.low { color: var(--red); }
#pt { display: flex; flex-direction: column; gap: 16px; }
.exam-qs { display: flex; flex-direction: column; gap: 12px; }
.eq { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 14px 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.eq legend { font-weight: 600; padding: 0; float: left; width: 100%; margin-bottom: 10px; }
.eq-opts { display: flex; flex-wrap: wrap; gap: 8px; clear: both; }
.eq-opts label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; }
.eq-opts label:has(input:checked) { border-color: var(--gold); background: var(--soft); }
.eq-opts input { accent-color: var(--red); }
.part-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.part-scores div { display: flex; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.part-scores b { font-variant-numeric: tabular-nums; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.review summary { cursor: pointer; font-weight: 700; }
.review h3 { font-size: 1rem; margin: 14px 0 6px; }
.review ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.review li { padding-inline-start: 12px; border-inline-start: 4px solid var(--ok); }
.review li.bad { border-color: var(--red); }
.review li small { display: block; color: var(--muted); }

/* progress */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 640px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); }
.stat span .ico { width: 22px; height: 22px; color: var(--gold-deep); }
.stat.streak span .ico { color: var(--red); fill: var(--red); }
.stat b { font-family: var(--display); font-size: 1.9rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat b i { font-style: normal; font-size: 1rem; color: var(--muted); }
.stat small { color: var(--muted); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.panel h2 { font-size: 1.15rem; }
.week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 180px; margin-top: 8px; }
.goal-line { position: absolute; inset-inline: 0; bottom: calc(22px + 130px * var(--g)); border-top: 2px dashed var(--gold-deep); pointer-events: none; }
.goal-line em { position: absolute; inset-inline-end: 0; top: -18px; font-style: normal; font-size: .7rem; color: var(--gold-ink); font-weight: 700; }
.day { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.day .bar { width: 70%; max-width: 38px; height: calc(var(--h) * 130px); min-height: 3px; background: var(--soft); border-radius: 8px 8px 3px 3px; }
.day.met .bar { background: var(--gold); }
.day:not(.met) .bar { background: color-mix(in srgb, var(--gold) 45%, var(--soft)); }
.day .val { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.day small { color: var(--muted); font-size: .75rem; height: 18px; line-height: 18px; white-space: nowrap; }
.day.today small { color: var(--ink); font-weight: 700; }
.lvl-table { display: flex; flex-direction: column; gap: 12px; }
.lvl-row { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 12px; align-items: center; }
@media (max-width: 560px) {
  .lvl-row { grid-template-columns: auto 1fr auto; row-gap: 8px; }
  .lvl-row .lv-badge { grid-area: 1 / 1; } .lvl-row .lvl-skills { grid-area: 1 / 2; } .lvl-row .exam-pill { grid-area: 1 / 3; }
  .lvl-row .bar { grid-area: 2 / 1 / 3 / 3; } .lvl-row .num { grid-area: 2 / 3; }
}
.lvl-skills { display: flex; gap: 4px; }
.sk { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--soft); color: var(--muted); }
.sk .ico { width: 15px; height: 15px; }
.sk.part { background: color-mix(in srgb, var(--gold) 40%, var(--soft)); color: var(--ink); }
.sk.full { background: var(--gold); color: #2a2000; }
.lvl-row .bar { height: 8px; border-radius: 8px; background: var(--soft); overflow: hidden; }
.lvl-row .bar span { display: block; height: 100%; background: var(--ok); }
.lvl-row .num { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3ch; text-align: end; }
.exam-pill { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--bad-soft); color: var(--red); font-variant-numeric: tabular-nums; }
.exam-pill.pass { background: var(--ok-soft); color: var(--ok); }
.exam-pill.none { background: var(--soft); color: var(--muted); }
.exam-pill .ico { width: 14px; height: 14px; }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 560px) { .badges { grid-template-columns: repeat(2, 1fr); } }
.badge { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 8px; border-radius: 14px; background: var(--soft); color: var(--muted); }
.badge span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); }
.badge.got { background: color-mix(in srgb, var(--gold) 22%, var(--surface)); color: var(--ink); }
.badge.got span { background: var(--gold); color: #2a2000; }
.badge small { font-size: .8rem; font-weight: 600; }

/* settings */
.form label { font-weight: 700; font-size: .92rem; margin-top: 6px; }
.form textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--paper); font: .8rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; word-break: break-all; }
.form .row { justify-content: flex-start; }
.danger { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }

/* toast + XP pop */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 50;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--paper);
  padding: 10px 18px; border-radius: 12px; font-weight: 600; box-shadow: var(--shadow); max-width: calc(100% - 32px); text-align: center;
}
.xp-float { position: absolute; z-index: 60; transform: translateX(-50%); font-family: var(--display); font-weight: 800; color: var(--gold-deep); pointer-events: none; animation: rise 1.1s ease-out forwards; white-space: nowrap; text-shadow: 0 1px 0 var(--surface); }
@keyframes rise { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -46px); } }
@media (prefers-reduced-motion: reduce) { .xp-float { animation-duration: .01s; } }

/* accounts + sign-up wall */
.btn-sm { padding: 6px 12px; font-size: .85rem; border-radius: 10px; box-shadow: 0 2px 0 var(--e); align-self: center; white-space: nowrap; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 800; text-decoration: none; font-family: var(--display); }
.ico.lk { width: 1em; height: 1em; vertical-align: -2px; color: var(--muted); }
.level-card .ico.lk, .exam-card .ico.lk { width: .5em; height: .5em; vertical-align: middle; }
i.free { font-style: normal; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); text-transform: uppercase; letter-spacing: .04em; }
.skill-row.locked { opacity: .72; }
.skill-row.locked .skill-state { color: var(--muted); }
.gate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 28px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.gate-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--gold); color: #2a2000; transform: rotate(-6deg); }
.gate-ico .ico { width: 30px; height: 30px; }
.gate .lead { max-width: 48ch; }
.gate-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gate-list li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--soft); font-size: .9rem; font-weight: 600; }
.gate-list .ico { color: var(--ok); width: 1em; height: 1em; }
.auth { display: flex; flex-direction: column; gap: 14px; max-width: 520px; width: 100%; margin: 0 auto; }
.mark.big { width: 46px; height: 46px; border-radius: 13px; }
.form { gap: 8px; }
.form input:not([type="checkbox"]) { width: 100%; }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500 !important; font-size: .92rem !important; line-height: 1.45; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--red); flex: none; }
.link.inline { display: inline; font-size: inherit; }
.form-err { background: var(--bad-soft); color: var(--red); border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: .92rem; }
.form .btn-lg { align-self: stretch; margin-top: 8px; }
.pv-inline, .privacy { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.pv-inline { background: var(--soft); border-radius: 12px; padding: 12px 14px; }
.pv-inline h3, .privacy h3 { font-size: .95rem; margin-top: 6px; }
.privacy p, .pv-inline p { color: var(--muted); max-width: 70ch; }
.row.start { justify-content: flex-start; }
.del summary { cursor: pointer; color: var(--red); font-weight: 600; }
.del[open] { display: flex; flex-direction: column; gap: 8px; }
.exam-no { font-size: .95rem; }