/* ════════════════════════════════════════════════════════════════════
   EDU Shell — 500 Polish Items
   Layout · Type · Colors · Interactions · A11y · Mobile · Forms · Print
   ════════════════════════════════════════════════════════════════════ */

/* ─── Token additions (items 1-40) ───────────────────────────────── */
:root {
    /* 4px spacing grid */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
    --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

    /* Radii */
    --rd-xs: 4px; --rd-sm: 6px; --rd-md: 8px; --rd-lg: 12px;
    --rd-xl: 16px; --rd-2xl: 20px; --rd-full: 9999px;

    /* Z-index hierarchy */
    --z-base: 1; --z-sticky: 5; --z-aside: 10; --z-header: 50;
    --z-drawer: 80; --z-overlay: 100; --z-modal: 200; --z-toast: 9000;
    --z-tooltip: 9500; --z-debug: 99999;

    /* Type scale */
    --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15.5px;
    --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 38px;

    /* Line-heights */
    --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.7;

    /* Letter-spacing */
    --ls-tight: -0.4px; --ls-snug: -0.2px; --ls-normal: 0;
    --ls-wide: 0.3px; --ls-wider: 0.6px;

    /* Semantic colors */
    --sc-success: #10B981; --sc-success-bg: rgba(16,185,129,0.12);
    --sc-warning: #F59E0B; --sc-warning-bg: rgba(245,158,11,0.12);
    --sc-error:   #EF4444; --sc-error-bg:   rgba(239,68,68,0.12);
    --sc-info:    #3B82F6; --sc-info-bg:    rgba(59,130,246,0.12);

    /* Easing */
    --ez-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ez-in:  cubic-bezier(0.7, 0, 0.84, 0);
    --ez-io:  cubic-bezier(0.65, 0, 0.35, 1);
    --ez-spr: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Duration */
    --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; --dur-slower: 520ms;
}
body.dark-mode {
    --sc-success: #34D399; --sc-success-bg: rgba(52,211,153,0.15);
    --sc-warning: #FBBF24; --sc-warning-bg: rgba(251,191,36,0.15);
    --sc-error:   #F87171; --sc-error-bg:   rgba(248,113,113,0.15);
    --sc-info:    #60A5FA; --sc-info-bg:    rgba(96,165,250,0.15);
}

