:root {
  --bg:#f7fbff; --surface:#ffffff; --surface-2:#eef8ff; --surface-3:#e3f2fd;
  --text:#102a43; --muted:#64778a; --border:#dbeaf4; --primary:#2f8fd8; --primary-2:#1f6fb5;
  --primary-soft:#dff2ff; --navy:#143c63; --success:#2e9d6f; --warning:#d5962d; --danger:#d85757;
  --shadow:0 18px 48px rgba(29,85,125,.12); --shadow-sm:0 8px 24px rgba(29,85,125,.08);
  --radius:22px; --radius-sm:14px; --sidebar:264px; --header:76px;
}
html[data-theme="dark"] {
  --bg:#07111d; --surface:#0d1b2a; --surface-2:#10263a; --surface-3:#16334b;
  --text:#eef7ff; --muted:#9db0c2; --border:#1d3850; --primary:#52aef0; --primary-2:#7bc6f7;
  --primary-soft:#0f2c43; --navy:#d7edff; --success:#4bc58d; --warning:#e8ad4b; --danger:#f47777;
  --shadow:0 18px 48px rgba(0,0,0,.3); --shadow-sm:0 8px 24px rgba(0,0,0,.2);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.55; }
button, input, select, textarea { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
img, svg { max-width:100%; }
button { cursor:pointer; }
::selection { background:var(--primary-soft); }
:focus-visible { outline:3px solid rgba(47,143,216,.35); outline-offset:3px; }

.boot-screen { min-height:100vh; display:grid; place-content:center; text-align:center; color:var(--muted); }
.brand-mark { width:64px; height:64px; margin:auto; display:grid; place-items:center; border-radius:20px; color:#fff; font-size:30px; font-weight:900; background:linear-gradient(135deg,#46a9ef,#1e65c8); box-shadow:var(--shadow); }

/* Shared */
.container { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.section { padding:88px 0; }
.section-sm { padding:52px 0; }
.section-title { max-width:720px; margin-bottom:34px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--primary-2); font-size:.82rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow::before { content:""; width:30px; height:2px; background:currentColor; border-radius:4px; }
h1,h2,h3,h4,p { margin-top:0; }
h1 { font-size:clamp(2.3rem,5vw,4.6rem); line-height:1.04; letter-spacing:-.045em; }
h2 { font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.12; letter-spacing:-.035em; }
h3 { font-size:1.25rem; line-height:1.25; }
.lead { color:var(--muted); font-size:clamp(1rem,1.7vw,1.18rem); }
.muted { color:var(--muted); }
.small { font-size:.86rem; }
.text-success { color:var(--success); }
.text-warning { color:var(--warning); }
.text-danger { color:var(--danger); }
.spacer { flex:1; }
.row { display:flex; align-items:center; gap:12px; }
.row-wrap { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.stack { display:grid; gap:16px; }
.center { text-align:center; }
.hidden { display:none !important; }
.divider { height:1px; background:var(--border); margin:22px 0; }

.btn { border:0; border-radius:13px; min-height:46px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:750; transition:.22s ease; background:var(--surface-2); color:var(--text); }
.btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; }
.btn-outline { background:transparent; border:1px solid var(--border); }
.btn-ghost { background:transparent; color:var(--muted); }
.btn-danger { background:rgba(216,87,87,.12); color:var(--danger); }
.btn-sm { min-height:38px; padding:0 13px; border-radius:11px; font-size:.9rem; }
.btn-lg { min-height:54px; padding:0 24px; border-radius:16px; }
.icon-btn { width:44px; height:44px; padding:0; border:1px solid var(--border); background:var(--surface); border-radius:13px; display:grid; place-items:center; color:var(--muted); }
.icon { width:20px; height:20px; display:inline-block; flex:none; }

.badge { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 10px; background:var(--surface-2); color:var(--muted); font-size:.78rem; font-weight:750; }
.badge-primary { background:var(--primary-soft); color:var(--primary-2); }
.badge-success { background:rgba(46,157,111,.13); color:var(--success); }
.badge-warning { background:rgba(213,150,45,.15); color:var(--warning); }
.badge-danger { background:rgba(216,87,87,.13); color:var(--danger); }
.badge-dark { background:var(--navy); color:var(--bg); }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-pad { padding:24px; }
.soft-card { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }

/* Public header */
.public-header { position:sticky; top:0; z-index:50; height:var(--header); background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(18px); border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent); }
.public-header .inner { height:100%; display:flex; align-items:center; gap:26px; }
.logo { display:flex; align-items:center; gap:11px; font-weight:900; letter-spacing:.04em; }
.logo img { width:42px; height:42px; }
.logo span small { display:block; font-size:.62rem; color:var(--muted); letter-spacing:.12em; font-weight:700; }
.public-nav { display:flex; gap:4px; margin-left:auto; }
.public-nav a { padding:10px 12px; border-radius:11px; color:var(--muted); font-weight:650; font-size:.93rem; }
.public-nav a:hover,.public-nav a.active { color:var(--primary-2); background:var(--primary-soft); }
.public-account-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.mobile-account-actions { display:grid; gap:10px; margin-top:12px; }
.mobile-account-actions .btn { width:100%; }
.mobile-menu-btn { display:none; }
.mobile-public-menu { position:fixed; inset:var(--header) 0 auto 0; z-index:45; background:var(--surface); border-bottom:1px solid var(--border); padding:18px 20px 26px; box-shadow:var(--shadow); transform:translateY(-130%); opacity:0; pointer-events:none; transition:.25s ease; }
.mobile-public-menu.open { transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-public-menu a { display:block; padding:13px; border-radius:12px; font-weight:700; }

/* Hero */
.hero { position:relative; overflow:hidden; min-height:690px; display:flex; align-items:center; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 94%,transparent) 42%,color-mix(in srgb,var(--bg) 48%,transparent) 100%); z-index:1; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75; transform:scale(1.03); animation:heroFloat 12s ease-in-out infinite alternate; }
@keyframes heroFloat { to { transform:scale(1.08) translateX(-1%); } }
.hero-content { position:relative; z-index:2; width:min(720px,100%); padding:90px 0; }
.hero h1 span { color:var(--primary-2); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0; }
.hero-trust { display:flex; flex-wrap:wrap; gap:18px; color:var(--muted); font-size:.9rem; }
.hero-trust span { display:flex; align-items:center; gap:7px; }
.floating-stat { position:absolute; z-index:3; right:6%; bottom:10%; width:260px; background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:22px; padding:18px; box-shadow:var(--shadow); animation:floatCard 4s ease-in-out infinite; }
@keyframes floatCard { 50% { transform:translateY(-9px); } }

.category-card { padding:24px; transition:.22s ease; position:relative; overflow:hidden; }
.category-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--primary) 45%,var(--border)); }
.category-icon { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-2); margin-bottom:18px; }
.category-card .arrow { position:absolute; right:20px; top:22px; color:var(--muted); }

