html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: #b32121;
    color: #fff;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    display: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 1.6rem 2rem 1.4rem;
    position: fixed;
    width: auto;
    min-width: 300px;
    max-width: 440px;
    z-index: 10000;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.55;
    text-align: center;
}

#blazor-error-ui::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
    border-radius: 0;
}

#blazor-error-ui a.reload {
    color: #ffe0b2;
    font-weight: 700;
    text-decoration: underline;
    margin-left: 0.4rem;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.6rem;
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.75);
        line-height: 1;
    }

    #blazor-error-ui .dismiss:hover {
        color: #fff;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Version Banner - centered modal overlay
   ═══════════════════════════════════════════════════════════════════════════ */
.vb-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.60);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: vb-fade-in 0.2s ease;
}

@keyframes vb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.vb-dialog {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.35);
    max-width: 480px;
    width: 100%;
    padding: 28px 28px 22px;
    animation: vb-slide-up 0.25s cubic-bezier(.22,.68,0,1.2);
}

@keyframes vb-slide-up {
    from { transform: translateY(28px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

[data-theme="dark"] .vb-dialog {
    background: #1e1e1e;
    color: #f0f0f0;
}

.vb-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.vb-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.vb-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vb-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #BF360C;
    line-height: 1.2;
}

[data-theme="dark"] .vb-title {
    color: #FF7043;
}

.vb-version-badge {
    display: inline-block;
    background: #E64A19;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.04em;
    width: fit-content;
}

.vb-changes {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.vb-change-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: #FBE9E7;
    border-left: 3px solid #E64A19;
    border-radius: 0 6px 6px 0;
}

[data-theme="dark"] .vb-change-item {
    background: #2a1a16;
    border-left-color: #FF7043;
}

.vb-change-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #BF360C;
}

[data-theme="dark"] .vb-change-label {
    color: #FF8A65;
}

.vb-change-desc {
    font-size: 0.80rem;
    color: #444;
    line-height: 1.45;
}

[data-theme="dark"] .vb-change-desc {
    color: #ccc;
}

.vb-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

.vb-btn {
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}

.vb-btn:hover  { filter: brightness(1.08); }
.vb-btn:active { transform: scale(0.97); }

.vb-btn--primary {
    background: #E64A19;
    color: #fff;
}

.vb-btn--secondary {
    background: transparent;
    color: #888;
    border: 1px solid #ccc;
}

[data-theme="dark"] .vb-btn--secondary {
    color: #aaa;
    border-color: #555;
}

.vb-more {
    font-size: 0.75rem;
    color: #999;
    margin: -4px 0 12px;
    padding-left: 2px;
}

[data-theme="dark"] .vb-more {
    color: #666;
}
/* ═══════════════════════════════════════════════════════════════════════════
   AudioPlayer  —  BrainPower centralised audio player
   Supports: idle pill button, active bar (EQ + progress + controls)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens (override per-subject via CSS custom props) ─────────────────── */
:root {
    --ap-accent:        #F78B1E;
    --ap-accent-dark:   #d97610;
    --ap-accent-rgb:    247, 139, 30;
    --ap-bg:            #fff;
    --ap-bg-active:     #fff8f0;
    --ap-border:        rgba(0, 0, 0, 0.10);
    --ap-text:          #1a1a1a;
    --ap-text-muted:    #888;
    --ap-radius:        40px;
    --ap-track-bg:      rgba(0, 0, 0, 0.10);
    --ap-shadow:        0 2px 16px rgba(var(--ap-accent-rgb), 0.18),
                        0 1px  4px rgba(0, 0, 0, 0.06);
}

/* ── IDLE PILL BUTTON ────────────────────────────────────────────────────── */

.ap-idle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px 0 14px;
    border: none;
    border-radius: var(--ap-radius);
    background: var(--ap-accent);
    color: #fff;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
    box-shadow: 0 2px 8px rgba(var(--ap-accent-rgb), 0.35);
    user-select: none;
    text-decoration: none;
    margin: 14px 0 6px;
}

.ap-idle-btn:hover {
    background: var(--ap-accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--ap-accent-rgb), 0.45);
}

.ap-idle-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(var(--ap-accent-rgb), 0.30);
}

.ap-idle-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-idle-icon svg {
    width: 18px;
    height: 18px;
}

.ap-idle-label {
    font-weight: 700;
}

.ap-idle-title {
    font-weight: 400;
    font-size: 0.80rem;
    opacity: 0.85;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── ACTIVE PLAYER BAR ───────────────────────────────────────────────────── */

.ap-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 14px;
    background: var(--ap-bg-active);
    border: 1px solid rgba(var(--ap-accent-rgb), 0.25);
    box-shadow: var(--ap-shadow);
    margin: 14px 0 10px;
    flex-wrap: wrap;
    min-height: 54px;
    max-width: 640px;
    transition: background 0.2s, border-color 0.2s;
}

.ap-bar--paused {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

/* ── EQ VISUALISER ───────────────────────────────────────────────────────── */

.ap-eq {
    display: flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 20px;
    flex-shrink: 0;
}

.ap-eq-bar {
    width: 3px;
    border-radius: 2px;
    background: var(--ap-accent);
    transform-origin: bottom;
}

.ap-eq-bar:nth-child(1) { animation: ap-eq-bounce 0.9s  ease-in-out infinite; }
.ap-eq-bar:nth-child(2) { animation: ap-eq-bounce 0.75s ease-in-out infinite 0.12s; }
.ap-eq-bar:nth-child(3) { animation: ap-eq-bounce 1.05s ease-in-out infinite 0.24s; }
.ap-eq-bar:nth-child(4) { animation: ap-eq-bounce 0.82s ease-in-out infinite 0.06s; }

@keyframes ap-eq-bounce {
    0%, 100% { height: 4px;  opacity: 0.5; }
    30%       { height: 18px; opacity: 1;   }
    60%       { height: 9px;  opacity: 0.8; }
}

.ap-eq--paused .ap-eq-bar {
    animation: none;
    height: 6px;
    opacity: 0.4;
}

/* ── BAR TITLE ───────────────────────────────────────────────────────────── */

.ap-bar-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ap-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* ── TIME DISPLAY ────────────────────────────────────────────────────────── */

.ap-time {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ap-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

.ap-time-sep,
.ap-time-total {
    opacity: 0.55;
    margin-left: 2px;
}

/* ── PROGRESS TRACK ──────────────────────────────────────────────────────── */

.ap-track {
    position: relative;
    flex: 1;
    min-width: 60px;
    max-width: 260px;
    height: 6px;
    background: var(--ap-track-bg);
    border-radius: 4px;
    overflow: visible;
    cursor: pointer;
}

.ap-fill {
    position: absolute;
    inset: 0;
    right: auto;
    height: 100%;
    border-radius: 4px;
    background: var(--ap-accent);
    min-width: 0;
    transition: width 0.25s linear;
}

.ap-knob {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ap-accent);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(var(--ap-accent-rgb), 0.30);
    pointer-events: none;
    transition: left 0.25s linear;
}

/* ── CONTROL BUTTONS ─────────────────────────────────────────────────────── */

.ap-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ap-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, transform 0.10s;
}