/* ─── Reset & base (items 41-70) ────────────────────────────────── */
body.edu-shell-active {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body.edu-shell-active * { -webkit-tap-highlight-color: transparent; }
body.edu-shell-active img,
body.edu-shell-active svg { user-select: none; -webkit-user-drag: none; }
body.edu-shell-active a { text-decoration: none; color: var(--edu-accent); }
body.edu-shell-active a:hover { text-decoration: underline; }
body.edu-shell-active hr {
    border: 0;
    border-top: 1px solid var(--edu-border);
    margin: var(--sp-5) 0;
}

/* ─── Buttons (items 71-110) ────────────────────────────────────── */
body.edu-shell-active button { font-family: inherit; cursor: pointer; }
body.edu-shell-active button:disabled,
body.edu-shell-active [disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: saturate(0.6);
}
body.edu-shell-active button:not(:disabled):active { transform: scale(0.97); }
body.edu-shell-active button {
    transition: background var(--dur-fast) var(--ez-out),
                color var(--dur-fast) var(--ez-out),
                transform var(--dur-fast) var(--ez-out),
                border-color var(--dur-fast) var(--ez-out),
                box-shadow var(--dur-fast) var(--ez-out);
}

/* primary / secondary / ghost / danger semantics */
.btn-pri {
    background: var(--edu-text); color: var(--edu-surface);
    border: 0; padding: 10px 16px; border-radius: var(--rd-md);
    font-weight: 700; font-size: var(--fs-base);
}
.btn-pri:hover { background: var(--edu-accent); }
.btn-sec {
    background: transparent; color: var(--edu-text);
    border: 1px solid var(--edu-border);
    padding: 10px 16px; border-radius: var(--rd-md);
    font-weight: 600; font-size: var(--fs-base);
}
.btn-sec:hover { border-color: var(--edu-text); }
.btn-ghost {
    background: transparent; color: var(--edu-text-mute);
    border: 0; padding: 8px 12px; border-radius: var(--rd-sm);
    font-weight: 600;
}
.btn-ghost:hover { background: rgba(15,23,42,0.06); color: var(--edu-text); }
.btn-danger {
    background: var(--sc-error); color: #fff;
    border: 0; padding: 10px 16px; border-radius: var(--rd-md);
    font-weight: 700;
}
.btn-danger:hover { background: #DC2626; }

/* Icon button standard */
.btn-icon {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: var(--rd-md);
    color: var(--edu-text-mute); cursor: pointer;
}
.btn-icon:hover { background: rgba(15,23,42,0.06); color: var(--edu-text); }

/* ─── Form elements (items 111-140) ─────────────────────────────── */
body.edu-shell-active input,
body.edu-shell-active textarea,
body.edu-shell-active select {
    font-family: inherit; font-size: var(--fs-base);
    background: var(--edu-surface); color: var(--edu-text);
    border: 1px solid var(--edu-border);
    border-radius: var(--rd-md);
    padding: 9px 12px;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
body.edu-shell-active input:focus,
body.edu-shell-active textarea:focus,
body.edu-shell-active select:focus {
    outline: 0;
    border-color: var(--edu-accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
body.edu-shell-active input.is-invalid,
body.edu-shell-active textarea.is-invalid {
    border-color: var(--sc-error);
    background: var(--sc-error-bg);
}
body.edu-shell-active input.is-valid {
    border-color: var(--sc-success);
}
body.edu-shell-active input::placeholder,
body.edu-shell-active textarea::placeholder {
    color: var(--edu-text-soft);
}
body.edu-shell-active label { font-size: var(--fs-sm); font-weight: 600; color: var(--edu-text-mute); margin-bottom: 4px; display: block; }
body.edu-shell-active .form-hint {
    font-size: var(--fs-xs); color: var(--edu-text-soft);
    margin-top: 4px; line-height: var(--lh-snug);
}
body.edu-shell-active .form-err {
    font-size: var(--fs-xs); color: var(--sc-error);
    margin-top: 4px; font-weight: 600;
    display: flex; align-items: center; gap: 4px;
}
body.edu-shell-active .form-err::before { content: "⚠"; }
body.edu-shell-active .form-group + .form-group { margin-top: var(--sp-3); }

/* ─── Focus rings — universal a11y (items 141-170) ─────────────── */
body.edu-shell-active *:focus-visible {
    outline: 2px solid var(--edu-accent);
    outline-offset: 2px;
    border-radius: var(--rd-xs);
}
body.edu-shell-active button:focus-visible { outline-offset: -1px; }
body.edu-shell-active .skip-link {
    position: absolute; top: -100px; left: 8px;
    background: var(--edu-text); color: var(--edu-surface);
    padding: 8px 14px; border-radius: var(--rd-md);
    z-index: var(--z-debug);
}
body.edu-shell-active .skip-link:focus { top: 8px; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Touch & mobile (items 171-210) ────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    body.edu-shell-active button,
    body.edu-shell-active .clickable,
    body.edu-shell-active [role="button"] {
        min-height: 44px; min-width: 44px;
    }
    body.edu-shell-active .btn-icon { width: 44px; height: 44px; }
    body.edu-shell-active input,
    body.edu-shell-active textarea,
    body.edu-shell-active select {
        font-size: 16px; /* prevents iOS zoom */
        padding: 12px 14px;
    }
}
body.edu-shell-active .touch-feedback {
    position: relative; overflow: hidden;
}
body.edu-shell-active .touch-feedback::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 60%);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
body.edu-shell-active .touch-feedback:active::after { opacity: 1; }

/* ─── Animations (items 211-250) ────────────────────────────────── */
@keyframes edu-fade-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes edu-fade-out    { from { opacity: 1; } to { opacity: 0; } }
@keyframes edu-slide-up    { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes edu-slide-down  { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes edu-slide-left  { from { transform: translateX(8px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes edu-scale-in    { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes edu-pulse       { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes edu-spin        { to { transform: rotate(360deg); } }
@keyframes edu-bounce      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes edu-shake       { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

.anim-fade { animation: edu-fade-in var(--dur-base) var(--ez-out); }
.anim-slide-up { animation: edu-slide-up var(--dur-base) var(--ez-out); }
.anim-scale-in { animation: edu-scale-in var(--dur-base) var(--ez-spr); }
.anim-pulse { animation: edu-pulse 1.5s ease-in-out infinite; }
.anim-spin { animation: edu-spin 0.8s linear infinite; }
.anim-shake { animation: edu-shake 0.4s ease-in-out; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.edu-shell-active *,
    body.edu-shell-active *::before,
    body.edu-shell-active *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Spinners & loaders (items 251-280) ────────────────────────── */
.spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(15,23,42,0.15);
    border-top-color: var(--edu-accent);
    border-radius: 50%;
    animation: edu-spin 0.7s linear infinite;
    display: inline-block;
}
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

.dots-loader {
    display: inline-flex; gap: 4px;
    align-items: center;
}
.dots-loader span {
    width: 6px; height: 6px;
    background: var(--edu-text-mute);
    border-radius: 50%;
    animation: edu-bounce 1.2s infinite;
}
.dots-loader span:nth-child(2) { animation-delay: 0.15s; }
.dots-loader span:nth-child(3) { animation-delay: 0.3s; }

.loading-overlay {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: var(--z-overlay);
    backdrop-filter: blur(2px);
}
body.dark-mode .loading-overlay { background: rgba(15,23,42,0.6); }

/* Skeleton variants */
.sk-text { height: 14px; background: rgba(15,23,42,0.08); border-radius: 4px; margin: 6px 0; }
.sk-text-w70 { width: 70%; }
.sk-text-w50 { width: 50%; }
.sk-text-w90 { width: 90%; }
.sk-circle { width: 40px; height: 40px; border-radius: 50%; background: rgba(15,23,42,0.08); }
.sk-rect { height: 80px; background: rgba(15,23,42,0.08); border-radius: var(--rd-md); }
.sk-text, .sk-circle, .sk-rect {
    background: linear-gradient(90deg, rgba(15,23,42,0.05) 25%, rgba(15,23,42,0.1) 50%, rgba(15,23,42,0.05) 75%);
    background-size: 200% 100%;
    animation: edu-sk-shim 1.4s linear infinite;
}
@keyframes edu-sk-shim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
body.dark-mode .sk-text, body.dark-mode .sk-circle, body.dark-mode .sk-rect {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
}

/* ─── Badges & chips (items 281-310) ────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: var(--rd-full);
    font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    background: rgba(15,23,42,0.08); color: var(--edu-text-mute);
}
.badge-success { background: var(--sc-success-bg); color: var(--sc-success); }
.badge-warning { background: var(--sc-warning-bg); color: var(--sc-warning); }
.badge-error   { background: var(--sc-error-bg);   color: var(--sc-error); }
.badge-info    { background: var(--sc-info-bg);    color: var(--sc-info); }
.badge-dot::before { content: '●'; font-size: 8px; }
.badge-new::after { content: 'YENİ'; margin-left: 4px; }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: var(--rd-full);
    background: var(--edu-surface); border: 1px solid var(--edu-border);
    font-size: var(--fs-sm); font-weight: 600; color: var(--edu-text);
    cursor: pointer;
}
.chip:hover { border-color: var(--edu-text); }
.chip.is-active { background: var(--edu-text); color: var(--edu-surface); border-color: var(--edu-text); }
.chip-close {
    background: transparent; border: 0;
    color: var(--edu-text-mute); cursor: pointer;
    margin-left: 2px; padding: 0;
}

/* ─── Empty / Error states (items 311-340) ──────────────────────── */
.empty-state, .error-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: var(--sp-12) var(--sp-6);
    text-align: center;
    color: var(--edu-text-mute);
}
.empty-state-icon, .error-state-icon {
    font-size: 48px; margin-bottom: var(--sp-3);
    opacity: 0.5;
}
.empty-state-title, .error-state-title {
    font-size: var(--fs-lg); font-weight: 700;
    color: var(--edu-text); margin-bottom: var(--sp-2);
}
.empty-state-desc, .error-state-desc {
    font-size: var(--fs-sm); max-width: 360px; line-height: var(--lh-relaxed);
    margin-bottom: var(--sp-4);
}
.empty-state-cta {
    background: var(--edu-text); color: var(--edu-surface);
    border: 0; padding: 10px 18px; border-radius: var(--rd-md);
    font-weight: 700; font-size: var(--fs-base); cursor: pointer;
}

/* ─── Tooltips (items 341-360) ──────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(15,23,42,0.95); color: #fff;
    padding: 4px 9px; border-radius: var(--rd-sm);
    font-size: var(--fs-xs); font-weight: 600;
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity 0.2s, transform 0.2s;
    z-index: var(--z-tooltip);
}
[data-tooltip]:hover::after {
    opacity: 1; transform: translateX(-50%) translateY(0);
    transition-delay: 0.4s; /* 400ms delay */
}
[data-tooltip-side="bottom"]::after { bottom: auto; top: calc(100% + 6px); transform: translateX(-50%) translateY(-4px); }
[data-tooltip-side="bottom"]:hover::after { transform: translateX(-50%) translateY(0); }
[data-tooltip-side="right"]::after { left: calc(100% + 6px); top: 50%; bottom: auto; transform: translateY(-50%) translateX(-4px); }
[data-tooltip-side="right"]:hover::after { transform: translateY(-50%); }

/* ─── Tables (items 361-380) ────────────────────────────────────── */
body.edu-shell-active main table {
    width: 100%; border-collapse: collapse;
    background: var(--edu-surface);
    border: 1px solid var(--edu-border);
    border-radius: var(--rd-md);
    overflow: hidden;
    font-size: var(--fs-sm);
}
body.edu-shell-active main thead {
    background: rgba(15,23,42,0.03);
}
body.edu-shell-active main th {
    text-align: left; font-weight: 700;
    padding: 10px 14px; color: var(--edu-text-mute);
    font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    border-bottom: 1px solid var(--edu-border);
}
body.edu-shell-active main td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--edu-border-soft);
    color: var(--edu-text);
}
body.edu-shell-active main tbody tr:last-child td { border-bottom: 0; }
body.edu-shell-active main tbody tr:hover { background: rgba(15,23,42,0.03); }
body.dark-mode.edu-shell-active main thead { background: rgba(255,255,255,0.03); }
body.dark-mode.edu-shell-active main tbody tr:hover { background: rgba(255,255,255,0.04); }

/* ─── Print styles (items 381-400) ──────────────────────────────── */
@media print {
    body.edu-shell-active header,
    body.edu-shell-active nav,
    body.edu-shell-active aside,
    body.edu-shell-active .tb-perm-bar,
    body.edu-shell-active .tb-chat-input-area,
    body.edu-shell-active #fab-btn,
    body.edu-shell-active #fab-menu,
    body.edu-shell-active .edu-search-bd,
    body.edu-shell-active .edu-search-palette,
    body.edu-shell-active .toast,
    body.edu-shell-active #app-toast-host,
    body.edu-shell-active .edu-reader-actions,
    body.edu-shell-active .tb-perm-bar { display: none !important; }

    body.edu-shell-active,
    body.edu-shell-active main {
        background: #fff !important;
        color: #000 !important;
        position: static !important;
    }
    body.edu-shell-active main {
        margin: 0 !important; padding: 0 !important;
        max-width: 100% !important;
    }
    body.edu-shell-active a {
        text-decoration: underline !important;
        color: #000 !important;
    }
    body.edu-shell-active a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: 0.85em; color: #555;
    }
    body.edu-shell-active img { max-width: 100% !important; page-break-inside: avoid; }
    body.edu-shell-active h1, body.edu-shell-active h2, body.edu-shell-active h3 {
        page-break-after: avoid;
    }
    body.edu-shell-active p, body.edu-shell-active li { orphans: 3; widows: 3; }
}

/* ─── Scrollable lists & infinite scroll markers (401-415) ──────── */
.scroll-shadow {
    background:
        linear-gradient(var(--edu-surface) 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), var(--edu-surface) 70%) 0 100%,
        radial-gradient(50% 4px at 50% 0, rgba(15,23,42,0.1), rgba(15,23,42,0)),
        radial-gradient(50% 4px at 50% 100%, rgba(15,23,42,0.1), rgba(15,23,42,0)) 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 30px, 100% 30px, 100% 8px, 100% 8px;
    background-attachment: local, local, scroll, scroll;
}
.list-end-marker {
    text-align: center; padding: var(--sp-6);
    color: var(--edu-text-soft); font-size: var(--fs-sm);
}

/* ─── Dividers & separators (416-425) ──────────────────────────── */
.divider { height: 1px; background: var(--edu-border); margin: var(--sp-4) 0; }
.divider-thick { height: 2px; background: var(--edu-border); }
.divider-dashed { border-top: 1px dashed var(--edu-border); height: 0; }
.divider-with-text {
    display: flex; align-items: center; gap: var(--sp-3);
    color: var(--edu-text-soft); font-size: var(--fs-xs);
    font-weight: 700; letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin: var(--sp-5) 0;
}
.divider-with-text::before, .divider-with-text::after {
    content: ''; flex: 1; height: 1px; background: var(--edu-border);
}

/* ─── Callouts (info/warning/success/error) (426-445) ──────────── */
.callout {
    border-left: 3px solid;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--rd-sm);
    margin: var(--sp-3) 0;
    font-size: var(--fs-sm); line-height: var(--lh-relaxed);
}
.callout-title { font-weight: 700; margin-bottom: 4px; font-size: var(--fs-base); }
.callout-info    { background: var(--sc-info-bg);    border-color: var(--sc-info);    color: var(--sc-info); }
.callout-success { background: var(--sc-success-bg); border-color: var(--sc-success); color: var(--sc-success); }
.callout-warning { background: var(--sc-warning-bg); border-color: var(--sc-warning); color: var(--sc-warning); }
.callout-error   { background: var(--sc-error-bg);   border-color: var(--sc-error);   color: var(--sc-error); }

/* ─── Progress bars (446-460) ──────────────────────────────────── */
.progress {
    width: 100%; height: 8px;
    background: rgba(15,23,42,0.08);
    border-radius: var(--rd-full);
    overflow: hidden;
}
.progress-bar {
    height: 100%; background: var(--edu-accent);
    border-radius: var(--rd-full);
    transition: width var(--dur-slow) var(--ez-out);
}
.progress-success .progress-bar { background: var(--sc-success); }
.progress-warning .progress-bar { background: var(--sc-warning); }
.progress-error .progress-bar { background: var(--sc-error); }
.progress-striped .progress-bar {
    background-image: linear-gradient(45deg,
        rgba(255,255,255,0.15) 25%, transparent 25%,
        transparent 50%, rgba(255,255,255,0.15) 50%,
        rgba(255,255,255,0.15) 75%, transparent 75%);
    background-size: 20px 20px;
}
.progress-animated .progress-bar {
    animation: edu-progress-stripes 1s linear infinite;
}
@keyframes edu-progress-stripes { from { background-position: 0 0; } to { background-position: 20px 0; } }

/* ─── Switch / toggle (461-470) ────────────────────────────────── */
.switch {
    position: relative; display: inline-block;
    width: 38px; height: 22px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
    position: absolute; cursor: pointer;
    inset: 0;
    background: rgba(15,23,42,0.18);
    border-radius: var(--rd-full);
    transition: background var(--dur-fast);
}
.switch-slider::before {
    content: ''; position: absolute;
    height: 16px; width: 16px;
    left: 3px; bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--dur-fast) var(--ez-out);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .switch-slider { background: var(--edu-accent); }
.switch input:checked + .switch-slider::before { transform: translateX(16px); }

/* ─── Tabs (471-485) ────────────────────────────────────────────── */
.tabs {
    display: flex; gap: var(--sp-1);
    border-bottom: 1px solid var(--edu-border);
    margin-bottom: var(--sp-4);
}
.tabs-tab {
    background: transparent; border: 0;
    padding: 10px 14px;
    font-weight: 600; font-size: var(--fs-base);
    color: var(--edu-text-mute);
    cursor: pointer; border-radius: var(--rd-sm) var(--rd-sm) 0 0;
    position: relative;
    transition: color var(--dur-fast);
}
.tabs-tab:hover { color: var(--edu-text); }
.tabs-tab.is-active { color: var(--edu-text); }
.tabs-tab.is-active::after {
    content: ''; position: absolute;
    bottom: -1px; left: 14px; right: 14px;
    height: 2px; background: var(--edu-accent);
    border-radius: 2px 2px 0 0;
}

/* ─── Modals (486-500) ──────────────────────────────────────────── */
.edu-modal-bd {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-4);
    animation: edu-fade-in var(--dur-base) var(--ez-out);
}
.edu-modal {
    background: var(--edu-surface); color: var(--edu-text);
    border-radius: var(--rd-xl);
    padding: var(--sp-6);
    max-width: 480px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    box-shadow: var(--edu-shadow-lg);
    animation: edu-scale-in var(--dur-base) var(--ez-spr);
}
.edu-modal-head {
    display: flex; align-items: center;
    margin-bottom: var(--sp-4);
}
.edu-modal-title { font-size: var(--fs-xl); font-weight: 800; flex: 1; }
.edu-modal-close {
    background: transparent; border: 0;
    color: var(--edu-text-mute); cursor: pointer;
    width: 32px; height: 32px;
    border-radius: var(--rd-md);
    font-size: 20px;
}
.edu-modal-close:hover { background: rgba(15,23,42,0.06); color: var(--edu-text); }
.edu-modal-foot {
    display: flex; gap: var(--sp-2);
    justify-content: flex-end;
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--edu-border);
}

/* ─── Utility classes — 50+ atomic helpers ─────────────────────── */
/* Display */
.d-none { display: none !important; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-inline-flex { display: inline-flex; }
/* Flex */
.fc { display:flex; align-items:center; }
.fcc { display:flex; align-items:center; justify-content:center; }
.fcb { display:flex; align-items:center; justify-content:space-between; }
.fcg-1 { gap: var(--sp-1); }
.fcg-2 { gap: var(--sp-2); }
.fcg-3 { gap: var(--sp-3); }
.fcg-4 { gap: var(--sp-4); }
.flex-1 { flex: 1; }
.fcol { flex-direction: column; }
.fwrap { flex-wrap: wrap; }
/* Spacing margin */
.m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }
.ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* Spacing padding */
.p-0 { padding: 0; } .p-1 { padding: var(--sp-1); } .p-2 { padding: var(--sp-2); }
.p-3 { padding: var(--sp-3); } .p-4 { padding: var(--sp-4); } .p-5 { padding: var(--sp-5); }
/* Text */
.t-c { text-align: center; } .t-l { text-align: left; } .t-r { text-align: right; }
.t-bold { font-weight: 700; } .t-semi { font-weight: 600; } .t-normal { font-weight: 400; }
.t-mute { color: var(--edu-text-mute); } .t-soft { color: var(--edu-text-soft); }
.t-pri { color: var(--edu-accent); }
.t-success { color: var(--sc-success); } .t-warning { color: var(--sc-warning); }
.t-error { color: var(--sc-error); } .t-info { color: var(--sc-info); }
.t-xs { font-size: var(--fs-xs); } .t-sm { font-size: var(--fs-sm); }
.t-md { font-size: var(--fs-md); } .t-lg { font-size: var(--fs-lg); } .t-xl { font-size: var(--fs-xl); }
.t-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.t-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.t-mono { font-family: ui-monospace, SF Mono, monospace; }
/* Width / Height */
.w-full { width: 100%; } .h-full { height: 100%; }
.w-auto { width: auto; }
/* Border / Radius */
.b-0 { border: 0; }
.bd { border: 1px solid var(--edu-border); }
.bd-t { border-top: 1px solid var(--edu-border); }
.bd-b { border-bottom: 1px solid var(--edu-border); }
.rd-sm { border-radius: var(--rd-sm); }
.rd-md { border-radius: var(--rd-md); }
.rd-lg { border-radius: var(--rd-lg); }
.rd-xl { border-radius: var(--rd-xl); }
.rd-full { border-radius: var(--rd-full); }
/* Background */
.bg-surface { background: var(--edu-surface); }
.bg-mute { background: var(--edu-surface-mute); }
/* Visibility */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.invisible { visibility: hidden; }
/* Cursor */
.pointer { cursor: pointer; } .not-allowed { cursor: not-allowed; }

/* ─── High-contrast preference ─────────────────────────────────── */
@media (prefers-contrast: more) {
    :root {
        --edu-border: rgba(15,23,42,0.3);
        --edu-text-mute: rgba(15,23,42,0.85);
    }
    body.dark-mode {
        --edu-border: rgba(255,255,255,0.4);
        --edu-text-mute: rgba(255,255,255,0.9);
    }
    body.edu-shell-active button,
    body.edu-shell-active .chip,
    body.edu-shell-active .badge {
        border: 2px solid currentColor !important;
    }
}

/* ─── Forced colors (Windows high contrast) ────────────────────── */
@media (forced-colors: active) {
    body.edu-shell-active button,
    body.edu-shell-active input,
    body.edu-shell-active select {
        border: 1px solid ButtonText !important;
    }
    body.edu-shell-active .chip.is-active {
        forced-color-adjust: none;
    }
}

/* ─── Specific module fixes ─────────────────────────────────────── */
/* Coach landing tiles */
body.edu-shell-active .tb-coach-landing-tile {
    transition: transform var(--dur-fast) var(--ez-out),
                box-shadow var(--dur-fast) var(--ez-out);
}
body.edu-shell-active .tb-coach-landing-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--edu-shadow);
}

/* Topic row consistency */
body.edu-shell-active .tb-topic-row,
body.edu-shell-active .tb-side-item {
    transition: background var(--dur-fast);
}

/* Spot card */
body.edu-shell-active .spot-card {
    border-radius: var(--rd-md);
    transition: transform var(--dur-fast) var(--ez-out);
}
body.edu-shell-active .spot-card:hover { transform: translateY(-1px); }

/* Question card */
body.edu-shell-active .question-card,
body.edu-shell-active .tb-question-card {
    border-radius: var(--rd-md);
    border: 1px solid var(--edu-border);
}

/* Answer option a/b/c/d */
body.edu-shell-active .answer-option {
    border: 1px solid var(--edu-border);
    border-radius: var(--rd-md);
    padding: 10px 14px;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ez-out);
}
body.edu-shell-active .answer-option:hover {
    border-color: var(--edu-text);
    transform: translateX(2px);
}
body.edu-shell-active .answer-option.is-selected {
    background: var(--sc-info-bg);
    border-color: var(--sc-info);
}
body.edu-shell-active .answer-option.is-correct {
    background: var(--sc-success-bg);
    border-color: var(--sc-success);
}
body.edu-shell-active .answer-option.is-wrong {
    background: var(--sc-error-bg);
    border-color: var(--sc-error);
    animation: edu-shake 0.4s;
}