.course-card { overflow:hidden; display:flex; flex-direction:column; min-height:100%; transition:.22s ease; }
.course-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.course-cover { min-height:148px; padding:22px; color:#fff; display:flex; align-items:flex-end; position:relative; overflow:hidden; }
.course-cover::after { content:"∑  π  √  x²"; position:absolute; right:-10px; top:14px; font-size:42px; opacity:.16; transform:rotate(-7deg); letter-spacing:10px; }
.course-cover.blue { background:linear-gradient(135deg,#2e9be5,#1762a7); }
.course-cover.violet { background:linear-gradient(135deg,#805ad5,#4c3ca4); }
.course-cover.teal { background:linear-gradient(135deg,#31a99d,#14736f); }
.course-cover.amber { background:linear-gradient(135deg,#f4b54d,#d17426); }
.course-cover.navy { background:linear-gradient(135deg,#244d73,#102c47); }
.course-cover.coral { background:linear-gradient(135deg,#ed7d65,#b94855); }
.course-body { padding:22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.course-meta { display:flex; flex-wrap:wrap; gap:8px; }
.progress { height:9px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#65c6f5); transition:width .5s ease; }

.feature-band { background:linear-gradient(135deg,var(--navy),color-mix(in srgb,var(--navy) 78%,var(--primary))); color:var(--bg); border-radius:32px; padding:42px; position:relative; overflow:hidden; }
.feature-band::after { content:""; position:absolute; width:300px; height:300px; border:70px solid rgba(255,255,255,.08); border-radius:50%; right:-90px; top:-120px; }
.feature-band .lead { color:color-mix(in srgb,var(--bg) 75%,transparent); }
.review-card { padding:24px; }
.stars { color:#f0aa2e; letter-spacing:3px; }
.footer { background:var(--surface); border-top:1px solid var(--border); padding:52px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:32px; }
.footer a { display:block; color:var(--muted); padding:5px 0; }
.footer-bottom { margin-top:34px; padding-top:18px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:.86rem; }

/* Forms */
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font-size:.86rem; font-weight:750; color:var(--muted); }
.input, .select, .textarea { width:100%; min-height:48px; border-radius:13px; border:1px solid var(--border); background:var(--surface); color:var(--text); padding:11px 14px; transition:.2s ease; }
.textarea { min-height:120px; resize:vertical; }
.input:focus,.select:focus,.textarea:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(47,143,216,.12); outline:none; }
.auth-shell { min-height:calc(100vh - var(--header)); display:grid; place-items:center; padding:50px 20px; }
.auth-card { width:min(560px,100%); padding:32px; }
.demo-box { background:var(--surface-2); border:1px dashed var(--primary); border-radius:16px; padding:16px; }

/* Portal */
.portal { min-height:100vh; display:grid; grid-template-columns:var(--sidebar) 1fr; }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar); background:var(--surface); border-right:1px solid var(--border); padding:18px 14px; display:flex; flex-direction:column; z-index:70; transition:.25s ease; }
.sidebar .logo { padding:4px 8px 22px; }
.side-profile { display:flex; gap:11px; align-items:center; padding:13px; margin:0 2px 14px; border-radius:15px; background:var(--surface-2); }
.avatar { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; color:#fff; font-weight:850; background:linear-gradient(135deg,var(--primary),var(--primary-2)); flex:none; }
.side-nav { display:grid; gap:4px; overflow:auto; padding-right:3px; }
.side-nav a { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; color:var(--muted); font-weight:680; font-size:.92rem; }
.side-nav a:hover,.side-nav a.active { color:var(--primary-2); background:var(--primary-soft); }
.side-section { font-size:.67rem; font-weight:900; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; padding:18px 13px 7px; }
.side-bottom { margin-top:auto; display:grid; gap:6px; border-top:1px solid var(--border); padding-top:12px; }
.portal-main { grid-column:2; min-width:0; }
.portal-topbar { position:sticky; top:0; z-index:40; height:72px; display:flex; align-items:center; gap:14px; padding:0 28px; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(18px); border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent); }
.portal-menu-btn { display:none; }
.portal-search { width:min(430px,45vw); position:relative; }
.portal-search input { padding-left:42px; }
.portal-search .icon { position:absolute; left:14px; top:14px; color:var(--muted); }
.portal-content { padding:30px; max-width:1480px; margin:auto; animation:pageIn .3s ease; }
@keyframes pageIn { from { opacity:0; transform:translateY(8px); } }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:26px; }
.page-head h1 { font-size:clamp(1.85rem,3vw,2.7rem); margin-bottom:6px; }
.stat-card { padding:20px; display:flex; align-items:center; gap:15px; }
.stat-icon { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-2); }
.stat-card strong { display:block; font-size:1.6rem; line-height:1.1; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:22px; }
.welcome-card { padding:30px; background:linear-gradient(135deg,var(--primary-soft),var(--surface)); position:relative; overflow:hidden; }
.welcome-card::after { content:"π"; position:absolute; right:35px; bottom:-44px; font-size:180px; font-weight:900; color:var(--primary); opacity:.08; }
.continue-card { padding:24px; }
.quick-list { display:grid; gap:11px; }
.quick-item { display:flex; gap:13px; align-items:center; padding:13px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.quick-item:hover { border-color:var(--primary); }
.quick-icon { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:var(--surface-2); color:var(--primary-2); flex:none; }
.timeline { display:grid; gap:14px; }
.timeline-item { display:grid; grid-template-columns:15px 1fr; gap:13px; }
.timeline-item::before { content:""; width:11px; height:11px; margin-top:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 5px var(--primary-soft); }

/* Course/lesson */
.filter-bar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.filter-chip { border:1px solid var(--border); background:var(--surface); color:var(--muted); border-radius:999px; padding:9px 14px; font-weight:700; }
.filter-chip.active { color:#fff; background:var(--primary); border-color:var(--primary); }
.course-hero { padding:32px; display:grid; grid-template-columns:1.4fr .6fr; gap:28px; align-items:center; }
.course-hero-visual { min-height:240px; border-radius:22px; display:grid; place-items:center; color:#fff; font-size:6rem; font-weight:900; background:linear-gradient(135deg,var(--primary),var(--navy)); }
.unit { overflow:hidden; }
.unit-head { padding:18px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); }
.lesson-row { display:flex; align-items:center; gap:14px; padding:15px 20px; border-bottom:1px solid var(--border); transition:.2s ease; }
.lesson-row:last-child { border-bottom:0; }
.lesson-row:hover { background:var(--surface-2); }
.lesson-number { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--surface-2); color:var(--muted); font-weight:800; flex:none; }
.lesson-player { aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:radial-gradient(circle at 25% 20%,#2f8fd8,#0b2034 65%); color:#fff; display:grid; place-items:center; position:relative; }
.lesson-player::before { content:"x² + y² = r²   ∑   π"; position:absolute; font-size:clamp(2rem,7vw,7rem); opacity:.08; transform:rotate(-7deg); white-space:nowrap; }
.play-circle { width:84px; height:84px; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.16); backdrop-filter:blur(8px); border-radius:50%; display:grid; place-items:center; position:relative; z-index:1; }
.lesson-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:22px; }
.tabs { display:flex; gap:8px; overflow:auto; padding-bottom:2px; }
.tab { border:0; background:transparent; color:var(--muted); padding:10px 13px; border-radius:11px; font-weight:750; white-space:nowrap; }
.tab.active { background:var(--primary-soft); color:var(--primary-2); }
.resource-item { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--border); border-radius:14px; }
.resource-icon { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--surface-2); color:var(--primary-2); flex:none; }

/* Quiz */
.quiz-question { padding:22px; }
.option { display:flex; align-items:center; gap:11px; padding:13px 14px; border:1px solid var(--border); border-radius:13px; cursor:pointer; transition:.2s ease; }
.option:hover { border-color:var(--primary); background:var(--primary-soft); }
.option input { accent-color:var(--primary); }
.quiz-result { padding:30px; text-align:center; }
.score-ring { width:130px; height:130px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--success) var(--score),var(--surface-3) 0); position:relative; }
.score-ring::before { content:""; position:absolute; width:96px; height:96px; border-radius:50%; background:var(--surface); }
.score-ring strong { position:relative; z-index:1; font-size:1.8rem; }

/* Announcement/polls/live */
.announcement { padding:22px; position:relative; }
.announcement.pinned { border-color:color-mix(in srgb,var(--primary) 45%,var(--border)); }
.announcement.pinned::before { content:"Pinned"; position:absolute; top:-11px; right:18px; padding:4px 9px; border-radius:999px; background:var(--primary); color:#fff; font-size:.72rem; font-weight:800; }
.poll-options { display:grid; gap:10px; margin-top:16px; }
.poll-option { border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:13px; padding:13px 14px; text-align:left; position:relative; overflow:hidden; }
.poll-option .fill { position:absolute; inset:0 auto 0 0; background:var(--primary-soft); z-index:0; }
.poll-option .content { position:relative; z-index:1; display:flex; justify-content:space-between; gap:12px; }
.live-card { padding:22px; display:grid; gap:14px; }
.live-time { display:flex; align-items:center; gap:10px; color:var(--muted); }
.live-room { min-height:calc(100vh - 150px); display:grid; grid-template-columns:1fr 310px; gap:18px; }
.stage { background:#06111e; border-radius:22px; min-height:520px; position:relative; display:grid; place-items:center; color:#fff; overflow:hidden; }
.stage::before { content:"Live screen sharing will appear here"; color:#89a3bb; }
.stage .live-badge { position:absolute; top:18px; left:18px; }
.stage-controls { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; gap:10px; }
.control-btn { width:50px; height:50px; border:0; border-radius:50%; color:#fff; background:rgba(255,255,255,.14); backdrop-filter:blur(10px); }
.control-btn.end { background:var(--danger); }
.live-panel { padding:18px; display:flex; flex-direction:column; }
.chat-list { flex:1; min-height:250px; overflow:auto; display:grid; align-content:start; gap:12px; }
.chat-bubble { padding:10px 12px; background:var(--surface-2); border-radius:13px; font-size:.9rem; }

/* Admin */
.admin-tabs { display:flex; gap:8px; overflow:auto; margin-bottom:22px; }
.admin-table-wrap { overflow:auto; }
.admin-table { width:100%; border-collapse:collapse; min-width:740px; }
.admin-table th,.admin-table td { padding:14px 12px; text-align:left; border-bottom:1px solid var(--border); }
.admin-table th { color:var(--muted); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.admin-table tr:hover td { background:var(--surface-2); }
.integration-card { padding:22px; display:grid; gap:12px; }
.status-line { display:flex; align-items:center; gap:8px; font-weight:750; }
.status-dot { width:10px; height:10px; border-radius:50%; background:var(--warning); box-shadow:0 0 0 5px rgba(213,150,45,.13); }
.status-dot.ready { background:var(--success); box-shadow:0 0 0 5px rgba(46,157,111,.13); }
.upload-zone { border:2px dashed var(--border); border-radius:18px; padding:32px; text-align:center; background:var(--surface-2); }

/* Modal/toast */
.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(3,15,25,.6); backdrop-filter:blur(6px); display:grid; place-items:center; padding:20px; animation:fadeIn .18s ease; }
.modal { width:min(650px,100%); max-height:90vh; overflow:auto; padding:26px; background:var(--surface); border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow); }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.toast-wrap { position:fixed; top:20px; right:20px; z-index:120; display:grid; gap:10px; }
.toast { width:min(360px,calc(100vw - 40px)); padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); animation:toastIn .25s ease; }
@keyframes toastIn { from { opacity:0; transform:translateY(-10px); } }
@keyframes fadeIn { from { opacity:0; } }
.empty-state { padding:48px 24px; text-align:center; color:var(--muted); }
.empty-state .icon { width:48px; height:48px; margin-bottom:12px; }
.mobile-bottom { display:none; }
.sidebar-overlay { display:none; }

/* Responsive */
@media (max-width:1100px) {
  .public-nav { display:none; }
  .public-account-actions { display:none; }
  .mobile-menu-btn { display:grid; margin-left:auto; }
  .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:1.3fr repeat(2,1fr); }
  .footer-grid > :last-child { grid-column:2; }
  .dashboard-grid,.lesson-layout { grid-template-columns:1fr; }
  .live-room { grid-template-columns:1fr; }
  .live-panel { min-height:420px; }
}
@media (max-width:860px) {
  :root { --header:68px; }
  .section { padding:66px 0; }
  .hero { min-height:620px; }
  .hero::before { background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 72%,color-mix(in srgb,var(--bg) 75%,transparent)); }
  .floating-stat { display:none; }
  .portal { display:block; }
  .sidebar { transform:translateX(-105%); box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay.open { display:block; position:fixed; inset:0; z-index:65; background:rgba(3,15,25,.5); }
  .portal-main { grid-column:auto; }
  .portal-menu-btn { display:grid; }
  .portal-content { padding:22px 18px 90px; }
  .portal-topbar { padding:0 16px; }
  .portal-search { width:auto; flex:1; }
  .portal-search input { width:100%; }
  .mobile-bottom { position:fixed; display:grid; grid-template-columns:repeat(5,1fr); left:10px; right:10px; bottom:10px; z-index:60; padding:7px; background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(18px); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); }
  .mobile-bottom a { display:grid; place-items:center; gap:2px; color:var(--muted); font-size:.64rem; font-weight:750; min-height:52px; border-radius:12px; }
  .mobile-bottom a.active { background:var(--primary-soft); color:var(--primary-2); }
  .course-hero { grid-template-columns:1fr; }
  .course-hero-visual { min-height:160px; font-size:4rem; }
}
@media (max-width:640px) {
  .container { width:min(100% - 28px,1180px); }
  .grid-2,.grid-3,.grid-4,.form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .hero { min-height:650px; align-items:flex-end; }
  .hero-bg { object-position:62% center; opacity:.48; }
  .hero::before { background:linear-gradient(0deg,var(--bg) 14%,color-mix(in srgb,var(--bg) 85%,transparent) 65%,color-mix(in srgb,var(--bg) 55%,transparent)); }
  .hero-content { padding:80px 0 55px; }
  .hero-actions .btn { width:100%; }
  .feature-band { padding:30px 24px; border-radius:24px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid > :last-child { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
  .page-head { flex-direction:column; }
  .page-head .btn { width:100%; }
  .portal-search { display:none; }
  .portal-topbar .spacer { display:block; }
  .stat-card { padding:16px; }
  .course-hero,.welcome-card,.card-pad,.auth-card { padding:20px; }
  .live-room { min-height:auto; }
  .stage { min-height:420px; }
  .stage-controls { width:calc(100% - 28px); justify-content:center; }
  .control-btn { width:46px; height:46px; }
  .toast-wrap { right:10px; top:10px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}