.ap-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.ap-btn--primary {
    background: var(--ap-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(var(--ap-accent-rgb), 0.35);
}

.ap-btn--primary:hover {
    background: var(--ap-accent-dark);
    transform: scale(1.08);
}

.ap-btn--primary:active {
    transform: scale(0.96);
}

.ap-btn--seek {
    background: rgba(0, 0, 0, 0.05);
    color: var(--ap-text-muted);
    position: relative;
    width: 36px;
    height: 36px;
}

.ap-btn--seek svg {
    width: 18px;
    height: 18px;
}

.ap-seek-label {
    position: absolute;
    font-size: 7px;
    font-weight: 700;
    line-height: 1;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    color: currentColor;
    letter-spacing: -0.3px;
}

.ap-btn--seek:hover {
    background: rgba(var(--ap-accent-rgb), 0.12);
    color: var(--ap-accent);
    transform: scale(1.08);
}

.ap-btn--stop {
    background: rgba(0, 0, 0, 0.07);
    color: var(--ap-text-muted);
}

.ap-btn--stop:hover {
    background: #d32f2f;
    color: #fff;
    transform: scale(1.06);
}

/* ── DARK MODE ───────────────────────────────────────────────────────────── */

[data-theme="dark"] {
    --ap-bg:          #1e1e1e;
    --ap-bg-active:   #272215;
    --ap-border:      rgba(255, 255, 255, 0.08);
    --ap-text:        #f0f0f0;
    --ap-text-muted:  #999;
    --ap-track-bg:    rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .ap-knob {
    border-color: #272215;
}

[data-theme="dark"] .ap-btn--stop {
    background: rgba(255, 255, 255, 0.08);
    color: #aaa;
}

[data-theme="dark"] .ap-btn--stop:hover {
    background: #d32f2f;
    color: #fff;
}

/* ── MOBILE ──────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .ap-bar {
        gap: 8px;
        padding: 8px 10px;
    }

    .ap-idle-title {
        display: none;
    }

    .ap-track {
        max-width: none;
        width: 100%;
        flex-basis: 100%;
        order: 10;
    }

    .ap-bar-title {
        max-width: calc(100vw - 160px);
    }
}
/* ============================================================
   Biology pages — green nature theme
   Primary: #2E7D32  Medium: #558B2F  Background: #F1F8E9
   ============================================================ */

/* ── Wood Wide Web SVG wrapper ──────────────────────────────── */

.bio-wwweb-wrapper {
    background: white;
    border: 2px solid #A5D6A7;
    border-radius: 16px;
    padding: 12px 8px;
    overflow-x: auto;
    box-shadow: 0 2px 12px rgba(46, 125, 50, 0.1);
    margin-bottom: 1.5rem;
}

.bio-wwweb-svg {
    display: block;
    width: 100%;
    min-width: 560px;
}

/* ── SVG element classes ────────────────────────────────────── */

.bio-sky        { fill: #E8F5E9; }
.bio-soil       { fill: #EFEBE9; }
.bio-ground-line { stroke: #5D4037; stroke-width: 2; }

.bio-trunk  { fill: #6D4C41; }
.bio-foliage          { opacity: 0.92; }
.bio-foliage--1       { fill: #2E7D32; }
.bio-foliage--2       { fill: #388E3C; }
.bio-foliage--3       { fill: #43A047; }

.bio-root     { fill: none; stroke: #795548; stroke-width: 2; stroke-linecap: round; }
.bio-root--thin { stroke-width: 1.2; opacity: 0.7; }

.bio-mycelium        { fill: none; stroke: #FF8F00; stroke-width: 1.5; stroke-dasharray: 6 4; opacity: 0.8; }
.bio-mycelium--long  { stroke: #E65100; opacity: 0.6; stroke-dasharray: 8 5; }
.bio-mycelium--branch { stroke-width: 1; opacity: 0.55; stroke-dasharray: 4 4; }

.bio-signal        { opacity: 0.9; }
.bio-signal--green { fill: #66BB6A; filter: drop-shadow(0 0 3px #A5D6A7); }
.bio-signal--amber { fill: #FFA726; filter: drop-shadow(0 0 3px #FFE082); }
.bio-signal--teal  { fill: #26C6DA; filter: drop-shadow(0 0 3px #B2EBF2); }

.bio-tree-label        { font-size: 11px; fill: #1B5E20; font-weight: 700; text-anchor: middle; font-family: sans-serif; }
.bio-underground-label { font-size: 9px;  fill: #6D4C41; font-style: italic; font-family: sans-serif; }
.bio-underground-label--sub { font-size: 8px; fill: #8D6E63; }
.bio-legend-text       { font-size: 10px; fill: #37474F; font-family: sans-serif; dominant-baseline: central; }

/* ── Cell animation SVG ─────────────────────────────────────── */

.bio-cell-wrapper {
    background: white;
    border: 2px solid #A5D6A7;
    border-radius: 16px;
    padding: 12px 8px;
    overflow-x: auto;
    box-shadow: 0 2px 12px rgba(46, 125, 50, 0.1);
    margin-bottom: 1.5rem;
}

.bio-cell-svg {
    display: block;
    width: 100%;
    min-width: 420px;
}

/* ── Bio info cards ─────────────────────────────────────────── */

.bio-info-card {
    background: white;
    border: 2px solid #A5D6A7;
    border-top: 4px solid #2E7D32;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.08);
}

.bio-info-card--dark   { border-top-color: #1B5E20; }
.bio-info-card--medium { border-top-color: #388E3C; }
.bio-info-card--light  { border-top-color: #66BB6A; }
.bio-info-card--teal   { border-top-color: #00838F; }

.bio-info-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1B5E20;
    margin-bottom: 6px;
}

.bio-info-body {
    font-size: 0.85rem;
    color: #546e7a;
    line-height: 1.6;
}

/* ── Organelle grid ─────────────────────────────────────────── */

.bio-organelle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.bio-organelle-card {
    background: white;
    border: 2px solid #C8E6C9;
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(46, 125, 50, 0.07);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.bio-organelle-card:hover {
    transform: translateY(-3px);
    border-color: #2E7D32;
    box-shadow: 0 6px 18px rgba(46, 125, 50, 0.18);
}

.bio-organelle-icon {
    font-size: 2rem;
    margin-bottom: 6px;
}

.bio-organelle-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: #1B5E20;
    margin-bottom: 4px;
}

.bio-organelle-desc {
    font-size: 0.78rem;
    color: #546e7a;
    line-height: 1.5;
}

/* ── Section header label ───────────────────────────────────── */

.bio-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #2E7D32;
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
    border-radius: 20px;
    padding: 3px 12px;
    display: inline-block;
    margin-bottom: 0.5rem;
}

/* ── DNA double helix label strip ───────────────────────────── */

.bio-dna-card {
    background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
    border: 2px solid #A5D6A7;
    border-radius: 16px;
    padding: 1.2rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    box-shadow: 0 2px 10px rgba(46, 125, 50, 0.1);
}

.bio-dna-icon {
    font-size: 3rem;
    flex-shrink: 0;
}

.bio-dna-title {
    font-weight: 800;
    font-size: 1rem;
    color: #1B5E20;
    margin-bottom: 4px;
}

.bio-dna-body {
    font-size: 0.85rem;
    color: #33691E;
    line-height: 1.55;
}

/* ── Plant anatomy card ─────────────────────────────────────── */

.bio-plant-part-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.bio-plant-part-card {
    background: white;
    border: 2px solid #C8E6C9;
    border-left: 4px solid #2E7D32;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 4px rgba(46, 125, 50, 0.07);
}

.bio-plant-part-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1B5E20;
    margin-bottom: 4px;
}

.bio-plant-part-desc {
    font-size: 0.8rem;
    color: #546e7a;
    line-height: 1.5;
}

/* ── WWW callout box ────────────────────────────────────────── */

.bio-www-callout {
    background: linear-gradient(135deg, #E8F5E9, #FFF8E1);
    border: 2px solid #A5D6A7;
    border-left: 5px solid #FF8F00;
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.bio-www-callout-title {
    font-weight: 800;
    font-size: 1rem;
    color: #E65100;
    margin-bottom: 6px;
}

.bio-www-callout-body {
    font-size: 0.88rem;
    color: #33691E;
    line-height: 1.6;
}
/* ── Build Monitor ─────────────────────────────────────────────────────────── */

.bm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.bm-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bm-title-icon {
    color: var(--bp-accent, #f47b20);
    font-size: 1.8rem;
}

.bm-title {
    color: var(--bp-accent, #f47b20);
}

.bm-poll-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f47b20;
    animation: bm-pulse 1.2s ease-in-out infinite;
    margin-left: 0.25rem;
}

@keyframes bm-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.75); }
}

.bm-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bm-last-updated {
    opacity: 0.75;
    font-size: 0.78rem;
}

.bm-refresh-btn {
    border-color: var(--bp-accent, #f47b20) !important;
    color: var(--bp-accent, #f47b20) !important;
}

.bm-table {
    border-radius: 8px;
    overflow: hidden;
}

/* Status: in progress */
.bm-status-running {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--mud-palette-info);
}

.bm-status-label {
    font-size: 0.85rem;
}

/* Result badges */
.bm-result {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.bm-result--success {
    color: var(--mud-palette-success);
}

.bm-result--warning {
    color: var(--mud-palette-warning);
}

.bm-result--error {
    color: var(--mud-palette-error);
}

.bm-result--canceled {
    color: var(--mud-palette-text-secondary);
}
/* ============================================================
   Didactic Programs Section — Global Styles
   ============================================================ */

/* ── Accordion school panel ─────────────────────────────────── */
.didactic-school-panel-title {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    color: #1565c0;
}

/* ── Expand / Collapse all controls ─────────────────────────── */
.didactic-expand-controls {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── Materia panel title (ClasseDetail accordion) ───────────── */
.didactic-materia-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: 0.95rem;
    font-weight: 600;
}

.didactic-materia-icon {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.didactic-materia-name {
    flex: 1;
}

.didactic-materia-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--bp-text-muted, #888);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.didactic-materia-link:hover {
    background: rgba(247,139,30,0.12);
    color: #f78b1e;
}

/* ── Classe nested accordion panels ─────────────────────────── */
.didactic-classe-panels {
    margin: 0 -16px;
}

.didactic-classe-panel-title {
    display: flex;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 600;
    gap: 6px;
    width: 100%;
}

.didactic-classe-panel-name {
    flex: 1;
}

.didactic-classe-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--bp-text-muted, #888);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.didactic-classe-link:hover {
    background: rgba(247,139,30,0.12);
    color: #f78b1e;
}

/* ── Classe section inside accordion (legacy, kept for ClasseDetail) */
.didactic-classe-section {
    padding: 10px 0 6px;
    border-bottom: 1px solid #f0f0f0;
}

.didactic-classe-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.didactic-classe-label {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 8px;
}

/* ── Subject chips (in accordion) ───────────────────────────── */
.didactic-subject-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.didactic-subject-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    background: #f5f7ff;
    font-size: 0.82rem;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    white-space: nowrap;
}

.didactic-subject-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    color: #333;
}

.didactic-subject-chip--blue   { background: #e8f0fe; border-color: #90caf9; color: #1565c0; }
.didactic-subject-chip--indigo { background: #e8eaf6; border-color: #9fa8da; color: #283593; }
.didactic-subject-chip--orange { background: #fff3e0; border-color: #ffcc80; color: #e65100; }
.didactic-subject-chip--teal   { background: #e0f2f1; border-color: #80cbc4; color: #00695c; }
.didactic-subject-chip--green  { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.didactic-subject-chip--red    { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
.didactic-subject-chip--purple { background: #f3e5f5; border-color: #ce93d8; color: #6a1b9a; }
.didactic-subject-chip--pink   { background: #fce4ec; border-color: #f48fb1; color: #880e4f; }
.didactic-subject-chip--lime   { background: #f1f8e9; border-color: #aed581; color: #558b2f; }
.didactic-subject-chip--cyan   { background: #e0f7fa; border-color: #80deea; color: #006064; }

.didactic-subject-chip--blue:hover   { background: #bbdefb; color: #0d47a1; }
.didactic-subject-chip--indigo:hover { background: #c5cae9; color: #1a237e; }
.didactic-subject-chip--orange:hover { background: #ffe0b2; color: #bf360c; }
.didactic-subject-chip--teal:hover   { background: #b2dfdb; color: #004d40; }
.didactic-subject-chip--green:hover  { background: #c8e6c9; color: #1b5e20; }
.didactic-subject-chip--red:hover    { background: #ffcdd2; color: #b71c1c; }
.didactic-subject-chip--purple:hover { background: #e1bee7; color: #4a148c; }
.didactic-subject-chip--pink:hover   { background: #f8bbd0; color: #880e4f; }
.didactic-subject-chip--lime:hover   { background: #dcedc8; color: #33691e; }
.didactic-subject-chip--cyan:hover   { background: #b2ebf2; color: #006064; }

/* ── Subject card grid (ClasseDetail page) ──────────────────── */
.didactic-subject-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.didactic-subject-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 12px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
    min-width: 100px;
    max-width: 130px;
    flex: 1 1 100px;
}

.didactic-subject-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
}

.didactic-subject-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.didactic-subject-name {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    color: #333;
}

/* ── Subject color variants ─────────────────────────────────── */
.didactic-subject-card--blue   { border-top: 3px solid #1565c0; }
.didactic-subject-card--indigo { border-top: 3px solid #283593; }
.didactic-subject-card--orange { border-top: 3px solid #e65100; }
.didactic-subject-card--teal   { border-top: 3px solid #00695c; }
.didactic-subject-card--green  { border-top: 3px solid #2e7d32; }
.didactic-subject-card--red    { border-top: 3px solid #b71c1c; }
.didactic-subject-card--purple { border-top: 3px solid #6a1b9a; }
.didactic-subject-card--pink   { border-top: 3px solid #880e4f; }
.didactic-subject-card--lime   { border-top: 3px solid #558b2f; }
.didactic-subject-card--cyan   { border-top: 3px solid #006064; }

/* ── Subject page header ────────────────────────────────────── */
.didactic-subject-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    background: #f0f4ff;
    border-left: 5px solid #1565c0;
}

.didactic-subject-header--blue   { background: #e8f0fe; border-left-color: #1565c0; }
.didactic-subject-header--indigo { background: #e8eaf6; border-left-color: #283593; }
.didactic-subject-header--orange { background: #fff3e0; border-left-color: #e65100; }
.didactic-subject-header--teal   { background: #e0f2f1; border-left-color: #00695c; }
.didactic-subject-header--green  { background: #e8f5e9; border-left-color: #2e7d32; }
.didactic-subject-header--red    { background: #ffebee; border-left-color: #b71c1c; }
.didactic-subject-header--purple { background: #f3e5f5; border-left-color: #6a1b9a; }
.didactic-subject-header--pink   { background: #fce4ec; border-left-color: #880e4f; }
.didactic-subject-header--lime   { background: #f1f8e9; border-left-color: #558b2f; }
.didactic-subject-header--cyan   { background: #e0f7fa; border-left-color: #006064; }

.didactic-subject-header-icon {
    font-size: 2.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.didactic-subject-header-title {
    font-weight: 700;
    color: #1a237e;
    margin: 0 !important;
}

.didactic-subject-header-subtitle {
    color: #555;
    margin: 0 !important;
}

/* ── Markdown body ──────────────────────────────────────────── */
.didactic-markdown-body {
    line-height: 1.7;
    color: #222;
    font-size: 0.97rem;
}

.didactic-markdown-body h1,
.didactic-markdown-body h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 28px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e0e0e0;
    color: #1a237e;
}

.didactic-markdown-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 20px 0 8px;
    color: #1565c0;
}

.didactic-markdown-body h4 {
    font-size: 0.97rem;
    font-weight: 700;
    margin: 16px 0 6px;
    color: #333;
}

.didactic-markdown-body p {
    margin: 0 0 10px;
}

.didactic-markdown-body ul,
.didactic-markdown-body ol {
    padding-left: 1.5rem;
    margin: 6px 0 12px;
}

.didactic-markdown-body li {
    margin-bottom: 4px;
}

.didactic-markdown-body strong {
    font-weight: 700;
    color: #1a237e;
}

.didactic-markdown-body em {
    color: #555;
}

.didactic-markdown-body code {
    background: #f3f4f6;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.88em;
    color: #c62828;
}

.didactic-markdown-body hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 20px 0;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .didactic-subject-header {
        flex-direction: column;
        text-align: center;
    }

    .didactic-subject-card {
        min-width: 80px;
        padding: 10px 8px;
    }

    .didactic-subject-chips {
        gap: 4px;
    }
}

/* ============================================================
   Dark mode overrides
   ============================================================ */

[data-theme="dark"] .didactic-school-panel-title {
    color: var(--bp-text) !important;
}

[data-theme="dark"] .didactic-classe-section {
    border-bottom-color: var(--bp-border) !important;
}

[data-theme="dark"] .didactic-classe-label {
    color: var(--bp-text-muted) !important;
}

[data-theme="dark"] .didactic-subject-chip {
    background: var(--bp-surface-2) !important;
    border-color: var(--bp-border) !important;
    color: var(--bp-text) !important;
}

[data-theme="dark"] .didactic-subject-chip:hover {
    background: var(--bp-surface-3, #3a3a3a) !important;
    color: var(--bp-text) !important;
}

[data-theme="dark"] .didactic-subject-card {
    background: var(--bp-surface) !important;
    border-color: var(--bp-border) !important;
}

[data-theme="dark"] .didactic-subject-name {
    color: var(--bp-text) !important;
}

[data-theme="dark"] .didactic-subject-header {
    background: var(--bp-surface-2) !important;
}

[data-theme="dark"] .didactic-subject-header-title {
    color: var(--bp-text) !important;
}

[data-theme="dark"] .didactic-subject-header-subtitle {
    color: var(--bp-text-muted) !important;
}

[data-theme="dark"] .didactic-markdown-body {
    color: var(--bp-text) !important;
}

[data-theme="dark"] .didactic-markdown-body h1,
[data-theme="dark"] .didactic-markdown-body h2 {
    color: var(--bp-text) !important;
    border-bottom-color: var(--bp-border) !important;
}

[data-theme="dark"] .didactic-markdown-body h3 {
    color: var(--bp-text) !important;
}

[data-theme="dark"] .didactic-markdown-body h4 {
    color: var(--bp-text-muted) !important;
}

[data-theme="dark"] .didactic-markdown-body strong {
    color: var(--bp-text) !important;
}

[data-theme="dark"] .didactic-markdown-body em {
    color: var(--bp-text-muted) !important;
}

[data-theme="dark"] .didactic-markdown-body code {
    background: var(--bp-surface-2) !important;
    color: #ef9a9a !important;
}

[data-theme="dark"] .didactic-markdown-body hr {
    border-top-color: var(--bp-border) !important;
}
/* ============================================================
   English Subject Pages — Styles
   Accent: deep blue #1565C0
   ============================================================ */

.topic-header--eng {
    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
    padding: 1.5rem 0;
    color: #fff;
}

.topic-header--eng .topic-header-title  { color: #fff; }
.topic-header--eng .topic-header-subtitle { color: rgba(255,255,255,.82); }
.topic-header--eng .topic-back-link     { color: rgba(255,255,255,.72); }
.topic-header--eng .topic-back-link:hover { color: #fff; }

/* ── Vocabulary cards ────────────────────────────────────────── */
.eng-vocab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.eng-vocab-card {
    background: #fff;
    border: 1.5px solid #BBDEFB;
    border-radius: 10px;
    padding: 14px 16px;
    transition: box-shadow .18s, border-color .18s;
}

.eng-vocab-card:hover {
    border-color: #1565C0;
    box-shadow: 0 4px 18px rgba(21,101,192,.14);
}

.eng-vocab-word  { font-size: 1.15rem; font-weight: 700; color: #0D47A1; }
.eng-vocab-pos   { font-size: 0.72rem; font-weight: 600; color: #90A4AE; text-transform: uppercase; letter-spacing: .5px; }
.eng-vocab-trans { font-size: 0.9rem; color: #37474F; margin-top: 4px; }
.eng-vocab-ex    { font-size: 0.82rem; color: #546E7A; font-style: italic; margin-top: 6px; border-left: 3px solid #BBDEFB; padding-left: 8px; }

/* ── Grammar rules ───────────────────────────────────────────── */
.eng-rule-card {
    background: #fff;
    border-left: 4px solid #1565C0;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 6px rgba(21,101,192,.07);
}

.eng-rule-title { font-size: 1rem; font-weight: 700; color: #0D47A1; margin-bottom: 6px; }
.eng-rule-body  { font-size: 0.9rem; color: #37474F; line-height: 1.6; }
.eng-rule-example { background: #E3F2FD; border-radius: 6px; padding: 8px 12px; margin-top: 8px; font-size: 0.88rem; color: #0D47A1; font-style: italic; }

[data-theme="dark"] .eng-vocab-card  { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] .eng-vocab-word  { color: #90CAF9; }
[data-theme="dark"] .eng-vocab-trans { color: var(--bp-text); }
[data-theme="dark"] .eng-vocab-ex    { color: var(--bp-text-muted); border-color: var(--bp-border); }
[data-theme="dark"] .eng-rule-card   { background: var(--bp-surface); border-color: #1976D2; }
[data-theme="dark"] .eng-rule-title  { color: #90CAF9; }
[data-theme="dark"] .eng-rule-body   { color: var(--bp-text); }
[data-theme="dark"] .eng-rule-example { background: var(--bp-surface-2); color: #90CAF9; }
/* ═══════════════════════════════════════════════════════════════════════════
   geography.css  –  Geography section styles + SVG animations
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hub page ────────────────────────────────────────────────────────────── */
/* (Moved to subject-hub.css — shared component) */

/* ── Type selector buttons ───────────────────────────────────────────────── */
.geo-type-selector { display: flex; flex-wrap: wrap; gap: .5rem; }
.geo-type-btn {
    padding: .45rem 1.1rem;
    border-radius: 24px;
    border: 1.5px solid #e0e0e0;
    background: white;
    color: #546e7a;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s;
}
.geo-type-btn:hover        { border-color: #FF6D00; color: #E65100; }
.geo-type-btn--active      { background: #E65100; border-color: #E65100; color: white; font-weight: 600; }

.geo-scenario-subtitle { color: #546e7a; font-size: .95rem; }

/* ── SVG container ───────────────────────────────────────────────────────── */
.geo-svg-container {
    background: #0d2137;
    border: 1px solid #1e3a5f;
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
}
.geo-volcano-svg,
.geo-plates-svg,
.geo-water-svg { width: 100%; height: auto; display: block; max-height: calc(100vh - 270px); }

.geo-water-svg-wrap { background: transparent; border: none; }
.geo-water-svg { border-radius: 14px; border: 1px solid #1e3a5f; }

/* ── Controls ────────────────────────────────────────────────────────────── */
.geo-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.geo-eruption-btn {
    padding: .55rem 1.6rem;
    border-radius: 28px;
    border: 2px solid #e53935;
    background: rgba(229,57,53,.12);
    color: #ef5350;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    letter-spacing: .3px;
}
.geo-eruption-btn:hover  { background: rgba(229,57,53,.25); transform: scale(1.04); }
.geo-eruption-btn--stop  { background: #e53935; color: white; }
.geo-erupting-label { color: #ff7043; font-weight: 700; font-size: .95rem; animation: geo-blink 1s infinite; }

.geo-type-desc, .geo-scenario-subtitle {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: .9rem 1.2rem;
    color: #37474f;
    font-size: .93rem;
    line-height: 1.6;
}
.geo-examples-bar { color: #546e7a; font-size: .9rem; }

/* ── Educational cards ───────────────────────────────────────────────────── */
.geo-edu-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    padding: 1.4rem;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.geo-edu-card:hover { transform: translateY(-4px); border-color: #FF6D00; box-shadow: 0 6px 20px rgba(230,81,0,.15); }
.geo-edu-card-icon { font-size: 2rem; display: block; margin-bottom: .5rem; }
.geo-edu-card h3   { font-size: 1rem; font-weight: 700; color: #263238; margin: 0 0 .5rem; }
.geo-edu-card p    { font-size: .88rem; color: #546e7a; line-height: 1.6; margin: 0; }

/* ── Water cycle stage buttons ───────────────────────────────────────────── */
.wc-stage-grid   { display: flex; flex-wrap: wrap; gap: .5rem; }
.wc-stage-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    border-radius: 24px;
    border: 1.5px solid #e0e0e0;
    background: white;
    color: #546e7a;
    cursor: pointer;
    font-size: .9rem;
    transition: all .2s;
}
.wc-stage-btn:hover     { border-color: #FF6D00; color: #E65100; }
.wc-stage-btn--active   { background: #E65100; border-color: #E65100; color: white; }
.wc-stage-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
}
.wc-stage-detail {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem 1.4rem;
    color: #37474f;
    font-size: .93rem;
    line-height: 1.65;
    animation: geo-slide-in .25s ease-out;
}
.wc-stage-detail strong { color: #E65100; }

/* ═══════════════════════════════════════════════════════════════════════════
   SVG KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Blink ───────────────────────────────────────────────────────────────── */
@keyframes geo-blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Slide in ────────────────────────────────────────────────────────────── */
@keyframes geo-slide-in { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }

/* ── Magma chamber pulse ─────────────────────────────────────────────────── */
@keyframes geo-magma-pulse {
    0%,100% { opacity: .85; }
    50%      { opacity: 1; filter: brightness(1.15) saturate(1.2); }
}
.geo-magma-chamber { animation: geo-magma-pulse 2.5s ease-in-out infinite; }
.geo-chamber-glow  { animation: geo-magma-pulse 2.5s ease-in-out infinite reverse; }

/* ── Lava bomb particles ─────────────────────────────────────────────────── */
@keyframes geo-bomb-fly {
    0%   { transform: translate(0,0) scale(1); opacity: 1; }
    70%  { opacity: .7; }
    100% { transform: translate(var(--vx), var(--vy)) scale(.25); opacity: 0; }
}
.geo-lava-bomb { opacity: 0; }
.geo-erupting .geo-lava-bomb {
    animation: geo-bomb-fly 1.6s cubic-bezier(.2,0,.8,1) var(--delay) infinite;
}

/* ── Ash cloud ───────────────────────────────────────────────────────────── */
@keyframes geo-ash-grow {
    0%   { r: 4px; opacity: .7; transform: translateY(0) scale(1); }
    100% { r: 4px; opacity: 0; transform: translateY(-60px) scale(10); }
}
.geo-ash-cloud { opacity: 0; }
.geo-erupting .geo-ash-c1 { animation: geo-ash-grow 2.8s ease-out .0s infinite; }
.geo-erupting .geo-ash-c2 { animation: geo-ash-grow 2.8s ease-out .6s infinite; }
.geo-erupting .geo-ash-c3 { animation: geo-ash-grow 2.8s ease-out 1.2s infinite; }

/* ── Lava flow ───────────────────────────────────────────────────────────── */
@keyframes geo-lava-draw {
    0%   { stroke-dashoffset: 280; opacity: .9; }
    80%  { opacity: .8; }
    100% { stroke-dashoffset: 0; opacity: .6; }
}
.geo-lava-flow { stroke-dasharray: 280; stroke-dashoffset: 280; opacity: 0; }
.geo-erupting .geo-lava-flow-l { animation: geo-lava-draw 2.2s ease-in .3s infinite; }
.geo-erupting .geo-lava-flow-r { animation: geo-lava-draw 2.2s ease-in .7s infinite; }

/* ── Plate animation ─────────────────────────────────────────────────────── */
@keyframes geo-move-left  { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-18px)} }
@keyframes geo-move-right { 0%,100%{transform:translateX(0)} 50%{transform:translateX(18px)}  }
@keyframes geo-move-up    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes geo-move-down  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(12px)}  }

.geo-plates-animating .geo-plate-left      { animation: geo-move-right 3s ease-in-out infinite; }
.geo-plates-animating .geo-plate-right     { animation: geo-move-left  3s ease-in-out infinite; }
.geo-plates-animating .geo-plate-div-left  { animation: geo-move-left  3s ease-in-out infinite; }
.geo-plates-animating .geo-plate-div-right { animation: geo-move-right 3s ease-in-out infinite; }
.geo-plates-animating .geo-plate-tf-left   { animation: geo-move-right 3s ease-in-out infinite; }
.geo-plates-animating .geo-plate-tf-right  { animation: geo-move-left  3s ease-in-out infinite; }
.geo-plates-animating .geo-spread-l        { animation: geo-move-left  3s ease-in-out infinite; }
.geo-plates-animating .geo-spread-r        { animation: geo-move-right 3s ease-in-out infinite; }
.geo-plates-animating .geo-arrow-l         { animation: geo-move-right 3s ease-in-out infinite; }
.geo-plates-animating .geo-arrow-r         { animation: geo-move-left  3s ease-in-out infinite; }

@keyframes geo-quake-shake { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-3px,2px)} 75%{transform:translate(3px,-2px)} }
.geo-plates-animating .geo-quake-icon  { animation: geo-quake-shake .4s ease-in-out infinite; }
.geo-plates-animating .geo-quake-icon2 { animation: geo-quake-shake .4s ease-in-out .2s infinite; }

/* ── Water cycle animations ──────────────────────────────────────────────── */
@keyframes wc-rise {
    0%   { transform: translateY(0) scale(1); opacity: .8; }
    100% { transform: translateY(var(--rise)) scale(.5); opacity: 0; }
}
@keyframes wc-fall {
    0%   { transform: translateY(0); opacity: .9; }
    80%  { opacity: .8; }
    100% { transform: translateY(55px); opacity: 0; }
}
@keyframes wc-infil-sink {
    0%   { transform: translateY(0); opacity: .8; }
    100% { transform: translateY(35px); opacity: 0; }
}
@keyframes wc-cloud-drift { 0%{transform:translateX(-12px)} 100%{transform:translateX(12px)} }
@keyframes wc-sun-pulse   { 0%,100%{opacity:.9;r:52px} 50%{opacity:1;r:56px} }
@keyframes wc-sun-ray-spin{ from{transform-origin:900px 70px;transform:rotate(0deg)} to{transform-origin:900px 70px;transform:rotate(360deg)} }
@keyframes wc-wave-move   { 0%{transform:translateX(0)} 100%{transform:translateX(20px)} }
@keyframes wc-groundwater-flow { 0%{stroke-dashoffset:200} 100%{stroke-dashoffset:0} }
@keyframes wc-runoff-roll {
    0%  { transform: translate(0,0); opacity: .8; }
    100%{ transform: translate(-20px, 20px); opacity: 0; }
}

.wc-evap-dot   { animation: wc-rise  2.4s ease-in var(--delay) infinite; }
.wc-transp-dot { animation: wc-rise  2.8s ease-in var(--delay) infinite; }
.wc-raindrop   { animation: wc-fall  1.2s linear var(--delay) infinite; }
.wc-raindrop-m { animation: wc-fall  1.4s linear var(--delay) infinite; }
.wc-infil-dot  { animation: wc-infil-sink 1.8s ease-in var(--delay) infinite; }
.wc-runoff-dot { animation: wc-runoff-roll 2s ease-in var(--delay) infinite; }
.wc-cloud-main { animation: wc-cloud-drift 6s ease-in-out alternate infinite; }
.wc-cloud-small{ animation: wc-cloud-drift 8s ease-in-out alternate-reverse infinite; }
.wc-wave       { animation: wc-wave-move 3s linear infinite; }
.wc-wave2      { animation: wc-wave-move 4s linear infinite reverse; }
.wc-sun-pulse  { animation: wc-sun-pulse 4s ease-in-out infinite; }
.wc-sun-ray    { animation: wc-sun-ray-spin 20s linear infinite; }
.wc-groundwater{ stroke-dasharray:200; animation: wc-groundwater-flow 4s linear infinite; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .geo-type-selector { gap: .4rem; }
    .geo-type-btn { font-size: .8rem; padding: .35rem .8rem; }
    .wc-stage-grid { gap: .35rem; }
    .wc-stage-btn  { font-size: .82rem; padding: .35rem .75rem; }
}
/* ============================================================
   Grammar Analysis - Global Styles
   ============================================================ */

:root {
    --grammar-ink: #172033;
    --grammar-muted: #60708a;
    --grammar-line: rgba(23, 32, 51, 0.12);
    --grammar-surface: rgba(255, 255, 255, 0.86);
    --grammar-surface-strong: rgba(255, 255, 255, 0.94);
    --grammar-shadow: 0 24px 60px rgba(18, 38, 63, 0.12);
}

/* --- POS color classes (set --pos-color for cascading) --- */
.pos-nome-proprio   { --pos-color: #2e7d32; }
.pos-nome-comune    { --pos-color: #43a047; }
.pos-verbo          { --pos-color: #1e88e5; }
.pos-aggettivo      { --pos-color: #f9a825; }
.pos-avverbio       { --pos-color: #f4511e; }
.pos-articolo       { --pos-color: #8e24aa; }
.pos-preposizione   { --pos-color: #00897b; }
.pos-congiunzione   { --pos-color: #5c6bc0; }
.pos-pronome        { --pos-color: #e53935; }
.pos-interiezione   { --pos-color: #ff6f00; }
.pos-punteggiatura  { --pos-color: #78909c; }

/* --- Logic function color classes --- */
.logic-soggetto                    { --pos-color: #2e7d32; }
.logic-predicato-verbale           { --pos-color: #1565c0; }
.logic-predicato-nominale          { --pos-color: #1976d2; }
.logic-copula                      { --pos-color: #42a5f5; }
.logic-parte-nominale              { --pos-color: #64b5f6; }
.logic-complemento-oggetto         { --pos-color: #c62828; }
.logic-complemento-termine         { --pos-color: #ad1457; }
.logic-complemento-specificazione  { --pos-color: #6a1b9a; }
.logic-complemento-luogo           { --pos-color: #00838f; }
.logic-complemento-tempo           { --pos-color: #ef6c00; }
.logic-complemento-modo            { --pos-color: #558b2f; }
.logic-complemento-compagnia       { --pos-color: #d84315; }
.logic-complemento-mezzo           { --pos-color: #4527a0; }
.logic-complemento-causa           { --pos-color: #bf360c; }
.logic-complemento-fine            { --pos-color: #827717; }
.logic-attributo                   { --pos-color: #f9a825; }
.logic-apposizione                 { --pos-color: #33691e; }

/* --- Zone backgrounds --- */
.zone-filters {
    background-color: #f5f5f5;
}

.zone-legend {
    background-color: #fafafa;
}

.zone-navigation {
    background-color: #e8f5e9;
}

.zone-sentence {
    background-color: #fafdf6;
    border-radius: 16px;
}

.grammar-analysis-page {
    padding-bottom: 32px;
}

.grammar-analysis-page .mud-paper {
    border: 1px solid var(--grammar-line);
    box-shadow: var(--grammar-shadow);
}

.grammar-hero {
    position: relative;
    overflow: hidden;
    padding: 32px;
    margin-bottom: 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(69, 179, 157, 0.22), transparent 28%),
        radial-gradient(circle at left center, rgba(30, 136, 229, 0.18), transparent 32%),
        linear-gradient(135deg, #f7fbff 0%, #eef7f3 52%, #fffaf0 100%);
}

.grammar-hero::after {
    content: "";
    position: absolute;
    inset: auto -80px -90px auto;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: rgba(249, 168, 37, 0.12);
    filter: blur(6px);
}

.grammar-hero-copy,
.grammar-hero-stats {
    position: relative;
    z-index: 1;
}

.grammar-hero-kicker {
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #187a6e;
    font-weight: 700;
}

.grammar-hero-title {
    max-width: 820px;
    margin-top: 6px;
    color: var(--grammar-ink);
    font-weight: 800;
    line-height: 1.08;
}

.grammar-hero-subtitle {
    max-width: 760px;
    margin-top: 12px;
    color: var(--grammar-muted);
    font-size: 1.02rem;
}

.grammar-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.grammar-live-panel,
.grammar-library-panel,
.grammar-viewer {
    border-radius: 24px;
    background: var(--grammar-surface);
    backdrop-filter: blur(12px);
}

.grammar-live-panel,
.grammar-library-panel {
    padding: 24px;
}

.grammar-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.grammar-section-copy {
    color: var(--grammar-muted);
    max-width: 620px;
}

.grammar-live-input .mud-input-control {
    background: var(--grammar-surface-strong);
    border-radius: 20px;
}

.grammar-live-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.grammar-suggestion-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.grammar-suggestion-chip {
    border: 1px dashed rgba(24, 122, 110, 0.28);
    background: rgba(24, 122, 110, 0.08);
}

.grammar-filters-card {
    border-radius: 20px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(245, 250, 255, 0.96));
}

/* --- Sentence text --- */
.sentence-text {
    line-height: 1.8;
    font-weight: 500;
}

/* --- Navigation progress bar --- */
.navigation-progress {
    max-width: 400px;
    width: 100%;
}

.grammar-navigation-card {
    border-radius: 20px;
}

/* --- Legend chip --- */
.legend-chip {
    background-color: var(--pos-color) !important;
    color: white !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--pos-color) 28%, transparent);
}

/* --- Grammar card --- */
.grammar-card {
    background-color: color-mix(in srgb, var(--pos-color) 10%, white) !important;
    border: 1px solid color-mix(in srgb, var(--pos-color) 30%, white) !important;
    border-left: 5px solid var(--pos-color) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border-radius: 20px !important;
    overflow: hidden;
}

.grammar-card-active {
    transform: translateY(-2px) scale(1.01);
    border-color: var(--pos-color) !important;
    box-shadow: 0 18px 36px color-mix(in srgb, var(--pos-color) 18%, transparent);
}

/* --- Logic card --- */
.logic-card {
    background-color: color-mix(in srgb, var(--pos-color) 10%, white) !important;
    border: 1px solid color-mix(in srgb, var(--pos-color) 30%, white) !important;
    border-left: 5px solid var(--pos-color) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border-radius: 20px !important;
    overflow: hidden;
}

.logic-card-active {
    transform: translateY(-2px) scale(1.01);
    border-color: var(--pos-color) !important;
    box-shadow: 0 18px 36px color-mix(in srgb, var(--pos-color) 18%, transparent);
}

/* --- Card header --- */
.grammar-card-header {
    padding: 10px 12px;
    background-color: var(--pos-color) !important;
    color: white !important;
}

.grammar-card-header-text {
    color: white !important;
}

.grammar-card-header-caption {
    color: rgba(255, 255, 255, 0.85) !important;
    font-style: italic;
}

/* --- Token chip styles --- */
.token-chip {
    background-color: var(--pos-color) !important;
    color: white !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    border-radius: 999px !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--pos-color) 24%, transparent);
}

.token-chip-active {
    opacity: 1;
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
    filter: saturate(1.05);
}

.token-chip-hidden {
    text-transform: none;
    border-radius: 999px !important;
}

/* --- Detail table --- */
.grammar-detail-table {
    font-size: 0.85rem;
}

.grammar-detail-table td:first-child {
    width: 34%;
    color: var(--grammar-muted);
}

.grammar-viewer {
    padding: 24px;
    margin-bottom: 24px;
}

.grammar-viewer-live {
    background: linear-gradient(135deg, rgba(236, 252, 247, 0.98), rgba(243, 249, 255, 0.96));
}

.grammar-viewer-library {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(249, 251, 255, 0.96));
}

.grammar-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.grammar-viewer-kicker {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #187a6e;
    font-weight: 700;
}

.grammar-viewer-subtitle {
    color: var(--grammar-muted);
    max-width: 720px;
}

.grammar-viewer-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.grammar-viewer-sentence {
    padding: 20px 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(23, 32, 51, 0.08);
}

.grammar-token-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 22px 0;
}

.grammar-toolbar {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

/* --- Admin page --- */
.sentence-text-cell {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prompt-generator-panel {
    background-color: #f5f5f5;
}

.monospace-field textarea {
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 0.85rem;
}

/* --- JSON editor (native textarea, MudTextField Lines>1 has a binding bug) --- */
.json-editor-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary, rgba(0,0,0,.6));
}

.json-editor-field {
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.23));
    border-radius: var(--mud-default-borderradius, 4px);
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, rgba(0,0,0,.87));
}

.json-editor-field:focus {
    border-color: var(--mud-palette-primary, #1976d2);
    border-width: 2px;
    padding: 13px;
}

@media (max-width: 960px) {
    .grammar-hero,
    .grammar-live-panel,
    .grammar-library-panel,
    .grammar-viewer {
        padding: 20px;
        border-radius: 22px;
    }

    .grammar-section-head,
    .grammar-viewer-header {
        flex-direction: column;
    }

    .grammar-viewer-badges {
        justify-content: flex-start;
    }
}
/* ============================================================
   History Section — Global Styles
   ============================================================ */

/* ── Epoch cards ───────────────────────────────────────────── */

.hist-epoch-link {
    text-decoration: none;
    display: block;
}

.hist-epoch-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    padding: 20px 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hist-epoch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
    border-color: #FF6D00;
}

.hist-epoch-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.hist-epoch-icon {
    font-size: 2.2rem;
    flex-shrink: 0;
}

.hist-epoch-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #263238;
}

.hist-epoch-period {
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 2px;
}

.hist-epoch-count {
    margin-left: auto;
    flex-shrink: 0;
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.hist-epoch-desc {
    font-size: 0.88rem;
    color: #546e7a;
    line-height: 1.65;
    flex: 1;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hist-epoch-cta {
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: auto;
}

/* ============================================================
   Timeline Page
   ============================================================ */

.hist-timeline-page {
    min-height: 100vh;
    background: #f5f5f5;
}

/* ── Filter bar ────────────────────────────────────────────── */

.hist-filter-bar {
    background: white;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hist-filter-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 12px;
}

.hist-event-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: #607d8b;
    margin-right: 4px;
}

/* ── Loading / empty states ────────────────────────────────── */

.hist-loading,
.hist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 12px;
}

/* ── Timeline container ────────────────────────────────────── */

.hist-timeline {
    position: relative;
    padding: 24px 0 48px;
}

/* ── Epoch separator ───────────────────────────────────────── */

.hist-epoch-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 800;
    padding: 12px 0 8px;
    border-left: 4px solid;
    padding-left: 16px;
    margin: 28px 0 16px 60px;
    letter-spacing: 0.5px;
}

.hist-epoch-sep-icon {
    font-size: 1.4rem;
}

/* ── Timeline item ─────────────────────────────────────────── */

.hist-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 4px;
    position: relative;
}

.hist-timeline-item--selected .hist-event-card {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

/* Importance variants */
.hist-event-importance-5 .hist-year-badge { font-weight: 800; font-size: 0.8rem; }
.hist-event-importance-4 .hist-year-badge { font-size: 0.75rem; }
.hist-event-importance-3 .hist-year-badge { font-size: 0.72rem; opacity: 0.9; }

/* ── Year badge ────────────────────────────────────────────── */

.hist-year-badge {
    flex-shrink: 0;
    width: 88px;
    min-width: 88px;
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    padding: 8px 6px;
    border-radius: 8px 0 0 8px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

/* ── Timeline vertical line ────────────────────────────────── */

.hist-timeline-line {
    width: 3px;
    min-width: 3px;
    border-right: 3px solid;
    align-self: stretch;
    opacity: 0.35;
}

/* ── Event card ────────────────────────────────────────────── */

.hist-event-card {
    flex: 1;
    background: white;
    border-radius: 0 10px 10px 0;
    padding: 14px 16px 12px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    margin-bottom: 0;
}

.hist-event-card:hover {
    background: #f8f9fa;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.hist-event-card--active {
    background: #f0f4ff;
}

.hist-event-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.hist-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.75rem;
    color: #90a4ae;
}

.hist-event-continent,
.hist-event-nation {
    font-weight: 500;
}

.hist-expand-icon {
    font-size: 0.7rem;
    color: #b0bec5;
    flex-shrink: 0;
}

.hist-event-title {
    font-size: 1rem;
    font-weight: 700;
    color: #263238;
    margin: 0 0 6px;
    line-height: 1.3;
}

.hist-event-summary {
    font-size: 0.85rem;
    color: #546e7a;
    line-height: 1.55;
    margin: 0 0 8px;
}

.hist-event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.hist-tag {
    display: inline-block;
    background: #eceff1;
    color: #546e7a;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
}

.hist-tag-lg {
    font-size: 0.8rem;
    padding: 3px 10px;
}

/* ── Inline detail panel ───────────────────────────────────── */

.hist-detail-panel {
    margin: 0 0 8px 0;
    background: white;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-top: 3px solid #1565c0;
    animation: hist-slide-down 0.2s ease-out;
}

@keyframes hist-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hist-detail-inner {
    padding: 24px;
    position: relative;
}

.hist-detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #eceff1;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #546e7a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.hist-detail-close:hover {
    background: #cfd8dc;
}

.hist-detail-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Image column */
.hist-detail-image-col {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hist-detail-img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.hist-detail-img-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #37474f, #546e7a);
}

.hist-detail-img-loading {
    background: #eceff1;
}

.hist-detail-img-icon {
    font-size: 2.8rem;
}

.hist-detail-img-year {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.hist-detail-tags-col {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Text column */
.hist-detail-text-col {
    flex: 1;
    min-width: 240px;
}

.hist-detail-title-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.hist-detail-year-badge {
    flex-shrink: 0;
    color: white;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
    padding: 6px 10px;
    border-radius: 8px;
    line-height: 1.3;
    max-width: 80px;
    word-break: break-word;
}

.hist-detail-epoch {
    font-size: 0.78rem;
    font-weight: 600;
    color: #90a4ae;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hist-detail-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #263238;
    margin: 0 0 4px;
    line-height: 1.3;
}

.hist-detail-location {
    font-size: 0.82rem;
    color: #78909c;
    margin-top: 4px;
}

.hist-detail-description {
    font-size: 0.9rem;
    color: #37474f;
    line-height: 1.75;
}

.hist-detail-description p {
    margin: 0 0 12px;
}

.hist-detail-description p:last-child {
    margin-bottom: 0;
}

.hist-detail-sources {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e0e0e0;
}

.hist-detail-sources-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #546e7a;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hist-detail-sources ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hist-detail-sources li {
    font-size: 0.8rem;
    color: #78909c;
    padding: 3px 0;
    line-height: 1.4;
}

.hist-detail-sources li::before {
    content: "▸ ";
    color: #b0bec5;
}

/* ── Video links ───────────────────────────────────────────── */

.hist-detail-videos {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e0e0e0;
}

.hist-detail-videos-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #546e7a;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hist-video-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* YouTube thumbnail grid */
.hist-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.hist-video-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a2e;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hist-video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    text-decoration: none;
}

.hist-video-thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.hist-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hist-video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    background: rgba(0,0,0,0.3);
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hist-video-card:hover .hist-video-play-overlay {
    opacity: 1;
}

.hist-video-card-title {
    padding: 6px 8px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #e0e0e0;
    line-height: 1.35;
}

.hist-video-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #fce4ec;
    border-radius: 8px;
    color: #c62828;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
    line-height: 1.3;
}

.hist-video-link:hover {
    background: #f48fb1;
    color: #7b0000;
    text-decoration: none;
}

.hist-video-play {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.hist-video-ext {
    font-size: 0.7rem;
    margin-left: auto;
    opacity: 0.6;
    flex-shrink: 0;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 600px) {
    .hist-year-badge {
        width: 64px;
        min-width: 64px;
        font-size: 0.65rem;
        padding: 6px 4px;
    }

    .hist-epoch-separator {
        margin-left: 40px;
    }

    .hist-detail-panel {
        margin-left: 0;
    }

    .hist-detail-image-col {
        width: 100%;
    }

    .hist-detail-img-placeholder {
        aspect-ratio: 16 / 7;
    }
}

@media (max-width: 400px) {
    .hist-year-badge {
        width: 52px;
        min-width: 52px;
    }

    .hist-epoch-separator {
        margin-left: 28px;
    }

    .hist-detail-panel {
        margin-left: 0;
    }
}
/* ============================================================
   Computer Science Pages — Styles
   Accent: indigo #283593
   ============================================================ */

.topic-header--cs {
    background: linear-gradient(135deg, #283593 0%, #1A237E 100%);
    padding: 1.5rem 0;
    color: #fff;
}

.topic-header--cs .topic-header-title    { color: #fff; }
.topic-header--cs .topic-header-subtitle { color: rgba(255,255,255,.82); }
.topic-header--cs .topic-back-link       { color: rgba(255,255,255,.72); }
.topic-header--cs .topic-back-link:hover { color: #fff; }

/* ── Code editor panel ───────────────────────────────────────── */
.cs-editor-panel {
    background: #1E1E2E;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    margin-bottom: 16px;
}

.cs-editor-topbar {
    background: #2D2D3F;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.cs-editor-lang-badge {
    font-size: 0.72rem;
    font-weight: 700;
    background: #3949AB;
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.cs-editor-textarea {
    width: 100%;
    min-height: 260px;
    background: #1E1E2E;
    color: #CDD6F4;
    border: none;
    outline: none;
    padding: 14px 16px;
    font-family: 'Consolas', 'Fira Mono', 'Monaco', monospace;
    font-size: 0.88rem;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
}

.cs-editor-textarea::placeholder { color: #585B70; }

.cs-output-panel {
    background: #11111B;
    border-radius: 8px;
    padding: 12px 16px;
    min-height: 80px;
    font-family: 'Consolas', 'Fira Mono', 'Monaco', monospace;
    font-size: 0.85rem;
    color: #A6E3A1;
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: 8px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.3);
}

.cs-output-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #585B70;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}

/* ── Turtle canvas ───────────────────────────────────────────── */
.cs-turtle-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#turtle-canvas {
    background: #fff;
    border: 2px solid #C5CAE9;
    border-radius: 8px;
    display: block;
    max-width: 100%;
}

/* ── Component cards ─────────────────────────────────────────── */
.cs-component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.cs-component-card {
    background: #fff;
    border: 1.5px solid #C5CAE9;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    transition: box-shadow .18s, border-color .18s;
}

.cs-component-card:hover { border-color: #3949AB; box-shadow: 0 4px 18px rgba(40,53,147,.14); }
.cs-component-icon  { font-size: 2rem; margin-bottom: 8px; }
.cs-component-name  { font-size: 0.95rem; font-weight: 700; color: #1A237E; }
.cs-component-desc  { font-size: 0.82rem; color: #546E7A; margin-top: 4px; line-height: 1.5; }

/* ── Sample programs list ────────────────────────────────────── */
.cs-samples-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.cs-sample-btn {
    font-size: 0.82rem;
    padding: 5px 12px;
    border: 1.5px solid #C5CAE9;
    border-radius: 20px;
    background: #E8EAF6;
    color: #283593;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-weight: 600;
}

.cs-sample-btn:hover { background: #C5CAE9; border-color: #3949AB; }

[data-theme="dark"] .cs-component-card { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] .cs-component-name { color: #9FA8DA; }
[data-theme="dark"] .cs-component-desc { color: var(--bp-text-muted); }
[data-theme="dark"] .cs-sample-btn     { background: var(--bp-surface-2); border-color: var(--bp-border); color: #9FA8DA; }
[data-theme="dark"] #turtle-canvas     { background: #1E1E2E; border-color: var(--bp-border); }

/* ── Component list (flex column) ────────────────────────────── */
.cs-component-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.cs-component-list .cs-component-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    padding: 12px 16px;
}

.cs-component-list .cs-component-card .cs-component-icon {
    font-size: 1rem;
    min-width: 130px;
    margin-bottom: 0;
    font-family: 'Consolas', 'Fira Mono', monospace;
    background: #E8EAF6;
    border-radius: 4px;
    padding: 2px 6px;
    color: #283593;
    white-space: nowrap;
}

/* ── Output box ──────────────────────────────────────────────── */
.cs-output-box {
    background: #11111B;
    border-radius: 8px;
    padding: 14px 16px;
    min-height: 120px;
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Consolas', 'Fira Mono', 'Monaco', monospace;
    font-size: 0.87rem;
    color: #A6E3A1;
    white-space: pre-wrap;
    word-break: break-word;
}

.cs-output-box strong { color: #89B4FA; display: block; margin-bottom: 6px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .5px; }
.cs-output-box pre   { margin: 0; color: #A6E3A1; }

/* ── Callout ─────────────────────────────────────────────────── */
.cs-callout {
    background: #E8EAF6;
    border-left: 4px solid #3949AB;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 0.9rem;
    color: #1A237E;
    line-height: 1.6;
}

/* ── Editor toolbar ──────────────────────────────────────────── */
.cs-editor-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.sample-select { max-width: 180px; }

/* ── Turtle canvas (class alias for the id) ──────────────────── */
.cs-turtle-canvas {
    background: #fff;
    border: 2px solid #C5CAE9;
    border-radius: 8px;
    display: block;
    max-width: 100%;
}

[data-theme="dark"] .cs-callout            { background: var(--bp-surface-2); border-color: #5C6BC0; color: #9FA8DA; }
[data-theme="dark"] .cs-output-box         { background: #11111B; }
[data-theme="dark"] .cs-component-list .cs-component-card .cs-component-icon { background: #1E1E3F; color: #9FA8DA; }
[data-theme="dark"] .cs-turtle-canvas      { background: #1E1E2E; border-color: var(--bp-border); }
/* ============================================================
   Italian pages — classic red theme
   Primary: #B71C1C  Medium: #C62828  Background: #FFF8F8
   ============================================================ */

/* ── Inline solution field ───────────────────────────────────── */

.ita-solution-inline {
    flex: 1;
    min-height: 40px;
    border: 2px solid #A5D6A7;
    border-radius: 8px;
    background: #E8F5E9;
    padding: 6px 14px;
    color: #2E7D32;
    font-weight: 700;
    font-size: 0.97rem;
    display: flex;
    align-items: center;
    letter-spacing: .01em;
}

.ita-solution-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFCC80;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ── Section block cards (page-level wrappers) ───────────────── */

.ita-section-block {
    background: white;
    border: 1px solid #FFCDD2;
    border-left: 5px solid #B71C1C;
    border-radius: 14px;
    padding: 24px 28px 20px;
    box-shadow: 0 2px 10px rgba(183, 28, 28, .07);
}

.ita-section-block--start {
    border-left-color: #1565C0;
    border-color: #BBDEFB;
}

.ita-section-block--start .ita-section-block-title {
    color: #1565C0;
    border-bottom-color: #BBDEFB;
}

.ita-section-block--end {
    border-left-color: #2E7D32;
    border-color: #C8E6C9;
}

.ita-section-block--end .ita-section-block-title {
    color: #2E7D32;
    border-bottom-color: #C8E6C9;
}

.ita-section-block--info {
    border-left-color: #0277BD;
    border-color: #B3E5FC;
}

.ita-section-block--info .ita-section-block-title {
    color: #0277BD;
    border-bottom-color: #B3E5FC;
}

.ita-section-block--highlight {
    border-left-color: #E65100;
    border-color: #FFE0B2;
}

.ita-section-block--highlight .ita-section-block-title {
    color: #E65100;
    border-bottom-color: #FFE0B2;
}

.ita-section-block--example {
    border-left-color: #6A1B9A;
    border-color: #E1BEE7;
}

.ita-section-block--example .ita-section-block-title {
    color: #6A1B9A;
    border-bottom-color: #E1BEE7;
}

.ita-section-block--exercise {
    border-left-color: #00695C;
    border-color: #B2DFDB;
}

.ita-section-block--exercise .ita-section-block-title {
    color: #00695C;
    border-bottom-color: #B2DFDB;
}

.ita-section-block-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #B71C1C;
    border-bottom: 2px solid #FFCDD2;
    padding-bottom: 10px;
    margin-bottom: 18px;
}

/* ── Mode overview cards ─────────────────────────────────────── */

.ita-mode-group-label {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.ita-mode-overview-card {
    background: var(--card-bg, #FFF5F5);
    border: 1px solid color-mix(in srgb, var(--card-accent, #B71C1C) 25%, transparent);
    border-top: 4px solid var(--card-accent, #B71C1C);
    border-radius: 12px;
    padding: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    transition: box-shadow .15s;
}

.ita-mode-overview-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
}

.ita-moc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ita-moc-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.ita-moc-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--card-accent, #B71C1C);
    flex: 1;
}

.ita-moc-badge {
    display: inline-block;
    background: var(--card-accent, #B71C1C);
    color: white;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.ita-moc-use {
    font-size: 0.85rem;
    font-weight: 600;
    color: #37474F;
}

.ita-moc-tenses {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ita-moc-example {
    font-size: 0.83rem;
    color: #546E7A;
    border-top: 1px solid color-mix(in srgb, var(--card-accent, #B71C1C) 20%, transparent);
    padding-top: 8px;
    margin-top: auto;
}

/* ── Mode detail cards (sezione 5) ──────────────────────────── */

.ita-mode-detail-card {
    background: var(--card-bg, #FFF5F5);
    border: 1px solid color-mix(in srgb, var(--card-accent, #B71C1C) 20%, transparent);
    border-left: 5px solid var(--card-accent, #B71C1C);
    border-radius: 10px;
    padding: 16px 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}

.ita-mdc-title {
    font-weight: 800;
    font-size: 1rem;
    color: var(--card-accent, #B71C1C);
}

.ita-mdc-body {
    font-size: 0.87rem;
    color: #37474F;
    line-height: 1.65;
    flex: 1;
}

.ita-mdc-example {
    font-size: 0.83rem;
    color: #546E7A;
    border-top: 1px solid color-mix(in srgb, var(--card-accent, #B71C1C) 20%, transparent);
    padding-top: 8px;
    line-height: 1.6;
}

/* ── Topic tabs ─────────────────────────────────────────────── */

.ita-topic-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #FFCDD2;
    margin-bottom: 1.5rem;
}

.ita-topic-tab {
    padding: 10px 24px;
    border-radius: 8px 8px 0 0;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.93rem;
    color: #C62828;
    border: 2px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    background: transparent;
    transition: background .15s;
}

.ita-topic-tab:hover {
    background: #FFEBEE;
    color: #B71C1C;
    text-decoration: none;
}

.ita-topic-tab--active {
    background: white;
    color: #B71C1C;
    border-color: #FFCDD2;
    border-bottom-color: white;
}

/* ── Section headers ─────────────────────────────────────────── */

.ita-section-title {
    color: #B71C1C;
    font-weight: 700;
    border-bottom: 2px solid #FFCDD2;
    padding-bottom: 6px;
    margin-bottom: 1.2rem;
}

/* ── Topic section card (wraps a full page section) ─────────── */

.ita-topic-card {
    background: white;
    border: 1px solid #FFCDD2;
    border-radius: 16px;
    padding: 28px 28px 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(183,28,28,.07);
}

/* ── Info cards ──────────────────────────────────────────────── */

.ita-info-card {
    background: white;
    border: 1px solid #FFCDD2;
    border-left: 4px solid #C62828;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
    height: 100%;
}

.ita-info-card--dark {
    border-left-color: #B71C1C;
    background: #FFF5F5;
}

.ita-info-title {
    font-weight: 700;
    color: #B71C1C;
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.ita-info-body {
    font-size: 0.9rem;
    color: #37474F;
    line-height: 1.65;
}

/* ── Property grid ───────────────────────────────────────────── */

.ita-prop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ita-prop-card {
    background: white;
    border: 1px solid #FFCDD2;
    border-top: 3px solid #C62828;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.ita-prop-name {
    font-weight: 700;
    color: #B71C1C;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.ita-prop-desc {
    font-size: 0.84rem;
    color: #546e7a;
    line-height: 1.5;
}

/* ── Callout box ─────────────────────────────────────────────── */

.ita-callout {
    background: #FFF5F5;
    border: 1px solid #FFCDD2;
    border-left: 5px solid #B71C1C;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 1.5rem;
}

.ita-callout-title {
    font-weight: 700;
    color: #B71C1C;
    font-size: 1rem;
    margin-bottom: 8px;
}

.ita-callout-body {
    font-size: 0.9rem;
    color: #37474F;
    line-height: 1.7;
}

/* ── Conjugation table ───────────────────────────────────────── */

.ita-conj-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin-bottom: 1rem;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}

.ita-conj-table thead tr {
    background: #C62828;
    color: white;
}

.ita-conj-table thead th {
    padding: 9px 14px;
    font-weight: 700;
    text-align: left;
}

.ita-conj-table tbody tr:nth-child(even) {
    background: #FFF5F5;
}

.ita-conj-table tbody td {
    padding: 8px 14px;
    border-bottom: 1px solid #FFCDD2;
    color: #37474F;
    vertical-align: middle;
}

.ita-conj-table tbody td:first-child {
    font-weight: 700;
    color: #B71C1C;
    width: 52px;
}

/* ── Mode/tense badges ───────────────────────────────────────── */

.ita-mode-badge {
    display: inline-block;
    background: #B71C1C;
    color: white;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.ita-tense-badge {
    display: inline-block;
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid #FFCDD2;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 2px 4px 2px 0;
}

/* ── Exercise quiz card ──────────────────────────────────────── */

.ita-quiz-card {
    background: white;
    border: 2px solid #FFCDD2;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 3px 12px rgba(183, 28, 28, .08);
}

.ita-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
    font-size: 0.88rem;
    color: #B71C1C;
    font-weight: 700;
}

.ita-quiz-score {
    font-size: 1rem;
    color: #B71C1C;
}

.ita-person-label {
    font-weight: 700;
    color: #C62828;
    font-size: 0.85rem;
    min-width: 62px;
    padding-top: 6px;
}

.ita-conj-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.ita-result-icon {
    font-size: 1.1rem;
    padding-top: 8px;
}

/* ============================================================
   I Temi — essay writing section
   ============================================================ */

/* ── SVG diagram wrapper ─────────────────────────────────── */

.tema-svg-wrapper {
    background: #FFF8F8;
    border: 1px solid #FFCDD2;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ── Struttura del tema — stacked blocks ─────────────────── */

.tema-struttura-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tema-struttura-connector {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    height: 28px;
    font-size: 1.3rem;
    color: #B0BEC5;
    line-height: 1;
}

.tema-struttura-block {
    border-radius: 14px;
    padding: 20px 24px 18px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: box-shadow .2s;
    border-style: solid;
    border-width: 1.5px 1.5px 1.5px 7px;
    border-color: #E0E0E0 #E0E0E0 #E0E0E0 #ccc;
}

.tema-struttura-block:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.11);
}

.tema-struttura-block--intro {
    border-color: #FFCDD2 #FFCDD2 #FFCDD2 #B71C1C;
    background: linear-gradient(to right, #FFF5F5 0%, white 60%);
}

.tema-struttura-block--svolg {
    border-color: #FFE0B2 #FFE0B2 #FFE0B2 #E65100;
    background: linear-gradient(to right, #FFFDE7 0%, white 60%);
}

.tema-struttura-block--conc {
    border-color: #C8E6C9 #C8E6C9 #C8E6C9 #2E7D32;
    background: linear-gradient(to right, #F1F8E9 0%, white 60%);
}

.tema-struttura-block-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tema-struttura-icon {
    font-size: 1.7rem;
    line-height: 1;
    flex-shrink: 0;
}

.tema-struttura-name {
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: .5px;
    color: #263238;
}

.tema-struttura-pct {
    font-size: 0.78rem;
    color: #90A4AE;
    font-weight: 600;
    margin-top: 2px;
}

/* progress-bar accent strip */
.tema-struttura-bar {
    margin-left: auto;
    height: 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.tema-struttura-bar--intro { width: 60px;  background: #EF9A9A; }
.tema-struttura-bar--svolg { width: 140px; background: #FFCC80; }
.tema-struttura-bar--conc  { width: 60px;  background: #A5D6A7; }

@media (max-width: 500px) {
    .tema-struttura-bar { display: none; }
}

.tema-struttura-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.tema-struttura-tag {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: #F5F5F5;
    color: #546E7A;
    border: 1px solid #E0E0E0;
}

.tema-struttura-block--intro .tema-struttura-tag { background: #FFEBEE; color: #B71C1C; border-color: #FFCDD2; }
.tema-struttura-block--svolg .tema-struttura-tag { background: #FFF3E0; color: #E65100; border-color: #FFE0B2; }
.tema-struttura-block--conc  .tema-struttura-tag { background: #E8F5E9; color: #2E7D32; border-color: #C8E6C9; }

.tema-struttura-desc {
    font-size: 0.9rem;
    color: #546E7A;
    line-height: 1.7;
    padding-left: 42px;
}

/* ── Diagram card (wraps SVG + title + caption) ─────────── */

.tema-diagram-card {
    background: white;
    border: 1px solid #FFCDD2;
    border-radius: 14px;
    padding: 20px 16px 14px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(183,28,28,.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tema-diagram-title {
    font-size: 1rem;
    font-weight: 800;
    color: #B71C1C;
}

.tema-diagram-caption {
    font-size: 0.82rem;
    color: #546E7A;
    line-height: 1.5;
    margin: 0;
}

/* ── Callout overrides for temi (support CSS vars) ────── */

.ita-callout {
    background: var(--callout-bg, #FFF5F5);
    border-left: 4px solid var(--callout-border, #B71C1C);
    border-radius: 8px;
    padding: 14px 18px;
}

.ita-callout-title {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--callout-title, #B71C1C);
    margin-bottom: 6px;
}

.ita-callout-body {
    font-size: 0.92rem;
    color: #37474F;
    line-height: 1.65;
}

/* ── Callout colour variants ─────────────────────────────── */

.ita-callout--info {
    --callout-bg:     #E3F2FD;
    --callout-border: #1565C0;
    --callout-title:  #1565C0;
}

.ita-callout--tip {
    --callout-bg:     #E8F5E9;
    --callout-border: #2E7D32;
    --callout-title:  #2E7D32;
}

.ita-callout--warning {
    --callout-bg:     #FFF3E0;
    --callout-border: #E65100;
    --callout-title:  #E65100;
}

.ita-callout--purple {
    --callout-bg:     #F3E5F5;
    --callout-border: #7B1FA2;
    --callout-title:  #7B1FA2;
}

.ita-callout--success {
    --callout-bg:     #F1F8E9;
    --callout-border: #388E3C;
    --callout-title:  #388E3C;
}

/* ── Tip list inside section blocks ─────────────────────── */

.tema-tip-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.89rem;
    color: #37474F;
    line-height: 1.8;
}

.tema-tip-list li {
    margin-bottom: 4px;
}

/* ── Argomentativo flow row ──────────────────────────────── */

.tema-flow-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tema-flow-step {
    flex: 1;
    min-width: 140px;
    border: 2px solid #ccc;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.88rem;
    color: #37474F;
    line-height: 1.4;
}

.tema-flow-step strong {
    font-size: 0.92rem;
    color: #263238;
}

.tema-flow-step span {
    font-size: 0.8rem;
    color: #546E7A;
}

.tema-flow-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: white;
    font-size: 0.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.tema-flow-arrow {
    font-size: 1.4rem;
    color: #B71C1C;
    flex-shrink: 0;
}

/* ── Argomentativo vertical flow (new design) ────────────── */

.tema-arg-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 860px;
}

.tema-arg-step {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px 24px 18px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    border: 1.5px solid #E0E0E0;
    border-left-width: 6px;
    transition: box-shadow .2s;
    position: relative;
}

.tema-arg-step:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

.tema-arg-step--tesi        { border-left-color: #B71C1C; }
.tema-arg-step--argomenti   { border-left-color: #1565C0; }
.tema-arg-step--antitesi    { border-left-color: #E65100; }
.tema-arg-step--confutazione{ border-left-color: #2E7D32; }

.tema-arg-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.tema-arg-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    font-size: 0.95rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.tema-arg-title {
    font-size: 1.08rem;
    font-weight: 800;
    color: #263238;
    letter-spacing: .2px;
}

.tema-arg-badge {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 20px;
    letter-spacing: .3px;
    border: 1px solid transparent;
}

.tema-arg-step--tesi        .tema-arg-badge { background: #FFEBEE; color: #B71C1C; border-color: #FFCDD2; }
.tema-arg-step--argomenti   .tema-arg-badge { background: #E3F2FD; color: #1565C0; border-color: #BBDEFB; }
.tema-arg-step--antitesi    .tema-arg-badge { background: #FFF3E0; color: #E65100; border-color: #FFE0B2; }
.tema-arg-step--confutazione .tema-arg-badge { background: #E8F5E9; color: #2E7D32; border-color: #C8E6C9; }

.tema-arg-body {
    font-size: 0.9rem;
    color: #546E7A;
    line-height: 1.75;
    padding-left: 44px;
}

.tema-arg-body em {
    color: #37474F;
    font-style: italic;
}

.tema-arg-connector {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 29px;
    height: 28px;
}

.tema-arg-arrow {
    font-size: 1.2rem;
    color: #B0BEC5;
    line-height: 1;
}



/* ── Character card accent ───────────────────────────────── */

.tema-char-card {
    border-top: 4px solid var(--char-accent, #B71C1C);
}

.tema-char-list {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 0.87rem;
    color: #37474F;
    line-height: 1.9;
}

/* ── Exercise cards ──────────────────────────────────────── */

.tema-exercise-card {
    background: white;
    border: 1px solid #FFCDD2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(183,28,28,.06);
}

.tema-ex-header {
    background: #FFF5F5;
    border-bottom: 1px solid #FFCDD2;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tema-ex-badge {
    background: #B71C1C;
    color: white;
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 0.75rem;
    font-weight: 800;
}

.tema-ex-type {
    font-size: 0.92rem;
    font-weight: 700;
    color: #B71C1C;
}

.tema-ex-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tema-ex-traccia {
    font-size: 0.93rem;
    color: #37474F;
    line-height: 1.7;
    margin: 0;
}

.tema-ex-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tema-hint-box {
    background: #FFFDE7;
    border: 1px solid #F9A825;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: #4E342E;
    line-height: 1.6;
}

.tema-solution-box {
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 0.88rem;
    color: #1B5E20;
    line-height: 1.7;
}

.tema-solution-list {
    padding-left: 18px;
    margin: 6px 0;
    line-height: 1.9;
}

.tema-solution-list ul {
    padding-left: 16px;
    margin: 2px 0;
}

.tema-traccia-list {
    padding-left: 20px;
    font-size: 0.9rem;
    color: #37474F;
    line-height: 1.8;
}

    width: 26px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Challenge result ────────────────────────────────────────── */

.ita-challenge-result {
    text-align: center;
    padding: 2rem 1rem;
}

.ita-challenge-emoji {
    font-size: 3.5rem;
    margin-bottom: .5rem;
}

.ita-challenge-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #B71C1C;
    margin-bottom: .3rem;
}

.ita-challenge-score {
    color: #546e7a;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* ── Verb group card ─────────────────────────────────────────── */

.ita-group-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #FFCDD2;
    border-top: 4px solid #B71C1C;
    padding: 1.2rem 1.4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.ita-group-title {
    font-weight: 800;
    font-size: 1.1rem;
    color: #B71C1C;
    margin-bottom: 4px;
}

.ita-group-sub {
    font-size: 0.83rem;
    color: #78909c;
    margin-bottom: 10px;
}

.ita-group-examples {
    font-size: 0.88rem;
    color: #37474F;
    line-height: 1.6;
}

/* ── Auxiliary rule note ─────────────────────────────────────── */

.ita-rule-note {
    background: #FFF5F5;
    border: 1px dashed #FFCDD2;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.86rem;
    color: #546e7a;
    margin-top: 8px;
    line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════
   Pagina Esempi — tema-esempio cards
   ════════════════════════════════════════════════════════════ */

.tema-esempio-card {
    background: var(--bp-surface, white);
    border: 1px solid var(--bp-border, #E0E0E0);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
    max-width: 860px;
    transition: background .2s, border-color .2s;
}

.tema-esempio-card--narrativo  { border-top: 5px solid #1565C0; }
.tema-esempio-card--descrittivo { border-top: 5px solid #7B1FA2; }
.tema-esempio-card--argomentativo { border-top: 5px solid #2E7D32; }

.tema-esempio-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tema-esempio-body .mud-button-root {
    align-self: flex-start;
}

.tema-esempio-traccia {
    background: var(--bp-surface-2, #F8F9FA);
    border-bottom: 1px solid var(--bp-border, #E0E0E0);
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background .2s;
}

.tema-esempio-traccia p {
    margin: 0;
    font-size: 0.93rem;
    color: var(--bp-text, #37474F);
    line-height: 1.7;
}

.tema-esempio-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--bp-text-muted, #78909C);
}

.tema-esempio-actions {
    display: flex;
    gap: 10px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--bp-border-soft, #F0F0F0);
    flex-wrap: wrap;
}

/* ── Scaletta box ───────────────────────────────────────── */

.tema-scaletta-box {
    background: var(--bp-surface-2, #F3F6FB);
    border-bottom: 1px solid var(--bp-border, #E0E0E0);
    padding: 18px 24px;
    transition: background .2s;
}

.tema-scaletta-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #1565C0;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 10px;
}

[data-theme="dark"] .tema-scaletta-title { color: #64B5F6; }

.tema-scaletta-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.88rem;
    color: var(--bp-text, #37474F);
    line-height: 1.9;
}

.tema-scaletta-list li {
    margin-bottom: 2px;
}

/* ── Tema svolto box ────────────────────────────────────── */

.tema-svolto-box {
    padding: 22px 28px;
}

.tema-svolto-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #2E7D32;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #C8E6C9;
}

[data-theme="dark"] .tema-svolto-title { color: #66BB6A; border-bottom-color: rgba(102,187,106,.3); }

.tema-svolto-text {
    font-size: 0.93rem;
    color: var(--bp-text, #37474F);
    line-height: 1.85;
}

.tema-svolto-text p {
    margin: 0 0 1em
}

.tema-svolto-text p:first-child {
    text-indent: 0;
}

/* ── Sezioni colorate del tema svolto (intro / svolgimento / conclusione) ── */

.tema-svolto-sezione {
    border-left: 5px solid var(--bp-border, #E0E0E0);
    border-radius: 0 6px 6px 0;
    padding: 14px 18px 10px;
    margin-bottom: 10px;
    transition: background .2s, border-color .2s;
}

.tema-svolto-sezione:last-child {
    margin-bottom: 0;
}

.tema-svolto-sezione--intro { border-left-color: var(--bp-intro-border); background: var(--bp-intro-bg); }
.tema-svolto-sezione--svolg { border-left-color: var(--bp-svolg-border); background: var(--bp-svolg-bg); }
.tema-svolto-sezione--conc  { border-left-color: var(--bp-conc-border);  background: var(--bp-conc-bg); }

.tema-svolto-sezione-label {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 2px 10px;
    margin-bottom: 8px;
}

.tema-svolto-sezione--intro .tema-svolto-sezione-label { background: #FFEBEE; color: #B71C1C; }
.tema-svolto-sezione--svolg .tema-svolto-sezione-label { background: #FFF3E0; color: #E65100; }
.tema-svolto-sezione--conc  .tema-svolto-sezione-label { background: #E8F5E9; color: #2E7D32; }

[data-theme="dark"] .tema-svolto-sezione--intro .tema-svolto-sezione-label { background: rgba(239,83,80,.15); color: #EF5350; }
[data-theme="dark"] .tema-svolto-sezione--svolg .tema-svolto-sezione-label { background: rgba(255,112,67,.15); color: #FF7043; }
[data-theme="dark"] .tema-svolto-sezione--conc  .tema-svolto-sezione-label { background: rgba(102,187,106,.15); color: #66BB6A; }

.tema-svolto-sezione p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════
   SISTEMA DI ILLUMINAZIONE — TemaIlluminatoViewer
   Pannello DESTRA, sticky. Dark/light via CSS vars.
   ════════════════════════════════════════════════════════════ */

/* ── Layout: testo sinistra, pannello destra (sticky) ──────── */

.tema-illumina-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 18px;
    align-items: start;
    max-width: 1160px;
    margin: 0 auto;
}

@media (max-width: 860px) {
    .tema-illumina-layout {
        grid-template-columns: 1fr;
    }
    .tema-illumina-body  { order: 1; }
    .tema-illumina-panel { order: 2; position: static !important; }
}

/* ── Pannello di analisi ─────────────────────────────────────── */

.tema-illumina-panel {
    background: var(--bp-surface, #fff);
    border: 1px solid var(--bp-border, #e0e0e0);
    border-radius: 6px;
    padding: 12px 10px 10px;
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
    transition: background .2s, border-color .2s;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}

.tema-illumina-panel-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bp-border-soft, #f0f0f0);
}

.tema-illumina-panel-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--bp-text-muted, #78909C);
}

.tema-illumina-section { display: flex; flex-direction: column; gap: 5px; }

.tema-illumina-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tema-illumina-section-title {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bp-text-faint, #b0bec5);
}

.tema-illumina-clear {
    background: none;
    border: none;
    color: var(--bp-text-faint, #b0bec5);
    font-size: 0.65rem;
    cursor: pointer;
    padding: 1px 5px;
    border-radius: 4px;
    transition: background .15s, color .15s;
}
.tema-illumina-clear:hover {
    background: var(--bp-surface-3, #eceff1);
    color: var(--bp-text-muted, #78909C);
}

.tema-illumina-chips { display: flex; flex-direction: column; gap: 2px; }

/* ── Chip button — flat, left-aligned, dot far-right ─── */

.tema-illumina-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bp-border, #e0e0e0);
    border-radius: 3px;
    background: transparent;
    color: var(--bp-text-muted, #78909C);
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    text-align: left;
    width: 100%;
    line-height: 1.2;
    letter-spacing: .01em;
}

.tema-illumina-chip:hover {
    border-color: color-mix(in srgb, var(--chip-color) 50%, var(--bp-border, #e0e0e0));
    background: color-mix(in srgb, var(--chip-color) 5%, var(--bp-surface, #fff));
    color: var(--bp-text, #37474F);
}

.tema-illumina-chip.active {
    border-color: var(--chip-color);
    background: color-mix(in srgb, var(--chip-color) 10%, var(--bp-surface, #fff));
    color: var(--chip-color);
}

.chip-icon { font-size: 0.78rem; line-height: 1; flex-shrink: 0; }
.chip-label { flex: 1; }

/* Status dot — far right, vertically centered */
.chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--chip-color, #B0BEC5);
    opacity: 0.25;
    transition: opacity .2s, box-shadow .2s;
    flex-shrink: 0;
    margin-left: auto;
}

.tema-illumina-chip.active .chip-dot {
    opacity: 1;
    animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--chip-color); }
    50%       { box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-color) 25%, transparent); }
}

.tema-illumina-empty {
    font-size: 0.75rem;
    color: var(--bp-text-faint, #b0bec5);
    text-align: center;
    padding: 8px 0;
}

/* ── Body column ─────────────────────────────────────────────── */

.tema-illumina-body { position: relative; }

.tema-length-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .3px;
    background: var(--bp-surface-3, #eceff1);
    color: var(--bp-text-muted, #78909C);
    border: 1px solid var(--bp-border, #e0e0e0);
    transition: background .25s, color .25s;
}
.tema-length-badge--lungo       { background: #FFF3E0; color: #E65100; border-color: #FFCC80; }
.tema-length-badge--lunghissimo { background: #FFEBEE; color: #B71C1C; border-color: #FFCDD2; }

[data-theme="dark"] .tema-length-badge--lungo       { background: rgba(230,81,0,.15); border-color: rgba(230,81,0,.4); color: #FF7043; }
[data-theme="dark"] .tema-length-badge--lunghissimo { background: rgba(183,28,28,.15); border-color: rgba(183,28,28,.4); color: #EF5350; }

/* ════════════════════════════════════════════════════════════
   GRAMMAR ILLUMINATION — readable glow with dark-mode support
   ════════════════════════════════════════════════════════════ */

/* Base span */
.tema-span {
    transition: opacity 0.3s ease;
    display: inline;
}

/* Dim NON-illuminated spans — stays readable */
.tema-grammar-active .tema-span:not(.gram-illuminated) {
    opacity: var(--bp-gram-dim, 0.38);
}

/* Illuminated span shell */
.gram-illuminated {
    border-radius: 3px;
    padding: 0 2px;
    display: inline;
    transition: background .3s, box-shadow .3s;
}

/* ── Grammar glow colours — light bg tint + underline + pulse ── */

.gram-ill-soggetto {
    color: #0D47A1;
    background: rgba(21,101,192, 0.13);
    border-bottom: 2px solid #1565C0;
    animation: glow-soggetto 2.4s ease-in-out infinite;
}
@keyframes glow-soggetto {
    0%,100% { box-shadow: 0 2px 0 #1565C0, 0 0 5px rgba(21,101,192,var(--bp-glow-opacity,.22)); }
    50%     { box-shadow: 0 2px 0 #1565C0, 0 0 14px rgba(21,101,192,var(--bp-glow-strong,.55)); }
}

.gram-ill-predicato {
    color: #7F0000;
    background: rgba(183,28,28, 0.12);
    border-bottom: 2px solid #B71C1C;
    animation: glow-predicato 2.4s ease-in-out infinite;
}
@keyframes glow-predicato {
    0%,100% { box-shadow: 0 2px 0 #B71C1C, 0 0 5px rgba(183,28,28,var(--bp-glow-opacity,.22)); }
    50%     { box-shadow: 0 2px 0 #B71C1C, 0 0 14px rgba(183,28,28,var(--bp-glow-strong,.55)); }
}

.gram-ill-complementooggetto {
    color: #1B5E20;
    background: rgba(46,125,50, 0.12);
    border-bottom: 2px solid #2E7D32;
    animation: glow-compobj 2.4s ease-in-out infinite;
}
@keyframes glow-compobj {
    0%,100% { box-shadow: 0 2px 0 #2E7D32, 0 0 5px rgba(46,125,50,var(--bp-glow-opacity,.22)); }
    50%     { box-shadow: 0 2px 0 #2E7D32, 0 0 14px rgba(46,125,50,var(--bp-glow-strong,.55)); }
}

.gram-ill-complementoindiretto {
    color: #4A148C;
    background: rgba(106,27,154, 0.12);
    border-bottom: 2px solid #6A1B9A;
    animation: glow-compind 2.4s ease-in-out infinite;
}
@keyframes glow-compind {
    0%,100% { box-shadow: 0 2px 0 #6A1B9A, 0 0 5px rgba(106,27,154,var(--bp-glow-opacity,.22)); }
    50%     { box-shadow: 0 2px 0 #6A1B9A, 0 0 14px rgba(106,27,154,var(--bp-glow-strong,.55)); }
}

.gram-ill-attributo {
    color: #BF360C;
    background: rgba(230,81,0, 0.12);
    border-bottom: 2px solid #E65100;
    animation: glow-attr 2.4s ease-in-out infinite;
}
@keyframes glow-attr {
    0%,100% { box-shadow: 0 2px 0 #E65100, 0 0 5px rgba(230,81,0,var(--bp-glow-opacity,.22)); }
    50%     { box-shadow: 0 2px 0 #E65100, 0 0 14px rgba(230,81,0,var(--bp-glow-strong,.55)); }
}

.gram-ill-connettivo {
    color: #004D40;
    background: rgba(0,105,92, 0.12);
    border-bottom: 2px dashed #00695C;
    animation: glow-conn 2.4s ease-in-out infinite;
}
@keyframes glow-conn {
    0%,100% { box-shadow: 0 2px 0 #00695C, 0 0 5px rgba(0,105,92,var(--bp-glow-opacity,.22)); }
    50%     { box-shadow: 0 2px 0 #00695C, 0 0 14px rgba(0,105,92,var(--bp-glow-strong,.55)); }
}

.gram-ill-avverbio {
    color: #880E4F;
    background: rgba(173,20,87, 0.12);
    border-bottom: 2px solid #AD1457;
    animation: glow-avv 2.4s ease-in-out infinite;
}
@keyframes glow-avv {
    0%,100% { box-shadow: 0 2px 0 #AD1457, 0 0 5px rgba(173,20,87,var(--bp-glow-opacity,.22)); }
    50%     { box-shadow: 0 2px 0 #AD1457, 0 0 14px rgba(173,20,87,var(--bp-glow-strong,.55)); }
}

/* ── Dark mode: lighter text + brighter glow ─────────────────── */
[data-theme="dark"] .gram-ill-soggetto            { color: #90CAF9; background: rgba(21,101,192,.18); }
[data-theme="dark"] .gram-ill-predicato           { color: #EF9A9A; background: rgba(183,28,28,.18); }
[data-theme="dark"] .gram-ill-complementooggetto  { color: #A5D6A7; background: rgba(46,125,50,.18); }
[data-theme="dark"] .gram-ill-complementoindiretto{ color: #CE93D8; background: rgba(106,27,154,.18); }
[data-theme="dark"] .gram-ill-attributo           { color: #FFAB91; background: rgba(230,81,0,.18); }
[data-theme="dark"] .gram-ill-connettivo          { color: #80CBC4; background: rgba(0,105,92,.18); }
[data-theme="dark"] .gram-ill-avverbio            { color: #F48FB1; background: rgba(173,20,87,.18); }

/* ════════════════════════════════════════════════════════════
   STRUCTURE ILLUMINATION
   Paragraph-level glow effects on annotated paragraphs
   ════════════════════════════════════════════════════════════ */

/* Base paragraph */
.tema-para {
    transition: opacity 0.3s ease, background 0.3s ease, padding 0.2s ease;
    margin-bottom: 0.9em;
    position: relative;
}
.tema-para:last-child { margin-bottom: 0; }

/* When ANY structure role is active, dim non-illuminated paragraphs */
.tema-structure-active .tema-para:not(.struct-illuminated) {
    opacity: var(--bp-struct-dim, 0.35);
}

/* Illuminated paragraph — common shell */
.struct-illuminated {
    border-radius: 6px;
    padding: 10px 14px 10px 14px;
    margin-left: -14px;
    animation: struct-appear 0.35s ease;
}

@keyframes struct-appear {
    from { opacity: 0.5; transform: translateX(-4px); }
    to   { opacity: 1;   transform: translateX(0); }
}

/* Structure role badge */
.tema-struct-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px 2px 8px;
    border-radius: 14px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    margin-bottom: 7px;
    margin-right: 6px;
    background: var(--struct-color, #B71C1C);
    color: white;
    animation: badge-glow 2s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes badge-glow {
    0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--struct-color) 50%, transparent); }
    50%       { box-shadow: 0 0 14px var(--struct-color), 0 0 22px color-mix(in srgb, var(--struct-color) 35%, transparent); }
}

/* ── Structure role-specific styles ─────────────────────────── */

/* Helper mixin pattern via CSS — each role defines its --struct-color */

.struct-ill-aggancio {
    --struct-color: #B71C1C;
    background: linear-gradient(100deg, rgba(183,28,28,0.1) 0%, rgba(183,28,28,0.03) 100%);
    border-left: 3.5px solid #B71C1C;
    box-shadow: inset 0 0 24px rgba(183,28,28,0.07), 0 0 0 1px rgba(183,28,28,0.12);
}

.struct-ill-tesi {
    --struct-color: #1565C0;
    background: linear-gradient(100deg, rgba(21,101,192,0.1) 0%, rgba(21,101,192,0.03) 100%);
    border-left: 3.5px solid #1565C0;
    box-shadow: inset 0 0 24px rgba(21,101,192,0.07), 0 0 0 1px rgba(21,101,192,0.12);
}

.struct-ill-sintesi {
    --struct-color: #2E7D32;
    background: linear-gradient(100deg, rgba(46,125,50,0.1) 0%, rgba(46,125,50,0.03) 100%);
    border-left: 3.5px solid #2E7D32;
    box-shadow: inset 0 0 24px rgba(46,125,50,0.07), 0 0 0 1px rgba(46,125,50,0.12);
}

.struct-ill-apertura {
    --struct-color: #00897B;
    background: linear-gradient(100deg, rgba(0,137,123,0.1) 0%, rgba(0,137,123,0.03) 100%);
    border-left: 3.5px solid #00897B;
    box-shadow: inset 0 0 24px rgba(0,137,123,0.07), 0 0 0 1px rgba(0,137,123,0.12);
}

.struct-ill-ambientazione {
    --struct-color: #5E35B1;
    background: linear-gradient(100deg, rgba(94,53,177,0.1) 0%, rgba(94,53,177,0.03) 100%);
    border-left: 3.5px solid #5E35B1;
    box-shadow: inset 0 0 24px rgba(94,53,177,0.07), 0 0 0 1px rgba(94,53,177,0.12);
}

.struct-ill-protagonista {
    --struct-color: #1E88E5;
    background: linear-gradient(100deg, rgba(30,136,229,0.1) 0%, rgba(30,136,229,0.03) 100%);
    border-left: 3.5px solid #1E88E5;
    box-shadow: inset 0 0 24px rgba(30,136,229,0.07), 0 0 0 1px rgba(30,136,229,0.12);
}

.struct-ill-conflitto {
    --struct-color: #F4511E;
    background: linear-gradient(100deg, rgba(244,81,30,0.1) 0%, rgba(244,81,30,0.03) 100%);
    border-left: 3.5px solid #F4511E;
    box-shadow: inset 0 0 24px rgba(244,81,30,0.07), 0 0 0 1px rgba(244,81,30,0.12);
}

.struct-ill-climax {
    --struct-color: #C62828;
    background: linear-gradient(100deg, rgba(198,40,40,0.13) 0%, rgba(198,40,40,0.04) 100%);
    border-left: 3.5px solid #C62828;
    box-shadow: inset 0 0 24px rgba(198,40,40,0.1), 0 0 0 1px rgba(198,40,40,0.18);
}

.struct-ill-scioglimento {
    --struct-color: #388E3C;
    background: linear-gradient(100deg, rgba(56,142,60,0.1) 0%, rgba(56,142,60,0.03) 100%);
    border-left: 3.5px solid #388E3C;
    box-shadow: inset 0 0 24px rgba(56,142,60,0.07), 0 0 0 1px rgba(56,142,60,0.12);
}

.struct-ill-vista {
    --struct-color: #1565C0;
    background: linear-gradient(100deg, rgba(21,101,192,0.1) 0%, rgba(21,101,192,0.03) 100%);
    border-left: 3.5px solid #1565C0;
    box-shadow: inset 0 0 24px rgba(21,101,192,0.07), 0 0 0 1px rgba(21,101,192,0.12);
}

.struct-ill-udito {
    --struct-color: #6A1B9A;
    background: linear-gradient(100deg, rgba(106,27,154,0.1) 0%, rgba(106,27,154,0.03) 100%);
    border-left: 3.5px solid #6A1B9A;
    box-shadow: inset 0 0 24px rgba(106,27,154,0.07), 0 0 0 1px rgba(106,27,154,0.12);
}

.struct-ill-olfatto {
    --struct-color: #2E7D32;
    background: linear-gradient(100deg, rgba(46,125,50,0.1) 0%, rgba(46,125,50,0.03) 100%);
    border-left: 3.5px solid #2E7D32;
    box-shadow: inset 0 0 24px rgba(46,125,50,0.07), 0 0 0 1px rgba(46,125,50,0.12);
}

.struct-ill-tatto {
    --struct-color: #E65100;
    background: linear-gradient(100deg, rgba(230,81,0,0.1) 0%, rgba(230,81,0,0.03) 100%);
    border-left: 3.5px solid #E65100;
    box-shadow: inset 0 0 24px rgba(230,81,0,0.07), 0 0 0 1px rgba(230,81,0,0.12);
}

.struct-ill-significato {
    --struct-color: #00695C;
    background: linear-gradient(100deg, rgba(0,105,92,0.1) 0%, rgba(0,105,92,0.03) 100%);
    border-left: 3.5px solid #00695C;
    box-shadow: inset 0 0 24px rgba(0,105,92,0.07), 0 0 0 1px rgba(0,105,92,0.12);
}

.struct-ill-argomento {
    --struct-color: #1565C0;
    background: linear-gradient(100deg, rgba(21,101,192,0.1) 0%, rgba(21,101,192,0.03) 100%);
    border-left: 3.5px solid #1565C0;
    box-shadow: inset 0 0 24px rgba(21,101,192,0.07), 0 0 0 1px rgba(21,101,192,0.12);
}

.struct-ill-esempio {
    --struct-color: #E65100;
    background: linear-gradient(100deg, rgba(230,81,0,0.1) 0%, rgba(230,81,0,0.03) 100%);
    border-left: 3.5px solid #E65100;
    box-shadow: inset 0 0 24px rgba(230,81,0,0.07), 0 0 0 1px rgba(230,81,0,0.12);
}

.struct-ill-antitesi {
    --struct-color: #F4511E;
    background: linear-gradient(100deg, rgba(244,81,30,0.1) 0%, rgba(244,81,30,0.03) 100%);
    border-left: 3.5px solid #F4511E;
    box-shadow: inset 0 0 24px rgba(244,81,30,0.07), 0 0 0 1px rgba(244,81,30,0.12);
}

.struct-ill-confutazione {
    --struct-color: #388E3C;
    background: linear-gradient(100deg, rgba(56,142,60,0.1) 0%, rgba(56,142,60,0.03) 100%);
    border-left: 3.5px solid #388E3C;
    box-shadow: inset 0 0 24px rgba(56,142,60,0.07), 0 0 0 1px rgba(56,142,60,0.12);
}

/* ════════════════════════════════════════════════════════════
   Hub pagina esempi — nuovi card multi-tipo
   ════════════════════════════════════════════════════════════ */

.tema-esempi-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tema-esempi-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--bp-border, #E0E0E0);
    border-bottom: none;
    background: var(--bp-surface, #FAFAFA);
}

.tema-esempi-group-header--narrativo  { border-top: 4px solid #1565C0; }
.tema-esempi-group-header--descrittivo { border-top: 4px solid #7B1FA2; }
.tema-esempi-group-header--argomentativo { border-top: 4px solid #2E7D32; }

.tema-esempi-group-icon  { font-size: 1.3rem; line-height: 1; }
.tema-esempi-group-title { font-size: 1.0rem; font-weight: 800; color: var(--bp-text, #37474F); }
.tema-esempi-group-desc  {
    font-size: 0.8rem;
    color: var(--bp-text-muted, #78909C);
    margin-left: auto;
    text-align: right;
    max-width: 320px;
}

.tema-esempi-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--bp-border, #E0E0E0);
    border-radius: 0 0 8px 8px;
    background: var(--bp-surface-2, #F8F9FA);
}

.tema-esempi-card {
    padding: 14px 16px;
    background: var(--bp-surface, white);
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--bp-border, #E0E0E0);
    border-radius: 6px;
    transition: background .15s, box-shadow .15s;
    width: 220px;
    flex-shrink: 0;
}

.tema-esempi-card:hover {
    background: var(--bp-surface-2, #FAFAFA);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.tema-esempi-card--narrativo  { border-top: 3px solid #1565C0; }
.tema-esempi-card--descrittivo { border-top: 3px solid #7B1FA2; }
.tema-esempi-card--argomentativo { border-top: 3px solid #2E7D32; }

.tema-esempi-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tema-esempi-card-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bp-surface-3, #ECEFF1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--bp-text-muted, #546E7A);
    flex-shrink: 0;
}

.tema-esempi-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bp-text, #37474F);
    line-height: 1.3;
}

.tema-esempi-card-traccia {
    font-size: 0.76rem;
    color: var(--bp-text-muted, #78909C);
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tema-esempi-card-btn {
    align-self: flex-start;
    margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════
   Dark mode — Italian pages
   All hardcoded light backgrounds / text replaced with CSS vars
   ════════════════════════════════════════════════════════════ */

[data-theme="dark"] .ita-section-block {
    background: var(--bp-surface);
    border-color: var(--bp-border);
}
[data-theme="dark"] .ita-section-block--start { border-color: var(--bp-border); border-left-color: #42A5F5; }
[data-theme="dark"] .ita-section-block--start .ita-section-block-title { color: #42A5F5; border-bottom-color: var(--bp-border); }
[data-theme="dark"] .ita-section-block--end   { border-color: var(--bp-border); border-left-color: #66BB6A; }
[data-theme="dark"] .ita-section-block--end   .ita-section-block-title { color: #66BB6A; border-bottom-color: var(--bp-border); }
[data-theme="dark"] .ita-section-block-title  { color: #EF5350; border-bottom-color: var(--bp-border); }

[data-theme="dark"] .ita-mode-overview-card { background: var(--bp-surface); }
[data-theme="dark"] .ita-moc-use            { color: var(--bp-text); }
[data-theme="dark"] .ita-moc-example        { color: var(--bp-text-muted); }
[data-theme="dark"] .ita-mode-detail-card   { background: var(--bp-surface); }
[data-theme="dark"] .ita-mdc-body           { color: var(--bp-text); }
[data-theme="dark"] .ita-mdc-example        { color: var(--bp-text-muted); }

[data-theme="dark"] .ita-topic-tabs         { border-bottom-color: var(--bp-border); }
[data-theme="dark"] .ita-topic-tab          { color: var(--bp-text-muted); }
[data-theme="dark"] .ita-topic-tab:hover    { background: var(--bp-surface-2); color: var(--bp-text); }
[data-theme="dark"] .ita-topic-tab--active  { background: var(--bp-surface); color: var(--bp-text); border-color: var(--bp-border); border-bottom-color: var(--bp-surface); }

[data-theme="dark"] .ita-topic-card         { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] .ita-info-card          { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] .ita-info-card--dark    { background: var(--bp-surface-2); }
[data-theme="dark"] .ita-info-title         { color: #EF5350; }
[data-theme="dark"] .ita-info-body          { color: var(--bp-text); }

[data-theme="dark"] .ita-prop-card          { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] .ita-prop-name          { color: #EF5350; }
[data-theme="dark"] .ita-prop-desc          { color: var(--bp-text-muted); }

[data-theme="dark"] .ita-callout            { background: var(--bp-surface-2); border-color: var(--bp-border); }
[data-theme="dark"] .ita-callout-body       { color: var(--bp-text); }

[data-theme="dark"] .ita-callout--info      { --callout-bg: rgba(21,101,192,0.12); --callout-border: #64B5F6; --callout-title: #64B5F6; }
[data-theme="dark"] .ita-callout--tip       { --callout-bg: rgba(46,125,50,0.12);  --callout-border: #81C784; --callout-title: #81C784; }
[data-theme="dark"] .ita-callout--warning   { --callout-bg: rgba(230,81,0,0.12);   --callout-border: #FFAB40; --callout-title: #FFAB40; }
[data-theme="dark"] .ita-callout--purple    { --callout-bg: rgba(123,31,162,0.12); --callout-border: #CE93D8; --callout-title: #CE93D8; }
[data-theme="dark"] .ita-callout--success   { --callout-bg: rgba(56,142,60,0.12);  --callout-border: #A5D6A7; --callout-title: #A5D6A7; }

[data-theme="dark"] .ita-conj-table         { background: var(--bp-surface); }
[data-theme="dark"] .ita-conj-table thead tr { background: #B71C1C; }
[data-theme="dark"] .ita-conj-table tbody tr:nth-child(even) { background: var(--bp-surface-2); }
[data-theme="dark"] .ita-conj-table tbody td { color: var(--bp-text); border-bottom-color: var(--bp-border); }
[data-theme="dark"] .ita-conj-table tbody td:first-child { color: #EF5350; }

[data-theme="dark"] .ita-tense-badge        { background: rgba(239,83,80,0.15); color: #EF9A9A; border-color: rgba(239,83,80,0.3); }
[data-theme="dark"] .ita-quiz-card          { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] .ita-group-card         { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] .ita-group-examples     { color: var(--bp-text); }
[data-theme="dark"] .ita-rule-note          { background: var(--bp-surface-2); border-color: var(--bp-border); color: var(--bp-text-muted); }
[data-theme="dark"] .ita-solution-inline    { background: rgba(102,187,106,0.15); border-color: #66BB6A; color: #66BB6A; }

[data-theme="dark"] .tema-svg-wrapper       { background: var(--bp-surface); border-color: var(--bp-border); }

[data-theme="dark"] .tema-struttura-block   { background: var(--bp-surface); border-color: var(--bp-border) var(--bp-border) var(--bp-border) #555; }
[data-theme="dark"] .tema-struttura-block--intro { background: linear-gradient(to right, rgba(239,83,80,0.08) 0%, var(--bp-surface) 60%); border-left-color: #EF5350; }
[data-theme="dark"] .tema-struttura-block--svolg { background: linear-gradient(to right, rgba(255,112,67,0.08) 0%, var(--bp-surface) 60%); border-left-color: #FF7043; }
[data-theme="dark"] .tema-struttura-block--conc  { background: linear-gradient(to right, rgba(102,187,106,0.08) 0%, var(--bp-surface) 60%); border-left-color: #66BB6A; }
[data-theme="dark"] .tema-struttura-name    { color: var(--bp-text); }
[data-theme="dark"] .tema-struttura-desc    { color: var(--bp-text-muted); }
[data-theme="dark"] .tema-struttura-tag     { background: var(--bp-surface-2); color: var(--bp-text-muted); border-color: var(--bp-border); }
[data-theme="dark"] .tema-struttura-block--intro .tema-struttura-tag { background: rgba(239,83,80,0.12); color: #EF9A9A; border-color: rgba(239,83,80,0.25); }
[data-theme="dark"] .tema-struttura-block--svolg .tema-struttura-tag { background: rgba(255,112,67,0.12); color: #FFAB91; border-color: rgba(255,112,67,0.25); }
[data-theme="dark"] .tema-struttura-block--conc  .tema-struttura-tag { background: rgba(102,187,106,0.12); color: #A5D6A7; border-color: rgba(102,187,106,0.25); }

[data-theme="dark"] .tema-diagram-card      { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] .tema-diagram-caption   { color: var(--bp-text-muted); }

[data-theme="dark"] .tema-arg-step          { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] .tema-arg-title         { color: var(--bp-text); }
[data-theme="dark"] .tema-arg-body          { color: var(--bp-text-muted); }
[data-theme="dark"] .tema-arg-body em       { color: var(--bp-text); }
[data-theme="dark"] .tema-arg-step--tesi        .tema-arg-badge { background: rgba(183,28,28,0.2); color: #EF9A9A; border-color: rgba(183,28,28,0.35); }
[data-theme="dark"] .tema-arg-step--argomenti   .tema-arg-badge { background: rgba(21,101,192,0.2); color: #90CAF9; border-color: rgba(21,101,192,0.35); }
[data-theme="dark"] .tema-arg-step--antitesi    .tema-arg-badge { background: rgba(230,81,0,0.2); color: #FFAB91; border-color: rgba(230,81,0,0.35); }
[data-theme="dark"] .tema-arg-step--confutazione .tema-arg-badge { background: rgba(46,125,50,0.2); color: #A5D6A7; border-color: rgba(46,125,50,0.35); }

[data-theme="dark"] .tema-tip-list          { color: var(--bp-text); }
[data-theme="dark"] .tema-flow-step         { background: var(--bp-surface); border-color: var(--bp-border); color: var(--bp-text); }
[data-theme="dark"] .tema-flow-step strong  { color: var(--bp-text); }
[data-theme="dark"] .tema-flow-step span    { color: var(--bp-text-muted); }

[data-theme="dark"] .tema-exercise-card     { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] .tema-ex-header         { background: var(--bp-surface-2); border-bottom-color: var(--bp-border); }
[data-theme="dark"] .tema-ex-traccia        { color: var(--bp-text); }
[data-theme="dark"] .tema-hint-box          { background: rgba(249,168,37,0.12); border-color: rgba(249,168,37,0.3); color: var(--bp-text); }
[data-theme="dark"] .tema-solution-box      { background: rgba(102,187,106,0.12); border-color: rgba(102,187,106,0.3); color: #A5D6A7; }
[data-theme="dark"] .tema-traccia-list      { color: var(--bp-text); }
[data-theme="dark"] .tema-char-list         { color: var(--bp-text); }

[data-theme="dark"] .ita-section-title      { color: #EF5350; border-bottom-color: var(--bp-border); }

/* ============================================================
   POESIE — Stili specifici
   ============================================================ */

/* ── Introduzione discorsiva ──────────────────────────────── */
.poesia-intro {
    background: var(--bp-surface-2, #f9f7f3);
    border-left: 4px solid var(--bp-topbar-accent, #f78b1e);
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin-bottom: 18px;
    font-size: 0.97rem;
    line-height: 1.75;
    color: var(--bp-text, #333);
}

.poesia-intro p {
    margin: 0;
}

.poesia-intro p + p {
    margin-top: 10px;
}

[data-theme="dark"] .poesia-intro {
    background: rgba(255, 255, 255, 0.04);
}

/* ── Badge autore ─────────────────────────────────────────── */
.poesia-autore-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bp-surface-2, #f5f5f5);
    border-radius: 10px;
    border-left: 4px solid var(--bp-topbar-accent, #f78b1e);
    margin-bottom: 16px;
}

.poesia-autore-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.poesia-autore-nome {
    font-weight: 700;
    font-size: 1rem;
    color: var(--bp-text, #333);
}

.poesia-autore-dettagli {
    font-size: 0.8rem;
    color: var(--bp-text-muted, #777);
}

.poesia-autore-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.poesia-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(247,139,30,0.12);
    color: #e65100;
    border: 1px solid rgba(247,139,30,0.3);
}

/* ── Layout testo/parafrasi a due colonne ─────────────────── */
.poesia-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 4px;
}

@media (max-width: 700px) {
    .poesia-columns { grid-template-columns: 1fr; }
}

.poesia-testo-block,
.poesia-parafrasi-block {
    background: var(--bp-surface-2, #f9f9f9);
    border-radius: 10px;
    padding: 14px 16px;
    border: 1px solid var(--bp-border-soft, #eee);
}

.poesia-block-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bp-text-muted, #999);
    margin-bottom: 10px;
}

.poesia-block-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bp-text-muted, #999);
    margin-bottom: 10px;
}

/* ── Video YouTube card ───────────────────────────────────── */
.poesia-video-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 10px 14px;
    background: var(--bp-surface-2, #f5f5f5);
    border-radius: 10px;
    border: 1px solid var(--bp-border, #e0e0e0);
    text-decoration: none;
    color: var(--bp-text, #333);
    transition: box-shadow .18s, transform .18s;
}

.poesia-video-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--bp-text, #333);
}

.poesia-video-thumb-wrap {
    position: relative;
    flex-shrink: 0;
    width: 140px;
    border-radius: 7px;
    overflow: hidden;
    line-height: 0;
}

.poesia-video-thumb {
    width: 100%;
    display: block;
    object-fit: cover;
}

.poesia-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity .18s;
}

.poesia-video-card:hover .poesia-video-play { opacity: 1; }

.poesia-video-label {
    font-size: 0.92rem;
    font-weight: 600;
}

[data-theme="dark"] .poesia-video-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

/* ── Video embed inline (iframe YouTube) ── */
.poesia-video-embed-wrap {
    margin-top: 18px;
}

.poesia-video-embed-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--bp-text-muted, #666);
    margin-bottom: 6px;
}

.poesia-video-embed {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.poesia-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── PoesiaPlayerBar wrapper ── */
.poesia-player-bar {
    margin-bottom: 28px;
}

.poesia-player-bar .poesia-video-embed-wrap {
    margin-top: 14px;
}
.poesia-testo {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.93rem;
    line-height: 1.85;
    color: var(--bp-text, #222);
}

.poesia-testo p { margin: 0; }

.poesia-testo--ermetico {
    font-size: 1.05rem;
    line-height: 2.4;
    letter-spacing: 0.01em;
}

.poesia-parafrasi {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--bp-text, #333);
}

.poesia-parafrasi p { margin: 0 0 8px; }
.poesia-parafrasi p:last-child { margin-bottom: 0; }

/* ── Analisi figure retoriche ─────────────────────────────── */
.poesia-figure-analisi {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.poesia-figura-analisi-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    padding: 8px 12px;
    background: var(--bp-surface, #fff);
    border-radius: 8px;
    border: 1px solid var(--bp-border-soft, #eee);
}

.poesia-fa-tipo {
    grid-column: 1;
    grid-row: 1;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--bp-topbar-accent, #f78b1e);
}

.poesia-fa-verso {
    grid-column: 2;
    grid-row: 1;
    font-style: italic;
    font-size: 0.84rem;
    color: var(--bp-text, #333);
}

.poesia-fa-effetto {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.82rem;
    color: var(--bp-text-muted, #666);
    line-height: 1.5;
    padding-top: 4px;
    border-top: 1px solid var(--bp-border-soft, #f0f0f0);
    margin-top: 4px;
}

@media (max-width: 600px) {
    .poesia-figura-analisi-item {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .poesia-fa-tipo, .poesia-fa-verso, .poesia-fa-effetto { grid-column: 1; }
    .poesia-fa-verso { grid-row: 2; }
    .poesia-fa-effetto { grid-row: 3; }
}

/* ── Griglia versi (metrica) ─────────────────────────────── */
.poesia-versi-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--bp-border-soft, #eee);
    border-radius: 8px;
    overflow: hidden;
}

.poesia-verso-row {
    display: grid;
    grid-template-columns: 140px 80px 1fr;
    gap: 8px;
    padding: 7px 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--bp-border-soft, #f0f0f0);
    align-items: center;
}

.poesia-verso-row:last-child { border-bottom: none; }

.poesia-verso-row--highlight {
    background: rgba(247,139,30,0.07);
    font-weight: 600;
}

.poesia-verso-name { color: var(--bp-text, #333); font-weight: 600; }
.poesia-verso-sill { color: var(--bp-topbar-accent, #f78b1e); font-weight: 700; font-size: 0.82rem; }
.poesia-verso-es   { color: var(--bp-text-muted, #777); font-size: 0.82rem; }

@media (max-width: 600px) {
    .poesia-verso-row { grid-template-columns: 1fr 60px; }
    .poesia-verso-es  { display: none; }
}

/* ── Griglia strofe ─────────────────────────────────────── */
.poesia-strofe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.poesia-strofa-card {
    background: var(--bp-surface, #fff);
    border: 1px solid var(--bp-border-soft, #eee);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.poesia-strofa-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--bp-topbar-accent, #f78b1e);
    line-height: 1;
}

.poesia-strofa-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bp-text, #333);
}

.poesia-strofa-desc {
    font-size: 0.78rem;
    color: var(--bp-text-muted, #666);
    line-height: 1.45;
}

/* ── Figure retoriche list (teoria) ─────────────────────── */
.poesia-figure-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.poesia-figura-item {
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bp-surface, #fff);
    border: 1px solid var(--bp-border-soft, #eee);
}

.poesia-figura-item--primary {
    border-left: 3px solid var(--bp-topbar-accent, #f78b1e);
}

.poesia-figura-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--bp-text, #222);
    margin-bottom: 2px;
}

.poesia-figura-def {
    font-size: 0.83rem;
    color: var(--bp-text-muted, #666);
    margin-bottom: 5px;
    line-height: 1.45;
}

.poesia-figura-esempio {
    font-size: 0.82rem;
    color: var(--bp-text, #444);
    font-style: italic;
    padding: 5px 10px;
    background: var(--bp-surface-2, #f7f7f7);
    border-radius: 5px;
}

/* ── Tipi di componimento ─────────────────────────────────── */
.poesia-tipo-card {
    background: var(--bp-surface, #fff);
    border: 1px solid var(--bp-border-soft, #eee);
    border-radius: 12px;
    padding: 14px 16px;
    height: 100%;
}

.poesia-tipo-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.poesia-tipo-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.poesia-tipo-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--bp-text, #222);
}

.poesia-tipo-schema {
    font-size: 0.75rem;
    color: var(--bp-topbar-accent, #f78b1e);
    font-weight: 600;
    margin-top: 2px;
}

.poesia-tipo-desc {
    font-size: 0.84rem;
    color: var(--bp-text-muted, #666);
    line-height: 1.55;
    margin: 0;
}

/* ── Schema analisi in 6 passi ───────────────────────────── */
.poesia-analisi-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    counter-reset: none;
}

.poesia-analisi-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 10px 14px;
    background: var(--bp-surface, #fff);
    border: 1px solid var(--bp-border-soft, #eee);
    border-radius: 10px;
}

.poesia-analisi-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bp-topbar-accent, #f78b1e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.poesia-analisi-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--bp-text, #222);
    margin-bottom: 3px;
}

.poesia-analisi-desc {
    font-size: 0.83rem;
    color: var(--bp-text-muted, #666);
    line-height: 1.45;
}

/* ── Esempio breve (rime) ────────────────────────────────── */
.poesia-esempio-breve {
    font-size: 0.8rem;
    color: var(--bp-text-muted, #666);
    margin-top: 6px;
    padding-left: 8px;
    border-left: 2px solid var(--bp-border-soft, #ddd);
    line-height: 1.6;
}

/* ── Dark mode ───────────────────────────────────────────── */
[data-theme="dark"] .poesia-autore-badge   { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .poesia-testo-block,
[data-theme="dark"] .poesia-parafrasi-block { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .poesia-figura-analisi-item,
[data-theme="dark"] .poesia-figura-item,
[data-theme="dark"] .poesia-strofa-card,
[data-theme="dark"] .poesia-tipo-card,
[data-theme="dark"] .poesia-analisi-step  { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .poesia-verso-row      { border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .poesia-verso-row--highlight { background: rgba(247,139,30,0.10); }
[data-theme="dark"] .poesia-figura-esempio { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .poesia-tag            { background: rgba(247,139,30,0.15); color: #FFB74D; border-color: rgba(247,139,30,0.25); }

/* ═══════════════════════════════════════════════════════════
   POESIA TTS — Reader player
   ═══════════════════════════════════════════════════════════ */
.poesia-tts {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
    flex-wrap: wrap;
}

.poesia-tts-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
}

.poesia-tts-btn--play {
    background: var(--bp-primary, #F78B1E);
    color: #fff;
}
.poesia-tts-btn--play:hover { background: #d97610; transform: scale(1.03); }

.poesia-tts-btn--pause {
    background: #1976d2;
    color: #fff;
}
.poesia-tts-btn--pause:hover { background: #1256a0; transform: scale(1.03); }

.poesia-tts-btn--resume {
    background: #388e3c;
    color: #fff;
}
.poesia-tts-btn--resume:hover { background: #2e7d32; transform: scale(1.03); }

.poesia-tts-btn--stop {
    background: #d32f2f;
    color: #fff;
}
.poesia-tts-btn--stop:hover { background: #b71c1c; transform: scale(1.03); }

.poesia-tts-icon  { font-size: 1rem; }
.poesia-tts-label { letter-spacing: 0.02em; }

/* Progress bar */
.poesia-tts-progress-wrap {
    flex: 1;
    min-width: 80px;
    max-width: 200px;
    height: 6px;
    background: rgba(0,0,0,0.12);
    border-radius: 4px;
    overflow: hidden;
}

.poesia-tts-progress-bar {
    height: 100%;
    background: var(--bp-primary, #F78B1E);
    border-radius: 4px;
    transition: width 0.25s linear;
    min-width: 4px;
}

/* Speed controls */
.poesia-tts-controls {
    display: none;
    align-items: center;
    gap: 8px;
}
.poesia-tts-controls--visible { display: flex; }

.poesia-tts-ctrl-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--bp-text-muted, #666);
    white-space: nowrap;
}

.poesia-tts-slider {
    width: 90px;
    cursor: pointer;
    accent-color: var(--bp-primary, #F78B1E);
}

.poesia-tts-ctrl-val {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bp-primary, #F78B1E);
    min-width: 32px;
}

.poesia-tts-pulse {
    font-size: 1.1rem;
    animation: tts-pulse 1.2s ease-in-out infinite;
}

@keyframes tts-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.2); }
}

/* Dark mode */
[data-theme="dark"] .poesia-tts-ctrl-label   { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .poesia-tts-progress-wrap { background: rgba(255,255,255,0.15); }

/* ══════════════════════════════════════════════════════════════
   MEMORIZZAZIONE POESIE
   ══════════════════════════════════════════════════════════════ */

/* Lista stile puntato nei metodi */
.memorize-list {
    margin: 0.5rem 0 0.5rem 1.1rem;
    padding: 0;
    list-style: disc;
}
.memorize-list li {
    margin-bottom: 0.35rem;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--bp-text, #333);
}

/* Nota in calce alle card */
.memorize-note {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--bp-text-muted, #666);
    border-left: 3px solid var(--bp-primary, #F78B1E);
    padding-left: 0.6rem;
}

/* Piano 5 giorni */
.memorize-plan {
    background: var(--bp-surface-alt, #fff8f0);
    border: 1.5px solid var(--bp-primary, #F78B1E);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
}
.memorize-plan-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--bp-primary, #F78B1E);
    margin-bottom: 1.1rem;
}
.memorize-plan-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.memorize-plan-step {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0.75rem;
    align-items: start;
}
.memorize-plan-day {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--bp-primary, #F78B1E);
    background: rgba(247,139,30,0.12);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    text-align: center;
    line-height: 1.4;
}
.memorize-plan-action {
    font-size: 0.91rem;
    line-height: 1.55;
    color: var(--bp-text, #333);
}

/* Dark mode */
[data-theme="dark"] .memorize-plan              { background: rgba(247,139,30,0.07); border-color: rgba(247,139,30,0.4); }
[data-theme="dark"] .memorize-list li           { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .memorize-note              { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .memorize-plan-action       { color: rgba(255,255,255,0.85); }

@media (max-width: 600px) {
    .memorize-plan-step { grid-template-columns: 1fr; }
    .memorize-plan-day  { text-align: left; width: fit-content; }
}

/* ══════════════════════════════════════════════════════
   COMPONIMENTI — Card Grid Index
   ══════════════════════════════════════════════════════ */

.poesie-gruppo {
    margin-bottom: 2.5rem;
}

.poesie-gruppo-titolo {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ita-accent, #c0392b);
    border-bottom: 2px solid var(--ita-accent, #c0392b);
    padding-bottom: .35rem;
    margin-bottom: 1rem;
}

.poesie-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.poesia-index-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    border: 1.5px solid rgba(192,57,43,.18);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    cursor: pointer;
}

.poesia-index-card:hover {
    border-color: var(--ita-accent, #c0392b);
    box-shadow: 0 4px 18px rgba(192,57,43,.12);
    transform: translateY(-2px);
}

.poesia-index-card-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.poesia-index-card-body {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    flex: 1;
}

.poesia-index-card-titolo {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
}

.poesia-index-card-anno {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ita-accent, #c0392b);
}

.poesia-index-card-raccolta {
    font-size: .76rem;
    font-style: italic;
    color: #666;
}

.poesia-index-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .3rem;
}

.poesia-index-card-cta {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ita-accent, #c0392b);
    align-self: flex-end;
    margin-top: .2rem;
}

/* Dark mode */
[data-theme="dark"] .poesia-index-card               { background: rgba(255,255,255,.04); border-color: rgba(192,57,43,.3); }
[data-theme="dark"] .poesia-index-card:hover         { border-color: var(--ita-accent, #c0392b); box-shadow: 0 4px 18px rgba(192,57,43,.2); }
[data-theme="dark"] .poesia-index-card-titolo        { color: rgba(255,255,255,.92); }
[data-theme="dark"] .poesia-index-card-raccolta      { color: rgba(255,255,255,.5); }

@media (max-width: 600px) {
    .poesie-card-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   Log Viewer — Global Styles
   ============================================================ */

/* --- Panel positioning: floating --- */
.mud-paper.log-viewer-expanded {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 600px;
    max-width: 90vw;
    z-index: 9999;
    background-color: #1e1e1e;
    color: #d4d4d4;
    display: flex;
    flex-direction: column;
}

.mud-paper.log-viewer-minimized {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 250px;
    z-index: 9999;
    background-color: #252526;
    color: #d4d4d4;
}

/* --- Panel positioning: docked to bottom --- */
.mud-paper.log-viewer-docked {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 320px;
    z-index: 9999;
    background-color: #1e1e1e;
    color: #d4d4d4;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

/* On desktop: docked panel sits right of the sidebar */
@media (min-width: 641px) {
    .mud-paper.log-viewer-docked {
        left: 250px;
        right: 0;
    }
}

/* --- Drag handle --- */
.log-viewer-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    cursor: grab;
    background-color: #333333;
    border-radius: 4px 4px 0 0;
    color: #808080;
    user-select: none;
}

.log-viewer-drag-handle:active {
    cursor: grabbing;
}

/* --- Resize handles (8 directions) --- */
.lv-resize-n, .lv-resize-ne, .lv-resize-e, .lv-resize-se,
.lv-resize-s, .lv-resize-sw, .lv-resize-w, .lv-resize-nw {
    position: absolute;
    z-index: 10;
}

.lv-resize-n  { top: 0; left: 6px; right: 6px; height: 5px; cursor: n-resize; }
.lv-resize-s  { bottom: 0; left: 6px; right: 6px; height: 5px; cursor: s-resize; }
.lv-resize-e  { top: 6px; right: 0; bottom: 6px; width: 5px; cursor: e-resize; }
.lv-resize-w  { top: 6px; left: 0; bottom: 6px; width: 5px; cursor: w-resize; }
.lv-resize-ne { top: 0; right: 0; width: 10px; height: 10px; cursor: ne-resize; }
.lv-resize-nw { top: 0; left: 0; width: 10px; height: 10px; cursor: nw-resize; }
.lv-resize-se { bottom: 0; right: 0; width: 10px; height: 10px; cursor: se-resize; }
.lv-resize-sw { bottom: 0; left: 0; width: 10px; height: 10px; cursor: sw-resize; }

/* Docked mode: only top resize, full width */
.mud-paper.log-viewer-docked .lv-resize-n {
    left: 0;
    right: 0;
    height: 5px;
    cursor: n-resize;
}

.mud-toolbar.log-viewer-toolbar {
    min-height: 40px;
    background-color: #252526;
    color: #d4d4d4;
}

.mud-paper.log-viewer-filters {
    background-color: #2d2d30;
    color: #d4d4d4;
}

/* --- Content area --- */
.mud-paper.log-viewer-content {
    flex: 1;
    max-height: 400px;
    overflow-y: auto;
    background-color: #1e1e1e;
    color: #d4d4d4;
}

.mud-paper.log-viewer-docked .mud-paper.log-viewer-content {
    max-height: none;
}

/* --- Log entry --- */
.log-entry {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.75rem;
    word-break: break-all;
}

.log-timestamp {
    color: #808080;
}

.log-category {
    color: #569cd6;
}

.log-exception {
    color: #f48771;
    margin-top: 4px;
}

.log-stacktrace {
    font-size: 0.7rem;
    margin-top: 4px;
    color: #ce9178;
}

.log-empty-text {
    color: #808080;
}

/* --- Row backgrounds by severity --- */
.mud-list-item.log-item-critical {
    background-color: #5c2d2d;
}

.mud-list-item.log-item-error {
    background-color: #3d2828;
}

.mud-list-item.log-item-warning {
    background-color: #3d3528;
}

/* --- Level label colors --- */
.log-level-trace {
    color: #808080;
}

.log-level-debug {
    color: #b5cea8;
}

.log-level-info {
    color: #4ec9b0;
}

.log-level-warning {
    color: #dcdcaa;
}

.log-level-error {
    color: #f48771;
}

.log-level-critical {
    color: #f14c4c;
}

.log-level-default {
    color: #d4d4d4;
}
/* ============================================================
   Mathematics Section — Global Styles
   ============================================================ */

/* ── Hub overview page ─────────────────────────────────────── */
/* (Moved to subject-hub.css — shared component) */

/* ── Geometry hub cards ────────────────────────────────────── */
.geo-hub-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 12px;
    transition: box-shadow 0.2s;
}

.geo-hub-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* --- Topic mode tabs (Teoria / Esercizi) --- */
.math-topic-tabs {
    display: flex;
    gap: 8px;
}

.math-topic-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border-radius: 24px;
    border: 2px solid #1565c0;
    color: #1565c0;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    background: transparent;
}

.math-topic-tab:hover {
    background: #e3f2fd;
    text-decoration: none;
    color: #1565c0;
}

.math-topic-tab--active {
    background: #1565c0;
    color: white;
}

.math-topic-tab--active:hover {
    background: #1976d2;
    color: white;
}

/* --- Topic hub card (MudCard — inner pages) --- */
.math-topic-card {
    border-radius: 16px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.math-topic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

/* --- Explanation card --- */
.math-explanation-card {
    border-radius: 12px !important;
    border: 1px solid #e0e0e0 !important;
}

/* .math-description, .math-result-card, .math-result-header → moved to subject-pages.css as .topic-description, .result-card, .result-header */

/* --- Number badge (blue pill) --- */
.math-number-badge {
    display: inline-block;
    background-color: #2196F3;
    color: white;
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* --- Factor highlight (green bold) --- */
.math-factor-highlight {
    color: #2e7d32;
    font-weight: 700;
}

/* --- Steps table --- */
.math-steps-table {
    font-size: 0.9rem;
}

.math-yes {
    color: #2e7d32;
    font-weight: 600;
}

.math-no {
    color: #c62828;
}

/* --- Build list (LCM/GCD construction) --- */
.math-build-list {
    list-style: none;
    padding-left: 8px;
    margin: 0;
}

.math-build-list li {
    padding: 4px 0;
    font-size: 0.95rem;
}

.math-build-list li::before {
    content: "▸ ";
    color: #1E88E5;
    font-weight: 700;
}

/* .math-steps-list → moved to subject-pages.css as .steps-list */
/* fraction-specific child selectors kept here */
.steps-list .fraction-inline {
    margin: 0 2px;
}

.steps-list .fraction-num,
.steps-list .fraction-den {
    font-size: 0.9rem;
}

.steps-list .fraction-stack {
    line-height: 1.1;
}

/* --- Fraction display --- */
.fraction-visual-container {
    display: inline-block;
    text-align: center;
}

.fraction-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.fraction-text-below {
    margin-top: 4px;
}

.fraction-inline {
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
}

.fraction-formula .fraction-num,
.fraction-formula .fraction-den {
    font-size: 1.5rem;
}

.fraction-formula .fraction-bar {
    min-width: 28px;
    height: 2.5px;
}

.fraction-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    vertical-align: middle;
}

.fraction-num {
    font-weight: 700;
    font-size: 1.1rem;
}

.fraction-bar {
    display: block;
    width: 100%;
    min-width: 20px;
    height: 2px;
    background-color: #333;
    margin: 2px 0;
}

.fraction-den {
    font-weight: 700;
    font-size: 1.1rem;
}

.math-op-symbol {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1565c0;
    margin: 0 8px;
    vertical-align: middle;
}

/* --- Expression formatted preview --- */
.math-expression-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 16px;
    background-color: #f5f5f5;
    border-radius: 8px;
    border: 1px dashed #bdbdbd;
    margin-bottom: 12px;
    min-height: 52px;
}

.math-expression-preview .fraction-num,
.math-expression-preview .fraction-den {
    font-size: 1.1rem;
}

.math-expression-preview .math-op-symbol {
    font-size: 1.4rem;
}

/* --- Primes card & stats header --- */
.math-primes-card {
    border-radius: 12px !important;
    overflow: hidden;
}

.math-primes-stats {
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
    color: white;
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 16px;
    font-size: 0.9rem;
}

/* --- Primes flex grid --- */
.math-primes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 16px;
}

.math-prime-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 5px 6px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-align: center;
}

.math-prime-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

@media (max-width: 600px) {
    .math-primes-grid {
        gap: 6px;
        padding: 10px;
    }

    .math-prime-cell {
        min-width: 32px;
        padding: 4px 5px;
        font-size: 0.78rem;
    }

    .math-primes-stats {
        gap: 8px;
        padding: 10px 12px;
        font-size: 0.8rem;
    }
}

@media (max-width: 380px) {
    .math-primes-grid {
        gap: 4px;
        padding: 8px;
    }

    .math-prime-cell {
        min-width: 28px;
        padding: 3px 4px;
        font-size: 0.72rem;
    }
}

/* ============================================================
   Tabelline — Material Design card layout
   ============================================================ */

.math-tab-card {
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    height: 100%;
}

.math-tab-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #37474f;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.math-tab-row {
    font-size: 0.95rem;
    padding: 2px 0;
    color: #37474f;
}

.math-tab-result {
    font-weight: 700;
    color: #c62828;
}

/* Material Design lighten-4 background colors */
.math-tab-card-1  { background-color: #FFCDD2; }
.math-tab-card-2  { background-color: #F8BBD0; }
.math-tab-card-3  { background-color: #E1BEE7; }
.math-tab-card-4  { background-color: #D1C4E9; }
.math-tab-card-5  { background-color: #C5CAE9; }
.math-tab-card-6  { background-color: #BBDEFB; }
.math-tab-card-7  { background-color: #B3E5FC; }
.math-tab-card-8  { background-color: #B2EBF2; }
.math-tab-card-9  { background-color: #B2DFDB; }
.math-tab-card-10 { background-color: #C8E6C9; }

/* ============================================================
   Divisione in colonna — Long Division
   ============================================================ */

.math-ld-svg-wrapper {
    overflow-x: auto;
}

/* Prime cell colors by ROW index (Material Design gradients, cycling every 10 rows) */
.math-prime-row-0 { background: linear-gradient(135deg, #ef5350, #e53935); }
.math-prime-row-1 { background: linear-gradient(135deg, #ec407a, #d81b60); }
.math-prime-row-2 { background: linear-gradient(135deg, #ab47bc, #8e24aa); }
.math-prime-row-3 { background: linear-gradient(135deg, #7e57c2, #5e35b1); }
.math-prime-row-4 { background: linear-gradient(135deg, #5c6bc0, #3949ab); }
.math-prime-row-5 { background: linear-gradient(135deg, #42a5f5, #1e88e5); }
.math-prime-row-6 { background: linear-gradient(135deg, #26c6da, #00acc1); }
.math-prime-row-7 { background: linear-gradient(135deg, #26a69a, #00897b); }
.math-prime-row-8 { background: linear-gradient(135deg, #66bb6a, #43a047); }
.math-prime-row-9 { background: linear-gradient(135deg, #ffa726, #fb8c00); }

/* ============================================================
   Tabelline — Quiz interattivo
   ============================================================ */

.math-quiz-card {
    border-radius: 14px;
    padding: 24px 26px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    height: 100%;
}

.math-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1rem;
    color: #37474f;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.math-quiz-score {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.85rem;
}

.math-quiz-question {
    font-size: 2.4rem;
    font-weight: 800;
    text-align: center;
    color: #263238;
    letter-spacing: 2px;
    margin: 14px 0 16px;
}

.math-quiz-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.math-quiz-input-row > :first-child {
    flex: 1;
}

.math-quiz-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.math-quiz-reveal {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    color: #37474f;
    padding: 16px 0;
}

.math-quiz-reveal-num {
    color: #c62828;
    font-size: 2.2rem;
}

.math-tab-row-active {
    background-color: rgba(0, 0, 0, 0.10);
    border-radius: 6px;
    font-weight: 700;
}

.math-tab-result-highlight {
    color: #1565c0 !important;
    font-size: 1.1rem;
}

/* ============================================================
   Tabelline — Countdown auto-avanzamento
   ============================================================ */

.math-quiz-countdown {
    text-align: center;
    font-size: 0.85rem;
    color: #78909c;
    margin-top: 8px;
    letter-spacing: 0.3px;
}

/* ============================================================
   Tabelline — Storico sessione
   ============================================================ */

.math-history-card {
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    background: #fff;
}

.math-history-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #37474f;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.math-history-stat {
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 12px;
    padding: 2px 10px;
}

.math-history-correct-stat {
    background: #e8f5e9;
    color: #2e7d32;
}

.math-history-wrong-stat {
    background: #ffebee;
    color: #c62828;
}

.math-history-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.math-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
    padding: 2px 9px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: default;
    white-space: nowrap;
}

.math-badge-ok {
    background: #c8e6c9;
    color: #1b5e20;
}

.math-badge-ko {
    background: #ffcdd2;
    color: #b71c1c;
}

.math-badge-reveal {
    background: #e3f2fd;
    color: #1565c0;
}

/* ============================================================
   Tabelline — Schermata risultato sfida
   ============================================================ */

.math-challenge-result {
    text-align: center;
    padding: 20px 8px 12px;
}

.math-challenge-emoji {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 8px;
}

.math-challenge-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: #263238;
    margin-bottom: 6px;
}

.math-challenge-score {
    font-size: 1.05rem;
    color: #546e7a;
    margin-bottom: 4px;
}

/* ============================================================
   Tabelline — Numpad mobile
   ============================================================ */

.math-numpad {
    display: none;
}

.math-numpad-display {
    font-size: 2.2rem;
    font-weight: 800;
    text-align: center;
    color: #263238;
    letter-spacing: 4px;
    padding: 4px 0 12px;
    min-height: 2.8rem;
}

.math-numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 280px;
    margin: 0 auto;
}

.math-numpad-btn {
    height: 60px;
    font-size: 1.5rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    background: #eceff1;
    color: #263238;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.08s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.math-numpad-btn:active {
    background: #cfd8dc;
    transform: scale(0.93);
}

.math-numpad-del {
    background: #fff3e0;
    color: #e65100;
}

.math-numpad-del:active {
    background: #ffe0b2;
}

.math-numpad-ok {
    background: #e3f2fd;
    color: #1565c0;
    font-size: 1.3rem;
}

.math-numpad-ok:active {
    background: #bbdefb;
}

.math-numpad-ok:disabled {
    opacity: 0.38;
    cursor: default;
}

@media (max-width: 600px) {
    .math-numpad {
        display: block;
    }

    .math-quiz-input-row {
        display: none;
    }
}

/* ============================================================
   Geometria — Shapes + hover glow
   ============================================================ */

.geo-tabs {
    border-radius: 10px;
    overflow: hidden;
}

.geo-shape-card {
    background: white;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
    transition: box-shadow 0.25s ease;
    height: 100%;
}

.geo-shape-card:hover {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
}

.geo-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #455a64;
    margin-bottom: 12px;
}

/* Compact hint text inside problem cards — override the 32px global bottom margin */
.geo-shape-card .exercise-hint {
    margin-bottom: 10px;
}

.geo-svg-wrapper {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #f8f9fa;
}

.geo-svg-wrapper svg {
    width: 100%;
    height: auto;
    display: block;
}

/* SVG base classes */
.geo-svg {
    display: block;
}

.geo-area {
    fill: rgba(200, 230, 255, 0.65);
    transition: fill 0.25s ease, filter 0.25s ease;
}

.geo-perimeter {
    stroke: #90a4ae;
    stroke-width: 2;
    transition: stroke 0.25s ease, stroke-width 0.25s ease, filter 0.25s ease;
}

.geo-dim-label {
    font-family: Arial, sans-serif;
    font-size: 11px;
    fill: #546e7a;
    pointer-events: none;
}

/* Hover glow effects — pure CSS, no JS */
.geo-shape-card:hover .geo-area {
    fill: rgba(100, 181, 246, 0.55);
    filter: drop-shadow(0 0 8px rgba(30, 136, 229, 0.45));
}

.geo-shape-card:hover .geo-perimeter {
    stroke: #ffd700;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.85));
}

.geo-inputs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.geo-inputs-row > * {
    flex: 1;
    min-width: 120px;
}

.geo-result-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.geo-result-item {
    flex: 1;
    min-width: 130px;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.geo-result-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.geo-result-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.75;
}

.geo-result-value {
    font-size: 0.92rem;
    font-weight: 700;
}

.geo-result-blue   { background: #e3f2fd; color: #1565c0; }
.geo-result-gold   { background: #fff8e1; color: #e65100; }
.geo-result-teal   { background: #e0f2f1; color: #00695c; }

/* Neon hover via :has() — highlights SVG area or perimeter on badge hover */
.geo-shape-card:has(.geo-result-blue:hover) .geo-area {
    fill: rgba(30, 136, 229, 0.65);
    filter: drop-shadow(0 0 8px #4fc3f7) drop-shadow(0 0 18px #29b6f6);
}

.geo-shape-card:has(.geo-result-blue:hover) .geo-perimeter {
    stroke: #90a4ae;
    filter: none;
}

.geo-shape-card:has(.geo-result-gold:hover) .geo-perimeter {
    stroke: #ffd700;
    stroke-width: 3;
    filter: drop-shadow(0 0 6px #ffd700) drop-shadow(0 0 16px #ffb300);
}

.geo-shape-card:has(.geo-result-gold:hover) .geo-area {
    fill: rgba(200, 230, 255, 0.25);
    filter: none;
}

.geo-shape-card:has(.geo-result-teal:hover) .geo-perimeter {
    stroke: #80cbc4;
    stroke-width: 3;
    filter: drop-shadow(0 0 6px #80cbc4) drop-shadow(0 0 14px #26a69a);
}

/* Formula pills in explanation */
.geo-formula-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
}

.geo-formula-icon { font-size: 1.3rem; }

.geo-pill-blue   { background: #e3f2fd; color: #1565c0; }
.geo-pill-green  { background: #e8f5e9; color: #2e7d32; }
.geo-pill-orange { background: #fff3e0; color: #e65100; }
.geo-pill-purple { background: #f3e5f5; color: #6a1b9a; }

/* Section heading inside the theory formula reference */
.geo-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #37474f;
    border-left: 4px solid #1565c0;
    padding: 4px 10px;
    margin: 20px 0 10px;
    background: #f5f9ff;
    border-radius: 0 6px 6px 0;
}

/* Compact formula reference table */
.geo-formula-table {
    font-size: 0.82rem;
    border-radius: 8px;
    overflow: hidden;
}

.geo-formula-table thead th {
    background: #f0f4ff !important;
    font-weight: 700;
    color: #1a237e;
    white-space: nowrap;
}

.geo-formula-table tbody td {
    vertical-align: top;
    padding: 5px 8px !important;
    line-height: 1.5;
}

.geo-formula-table tbody tr:nth-child(odd) td {
    background: #fafafa;
}

/* ── Exercise cards — horizontal layout (figure left, text right) ───────── */

.geo-exercise-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    background: white;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
    transition: box-shadow 0.25s ease;
}

.geo-exercise-card:hover {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
}

.geo-card-figure {
    flex: 0 0 220px;
    max-width: 220px;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
}

.geo-card-body {
    flex: 1;
    min-width: 0;
}

.geo-exercise-card .geo-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #455a64;
    margin-bottom: 8px;
}

.geo-exercise-card .exercise-hint {
    margin-bottom: 10px;
}

/* Hover glow on exercise cards */
.geo-exercise-card:hover .geo-area {
    fill: rgba(100, 181, 246, 0.55);
    filter: drop-shadow(0 0 8px rgba(30, 136, 229, 0.45));
}

.geo-exercise-card:hover .geo-perimeter {
    stroke: #ffd700;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.85));
}

@media (max-width: 700px) {
    .geo-exercise-card {
        flex-direction: column;
    }

    .geo-card-figure {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
}

/* ── Theory shape cards (Explanation pages) ─────────────────────────────── */

.geo-theory-card {
    background: white;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    transition: box-shadow 0.25s ease;
}

.geo-theory-card .geo-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #37474f;
    margin-bottom: 10px;
    grid-column: 1 / -1;
}

/* Inner wrapper so title spans full width above figure+formulas */
.geo-theory-card {
    flex-wrap: wrap;
}

.geo-theory-card > .geo-card-title {
    flex: 0 0 100%;
}

.geo-theory-card > .geo-theory-figure {
    flex: 0 0 auto;
    width: 220px;
}

.geo-theory-card > .geo-theory-formulas {
    flex: 1 1 0;
    min-width: 200px;
}

.geo-theory-card:hover {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
}

.geo-theory-note {
    font-size: 0.92rem;
    color: #455a64;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 600px) {
    .geo-theory-card {
        flex-direction: column;
    }
    .geo-theory-card > .geo-theory-figure {
        width: 100%;
    }
}

.geo-theory-figure {
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
}

.geo-theory-figure svg {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
}

.geo-theory-card:hover .geo-area {
    fill: rgba(100, 181, 246, 0.55);
    filter: drop-shadow(0 0 8px rgba(30, 136, 229, 0.45));
}

.geo-theory-card:hover .geo-perimeter {
    stroke: #ffd700;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.85));
}

.geo-theory-formulas {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.geo-formula-box {
    flex: 1;
    min-width: 90px;
    border-radius: 7px;
    padding: 5px 9px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.geo-formula-label {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.72;
}

.geo-formula-value {
    font-size: 0.85rem;
    font-weight: 700;
}

.geo-formula-note {
    font-size: 0.72rem;
    opacity: 0.82;
    margin-top: 1px;
    font-style: italic;
}

/* Theorem pills — improved */
.geo-theorem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.geo-theorem-pill {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    border: 1px solid rgba(0,0,0,0.07);
}

.geo-theorem-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.geo-pill-teal   { background: #e0f2f1; color: #00695c; }

/* ============================================================
   Insiemi — Sets page
   ============================================================ */

/* Theme color variables per operation */
.math-set-theme-union  { --col-a: #FF6B6B; --col-b: #4ECDC4; }
.math-set-theme-inter  { --col-a: #95E1D3; --col-b: #F38181; }
.math-set-theme-diff   { --col-a: #AA96DA; --col-b: #FCBAD3; }
.math-set-theme-member { --col-a: #FFD93D; --col-b: #6BCB77; }
.math-set-theme-subset { --col-a: #A8E6CF; --col-b: #FF8B94; }

.math-set-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
    background: white;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
}

.math-set-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.math-set-card-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: linear-gradient(135deg, color-mix(in srgb, var(--col-a) 25%, white), color-mix(in srgb, var(--col-b) 20%, white));
}

.math-set-card-symbol {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--col-a, #666);
    line-height: 1;
}

.math-set-op-name {
    font-weight: 700;
    font-size: 1rem;
    color: #37474f;
}

.math-set-op-desc {
    font-size: 0.78rem;
    color: #607d8b;
    margin-top: 2px;
}

.math-set-two-sets {
    display: flex;
    gap: 16px;
    padding: 16px 20px 12px;
    flex: 1;
}

.math-set-box {
    flex: 1;
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 0;
}

.math-set-box-a {
    border: 2px solid var(--col-a, #aaa);
    background: color-mix(in srgb, var(--col-a) 12%, white);
}

.math-set-box-b {
    border: 2px solid var(--col-b, #aaa);
    background: color-mix(in srgb, var(--col-b) 12%, white);
}

.math-set-box-a-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--col-a, #666);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.math-set-box-b-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--col-b, #666);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.math-set-op-center {
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: #455a64;
    padding: 0 2px;
}

.math-set-emoji {
    font-size: 1.1rem;
    line-height: 1.5;
}

.math-set-emoji-lg {
    font-size: 1.3rem;
}

.math-set-venn-container {
    padding: 4px 16px 8px;
}

.math-set-result-box {
    margin: 0 16px 14px;
    background: #f1f8e9;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #33691e;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Per-operation result box highlight */
.math-set-result-union  { background: color-mix(in srgb, #FF6B6B 18%, white); border: 2px solid #FF6B6B; color: #b71c1c; }
.math-set-result-inter  { background: color-mix(in srgb, #FFD700 20%, white); border: 2px solid #e6b800; color: #7a5500; }
.math-set-result-diff   { background: color-mix(in srgb, #AA96DA 20%, white); border: 2px solid #AA96DA; color: #4527a0; }
.math-set-result-member { background: color-mix(in srgb, #FFD93D 20%, white); border: 2px solid #FFD93D; color: #7a5500; }
.math-set-result-subset { background: color-mix(in srgb, #A8E6CF 25%, white); border: 2px solid #A8E6CF; color: #1b5e20; }

.math-set-emoji-result {
    font-size: 1.4rem;
    line-height: 1.4;
    filter: drop-shadow(0 0 3px currentColor);
}

/* Operation badge (explanation section) */
.math-set-op-badge {
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: color-mix(in srgb, var(--col-a) 15%, white);
    border: 1.5px solid color-mix(in srgb, var(--col-a) 40%, transparent);
    transition: transform 0.15s ease;
}

.math-set-op-badge:hover {
    transform: translateY(-2px);
}

.math-set-badge-symbol {
    font-size: 2rem;
    font-weight: 800;
    color: var(--col-a, #555);
    min-width: 36px;
    text-align: center;
}

/* ============================================================
   Algebra — First degree equations
   ============================================================ */

.alg-rule-card {
    border-radius: 14px;
    padding: 20px 22px;
    height: 100%;
}

.alg-rule-title {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.alg-rule-body {
    font-size: 0.85rem;
    margin-bottom: 12px;
    opacity: 0.85;
}

.alg-rule-example {
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    padding: 8px 12px;
}

.alg-theory-steps {
    margin: 12px 0 0 0;
    padding-left: 20px;
    font-size: 0.8rem;
    opacity: 0.9;
    line-height: 1.7;
}

.alg-theory-steps li {
    margin-bottom: 5px;
}

/* ─── Theory card: stacked fraction in example box ─── */
.alg-rule-example-frac {
    font-family: inherit;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px;
}

.alg-rule-example-frac .fraction-num,
.alg-rule-example-frac .fraction-den {
    font-size: 0.88rem;
}

.alg-rule-example-frac .fraction-bar {
    background-color: currentColor;
}

.alg-rule-example-frac .math-op-symbol {
    color: currentColor;
    font-size: 0.95rem;
    margin: 0 2px;
}

/* ─── Theory card: stacked fraction inside body text ─── */
.alg-rule-body .fraction-num,
.alg-rule-body .fraction-den {
    font-size: 0.85rem;
}

.alg-rule-body .fraction-bar {
    background-color: currentColor;
}

.alg-rule-blue   { background: #e3f2fd; color: #1565c0; }
.alg-rule-green  { background: #e8f5e9; color: #2e7d32; }
.alg-rule-orange { background: #fff3e0; color: #e65100; }
.alg-rule-purple { background: #f3e5f5; color: #6a1b9a; }

.alg-equation-card {
    background: white;
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
    height: 100%;
}

.alg-eq-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1rem;
    color: #455a64;
    margin-bottom: 18px;
}

.alg-eq-icon { font-size: 1.4rem; }

.alg-eq-display {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    text-align: center;
    color: #1565c0;
    background: #e3f2fd;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
    letter-spacing: 1px;
}

.alg-eq-display-lg {
    font-size: 2.2rem;
    margin-bottom: 8px;
}

.alg-eq-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.alg-eq-inputs > * {
    flex: 1;
    min-width: 110px;
}

.alg-eq-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alg-steps-card {
    background: white;
    border-radius: 14px;
    padding: 24px 26px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
}

.alg-steps-header {
    font-weight: 700;
    font-size: 1rem;
    color: #455a64;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.alg-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alg-step-item {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 10px 14px;
    color: #37474f;
}

.alg-step-solution {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    background: #e8f5e9;
    border-radius: 8px;
    padding: 12px 16px;
    color: #2e7d32;
}

.alg-verify-box {
    margin-top: 16px;
    background: #fff3e0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #e65100;
    font-family: 'Courier New', monospace;
}

.alg-verify-ok {
    color: #2e7d32;
    font-weight: 700;
    margin-left: 4px;
}

.alg-steps-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    background: #fafafa;
    border-radius: 14px;
    border: 2px dashed #e0e0e0;
    padding: 20px;
    text-align: center;
}

.alg-quiz-card {
    background: white;
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
}

.alg-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1rem;
    color: #455a64;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.alg-quiz-score {
    background: #e3f2fd;
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 0.85rem;
    color: #1565c0;
}

.alg-quiz-prompt {
    font-size: 0.9rem;
    color: #607d8b;
    text-align: center;
    margin-bottom: 12px;
}

.alg-quiz-input-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 6px;
}

.alg-quiz-input-row > :first-child {
    flex: 1;
}

.math-kbd-hint {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-family: monospace;
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 4px;
    vertical-align: middle;
    opacity: 0.85;
}

/* ============================================================
   Algebra — extended color variants + new component classes
   ============================================================ */

/* Additional rule-card color variants */
.alg-rule-red    { background: #ffebee; color: #c62828; }
.alg-rule-teal   { background: #e0f2f1; color: #00695c; }
.alg-rule-indigo { background: #e8eaf6; color: #283593; }
.alg-rule-amber  { background: #fff8e1; color: #e65100; }

/* Section title used across all algebra sub-pages */
.alg-section-title {
    color: #BF360C !important;
    font-weight: 700;
}

/* Result badge (inline highlighted result) */
.alg-result-badge {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    border: 2px solid #a5d6a7;
    border-radius: 10px;
    padding: 10px 18px;
    font-family: 'Courier New', monospace;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}

/* Discriminant badge (quadratic) */
.alg-discriminant-badge {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 1rem;
}

.alg-disc-positive { background: #e8f5e9; color: #2e7d32; border: 2px solid #a5d6a7; }
.alg-disc-zero     { background: #fff3e0; color: #e65100; border: 2px solid #ffcc80; }
.alg-disc-negative { background: #ffebee; color: #c62828; border: 2px solid #ef9a9a; }

/* Systems page */
.alg-system-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.alg-system-sep {
    text-align: center;
    font-size: 1.2rem;
    color: #90a4ae;
    margin: 2px 0;
}

.alg-system-eq-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #90a4ae;
    flex-shrink: 0;
    min-width: 22px;
}

/* Chart / graph containers */
.alg-chart-card {
    background: white;
    border: 2px solid #FFE0B2;
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.alg-chart-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #BF360C;
    text-align: center;
    margin-bottom: 0.75rem;
}

.alg-parabola-svg {
    display: block;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 400 / 280;
    margin: 0 auto;
}

.alg-number-line-svg {
    display: block;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 420 / 80;
    margin: 0 auto;
}

.alg-svg-chart {
    display: block;
}

/* Polynomials analysis */
.alg-poly-analysis {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 14px 16px;
}

.alg-poly-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.alg-poly-table th {
    background: #fff3e0;
    color: #e65100;
    font-weight: 700;
    padding: 6px 10px;
    border-bottom: 2px solid #ffe0b2;
    text-align: left;
}

.alg-poly-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #f5f5f5;
    font-family: 'Courier New', monospace;
}

/* Error / impossible step */
.alg-step-impossible {
    background: #ffebee;
    color: #c62828;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.88rem;
    font-weight: 600;
}

/* Free-form input label + radio row */
.alg-custom-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #607d8b;
}

.alg-radio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #455a64;
    cursor: pointer;
}

/* .math-exercise-hint, .math-exercise-hint code → moved to subject-pages.css as .exercise-hint */

/* .math-exercise-action-bar, MudGrid alignment rules → moved to subject-pages.css as .exercise-action-bar */

/* ─── Percentuali & Esercizi misti ─── */
.math-mixed-exercise-card {
    border-radius: 12px !important;
    width: 100%;
}

.math-category-fraction {
    display: inline-block;
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.math-category-percent {
    display: inline-block;
    background: #fce4ec;
    color: #c2185b;
    border: 1px solid #f48fb1;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Global MudGrid alignment rule \u2192 moved to subject-pages.css */

/* ─── Frazioni equivalenti — side-by-side fraction layout ─── */
.frac-equiv-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.frac-equiv-display { display: flex; flex-direction: column; align-items: center; }
.frac-equiv-val { font-size: 2rem; font-weight: 800; color: #1565c0; line-height: 1.2; }
.frac-equiv-bar { width: 100%; min-width: 40px; height: 3px; background-color: #1565c0; margin: 6px 0; display: block; border-radius: 2px; }
.frac-equiv-input-stack { display: flex; flex-direction: column; align-items: stretch; min-width: 130px; max-width: 160px; }
.frac-equiv-input-stack .frac-equiv-bar { background-color: #546e7a; margin: 2px 0; }

/* ============================================================
   Cross-Simplification SVGs — theory card (animated) + exercise step
   ============================================================ */

/* ── CrossSimplificationSvg (theory, 14 s loop) ── */

.cs-theory-svg {
    width: 100%;
    max-width: 420px;
    display: block;
    margin: 12px auto;
}

.cs-frac-val {
    font-size: 22px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: auto;
}

.cs-frac-bar { stroke-width: 2; }

.cs-op {
    font-size: 24px;
    text-anchor: middle;
    dominant-baseline: middle;
    fill: #444;
}

.cs-gcd-lbl {
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
}

.cs-result-label { font-size: 14px; fill: #546e7a; dominant-baseline: middle; }
.cs-result-frac-num,
.cs-result-frac-den { font-size: 18px; font-weight: 700; text-anchor: middle; dominant-baseline: auto; }
.cs-result-frac-bar { stroke-width: 2; }
.cs-result-op { font-size: 18px; text-anchor: middle; dominant-baseline: middle; fill: #444; }
.cs-result-final { fill: #2e7d32 !important; font-weight: 800; }
.cs-result-final-bar { stroke: #2e7d32 !important; }

/* Diagonal lines */
.cs-diag1, .cs-diag2 {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 190;
}

/* Theory animations (14 s) */
.cs-diag1        { stroke: #e65100; stroke-dashoffset: 190; animation: cs-diag1-kf 14s infinite; }
.cs-diag2        { stroke: #00695c; stroke-dashoffset: 190; animation: cs-diag2-kf 14s infinite; }
.cs-gcd1-lbl     { fill: #e65100; opacity: 0; animation: cs-gcd1-kf 14s infinite; }
.cs-gcd2-lbl     { fill: #00695c; opacity: 0; animation: cs-gcd2-kf 14s infinite; }
.cs-n1o, .cs-d2o { fill: #e65100; animation: cs-orig1-kf 14s infinite; }
.cs-d1o, .cs-n2o { fill: #00695c; animation: cs-orig2-kf 14s infinite; }
.cs-n1n, .cs-d2n { fill: #e65100; opacity: 0; animation: cs-new1-kf 14s infinite; }
.cs-d1n, .cs-n2n { fill: #00695c; opacity: 0; animation: cs-new2-kf 14s infinite; }
.cs-result-grp   { opacity: 0; animation: cs-result-theory-kf 14s infinite; }

/* ── Theory keyframes (14 s cycle) ── */
/* Diagonal 1 draws: 1.5 s – 3.0 s = 10.7 % – 21.4 % */
@keyframes cs-diag1-kf {
    0%, 10.7% { stroke-dashoffset: 190; }
    21.4%, 100% { stroke-dashoffset: 0; }
}
/* Diagonal 2 draws: 6.0 s – 7.5 s = 42.9 % – 53.6 % */
@keyframes cs-diag2-kf {
    0%, 42.9% { stroke-dashoffset: 190; }
    53.6%, 100% { stroke-dashoffset: 0; }
}
/* GCD1 label: in 3.5 s – 4.5 s; out 12.5 s – 13.5 s */
@keyframes cs-gcd1-kf {
    0%, 25%    { opacity: 0; }
    32.1%      { opacity: 1; }
    89.3%      { opacity: 1; }
    96.4%, 100% { opacity: 0; }
}
/* GCD2 label: in 8.0 s – 9.0 s */
@keyframes cs-gcd2-kf {
    0%, 57.1% { opacity: 0; }
    64.3%     { opacity: 1; }
    89.3%     { opacity: 1; }
    96.4%, 100% { opacity: 0; }
}
/* Orig pair 1 dims: 3.5 s – 4.5 s; restores 12.5 s – 13.5 s */
@keyframes cs-orig1-kf {
    0%, 25%  { opacity: 1; }
    32.1%    { opacity: 0.3; }
    89.3%    { opacity: 0.3; }
    96.4%, 100% { opacity: 1; }
}
/* Orig pair 2 dims: 8.0 s – 9.0 s */
@keyframes cs-orig2-kf {
    0%, 57.1% { opacity: 1; }
    64.3%     { opacity: 0.3; }
    89.3%     { opacity: 0.3; }
    96.4%, 100% { opacity: 1; }
}
/* New pair 1 appears: 4.5 s – 5.5 s */
@keyframes cs-new1-kf {
    0%, 32.1% { opacity: 0; }
    39.3%     { opacity: 1; }
    89.3%     { opacity: 1; }
    96.4%, 100% { opacity: 0; }
}
/* New pair 2 appears: 9.0 s – 10.0 s */
@keyframes cs-new2-kf {
    0%, 64.3% { opacity: 0; }
    71.4%     { opacity: 1; }
    89.3%     { opacity: 1; }
    96.4%, 100% { opacity: 0; }
}
/* Result row appears: 10.5 s – 11.5 s */
@keyframes cs-result-theory-kf {
    0%, 75%  { opacity: 0; }
    82.1%    { opacity: 1; }
    89.3%    { opacity: 1; }
    96.4%, 100% { opacity: 0; }
}

/* ── FractionCrossStepSvg (exercise step, 5 s loop) ── */

.cs-step-svg {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 6px auto 0;
}

.cs-step-frac-val {
    font-size: 20px;
    font-weight: 700;
    dominant-baseline: auto;
}

.cs-step-op {
    font-size: 22px;
    fill: #444;
    dominant-baseline: middle;
}

.cs-step-gcd {
    font-size: 14px;
    font-weight: 700;
}

.cs-step-result-eq  { font-size: 20px; font-weight: 700; dominant-baseline: middle; }
.cs-step-result-num,
.cs-step-result-den { font-size: 16px; font-weight: 700; text-anchor: middle; dominant-baseline: auto; }

/* Step animations (5 s cycle) */
.cs-step-hidden     { opacity: 0 !important; }

.cs-step-diag-anim {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: cs-step-diag-kf 5s infinite;
}

.cs-step-orig-anim  { animation: cs-step-orig-kf 5s infinite; }

.cs-step-new-anim   { opacity: 0; animation: cs-step-new-kf 5s infinite; }

.cs-step-gcd-anim   { opacity: 0; animation: cs-step-gcd-kf 5s infinite; }

.cs-step-result-anim { opacity: 0; animation: cs-step-result-kf 5s infinite; }

/* ── Exercise step keyframes (5 s cycle) ── */
/* Diagonal draws: 0.5 s – 1.5 s = 10 % – 30 % */
@keyframes cs-step-diag-kf {
    0%, 10%  { stroke-dashoffset: 150; }
    30%, 100% { stroke-dashoffset: 0; }
}
/* GCD label: in 1.5 s – 2.2 s = 30 % – 44 %; out 4.2 s – 4.8 s = 84 % – 96 % */
@keyframes cs-step-gcd-kf {
    0%, 30%  { opacity: 0; }
    44%      { opacity: 1; }
    84%      { opacity: 1; }
    96%, 100% { opacity: 0; }
}
/* Orig dims: 1.5 s – 2.5 s = 30 % – 50 %; restores 4.2 s – 4.8 s */
@keyframes cs-step-orig-kf {
    0%, 30%  { opacity: 1; }
    50%      { opacity: 0.3; }
    84%      { opacity: 0.3; }
    96%, 100% { opacity: 1; }
}
/* New appears: 2.5 s – 3.2 s = 50 % – 64 %; hides 4.2 s – 4.8 s */
@keyframes cs-step-new-kf {
    0%, 50%  { opacity: 0; }
    64%      { opacity: 1; }
    84%      { opacity: 1; }
    96%, 100% { opacity: 0; }
}
/* Result row appears: 3.2 s – 3.8 s = 64 % – 76 %; hides 4.2 s – 4.8 s */
@keyframes cs-step-result-kf {
    0%, 64%  { opacity: 0; }
    76%      { opacity: 1; }
    84%      { opacity: 1; }
    96%, 100% { opacity: 0; }
}

/* ── step-with-visual layout (exercise steps list) ── */
.step-with-visual {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0 2px;
    list-style: none;
}

.step-cross-desc {
    font-size: 0.92rem;
    line-height: 1.5;
    padding-left: 4px;
}


/* ── Criteri di divisibilità — horizontal row layout ── */
.div-rules-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.div-rule-row {
    display: flex;
    align-items: center;
    gap: 20px;
    border-radius: 14px;
    padding: 18px 22px;
    border-left: 5px solid currentColor;
}

.div-rule-badge {
    font-size: 1.5rem;
    font-weight: 800;
    min-width: 60px;
    text-align: center;
    flex-shrink: 0;
}

.div-rule-content {
    flex: 1;
    min-width: 0;
}

.div-rule-name {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.div-rule-text {
    font-size: 0.88rem;
    line-height: 1.5;
    color: inherit;
}

.div-rule-example {
    font-size: 0.85rem;
    line-height: 1.7;
}

.div-ex-yes { color: #2e7d32; font-weight: 700; }
.div-ex-no  { color: #c62828; font-weight: 700; }

.div-rule-blue   { background: #e3f2fd; color: #1565c0; border-color: #1565c0; }
.div-rule-green  { background: #e8f5e9; color: #2e7d32; border-color: #2e7d32; }
.div-rule-orange { background: #fff3e0; color: #e65100; border-color: #e65100; }
.div-rule-indigo { background: #e8eaf6; color: #283593; border-color: #283593; }

/* ============================================================
   Angoli — angle section styles
   ============================================================ */

/* ── Angle theory cards ────────────────────────────────────── */

.angoli-card {
    border-top: 3px solid #1565C0;
}

.angoli-explanation .geo-section-title {
    margin: 8px 0 4px;
    padding: 3px 8px;
    font-size: 0.94rem;
}

.angoli-card-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.angoli-card-grid--five {
    display: flex;
}

.angoli-card-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.angoli-explanation .geo-theory-card {
    padding: 10px 12px;
    gap: 8px 10px;
    flex-wrap: wrap;
    align-items: flex-start;
    border-radius: 12px;
    min-height: 0;
}

.angoli-explanation .geo-theory-card > .geo-theory-figure {
    width: 96px;
    flex: 0 0 96px;
}

.angoli-explanation .geo-theory-figure svg {
    max-width: 96px;
}

.angoli-explanation .geo-theory-formulas {
    flex: 1 1 240px;
    gap: 6px;
    min-width: 0;
}

.angoli-explanation .geo-formula-box {
    flex: 1 1 140px;
    min-width: 120px;
    padding: 6px 8px;
    border-radius: 6px;
}

.angoli-explanation .geo-card-title {
    margin-bottom: 4px;
    font-size: 0.94rem;
}

.angoli-explanation .geo-formula-label,
.angoli-explanation .geo-formula-note,
.angoli-explanation .geo-formula-value {
    line-height: 1.35;
}

.angoli-explanation .geo-formula-label {
    font-size: 0.76rem;
}

.angoli-explanation .geo-formula-value {
    font-size: 0.9rem;
}

.angoli-explanation .geo-formula-note {
    font-size: 0.8rem;
}

.angoli-explanation .mud-alert {
    margin-bottom: 6px;
}

.angoli-card-compact {
    height: 100%;
    align-content: start;
    width: min(100%, 320px);
}

.angoli-card-compact .geo-card-title {
    min-height: 42px;
}

.angoli-card-compact .geo-theory-figure {
    width: 100%;
    flex: 0 0 100%;
    min-height: 180px;
}

.angoli-card-compact .geo-theory-figure svg {
    max-width: 210px;
}

.angoli-card-compact .geo-theory-formulas {
    flex-basis: 100%;
}

.angoli-card-compact .geo-formula-box {
    flex-basis: 100%;
}

.angoli-card-feature {
    width: min(100%, 360px);
}

.angoli-card-feature .geo-theory-figure {
    min-height: 160px;
}

.angoli-card-feature .geo-theory-figure svg {
    max-width: 220px;
}

.angoli-card-text {
    width: min(100%, 420px);
}

.angoli-card-table {
    width: min(100%, 420px);
}

.angoli-examples .geo-exercise-card {
    gap: 16px;
    padding: 18px;
}

.angoli-examples .steps-list {
    margin-bottom: 0;
}

.angoli-nullo  { border-top-color: #B0BEC5; }
.angoli-acuto  { border-top-color: #1565C0; }
.angoli-retto  { border-top-color: #2E7D32; }
.angoli-ottuso { border-top-color: #E65100; }
.angoli-piatto { border-top-color: #6A1B9A; }
.angoli-giro   { border-top-color: #F57F17; }

/* ── SVG figure area ──────────────────────────────────────── */

.angoli-figure-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: #F8F9FA;
    border-radius: 8px;
    gap: 4px;
}

.angoli-placeholder-icon {
    font-size: 1.5rem;
    font-weight: 800;
    color: #546E7A;
}

.angoli-placeholder-label {
    font-size: 0.9rem;
    color: #78909C;
}

/* ── Conversion table ─────────────────────────────────────── */

.angoli-conversion-table {
    background: white;
    border: 1px solid #BBDEFB;
    border-radius: 12px;
    padding: 7px;
    height: 100%;
}

.angoli-conv-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #1565C0;
    margin-bottom: 4px;
}

.angoli-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
}

.angoli-table th {
    background: #1565C0;
    color: white;
    padding: 2px 4px;
    text-align: center;
    font-weight: 700;
}

.angoli-table td {
    padding: 2px 4px;
    text-align: center;
    border-bottom: 1px solid #E3F2FD;
    color: #37474F;
}

.angoli-table tr:last-child td {
    border-bottom: none;
}

.angoli-row-blue   td { background: #E3F2FD; color: #1565C0; font-weight: 600; }
.angoli-row-green  td { background: #E8F5E9; color: #2E7D32; font-weight: 600; }
.angoli-row-purple td { background: #F3E5F5; color: #6A1B9A; font-weight: 600; }
.angoli-row-red    td { background: #FFEBEE; color: #B71C1C; font-weight: 600; }
.angoli-row-orange td { background: #FFF3E0; color: #E65100; font-weight: 600; }

.angoli-conv-formula {
    margin-top: 4px;
    font-size: 0.72rem;
    color: #37474F;
    background: #F8F9FA;
    border-radius: 6px;
    padding: 4px 6px;
    line-height: 1.3;
}

@media (max-width: 960px) {
    .angoli-explanation .geo-theory-card > .geo-theory-figure {
        width: 90px;
        flex-basis: 90px;
    }

    .angoli-explanation .geo-theory-figure svg {
        max-width: 90px;
    }
}

@media (max-width: 600px) {
    .angoli-explanation .geo-theory-card {
        padding: 10px;
        gap: 8px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .angoli-explanation .geo-theory-card > .geo-theory-figure {
        width: 100%;
        flex-basis: 100%;
    }

    .angoli-explanation .geo-theory-figure svg {
        max-width: 96px;
    }

    .angoli-card-compact .geo-theory-figure svg {
        max-width: 180px;
    }

    .angoli-card-feature .geo-theory-figure svg {
        max-width: 180px;
    }

    .angoli-explanation .geo-formula-box {
        min-width: 0;
        flex-basis: 100%;
    }

    .angoli-conversion-table {
        padding: 7px;
    }

    .angoli-table {
        font-size: 0.72rem;
    }

    .angoli-table th,
    .angoli-table td {
        padding: 2px 4px;
    }
}

.div-rule-amber  { background: #fff8e1; color: #b45309; border-color: #f9a825; }

@media (max-width: 640px) {
    .div-rule-row { flex-wrap: wrap; }
    .div-rule-example { max-width: 100%; }
}

/* ── Div7Svg — regola del 7 ─────────────────────────────────────────────── */
.div7-svg {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    border-radius: 10px;
    background: transparent;
    padding: 0;
}

/* Testo base — div7 */
.div7-digit    { font-size: 30px; font-weight: 800; dominant-baseline: auto; }
.div7-sub      { font-size: 11px; font-weight: 600; dominant-baseline: auto; }
.div7-tag      { font-size: 11px; font-weight: 700; dominant-baseline: auto; }
.div7-op-lbl   { font-size: 10px; font-weight: 600; dominant-baseline: auto; }
.div7-op       { font-size: 17px; font-weight: 700; dominant-baseline: auto; }
.div7-result   { font-size: 26px; font-weight: 900; dominant-baseline: auto; }
.div7-check    { font-size: 12px; font-weight: 600; dominant-baseline: auto; }
.div7-check-ok { font-size: 12px; font-weight: 700; dominant-baseline: auto; }

/*
  Animazioni cumulative — ciclo 8s:
  f1: 0→1s   compare e RESTA
  f2: 2→3s   compare e RESTA
  f3: 4→5s   compare e RESTA
  f4: 6→7s   compare e RESTA
  Tutti spariscono a 7.8s e il ciclo riparte.
*/
.div7-f1 { opacity: 0; animation: div7-f1-kf 8s infinite; }
.div7-f2 { opacity: 0; animation: div7-f2-kf 8s infinite; }
.div7-f3 { opacity: 0; animation: div7-f3-kf 8s infinite; }
.div7-f4 { opacity: 0; animation: div7-f4-kf 8s infinite; }

@keyframes div7-f1-kf {
    0%    { opacity: 0 }
    12%   { opacity: 1 }  /* compare a 1s/8s */
    96%   { opacity: 1 }  /* rimane fino a 7.7s */
    100%  { opacity: 0 }
}
@keyframes div7-f2-kf {
    0%    { opacity: 0 }
    28%   { opacity: 0 }  /* inizia a 2.2s */
    37%   { opacity: 1 }  /* compare a 3s */
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}
@keyframes div7-f3-kf {
    0%    { opacity: 0 }
    53%   { opacity: 0 }  /* inizia a 4.2s */
    62%   { opacity: 1 }  /* compare a 5s */
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}
@keyframes div7-f4-kf {
    0%    { opacity: 0 }
    78%   { opacity: 0 }  /* inizia a 6.2s */
    87%   { opacity: 1 }  /* compare a 7s */
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}

/* ── Div11Svg — regola dell'11 ──────────────────────────────────────────── */
.div11-svg {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    border-radius: 10px;
    background: transparent;
    padding: 0;
}

/* Testo base — div11 */
.div11-digit      { font-size: 30px; font-weight: 800; dominant-baseline: auto; }
.div11-odd        { fill: #2e7d32; }
.div11-even       { fill: #c62828; }
.div11-num-label  { font-size: 12px; font-weight: 600; dominant-baseline: auto; }
.div11-tag        { font-size: 10px; font-weight: 700; dominant-baseline: auto; }
.div11-sum        { font-size: 14px; font-weight: 700; dominant-baseline: auto; }
.div11-diff-label { font-size: 14px; font-weight: 700; dominant-baseline: auto; }
.div11-diff-val   { font-size: 20px; font-weight: 900; dominant-baseline: auto; }
.div11-check-ok   { font-size: 13px; font-weight: 700; dominant-baseline: auto; }

/*
  Animazioni cumulative — ciclo 10s:
  f1: 0→1.5s    compare e RESTA
  f2: 2.5→4s    compare e RESTA
  f3: 5→6.5s    compare e RESTA
  f4: 7.5→9s    compare e RESTA
  Tutti spariscono a 9.7s e il ciclo riparte.
*/
.div11-f1 { opacity: 0; animation: div11-f1-kf 10s infinite; }
.div11-f2 { opacity: 0; animation: div11-f2-kf 10s infinite; }
.div11-f3 { opacity: 0; animation: div11-f3-kf 10s infinite; }
.div11-f4 { opacity: 0; animation: div11-f4-kf 10s infinite; }

@keyframes div11-f1-kf {
    0%    { opacity: 0 }
    10%   { opacity: 1 }  /* compare a 1s */
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}
@keyframes div11-f2-kf {
    0%    { opacity: 0 }
    27%   { opacity: 0 }  /* inizia a 2.7s */
    35%   { opacity: 1 }  /* compare a 3.5s */
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}
@keyframes div11-f3-kf {
    0%    { opacity: 0 }
    52%   { opacity: 0 }  /* inizia a 5.2s */
    60%   { opacity: 1 }  /* compare a 6s */
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}
@keyframes div11-f4-kf {
    0%    { opacity: 0 }
    77%   { opacity: 0 }  /* inizia a 7.7s */
    85%   { opacity: 1 }  /* compare a 8.5s */
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}

/* ── Righe con SVG visivo (÷7, ÷11) ─────────────────────────────────────── */
.div-rule-has-svg {
    align-items: flex-start;
    flex-wrap: wrap;
}

.div-rule-svg-wrap {
    flex-shrink: 0;
    width: 220px;
}

@media (max-width: 640px) {
    .div-rule-svg-wrap {
        width: 100%;
    }
}

.div-rule-purple { background: #f3e5f5; color: #6a1b9a; border-color: #6a1b9a; }
.div-rule-teal   { background: #e0f2f1; color: #00695c; border-color: #00695c; }

/* ── Div13Svg — regola del 13 ─────────────────────────────────────────────── */
.div13-svg {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    border-radius: 10px;
    background: transparent;
    padding: 0;
}

.div13-digit    { font-size: 30px; font-weight: 800; dominant-baseline: auto; }
.div13-sub      { font-size: 11px; font-weight: 600; dominant-baseline: auto; }
.div13-tag      { font-size: 11px; font-weight: 700; dominant-baseline: auto; }
.div13-op-lbl   { font-size: 10px; font-weight: 600; dominant-baseline: auto; }
.div13-op       { font-size: 17px; font-weight: 700; dominant-baseline: auto; }
.div13-result   { font-size: 26px; font-weight: 900; dominant-baseline: auto; }
.div13-check    { font-size: 12px; font-weight: 600; dominant-baseline: auto; }
.div13-check-ok { font-size: 12px; font-weight: 700; dominant-baseline: auto; }

.div13-f1 { opacity: 0; animation: div13-f1-kf 8s infinite; }
.div13-f2 { opacity: 0; animation: div13-f2-kf 8s infinite; }
.div13-f3 { opacity: 0; animation: div13-f3-kf 8s infinite; }
.div13-f4 { opacity: 0; animation: div13-f4-kf 8s infinite; }

@keyframes div13-f1-kf {
    0%    { opacity: 0 }
    12%   { opacity: 1 }
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}
@keyframes div13-f2-kf {
    0%    { opacity: 0 }
    28%   { opacity: 0 }
    37%   { opacity: 1 }
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}
@keyframes div13-f3-kf {
    0%    { opacity: 0 }
    53%   { opacity: 0 }
    62%   { opacity: 1 }
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}
@keyframes div13-f4-kf {
    0%    { opacity: 0 }
    78%   { opacity: 0 }
    87%   { opacity: 1 }
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}

/* ── Div17Svg — regola del 17 ─────────────────────────────────────────────── */
.div17-svg {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    border-radius: 10px;
    background: transparent;
    padding: 0;
}

.div17-digit    { font-size: 30px; font-weight: 800; dominant-baseline: auto; }
.div17-sub      { font-size: 11px; font-weight: 600; dominant-baseline: auto; }
.div17-tag      { font-size: 11px; font-weight: 700; dominant-baseline: auto; }
.div17-op-lbl   { font-size: 10px; font-weight: 600; dominant-baseline: auto; }
.div17-op       { font-size: 17px; font-weight: 700; dominant-baseline: auto; }
.div17-result   { font-size: 26px; font-weight: 900; dominant-baseline: auto; }
.div17-check    { font-size: 12px; font-weight: 600; dominant-baseline: auto; }
.div17-check-ok { font-size: 12px; font-weight: 700; dominant-baseline: auto; }

.div17-f1 { opacity: 0; animation: div17-f1-kf 8s infinite; }
.div17-f2 { opacity: 0; animation: div17-f2-kf 8s infinite; }
.div17-f3 { opacity: 0; animation: div17-f3-kf 8s infinite; }
.div17-f4 { opacity: 0; animation: div17-f4-kf 8s infinite; }

@keyframes div17-f1-kf {
    0%    { opacity: 0 }
    12%   { opacity: 1 }
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}
@keyframes div17-f2-kf {
    0%    { opacity: 0 }
    28%   { opacity: 0 }
    37%   { opacity: 1 }
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}
@keyframes div17-f3-kf {
    0%    { opacity: 0 }
    53%   { opacity: 0 }
    62%   { opacity: 1 }
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}
@keyframes div17-f4-kf {
    0%    { opacity: 0 }
    78%   { opacity: 0 }
    87%   { opacity: 1 }
    96%   { opacity: 1 }
    100%  { opacity: 0 }
}

/* ── Sezione spiegazione matematica ─────────────────────────────────────── */
.div-math-insight {
    border-radius: 14px;
    padding: 20px 24px;
    background: #f5f5f5;
    border-left: 5px solid #455a64;
}

.div-math-insight-title {
    font-weight: 800;
    font-size: 1rem;
    color: #263238;
    margin-bottom: 10px;
}

.div-math-insight-intro {
    font-size: 0.88rem;
    color: #37474f;
    margin-bottom: 8px;
    line-height: 1.55;
}

.div-math-insight-footer {
    font-size: 0.85rem;
    color: #546e7a;
    line-height: 1.55;
}

.div-math-mod-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0;
}

.div-math-mod-row {
    display: flex;
    gap: 14px;
    align-items: baseline;
    font-size: 0.87rem;
}

.div-math-mod-key {
    font-weight: 700;
    font-family: monospace;
    color: #1565c0;
    min-width: 160px;
    flex-shrink: 0;
}

.div-math-mod-val {
    color: #37474f;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .div-math-mod-row { flex-direction: column; gap: 2px; }
    .div-math-mod-key { min-width: unset; }
}
/* ============================================================
   Memory Section — Global Styles
   ============================================================ */

/* ── Stats bar ──────────────────────────────────────────────── */
.memory-stats {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.memory-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f0f4ff;
    border-radius: 12px;
    padding: 10px 20px;
    min-width: 90px;
}

.memory-stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1565c0;
    line-height: 1;
}

.memory-stat-total {
    font-size: 1rem;
    font-weight: 400;
}

.memory-stat-label {
    font-size: 0.72rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* ── Card grid ──────────────────────────────────────────────── */
.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 520px;
}

.memory-grid--checking {
    pointer-events: none;
}

/* ── Individual card ────────────────────────────────────────── */
.memory-card {
    aspect-ratio: 1;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: transform 0.15s, box-shadow 0.15s, background 0.25s;
    background: #1565c0;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.3);
}

.memory-card::before {
    content: '?';
    font-size: 1.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
}

.memory-card:hover:not(.memory-card--flipped):not(.memory-card--matched) {
    transform: scale(1.07);
    box-shadow: 0 6px 18px rgba(21, 101, 192, 0.45);
}

.memory-card--flipped,
.memory-card--matched {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: default;
}

.memory-card--flipped::before,
.memory-card--matched::before {
    display: none;
}

.memory-card--matched {
    background: #e8f5e9;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25);
}

.memory-card-symbol {
    font-size: 2rem;
    line-height: 1;
}

/* ── Win banner ─────────────────────────────────────────────── */
.memory-win {
    text-align: center;
    padding: 28px 24px;
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border-radius: 14px;
    border: 2px solid #4caf50;
}

/* ── Topic sections ─────────────────────────────────────────── */
.memory-topic {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e0e0e0;
    border-top: 4px solid #1565c0;
    padding: 22px 26px;
    margin-bottom: 20px;
}

.memory-topic--green  { border-top-color: #2e7d32; }
.memory-topic--orange { border-top-color: #e65100; }
.memory-topic--purple { border-top-color: #6a1b9a; }
.memory-topic--teal   { border-top-color: #00695c; }
.memory-topic--red    { border-top-color: #b71c1c; }

.memory-topic-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.memory-topic-icon {
    font-size: 2rem;
    line-height: 1;
}

.memory-steps {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.memory-steps li {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    align-items: flex-start;
}

.memory-step-num {
    background: #1565c0;
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    min-width: 22px;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    flex-shrink: 0;
}

.memory-topic--green  .memory-step-num { background: #2e7d32; }
.memory-topic--orange .memory-step-num { background: #e65100; }
.memory-topic--purple .memory-step-num { background: #6a1b9a; }
.memory-topic--teal   .memory-step-num { background: #00695c; }
.memory-topic--red    .memory-step-num { background: #b71c1c; }

.memory-example {
    background: #f5f7ff;
    border-left: 3px solid #1565c0;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    margin-top: 14px;
    font-size: 0.9rem;
}

.memory-topic--green  .memory-example { background: #f1f8f2; border-left-color: #2e7d32; }
.memory-topic--orange .memory-example { background: #fff8f5; border-left-color: #e65100; }
.memory-topic--purple .memory-example { background: #faf5ff; border-left-color: #6a1b9a; }
.memory-topic--teal   .memory-example { background: #f0fafa; border-left-color: #00695c; }
.memory-topic--red    .memory-example { background: #fff5f5; border-left-color: #b71c1c; }

.memory-intervals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
    align-items: center;
}

.memory-interval-chip {
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 20px;
    padding: 4px 13px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1565c0;
}

.memory-arrow {
    color: #999;
    font-size: 0.9rem;
    padding: 0 2px;
}

.memory-highlight-box {
    background: #fffde7;
    border: 1px solid #f9a825;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 14px;
    font-size: 0.9rem;
}

.memory-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin: 12px 0;
}

.memory-table th {
    background: #f0f4ff;
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: #1565c0;
    border-bottom: 2px solid #bbdefb;
}

.memory-table td {
    padding: 7px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.memory-table tr:hover td {
    background: #fafafa;
}

.memory-subsection-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin: 16px 0 6px;
    color: #333;
}


/* ── Panoramica section cards ───────────────────────────────── */
.memory-section-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e0e0e0;
    border-top: 4px solid #1565c0;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s, transform 0.15s;
}

.memory-section-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.memory-section-card--green  { border-top-color: #2e7d32; }
.memory-section-card--orange { border-top-color: #e65100; }
.memory-section-card--purple { border-top-color: #6a1b9a; }

.memory-section-icon {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 12px;
}

.memory-section-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    flex-grow: 1;
    align-content: flex-start;
}

.memory-section-chip {
    background: #f0f4ff;
    border: 1px solid #bbdefb;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.78rem;
    color: #1565c0;
}

.memory-section-card--green  .memory-section-chip { background: #f1f8f2; border-color: #a5d6a7; color: #2e7d32; }
.memory-section-card--orange .memory-section-chip { background: #fff8f5; border-color: #ffcc80; color: #e65100; }
.memory-section-card--purple .memory-section-chip { background: #faf5ff; border-color: #ce93d8; color: #6a1b9a; }

/* ── Other games cards ──────────────────────────────────────── */
.memory-game-card {
    border-radius: 12px;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    height: 100%;
    transition: box-shadow 0.15s;
}

.memory-game-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.memory-game-card-icon {
    font-size: 2.2rem;
    margin-bottom: 6px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .memory-grid {
        gap: 8px;
        max-width: 100%;
    }

    .memory-card-symbol {
        font-size: 1.5rem;
    }
}

/* ============================================================
   Dark mode overrides
   ============================================================ */

/* ── Dark mode — comprehensive ───────────────────────────────── */

/* Overview section cards (Panoramica) */
[data-theme="dark"] .memory-section-card {
    background: var(--bp-surface) !important;
    border-color: var(--bp-border) !important;
    color: var(--bp-text) !important;
}
[data-theme="dark"] .memory-section-card .mud-typography {
    color: var(--bp-text) !important;
}
[data-theme="dark"] .memory-section-chip {
    background: var(--bp-surface-2) !important;
    border-color: var(--bp-border) !important;
    color: var(--bp-text-muted) !important;
}
[data-theme="dark"] .memory-section-card--green  { border-top-color: #81C784 !important; }
[data-theme="dark"] .memory-section-card--orange { border-top-color: #FF8A65 !important; }
[data-theme="dark"] .memory-section-card--purple { border-top-color: #CE93D8 !important; }
[data-theme="dark"] .memory-section-card--green  .memory-section-chip { background: rgba(129,199,132,0.1) !important; border-color: rgba(129,199,132,0.25) !important; color: #81C784 !important; }
[data-theme="dark"] .memory-section-card--orange .memory-section-chip { background: rgba(255,138,101,0.1) !important; border-color: rgba(255,138,101,0.25) !important; color: #FF8A65 !important; }
[data-theme="dark"] .memory-section-card--purple .memory-section-chip { background: rgba(206,147,216,0.1) !important; border-color: rgba(206,147,216,0.25) !important; color: #CE93D8 !important; }

/* Detail page topic blocks (memory-topic) — THIS WAS THE BUG (white bg + light text) */
[data-theme="dark"] .memory-topic {
    background: var(--bp-surface) !important;
    border-color: var(--bp-border) !important;
    color: var(--bp-text) !important;
}
[data-theme="dark"] .memory-topic .mud-typography,
[data-theme="dark"] .memory-topic td,
[data-theme="dark"] .memory-topic th,
[data-theme="dark"] .memory-topic p,
[data-theme="dark"] .memory-topic li {
    color: var(--bp-text) !important;
}
[data-theme="dark"] .memory-topic-header { border-bottom-color: var(--bp-border) !important; }
[data-theme="dark"] .memory-topic--green  { border-top-color: #81C784 !important; }
[data-theme="dark"] .memory-topic--orange { border-top-color: #FF8A65 !important; }
[data-theme="dark"] .memory-topic--purple { border-top-color: #CE93D8 !important; }
[data-theme="dark"] .memory-topic--teal   { border-top-color: #4DB6AC !important; }
[data-theme="dark"] .memory-topic--red    { border-top-color: #EF5350 !important; }

/* Table */
[data-theme="dark"] .memory-table {
    background: var(--bp-surface) !important;
    border-color: var(--bp-border) !important;
}
[data-theme="dark"] .memory-table th {
    background: var(--bp-surface-2) !important;
    color: var(--bp-text) !important;
    border-color: var(--bp-border) !important;
}
[data-theme="dark"] .memory-table td {
    color: var(--bp-text) !important;
    border-color: var(--bp-border-soft) !important;
}
[data-theme="dark"] .memory-table tr:hover td {
    background: var(--bp-surface-2) !important;
}

/* Example / highlight boxes */
[data-theme="dark"] .memory-example {
    background: var(--bp-surface-2) !important;
    border-left-color: var(--bp-topbar-accent) !important;
    color: var(--bp-text) !important;
}
[data-theme="dark"] .memory-topic--green  .memory-example { border-left-color: #81C784 !important; }
[data-theme="dark"] .memory-topic--orange .memory-example { border-left-color: #FF8A65 !important; }
[data-theme="dark"] .memory-topic--purple .memory-example { border-left-color: #CE93D8 !important; }
[data-theme="dark"] .memory-topic--teal   .memory-example { border-left-color: #4DB6AC !important; }
[data-theme="dark"] .memory-topic--red    .memory-example { border-left-color: #EF5350 !important; }

[data-theme="dark"] .memory-highlight-box {
    background: rgba(249, 168, 37, 0.1) !important;
    border-color: #F9A825 !important;
    color: var(--bp-text) !important;
}

/* Stats bar */
[data-theme="dark"] .memory-stats     { background: var(--bp-surface-2); border-color: var(--bp-border); }
[data-theme="dark"] .memory-stat-value { color: var(--bp-text) !important; }
[data-theme="dark"] .memory-stat-label { color: var(--bp-text-muted) !important; }

/* Game cards */
[data-theme="dark"] .memory-card--flipped,
[data-theme="dark"] .memory-card--matched {
    background: var(--bp-surface) !important;
}
[data-theme="dark"] .memory-card--matched { background: rgba(129,199,132,0.15) !important; }
[data-theme="dark"] .memory-card-symbol   { color: var(--bp-text) !important; }

[data-theme="dark"] .memory-game-card {
    background: var(--bp-surface);
    border-color: var(--bp-border);
    color: var(--bp-text);
}

/* Intervals / step boxes */
[data-theme="dark"] .memory-intervals,
[data-theme="dark"] .memory-intervals-step {
    background: var(--bp-surface-2) !important;
    border-color: var(--bp-border) !important;
    color: var(--bp-text) !important;
}

/* Step-box gradient override */
[data-theme="dark"] .memory-step-box {
    background: linear-gradient(135deg, var(--bp-surface-2), var(--bp-surface-3)) !important;
    border-color: var(--bp-border) !important;
    color: var(--bp-text) !important;
}
}

/* ── SRS image ──────────────────────────────────────────────── */
.memory-image-container {
    margin: 16px 0;
    text-align: center;
}

.memory-image {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
/* ============================================================
   Music pages — purple / violet theme
   ============================================================ */

/* ── Note card ──────────────────────────────────────────────── */

.mus-note-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.mus-note-card {
    background: white;
    border: 2px solid #E1BEE7;
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    box-shadow: 0 2px 8px rgba(106, 27, 154, 0.08);
    user-select: none;
}

.mus-note-card:hover,
.mus-note-card--active {
    transform: translateY(-4px);
    background: linear-gradient(135deg, #F3E5F5, #E1BEE7);
    border-color: #AB47BC;
    box-shadow: 0 8px 24px rgba(106, 27, 154, 0.22);
}

.mus-note-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: #6A1B9A;
    display: block;
    margin-bottom: 4px;
}

.mus-note-freq {
    font-size: 0.78rem;
    color: #7B1FA2;
    font-weight: 600;
    display: block;
}

.mus-note-solfege {
    font-size: 0.72rem;
    color: #9C27B0;
    display: block;
    margin-top: 2px;
}

/* ── Piano keyboard ─────────────────────────────────────────── */

.piano-container {
    background: #1a1a2e;
    border-radius: 16px;
    padding: 1.2rem 1.5rem 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
}

.piano-title {
    color: #CE93D8;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.piano-svg {
    display: block;
}

.piano-key-white {
    fill: #f5f5f5;
    stroke: #555;
    stroke-width: 1;
    cursor: pointer;
    transition: fill 0.1s;
}

.piano-key-white:hover,
.piano-key-white--active {
    fill: #CE93D8;
}

.piano-key-black {
    fill: #1a1a1a;
    stroke: #000;
    stroke-width: 1;
    cursor: pointer;
    transition: fill 0.1s;
}

.piano-key-black:hover,
.piano-key-black--active {
    fill: #7B1FA2;
}

.piano-key-label {
    font-size: 9px;
    fill: #777;
    text-anchor: middle;
    pointer-events: none;
    user-select: none;
}

.piano-key-label--black {
    fill: #ccc;
}

.piano-key-labels {
    display: flex;
    padding: 3px 2px 0;
    gap: 2px;
}

.piano-key-labels span {
    text-align: center;
    font-size: 9px;
    color: #9c9c9c;
    flex-shrink: 0;
    user-select: none;
}

/* ── Frequency info panel ───────────────────────────────────── */

.mus-freq-panel {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #7B1FA2;
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    color: white;
    text-align: center;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.mus-freq-note {
    font-size: 2.5rem;
    font-weight: 800;
    color: #CE93D8;
}

.mus-freq-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #AB47BC;
}

.mus-freq-label {
    font-size: 0.8rem;
    color: #9e9e9e;
}

.mus-freq-wave {
    font-size: 0.85rem;
    color: #b0b0b0;
    font-style: italic;
}

/* ── Scale builder ──────────────────────────────────────────── */

.mus-scale-card {
    background: white;
    border: 2px solid #E1BEE7;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 3px 12px rgba(106, 27, 154, 0.10);
}

.mus-scale-title {
    font-weight: 700;
    font-size: 1rem;
    color: #6A1B9A;
    margin-bottom: 1rem;
}

.mus-scale-notes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mus-scale-note-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #CE93D8;
    background: white;
    font-weight: 700;
    font-size: 0.82rem;
    color: #7B1FA2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
}

.mus-scale-note-btn:hover,
.mus-scale-note-btn--active {
    background: #7B1FA2;
    color: white;
    transform: scale(1.1);
}

.mus-scale-intervals {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.mus-scale-interval {
    background: #F3E5F5;
    color: #6A1B9A;
    border: 1px solid #CE93D8;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ── Chord card ─────────────────────────────────────────────── */

.mus-chord-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.9rem;
}

.mus-chord-card {
    background: white;
    border: 2px solid #E1BEE7;
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 2px 6px rgba(106, 27, 154, 0.08);
}

.mus-chord-card:hover {
    transform: translateY(-3px);
    border-color: #AB47BC;
    box-shadow: 0 8px 20px rgba(106, 27, 154, 0.20);
}

.mus-chord-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: #6A1B9A;
    display: block;
    margin-bottom: 6px;
}

.mus-chord-type {
    font-size: 0.75rem;
    color: #9C27B0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 8px;
}

.mus-chord-notes {
    display: flex;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.mus-chord-note-pill {
    background: #F3E5F5;
    color: #7B1FA2;
    border: 1px solid #CE93D8;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.mus-chord-play-hint {
    font-size: 0.72rem;
    color: #bdbdbd;
    margin-top: 8px;
}

/* ── Info card ──────────────────────────────────────────────── */

.mus-info-card {
    background: white;
    border: 2px solid #E1BEE7;
    border-top: 4px solid #AB47BC;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(106, 27, 154, 0.08);
}

.mus-info-card--violet  { border-top-color: #6A1B9A; }
.mus-info-card--purple  { border-top-color: #AB47BC; }
.mus-info-card--pink    { border-top-color: #E91E63; }
.mus-info-card--indigo  { border-top-color: #3949AB; }

.mus-info-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #6A1B9A;
    margin-bottom: 6px;
}

.mus-info-body {
    font-size: 0.85rem;
    color: #546e7a;
    line-height: 1.6;
}

/* ── Play button ────────────────────────────────────────────── */

.mus-play-btn {
    background: linear-gradient(135deg, #7B1FA2, #AB47BC);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mus-play-btn:hover {
    opacity: 0.88;
    transform: scale(1.03);
}

.mus-play-btn:active {
    transform: scale(0.97);
}

/* ── Frequency table ────────────────────────────────────────── */

.mus-freq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.mus-freq-table th {
    background: #F3E5F5;
    color: #6A1B9A;
    font-weight: 700;
    padding: 8px 12px;
    border-bottom: 2px solid #E1BEE7;
    text-align: left;
}

.mus-freq-table td {
    padding: 7px 12px;
    border-bottom: 1px solid #F3E5F5;
    color: #37474F;
}

.mus-freq-table tr:hover td {
    background: #FAF0FF;
}

.mus-note-symbol {
    font-weight: 700;
    color: #7B1FA2;
}

/* ── Oscillator type selector ───────────────────────────────── */

.mus-wave-selector {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mus-wave-btn {
    background: #F3E5F5;
    color: #7B1FA2;
    border: 2px solid #E1BEE7;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.mus-wave-btn:hover,
.mus-wave-btn--active {
    background: #7B1FA2;
    color: white;
    border-color: #7B1FA2;
}

/* ════════════════════════════════════════════════════════════
   Sheet Music (MusicSheetSvg)
   ════════════════════════════════════════════════════════════ */

.mus-sheet-wrapper {
    background: white;
    border: 2px solid #E1BEE7;
    border-radius: 12px;
    padding: 12px 8px;
    overflow-x: auto;
    box-shadow: 0 2px 8px rgba(74, 20, 140, 0.08);
}

.mus-sheet-svg {
    display: block;
    width: 100%;
    min-width: 320px;
}

.mus-sheet-line {
    stroke: #546e7a;
    stroke-width: 1;
}

.mus-sheet-clef {
    font-size: 72px;
    fill: #37474f;
    font-family: serif;
}

.mus-sheet-note {
    fill: #263238;
    transition: fill 0.1s;
}

.mus-sheet-note--active {
    fill: #7B1FA2;
    filter: drop-shadow(0 0 4px #AB47BC);
}

.mus-sheet-note--sharp {
    fill: #6A1B9A;
}

.mus-sheet-stem {
    stroke: #263238;
    stroke-width: 1.5;
}

.mus-sheet-stem--active {
    stroke: #7B1FA2;
}

.mus-sheet-ledger {
    stroke: #546e7a;
    stroke-width: 1;
}

.mus-sheet-note-label-svg {
    font-size: 9px;
    fill: #7B1FA2;
    font-weight: 700;
    text-anchor: middle;
    font-family: sans-serif;
}

.mus-sheet-sharp-label {
    font-size: 9px;
    fill: #6A1B9A;
    font-family: serif;
}

/* ════════════════════════════════════════════════════════════
   Song selector cards
   ════════════════════════════════════════════════════════════ */

.mus-song-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.mus-song-card {
    background: white;
    border: 2px solid #E1BEE7;
    border-radius: 12px;
    padding: 12px 10px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.mus-song-card:hover {
    border-color: #AB47BC;
    box-shadow: 0 4px 14px rgba(106, 27, 154, 0.15);
    transform: translateY(-2px);
}

.mus-song-card--active {
    border-color: #7B1FA2;
    background: #F3E5F5;
    box-shadow: 0 4px 14px rgba(106, 27, 154, 0.2);
}

.mus-song-emoji {
    font-size: 1.8rem;
    margin-bottom: 6px;
}

.mus-song-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #4A148C;
    margin-bottom: 3px;
    line-height: 1.3;
}

.mus-song-meta {
    font-size: 0.72rem;
    color: #7B1FA2;
    opacity: 0.8;
    line-height: 1.3;
}

.mus-song-now-playing {
    font-size: 0.9rem;
    font-weight: 600;
    color: #7B1FA2;
}

/* ── Spartito player ────────────────────────────────────────── */

.mus-spartit-player {
    background: linear-gradient(135deg, #F3E5F5, #EDE7F6);
    border: 2px solid #CE93D8;
    border-radius: 14px;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mus-spartit-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mus-spartit-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #4A148C;
}

.mus-spartit-artist {
    font-size: 0.82rem;
    color: #7B1FA2;
}

.mus-spartit-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #F9F0FF;
    border: 2px dashed #CE93D8;
    border-radius: 14px;
    padding: 3rem 1rem;
    text-align: center;
}

.mus-spartit-placeholder-icon {
    font-size: 3.5rem;
    opacity: 0.5;
}

.mus-spartit-placeholder-text {
    font-size: 0.95rem;
    color: #9C27B0;
    font-weight: 600;
}

/* ============================================================
   Physics pages — cyan / electric-blue theme
   ============================================================ */

/* ── Formula cards ──────────────────────────────────────────── */

.phys-formula-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.phys-formula-card {
    background: white;
    border: 2px solid #B2EBF2;
    border-top: 4px solid #00BCD4;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.10);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.phys-formula-card--blue   { border-top-color: #1565C0; border-color: #BBDEFB; }
.phys-formula-card--cyan   { border-top-color: #00ACC1; border-color: #B2EBF2; }
.phys-formula-card--teal   { border-top-color: #00796B; border-color: #B2DFDB; }
.phys-formula-card--indigo { border-top-color: #3949AB; border-color: #C5CAE9; }
.phys-formula-card--orange { border-top-color: #E65100; border-color: #FFCCBC; }

.phys-formula-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #01579B;
}

.phys-formula-eq {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: #00ACC1;
    background: #E0F7FA;
    border-radius: 6px;
    padding: 4px 8px;
    display: inline-block;
}

.phys-formula-body {
    font-size: 0.82rem;
    color: #546e7a;
    line-height: 1.5;
}

.phys-formula-vars {
    font-size: 0.78rem;
    color: #78909c;
    font-style: italic;
}

/* ── Calculator card ────────────────────────────────────────── */

.phys-calc-card {
    background: white;
    border: 2px solid #B2EBF2;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 3px 12px rgba(0, 188, 212, 0.12);
}

.phys-calc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1rem;
    color: #01579B;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #E0F7FA;
}

.phys-calc-icon {
    font-size: 1.6rem;
}

.phys-calc-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.phys-calc-result {
    background: linear-gradient(135deg, #E0F7FA, #B2EBF2);
    border: 2px solid #00BCD4;
    border-radius: 10px;
    padding: 14px 18px;
    text-align: center;
    margin-top: 1rem;
}

.phys-calc-result-label {
    font-size: 0.82rem;
    color: #00838F;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.phys-calc-result-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #006064;
}

.phys-calc-result-unit {
    font-size: 0.9rem;
    color: #00838F;
    margin-left: 4px;
}

/* ── Steps list ─────────────────────────────────────────────── */

.phys-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.phys-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #E0F7FA;
    border-left: 3px solid #00BCD4;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.88rem;
    color: #263238;
}

.phys-step-num {
    font-weight: 700;
    color: #00ACC1;
    flex-shrink: 0;
    min-width: 1.2rem;
}

/* ── SI units table ─────────────────────────────────────────── */

.phys-units-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.phys-units-table th {
    background: #E0F7FA;
    color: #01579B;
    font-weight: 700;
    padding: 8px 12px;
    border-bottom: 2px solid #B2EBF2;
    text-align: left;
}

.phys-units-table td {
    padding: 7px 12px;
    border-bottom: 1px solid #E0F7FA;
    color: #37474F;
}

.phys-units-table tr:hover td {
    background: #F0FDFE;
}

.phys-symbol {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #00ACC1;
    background: #E0F7FA;
    padding: 2px 6px;
    border-radius: 4px;
}

/* ── Chart / graph card ─────────────────────────────────────── */

.phys-chart-card {
    background: white;
    border: 2px solid #B2EBF2;
    border-radius: 12px;
    padding: 1rem 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.phys-chart-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #01579B;
    margin-bottom: 0.75rem;
    text-align: center;
}

.phys-chart-svg {
    width: 100%;
    max-width: 420px;
    display: block;
    margin: 0 auto;
}

/* ── Law card (Newton, etc.) ────────────────────────────────── */

.phys-law-card {
    background: white;
    border-radius: 12px;
    padding: 18px;
    border: 2px solid #B2EBF2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.phys-law-number {
    display: inline-block;
    background: #00BCD4;
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.phys-law-title {
    font-weight: 700;
    font-size: 1rem;
    color: #01579B;
    margin-bottom: 6px;
}

.phys-law-body {
    font-size: 0.88rem;
    color: #546e7a;
    line-height: 1.6;
    margin-bottom: 10px;
}

.phys-law-formula {
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: #00838F;
    background: #E0F7FA;
    border-radius: 6px;
    padding: 6px 10px;
    display: inline-block;
}

/* ── Wave diagram ───────────────────────────────────────────── */

.phys-wave-card {
    background: white;
    border: 2px solid #B2EBF2;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.phys-wave-svg {
    width: 100%;
    max-width: 480px;
    display: block;
    margin: 0 auto;
}

/* ════════════════════════════════════════════════════════════
   Thermodynamics animation — heat particles
   ════════════════════════════════════════════════════════════ */

@keyframes phys-heat-bounce {
    0%, 100% { transform: translate(0, 0); }
    25%       { transform: translate(8px, -10px); }
    50%       { transform: translate(-6px, 8px); }
    75%       { transform: translate(10px, 4px); }
}

@keyframes phys-cold-bounce {
    0%, 100% { transform: translate(0, 0); }
    25%       { transform: translate(-5px, 6px); }
    50%       { transform: translate(7px, -5px); }
    75%       { transform: translate(-8px, -3px); }
}

@keyframes phys-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

.phys-heat-particle {
    animation: phys-heat-bounce 1.4s ease-in-out infinite;
}
.phys-heat-particle--1 { animation-delay: 0s;    animation-duration: 1.3s; }
.phys-heat-particle--2 { animation-delay: 0.45s; animation-duration: 1.6s; }
.phys-heat-particle--3 { animation-delay: 0.9s;  animation-duration: 1.1s; }

.phys-cold-particle {
    animation: phys-cold-bounce 2.1s ease-in-out infinite;
}
.phys-cold-particle--1 { animation-delay: 0.2s;  animation-duration: 2.2s; }
.phys-cold-particle--2 { animation-delay: 0.7s;  animation-duration: 1.9s; }
.phys-cold-particle--3 { animation-delay: 1.1s;  animation-duration: 2.4s; }

/* ════════════════════════════════════════════════════════════
   Forces animation — pulsing arrows
   ════════════════════════════════════════════════════════════ */

.phys-gravity-arrow {
    animation: phys-pulse 1.2s ease-in-out infinite;
}

.phys-em-arrow {
    animation: phys-pulse 0.9s ease-in-out infinite;
    animation-delay: 0.3s;
}

/* ════════════════════════════════════════════════════════════
   Universal Constants page
   ════════════════════════════════════════════════════════════ */

.phys-constant-card {
    background: white;
    border: 1px solid #B2EBF2;
    border-top: 3px solid #00838F;
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.phys-constant-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.phys-constant-symbol {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: serif;
    line-height: 1;
}

.phys-constant-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #37474f;
}

.phys-constant-value {
    font-size: 1rem;
    font-weight: 700;
    color: #263238;
}

.phys-constant-unit {
    font-size: 0.8rem;
    font-weight: 400;
    color: #78909c;
    margin-left: 4px;
}

.phys-constant-desc {
    font-size: 0.8rem;
    color: #546e7a;
    margin: 0;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   Temperature converter
   ════════════════════════════════════════════════════════════ */

.phys-temp-converter {
    background: white;
    border: 1px solid #B2EBF2;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.phys-temp-input-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.phys-temp-field {
    min-width: 120px;
    flex: 0 0 auto;
}

.phys-temp-unit-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 6px;
}

.phys-unit-btn {
    background: #E0F7FA;
    color: #00838F;
    border: 2px solid #B2EBF2;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.phys-unit-btn:hover,
.phys-unit-btn--active {
    background: #00838F;
    color: white;
    border-color: #00838F;
}

.phys-temp-results {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.phys-temp-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 100px;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 10px 14px;
}

.phys-temp-result-label {
    font-size: 0.75rem;
    color: #78909c;
    font-weight: 600;
    text-transform: uppercase;
}

.phys-temp-result-value {
    font-size: 1.15rem;
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   Thermodynamics law cards
   ════════════════════════════════════════════════════════════ */

.phys-law-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #00838F;
    border-radius: 12px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    height: 100%;
}

.phys-law-number {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.phys-law-title {
    font-size: 1rem;
    font-weight: 700;
    color: #263238;
}

.phys-law-statement {
    font-size: 0.85rem;
    color: #546e7a;
    line-height: 1.55;
    margin: 0;
}

.phys-law-example {
    font-size: 0.82rem;
    color: #78909c;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   Fundamental forces page
   ════════════════════════════════════════════════════════════ */

.phys-force-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #00838F;
    border-radius: 12px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    height: 100%;
}

.phys-force-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.phys-force-emoji {
    font-size: 1.8rem;
    line-height: 1;
}

.phys-force-name {
    font-size: 1rem;
    font-weight: 700;
}

.phys-force-desc {
    font-size: 0.85rem;
    color: #546e7a;
    line-height: 1.55;
    margin: 0;
}

.phys-force-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.phys-force-meta-item {
    font-size: 0.78rem;
    color: #78909c;
}

/* ════════════════════════════════════════════════════════════
   Shared formula box + calculator
   ════════════════════════════════════════════════════════════ */

.phys-formula-box {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    text-align: center;
}

.phys-calculator {
    background: white;
    border: 1px solid #B2EBF2;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.phys-calc-formula {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    text-align: center;
}

.phys-calc-result {
    background: #f5f5f5;
    border: 2px solid #00838F;
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.phys-calc-result-label {
    font-size: 0.9rem;
    color: #546e7a;
    font-weight: 600;
}

.phys-calc-result-value {
    font-size: 1.2rem;
    font-weight: 800;
    font-family: 'Courier New', monospace;
}
/* ===== Quiz Catalog ===== */

.quiz-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    padding: 1rem 0;
}

.quiz-catalog-card {
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-lines-default);
    transition: box-shadow 0.2s, border-color 0.2s;
    position: relative;
    overflow: hidden;
}

.quiz-catalog-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.13);
    border-color: var(--mud-palette-primary);
}

.quiz-catalog-card.completed {
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 6%, var(--mud-palette-surface));
}

.quiz-catalog-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.quiz-catalog-badge.badge-primaria {
    background: #e3f2fd;
    color: #1565c0;
}

.quiz-catalog-badge.badge-secondaria {
    background: #fce4ec;
    color: #880e4f;
}

.quiz-catalog-school {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quiz-catalog-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.quiz-catalog-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.25rem;
}

.quiz-catalog-meta span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.quiz-catalog-footer {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.quiz-catalog-completed-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-success);
    display: flex;
    align-items: center;
    gap: 4px;
}

.quiz-catalog-completed-label.not-done {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.quiz-catalog-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    align-items: center;
}

.quiz-catalog-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 20px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, opacity 0.15s;
}

.quiz-catalog-start-btn:hover {
    background: var(--mud-palette-primary-darken);
    color: #fff;
    opacity: 0.92;
}
/* ============================================================
   Quiz page styles
   ============================================================ */

.quiz-wrapper {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

/* ---- Pre-quiz start screen ---- */
.quiz-prestart-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 6px 32px rgba(108,99,255,0.12);
    padding: 40px 36px;
    text-align: center;
    max-width: 520px;
    margin: 40px auto 0;
}
.quiz-prestart-icon    { font-size: 3.5rem; line-height: 1; margin-bottom: 12px; }
.quiz-prestart-title   { font-size: 1.7rem; font-weight: 800; color: #1a1a2e; margin-bottom: 6px; }
.quiz-prestart-subtitle{ font-size: 0.95rem; color: #666; margin-bottom: 28px; }
.quiz-prestart-subject { margin-bottom: 20px; text-align: left; }
.quiz-prestart-info    { display: flex; justify-content: center; gap: 24px; font-size: 0.9rem; color: #555; margin-bottom: 24px; }
.quiz-prestart-actions { display: flex; gap: 12px; justify-content: center; align-items: center; }

/* ---- Mode selector ---- */
.quiz-prestart-mode { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; }
.quiz-mode-btn {
    flex: 1; padding: 10px 16px;
    border: 2px solid #e0e0e0; border-radius: 12px;
    background: #fafafa; font-size: 0.9rem; font-weight: 600; color: #555;
    cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.quiz-mode-btn.active, .quiz-mode-btn:hover { border-color: #6c63ff; background: #f0eeff; color: #6c63ff; }

/* ---- Start button ---- */
.quiz-btn-start {
    display: inline-block; padding: 15px 48px;
    border: none; border-radius: 14px;
    background: linear-gradient(90deg, #6c63ff, #a084ee);
    color: #fff; font-size: 1.1rem; font-weight: 700;
    cursor: pointer; letter-spacing: .02em;
    transition: opacity .15s, transform .1s;
    box-shadow: 0 4px 16px rgba(108,99,255,.35);
}
.quiz-btn-start:hover:not(:disabled) { opacity: .9; transform: translateY(-2px); }
.quiz-btn-start:disabled             { opacity: .45; cursor: default; }

/* ---- Focus button (pre-start) ---- */
.quiz-btn-focus-pre {
    padding: 14px 20px;
    border: 2px solid #e0e0e0; border-radius: 12px;
    background: #fafafa; font-size: 1rem; font-weight: 600;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.quiz-btn-focus-pre.active, .quiz-btn-focus-pre:hover { border-color: #6c63ff; background: #f0eeff; color: #6c63ff; }

/* ---- Header banner ---- */
.quiz-header {
    background: linear-gradient(135deg, #6c63ff 0%, #8e78ff 60%, #a084ee 100%);
    border-radius: 16px; padding: 20px 24px 16px;
    color: #fff; margin-bottom: 24px;
}
.quiz-header-top   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.quiz-header-title { font-size: 1.35rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.quiz-header-actions { display: flex; gap: 8px; align-items: center; }
.quiz-header-meta  { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; opacity: .92; margin-bottom: 10px; }
.quiz-progress-bar  { height: 6px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.quiz-progress-fill { height: 100%; border-radius: 3px; background: #fff; transition: width .4s ease; }

/* Focus and pause buttons inside header */
.quiz-btn-focus, .quiz-btn-pause {
    padding: 6px 14px;
    border: 1.5px solid rgba(255,255,255,.7); border-radius: 20px;
    background: rgba(255,255,255,.15); color: #fff;
    font-size: .85rem; font-weight: 600; cursor: pointer;
    transition: background .15s; white-space: nowrap;
}
.quiz-btn-focus:hover, .quiz-btn-pause:hover { background: rgba(255,255,255,.28); }
.quiz-btn-focus.active { background: rgba(255,255,255,.35); }

/* ---- Timer bar ---- */
.quiz-timer-row  { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.quiz-timer-label{ font-size: .85rem; font-weight: 600; min-width: 36px; text-align: right; }
.quiz-timer-bar  { flex: 1; height: 8px; border-radius: 4px; background: #e0e0e0; overflow: hidden; }
.quiz-timer-fill { height: 100%; border-radius: 4px; transition: width .9s linear, background-color .5s; }
.quiz-timer-fill.green  { background: #4caf50; }
.quiz-timer-fill.yellow { background: #ff9800; }
.quiz-timer-fill.red    { background: #f44336; }

/* ---- Subject change banner ---- */
.quiz-subject-change-banner {
    background: #fff3e0; border-left: 4px solid #ff9800;
    border-radius: 10px; padding: 12px 16px;
    font-size: .92rem; font-weight: 600; color: #e65100;
    margin-bottom: 14px;
}

/* ---- Question card ---- */
.quiz-card { background: #fff; border-radius: 20px; box-shadow: 0 4px 24px rgba(0,0,0,.08); padding: 28px 28px 24px; }
.quiz-subject-badge {
    display: inline-block; background: #f44336; color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    border-radius: 20px; padding: 4px 14px; text-transform: uppercase; margin-bottom: 14px;
}
.quiz-question-text { font-size: 1.2rem; font-weight: 700; color: #1a1a2e; margin-bottom: 20px; line-height: 1.45; }

/* ---- Options ---- */
.quiz-option {
    display: block; width: 100%; padding: 15px 20px;
    border-radius: 12px; border: 1.5px solid #e0e0e0; background: #fafafa;
    font-size: 1rem; color: #333; text-align: left; cursor: pointer; margin-bottom: 10px;
    transition: border-color .15s, background .15s, transform .1s;
}
.quiz-option:hover:not(:disabled) { border-color: #6c63ff; background: #f3f0ff; transform: translateX(2px); }
.quiz-option:disabled              { cursor: default; }
.quiz-option.selected { border-color: #6c63ff; background: #ede9ff; }
.quiz-option.correct  { border-color: #4caf50; background: #e8f5e9; color: #2e7d32; font-weight: 600; }
.quiz-option.wrong    { border-color: #f44336; background: #fdecea; color: #c62828; font-weight: 600; }

/* ---- TrueFalse buttons ---- */
.quiz-tf-row { display: flex; gap: 14px; margin-bottom: 10px; }
.quiz-btn-tf {
    flex: 1; padding: 14px; border-radius: 12px;
    border: 1.5px solid #e0e0e0; background: #fafafa;
    font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.quiz-btn-tf.vero:hover:not(:disabled)  { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.quiz-btn-tf.falso:hover:not(:disabled) { background: #fdecea; border-color: #f44336; color: #c62828; }
.quiz-btn-tf.correct { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.quiz-btn-tf.wrong   { background: #fdecea; border-color: #f44336; color: #c62828; }
.quiz-btn-tf:disabled{ cursor: default; }

/* ---- Feedback banner ---- */
.quiz-feedback {
    border-radius: 12px; padding: 14px 18px; margin-top: 14px;
    font-size: .95rem; display: flex; align-items: flex-start; gap: 10px;
}
.quiz-feedback.correct { background: #e8f5e9; border-left: 4px solid #4caf50; color: #2e7d32; }
.quiz-feedback.wrong   { background: #fff8e1; border-left: 4px solid #ff9800; color: #5d4037; }
.quiz-feedback.skipped { background: #f3e5f5; border-left: 4px solid #9c27b0; color: #4a148c; }
.quiz-feedback-icon    { font-size: 1.2rem; flex-shrink: 0; line-height: 1.4; }

/* ---- Buttons ---- */
.quiz-btn-next {
    display: block; width: 100%; padding: 15px; margin-top: 18px;
    border: none; border-radius: 12px;
    background: linear-gradient(90deg, #6c63ff, #a084ee);
    color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer;
    letter-spacing: .02em; transition: opacity .15s, transform .1s;
}
.quiz-btn-next:hover { opacity: .9; transform: translateY(-1px); }

.quiz-btn-skip {
    display: block; width: 100%; padding: 10px; margin-top: 8px;
    border: 1.5px solid #bdbdbd; border-radius: 10px;
    background: transparent; color: #888; font-size: .9rem;
    cursor: pointer; transition: color .15s, border-color .15s;
}
.quiz-btn-skip:hover { color: #555; border-color: #888; }

/* ---- Open / FillInTheBlank inputs ---- */
.quiz-open-input {
    width: 100%; padding: 12px 16px;
    border: 1.5px solid #e0e0e0; border-radius: 12px;
    font-size: 1rem; resize: vertical; outline: none;
    transition: border-color .15s; margin-bottom: 10px; font-family: inherit;
}
.quiz-open-input:focus { border-color: #6c63ff; }

.quiz-btn-confirm {
    padding: 12px 28px; border: none; border-radius: 10px;
    background: #6c63ff; color: #fff; font-size: .95rem; font-weight: 600;
    cursor: pointer; transition: opacity .15s;
}
.quiz-btn-confirm:disabled { opacity: .45; cursor: default; }

/* ---- Pausa card ---- */
.quiz-pause-card {
    background: #fff; border-radius: 24px;
    box-shadow: 0 6px 32px rgba(108,99,255,.12);
    padding: 48px 36px; text-align: center;
    max-width: 460px; margin: 60px auto 0;
}
.quiz-pause-icon  { font-size: 3rem; margin-bottom: 12px; }
.quiz-pause-title { font-size: 1.6rem; font-weight: 800; color: #1a1a2e; margin-bottom: 8px; }
.quiz-pause-info  { font-size: .95rem; color: #666; margin-bottom: 28px; }
.quiz-pause-actions { display: flex; flex-direction: column; gap: 12px; }
.quiz-btn-abandon {
    padding: 13px; border: 1.5px solid #f44336; border-radius: 12px;
    background: transparent; color: #f44336; font-size: .95rem; font-weight: 600;
    cursor: pointer; transition: background .15s;
}
.quiz-btn-abandon:hover { background: #fdecea; }

/* ---- Summary page ---- */
.quiz-summary-header {
    background: linear-gradient(135deg, #6c63ff, #a084ee);
    border-radius: 16px; padding: 28px; color: #fff;
    text-align: center; margin-bottom: 24px;
}
.quiz-summary-score { font-size: 3rem; font-weight: 800; line-height: 1; }
.quiz-summary-label { font-size: 1rem; opacity: .9; margin-top: 6px; }

.quiz-answer-row {
    background: #fff; border-radius: 14px;
    padding: 16px 18px; margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    border-left: 5px solid #bdbdbd;
}
.quiz-answer-row.correct { border-left-color: #4caf50; }
.quiz-answer-row.wrong   { border-left-color: #f44336; }
.quiz-answer-row.skipped { border-left-color: #9e9e9e; }

/* ---- Focus mode quiz-specific styles (global bp-focus-mode set in app.css) ---- */
body.bp-focus-mode .quiz-wrapper { max-width: 960px; padding-top: 24px; }
/* =============================================
   Release Notes Page — stile brand BrainPower
   ============================================= */

.rn-card {
    background: #fff;
    border-left: 4px solid #E64A19;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    padding: 14px 18px;
    margin-bottom: 12px;
}

.rn-card-current {
    border-left-color: #BF360C;
    background: #FFF3F0;
}

.rn-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.rn-version-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.rn-chip-default {
    background: #E64A19;
    color: #fff;
}

.rn-chip-current {
    background: #BF360C;
    color: #fff;
}

.rn-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: #424242;
}

.rn-badge-current {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.70rem;
    font-weight: 600;
    background: #4CAF50;
    color: #fff;
}

.rn-date {
    font-size: 0.75rem;
    color: #9E9E9E;
    white-space: nowrap;
    margin-left: auto;
}

.rn-title {
    font-size: 0.91rem;
    font-weight: 600;
    color: #212121;
    margin: 0 0 4px;
    line-height: 1.5;
}

.rn-bullets {
    margin: 2px 0 4px 1.1rem;
    padding: 0;
    list-style: disc;
}

.rn-bullets li {
    font-size: 0.85rem;
    color: #424242;
    line-height: 1.55;
    margin-bottom: 2px;
}

.rn-hash {
    font-size: 0.72rem;
    color: #BDBDBD;
    margin: 0;
}

.rn-hash code {
    font-family: monospace;
    background: #F5F5F5;
    padding: 1px 4px;
    border-radius: 3px;
}
/* ============================================================
   Science Section — Global Styles
   ============================================================ */

/* ── Hub overview page ─────────────────────────────────────── */
/* (Moved to subject-hub.css — shared component) */

/* ============================================================
   Periodic Table Page
   ============================================================ */

/* ── Dark scroll / grid container ──────────────────────────── */

.sci-pt-scroll-wrap {
    background: linear-gradient(180deg, #080d1a 0%, #0c1428 100%);
    border-radius: 16px;
    padding: 16px;
    overflow-x: auto;
    margin-bottom: 16px;
    box-shadow: inset 0 2px 24px rgba(0,0,0,0.5);
}

/* ── Toolbar ────────────────────────────────────────────── */

.sci-pt-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.sci-pt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

/* ── Category filter buttons ─────────────────────────────── */

.sci-cat-btn {
    padding: 5px 11px;
    border-radius: 16px;
    border: 1.5px solid #ccc;
    background: white;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.sci-cat-btn:hover { background: #f0f4ff; border-color: #90caf9; }
.sci-cat-btn--active { background: #1565c0 !important; color: white !important; border-color: #1565c0 !important; }

.sci-cat-btn--alkali:hover,         .sci-cat-btn--alkali.sci-cat-btn--active         { background: #c62828; border-color: #c62828; color: white; }
.sci-cat-btn--alkaline-earth:hover, .sci-cat-btn--alkaline-earth.sci-cat-btn--active { background: #e65100; border-color: #e65100; color: white; }
.sci-cat-btn--transition:hover,     .sci-cat-btn--transition.sci-cat-btn--active     { background: #1565c0; border-color: #1565c0; color: white; }
.sci-cat-btn--post-transition:hover,.sci-cat-btn--post-transition.sci-cat-btn--active{ background: #00695c; border-color: #00695c; color: white; }
.sci-cat-btn--metalloid:hover,      .sci-cat-btn--metalloid.sci-cat-btn--active      { background: #558b2f; border-color: #558b2f; color: white; }
.sci-cat-btn--nonmetal:hover,       .sci-cat-btn--nonmetal.sci-cat-btn--active       { background: #2e7d32; border-color: #2e7d32; color: white; }
.sci-cat-btn--noble-gas:hover,      .sci-cat-btn--noble-gas.sci-cat-btn--active      { background: #6a1b9a; border-color: #6a1b9a; color: white; }
.sci-cat-btn--lanthanide:hover,     .sci-cat-btn--lanthanide.sci-cat-btn--active     { background: #f57f17; border-color: #f57f17; color: white; }
.sci-cat-btn--actinide:hover,       .sci-cat-btn--actinide.sci-cat-btn--active       { background: #b71c1c; border-color: #b71c1c; color: white; }

/* ── Main periodic grid ──────────────────────────────────── */

.sci-periodic-grid {
    display: grid;
    grid-template-columns: repeat(18, 56px);
    grid-template-rows: repeat(7, 64px);
    gap: 3px;
    margin-bottom: 8px;
}

.sci-period-label,
.sci-group-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255,255,255,0.25);
}

/* ── f-block rows ────────────────────────────────────────── */

.sci-fblock {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sci-fblock-row {
    display: flex;
    align-items: stretch;
    gap: 3px;
}

.sci-fblock-label {
    /* Width aligns with 2 grid columns: 2×(56+3)=118px */
    width: 115px;
    min-width: 115px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
}

.sci-fblock-row .sci-element {
    width: 56px;
    height: 64px;
    flex-shrink: 0;
}

/* ── Element cell ──────────────────────────────────────────── */

.sci-element {
    border-radius: 6px;
    padding: 4px 3px 3px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s;
    border: 1px solid rgba(0,0,0,0.25);
    overflow: hidden;
    min-width: 0;
    position: relative;
}

.sci-element:hover {
    transform: scale(1.3);
    z-index: 20;
    border-color: rgba(255,255,255,0.9);
    box-shadow: 0 8px 28px rgba(0,0,0,0.8);
}

.sci-element--selected {
    transform: scale(1.22) !important;
    z-index: 30;
    border-color: #ffeb3b !important;
    box-shadow: 0 0 22px rgba(255,235,59,0.9) !important;
    outline: 2px solid #ffeb3b;
    outline-offset: 2px;
}

.sci-el-num {
    font-size: 0.58rem;
    line-height: 1;
    align-self: flex-start;
    color: rgba(255,255,255,0.85);
    font-weight: 700;
}

.sci-el-sym {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.15;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.sci-el-name {
    font-size: 0.47rem;
    line-height: 1.1;
    text-align: center;
    color: rgba(255,255,255,0.88);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.sci-el-mass {
    font-size: 0.45rem;
    color: rgba(255,255,255,0.6);
    line-height: 1;
}

/* f-block placeholder cells */

.sci-f-placeholder {
    border-radius: 6px;
    border: 1.5px dashed rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
    cursor: default;
    background: rgba(255,255,255,0.03);
}

/* ── Category colours (vivid gradients) ────────────────────── */

.sci-element--alkali         { background: linear-gradient(160deg, #e53935, #b71c1c); }
.sci-element--alkaline-earth { background: linear-gradient(160deg, #fb8c00, #e65100); }
.sci-element--transition     { background: linear-gradient(160deg, #1e88e5, #0d47a1); }
.sci-element--post-transition{ background: linear-gradient(160deg, #26c6da, #006064); }
.sci-element--metalloid      { background: linear-gradient(160deg, #9ccc65, #33691e); }
.sci-element--nonmetal       { background: linear-gradient(160deg, #66bb6a, #1b5e20); }
.sci-element--noble-gas      { background: linear-gradient(160deg, #ab47bc, #4a148c); }
.sci-element--lanthanide     { background: linear-gradient(160deg, #ffca28, #e65100); }
.sci-element--actinide       { background: linear-gradient(160deg, #ef5350, #880e4f); }
.sci-element--unknown        { background: linear-gradient(160deg, #78909c, #263238); }

/* ── Legend ──────────────────────────────────────────────── */

.sci-pt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: #f8f9ff;
    border-radius: 12px;
    border: 1px solid #e3e8f0;
}

.sci-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #333;
    font-weight: 500;
}

.sci-legend-swatch {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ── Element detail panel ────────────────────────────────── */

.sci-el-detail {
    background: #0c1428;
    border: 1px solid #1e3a5f;
    border-radius: 16px;
    padding: 22px 24px;
    position: relative;
    margin-bottom: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}

.sci-el-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    color: #aaa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.sci-el-detail-close:hover { background: rgba(255,255,255,0.18); color: white; }

.sci-el-detail-inner {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.sci-el-detail-symbol {
    width: 120px;
    height: 120px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 28px rgba(0,0,0,0.5);
}

.sci-el-detail-num   { font-size: 0.9rem;  color: rgba(255,255,255,0.65); font-weight: 700; }
.sci-el-detail-sym   { font-size: 3.2rem;  font-weight: 800; color: white; line-height: 1; }
.sci-el-detail-state { font-size: 1.1rem;  margin-top: 2px; }

.sci-el-detail-info  { flex: 1; min-width: 220px; }

.sci-el-detail-name {
    font-size: 1.7rem;
    font-weight: 800;
    color: #e3f2fd;
    margin: 0 0 8px;
}

.sci-el-detail-cat {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
}

.sci-el-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.sci-el-prop {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 8px 12px;
}

.sci-el-prop span     { font-size: 0.7rem; color: rgba(255,255,255,0.45); display: block; margin-bottom: 2px; }
.sci-el-prop strong   { font-size: 0.95rem; color: #e3f2fd; font-weight: 700; }
.sci-el-prop--wide    { grid-column: 1 / -1; }

/* Symbol badge (used in formula page) */

.sci-symbol-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ============================================================
   States of Matter Page
   ============================================================ */

/* ── State selector ──────────────────────────────────────────── */

.som-selector {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.som-sel-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    border-radius: 14px;
    border: 2px solid #1e3a5f;
    background: #0d2137;
    color: #90afc5;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
    min-width: 90px;
}

.som-sel-btn:hover:not(.som-sel-btn--active) {
    border-color: #42a5f5;
    background: #112540;
    color: #e3f2fd;
}

.som-sel-emoji { font-size: 1.5rem; line-height: 1; }
.som-sel-name  { font-size: 0.85rem; }

/* Per-state active colours */
.som-sel-btn--0.som-sel-btn--active { border-color: #42a5f5; background: #0d47a1; color: #e3f2fd; }
.som-sel-btn--1.som-sel-btn--active { border-color: #26c6da; background: #006064; color: #e0f7fa; }
.som-sel-btn--2.som-sel-btn--active { border-color: #ce93d8; background: #4a148c; color: #f3e5f5; }
.som-sel-btn--3.som-sel-btn--active { border-color: #ff7043; background: #bf360c; color: #fbe9e7; }

/* ── Temperature strip ───────────────────────────────────────── */

.som-temp-strip {
    background: #0d2137;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 8px;
}

.som-temp-track {
    position: relative;
    height: 10px;
    background: #07111c;
    border-radius: 5px;
    overflow: visible;
    margin-bottom: 8px;
}

.som-temp-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease;
}

.som-temp-fill--0 { width: 15%; background: linear-gradient(90deg, #1565c0, #42a5f5); }
.som-temp-fill--1 { width: 40%; background: linear-gradient(90deg, #1565c0, #26c6da); }
.som-temp-fill--2 { width: 70%; background: linear-gradient(90deg, #26c6da, #ce93d8); }
.som-temp-fill--3 { width: 100%; background: linear-gradient(90deg, #ce93d8, #ff7043, #ffeb3b); }

.som-temp-markers {
    position: absolute;
    top: 14px;
    left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: #4a6785;
}

.som-temp-label {
    font-size: 0.88rem;
    color: #90afc5;
    margin-top: 18px;
}

/* ── Simulation card ─────────────────────────────────────────── */

.som-sim-card {
    background: #0d2137;
    border: 1px solid #1e3a5f;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
}

.som-sim-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid #1e3a5f;
}

.som-sim-state-icon { font-size: 1.4rem; }

.som-sim-state-name {
    font-size: 1rem;
    font-weight: 700;
    color: #e3f2fd;
    flex: 1;
}

.som-sim-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.som-sim-badge--0 { background: #0d47a1; color: #90caf9; }
.som-sim-badge--1 { background: #006064; color: #80deea; }
.som-sim-badge--2 { background: #4a148c; color: #ce93d8; }
.som-sim-badge--3 { background: #bf360c; color: #ffccbc; }

/* Per-state left border accent */
.som-sim-card--0 { border-left: 3px solid #42a5f5; }
.som-sim-card--1 { border-left: 3px solid #26c6da; }
.som-sim-card--2 { border-left: 3px solid #ab47bc; }
.som-sim-card--3 { border-left: 3px solid #ff7043; }

/* SVG canvas */

.som-sim-svg {
    width: 100%;
    display: block;
    background: #07111c;
    padding: 8px;
}

/* ── SVG particle animations ─────────────────────────────────── */

/* Solid: gentle lattice vibration, staggered by --vi */
.som-p-solid {
    animation: som-vibrate calc(0.6s + var(--vi, 0) * 0.04s) ease-in-out infinite alternate;
    transform-origin: center center;
    transform-box: fill-box;
}

/* Liquid: slow drift, each particle has unique phase */
.som-p-liquid {
    animation: som-drift calc(2.4s + var(--vi, 0) * 0.18s) ease-in-out infinite alternate;
    transform-origin: center center;
    transform-box: fill-box;
}

/* Gas: fast random bounce, shorter duration at higher --vi */
.som-p-gas {
    animation: som-scatter calc(0.7s + var(--vi, 0) * 0.09s) linear infinite alternate;
    transform-origin: center center;
    transform-box: fill-box;
}

/* Plasma ions: energetic pulse + drift */
.som-p-ion {
    animation: som-ion-move calc(0.5s + var(--vi, 0) * 0.07s) ease-in-out infinite alternate;
    transform-origin: center center;
    transform-box: fill-box;
}

.som-p-ion-label {
    animation: som-ion-move calc(0.5s + var(--vi, 0) * 0.07s) ease-in-out infinite alternate;
    transform-origin: center center;
    transform-box: fill-box;
    pointer-events: none;
}

/* Plasma electrons: rapid chaotic movement */
.som-p-electron {
    animation: som-electron-zip calc(0.3s + var(--vi, 0) * 0.05s) linear infinite alternate;
    transform-origin: center center;
    transform-box: fill-box;
}

/* ── SVG keyframes ───────────────────────────────────────────── */

@keyframes som-vibrate {
    from { transform: translate(-2px, -2px); }
    to   { transform: translate(2px, 2px); }
}

@keyframes som-drift {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(8px, -10px); }
    66%  { transform: translate(-6px, 8px); }
    100% { transform: translate(5px, -5px); }
}

@keyframes som-scatter {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(18px, -22px); }
    100% { transform: translate(-20px, 16px); }
}

@keyframes som-ion-move {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(22px, -18px) scale(1.15); }
    100% { transform: translate(-15px, 20px) scale(0.9); }
}

@keyframes som-electron-zip {
    0%   { transform: translate(0, 0); opacity: 1; }
    50%  { transform: translate(30px, -25px); opacity: 0.6; }
    100% { transform: translate(-28px, 22px); opacity: 0.8; }
}

@keyframes som-phase-pulse {
    0%, 100% { r: 10; opacity: 0.95; }
    50%       { r: 13; opacity: 0.7; }
}

.som-phase-dot {
    animation: som-phase-pulse 1.4s ease-in-out infinite;
}

/* ── Phase diagram card ──────────────────────────────────────── */

.som-phase-card {
    background: #0d2137;
    border: 1px solid #1e3a5f;
    border-radius: 16px;
    padding: 18px;
    height: 100%;
}

.som-phase-card-header {
    font-size: 0.95rem;
    font-weight: 700;
    color: #90caf9;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1e3a5f;
}

.som-phase-svg {
    width: 100%;
    display: block;
    background: #07111c;
    border-radius: 10px;
}

/* ── State description card ──────────────────────────────────── */

.som-desc-card {
    background: #0d2137;
    border: 1px solid #1e3a5f;
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.som-desc-card--0 { border-left: 4px solid #42a5f5; }
.som-desc-card--1 { border-left: 4px solid #26c6da; }
.som-desc-card--2 { border-left: 4px solid #ab47bc; }
.som-desc-card--3 { border-left: 4px solid #ff7043; }

.som-desc-icon {
    font-size: 2.4rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}

.som-desc-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #e3f2fd;
    margin-bottom: 8px;
}

.som-desc-text {
    font-size: 0.93rem;
    line-height: 1.7;
    color: #90afc5;
    margin: 0;
}

/* ── Transitions section ─────────────────────────────────────── */

.som-transitions {
    background: #0d2137;
    border: 1px solid #1e3a5f;
    border-radius: 16px;
    padding: 22px 24px;
}

.som-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #90caf9;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1e3a5f;
}

.som-trans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}

.som-trans-chip {
    background: #07111c;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: #b0c8e0;
    font-weight: 500;
    transition: border-color 0.15s, color 0.15s;
}

.som-trans-chip:hover {
    border-color: #42a5f5;
    color: #e3f2fd;
}

.som-trans-info p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #90afc5;
    margin: 0;
}

.som-trans-info strong { color: #e3f2fd; }
.som-trans-info em     { color: #90caf9; }

/* ============================================================
   Chemical Formula Page
   ============================================================ */

.sci-formula-container {
    padding: 28px 20px 0;
    margin: 0 auto;
}

.sci-formula-input-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.sci-formula-input-card h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a237e;
    margin: 0 0 16px;
}

.sci-formula-input-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}

.sci-formula-textbox {
    flex: 1;
    min-width: 180px;
    padding: 10px 16px;
    border: 2px solid #90caf9;
    border-radius: 10px;
    font-size: 1.05rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.04em;
    outline: none;
    transition: border-color 0.15s;
}

.sci-formula-textbox:focus {
    border-color: #1565c0;
}

.sci-btn {
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.sci-btn:active { transform: scale(0.97); }

.sci-btn-primary {
    background: #1565c0;
    color: white;
}

.sci-btn-primary:hover:not(:disabled) {
    background: #0d47a1;
}

.sci-btn-primary:disabled {
    background: #90caf9;
    cursor: not-allowed;
}

.sci-btn-secondary {
    background: #f5f5f5;
    color: #555;
    border: 1.5px solid #ddd;
}

.sci-btn-secondary:hover {
    background: #eeeeee;
}

.sci-formula-examples {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sci-examples-label {
    font-size: 0.82rem;
    color: #888;
    font-weight: 600;
    white-space: nowrap;
}

.sci-example-chip {
    padding: 4px 13px;
    border-radius: 20px;
    border: 1.5px solid #bbdefb;
    background: #e3f2fd;
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #0d47a1;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.sci-example-chip:hover {
    background: #bbdefb;
    border-color: #90caf9;
}

/* Error state */

.sci-formula-error {
    background: #ffebee;
    border: 1.5px solid #ef9a9a;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #b71c1c;
    font-size: 0.95rem;
}

.sci-formula-error span {
    font-size: 1.6rem;
}

/* Placeholder */

.sci-formula-placeholder {
    text-align: center;
    padding: 52px 20px;
    color: #888;
}

.sci-placeholder-icon {
    font-size: 3.5rem;
    margin-bottom: 14px;
}

.sci-formula-placeholder p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 4px 0;
}

.sci-placeholder-hint {
    font-size: 0.82rem;
    color: #aaa;
}

/* Results */

.sci-formula-results {
    animation: sci-fade-in 0.3s ease-out;
}

@keyframes sci-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sci-result-header {
    background: linear-gradient(135deg, #1565c0 0%, #0288d1 100%);
    color: white;
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sci-compound-type {
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sci-compound-name {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    flex: 1;
}

.sci-compound-formula {
    font-size: 0.95rem;
    opacity: 0.85;
    margin: 0;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.04em;
    width: 100%;
}

.sci-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 680px) {
    .sci-result-grid { grid-template-columns: 1fr; }
}

.sci-result-card {
    background: white;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.sci-result-card-wide {
    grid-column: 1 / -1;
}

.sci-result-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a237e;
    margin: 0 0 14px;
}

/* Elements table */

.sci-elements-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.sci-elements-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: #888;
    padding: 5px 8px;
    border-bottom: 1.5px solid #e0e0e0;
    text-transform: uppercase;
}

.sci-elements-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.sci-elements-table tfoot td {
    border-top: 2px solid #e0e0e0;
    border-bottom: none;
    padding-top: 10px;
}

.sci-num { text-align: right; font-family: 'Courier New', monospace; }

.sci-molar-total td {
    background: #e3f2fd;
    border-radius: 4px;
}

/* Steps list */

.sci-steps-list {
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sci-steps-list li {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #333;
    padding: 7px 10px;
    background: #f5f7ff;
    border-radius: 7px;
    list-style-position: outside;
}

/* ============================================================
   SOLAR SYSTEM PAGE
   ============================================================ */

:root {
    --ss-mercury: #9e9e9e;
    --ss-venus:   #f57f17;
    --ss-earth:   #1565c0;
    --ss-mars:    #b71c1c;
    --ss-jupiter: #ef6c00;
    --ss-saturn:  #f9a825;
    --ss-uranus:  #00838f;
    --ss-neptune: #0d47a1;
}
.ss-selector { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:4px; }
.ss-sel-btn { display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 10px; border-radius:10px; border:2px solid transparent; background:var(--bp-surface-2,#f5f5f5); cursor:pointer; transition:all .2s; min-width:68px; }
.ss-sel-btn:hover { transform:translateY(-2px); filter:brightness(1.08); }
.ss-sel-num { font-size:0.7rem; font-weight:700; color:var(--bp-text-muted,#999); }
.ss-sel-name { font-size:0.78rem; font-weight:700; color:var(--bp-text,#333); white-space:nowrap; }
.ss-sel-btn--active { border-color:currentColor; background:var(--bp-surface,#fff); box-shadow:0 2px 10px rgba(0,0,0,.15); }
.ss-sel-btn--mercury { color:var(--ss-mercury); } .ss-sel-btn--venus { color:var(--ss-venus); }
.ss-sel-btn--earth { color:var(--ss-earth); } .ss-sel-btn--mars { color:var(--ss-mars); }
.ss-sel-btn--jupiter { color:var(--ss-jupiter); } .ss-sel-btn--saturn { color:var(--ss-saturn); }
.ss-sel-btn--uranus { color:var(--ss-uranus); } .ss-sel-btn--neptune { color:var(--ss-neptune); }
.ss-svg-card { background:#03071e; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08); box-shadow:0 4px 24px rgba(0,0,0,.4); }
.ss-svg-header { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.06); }
.ss-svg-title { font-size:0.85rem; font-weight:700; color:#e3f2fd; }
.ss-svg-hint { font-size:0.72rem; color:rgba(255,255,255,.4); }
.ss-svg { width:100%; max-height:360px; height:auto; display:block; cursor:pointer; }
.ss-orbit-legend { display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px; background:rgba(255,255,255,.03); border-top:1px solid rgba(255,255,255,.05); }
.ss-legend-dot { font-size:0.72rem; color:rgba(255,255,255,.55); cursor:pointer; padding:2px 8px; border-radius:20px; border:1px solid rgba(255,255,255,.1); transition:all .2s; }
.ss-legend-dot:hover { color:#fff; border-color:rgba(255,255,255,.4); }
.ss-legend-dot--active { color:#fff; border-color:currentColor; }
.ss-legend-dot--mercury { color:#bdbdbd; } .ss-legend-dot--venus { color:#ffe082; }
.ss-legend-dot--earth { color:#64b5f6; } .ss-legend-dot--mars { color:#ef9a9a; }
.ss-legend-dot--jupiter { color:#ffcc80; } .ss-legend-dot--saturn { color:#fff59d; }
.ss-legend-dot--uranus { color:#80deea; } .ss-legend-dot--neptune { color:#90caf9; }
@keyframes ss-orbit-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.ss-orbit-mercury { animation:ss-orbit-spin calc(5.5s  / var(--ss-speed,1)) linear infinite; transform-origin:280px 180px; transform-box:view-box; }
.ss-orbit-venus   { animation:ss-orbit-spin calc(14.5s / var(--ss-speed,1)) linear infinite; transform-origin:280px 180px; transform-box:view-box; }
.ss-orbit-earth   { animation:ss-orbit-spin calc(20s   / var(--ss-speed,1)) linear infinite; transform-origin:280px 180px; transform-box:view-box; }
.ss-orbit-mars    { animation:ss-orbit-spin calc(37.5s / var(--ss-speed,1)) linear infinite; transform-origin:280px 180px; transform-box:view-box; }
.ss-orbit-jupiter { animation:ss-orbit-spin calc(237s  / var(--ss-speed,1)) linear infinite; transform-origin:280px 180px; transform-box:view-box; }
.ss-orbit-saturn  { animation:ss-orbit-spin calc(590s  / var(--ss-speed,1)) linear infinite; transform-origin:280px 180px; transform-box:view-box; }
.ss-orbit-uranus  { animation:ss-orbit-spin calc(1680s / var(--ss-speed,1)) linear infinite; transform-origin:280px 180px; transform-box:view-box; }
.ss-orbit-neptune { animation:ss-orbit-spin calc(3300s / var(--ss-speed,1)) linear infinite; transform-origin:280px 180px; transform-box:view-box; }
.ss-sun-pulse { animation:ss-sun-pulse 3s ease-in-out infinite; }
@keyframes ss-sun-pulse { 0%,100% { opacity:1; } 50% { opacity:.85; } }
/* Planet label always visible */
.ss-planet-label { fill:#aaa; font-size:7px; }
.ss-planet-label--selected { fill:#fff; font-weight:700; }
.ss-planet { cursor:pointer; transition:r .2s; }
.ss-planet--selected { stroke:#fff; stroke-width:2; }
/* SVG wrapper zoom + 3D */
/* Zoom viewport — mouse-wheel + button zoom target */
.ss-zoom-viewport { overflow:visible; display:block; cursor:grab; }
.ss-zoom-viewport:active { cursor:grabbing; }
/* 3D perspective container: perspective lives on the parent only */
.ss-perspective-wrap { overflow:hidden; }
.ss-perspective-wrap--3d { perspective:700px; perspective-origin:50% -20%; }
/* Controls bar */
.ss-controls-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 12px; background:rgba(255,255,255,.04); border-top:1px solid rgba(255,255,255,.06); }
.ss-ctrl-btn { background:rgba(255,255,255,.08); color:#e3f2fd; border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:4px 10px; font-size:.78rem; cursor:pointer; transition:background .2s; }
.ss-ctrl-btn:hover { background:rgba(255,255,255,.16); }
.ss-ctrl-btn--active { background:rgba(100,180,255,.25); border-color:rgba(100,180,255,.5); }
.ss-ctrl-btn--icon { padding:4px 8px; font-size:.9rem; min-width:30px; }
.ss-ctrl-group { display:flex; align-items:center; gap:4px; }
.ss-ctrl-group--speed { flex:1; min-width:160px; }
.ss-ctrl-label { font-size:.75rem; color:rgba(255,255,255,.55); white-space:nowrap; }
.ss-speed-slider { flex:1; accent-color:#64b5f6; cursor:pointer; }
.ss-detail-card { background:var(--bp-surface,#fff); border:2px solid var(--bp-border-soft,#eee); border-radius:16px; padding:18px 20px; height:100%; display:flex; flex-direction:column; gap:12px; transition:border-color .3s; }
.ss-detail-card--mercury { border-color:var(--ss-mercury); } .ss-detail-card--venus { border-color:var(--ss-venus); }
.ss-detail-card--earth { border-color:var(--ss-earth); } .ss-detail-card--mars { border-color:var(--ss-mars); }
.ss-detail-card--jupiter { border-color:var(--ss-jupiter); } .ss-detail-card--saturn { border-color:var(--ss-saturn); }
.ss-detail-card--uranus { border-color:var(--ss-uranus); } .ss-detail-card--neptune { border-color:var(--ss-neptune); }
.ss-detail-header { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.ss-detail-planet-num { font-size:2rem; font-weight:900; line-height:1; color:var(--bp-border-soft,#ddd); flex-shrink:0; margin-top:2px; }
.ss-detail-name { font-size:1.4rem; font-weight:800; color:var(--bp-text,#222); line-height:1.1; }
.ss-detail-type { font-size:0.78rem; color:var(--bp-text-muted,#888); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-top:3px; }
.ss-detail-badges { display:flex; flex-wrap:wrap; gap:5px; margin-left:auto; }
.ss-badge { font-size:0.72rem; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.ss-badge--ring { background:rgba(249,168,37,.12); color:#f57f17; border:1px solid rgba(249,168,37,.3); }
.ss-badge--moon { background:rgba(100,181,246,.12); color:#1565c0; border:1px solid rgba(100,181,246,.3); }
.ss-badge--nomoon { background:rgba(0,0,0,.05); color:#999; border:1px solid #ddd; }
.ss-detail-desc { font-size:0.86rem; line-height:1.65; color:var(--bp-text,#333); margin:0; }
.ss-specs-title,.ss-curiosity-title { font-size:0.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--bp-text-muted,#999); padding-bottom:6px; border-bottom:1px solid var(--bp-border-soft,#eee); }
.ss-specs-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ss-spec { display:flex; flex-direction:column; gap:1px; background:var(--bp-surface-2,#f9f9f9); border-radius:8px; padding:7px 10px; border:1px solid var(--bp-border-soft,#f0f0f0); }
.ss-spec--full { grid-column:1/-1; }
.ss-spec-icon { font-size:0.9rem; line-height:1; } .ss-spec-label { font-size:0.7rem; color:var(--bp-text-muted,#999); font-weight:600; }
.ss-spec-value { font-size:0.82rem; font-weight:700; color:var(--bp-text,#222); }
.ss-curiosity-list { margin:0; padding:0 0 0 16px; display:flex; flex-direction:column; gap:6px; }
.ss-curiosity-list li { font-size:0.83rem; line-height:1.55; color:var(--bp-text,#333); }
.ss-table-section { background:var(--bp-surface,#fff); border:1px solid var(--bp-border-soft,#eee); border-radius:14px; overflow:hidden; }
.ss-table-title { padding:12px 16px; font-size:0.9rem; font-weight:800; color:var(--bp-text,#222); background:var(--bp-surface-2,#fafafa); border-bottom:1px solid var(--bp-border-soft,#eee); }
.ss-table-scroll { overflow-x:auto; }
.ss-table { width:100%; border-collapse:collapse; font-size:0.82rem; white-space:nowrap; }
.ss-table thead th { padding:9px 12px; text-align:left; background:var(--bp-surface-2,#f5f5f5); font-weight:700; color:var(--bp-text-muted,#777); font-size:0.73rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:2px solid var(--bp-border-soft,#eee); }
.ss-table tbody tr { cursor:pointer; transition:background .15s; border-bottom:1px solid var(--bp-border-soft,#f5f5f5); }
.ss-table tbody tr:hover { background:var(--bp-surface-2,#f9f9f9); }
.ss-table-row--selected { background:rgba(21,101,192,.07) !important; font-weight:700; }
.ss-table tbody td { padding:8px 12px; color:var(--bp-text,#333); }
.ss-table-num { color:var(--bp-text-muted,#bbb); font-weight:800; font-size:0.7rem; }
.ss-table-center { text-align:center; } .ss-table-dist { max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.ss-table-type { color:var(--bp-text-muted,#888); }
.ss-table-planet-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.ss-table-planet-dot--mercury{background:var(--ss-mercury)} .ss-table-planet-dot--venus{background:var(--ss-venus)}
.ss-table-planet-dot--earth{background:var(--ss-earth)} .ss-table-planet-dot--mars{background:var(--ss-mars)}
.ss-table-planet-dot--jupiter{background:var(--ss-jupiter)} .ss-table-planet-dot--saturn{background:var(--ss-saturn)}
.ss-table-planet-dot--uranus{background:var(--ss-uranus)} .ss-table-planet-dot--neptune{background:var(--ss-neptune)}
.ss-timeline { background:var(--bp-surface,#fff); border:1px solid var(--bp-border-soft,#eee); border-radius:14px; padding:18px 20px; }
.ss-timeline-title { font-size:0.9rem; font-weight:800; color:var(--bp-text,#222); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--bp-border-soft,#eee); }
.ss-timeline-items { display:flex; flex-direction:column; gap:0; position:relative; padding-left:28px; }
.ss-timeline-items::before { content:""; position:absolute; left:9px; top:8px; bottom:8px; width:2px; background:linear-gradient(to bottom,#ffcc02,#1565c0); border-radius:2px; }
.ss-tl-item { position:relative; padding:6px 0 12px 16px; }
.ss-tl-dot { position:absolute; left:-19px; top:8px; width:10px; height:10px; border-radius:50%; background:var(--bp-topbar-accent,#f78b1e); border:2px solid var(--bp-surface,#fff); box-shadow:0 0 0 2px var(--bp-topbar-accent,#f78b1e); }
.ss-tl-time { font-size:0.73rem; font-weight:800; color:var(--bp-topbar-accent,#f78b1e); margin-bottom:3px; }
.ss-tl-event { font-size:0.84rem; line-height:1.55; color:var(--bp-text,#333); }
[data-theme="dark"] .ss-sel-btn { background:rgba(255,255,255,.06); }
[data-theme="dark"] .ss-sel-btn--active { background:rgba(255,255,255,.12); }
[data-theme="dark"] .ss-detail-card { background:rgba(255,255,255,.04); }
[data-theme="dark"] .ss-spec { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.07); }
[data-theme="dark"] .ss-table thead th { background:rgba(255,255,255,.05); }
[data-theme="dark"] .ss-table tbody tr:hover { background:rgba(255,255,255,.04); }
[data-theme="dark"] .ss-table-row--selected { background:rgba(100,181,246,.10) !important; }
[data-theme="dark"] .ss-table-section,[data-theme="dark"] .ss-timeline { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.07); }
@media (max-width:600px) { .ss-selector{gap:4px} .ss-sel-btn{min-width:56px;padding:5px 6px} .ss-sel-name{font-size:.7rem} .ss-specs-grid{grid-template-columns:1fr} }

/* ── 3D canvas wrapper ──────────────────────────────────────── */
.ss-3d-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000005;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}
.ss-3d-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000005;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}
.ss-3d-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    background: #000005;
    cursor: grab;
    touch-action: none;
}
.ss-3d-canvas:active { cursor: grabbing; }
.ss-3d-hint {
    margin-left: auto;
    font-size: .72rem;
    color: rgba(255,255,255,.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* planet link button in detail card */
.ss-planet-link-btn { display:inline-block; padding:7px 16px; border-radius:20px; font-size:.82rem; font-weight:600; text-decoration:none; transition:opacity .2s; }
.ss-planet-link-btn:hover { opacity:.8; text-decoration:none; }
.ss-planet-link-btn--mercury { background:#b0bec530; color:#546e7a; border:2px solid #607d8b40; }
.ss-planet-link-btn--venus   { background:#fff9c430; color:#f57f17; border:2px solid #f9a82540; }
.ss-planet-link-btn--earth   { background:#e3f2fd; color:#1565c0; border:2px solid #1565c040; }
.ss-planet-link-btn--mars    { background:#ffebee; color:#c62828; border:2px solid #c6282840; }
.ss-planet-link-btn--jupiter { background:#fbe9e7; color:#bf360c; border:2px solid #bf360c40; }
.ss-planet-link-btn--saturn  { background:#fff3e0; color:#e65100; border:2px solid #e6510040; }
.ss-planet-link-btn--uranus  { background:#e0f7fa; color:#006064; border:2px solid #00606440; }
.ss-planet-link-btn--neptune { background:#e8eaf6; color:#1a237e; border:2px solid #1a237e40; }

/* ══════════════════════════════════════════════════════
   PLANET INDIVIDUAL PAGE
══════════════════════════════════════════════════════ */

/* prev/next nav bar */
.planet-nav-bar { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.planet-nav-btn { padding:6px 14px; border-radius:20px; font-size:.82rem; font-weight:600; text-decoration:none; border:2px solid transparent; transition:opacity .2s; }
.planet-nav-btn:hover { opacity:.8; }
.planet-nav-hub  { padding:6px 14px; border-radius:20px; font-size:.82rem; font-weight:600; text-decoration:none; background:rgba(128,128,128,.15); color:inherit; }
.planet-nav-btn--mercury { background:#b0bec550; color:#b0bec5; border-color:#b0bec540; }
.planet-nav-btn--venus   { background:#ffcc0220; color:#f9a825; border-color:#f9a82540; }
.planet-nav-btn--earth   { background:#1565c020; color:#42a5f5; border-color:#42a5f540; }
.planet-nav-btn--mars    { background:#c6281e20; color:#ef5350; border-color:#ef535040; }
.planet-nav-btn--jupiter { background:#bf360c20; color:#ff7043; border-color:#ff704340; }
.planet-nav-btn--saturn  { background:#f9a82520; color:#fbc02d; border-color:#fbc02d40; }
.planet-nav-btn--uranus  { background:#00838f20; color:#26c6da; border-color:#26c6da40; }
.planet-nav-btn--neptune { background:#1a237e20; color:#5c6bc0; border-color:#5c6bc040; }

/* hero card */
.planet-hero-card { border-radius:16px; padding:24px 20px; text-align:center; border:1px solid rgba(255,255,255,.1); box-shadow:0 2px 12px rgba(0,0,0,.08); }
.planet-hero-card--mercury { background:linear-gradient(135deg,#37474f,#546e7a); }
.planet-hero-card--venus   { background:linear-gradient(135deg,#4e342e,#795548); }
.planet-hero-card--earth   { background:linear-gradient(135deg,#1a237e,#0d47a1); }
.planet-hero-card--mars    { background:linear-gradient(135deg,#b71c1c,#c62828); }
.planet-hero-card--jupiter { background:linear-gradient(135deg,#bf360c,#e64a19); }
.planet-hero-card--saturn  { background:linear-gradient(135deg,#e65100,#f57f17); }
.planet-hero-card--uranus  { background:linear-gradient(135deg,#006064,#00838f); }
.planet-hero-card--neptune { background:linear-gradient(135deg,#1a237e,#283593); }
.planet-hero-visual { display:flex; justify-content:center; margin-bottom:16px; }
.planet-hero-sphere { border-radius:50%; position:relative; }
.planet-hero-sphere--mercury { width:72px;height:72px;background:radial-gradient(circle at 35% 30%,#cfd8dc,#607d8b); }
.planet-hero-sphere--venus   { width:96px;height:96px;background:radial-gradient(circle at 35% 30%,#fff9c4,#f9a825); }
.planet-hero-sphere--earth   { width:100px;height:100px;background:radial-gradient(circle at 35% 30%,#bbdefb,#1565c0); }
.planet-hero-sphere--mars    { width:82px;height:82px;background:radial-gradient(circle at 35% 30%,#ffccbc,#c62828); }
.planet-hero-sphere--jupiter { width:120px;height:120px;background:radial-gradient(circle at 35% 30%,#ffccbc,#bf360c); }
.planet-hero-sphere--saturn  { width:112px;height:112px;background:radial-gradient(circle at 35% 30%,#fff9c4,#e65100); }
.planet-hero-sphere--uranus  { width:96px;height:96px;background:radial-gradient(circle at 35% 30%,#b2ebf2,#00838f); }
.planet-hero-sphere--neptune { width:96px;height:96px;background:radial-gradient(circle at 35% 30%,#c5cae9,#1a237e); }
.planet-hero-ring { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:6px solid rgba(249,168,37,.5); pointer-events:none; }
.planet-hero-ring--saturn  { width:156px; height:36px; }
.planet-hero-ring--uranus  { width:140px; height:32px; }
.planet-hero-num  { font-size:.75rem; color:rgba(255,255,255,.6); margin-bottom:4px; }
.planet-hero-name { font-size:1.6rem; font-weight:700; color:#fff; }
.planet-hero-type { font-size:.82rem; color:rgba(255,255,255,.7); margin-bottom:10px; }
.planet-hero-badges { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }

/* specs card */
.planet-specs-card { background:#fff; border-radius:16px; padding:20px; border:1px solid #e0e0e0; height:100%; }
.planet-specs-grid-full { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.ss-spec--full { grid-column:1 / -1; }

/* description card (short summary — used on hub page) */
.planet-desc-card { background:#fff; border-radius:16px; padding:20px 24px; border:1px solid #e0e0e0; }
.planet-desc-title { font-size:1rem; font-weight:700; color:#1565c0; margin-bottom:10px; }
.planet-desc-text { font-size:.92rem; line-height:1.65; color:#424242; margin:0; }

/* narrative section (detail page — discorsive paragraphs) */
.planet-narrative { background:#fff; border-radius:16px; padding:28px 32px; border:1px solid #e0e0e0; }
.planet-narrative-title { font-size:1.2rem; font-weight:700; color:#1565c0; margin:0 0 20px; }
.planet-narrative-para {
    font-size:.97rem;
    line-height:1.8;
    color:#212121;
    margin:0 0 18px;
    max-width:72ch;
}
.planet-narrative-para:last-child { margin-bottom:0; }

/* section headings (curiosity, comparison, etc.) */
.planet-section-heading {
    font-size:1.15rem;
    font-weight:700;
    color:#1565c0;
    margin:0 0 20px;
    padding-bottom:8px;
    border-bottom:2px solid #e3f2fd;
}

/* curiosity section — list style (spacious) */
.planet-curiosity-section { }
.planet-curiosity-list { display:flex; flex-direction:column; gap:14px; margin-top:4px; }
.planet-curiosity-item { border-radius:14px; padding:18px 20px; border-left:4px solid; display:flex; gap:16px; align-items:flex-start; }
.planet-curiosity-item--mercury { background:#eceff1; border-color:#607d8b; }
.planet-curiosity-item--venus   { background:#fff8e1; border-color:#f9a825; }
.planet-curiosity-item--earth   { background:#e3f2fd; border-color:#1565c0; }
.planet-curiosity-item--mars    { background:#ffebee; border-color:#c62828; }
.planet-curiosity-item--jupiter { background:#fbe9e7; border-color:#e64a19; }
.planet-curiosity-item--saturn  { background:#fff3e0; border-color:#f57f17; }
.planet-curiosity-item--uranus  { background:#e0f7fa; border-color:#00838f; }
.planet-curiosity-item--neptune { background:#e8eaf6; border-color:#283593; }
.planet-curiosity-num  { font-size:1.5rem; font-weight:800; color:rgba(0,0,0,.2); min-width:32px; line-height:1; }
.planet-curiosity-text { font-size:.93rem; line-height:1.7; margin:0; }

/* keep old grid-based cards too (used on hub/SolarSystemPage) */
.planet-curiosity-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:12px; }
.planet-curiosity-card { border-radius:14px; padding:16px; border-left:4px solid; display:flex; gap:14px; align-items:flex-start; }
.planet-curiosity-card--mercury { background:#eceff1; border-color:#607d8b; }
.planet-curiosity-card--venus   { background:#fff8e1; border-color:#f9a825; }
.planet-curiosity-card--earth   { background:#e3f2fd; border-color:#1565c0; }
.planet-curiosity-card--mars    { background:#ffebee; border-color:#c62828; }
.planet-curiosity-card--jupiter { background:#fbe9e7; border-color:#e64a19; }
.planet-curiosity-card--saturn  { background:#fff3e0; border-color:#f57f17; }
.planet-curiosity-card--uranus  { background:#e0f7fa; border-color:#00838f; }
.planet-curiosity-card--neptune { background:#e8eaf6; border-color:#283593; }

/* comparison card */
.planet-compare-card  { background:#fff; border-radius:16px; padding:28px 32px; border:1px solid #e0e0e0; }
.planet-compare-visual { display:flex; align-items:flex-end; justify-content:center; gap:32px; }
.planet-compare-item  { display:flex; flex-direction:column; align-items:center; gap:8px; }
.planet-compare-sphere { border-radius:50%; position:relative; }
.planet-compare-sphere--earth   { background:radial-gradient(circle at 35% 30%,#bbdefb,#1565c0); }
.planet-compare-sphere--mercury { background:radial-gradient(circle at 35% 30%,#cfd8dc,#607d8b); }
.planet-compare-sphere--venus   { background:radial-gradient(circle at 35% 30%,#fff9c4,#f9a825); }
.planet-compare-sphere--mars    { background:radial-gradient(circle at 35% 30%,#ffccbc,#c62828); }
.planet-compare-sphere--jupiter { background:radial-gradient(circle at 35% 30%,#ffccbc,#bf360c); }
.planet-compare-sphere--saturn  { background:radial-gradient(circle at 35% 30%,#fff9c4,#e65100); }
.planet-compare-sphere--uranus  { background:radial-gradient(circle at 35% 30%,#b2ebf2,#00838f); }
.planet-compare-sphere--neptune { background:radial-gradient(circle at 35% 30%,#c5cae9,#1a237e); }
.planet-compare-ring  { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:4px solid rgba(249,168,37,.5); pointer-events:none; }
.planet-compare-ring--saturn  { width:calc(100% + 36px); height:20px; }
.planet-compare-ring--uranus  { width:calc(100% + 32px); height:18px; }
.planet-compare-label { font-size:.82rem; font-weight:600; }
.planet-compare-sub   { font-size:.72rem; color:#757575; }
.planet-compare-vs    { font-size:1.2rem; font-weight:700; color:#9e9e9e; padding-bottom:24px; }
.planet-compare-ratio { text-align:center; margin-top:16px; font-size:.88rem; color:#424242; }
.planet-compare-stats { border-top:1px solid #eeeeee; padding-top:14px; }
.planet-compare-stat-row { display:grid; grid-template-columns:120px 1fr 32px 1fr; align-items:center; gap:8px; padding:5px 0; border-bottom:1px dashed #eeeeee; font-size:.83rem; }
.planet-compare-stat-label  { font-weight:600; color:#616161; }
.planet-compare-stat-earth  { color:#1565c0; }
.planet-compare-stat-planet { font-weight:600; }
.planet-compare-stat-sep    { text-align:center; color:#9e9e9e; }

/* all-planets quick nav */
.planet-all-nav       { background:#f5f5f5; border-radius:16px; padding:20px; }
.planet-all-nav-title { font-size:.9rem; font-weight:700; color:#424242; margin-bottom:12px; }
.planet-all-nav-grid  { display:flex; flex-wrap:wrap; gap:8px; }
.planet-all-nav-btn   { display:flex; align-items:center; gap:6px; padding:7px 14px; border-radius:20px; text-decoration:none; font-size:.8rem; font-weight:600; border:2px solid transparent; transition:opacity .2s; }
.planet-all-nav-btn:hover   { opacity:.8; }
.planet-all-nav-btn--current { opacity:1 !important; box-shadow:0 0 0 2px rgba(0,0,0,.25); }
.planet-all-nav-btn--mercury { background:#b0bec530; color:#546e7a; border-color:#607d8b30; }
.planet-all-nav-btn--venus   { background:#fff9c430; color:#f57f17; border-color:#f9a82530; }
.planet-all-nav-btn--earth   { background:#e3f2fd; color:#1565c0; border-color:#1565c030; }
.planet-all-nav-btn--mars    { background:#ffebee; color:#c62828; border-color:#c6282830; }
.planet-all-nav-btn--jupiter { background:#fbe9e7; color:#bf360c; border-color:#bf360c30; }
.planet-all-nav-btn--saturn  { background:#fff3e0; color:#e65100; border-color:#e6510030; }
.planet-all-nav-btn--uranus  { background:#e0f7fa; color:#006064; border-color:#00606430; }
.planet-all-nav-btn--neptune { background:#e8eaf6; color:#1a237e; border-color:#1a237e30; }
.planet-all-nav-num  { font-size:.72rem; opacity:.6; }

/* dark mode adjustments */
[data-theme="dark"] .planet-specs-card,
[data-theme="dark"] .planet-desc-card,
[data-theme="dark"] .planet-narrative,
[data-theme="dark"] .planet-compare-card { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
[data-theme="dark"] .planet-desc-text,
[data-theme="dark"] .planet-narrative-para { color:#bdbdbd; }
[data-theme="dark"] .planet-narrative-title,
[data-theme="dark"] .planet-section-heading { color:#90caf9; border-bottom-color:rgba(144,202,249,.15); }
[data-theme="dark"] .planet-all-nav { background:rgba(255,255,255,.04); }
[data-theme="dark"] .planet-compare-stats { border-top-color:rgba(255,255,255,.1); }
[data-theme="dark"] .planet-compare-stat-row { border-bottom-color:rgba(255,255,255,.06); }

@media (max-width:600px) {
    .planet-specs-grid-full { grid-template-columns:1fr; }
    .planet-compare-stat-row { grid-template-columns:90px 1fr 24px 1fr; font-size:.76rem; }
    .planet-nav-bar { gap:4px; }
    .planet-nav-btn,.planet-nav-hub { font-size:.74rem; padding:5px 10px; }
}
/* ============================================================
   Spanish Subject Pages — Styles
   Accent: deep orange #E65100
   ============================================================ */

.topic-header--esp {
    background: linear-gradient(135deg, #E65100 0%, #BF360C 100%);
    padding: 1.5rem 0;
    color: #fff;
}

.topic-header--esp .topic-header-title    { color: #fff; }
.topic-header--esp .topic-header-subtitle { color: rgba(255,255,255,.82); }
.topic-header--esp .topic-back-link       { color: rgba(255,255,255,.72); }
.topic-header--esp .topic-back-link:hover { color: #fff; }

/* ── Vocabulary cards ────────────────────────────────────────── */
.esp-vocab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.esp-vocab-card {
    background: #fff;
    border: 1.5px solid #FFE0B2;
    border-radius: 10px;
    padding: 14px 16px;
    transition: box-shadow .18s, border-color .18s;
}

.esp-vocab-card:hover {
    border-color: #E65100;
    box-shadow: 0 4px 18px rgba(230,81,0,.14);
}

.esp-vocab-word  { font-size: 1.15rem; font-weight: 700; color: #BF360C; }
.esp-vocab-pos   { font-size: 0.72rem; font-weight: 600; color: #90A4AE; text-transform: uppercase; letter-spacing: .5px; }
.esp-vocab-trans { font-size: 0.9rem; color: #37474F; margin-top: 4px; }
.esp-vocab-ex    { font-size: 0.82rem; color: #546E7A; font-style: italic; margin-top: 6px; border-left: 3px solid #FFE0B2; padding-left: 8px; }

/* ── Grammar rules ───────────────────────────────────────────── */
.esp-rule-card {
    background: #fff;
    border-left: 4px solid #E65100;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 6px rgba(230,81,0,.07);
}

.esp-rule-title   { font-size: 1rem; font-weight: 700; color: #BF360C; margin-bottom: 6px; }
.esp-rule-body    { font-size: 0.9rem; color: #37474F; line-height: 1.6; }
.esp-rule-example { background: #FFF3E0; border-radius: 6px; padding: 8px 12px; margin-top: 8px; font-size: 0.88rem; color: #BF360C; font-style: italic; }

[data-theme="dark"] .esp-vocab-card   { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] .esp-vocab-word   { color: #FFCC80; }
[data-theme="dark"] .esp-vocab-trans  { color: var(--bp-text); }
[data-theme="dark"] .esp-vocab-ex     { color: var(--bp-text-muted); border-color: var(--bp-border); }
[data-theme="dark"] .esp-rule-card    { background: var(--bp-surface); border-color: #E65100; }
[data-theme="dark"] .esp-rule-title   { color: #FFCC80; }
[data-theme="dark"] .esp-rule-body    { color: var(--bp-text); }
[data-theme="dark"] .esp-rule-example { background: var(--bp-surface-2); color: #FFCC80; }
/* ============================================================
   Subject Hub Pages — Shared Styles
   Light theme, brand accent: deep orange (#E65100)
   ============================================================ */

/* ── Page wrapper ───────────────────────────────────────────── */

.hub-page {
    min-height: 100vh;
    background: #fafafa;
}

/* ── Hero ───────────────────────────────────────────────────── */

.hub-hero {
    background: linear-gradient(160deg, #ffffff 0%, #fff8f0 100%);
    border-bottom: 4px solid #E65100;
    padding: 1.8rem 1.5rem 1.5rem;
    text-align: center;
}

.hub-hero-content {
    max-width: 720px;
    margin: 0 auto;
}

.hub-back-link {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #5D4037;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity .15s;
}

.hub-back-link:hover { opacity: 1; text-decoration: underline; }

.hub-hero-title {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 800;
    color: #BF360C;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}

.hub-hero-subtitle {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #5D4037;
    margin: 0 0 12px;
}

.hub-hero-stats {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hub-hero-stat {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFCCBC;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.88rem;
    font-weight: 600;
}

/* ── Section title ──────────────────────────────────────────── */

.hub-section-title {
    color: #BF360C !important;
    font-weight: 700;
}

/* ── Tip cards (how-to-use — used by History) ───────────────── */

.hub-tip-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: white;
    border: 2px solid #FFE0B2;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.hub-tip-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.hub-tip-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #BF360C;
    margin-bottom: 4px;
}

.hub-tip-body {
    font-size: 0.82rem;
    color: #78909c;
    line-height: 1.5;
}

/* ── Topic cards (science / mathematics / geography) ────────── */

.hub-topic-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #263238;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hub-topic-card:hover {
    transform: translateY(-5px);
    border-color: #FF6D00;
    box-shadow: 0 10px 32px rgba(230, 81, 0, 0.18);
    text-decoration: none;
    color: #263238;
}

.hub-topic-card-icon {
    font-size: 3.5rem;
    text-align: center;
    padding: 1.5rem .5rem .75rem;
    background: #FFF8F0;
}

.hub-topic-card-body {
    padding: 1rem 1.4rem 1.4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hub-topic-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #263238;
    margin: 0 0 .6rem;
}

.hub-topic-card-desc {
    font-size: .9rem;
    color: #546e7a;
    line-height: 1.6;
    flex: 1;
    margin: 0 0 1rem;
}

.hub-topic-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .8rem;
}

.hub-topic-card-tags span {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFCCBC;
    border-radius: 20px;
    padding: .2rem .65rem;
    font-size: .7rem;
    font-weight: 600;
}

.hub-topic-card-cta {
    font-size: .9rem;
    font-weight: 600;
    color: #E65100;
}

/* ── Info grid (bottom section — science / math / geography) ── */

.hub-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
}

.hub-info-card {
    background: white;
    border: 1px solid #FFE0B2;
    border-top: 3px solid #E65100;
    border-radius: 12px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.hub-info-icon {
    font-size: 1.8rem;
}

.hub-info-card strong {
    color: #BF360C;
    font-size: 1rem;
}

.hub-info-card p {
    color: #546e7a;
    font-size: .88rem;
    margin: 0;
    line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════
   TopicPageLayout — shared inner-page wrapper + header
   Palette:  math=orange  sci=blue  geo=green  hist=brown
   ════════════════════════════════════════════════════════════ */

.topic-page                { min-height: 100vh; background: #fafafa; }
.topic-page--math          { background: #FFF8F0; }
.topic-page--sci           { background: #EFF4FF; }
.topic-page--geo           { background: #F1F8E9; }
.topic-page--hist          { background: #EFEBE9; }
.topic-page--phys          { background: #E0F7FA; }
.topic-page--mus           { background: #F3E5F5; }
.topic-page--bio           { background: #F1F8E9; }
.topic-page--ita           { background: #FFF8F8; }

.topic-header {
  border-radius: 10px 10px 0 0;
  padding: 1.2rem 1rem 1.1rem;
  text-align: center;
  color: white;
}
.topic-header--math { background: linear-gradient(135deg, #BF360C 0%, #E65100 60%, #FF6D00 100%); border-bottom: 3px solid #BF360C; }
.topic-header--sci  { background: linear-gradient(135deg, #0D47A1 0%, #1565C0 60%, #1976D2 100%); border-bottom: 3px solid #0D47A1; }
.topic-header--geo  { background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 60%, #388E3C 100%); border-bottom: 3px solid #1B5E20; }
.topic-header--hist { background: linear-gradient(135deg, #3E2723 0%, #4E342E 60%, #6D4C41 100%); border-bottom: 3px solid #3E2723; }
.topic-header--phys { background: linear-gradient(135deg, #006064 0%, #00838F 60%, #00ACC1 100%); border-bottom: 3px solid #006064; }
.topic-header--mus  { background: linear-gradient(135deg, #4A148C 0%, #6A1B9A 60%, #8E24AA 100%); border-bottom: 3px solid #4A148C; }
.topic-header--bio  { background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 60%, #558B2F 100%); border-bottom: 3px solid #1B5E20; }
.topic-header--ita  { background: linear-gradient(135deg, #7F0000 0%, #B71C1C 60%, #D32F2F 100%); border-bottom: 3px solid #7F0000; }

.topic-header-inner { max-width: 900px; margin: 0 auto; }

.topic-back-link {
    display: inline-block;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    transition: color 0.15s;
}
.topic-back-link:hover { color: white; }

.topic-header-title {
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    font-weight: 800;
    color: white;
    margin: 0 0 0.4rem;
    letter-spacing: -0.3px;
}
.topic-header-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.97rem;
    margin: 0;
    line-height: 1.5;
    max-width: 680px;
    margin-inline: auto;
}

/* ════════════════════════════════════════════════════════════
   Hub subject themes — applied via .hub-hero--{subj} and
   .hub-page--{subj} on SubjectHubPage for per-subject tinting
   ════════════════════════════════════════════════════════════ */

/* Math: inherits the default .hub-hero orange styles */
.hub-hero--math {}

/* Science */
.hub-hero--sci                           { background: linear-gradient(160deg, #ffffff 0%, #EFF4FF 100%); border-bottom-color: #1565C0; }
.hub-hero--sci .hub-hero-title           { color: #0D47A1; }
.hub-hero--sci .hub-hero-subtitle        { color: #1A237E; }
.hub-hero--sci .hub-hero-stat            { background: #E3F2FD; color: #1565C0; border-color: #BBDEFB; }
.hub-page--sci .hub-section-title        { color: #0D47A1 !important; }
.hub-page--sci .hub-tip-title            { color: #0D47A1; }
.hub-page--sci .hub-topic-card-icon      { background: #EFF4FF; }
.hub-page--sci .hub-topic-card-tags span { background: #E3F2FD; color: #1565C0; border-color: #BBDEFB; }
.hub-page--sci .hub-topic-card-cta       { color: #1565C0; }
.hub-page--sci .hub-topic-card:hover     { border-color: #1565C0; box-shadow: 0 10px 32px rgba(21,101,192,.18); }
.hub-page--sci .hub-info-card            { border-color: #BBDEFB; border-top-color: #1565C0; }
.hub-page--sci .hub-info-card strong     { color: #0D47A1; }

/* Geography */
.hub-hero--geo                           { background: linear-gradient(160deg, #ffffff 0%, #F1F8E9 100%); border-bottom-color: #2E7D32; }
.hub-hero--geo .hub-hero-title           { color: #1B5E20; }
.hub-hero--geo .hub-hero-subtitle        { color: #33691E; }
.hub-hero--geo .hub-hero-stat            { background: #E8F5E9; color: #2E7D32; border-color: #C8E6C9; }
.hub-page--geo .hub-section-title        { color: #1B5E20 !important; }
.hub-page--geo .hub-tip-title            { color: #1B5E20; }
.hub-page--geo .hub-topic-card-icon      { background: #F1F8E9; }
.hub-page--geo .hub-topic-card-tags span { background: #E8F5E9; color: #2E7D32; border-color: #C8E6C9; }
.hub-page--geo .hub-topic-card-cta       { color: #2E7D32; }
.hub-page--geo .hub-topic-card:hover     { border-color: #2E7D32; box-shadow: 0 10px 32px rgba(46,125,50,.18); }
.hub-page--geo .hub-info-card            { border-color: #C8E6C9; border-top-color: #2E7D32; }
.hub-page--geo .hub-info-card strong     { color: #1B5E20; }

/* History */
.hub-hero--hist                          { background: linear-gradient(160deg, #ffffff 0%, #EFEBE9 100%); border-bottom-color: #5D4037; }
.hub-hero--hist .hub-hero-title          { color: #3E2723; }
.hub-hero--hist .hub-hero-subtitle       { color: #4E342E; }
.hub-hero--hist .hub-hero-stat           { background: #EFEBE9; color: #5D4037; border-color: #D7CCC8; }
.hub-page--hist .hub-section-title       { color: #3E2723 !important; }
.hub-page--hist .hub-tip-title           { color: #3E2723; }
.hub-page--hist .hub-topic-card-icon     { background: #EFEBE9; }
.hub-page--hist .hub-topic-card-tags span{ background: #EFEBE9; color: #5D4037; border-color: #D7CCC8; }
.hub-page--hist .hub-topic-card-cta      { color: #5D4037; }
.hub-page--hist .hub-topic-card:hover    { border-color: #5D4037; box-shadow: 0 10px 32px rgba(93,64,55,.18); }
.hub-page--hist .hub-info-card           { border-color: #D7CCC8; border-top-color: #5D4037; }
.hub-page--hist .hub-info-card strong    { color: #3E2723; }

/* Physics */
.hub-hero--phys                           { background: linear-gradient(160deg, #ffffff 0%, #E0F7FA 100%); border-bottom-color: #00838F; }
.hub-hero--phys .hub-hero-title           { color: #006064; }
.hub-hero--phys .hub-hero-subtitle        { color: #004D40; }
.hub-hero--phys .hub-hero-stat            { background: #E0F7FA; color: #00838F; border-color: #B2EBF2; }
.hub-page--phys .hub-section-title        { color: #006064 !important; }
.hub-page--phys .hub-tip-title            { color: #006064; }
.hub-page--phys .hub-topic-card-icon      { background: #E0F7FA; }
.hub-page--phys .hub-topic-card-tags span { background: #E0F7FA; color: #00838F; border-color: #B2EBF2; }
.hub-page--phys .hub-topic-card-cta       { color: #00838F; }
.hub-page--phys .hub-topic-card:hover     { border-color: #00ACC1; box-shadow: 0 10px 32px rgba(0,172,193,.18); }
.hub-page--phys .hub-info-card            { border-color: #B2EBF2; border-top-color: #00838F; }
.hub-page--phys .hub-info-card strong     { color: #006064; }

/* Music */
.hub-hero--mus                           { background: linear-gradient(160deg, #ffffff 0%, #F3E5F5 100%); border-bottom-color: #7B1FA2; }
.hub-hero--mus .hub-hero-title           { color: #4A148C; }
.hub-hero--mus .hub-hero-subtitle        { color: #6A1B9A; }
.hub-hero--mus .hub-hero-stat            { background: #F3E5F5; color: #7B1FA2; border-color: #E1BEE7; }
.hub-page--mus .hub-section-title        { color: #4A148C !important; }
.hub-page--mus .hub-tip-title            { color: #4A148C; }
.hub-page--mus .hub-topic-card-icon      { background: #F3E5F5; }
.hub-page--mus .hub-topic-card-tags span { background: #F3E5F5; color: #7B1FA2; border-color: #E1BEE7; }
.hub-page--mus .hub-topic-card-cta       { color: #7B1FA2; }
.hub-page--mus .hub-topic-card:hover     { border-color: #AB47BC; box-shadow: 0 10px 32px rgba(106,27,154,.18); }
.hub-page--mus .hub-info-card            { border-color: #E1BEE7; border-top-color: #7B1FA2; }
.hub-page--mus .hub-info-card strong     { color: #4A148C; }

/* Biology */
.hub-hero--bio                           { background: linear-gradient(160deg, #ffffff 0%, #F1F8E9 100%); border-bottom-color: #2E7D32; }
.hub-hero--bio .hub-hero-title           { color: #1B5E20; }
.hub-hero--bio .hub-hero-subtitle        { color: #33691E; }
.hub-hero--bio .hub-hero-stat            { background: #E8F5E9; color: #2E7D32; border-color: #A5D6A7; }
.hub-page--bio .hub-section-title        { color: #1B5E20 !important; }
.hub-page--bio .hub-tip-title            { color: #1B5E20; }
.hub-page--bio .hub-topic-card-icon      { background: #F1F8E9; }
.hub-page--bio .hub-topic-card-tags span { background: #E8F5E9; color: #2E7D32; border-color: #A5D6A7; }
.hub-page--bio .hub-topic-card-cta       { color: #2E7D32; }
.hub-page--bio .hub-topic-card:hover     { border-color: #388E3C; box-shadow: 0 10px 32px rgba(46,125,50,.18); }
.hub-page--bio .hub-info-card            { border-color: #A5D6A7; border-top-color: #2E7D32; }
.hub-page--bio .hub-info-card strong     { color: #1B5E20; }

/* Italian */
.hub-hero--ita                           { background: linear-gradient(160deg, #ffffff 0%, #FBE9E7 100%); border-bottom-color: #C62828; }
.hub-hero--ita .hub-hero-title           { color: #B71C1C; }
.hub-hero--ita .hub-hero-subtitle        { color: #C62828; }
.hub-hero--ita .hub-hero-stat            { background: #FFEBEE; color: #B71C1C; border-color: #FFCDD2; }
.hub-page--ita .hub-section-title        { color: #B71C1C !important; }
.hub-page--ita .hub-tip-title            { color: #B71C1C; }
.hub-page--ita .hub-topic-card-icon      { background: #FBE9E7; }
.hub-page--ita .hub-topic-card-tags span { background: #FFEBEE; color: #C62828; border-color: #FFCDD2; }
.hub-page--ita .hub-topic-card-cta       { color: #C62828; }
.hub-page--ita .hub-topic-card:hover     { border-color: #D32F2F; box-shadow: 0 10px 32px rgba(183,28,28,.18); }
.hub-page--ita .hub-info-card            { border-color: #FFCDD2; border-top-color: #C62828; }
.hub-page--ita .hub-info-card strong     { color: #B71C1C; }

/* English */
.hub-hero--eng                           { background: linear-gradient(160deg, #ffffff 0%, #E3F2FD 100%); border-bottom-color: #1565C0; }
.hub-hero--eng .hub-hero-title           { color: #0D47A1; }
.hub-hero--eng .hub-hero-subtitle        { color: #1565C0; }
.hub-hero--eng .hub-hero-stat            { background: #E3F2FD; color: #1565C0; border-color: #BBDEFB; }
.hub-page--eng .hub-section-title        { color: #0D47A1 !important; }
.hub-page--eng .hub-tip-title            { color: #0D47A1; }
.hub-page--eng .hub-topic-card-icon      { background: #E3F2FD; }
.hub-page--eng .hub-topic-card-tags span { background: #E3F2FD; color: #1565C0; border-color: #BBDEFB; }
.hub-page--eng .hub-topic-card-cta       { color: #1565C0; }
.hub-page--eng .hub-topic-card:hover     { border-color: #1976D2; box-shadow: 0 10px 32px rgba(21,101,192,.18); }
.hub-page--eng .hub-info-card            { border-color: #BBDEFB; border-top-color: #1565C0; }
.hub-page--eng .hub-info-card strong     { color: #0D47A1; }

/* Spanish */
.hub-hero--esp                           { background: linear-gradient(160deg, #ffffff 0%, #FFF8E1 100%); border-bottom-color: #E65100; }
.hub-hero--esp .hub-hero-title           { color: #BF360C; }
.hub-hero--esp .hub-hero-subtitle        { color: #E64A19; }
.hub-hero--esp .hub-hero-stat            { background: #FFF3E0; color: #E65100; border-color: #FFE0B2; }
.hub-page--esp .hub-section-title        { color: #BF360C !important; }
.hub-page--esp .hub-tip-title            { color: #BF360C; }
.hub-page--esp .hub-topic-card-icon      { background: #FFF8E1; }
.hub-page--esp .hub-topic-card-tags span { background: #FFF3E0; color: #E65100; border-color: #FFE0B2; }
.hub-page--esp .hub-topic-card-cta       { color: #E65100; }
.hub-page--esp .hub-topic-card:hover     { border-color: #F4511E; box-shadow: 0 10px 32px rgba(191,54,12,.18); }
.hub-page--esp .hub-info-card            { border-color: #FFE0B2; border-top-color: #E65100; }
.hub-page--esp .hub-info-card strong     { color: #BF360C; }

/* Computer Science */
.hub-hero--cs                            { background: linear-gradient(160deg, #ffffff 0%, #E8EAF6 100%); border-bottom-color: #283593; }
.hub-hero--cs .hub-hero-title            { color: #1A237E; }
.hub-hero--cs .hub-hero-subtitle         { color: #283593; }
.hub-hero--cs .hub-hero-stat             { background: #E8EAF6; color: #283593; border-color: #C5CAE9; }
.hub-page--cs .hub-section-title         { color: #1A237E !important; }
.hub-page--cs .hub-tip-title             { color: #1A237E; }
.hub-page--cs .hub-topic-card-icon       { background: #E8EAF6; }
.hub-page--cs .hub-topic-card-tags span  { background: #E8EAF6; color: #283593; border-color: #C5CAE9; }
.hub-page--cs .hub-topic-card-cta        { color: #283593; }
.hub-page--cs .hub-topic-card:hover      { border-color: #3949AB; box-shadow: 0 10px 32px rgba(40,53,147,.18); }
.hub-page--cs .hub-info-card             { border-color: #C5CAE9; border-top-color: #283593; }
.hub-page--cs .hub-info-card strong      { color: #1A237E; }

/* ════════════════════════════════════════════════════════════
   Dark mode overrides
   ════════════════════════════════════════════════════════════ */

[data-theme="dark"] .hub-page           { background: var(--bp-bg); }
[data-theme="dark"] .hub-hero           { background: var(--bp-surface); border-bottom-color: #E65100; }
[data-theme="dark"] .hub-hero--sci      { background: var(--bp-surface); }
[data-theme="dark"] .hub-hero--geo      { background: var(--bp-surface); }
[data-theme="dark"] .hub-hero--hist     { background: var(--bp-surface); }
[data-theme="dark"] .hub-hero--phys     { background: var(--bp-surface); }
[data-theme="dark"] .hub-hero--mus      { background: var(--bp-surface); }
[data-theme="dark"] .hub-hero--bio      { background: var(--bp-surface); }
[data-theme="dark"] .hub-hero--ita      { background: var(--bp-surface); }
[data-theme="dark"] .hub-hero--eng      { background: var(--bp-surface); }
[data-theme="dark"] .hub-hero--esp      { background: var(--bp-surface); }
[data-theme="dark"] .hub-hero--cs       { background: var(--bp-surface); }
[data-theme="dark"] .hub-hero-title     { color: var(--bp-text) !important; }
[data-theme="dark"] .hub-hero-subtitle  { color: var(--bp-text-muted) !important; }
[data-theme="dark"] .hub-hero-stat      { background: var(--bp-surface-2); color: var(--bp-text-muted); border-color: var(--bp-border); }
[data-theme="dark"] .hub-back-link      { color: var(--bp-text-muted); }

[data-theme="dark"] .hub-section-title  { color: var(--bp-text) !important; }
[data-theme="dark"] .hub-tip-card       { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] .hub-tip-title      { color: var(--bp-text) !important; }
[data-theme="dark"] .hub-tip-body       { color: var(--bp-text-muted); }

[data-theme="dark"] .hub-topic-card     { background: var(--bp-surface); border-color: var(--bp-border); color: var(--bp-text); }
[data-theme="dark"] .hub-topic-card:hover { color: var(--bp-text); border-color: #E65100; }
[data-theme="dark"] .hub-topic-card-icon { background: var(--bp-surface-2); }
[data-theme="dark"] .hub-topic-card-title { color: var(--bp-text); }
[data-theme="dark"] .hub-topic-card-desc  { color: var(--bp-text-muted); }
[data-theme="dark"] .hub-topic-card-tags span { background: var(--bp-surface-2); color: var(--bp-text-muted); border-color: var(--bp-border); }
[data-theme="dark"] .hub-topic-card-cta  { color: var(--bp-text-muted); }

[data-theme="dark"] .hub-info-card      { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] .hub-info-card strong { color: var(--bp-text); }
[data-theme="dark"] .hub-info-card p    { color: var(--bp-text-muted); }

[data-theme="dark"] .topic-page,
[data-theme="dark"] .topic-page--math,
[data-theme="dark"] .topic-page--sci,
[data-theme="dark"] .topic-page--geo,
[data-theme="dark"] .topic-page--hist,
[data-theme="dark"] .topic-page--phys,
[data-theme="dark"] .topic-page--mus,
[data-theme="dark"] .topic-page--bio,
[data-theme="dark"] .topic-page--ita,
[data-theme="dark"] .topic-page--eng,
[data-theme="dark"] .topic-page--esp,
[data-theme="dark"] .topic-page--cs    { background: var(--bp-bg); }

[data-theme="dark"] .hub-page--sci .hub-topic-card-icon { background: var(--bp-surface-2); }
[data-theme="dark"] .hub-page--sci .hub-topic-card-tags span,
[data-theme="dark"] .hub-page--geo .hub-topic-card-tags span,
[data-theme="dark"] .hub-page--hist .hub-topic-card-tags span,
[data-theme="dark"] .hub-page--phys .hub-topic-card-tags span,
[data-theme="dark"] .hub-page--mus .hub-topic-card-tags span,
[data-theme="dark"] .hub-page--bio .hub-topic-card-tags span,
[data-theme="dark"] .hub-page--ita .hub-topic-card-tags span,
[data-theme="dark"] .hub-page--eng .hub-topic-card-tags span,
[data-theme="dark"] .hub-page--esp .hub-topic-card-tags span,
[data-theme="dark"] .hub-page--cs .hub-topic-card-tags span { background: var(--bp-surface-2); color: var(--bp-text-muted); border-color: var(--bp-border); }
[data-theme="dark"] [class*="hub-page--"] .hub-info-card { background: var(--bp-surface); border-color: var(--bp-border); }
[data-theme="dark"] [class*="hub-page--"] .hub-info-card strong { color: var(--bp-text); }
[data-theme="dark"] [class*="hub-page--"] .hub-hero-stat { background: var(--bp-surface-2); color: var(--bp-text-muted); border-color: var(--bp-border); }
/* ============================================================
   Subject Pages — Shared Styles
   Used by all subject topic/exercise pages across Mathematics,
   Physics, Science, Grammar, History, Geography, Music, Biology.
   ============================================================ */

/* ── Exercise hint (format info above input fields) ─────────── */

.exercise-hint {
    font-size: 0.85rem;
    color: #546e7a;
    margin-top: 8px;
    margin-bottom: 32px;
    line-height: 1.5;
}

.exercise-hint code {
    font-size: inherit !important;
    font-family: 'Consolas', 'Monaco', monospace;
    color: #c62828;
    font-weight: 700;
    background: rgba(198, 40, 40, 0.09);
    padding: 0 4px;
    border-radius: 3px;
}

/* ── Exercise action bar (Casuale + Soluzione / Calcola buttons) ─ */

.exercise-action-bar {
  display: flex;
  gap: 8px;
  width: 100%;
  padding-top: 8px;
}

/* Buttons inside the ExerciseActionBar component */
.exercise-action-bar .mud-button-root {
    flex: 1;
    min-width: 0;
    height: 56px !important;
}

/* ── Button column alignment in MudGrid rows ─────────────────── */
/* Any MudItem that holds a button uses Class="d-flex" by convention.
   We pin all such items to the top of the row so they don't stretch
   to match taller adjacent input-field items.
   We exclude "align-end" and "align-items-center" variants that
   intentionally use different positioning (e.g. GrammarAdminPage). */
.mud-item.d-flex:not(.align-end):not(.align-items-center) {
    align-items: flex-start !important; /* pin children to top edge */
    align-self: flex-start;             /* don't stretch within MudGrid row */
}

/* Standalone exercise buttons (Semplifica, Calcola, Reset…)
   that are direct children of a d-flex MudItem */
.mud-item.d-flex:not(.align-end):not(.align-items-center) > button.mud-button-root:not(.mud-icon-button) {
    height: 56px !important;
    width: 100%;
}

/* ── Result card ────────────────────────────────────────────── */

.result-card {
    border-radius: 12px !important;
    max-width: 800px;
}

.result-header {
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

/* ── Steps list (numbered steps inside result cards) ────────── */

.steps-list {
    padding-left: 20px;
    margin: 0;
}

.steps-list li {
    padding: 4px 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Solution step — bold the full last step, but only colour the result fraction */
.steps-list li:last-child {
    font-weight: 700;
}

.steps-list li:last-child .fraction-num,
.steps-list li:last-child .fraction-den {
    color: #2e7d32;
}

.steps-list li:last-child .fraction-bar {
    background-color: #2e7d32;
}

/* ── Page description text ──────────────────────────────────── */

.topic-description {
    color: #455a64;
    line-height: 1.7;
}

/* ── Print bar ───────────────────────────────────────────────── */

.print-bar {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    padding: 8px 0 4px;
    opacity: 0.75;
}

/* Hidden on screen, revealed when printing selectively */
.no-print-screen {
    display: none;
}

/* ── Print styles ────────────────────────────────────────────── */

@media print {
    /* Reveal hidden section if needed */
    .no-print-screen {
        display: block !important;
    }

    /* Hide all chrome: sidebar nav, header, tabs, back link, print bar, buttons */
    .sidebar,
    .top-row,
    .topic-header,
    .math-topic-tabs,
    .print-bar,
    .topic-back-link,
    .mud-drawer,
    .mud-appbar,
    button.mud-button-root,
    .mud-icon-button {
        display: none !important;
    }

    /* Let the main content fill the full page width without sidebar */
    .page {
        display: block !important;
    }

    /* Remove colored backgrounds and shadows — ink efficient */
    *,
    *::before,
    *::after {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Keep card borders for visual separation */
    .mud-paper,
    .geo-shape-card,
    .result-card,
    .math-explanation-card {
        border: 1px solid #888 !important;
        page-break-inside: avoid;
    }

    /* Expand all solution sections when printing */
    .no-print-screen .steps-list,
    .no-print-screen .mud-alert {
        display: block !important;
    }

    /* Selective printing via body data attribute */
    body[data-print-mode="theory"] .print-content--exercises {
        display: none !important;
    }

    body[data-print-mode="exercises"] .print-content--theory {
        display: none !important;
    }

    /* Page layout */
    @page {
        margin: 1.5cm;
    }

    body {
        font-size: 11pt;
    }
}