@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=block');

:root {
  --ink:#0b1f44;
  --navy:#0b1f44;
  --blue:#1769ee;
  --blue-dark:#0b54c7;
  --blue-soft:#edf4ff;
  --orange:#ff735f;
  --amber:#ffad32;
  --green:#2fa76f;
  --paper:#ffffff;
  --canvas:#f8f9fc;
  --warm:#fff7ef;
  --line:#e1e7f0;
  --line-strong:#cad4e3;
  --muted:#64748f;
  --success:#087c59;
  --danger:#b42318;
  --shadow-sm:0 8px 24px rgba(17,38,79,.06);
  --shadow:0 18px 50px rgba(17,38,79,.09);
  --shadow-blue:0 16px 34px rgba(23,105,238,.22);
  --radius:20px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
[hidden] { display:none !important; }
body.app-body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); font-family:"DM Sans",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
img { display:block; max-width:100%; }
.shell { width:min(1220px,calc(100% - 48px)); margin-inline:auto; }

.app-header { position:sticky; z-index:20; top:0; min-height:76px; display:flex; align-items:center; gap:28px; padding:0 max(24px,calc((100vw - 1220px)/2)); border-bottom:1px solid rgba(218,226,237,.85); background:rgba(255,255,255,.88); box-shadow:0 1px 0 rgba(12,31,66,.02); backdrop-filter:blur(18px); }
.app-brand { display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:800; letter-spacing:-.035em; white-space:nowrap; }
.app-mark { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:28px; width:auto; min-width:38px; background:none; border:none; box-shadow:none; }
.app-mark img, .app-mark svg { height:100%; width:auto; max-height:28px; object-fit:contain; display:block; }
.app-nav { display:flex; align-items:center; gap:28px; margin-left:auto; }
.app-nav a { position:relative; color:#45546e; font-size:13px; font-weight:700; }
.app-nav a:hover,.app-nav a[aria-current="page"] { color:var(--ink); }
.app-actions { display:flex; align-items:center; gap:10px; }
.plain-link { padding:11px 9px; border:0; color:var(--ink); background:none; font-size:13px; font-weight:700; }
.mobile-nav-toggle { display:none; }

/* Authenticated student workspace layout rules */
.member-layout > .app-header { display: none !important; }
.member-layout .page { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }

.button { display:inline-flex; min-height:44px; justify-content:center; align-items:center; gap:12px; padding:0 18px; border:1px solid transparent; border-radius:11px; font-size:13px; font-weight:800; line-height:1; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease; }
.button:hover { transform:translateY(-2px); }
.button.primary { color:#fff; background:linear-gradient(135deg,#2678f6,#1260df); box-shadow:var(--shadow-blue); }
.button.primary:hover { background:linear-gradient(135deg,#1f6fe8,#0b54c7); box-shadow:0 18px 38px rgba(23,105,238,.28); }
.button.secondary { color:var(--ink); border-color:var(--line-strong); background:rgba(255,255,255,.86); box-shadow:0 5px 16px rgba(17,38,79,.035); }
.button.secondary:hover { border-color:#9eb9e7; background:#fff; }
.button.danger { color:var(--danger); border-color:#efc9c5; background:#fffafa; }
.button.large { min-height:52px; padding-inline:22px; font-size:14px; }
.button:disabled { cursor:not-allowed; opacity:.56; transform:none; }
.text-link { display:inline-flex; align-items:center; gap:9px; color:var(--blue); font-size:14px; font-weight:800; }

.eyebrow,.page-kicker { margin:0 0 14px; color:var(--orange); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.eyebrow span { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--orange); }

/* Landing */
.landing-page { background:linear-gradient(180deg,#fff 0,#fafbfe 54%,#f5f7fb 100%); }
.landing-hero { position:relative; min-height:680px; display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:42px; overflow:hidden; padding:70px 0 62px; }
.landing-hero::before { position:absolute; z-index:-1; top:3%; right:-8%; width:62%; height:92%; border-radius:50%; background:radial-gradient(circle at center,rgba(44,118,241,.14),rgba(44,118,241,.045) 43%,transparent 72%); content:""; }
.landing-copy { position:relative; z-index:3; max-width:690px; }
.landing-copy h1 { margin:0; max-width:690px; font-size:clamp(54px,5.65vw,82px); line-height:.94; letter-spacing:-.076em; }
.landing-copy h1 em { color:var(--blue); font-style:normal; }
.hero-lead { max-width:610px; margin:28px 0 30px; color:#596a87; font-size:17px; line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-points { display:flex; flex-wrap:wrap; gap:9px 0; margin:30px 0 0; padding:0; color:#53627b; list-style:none; font-size:12px; font-weight:700; }
.hero-points li { display:flex; align-items:center; }
.hero-points li+li::before { width:1px; height:14px; margin:0 16px; background:#cbd5e4; content:""; }
.landing-art { position:relative; min-height:510px; align-self:stretch; }
.landing-art img { position:absolute; z-index:1; inset:0 -42px 0 -22px; width:116%; height:100%; object-fit:contain; object-position:center; mix-blend-mode:multiply; filter:saturate(.96) contrast(1.02); }
.art-caption { position:absolute; z-index:2; right:2px; bottom:62px; padding:16px 18px; border-left:3px solid var(--orange); color:var(--ink); background:rgba(255,255,255,.9); box-shadow:0 16px 40px rgba(25,45,83,.10); backdrop-filter:blur(16px); }
.art-caption small,.art-caption strong { display:block; }
.art-caption small { margin-bottom:5px; color:#78879f; font-size:9px; font-weight:800; letter-spacing:.1em; }
.art-caption strong { font-size:12px; }
.learning-rail { display:grid; grid-template-columns:1fr 56px 1fr 56px 1fr auto; align-items:center; gap:16px; padding:24px 26px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.58); }
.learning-rail p { display:grid; grid-template-columns:auto 1fr; column-gap:11px; margin:0; }
.learning-rail p span { grid-row:1 / 3; align-self:center; color:var(--blue); font-size:13px; font-weight:800; }
.learning-rail p strong { font-size:13px; }
.learning-rail p small { margin-top:3px; color:var(--muted); font-size:10px; }
.learning-rail>i { height:1px; background:repeating-linear-gradient(90deg,#b8c5d8 0 5px,transparent 5px 9px); }
.learning-rail>a { display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--line-strong); border-radius:50%; background:#fff; font-size:17px; transition:.18s ease; }
.learning-rail>a:hover { color:#fff; border-color:var(--blue); background:var(--blue); transform:translateX(3px); }
.landing-section { padding:100px 0 84px; }
.section-heading { max-width:670px; }
.section-heading h2,.preview-copy h2,.final-cta h2 { margin:0; font-size:clamp(36px,4vw,52px); line-height:1.05; letter-spacing:-.06em; }
.section-heading>p:last-child,.preview-copy>p,.final-cta p { color:var(--muted); font-size:16px; line-height:1.65; }
.path-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:42px; }
.path-card { position:relative; min-height:290px; padding:27px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow-sm); transition:.2s ease; }
.path-card:hover { transform:translateY(-5px); border-color:#bdd0ef; box-shadow:var(--shadow); }
.path-card.current { background:linear-gradient(145deg,#fff 42%,#f1f7ff 100%); }
.path-card.future { background:linear-gradient(145deg,#fff 42%,#fff6f1 100%); }
.path-index { position:absolute; top:24px; right:24px; color:#c8d2e0; font-size:12px; font-weight:800; }
.level-pill { display:inline-flex; min-width:46px; height:46px; align-items:center; justify-content:center; padding:0 12px; border-radius:14px; font-size:12px; font-weight:800; }
.level-pill.green { color:#278252; background:#eaf7ee; }
.level-pill.blue { color:var(--blue); background:#eaf2ff; }
.level-pill.coral { color:#d85b47; background:#fff0ed; }
.path-card h3 { margin:34px 0 10px; font-size:25px; letter-spacing:-.045em; }
.path-card p { min-height:72px; margin:0 0 26px; color:var(--muted); font-size:14px; line-height:1.6; }
.path-card strong { color:var(--blue); font-size:13px; }
.learning-preview { display:grid; grid-template-columns:.72fr 1.28fr; align-items:center; gap:58px; padding:66px; overflow:hidden; border:1px solid #dce7f7; border-radius:28px; background:linear-gradient(135deg,#eef5ff 0,#fff 54%,#fff8f1 100%); box-shadow:var(--shadow-sm); }
.preview-copy>p { margin:20px 0 26px; }
.product-proof { margin:0; overflow:hidden; border:1px solid #ced9e8; border-radius:18px; background:#fff; box-shadow:0 30px 70px rgba(18,43,84,.16); transform:rotate(1.1deg); }
.product-browser-bar { display:flex; min-height:34px; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid #e2e7ef; background:#f9fafc; }
.product-browser-bar>span { width:7px; height:7px; border-radius:50%; background:#d3dae5; }
.product-browser-bar>span:first-child { background:#ff806e; }
.product-browser-bar>span:nth-child(2) { background:#ffbd5b; }
.product-browser-bar>span:nth-child(3) { background:#57c893; }
.product-browser-bar small { margin-left:8px; color:#7c8ba1; font-size:8px; font-weight:700; letter-spacing:.03em; }
.product-proof img { width:100%; aspect-ratio:1.78; object-fit:cover; object-position:top; }
.product-proof figcaption { padding:13px 16px; color:#687791; font-size:10px; }
.product-proof figcaption strong { color:var(--ink); }
.final-cta { display:flex; align-items:center; justify-content:space-between; gap:40px; margin-block:84px; padding:46px 50px; border-radius:24px; color:#fff; background:linear-gradient(125deg,#0c2149,#15366c); box-shadow:0 24px 60px rgba(11,31,68,.20); }
.final-cta>div { max-width:720px; }
.final-cta .eyebrow { color:#8ab7ff; }
.final-cta h2 { font-size:clamp(34px,4vw,48px); }
.final-cta p { margin:14px 0 0; color:#c4d2e8; }
.final-cta .button { flex:0 0 auto; }

/* Inner pages */
.page { width:min(1180px,calc(100% - 48px)); min-height:calc(100vh - 160px); margin:0 auto; padding:68px 0 92px; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:34px; }
.page-title { max-width:760px; margin:0; font-size:clamp(40px,5vw,62px); line-height:1.01; letter-spacing:-.067em; }
.page-intro { max-width:650px; margin:18px 0 0; color:var(--muted); font-size:17px; line-height:1.65; }
.page-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:24px; margin-top:38px; }
.card { padding:28px; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:var(--shadow-sm); }
.card h2,.card h3 { margin:0; letter-spacing:-.045em; }
.card p { color:var(--muted); line-height:1.55; }

.course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:40px; }
.course-card { position:relative; display:flex; min-height:360px; flex-direction:column; padding:28px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow-sm); }
.course-card::after { position:absolute; top:-60px; right:-60px; width:170px; height:170px; border-radius:50%; background:#eef5ff; content:""; }
.course-card.ielts-card::after { background:#fff0ec; }
.course-code { position:relative; z-index:1; display:inline-flex; align-self:flex-start; min-height:34px; align-items:center; padding:0 11px; border-radius:9px; color:var(--blue); background:var(--blue-soft); font-size:11px; font-weight:800; letter-spacing:.05em; }
.course-card h2 { margin:35px 0 12px; font-size:29px; letter-spacing:-.05em; }
.course-card>p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.course-features { display:grid; gap:8px; margin:25px 0; padding:0; color:#40506c; list-style:none; font-size:12px; font-weight:700; }
.course-features li::before { margin-right:8px; color:var(--green); content:"✓"; }
.course-card .button { align-self:flex-start; margin-top:auto; }
.course-card .status-note { align-self:flex-start; margin-top:auto; color:#a5573b; font-size:12px; font-weight:800; }
.course-next { display:flex; justify-content:space-between; align-items:center; gap:28px; margin-top:24px; padding:30px; border:1px solid #d9e5f6; border-radius:20px; background:linear-gradient(110deg,#edf4ff,#fff); }
.course-next h2 { margin:0 0 8px; font-size:27px; letter-spacing:-.045em; }
.course-next p:not(.page-kicker) { margin:0; color:var(--muted); }

.practice-toolbar,.materials-toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin:34px 0 24px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow-sm); }
.toolbar-group { display:grid; gap:9px; }
.filter-label { color:#53627a; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.filter-row { display:flex; flex-wrap:wrap; gap:8px; }
.filter { min-height:30px; padding:0 12px; border:1px solid var(--line); border-radius:8px; color:#64748b; background:#fff; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s ease; }
.filter:hover { border-color:#94a3b8; color:#0f172a; }
.filter[aria-pressed="true"] { border-color:#cbd5e1; color:#0f172a; background:#f8fafc; font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.practice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.skill-card { position:relative; min-height:260px; padding:28px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow-sm); }
.skill-card .skill-number { display:block; margin-bottom:42px; color:var(--blue); font-size:12px; font-weight:800; }
.skill-card h2 { margin:0 0 10px; font-size:27px; letter-spacing:-.045em; }
.skill-card p { max-width:440px; min-height:45px; margin:0 0 26px; color:var(--muted); font-size:14px; line-height:1.6; }

.materials-toolbar { display:grid; grid-template-columns:minmax(230px,1.1fr) 1fr 1.4fr; align-items:end; }
.library-tabs { display:flex; gap:6px; margin:20px 0 0; padding:4px; overflow-x:auto; border:1px solid #e2e8f0; border-radius:12px; background:#f1f5f9; scrollbar-width:none; }
.library-tabs::-webkit-scrollbar { display:none; }
.library-tab { flex:0 0 auto; min-height:42px; padding:0 15px; border:0; border-radius:11px; color:var(--muted); background:transparent; font:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.library-tab:hover { color:var(--ink); background:#f4f7fb; }
.library-tab[aria-pressed="true"] { color:#fff; background:var(--blue); box-shadow:0 8px 20px rgba(28,107,236,.22); }
.search-field { display:grid; gap:9px; color:#53627a; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.search-field input { min-height:42px; width:100%; padding:0 13px; border:1px solid var(--line-strong); border-radius:10px; color:var(--ink); background:#fff; outline:0; letter-spacing:0; text-transform:none; }
.result-summary { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:20px 2px 12px; color:var(--muted); font-size:12px; }
.resource-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.resource { position:relative; display:flex; min-height:190px; flex-direction:column; align-items:flex-start; gap:0; overflow:hidden; padding:24px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); }
.resource-completion { width:calc(100% + 48px); display:flex; align-items:center; gap:10px; margin:-24px -24px 20px; padding:13px 24px; color:#bff8db; border-bottom:1px solid rgba(72,199,137,.22); background:linear-gradient(90deg,rgba(13,116,79,.34),rgba(21,77,77,.12)); }
.resource-completion>.material-symbols-outlined { flex:0 0 auto; color:#54dda0; font-size:24px; font-variation-settings:'FILL' 1,'wght' 600; }
.resource-completion strong,.resource-completion small { display:block; }
.resource-completion strong { color:#e6fff3; font-size:12px; letter-spacing:.01em; }
.resource-completion small { margin-top:3px; color:#85bca4; font-size:9px; font-weight:700; }
.resource-badges { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }
.resource-badge { padding:5px 8px; border-radius:7px; color:#52617a; background:#f1f4f8; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.resource-badge.primary { color:var(--blue); background:var(--blue-soft); }
.resource-badge.access-free { color:#16794c; background:#e8f8ef; }
.resource-badge.access-premium { color:#8c5d08; background:#fff4d6; }
.resource-lock:disabled { color:#7d6a40; border-color:#ead7a8; background:#fffaf0; cursor:not-allowed; opacity:1; }
.resource h2 { margin:0; font-size:21px; letter-spacing:-.035em; }
.resource>p { margin:8px 0 22px; color:var(--muted); font-size:13px; line-height:1.55; }
.resource-facts { display:flex; flex-wrap:wrap; gap:8px 16px; width:100%; margin:-7px 0 22px; padding-top:14px; border-top:1px solid var(--line); color:#56657c; font-size:11px; font-weight:700; }
.resource-facts span { display:inline-flex; align-items:center; gap:6px; }
.resource-facts span:not(:first-child)::before { content:""; width:4px; height:4px; border-radius:999px; background:#98a6ba; }
.resource .button { margin-top:auto; }
.resource.is-completed .button.primary { color:#dff9ec; border-color:rgba(79,215,148,.3); background:rgba(18,130,87,.2); box-shadow:none; }
.resource.is-completed .button.primary:hover { color:#fff; border-color:rgba(79,215,148,.5); background:rgba(18,130,87,.34); }
.resource-meta { color:var(--muted); font-size:12px; line-height:1.5; }
.empty { grid-column:1 / -1; display:grid; min-height:290px; place-items:center; padding:40px; text-align:center; border:1px dashed #b8c7dc; border-radius:20px; color:var(--muted); background:linear-gradient(145deg,#fff,#f7faff); }
.empty>div { max-width:470px; }
.empty h1,.empty h2 { margin:0; color:var(--ink); font-size:27px; letter-spacing:-.045em; }
.empty p { line-height:1.6; }
.empty .button { margin-top:12px; }
.loading-state { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; min-height:300px; }
.loading-card { min-height:260px; padding:24px; border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
.loading-card span { display:block; height:13px; margin-bottom:13px; border-radius:999px; background:linear-gradient(90deg,#edf1f7 20%,#f8faff 45%,#edf1f7 70%); background-size:220% 100%; animation:library-shimmer 1.25s ease-in-out infinite; }
.loading-card span:nth-child(1) { width:38%; height:10px; }
.loading-card span:nth-child(2) { width:74%; height:24px; margin-top:38px; }
.loading-card span:nth-child(3) { width:94%; }
.loading-card span:nth-child(4) { width:62%; }
@keyframes library-shimmer { to { background-position:-220% 0; } }

/* Material workspace */
.lesson-page { background:#f4f6fa; }
.lesson-page .page { width:min(1320px,calc(100% - 40px)); }
.lesson-back { display:inline-flex; margin-bottom:22px; color:#53627b; font-size:12px; font-weight:800; }
.lesson-header { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:24px; }
.lesson-header h1 { max-width:850px; margin:0; font-size:clamp(34px,4vw,52px); line-height:1.05; letter-spacing:-.055em; }
.lesson-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.lesson-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; }
.lesson-viewer { min-height:690px; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); }
.lesson-viewer iframe { width:100%; min-height:690px; flex:1; border:0; background:#fff; }
.lesson-tabs { display:flex; gap:8px; overflow-x:auto; padding:10px; border-bottom:1px solid var(--line); background:#f7f9fc; scrollbar-width:thin; }
.lesson-tabs button { flex:0 0 auto; min-height:38px; padding:0 15px; border:1px solid #d7e0ec; border-radius:10px; color:#52617a; background:#fff; font:800 11px/1 inherit; cursor:pointer; }
.lesson-tabs button[aria-selected="true"] { color:#fff; border-color:var(--blue); background:var(--blue); box-shadow:0 8px 18px rgba(23,105,232,.18); }
.lesson-media { min-height:690px; display:grid; place-items:center; padding:30px; background:linear-gradient(145deg,#0d234c,#174d99); }
.lesson-media audio,.lesson-media video { width:min(760px,100%); }
.lesson-side { align-self:start; padding:24px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); }
.lesson-side h2 { margin:0 0 10px; font-size:20px; letter-spacing:-.04em; }
.lesson-side p { color:var(--muted); font-size:13px; line-height:1.6; }
.lesson-side .button { width:100%; margin-top:14px; }
.lesson-warning { display:flex; gap:10px; margin:0 0 20px; padding:12px; border:1px solid #f1d6a4; border-radius:12px; color:#77510c; background:#fff8e8; font-size:11px; line-height:1.45; }
.lesson-warning .material-symbols-outlined { color:#c27d05; font-size:19px; }
.lesson-warning strong { display:block; margin-bottom:2px; }

/* Authentication */
.auth-page .page { display:grid; place-items:center; padding-block:54px 72px; }
.auth-layout { width:100%; display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 28px 75px rgba(18,38,76,.11); }
.auth-aside { position:relative; min-height:630px; padding:48px; overflow:hidden; color:#fff; background:linear-gradient(145deg,#0b214a,#16458d); }
.auth-aside::after { position:absolute; right:-90px; bottom:-110px; width:360px; height:360px; border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 0 0 55px rgba(255,255,255,.04),0 0 0 110px rgba(255,255,255,.025); content:""; }
.auth-aside .app-mark { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:28px; width:auto; min-width:38px; background:none; border:none; box-shadow:none; }
.auth-aside .page-kicker { margin-top:30px; color:#8db9ff; }
.auth-aside h2 { max-width:400px; margin:18px 0; font-size:46px; line-height:1.03; letter-spacing:-.06em; }
.auth-aside p:not(.page-kicker) { max-width:390px; color:#cfdbed; line-height:1.65; }
.auth-aside .button { position:relative; z-index:2; margin-top:24px; }
.auth-panel { padding:48px 52px; }
.auth-panel-inner { max-width:480px; margin:auto; }
.auth-title { margin:0; font-size:34px; line-height:1.1; letter-spacing:-.052em; }
.form { display:grid; gap:17px; margin-top:28px; }
.field { display:grid; gap:8px; color:#263755; font-size:13px; font-weight:700; }
.field input,.field select { width:100%; min-height:48px; padding:0 13px; border:1px solid #bbc8db; border-radius:10px; color:var(--ink); background:#fff; outline:0; }
.field input:hover,.field select:hover { border-color:#9eafc8; }
.field input:focus,.field select:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(23,105,238,.12); }
.field small { color:var(--muted); font-size:11px; font-weight:500; line-height:1.4; }
.password-wrap { position:relative; display:block; }
.password-wrap input { padding-right:100px; }
.password-toggle { position:absolute; top:50%; right:7px; min-height:34px; padding:0 10px; transform:translateY(-50%); border:0; border-radius:7px; color:var(--blue-dark); background:var(--blue-soft); font-size:11px; font-weight:800; }
.form-message { min-height:20px; margin:0; color:var(--danger); font-size:12px; font-weight:700; }
.form-message.success { color:var(--success); }
.consent { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.auth-choice-summary { display:none; margin:20px 0 0; padding:13px 15px; border:1px solid #d8e5f7; border-radius:11px; color:#53627a; background:#f3f7ff; font-size:12px; line-height:1.5; }
.auth-choice-summary.visible { display:block; }
.google-auth-button { min-height:50px; display:flex; align-items:center; justify-content:center; gap:12px; margin-top:24px; padding:0 18px; border:1px solid #c9d3e1; border-radius:10px; color:#1b2a43; background:#fff; font-size:13px; font-weight:800; transition:.18s ease; }
.google-auth-button:hover { border-color:#9aabc1; background:#f8fafc; box-shadow:0 8px 22px rgba(18,38,76,.08); }
.google-auth-button img { width:19px; height:19px; display:block; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:21px 0 0; color:#8290a5; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.auth-divider::before,.auth-divider::after { height:1px; flex:1; background:#e1e6ee; content:""; }
.auth-divider+.form { margin-top:21px; }

/* Account */
.account-page .page { max-width:1080px; }
.account-hero { display:flex; align-items:center; gap:16px; margin-bottom:22px; padding:22px 24px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); }
.account-hero .app-mark { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:28px; width:auto; min-width:38px; background:none; border:none; box-shadow:none; }
.account-identity { min-width:0; }
.account-name { margin:0 !important; color:var(--ink) !important; font-size:20px !important; font-weight:800; }
.account-username { margin:3px 0 0; color:var(--muted); font-size:12px; }
.account-hero .button { margin-left:auto; }
.account-nav { display:flex; gap:8px; margin-bottom:28px; padding:6px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:var(--shadow-sm); }
.account-nav button { flex:1; min-height:42px; padding:0 14px; border:0; border-radius:9px; color:#53617a; background:transparent; font-size:12px; font-weight:800; }
.account-nav button[aria-selected="true"] { color:var(--blue); background:var(--blue-soft); }
.dashboard-panel { display:none; }
.dashboard-panel.active { display:block; }
.dashboard-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; }
.dashboard-head .page-intro { margin-top:10px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.stat { padding:20px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow-sm); }
.stat span { display:block; color:var(--muted); font-size:11px; font-weight:700; }
.stat strong { display:block; margin-top:9px; font-size:30px; letter-spacing:-.06em; }
.dashboard-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:16px; }
.next-step-card { padding:28px; border-radius:18px; color:#fff; background:linear-gradient(130deg,#0e2b5f,#1955a9); box-shadow:var(--shadow); }
.next-step-card .page-kicker { color:#8bb8ff; }
.next-step-card h2 { margin:0; font-size:28px; letter-spacing:-.045em; }
.next-step-card p { color:#cfdbed; }
.next-step-card .button { margin-top:12px; }
.history { display:grid; gap:8px; margin:16px 0; }
.history-item { display:flex; justify-content:space-between; gap:15px; padding:14px 0; border-bottom:1px solid var(--line); }
.history-item:last-child { border:0; }
.history-item p { margin:3px 0 0; color:var(--muted); font-size:11px; }
.result-score { color:var(--blue); font-weight:800; }
.settings-card { max-width:680px; }

/* Performance dashboard */
.account-page .page { max-width:1180px; padding-top:34px; }
.account-page .account-hero { margin-bottom:14px; padding:16px 20px; }
.account-page .account-nav { margin-bottom:26px; }
.dashboard-head-compact { align-items:center; margin-bottom:22px; }
.dashboard-head-compact .page-kicker { margin-bottom:9px; }
.account-page .dashboard-head-compact .page-title { max-width:none; font-size:clamp(34px,4vw,48px); line-height:1; letter-spacing:-.055em; }
.dashboard-head-compact .page-intro { max-width:620px; margin-top:10px; font-size:14px; line-height:1.5; }
.dashboard-head-actions { display:flex; flex:0 0 auto; gap:9px; }
.dashboard-stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.dashboard-stat-grid .stat { position:relative; min-height:124px; overflow:hidden; padding:18px; }
.dashboard-stat-grid .stat::after { position:absolute; top:-30px; right:-30px; width:88px; height:88px; border-radius:50%; background:radial-gradient(circle,rgba(23,105,238,.10),transparent 70%); content:""; }
.dashboard-stat-grid .stat strong { font-size:28px; }
.dashboard-stat-grid .stat small { display:block; margin-top:7px; color:#8a98ad; font-size:9px; line-height:1.4; }
.dashboard-priority-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr); gap:14px; margin-bottom:14px; }
.compact-next { min-height:232px; display:flex; flex-direction:column; justify-content:space-between; padding:26px; background:radial-gradient(circle at 92% 8%,rgba(72,142,255,.32),transparent 33%),linear-gradient(135deg,#0b2c64,#154fa4); }
.compact-next h2 { max-width:520px; font-size:27px; }
.compact-next p:not(.page-kicker) { max-width:610px; margin:10px 0 20px; font-size:13px; line-height:1.55; }
.compact-next .button { align-self:flex-start; margin:0; color:#0b3c82; background:#fff; box-shadow:0 12px 26px rgba(0,0,0,.14); }
.weekly-card { min-height:232px; padding:24px; }
.card-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.card-title-row .page-kicker { margin-bottom:6px; }
.card-title-row h2 { font-size:21px; }
.card-title-row>strong { color:var(--blue); font-size:15px; }
.weekly-card progress { width:100%; height:8px; margin:22px 0 16px; accent-color:var(--blue); }
.activity-bars { height:66px; display:grid; grid-template-columns:repeat(7,1fr); align-items:end; gap:6px; padding-top:4px; }
.activity-bars>span { height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; }
.activity-bars i { width:100%; min-height:5px; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#3b85f5,#1769ee); box-shadow:0 5px 10px rgba(23,105,238,.12); }
.activity-bars small { color:#8a98ad; font-size:8px; font-style:normal; }
.weekly-card>.resource-meta { margin:11px 0 0; font-size:9px; }
.results-card { margin-bottom:14px; padding:24px; }
.results-card>.card-title-row { padding-bottom:13px; border-bottom:1px solid var(--line); }
.results-card .text-link { font-size:11px; }
.results-history { margin:0; }
.result-history-row { display:grid; grid-template-columns:36px minmax(0,1fr) 86px 58px; align-items:center; gap:12px; min-height:66px; padding:11px 0; }
.history-skill { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; color:#1769ee; background:#edf4ff; font-size:11px; font-weight:900; }
.history-copy { min-width:0; }
.history-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.history-copy p { margin-top:4px; }
.history-score { text-align:right; }
.history-score strong,.history-score span { display:block; }
.history-score strong { color:var(--ink); font-size:15px; }
.history-score span { margin-top:3px; color:var(--blue); font-size:9px; font-weight:800; }
.history-review { justify-self:end; color:var(--blue); font-size:10px; font-weight:800; }
.results-empty { min-height:96px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:16px; padding:18px 0 2px; }
.results-empty>.material-symbols-outlined { display:grid; width:42px; height:42px; place-items:center; border-radius:12px; color:#1769ee; background:#edf4ff; }
.results-empty strong { font-size:13px; }
.results-empty p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.dashboard-library { padding:24px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,#fff,#f7faff); box-shadow:var(--shadow-sm); }
.dashboard-library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:17px; }
.dashboard-library-grid a { min-height:112px; display:grid; grid-template-columns:36px minmax(0,1fr); align-content:center; gap:3px 11px; padding:16px; border:1px solid var(--line); border-radius:13px; background:#fff; transition:.18s ease; }
.dashboard-library-grid a:hover { border-color:#a9c5ef; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.dashboard-library-grid .material-symbols-outlined { grid-row:1 / 3; display:grid; width:36px; height:36px; place-items:center; border-radius:10px; color:var(--blue); background:var(--blue-soft); }
.dashboard-library-grid strong { align-self:end; font-size:12px; }
.dashboard-library-grid small { align-self:start; color:var(--muted); font-size:9px; line-height:1.4; }
.resource.is-completed { border-color:#9dd7bd; background:linear-gradient(145deg,#fff,#f5fcf8); box-shadow:0 10px 28px rgba(47,167,111,.08); }
.resource-completed { color:#087c59 !important; background:#e6f7ef !important; }

.app-footer { display:flex; min-height:92px; align-items:center; gap:30px; padding:28px max(24px,calc((100vw - 1220px)/2)); border-top:1px solid var(--line); color:var(--muted); background:#fff; font-size:12px; }
.rich-footer p { margin-left:auto; }
.rich-footer nav { display:flex; gap:20px; }
.rich-footer nav a { color:#48566d; font-weight:700; }

@media (max-width:1180px) {
  .member-layout { padding-left:0; }
  .member-layout .page { width:min(100% - 40px,1180px); }
  .member-sidebar { width:min(290px,86vw); transform:translateX(-105%); transition:transform .22s ease; }
  .member-sidebar-open .member-sidebar { transform:translateX(0); }
  .member-sidebar-overlay { position:fixed; z-index:35; inset:0; border:0; background:rgba(2,8,18,.64); opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .member-sidebar-open .member-sidebar-overlay { display:block; opacity:1; pointer-events:auto; }
  .member-layout>.app-header { padding-inline:18px; }
  .member-layout>.app-header .member-sidebar-toggle { display:inline-flex; align-items:center; }
  .member-layout>.app-header .app-actions { margin-left:auto; }
}

@media (max-width:1050px) {
  .app-nav { gap:18px; }
  .landing-hero { gap:26px; }
  .landing-copy h1 { font-size:58px; }
  .learning-preview { gap:46px; padding:54px; }
  .course-grid { grid-template-columns:repeat(2,1fr); }
  .course-card.ielts-card { grid-column:1 / -1; min-height:280px; }
  .materials-toolbar { grid-template-columns:1fr 1fr; }
  .search-field { grid-column:1 / -1; }
  .dashboard-stat-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-priority-grid { grid-template-columns:1fr; }
}

/* The split auth layout needs more room than a typical tablet viewport.  Keep
   the form readable instead of allowing the illustration panel to crop it. */
@media (max-width:980px) {
  .auth-page .page { width:min(100% - 32px,760px); }
  .auth-layout { grid-template-columns:1fr; }
  .auth-aside { min-height:auto; padding:32px 36px; }
  .auth-aside h2 { max-width:520px; font-size:36px; }
  .auth-aside p:not(.page-kicker),.auth-aside .button { display:none; }
  .auth-panel { padding:40px 36px; }
}

@media (max-width:830px) {
  .member-layout { padding-left:0; }
  .member-layout .page { width:min(100% - 32px,1180px); }
  .member-sidebar { width:min(290px,86vw); transform:translateX(-105%); transition:transform .22s ease; }
  .member-sidebar-open .member-sidebar { transform:translateX(0); }
  .member-sidebar-overlay { position:fixed; z-index:35; inset:0; border:0; background:rgba(2,8,18,.64); opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .member-sidebar-open .member-sidebar-overlay { display:block; opacity:1; pointer-events:auto; }
  .member-layout>.app-header { padding-inline:16px; }
  .member-layout>.app-header .member-sidebar-toggle { display:inline-flex; align-items:center; }
  .member-layout>.app-header .app-actions { margin-left:auto; }
  .member-layout>.app-header .app-actions .plain-link { display:none; }
  .shell,.page { width:min(100% - 32px,1220px); }
  .app-header { flex-wrap:wrap; gap:12px; min-height:70px; padding:13px 18px; }
  .mobile-nav-toggle { display:block; margin-left:auto; min-height:38px; padding:0 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; font-size:12px; font-weight:800; }
  .app-nav { display:none; order:4; width:100%; margin:0; padding-top:12px; border-top:1px solid var(--line); }
  .app-nav.open { display:grid; grid-template-columns:repeat(2,1fr); gap:2px 10px; }
  .app-nav a { padding:11px 8px; border-radius:8px; }
  .app-nav a::after { display:none; }
  .app-nav a[aria-current="page"] { color:var(--blue); background:var(--blue-soft); }
  .app-actions .plain-link { display:none; }
  .landing-hero { grid-template-columns:1fr; padding:54px 0 26px; }
  .landing-art { min-height:360px; }
  .landing-art img { inset:0; width:100%; }
  .learning-rail { grid-template-columns:1fr 34px 1fr 34px 1fr auto; }
  .path-grid { grid-template-columns:1fr; }
  .path-card { min-height:230px; }
  .path-card p { min-height:auto; }
  .learning-preview { grid-template-columns:1fr; }
  .preview-stack { min-height:360px; }
  .final-cta { align-items:flex-start; flex-direction:column; }
  .page { min-height:auto; padding-top:48px; }
  .course-grid { grid-template-columns:1fr; }
  .course-card.ielts-card { grid-column:auto; }
  .practice-grid,.resource-list { grid-template-columns:1fr; }
  .auth-layout { grid-template-columns:1fr; }
  .auth-aside { min-height:auto; padding:34px; }
  .auth-aside h2 { max-width:520px; font-size:36px; }
  .auth-aside p:not(.page-kicker),.auth-aside .button { display:none; }
  .auth-panel { padding:36px 30px; }
  .dashboard-grid { grid-template-columns:1fr; }
  .dashboard-head-compact { align-items:flex-start; flex-direction:column; }
  .dashboard-head-actions { width:100%; }
  .dashboard-head-actions .button { flex:1; }
  .dashboard-library-grid { grid-template-columns:1fr; }
  .lesson-layout { grid-template-columns:1fr; }
  .lesson-side { order:-1; }
  .rich-footer { flex-wrap:wrap; }
  .rich-footer p { width:100%; margin:0; order:3; }
}

@media (max-width:560px) {
  .app-header { gap:8px; }
  .app-brand { font-size:12px; }
  .app-mark { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:28px; width:auto; min-width:38px; background:none; border:none; box-shadow:none; }
  .mobile-nav-toggle { width:40px; margin-left:auto; padding:0; color:var(--ink); font-size:0; }
  .mobile-nav-toggle::before { content:"☰"; font-size:18px; line-height:1; }
  .materials-toolbar .filter-row { flex-wrap:wrap; overflow:visible; }
  .app-actions .button { min-height:40px; padding-inline:13px; }
  .landing-hero { min-height:auto; margin-top:12px; padding:32px 22px 26px; border-radius:20px; }
  .landing-copy h1 { font-size:41px; }
  .hero-lead { margin-block:20px 22px; font-size:15px; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .hero-actions .button { width:100%; }
  .hero-points { display:grid; gap:9px; }
  .hero-points li+li::before { display:none; }
  .landing-art { min-height:255px; margin-top:12px; }
  .art-caption { right:0; bottom:18px; padding:11px 13px; }
  .learning-rail { grid-template-columns:1fr auto; gap:14px; padding:20px 4px; }
  .learning-rail>i { display:none; }
  .learning-rail>a { grid-column:2; grid-row:1 / 4; }
  .landing-section { padding:72px 0 58px; }
  .section-heading h2,.preview-copy h2,.final-cta h2 { font-size:35px; }
  .path-grid { margin-top:28px; }
  .learning-preview { gap:34px; padding:34px 22px; border-radius:20px; }
  .product-proof { transform:none; }
  .final-cta { margin-block:58px; padding:34px 24px; border-radius:20px; }
  .final-cta .button { width:100%; }
  .page { width:min(100% - 28px,1180px); padding-block:40px 64px; }
  .page-title { font-size:39px; }
  .account-page .dashboard-head-compact .page-title { font-size:34px; }
  .dashboard-head-actions { flex-direction:column; }
  .dashboard-stat-grid { grid-template-columns:1fr 1fr; gap:9px; }
  .dashboard-stat-grid .stat { min-height:112px; padding:15px; }
  .dashboard-stat-grid .stat strong { font-size:24px; }
  .result-history-row { grid-template-columns:34px minmax(0,1fr) 64px; }
  .history-review { display:none; }
  .results-empty { grid-template-columns:42px 1fr; }
  .results-empty .button { grid-column:1 / -1; width:100%; }
  .page-intro { font-size:15px; }
  .course-card,.skill-card { min-height:0; padding:23px; }
  .skill-card .skill-number { margin-bottom:30px; }
  .course-next { align-items:flex-start; flex-direction:column; }
  .practice-toolbar,.materials-toolbar { display:grid; grid-template-columns:1fr; align-items:stretch; padding:15px; }
  .search-field { grid-column:auto; }
  .filter-row { flex-wrap:nowrap; margin-inline:-4px; padding:4px; overflow-x:auto; scrollbar-width:none; }
  .filter { flex:0 0 auto; }
  .auth-page .page { width:100%; padding:0; }
  .auth-layout { border-width:0; border-radius:0; box-shadow:none; }
  .auth-aside { display:none; }
  .auth-panel { padding:34px 22px 54px; }
  .auth-title { font-size:30px; }
  .account-hero { align-items:flex-start; flex-wrap:wrap; }
  .account-hero .button { width:100%; margin:8px 0 0; }
  .account-nav { position:sticky; z-index:6; top:70px; }
  .lesson-page .page { width:min(100% - 24px,1320px); }
  .lesson-header { align-items:flex-start; flex-direction:column; }
  .lesson-viewer { min-height:620px; height:620px; }
  .lesson-viewer iframe,.lesson-media { min-height:560px; height:560px; }
  .dashboard-head { align-items:flex-start; flex-direction:column; }
  .stat-grid { grid-template-columns:1fr; }
  .stat { display:flex; justify-content:space-between; align-items:center; }
  .stat strong { margin:0; font-size:24px; }
  .rich-footer { align-items:flex-start; flex-direction:column; gap:15px; }
  .rich-footer nav { flex-wrap:wrap; }
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }

/* Premium dual-theme landing */
.theme-toggle { flex:0 0 38px; width:38px; height:38px; display:inline-grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:50%; color:inherit; background:transparent; cursor:pointer; }
.theme-toggle .material-symbols-outlined { font-size:19px; }
.theme-toggle:hover { color:#79aaff; border-color:#6684af; background:rgba(80,130,210,.08); }

html[data-theme="dark"] {
  color-scheme:dark;
  --ink:#f4f7ff;
  --paper:#101824;
  --canvas:#070c14;
  --line:rgba(179,198,226,.16);
  --line-strong:rgba(179,198,226,.27);
  --muted:#9daabd;
}
html[data-theme="light"] { color-scheme:light; }
html[data-theme="light"] body:not(.landing-page) .resource-completion { color:#155d43; border-bottom-color:#a8d8c2; background:linear-gradient(90deg,#d9f4e7,#edf9f3); }
html[data-theme="light"] body:not(.landing-page) .resource-completion>.material-symbols-outlined { color:#13875b; }
html[data-theme="light"] body:not(.landing-page) .resource-completion strong { color:#0d5139; }
html[data-theme="light"] body:not(.landing-page) .resource-completion small { color:#4d7968; }
html[data-theme="light"] body:not(.landing-page) .resource.is-completed .button.primary { color:#fff; border-color:#15835b; background:#15835b; box-shadow:0 10px 22px rgba(21,131,91,.18); }
html[data-theme="light"] body:not(.landing-page) .resource.is-completed .button.primary:hover { color:#fff; border-color:#0f6d4a; background:#0f6d4a; }

.landing-page { min-height:100vh; color:#f4f7ff; background-color:#101d32; background-image:url("/assets/english-hero-midnight.png"); background-position:center top; background-size:100% auto; background-repeat:no-repeat; background-blend-mode:screen; }
.landing-page .app-header { top:14px; width:min(1400px,calc(100% - 160px)); min-height:76px; margin:14px auto 0; padding:0 30px; border:1px solid rgba(181,199,226,.18); border-radius:16px; color:#f4f7ff; background:rgba(8,14,23,.86); box-shadow:0 18px 48px rgba(0,0,0,.16); backdrop-filter:blur(18px); }
.landing-page .app-brand,.landing-page .plain-link { color:#f4f7ff; }
.landing-page .app-nav a { color:#aeb9ca; }
.landing-page .app-nav a:hover { color:#fff; }
.landing-page .app-actions { margin-left:0; }
.landing-page .theme-toggle { color:#d8e1ef; border-color:rgba(181,199,226,.18); }

.landing-page .landing-hero { width:min(1340px,calc(100% - 80px)); min-height:920px; display:flex; align-items:center; flex-direction:column; gap:0; overflow:visible; padding:64px 0 34px; }
.landing-page .landing-hero::before { display:none; }
.landing-page .landing-copy { max-width:980px; margin-inline:auto; text-align:center; }
.landing-page .hero-eyebrow { display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:26px; color:#ff725d; }
.landing-page .hero-eyebrow span { width:138px; height:1px; margin:0; border-radius:0; background:#ff725d; }
.landing-page .landing-copy h1 { max-width:1040px; color:#f7f8fb; font-size:clamp(62px,6.1vw,88px); line-height:.98; letter-spacing:-.067em; }
.landing-page .landing-copy h1 em { color:#1769ee; }
.landing-page .hero-lead { max-width:760px; margin:23px auto 31px; color:#aeb8c7; font-size:18px; line-height:1.55; }
.landing-page .hero-actions { justify-content:center; }
.landing-page .hero-actions .button { min-height:64px; padding-inline:32px; font-size:15px; }
.landing-page .button.secondary { color:#f4f7ff; border-color:rgba(181,199,226,.22); background:rgba(255,255,255,.025); box-shadow:none; }
.landing-page .button.secondary:hover { border-color:#5375a4; background:rgba(255,255,255,.055); }
.landing-page .hero-points { justify-content:center; margin-top:34px; color:#aeb9ca; }
.landing-page .hero-points li+li::before { background:rgba(181,199,226,.28); }

.hero-workspace { --workspace-x:50%; --workspace-y:45%; position:relative; isolation:isolate; width:min(1340px,100%); min-height:410px; display:grid; grid-template-columns:220px minmax(0,1fr); margin-top:26px; overflow:hidden; border:1px solid rgba(93,126,175,.42); border-top-color:#246fdc; border-radius:19px; color:#edf3ff; background:rgba(7,13,22,.9); box-shadow:0 -1px 0 #1769ee,0 34px 80px rgba(0,0,0,.35); opacity:0; clip-path:inset(9% 3% 0 3% round 19px); transition:box-shadow .35s ease; }
.hero-workspace.is-live { animation:workspace-reveal 1s cubic-bezier(.16,1,.3,1) forwards; }
.hero-workspace::before { position:absolute; z-index:2; inset:0; pointer-events:none; background:radial-gradient(circle 420px at var(--workspace-x) var(--workspace-y),rgba(40,122,255,.17),rgba(40,122,255,.055) 38%,transparent 72%); opacity:.68; transition:opacity .25s ease; content:""; }
.hero-workspace::after { position:absolute; z-index:3; top:0; bottom:0; left:0; width:34%; pointer-events:none; background:linear-gradient(105deg,transparent 10%,rgba(99,157,255,.025) 35%,rgba(118,174,255,.19) 50%,rgba(99,157,255,.025) 65%,transparent 90%); filter:blur(.5px); transform:translateX(-145%) skewX(-13deg); animation:workspace-scan 6.8s 1.2s cubic-bezier(.4,0,.2,1) infinite; content:""; }
.hero-workspace.is-interacting { box-shadow:0 -1px 0 #2a7df5,0 38px 100px rgba(0,0,0,.42),0 0 54px rgba(23,105,238,.08); }
.hero-workspace.is-interacting::before { opacity:1; }
.workspace-side,.workspace-main { position:relative; z-index:1; }
.workspace-side { padding:22px 15px; border-right:1px solid rgba(181,199,226,.12); background:rgba(255,255,255,.02); }
.workspace-brand { display:flex; align-items:center; gap:9px; font-size:9px; }
.workspace-brand .app-mark { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:28px; width:auto; min-width:38px; background:none; border:none; box-shadow:none; }
.workspace-side nav { display:grid; gap:7px; margin:34px -15px 0; }
.workspace-side nav span,.workspace-side nav strong { display:block; padding:10px 20px; color:#8f9caf; font-size:10px; font-weight:600; }
.workspace-side nav strong { color:#fff; border-left:3px solid #1769ee; background:rgba(23,105,238,.16); }
.workspace-main { min-width:0; padding:25px 27px 31px; }
.workspace-head { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; }
.workspace-head .page-kicker { margin:0 0 7px; color:#6fa3ff; font-size:8px; }
.workspace-head h2 { margin:0; font-size:24px; letter-spacing:-.045em; }
.workspace-progress { width:190px; display:grid; grid-template-columns:1fr auto; gap:8px 12px; color:#9ca9bb; font-size:9px; }
.workspace-progress strong { color:#edf3ff; font-size:10px; }
.workspace-progress progress { grid-column:1 / -1; width:100%; height:4px; overflow:hidden; border:0; border-radius:99px; background:#172335; accent-color:#1769ee; }
.workspace-progress progress::-webkit-progress-bar { background:#172335; }
.workspace-progress progress::-webkit-progress-value { background:#1769ee; transform-origin:left; animation:workspace-progress-fill 1.35s .55s cubic-bezier(.16,1,.3,1) both; }
.workspace-filters { display:grid; grid-template-columns:.8fr 1.2fr; gap:18px; margin-top:20px; padding:13px 14px; border:1px solid rgba(181,199,226,.12); border-radius:11px; background:rgba(255,255,255,.018); }
.workspace-filters>div { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.workspace-filters small { width:100%; color:#75849a; font-size:7px; font-weight:800; letter-spacing:.08em; }
.workspace-filters span { padding:6px 9px; border:1px solid rgba(181,199,226,.13); border-radius:6px; color:#aeb9ca; font-size:8px; font-weight:700; transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease; }
.workspace-filters span:hover { color:#fff; border-color:rgba(91,153,255,.58); transform:translateY(-1px); }
.workspace-filters span.active { color:#fff; border-color:#1769ee; background:#1258c8; }
.workspace-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.workspace-grid article { min-width:0; min-height:185px; padding:18px; border:1px solid rgba(181,199,226,.13); border-radius:12px; background:rgba(255,255,255,.018); transition:border-color .3s ease,background .3s ease,transform .3s ease; }
.workspace-grid article:hover { border-color:rgba(181,199,226,.13); background:rgba(23,105,238,.025); transform:none; }
.workspace-code { color:#4e90ff; font-size:8px; font-weight:800; }
.workspace-grid h3 { margin:14px 0 7px; font-size:20px; letter-spacing:-.04em; }
.workspace-grid p { margin:0; color:#8f9caf; font-size:9px; }
.audio-control { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-top:25px; padding:10px; border:1px solid rgba(181,199,226,.12); border-radius:9px; }
.audio-control button { min-height:30px; padding:0 10px; border:0; border-radius:7px; color:#fff; background:#1769ee; font-size:8px; font-weight:800; }
.audio-control input { width:100%; accent-color:#1769ee; }
.audio-control time { color:#aeb9ca; font-size:8px; }
.audio-control { transition:border-color .25s ease,box-shadow .25s ease; }
.audio-control.is-playing { border-color:rgba(45,126,255,.54); box-shadow:0 0 0 1px rgba(23,105,238,.08),0 0 28px rgba(23,105,238,.11); }
.audio-control.is-playing button { animation:audio-button-pulse 1.6s ease-in-out infinite; }
.audio-control.is-playing input { filter:drop-shadow(0 0 5px rgba(23,105,238,.55)); }

@keyframes workspace-reveal {
  0% { opacity:0; clip-path:inset(9% 3% 0 3% round 19px); }
  100% { opacity:1; clip-path:inset(0 0 0 0 round 19px); }
}
@keyframes workspace-scan {
  0%,18% { transform:translateX(-145%) skewX(-13deg); opacity:0; }
  30% { opacity:.9; }
  54% { transform:translateX(430%) skewX(-13deg); opacity:0; }
  100% { transform:translateX(430%) skewX(-13deg); opacity:0; }
}
@keyframes workspace-progress-fill {
  from { transform:scaleX(0); filter:brightness(1.65); }
  to { transform:scaleX(1); filter:brightness(1); }
}
@keyframes audio-button-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(23,105,238,.34); }
  50% { box-shadow:0 0 0 6px rgba(23,105,238,0); }
}
.reading-sample { display:grid; gap:7px; margin-top:23px; padding:12px; border:1px solid rgba(181,199,226,.11); border-radius:9px; }
.reading-sample strong { font-size:10px; }
.reading-sample small { color:#8f9caf; font-size:8px; line-height:1.45; }

.landing-page .learning-rail { color:#e8eef8; border-color:rgba(181,199,226,.14); background:rgba(8,14,23,.72); }
.landing-page .learning-rail p small { color:#8f9caf; }
.landing-page .learning-rail>a { color:#fff; border-color:rgba(181,199,226,.24); background:#101824; }
.landing-page .landing-section { color:#f4f7ff; }
.landing-page .section-heading>p:last-child { color:#9daabd; }
.landing-page .path-card { color:#f4f7ff; border-color:rgba(181,199,226,.15); background:#101824; box-shadow:0 18px 40px rgba(0,0,0,.15); }
.landing-page .path-card.current { background:#101b2a; }
.landing-page .path-card.future { background:#171820; }
.landing-page .path-card p { color:#9daabd; }
.landing-page .learning-preview { color:#f4f7ff; border-color:rgba(181,199,226,.16); background:#0e1724; }
.landing-page .preview-copy>p { color:#9daabd; }
.landing-page .product-proof { border-color:rgba(181,199,226,.2); background:#111a28; }
.landing-page .product-browser-bar { border-color:rgba(181,199,226,.14); background:#0b111b; }
.landing-page .product-proof figcaption { color:#9daabd; }
.landing-page .product-proof figcaption strong { color:#f4f7ff; }
.landing-page .app-footer { color:#9daabd; border-color:rgba(181,199,226,.14); background:#080e17; }
.landing-page .rich-footer nav a { color:#c3ccda; }

html[data-theme="light"] .landing-page { color:#0b1f44; background:#e9eef6 url("/assets/english-hero-light.png") center top / 100% auto no-repeat; }
html[data-theme="light"] .landing-page .app-header { color:#0b1f44; border-color:rgba(89,111,145,.2); background:rgba(248,250,253,.84); box-shadow:0 18px 45px rgba(23,43,77,.08); }
html[data-theme="light"] .landing-page .app-brand,
html[data-theme="light"] .landing-page .plain-link { color:#0b1f44; }
html[data-theme="light"] .landing-page .app-nav a { color:#53627a; }
html[data-theme="light"] .landing-page .app-nav a:hover { color:#0b1f44; }
html[data-theme="light"] .landing-page .theme-toggle { color:#0b1f44; border-color:#c6d0df; }
html[data-theme="light"] .landing-page .landing-copy h1 { color:#0b1f44; }
html[data-theme="light"] .landing-page .hero-lead { color:#536783; }
html[data-theme="light"] .landing-page .button.secondary { color:#0b1f44; border-color:#bcc9da; background:rgba(255,255,255,.54); }
html[data-theme="light"] .landing-page .hero-points { color:#425675; }
html[data-theme="light"] .hero-workspace { color:#0b1f44; border-color:#b7c8df; border-top-color:#1769ee; background:rgba(249,251,254,.92); box-shadow:0 -1px 0 #1769ee,0 34px 75px rgba(25,54,96,.16); }
html[data-theme="light"] .hero-workspace::before { background:radial-gradient(circle 420px at var(--workspace-x) var(--workspace-y),rgba(23,105,238,.1),rgba(23,105,238,.025) 42%,transparent 72%); }
html[data-theme="light"] .hero-workspace::after { background:linear-gradient(105deg,transparent 10%,rgba(75,138,245,.015) 35%,rgba(75,138,245,.11) 50%,rgba(75,138,245,.015) 65%,transparent 90%); }
html[data-theme="light"] .workspace-side { border-color:#d8e0eb; background:rgba(230,237,247,.72); }
html[data-theme="light"] .workspace-side nav span { color:#667792; }
html[data-theme="light"] .workspace-side nav strong { color:#0b1f44; background:#e6efff; }
html[data-theme="light"] .workspace-progress { color:#667792; }
html[data-theme="light"] .workspace-progress strong { color:#0b1f44; }
html[data-theme="light"] .workspace-filters,
html[data-theme="light"] .workspace-grid article,
html[data-theme="light"] .audio-control,
html[data-theme="light"] .reading-sample { border-color:#d8e0eb; background:rgba(255,255,255,.65); }
html[data-theme="light"] .workspace-filters span { color:#53627a; border-color:#ccd6e4; }
html[data-theme="light"] .workspace-grid p,
html[data-theme="light"] .reading-sample small { color:#667792; }
html[data-theme="light"] .landing-page .learning-rail { color:#0b1f44; border-color:#cdd7e5; background:rgba(247,249,252,.7); }
html[data-theme="light"] .landing-page .learning-rail p small { color:#667792; }
html[data-theme="light"] .landing-page .learning-rail>a { color:#0b1f44; border-color:#c5d0df; background:#fff; }
html[data-theme="light"] .landing-page .landing-section { color:#0b1f44; }
html[data-theme="light"] .landing-page .section-heading>p:last-child { color:#64748f; }
html[data-theme="light"] .landing-page .path-card,
html[data-theme="light"] .landing-page .path-card.current,
html[data-theme="light"] .landing-page .path-card.future { color:#0b1f44; border-color:#d5deea; background:rgba(255,255,255,.82); box-shadow:0 18px 40px rgba(28,51,86,.07); }
html[data-theme="light"] .landing-page .path-card p { color:#64748f; }
html[data-theme="light"] .landing-page .learning-preview { color:#0b1f44; border-color:#ced9e8; background:rgba(241,246,253,.84); }
html[data-theme="light"] .landing-page .preview-copy>p { color:#64748f; }
html[data-theme="light"] .landing-page .app-footer { color:#64748f; border-color:#d7dfeb; background:rgba(250,251,253,.9); }
html[data-theme="light"] .landing-page .rich-footer nav a { color:#45546e; }

html[data-theme="dark"] body.app-body:not(.landing-page) { color:#f4f7ff; background:#070c14 url("/assets/english-hero-midnight.png") center top / 100% auto no-repeat fixed; }
html[data-theme="dark"] body:not(.landing-page) .app-header { color:#f4f7ff; border-color:rgba(181,199,226,.16); background:rgba(8,14,23,.9); }
html[data-theme="dark"] body:not(.landing-page) .mobile-nav-toggle { color:#edf4ff; border-color:rgba(181,199,226,.2); background:#111d2b; }
html[data-theme="dark"] body:not(.landing-page) .app-brand,
html[data-theme="dark"] body:not(.landing-page) .plain-link { color:#f4f7ff; }
html[data-theme="dark"] body:not(.landing-page) .app-nav a { color:#aeb9ca; }
html[data-theme="dark"] body:not(.landing-page) .app-nav a:hover,
html[data-theme="dark"] body:not(.landing-page) .app-nav a[aria-current="page"] { color:#fff; }
html[data-theme="dark"] body:not(.landing-page) .button.secondary { color:#f4f7ff; border-color:rgba(181,199,226,.22); background:#111a28; }
html[data-theme="dark"] body:not(.landing-page) .card,
html[data-theme="dark"] body:not(.landing-page) .course-card,
html[data-theme="dark"] body:not(.landing-page) .course-next,
html[data-theme="dark"] body:not(.landing-page) .practice-toolbar,
html[data-theme="dark"] body:not(.landing-page) .materials-toolbar,
html[data-theme="dark"] body:not(.landing-page) .library-tabs,
html[data-theme="dark"] body:not(.landing-page) .skill-card,
html[data-theme="dark"] body:not(.landing-page) .resource,
html[data-theme="dark"] body:not(.landing-page) .empty,
html[data-theme="dark"] body:not(.landing-page) .auth-layout,
html[data-theme="dark"] body:not(.landing-page) .auth-panel,
html[data-theme="dark"] body:not(.landing-page) .account-hero,
html[data-theme="dark"] body:not(.landing-page) .account-nav,
html[data-theme="dark"] body:not(.landing-page) .stat,
html[data-theme="dark"] body:not(.landing-page) .settings-card,
html[data-theme="dark"] body:not(.landing-page) .lesson-viewer,
html[data-theme="dark"] body:not(.landing-page) .lesson-side { color:#f4f7ff; border-color:rgba(181,199,226,.16); background:#101824; }
html[data-theme="dark"] body:not(.landing-page) .lesson-tabs { border-bottom-color:rgba(181,199,226,.14); background:#0d1520; }
html[data-theme="dark"] body:not(.landing-page) .lesson-tabs button { color:#bac6d9; border-color:#2a394d; background:#152131; }
html[data-theme="dark"] body:not(.landing-page) .lesson-tabs button[aria-selected="true"] { color:#fff; border-color:var(--blue); background:var(--blue); }
html[data-theme="dark"] body:not(.landing-page) .lesson-warning { color:#f7d99a; border-color:rgba(236,180,70,.3); background:rgba(121,78,11,.22); }
html[data-theme="dark"] body:not(.landing-page) .course-card::after { opacity:.12; }
html[data-theme="dark"] body:not(.landing-page) .filter,
html[data-theme="dark"] body:not(.landing-page) .search-field input,
html[data-theme="dark"] body:not(.landing-page) .field input,
html[data-theme="dark"] body:not(.landing-page) .field select { color:#f4f7ff; border-color:rgba(181,199,226,.22); background:#0b121d; }
html[data-theme="dark"] body:not(.landing-page) .filter[aria-pressed="true"] { color:#80afff; border-color:#356fc7; background:#122747; }
html[data-theme="dark"] body:not(.landing-page) .resource-badge { color:#b8c4d5; background:#1b2737; }
html[data-theme="dark"] body:not(.landing-page) .google-auth-button { color:#f4f7ff; border-color:#2b3a50; background:#0b121d; }
html[data-theme="dark"] body:not(.landing-page) .google-auth-button:hover { border-color:#45658f; background:#111c2b; }
html[data-theme="dark"] body:not(.landing-page) .auth-divider { color:#718096; }
html[data-theme="dark"] body:not(.landing-page) .auth-divider::before,html[data-theme="dark"] body:not(.landing-page) .auth-divider::after { background:#26364b; }
html[data-theme="dark"] body:not(.landing-page) .library-tab:hover { color:#fff; background:#172337; }
html[data-theme="dark"] body:not(.landing-page) .resource-facts { color:#aebbd0; }
html[data-theme="dark"] body:not(.landing-page) .dashboard-library { color:#f4f7ff; border-color:rgba(181,199,226,.16); background:linear-gradient(145deg,#101824,#0c1420); }
html[data-theme="dark"] body:not(.landing-page) .dashboard-library-grid a { color:#f4f7ff; border-color:rgba(181,199,226,.14); background:#0b121d; }
html[data-theme="dark"] body:not(.landing-page) .dashboard-library-grid a:hover { border-color:#356fc7; background:#101d2f; }
html[data-theme="dark"] body:not(.landing-page) .dashboard-library-grid strong { color:#f4f7ff; }
html[data-theme="dark"] body:not(.landing-page) .dashboard-library-grid small { color:#91a0b6; }
html[data-theme="light"] body:not(.landing-page) .dashboard-library { color:#0b1f44; border-color:#dbe3ee; background:linear-gradient(145deg,#fff,#f7faff); }
html[data-theme="light"] body:not(.landing-page) .dashboard-library-grid a { color:#0b1f44; border-color:#e1e7f0; background:#fff; }
html[data-theme="light"] body:not(.landing-page) .dashboard-library-grid small { color:#64748f; }
html[data-theme="dark"] body:not(.landing-page) .account-nav button { color:#aeb9ca; }
html[data-theme="dark"] body:not(.landing-page) .account-nav button[aria-selected="true"] { color:#8ab7ff; background:#142b4e; }
html[data-theme="dark"] body:not(.landing-page) .app-footer { color:#9daabd; border-color:rgba(181,199,226,.14); background:#080e17; }
html[data-theme="dark"] .onboarding { color:#f4f7ff; background:#101824; }
html[data-theme="dark"] .onboarding-choices button { color:#f4f7ff; border-color:rgba(181,199,226,.18); background:#0b121d; }
html[data-theme="dark"] .onboarding-choices button:hover,
html[data-theme="dark"] .onboarding-choices button.selected { background:#122747; }

@media (max-width:830px) {
  .landing-page .app-header { top:8px; width:calc(100% - 24px); margin-top:8px; padding:12px 14px; }
  .landing-page .theme-toggle { order:2; margin-left:auto; }
  .landing-page .mobile-nav-toggle { order:3; margin-left:0; color:inherit; border-color:rgba(181,199,226,.2); background:transparent; }
  .landing-page .app-actions { order:4; }
  .landing-page .app-nav { order:5; }
  .landing-page .landing-hero { min-height:auto; padding-top:72px; }
  .landing-page .landing-copy h1 { font-size:58px; }
  .landing-page .hero-eyebrow span { width:80px; }
  .hero-workspace { grid-template-columns:1fr; min-height:390px; }
  .workspace-side { display:none; }
}

@media (max-width:560px) {
  .landing-page .app-header { width:calc(100% - 16px); }
  .landing-page .app-actions .button { display:none; }
  .landing-page .landing-hero { padding:52px 0 24px; }
  .landing-page .landing-copy { text-align:left; }
  .landing-page .hero-eyebrow { justify-content:flex-start; gap:10px; }
  .landing-page .hero-eyebrow span { width:32px; }
  .landing-page .landing-copy h1 { font-size:43px; line-height:1.02; }
  .landing-page .hero-lead { margin-inline:0; font-size:14px; }
  .landing-page .hero-actions { align-items:stretch; }
  .landing-page .hero-points { justify-content:flex-start; }
  .hero-workspace { min-height:420px; margin-top:34px; border-radius:15px; transform:none; }
  .workspace-main { padding:18px 14px; }
  .workspace-head h2 { font-size:20px; }
  .workspace-progress { display:none; }
  .workspace-filters { grid-template-columns:1fr; max-height:96px; overflow:hidden; }
  .workspace-filters>div { flex-wrap:nowrap; overflow:hidden; }
  .workspace-filters small { flex:0 0 100%; }
  .workspace-grid { grid-template-columns:1fr; }
  .workspace-grid article { min-height:170px; }
  .workspace-grid article:nth-child(2) { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-workspace,.hero-workspace.is-live { opacity:1; clip-path:none; animation:none; transition:none; transform:none; }
  .hero-workspace::after,.workspace-progress progress::-webkit-progress-value,.audio-control.is-playing button { animation:none; }
  .workspace-filters span,.workspace-grid article { transition:none; }
}

/* Premium article reader */
.article-lesson-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.vocabulary-shortcut{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 16px;color:#0d2347;border:1px solid #d8e2f0;border-radius:14px;background:#fff;text-decoration:none;box-shadow:0 10px 28px rgba(21,48,88,.08)}.vocabulary-shortcut strong{display:grid;min-width:24px;height:24px;place-items:center;color:#fff;border-radius:999px;background:#1f73ef;font-size:12px}.article-reader-layout{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:24px;align-items:start}.interactive-reader,.article-tools-panel{border:1px solid #dbe3ef;border-radius:20px;background:#fff;box-shadow:0 20px 55px rgba(19,43,78,.07)}.interactive-reader{overflow:hidden}.reader-view-tabs{display:flex;gap:6px;padding:10px;border-bottom:1px solid #e2e8f1;background:#f8fafd}.reader-view-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 15px;color:#66758d;border:0;border-radius:10px;background:transparent;font:700 13px/1 'DM Sans',sans-serif;cursor:pointer}.reader-view-tabs button[aria-selected=true]{color:#0d2347;background:#fff;box-shadow:0 3px 12px rgba(19,43,78,.08)}.reader-view-tabs .material-symbols-outlined{font-size:19px}.reader-reading-view{min-height:640px}.reader-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 26px;color:#5d6c83;border-bottom:1px solid #edf1f6;background:#fbfcfe;font-size:13px}.reader-intro span{flex:0 0 auto;color:#1467df;font-weight:800}.reader-intro p{margin:0;text-align:right}.interactive-article{max-width:780px;margin:auto;padding:54px 54px 90px;color:#1a2940}.interactive-article h2.article-block{margin:2.2em 0 .7em;font:700 clamp(25px,3vw,36px)/1.12 'DM Sans',sans-serif;letter-spacing:-.035em}.interactive-article h2.article-block:first-child{margin-top:0}.interactive-article p.article-block{margin:0 0 1.35em;font:400 18px/1.78 Georgia,'Times New Roman',serif;letter-spacing:.002em}.interactive-article ::selection{color:#10213c;background:#bcd8ff}.saved-highlight{padding:.05em .06em;border-radius:3px;color:inherit;cursor:pointer;box-decoration-break:clone;-webkit-box-decoration-break:clone}.highlight-yellow{background:#ffe98a}.highlight-blue{background:#b9ddff}.highlight-green{background:#bcebd0}.highlight-pink{background:#ffcddd}.reader-pdf-view iframe{display:block;width:100%;height:min(78vh,920px);border:0;background:#f2f4f7}.article-tools-panel{position:sticky;top:92px;padding:24px}.article-tools-panel h2{margin:7px 0 20px;color:#0c2348;font-size:24px;line-height:1.08}.article-tools-panel ul{display:grid;gap:18px;margin:0 0 24px;padding:0;list-style:none}.article-tools-panel li{display:grid;grid-template-columns:36px 1fr;gap:11px;color:#617089;font-size:12px;line-height:1.45}.article-tools-panel li>.material-symbols-outlined{display:grid;width:36px;height:36px;place-items:center;color:#1f73ef;border-radius:10px;background:#edf5ff;font-size:19px}.article-tools-panel li strong{display:block;margin-bottom:2px;color:#152846;font-size:13px}.article-tools-panel .button{width:100%;margin-top:9px}.reader-selection-tools{position:fixed;z-index:1000;display:flex;padding:5px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#0d1726;box-shadow:0 16px 40px rgba(3,10,21,.28);opacity:0;pointer-events:none;transform:translateY(6px);transition:.15s ease}.reader-selection-tools.show{opacity:1;pointer-events:auto;transform:none}.reader-selection-tools button{display:flex;align-items:center;gap:6px;min-height:38px;padding:0 11px;color:#fff;border:0;border-radius:8px;background:transparent;font:700 12px 'DM Sans',sans-serif;cursor:pointer}.reader-selection-tools button:hover{background:#1b2b42}.reader-selection-tools .material-symbols-outlined{color:#6ca6ff;font-size:18px}.reader-toast{position:fixed;right:22px;bottom:22px;z-index:1200;max-width:360px;padding:13px 17px;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#0d1726;box-shadow:0 16px 45px rgba(3,10,21,.28);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s ease}.reader-toast.show{opacity:1;transform:none}.free-reader-note{display:grid;grid-template-columns:34px 1fr;gap:11px;margin:20px 0;padding:14px;color:#53647f;border-radius:13px;background:#f3f7fd;font-size:12px;line-height:1.45}.free-reader-note>.material-symbols-outlined{color:#1f73ef}.free-reader-note strong{display:block;color:#152846}.free-reader-note p{margin:3px 0 0}

/* My Vocabulary */
.vocabulary-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:32px 0}.vocabulary-page-head h1{margin:5px 0 8px;font-size:clamp(38px,5vw,64px);letter-spacing:-.05em}.vocabulary-page-head p:last-child{max-width:650px;margin:0;color:#677792}.vocabulary-summary{display:flex;gap:10px}.vocabulary-summary span{min-width:112px;padding:15px 18px;border:1px solid #dbe3ef;border-radius:14px;background:#fff}.vocabulary-summary strong{display:block;color:#0c2348;font-size:23px}.vocabulary-summary small{color:#70809a}.vocabulary-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;padding:12px;border:1px solid #dbe3ef;border-radius:16px;background:#fff}.vocabulary-search{display:flex;align-items:center;gap:8px;flex:1;max-width:520px}.vocabulary-search .material-symbols-outlined{color:#75849a}.vocabulary-search input{width:100%;padding:10px;border:0;outline:0;background:transparent;font:500 15px 'DM Sans',sans-serif}.vocabulary-filter{display:flex;gap:6px}.vocabulary-filter button{min-height:38px;padding:0 13px;color:#60708a;border:0;border-radius:9px;background:transparent;font-weight:700;cursor:pointer}.vocabulary-filter button[aria-pressed=true]{color:#0d2347;background:#edf4ff}.vocabulary-list{display:grid;gap:12px}.vocabulary-card{display:grid;grid-template-columns:minmax(160px,.6fr) minmax(260px,1.4fr) auto;gap:26px;align-items:center;padding:21px 22px;border:1px solid #dbe3ef;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(19,43,78,.04)}.vocabulary-word h2{margin:0 0 5px;color:#0d2347;font-size:25px;letter-spacing:-.025em}.vocabulary-word a{color:#1f73ef;font-size:12px;font-weight:700;text-decoration:none}.vocabulary-context{margin:0;color:#5f6f88;font:400 15px/1.55 Georgia,serif}.vocabulary-context mark{padding:1px 3px;color:inherit;border-radius:3px;background:#ffe98a}.vocabulary-actions{display:flex;align-items:center;gap:7px}.vocabulary-actions button{min-height:38px;padding:0 12px;border:1px solid #d5dfec;border-radius:9px;background:#fff;cursor:pointer}.vocabulary-actions .mastered{color:#08794e;border-color:#b9e3d0;background:#f0fbf6}.vocabulary-actions .delete-word{display:grid;width:38px;padding:0;place-items:center;color:#8a98ab}.vocabulary-actions .material-symbols-outlined{font-size:18px}.vocabulary-empty{display:grid;min-height:340px;place-items:center;padding:40px;text-align:center;border:1px dashed #cbd7e7;border-radius:18px;background:rgba(255,255,255,.55)}.vocabulary-empty .material-symbols-outlined{font-size:44px;color:#1f73ef}.vocabulary-empty h2{margin:14px 0 7px}.vocabulary-empty p{max-width:460px;margin:0 auto 20px;color:#677792}

html[data-theme="dark"] .interactive-reader,html[data-theme="dark"] .article-tools-panel,html[data-theme="dark"] .vocabulary-shortcut,html[data-theme="dark"] .vocabulary-summary span,html[data-theme="dark"] .vocabulary-toolbar,html[data-theme="dark"] .vocabulary-card{color:#f4f7ff;border-color:#26364a;background:#101824}html[data-theme="dark"] .reader-view-tabs,html[data-theme="dark"] .reader-intro{border-color:#26364a;background:#0c1420}html[data-theme="dark"] .reader-view-tabs button[aria-selected=true]{color:#fff;background:#18263a}html[data-theme="dark"] .interactive-article,html[data-theme="dark"] .article-tools-panel h2,html[data-theme="dark"] .article-tools-panel li strong,html[data-theme="dark"] .vocabulary-word h2,html[data-theme="dark"] .vocabulary-summary strong{color:#f4f7ff}html[data-theme="dark"] .reader-intro,html[data-theme="dark"] .article-tools-panel li,html[data-theme="dark"] .vocabulary-page-head p:last-child,html[data-theme="dark"] .vocabulary-context{color:#aab6c8}html[data-theme="dark"] .reader-pdf-view iframe{background:#0a111b}html[data-theme="dark"] .free-reader-note{color:#afbed2;background:#152236}html[data-theme="dark"] .free-reader-note strong{color:#f4f7ff}html[data-theme="dark"] .vocabulary-search input{color:#f4f7ff}html[data-theme="dark"] .vocabulary-filter button[aria-pressed=true]{color:#8bb8ff;background:#132947}html[data-theme="dark"] .vocabulary-actions button{color:#dce7f7;border-color:#34445a;background:#121c2a}html[data-theme="dark"] .vocabulary-actions .mastered{color:#83dfb6;border-color:#286b51;background:#10291f}html[data-theme="dark"] .vocabulary-empty{border-color:#334359;background:rgba(16,24,36,.65)}

@media(max-width:980px){.article-reader-layout{grid-template-columns:1fr}.article-tools-panel{position:static}.article-tools-panel ul{grid-template-columns:repeat(3,1fr)}.article-tools-panel .button{width:auto;margin-right:6px}.vocabulary-page-head{align-items:flex-start;flex-direction:column}.vocabulary-card{grid-template-columns:170px 1fr}.vocabulary-actions{grid-column:1/-1;justify-content:flex-end}}
@media(max-width:680px){.article-lesson-header{align-items:flex-start;flex-direction:column}.article-reader-layout{gap:14px}.reader-intro{align-items:flex-start;flex-direction:column}.reader-intro p{text-align:left}.interactive-article{padding:34px 22px 64px}.interactive-article p.article-block{font-size:17px;line-height:1.7}.article-tools-panel ul{grid-template-columns:1fr}.reader-view-tabs button{flex:1;justify-content:center;padding:0 8px}.vocabulary-page-head{margin-top:20px}.vocabulary-summary{width:100%}.vocabulary-summary span{flex:1;min-width:0}.vocabulary-toolbar{align-items:stretch;flex-direction:column}.vocabulary-filter{overflow:auto}.vocabulary-card{grid-template-columns:1fr;gap:12px}.vocabulary-actions{grid-column:auto;justify-content:flex-start}.reader-toast{right:12px;bottom:12px;left:12px;max-width:none}}

/* ==========================================================================
   DASHBOARD USER BAR - GLASSMORPHISM & ENTERPRISE HEADER
   ========================================================================== */
.dashboard-user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  margin-bottom: 24px;
}

.dashboard-user-bar .dashboard-welcome {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.dashboard-user-bar .app-mark { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:28px; width:auto; min-width:38px; background:none; border:none; box-shadow:none; }

.dashboard-user-bar .account-name {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0;
}

.dashboard-user-bar .account-username {
  font-size: 12.5px;
  color: #64748b;
  margin: 2px 0 0;
  font-weight: 500;
}

/* User Actions Buttons */
.dashboard-user-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-user-bar .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.dashboard-user-bar .button.secondary,
.dashboard-user-bar .vx-user-btn-glass {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.dashboard-user-bar .button.secondary:hover,
.dashboard-user-bar .vx-user-btn-glass:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.dashboard-user-bar .button.primary,
.dashboard-user-bar .vx-user-btn-primary {
  background: #0f172a;
  border: 1px solid #0f172a;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}
.dashboard-user-bar .button.primary:hover,
.dashboard-user-bar .vx-user-btn-primary:hover {
  background: #1e293b;
  border-color: #1e293b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
}

.dashboard-user-bar .button.dashboard-signout,
.dashboard-user-bar .vx-user-btn-ghost {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
}
.dashboard-user-bar .button.dashboard-signout:hover,
.dashboard-user-bar .vx-user-btn-ghost:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
  transform: translateY(-1px);
}

/* ==========================================================================
   WALLPAPER THEMES & GLASSMORPHISM ADAPTATION
   ========================================================================== */
.dashboard-user-bar.wp-sunset {
  background: linear-gradient(135deg, #2b0b08 0%, #54190c 45%, #9a3412 100%) !important;
  border-color: rgba(251, 146, 60, 0.3) !important;
  box-shadow: 0 12px 36px rgba(84, 25, 12, 0.35) !important;
}
.dashboard-user-bar.wp-sapphire {
  background: linear-gradient(135deg, #061530 0%, #0d2757 50%, #1e40af 100%) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  box-shadow: 0 12px 36px rgba(15, 39, 87, 0.35) !important;
}
.dashboard-user-bar.wp-neon_purple {
  background: linear-gradient(135deg, #130520 0%, #2e1065 50%, #701a75 100%) !important;
  border-color: rgba(192, 132, 252, 0.3) !important;
  box-shadow: 0 12px 36px rgba(46, 16, 101, 0.35) !important;
}
.dashboard-user-bar.wp-emerald {
  background: linear-gradient(135deg, #022119 0%, #064e3b 50%, #065f46 100%) !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
  box-shadow: 0 12px 36px rgba(6, 78, 59, 0.35) !important;
}
.dashboard-user-bar.wp-galaxy {
  background: linear-gradient(135deg, #080a14 0%, #131438 40%, #2e1065 100%) !important;
  border-color: rgba(129, 140, 248, 0.3) !important;
  box-shadow: 0 12px 36px rgba(19, 20, 56, 0.35) !important;
}
.dashboard-user-bar.wp-aurora {
  background: linear-gradient(135deg, #032422 0%, #0c4a45 50%, #0369a1 100%) !important;
  border-color: rgba(45, 212, 191, 0.3) !important;
  box-shadow: 0 12px 36px rgba(12, 74, 69, 0.35) !important;
}
.dashboard-user-bar.wp-obsidian {
  background: linear-gradient(135deg, #09090b 0%, #18181b 100%) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}
.dashboard-user-bar.wp-telegram_doodles {
  background: #0b1329 url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2338bdf8' fill-opacity='0.10' fill-rule='evenodd'%3E%3Cpath d='M11 11h2v2h-2zm4 4h2v2h-2zm-8 8h2v2H7zm24-12h2v2h-2zm4 4h2v2h-2zm-8 8h2v2h-2zm24-12h2v2h-2zm4 4h2v2h-2zm-8 8h2v2h-2zm-32 32h2v2h-2zm4 4h2v2h-2zm-8 8h2v2H7zm24-12h2v2h-2zm4 4h2v2h-2zm-8 8h2v2h-2zm24-12h2v2h-2zm4 4h2v2h-2zm-8 8h2v2h-2z'/%3E%3C/g%3E%3C/svg%3E") !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 12px 36px rgba(11, 19, 41, 0.45) !important;
}

/* Glassmorphism Styles on Active Wallpaper */
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .account-name {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .account-username {
  color: rgba(255, 255, 255, 0.8) !important;
}
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .app-mark { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:28px; width:auto; min-width:38px; background:none; border:none; box-shadow:none; }
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .account-status.is-premium {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Frosted Glass Buttons on Wallpaper */
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .button.secondary,
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .vx-user-btn-glass {
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .button.secondary:hover,
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .vx-user-btn-glass:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

.dashboard-user-bar[class*="wp-"]:not(.wp-default) .button.primary,
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .vx-user-btn-primary {
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
}
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .button.primary:hover,
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .vx-user-btn-primary:hover {
  background: #f8fafc !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

.dashboard-user-bar[class*="wp-"]:not(.wp-default) .button.dashboard-signout,
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .vx-user-btn-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .button.dashboard-signout:hover,
.dashboard-user-bar[class*="wp-"]:not(.wp-default) .vx-user-btn-ghost:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #fca5a5 !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   UNIVERSAL MOBILE HEADER & DRAWER SYSTEM (< 830px)
   ========================================================================== */
@media (max-width: 830px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  .app-header {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    position: sticky !important;
    top: 0 !important;
    box-sizing: border-box !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 56px !important;
  }

  .app-brand {
    padding: 0 !important;
    font-size: 13.5px !important;
    flex-shrink: 0 !important;
  }

  .theme-toggle,
  .app-header .theme-toggle {
    margin-left: auto !important;
    order: 2 !important;
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }

  .mobile-nav-toggle,
  .app-header .mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 3 !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(218, 228, 241, 0.9) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    color: var(--ink) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  .app-nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 16px 36px rgba(12, 28, 56, 0.12) !important;
    padding: 16px 20px 20px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    z-index: 99 !important;
  }

  .app-nav.open {
    display: flex !important;
  }

  .app-nav a {
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
  }

  .app-actions {
    display: none !important;
  }

  .shell {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .page {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 24px 16px 48px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .page-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .page-grid {
    grid-template-columns: 1fr !important;
  }

  .course-grid,
  .practice-grid,
  .resource-list {
    grid-template-columns: 1fr !important;
  }

  /* Mobile Authentication Layout */
  .auth-page .page {
    padding: 16px 12px 36px !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .auth-layout {
    grid-template-columns: 1fr !important;
    border-radius: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: 0 4px 16px rgba(18, 38, 76, 0.07) !important;
  }

  .auth-aside {
    display: none !important;
  }

  .auth-panel {
    padding: 24px 18px 28px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .auth-panel-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .auth-title {
    font-size: 24px !important;
    letter-spacing: -0.03em !important;
  }

  .auth-role-selector {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}