/* ─────────────────────────────────────────────────────────────
Lexorate Web — student redesign design system
Ported from docs/design_handoff_lexorate_web/{tokens.css,web.css}.
EVERYTHING is scoped under .lex-app so it stays inert on the
legacy (teacher/admin) screens that still use the default shell.
───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');
:root {
/* Brand palette */
--lex-blue: #1B99D4;
--lex-blue-deep: #1380B6;
--lex-blue-soft: #E1EFF8;
--lex-teal: #0B7077;
--lex-teal-deep: #074A50;
--lex-mint: #BDDAD7;
--lex-mint-soft: #DCEDEB;
--lex-cream: #F1F8F8;
--lex-coral: #FC6620;
--lex-coral-soft:#FFE3D3;
--lex-yellow: #FFBA49;
--lex-yellow-soft:#FFEFD3;
--lex-green: #20AD96;
--lex-green-soft:#D5EFEA;
--lex-purple: #7361C9;
--lex-purple-soft:#E6E1FA;
--lex-red: #E5484D;
--lex-red-soft: #FCE4E4;
/* Exercise color families — read · speak · picture */
--ex-read-soft: #E1EFF8;
--ex-read-base: #1B99D4;
--ex-read-deep: #1380B6;
--ex-read-text: #1A6A93;
--ex-speak-soft: #E6E1FA;
--ex-speak-base: #7361C9;
--ex-speak-deep: #5B49B0;
--ex-speak-text: #3F2E91;
--ex-pic-soft: #FFEFD3;
--ex-pic-base: #E2922C;
--ex-pic-deep: #C2761A;
--ex-pic-text: #8A5A14;
/* Skill metrics */
--skill-acc: #4F52C9;
--skill-flu: #D24D8C;
--skill-comp: #586A85;
--skill-pros: #0E9AA8;
/* Ink */
--ink: #14242E;
--ink-2: #3A4853;
--ink-3: #6B7884;
--ink-4: #9BA6B0;
--hairline: rgba(11, 74, 80, 0.10);
--hairline-2: rgba(11, 74, 80, 0.05);
/* Surfaces */
--bg: #F1F8F8;
--bg-deep: #E6F0F0;
--surface: #FFFFFF;
/* Effects */
--shadow-card: 0 1px 0 rgba(11,74,80,0.04), 0 8px 24px -12px rgba(11,74,80,0.18);
--shadow-soft: 0 1px 0 rgba(11,74,80,0.04), 0 4px 14px -8px rgba(11,74,80,0.14);
--shadow-lift: 0 1px 0 rgba(11,74,80,0.06), 0 20px 40px -20px rgba(11,74,80,0.28);
/* Type */
--display: 'Sora', system-ui, sans-serif;
--body: 'Manrope', system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
/* Radii */
--r-card: 20px;
--r-btn: 14px;
--r-chip: 999px;
/* Web shell */
--nav-w: 248px;
--rail-1: #074A50;
--rail-0: #0B7077;
--rail-ink: rgba(255,255,255,0.74);
--rail-ink-dim: rgba(255,255,255,0.46);
--content-max: 1180px;
}
/* ── Base layer (post legacy-CSS purge) ──
milligram/default used to set these globally; lex.css is scoped to .lex-app,
so restore them for chrome outside .lex-app (the superadmin health bar) and to
keep links un-underlined as before. Low specificity — component rules win. */
body { font-family: var(--body, system-ui, sans-serif); }
a { text-decoration: none; }
/* When the superadmin health bar is present it sits above .lex-app; shrink the
full-height shell by the bar height so it doesn't add extra page scroll. */
.health-bar + .lex-app .lex-web { min-height: calc(100vh - 36px); }
.health-bar + .lex-app .lex-rail { height: calc(100vh - 36px); top: 36px; }
/* ── Base / reset (scoped) ── */
.lex-app, .lex-app * { box-sizing: border-box; }
.lex-app {
font-family: var(--body);
color: var(--ink);
background: var(--bg);
font-size: 15px;
line-height: 1.4;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.lex-app h1, .lex-app h2, .lex-app h3, .lex-app .display {
font-family: var(--display);
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
}
.lex-app .mono { font-family: var(--mono); }
.lex-app .tr { font-style: italic; color: var(--ink-3); font-weight: 400; }
.lex-app .scroll { overflow-y: auto; scrollbar-width: none; }
.lex-app .scroll::-webkit-scrollbar { display: none; }
/* ── Atoms ── */
.lex-app .lex-card {
background: var(--surface);
border-radius: var(--r-card);
border: 1px solid var(--hairline);
box-shadow: var(--shadow-card);
}
.lex-app .lex-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
padding: 5px 10px;
border-radius: var(--r-chip);
letter-spacing: 0.01em;
}
.lex-app .lex-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--body);
font-weight: 600;
font-size: 15px;
letter-spacing: -0.005em;
border-radius: var(--r-btn);
padding: 14px 18px;
background: var(--lex-teal-deep);
color: #fff;
border: 0;
cursor: pointer;
text-decoration: none;
box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 14px -6px rgba(7,74,80,0.5);
}
.lex-app .lex-btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.lex-app .lex-btn.teal { background: var(--lex-teal-deep); color: #fff; box-shadow: 0 6px 14px -6px rgba(7,74,80,0.55); }
.lex-app .lex-btn.coral { background: var(--lex-coral); color: #fff; box-shadow: 0 6px 14px -6px rgba(252,102,32,0.45); }
/* Per-word pronunciation feedback colors.
Design uses good/ok/bad; the existing Recording.js pipeline emits
perfect/almost/mispronounced/missed — map both to the same palette. */
.lex-app .lex-word { padding: 1px 1.5px; border-radius: 4px; }
.lex-app .lex-word.good, .lex-app .word.perfect { color: #0F8068; background: rgba(32,173,150,0.12); }
.lex-app .lex-word.ok, .lex-app .word.almost { color: #B07A1F; background: rgba(255,186,73,0.20); }
.lex-app .lex-word.bad, .lex-app .word.mispronounced, .lex-app .word.missed { color: #B23439; background: rgba(229,72,77,0.12); }
.lex-app .lex-word.pend, .lex-app .word.pend { color: var(--ink-4); }
/* ─────────────────────────────────────────── SHELL */
.lex-app .lex-web { display: flex; min-height: 100vh; }
/* SIDEBAR */
.lex-app .lex-rail {
width: var(--nav-w); flex-shrink: 0;
background: linear-gradient(180deg, var(--rail-0) 0%, var(--rail-1) 36%, #063C41 100%);
color: #fff; display: flex; flex-direction: column;
position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: none;
padding: 22px 16px 16px; z-index: 50;
}
.lex-app .lex-rail::-webkit-scrollbar { display: none; }
.lex-app .lex-rail__logo { display: flex; align-items: center; gap: 11px; padding: 4px 8px 22px; text-decoration: none; }
.lex-app .lex-rail__logo .word { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: #fff; }
.lex-app .lex-rail__group { display: flex; flex-direction: column; gap: 2px; }
.lex-app .lex-rail__sep { height: 1px; margin: 14px 8px; background: rgba(255,255,255,0.12); }
.lex-app .lex-rail__cap { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rail-ink-dim); padding: 4px 10px 8px; }
.lex-app .lex-nav {
display: flex; align-items: center; gap: 12px; padding: 10px 11px; border-radius: 12px;
color: var(--rail-ink); cursor: pointer; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em;
position: relative; transition: color .12s ease, background .12s ease; border: none; background: none;
width: 100%; text-align: left; font-family: var(--body); text-decoration: none;
}
.lex-app .lex-nav svg { flex-shrink: 0; opacity: 0.9; }
.lex-app .lex-nav:hover { background: rgba(255,255,255,0.08); color: #fff; }
.lex-app .lex-nav.on { background: rgba(255,255,255,0.96); color: var(--lex-teal-deep); box-shadow: 0 8px 18px -10px rgba(0,0,0,0.45); }
.lex-app .lex-nav.on svg { opacity: 1; }
.lex-app .lex-nav.on::before { content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: var(--lex-coral); }
.lex-app .lex-rail__spacer { flex: 1; }
/* rail identity row — shared by the student and teacher shells */
.lex-app .lex-rail__me { margin-bottom: 2px; }
.lex-app .lex-rail__avatar {
width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
background: rgba(255,255,255,0.16);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--display); font-weight: 700; font-size: 12px; color: #fff;
}
.lex-app .lex-rail__id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.lex-app .lex-rail__id-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lex-app .lex-rail__id-role { font-size: 11px; opacity: 0.6; font-weight: 500; }
.lex-app .lex-lang {
margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
color: #fff; cursor: pointer; width: 100%; font-family: var(--body); font-weight: 600; font-size: 14px;
}
.lex-app .lex-lang:hover { background: rgba(255,255,255,0.14); }
.lex-app .lex-lang .flagwrap { display: flex; align-items: center; gap: 9px; }
.lex-app .lex-lang__form { margin: 0; }
.lex-app .lex-lang select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background: transparent; border: 0; box-shadow: none; border-radius: 0;
color: #fff; font-family: var(--body); font-weight: 600; font-size: 14px; cursor: pointer;
height: auto; min-height: 0; line-height: 1.3; margin: 0; padding: 0 16px 0 2px; width: auto; max-width: 130px;
}
.lex-app .lex-lang select:focus { border: 0; outline: 0; background: transparent; }
.lex-app .lex-lang select option { color: var(--ink); }
/* CONTENT */
.lex-app .lex-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lex-app .lex-topbar { display: none; }
.lex-app .lex-content { flex: 1; min-width: 0; display: flex; }
.lex-app .lex-content > * { flex: 1; min-width: 0; }
/* Exercise view: let the bounded shell height flow down to the internal scroll
area. Without min-height:0 these flex ancestors keep min-height:auto and grow
to fit their content — so when formatChat() injects the author titles the
blocks expand, overrun .lex-main's clipped height, and shove the dock off the
bottom. min-height:0 makes the overflow scroll instead of pushing the dock. */
.lex-app .lex-content:has(.lex-ex) { min-height: 0; }
/* ─────────────────────────────────────────── ASSIGNMENTS */
.lex-app .lex-subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); background: #fff; padding: 0 clamp(20px, 4vw, 48px); position: sticky; top: 0; z-index: 20; }
.lex-app .lex-subnav__tab { padding: 18px 4px 16px; margin-right: 26px; font-size: 15px; font-weight: 600; color: var(--ink-3); border-bottom: 2.5px solid transparent; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--body); transition: color .14s ease; text-decoration: none; display: inline-block; }
.lex-app .lex-subnav__tab.on { color: var(--lex-blue); border-bottom-color: var(--lex-blue); }
.lex-app .lex-subnav__tab:hover { color: var(--ink); }
.lex-app .lex-assign-wrap { padding: clamp(24px, 4vw, 48px); padding-bottom: 130px; max-width: var(--content-max); }
.lex-app .lex-pagehead { display: flex; align-items: center; gap: 14px; }
.lex-app .lex-pagetitle { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.025em; line-height: 1.04; margin: 0; }
.lex-app .lex-assign-count { font-size: 13.5px; font-weight: 700; color: #A8430F; background: var(--lex-coral-soft); padding: 5px 12px; border-radius: 999px; }
/* Home-header streak & milestone indicators (docs/design_handoff_header_indicators). */
.lex-app .lex-indicators { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 16px; }
.lex-app .lex-ind { display: inline-flex; align-items: center; gap: 7px; }
.lex-app .lex-ind__count { font-family: var(--display); font-weight: 800; font-size: 18px; color: #14242E; line-height: 1; }
.lex-app .lex-ind--streak .lex-ind__count { position: relative; top: 3px; }
.lex-app .lex-ind--milestone .lex-ind__count { position: relative; top: 2px; }
.lex-app .lex-flame { transform-origin: 50% 92%; animation: lexFlameFlicker 1.5s ease-in-out infinite; will-change: transform, filter; }
.lex-app .lex-star { transform-origin: 50% 52%; animation: lexStarTilt 5.2s ease-in-out infinite; will-change: transform, filter; }
.lex-app .lex-star-sheen { animation: lexStarSheen 5.2s ease-in-out infinite; }
@keyframes lexFlameFlicker {
0% { transform: scaleY(1) scaleX(1) rotate(0deg); filter: drop-shadow(0 2px 4px rgba(12,139,120,0.35)); }
20% { transform: scaleY(1.07) scaleX(0.965) rotate(-1.8deg); filter: drop-shadow(0 2px 7px rgba(12,139,120,0.50)); }
40% { transform: scaleY(0.965) scaleX(1.035) rotate(1.2deg); filter: drop-shadow(0 2px 5px rgba(12,139,120,0.40)); }
60% { transform: scaleY(1.045) scaleX(0.98) rotate(-0.8deg); filter: drop-shadow(0 2px 8px rgba(12,139,120,0.55)); }
80% { transform: scaleY(0.99) scaleX(1.01) rotate(0.6deg); filter: drop-shadow(0 2px 5px rgba(12,139,120,0.40)); }
100% { transform: scaleY(1) scaleX(1) rotate(0deg); filter: drop-shadow(0 2px 4px rgba(12,139,120,0.35)); }
}
@keyframes lexStarTilt {
0%, 100% { transform: rotate(-3.2deg); filter: drop-shadow(0 2px 5px rgba(194,118,26,0.32)); }
50% { transform: rotate(3.2deg); filter: drop-shadow(0 2px 6px rgba(194,118,26,0.42)); }
}
@keyframes lexStarSheen {
0%, 100% { transform: translateX(-12px) skewX(-16deg); opacity: 0.25; }
50% { transform: translateX(34px) skewX(-16deg); opacity: 0.60; }
}
@media (prefers-reduced-motion: reduce) {
.lex-app .lex-flame, .lex-app .lex-star, .lex-app .lex-star-sheen { animation: none; }
}
.lex-app .lex-assign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; margin-top: 26px; align-items: start; }
.lex-app .lex-subhead { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 36px 0 0; color: var(--ink-2); }
.lex-app .lex-acard { background: var(--surface); border-radius: var(--r-card); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease; }
.lex-app .lex-acard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.lex-app .lex-acard__band { padding: 18px 20px 16px; color: #fff; }
.lex-app .lex-acard__band.read { background: linear-gradient(135deg, var(--ex-read-base), var(--ex-read-deep)); }
.lex-app .lex-acard__band.speak { background: linear-gradient(135deg, var(--ex-speak-base), var(--ex-speak-deep)); }
.lex-app .lex-acard__band.pic { background: linear-gradient(135deg, var(--ex-pic-base), var(--ex-pic-deep)); }
.lex-app .lex-acard__bandtop { display: flex; align-items: center; justify-content: space-between; }
.lex-app .lex-acard__kind { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.lex-app .lex-acard__kindicon { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,0.18); display: inline-flex; align-items: center; justify-content: center; }
.lex-app .lex-acard__flag { font-size: 18px; line-height: 1; display: inline-flex; }
.lex-app .lex-acard__flag iconify-icon { border-radius: 3px; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18); }
/* Country flags — vendored flagpack SVGs (img.lex-flag). Height follows the
surrounding font-size, mirroring the icons they replaced. */
.lex-flag { height: 1em; width: auto; display: inline-block; vertical-align: -0.14em; border-radius: 2px; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18); }
/* Base styling for raw
on the few not-yet-redesigned admin screens
(SchoolSubscriptions / Coupons / Guarantors / DailyChallenges / Checks) that
used to inherit it from milligram (purged). The redesigned data views use the
div-based .t-table, so this element rule doesn't touch them. */
.lex-app table { width: 100%; border-collapse: collapse; }
.lex-app th, .lex-app td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line, #eaebed); }
.lex-app th { font-weight: 600; }
.lex-app .lex-acard__title { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; margin-top: 14px; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.lex-app .lex-acard__meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12.5px; color: rgba(255,255,255,0.92); }
.lex-app .lex-acard__metaitem { display: inline-flex; align-items: center; gap: 5px; }
.lex-app .lex-acard__dot { opacity: 0.5; }
.lex-app .lex-acard__cls { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lex-app .lex-acard__foot { padding: 15px 16px 16px; display: flex; align-items: center; gap: 12px; }
.lex-app .lex-acard__footL { flex: 1; min-width: 0; }
.lex-app .lex-acard__due { font-size: 14px; font-weight: 700; color: var(--ink); }
.lex-app .lex-acard__due.urgent { color: var(--lex-coral); }
.lex-app .lex-acard__sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lex-app .lex-acard__subtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lex-app .lex-acard__best { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-weight: 700; font-size: 11.5px; line-height: 1; padding: 3px 9px 3px 8px; border-radius: 999px; background: rgba(11,74,80,0.06); color: var(--ink-2); }
.lex-app .lex-acard__best.pass { background: var(--lex-green-soft); color: #0E7A66; }
.lex-app .lex-acard__best.fail { background: var(--lex-coral-soft); color: #A8430F; }
.lex-app .lex-acard__best svg { margin-left: -1px; }
.lex-app .lex-acard__start { flex-shrink: 0; padding: 11px 20px; border-radius: 13px; background: var(--lex-teal-deep); color: #fff; font-family: var(--body); font-weight: 700; font-size: 14px; border: none; cursor: pointer; white-space: nowrap; text-decoration: none; box-shadow: 0 6px 14px -6px rgba(7,74,80,0.5); transition: filter .14s ease, transform .1s ease; }
.lex-app .lex-acard__start:hover { filter: brightness(1.06); }
.lex-app .lex-acard__start:active { transform: translateY(1px); }
/* ─────────────────────────────────────────── DAILY CHALLENGE (screen) */
.lex-app .lex-dc__reset { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); background: #fff; border: 1px solid var(--hairline); padding: 8px 13px; border-radius: 999px; box-shadow: var(--shadow-soft); }
.lex-app .lex-dc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; margin-top: 24px; align-items: start; }
.lex-app .lex-dc__empty { margin-top: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 28px; }
.lex-app .lex-dc__empty-title { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink); margin: 14px 0 0; }
.lex-app .lex-dc__empty-sub { font-size: 14px; color: var(--ink-3); line-height: 1.5; margin: 8px 0 18px; max-width: 420px; }
/* Challenge card — same gradient-band language as the assignment card. */
.lex-app .lex-dcard { background: var(--surface); border-radius: var(--r-card); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease; }
.lex-app .lex-dcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.lex-app .lex-dcard__band { padding: 18px 20px 16px; color: #fff; }
.lex-app .lex-dcard__band.read { background: linear-gradient(135deg, var(--ex-read-base), var(--ex-read-deep)); }
.lex-app .lex-dcard__band.speak { background: linear-gradient(135deg, var(--ex-speak-base), var(--ex-speak-deep)); }
.lex-app .lex-dcard__band.pic { background: linear-gradient(135deg, var(--ex-pic-base), var(--ex-pic-deep)); }
.lex-app .lex-dcard__bandtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lex-app .lex-dcard__kind { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.lex-app .lex-dcard__kindicon { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,0.18); display: inline-flex; align-items: center; justify-content: center; }
.lex-app .lex-dcard__lang { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.92); }
.lex-app .lex-dcard__flag { font-size: 18px; line-height: 1; display: inline-flex; }
.lex-app .lex-dcard__flag iconify-icon { border-radius: 3px; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18); }
.lex-app .lex-dcard__title { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; margin-top: 14px; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.lex-app .lex-dcard__foot { padding: 15px 16px 16px; display: flex; align-items: center; gap: 12px; }
.lex-app .lex-dcard__footL { flex: 1; min-width: 0; }
.lex-app .lex-dcard__attempts { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.lex-app .lex-dcard__best { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-weight: 700; font-size: 12.5px; line-height: 1; }
.lex-app .lex-dcard__start { flex-shrink: 0; padding: 11px 20px; border-radius: 13px; background: var(--lex-teal-deep); color: #fff; font-family: var(--body); font-weight: 700; font-size: 14px; border: none; cursor: pointer; white-space: nowrap; text-decoration: none; box-shadow: 0 6px 14px -6px rgba(7,74,80,0.5); transition: filter .14s ease, transform .1s ease; }
.lex-app .lex-dcard__start:hover { filter: brightness(1.06); }
.lex-app .lex-dcard__start:active { transform: translateY(1px); }
.lex-app .lex-dcard__start--ghost { background: var(--bg-deep); color: var(--lex-teal-deep); box-shadow: none; }
.lex-app .lex-dcard__done { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--lex-green); }
/* Leaderboard */
.lex-app .lex-dlb__langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.lex-app .lex-dlb__lang { text-decoration: none; cursor: pointer; background: #fff; border: 1px solid var(--hairline); color: var(--ink-2); }
.lex-app .lex-dlb__lang.on { background: var(--lex-teal-deep); border-color: var(--lex-teal-deep); color: #fff; }
.lex-app .lex-dlb { padding: 8px 10px; }
.lex-app .lex-dlb__empty { font-size: 14px; color: var(--ink-3); text-align: center; padding: 22px 0; margin: 0; }
.lex-app .lex-dlb__list { list-style: none; margin: 0; padding: 0; }
.lex-app .lex-dlb__row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; }
.lex-app .lex-dlb__row + .lex-dlb__row { border-top: 1px solid var(--hairline-2); border-radius: 0; }
.lex-app .lex-dlb__row.me { background: var(--lex-cream); border-radius: 12px; border-top-color: transparent; }
.lex-app .lex-dlb__rank { flex-shrink: 0; width: 28px; text-align: center; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink-3); }
.lex-app .lex-dlb__rank.top { color: var(--lex-coral); }
.lex-app .lex-dlb__flag { flex-shrink: 0; font-size: 18px; line-height: 1; display: inline-flex; }
.lex-app .lex-dlb__flag iconify-icon { border-radius: 3px; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18); }
.lex-app .lex-dlb__name { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lex-app .lex-dlb__score { flex-shrink: 0; font-family: var(--display); font-weight: 700; font-size: 15px; }
.lex-app .lex-dlb__sep { height: 1px; background: var(--hairline); margin: 6px 10px; }
/* ─────────────────────────────────────────── HOME */
.lex-app .lex-home { min-height: 100%; background: var(--bg); }
.lex-app .lex-home__inner { max-width: 1080px; margin: 0 auto; padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 48px) 130px; }
.lex-app .lex-home__inner--narrow { max-width: 720px; }
.lex-app .lex-home__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lex-app .lex-home__greet { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -0.025em; line-height: 1.05; margin: 0; display: inline-flex; align-items: center; gap: 12px; }
.lex-app .lex-home__sub { font-size: 15px; color: var(--ink-3); margin-top: 6px; }
.lex-app .lex-iconbtn { position: relative; width: 44px; height: 44px; border-radius: 14px; background: #fff; border: 1px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); cursor: pointer; flex-shrink: 0; }
.lex-app .lex-iconbtn__dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--lex-coral); border: 2px solid #fff; }
.lex-app .lex-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.lex-app .lex-statcard { background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-soft); }
.lex-app .lex-statcard__top { display: flex; align-items: center; gap: 9px; }
.lex-app .lex-statcard__ic { width: 26px; height: 26px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lex-app .lex-statcard__label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.lex-app .lex-statcard__val { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); color: var(--ink); margin-top: 10px; }
.lex-app .lex-daily { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 18px 20px; border-radius: var(--r-card); color: #fff; background: linear-gradient(135deg, var(--lex-teal), var(--lex-teal-deep)); box-shadow: 0 16px 34px -18px rgba(7,74,80,0.6); text-decoration: none; }
.lex-app .lex-daily__ic { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,0.16); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lex-app .lex-daily__txt { flex: 1; min-width: 0; }
.lex-app .lex-daily__cap { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.lex-app .lex-daily__title { font-family: var(--display); font-weight: 700; font-size: 19px; margin-top: 3px; color: #fff; }
.lex-app .lex-daily__sub { font-size: 13px; opacity: 0.9; margin-top: 2px; }
.lex-app .lex-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 30px 0 14px; }
.lex-app .lex-sec__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: 0; }
.lex-app .lex-sec__meta { font-size: 13px; color: var(--ink-4); }
.lex-app .lex-histlist { display: flex; flex-direction: column; gap: 12px; }
.lex-app .lex-histrow { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-soft); text-decoration: none; }
.lex-app .lex-histrow__ic { width: 44px; height: 44px; border-radius: 13px; background: var(--lex-green-soft); color: var(--lex-green); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lex-app .lex-histrow__body { flex: 1; min-width: 0; }
.lex-app .lex-histrow__title { font-size: 15.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.lex-app .lex-histrow__meta { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
/* progress */
.lex-app .lex-prog__hero { display: flex; align-items: center; gap: 20px; padding: 22px; }
.lex-app .lex-prog__herotxt { flex: 1; min-width: 0; }
.lex-app .lex-prog__overlabel { font-size: 14px; font-weight: 700; color: var(--ink); }
.lex-app .lex-prog__statsrow { display: flex; gap: 22px; margin-top: 12px; }
.lex-app .lex-prog__statsrow > div { display: flex; flex-direction: column; }
.lex-app .lex-prog__statsrow .n { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink); }
.lex-app .lex-prog__statsrow .l { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.lex-app .lex-prog__skills { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.lex-app .lex-prog__skill .lex-prog__sktop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.lex-app .lex-prog__skill .lex-prog__sktop > span { min-width: 0; }
.lex-app .lex-prog__skill .lex-prog__sktop i { font-style: italic; color: var(--ink-4); font-weight: 400; }
.lex-app .lex-prog__skill .lex-prog__sktop b { font-family: var(--display); font-size: 17px; }
/* profile */
.lex-app .lex-prof { padding: 28px 24px; text-align: center; }
.lex-app .lex-prof__avatar { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto; background: linear-gradient(135deg, var(--lex-teal), var(--lex-teal-deep)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 26px; }
.lex-app .lex-prof__name { font-family: var(--display); font-weight: 700; font-size: 22px; margin-top: 14px; }
.lex-app .lex-prof__class { font-size: 14px; color: var(--ink-3); margin-top: 3px; }
.lex-app .lex-prof__chips { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.lex-app .lex-prof__chips .lex-chip { white-space: nowrap; }
.lex-app .lex-prof__stats { display: flex; justify-content: center; gap: 28px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline-2); }
.lex-app .lex-prof__stats > div { display: flex; flex-direction: column; }
.lex-app .lex-prof__stats .n { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink); }
.lex-app .lex-prof__stats .l { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.lex-app .lex-prof__row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; white-space: nowrap; margin-top: 14px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--hairline); cursor: pointer; font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--ink); }
.lex-app .lex-prof__row:hover { background: var(--lex-cream); }
.lex-app .lex-prof__rowv { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-weight: 600; }
.lex-app .lex-prof__rowv form { margin: 0; }
.lex-app .lex-prof__rowv select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: transparent; border: 0; box-shadow: none; border-radius: 0; color: var(--ink-3); font-family: var(--body); font-weight: 600; font-size: 15px; cursor: pointer; text-align: right; height: auto; min-height: 0; line-height: 1.3; margin: 0; padding: 0 4px 0 0; width: auto; max-width: 150px; }
.lex-app .lex-prof__rowv select:focus { border: 0; outline: 0; }
.lex-app .lex-prof__logout { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 15px; border-radius: 16px; background: transparent; border: 1px solid var(--hairline); cursor: pointer; font-family: var(--body); font-weight: 700; font-size: 15px; color: var(--lex-red); text-decoration: none; }
.lex-app .lex-prof__logout:hover { background: var(--lex-red-soft); }
.lex-app .lex-prof__wrap { max-width: 720px; margin: 0 auto; padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 48px) 130px; }
/* "Help us tailor Lexorate to you" nudge — soft attention card, icon + copy row. */
.lex-app .lex-prof__nudge { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; margin-bottom: 16px; background: var(--lex-mint-soft); border-color: rgba(11,112,119,0.18); }
.lex-app .lex-prof__nudge-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--lex-teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.lex-app .lex-prof__nudge-title { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--ink); }
.lex-app .lex-prof__nudge-sub { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: 3px; }
/* profile: prominent invitation card */
.lex-app .lex-prof__invite { margin-top: 16px; padding: 20px; border-radius: var(--r-card); background: linear-gradient(135deg, var(--lex-teal), var(--lex-teal-deep)); box-shadow: 0 16px 34px -18px rgba(7,74,80,0.6); color: #fff; }
.lex-app .lex-prof__invite-head { display: flex; align-items: center; gap: 14px; }
.lex-app .lex-prof__invite-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,0.16); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.lex-app .lex-prof__invite-title { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.15; color: #fff; }
.lex-app .lex-prof__invite-sub { font-size: 13px; color: rgba(255,255,255,0.82); margin-top: 3px; }
.lex-app .lex-prof__invite form { display: flex; align-items: stretch; gap: 8px; margin: 16px 0 0; }
.lex-app .lex-prof__invite .input { flex: 1; margin: 0; }
.lex-app .lex-prof__invite input { width: 100%; box-sizing: border-box; height: auto; margin: 0; padding: 13px 15px; border-radius: 12px; border: 0; background: rgba(255,255,255,0.96); color: var(--ink); font-family: var(--body); font-weight: 600; font-size: 15px; }
.lex-app .lex-prof__invite input::placeholder { color: var(--ink-4); font-weight: 500; }
.lex-app .lex-prof__invite button { flex-shrink: 0; height: auto; margin: 0; padding: 13px 22px; border-radius: 12px; border: 0; background: #fff; color: var(--lex-teal-deep); font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: normal; text-transform: none; cursor: pointer; transition: filter .14s ease; }
.lex-app .lex-prof__invite button:hover { filter: brightness(0.94); }
/* profile: subscription */
.lex-app .lex-prof__sub { margin-top: 14px; padding: 4px 22px 16px; }
.lex-app .lex-prof__subhd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hairline-2); }
.lex-app .lex-prof__subplan { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink); }
.lex-app .lex-prof__subrow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline-2); font-size: 14.5px; }
.lex-app .lex-prof__subrow:last-child { border-bottom: 0; }
.lex-app .lex-prof__subrow .k { color: var(--ink-3); font-weight: 600; }
.lex-app .lex-prof__subrow .v { color: var(--ink); font-weight: 600; text-align: right; }
.lex-app .lex-prof__subnote { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--lex-cream); color: var(--ink-2); font-size: 13.5px; line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; }
.lex-app .lex-prof__subnote .lex-prof__subnote-ic { flex-shrink: 0; color: var(--lex-teal-deep); display: inline-flex; }
/* profile: expanded account form */
.lex-app .lex-prof__form { margin-top: 14px; padding: 8px 22px 22px; }
.lex-app .lex-prof__form .input { margin-top: 16px; }
.lex-app .lex-prof__form label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin-bottom: 7px; }
.lex-app .lex-prof__form input[type=text], .lex-app .lex-prof__form input[type=email] { width: 100%; box-sizing: border-box; height: auto; margin: 0; padding: 13px 15px; border-radius: 13px; border: 1px solid var(--hairline); background: #fff; color: var(--ink); font-family: var(--body); font-weight: 600; font-size: 15px; }
.lex-app .lex-prof__form input[type=text]:focus, .lex-app .lex-prof__form input[type=email]:focus { outline: 0; border-color: var(--lex-teal); box-shadow: 0 0 0 3px var(--lex-cream); }
.lex-app .lex-prof__form input[readonly] { background: var(--lex-cream); color: var(--ink-3); cursor: not-allowed; }
.lex-app .lex-prof__form select { width: 100%; box-sizing: border-box; height: auto; margin: 0; padding: 13px 40px 13px 15px; border-radius: 13px; border: 1px solid var(--hairline); background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7884' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; appearance: none; -webkit-appearance: none; -moz-appearance: none; color: var(--ink); font-family: var(--body); font-weight: 600; font-size: 15px; line-height: 1.3; text-overflow: ellipsis; cursor: pointer; }
.lex-app .lex-prof__form select:focus { outline: 0; border-color: var(--lex-teal); box-shadow: 0 0 0 3px var(--lex-cream); }
.lex-app .lex-prof__form select[multiple] { min-height: 132px; padding: 8px; background-image: none; }
.lex-app .lex-prof__form select[multiple] option { padding: 8px 10px; border-radius: 8px; }
/* Two-option segmented control (e.g. leaderboard name vs anonymous). */
.lex-app .lex-prof__form .lex-segment { display: flex; gap: 6px; background: var(--bg-deep); padding: 5px; border-radius: 13px; margin-top: 4px; }
.lex-app .lex-prof__form .lex-segment__opt { flex: 1; margin: 0; }
.lex-app .lex-prof__form .lex-segment__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.lex-app .lex-prof__form .lex-segment__opt span { display: block; text-align: center; padding: 11px 12px; border-radius: 10px; font-family: var(--body); font-weight: 700; font-size: 14px; text-transform: none; letter-spacing: normal; color: var(--ink-3); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .14s ease, color .14s ease, box-shadow .14s ease; }
.lex-app .lex-prof__form .lex-segment__opt input:checked + span { background: #fff; color: var(--lex-teal-deep); box-shadow: var(--shadow-soft); }
.lex-app .lex-prof__form .teacher-setting { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline-2); }
.lex-app .lex-prof__form .teacher-setting h4 { font-family: var(--display); font-weight: 700; font-size: 16px; margin: 0 0 6px; color: var(--ink); }
.lex-app .lex-prof__form .teacher-setting p { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 12px; }
.lex-app .lex-prof__form .submit { margin-top: 22px; }
.lex-app .lex-prof__form .submit input { width: 100%; height: auto; margin: 0; padding: 14px 18px; border-radius: var(--r-btn); border: 0; background: var(--lex-teal-deep); color: #fff; font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: normal; text-transform: none; cursor: pointer; box-shadow: 0 6px 14px -6px rgba(7,74,80,0.5); transition: filter .14s ease; }
.lex-app .lex-prof__form .submit input:hover { filter: brightness(1.06); }
/* ── practice languages ── */
.lex-app .lex-prof__langs { margin-top: 14px; padding: 18px 22px 22px; }
.lex-app .lex-prof__langs-sub { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 14px; }
.lex-app .lex-prof__langs-list { list-style: none; margin: 0; padding: 0; }
.lex-app .lex-prof__lang { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--hairline-2); }
.lex-app .lex-prof__lang:last-child { border-bottom: 0; }
.lex-app .lex-prof__lang-name { flex: 1; font-weight: 600; color: var(--ink); }
.lex-app .lex-prof__lang-remove { font-size: 13px; font-weight: 700; color: var(--lex-coral, #d2604f); text-decoration: none; }
.lex-app .lex-prof__lang-remove:hover { text-decoration: underline; }
.lex-app .lex-prof__langs-empty { font-size: 14px; color: var(--ink-3); margin: 0 0 12px; }
.lex-app .lex-prof__lang-add { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.lex-app .lex-prof__lang-add .input { margin: 0; flex: 1; }
.lex-app .lex-prof__lang-add select { width: 100%; height: auto; margin: 0; box-sizing: border-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 12px 40px 12px 14px; border-radius: 13px; border: 1px solid var(--hairline); background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7884' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; color: var(--ink); font-family: var(--body); font-weight: 600; font-size: 15px; line-height: 1.3; cursor: pointer; text-overflow: ellipsis; }
.lex-app .lex-prof__lang-add select:focus { outline: 0; border-color: var(--lex-teal); box-shadow: 0 0 0 3px var(--lex-cream); }
.lex-app .lex-prof__lang-add input[type="text"] { width: 100%; height: auto; box-sizing: border-box; margin: 0; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--hairline); background: #fff; color: var(--ink); font-family: var(--body); font-weight: 600; font-size: 15px; line-height: 1.3; }
.lex-app .lex-prof__lang-add input[type="text"]:focus { outline: 0; border-color: var(--lex-teal); box-shadow: 0 0 0 3px var(--lex-cream); }
.lex-app .lex-prof__lang-add button { box-sizing: border-box; height: auto; padding: 12px 20px; border-radius: var(--r-btn); border: 1px solid transparent; background: var(--lex-teal-deep); color: #fff; font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1.3; cursor: pointer; white-space: nowrap; }
.lex-app .lex-prof__lang-add button:hover { filter: brightness(1.06); }
/* ── floating bottom menu ── */
.lex-app .lex-fab {
position: fixed; bottom: 24px; left: calc(50% + (var(--nav-w) / 2)); transform: translateX(-50%);
display: flex; gap: 4px; padding: 7px; z-index: 90;
background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid var(--hairline); border-radius: 22px; box-shadow: var(--shadow-lift);
}
.lex-app .lex-fab__item {
display: flex; flex-direction: column; align-items: center; gap: 3px;
width: 78px; padding: 9px 0; border-radius: 16px; border: none; background: transparent; cursor: pointer;
font-family: var(--body); font-size: 11px; font-weight: 600; color: var(--ink-3); transition: color .12s ease; text-decoration: none;
}
.lex-app .lex-fab__item svg { opacity: 0.9; }
.lex-app .lex-fab__item.on { background: var(--lex-teal); color: #fff; }
.lex-app .lex-fab__item.on svg { opacity: 1; }
.lex-app .lex-fab__item:not(.on):hover { color: var(--ink); }
/* ─────────────────────────────────────────── EXERCISE VIEW */
.lex-app .lex-ex { display: flex; flex: 1; min-width: 0; min-height: 0; }
/* Pin the exercise dock: the shell, rail and web column take the available
height so the column scrolls internally. lex.js sizeShell() publishes the real
space (viewport minus the superadmin health bar) as --lex-shell-h; the 100vh
fallback covers the pre-JS paint and the no-bar case. */
.lex-app .lex-main:has(.lex-ex) { height: var(--lex-shell-h, 100vh); overflow: hidden; }
.lex-app:has(.lex-ex) .lex-web { min-height: var(--lex-shell-h, 100vh); }
.lex-app:has(.lex-ex) .lex-rail { height: var(--lex-shell-h, 100vh); }
.lex-app .lex-ex.read { background: var(--ex-read-soft); }
.lex-app .lex-ex.speak { background: var(--ex-speak-soft); }
.lex-app .lex-ex.pic { background: var(--ex-pic-soft); }
.lex-app .lex-ex__main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.lex-app .lex-ex__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: clamp(22px, 3vw, 38px) clamp(20px, 4vw, 48px) 32px; }
.lex-app .lex-ex__col { max-width: 740px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.lex-app .lex-extop { display: flex; align-items: center; justify-content: space-between; }
.lex-app .lex-backbtn { width: 42px; height: 42px; border-radius: 13px; background: #fff; border: 1px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2); transition: background .12s ease; text-decoration: none; }
.lex-app .lex-backbtn:hover { background: var(--lex-cream); }
.lex-app .lex-exkind { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; }
.lex-app .lex-exkind__icon { width: 30px; height: 30px; border-radius: 9px; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.lex-app .lex-exchips { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lex-app .lex-exchips .lex-chip { white-space: nowrap; }
.lex-app .lex-extitle { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.025em; line-height: 1.04; margin: 6px 0 2px; }
.lex-app .lex-exnote { margin: 16px 0 4px; padding: 15px 18px; background: var(--lex-cream); border: 1px solid var(--hairline); border-radius: 14px; }
.lex-app .lex-exnote__who { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--lex-teal); margin-bottom: 8px; }
.lex-app .lex-exnote__text { font-size: 16px; line-height: 1.55; color: var(--ink-2); font-weight: 500; }
.lex-app .lex-icard { padding: 18px 20px; }
.lex-app .lex-icard__who { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--lex-teal); margin-bottom: 9px; }
.lex-app .lex-icard__a { font-size: 16.5px; line-height: 1.55; color: var(--ink); font-weight: 500; }
.lex-app .lex-icard__b { font-size: 15px; line-height: 1.5; color: var(--ink-3); font-style: italic; margin-top: 6px; }
.lex-app .lex-prompt { padding: 0; overflow: hidden; }
.lex-app .lex-prompt__head { padding: 24px; }
.lex-app .lex-prompt__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.lex-app .lex-prompt__text { font-size: clamp(20px, 1.9vw, 25px); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); margin-top: 9px; }
.lex-app .lex-words { padding: 16px 22px 20px; border-top: 1px solid var(--hairline-2); }
.lex-app .lex-words__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.lex-app .lex-words__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.lex-app .lex-word-chip { display: inline-flex; flex-direction: column; padding: 7px 12px; background: #fff; border: 1px solid var(--hairline); border-radius: 11px; line-height: 1.25; white-space: nowrap; }
.lex-app .lex-word-chip .en { font-size: 14px; font-weight: 600; white-space: nowrap; }
.lex-app .lex-word-chip .cz { font-size: 12px; font-style: italic; color: var(--ink-3); white-space: nowrap; }
.lex-app .lex-pcard { padding: 22px 24px; }
.lex-app .lex-pcard__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 13px; }
.lex-app .lex-pcard__labeltr { font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-4); margin-left: 5px; }
.lex-app .lex-passage { font-size: clamp(19px, 1.9vw, 24px); font-weight: 700; line-height: 1.5; color: var(--ink); letter-spacing: -0.01em; }
.lex-app .lex-helpers { display: flex; gap: 10px; margin-top: 14px; }
.lex-app .lex-ghostbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: var(--r-btn); background: #fff; border: 1px solid var(--hairline); font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .12s ease; text-decoration: none; }
.lex-app .lex-ghostbtn:hover { background: var(--lex-cream); }
.lex-app .lex-attnote { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-btn); padding: 14px 16px; }
.lex-app .lex-attnote__ic { flex-shrink: 0; display: inline-flex; }
.lex-app .lex-attnote__txt { font-size: 14px; color: var(--ink-2); }
.lex-app .lex-attnote__txt b { color: var(--ink); }
.lex-app .lex-attnote__txt .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.lex-app .lex-listening { padding: 18px 22px; }
.lex-app .lex-listening__label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--lex-blue); display: flex; align-items: center; gap: 8px; }
.lex-app .lex-dot { width: 9px; height: 9px; border-radius: 50%; background: #FF5A5A; animation: lex-recpulse 1.4s ease-in-out infinite; }
@keyframes lex-recpulse { 50% { opacity: .25; } }
.lex-app .lex-listening__text { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin-top: 12px; font-weight: 500; min-height: 28px; }
.lex-app .lex-caret { display: inline-block; width: 2px; height: 18px; background: var(--lex-blue); margin-left: 3px; vertical-align: -3px; animation: lex-caret 1s steps(2) infinite; }
@keyframes lex-caret { 50% { opacity: 0; } }
.lex-app .lex-ex__dock { flex-shrink: 0; background: #fff; border-top: 1px solid var(--hairline); box-shadow: 0 -12px 30px -22px rgba(11,74,80,0.45); padding: 16px clamp(20px, 4vw, 48px) 18px; }
.lex-app .lex-dockinner { max-width: 740px; margin: 0 auto; }
.lex-app .lex-dockbtn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 17px; border-radius: 16px; background: var(--lex-coral); color: #fff; font-family: var(--body); font-weight: 700; font-size: 16px; cursor: pointer; border: none; box-shadow: 0 12px 26px -10px rgba(252,102,32,0.5); transition: filter .14s ease, transform .1s ease; }
.lex-app .lex-dockbtn:hover { filter: brightness(1.05); }
.lex-app .lex-dockbtn:active { transform: translateY(1px); }
.lex-app .lex-docksub { text-align: center; font-size: 12.5px; color: var(--ink-3); margin-top: 9px; }
.lex-app .lex-dockrec { display: flex; align-items: center; gap: 12px; }
.lex-app .lex-dockrec [data-rec-slot] { flex: 1; min-width: 0; }
.lex-app .lex-listenbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 17px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--hairline); color: var(--ink); font-family: var(--body); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; white-space: nowrap; }
.lex-app .lex-listenbtn:hover { background: var(--lex-cream); }
.lex-app .lex-ex.recording .lex-listenbtn, .lex-app .lex-ex.done .lex-listenbtn { display: none; }
.lex-app .lex-recdock__time { font-family: var(--mono); font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; width: 72px; }
.lex-app .lex-stop { width: 56px; height: 56px; border-radius: 50%; background: #FF5A5A; border: 4px solid #fff; box-shadow: 0 10px 24px -8px rgba(255,90,90,0.55); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lex-app .lex-stop__sq { width: 19px; height: 19px; border-radius: 5px; background: #fff; }
.lex-app .lex-dockactions { display: flex; gap: 12px; }
.lex-app .lex-dockghost { flex: 1; padding: 15px; border-radius: 14px; background: #fff; border: 1px solid var(--hairline); color: var(--ink); font-family: var(--body); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; text-decoration: none; text-align: center; }
.lex-app .lex-dockghost:hover { background: var(--lex-cream); }
.lex-app .lex-dockprimary { flex: 1; padding: 15px; border-radius: 14px; background: var(--lex-teal-deep); border: none; color: #fff; font-family: var(--body); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; text-decoration: none; text-align: center; box-shadow: 0 6px 14px -6px rgba(7,74,80,0.5); }
.lex-app .lex-dockprimary:hover { filter: brightness(1.06); }
/* ── SCORE PANEL ── */
.lex-app .lex-score { width: 392px; flex-shrink: 0; background: var(--bg); border-left: 1px solid var(--hairline); padding: clamp(24px, 2.2vw, 32px) clamp(22px, 1.8vw, 30px); overflow-y: auto; animation: lex-score-in .42s cubic-bezier(.2,.7,.3,1) both; }
@keyframes lex-score-in { from { transform: translateX(26px); } to { transform: none; } }
.lex-app .lex-score__cap { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.lex-app .lex-score__hero { padding: 18px; display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.lex-app .lex-score__herotext { flex: 1; min-width: 0; }
.lex-app .lex-score__overlabel { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.lex-app .lex-score__summary { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-top: 6px; }
.lex-app .lex-score__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.lex-app .lex-score__bylabel { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 11px; }
.lex-app .lex-score__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lex-app .lex-skill { padding: 15px; }
.lex-app .lex-skill__top { display: flex; align-items: baseline; justify-content: space-between; }
.lex-app .lex-skill__name { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.lex-app .lex-skill__val { font-family: var(--display); font-size: 19px; font-weight: 700; }
.lex-app .lex-skill__tr { font-size: 11.5px; font-style: italic; color: var(--ink-4); margin-top: 1px; }
.lex-app .lex-progressbar { height: 8px; background: var(--bg-deep); border-radius: 8px; overflow: hidden; margin-top: 10px; }
.lex-app .lex-progressbar > span { display: block; height: 100%; border-radius: 8px; }
/* ── Exercise legacy bridge: reskin the existing recording engine
(#analyzer chat flow, #recording, #result, .score table) into the
redesign. Higher specificity than assessment.css; assessment.css is
NOT loaded on the reskinned templates — the functional bits it needs
(hidden #templates, word popover) are ported below. ── */
@keyframes lex-pulse { 0% { transform: scale(1,1);} 50% { transform: scale(.7,.7); opacity:.5;} 100% { transform: scale(1,1);} }
.lex-app .lex-ex #templates,
.lex-app .lex-ex #language,
.lex-app .lex-ex #demo,
/* analyze.js shows the legacy green scroll arrow via an inline display:block; !important
beats that inline style so it stays hidden in the lex exercise/complete view. */
.lex-app .lex-ex #scrollIndicator { display: none !important; }
.lex-app .lex-ex #exercise { position: static; padding: 0; flex: none; }
.lex-app .lex-ex #exercise::before, .lex-app .lex-ex #exercise::after { display: none; content: none; }
.lex-app .lex-ex #exercise > h1 { display: none; }
.lex-app .lex-ex #analyzer { display: flex; flex-direction: column; gap: 0; max-width: none; padding: 0; }
/* chat bubbles → cards. Consecutive messages from the same author merge into
one continuous block: lex.js groupMessages() tags each message with its
position in the run (.lex-grp-solo/first/mid/last) so the block reads as a
single card with hairline dividers, and different-author groups are spaced.
#result carries author="student", so > div[author] already covers it. */
.lex-app .lex-ex #analyzer > p[author],
.lex-app .lex-ex #analyzer > div[author] {
display: block; float: none; clear: both; max-width: none; min-width: 0;
margin: 0; padding: 18px 20px; border-radius: var(--r-card);
background: #fff; border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
font-size: 16px; line-height: 1.5; color: var(--ink);
}
/* Merge a same-author run into one card. The :is(p, div) keeps these on par
with the type-qualified base selectors above, so the radius/border overrides
actually win (a plain .class would be out-ranked by p[author]/div[author]). */
/* first of a multi-message group — rounded top, flush (un-rounded, shadowless) bottom */
.lex-app .lex-ex #analyzer > :is(p, div).lex-grp-first {
border-bottom: none; box-shadow: none;
border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
/* middle of a group — square all round, joined by a hairline divider */
.lex-app .lex-ex #analyzer > :is(p, div).lex-grp-mid {
border-radius: 0; border-bottom: none; box-shadow: none;
border-top: 1px solid var(--hairline-2);
}
/* last of a group — divider on top, only this one keeps the rounded, raised bottom */
.lex-app .lex-ex #analyzer > :is(p, div).lex-grp-last {
border-top: 1px solid var(--hairline-2);
border-top-left-radius: 0; border-top-right-radius: 0;
}
/* margin AFTER the last of each group (and a solo message) separates author groups */
.lex-app .lex-ex #analyzer > :is(p, div).lex-grp-last,
.lex-app .lex-ex #analyzer > :is(p, div).lex-grp-solo { margin-bottom: 14px; }
.lex-app .lex-ex #analyzer > p[author] h4,
.lex-app .lex-ex #analyzer > div[author] h4 {
font-family: var(--body); font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.07em; color: var(--lex-teal); margin: 0 0 8px; padding: 0;
}
/* Lexorate title sits left (default); the student's "You" title sits right
(#result carries author="student", so this covers it too) */
.lex-app .lex-ex #analyzer > [author="student"] h4 { text-align: right; }
.lex-app .lex-ex #analyzer span.translation { display: block; font-style: italic; font-size: 90%; color: var(--ink-3); margin-top: 6px; }
.lex-app .lex-ex #analyzer > #textToAnalyze { font-family: var(--body); font-weight: 700; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.5; position: relative; }
.lex-app .lex-ex #analyzer img { max-width: 100%; border-radius: 12px; }
/* recognized-word transcript */
.lex-app .lex-ex .assessment div.word { display: inline-block; margin: 3px 4px; position: relative; padding: 1px 3px; border-radius: 5px; color: var(--ink); font-weight: 500; }
.lex-app .lex-ex .assessment div.word.perfect { color: #0F8068; background: rgba(32,173,150,0.12); font-weight: 700; }
.lex-app .lex-ex .assessment div.word.almost { color: #B07A1F; background: rgba(255,186,73,0.20); }
.lex-app .lex-ex .assessment div.word.mispronounced,
.lex-app .lex-ex .assessment div.word.imperfect { color: #B23439; background: rgba(229,72,77,0.12); font-style: normal; text-decoration: none; }
.lex-app .lex-ex .assessment div.word.missed { color: var(--ink-4); background: var(--bg-deep); }
.lex-app .lex-ex .assessment div.word.missed:before,
.lex-app .lex-ex .assessment div.word.missed:after { content: ''; }
.lex-app .lex-ex .assessment div.word div.phonemes { display: none; position: absolute; top: -20px; left: 50%; transform: translate(-50%,-50%); background: rgb(244,227,130); border-radius: 6px; padding: 6px 8px; white-space: nowrap; z-index: 5; font-style: normal; }
.lex-app .lex-ex .assessment div.word div.phonemes h5 { margin: 0; font-size: 13px; font-weight: 700; }
.lex-app .lex-ex .assessment div.word div.phonemes span { margin: 0 3px; }
/* Tappable-word affordance + loading state (mirrors assessment.css). */
.lex-app .lex-ex .assessment div.word { cursor: pointer; }
.lex-app .lex-ex .assessment div.word .word__say {
position: absolute; top: -7px; right: -7px; width: 15px; height: 15px; border-radius: 50%;
background: var(--accent, #20ad96) center / 9px 9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3C/svg%3E");
box-shadow: 0 1px 2px rgba(0,0,0,0.25); opacity: 0.55; transition: opacity .15s ease, transform .15s ease; pointer-events: none;
}
.lex-app .lex-ex .assessment div.word:hover .word__say { opacity: 1; transform: scale(1.12); }
.lex-app .lex-ex .assessment div.word.loading .word__say {
background-image: none; background-color: #fff; border: 2px solid rgba(32,173,150,0.3); border-top-color: var(--accent, #20ad96);
opacity: 1; animation: word-say-spin .6s linear infinite;
}
.lex-app .lex-ex .assessment-hint {
display: flex; align-items: center; gap: 6px; margin: 2px 0 12px; font-size: 13px; color: var(--ink-3, #667);
}
.lex-app .lex-ex .assessment-hint:before {
content: ''; flex: none; width: 16px; height: 16px;
background: center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320ad96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 5a9 9 0 0 1 0 14'/%3E%3C/svg%3E");
}
@keyframes word-say-spin { to { transform: rotate(360deg); } }
/* typing indicator */
.lex-app .lex-ex .typing-indicator { display: none; align-items: center; gap: 5px; padding: 14px 18px; }
.lex-app .lex-ex .typing-indicator[style*="flex"] { display: flex !important; }
.lex-app .lex-ex .typing-indicator .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); animation: lex-pulse 1.4s infinite; }
/* dock-mounted record button (relocated here by lex.js) */
.lex-app .lex-rectimer { display: none; align-items: center; gap: 9px; justify-content: center; font-family: var(--mono); font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 10px; }
.lex-app .lex-ex.recording .lex-rectimer { display: flex; }
.lex-app .lex-ex.recording .lex-docksub { display: none; }
.lex-app .lex-ex.recording [data-rec-slot] #recording.enabled iconify-icon { color: #fff; }
.lex-app .lex-ex__dock #recording {
display: flex !important; align-items: center; justify-content: center; gap: 12px; width: 100%;
padding: 17px; border-radius: 16px; background: var(--lex-coral); color: #fff; cursor: pointer; margin: 0;
font-family: var(--body); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.03em; box-shadow: 0 12px 26px -10px rgba(252,102,32,0.5);
}
/* The legacy markup hard-codes width/height="48" on the mic, which iconify-icon
applies as an inline size that overflows the 22px line; override it for real
(!important to beat that inline size) instead of nudging it with a negative top. */
.lex-app .lex-ex__dock #recording iconify-icon { width: 22px !important; height: 22px !important; flex: none; color: #fff; display: inline-flex; line-height: 1; }
.lex-app .lex-ex__dock #recording.enabled { background: #FF5A5A; box-shadow: 0 10px 24px -8px rgba(255,90,90,0.55); }
.lex-app .lex-ex__dock #recording.disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.lex-app .lex-ex.done [data-rec-slot], .lex-app .lex-ex.done .lex-docksub, .lex-app .lex-ex.done .lex-rectimer { display: none; }
.lex-app .lex-ex:not(.done) .lex-dockactions { display: none; }
/* The legacy score side panel and table are retired — lex.js lifts the score
into the chat flow as result bubbles and reads the (hidden) table for data. */
.lex-app .lex-ex .lex-score,
.lex-app .lex-ex .score { display: none; }
/* Overall result bubble (ring + label), sits under the summary. Matches the
base bubble specificity via [author] so the flex layout wins. */
.lex-app .lex-ex #analyzer > [author].lex-resultcard { display: flex; align-items: center; gap: 18px; }
.lex-app .lex-resultring { flex: none; }
.lex-app .lex-resulttext { min-width: 0; }
.lex-app .lex-resultcap { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.lex-app .lex-resultname { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink); margin-top: 3px; }
/* Individual metrics — compact bar-chart grid, rendered as the last bubble. */
.lex-app .lex-metricgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.lex-app .lex-metric { min-width: 0; }
.lex-app .lex-metric__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.lex-app .lex-metric__name { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.lex-app .lex-metric__val { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink); }
.lex-app .lex-metric__bar { height: 8px; background: var(--bg-deep); border-radius: 8px; overflow: hidden; }
.lex-app .lex-metric__bar > span { display: block; height: 100%; border-radius: 8px; }
/* ─────────────────────────────────────────── PROGRESS DASHBOARD / HISTORY */
.lex-app .lex-card__cap { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
/* score ring (lex/ring element) */
.lex-app .lex-ring { position: relative; }
.lex-app .lex-ring__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lex-app .lex-ring__v { font-weight: 700; font-size: 40px; line-height: 1; color: var(--ink); }
.lex-app .lex-ring__l { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
/* metric strip */
.lex-app .lex-pmetrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.lex-app .lex-pmetric { background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-soft); }
.lex-app .lex-pmetric__label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.lex-app .lex-pmetric__val { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); color: var(--ink); margin-top: 8px; }
.lex-app .lex-pmetric__val span { font-size: 0.55em; color: var(--ink-3); font-weight: 600; margin-left: 3px; }
/* trend + ring row */
.lex-app .lex-prog2__top { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; align-items: stretch; }
.lex-app .lex-trendcard { padding: 20px 22px; display: flex; flex-direction: column; }
.lex-app .lex-trendcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.lex-app .lex-trendcard__meta { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.lex-app .lex-trend { position: relative; flex: 1; display: flex; align-items: flex-end; gap: clamp(6px, 1.4vw, 16px); height: 168px; padding-top: 18px; }
.lex-app .lex-trend--empty { align-items: center; justify-content: center; color: var(--ink-3); font-size: 14px; }
.lex-app .lex-trend__col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.lex-app .lex-trend__num { font-size: 11px; font-weight: 700; color: var(--ink-4); margin-bottom: 5px; }
.lex-app .lex-trend__track { flex: 1; width: 100%; max-width: 30px; display: flex; align-items: flex-end; }
.lex-app .lex-trend__bar { width: 100%; border-radius: 7px 7px 3px 3px; min-height: 6px; transform-origin: bottom; animation: lex-trend-grow .6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes lex-trend-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.lex-app .lex-trend__day { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-top: 9px; }
.lex-app .lex-trend__day.on { color: var(--lex-coral); }
.lex-app .lex-overcard { padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lex-app .lex-overcard__label { font-family: var(--display); font-weight: 700; font-size: 17px; margin-top: 14px; }
.lex-app .lex-overcard__sub { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
/* by-skill grid */
.lex-app .lex-prog2__skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* filter chips */
.lex-app .lex-pfilters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.lex-app .lex-pfilter { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--hairline); font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease; text-decoration: none; }
.lex-app .lex-pfilter:hover { color: var(--ink); border-color: rgba(11,74,80,0.2); }
.lex-app .lex-pfilter.on { background: var(--lex-teal); border-color: var(--lex-teal); color: #fff; }
/* past list */
.lex-app .lex-plist { display: flex; flex-direction: column; gap: 12px; }
.lex-app .lex-prow { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-soft); cursor: pointer; text-decoration: none; transition: transform .14s ease, box-shadow .14s ease; }
.lex-app .lex-prow:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.lex-app .lex-prow__score { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: var(--bg-deep); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 19px; }
.lex-app .lex-prow__kind { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-deep); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; }
.lex-app .lex-prow__body { flex: 1; min-width: 0; }
.lex-app .lex-prow__title { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lex-app .lex-prow__meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 12.5px; color: var(--ink-3); }
.lex-app .lex-prow__flag { display: inline-flex; font-size: 13px; line-height: 1; }
.lex-app .lex-prow__flag iconify-icon { border-radius: 3px; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18); }
.lex-app .lex-prow__date { display: inline-flex; align-items: center; gap: 4px; }
.lex-app .lex-prow__dot { opacity: 0.5; }
.lex-app .lex-fp { display: flex; align-items: flex-end; gap: 4px; height: 30px; flex-shrink: 0; }
.lex-app .lex-fp__track { width: 6px; height: 100%; display: flex; align-items: flex-end; background: var(--bg-deep); border-radius: 4px; overflow: hidden; }
.lex-app .lex-fp__bar { width: 100%; border-radius: 4px; min-height: 4px; }
.lex-app .lex-pempty { text-align: center; padding: 40px; color: var(--ink-3); font-size: 14px; background: #fff; border: 1px solid var(--hairline); border-radius: 16px; }
/* paginator */
.lex-app .lex-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.lex-app .lex-pager ul.pagination { display: contents; }
.lex-app .lex-pager a, .lex-app .lex-pager li { list-style: none; }
.lex-app .lex-pager a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; border-radius: 10px; background: #fff; border: 1px solid var(--hairline); color: var(--ink-2); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.lex-app .lex-pager a:hover { background: var(--lex-cream); }
.lex-app .lex-pager .active a, .lex-app .lex-pager li.active { background: var(--lex-teal); border-color: var(--lex-teal); color: #fff; min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 13.5px; font-weight: 600; }
.lex-app .lex-pager .disabled { display: none; }
/* ─────────────────────────────────────────── LOGIN / SIGN-IN */
.lex-app .lex-login { display: flex; min-height: 100vh; }
/* brand panel */
.lex-app .lex-login__brand { flex: 1.05; position: relative; overflow: hidden; color: #fff; background: linear-gradient(165deg, #0B7077 0%, #074A50 52%, #063C41 100%); padding: clamp(36px, 4vw, 64px); display: flex; flex-direction: column; justify-content: space-between; }
.lex-app .lex-login__deco { position: absolute; border-radius: 50%; pointer-events: none; }
.lex-app .lex-login__deco.d1 { top: -90px; right: -70px; width: 320px; height: 320px; background: rgba(27,153,212,0.16); }
.lex-app .lex-login__deco.d2 { top: 38%; left: -90px; width: 220px; height: 220px; background: rgba(255,186,73,0.12); }
.lex-app .lex-login__deco.d3 { bottom: -60px; right: 60px; width: 160px; height: 160px; background: rgba(252,102,32,0.14); }
.lex-app .lex-login__brandtop { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.lex-app .lex-login__word { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.lex-app .lex-login__hero { position: relative; z-index: 1; max-width: 460px; }
.lex-app .lex-login__herotitle { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 4vw, 52px); line-height: 1.02; letter-spacing: -0.03em; margin: 0; color: #fff; }
.lex-app .lex-login__herosub { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; color: rgba(255,255,255,0.86); margin: 20px 0 0; max-width: 400px; }
.lex-app .lex-login__points { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 14px; }
.lex-app .lex-login__points li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 500; color: rgba(255,255,255,0.95); }
.lex-app .lex-login__check { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.16); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.lex-app .lex-login__brandfoot { position: relative; z-index: 1; font-size: 12.5px; color: rgba(255,255,255,0.5); }
/* form panel */
.lex-app .lex-login__panel { flex: 1; background: var(--surface); display: flex; flex-direction: column; min-width: 0; }
.lex-app .lex-login__paneltop { display: flex; justify-content: flex-end; padding: 22px 24px 0; }
.lex-app .lex-login__lang { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: var(--bg); border: 1px solid var(--hairline); color: var(--ink-2); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.lex-app .lex-login__lang:hover { background: var(--lex-cream); }
.lex-app .lex-login__lang iconify-icon { border-radius: 3px; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18); font-size: 15px; }
.lex-app .lex-login__lang .lex-lang__form { margin: 0; }
.lex-app .lex-login__lang select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: transparent; border: 0; box-shadow: none; border-radius: 0; color: var(--ink-2); font-family: var(--body); font-weight: 600; font-size: 13.5px; cursor: pointer; height: auto; min-height: 0; line-height: 1.3; margin: 0; padding: 0; width: auto; max-width: 130px; }
.lex-app .lex-login__lang select:focus { border: 0; outline: 0; }
.lex-app .lex-login__form { flex: 1; width: 100%; max-width: 400px; margin: 0 auto; padding: clamp(20px, 5vh, 56px) clamp(22px, 4vw, 40px) 40px; display: flex; flex-direction: column; justify-content: center; }
.lex-app .lex-login__formhead { margin-bottom: 26px; }
.lex-app .lex-login__title { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3vw, 32px); letter-spacing: -0.02em; margin: 0; }
.lex-app .lex-login__sub { font-size: 15px; color: var(--ink-3); margin: 8px 0 0; }
.lex-app .lex-login__fields { margin: 0; }
/* flash messages */
.lex-app .message { border-radius: 12px; padding: 12px 15px; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; cursor: pointer; background: var(--lex-blue-soft, #E8F0FE); color: #1F3A6B; }
.lex-app .message.error { background: var(--lex-red-soft); color: #B23439; }
.lex-app .message.success { background: var(--lex-green-soft); color: #0F6855; }
.lex-app .message.warning { background: var(--lex-amber-soft, #FCEFD2); color: #8A5A00; }
.lex-app .message.hidden { display: none; }
.lex-app .lex-login__form .message { margin-bottom: 16px; }
/* fields */
.lex-app .lex-field { display: block; margin-bottom: 16px; }
.lex-app .lex-field__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.lex-app .lex-field__wrap { position: relative; display: flex; align-items: center; }
.lex-app .lex-field__icon { position: absolute; left: 14px; color: var(--ink-4); display: inline-flex; pointer-events: none; }
.lex-app .lex-field__input { width: 100%; height: 50px; margin: 0; padding: 0 14px; border-radius: var(--r-btn); border: 1.5px solid var(--hairline); background: var(--bg); font-family: var(--body); font-size: 15px; color: var(--ink); transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; }
/* Only reserve the icon/toggle gutters when the field actually has them, so
bare inputs and selects (name, country, native languages) aren't over-padded. */
.lex-app .lex-field__wrap:has(.lex-field__icon) .lex-field__input { padding-left: 42px; }
.lex-app .lex-field__wrap:has(.lex-field__toggle) .lex-field__input { padding-right: 44px; }
.lex-app .lex-field__input:focus { outline: none; border-color: var(--lex-teal); background: #fff; box-shadow: 0 0 0 4px rgba(11,112,119,0.12); }
.lex-app .lex-field__toggle { position: absolute; right: 8px; width: 36px; height: 36px; border: none; background: none; color: var(--ink-4); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 9px; }
.lex-app .lex-field__toggle:hover { color: var(--ink-2); background: var(--bg-deep); }
.lex-app .lex-field__toggle .pw-eyeoff { display: none; }
.lex-app .lex-field__toggle.on .pw-eye { display: none; }
.lex-app .lex-field__toggle.on .pw-eyeoff { display: inline-flex; }
.lex-app .lex-login__forgot { text-align: right; margin: -4px 0 18px; }
.lex-app .lex-login__forgot a { font-size: 13.5px; font-weight: 600; color: var(--lex-teal); text-decoration: none; white-space: nowrap; }
.lex-app .lex-login__forgot a:hover { text-decoration: underline; }
.lex-app .lex-login__submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 52px; margin: 0; border-radius: var(--r-btn); border: none; background: var(--lex-teal-deep); color: #fff; font-family: var(--body); font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(7,74,80,0.55); transition: filter .14s ease, transform .1s ease; }
.lex-app .lex-login__submit:hover { filter: brightness(1.07); }
.lex-app .lex-login__submit:active { transform: translateY(1px); }
.lex-app .lex-login__submit svg { flex-shrink: 0; }
.lex-app .lex-login__notice { text-align: center; }
.lex-app .lex-login__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--lex-mint-soft); color: var(--lex-teal); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.lex-app .lex-login__agree { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 18px; font-size: 13px; line-height: 1.45; color: var(--ink-3); cursor: pointer; }
.lex-app .lex-login__agree input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--lex-teal); cursor: pointer; }
.lex-app .lex-login__agree a { color: var(--lex-teal); font-weight: 600; text-decoration: none; }
.lex-app .lex-login__agree a:hover { text-decoration: underline; }
.lex-app .lex-login__or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--ink-4); }
.lex-app .lex-login__or::before, .lex-app .lex-login__or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.lex-app .lex-login__or span { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
.lex-app .lex-login__providers { display: flex; flex-direction: column; gap: 10px; }
.lex-app .lex-prov { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; border-radius: var(--r-btn); border: 1.5px solid var(--hairline); background: #fff; font-family: var(--body); font-weight: 600; font-size: 14.5px; color: var(--ink); cursor: pointer; text-decoration: none; transition: background .12s ease, border-color .12s ease; }
.lex-app .lex-prov:hover { background: var(--bg); border-color: rgba(11,74,80,0.18); }
.lex-app .lex-prov svg { flex-shrink: 0; }
.lex-app .lex-login__alt { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 22px 0 0; }
.lex-app .lex-login__code { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--lex-mint-soft); border: 1px solid rgba(11,112,119,0.16); color: var(--lex-teal-deep); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.lex-app .lex-login__code:hover { filter: brightness(0.98); }
.lex-app .lex-login__demo { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--lex-teal-deep); cursor: pointer; text-decoration: none; white-space: nowrap; }
.lex-app .lex-login__demo span { font-weight: 500; color: var(--ink-3); }
.lex-app .lex-login__demo:hover { text-decoration: underline; }
.lex-app .lex-login__signup { text-align: center; font-size: 14px; color: var(--ink-3); margin-top: 26px; white-space: nowrap; }
.lex-app .lex-login__signup a { font-size: 14px; font-weight: 700; color: var(--lex-teal); text-decoration: none; white-space: nowrap; }
.lex-app .lex-login__signup a:hover { text-decoration: underline; }
/* onboarding — two-up name row */
.lex-app .lex-login__row { display: flex; gap: 12px; }
.lex-app .lex-login__row .lex-field { flex: 1; }
@media (max-width: 420px) { .lex-app .lex-login__row { flex-direction: column; gap: 0; } }
/* onboarding — age gate bracket cards */
.lex-app .lex-agegate { border: none; margin: 0 0 18px; padding: 0; }
.lex-app .lex-agegate legend { padding: 0; }
.lex-app .lex-agegate__card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; margin-top: 10px; border: 1.5px solid var(--hairline); border-radius: var(--r-btn); cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.lex-app .lex-agegate__card:hover { border-color: rgba(11,112,119,0.3); }
.lex-app .lex-agegate__card input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--lex-teal); cursor: pointer; }
.lex-app .lex-agegate__card:has(input:checked) { border-color: var(--lex-teal); background: var(--lex-mint-soft); }
.lex-app .lex-agegate__body { display: flex; flex-direction: column; gap: 2px; }
.lex-app .lex-agegate__title { font-size: 15px; font-weight: 700; color: var(--ink); }
.lex-app .lex-agegate__hint { font-size: 12.5px; color: var(--ink-3); }
/* onboarding — parent-pending timeline */
.lex-app .lex-timeline { list-style: none; margin: 22px 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lex-app .lex-timeline__step { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 14.5px; font-weight: 600; }
.lex-app .lex-timeline__dot { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--bg-deep); color: var(--ink-3); }
.lex-app .lex-timeline__step.is-done { color: var(--ink); }
.lex-app .lex-timeline__step.is-done .lex-timeline__dot { background: var(--lex-teal); color: #fff; }
/* onboarding — resend / change-email / skip row */
.lex-app .lex-login__resend { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.lex-app .lex-resend__form { margin: 0; }
.lex-app .lex-resend__sep { color: var(--ink-4); }
.lex-app .lex-link-btn { background: none; border: none; padding: 0; font-family: var(--body); font-size: 14px; font-weight: 700; color: var(--lex-teal); cursor: pointer; text-decoration: none; }
.lex-app .lex-link-btn:hover { text-decoration: underline; }
/* onboarding — classroom code input */
.lex-app .lex-code { text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; font-size: 18px; text-align: center; padding-left: 42px; }
.lex-app .lex-login__terms { text-align: center; font-size: 11.5px; color: var(--ink-4); line-height: 1.5; margin: 14px auto 0; max-width: 320px; }
@media (max-width: 880px) {
.lex-app .lex-login { flex-direction: column; }
.lex-app .lex-login__brand { flex: none; padding: 30px clamp(22px, 6vw, 44px) 34px; }
.lex-app .lex-login__brandtop { margin-bottom: 22px; }
.lex-app .lex-login__herotitle { font-size: clamp(28px, 7vw, 38px); }
.lex-app .lex-login__herosub, .lex-app .lex-login__points, .lex-app .lex-login__brandfoot { display: none; }
.lex-app .lex-login__panel { position: relative; }
.lex-app .lex-login__paneltop { position: absolute; top: 18px; right: 16px; padding: 0; z-index: 2; }
.lex-app .lex-login__lang { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); color: #fff; }
.lex-app .lex-login__lang:hover { background: rgba(255,255,255,0.22); }
.lex-app .lex-login__lang select { color: #fff; }
.lex-app .lex-login__lang select option { color: var(--ink); }
.lex-app .lex-login__form { padding-top: 34px; padding-bottom: 48px; }
}
@media (max-width: 420px) {
.lex-app .lex-login__form { max-width: 100%; }
}
/* ─────────────────────────────────────────── RESPONSIVE */
@media (max-width: 1120px) { .lex-app .lex-score { width: 340px; } }
@media (max-width: 960px) {
.lex-app .lex-rail:not(.drawer) { display: none; }
.lex-app .lex-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--rail-1); color: #fff; position: sticky; top: 0; z-index: 60; }
.lex-app .lex-topbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lex-app .lex-topbar__brand .word { font-family: var(--display); font-weight: 700; font-size: 17px; color: #fff; }
.lex-app .lex-burger { background: none; border: none; color: #fff; cursor: pointer; padding: 6px; display: inline-flex; }
.lex-app .lex-ex { flex-direction: column; }
.lex-app .lex-prog2__top { grid-template-columns: 1fr; }
.lex-app .lex-pmetrics { grid-template-columns: repeat(2, 1fr); }
.lex-app .lex-fab { left: 50%; }
.lex-app .lex-score { width: 100%; border-left: none; border-top: 1px solid var(--hairline); animation: none; }
.lex-app .lex-drawer-scrim { position: fixed; inset: 0; background: rgba(6,40,44,0.5); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.lex-app .lex-drawer-scrim.open { opacity: 1; pointer-events: auto; }
.lex-app .lex-rail.drawer { display: flex; position: fixed; left: 0; top: 0; bottom: 0; height: 100%; transform: translateX(-100%); transition: transform .26s cubic-bezier(.2,.7,.3,1); z-index: 80; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); }
.lex-app .lex-rail.drawer.open { transform: none; }
}
@media (min-width: 961px) {
.lex-app .lex-rail.drawer, .lex-app .lex-drawer-scrim { display: none; }
}
@media (max-width: 560px) {
.lex-app .lex-assign-grid { grid-template-columns: 1fr; }
.lex-app .lex-helpers { flex-direction: column; }
.lex-app .lex-stats { grid-template-columns: 1fr; }
.lex-app .lex-metricgrid { grid-template-columns: 1fr; }
.lex-app .lex-prog2__skills { grid-template-columns: repeat(2, 1fr); }
.lex-app .lex-fp { display: none; }
/* Dock action buttons (Try again / Back) and the listen + record row don't
fit side by side on a phone — stack them full-width. */
.lex-app .lex-dockactions { flex-direction: column; }
.lex-app .lex-dockrec { flex-direction: column; align-items: stretch; }
.lex-app .lex-listenbtn { justify-content: center; }
}
/* ─────────── DEMO PAGE (public try-it gallery) ─────────── */
/* Ported from docs/design_handoff_lexorate_demo/demo.css; every selector is
prefixed '.lex-app ' so it stays inert on legacy pages. Tokens reused from
:root above. Type-band gradients are inline-styled per card in PHP. */
.lex-app .demo { min-height: 100vh; }
.lex-app .demo * { box-sizing: border-box; }
/* top bar */
.lex-app .demo-top {
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 0 clamp(20px, 4vw, 48px); height: 64px;
background: linear-gradient(90deg, var(--lex-teal) 0%, var(--lex-teal-deep) 100%);
color: #fff;
}
.lex-app .demo-top__brand { display: flex; align-items: center; gap: 11px; }
.lex-app .demo-top__word { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.lex-app .demo-badge { margin-left: 4px; padding: 4px 10px; border-radius: 999px; background: var(--lex-coral); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.lex-app .demo-top__nav { display: flex; align-items: center; gap: 4px; }
.lex-app .demo-nav { padding: 9px 14px; border-radius: 10px; color: rgba(255,255,255,0.78); font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .12s ease, color .12s ease; }
.lex-app .demo-nav:hover { background: rgba(255,255,255,0.1); color: #fff; }
.lex-app .demo-nav.on { background: rgba(255,255,255,0.96); color: var(--lex-teal-deep); }
.lex-app .demo-lang { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-family: var(--body); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.lex-app .demo-lang:hover { background: rgba(255,255,255,0.22); }
.lex-app .demo-lang form { margin: 0; }
.lex-app .demo-lang select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: #fff; font-family: var(--body); font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 0; margin: 0; }
.lex-app .demo-lang select option { color: var(--ink); }
.lex-app .demo-inner { max-width: 1120px; margin: 0 auto; padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 48px) 80px; }
/* hero */
.lex-app .demo-hero { margin-bottom: 36px; }
.lex-app .demo-hero__title { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 4.4vw, 50px); letter-spacing: -0.03em; line-height: 1.02; margin: 0; }
.lex-app .demo-hero__sub { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; color: var(--ink-3); margin: 14px 0 0; max-width: 600px; }
/* filters */
.lex-app .demo-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.lex-app .demo-filter { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--hairline); font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--ink-3); cursor: pointer; text-decoration: none; transition: all .12s ease; }
.lex-app .demo-filter:hover { color: var(--ink); border-color: rgba(11,74,80,0.2); }
.lex-app .demo-filter.on { background: var(--lex-teal); border-color: var(--lex-teal); color: #fff; }
.lex-app .demo-count { margin-left: auto; font-size: 13.5px; color: var(--ink-4); font-weight: 600; }
/* group */
.lex-app .demo-group { margin-bottom: 34px; }
.lex-app .demo-group__head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.lex-app .demo-group__title { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; margin: 0; }
.lex-app .demo-group__sub { font-size: 13.5px; color: var(--ink-4); font-weight: 600; }
.lex-app .demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; align-items: start; }
/* exercise card — assignment-style band + white footer */
.lex-app .demo-card { display: flex; flex-direction: column; text-align: left; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .16s ease, box-shadow .16s ease; }
.lex-app .demo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.lex-app .demo-card__band { display: flex; flex-direction: column; padding: 14px 16px 15px; color: #fff; }
.lex-app .demo-card__bandtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lex-app .demo-card__kind { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lex-app .demo-card__kindic { width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,0.2); display: inline-flex; align-items: center; justify-content: center; }
.lex-app .demo-card__title { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; margin-top: 13px; }
.lex-app .demo-card__meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,0.9); }
.lex-app .demo-card__foot { padding: 13px 14px; display: flex; justify-content: flex-end; }
.lex-app .demo-card__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border-radius: var(--r-btn); border: none; background: var(--lex-teal-deep); color: #fff; font-family: var(--body); font-weight: 700; font-size: 13.5px; text-decoration: none; cursor: pointer; box-shadow: 0 6px 14px -8px rgba(11,74,80,0.5); transition: filter .14s ease, transform .1s ease; }
.lex-app .demo-card__btn:hover { filter: brightness(1.07); }
.lex-app .demo-card__btn:active { transform: translateY(1px); }
/* footer cta */
.lex-app .demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding: 22px 26px; border-radius: var(--r-card); background: var(--lex-mint-soft); border: 1px solid rgba(11,112,119,0.14); }
.lex-app .demo-foot span { font-size: 15.5px; font-weight: 600; color: var(--lex-teal-deep); }
.lex-app .demo-foot__link { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 14.5px; font-weight: 700; color: #fff; background: var(--lex-teal-deep); padding: 11px 18px; border-radius: var(--r-btn); text-decoration: none; }
.lex-app .demo-foot__link:hover { filter: brightness(1.07); }
/* responsive */
@media (max-width: 720px) {
.lex-app .demo-top { height: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.lex-app .demo-top__brand { padding: 12px clamp(20px,5vw,28px); }
.lex-app .demo-top__nav { padding: 0 clamp(16px,4vw,24px) 10px; overflow-x: auto; }
.lex-app .demo-nav { white-space: nowrap; }
.lex-app .demo-lang { margin-left: auto; }
.lex-app .demo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
.lex-app .demo-grid { grid-template-columns: 1fr; }
}
/* ─────────── RESULT AUDIO PLAYER (custom, replaces native