/* ─── Reader specific polish ────────────────────────────────────── */
.edu-reader::selection,
.edu-reader *::selection {
    background: rgba(245,158,11,0.3);
}
.edu-reader p:first-of-type::first-letter {
    /* drop cap optional */
}
.edu-reader-hl-yellow {
    background: linear-gradient(180deg, transparent 60%, rgba(245,158,11,0.3) 60%);
    cursor: help;
}
.edu-reader-hl-note {
    background: linear-gradient(180deg, transparent 60%, rgba(99,102,241,0.25) 60%);
    border-bottom: 2px dotted var(--edu-accent);
    cursor: help;
}

/* ─── Chat polish ───────────────────────────────────────────────── */
body.edu-shell-active .tb-msg-ai-text {
    animation: edu-slide-up var(--dur-base) var(--ez-out);
}
body.edu-shell-active .tb-msg-ai-text p:first-child { margin-top: 0; }
body.edu-shell-active .tb-msg-ai-text p:last-child { margin-bottom: 0; }
body.edu-shell-active .tb-chat-typing {
    display: inline-flex; gap: 4px; align-items: center;
    padding: 8px 12px;
    background: var(--edu-surface);
    border-radius: var(--rd-lg);
    color: var(--edu-text-mute);
    font-size: var(--fs-sm);
}
body.edu-shell-active .tb-chat-typing span {
    width: 5px; height: 5px;
    background: var(--edu-text-mute);
    border-radius: 50%;
    animation: edu-bounce 1.2s infinite;
}
body.edu-shell-active .tb-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
body.edu-shell-active .tb-chat-typing span:nth-child(3) { animation-delay: 0.3s; }

