/* ═══════════════════════════════════════════
   MathApp – Modern CSS with SVG Icons & Animations
   ═══════════════════════════════════════════ */

@font-face {
    font-family: "Din Round";
    src: url("https://d35aaqx5ub95lt.cloudfront.net/vendor/f2331bbfd902cdf8971c4d3184a44283.woff2") format("woff2");
    font-style: normal;
    font-weight: 700 900;
}

/* KaTeX fix: hide MathML annotation that causes double text */
.katex .katex-mathml { position: absolute !important; clip: rect(1px,1px,1px,1px) !important; padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden !important; }

:root {
    --primary: #6C5CE7;
    --primary-dark: #5A4BD1;
    --primary-light: #A29BFE;
    --secondary: #00B894;
    --secondary-dark: #00A381;
    --accent: #0984E3;
    --bg: #F8F9FE;
    --bg-card: #FFFFFF;
    --bg-dark: #1A1A2E;
    --text: #2D3436;
    --text-light: #636E72;
    --text-muted: #B2BEC3;
    --border: #E8ECF4;
    --success: #00B894;
    --danger: #E17055;
    --warning: #FDCB6E;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-full: 50px;
    --shadow: 0 2px 16px rgba(108,92,231,0.08);
    --shadow-lg: 0 8px 32px rgba(108,92,231,0.12);
    --shadow-glow: 0 0 20px rgba(108,92,231,0.25);
    --transition: all 0.25s cubic-bezier(.4,0,.2,1);
    --sidebar-w: 240px;
    --node-size: 64px;
    --node-size-sm: 52px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Scrollbar — minimal, transparent */
* {
    scrollbar-width: none;
}
body {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}
::-webkit-scrollbar { width: 0; background: transparent; }
body::-webkit-scrollbar { width: 4px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg); color: var(--text); line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; transition: var(--transition); }
a:hover { opacity: 0.85; }

/* ─── SVG Icons ─── */
.icon { width: 20px; height: 20px; flex-shrink: 0; }
.brand-icon { width: 26px; height: 26px; }
.nav-icon { width: 22px; height: 22px; }
.badge-icon { width: 16px; height: 16px; }
.btn-icon { width: 18px; height: 18px; }
.title-icon { width: 24px; height: 24px; vertical-align: -4px; margin-right: 6px; }
.stat-svg { width: 32px; height: 32px; color: var(--primary); }
.feature-icon { width: 36px; height: 36px; color: #fff; }
.empty-icon { width: 48px; height: 48px; color: var(--text-muted); margin-bottom: 12px; }
.back-icon { width: 18px; height: 18px; vertical-align: -3px; }
.mini-icon { width: 16px; height: 16px; vertical-align: -2px; }
.tiny-icon { width: 14px; height: 14px; vertical-align: -2px; }
.status-icon { width: 28px; height: 28px; color: var(--text-muted); }
.status-icon.completed-icon { color: var(--success); }
.xp-mini { width: 14px; height: 14px; vertical-align: -2px; }
.explain-icon { width: 16px; height: 16px; vertical-align: -3px; color: var(--accent); }
.tf-icon { width: 18px; height: 18px; vertical-align: -3px; }
.tf-icon.correct { color: var(--success); }
.tf-icon.wrong { color: var(--danger); }
.settings-section-icon { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; color: var(--primary); }
.badge-mini-icon { width: 16px; height: 16px; vertical-align: -2px; }

/* ─── Animations ─── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pathFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes popIn {
    0% { opacity: 0; transform: scale(0.8); }
    60% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-30px); }
}
@keyframes fillBar {
    from { width: 0; }
    to { width: var(--target-width); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes nodeGlow {
    0%, 100% { box-shadow: 0 6px 0 #3D8C00, 0 0 0 0 rgba(88,204,2,0.3); }
    50% { box-shadow: 0 6px 0 #3D8C00, 0 0 0 12px rgba(88,204,2,0); }
}
@keyframes nodeBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes nodePopIn {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.fade-in { animation: fadeIn 0.4s ease both; }
.pop-in { animation: popIn 0.4s ease both; }
.slide-in { animation: slideIn 0.35s ease both; }
.slide-out { animation: slideOut 0.25s ease both; }
.pulse { animation: pulse 2s ease-in-out infinite; }
.animate-fill { animation: fillBar 1s ease both; width: var(--target-width); }

/* ─── Buttons ─── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 22px; border-radius: var(--radius-full); font-weight: 600;
    font-size: 0.95rem; border: 2px solid transparent; cursor: pointer;
    transition: var(--transition); text-decoration: none; font-family: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: var(--shadow-glow); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { opacity: 0.9; }
.btn-sm { padding: 6px 14px; font-size: 0.82rem; }
.btn-lg { padding: 14px 32px; font-size: 1.05rem; }
.btn-full { width: 100%; }

/* ─── Forms ─── */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 12px 16px; border: 2px solid var(--border); border-radius: var(--radius-sm);
    font-size: 1rem; transition: var(--transition); background: var(--bg); font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,92,231,0.15);
}
.field-error { color: var(--danger); font-size: 0.82rem; margin-top: 4px; display: block; }

