:root {
            --paper: #0B1120;
            --card: #111B2E;
            --ink: #E5F3FF;
            --muted: #91A4BA;
            --text-primary: #E4EBF2;
            --text-secondary: #A9B7C6;
            --text-accent: #22D3EE;
            --metal: #22D3EE;
            --nonmetal: #34D399;
            --noble: #A78BFA;
            --accent: #22D3EE;
            --accent-strong: #0891B2;
            --accent-soft: #17283D;
            --line: #26364D;
            --heat-low: #67E8F9;
            --heat-mid: #22D3EE;
            --heat-high: #A78BFA;
        }
        html { scroll-behavior: smooth; }
        body {
            background: var(--paper) !important;
            color: var(--ink) !important;
            font-family: 'Be Vietnam Pro', sans-serif !important;
        }
        :focus-visible {
            outline: 3px solid var(--accent) !important;
            outline-offset: 2px;
        }
        .site-header {
            background: #080D18;
            color: #fff;
            border-bottom: 1px solid var(--line);
            box-shadow: 0 8px 32px rgb(0 0 0 / 24%);
        }
        .brand-mark {
            background: linear-gradient(135deg, #0891B2, #7C3AED);
            color: #fff;
            box-shadow: 0 0 24px rgb(34 211 238 / 30%);
        }
        .header-subtitle { color: #91A4BA; }
        .brand-highlight { color: #22D3EE; }
        .lab-status { color: #7EE7C4; letter-spacing: 0.08em; }
        .lab-status i { font-size: 0.5rem; color: #34D399; text-shadow: 0 0 10px #34D399; }
        .brand-badge {
            display: inline-flex;
            margin-left: 0.25rem;
            padding: 0.05rem 0.35rem;
            border: 1px solid rgb(255 255 255 / 55%);
            border-radius: 999px;
            color: #fff;
            font-size: 0.9em;
            font-weight: 700;
            white-space: nowrap;
        }
        .header-tools { flex-wrap: wrap; }
        .heatmap-control {
            border: 1px solid var(--line);
            background: var(--card);
        }
        .heatmap-option {
            border: 0;
            border-radius: 5px;
            padding: 0.4rem 0.55rem;
            color: var(--ink);
            background: var(--accent-soft);
            font-size: 0.7rem;
            font-weight: 600;
            white-space: nowrap;
            transition: color 0.2s ease, background-color 0.2s ease;
        }
        .heatmap-option[aria-pressed="true"] {
            color: #fff;
            background: #0E7490;
        }
        .secondary-action {
            color: var(--ink);
            background: #17283D;
            border-color: var(--line);
        }
        .secondary-action:hover { background: #1D3551; }
        .primary-action {
            color: #fff;
            background: linear-gradient(110deg, #0891B2, #6D28D9);
            box-shadow: 0 0 22px rgb(34 211 238 / 15%);
        }
        .primary-action:hover { filter: brightness(1.15); }
        .theme-toggle {
            color: var(--ink);
            background: var(--accent-soft);
            border-color: var(--line);
        }
        .theme-icon {
            display: block;
            width: 1rem;
            height: 1rem;
        }
        .bg-white { background-color: var(--card) !important; }
        #searchInput { background: var(--card) !important; color: var(--ink) !important; }
        #searchSuggestions { background: var(--card) !important; border-color: var(--line) !important; }
        #searchSuggestions [role="option"] { color: var(--ink) !important; }
        #searchSuggestions [role="option"]:hover,
        #searchSuggestions [role="option"]:focus,
        #searchSuggestions [role="option"].bg-slate-800 { background: var(--accent-soft) !important; }
        .heatmap-legend {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.55rem;
            padding: 0.5rem 0.75rem;
            color: var(--muted);
            font-size: 0.7rem;
        }
        .heatmap-title { margin-right: auto; color: var(--ink); font-weight: 700; }
        .heatmap-gradient {
            width: min(22vw, 150px);
            height: 9px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--heat-low), var(--heat-mid) 50%, var(--heat-high));
        }
        .heatmap-missing { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.6rem; }
        .heatmap-missing i {
            width: 14px;
            height: 14px;
            border: 1px solid #9AA8B5;
            background: repeating-linear-gradient(135deg, #173249, #173249 3px, #263B55 3px, #263B55 4px);
        }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .element-card {
            position: relative;
            z-index: 0;
            border-radius: 4px !important;
            border-width: 1px;
            transition: background-color 0.3s ease, border-color 0.2s ease, outline-color 0.2s ease;
            user-select: none;
            box-shadow: none !important;
            touch-action: manipulation;
        }
        .element-card:hover { z-index: 2; }
        .element-card[data-state="khí"] { border-style: dotted !important; border-width: 2px; }
        .element-card[data-state="lỏng"] { border-style: dashed !important; border-width: 2px; }
        .element-card[data-state="rắn"] { border-style: solid !important; }
        .element-card[style*="--heatmap-color"] {
            background-color: var(--heatmap-color) !important;
        }
        .element-card.heatmap-missing {
            background: repeating-linear-gradient(135deg, #173249, #173249 5px, #263B55 5px, #263B55 7px) !important;
        }
        .element-card.period-highlight,
        .element-card.group-highlight {
            filter: brightness(0.94);
        }
        .element-card.selected-element {
            z-index: 3;
            outline: 2px solid var(--accent);
            outline-offset: 1px;
        }
        .grid-periodic { gap: 4px; }
        .element-card .element-symbol { font-weight: 800 !important; }
        .element-card .element-symbol,
        .element-card .element-number,
        .element-card .element-mass,
        .element-card > div:nth-child(3) { color: #3B2418 !important; }
        .element-example-card,
        .element-example-card * { color: #3B2418 !important; }
        .element-card .element-number,
        .element-card .element-mass { font-size: max(10px, 0.7vw); }
        .element-card > div:nth-child(3) { font-weight: 500 !important; }
        #periodicGrid > div:nth-child(n) {
            transition: background-color 0.3s ease;
        }
        #detailModal {
            align-items: center;
            justify-content: center;
            padding: 0.5rem;
            background: rgb(2 6 23 / 80%) !important;
            backdrop-filter: blur(4px) !important;
        }
        #detailModal > div {
            width: min(56rem, 100%);
            height: auto;
            max-height: 95vh;
            border-radius: 1rem;
            border-color: var(--line);
            box-shadow: 0 24px 64px rgb(22 38 58 / 28%);
        }
        #detailModal #modalHeaderBg { background: var(--paper); border-color: var(--line); }
        #detailModal .bg-slate-900 {
            background: #422D21 !important;
            border-radius: 1.15rem;
        }
        #detailModal .bg-slate-950 { background: #211710 !important; }
        #detailModal .bg-slate-800 { background: #523A2A !important; }
        #detailModal .text-cyan-400 { color: var(--accent-soft) !important; }
        #detailModal .state-legend { color: var(--muted); }
        .element-insight-card {
            padding: 0.8rem;
            border: 1px solid var(--line);
            border-radius: 0.75rem;
            background: rgb(8 145 178 / 7%);
        }
        .element-insight-card h4 { margin: 0 0 0.35rem; color: var(--ink); font-size: 0.7rem; font-weight: 800; }
        .element-insight-card h4 i { margin-right: 0.35rem; color: var(--accent); }
        .element-insight-card p { margin: 0; color: var(--muted); font-size: 0.68rem; line-height: 1.6; }
        .environment-status { display: inline-flex; margin: 0 0 0.45rem; padding: 0.2rem 0.45rem; border-radius: 999px; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.035em; }
        .environment-status.critical { color: #FECACA; background: rgb(220 38 38 / 20%); }
        .environment-status.warning { color: #FDE68A; background: rgb(217 119 6 / 20%); }
        .environment-status.neutral { color: #A7F3D0; background: rgb(5 150 105 / 18%); }
        #compareModal,
        #quizModal {
            background: rgb(22 38 58 / 28%) !important;
            backdrop-filter: none !important;
        }
        #compareModal > div,
        #quizModal > div {
            border-color: var(--line);
            box-shadow: 0 18px 50px rgb(22 38 58 / 18%);
        }
        .text-cyan-400,
        .text-cyan-500,
        .text-cyan-600,
        .text-cyan-700,
        .text-cyan-800,
        .text-cyan-900 { color: var(--accent) !important; }
        .border-cyan-100,
        .border-cyan-300,
        .border-cyan-400,
        .border-cyan-500 { border-color: var(--accent) !important; }
        .bg-cyan-600,
        .hover\:bg-cyan-500:hover { background-color: var(--accent) !important; }
        .bg-cyan-100 { background-color: var(--accent-soft) !important; }
        .bg-cyan-50 { background-color: #FFF0E3 !important; }
        .text-slate-900,
        .text-slate-800,
        .text-slate-700 { color: var(--text-primary) !important; }
        .text-slate-600,
        .text-slate-500,
        .text-slate-400 { color: var(--text-secondary) !important; }
        .quiz-correct {
            color: #215E45;
            background: #E3F4EA;
            border-color: #9FD5B4;
        }
        .quiz-incorrect {
            color: var(--ink);
            background: #FCE8E3;
            border-color: #E8B7A8;
        }
        .quiz-progress-track {
            height: 7px;
            overflow: hidden;
            border-radius: 999px;
            background: #E7EAF0;
        }
        .quiz-progress-fill {
            width: 0;
            height: 100%;
            border-radius: inherit;
            background: var(--accent);
            transition: width 0.3s ease;
        }
        [data-theme="dark"] body { background: var(--paper) !important; color: var(--ink) !important; }
        [data-theme="dark"] .site-header { background: #080D18 !important; color: #fff !important; }
        [data-theme="dark"] .bg-white,
        [data-theme="dark"] #searchInput,
        [data-theme="dark"] #searchSuggestions,
        [data-theme="dark"] .heatmap-control,
        [data-theme="dark"] .secondary-action,
        [data-theme="dark"] .theme-toggle {
            background-color: var(--card) !important;
            color: var(--ink) !important;
            border-color: var(--line) !important;
        }
        [data-theme="dark"] .bg-slate-50,
        [data-theme="dark"] .bg-slate-100 { background-color: #172338 !important; }
        [data-theme="dark"] .text-slate-900,
        [data-theme="dark"] .text-slate-800,
        [data-theme="dark"] .text-slate-700 { color: var(--text-primary) !important; }
        [data-theme="dark"] .text-slate-600,
        [data-theme="dark"] .text-slate-500,
        [data-theme="dark"] .text-slate-400 { color: var(--text-secondary) !important; }
        [data-theme="dark"] .element-example-card,
        [data-theme="dark"] .element-example-card * { color: #06202A !important; }
        [data-theme="dark"] .border-slate-100,
        [data-theme="dark"] .border-slate-200,
        [data-theme="dark"] .border-slate-300 { border-color: var(--line) !important; }
        [data-theme="dark"] .element-card .element-symbol,
        [data-theme="dark"] .element-card .element-number,
        [data-theme="dark"] .element-card .element-mass,
        [data-theme="dark"] .element-card > div:nth-child(3) { color: #06202A !important; }
        [data-theme="dark"] .site-header .header-subtitle { color: #91A4BA; }
        [data-theme="dark"] .state-legend { color: var(--muted); }
        [data-theme="dark"] .heatmap-option { color: var(--ink); }
        [data-theme="dark"] .heatmap-option[aria-pressed="true"] { color: #fff; }
        [data-theme="dark"] .heatmap-title { color: var(--ink); }
        [data-theme="dark"] #detailModal .bg-slate-900 { background: #0C1728 !important; }
        [data-theme="dark"] #detailModal .bg-slate-950 { background: #070D17 !important; }
        [data-theme="dark"] #detailModal .bg-slate-800 { background: #17283D !important; }
        [data-theme="dark"] .quiz-incorrect { color: var(--ink); }
        .dashboard-shell { display: flex; gap: 1.25rem; padding: 1.25rem; }
        .lab-sidebar {
            position: sticky;
            top: 5.5rem;
            display: flex;
            flex: 0 0 220px;
            flex-direction: column;
            align-self: flex-start;
            gap: 0.4rem;
            min-height: calc(100vh - 7rem);
            padding: 1rem 0.75rem;
            border: 1px solid var(--line);
            border-radius: 1.1rem;
            background: rgb(17 27 46 / 82%);
            backdrop-filter: blur(16px);
        }
        .sidebar-label, .eyebrow {
            margin: 0;
            color: #22D3EE;
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.15em;
        }
        .sidebar-label { padding: 0.5rem 0.7rem; }
        .nav-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            min-height: 2.75rem;
            padding: 0.65rem 0.75rem;
            border: 1px solid transparent;
            border-radius: 0.7rem;
            background: transparent;
            color: var(--muted);
            font-size: 0.8rem;
            font-weight: 700;
            text-align: left;
            transition: 0.2s ease;
        }
        .nav-item i { width: 1rem; text-align: center; }
        .nav-item:hover { background: #17283D; color: var(--ink); }
        .nav-item.active { border-color: rgb(34 211 238 / 30%); background: rgb(8 145 178 / 18%); color: #67E8F9; box-shadow: inset 3px 0 #22D3EE, 0 0 20px rgb(34 211 238 / 8%); }
        .sidebar-foot { margin-top: auto; padding: 0.75rem 0.5rem 0.25rem; color: var(--muted); font-size: 0.65rem; }
        .sidebar-foot i { margin-right: 0.35rem; color: #34D399; }
        .app-views { flex: 1; min-width: 0; }
        .app-view { display: none; animation: view-enter 0.25s ease both; }
        .app-view.active-view { display: block; }
        @keyframes view-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        .view-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 0.25rem 0 1.25rem; }
        .view-heading h2 { margin: 0.25rem 0; color: var(--ink); font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 900; letter-spacing: -0.035em; }
        .view-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: 0.8rem; }
        .periodic-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
        .periodic-tools #searchContainer { width: min(250px, 100%); }
        .search-icon { position: absolute; top: 50%; left: 0.7rem; transform: translateY(-50%); color: var(--muted); font-size: 0.75rem; }
        .periodic-tools #searchInput { border: 1px solid var(--line); background: var(--card) !important; color: var(--ink) !important; }
        .periodic-tools #searchSuggestions { border: 1px solid var(--line); background: var(--card) !important; }
        .panel-card { border: 1px solid var(--line); border-radius: 1rem; background: linear-gradient(145deg, rgb(17 27 46 / 96%), rgb(13 22 38 / 96%)); box-shadow: 0 18px 48px rgb(0 0 0 / 18%), inset 0 1px rgb(255 255 255 / 3%); }
        .lab-grid, .quest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
        .lab-panel, .quest-panel, .flashcard-panel { padding: 1.15rem; }
        .virtual-lab-safety { margin: -0.5rem 0 1rem; padding: 0.65rem 0.8rem; border: 1px solid rgb(251 191 36 / 32%); border-radius: 0.7rem; background: rgb(217 119 6 / 9%); color: var(--muted); font-size: 0.7rem; line-height: 1.5; }
        .virtual-lab-safety i { margin-right: 0.35rem; color: #FBBF24; }
        .virtual-experiment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
        .virtual-experiment { min-width: 0; padding: 1.15rem; }
        .titration-experiment { grid-column: 1 / -1; }
        .virtual-controls { min-width: 0; }
        .virtual-select { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid #2B3C54; border-radius: 0.65rem; outline: none; background: #0A1322; color: #E5F3FF; font: inherit; font-size: 0.78rem; }
        .virtual-select:focus { border-color: #22D3EE; box-shadow: 0 0 0 3px rgb(34 211 238 / 12%); }
        .virtual-range { display: block; width: 100%; min-height: 2.5rem; margin: 0.2rem 0 0; padding: 0; appearance: none; background: transparent; cursor: ew-resize; touch-action: pan-y; }
        .virtual-range::-webkit-slider-runnable-track { height: 0.55rem; border: 1px solid #496078; border-radius: 999px; background: linear-gradient(90deg, #0891B2, #6D28D9); }
        .virtual-range::-webkit-slider-thumb { width: 1.3rem; height: 1.3rem; margin-top: -0.43rem; appearance: none; border: 3px solid #E5F3FF; border-radius: 50%; background: #0891B2; box-shadow: 0 0 0 3px rgb(34 211 238 / 22%), 0 2px 6px rgb(0 0 0 / 35%); }
        .virtual-range::-moz-range-track { height: 0.55rem; border: 1px solid #496078; border-radius: 999px; background: linear-gradient(90deg, #0891B2, #6D28D9); }
        .virtual-range::-moz-range-thumb { width: 1rem; height: 1rem; border: 3px solid #E5F3FF; border-radius: 50%; background: #0891B2; box-shadow: 0 0 0 3px rgb(34 211 238 / 22%), 0 2px 6px rgb(0 0 0 / 35%); }
        .virtual-range:focus-visible { outline: 3px solid #22D3EE; outline-offset: 3px; border-radius: 999px; }
        .range-scale { display: flex; justify-content: space-between; gap: 0.25rem; color: var(--muted); font-size: 0.55rem; font-variant-numeric: tabular-nums; }
        .range-scale span:nth-child(2) { color: #FBBF24; text-align: center; }
        .range-instruction { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.58rem; }
        .virtual-readout { display: block; color: var(--accent); font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
        .virtual-explanation { min-height: 2.5rem; margin: 0.55rem 0 0; color: var(--muted); font-size: 0.68rem; line-height: 1.6; }
        .virtual-equation { min-height: 2.5rem; margin: 0.65rem 0 0; color: var(--accent); font-size: 0.8rem; font-weight: 800; line-height: 1.5; }
        .titration-layout { display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr); gap: 1.25rem; align-items: center; }
        .titration-visual { display: grid; grid-template-columns: 135px minmax(0, 1fr); align-items: center; gap: 0.4rem 1rem; padding: 0.85rem; border: 1px solid #26364D; border-radius: 0.8rem; background: #0A1322; }
        .titration-beaker { position: relative; width: 96px; height: 128px; justify-self: center; overflow: hidden; border: 3px solid #8BA5B6; border-top: 0; border-radius: 0 0 1rem 1rem; background: linear-gradient(90deg, rgb(255 255 255 / 5%), transparent 30%, rgb(255 255 255 / 7%) 80%, transparent); }
        .beaker-liquid { position: absolute; right: 3px; bottom: 3px; left: 3px; height: 48%; border-radius: 0 0 0.7rem 0.7rem; opacity: 0.88; transition: background-color 0.25s ease; }
        .beaker-volume-mark { position: absolute; right: 0; z-index: 1; width: 14px; border-top: 1px solid #D4E1E9; color: #D4E1E9; font-size: 0.5rem; line-height: 0.6rem; text-align: right; }
        .mark-one { bottom: 35%; }.mark-two { bottom: 55%; }.mark-three { bottom: 75%; }
        .titration-stats { display: flex; flex-direction: column; gap: 0.25rem; color: #A7BCD2; font-size: 0.62rem; }
        .titration-stats strong { color: #E5F3FF; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
        .titration-curve { grid-column: 1 / -1; width: 100%; max-height: 165px; overflow: visible; }
        .curve-grid { fill: none; stroke: #42546A; stroke-width: 1; }
        .curve-line { fill: none; stroke: #22D3EE; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
        .curve-equivalence { stroke: #FBBF24; stroke-width: 1.5; stroke-dasharray: 4 4; }
        .curve-marker { fill: #F472B6; stroke: #FFFFFF; stroke-width: 2; }
        .curve-axis-label, .curve-equivalence-label { fill: #A7BCD2; font-family: inherit; font-size: 9px; }
        .curve-equivalence-label { fill: #FCD34D; font-size: 8px; }
        .virtual-apparatus { position: relative; display: flex; min-height: 180px; align-items: center; justify-content: center; overflow: hidden; margin-top: 0.85rem; border: 1px solid #26364D; border-radius: 0.8rem; background: radial-gradient(ellipse at 50% 70%, #1C2B3D, #0A1322 72%); }
        .test-tube { position: relative; width: 58px; height: 132px; overflow: hidden; border: 3px solid #8BA5B6; border-top-width: 5px; border-radius: 0.3rem 0.3rem 1.1rem 1.1rem; background: rgb(255 255 255 / 4%); }
        .tube-liquid { position: absolute; right: 3px; bottom: 3px; left: 3px; height: 70%; border-radius: 0 0 0.75rem 0.75rem; background: #B7D7E3; opacity: 0.68; transition: background-color 0.25s ease; }
        .tube-solid { position: absolute; z-index: 2; right: 7px; bottom: 5px; left: 7px; height: 16px; border-radius: 50%; opacity: 0; transform: scaleY(0.35); transform-origin: bottom; transition: opacity 0.4s ease, transform 0.7s ease; }
        .precipitate-apparatus[data-state="mixed"] .tube-solid,
        .precipitate-apparatus[data-state="heated"] .tube-solid { opacity: 1; transform: scaleY(1); }
        .precipitate-apparatus[data-state="heated"] .tube-solid { background: #15191D !important; }
        .tube-glass { position: absolute; z-index: 3; inset: 0; border: 1px solid rgb(255 255 255 / 20%); border-radius: inherit; pointer-events: none; }
        .apparatus-caption { position: absolute; bottom: 0.65rem; color: #A7BCD2; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.12em; }
        .virtual-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
        .virtual-actions button { min-height: 2.5rem; padding: 0.55rem 0.75rem; border: 1px solid var(--line); border-radius: 0.65rem; font-size: 0.68rem; font-weight: 800; }
        .virtual-actions button:disabled { opacity: 0.55; cursor: not-allowed; }
        .virtual-actions .primary-action { flex: 1; }
        .virtual-actions [hidden] { display: none; }
        .metal-liquid { position: absolute; right: 0; bottom: 0; left: 0; height: 58%; background: #348AC4; opacity: 0.72; transition: background-color 0.5s ease; }
        .metal-rod { position: absolute; z-index: 2; top: 1.2rem; left: calc(50% - 9px); width: 18px; height: 128px; transform: rotate(12deg); border: 1px solid #CBD5E1; border-radius: 0.35rem; background: linear-gradient(90deg, #64748B, #CBD5E1 45%, #64748B); transition: background 0.5s ease; }
        .metal-apparatus.has-deposit .metal-rod { background: linear-gradient(90deg, #8B451F, #D2693C 38%, #A64B2A 72%, #64748B); }
        .metal-bubbles { position: absolute; z-index: 1; top: 42%; left: calc(50% - 16px); display: none; width: 32px; height: 35px; }
        .metal-apparatus.has-bubbles .metal-bubbles { display: block; }
        .metal-bubbles::before, .metal-bubbles::after { position: absolute; bottom: 0; width: 7px; height: 7px; border: 1px solid #E0F7FA; border-radius: 50%; background: rgb(224 247 250 / 42%); content: ""; animation: gas-rise 1.5s ease-in infinite; }
        .metal-bubbles::after { left: 15px; width: 5px; height: 5px; animation-delay: 0.6s; }
        @keyframes gas-rise { from { opacity: 0.8; transform: translateY(0) scale(0.7); } to { opacity: 0; transform: translateY(-45px) scale(1.3); } }
        .reaction-simulator-panel { grid-column: 1 / -1; }
        .reaction-element-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
        .reaction-element-picker select { min-width: 0; padding: 0.7rem 0.75rem; border: 1px solid #2B3C54; border-radius: 0.65rem; background: #0A1322; color: #E5F3FF; font: inherit; font-size: 0.8rem; }
        .reaction-element-picker button { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 0.65rem; font-size: 0.72rem; font-weight: 700; }
        .reaction-element-choices { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; }
        .reaction-element-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.4rem 0.25rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: 0.68rem; font-weight: 700; }
        .reaction-element-chip button { width: 1.2rem; height: 1.2rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1rem; line-height: 1; }
        .reaction-element-chip button:hover { color: #FDA4AF; background: rgb(190 24 93 / 18%); }
        .reaction-simulator-result { margin-top: 0.85rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: 0.7rem; font-size: 0.72rem; line-height: 1.6; }
        .reaction-simulator-result[hidden] { display: none; }
        .reaction-simulator-result.supported { border-color: rgb(52 211 153 / 35%); background: rgb(5 150 105 / 9%); }
        .reaction-simulator-result.unsupported { border-color: rgb(251 191 36 / 35%); background: rgb(217 119 6 / 9%); color: var(--muted); }
        .reaction-simulator-equation { display: block; color: var(--accent); font-size: 1rem; }
        .reaction-simulator-result p { margin: 0.4rem 0 0; color: var(--muted); }
        .reaction-safety-note { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.65rem; }
        .reaction-safety-note i { color: #FBBF24; }
        .panel-title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
        .panel-title h3 { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 800; }
        .panel-title p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.7rem; }
        .lab-note { margin: -0.5rem 0 0.8rem; color: var(--muted); font-size: 0.68rem; line-height: 1.5; }
        .panel-icon { display: grid; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; place-items: center; border-radius: 0.75rem; }
        .panel-icon.cyan { color: #67E8F9; background: rgb(8 145 178 / 20%); }
        .panel-icon.violet { color: #C4B5FD; background: rgb(109 40 217 / 20%); }
        .panel-icon.rose { color: #FDA4AF; background: rgb(190 24 93 / 20%); }
        .panel-icon.green { color: #6EE7B7; background: rgb(5 150 105 / 20%); }
        .field-label { display: block; margin: 0.9rem 0 0.35rem; color: #A7BCD2; font-size: 0.7rem; font-weight: 700; }
        .lab-panel input, .lab-panel textarea, .molecule-controls select, .flashcard-form input {
            width: 100%; padding: 0.7rem 0.75rem; border: 1px solid #2B3C54; border-radius: 0.65rem; outline: none; background: #0A1322; color: #E5F3FF; font: inherit; font-size: 0.8rem;
        }
        .lab-panel input:focus, .lab-panel textarea:focus, .molecule-controls select:focus, .flashcard-form input:focus { border-color: #22D3EE; box-shadow: 0 0 0 3px rgb(34 211 238 / 12%); }
        .lab-panel textarea { min-height: 5rem; resize: vertical; font-family: ui-monospace, monospace; }
        .lab-panel input:disabled, .lab-panel button:disabled { opacity: 0.45; cursor: not-allowed; }
        .quick-equations { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0.8rem; }
        .quick-equations button { padding: 0.3rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; background: #172338; color: #A7BCD2; font-size: 0.65rem; }
        .quick-equations button:hover { border-color: var(--accent); color: #67E8F9; }
        .action-button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; margin-top: 0.85rem; padding: 0.7rem 0.9rem; border-radius: 0.7rem; font-size: 0.78rem; font-weight: 800; }
        .form-message { min-height: 1rem; margin: 0.6rem 0 0; color: #6EE7B7; font-size: 0.72rem; }
        .error-message { color: #FDA4AF; }
        .result-card { margin-top: 1rem; padding: 0.9rem; border: 1px solid rgb(34 211 238 / 24%); border-radius: 0.75rem; background: rgb(8 145 178 / 7%); }
        .balanced-equation { display: block; overflow-wrap: anywhere; margin: 0.35rem 0 0.75rem; color: #67E8F9; font-size: clamp(0.85rem, 1.4vw, 1.1rem); font-weight: 800; }
        .balance-explanation { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 0.7rem; background: rgb(8 145 178 / 6%); }
        .balance-steps { display: grid; gap: 0.35rem; margin: 0; padding-left: 1.2rem; color: var(--muted); font-size: 0.68rem; line-height: 1.55; }
        .balance-totals-scroll { margin-top: 0.65rem; overflow-x: auto; }
        .balance-totals { width: 100%; border-collapse: collapse; color: var(--ink); font-size: 0.65rem; text-align: center; }
        .balance-totals th, .balance-totals td { padding: 0.4rem; border: 1px solid var(--line); white-space: nowrap; }
        .balance-totals thead { color: var(--accent); background: var(--accent-soft); }
        .balance-totals tbody th { color: var(--ink); }
        .reaction-map { display: flex; align-items: stretch; justify-content: center; gap: 0.4rem; margin-top: 0.8rem; }
        .reaction-node { flex: 1; padding: 0.55rem; border: 1px solid var(--line); border-radius: 0.6rem; color: #D7E8F5; font-size: 0.65rem; text-align: center; overflow-wrap: anywhere; }
        .reaction-product { width: 100%; background: #172338; cursor: pointer; }
        .reaction-product:hover, .reaction-product.selected { border-color: var(--accent); color: #67E8F9; }
        .reaction-products { display: grid; flex: 1; gap: 0.3rem; }
        .reaction-product-detail { margin-top: 0.5rem; padding: 0.65rem; border: 1px solid var(--line); border-radius: 0.6rem; background: rgb(8 145 178 / 8%); color: var(--ink); font-size: 0.68rem; }
        .reaction-product-detail p { margin: 0.3rem 0 0; color: var(--muted); overflow-wrap: anywhere; }
        .reaction-mini-map { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.5rem; }
        .reaction-mini-map span, .reaction-mini-map strong { padding: 0.25rem 0.4rem; border: 1px solid var(--line); border-radius: 0.4rem; }
        .reaction-mini-map .reaction-mini-arrow { border: 0; color: #A78BFA; }
        .reaction-arrow { display: grid; place-items: center; color: #A78BFA; }
        .reaction-condition-note { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.65rem; text-align: center; }
        .reaction-map-hint { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.65rem; text-align: center; }
        .stoich-row { display: grid; grid-template-columns: 1fr minmax(90px, 0.7fr) auto; align-items: center; gap: 0.5rem; margin: 0.55rem 0; color: var(--ink); font-size: 0.75rem; }
        .stoich-row input { margin: 0; }
        .stoich-row select { padding: 0.65rem 0.35rem; border: 1px solid #2B3C54; border-radius: 0.55rem; background: #0A1322; color: #E5F3FF; font-size: 0.7rem; }
        .stoich-result { display: grid; gap: 0.4rem; margin-top: 0.75rem; }
        .stoich-result:empty { display: none; }
        .stoich-line { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.7rem; border-radius: 0.55rem; background: #172338; color: #C6D8E9; font-size: 0.7rem; }
        .stoich-line strong { color: #67E8F9; text-align: right; }
        .molecule-layout { display: grid; grid-template-columns: minmax(220px, 0.75fr) minmax(0, 2fr); gap: 1rem; }
        .molecule-controls { padding: 1rem; }
        .molecule-controls select { width: 100%; padding: 0.7rem 0.75rem; border: 1px solid #2B3C54; border-radius: 0.65rem; background: #0A1322; color: #E5F3FF; font: inherit; font-size: 0.8rem; }
        .graphics-quality-status, .sound-status { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.63rem; line-height: 1.5; }
        .orbital-toggle { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; color: #A7BCD2; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
        .orbital-toggle input { width: 0.95rem; height: 0.95rem; accent-color: #A78BFA; }
        .molecule-info { margin-top: 1rem; }
        .molecule-info h3 { margin: 0 0 0.3rem; color: #67E8F9; font-size: 1.1rem; }
        .molecule-info p { margin: 0.45rem 0; color: var(--muted); font-size: 0.75rem; }
        .molecule-info strong { color: var(--ink); }
        .molecule-disclaimer { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.65rem; line-height: 1.5; }
        .molecule-stage { min-width: 0; padding: 0.8rem; }
        .molecule-stage-heading { display: flex; justify-content: space-between; gap: 0.5rem; color: #67E8F9; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.07em; }
        .molecule-stage-heading span:last-child { color: var(--muted); font-weight: 500; letter-spacing: 0; }
        #molecule3dCanvas { height: min(58vh, 500px); min-height: 320px; margin-top: 0.5rem; overflow: hidden; border-radius: 0.75rem; background: radial-gradient(ellipse at center, #17283D, #080D18 72%); }
        #molecule3dCanvas canvas { display: block; width: 100%; height: 100%; }
        .molecule-fallback-scene { position: relative; display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; perspective: 700px; transform-style: preserve-3d; touch-action: none; cursor: grab; }
        .molecule-fallback-scene:active { cursor: grabbing; }
        .fallback-atom, .fallback-bond, .fallback-orbital { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; }
        .fallback-potential { position: absolute; z-index: 0; top: 50%; left: 50%; width: 4.8rem; height: 4.8rem; border-radius: 50%; filter: blur(7px); pointer-events: none; }
        .fallback-atom { z-index: 1; display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border: 2px solid rgb(255 255 255 / 35%); border-radius: 50%; box-shadow: 0 0 24px currentColor; color: #0B1120; font-size: 0.85rem; font-weight: 900; }
        .fallback-atom.hydrogen { width: 2.25rem; height: 2.25rem; font-size: 0.7rem; }
        .fallback-bond { height: 0.38rem; margin-left: -0.19rem; border-radius: 999px; background: linear-gradient(90deg, #CBD5E1, #64748B); box-shadow: 0 0 12px rgb(103 232 249 / 28%); transform-origin: center; }
        .fallback-orbital { width: 1.15rem; height: 3rem; margin: -1.5rem 0 0 -0.575rem; border: 1px solid rgb(196 181 253 / 75%); border-radius: 50%; background: rgb(167 139 250 / 42%); box-shadow: 0 0 15px rgb(167 139 250 / 45%); }
        .molecule-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1rem; padding-top: 0.65rem; color: #C6D8E9; font-size: 0.68rem; }
        .molecule-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
        .atom-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; }
        .potential-dot { width: 2rem; height: 0.65rem; border-radius: 999px; background: linear-gradient(90deg, #24A8FF, #F8FAFC, #EF4444); }
        .quest-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
        .sound-toggle { display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; margin-top: 0.5rem; padding: 0.55rem 0.75rem; border: 1px solid var(--line); border-radius: 0.65rem; font-size: 0.7rem; font-weight: 700; }
        .quest-stats div { padding: 0.6rem; border: 1px solid var(--line); border-radius: 0.65rem; background: #0C1728; }
        .quest-stats span { display: block; color: var(--muted); font-size: 0.55rem; letter-spacing: 0.08em; }
        .quest-stats strong { display: block; margin-top: 0.2rem; color: #67E8F9; font-size: 0.85rem; }
        .quest-learning-stats { margin: 0.65rem 0; padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-radius: 0.55rem; color: var(--muted); font-size: 0.65rem; line-height: 1.5; }
        .quest-history { margin: 0.5rem 0 0.75rem; color: var(--muted); font-size: 0.65rem; }
        .quest-history summary { cursor: pointer; font-weight: 700; }
        .quest-history #questHistoryList { max-height: 9rem; overflow: auto; margin-top: 0.4rem; }
        .quest-history #questHistoryList p { margin: 0.25rem 0; line-height: 1.45; }
        .quest-history .history-correct { color: #34D399; }
        .quest-history .history-incorrect { color: #FDA4AF; }
        #questHp { color: #FDA4AF; }
        .quest-progress { height: 0.4rem; margin: 0.75rem 0; overflow: hidden; border-radius: 999px; background: #26364D; }
        .quest-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22D3EE, #A78BFA); transition: width 0.25s ease; }
        .quest-question { min-height: 2.5rem; color: var(--ink); font-size: 0.9rem; font-weight: 800; }
        .quest-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
        .quest-options button, .flashcard-ratings button { padding: 0.65rem 0.5rem; border: 1px solid var(--line); border-radius: 0.6rem; background: #172338; color: var(--ink); font-size: 0.72rem; font-weight: 700; }
        .quest-options button:hover, .flashcard-ratings button:hover { border-color: #22D3EE; background: #123246; }
        .quest-options button:disabled { opacity: 0.65; }
        .quest-options button.quest-answer-correct { border-color: #34D399; background: rgb(5 150 105 / 22%); color: #6EE7B7; }
        .quest-options button.quest-answer-wrong { border-color: #FB7185; background: rgb(190 24 93 / 20%); color: #FDA4AF; }
        .unlock-strip { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.7rem; }
        .unlock-strip > i { margin-right: 0.3rem; color: #FBBF24; }
        .unlock-strip strong { color: #67E8F9; }
        .unlocked-elements { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
        .unlocked-elements span { padding: 0.2rem 0.4rem; border-radius: 0.35rem; background: rgb(8 145 178 / 18%); color: #67E8F9; font-weight: 800; }
        .flashcard-form { display: grid; grid-template-columns: 1fr; gap: 0.35rem; }
        .flashcard-form .field-label { margin: 0.35rem 0 0; }
        .flashcard-form .action-button { margin-top: 0.35rem; }
        .empty-state { color: var(--muted); font-size: 0.72rem; }
        .flashcard-study { margin-top: 0.7rem; }
        .flashcard-face { min-height: 5.5rem; display: grid; place-items: center; margin: 0.75rem 0 0.5rem; padding: 1rem; border: 1px solid rgb(167 139 250 / 32%); border-radius: 0.8rem; background: linear-gradient(135deg, rgb(109 40 217 / 14%), rgb(8 145 178 / 8%)); color: #E9D5FF; font-size: 0.9rem; font-weight: 800; text-align: center; }
        .flashcard-ratings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-top: 0.4rem; }
        .flashcard-ratings button { font-size: 0.65rem; }
        .flashcard-transfer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
        .flashcard-transfer-note { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.63rem; }
        [data-theme="light"] {
            --paper: #F4F7FB;
            --card: #FFFFFF;
            --ink: #172338;
            --muted: #64748B;
            --text-primary: #172338;
            --text-secondary: #475569;
            --text-accent: #0E7490;
            --accent: #0E7490;
            --accent-strong: #0369A1;
            --accent-soft: #E8EEF6;
            --line: #D5DEE8;
        }
        [data-theme="light"] .text-slate-900,
        [data-theme="light"] .text-slate-800,
        [data-theme="light"] .text-slate-700 { color: var(--text-primary) !important; }
        [data-theme="light"] .text-slate-600,
        [data-theme="light"] .text-slate-500,
        [data-theme="light"] .text-slate-400 { color: var(--text-secondary) !important; }
        [data-theme="light"] .site-header { background: #FFFFFF !important; color: var(--ink) !important; }
        [data-theme="light"] #compareModal #compareModalTitle { color: var(--text-accent) !important; }
        [data-theme="light"] #compareModal label,
        [data-theme="light"] #compareModal select,
        [data-theme="light"] #compareModal #compareTableBody td:first-child { color: var(--text-secondary) !important; }
        [data-theme="light"] #compareModal #compareTableBody td:nth-child(2) { color: var(--text-accent) !important; }
        [data-theme="light"] #compareModal #compareTableBody td:nth-child(3) { color: #B45309 !important; }
        [data-theme="light"] .lab-sidebar,
        [data-theme="light"] .panel-card { background: #FFFFFF; }
        [data-theme="light"] .secondary-action {
            color: #172338;
            background: #E8EEF6;
            border-color: #CBD5E1;
        }
        [data-theme="light"] .secondary-action:hover {
            color: #0F172A;
            background: #DCE6F1;
            border-color: #94A3B8;
        }
        [data-theme="light"] .quick-equations button {
            color: #334155;
            background: #F1F5F9;
            border-color: #CBD5E1;
        }
        [data-theme="light"] .quick-equations button:hover {
            color: #0F172A;
            background: #E0F2FE;
            border-color: #7DD3FC;
        }
        [data-theme="light"] .quest-options button,
        [data-theme="light"] .flashcard-ratings button {
            color: #172338;
            background: #F1F5F9;
            border-color: #CBD5E1;
        }
        [data-theme="light"] .quest-options button:hover,
        [data-theme="light"] .flashcard-ratings button:hover {
            color: #0F172A;
            background: #E0F2FE;
            border-color: #7DD3FC;
        }
        [data-theme="light"] .environment-status.critical { color: #991B1B; background: #FEE2E2; }
        [data-theme="light"] .environment-status.warning { color: #92400E; background: #FEF3C7; }
        [data-theme="light"] .environment-status.neutral { color: #065F46; background: #D1FAE5; }
        [data-theme="light"] .nav-item.active { border-color: #7DD3FC; background: #E0F2FE; color: #0E7490; box-shadow: inset 3px 0 #0891B2; }
        [data-theme="light"] .nav-item:hover,
        [data-theme="light"] .stoich-line,
        [data-theme="light"] .quest-stats div,
        [data-theme="light"] .quest-options button,
        [data-theme="light"] .flashcard-ratings button { background: #F1F5F9; }
        [data-theme="light"] .lab-panel input,
        [data-theme="light"] .lab-panel textarea,
        [data-theme="light"] .reaction-element-picker select,
        [data-theme="light"] .virtual-select,
        [data-theme="light"] .molecule-controls select,
        [data-theme="light"] .stoich-row select,
        [data-theme="light"] .molecule-controls select,
        [data-theme="light"] .flashcard-form input { background: #F8FAFC; color: #172338; }
        [data-theme="light"] .stoich-row,
        [data-theme="light"] .reaction-element-picker select,
        [data-theme="light"] .virtual-select,
        [data-theme="light"] .molecule-controls select,
        [data-theme="light"] .reaction-element-chip,
        [data-theme="light"] .quest-options button,
        [data-theme="light"] .flashcard-ratings button { color: #172338; }
        [data-theme="light"] .reaction-node,
        [data-theme="light"] .reaction-product { color: #334155; background: #F1F5F9; }
        [data-theme="light"] .reaction-product:hover,
        [data-theme="light"] .reaction-product.selected { color: #0E7490; background: #E0F2FE; }
        [data-theme="light"] .reaction-product-detail { color: #172338; background: #F8FAFC; }
        [data-theme="light"] .reaction-product-detail p { color: #475569; }
        [data-theme="light"] .reaction-map-hint,
        [data-theme="light"] .reaction-condition-note { color: #475569; }
        [data-theme="light"] .reaction-mini-map span,
        [data-theme="light"] .reaction-mini-map strong { background: #FFFFFF; }
        [data-theme="light"] .quest-history .history-correct { color: #047857; }
        [data-theme="light"] .quest-history .history-incorrect { color: #BE123C; }
        [data-theme="light"] .quest-learning-stats { color: #475569; background: #F8FAFC; }
        [data-theme="light"] .stoich-line { color: #334155; }
        [data-theme="light"] .header-subtitle { color: #64748B; }
        [data-theme="light"] .lab-status { color: #047857; }
        [data-theme="light"] .panel-title h3,
        [data-theme="light"] .view-heading h2,
        [data-theme="light"] .quest-question { color: #172338; }
        [data-theme="light"] .virtual-readout,
        [data-theme="light"] .virtual-equation { color: #0E7490; }
        [data-theme="light"] .range-scale,
        [data-theme="light"] .range-instruction { color: #64748B; }
        [data-theme="light"] .virtual-lab-safety { color: #475569; }
        [data-theme="light"] .eyebrow,
        [data-theme="light"] .balanced-equation,
        [data-theme="light"] .molecule-info h3,
        [data-theme="light"] .molecule-stage-heading { color: #0E7490; }
        [data-theme="light"] .field-label { color: #475569; }
        [data-theme="light"] .stoich-line strong { color: #0E7490; }
        [data-theme="light"] .quest-stats span { color: #64748B; }
        [data-theme="light"] .quest-stats strong { color: #0E7490; }
        [data-theme="light"] .quest-options button:hover { background: #E0F2FE; }
        [data-theme="light"] .reaction-node { color: #334155; }
        [data-theme="light"] .reaction-condition-note { color: #64748B; }
        [data-theme="light"] .flashcard-face { color: #5B21B6; }
        [data-theme="light"] .orbital-toggle { color: #475569; }
        [data-theme="light"] .form-message { color: #047857; }
        [data-theme="light"] .error-message { color: #BE123C; }
        [data-theme="light"] #questHp { color: #BE123C; }
        [data-theme="light"] .unlock-strip strong,
        [data-theme="light"] .unlocked-elements span { color: #0E7490; }
        [data-theme="light"] .unlocked-elements span { background: #E0F2FE; }
        [data-theme="light"] .molecule-legend { color: #334155; }
        [data-theme="light"] .molecule-stage-heading span:last-child { color: #64748B; }
        [data-theme="light"] .element-card .element-symbol,
        [data-theme="light"] .element-card .element-number,
        [data-theme="light"] .element-card .element-mass,
        [data-theme="light"] .element-card > div:nth-child(3),
        [data-theme="light"] .element-example-card,
        [data-theme="light"] .element-example-card * { color: #06202A !important; }
        .grid-periodic {
            display: grid;
            grid-template-columns: 28px repeat(18, minmax(42px, 1fr));
            gap: 3px;
        }
        @media (min-width: 640px) {
            .grid-periodic {
                grid-template-columns: 32px repeat(18, minmax(0, 1fr));
                gap: 4px;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
            }
        }
        @media (max-width: 639px) {
            .dashboard-shell { display: block; padding: 0.65rem 0.65rem 5.5rem; }
            .lab-sidebar { position: fixed; z-index: 45; inset: auto 0 0; flex-direction: row; justify-content: space-around; gap: 0.2rem; width: 100%; min-height: 0; padding: 0.4rem; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: rgb(8 13 24 / 94%); backdrop-filter: blur(18px); }
            .sidebar-label, .sidebar-foot { display: none; }
            .nav-item { flex: 1; flex-direction: column; justify-content: center; gap: 0.25rem; min-height: 3.25rem; padding: 0.35rem 0.15rem; font-size: 0.57rem; text-align: center; }
            .nav-item i { width: auto; font-size: 0.95rem; }
            .view-heading { align-items: flex-start; flex-direction: column; }
            .periodic-tools { width: 100%; justify-content: flex-start; }
            .periodic-tools #searchContainer { width: 100%; }
            #heatmapControl { width: 100%; justify-content: space-between; }
            .heatmap-option { flex: 1; padding-inline: 0.3rem; }
            .lab-grid, .quest-grid, .molecule-layout, .virtual-experiment-grid { grid-template-columns: 1fr; }
            .virtual-experiment, .lab-panel, .quest-panel, .flashcard-panel { padding: 0.85rem; }
            .titration-experiment { grid-column: auto; }
            .titration-layout { grid-template-columns: 1fr; gap: 0.65rem; }
            .titration-visual { grid-template-columns: 100px minmax(0, 1fr); gap: 0.25rem 0.6rem; padding: 0.6rem; }
            .titration-beaker { transform: scale(0.86); transform-origin: center; }
            .virtual-apparatus { min-height: 165px; }
            .lab-panel, .quest-panel, .flashcard-panel { padding: 0.85rem; }
            .quest-stats { gap: 0.3rem; }
            .quest-stats div { padding: 0.45rem; }
            #molecule3dCanvas { min-height: 280px; }
            .heatmap-control { width: 100%; justify-content: space-between; }
            .heatmap-option { flex: 1; padding-inline: 0.3rem; }
            #detailModal { padding: 0.5rem; }
            .heatmap-legend { flex-wrap: wrap; justify-content: flex-start; }
            .heatmap-title { flex-basis: 100%; }
        }
        /* Thay thế hoặc bổ sung class/id tương ứng của netlify badge nếu có */
        iframe[src*="netlify"] {
            display: none !important;
        }