/* ─── Universal hover lift (cards) ──────────────────────────────── */
.hover-lift {
    transition: transform var(--dur-fast) var(--ez-out),
                box-shadow var(--dur-fast) var(--ez-out);
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--edu-shadow);
}

/* ─── Fade-in on appear (CSS-only intersection alternative) ────── */
@media (prefers-reduced-motion: no-preference) {
    body.edu-shell-active main > * {
        animation: edu-slide-up var(--dur-base) var(--ez-out);
    }
}

/* ─── Image loading shimmer ─────────────────────────────────────── */
img[loading="lazy"] {
    background: linear-gradient(90deg, rgba(15,23,42,0.05) 25%, rgba(15,23,42,0.08) 50%, rgba(15,23,42,0.05) 75%);
    background-size: 200% 100%;
    animation: edu-sk-shim 1.4s linear infinite;
}
img.loaded { animation: none; background: none; }

/* ─── Scroll snap for horizontal lists ─────────────────────────── */
.snap-x {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.snap-x::-webkit-scrollbar { display: none; }
.snap-item { scroll-snap-align: start; flex-shrink: 0; }

/* ─── No-image fallback ─────────────────────────────────────────── */
img.no-img,
img:not([src]),
img[src=""] {
    background: var(--edu-surface-mute);
    position: relative;
}
img.no-img::after {
    content: '🖼'; font-size: 24px;
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--edu-text-soft);
}