/* ─── Alerts ─── */
.alert { padding: 12px 18px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.9rem; }
.alert-error, .alert-danger { background: #FFEAEA; color: var(--danger); border: 1px solid #FFCDD2; }
.alert-success { background: #E8F8F5; color: var(--success); border: 1px solid #A3E4D7; }

/* ─── Landing Page (Dark) ─── */
.landing-dark { background: #0D1117; color: #fff; }

.land-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px; position: sticky; top: 0; z-index: 100;
    background: rgba(13,17,23,0.9); backdrop-filter: blur(12px);
    border-bottom: 1px solid #1A1D2E;
}
.land-nav-brand { font-size: 1.3rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; }
.land-nav-links { display: flex; align-items: center; gap: 16px; }
.land-nav-links a { color: #8A8FA8; font-weight: 500; font-size: 0.92rem; text-decoration: none; }
.land-nav-links a:hover { color: #fff; }

.land-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 22px; border-radius: 12px; font-weight: 700;
    font-size: 0.92rem; text-decoration: none; transition: all 0.2s ease;
}
.land-btn-ghost { color: #fff; border: 2px solid #2A2E3D; background: transparent; }
.land-btn-ghost:hover { border-color: #58CC02; color: #58CC02; }
.land-btn-green { background: #58CC02; color: #fff; border: 2px solid #58CC02; }
.land-btn-green:hover { background: #4CAF00; transform: translateY(-1px); }
.land-btn-lg { padding: 14px 32px; font-size: 1rem; }

/* Hero */
.land-hero {
    display: flex; align-items: center; justify-content: center; gap: 60px;
    padding: 80px 32px 60px; max-width: 1100px; margin: 0 auto;
}
.land-hero-content { max-width: 520px; }
.land-hero-badge {
    display: inline-block; background: rgba(88,204,2,0.12); color: #58CC02;
    padding: 6px 16px; border-radius: 50px; font-size: 0.82rem; font-weight: 700;
    margin-bottom: 16px;
}
.land-hero-content h1 { font-size: 3rem; line-height: 1.1; margin-bottom: 8px; }
.land-hero-tagline { font-size: 1.15rem; color: #58CC02; font-weight: 600; margin-bottom: 14px; }
.land-gradient {
    background: linear-gradient(135deg, #58CC02, #1CB0F6, #6C5CE7);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.land-hero-sub { font-size: 1.1rem; color: #8A8FA8; margin-bottom: 28px; line-height: 1.6; }
.land-hero-btns { margin-bottom: 24px; }
.land-hero-trust { display: flex; gap: 20px; flex-wrap: wrap; }
.land-trust-item { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #8A8FA8; }
.land-trust-item .icon { width: 18px; height: 18px; }

/* Phone mockup */
.land-phone {
    width: 260px; height: 420px; background: #1A1D2E; border-radius: 28px;
    border: 3px solid #2A2E3D; padding: 20px; display: flex; flex-direction: column;
    align-items: center; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.land-phone-screen { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 30px; }
.lp-node {
    width: 56px; height: 56px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
}
.lp-node .icon { width: 22px; height: 22px; }
.lp-done { background: #58CC02; color: #fff; box-shadow: 0 4px 0 #3D8C00; }
.lp-current { background: #58CC02; color: #fff; box-shadow: 0 4px 0 #3D8C00; outline: 3px dashed rgba(88,204,2,0.4); outline-offset: 5px; }
.lp-locked { background: #2A2E3D; color: #555B6E; box-shadow: 0 4px 0 #1A1D2E; }
.land-phone-screen .lp-node:nth-child(2) { transform: translateX(-30px); }
.land-phone-screen .lp-node:nth-child(4) { transform: translateX(30px); }


/* ─── Auth Pages (Dark) ─── */
.auth-dark { background: #0D1117; min-height: 100vh; }
.auth-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.auth-card {
    background: #1A1D2E; border-radius: 20px; padding: 40px;
    width: 100%; max-width: 420px; border: 1px solid #2A2E3D;
}
.auth-logo {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    font-size: 1.3rem; font-weight: 800; color: #fff; text-decoration: none;
    margin-bottom: 24px;
}
.auth-card h1 { text-align: center; font-size: 1.5rem; color: #fff; margin-bottom: 4px; }
.auth-sub { text-align: center; color: #636E82; font-size: 0.9rem; margin-bottom: 24px; }

.auth-alert {
    background: rgba(255,75,75,0.1); border: 1px solid rgba(255,75,75,0.3);
    border-radius: 12px; padding: 12px 16px; color: #FF6B6B;
    font-size: 0.88rem; margin-bottom: 16px;
}
.auth-alert p { margin: 2px 0; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field label { display: block; font-size: 0.82rem; color: #8A8FA8; font-weight: 600; margin-bottom: 6px; }
.auth-input-wrap {
    display: flex; align-items: center; gap: 10px;
    background: #0D1117; border: 2px solid #2A2E3D; border-radius: 12px;
    padding: 0 14px; transition: border-color 0.2s;
}
.auth-input-wrap:focus-within { border-color: #58CC02; }
.auth-input-icon { width: 18px; height: 18px; color: #636E82; flex-shrink: 0; }
.auth-input-wrap input {
    flex: 1; background: none; border: none; color: #fff; padding: 13px 0;
    font-size: 0.95rem; font-family: inherit; outline: none;
}
.auth-input-wrap input::placeholder { color: #3A3F50; }

.auth-submit {
    width: 100%; padding: 14px; background: #58CC02; color: #fff; border: none;
    border-radius: 12px; font-size: 1rem; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: all 0.2s; margin-top: 4px;
}
.auth-submit:hover { background: #4CAF00; transform: translateY(-1px); }

.auth-switch { text-align: center; color: #636E82; font-size: 0.88rem; margin-top: 18px; }
.auth-switch a { color: #58CC02; font-weight: 600; }

/* ─── Onboarding (Dark) ─── */
.onboard-card {
    background: #1A1D2E; border-radius: 20px; padding: 40px;
    width: 100%; max-width: 520px; border: 1px solid #2A2E3D; text-align: center;
}
.onboard-header { margin-bottom: 28px; }
.onboard-icon-circle {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
    background: linear-gradient(135deg, #58CC02, #1CB0F6);
    display: flex; align-items: center; justify-content: center;
}
.onboard-header h1 { font-size: 1.4rem; color: #fff; margin-bottom: 4px; }
.onboard-header p { color: #636E82; font-size: 0.9rem; }

.ob-step-label {
    display: flex; align-items: center; gap: 6px; justify-content: center;
    font-size: 0.78rem; color: #636E82; font-weight: 600; margin-bottom: 10px;
}
.ob-step-top {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.ob-back {
    width: 36px; height: 36px; border-radius: 50%; background: #0D1117;
    border: 2px solid #2A2E3D; display: flex; align-items: center; justify-content: center;
    color: #636E82; cursor: pointer; transition: all 0.2s; text-decoration: none;
    flex-shrink: 0; font-family: inherit;
}
.ob-back:hover { border-color: #58CC02; color: #fff; }
.ob-back .icon { width: 18px; height: 18px; }
.ob-step-top .ob-step-label { margin-bottom: 0; flex: 1; }
.ob-step-label .icon { width: 16px; height: 16px; }
.ob-step h2 { font-size: 1.15rem; color: #fff; margin-bottom: 16px; }

.ob-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ob-grid-compact { gap: 6px; }
.ob-chip {
    padding: 9px 18px; background: #0D1117; border: 2px solid #2A2E3D;
    border-radius: 50px; color: #B2BEC3; font-size: 0.88rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.ob-chip:hover { border-color: #58CC02; color: #fff; }
.ob-chip.selected { background: #58CC02; border-color: #58CC02; color: #fff; transform: scale(1.05); }

.ob-grid-list { display: flex; flex-direction: column; gap: 8px; }
.ob-list-btn {
    display: flex; align-items: center; gap: 14px; text-align: left;
    padding: 14px 18px; background: #0D1117; border: 2px solid #2A2E3D;
    border-radius: 14px; color: #fff; cursor: pointer; transition: all 0.15s;
    font-family: inherit; font-size: 0.92rem; width: 100%;
}
.ob-list-btn .icon { width: 24px; height: 24px; flex-shrink: 0; }
.ob-list-btn small { color: #636E82; font-weight: 400; }
.ob-list-btn:hover { border-color: #58CC02; }
.ob-list-btn.selected { background: #58CC02; border-color: #58CC02; }
.ob-list-btn.selected small { color: rgba(255,255,255,0.7); }

.ob-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.ob-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #2A2E3D;
    transition: all 0.3s;
}
.ob-dot.active { background: #58CC02; width: 24px; border-radius: 4px; }

@media (max-width: 480px) {
    .auth-card, .onboard-card { padding: 28px 20px; }
}

/* ─── Duolingo-Style Auth ─── */
.auth-duo { background: #131620; min-height: 100vh; }
.duo-auth-page { min-height: 100vh; display: flex; flex-direction: column; }
.duo-topbar {
    display: flex; align-items: center; padding: 16px 24px; position: sticky; top: 0;
    background: #131620; z-index: 10;
}
.duo-close-btn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    color: #636E82; text-decoration: none; border: none; background: none; cursor: pointer;
}
.duo-close-btn:hover { color: #fff; }
.duo-topbar-btn {
    padding: 8px 18px; border: 2px solid #1CB0F6; border-radius: 14px;
    color: #1CB0F6; font-size: 0.82rem; font-weight: 800; text-decoration: none;
    letter-spacing: 0.5px; transition: all 0.2s;
}
.duo-topbar-btn:hover { background: rgba(28,176,246,0.1); }
.duo-auth-center {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 0 24px 60px; max-width: 460px;
    margin: 0 auto; width: 100%;
}
.duo-auth-title {
    font-size: 1.5rem; font-weight: 800; color: #fff; text-align: center;
    margin-bottom: 24px;
}
.duo-form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.duo-input-wrap {
    position: relative; width: 100%;
    background: #1A1D2E; border: 2px solid #2A2E3D; border-radius: 14px;
    transition: border-color 0.2s;
}
.duo-input-wrap:focus-within { border-color: #4A90D9; }
.duo-input-wrap.duo-input-ok { border-color: #58CC02; }
.duo-input-wrap.duo-input-error { border-color: #FF4B4B; }
.duo-input {
    width: 100%; padding: 16px 18px; background: none; border: none;
    color: #fff; font-size: 1rem; font-family: inherit; outline: none;
}
.duo-input::placeholder { color: #4A5568; }
.duo-input-pw { display: flex; align-items: center; }
.duo-input-pw .duo-input { flex: 1; }
.duo-forgot-link {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    color: #4A90D9; font-size: 0.78rem; font-weight: 800; text-decoration: none;
    letter-spacing: 0.3px;
}
.duo-forgot-link:hover { color: #1CB0F6; }
.duo-eye-btn {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 4px;
}
.duo-check-icon {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center;
}
.duo-spinner {
    width: 16px; height: 16px; border: 2px solid #2A2E3D; border-top-color: #636E82;
    border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.duo-field-msg {
    font-size: 0.78rem; padding: 4px 4px 0; min-height: 0;
    color: #636E82; transition: all 0.2s;
}
.duo-field-msg:empty { display: none; }
.duo-field-error { color: #FF4B4B; }
.duo-suggestion {
    color: #1CB0F6; font-weight: 700; text-decoration: none;
}
.duo-suggestion:hover { text-decoration: underline; }
.duo-submit {
    width: 100%; padding: 16px; background: #1CB0F6; color: #fff; border: none;
    border-radius: 14px; font-size: 0.95rem; font-weight: 800; cursor: pointer;
    font-family: inherit; letter-spacing: 0.5px; transition: all 0.2s;
    text-transform: uppercase; margin-top: 8px;
}
.duo-submit:hover { background: #1A9FE0; transform: translateY(-1px); }
.duo-submit-disabled {
    background: #2A2E3D; color: #4A5568; cursor: not-allowed;
    pointer-events: none;
}
.duo-hint {
    color: #636E82; font-size: 0.85rem; line-height: 1.5; margin-top: 12px;
    text-align: center;
}
.duo-hint a { color: #1CB0F6; }
.duo-alert {
    background: rgba(255,75,75,0.1); border: 1px solid rgba(255,75,75,0.3);
    border-radius: 12px; padding: 12px 16px; color: #FF6B6B;
    font-size: 0.85rem; margin-bottom: 16px; width: 100%; text-align: center;
}
.duo-legal {
    margin-top: 24px; text-align: center;
}
.duo-legal p { color: #4A5568; font-size: 0.75rem; line-height: 1.5; }
.duo-legal a { color: #1CB0F6; font-weight: 700; }
.duo-step { display: none; width: 100%; text-align: center; }
.duo-step.active { display: block; animation: fadeIn 0.3s ease; }

/* Social Auth Buttons */
.duo-social-divider {
    display: flex; align-items: center; gap: 12px; margin: 16px 0; width: 100%;
}
.duo-social-divider::before, .duo-social-divider::after {
    content: ''; flex: 1; height: 1px; background: #2A2E3D;
}
.duo-social-divider span { color: #4A5568; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.duo-social-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.duo-social-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 20px; background: #1A1D2E; border: 2px solid #2A2E3D;
    border-radius: 14px; color: #B2BEC3; font-size: 0.88rem; font-weight: 700;
    text-decoration: none; transition: all 0.2s;
}
.duo-social-btn:hover { border-color: #3A3F50; color: #fff; background: #1E2235; }

/* ─── Public Pages ─── */
.public-page { min-height: 100vh; }
.public-content { max-width: 700px; margin: 40px auto; padding: 0 24px; }
.public-content h1 { margin-bottom: 20px; }
.public-content p { color: var(--text-light); margin-bottom: 16px; line-height: 1.7; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 32px; }
.pricing-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 32px;
    box-shadow: var(--shadow); text-align: center; border: 2px solid var(--border); transition: var(--transition);
}
.pricing-card:hover { transform: translateY(-4px); }
.pricing-card.featured { border-color: var(--primary); }
.pricing-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.pricing-card .price { font-size: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 16px; }
.pricing-card ul { list-style: none; margin-bottom: 24px; }
.pricing-card li { padding: 6px 0; color: var(--text-light); }

/* ─── App Layout ─── */
.app-layout { background: var(--bg); }
.app-wrapper { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w); background: #1A1D2E; border-right: 1px solid #2A2E3D;
    display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 50; padding: 20px 0;
}
.sidebar-brand { font-size: 1.3rem; font-weight: 800; color: #fff; padding: 0 20px 20px; display: flex; align-items: center; gap: 8px; }
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; scrollbar-width: none; }
.sidebar-nav::-webkit-scrollbar { display: none; }
.nav-divider { height: 1px; background: #2A2E3D; margin: 8px 16px; }
.nav-item {
    display: flex; align-items: center; gap: 10px; padding: 12px 20px;
    color: rgba(255,255,255,0.5); font-weight: 500; transition: var(--transition);
    font-size: 0.95rem; text-decoration: none;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.active { background: rgba(108,92,231,0.2); color: #fff; font-weight: 600; border-right: 3px solid var(--primary); }
.nav-item-small { font-size: 0.82rem; padding: 8px 20px; opacity: 0.6; }
.nav-item-small:hover { opacity: 1; }
.nav-profile-item { gap: 10px; }
.nav-avatar {
    width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: #2A2E3D; display: flex; align-items: center; justify-content: center;
}
.nav-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.nav-avatar .icon { width: 16px; height: 16px; color: #636E82; }
.sidebar-footer { border-top: 1px solid #2A2E3D; padding: 8px 0; }

.app-main { flex: 1; margin-left: var(--sidebar-w); }
.app-header {
    padding: 16px 32px; background: var(--bg-card); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: flex-end;
}
.header-stats { display: flex; gap: 12px; }
.stat-badge {
    padding: 6px 14px; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
}
.stat-badge.xp { background: #EDE7F6; color: var(--primary); }
.stat-badge.streak { background: #FFF3E0; color: #E17055; }
.stat-badge.rank { background: #E8F8F5; color: var(--secondary); }

.app-content { padding: 32px; max-width: 900px; }

/* ─── Mobile Nav ─── */
.mobile-nav {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: #1A1D2E; border-top: 1px solid #2A2E3D;
    padding: 8px 0; z-index: 100; justify-content: space-around;
}
.mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    padding: 8px 12px; color: rgba(255,255,255,0.35); transition: var(--transition);
    text-decoration: none; font-size: 0; font-weight: 500;
}
.mobile-nav-item .icon { width: 24px; height: 24px; }
.mobile-nav-item span { display: none; }
.mobile-nav-item.active { color: #fff; }

/* ═══════════════════════════════════════════
   DUOLINGO-STYLE LEARN PATH (3-Column)
   ═══════════════════════════════════════════ */
.page-title { font-size: 1.2rem; margin-bottom: 16px; display: flex; align-items: center; }

/* 3-column learn layout */
.learn-layout .learn-wrapper {
    display: flex;
    min-height: 100vh;
}
.learn-layout .sidebar { position: fixed; }
.learn-main {
    flex: 1;
    margin-left: var(--sidebar-w); padding: 0;
    display: flex; flex-direction: column; align-items: center;
    background: #1A1D2E;
    min-height: 100vh;
    font-family: "Din Round", Arial, Helvetica, sans-serif;
    color: white;
    -webkit-font-smoothing: antialiased;
}

/* Sticky header wrapper */
.learn-sticky-header {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 5px;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    background: #1A1D2E;
    max-width: 540px;
    width: calc(100% - 10px);
}

/* Top stats bar */
.learn-topbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 14px 20px;
    background: #1A1D2E;
    border-bottom: 1px solid #2A2E3D;
}
.topbar-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 1rem;
    color: #B2BEC3;
}
.topbar-icon { width: 28px; height: 28px; }
.topbar-klasse { color: #58CC02; }
.topbar-streak { color: #FF9600; }
.topbar-gems { color: #1CB0F6; }
.topbar-lives { color: #FF4B4B; }

/* ═══ Duolingo-exact Top Card ═══ */
.duo-top-card {
    width: min(calc(100% - 14px), 529px);
    min-height: 80px;
    background: #4edb00;
    border-radius: 12px;
    padding: 18px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}
.duo-top-card-locked {
    background: #354b55;
}
.duo-section {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    opacity: 0.96;
    color: #fff;
}
.duo-section-title {
    margin-top: 10px;
    font-size: 21px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
}

/* ═══ Duolingo-exact Path ═══ */
.duo-path {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 30px;
    gap: 32px;
    width: 100%;
    max-width: 540px;
}

/* Zig-zag offset for nodes */
.duo-node-row:nth-child(6n+1) { margin-left: 0; }
.duo-node-row:nth-child(6n+2) { margin-left: -50px; }
.duo-node-row:nth-child(6n+3) { margin-left: -30px; }
.duo-node-row:nth-child(6n+4) { margin-left: 40px; }
.duo-node-row:nth-child(6n+5) { margin-left: 60px; }
.duo-node-row:nth-child(6n+6) { margin-left: 20px; }

.duo-chest-row:nth-child(6n+1) { margin-left: 0; }
.duo-chest-row:nth-child(6n+2) { margin-left: -50px; }
.duo-chest-row:nth-child(6n+3) { margin-left: -30px; }
.duo-chest-row:nth-child(6n+4) { margin-left: 40px; }
.duo-chest-row:nth-child(6n+5) { margin-left: 60px; }
.duo-chest-row:nth-child(6n+6) { margin-left: 20px; }

.duo-node-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.duo-node-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    padding-top: 0;
    gap: 16px;
}

.duo-chest-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══ Start/Weiter Label ═══ */
.duo-start-label {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    background: #1A1D2E;
    color: #4edb00;
    border: 2px solid #3a515b;
    padding: 12px 15px 10px;
    border-radius: 9px;
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.14);
    animation: duo-label-bob 1.45s ease-in-out infinite;
}
.duo-start-label::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #1A1D2E;
    border-right: 2px solid #3a515b;
    border-bottom: 2px solid #3a515b;
    border-top: 0;
    border-left: 0;
    z-index: -1;
}
@keyframes duo-label-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ═══ Base Node ═══ */
.duo-node {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 38px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    min-width: 76px;
    min-height: 76px;
}

/* Star shape */
.star-shape {
    display: block;
    width: 31px;
    height: 31px;
    background: currentColor;
    clip-path: polygon(50% 3%, 62% 34%, 95% 35%, 68% 55%, 78% 88%, 50% 69%, 22% 88%, 32% 55%, 5% 35%, 38% 34%);
}

/* Check shape for completed */
.check-shape {
    display: block;
    position: relative;
    width: 34px;
    height: 24px;
    z-index: 2;
    margin-top: 2px;
}
.check-shape::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 22px;
    height: 12px;
    border-left: 6px solid #d89700;
    border-bottom: 6px solid #d89700;
    transform: rotate(-45deg);
    border-radius: 3px;
}

/* ═══ Active Node — conic gradient ring ═══ */
.duo-active-node {
    width: 98px;
    height: 98px;
    position: relative;
    --lesson-progress: 0deg;
    background:
        radial-gradient(circle, #1A1D2E 0 42px, transparent 43px),
        conic-gradient(#58cc02 0deg var(--lesson-progress), #40545d var(--lesson-progress) 360deg);
    color: white;
    box-shadow: none;
    z-index: 3;
}
.duo-active-node > span,
.duo-active-node::before,
.duo-active-node::after {
    pointer-events: none;
}
.duo-active-node::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    bottom: 20px;
    left: 16px;
    border-radius: 50%;
    background: #58cc02;
    box-shadow: 0 7px 0 #3f9700;
}
.duo-active-node::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 50%;
    width: 17px;
    height: 16px;
    transform: translateX(-50%);
    background: #58cc02;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    z-index: 1;
}
.duo-active-node .star-shape {
    position: relative;
    z-index: 2;
    width: 31px;
    height: 31px;
    margin-top: -4px;
}
.duo-active-node:active::before {
    box-shadow: 0 3px 0 #3f9700;
}
.duo-active-node:active {
    transform: translateY(4px);
}

/* ═══ Locked Node ═══ */
.duo-locked-node {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    background: #354b55;
    color: #78919b;
    box-shadow: 0 7px 0 #273b44;
    cursor: default;
}
.duo-locked-node .star-shape {
    width: 35px;
    height: 35px;
}

/* ═══ Completed Node — gold ═══ */
.duo-completed-node {
    width: 66px;
    height: 66px;
    min-width: 66px;
    min-height: 66px;
    border-radius: 50%;
    background:
        linear-gradient(135deg, transparent 0 29%, rgba(255, 242, 91, 0.75) 30% 42%, transparent 43% 100%),
        #ffc800;
    color: #d89700;
    box-shadow: 0 7px 0 #d99000;
    cursor: default;
}

/* ═══ Trophy/Test Node ═══ */
.duo-trophy-node {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    background: #344a54;
    color: #708892;
    box-shadow: 0 7px 0 #263a43;
    overflow: hidden;
    cursor: default;
}
.exam-icon {
    position: relative;
    width: 31px;
    height: 36px;
    border-radius: 4px;
    background: #708892;
    box-shadow: inset 0 5px 0 #8299a2, inset 0 -5px 0 #5c737d;
    filter: drop-shadow(0 2px 0 #263a43);
    z-index: 2;
}
.exam-icon::before {
    content: "";
    position: absolute;
    left: 7px;
    top: -5px;
    width: 17px;
    height: 9px;
    border-radius: 5px 5px 3px 3px;
    background: #708892;
    box-shadow: inset 0 3px 0 #8299a2;
}
.exam-icon::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 12px;
    width: 18px;
    height: 4px;
    border-radius: 3px;
    background: #344a54;
    box-shadow: 0 8px 0 #344a54, 2px 15px 0 -1px #344a54;
}

/* ═══ CSS-only Chest ═══ */
.duo-chest {
    position: relative;
    width: 78px;
    height: 64px;
    border: none;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 5px 0 rgba(31, 48, 55, 0.95));
    transition: transform 140ms ease, filter 160ms ease;
    display: block;
    text-decoration: none;
}
.chest-lid,
.chest-body,
.chest-lock,
.chest-inside,
.chest-gold {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.chest-lid {
    top: 3px;
    width: 54px;
    height: 21px;
    background: #647f8b;
    border-radius: 3px 3px 0 0;
    border: 5px solid #4d6672;
    border-bottom: 0;
    box-shadow: inset 0 6px 0 #78939f;
    z-index: 4;
    transform-origin: 50% 100%;
}
.chest-body {
    top: 21px;
    width: 78px;
    height: 37px;
    background: #5b7480;
    border-radius: 3px;
    box-shadow: inset 0 10px 0 #6f8995, inset 0 -7px 0 #3f5660, inset 13px 0 0 #4d6672, inset -13px 0 0 #4d6672;
    z-index: 2;
}
.chest-body::before,
.chest-body::after {
    content: "";
    position: absolute;
    top: 19px;
    width: 23px;
    height: 5px;
    border-radius: 3px;
    background: #334b55;
}
.chest-body::before { left: 11px; }
.chest-body::after { right: 11px; }
.chest-band {
    position: absolute;
    top: 14px;
    width: 14px;
    height: 48px;
    border-radius: 2px;
    background: #6f8995;
    box-shadow: inset 0 7px 0 #829ba5, inset 0 -7px 0 #4d6672;
    z-index: 3;
}
.band-left { left: 3px; }
.band-right { left: auto; right: 3px; }
.chest-lock {
    top: 39px;
    width: 14px;
    height: 13px;
    border-radius: 4px 4px 5px 5px;
    background: #2d4650;
    z-index: 6;
    box-shadow: inset 0 3px 0 #405964, 0 1px 0 rgba(20, 32, 38, 0.4);
}
.chest-lock::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 2px;
    width: 10px;
    height: 10px;
    border: 3px solid #2d4650;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    box-sizing: border-box;
}
.chest-lock::after {
    content: "";
    position: absolute;
    left: 5.5px;
    top: 5px;
    width: 3px;
    height: 5px;
    border-radius: 2px;
    background: #243841;
}
.chest-inside {
    top: 21px;
    width: 70px;
    height: 20px;
    border-radius: 3px 3px 8px 8px;
    background: #243841;
    opacity: 0;
    z-index: 1;
}
.chest-gold {
    top: 22px;
    width: 54px;
    height: 24px;
    opacity: 0;
    z-index: 2;
}
.chest-gold::before,
.chest-gold::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #ffd84a;
    box-shadow: 13px 2px 0 #ffc92f, 25px 0 0 #ffe875, 38px 3px 0 #f7b82b;
}
.chest-gold::before { left: 0; top: 7px; width: 13px; height: 13px; }
.chest-gold::after { left: 7px; top: 0; width: 11px; height: 11px; }

/* Chest locked (gray) */
.duo-chest-locked { cursor: default; pointer-events: none; }

/* Chest ready (gold, clickable) */
.duo-chest-ready {
    filter: drop-shadow(0 6px 0 rgba(33, 50, 58, 0.95)) drop-shadow(0 0 8px rgba(255, 190, 40, 0.22));
}
.duo-chest-ready .chest-lid { background: #c88331; border-color: #9a6129; box-shadow: inset 0 6px 0 #e0a14b; }
.duo-chest-ready .chest-body { background: #b96c2f; box-shadow: inset 0 10px 0 #d78c3b, inset 0 -7px 0 #85481f, inset 15px 0 0 #8d542c, inset -15px 0 0 #8d542c; }
.duo-chest-ready .chest-body::before,
.duo-chest-ready .chest-body::after { background: #6f3e24; }
.duo-chest-ready .chest-band { background: #ffd24a; box-shadow: inset 0 7px 0 #ffe37b, inset 0 -7px 0 #c99a20; }
.duo-chest-ready .chest-lock { background: #f5be32; box-shadow: inset 0 3px 0 #ffe37b, 0 1px 0 rgba(118, 74, 13, 0.4); }
.duo-chest-ready .chest-lock::before { border-color: #f5be32; }
.duo-chest-ready .chest-lock::after { background: #8b5b12; }
.duo-chest-ready:active { transform: translateY(3px); filter: drop-shadow(0 3px 0 rgba(33, 50, 58, 0.95)); }

/* Chest looted (gray, open) */
.duo-chest-looted { cursor: default; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(31, 48, 55, 0.95)); }
.duo-chest-looted .chest-lid { top: -13px; width: 58px; height: 22px; transform: translateX(-50%) rotate(-8deg); background: #647f8b; border: 5px solid #4d6672; border-bottom: 0; border-radius: 3px 3px 1px 1px; box-shadow: inset 0 6px 0 #78939f, 0 5px 0 rgba(25, 39, 45, 0.35); }
.duo-chest-looted .chest-body { top: 23px; height: 35px; box-shadow: inset 0 7px 0 #263941, inset 0 -7px 0 #3f5660, inset 13px 0 0 #4d6672, inset -13px 0 0 #4d6672; }
.duo-chest-looted .chest-body::before { top: 18px; }
.duo-chest-looted .chest-body::after { top: 18px; }
.duo-chest-looted .chest-band { top: 19px; height: 44px; }
.duo-chest-looted .chest-inside { top: 18px; width: 68px; height: 17px; opacity: 1; background: #1f3138; }
.duo-chest-looted .chest-lock { opacity: 0; }
.duo-chest-looted .chest-gold { opacity: 0; }

/* ═══ Divider between sections ═══ */
.duo-divider {
    width: min(calc(100% - 14px), 529px);
    display: flex;
    align-items: center;
    gap: 16px;
    color: #526770;
    font-weight: 900;
    margin: 10px 0;
    padding: 0 7px;
}
.duo-divider span { flex: 1; height: 2px; background: #324852; }
.duo-divider p { white-space: nowrap; font-size: 0.85rem; }

/* Hide old unit section header */
.unit-section-header { display: none; }

/* ═══ Mobile adjustments ═══ */
@media (max-width: 480px) {
    .duo-node-row:nth-child(6n+2) { margin-left: -30px; }
    .duo-node-row:nth-child(6n+4) { margin-left: 25px; }
    .duo-node-row:nth-child(6n+5) { margin-left: 35px; }
    .duo-chest-row:nth-child(6n+2) { margin-left: -30px; }
    .duo-chest-row:nth-child(6n+4) { margin-left: 25px; }
    .duo-chest-row:nth-child(6n+5) { margin-left: 35px; }
    .duo-top-card { padding: 14px 14px; }
    .duo-section-title { font-size: 18px; }
}

/* Right sidebar — hidden, info is in topbar now */
.right-sidebar {
    display: none;
}
.right-stats {
    display: flex; justify-content: space-around; padding: 12px 0 20px;
    border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.rs-stat {
    display: flex; align-items: center; gap: 5px; font-weight: 700;
    font-size: 0.95rem; color: var(--text);
}
.rs-card {
    background: var(--bg); border-radius: var(--radius); margin-bottom: 16px;
    border: 1px solid var(--border); overflow: hidden;
}
.rs-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; font-weight: 700; font-size: 0.92rem;
    border-bottom: 1px solid var(--border);
}
.rs-link { font-size: 0.82rem; font-weight: 600; color: var(--primary); }
.rs-card-body { padding: 14px 16px; }
.rs-league-icon { width: 32px; height: 32px; color: var(--warning); margin-bottom: 6px; }
.rs-card-body p { font-size: 0.88rem; color: var(--text-light); }

.rs-quest { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rs-quest-icon { width: 28px; height: 28px; color: var(--primary); flex-shrink: 0; }
.rs-quest-info { flex: 1; }
.rs-quest-info span { font-size: 0.85rem; font-weight: 500; }
.rs-quest-bar { height: 8px; background: var(--border); border-radius: 4px; margin-top: 4px; overflow: hidden; }
.rs-quest-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.4s ease; }
.rs-empty { font-size: 0.85rem; color: var(--text-muted); }

.rs-footer-links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.rs-footer-links a { font-size: 0.78rem; color: var(--text-muted); }

/* Result page stars */
.result-stars { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.result-star { width: 36px; height: 36px; }
.result-hint { font-size: 0.9rem; color: var(--text-light); margin-bottom: 20px; text-align: center; }

/* Chest animation */
.chest-animation { margin-bottom: 16px; }
.chest-big-icon { width: 72px; height: 72px; color: #F39C12; }

/* Lesson round info */
.lesson-header-info { flex: 1; }
.lesson-round-info {
    display: flex; align-items: center; gap: 8px; font-size: 0.82rem;
    color: var(--text-light); margin-top: 2px;
}
.mini-stars { display: flex; gap: 2px; }
.mini-star { width: 14px; height: 14px; }

/* ─── Detail Pages ─── */
.back-link { color: var(--text-light); font-size: 0.9rem; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 4px; }
.detail-header { margin-bottom: 28px; }
.detail-main-icon { width: 48px; height: 48px; color: var(--primary); margin-bottom: 8px; }
.detail-header h1 { font-size: 1.8rem; }
.detail-header p { color: var(--text-light); }

.units-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.unit-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 24px;
    box-shadow: var(--shadow); transition: var(--transition);
}
.unit-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.unit-card h3 { margin-bottom: 6px; }
.unit-card p { color: var(--text-light); font-size: 0.9rem; margin-bottom: 12px; }
.unit-lessons { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.mini-lesson { font-size: 0.88rem; color: var(--text-light); padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.mini-lesson.completed { color: var(--success); }

.lessons-list { display: flex; flex-direction: column; gap: 10px; }
.lesson-list-item {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg-card); border-radius: var(--radius); padding: 16px 20px;
    box-shadow: var(--shadow); transition: var(--transition); text-decoration: none; color: var(--text);
}
.lesson-list-item:hover { box-shadow: var(--shadow-lg); transform: translateX(4px); }
.lesson-list-item.completed { border-left: 4px solid var(--success); }
.lesson-info { display: flex; align-items: center; gap: 14px; }
.lesson-info h3 { font-size: 1rem; }
.lesson-info p { color: var(--text-light); font-size: 0.85rem; }
.lesson-xp { font-weight: 700; color: var(--primary); font-size: 0.9rem; display: flex; align-items: center; gap: 4px; }

/* ─── Lesson Page ─── */
.lesson-page { background: var(--bg); min-height: 100vh; }
.lesson-container { max-width: 640px; margin: 0 auto; padding: 20px; }
.lesson-header { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.close-btn {
    width: 40px; height: 40px; border-radius: 50%; background: var(--bg-card);
    border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
    color: var(--text-light); text-decoration: none; transition: var(--transition);
}
.close-btn:hover { border-color: var(--danger); color: var(--danger); }
.close-btn .icon { width: 18px; height: 18px; }
.lesson-header h2 { flex: 1; font-size: 1.1rem; }
.lesson-progress-bar { width: 100%; height: 10px; background: var(--border); border-radius: 5px; overflow: hidden; }
.lesson-progress-fill {
    height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 5px; transition: width 0.4s cubic-bezier(.4,0,.2,1);
}

.question-card { margin-bottom: 24px; }
.question-number { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }
.question-text { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; line-height: 1.5; }

.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tf-grid { grid-template-columns: 1fr 1fr; }
.option-card {
    display: flex; align-items: center; gap: 10px; padding: 16px;
    background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius);
    cursor: pointer; transition: var(--transition);
}
.option-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.option-card input[type="radio"] { display: none; }
.option-card:has(input:checked) { border-color: var(--primary); background: rgba(108,92,231,0.06); box-shadow: var(--shadow-glow); }
.option-text { font-weight: 500; display: flex; align-items: center; gap: 6px; }

.text-input-group { margin-bottom: 16px; }
.text-answer {
    width: 100%; padding: 14px 18px; border: 2px solid var(--border); border-radius: var(--radius);
    font-size: 1.05rem; transition: var(--transition); font-family: inherit;
}
.text-answer:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,92,231,0.15); }
.lesson-actions { text-align: center; margin-top: 24px; }

/* ─── New question types ─── */
/* Fill blank */
.session-fill-blank { margin-bottom: 20px; }
.fill-context {
    background: #232740; border-radius: 12px; padding: 16px;
    color: #B2BEC3; font-size: 0.95rem; line-height: 1.7; margin-bottom: 14px;
    white-space: pre-wrap;
}
.fill-field { text-align: center; }

/* Find error */
.session-find-error { margin-bottom: 20px; }
.error-display {
    background: #2A1A1A; border: 2px solid #E17055; border-radius: 12px;
    padding: 16px; color: #FF6B6B; font-size: 0.95rem; line-height: 1.7;
    margin-bottom: 10px; white-space: pre-wrap; font-family: monospace;
}
.error-prompt { color: #8A8FA8; font-size: 0.88rem; margin-bottom: 10px; }

/* Order steps & Drag build */
.session-order-steps, .session-drag-build { margin-bottom: 20px; }
.steps-pool, .build-pool {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
    min-height: 48px;
}
.step-chip, .build-chip {
    background: #232740; border: 2px solid #3A3F50; border-radius: 10px;
    padding: 10px 16px; color: #fff; font-weight: 600; font-size: 0.92rem;
    cursor: pointer; transition: all 0.15s ease; user-select: none;
}
.step-chip:hover, .build-chip:hover { border-color: var(--primary); background: #2A2E4A; }
.steps-target, .build-target {
    min-height: 60px; border: 2px dashed #3A3F50; border-radius: 12px;
    padding: 12px; display: flex; flex-wrap: wrap; gap: 8px;
    align-items: flex-start;
}
.steps-target .step-chip, .build-target .build-chip {
    border-color: var(--success); background: rgba(0,184,148,0.1);
}
.steps-hint, .build-hint { color: #636E82; font-size: 0.85rem; margin: 0; }

/* Speed round */
.speed-mode { position: relative; }
.speed-label {
    display: flex; align-items: center; gap: 6px; justify-content: center;
    color: #FF9600; font-weight: 700; font-size: 0.85rem; margin-bottom: 10px;
}
.speed-label .icon { width: 18px; height: 18px; }

/* Timer bar */
.timer-bar {
    height: 6px; background: #2A2E3D; border-radius: 3px;
    margin-bottom: 16px; overflow: hidden;
}
.timer-fill {
    height: 100%; background: linear-gradient(90deg, #58CC02, #FF9600, #FF4B4B);
    border-radius: 3px; transition: width 0.1s linear; width: 0;
}

/* Card flip */
.session-card-flip { text-align: center; margin-bottom: 20px; }
.flip-card {
    width: 100%; max-width: 300px; height: 180px; margin: 0 auto 16px;
    perspective: 600px; cursor: pointer;
}
.flip-card .flip-front, .flip-card .flip-back {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; font-size: 1.1rem; font-weight: 600;
    transition: transform 0.5s ease;
}
.flip-card .flip-front {
    background: #232740; color: #8A8FA8; transform: rotateY(0);
}
.flip-card .flip-back {
    background: var(--success); color: #fff; transform: rotateY(180deg);
}
.flip-card.flipped .flip-front { transform: rotateY(180deg); }
.flip-card.flipped .flip-back { transform: rotateY(0); }
.flip-card { position: relative; }
.flip-prompt { color: #8A8FA8; font-size: 0.88rem; margin-bottom: 12px; }

/* ─── Explanation Node ─── */
.explanation-body {
    max-width: 600px; margin: 0 auto; padding: 20px 20px 40px;
}
.explanation-icon { text-align: center; margin-bottom: 12px; }
.explanation-title {
    font-size: 1.4rem; font-weight: 800; color: #fff; text-align: center; margin-bottom: 20px;
}
.explanation-content {
    background: #1E2235; border-radius: 14px; padding: 20px;
    color: #B2BEC3; font-size: 0.95rem; line-height: 1.8; margin-bottom: 16px;
}
.explanation-content h3, .explanation-content h2 { color: #fff; margin: 12px 0 8px; }
.explanation-content p { margin-bottom: 10px; }
.explanation-content strong { color: #fff; }
.explanation-media { margin-bottom: 16px; text-align: center; }
.explanation-img { max-width: 100%; border-radius: 12px; }
.explanation-video {
    width: 100%; aspect-ratio: 16/9; border: none; border-radius: 12px;
}
.explanation-section { margin-bottom: 16px; }
.exp-section-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.9rem; font-weight: 700; color: #fff; margin-bottom: 10px;
}
.exp-example {
    background: #1A2E1A; border-left: 3px solid #58CC02; border-radius: 8px;
    padding: 12px 16px; color: #B2BEC3; font-size: 0.9rem; margin-bottom: 8px;
}
.exp-tip {
    background: #2E2A1A; border-left: 3px solid #FF9600; border-radius: 8px;
    padding: 12px 16px; color: #B2BEC3; font-size: 0.9rem; margin-bottom: 8px;
}
.explanation-reward {
    display: flex; justify-content: center; gap: 12px; margin-top: 16px;
}
.exp-reward-badge {
    background: rgba(108,92,231,0.15); color: #A29BFE; padding: 6px 16px;
    border-radius: 50px; font-weight: 700; font-size: 0.85rem;
}
.exp-reward-badge.coins { background: rgba(253,203,110,0.15); color: #FDCB6E; }

/* ─── Select All (multiple correct) ─── */
.session-options.select-all .session-option-card { position: relative; }
.session-options.select-all .session-option-card.selected {
    border-color: #58CC02; background: rgba(88,204,2,0.08);
}
.session-options.select-all .session-option-card .check-mark {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border: 2px solid #3A3F50; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
}
.session-options.select-all .session-option-card.selected .check-mark {
    background: #58CC02; border-color: #58CC02;
}
.session-options.select-all .session-option-card.selected .check-mark .icon {
    color: #fff; width: 14px; height: 14px;
}

/* ─── Match Pairs ─── */
.match-pairs-container { margin-bottom: 20px; }
.match-columns { display: flex; gap: 16px; }
.match-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.match-item {
    background: #232740; border: 2px solid #3A3F50; border-radius: 10px;
    padding: 12px 16px; color: #fff; font-weight: 500; font-size: 0.92rem;
    cursor: pointer; transition: all 0.15s; text-align: center; user-select: none;
}
.match-item:hover { border-color: var(--primary); }
.match-item.selected { border-color: #1CB0F6; background: rgba(28,176,246,0.1); }
.match-item.matched { border-color: #58CC02; background: rgba(88,204,2,0.1); opacity: 0.6; pointer-events: none; }
.match-hint { color: #636E82; font-size: 0.82rem; text-align: center; margin-bottom: 12px; }

/* ─── Image Question ─── */
.question-image {
    max-width: 100%; border-radius: 12px; margin-bottom: 16px;
}

/* ─── Explanation Wrong (feedback) ─── */
.feedback-explanation-wrong {
    color: #FF9600; font-size: 0.85rem; margin-top: 6px; font-style: italic;
}

/* ─── Result Page ─── */
.result-page { background: #0D1117; min-height: 100vh; padding: 32px 20px; }
.result-container {
    max-width: 640px; margin: 0 auto; width: 100%; padding: 0 16px;
    flex-direction: column; align-items: stretch;
    min-height: 100vh; justify-content: center;
}
.result-card {
    background: #1A1D2E; border-radius: var(--radius); padding: 40px 24px;
    box-shadow: var(--shadow-lg); text-align: center; border: 1px solid #2A2E3D;
}
.result-icon-wrap {
    width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
}
.result-icon-wrap.success { background: rgba(0,184,148,0.15); color: var(--success); }
.result-icon-wrap.retry { background: rgba(225,112,85,0.15); color: var(--danger); }
.result-main-icon { width: 40px; height: 40px; }
.result-title { margin-bottom: 24px; color: #fff; }
.result-stats { display: flex; justify-content: center; gap: 32px; margin-bottom: 20px; }
.result-stat { text-align: center; }
.rs-val { display: block; font-size: 1.6rem; font-weight: 800; color: #fff; }
.rs-label { font-size: 0.82rem; color: #636E82; }

/* Stars */
.result-stars-row { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin-bottom: 16px; }
.res-star { width: 40px; height: 40px; }
.res-star-big { width: 52px; height: 52px; }
.star-gold { color: #FDCB6E; }
.star-gray { color: #2A2E3D; }

.result-bar { height: 10px; background: #2A2E3D; border-radius: 5px; margin-bottom: 16px; overflow: hidden; }
.result-bar-fill { height: 100%; background: linear-gradient(90deg, #58CC02, #1CB0F6); border-radius: 5px; }

/* XP Breakdown */
.xp-breakdown {
    background: #0D1117; border-radius: 12px; padding: 12px 16px;
    margin-bottom: 16px; border: 1px solid #2A2E3D;
}
.xp-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; font-size: 0.85rem;
}
.xp-row-label { color: #8A8FA8; }
.xp-row-val { color: #58CC02; font-weight: 700; }
.xp-row-bonus .xp-row-label { color: #FF9600; }
.xp-row-bonus .xp-row-val { color: #FF9600; }
.xp-row-repeat .xp-row-label { color: #636E82; font-style: italic; }

/* Mini Leaderboard (Result Page) */
.lb-mini-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px;
    background: #1A1D2E; margin-bottom: 4px;
    border: 1px solid #2A2E3D;
    transition: box-shadow 0.4s ease, background 0.3s ease;
}
.lb-mini-me {
    background: rgba(88,204,2,0.08);
    border-color: #58CC02;
}
.lb-mini-rank { font-weight: 800; color: #636E82; font-size: 0.82rem; width: 32px; flex-shrink: 0; }
.lb-mini-me .lb-mini-rank { color: #58CC02; }
.lb-mini-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: #2A2E3D;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    overflow: hidden;
}
.lb-mini-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lb-mini-avatar .icon { color: #636E82; width: 18px; height: 18px; }
.lb-mini-avatar-me { background: rgba(88,204,2,0.2); }
.lb-mini-avatar-me .icon { color: #58CC02; }
.lb-mini-name { flex: 1; font-weight: 600; color: #fff; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-mini-me .lb-mini-name { color: #58CC02; }
.lb-mini-xp { font-weight: 700; color: #6C5CE7; font-size: 0.85rem; flex-shrink: 0; }

.result-complete-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(88,204,2,0.12); color: #58CC02;
    padding: 8px 18px; border-radius: 20px; font-weight: 700; font-size: 0.88rem;
    margin-bottom: 20px;
}
.result-round-info { color: #636E82; font-size: 0.9rem; margin-bottom: 20px; }

/* Wrong answers */
.result-wrong-section { text-align: left; margin-bottom: 24px; }
.rw-title { font-size: 0.95rem; color: #8A8FA8; font-weight: 700; margin-bottom: 10px; }
.rw-card {
    background: #0D1117; border-radius: 12px; padding: 14px; margin-bottom: 8px;
    border: 1px solid #2A2E3D;
}
.rw-q { font-weight: 600; color: #fff; margin-bottom: 8px; font-size: 0.92rem; }
.rw-answers { display: flex; gap: 16px; margin-bottom: 6px; }
.rw-given { display: flex; align-items: center; gap: 4px; color: #FF6B6B; font-size: 0.85rem; }
.rw-correct { display: flex; align-items: center; gap: 4px; color: #58CC02; font-size: 0.85rem; }
.rw-explain { display: flex; align-items: flex-start; gap: 4px; color: #636E82; font-size: 0.82rem; margin-top: 4px; }

.result-actions { display: flex; gap: 10px; }

.result-progress { margin-bottom: 28px; }
.progress-bar { width: 100%; height: 12px; background: var(--border); border-radius: 6px; overflow: hidden; }
.progress-fill {
    height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 6px;
}

.result-details { text-align: left; margin-bottom: 28px; }
.result-item {
    display: flex; gap: 12px; padding: 14px; border-radius: var(--radius-sm); margin-bottom: 8px;
    transition: var(--transition);
}
.result-item.correct { background: rgba(0,184,148,0.1); }
.result-item.wrong { background: rgba(225,112,85,0.1); }
.result-item-icon .icon { width: 22px; height: 22px; }
.result-item.correct .result-item-icon { color: var(--success); }
.result-item.wrong .result-item-icon { color: var(--danger); }
.result-question { font-weight: 600; margin-bottom: 4px; color: #fff; }
.result-answer, .result-correct { font-size: 0.88rem; color: #8A8FA8; }
.result-explanation { font-size: 0.88rem; color: var(--accent); margin-top: 4px; display: flex; align-items: flex-start; gap: 4px; }
.result-actions { display: flex; gap: 12px; justify-content: center; }

/* ─── Practice Page ─── */
.practice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.practice-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 28px;
    box-shadow: var(--shadow); text-align: center; transition: var(--transition);
}
.practice-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.practice-icon-wrap {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(108,92,231,0.08);
}
.practice-svg { width: 28px; height: 28px; color: var(--primary); }
.practice-card h3 { margin-bottom: 6px; }
.practice-card p { color: var(--text-light); font-size: 0.88rem; margin-bottom: 14px; }

/* ─── Profile Page (Dark) ─── */
.prof-container { width: 100%; max-width: 500px; padding: 28px 16px 80px; }

.prof-header {
    text-align: center; background: #1A1D2E; border-radius: 20px;
    padding: 32px 20px; margin-bottom: 16px; border: 1px solid #2A2E3D;
}
.prof-avatar-ring {
    width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 12px;
    background: linear-gradient(135deg, #58CC02, #1CB0F6);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.prof-avatar-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.prof-avatar-icon { width: 40px; height: 40px; color: #fff; }
.prof-name { font-size: 1.4rem; color: #fff; margin-bottom: 8px; }
.prof-badges { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.prof-badge {
    padding: 4px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 700;
}
.badge-rank { background: rgba(108,92,231,0.15); color: #6C5CE7; }
.badge-league { background: rgba(253,203,110,0.15); color: #FDCB6E; }
.prof-meta { color: #636E82; font-size: 0.82rem; }

.prof-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px;
}
.prof-stat {
    background: #1A1D2E; border-radius: 14px; padding: 16px; text-align: center;
    border: 1px solid #2A2E3D;
}
.ps-icon {
    width: 40px; height: 40px; border-radius: 10px; margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;
}
.ps-icon .icon { width: 20px; height: 20px; }
.ps-val { display: block; font-size: 1.3rem; font-weight: 800; color: #fff; }
.ps-label { font-size: 0.75rem; color: #636E82; }

.prof-links { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.prof-link-card {
    display: flex; align-items: center; gap: 12px;
    background: #1A1D2E; border-radius: 12px; padding: 14px 16px;
    text-decoration: none; color: #fff; font-weight: 600; font-size: 0.92rem;
    border: 1px solid #2A2E3D; transition: all 0.2s;
}
.prof-link-card:hover { background: #232740; transform: translateX(4px); }
.prof-link-card .icon { width: 22px; height: 22px; flex-shrink: 0; }
.prof-link-card span { flex: 1; }
.pl-arrow { width: 16px; height: 16px; color: #3A3F50; }

/* ─── Help Page ─── */
.help-page { max-width: 600px; margin: 0 auto; padding: 20px; color: #fff; }
.help-section { display: flex; flex-direction: column; gap: 10px; }
.help-card {
    background: #1A1D2E; border-radius: 14px; padding: 18px 20px;
    border: 1px solid #2A2E3D;
}
.help-q { font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.help-a { font-size: 0.88rem; color: #8A8FA8; line-height: 1.6; }

/* ─── Feedback Page ─── */
.feedback-page { max-width: 500px; margin: 0 auto; padding: 20px; color: #fff; }
.feedback-form-card {
    background: #1A1D2E; border-radius: 16px; padding: 24px;
    border: 1px solid #2A2E3D;
}
.feedback-intro { color: #8A8FA8; font-size: 0.9rem; margin-bottom: 16px; line-height: 1.5; }
.fb-categories { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.fb-cat {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 16px; background: #0D1117; border: 2px solid #2A2E3D;
    border-radius: 50px; color: #8A8FA8; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.fb-cat:hover { border-color: #CE82FF; color: #fff; }
.fb-cat.selected { background: #CE82FF; border-color: #CE82FF; color: #fff; }
.fb-textarea {
    width: 100%; padding: 14px 16px; background: #0D1117; border: 2px solid #2A2E3D;
    border-radius: 12px; color: #fff; font-size: 0.95rem; font-family: inherit;
    resize: vertical; margin-bottom: 14px; min-height: 100px;
}
.fb-textarea:focus { outline: none; border-color: #CE82FF; }
.fb-textarea::placeholder { color: #3A3F50; }

.prof-section { margin-bottom: 16px; }
.prof-sec-title { font-size: 0.95rem; color: #8A8FA8; font-weight: 700; margin-bottom: 10px; }
.prof-achievements { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-ach {
    display: flex; align-items: center; gap: 6px;
    background: #1A1D2E; padding: 8px 14px; border-radius: 20px;
    font-size: 0.82rem; color: #B2BEC3; font-weight: 500;
}
.prof-ach .icon { width: 16px; height: 16px; }

/* ─── Leaderboard (Dark) ─── */
.lb-container { width: 100%; max-width: 500px; padding: 28px 16px 80px; }
.lb-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 20px; }

/* League Tabs */
.league-tabs {
    display: flex; gap: 4px; overflow-x: auto; padding-bottom: 12px;
    margin-bottom: 16px; scrollbar-width: none;
}
.league-tabs::-webkit-scrollbar { display: none; }
.league-tab {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 12px; border-radius: 12px; background: #1A1D2E;
    border: 2px solid transparent; text-decoration: none;
    color: #636E82; font-size: 0.72rem; font-weight: 600;
    min-width: 56px; transition: all 0.2s;
}
.league-tab:hover { background: #222640; }
.league-tab-active { background: #1A1D2E; }
.league-tab-mine { position: relative; }
.league-tab-mine::after {
    content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
    width: 6px; height: 6px; border-radius: 50%; background: #58CC02;
}
.league-tab-icon { width: 20px; height: 20px; }
.league-tab-label { white-space: nowrap; }

/* League Header */
.league-header {
    display: flex; align-items: center; gap: 14px;
    background: #1A1D2E; border-radius: 14px; padding: 16px;
    border: 1px solid #2A2E3D; border-left: 3px solid;
    margin-bottom: 20px;
}
.league-header-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.league-header-info { flex: 1; }
.league-header-title { display: block; font-size: 1.1rem; font-weight: 800; }
.league-header-sub { display: block; font-size: 0.78rem; color: #636E82; margin-top: 2px; }

/* Zone markers */
.lb-zone {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.lb-zone-promote { color: #58CC02; }
.lb-zone-demote { color: #FF4B4B; }

/* My position */
.lb-my-position {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(88,204,2,0.08); border: 1px solid rgba(88,204,2,0.2);
    border-radius: 12px; padding: 14px; margin-top: 16px;
}
.lb-my-label { color: #8A8FA8; font-size: 0.82rem; }
.lb-my-rank { color: #58CC02; font-size: 1.2rem; font-weight: 800; }
.lb-my-of { color: #636E82; font-size: 0.82rem; }

/* Promote/Demote row highlights */
.lb-promote { border-left: 3px solid rgba(88,204,2,0.3); }
.lb-demote { border-left: 3px solid rgba(255,75,75,0.3); }

/* Podium */
.lb-podium {
    display: flex; align-items: flex-end; justify-content: center; gap: 12px;
    margin-bottom: 24px; padding: 0 10px;
}
.lb-pod { text-align: center; flex: 1; }
.pod-avatar {
    width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 6px;
    background: #2A2E3D; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.pod-avatar .icon { width: 24px; height: 24px; color: #636E82; }
.pod-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pod-gold { background: linear-gradient(135deg, #FDCB6E, #FF9600); }
.pod-gold .icon { color: #fff; }
.pod-medal {
    display: inline-block; width: 24px; height: 24px; border-radius: 50%;
    background: #2A2E3D; color: #8A8FA8; font-size: 0.75rem; font-weight: 800;
    line-height: 24px; margin-bottom: 4px;
}
.pod-medal-1 { background: #FDCB6E; color: #1A1D2E; }
.pod-name { display: block; font-weight: 700; color: #fff; font-size: 0.88rem; }
.pod-xp { display: block; font-size: 0.78rem; color: #8A8FA8; }
.lb-pod-1 { transform: translateY(-16px); }
.lb-pod-1 .pod-avatar { width: 64px; height: 64px; }
.lb-pod-1 .pod-avatar .icon { width: 30px; height: 30px; }

/* List */
.lb-list { display: flex; flex-direction: column; gap: 6px; }
.lb-row {
    display: flex; align-items: center; gap: 12px;
    background: #1A1D2E; border-radius: 12px; padding: 12px 16px;
    border: 1px solid #2A2E3D;
}
.lb-me { border-color: #58CC02; background: rgba(88,204,2,0.05); }
.lb-rank { font-weight: 800; color: #636E82; font-size: 0.88rem; width: 36px; }
.lb-user-icon {
    width: 36px; height: 36px; border-radius: 50%; background: #2A2E3D;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    overflow: hidden;
}
.lb-user-icon .icon { width: 18px; height: 18px; color: #636E82; }
.lb-user-icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lb-user-info { flex: 1; }
.lb-user-name { font-weight: 600; color: #fff; display: block; font-size: 0.92rem; }
.lb-user-meta { font-size: 0.75rem; color: #636E82; }
.lb-user-stats { text-align: right; }
.lb-xp { display: block; font-weight: 700; color: #6C5CE7; font-size: 0.92rem; }
.lb-streak { display: flex; align-items: center; gap: 3px; font-size: 0.78rem; color: #636E82; justify-content: flex-end; }

/* ─── Achievements (Dark) ─── */
.ach-container { width: 100%; max-width: 500px; padding: 28px 16px 80px; }
.ach-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 20px; }

.ach-grid { display: flex; flex-direction: column; gap: 8px; }
.ach-card {
    display: flex; align-items: center; gap: 14px;
    background: #1A1D2E; border-radius: 14px; padding: 16px;
    border: 1px solid #2A2E3D; transition: all 0.2s;
}
.ach-unlocked { border-color: #2A2E3D; }
.ach-locked { opacity: 0.5; }

.ach-icon-wrap {
    width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #2A2E3D;
}
.ach-icon-done { background: rgba(253,203,110,0.15); }
.ach-icon { width: 24px; height: 24px; }
.ach-icon-done .ach-icon { color: #FDCB6E; }
.ach-locked .ach-icon { color: #3A3F50; }

.ach-info { flex: 1; }
.ach-name { font-weight: 700; color: #fff; display: block; font-size: 0.95rem; }
.ach-desc { font-size: 0.8rem; color: #636E82; display: block; margin-top: 2px; }

.ach-done-badge {
    width: 28px; height: 28px; border-radius: 50%; background: #58CC02;
    display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
}
.ach-req { font-size: 0.78rem; color: #3A3F50; font-weight: 600; white-space: nowrap; }

/* ─── Progress (Dark) ─── */
.prog-container { width: 100%; max-width: 500px; padding: 28px 16px 80px; }
.prog-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 24px; }

.prog-hero {
    display: flex; align-items: center; gap: 24px;
    background: #1A1D2E; border-radius: 20px; padding: 28px;
    border: 1px solid #2A2E3D; margin-bottom: 16px;
}
.prog-circle-wrap { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.prog-circle { width: 100px; height: 100px; transform: rotate(-90deg); }
.prog-ring-bg { fill: none; stroke: #2A2E3D; stroke-width: 8; }
.prog-ring-fill {
    fill: none; stroke: #58CC02; stroke-width: 8; stroke-linecap: round;
    transition: stroke-dashoffset 1s ease;
}
.prog-pct {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 1.4rem; font-weight: 800; color: #fff;
}
.prog-hero-info { }
.prog-hero-val { display: block; font-size: 1.3rem; font-weight: 800; color: #fff; }
.prog-hero-label { font-size: 0.85rem; color: #636E82; }

.prog-stats { display: flex; flex-direction: column; gap: 8px; }
.prog-stat {
    display: flex; align-items: center; gap: 14px;
    background: #1A1D2E; border-radius: 12px; padding: 14px 16px;
    border: 1px solid #2A2E3D;
}
.pgs-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pgs-icon .icon { width: 20px; height: 20px; }
.pgs-val { display: block; font-weight: 800; color: #fff; font-size: 1.05rem; }
.pgs-label { font-size: 0.78rem; color: #636E82; }
.achievement-card p { font-size: 0.85rem; color: var(--text-light); margin-bottom: 8px; }
.achievement-status { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.unlocked-text { color: var(--success); display: inline-flex; align-items: center; gap: 4px; }

/* ─── Progress Page ─── */
.progress-overview { margin-bottom: 28px; }
.big-progress-card {
    display: flex; align-items: center; gap: 24px; background: var(--bg-card);
    border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.big-progress-circle {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 800; flex-shrink: 0;
}
.progress-bar-big { height: 16px; background: var(--border); border-radius: 8px; overflow: hidden; }
.progress-bar-big .progress-fill { height: 100%; border-radius: 8px; }

/* ─── Settings ─── */
.settings-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 24px;
    box-shadow: var(--shadow); margin-bottom: 16px; transition: var(--transition);
}
.settings-card:hover { box-shadow: var(--shadow-lg); }
.settings-card h3 { margin-bottom: 8px; display: flex; align-items: center; }
.settings-card p { color: var(--text-light); font-size: 0.9rem; margin-bottom: 6px; }

.empty-state { text-align: center; padding: 40px; color: var(--text-light); font-size: 1.1rem; display: flex; flex-direction: column; align-items: center; }

/* ─── Panel Layout ─── */
.panel-layout { background: #0D1117; color: #B2BEC3; }
.panel-wrapper { display: flex; min-height: 100vh; }
.panel-sidebar {
    width: var(--sidebar-w); background: #131620; color: #fff;
    display: flex; flex-direction: column; position: relative;
    z-index: 50; padding: 20px 0; border-right: 1px solid #1E2235;
    min-height: 100vh;
}
.panel-sidebar .sidebar-brand { color: #fff; padding: 0 20px 20px; }
.panel-sidebar .nav-item { color: rgba(255,255,255,0.6); }
.panel-sidebar .nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.panel-sidebar .nav-item.active { background: rgba(108,92,231,0.3); color: #fff; border-right: 3px solid var(--primary); }
.panel-sidebar .nav-group-label {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: rgba(255,255,255,0.25); padding: 12px 20px 4px; margin-top: 4px;
}
.panel-sidebar .nav-item-highlight { color: #58CC02; font-weight: 600; }
.panel-sidebar .nav-item-highlight .nav-icon { color: #58CC02; }
.panel-sidebar .nav-item-legacy { opacity: 0.4; font-size: 0.85rem; }
.panel-sidebar .nav-item-legacy:hover { opacity: 0.7; }
.panel-sidebar .sidebar-footer { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 8px; }
.panel-main { flex: 1; padding: 32px; background: #0D1117; color: #B2BEC3; }

.panel-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.panel-header-row .page-title { margin-bottom: 0; }

.panel-table-wrap { overflow-x: auto; }
.panel-table {
    width: 100%; background: #131620; border-radius: var(--radius);
    border: 1px solid #1E2235; border-collapse: collapse; overflow: hidden;
}
.panel-table thead { background: #0D1117; }
.panel-table th { padding: 14px 18px; text-align: left; font-size: 0.82rem; text-transform: uppercase; color: #636E82; font-weight: 600; }
.panel-table td { padding: 14px 18px; border-top: 1px solid #1E2235; font-size: 0.92rem; color: #B2BEC3; }
.panel-table .actions { display: flex; gap: 8px; align-items: center; }
.inline-form { display: inline; }

/* Log badges */
.log-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 600; background: #232740; color: #B2BEC3;
}
.log-login { background: rgba(88,204,2,0.12); color: #58CC02; }
.log-logout { background: rgba(99,110,130,0.12); color: #636E82; }
.log-register { background: rgba(28,176,246,0.12); color: #1CB0F6; }
.log-json_import { background: rgba(108,92,231,0.12); color: #A29BFE; }
.log-node_create { background: rgba(88,204,2,0.12); color: #58CC02; }
.log-node_delete { background: rgba(255,75,75,0.12); color: #FF4B4B; }
.log-question_create { background: rgba(88,204,2,0.12); color: #58CC02; }
.log-question_edit { background: rgba(255,150,0,0.12); color: #FF9600; }
.log-question_delete { background: rgba(255,75,75,0.12); color: #FF4B4B; }
.log-role_change { background: rgba(206,130,255,0.12); color: #CE82FF; }
.log-settings_change { background: rgba(253,203,110,0.12); color: #FDCB6E; }
.log-lesson { background: rgba(88,204,2,0.12); color: #58CC02; }
.log-explanation { background: rgba(28,176,246,0.12); color: #1CB0F6; }
.log-chest { background: rgba(243,156,18,0.12); color: #F39C12; }
.log-review { background: rgba(9,132,227,0.12); color: #0984E3; }
.log-test { background: rgba(225,112,85,0.12); color: #E17055; }

/* Option row in question edit */
.option-row {
    display: flex; gap: 10px; align-items: center; margin-bottom: 8px;
}
.option-row input[type="text"] { flex: 1; }
.opt-correct-label {
    display: flex; align-items: center; gap: 4px; font-size: 0.82rem;
    color: #8A8FA8; white-space: nowrap;
}

.panel-form-card {
    background: #131620; border-radius: var(--radius); padding: 32px;
    border: 1px solid #1E2235; max-width: 600px; color: #B2BEC3;
}
.panel-form .form-actions { display: flex; gap: 12px; margin-top: 24px; }
.panel-stat { border-left: 4px solid var(--primary); }

.option-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.option-row input[type="text"] { flex: 1; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; }
.option-row label { display: flex; align-items: center; gap: 4px; font-size: 0.88rem; white-space: nowrap; }
.options-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.options-section h3 { margin-bottom: 14px; font-size: 1rem; }

.role-form { display: flex; align-items: center; gap: 8px; }
.role-select { padding: 6px 10px; border: 1px solid #2A2E3D; border-radius: var(--radius-sm); font-size: 0.85rem; font-family: inherit; background: #0D1117; color: #B2BEC3; }
.field-help { font-size: 0.8rem; color: #636E82; display: block; margin-top: 2px; }

/* Panel Dark Theme overrides */
.panel-layout .page-title { color: #fff; font-size: 1.1rem; }
.panel-layout .dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 16px; }
.panel-layout .dash-stat { background: #131620; border: 1px solid #1E2235; border-radius: 10px; padding: 12px 10px; text-align: center; }
.panel-layout .dash-stat .ds-val { font-size: 1.3rem; font-weight: 900; color: #fff; display: block; }
.panel-layout .dash-stat .ds-label { font-size: 0.7rem; color: #636E82; margin-top: 2px; }
.panel-layout .dash-chart-card { background: #131620; border: 1px solid #1E2235; border-radius: 10px; padding: 14px; }
.panel-layout .dash-chart-card h3 { color: #fff; font-size: 0.85rem; margin-bottom: 8px; }
.panel-layout .dash-chart-sub { color: #636E82; font-size: 0.82rem; text-align: center; margin-top: 8px; }
.panel-layout .btn { border-radius: 8px; }
.panel-layout .btn-primary { background: #6C5CE7; color: #fff; border: none; }
.panel-layout .btn-primary:hover { background: #5A4BD1; }
.panel-layout .btn-outline { background: transparent; border: 1px solid #2A2E3D; color: #B2BEC3; }
.panel-layout .btn-outline:hover { background: #1A1D2E; color: #fff; }
.panel-layout .btn-danger { background: #FF4B4B; color: #fff; border: none; }
.panel-layout input, .panel-layout select, .panel-layout textarea {
    background: #0D1117; border: 1px solid #2A2E3D; color: #B2BEC3; border-radius: 8px;
}
.panel-layout input:focus, .panel-layout select:focus, .panel-layout textarea:focus {
    border-color: #6C5CE7; outline: none;
}
.panel-layout .alert { border-radius: 10px; }

/* Panel user row clickable */
.panel-table tr.clickable-row { cursor: pointer; transition: background 0.15s; }
.panel-table tr.clickable-row:hover { background: #1A1D2E; }

/* Panel Path Builder */
.builder-path { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.builder-node {
    background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow);
    overflow: hidden; transition: var(--transition);
}
.builder-node:hover { box-shadow: var(--shadow-lg); }
.builder-node-header {
    display: flex; align-items: center; gap: 14px; padding: 16px 20px;
}
.builder-node-icon {
    width: 44px; height: 44px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.builder-node-icon .icon { width: 22px; height: 22px; }
.type-lesson .builder-node-icon { background: rgba(108,92,231,0.1); color: var(--primary); }
.type-chest .builder-node-icon { background: rgba(243,156,18,0.1); color: #F39C12; }
.type-test .builder-node-icon { background: rgba(225,112,85,0.1); color: #E17055; }
.type-review .builder-node-icon { background: rgba(9,132,227,0.1); color: var(--accent); }
.builder-node-info { flex: 1; }
.builder-node-type { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--text-muted); display: block; }
.builder-node-title { font-weight: 600; font-size: 1rem; display: block; }
.builder-node-meta { font-size: 0.8rem; color: var(--text-light); display: block; margin-top: 2px; }
.builder-node-actions { display: flex; gap: 6px; }

.builder-rounds { border-top: 1px solid var(--border); }
.builder-round {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px 12px 78px; border-bottom: 1px solid var(--border);
    color: var(--text); text-decoration: none; transition: var(--transition);
}
.builder-round:last-child { border-bottom: none; }
.builder-round:hover { background: var(--bg); }
.builder-round .icon { width: 16px; height: 16px; color: var(--text-muted); }
.round-q-count { font-size: 0.82rem; color: var(--text-muted); }
.builder-empty { padding: 12px 20px 12px 78px; color: var(--text-muted); font-size: 0.88rem; }

.builder-add-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

/* Node detail rounds */
.builder-rounds-detail { display: flex; flex-direction: column; gap: 10px; }
.builder-round-card {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg-card); border-radius: var(--radius); padding: 18px 20px;
    box-shadow: var(--shadow); text-decoration: none; color: var(--text); transition: var(--transition);
}
.builder-round-card:hover { box-shadow: var(--shadow-lg); transform: translateX(4px); }
.round-number { font-weight: 700; display: block; }
.round-diff { font-size: 0.82rem; color: var(--text-light); }
.round-card-right { display: flex; align-items: center; gap: 10px; }
.round-card-right .icon { width: 18px; height: 18px; color: var(--text-muted); }

/* Question cards in panel */
.question-list { display: flex; flex-direction: column; gap: 12px; }
.question-card-panel {
    background: var(--bg-card); border-radius: var(--radius); padding: 18px 20px;
    box-shadow: var(--shadow);
}
.qc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.qc-number { font-weight: 700; color: var(--primary); }
.qc-type { font-size: 0.78rem; background: var(--bg); padding: 2px 10px; border-radius: var(--radius-full); color: var(--text-light); }
.qc-text { font-weight: 600; margin-bottom: 4px; }
.qc-answer { font-size: 0.88rem; color: var(--text-light); margin-bottom: 8px; }
.qc-options { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.qc-option { padding: 4px 12px; border-radius: var(--radius-full); background: var(--bg); font-size: 0.82rem; }
.qc-correct { background: rgba(0,184,148,0.12); color: var(--success); font-weight: 600; }
.qc-actions { display: flex; gap: 8px; }
.form-hint { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 12px; }

/* Curriculum drill-down */
.cur-breadcrumb {
    display: flex; align-items: center; gap: 6px; margin-bottom: 16px;
    font-size: 0.85rem; color: var(--text-muted); flex-wrap: wrap;
}
.cur-breadcrumb a { color: var(--primary); }
.cur-breadcrumb span { color: var(--text-muted); }

.cur-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.cur-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-card); border-radius: var(--radius); padding: 16px 20px;
    box-shadow: var(--shadow); text-decoration: none; color: var(--text);
    transition: var(--transition);
}
.cur-card:hover { box-shadow: var(--shadow-lg); transform: translateX(4px); }
.cur-card-icon { width: 24px; height: 24px; color: var(--primary); flex-shrink: 0; }
.cur-card span { flex: 1; font-weight: 600; }
.cur-arrow { width: 18px; height: 18px; color: var(--text-muted); }

.cur-add-form { margin-top: 16px; }
.inline-add {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.inline-add input {
    padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm);
    font-size: 0.92rem; font-family: inherit;
}
.inline-add input:focus { outline: none; border-color: var(--primary); }

/* ─── Learn Overview ─── */
/* Unit section headers in path */
.unit-section-header {
    width: 100%; max-width: 500px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; margin-top: 20px;
    background: linear-gradient(135deg, #1E2235 0%, #232740 100%);
    border-radius: 16px;
    border-left: 4px solid var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}
.unit-section-header:hover { transform: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.unit-section-header.unit-locked { opacity: 0.45; pointer-events: none; }
.ush-left { display: flex; flex-direction: column; gap: 2px; }
.ush-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.2px; color: #636E82; font-weight: 700; }
.ush-title { font-size: 1.15rem; font-weight: 800; color: #fff; }
.ush-badge { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ush-badge .icon { width: 18px; height: 18px; }
.ush-done { background: rgba(88,204,2,0.12); color: #58CC02; }
.ush-lock { background: rgba(99,110,114,0.12); color: #636E82; }

/* ─── Settings Page ─── */
.settings-container { width: 100%; max-width: 500px; padding: 28px 16px 80px; }
.settings-page-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 20px; }

.set-section {
    background: #232740; border-radius: 14px; padding: 18px; margin-bottom: 12px;
}

/* Settings Cards */
.set-card {
    display: flex; align-items: center; gap: 14px;
    background: #1A1D2E; border-radius: 14px; padding: 16px;
    border: 1px solid #2A2E3D; margin-bottom: 6px;
    cursor: pointer; transition: all 0.2s; text-decoration: none; color: inherit;
}
.set-card:hover { background: #222640; border-color: #3A3F50; }
.set-card-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.set-card-icon .icon { width: 20px; height: 20px; }
.set-card-info { flex: 1; }
.set-card-title { display: block; font-weight: 600; color: #fff; font-size: 0.92rem; }
.set-card-sub { display: block; font-size: 0.78rem; color: #636E82; margin-top: 1px; }
.set-card-arrow { width: 16px; height: 16px; color: #3A3F50; flex-shrink: 0; }

/* Settings Modal */
.set-modal {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000; background: rgba(0,0,0,0.6);
    align-items: center; justify-content: center; padding: 20px;
}
.set-modal-content {
    background: #1A1D2E; border-radius: 16px; padding: 24px;
    max-width: 440px; width: 100%; border: 1px solid #2A2E3D;
    max-height: 85vh; overflow-y: auto;
}
.set-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.set-modal-header h3 { color: #fff; font-size: 1.1rem; font-weight: 800; margin: 0; }
.set-modal-close {
    background: none; border: none; color: #636E82; font-size: 1.2rem;
    cursor: pointer; padding: 4px 8px;
}
.set-modal-close:hover { color: #fff; }

/* Keep existing form styles */
.set-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.set-row label { font-size: 0.82rem; color: #8A8FA8; font-weight: 600; }
.set-row input, .set-row select {
    background: #0D1117; border: 2px solid #2A2E3D; border-radius: 10px;
    padding: 10px 14px; color: #fff; font-size: 0.92rem; font-family: inherit;
}
.set-row input:focus, .set-row select:focus { outline: none; border-color: var(--primary); }

.set-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid #2A2E3D;
}
.set-toggle-row:last-of-type { border-bottom: none; }
.set-toggle-row span { color: #B2BEC3; font-size: 0.92rem; }

/* Toggle switch */
.toggle { position: relative; width: 48px; height: 26px; display: inline-block; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: #3A3F50; border-radius: 26px; cursor: pointer; transition: 0.3s;
}
.toggle-slider::before {
    content: ''; position: absolute; width: 20px; height: 20px;
    left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s;
}
.toggle input:checked + .toggle-slider { background: #58CC02; }
.toggle input:checked + .toggle-slider::before { transform: translateX(22px); }

/* Avatar Grid */
.avatar-grid {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.avatar-option {
    width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
    border: 3px solid transparent; transition: all 0.2s ease;
    overflow: hidden; background: #0D1117;
}
.avatar-option:hover { border-color: #3A3F50; transform: scale(1.1); }
.avatar-option img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-selected { border-color: #58CC02; box-shadow: 0 0 12px rgba(88,204,2,0.4); }

/* ─── Practice ─── */
.practice-container { width: 100%; max-width: 500px; padding: 28px 16px 80px; }
.practice-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.practice-desc { color: #8A8FA8; font-size: 0.9rem; margin-bottom: 20px; }
.practice-units { display: flex; flex-direction: column; gap: 10px; }
.practice-unit-card {
    display: flex; align-items: center; gap: 14px;
    background: #232740; border-radius: 14px; padding: 16px;
    text-decoration: none; color: #fff; transition: all 0.2s ease;
}
.practice-unit-card:hover { background: #2A2E4A; transform: translateX(4px); }
.pu-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pu-icon .icon { width: 24px; height: 24px; }
.pu-info { flex: 1; }
.pu-title { font-weight: 700; display: block; font-size: 0.95rem; }
.pu-meta { font-size: 0.8rem; color: #636E82; display: block; margin-top: 2px; }
.pu-badge {
    background: #58CC02; color: #fff; font-size: 0.72rem; font-weight: 700;
    padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}

/* ─── Shop ─── */
.shop-container { width: 100%; max-width: 500px; padding: 20px 16px 80px; }
.shop-header { display: flex; justify-content: center; gap: 12px; align-items: center; padding: 16px 0; }
.shop-coins-display {
    display: flex; align-items: center; gap: 8px;
    background: #232740; border-radius: 50px; padding: 10px 24px;
}
.shop-coin-icon { width: 32px; height: 32px; color: #1CB0F6; }
.shop-coin-amount { font-size: 1.4rem; font-weight: 800; color: #fff; }

.shop-inv-btn {
    display: flex; align-items: center; gap: 6px;
    background: #232740; border-radius: 50px; padding: 10px 18px;
    color: #fff; font-weight: 600; font-size: 0.88rem;
    text-decoration: none; transition: all 0.2s ease;
}
.shop-inv-btn:hover { background: #2A2E4A; }
.shop-inv-btn .icon { width: 18px; height: 18px; color: #FDCB6E; }

.shop-section { margin-bottom: 8px; }
.shop-section-title {
    font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
.shop-sec-icon { width: 20px; height: 20px; }
.shop-divider { height: 1px; background: #2A2E3D; margin: 20px 0; }

/* Coin packs */
.coin-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coin-pack {
    background: #232740; border-radius: 14px; padding: 18px 14px;
    text-align: center; cursor: pointer; transition: all 0.2s ease;
    border: 2px solid transparent; position: relative;
}
.coin-pack:hover { border-color: #1CB0F6; transform: translateY(-2px); }
.coin-pack.cp-popular { border-color: #1CB0F6; }
.coin-pack.cp-best { border-color: #FDCB6E; }
.cp-badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: #1CB0F6; color: #fff; font-size: 0.68rem; font-weight: 700;
    padding: 3px 12px; border-radius: 20px; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.cp-best .cp-badge { background: #FDCB6E; color: #1A1D2E; }
.cp-coins { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 4px; }
.cp-icon { width: 24px; height: 24px; color: #1CB0F6; }
.cp-coins span { font-size: 1.3rem; font-weight: 800; color: #fff; }
.cp-bonus { font-size: 0.72rem; color: #58CC02; font-weight: 600; display: block; margin-bottom: 4px; }
.cp-price {
    display: inline-block; background: #1CB0F6; color: #fff; font-weight: 700;
    padding: 6px 16px; border-radius: 8px; font-size: 0.88rem; margin-top: 6px;
}

/* Ad card */
.shop-ad-card {
    display: flex; align-items: center; gap: 14px;
    background: #232740; border-radius: 14px; padding: 16px;
}
.ad-left {
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(88,204,2,0.15); color: #58CC02;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ad-left .icon { width: 24px; height: 24px; }
.ad-info { flex: 1; }
.ad-title { font-weight: 700; color: #fff; display: block; font-size: 0.95rem; }
.ad-desc { font-size: 0.82rem; color: #8A8FA8; display: block; margin-top: 2px; }
.ad-reward {
    display: flex; align-items: center; gap: 4px;
    color: #1CB0F6; font-weight: 700; font-size: 0.95rem;
}
.ad-reward .icon { width: 16px; height: 16px; }

/* Shop item cards */
.shop-item-card {
    display: flex; align-items: center; gap: 14px;
    background: #232740; border-radius: 14px; padding: 14px 16px;
    margin-bottom: 8px;
}
.si-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.si-icon .icon { width: 22px; height: 22px; }
.shop-type-life { background: rgba(255,75,75,0.15); color: #FF4B4B; }
.shop-type-xp_boost { background: rgba(108,92,231,0.15); color: var(--primary); }
.shop-type-streak_freeze { background: rgba(255,150,0,0.15); color: #FF9600; }
.shop-type-avatar { background: rgba(0,184,148,0.15); color: var(--success); }
.si-info { flex: 1; }
.si-title { font-weight: 700; color: #fff; display: block; font-size: 0.92rem; }
.si-desc { font-size: 0.8rem; color: #8A8FA8; display: block; margin-top: 2px; }

.shop-buy-btn {
    display: flex; align-items: center; gap: 5px;
    background: #1CB0F6; color: #fff; border: none; border-radius: 10px;
    padding: 10px 18px; font-weight: 700; font-size: 0.92rem;
    cursor: pointer; transition: all 0.2s ease; font-family: inherit;
}
.shop-buy-btn:hover { background: #0E9FE0; transform: scale(1.04); }
.shop-btn-coin { width: 16px; height: 16px; }
.shop-disabled { background: #3A3F50; color: #636E82; cursor: not-allowed; }
.shop-disabled:hover { transform: none; background: #3A3F50; }

@media (max-width: 400px) {
    .coin-packs { grid-template-columns: 1fr; }
}

/* ─── Inventory ─── */
.inv-container { width: 100%; max-width: 500px; padding: 28px 16px 80px; }
.inv-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 20px; }

.inv-status-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px;
}
.inv-stat {
    display: flex; align-items: center; gap: 10px;
    background: #232740; border-radius: 12px; padding: 14px;
}
.inv-stat-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.inv-stat-icon .icon { width: 20px; height: 20px; }
.inv-stat-val { font-weight: 800; color: #fff; font-size: 1.1rem; display: block; }
.inv-stat-label { font-size: 0.75rem; color: #636E82; }

.inv-section { margin-bottom: 8px; }
.inv-sec-title { font-size: 0.95rem; font-weight: 700; color: #8A8FA8; margin-bottom: 10px; }

.inv-boost-card {
    display: flex; align-items: center; gap: 12px;
    background: #232740; border-radius: 12px; padding: 14px; margin-bottom: 8px;
}
.inv-boost-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.inv-boost-icon .icon { width: 20px; height: 20px; }
.boost-xp { background: rgba(108,92,231,0.15); color: #6C5CE7; }
.boost-streak { background: rgba(255,150,0,0.15); color: #FF9600; }
.inv-boost-info { flex: 1; }
.inv-boost-name { font-weight: 600; color: #fff; display: block; font-size: 0.92rem; }
.inv-boost-time { font-size: 0.78rem; color: #636E82; }
.inv-boost-badge {
    background: #58CC02; color: #fff; font-size: 0.7rem; font-weight: 700;
    padding: 4px 10px; border-radius: 20px; text-transform: uppercase;
}

.inv-empty { text-align: center; padding: 20px; color: #636E82; font-size: 0.9rem; }

.inv-item-card {
    display: flex; align-items: center; gap: 12px;
    background: #232740; border-radius: 12px; padding: 14px; margin-bottom: 8px;
}
.inv-item-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.inv-item-icon .icon { width: 22px; height: 22px; }
.inv-item-info { flex: 1; min-width: 0; }
.inv-item-name { font-weight: 600; color: #fff; display: block; font-size: 0.92rem; }
.inv-item-desc { font-size: 0.78rem; color: #636E82; display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-item-qty {
    font-weight: 800; color: #8A8FA8; font-size: 0.9rem;
    background: #1A1D2E; padding: 4px 10px; border-radius: 8px; flex-shrink: 0;
}
.inv-use-btn {
    background: #58CC02; color: #fff; border: none; border-radius: 10px;
    padding: 10px 18px; font-weight: 700; font-size: 0.85rem;
    cursor: pointer; transition: all 0.2s ease; font-family: inherit;
    white-space: nowrap;
}
.inv-use-btn:hover { background: #4CAF00; transform: scale(1.04); }

.inv-purchase-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid #2A2E3D;
}
.inv-purchase-row:last-child { border-bottom: none; }
.inv-p-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.inv-p-icon .icon { width: 18px; height: 18px; }
.inv-p-info { flex: 1; }
.inv-p-name { font-weight: 600; color: #fff; display: block; font-size: 0.88rem; }
.inv-p-date { font-size: 0.75rem; color: #636E82; }
.inv-p-price { color: #1CB0F6; font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; gap: 3px; }

/* ─── Formulas ─── */
.formulas-page { width: 100%; max-width: 800px; padding: 28px 16px 80px; }
.formulas-header { margin-bottom: 24px; }
.formulas-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.formulas-search {
    display: flex; align-items: center; gap: 10px;
    background: #232740; border-radius: 12px; padding: 12px 16px;
}
.search-icon { width: 20px; height: 20px; color: #636E82; }
.formulas-search input {
    flex: 1; background: none; border: none; color: #fff; font-size: 1rem;
    font-family: inherit; outline: none;
}
.formulas-search input::placeholder { color: #636E82; }

.formulas-cats { display: flex; flex-direction: column; gap: 8px; }
.formula-cat-card {
    display: flex; align-items: center; gap: 14px;
    background: #232740; border-radius: 12px; padding: 16px;
    text-decoration: none; color: #fff; transition: all 0.2s ease;
}
.formula-cat-card:hover { background: #2A2E4A; transform: translateX(4px); }
.fcc-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: rgba(253,203,110,0.15); color: #FDCB6E;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fcc-icon .icon { width: 22px; height: 22px; }
.fcc-info { flex: 1; }
.fcc-title { font-weight: 700; display: block; }
.fcc-count { font-size: 0.8rem; color: #636E82; }
.fcc-arrow { width: 18px; height: 18px; color: #636E82; }

/* Search results */
.search-results { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.search-result-card {
    display: block; background: #232740; border-radius: 12px; padding: 14px 16px;
    text-decoration: none; color: #fff; transition: all 0.2s ease;
}
.search-result-card:hover { background: #2A2E4A; transform: translateX(4px); }
.sr-top { margin-bottom: 4px; }
.sr-cat { font-size: 0.7rem; color: #FDCB6E; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.sr-title { font-weight: 700; font-size: 0.95rem; display: block; margin-bottom: 4px; }
.sr-preview { font-size: 0.82rem; color: #8A8FA8; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { text-align: center; padding: 24px; color: #636E82; font-size: 0.92rem; }

.fr-subtitle { font-size: 1rem; color: #8A8FA8; margin-bottom: 12px; }

/* Formula detail layout */
.formulas-detail-layout { display: flex; gap: 24px; }
.fd-sidebar { width: 200px; flex-shrink: 0; }
.fd-back { display: flex; align-items: center; gap: 4px; color: #8A8FA8; font-size: 0.85rem; margin-bottom: 12px; }
.fd-cat-link {
    display: block; padding: 8px 12px; border-radius: 8px; color: #8A8FA8;
    font-size: 0.88rem; text-decoration: none; transition: all 0.15s ease; margin-bottom: 2px;
}
.fd-cat-link:hover { background: #232740; color: #fff; }
.fd-cat-link.active { background: #232740; color: #fff; font-weight: 600; }
.fd-content { flex: 1; min-width: 0; }
.fd-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 16px; }

.formula-card {
    background: #232740; border-radius: 14px; padding: 20px; margin-bottom: 12px;
}
.fc-cat { font-size: 0.72rem; color: #FDCB6E; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.fc-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.fc-content { color: #B2BEC3; font-size: 0.92rem; line-height: 1.7; margin-bottom: 10px; }
.fc-content > *:first-child { margin-top: 0; }
.fc-content > br:first-child { display: none; }
.fc-content > p:empty, .fc-content > div:empty { display: none; }
.fc-example {
    background: #1A1D2E; border-radius: 10px; padding: 14px;
    font-size: 0.88rem; color: #8A8FA8; line-height: 1.6; white-space: pre-wrap;
}
.fc-ex-label { color: #58CC02; font-weight: 700; }

/* Formula list cards */
.formula-list { display: flex; flex-direction: column; gap: 8px; }
.flc {
    display: flex; align-items: center; gap: 14px;
    background: #1A1D2E; border-radius: 14px; padding: 16px 18px;
    border: 1px solid #2A2E3D; transition: all 0.2s; text-decoration: none;
    color: #fff;
}
.flc:hover { background: #232740; border-color: #6C5CE7; transform: translateX(4px); }
.flc-icon {
    width: 40px; height: 40px; border-radius: 10px; background: rgba(108,92,231,0.1);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.flc-title { flex: 1; font-size: 0.95rem; font-weight: 600; }
.flc-arrow { width: 16px; height: 16px; color: #3A3F50; flex-shrink: 0; }

@media (max-width: 600px) {
    .formulas-detail-layout { flex-direction: column; }
    .fd-sidebar { width: 100%; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
    .fd-cat-link { white-space: nowrap; }
    .fd-back { display: none; }
}

/* ─── Learn Overview (page) ─── */

.overview-container {
    width: 100%; max-width: 500px; padding: 28px 16px 80px;
}
.overview-title {
    font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: 20px;
}
.overview-units { display: flex; flex-direction: column; gap: 12px; }
.overview-unit-card {
    display: flex; align-items: center; gap: 14px;
    background: #232740; border-radius: 14px; padding: 18px 16px;
    text-decoration: none; color: #fff; transition: all 0.2s ease;
    border-left: 4px solid var(--primary);
}
.overview-unit-card:hover { background: #2A2E4A; transform: translateX(4px); }
.ouc-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ouc-icon .icon { width: 24px; height: 24px; }
.ouc-info { flex: 1; }
.ouc-title { font-weight: 700; font-size: 1rem; display: block; }
.ouc-desc { font-size: 0.82rem; color: #8A8FA8; display: block; margin-top: 2px; }
.ouc-meta { font-size: 0.78rem; color: #636E82; display: block; margin-top: 4px; }
.ouc-arrow { width: 18px; height: 18px; color: #636E82; }

/* ═══════════════════════════════════════════
   SESSION / LESSON PAGE (Duolingo-style)
   ═══════════════════════════════════════════ */
.session-page { background: #131620; min-height: 100vh; }
.session-container {
    max-width: 560px; margin: 0 auto; min-height: 100vh;
    display: flex; flex-direction: column;
}

/* Top bar */
.session-topbar {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; position: sticky; top: 0;
    background: #131620; z-index: 20;
}
.session-close {
    display: flex; align-items: center; justify-content: center;
    color: #636E82; transition: color 0.2s; background: none;
    flex-shrink: 0;
}
.session-close:hover { color: #B2BEC3; }
.session-close .icon { width: 22px; height: 22px; }

/* Progress bar — single green bar like Duolingo */
.session-progress {
    flex: 1; display: flex; gap: 3px; height: 16px;
    background: #2A2E3D; border-radius: 8px; overflow: hidden;
}
.seg { flex: 1; border-radius: 0; transition: background 0.3s; }
.seg-pending { background: transparent; }
.seg-current { background: #58CC02; }
.seg-correct { background: #58CC02; }
.seg-wrong { background: #FF4B4B; }

/* Lives — heart + number like Duolingo */
.session-lives {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.heart { width: 22px; height: 22px; }
.heart-full { color: #FF4B4B; }
.heart-empty { color: #2A2E3D; }

/* Review banner */
.review-banner {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 16px; background: rgba(255,150,0,0.1); color: #FF9600;
    font-weight: 700; font-size: 0.85rem; margin: 0 16px 8px;
    border-radius: 10px; border: 1px solid rgba(255,150,0,0.2);
}
.review-icon { width: 16px; height: 16px; }

/* Question body */
.session-body { flex: 1; padding: 20px 16px 120px; }
.session-question-text {
    font-size: 1.3rem; font-weight: 800; line-height: 1.4;
    margin-bottom: 24px; color: #fff;
}
.session-question-text.dim { opacity: 0.5; }

/* CSS Fractions — renders a/b as stacked fraction */
.frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 3px;
    font-size: 0.85em;
    line-height: 1;
}
.frac sup {
    border-bottom: 2px solid currentColor;
    padding: 0 4px 2px;
    font-size: inherit;
    top: 0;
}
.frac sub {
    padding: 2px 4px 0;
    font-size: inherit;
    bottom: 0;
}

.session-given-answer {
    font-size: 1rem; color: #8A8FA8; margin-bottom: 20px;
    padding: 12px 16px; background: #1A1D2E; border-radius: 12px;
}

/* Option cards — Duolingo style: dark bg, rounded border, centered text */
.session-options {
    display: grid; grid-template-columns: 1fr; gap: 10px;
}
.session-tf { grid-template-columns: 1fr 1fr; }

.session-option-card {
    display: flex; align-items: center; justify-content: center;
    padding: 18px 20px; border: 2px solid #3A3F50;
    border-radius: 14px; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #1A1D2E; font-size: 1rem; font-weight: 600;
    color: #fff; text-align: center; border-bottom: 4px solid #2A2E3D;
}
.session-option-card input[type="radio"],
.session-option-card input[type="checkbox"] { display: none; }
.session-option-card:hover { border-color: #58CC02; border-bottom-color: #3D8C00; background: rgba(88,204,2,0.05); }
.session-option-card.selected {
    border-color: #58CC02; border-bottom-color: #3D8C00;
    background: rgba(88,204,2,0.08); color: #58CC02;
}
.option-label { font-size: 1rem; font-weight: 600; }
.tf-card-icon { width: 22px; height: 22px; margin-right: 8px; }
.tf-true .tf-card-icon { color: #58CC02; }
.tf-false .tf-card-icon { color: #FF4B4B; }

/* Text input */
.session-text-input { margin-bottom: 20px; }
.session-answer-field {
    width: 100%; padding: 18px 20px; border: 2px solid #3A3F50;
    border-bottom: 4px solid #2A2E3D;
    border-radius: 14px; font-size: 1.1rem; font-family: inherit;
    transition: border-color 0.2s; text-align: center;
    background: #1A1D2E; color: #fff;
}
.session-answer-field:focus {
    outline: none; border-color: #58CC02; border-bottom-color: #3D8C00;
}
.session-answer-field::placeholder { color: #4A5568; }

/* Bottom check button — fixed, Duolingo style */
.session-bottom {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 16px; background: #131620;
    border-top: 1px solid #1E2235;
}
.btn-check {
    display: block; width: 100%; max-width: 560px; margin: 0 auto;
    padding: 16px; border-radius: 14px;
    font-size: 0.95rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: 1px; background: #2A2E3D; color: #4A5568;
    border: none; border-bottom: 4px solid #1E2235;
    cursor: not-allowed; font-family: inherit;
}
.btn-check.btn-ready {
    background: #58CC02; color: #fff; cursor: pointer;
    border-bottom-color: #3D8C00;
}
.btn-check.btn-ready:active { border-bottom-width: 0; margin-top: 4px; }

/* Feedback states */
.feedback-locked { pointer-events: none; }
.session-option-card.option-correct {
    border-color: #58CC02; border-bottom-color: #3D8C00;
    background: rgba(88,204,2,0.08); color: #58CC02;
}
.session-option-card.option-wrong {
    border-color: #FF4B4B; border-bottom-color: #CC0000;
    background: rgba(255,75,75,0.08); color: #FF4B4B;
}
.feedback-field {
    display: flex; align-items: center; justify-content: center;
    min-height: 52px;
}
.field-correct { border-color: var(--success); background: rgba(0,184,148,0.1); color: var(--success); font-weight: 600; }
.field-wrong { border-color: var(--danger); background: rgba(225,112,85,0.1); color: var(--danger); font-weight: 600; }

/* Feedback bar */
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.slide-up { animation: slideUp 0.3s ease both; }

.feedback-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 20px; z-index: 30;
    max-width: 600px; margin: 0 auto;
}
.feedback-correct { background: #0D2818; border-top: 3px solid var(--success); }
.feedback-wrong { background: #2A1A1A; border-top: 3px solid var(--danger); }

.feedback-content { margin-bottom: 14px; }
.feedback-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.feedback-icon { width: 28px; height: 28px; }
.feedback-correct .feedback-icon { color: var(--success); }
.feedback-wrong .feedback-icon { color: var(--danger); }
.feedback-title { font-size: 1.2rem; font-weight: 700; }
.feedback-correct .feedback-title { color: var(--success); }
.feedback-wrong .feedback-title { color: var(--danger); }
.feedback-correct-answer { font-size: 0.92rem; color: #fff; font-weight: 500; margin-bottom: 4px; }
.feedback-explanation { font-size: 0.88rem; color: #8A8FA8; }
.feedback-life-lost {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.85rem; color: var(--danger); font-weight: 600; margin-top: 6px;
}
.heart-lost { width: 16px; height: 16px; color: var(--danger); }

.btn-feedback-correct {
    background: var(--success); color: #fff; border-color: var(--success);
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.btn-feedback-correct:hover { background: var(--secondary-dark); }
.btn-feedback-wrong {
    background: var(--danger); color: #fff; border-color: var(--danger);
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.btn-feedback-wrong:hover { opacity: 0.9; }

/* No lives page */
.no-lives-container {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.no-lives-card { text-align: center; max-width: 400px; }
.no-lives-hearts { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.heart-big { width: 36px; height: 36px; color: #3A3F50; }
.no-lives-card h1 { font-size: 1.6rem; margin-bottom: 10px; color: #fff; }
.no-lives-card p { color: #8A8FA8; margin-bottom: 20px; }
.no-lives-actions { margin-bottom: 16px; }
.no-lives-hint { font-size: 0.82rem; color: var(--text-muted); }

/* ─── Responsive ─── */

@media (max-width: 768px) {
    .hero { flex-direction: column; padding: 40px 20px; gap: 32px; text-align: center; }
    .hero-content h1 { font-size: 2rem; }
    .hero-actions { justify-content: center; }
    .hero-visual { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .features { padding: 32px 20px; }
    .nav-links a:not(.btn) { display: none; }

    .sidebar { display: none; }
    .app-main { margin-left: 0; }
    .app-content { padding: 20px; padding-bottom: 80px; }
    .mobile-nav { display: flex; }

    .learn-layout .learn-wrapper { grid-template-columns: 1fr; }
    .learn-main { margin-left: 0; padding-bottom: 80px; }
    .right-sidebar { display: none; }

    .path-row:nth-child(6n+2) { margin-left: -30px; }
    .path-row:nth-child(6n+3) { margin-left: -15px; }
    .path-row:nth-child(6n+4) { margin-left: 22px; }
    .path-row:nth-child(6n+5) { margin-left: 38px; }
    .path-row:nth-child(6n+6) { margin-left: 10px; }
    .node-circle { width: 60px; height: 60px; }
    .node-current .node-circle { width: 58px; height: 58px; }

    .options-grid { grid-template-columns: 1fr; }
    .result-stats { gap: 16px; }

    .panel-sidebar { display: none; }
    .panel-main { margin-left: 0; padding: 16px; }
    .panel-table { font-size: 0.82rem; }
    .panel-table th, .panel-table td { padding: 10px 12px; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .hero-content h1 { font-size: 1.6rem; }
    .hero-card { padding: 14px 18px; }
    .auth-card { padding: 28px 20px; }
    .result-card { padding: 28px 20px; }
    .onboarding-card { padding: 28px 20px; }
    .choice-btn { padding: 8px 14px; font-size: 0.82rem; }
    .skill-btn { padding: 14px 16px; }
}

/* Branding */
.brand-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
.preview-img { max-width: 200px; max-height: 80px; border-radius: 8px; margin-bottom: 8px; }
.preview-favicon { width: 32px; height: 32px; border-radius: 4px; margin-bottom: 8px; }
.settings-preview { margin-bottom: 8px; }

/* Features */
.land-features { padding: 60px 32px; max-width: 1100px; margin: 0 auto; }
.land-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.land-feat {
    background: #1A1D2E; border-radius: 16px; padding: 28px;
    border: 1px solid #2A2E3D; transition: all 0.2s ease;
}
.land-feat:hover { border-color: #3A3F50; transform: translateY(-4px); }
.land-feat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.land-feat-icon .icon { width: 24px; height: 24px; }
.land-feat h3 { font-size: 1.05rem; margin-bottom: 6px; }
.land-feat p { color: #8A8FA8; font-size: 0.88rem; line-height: 1.5; }

/* How it works */
.land-how { padding: 60px 32px; max-width: 800px; margin: 0 auto; text-align: center; }
.land-how h2 { font-size: 1.8rem; margin-bottom: 32px; }
.land-steps { display: flex; gap: 32px; justify-content: center; }
.land-step { flex: 1; text-align: center; }
.land-step-num {
    width: 48px; height: 48px; border-radius: 50%; background: #58CC02; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 800; margin: 0 auto 12px;
}
.land-step h3 { margin-bottom: 6px; }
.land-step p { color: #8A8FA8; font-size: 0.88rem; }

/* CTA */
.land-cta {
    text-align: center; padding: 60px 32px;
    background: linear-gradient(135deg, rgba(88,204,2,0.08), rgba(28,176,246,0.08));
    border-radius: 24px; max-width: 700px; margin: 40px auto;
}
.land-cta h2 { font-size: 1.8rem; margin-bottom: 10px; }
.land-cta p { color: #8A8FA8; margin-bottom: 24px; }

/* SEO section */
.land-seo { max-width: 700px; margin: 40px auto; padding: 0 32px; text-align: center; }
.land-seo h2 { font-size: 1.3rem; margin-bottom: 10px; }
.land-seo p { color: #636E82; font-size: 0.9rem; line-height: 1.7; margin-bottom: 16px; }
.land-seo-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.land-seo-tags span {
    background: #1A1D2E; color: #636E82; padding: 5px 14px;
    border-radius: 20px; font-size: 0.78rem; font-weight: 500;
}

/* Footer */
.land-footer { text-align: center; padding: 40px 32px; border-top: 1px solid #1A1D2E; margin-top: 40px; }
.land-footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 12px; flex-wrap: wrap; }
.land-footer-links a { color: #636E82; font-size: 0.85rem; text-decoration: none; }
.land-footer-links a:hover { color: #fff; }
.land-footer-copy { color: #3A3F50; font-size: 0.82rem; }

@media (max-width: 768px) {
    .land-hero { flex-direction: column; padding: 40px 20px; gap: 32px; text-align: center; }
    .land-hero-content h1 { font-size: 2rem; }
    .land-hero-trust { justify-content: center; }
    .land-phone { display: none; }
    .land-features-grid { grid-template-columns: 1fr; }
    .land-steps { flex-direction: column; gap: 20px; }
    .land-nav-links a:not(.land-btn) { display: none; }
    .land-cta { margin: 20px 16px; }
}

/* Contact form */
.contact-page { max-width: 480px; margin: 40px auto; padding: 0 20px; text-align: center; }
.contact-page h1 { color: #fff; margin-bottom: 6px; }
.contact-sub { color: #636E82; margin-bottom: 24px; font-size: 0.92rem; }
.contact-form { text-align: left; display: flex; flex-direction: column; gap: 12px; }
.cf-field label { display: block; font-size: 0.82rem; color: #8A8FA8; font-weight: 600; margin-bottom: 4px; }
.cf-field input, .cf-field textarea {
    width: 100%; background: #1A1D2E; border: 2px solid #2A2E3D; border-radius: 12px;
    padding: 12px 14px; color: #fff; font-size: 0.95rem; font-family: inherit;
}
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: #58CC02; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: #3A3F50; }

/* ─── Apply Page ─── */
.apply-page { max-width: 700px; margin: 0 auto; padding: 40px 20px 60px; }
.apply-header { text-align: center; margin-bottom: 32px; }
.apply-header h1 { color: #fff; font-size: 2rem; font-weight: 800; margin-bottom: 10px; }
.apply-header p { color: #8A8FA8; font-size: 1rem; line-height: 1.6; max-width: 560px; margin: 0 auto; }
.apply-roles { margin-bottom: 32px; text-align: center; }
.apply-roles h2 { color: #fff; font-size: 1.1rem; margin-bottom: 14px; }
.apply-role-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.apply-role-tag {
    padding: 6px 14px; background: #1A1D2E; border: 1px solid #2A2E3D;
    border-radius: 50px; color: #8A8FA8; font-size: 0.82rem; font-weight: 500;
}
.apply-form-card {
    background: #1A1D2E; border-radius: 18px; padding: 32px;
    border: 1px solid #2A2E3D;
}
.apply-form-card h2 { color: #fff; font-size: 1.2rem; margin-bottom: 20px; }
.apply-form { display: flex; flex-direction: column; gap: 14px; }
.af-row { display: flex; gap: 12px; }
.af-field { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.af-field label { font-size: 0.82rem; color: #8A8FA8; font-weight: 600; }
.af-field input, .af-field select, .af-field textarea {
    padding: 12px 14px; background: #0D1117; border: 2px solid #2A2E3D;
    border-radius: 10px; color: #fff; font-size: 0.92rem; font-family: inherit;
    transition: border-color 0.2s;
}
.af-field input:focus, .af-field select:focus, .af-field textarea:focus {
    outline: none; border-color: #58CC02;
}
.af-field input::placeholder, .af-field textarea::placeholder { color: #3A3F50; }
.af-field select { cursor: pointer; }
.af-field select option { background: #0D1117; }

@media (max-width: 600px) {
    .af-row { flex-direction: column; }
    .apply-form-card { padding: 20px; }
}

/* ─── Blog ─── */
.blog-page { max-width: 820px; margin: 0 auto; padding: 40px 20px 60px; }
.blog-header { text-align: center; margin-bottom: 32px; }
.blog-header h1 { color: #fff; font-size: 2.2rem; margin-bottom: 8px; font-weight: 800; }
.blog-header p { color: #8A8FA8; font-size: 1.05rem; max-width: 500px; margin: 0 auto; }

.blog-filters { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; justify-content: center; }
.blog-filter {
    padding: 7px 18px; border-radius: 50px; font-size: 0.85rem; font-weight: 600;
    background: #1A1D2E; color: #8A8FA8; border: 1px solid #2A2E3D; transition: all 0.15s;
    text-decoration: none;
}
.blog-filter:hover { border-color: #58CC02; color: #fff; }
.blog-filter.active { background: #58CC02; border-color: #58CC02; color: #fff; }

.blog-featured {
    display: flex; gap: 0; background: #1A1D2E; border-radius: 18px;
    border: 1px solid #2A2E3D; overflow: hidden; margin-bottom: 28px;
    transition: all 0.2s; text-decoration: none;
}
.blog-featured:hover { border-color: #58CC02; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.bf-cover { width: 320px; min-height: 220px; object-fit: cover; flex-shrink: 0; }
.bf-content { padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.bf-badge { display: inline-block; background: rgba(88,204,2,0.12); color: #58CC02; padding: 4px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; margin-bottom: 10px; width: fit-content; }
.bf-content h2 { color: #fff; font-size: 1.4rem; margin-bottom: 10px; line-height: 1.3; }
.bf-content p { color: #8A8FA8; font-size: 0.9rem; line-height: 1.6; margin-bottom: 10px; }
.bf-meta { color: #636E82; font-size: 0.78rem; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.blog-card {
    background: #1A1D2E; border-radius: 16px; border: 1px solid #2A2E3D;
    overflow: hidden; transition: all 0.2s; text-decoration: none;
    display: flex; flex-direction: column;
}
.blog-card:hover { border-color: #58CC02; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.bc-cover { width: 100%; height: 160px; object-fit: cover; }
.bc-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.bc-cat { display: inline-block; background: rgba(108,92,231,0.12); color: #A29BFE; padding: 3px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; margin-bottom: 8px; width: fit-content; }
.bc-body h3 { color: #fff; font-size: 1.05rem; margin-bottom: 8px; line-height: 1.3; }
.bc-body p { color: #8A8FA8; font-size: 0.85rem; line-height: 1.5; margin-bottom: 8px; flex: 1; }
.bc-meta { color: #636E82; font-size: 0.75rem; margin-top: auto; }
.blog-empty { text-align: center; color: #636E82; padding: 60px 20px; font-size: 0.95rem; }

/* Blog Article */
.blog-article {
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}
.ba-header { margin-bottom: 28px; }
.ba-header h1 { color: #fff; font-size: 2rem; line-height: 1.25; margin: 10px 0 14px; font-weight: 800; }
.ba-meta { display: flex; gap: 16px; color: #636E82; font-size: 0.82rem; flex-wrap: wrap; }
.ba-meta span { display: flex; align-items: center; gap: 4px; }
.ba-cover { width: 100%; max-height: 400px; object-fit: cover; border-radius: 16px; margin-bottom: 28px; }

/* Blog Content — zentraler Style für alle Artikel */
.blog-content {
    max-width: 820px;
    margin: 0 auto;
    color: #C8CDD5;
    font-size: 17px;
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.blog-content > *:first-child { margin-top: 0; }

.blog-content h2 {
    margin-top: 44px;
    margin-bottom: 16px;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
    padding-bottom: 10px;
    border-bottom: 1px solid #2A2E3D;
}
.blog-content h3 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: 21px;
    font-weight: 600;
    color: #A29BFE;
}
.blog-content h4 {
    margin-top: 24px;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #B2BEC3;
}

.blog-content p {
    margin: 0 0 18px;
}

.blog-content ul, .blog-content ol {
    margin: 18px 0 28px 30px;
    padding: 0;
}
.blog-content li {
    margin-bottom: 18px;
    color: #B2BEC3;
    line-height: 2.1;
}
.blog-content li .katex { line-height: 1; }
.blog-content li strong { color: #fff; }

.blog-content strong { color: #fff; }
.blog-content em { color: #A29BFE; font-style: italic; }

.blog-content a {
    color: #1CB0F6;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}
.blog-content a:hover {
    color: #58CC02;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-content blockquote {
    margin: 28px 0;
    padding: 18px 24px;
    border-left: 5px solid #6C5CE7;
    background: #161929;
    border-radius: 0 14px 14px 0;
    color: #A29BFE;
    font-style: italic;
    font-size: 16px;
    line-height: 1.7;
}
.blog-content blockquote strong { color: #CE82FF; }

.blog-content code {
    background: #161929;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.88em;
    color: #FDCB6E;
    font-family: 'Courier New', monospace;
}
.blog-content pre {
    background: #161929;
    padding: 18px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 20px 0;
    border: 1px solid #2A2E3D;
}
.blog-content pre code {
    padding: 0;
    background: none;
    font-size: 0.85em;
}

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 24px 0;
    display: block;
}

.blog-content hr {
    border: none;
    border-top: 1px solid #2A2E3D;
    margin: 36px 0;
}

.blog-content .katex-display {
    display: block;
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 18px;
    margin: 26px 0;
    background: #161929;
    border-radius: 12px;
}

/* KaTeX Inline */
.blog-content .katex {
    font-size: 1.12em;
}
.blog-content p .katex {
    margin: 0 2px;
}

.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.92em;
}
.blog-content th {
    text-align: left;
    padding: 10px 14px;
    background: #161929;
    color: #FDCB6E;
    font-weight: 600;
    border-bottom: 2px solid #2A2E3D;
}
.blog-content td {
    padding: 10px 14px;
    border-bottom: 1px solid #1A1D2E;
    color: #B2BEC3;
}

@media (max-width: 700px) {
    .blog-content { font-size: 16px; }
    .blog-content h2 { font-size: 24px; margin-top: 32px; }
    .blog-content h3 { font-size: 19px; margin-top: 24px; }
    .blog-content blockquote { padding: 14px 16px; }
    .blog-content ul, .blog-content ol { margin-left: 20px; }
}

/* Exercise blocks in blog */
.blog-content .exercise {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    padding: 14px 18px;
    background: #161929;
    border-radius: 12px;
}
.blog-content .exercise div:first-child {
    font-size: 16px;
    color: #C8CDD5;
}
.blog-content .exercise .katex-display {
    margin: 0;
    padding: 0;
    background: none;
}

.ba-related { margin-top: 48px; border-top: 1px solid #2A2E3D; padding-top: 28px; }
.ba-related h3 { color: #fff; margin-bottom: 18px; font-size: 1.1rem; }
.ba-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

@media (max-width: 640px) {
    .blog-featured { flex-direction: column; }
    .bf-cover { width: 100%; min-height: 180px; height: 180px; }
    .blog-header h1 { font-size: 1.6rem; }
    .ba-header h1 { font-size: 1.5rem; }
    .blog-grid { grid-template-columns: 1fr; }
}

/* Panel unread message */
.msg-unread { border-left: 3px solid #58CC02; }

/* Panel Dashboard */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.dash-stat {
    background: var(--bg-card); border-radius: 10px; padding: 12px 10px; text-align: center;
    border-left: 3px solid var(--primary); box-shadow: var(--shadow);
}
.dash-stat:hover { transform: none; }
.dash-stat:nth-child(1) { border-left-color: #58CC02; }
.dash-stat:nth-child(1) .ds-val { color: #58CC02; }
.dash-stat:nth-child(2) { border-left-color: #1CB0F6; }
.dash-stat:nth-child(2) .ds-val { color: #1CB0F6; }
.dash-stat:nth-child(3) { border-left-color: #FF9600; }
.dash-stat:nth-child(3) .ds-val { color: #FF9600; }
.dash-stat:nth-child(4) { border-left-color: #CE82FF; }
.dash-stat:nth-child(4) .ds-val { color: #CE82FF; }
.ds-val { display: block; font-size: 1.3rem; font-weight: 800; color: var(--primary); }
.ds-label { font-size: 0.72rem; color: var(--text-light); }

.dash-section { margin-bottom: 0; }
.dash-section-title { font-size: 0.95rem; font-weight: 800; margin-bottom: 10px; }
.dash-card { background: #131620; border: 1px solid #1E2235; border-radius: 10px; padding: 14px; }

.dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.dash-chart-card {
    background: var(--bg-card); border-radius: 14px; padding: 20px;
    box-shadow: var(--shadow);
}
.dash-chart-card h3 { font-size: 0.95rem; margin-bottom: 12px; color: var(--text); }
.dash-chart-sub { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin-top: 8px; }

.dash-donut-wrap { position: relative; max-width: 200px; margin: 0 auto; }
.dash-donut-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 1.4rem; font-weight: 800; color: var(--text);
}

@media (max-width: 768px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .dash-charts { grid-template-columns: 1fr; }
}

/* Report button & modal */
.feedback-top-row { display: flex; align-items: center; justify-content: space-between; }
.report-btn {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background: none; color: #E74C3C;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}
.report-btn:hover { color: #FF6B6B; }
.report-btn .icon { width: 18px; height: 18px; }

.report-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.report-modal {
    background: #1A1D2E; border-radius: 16px; padding: 24px;
    width: 100%; max-width: 380px; border: 1px solid #2A2E3D;
}
.report-modal h3 { color: #fff; margin-bottom: 14px; font-size: 1.1rem; }
.report-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.report-reason {
    padding: 8px 14px; background: #0D1117; border: 2px solid #2A2E3D;
    border-radius: 20px; color: #B2BEC3; font-size: 0.82rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.report-reason:hover { border-color: #FF4B4B; }
.report-reason.selected { background: #FF4B4B; border-color: #FF4B4B; color: #fff; }
.report-modal textarea {
    width: 100%; background: #0D1117; border: 2px solid #2A2E3D; border-radius: 10px;
    padding: 10px; color: #fff; font-family: inherit; font-size: 0.88rem; margin-bottom: 12px;
    resize: none;
}
.report-modal textarea:focus { outline: none; border-color: #FF4B4B; }
.report-modal textarea::placeholder { color: #3A3F50; }
.report-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Report cards in panel */
.report-card {
    background: var(--bg-card); border-radius: 14px; padding: 18px;
    box-shadow: var(--shadow); margin-bottom: 12px;
}
.rc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rc-header-left { display: flex; align-items: center; gap: 8px; }
.rc-badge { padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; }
.rc-open { background: #FFEAEA; color: #E74C3C; }
.rc-done { background: #E8F8F5; color: #58CC02; }
.rc-reason { font-weight: 600; font-size: 0.88rem; }
.rc-date { font-size: 0.78rem; color: var(--text-muted); }

.rc-section { margin-bottom: 10px; }
.rc-label { font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted); font-weight: 600; letter-spacing: 0.5px; display: block; margin-bottom: 2px; }
.rc-value { font-size: 0.92rem; color: var(--text); }
.rc-wrong { color: #E74C3C; }
.rc-right { color: #58CC02; }
.rc-row { display: flex; gap: 16px; }
.rc-half { flex: 1; }

.rc-details { margin: 10px 0; }
.rc-details summary {
    cursor: pointer; font-size: 0.82rem; color: var(--text-muted); font-weight: 600;
    padding: 6px 0;
}
.rc-tech { margin-top: 8px; }
.rc-tech-row {
    display: flex; justify-content: space-between; padding: 4px 0;
    border-bottom: 1px solid var(--border); font-size: 0.82rem;
}
.rc-tech-row span:first-child { color: var(--text-muted); font-weight: 600; }
.rc-tech-row span:last-child { color: var(--text-light); }

.rc-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Toast notification */
.report-toast {
    position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
    background: #1A1D2E; border: 1px solid #58CC02; color: #58CC02;
    padding: 12px 24px; border-radius: 12px; font-weight: 600; font-size: 0.9rem;
    display: flex; align-items: center; gap: 8px; z-index: 200;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* ─── School System ─── */
.sch-container { width: 100%; max-width: 500px; padding: 28px 16px 80px; }
.sch-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 16px; }

.sch-card {
    background: #1A1D2E; border-radius: 14px; padding: 18px;
    border: 1px solid #2A2E3D; margin-bottom: 12px;
}
.sch-card h3 { color: #fff; font-size: 0.95rem; margin-bottom: 10px; }

.sch-inline-form { display: flex; gap: 8px; align-items: center; }
.sch-inline-form input {
    flex: 1; background: #0D1117; border: 2px solid #2A2E3D; border-radius: 10px;
    padding: 10px 14px; color: #fff; font-family: inherit; font-size: 0.92rem;
}
.sch-inline-form input:focus { outline: none; border-color: #58CC02; }
.sch-inline-form input::placeholder { color: #3A3F50; }

.sch-section { margin-bottom: 20px; }
.sch-sec-title { font-size: 0.9rem; color: #8A8FA8; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }

.sch-link-card {
    display: flex; align-items: center; gap: 12px;
    background: #1A1D2E; border-radius: 12px; padding: 14px 16px;
    text-decoration: none; color: #fff; border: 1px solid #2A2E3D;
    transition: all 0.2s; margin-bottom: 6px;
}
.sch-link-card:hover { background: #232740; transform: translateX(4px); }
.sch-link-card .icon { width: 22px; height: 22px; flex-shrink: 0; }

.sch-assignment-card {
    display: flex; align-items: center; justify-content: space-between;
    background: #1A1D2E; border-radius: 12px; padding: 14px 16px;
    border: 1px solid #2A2E3D; margin-bottom: 6px;
}
.sac-title { font-weight: 700; color: #fff; display: block; font-size: 0.92rem; }
.sac-meta { font-size: 0.78rem; color: #636E82; }
.sac-done { font-weight: 800; color: #58CC02; font-size: 0.95rem; }

.sch-student-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid #2A2E3D; color: #B2BEC3; font-size: 0.92rem;
}
.sch-student-row .icon { width: 18px; height: 18px; }

.sch-form { display: flex; flex-direction: column; gap: 12px; }
.sch-select {
    width: 100%; background: #0D1117; border: 2px solid #2A2E3D; border-radius: 10px;
    padding: 10px 14px; color: #fff; font-family: inherit; font-size: 0.92rem;
}
.sch-select:focus { outline: none; border-color: #58CC02; }

.sch-task-card {
    display: flex; align-items: center; justify-content: space-between;
    background: #1A1D2E; border-radius: 12px; padding: 14px 16px;
    border: 1px solid #2A2E3D; margin-bottom: 6px;
}
.task-done { border-color: #58CC02; }
.task-overdue { border-color: #FF4B4B; }
.stc-title { font-weight: 700; color: #fff; display: block; font-size: 0.92rem; }
.stc-meta { font-size: 0.78rem; color: #636E82; }
.stc-badge { padding: 4px 12px; border-radius: 20px; font-weight: 700; font-size: 0.82rem; }
.stc-done { background: rgba(88,204,2,0.15); color: #58CC02; }

/* Legal content */
.legal-content { color: #8A8FA8; font-size: 0.92rem; line-height: 1.8; text-align: left; }
.legal-content h2 { color: #fff; font-size: 1.1rem; margin: 24px 0 8px; }
.legal-content h3 { color: #B2BEC3; font-size: 0.95rem; margin: 16px 0 6px; }
.legal-content p { margin-bottom: 12px; }
.legal-content ul, .legal-content ol { margin: 8px 0 12px 20px; }
.legal-content li { margin-bottom: 4px; }
.legal-content a { color: #58CC02; }

/* TOS checkbox */
.auth-tos { margin-top: 4px; }
.tos-label { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; color: #636E82; cursor: pointer; }
.tos-label input[type="checkbox"] { margin-top: 3px; accent-color: #58CC02; }
.tos-label a { color: #58CC02; }

/* Formula example rows */
.example-row { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.example-row input, .example-row textarea {
    width: 100%; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm);
    font-size: 0.92rem; font-family: monospace; background: var(--bg);
}
.example-row textarea { font-size: 0.85rem; }
.field-help { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; display: block; }


/* ═══════════════════════════════════════════
   DUEL SYSTEM
   ═══════════════════════════════════════════ */

.duel-home { max-width: 560px; margin: 0 auto; padding: 20px; }
.duel-page-title { font-size: 1.3rem; color: #fff; font-weight: 800; display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }

/* VS Card */
.duel-vs-card {
    display: flex; align-items: center; justify-content: center; gap: 20px;
    background: #1A1D2E; border: 1px solid #2A2E3D; border-radius: 20px;
    padding: 32px 24px; margin-bottom: 24px;
}
.duel-player { text-align: center; flex: 1; }
.duel-avatar-ring {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.duel-avatar-green { background: linear-gradient(135deg, #58CC02, #1CB0F6); }
.duel-avatar-grey { background: #2A2E3D; }
.duel-avatar-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.duel-player-name { display: block; color: #fff; font-weight: 700; font-size: 0.92rem; }
.duel-player-league { display: block; color: #636E82; font-size: 0.78rem; margin-top: 2px; }
.duel-vs-center { flex-shrink: 0; }
.duel-vs-text {
    font-size: 2rem; font-weight: 900; color: #FF4B4B;
    text-shadow: 0 0 20px rgba(255,75,75,0.3);
}

/* Search */
.duel-search-btn {
    width: 100%; padding: 16px; background: linear-gradient(135deg, #FF4B4B, #FF9600);
    color: #fff; border: none; border-radius: 14px; font-size: 1rem; font-weight: 800;
    cursor: pointer; font-family: inherit; display: flex; align-items: center;
    justify-content: center; gap: 8px; letter-spacing: 0.5px; transition: all 0.2s;
}
.duel-search-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(255,75,75,0.3); }
.duel-search-status {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 16px; color: #8A8FA8; font-size: 0.88rem; margin-top: 12px;
}
.duel-spinner-ring {
    width: 20px; height: 20px; border: 3px solid #2A2E3D; border-top-color: #FF4B4B;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
.duel-timer { color: #636E82; font-weight: 700; font-size: 0.82rem; }

/* Stats */
.duel-stats-row {
    display: flex; gap: 12px; margin-top: 24px;
}
.duel-stat {
    flex: 1; background: #1A1D2E; border: 1px solid #2A2E3D; border-radius: 12px;
    padding: 14px; text-align: center;
}
.duel-stat-num { display: block; font-size: 1.4rem; font-weight: 800; color: #fff; }
.duel-stat-label { display: block; font-size: 0.72rem; color: #636E82; font-weight: 600; margin-top: 2px; }

/* Recent */
.duel-recent { margin-top: 24px; }
.duel-section-title { color: #8A8FA8; font-size: 0.88rem; font-weight: 700; margin-bottom: 10px; }
.duel-recent-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: #1A1D2E; border: 1px solid #2A2E3D; border-radius: 10px;
    margin-bottom: 6px; text-decoration: none; transition: border-color 0.2s;
}
.duel-recent-row:hover { border-color: #3A3F50; }
.duel-recent-result {
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-weight: 800; font-size: 0.78rem; flex-shrink: 0;
}
.duel-win { background: rgba(88,204,2,0.15); color: #58CC02; }
.duel-loss { background: rgba(255,75,75,0.15); color: #FF4B4B; }
.duel-draw { background: rgba(138,143,168,0.15); color: #8A8FA8; }
.duel-recent-opp { flex: 1; color: #B2BEC3; font-size: 0.88rem; }
.duel-recent-score { color: #fff; font-weight: 700; font-size: 0.88rem; }

/* ─── Match Page ─── */
.duel-match-layout { background: #131620; }
.duel-match-page {
    max-width: 600px; margin: 0 auto; min-height: 100vh;
    display: flex; flex-direction: column;
}
.duel-topbar {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: #1A1D2E; border-bottom: 1px solid #2A2E3D;
}
.duel-tb-player { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #B2BEC3; font-weight: 600; }
.duel-tb-avatar {
    width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
    background: #2A2E3D; display: flex; align-items: center; justify-content: center;
}
.duel-tb-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.duel-tb-progress { flex: 1; text-align: center; }
.duel-tb-count { font-size: 0.78rem; color: #636E82; font-weight: 700; }
.duel-tb-bar { height: 6px; background: #2A2E3D; border-radius: 3px; margin-top: 4px; }
.duel-tb-fill { height: 100%; background: #58CC02; border-radius: 3px; transition: width 0.3s; }
.duel-timer-bar { height: 4px; background: #0D1117; }
.duel-timer-fill { height: 100%; background: #58CC02; transition: width 0.1s linear; width: 0; }

.duel-question-area {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 32px 24px;
}
.duel-q-text {
    font-size: 1.3rem; color: #fff; font-weight: 700; text-align: center;
    margin-bottom: 32px; line-height: 1.5;
}
.duel-input-area { display: flex; gap: 10px; width: 100%; max-width: 400px; }
.duel-answer-input {
    flex: 1; padding: 16px 20px; background: #1A1D2E; border: 2px solid #2A2E3D;
    border-radius: 14px; color: #fff; font-size: 1.1rem; font-family: inherit;
    outline: none; text-align: center;
}
.duel-answer-input:focus { border-color: #58CC02; }
.duel-answer-input::placeholder { color: #3A3F50; }
.duel-submit-btn {
    width: 56px; height: 56px; border-radius: 50%; background: #58CC02;
    border: none; cursor: pointer; display: flex; align-items: center;
    justify-content: center; color: #fff; transition: all 0.2s; flex-shrink: 0;
}
.duel-submit-btn:hover { background: #4CAF00; transform: scale(1.05); }

/* MC Options */
.duel-mc-options { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 400px; }
.duel-mc-btn {
    padding: 16px 20px; background: #1A1D2E; border: 2px solid #2A2E3D;
    border-radius: 14px; color: #fff; font-size: 1rem; font-family: inherit;
    cursor: pointer; text-align: center; transition: all 0.15s;
}
.duel-mc-btn:hover { border-color: #58CC02; background: rgba(88,204,2,0.05); }

/* Feedback */
.duel-feedback {
    position: fixed; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; z-index: 100;
    animation: fadeIn 0.3s ease;
}
.duel-fb-correct { background: rgba(88,204,2,0.95); }
.duel-fb-wrong { background: rgba(255,75,75,0.95); }
.duel-fb-text { color: #fff; font-size: 1.5rem; font-weight: 800; margin-top: 12px; }
.duel-fb-points { color: rgba(255,255,255,0.8); font-size: 1rem; font-weight: 600; margin-top: 4px; }

/* ─── Result Page ─── */
.duel-result-page { max-width: 560px; margin: 0 auto; padding: 20px; }
.duel-result-header {
    text-align: center; padding: 32px; border-radius: 20px; margin-bottom: 20px;
}
.duel-result-win { background: linear-gradient(135deg, rgba(88,204,2,0.15), rgba(253,203,110,0.1)); border: 1px solid rgba(88,204,2,0.3); }
.duel-result-loss { background: linear-gradient(135deg, rgba(255,75,75,0.15), rgba(255,75,75,0.05)); border: 1px solid rgba(255,75,75,0.3); }
.duel-result-draw { background: #1A1D2E; border: 1px solid #2A2E3D; }
.duel-result-header h1 { color: #fff; font-size: 1.6rem; margin: 12px 0 4px; }
.duel-result-header p { color: #8A8FA8; font-size: 0.92rem; }

.duel-result-vs {
    display: flex; align-items: center; gap: 16px;
    background: #1A1D2E; border: 1px solid #2A2E3D; border-radius: 16px;
    padding: 24px; margin-bottom: 16px;
}
.duel-result-player { flex: 1; text-align: center; }
.duel-result-avatar {
    width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 8px;
    overflow: hidden; background: #2A2E3D; display: flex; align-items: center;
    justify-content: center;
}
.duel-result-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.duel-result-name { display: block; color: #B2BEC3; font-size: 0.85rem; font-weight: 600; }
.duel-result-score { display: block; font-size: 1.8rem; font-weight: 900; color: #fff; margin-top: 4px; }
.duel-score-win { color: #58CC02; }
.duel-result-divider { color: #636E82; font-weight: 800; font-size: 0.88rem; flex-shrink: 0; }

.duel-result-stats {
    background: #1A1D2E; border: 1px solid #2A2E3D; border-radius: 14px;
    padding: 16px; margin-bottom: 20px;
}
.duel-result-stat-row {
    display: flex; align-items: center; padding: 8px 0;
    border-bottom: 1px solid #2A2E3D;
}
.duel-result-stat-row:last-child { border-bottom: none; }
.duel-result-stat-row .duel-stat-label { flex: 1; color: #636E82; font-size: 0.82rem; }
.duel-result-stat-row .duel-stat-val { width: 80px; text-align: center; color: #B2BEC3; font-size: 0.85rem; font-weight: 600; }

.duel-result-actions { display: flex; flex-direction: column; gap: 10px; }
.duel-action-btn {
    display: block; padding: 16px; border-radius: 14px; text-align: center;
    font-weight: 800; font-size: 0.95rem; text-decoration: none; transition: all 0.2s;
}
.duel-action-primary { background: linear-gradient(135deg, #FF4B4B, #FF9600); color: #fff; }
.duel-action-primary:hover { transform: translateY(-2px); }
.duel-action-secondary { background: #1A1D2E; border: 1px solid #2A2E3D; color: #8A8FA8; }
.duel-action-secondary:hover { border-color: #3A3F50; color: #fff; }

/* ─── Fraction Input ─── */
.session-fraction-input { display: flex; justify-content: center; padding: 20px 0; }
.fraction-input-box {
    display: flex; flex-direction: column; align-items: center;
    background: #1E2235; border-radius: 16px; padding: 24px 40px;
    border: 2px solid #2A2E3D;
}
.frac-field {
    width: 80px; text-align: center; font-size: 1.8rem; font-weight: 800;
    background: transparent; border: none; color: #fff; outline: none;
    padding: 8px; border-radius: 8px;
}
.frac-field:focus { background: #131620; }
.frac-field::placeholder { color: #3A4055; }
.frac-line { width: 90px; height: 3px; background: #fff; margin: 4px 0; border-radius: 2px; }

/* ─── Comparison ─── */
.session-comparison { padding: 20px 0; }
.comparison-values { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.comparison-left { font-size: 1.2rem; color: #fff; font-weight: 700; text-align: center; }
.comparison-buttons { display: flex; gap: 12px; }
.comp-btn { cursor: pointer; }
.comp-btn input { display: none; }
.comp-btn span {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 16px;
    background: #1E2235; border: 2px solid #2A2E3D;
    font-size: 1.8rem; font-weight: 800; color: #8B95A8;
    transition: all 0.2s;
}
.comp-btn input:checked + span {
    background: #1CB0F6; border-color: #1CB0F6; color: #fff;
    transform: scale(1.05);
}

/* ─── Number Line ─── */
.session-number-line { padding: 30px 10px; }
.nl-labels { display: flex; justify-content: space-between; margin-bottom: 12px; color: #8B95A8; font-size: 0.85rem; font-weight: 700; }
.nl-slider {
    width: 100%; height: 8px; -webkit-appearance: none; appearance: none;
    background: #2A2E3D; border-radius: 4px; outline: none;
}
.nl-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%;
    background: #58CC02; border: 3px solid #fff; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.nl-slider::-moz-range-thumb {
    width: 28px; height: 28px; border-radius: 50%;
    background: #58CC02; border: 3px solid #fff; cursor: pointer;
}

/* ─── Tap Correct ─── */
.session-tap-correct { padding: 10px 0; }
.tap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tap-item {
    padding: 16px 12px; background: #1E2235; border: 2px solid #2A2E3D;
    border-radius: 14px; color: #fff; font-size: 1rem; font-weight: 700;
    cursor: pointer; text-align: center; transition: all 0.2s;
    font-family: inherit;
}
.tap-item.selected { background: #1CB0F6; border-color: #1CB0F6; color: #fff; transform: scale(0.97); }

/* ─── Chip-based Input (Wortbank) ─── */
.session-chip-fill, .session-chip-frac { padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.chip-slot {
    width: 80px; height: 60px; display: flex; align-items: center; justify-content: center;
    background: #131620; border: 2px dashed #3A4055; border-radius: 12px;
    font-size: 1.5rem; font-weight: 800; color: #fff; cursor: pointer;
    transition: all 0.2s;
}
.chip-slot.slot-active { border-color: #58CC02; border-style: solid; box-shadow: 0 0 0 3px rgba(88,204,2,0.2); }
.chip-slot.slot-filled { border-style: solid; border-color: #2A2E3D; background: #1E2235; }
.slot-placeholder { color: #3A4055; font-size: 1.8rem; }
.slot-value { color: #fff; font-size: 1.8rem; font-weight: 800; }

/* Fraction slots */
.frac-slots { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.frac-slot-num, .frac-slot-den { width: 70px; height: 50px; font-size: 1.4rem; }
.frac-divider { width: 80px; height: 3px; background: #fff; border-radius: 2px; }

/* Chip bank */
.chip-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 10px; }
.chip-btn {
    min-width: 48px; height: 44px; padding: 0 14px;
    background: #1E2235; border: 2px solid #2A2E3D; border-radius: 12px;
    color: #fff; font-size: 1rem; font-weight: 800; cursor: pointer;
    font-family: inherit; transition: all 0.15s;
    white-space: nowrap; max-width: 100%;
}
.chip-btn:hover { border-color: #58CC02; transform: translateY(-2px); }
.chip-btn:active { transform: scale(0.95); }
.chip-btn.chip-selected { background: #58CC02; border-color: #58CC02; color: #fff; }
.chip-btn.chip-used { opacity: 0.3; pointer-events: none; }