/* ─── Number tabular alignment ──────────────────────────────────── */
.tabular { font-variant-numeric: tabular-nums; }

/* ─── Loading hint on top of page ───────────────────────────────── */
.page-loading-bar {
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px; background: var(--edu-accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-base) var(--ez-out);
    z-index: var(--z-debug);
}
.page-loading-bar.is-loading {
    transform: scaleX(0.9);
    animation: edu-pulse 1.5s ease-in-out infinite;
}
.page-loading-bar.is-done {
    transform: scaleX(1);
    transition: transform 0.3s, opacity 0.2s 0.2s;
    opacity: 0;
}

/* ─── Confirm dialog buttons ────────────────────────────────────── */
.confirm-dialog-actions {
    display: flex; gap: var(--sp-2); justify-content: flex-end;
    margin-top: var(--sp-4);
}

/* ─── Notification dot ──────────────────────────────────────────── */
.notif-dot {
    position: relative;
}
.notif-dot::after {
    content: '';
    position: absolute; top: 2px; right: 2px;
    width: 8px; height: 8px;
    background: var(--sc-error);
    border-radius: 50%;
    border: 2px solid var(--edu-surface);
}

/* ─── Card with image header ────────────────────────────────────── */
.card-img {
    background: var(--edu-surface);
    border: 1px solid var(--edu-border);
    border-radius: var(--rd-md);
    overflow: hidden;
    transition: transform var(--dur-fast) var(--ez-out);
}
.card-img:hover { transform: translateY(-2px); }
.card-img-hero {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--edu-accent), var(--edu-accent-2));
}
.card-img-body { padding: var(--sp-4); }
.card-img-title { font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.card-img-sub { font-size: var(--fs-sm); color: var(--edu-text-mute); }

/* ─── End of polish ─────────────────────────────────────────────── */