:root {
      --bg: #111827;
      --panel: #1f2937;
      --panel-2: #111827;
      --border: #374151;
      --text: #f9fafb;
      --muted: #9ca3af;
      --accent: #60a5fa;
      --accent-2: #bfdbfe;
      --success: #86efac;
      --danger: #fca5a5;
      --warning: #fde68a;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0; min-height: 100vh;
      background: linear-gradient(145deg, #111827, #0f172a);
      color: var(--text); font: 16px/1.45 Arial, Helvetica, sans-serif;
    }
    .app { max-width: 1180px; margin: 0 auto; padding: 30px 20px 45px; }
    h1 { margin: 0; font-size: clamp(27px, 4vw, 40px); letter-spacing: -0.03em; }
    .subtitle { margin: 8px 0 22px; color: var(--muted); max-width: 820px; }
    .app-brand-header {
      display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px;
      padding: 10px 0 2px;
    }
    .app-brand-lockup { display: flex; align-items: center; gap: 14px; min-width: 0; }
    .app-brand-text { min-width: 0; }
    .app-brand-text .subtitle { margin: 4px 0 0; }
    .brand-logo { flex: 0 0 auto; display: block; overflow: visible; }
    .app-brand-logo {
      width: 66px; height: 66px;
      filter: drop-shadow(0 9px 16px rgba(56, 189, 248, .22));
    }
    .auth-brand-lockup { display: flex; align-items: center; gap: 13px; }
    .auth-brand-logo {
      width: 58px; height: 58px;
      filter: drop-shadow(0 8px 14px rgba(56, 189, 248, .25));
    }
    .auth-brand-text { min-width: 0; }
    .logo-transition-clone {
      position: fixed; z-index: 12050; pointer-events: none; margin: 0;
      filter: drop-shadow(0 16px 26px rgba(56, 189, 248, .32));
      transform-origin: center center;
    }
    .logo-transition-hidden { opacity: 0 !important; }
    .startup-splash.logo-transitioning .startup-splash-card > :not(.startup-splash-logo) {
      opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease;
    }
    .startup-splash.logo-transitioning .startup-splash-card { background: rgba(15, 23, 42, .42); }
    .auth-overlay.logo-transition-prep { visibility: hidden; }
    @media (max-width: 620px) {
      .app { padding-top: 22px; }
      .app-brand-header { align-items: flex-start; }
      .app-brand-logo { width: 54px; height: 54px; }
      .app-brand-lockup { gap: 10px; }
      .app-brand-text .subtitle { font-size: 13px; }
      .auth-brand-logo { width: 50px; height: 50px; }
    }
    .tabs { display: flex; gap: 8px; margin: 0 0 18px; border-bottom: 1px solid var(--border); }
    .tab {
      border-radius: 10px 10px 0 0; padding: 11px 15px; border: 1px solid transparent;
      background: transparent; color: var(--muted); cursor: pointer; font-weight: 700;
    }
    .tab.active { color: var(--text); background: var(--panel); border-color: var(--border); border-bottom-color: var(--panel); margin-bottom: -1px; }
    .panel { display: none; }
    .panel.active { display: block; }
    .toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
    button {
      border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer; font: 700 14px Arial, sans-serif;
      background: var(--accent); color: #0f172a; transition: transform .12s ease, filter .12s ease;
    }
    button:hover { transform: translateY(-1px); filter: brightness(1.06); }
    button.secondary { background: #374151; color: var(--text); }
    button.success { background: var(--success); color: #052e16; }
    button.danger { background: #7f1d1d; color: #fee2e2; }
    button.danger:hover { background: #991b1b; }
    button:disabled,
    button.secondary:disabled,
    button.success:disabled,
    button.danger:disabled {
      background: #4b5563;
      color: #cbd5e1;
      cursor: not-allowed;
      opacity: .72;
      filter: none;
    }
    button:disabled:hover,
    button.secondary:disabled:hover,
    button.success:disabled:hover,
    button.danger:disabled:hover {
      background: #4b5563;
      transform: none;
      filter: none;
    }
    .quiz-reset-zone {
      margin-top: 34px; padding: 18px; border: 1px solid #7f1d1d; border-radius: 16px;
      background: rgba(69, 10, 10, .28);
    }
    .quiz-reset-zone h2 { margin: 0 0 6px; font-size: 17px; }
    .quiz-reset-zone p { margin: 0; color: #d1d5db; font-size: 13px; max-width: 820px; }
    .quiz-reset-confirmation {
      display: none; margin-top: 14px; padding: 12px; border: 1px solid #991b1b; border-radius: 10px;
      background: rgba(127, 29, 29, .22); color: #fee2e2; font-size: 13px;
    }
    .quiz-reset-confirmation.visible { display: block; }
    .quiz-reset-confirmation strong { display: block; margin-bottom: 4px; }
    .quiz-reset-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .card {
      min-width: 0; background: rgba(31, 41, 55, .96); border: 1px solid var(--border);
      border-radius: 16px; overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
    }
    .card-header {
      display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px;
      border-bottom: 1px solid var(--border);
    }
    .card-header strong { font-size: 15px; }
    .card-header span { color: var(--muted); font-size: 13px; }
    textarea {
      display: block; width: 100%; min-height: 330px; resize: vertical; padding: 16px; border: 0; outline: none;
      background: var(--panel-2); color: var(--text); font: 17px/1.55 Consolas, "Courier New", monospace; tab-size: 2;
    }
    #unicodeOutput { color: var(--accent-2); }
    .status { min-height: 24px; margin: 16px 0 0; color: var(--muted); font-size: 14px; }
    .status.ok { color: var(--success); } .status.error { color: var(--danger); } .status.warning { color: var(--warning); }
    .examples {
      margin-top: 24px; padding: 18px; background: rgba(31, 41, 55, .72);
      border: 1px solid var(--border); border-radius: 16px;
    }
    .examples h2 { margin: 0 0 12px; font-size: 18px; }
    .examples-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
    .example { color: var(--muted); font: 14px/1.4 Consolas, "Courier New", monospace; }
    .example b { color: var(--text); font-weight: 700; }
    .notes { margin-top: 16px; color: var(--muted); font-size: 13px; }
    code { padding: 1px 5px; border-radius: 5px; background: #111827; color: var(--accent-2); }
    .structure-controls { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 18px; }
    .structure-input textarea { min-height: 156px; }
    .quick-examples { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
    .quick-example { padding: 7px 9px; font: 12px Consolas, monospace; border-radius: 7px; background: #374151; color: var(--text); cursor: pointer; }
    .quick-example:hover { background: #4b5563; }
    .svg-wrap {
      min-height: 480px; padding: 12px; background: #ffffff; overflow: auto;
    }
    #structureSvg, #nameStructureSvg, #quizStructureSvg { display: block; width: 100%; min-width: 550px; height: 455px; }
    #structureSkeletalSvg, #nameSkeletalSvg, #quizSkeletalSvg { display: block; width: 100%; min-width: 550px; height: 260px; }
    .skeletal-card { grid-column: 2; }
    .skeletal-wrap { min-height: 300px; padding: 12px; background: #ffffff; overflow: auto; }
    .structure-note { margin-top: 14px; color: var(--muted); font-size: 13px; }

    /*
      Compact quiz layout:
      - the left quiz controls span both right-side cards
      - skeletal structure remains immediately below the full structure
      - empty white canvas space is reduced substantially
    */
    #quizPanel .structure-controls {
      align-items: start;
      row-gap: 12px;
    }

    #quizPanel .structure-input {
      grid-row: 1 / span 3;
    }

    #quizPanel .quiz-hint-card {
      display: none;
    }

    #quizPanel .quiz-hint-card.visible {
      display: block;
    }

    #quizPanel #quizSemiStructureCard {
      grid-column: 2;
    }

    #quizPanel #quizSemiCard {
      min-width: 0;
    }

    #quizPanel .svg-wrap {
      min-height: 275px;
    }

    #quizPanel #quizStructureSvg {
      min-width: 0;
      height: 250px;
    }

    #quizPanel .skeletal-card {
      margin-top: 0;
    }

    #quizPanel .skeletal-wrap {
      min-height: 220px;
    }

    #quizPanel #quizSkeletalSvg {
      min-width: 0;
      height: 195px;
    }



    /* Quiz difficulty selector */
    .quiz-difficulty-menu {
      margin: -6px 0 18px; padding: 14px 16px;
      background: rgba(31, 41, 55, .96); border: 1px solid var(--border);
      border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
    }
    .quiz-difficulty-menu[hidden] { display: none; }
    .quiz-difficulty-menu-title {
      margin: 0 0 3px; color: var(--text); font-size: 14px; font-weight: 700;
    }
    .quiz-difficulty-menu-help { margin: 0 0 11px; color: var(--muted); font-size: 12px; }
    .quiz-difficulty-options {
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    }
    .quiz-difficulty-option {
      display: flex; align-items: center; gap: 7px; min-width: 0;
      padding: 9px 10px; border: 1px solid #4b5563; border-radius: 8px;
      background: #111827; color: var(--text); font-size: 13px; font-weight: 700;
      cursor: pointer;
    }
    .quiz-difficulty-option:hover { border-color: var(--accent); }
    .quiz-difficulty-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
    .quiz-filter-divider { height: 1px; margin: 14px 0; background: #475569; }
    .quiz-functional-options {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    }
    .quiz-functional-group-label {
      grid-column: 1 / -1; margin: 2px 0 -1px; color: #bfdbfe;
      font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    }
    .quiz-functional-option {
      display: flex; align-items: center; gap: 7px; min-width: 0;
      padding: 9px 10px; border: 1px solid #4b5563; border-radius: 8px;
      background: #111827; color: var(--text); font-size: 13px; font-weight: 700;
      cursor: pointer;
    }
    .quiz-functional-option:hover { border-color: var(--accent); }
    .quiz-functional-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
    .quiz-difficulty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .quiz-difficulty-actions button { padding: 8px 11px; font-size: 12px; }


    /* ---------- NAMING HELP PAGE ---------- */
    .naming-help-overlay {
      position:fixed; inset:0; z-index:1250; display:flex; align-items:flex-start; justify-content:center;
      overflow:auto; padding:22px; background:rgba(2,6,23,.84); backdrop-filter:blur(5px);
    }
    .naming-help-overlay[hidden] { display:none; }
    .naming-help-sheet {
      width:min(1180px,100%); min-height:min(760px,calc(100vh - 44px)); overflow:hidden;
      border:1px solid var(--border); border-radius:18px; background:var(--panel);
      box-shadow:0 24px 70px rgba(0,0,0,.42);
    }
    .naming-help-header {
      position:sticky; top:0; z-index:4; display:flex; justify-content:space-between; align-items:flex-start;
      gap:18px; padding:18px 20px; border-bottom:1px solid var(--border); background:var(--panel);
    }
    .naming-help-header h2 { margin:0; color:var(--text); font-size:24px; }
    .naming-help-header p { margin:5px 0 0; color:var(--muted); font-size:13px; }
    .naming-help-close { flex:0 0 auto; }
    .naming-help-body { padding:20px; }
    .naming-help-intro {
      margin:0 0 16px; padding:12px 14px; border-left:4px solid var(--accent);
      border-radius:0 10px 10px 0; background:#172033; color:#dbeafe; font-size:14px; line-height:1.5;
    }
    .naming-help-rules {
      display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin-bottom:16px;
    }
    .naming-help-rule {
      min-width:0; padding:13px; border:1px solid var(--border); border-radius:12px;
      background:var(--panel-2); color:var(--muted); font-size:13px; line-height:1.45;
    }
    .naming-help-rule strong { display:block; margin-bottom:5px; color:var(--text); font-size:14px; }
    .naming-help-rule-number {
      display:inline-grid; place-items:center; width:24px; height:24px; margin-right:6px;
      border-radius:999px; background:#1d4ed8; color:#fff; font-weight:800;
    }
    .naming-help-reference {
      display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:18px;
    }
    .naming-help-reference-card {
      padding:13px 14px; border:1px solid var(--border); border-radius:12px; background:#111827;
      color:#cbd5e1; font-size:13px; line-height:1.5;
    }
    .naming-help-reference-card strong { color:#f9fafb; }
    .naming-help-root-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .naming-help-root-list span {
      padding:5px 8px; border-radius:999px; background:#243042; color:#dbeafe;
      font:700 12px/1.2 Consolas,"Courier New",monospace;
    }
    .naming-help-priority-intro { margin:0 0 10px; color:#cbd5e1; font-size:12px; line-height:1.45; }
    .naming-help-priority-scroll { overflow-x:auto; border:1px solid #334155; border-radius:10px; }
    .naming-help-priority-table { width:100%; min-width:790px; border-collapse:collapse; font-size:12px; line-height:1.4; }
    .naming-help-priority-table th,
    .naming-help-priority-table td { padding:9px 10px; border-bottom:1px solid #334155; text-align:left; vertical-align:top; }
    .naming-help-priority-table th { position:sticky; top:0; background:#172033; color:#f8fafc; font-weight:800; }
    .naming-help-priority-table tbody tr:last-child td { border-bottom:0; }
    .naming-help-priority-table tbody tr:nth-child(even) td { background:rgba(36,48,66,.46); }
    .naming-help-priority-rank { width:56px; color:#93c5fd; font-weight:800; white-space:nowrap; }
    .naming-help-priority-group { color:#f8fafc; font-weight:800; white-space:nowrap; }
    .naming-help-priority-code { color:#dbeafe; font:700 12px/1.35 Consolas,"Courier New",monospace; white-space:nowrap; }
    .naming-help-priority-note { display:block; margin-top:3px; color:#94a3b8; font-size:11px; font-weight:400; white-space:normal; }
    .naming-help-tabs {
      display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; padding:4px;
      border:1px solid var(--border); border-radius:12px; background:#111827;
    }
    .naming-help-tab { flex:1 1 130px; padding:9px 12px; background:#243042; color:#d1d5db; }
    .naming-help-tab.active { background:#1d4ed8; color:#fff; box-shadow:0 6px 16px rgba(29,78,216,.25); }
    .naming-help-level-note { margin:0 0 12px; color:var(--muted); font-size:13px; }
    .naming-help-examples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
    .naming-help-example {
      min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--panel-2);
    }
    .naming-help-example-header { padding:12px 13px 9px; border-bottom:1px solid var(--border); }
    .naming-help-example-header h3 { margin:0; color:var(--text); font-size:17px; overflow-wrap:anywhere; }
    .naming-help-example-header p { margin:4px 0 0; color:var(--muted); font:12px/1.35 Consolas,"Courier New",monospace; }
    .naming-help-structure-wrap { min-height:205px; padding:7px; background:#fff; overflow:hidden; }
    .naming-help-structure { display:block; width:100%; height:205px; }
    .naming-help-example-content { padding:12px 13px 14px; }
    .naming-help-worked-label { margin:0 0 5px; color:#bfdbfe; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
    .naming-help-steps { margin:0 0 11px; padding-left:19px; color:var(--muted); font-size:12px; line-height:1.45; }
    .naming-help-steps li + li { margin-top:3px; }
    .naming-help-name-instruction { margin:0 0 7px; color:var(--muted); font-size:12px; }
    .naming-help-name-controls { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:9px; }
    .naming-help-segmented-name {
      display:flex; flex:1 1 auto; flex-wrap:wrap; align-items:center; gap:3px;
      font:800 16px/1.2 Arial,sans-serif;
    }
    .naming-help-clear-highlight { flex:0 0 auto; min-height:34px; padding:6px 9px; font-size:11px; }
    .naming-help-clear-highlight:disabled { opacity:.45; cursor:default; filter:none; transform:none; }
    .naming-help-name-segment {
      min-height:34px; padding:6px 8px; border:1px solid #475569; border-radius:7px;
      background:#172033; color:#dbeafe; font:800 15px/1.1 Arial,sans-serif;
    }
    .naming-help-name-segment:hover,
    .naming-help-name-segment:focus-visible { border-color:#86efac; background:#1e3a2b; color:#dcfce7; transform:none; filter:none; }
    .naming-help-name-segment.active { border-color:#22c55e; background:#14532d; color:#fff; box-shadow:0 0 0 2px rgba(34,197,94,.20); }
    .naming-help-segment-explanation {
      min-height:62px; margin:0; padding:9px 10px; border-left:3px solid #22c55e;
      border-radius:0 8px 8px 0; background:#0f2f20; color:#dcfce7; font-size:12px; line-height:1.45;
    }
    .naming-help-highlight-overlay { pointer-events:none; }
    .naming-help-highlight-bond { stroke:#22c55e; stroke-width:9; stroke-linecap:round; opacity:.68; }
    .naming-help-highlight-atom { fill:rgba(134,239,172,.28); stroke:#16a34a; stroke-width:2.5; }
    .naming-help-atom-active,
    .naming-help-hydrogen-active { fill:#15803d !important; font-weight:800 !important; }
    body.naming-help-open { overflow:hidden; }

    html[data-theme="light"] .naming-help-intro { background:#eff6ff; color:#1e3a8a; }
    html[data-theme="light"] .naming-help-reference-card,
    html[data-theme="light"] .naming-help-tabs { background:#ffffff; color:#475569; }
    html[data-theme="light"] .naming-help-reference-card strong { color:#111827; }
    html[data-theme="light"] .naming-help-root-list span { background:#dbeafe; color:#1e3a8a; }
    html[data-theme="light"] .naming-help-priority-intro { color:#475569; }
    html[data-theme="light"] .naming-help-priority-scroll { border-color:#cbd5e1; }
    html[data-theme="light"] .naming-help-priority-table th { background:#e2e8f0; color:#0f172a; }
    html[data-theme="light"] .naming-help-priority-table th,
    html[data-theme="light"] .naming-help-priority-table td { border-color:#cbd5e1; }
    html[data-theme="light"] .naming-help-priority-table tbody tr:nth-child(even) td { background:#f8fafc; }
    html[data-theme="light"] .naming-help-priority-rank { color:#1d4ed8; }
    html[data-theme="light"] .naming-help-priority-group { color:#111827; }
    html[data-theme="light"] .naming-help-priority-code { color:#1e3a8a; }
    html[data-theme="light"] .naming-help-priority-note { color:#64748b; }
    html[data-theme="light"] .naming-help-tab { background:#e5e7eb; color:#374151; }
    html[data-theme="light"] .naming-help-tab.active { background:#2563eb; color:#ffffff; }
    html[data-theme="light"] .naming-help-worked-label { color:#1d4ed8; }
    html[data-theme="light"] .naming-help-name-segment { background:#eff6ff; color:#1e3a8a; border-color:#93c5fd; }
    html[data-theme="light"] .naming-help-name-segment:hover,
    html[data-theme="light"] .naming-help-name-segment:focus-visible { background:#dcfce7; color:#166534; border-color:#22c55e; }
    html[data-theme="light"] .naming-help-name-segment.active { background:#15803d; color:#ffffff; }
    html[data-theme="light"] .naming-help-segment-explanation { background:#ecfdf5; color:#166534; }

    @media (max-width:1000px) {
      .naming-help-rules { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .naming-help-examples { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:720px) {
      .naming-help-overlay { padding:0; }
      .naming-help-sheet { min-height:100vh; border:0; border-radius:0; }
      .naming-help-header { padding:14px 15px; }
      .naming-help-header h2 { font-size:21px; }
      .naming-help-body { padding:14px; }
      .naming-help-rules,
      .naming-help-reference,
      .naming-help-examples { grid-template-columns:1fr; }
      .naming-help-tab { flex-basis:calc(50% - 4px); }
      .naming-help-name-controls { align-items:stretch; flex-direction:column; }
      .naming-help-clear-highlight { align-self:flex-start; }
      .naming-help-structure-wrap { min-height:220px; }
      .naming-help-structure { height:220px; }
    }



    /* ---------- ORGANIC REACTIONS TAB ---------- */
    #reactionPanel .reaction-layout {
      display:grid;
      grid-template-columns:minmax(0, 1.35fr) minmax(300px, .65fr);
      gap:18px;
      align-items:start;
    }
    .reaction-workspace { overflow:visible; }
    .reaction-instructions {
      margin:0; padding:13px 16px; border-bottom:1px solid var(--border);
      color:var(--muted); font-size:13px;
    }
    .reaction-equation {
      display:grid;
      grid-template-columns:minmax(120px,1fr) 28px minmax(120px,1fr) 115px minmax(120px,1fr) 28px minmax(120px,1fr);
      grid-template-rows:auto auto;
      column-gap:7px; row-gap:10px; align-items:center;
      padding:22px 16px 18px;
      min-height:220px;
    }
    .reaction-condition { grid-column:4; grid-row:1; }
    .reaction-r1 { grid-column:1; grid-row:2; }
    .reaction-plus-1 { grid-column:2; grid-row:2; }
    .reaction-r2 { grid-column:3; grid-row:2; }
    .reaction-arrow { grid-column:4; grid-row:2; }
    .reaction-p1 { grid-column:5; grid-row:2; }
    .reaction-plus-2 { grid-column:6; grid-row:2; }
    .reaction-p2 { grid-column:7; grid-row:2; }
    .reaction-symbol { text-align:center; color:var(--accent-2); font:700 26px/1 Arial,sans-serif; }
    .reaction-arrow { font-size:38px; color:var(--success); }
    .reaction-slot {
      min-height:82px; border:1px solid var(--border); border-radius:12px;
      background:#111827; padding:9px 10px; display:flex; flex-direction:column;
      justify-content:center; gap:7px; min-width:0;
    }
    .reaction-slot.condition-slot { min-height:64px; padding:8px; }
    .reaction-slot-label { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
    .reaction-slot-value { color:#f9fafb; font:16px/1.35 Consolas, "Courier New", monospace; overflow-wrap:anywhere; }
    .reaction-slot.missing { border-color:#d6a844; box-shadow:0 0 0 1px rgba(214,168,68,.22); }
    .reaction-slot.unused { background:#172033; border-style:dashed; opacity:.75; }
    .reaction-slot.unused .reaction-slot-value { color:#6b7280; font-family:Arial,sans-serif; text-align:center; }
    .reaction-organic-input {
      width:100%; min-height:47px; resize:vertical; border:1px solid #475569; border-radius:7px;
      background:#0b1220; color:#f9fafb; padding:8px; outline:none; font:15px/1.35 Consolas, "Courier New", monospace;
    }
    .reaction-organic-input:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(96,165,250,.18); }
    .reaction-bank-target {
      width:100%; min-height:45px; padding:8px; text-align:left; border:1px dashed #d6a844; border-radius:7px;
      background:#1f2937; color:#fde68a; font:700 13px/1.3 Arial,sans-serif;
    }
    .reaction-bank-target.selected { border-style:solid; background:#243042; color:#f9fafb; }
    .reaction-bank-target:hover { transform:none; filter:none; border-color:#fde68a; }
    .reaction-bank-card .card-header { align-items:flex-start; }
    .reaction-bank { display:flex; flex-wrap:wrap; gap:7px; padding:13px; }
    .reaction-bank button { padding:7px 9px; border-radius:8px; background:#374151; color:#f9fafb; font:700 12px/1.25 Arial,sans-serif; }
    .reaction-bank button:hover { background:#4b5563; }
    .reaction-bank button.active-choice { outline:2px solid #fde68a; outline-offset:1px; }
    .reaction-bank-note { margin:0; padding:0 13px 13px; color:var(--muted); font-size:12px; }
    .reaction-feedback { margin:0 16px 18px; }
    .reaction-status-row { display:flex; justify-content:space-between; gap:10px; align-items:center; margin:0 16px 4px; color:var(--muted); font-size:13px; }
    .reaction-equation-actions {
      display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px;
      margin:8px 22px -6px; position:relative; z-index:2;
    }
    .reaction-structure-toggle {
      margin-right:auto; display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:7px 10px;
      border:1px solid #475569; border-radius:9px; background:#172033; color:#dbeafe;
      font-size:12px; font-weight:800; cursor:pointer;
    }
    .reaction-structure-toggle input { width:17px; height:17px; margin:0; accent-color:#2563eb; }
    .reaction-structure-toggle.locked { cursor:not-allowed; border-color:#f59e0b; background:#3a2a0d; color:#fde68a; }
    .reaction-structure-toggle.locked input { cursor:not-allowed; }
    .reaction-state-requirement-status {
      display:inline-flex; align-items:center; min-height:32px; padding:6px 9px; border:1px solid #475569; border-radius:999px;
      background:#111827; color:#cbd5e1; font-size:11px; font-weight:800; white-space:nowrap;
    }
    .reaction-state-requirement-status.strict { border-color:#60a5fa; background:#172554; color:#dbeafe; }
    .reaction-state-requirement-status.required { border-color:#f59e0b; background:#3a2a0d; color:#fde68a; }
    .reaction-mini-structure-wrap {
      margin-top:5px; min-height:136px; border:1px solid #cbd5e1; border-radius:9px; background:#ffffff;
      padding:2px; overflow:hidden; display:flex; align-items:center; justify-content:center;
    }
    .reaction-mini-structure {
      display:block; width:100%; height:130px; margin:0 auto;
      overflow:visible;
    }
    @media (max-width:800px) {
      .reaction-structure-toggle { width:100%; margin-right:0; justify-content:center; }
      .reaction-state-requirement-status { width:100%; justify-content:center; white-space:normal; text-align:center; }
      .teacher-overview-controls { width:100%; justify-content:stretch; }
      .teacher-overview-control { flex:1 1 180px; }
      .teacher-overview-control select { width:100%; }
      .teacher-anonymous-toggle { flex:1 1 100%; justify-content:center; }
    }
    .reaction-check-button { min-width:170px; padding:10px 16px; box-shadow:0 8px 20px rgba(21,128,61,.22); }
    .reaction-hidden-list { color:#fde68a; font:700 13px/1.35 Arial,sans-serif; }
    .reaction-reference-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
    .reaction-reference-grid .example { font-family:Arial, Helvetica, sans-serif; }

    .reaction-observation {
      margin:0 16px 2px; padding:8px 10px; border-left:3px solid var(--warning);
      background:#172033; color:#f8e7a8; border-radius:0 7px 7px 0;
      font-size:13px; font-weight:700;
    }
    .reaction-observation[hidden] { display:none; }
    .reaction-colour-chip {
      display:inline-flex; align-items:center; gap:5px; vertical-align:baseline;
      margin:0 2px; padding:1px 7px; border:1px solid #475569; border-radius:999px;
      background:#0f172a; color:#f9fafb; font-weight:800;
    }
    .reaction-colour-dot { width:10px; height:10px; border-radius:999px; display:inline-block; border:1px solid rgba(255,255,255,.35); }
    .reaction-colour-dot.orange { background:#f97316; }
    .reaction-colour-dot.green { background:#22c55e; }
    .reaction-colour-dot.purple { background:#a855f7; }
    .reaction-colour-dot.colourless { background:linear-gradient(135deg,#ffffff 0 45%,#94a3b8 45% 55%,#ffffff 55% 100%); }
    .reaction-state-caution { color:#fb923c; font-weight:800; }
    .reaction-accepted-note {
      margin-top:7px; padding:7px 8px; border-left:3px solid #f59e0b; border-radius:0 7px 7px 0;
      background:#261a06; color:#fbbf24; font:700 12px/1.35 Arial,sans-serif;
    }
    .reaction-accepted-note span { color:#fde68a; font-family:Consolas, "Courier New", monospace; font-weight:700; }
    .reaction-organic-answer-pair { display:flex; flex-direction:column; gap:3px; }
    .reaction-answer-name { color:#f9fafb; font-family:Arial,sans-serif; font-weight:800; }
    .reaction-answer-semi { color:#dbeafe; font-family:Consolas, "Courier New", monospace; font-weight:800; }
    .reaction-answer-semi::before { content:"semi-structure: "; color:#93c5fd; font-family:Arial,sans-serif; font-size:11px; font-weight:700; }
    .reaction-bank-target.multi { line-height:1.35; }
    .reaction-bank-target.multi::after {
      content:""; display:block; height:1px;
    }
    .reaction-mastery-section { margin:0 16px 18px; padding:12px; border-radius:10px; background:#111827; }
    .reaction-mastery-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:7px; }
    .reaction-mastery-heading label { color:#bdc1c6; font-size:13px; font-weight:700; }
    .reaction-mastery-heading span { color:#9ca3af; font-size:12px; }
    .reaction-mastery-list { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
    .reaction-mastery-detail {
      display:none; margin-top:8px; max-height:180px; overflow:auto; padding:10px;
      border-radius:8px; background:#0f172a; color:#d1d5db; font:12px/1.45 Consolas,monospace;
    }
    .reaction-hint {
      margin:0 16px 2px; padding:9px 10px; border-left:3px solid var(--accent);
      background:#172033; color:#bfdbfe; border-radius:0 7px 7px 0;
      font-size:13px; font-weight:700;
    }
    .reaction-hint[hidden] { display:none; }
    .reaction-slot.correct {
      border-color:#86efac; background:#153b26; box-shadow:0 0 0 1px rgba(134,239,172,.22);
    }
    .reaction-slot.correct .reaction-slot-label { color:#bbf7d0; }
    .reaction-slot.incorrect {
      border-color:#fca5a5; box-shadow:0 0 0 1px rgba(252,165,165,.20);
    }
    .reaction-organic-input.confirmed-correct,
    .reaction-bank-target.confirmed-correct {
      border-color:#86efac; background:#0f2f20; color:#dcfce7; opacity:1; cursor:default;
    }
    .reaction-bank-target.confirmed-correct:disabled { filter:none; }
    .reaction-attempts-section { margin:0 16px 18px; }
    .reaction-attempts-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
    .reaction-attempts-heading label { color:#bdc1c6; font-size:13px; font-weight:700; }
    .reaction-attempts-heading span { color:#9ca3af; font-size:12px; }
    .reaction-incorrect-list {
      min-height:42px; max-height:130px; overflow:auto; padding:10px; border-radius:8px;
      background:#111827; color:#9ca3af; font:12px/1.45 Consolas, "Courier New", monospace;
    }

    @media (max-width: 980px) {
      #reactionPanel .reaction-layout { grid-template-columns:1fr; }
      .reaction-equation {
        grid-template-columns:minmax(110px,1fr) 24px minmax(110px,1fr) 85px minmax(110px,1fr) 24px minmax(110px,1fr);
        padding:18px 10px 15px;
      }
    }
    @media (max-width: 720px) {
      .reaction-equation {
        grid-template-columns:1fr 32px 1fr;
        grid-template-rows:auto auto auto auto auto;
        row-gap:10px;
      }
      .reaction-condition { grid-column:1 / span 3; grid-row:1; }
      .reaction-r1 { grid-column:1; grid-row:2; }
      .reaction-plus-1 { grid-column:2; grid-row:2; }
      .reaction-r2 { grid-column:3; grid-row:2; }
      .reaction-arrow { grid-column:1 / span 3; grid-row:3; transform:rotate(90deg); margin:2px 0; }
      .reaction-p1 { grid-column:1; grid-row:4; }
      .reaction-plus-2 { grid-column:2; grid-row:4; }
      .reaction-p2 { grid-column:3; grid-row:4; }
      .reaction-reference-grid { grid-template-columns:1fr; }
    }

    @media (max-width: 800px) {
      .grid, .structure-controls { grid-template-columns: 1fr; }
      textarea { min-height: 230px; }
      .examples-grid { grid-template-columns: 1fr; }
      .quiz-difficulty-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .svg-wrap { min-height: 400px; }
      #quizPanel .structure-input { grid-row: auto; }
      #quizPanel .quiz-hint-card { grid-column: auto; }
      #quizPanel .svg-wrap { min-height: 250px; }
      #quizPanel #quizStructureSvg { height: 230px; }
      #quizPanel .skeletal-wrap { min-height: 190px; }
      #quizPanel #quizSkeletalSvg { height: 170px; }
    }
  

    /* ---------- ORGANIC REACTIONS LAYOUT (v61) ---------- */
    #reactionPanel .reaction-layout { display:block; }
    #reactionPanel .reaction-workspace { width:100%; }
    #reactionPanel .reaction-equation {
      grid-template-columns:minmax(165px,1.15fr) 34px minmax(165px,1.15fr) 150px minmax(165px,1.15fr) 34px minmax(165px,1.15fr);
      column-gap:10px; row-gap:12px; padding:26px 22px 18px; min-height:244px;
    }
    .reaction-slot { min-height:108px; padding:12px 13px; gap:8px; }
    .reaction-slot.condition-slot { min-height:78px; padding:10px 12px; }
    .reaction-slot-label { font-size:11px; }
    .reaction-slot-value { font-size:17px; line-height:1.42; overflow-wrap:normal; word-break:normal; }
    .reaction-organic-input { min-height:58px; padding:9px 10px; font-size:16px; }
    .reaction-bank-target { min-height:52px; padding:10px; font-size:14px; }
    .reaction-symbol { font-size:29px; }
    .reaction-arrow { font-size:42px; }

    .reaction-choice-panel {
      margin:0 22px 18px; padding:14px; border:1px solid #d6a844; border-radius:12px;
      background:#162033; box-shadow:0 10px 25px rgba(0,0,0,.2);
    }
    .reaction-choice-panel[hidden] { display:none; }
    .reaction-choice-header {
      display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px;
    }
    .reaction-choice-title { margin:0; color:#f9fafb; font-size:15px; }
    .reaction-choice-help { margin:3px 0 0; color:#bdc1c6; font-size:12px; }
    .reaction-choice-close { padding:7px 9px; font-size:12px; }
    .reaction-choice-list { display:block; }
    .reaction-choice-group { margin:0 0 12px; }
    .reaction-choice-group:last-child { margin-bottom:0; }
    .reaction-choice-group-title {
      margin:0 0 6px; color:#fde68a; font-size:12px; font-weight:800;
      letter-spacing:.03em; text-transform:uppercase;
    }
    .reaction-choice-group-options {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(142px,1fr)); gap:8px;
    }
    .reaction-choice-option {
      display:flex; align-items:center; gap:8px; min-height:42px; padding:9px 10px;
      border:1px solid #475569; border-radius:8px; background:#111827; color:#f9fafb;
      font:700 13px/1.3 Arial,sans-serif; cursor:pointer;
    }
    .reaction-choice-option:hover { border-color:#fde68a; }
    .reaction-choice-option.selected { border-color:#fde68a; background:#243042; color:#fff7d1; }
    .reaction-choice-option input { width:16px; height:16px; margin:0; accent-color:#d6a844; flex:0 0 auto; }
    .reaction-choice-empty { color:#9ca3af; font-size:13px; }

    @media (max-width: 980px) {
      .reaction-equation {
        grid-template-columns:minmax(125px,1fr) 26px minmax(125px,1fr) 105px minmax(125px,1fr) 26px minmax(125px,1fr);
        padding:20px 14px 16px;
      }
      .reaction-slot { min-height:96px; padding:10px; }
      .reaction-choice-panel { margin:0 14px 16px; }
    }
    @media (max-width: 720px) {
      .reaction-choice-group-options { grid-template-columns:1fr 1fr; }
    }


    /* ---------- INTERACTIVE ORGANIC REACTION HELP ---------- */
    .reaction-help-overlay {
      position:fixed; inset:0; z-index:1050; display:flex; align-items:flex-start; justify-content:center;
      overflow:auto; padding:22px; background:rgba(2,6,23,.86); backdrop-filter:blur(6px);
    }
    .reaction-help-overlay[hidden] { display:none; }
    .reaction-help-sheet {
      width:min(1240px,100%); margin:auto; overflow:hidden; border:1px solid #475569; border-radius:18px;
      background:var(--panel); box-shadow:0 28px 80px rgba(0,0,0,.58);
    }
    .reaction-help-header {
      position:sticky; top:0; z-index:8; display:flex; justify-content:space-between; align-items:flex-start;
      gap:18px; padding:19px 22px; border-bottom:1px solid var(--border);
      background:linear-gradient(125deg,#172554,#111827);
    }
    .reaction-help-header h2 { margin:0; color:#f8fafc; font-size:clamp(22px,3vw,30px); }
    .reaction-help-header p { margin:5px 0 0; color:#bfdbfe; font-size:13px; line-height:1.45; }
    .reaction-help-close { flex:0 0 auto; margin-right:48px; }
    .reaction-help-body { padding:20px 22px 26px; }
    .reaction-help-intro {
      margin:0 0 15px; padding:13px 15px; border-left:4px solid #60a5fa; border-radius:0 10px 10px 0;
      background:#172033; color:#dbeafe; font-size:14px; line-height:1.55;
    }
    .reaction-help-method-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
    .reaction-help-method {
      min-width:0; padding:12px 13px; border:1px solid var(--border); border-radius:12px; background:var(--panel-2);
      color:var(--muted); font-size:12px; line-height:1.45;
    }
    .reaction-help-method strong { display:block; margin-bottom:5px; color:var(--text); font-size:13px; }
    .reaction-help-step-number {
      display:inline-grid; place-items:center; width:24px; height:24px; margin-right:6px; border-radius:999px;
      background:#1d4ed8; color:#fff; font-size:12px;
    }
    .reaction-help-section-title { margin:19px 0 9px; color:var(--text); font-size:18px; }
    .reaction-help-map {
      display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:18px;
    }
    .reaction-help-map-button {
      min-height:78px; padding:10px 12px; text-align:left; border:1px solid #475569; border-radius:11px;
      background:#172033; color:#dbeafe;
    }
    .reaction-help-map-button strong { display:block; margin-bottom:4px; color:#fff; font-size:13px; }
    .reaction-help-map-button span { color:#93c5fd; font-size:11px; line-height:1.35; }
    .reaction-help-map-button:hover,
    .reaction-help-map-button.active { border-color:#60a5fa; background:#1e3a5f; transform:none; filter:none; }
    .reaction-help-family-tabs {
      display:flex; gap:7px; overflow-x:auto; padding:9px; margin:0 0 11px; border:1px solid var(--border);
      border-radius:12px; background:#111827; scrollbar-width:thin;
    }
    .reaction-help-family-tab { flex:0 0 auto; padding:8px 11px; border-radius:8px; background:#243042; color:#d1d5db; font-size:12px; }
    .reaction-help-family-tab.active { background:#1d4ed8; color:#fff; box-shadow:0 5px 14px rgba(29,78,216,.28); }
    .reaction-help-family-summary {
      margin:0 0 10px; padding:11px 13px; border-radius:10px; background:#172033; color:#cbd5e1;
      font-size:13px; line-height:1.5;
    }
    .reaction-help-example-tabs { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 11px; }
    .reaction-help-example-tab { padding:7px 10px; background:#374151; color:#e5e7eb; font-size:12px; }
    .reaction-help-example-tab.active { background:#0f766e; color:#fff; }
    .reaction-help-example-card { overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--panel-2); }
    .reaction-help-example-heading {
      display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:14px 16px;
      border-bottom:1px solid var(--border); background:#172033;
    }
    .reaction-help-example-heading h3 { margin:0; color:#f8fafc; font-size:19px; }
    .reaction-help-example-heading p { margin:4px 0 0; color:#bfdbfe; font-size:13px; line-height:1.45; }
    .reaction-help-try-button { flex:0 0 auto; }
    .reaction-help-equation-text {
      padding:11px 14px; border-bottom:1px solid var(--border); color:#dbeafe;
      font:700 13px/1.5 Consolas,"Courier New",monospace; text-align:center; overflow-wrap:anywhere;
    }
    .reaction-help-participants {
      display:flex; align-items:stretch; gap:9px; overflow-x:auto; padding:14px; background:#0f172a;
      scroll-snap-type:x proximity;
    }
    .reaction-help-organic-card,
    .reaction-help-inorganic-card,
    .reaction-help-arrow-card,
    .reaction-help-symbol-card { flex:0 0 auto; scroll-snap-align:start; }
    .reaction-help-organic-card {
      width:245px; overflow:hidden; border:1px solid #475569; border-radius:11px; background:#f8fafc;
    }
    .reaction-help-organic-meta { min-height:70px; padding:8px 10px; border-bottom:1px solid #cbd5e1; background:#e2e8f0; }
    .reaction-help-organic-role { display:block; margin-bottom:2px; color:#475569; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
    .reaction-help-organic-name { display:block; color:#111827; font-size:13px; font-weight:800; line-height:1.3; }
    .reaction-help-organic-semi { display:block; margin-top:3px; color:#1e3a8a; font:700 11px/1.3 Consolas,"Courier New",monospace; overflow-wrap:anywhere; }
    .reaction-help-structure-svg { display:block; width:100%; height:215px; background:#fff; }
    .reaction-help-inorganic-card {
      align-self:center; width:126px; min-height:96px; display:flex; flex-direction:column; justify-content:center; gap:5px;
      padding:10px; border:1px dashed #64748b; border-radius:10px; background:#172033; text-align:center;
    }
    .reaction-help-inorganic-card small { color:#94a3b8; font-size:10px; font-weight:800; text-transform:uppercase; }
    .reaction-help-inorganic-card strong { color:#f8fafc; font:700 13px/1.4 Consolas,"Courier New",monospace; overflow-wrap:anywhere; }
    .reaction-help-arrow-card {
      align-self:center; width:130px; min-height:96px; display:flex; flex-direction:column; justify-content:center; align-items:center;
      padding:8px; color:#86efac; text-align:center;
    }
    .reaction-help-arrow-card strong { font-size:40px; line-height:1; }
    .reaction-help-arrow-card span { margin-top:5px; color:#fde68a; font-size:10px; line-height:1.35; }
    .reaction-help-symbol-card { align-self:center; width:24px; color:#93c5fd; font-size:25px; font-weight:800; text-align:center; }
    .reaction-help-controls-wrap { padding:13px 15px 14px; border-top:1px solid var(--border); }
    .reaction-help-control-instruction { margin:0 0 8px; color:var(--muted); font-size:12px; }
    .reaction-help-controls { display:flex; flex-wrap:wrap; gap:7px; }
    .reaction-help-control {
      display:inline-flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid #475569; border-radius:8px;
      background:#243042; color:#e5e7eb; font-size:12px;
    }
    .reaction-help-control:hover { transform:none; filter:none; border-color:#93c5fd; }
    .reaction-help-control.active { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.14); }
    .reaction-help-swatch { width:12px; height:12px; border-radius:3px; border:2px solid currentColor; }
    .reaction-help-control[data-style="tracked"] { color:#93c5fd; }
    .reaction-help-control[data-style="removed"] { color:#fb923c; }
    .reaction-help-control[data-style="added"] { color:#86efac; }
    .reaction-help-control[data-style="changed"] { color:#c4b5fd; }
    .reaction-help-control[data-style="product"] { color:#5eead4; }
    .reaction-help-clear { padding:7px 9px; font-size:12px; }
    .reaction-help-explanation {
      min-height:48px; margin:10px 0 0; padding:10px 11px; border-radius:9px; background:#111827;
      color:#dbeafe; font-size:13px; line-height:1.45;
    }
    .reaction-help-teaching-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:13px; padding:0 15px 15px; }
    .reaction-help-steps-card,
    .reaction-help-mistake-card { padding:11px 12px; border:1px solid var(--border); border-radius:10px; background:#111827; }
    .reaction-help-steps-card strong,
    .reaction-help-mistake-card strong { display:block; margin-bottom:6px; color:#f8fafc; font-size:13px; }
    .reaction-help-steps { margin:0; padding-left:19px; color:#cbd5e1; font-size:12px; line-height:1.48; }
    .reaction-help-steps li + li { margin-top:4px; }
    .reaction-help-mistake-card { border-left:4px solid #f59e0b; color:#fde68a; font-size:12px; line-height:1.48; }
    .reaction-help-reference-scroll { overflow-x:auto; border:1px solid var(--border); border-radius:11px; }
    .reaction-help-reference-table { width:100%; min-width:840px; border-collapse:collapse; font-size:12px; line-height:1.4; }
    .reaction-help-reference-table th,
    .reaction-help-reference-table td { padding:9px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
    .reaction-help-reference-table th { position:sticky; top:0; z-index:2; background:#172033; color:#f8fafc; }
    .reaction-help-reference-table tbody tr:last-child td { border-bottom:0; }
    .reaction-help-reference-table tbody tr:nth-child(even) td { background:rgba(36,48,66,.42); }
    .reaction-help-reference-code { color:#dbeafe; font:700 12px/1.35 Consolas,"Courier New",monospace; white-space:nowrap; }
    body.reaction-help-open { overflow:hidden; }

    .reaction-help-highlight-overlay { pointer-events:none; }
    .reaction-help-highlight-bond { stroke-width:10; stroke-linecap:round; opacity:.78; }
    .reaction-help-highlight-atom { stroke-width:3; opacity:.78; }
    .reaction-help-highlight-bond.rh-tracked { stroke:#3b82f6; }
    .reaction-help-highlight-atom.rh-tracked { fill:rgba(59,130,246,.25); stroke:#2563eb; }
    .reaction-help-highlight-bond.rh-removed { stroke:#f97316; stroke-dasharray:12 7; }
    .reaction-help-highlight-atom.rh-removed { fill:rgba(249,115,22,.23); stroke:#ea580c; stroke-dasharray:6 4; }
    .reaction-help-highlight-bond.rh-added { stroke:#22c55e; }
    .reaction-help-highlight-atom.rh-added { fill:rgba(34,197,94,.22); stroke:#16a34a; }
    .reaction-help-highlight-bond.rh-changed { stroke:#8b5cf6; stroke-dasharray:4 4; }
    .reaction-help-highlight-atom.rh-changed { fill:rgba(139,92,246,.22); stroke:#7c3aed; }
    .reaction-help-highlight-bond.rh-product { stroke:#14b8a6; }
    .reaction-help-highlight-atom.rh-product { fill:rgba(20,184,166,.22); stroke:#0f766e; }
    .reaction-help-custom-active.rh-tracked { stroke:#2563eb !important; fill:#2563eb !important; }
    .reaction-help-custom-active.rh-removed { stroke:#ea580c !important; fill:#ea580c !important; stroke-dasharray:10 5; }
    .reaction-help-custom-active.rh-added { stroke:#16a34a !important; fill:#16a34a !important; }
    .reaction-help-custom-active.rh-changed { stroke:#7c3aed !important; fill:#7c3aed !important; stroke-dasharray:5 4; }
    .reaction-help-custom-active.rh-product { stroke:#0f766e !important; fill:#0f766e !important; }

    html[data-theme="light"] .reaction-help-header { background:linear-gradient(125deg,#dbeafe,#eff6ff); }
    html[data-theme="light"] .reaction-help-header h2 { color:#0f172a; }
    html[data-theme="light"] .reaction-help-header p { color:#1e40af; }
    html[data-theme="light"] .reaction-help-intro,
    html[data-theme="light"] .reaction-help-family-summary { background:#eff6ff; color:#1e3a8a; }
    html[data-theme="light"] .reaction-help-map-button,
    html[data-theme="light"] .reaction-help-family-tabs,
    html[data-theme="light"] .reaction-help-example-heading,
    html[data-theme="light"] .reaction-help-inorganic-card,
    html[data-theme="light"] .reaction-help-controls-wrap,
    html[data-theme="light"] .reaction-help-steps-card,
    html[data-theme="light"] .reaction-help-mistake-card,
    html[data-theme="light"] .reaction-help-explanation { background:#f8fafc; }
    html[data-theme="light"] .reaction-help-example-heading h3,
    html[data-theme="light"] .reaction-help-inorganic-card strong,
    html[data-theme="light"] .reaction-help-steps-card strong,
    html[data-theme="light"] .reaction-help-mistake-card strong { color:#111827; }
    html[data-theme="light"] .reaction-help-example-heading p,
    html[data-theme="light"] .reaction-help-equation-text,
    html[data-theme="light"] .reaction-help-explanation { color:#1e3a8a; }
    html[data-theme="light"] .reaction-help-participants { background:#e2e8f0; }
    html[data-theme="light"] .reaction-help-control { background:#f1f5f9; }
    html[data-theme="light"] .reaction-help-steps { color:#475569; }
    html[data-theme="light"] .reaction-help-mistake-card { color:#92400e; }
    html[data-theme="light"] .reaction-help-reference-table th { background:#e2e8f0; color:#0f172a; }
    html[data-theme="light"] .reaction-help-reference-table tbody tr:nth-child(even) td { background:#f8fafc; }
    html[data-theme="light"] .reaction-help-reference-code { color:#1e3a8a; }

    @media (max-width: 900px) {
      .reaction-help-method-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .reaction-help-map { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .reaction-help-teaching-grid { grid-template-columns:1fr; }
    }
    @media (max-width: 700px) {
      .reaction-help-overlay { padding:0; }
      .reaction-help-sheet { min-height:100vh; border:0; border-radius:0; }
      .reaction-help-header { padding:14px 70px 14px 15px; }
      .reaction-help-header h2 { font-size:21px; }
      .reaction-help-body { padding:14px 13px 22px; }
      .reaction-help-method-grid,
      .reaction-help-map { grid-template-columns:1fr; }
      .reaction-help-map-button { min-height:64px; }
      .reaction-help-example-heading { flex-direction:column; padding-right:70px; }
      .reaction-help-try-button { align-self:stretch; }
      .reaction-help-participants {
        flex-direction:column; align-items:stretch; overflow-x:visible; scroll-snap-type:none; padding:12px;
      }
      .reaction-help-organic-card,
      .reaction-help-inorganic-card,
      .reaction-help-arrow-card { width:100%; }
      .reaction-help-inorganic-card { min-height:70px; }
      .reaction-help-symbol-card { width:100%; height:24px; line-height:24px; }
      .reaction-help-arrow-card { min-height:78px; }
      .reaction-help-arrow-card strong { transform:rotate(90deg); }
      .reaction-help-structure-svg { height:230px; }
      .reaction-help-controls { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
      .reaction-help-control,
      .reaction-help-clear { flex:0 0 auto; }
    }


    /* ---------- MOLECULE INFO PAGE (v72) ---------- */
    .molecule-info-overlay {
      position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-start; justify-content:center;
      overflow:auto; padding:24px; background:rgba(2,6,23,.82); backdrop-filter:blur(5px);
    }
    .molecule-info-overlay[hidden] { display:none; }
    .molecule-info-page {
      width:min(1160px,100%); margin:auto; overflow:hidden; border:1px solid #475569; border-radius:18px;
      background:#111827; box-shadow:0 26px 70px rgba(0,0,0,.55);
    }
    .molecule-info-header {
      display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px 22px;
      border-bottom:1px solid var(--border); background:linear-gradient(125deg,#172554,#111827);
    }
    .molecule-info-header h2 { margin:0; font-size:clamp(22px,3vw,31px); letter-spacing:-.025em; }
    .molecule-info-header p { margin:5px 0 0; color:#bfdbfe; font-size:13px; }
    .molecule-info-close { flex:0 0 auto; background:#374151; color:#f9fafb; }
    .molecule-info-body { padding:20px 22px 24px; }
    .molecule-info-status { min-height:23px; margin:0 0 16px; color:#cbd5e1; font-size:14px; }
    .molecule-info-status.error { color:#fca5a5; }
    .molecule-info-status.ok { color:#86efac; }
    .molecule-info-reference-note { margin:-8px 0 16px; padding:10px 12px; border:1px solid rgba(96,165,250,.32); border-radius:10px; background:rgba(30,64,175,.16); color:#dbeafe; font-size:12px; line-height:1.45; }
    .molecule-info-layout { display:grid; grid-template-columns:minmax(320px,.92fr) minmax(0,1.08fr); gap:18px; align-items:start; }
    .molecule-info-card {
      min-width:0; overflow:hidden; border:1px solid #374151; border-radius:14px; background:#1f2937;
    }
    .molecule-info-card h3 { margin:0; padding:13px 15px; border-bottom:1px solid #374151; font-size:16px; }
    .molecule-info-card-heading {
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      border-bottom:1px solid #374151;
    }
    .molecule-info-card-heading h3 { padding:13px 15px; border-bottom:0; }
    .molecule-viewer-theme-toggle { display:flex; align-items:center; gap:6px; padding:8px 10px; }
    button.molecule-viewer-theme-btn {
      min-height:31px; padding:6px 9px; border:1px solid #475569; border-radius:7px;
      background:#111827; color:#cbd5e1; font:700 12px/1 Arial,sans-serif;
    }
    button.molecule-viewer-theme-btn:hover { border-color:#93c5fd; background:#172033; transform:none; filter:none; }
    button.molecule-viewer-theme-btn.active { border-color:#93c5fd; background:#1d4ed8; color:#eff6ff; }
    .molecule-3d-viewer {
      position:relative; isolation:isolate; overflow:hidden;
      width:100%; height:365px; background:#020617;
    }
    .molecule-3d-viewer.is-black { background:#020617; }
    .molecule-3d-note { margin:0; padding:10px 13px; color:#cbd5e1; font-size:12px; border-top:1px solid #374151; }
    .molecule-info-id-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:#374151; }
    .molecule-info-field { min-width:0; padding:12px 13px; background:#111827; }
    .molecule-info-field.full { grid-column:1 / -1; }
    .molecule-primary-hazards-field { padding:0; background:#172033; }
    .molecule-primary-hazards-field .molecule-info-label { margin:0; padding:12px 13px 8px; border-bottom:1px solid #374151; }
    .molecule-primary-hazards-field .molecule-ghs-wrap { padding:12px 13px 14px; }
    .molecule-info-label { display:block; margin-bottom:4px; color:#9ca3af; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
    .molecule-info-value { min-height:21px; color:#f9fafb; overflow-wrap:anywhere; font-size:15px; }
    .molecule-info-value.no-data { color:#9ca3af; font-style:italic; }
    .molecule-info-special-list { margin:0; padding-left:19px; color:#f9fafb; font-size:14px; line-height:1.45; }
    .molecule-info-special-list li { margin:0 0 5px; }
    .molecule-info-special-list li:last-child { margin-bottom:0; }
    .molecule-info-value a, .molecule-info-ref a, .molecule-info-links a { color:#93c5fd; }
    .molecule-info-properties-heading { align-items:center; }
    .molecule-temperature-toggle { display:flex; align-items:center; gap:5px; padding:8px 10px; }
    button.molecule-temperature-unit-btn {
      min-width:42px; min-height:31px; padding:6px 8px; border:1px solid #475569; border-radius:7px;
      background:#111827; color:#cbd5e1; font:700 12px/1 Arial,sans-serif;
    }
    button.molecule-temperature-unit-btn:hover { border-color:#93c5fd; background:#172033; transform:none; filter:none; }
    button.molecule-temperature-unit-btn.active { border-color:#93c5fd; background:#1d4ed8; color:#eff6ff; }
    .molecule-info-properties { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:13px; }
    .molecule-info-property { min-width:0; min-height:104px; padding:11px; border:1px solid #475569; border-radius:10px; background:#111827; }
    .molecule-info-property strong { display:block; margin-bottom:6px; color:#e5e7eb; font-size:13px; }
    .molecule-info-property-value { min-height:38px; color:#f9fafb; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
    .molecule-info-ref { margin-top:7px; color:#9ca3af; font-size:11px; overflow-wrap:anywhere; }
    .molecule-info-text { padding:13px 15px 14px; color:#e5e7eb; font-size:14px; }
    .molecule-info-list { margin:0; padding-left:20px; }
    .molecule-info-list li { margin:0 0 8px; }
    .molecule-info-list li:last-child { margin-bottom:0; }
    .molecule-info-links { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
    .molecule-info-link {
      display:inline-flex; align-items:center; min-height:38px; padding:9px 11px; border:1px solid #475569;
      border-radius:9px; background:#172033; color:#bfdbfe; font-weight:700; font-size:13px; text-decoration:none;
    }
    .molecule-info-link:hover { border-color:#93c5fd; filter:brightness(1.08); }
    .molecule-info-disclaimer { margin:14px 0 0; color:#9ca3af; font-size:12px; }

    /* ---------- MOLECULE INFO EXTENSIONS (v74) ---------- */
    .molecule-viewer-controls { display:flex; flex-direction:column; gap:8px; padding:11px 12px 0; }
    .molecule-viewer-control-group { display:flex; flex-wrap:wrap; gap:7px; }
    button.molecule-viewer-control-btn,
    button.molecule-spectrum-toggle-btn {
      min-height:33px; padding:6px 10px; border:1px solid #475569; border-radius:8px;
      background:#111827; color:#e5e7eb; font:700 12px/1.2 Arial,sans-serif;
    }
    button.molecule-viewer-control-btn:hover,
    button.molecule-spectrum-toggle-btn:hover { border-color:#93c5fd; background:#172033; transform:none; filter:none; }
    button.molecule-viewer-control-btn.active,
    button.molecule-spectrum-toggle-btn.active { border-color:#93c5fd; background:#1d4ed8; color:#eff6ff; }
    .molecule-ghs-wrap { padding:14px; }
    .molecule-ghs-strip { display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px; }
    .molecule-ghs-icons { display:flex; flex-wrap:wrap; gap:11px; }
    .molecule-ghs-icon { width:66px; text-align:center; color:#cbd5e1; font-size:11px; }
    .molecule-ghs-diamond {
      width:46px; height:46px; margin:0 auto 5px; display:grid; place-items:center; border:3px solid #dc2626;
      border-radius:4px; background:#fff; transform:rotate(45deg); box-shadow:0 4px 12px rgba(0,0,0,.18);
    }
    .molecule-ghs-diamond span { transform:rotate(-45deg); color:#111827; font:700 15px/1 Arial,sans-serif; }
    .molecule-ghs-diamond svg { width:37px; height:37px; transform:rotate(-45deg); overflow:visible; }
    .molecule-ghs-diamond svg * { fill:#111827; stroke:#111827; }
    /* The official PubChem SVGs contain a transparent field inside the red
       diamond. The white field therefore sits behind the icon, inset to the
       inner edge of the red border rather than being painted over the entire
       image box. This prevents a larger white diamond protruding outside the
       official red outline. */
    .molecule-ghs-official-wrap {
      position:relative; width:52px; height:52px; margin:0 auto 5px;
      display:grid; place-items:center; isolation:isolate;
    }
    .molecule-ghs-official-wrap::before {
      content:""; position:absolute; z-index:0;
      width:75%; height:75%; background:#ffffff;
      transform:rotate(45deg); border-radius:1px;
    }
    .molecule-ghs-official-icon {
      position:relative; z-index:1; display:block; width:100%; height:100%; margin:0;
      object-fit:contain; background:transparent; clip-path:none; padding:0;
      filter:drop-shadow(0 3px 6px rgba(0,0,0,.2));
    }
    .molecule-ghs-meta { flex:1 1 260px; min-width:230px; }
    .molecule-ghs-signal { margin:0 0 8px; color:#fde68a; font-size:14px; font-weight:700; }
    .molecule-ghs-h-list { margin:0; padding-left:19px; color:#e5e7eb; font-size:13px; }
    .molecule-ghs-h-list li { margin-bottom:6px; }
    .molecule-ghs-empty { color:#9ca3af; font-style:italic; }
    .molecule-spectrum-link-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:13px; }
    .molecule-spectrum-link-row { min-width:0; padding:11px; border:1px solid #475569; border-radius:10px; background:#111827; }
    .molecule-spectrum-link-row strong { display:block; margin-bottom:6px; color:#e5e7eb; font-size:13px; }
    .molecule-spectrum-link-target { min-height:22px; color:#f9fafb; font-size:14px; }
    .molecule-spectrum-link-target.no-data { color:#9ca3af; font-style:italic; }
    .molecule-spectrum-link-target a { color:#93c5fd; font-weight:700; }
    .molecule-spectrum-link-note { margin-top:5px; color:#9ca3af; font-size:11px; line-height:1.35; }
    .molecule-spectrum-source { padding:14px 15px 15px; }
    .molecule-spectrum-source p { margin:0 0 10px; color:#cbd5e1; font-size:14px; }
    .molecule-spectrum-source a, .molecule-ghs-source-link { color:#93c5fd; font-weight:700; }
    .molecule-ghs-source-link { display:inline-flex; margin-top:11px; font-size:13px; }
    .molecule-spectrum-toolbar { display:flex; flex-wrap:wrap; gap:8px; padding:13px 15px 0; }
    .molecule-spectrum-helper { padding:9px 15px 0; color:#cbd5e1; font-size:13px; }
    .molecule-spectrum-display { min-height:395px; margin:13px 15px 15px; padding:14px; border:1px solid #475569; border-radius:12px; background:#0f172a; color:#e5e7eb; }
    .molecule-spectrum-display.empty { display:grid; place-items:center; color:#9ca3af; font-style:italic; }
    .molecule-spectrum-title { margin:0 0 7px; font-size:17px; }
    .molecule-spectrum-note { margin:0 0 12px; color:#cbd5e1; font-size:12px; }
    .molecule-spectrum-svg-wrap { overflow:auto; border:1px solid #334155; border-radius:10px; background:#fff; }
    .molecule-spectrum-svg-wrap svg { display:block; width:100%; min-width:720px; height:auto; }
    .molecule-spectrum-summary { margin:12px 0 0; padding-left:19px; }
    .molecule-spectrum-summary li { margin-bottom:6px; }

    /* ---------- POSSIBLE REACTIONS IN MOLECULE INFO (v75) ---------- */
    .molecule-possible-reactions {
      padding:13px;
    }
    .molecule-possible-reactions-intro {
      margin:0 0 11px; color:#cbd5e1; font-size:13px;
    }
    .molecule-possible-reactions-list {
      display:grid; gap:10px;
    }
    .molecule-possible-reaction {
      min-width:0; padding:11px 12px; border:1px solid #475569; border-radius:10px;
      background:#111827;
    }
    .molecule-possible-reaction-family {
      margin:0 0 7px; color:#fde68a; font-size:13px; font-weight:700;
    }
    .molecule-possible-reaction-equation {
      display:flex; flex-wrap:wrap; align-items:center; gap:5px; color:#f9fafb;
      font:14px/1.45 Consolas, "Courier New", monospace;
    }
    .molecule-possible-reaction-bracket {
      color:#9ca3af; font-weight:700;
    }
    .molecule-possible-reaction-arrow {
      padding:0 2px; color:#86efac; font:700 20px/1 Arial,sans-serif;
    }
    .molecule-possible-reaction-part {
      min-width:0; color:#f9fafb; overflow-wrap:anywhere;
    }
    button.molecule-possible-reaction-product {
      min-height:0; padding:2px 5px; border:1px solid #60a5fa; border-radius:5px;
      background:#172554; color:#bfdbfe; font:700 14px/1.35 Consolas, "Courier New", monospace;
      overflow-wrap:anywhere;
    }
    button.molecule-possible-reaction-product:hover {
      border-color:#bfdbfe; background:#1d4ed8; transform:none; filter:none;
    }
    .molecule-possible-reaction-product-static {
      padding:2px 5px; border:1px dashed #475569; border-radius:5px; color:#cbd5e1;
    }
    .molecule-possible-reaction-condition {
      margin:9px 0 0; color:#9ca3af; font-size:12px; line-height:1.4;
    }
    .molecule-possible-reaction-condition strong {
      color:#cbd5e1;
    }
    .molecule-possible-reactions-empty {
      padding:4px 1px; color:#9ca3af; font-size:14px; font-style:italic;
    }

    /* ---------- MOLECULE INFO: FORMULA ANALYSIS, TESTS & EXPLICIT CHARGES (v86) ---------- */
    .molecule-analysis-field {
      padding:0; background:#111827;
    }
    .molecule-analysis-field > .molecule-info-label {
      margin:0; padding:12px 13px 8px; border-bottom:1px solid #374151;
    }
    .molecule-analysis-content {
      padding:12px 13px 14px;
    }
    .molecule-analysis-mass-row {
      display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; margin-bottom:12px;
    }
    .molecule-analysis-mass-label {
      display:flex; flex-direction:column; gap:5px; color:#cbd5e1; font-size:12px; font-weight:700;
    }
    .molecule-analysis-mass-input {
      width:150px; min-height:38px; border:1px solid #475569; border-radius:8px;
      background:#0f172a; color:#f9fafb; padding:8px 9px; outline:none; font:700 15px/1 Consolas, "Courier New", monospace;
    }
    .molecule-analysis-mass-input:focus {
      border-color:#93c5fd; box-shadow:0 0 0 2px rgba(96,165,250,.18);
    }
    .molecule-analysis-helper {
      margin:0 0 2px; color:#9ca3af; font-size:12px; line-height:1.4;
    }
    .molecule-element-mass-grid {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(142px,1fr)); gap:9px;
    }
    .molecule-element-mass-card {
      min-width:0; padding:10px; border:1px solid #475569; border-radius:9px; background:#172033;
    }
    .molecule-element-mass-card strong {
      display:block; margin-bottom:4px; color:#f9fafb; font-size:14px;
    }
    .molecule-element-mass-card span {
      display:block; color:#cbd5e1; font:13px/1.42 Consolas, "Courier New", monospace;
    }
    .molecule-analysis-empty {
      color:#9ca3af; font-size:13px; font-style:italic;
    }
    .molecule-combustion-summary {
      display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:10px;
    }
    .molecule-combustion-result {
      min-width:0; padding:10px; border:1px solid #475569; border-radius:9px; background:#172033;
    }
    .molecule-combustion-result strong {
      display:block; margin-bottom:5px; color:#e5e7eb; font-size:13px;
    }
    .molecule-combustion-result span {
      color:#86efac; font:700 16px/1.25 Consolas, "Courier New", monospace;
    }
    .molecule-combustion-equation {
      margin:0; color:#cbd5e1; font:13px/1.45 Consolas, "Courier New", monospace;
    }
    .molecule-test-grid {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px;
    }
    .molecule-test-result {
      min-width:0; padding:11px; border:1px solid #475569; border-radius:10px; background:#111827;
    }
    .molecule-test-result.positive { border-color:#86efac; background:#153b26; }
    .molecule-test-result.negative { border-color:#64748b; background:#172033; }
    .molecule-test-result.unsuitable { border-color:#f59e0b; background:#3b2a12; }
    .molecule-test-result strong {
      display:block; margin-bottom:5px; color:#f9fafb; font-size:13px;
    }
    .molecule-test-result .molecule-test-outcome {
      display:block; margin-bottom:5px; color:#bbf7d0; font-size:12px; font-weight:700;
    }
    .molecule-test-result.negative .molecule-test-outcome { color:#cbd5e1; }
    .molecule-test-result.unsuitable .molecule-test-outcome { color:#fde68a; }
    .molecule-test-result p {
      margin:0; color:#d1d5db; font-size:12px; line-height:1.42;
    }
    .molecule-info-percent-composition {
      color:#f9fafb; font:14px/1.5 Consolas, "Courier New", monospace;
    }

    @media (max-width:800px) {
      .molecule-combustion-summary, .molecule-test-grid { grid-template-columns:1fr; }
    }

    @media (max-width:800px) {
      .molecule-spectrum-link-list { grid-template-columns:1fr; }
      .molecule-spectrum-display { min-height:350px; }
    }
    @media (max-width:800px) {
      .molecule-info-overlay { padding:10px; }
      .molecule-info-header, .molecule-info-body { padding-left:14px; padding-right:14px; }
      .molecule-info-layout { grid-template-columns:1fr; }
      .molecule-info-properties { grid-template-columns:1fr; }
      .molecule-info-card-heading { align-items:flex-start; flex-direction:column; gap:0; }
      .molecule-viewer-theme-toggle { padding:0 12px 12px; }
      .molecule-3d-viewer { height:310px; }
    }


    /* ---------- MOLECULE BUILDER (v76) ---------- */
    #builderPanel .structure-input { grid-row: 1 / span 2; }
    #builderPanel #structureInput {
      min-height:48px; height:48px; resize:none; padding:12px 13px;
      white-space:pre; overflow-x:auto; overflow-y:hidden; overflow-wrap:normal;
      line-height:24px;
    }
    .builder-mode-row {
      display:flex; flex-wrap:wrap; align-items:center; gap:9px;
      padding:12px 16px 0;
    }
    .builder-mode-label { color:#bdc1c6; font-size:13px; font-weight:700; }
    .builder-mode-select {
      min-height:36px; border:1px solid #475569; border-radius:8px;
      background:#111827; color:#f9fafb; padding:7px 9px; font:700 13px Arial,sans-serif;
    }
    .builder-recognition {
      display:inline-flex; align-items:center; min-height:31px; padding:6px 9px;
      border:1px solid #475569; border-radius:999px; background:#172033;
      color:#cbd5e1; font:700 12px/1.2 Arial,sans-serif;
    }
    .builder-recognition.formula { border-color:#60a5fa; color:#bfdbfe; background:#172554; }
    .builder-recognition.name { border-color:#86efac; color:#bbf7d0; background:#153b26; }
    .builder-mobile-mode-toggle,
    .builder-structure-toggle,
    .builder-floating-structure,
    .quiz-floating-molecule { display:none; }
    #builderPanel .builder-chem-keyboard {
      display:block; padding:10px 12px 12px; border-top:1px solid #374151;
      background:#0f172a;
    }
    #builderPanel .builder-chem-keyboard[hidden] { display:none !important; }
    #builderPanel .builder-chem-keyboard-row {
      display:grid; gap:6px; margin-bottom:7px;
    }
    #builderPanel .builder-chem-editing {
      grid-template-columns:repeat(5, minmax(0, 1fr));
    }
    #builderPanel .builder-chem-shortcuts {
      grid-template-columns:repeat(6, minmax(0, 1fr));
    }
    #builderPanel .builder-chem-keyboard-grid {
      display:grid; grid-template-columns:repeat(8, minmax(0, 1fr));
      gap:6px; margin-bottom:0;
    }
    #builderPanel .builder-chem-keyboard button {
      min-width:0; min-height:38px; padding:6px 5px; border-radius:8px;
      background:#273449; color:#f8fafc; font-size:14px !important;
    }
    #builderPanel .builder-chem-keyboard button:hover {
      transform:none; filter:none; background:#3b4a62;
    }
    #builderPanel .builder-chem-shortcuts button { color:#bfdbfe; font-size:13px !important; }
    #builderPanel .builder-chem-editing button { background:#374151; }
    #builderPanel .builder-chem-editing .builder-chem-abc { background:#2563eb; color:#eff6ff; }
    .builder-structure-toggle { grid-column:2; }
    .builder-floating-structure[hidden],
    .quiz-floating-molecule[hidden] { display:none !important; }
    .builder-output-stack { padding:0 16px 14px; display:grid; gap:11px; }
    .builder-output-label { display:block; margin:0 0 6px; color:#bdc1c6; font-size:13px; font-weight:700; }
    .builder-output-row { display:flex; gap:8px; align-items:stretch; }
    .builder-output-row textarea { min-height:56px; height:56px; padding:10px; font-size:15px; flex:1; color:#bfdbfe; }
    .builder-name-output, .builder-check-output {
      min-height:47px; padding:10px 11px; border-radius:8px; background:#111827;
      color:#f9fafb; font:15px/1.4 Arial,sans-serif;
    }
    .builder-check-output { color:#cbd5e1; min-height:58px; }
    .builder-check-output.ok { color:#86efac; }
    .builder-check-output.warning { color:#fde68a; }
    .builder-check-output.error { color:#fca5a5; }
    .builder-examples-title { margin:0 16px 8px; color:#bdc1c6; font-size:13px; font-weight:700; }
    .builder-inline-note { margin:0 16px 14px; color:#9ca3af; font-size:12px; line-height:1.4; }
    .builder-formatter {
      margin-top:22px; overflow:hidden; border:1px solid var(--border); border-radius:16px;
      background:rgba(31,41,55,.72);
    }
    .builder-formatter summary {
      padding:14px 16px; color:#f9fafb; font-weight:700; cursor:pointer;
      list-style:none;
    }
    .builder-formatter summary::-webkit-details-marker { display:none; }
    .builder-formatter summary::after { content:"＋"; float:right; color:#93c5fd; font-size:18px; line-height:.9; }
    .builder-formatter[open] summary { border-bottom:1px solid var(--border); }
    .builder-formatter[open] summary::after { content:"−"; }
    .builder-formatter-body { padding:15px; }
    .builder-formatter .toolbar { margin-bottom:12px; }
    .builder-formatter .grid { gap:14px; }
    .builder-formatter textarea { min-height:150px; }
    .builder-formatter .examples { margin-top:14px; padding:14px; }
    .legacy-name-compat { display:none !important; }
    @media (max-width:800px) {
      #builderPanel .structure-input { grid-row:auto; }
      .builder-output-row { align-items:flex-start; flex-direction:column; }
      .builder-output-row button { align-self:stretch; }
    }


    /* ---------- ORGANIC ANALYSIS TAB (v90) ---------- */
    #analysisPanel { padding-bottom: 8px; }
    .organic-analysis-intro {
      margin: 0; padding: 14px 16px; color: #cbd5e1; font-size: 14px;
      border-bottom: 1px solid var(--border);
    }
    .organic-analysis-summary-grid {
      display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr); gap: 18px;
      margin-bottom: 18px;
    }
    .organic-analysis-summary-card { padding: 16px; }
    .organic-analysis-summary-card h2 { margin: 0 0 7px; font-size: 18px; }
    .organic-analysis-summary-card p { margin: 0; color: #cbd5e1; font-size: 13px; }
    .organic-analysis-xp-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
    .organic-analysis-xp-card {
      min-width: 0; padding: 11px; border: 1px solid #475569; border-radius: 10px; background: #111827;
    }
    .organic-analysis-xp-card span { display: block; color: #9ca3af; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
    .organic-analysis-xp-card strong { display: block; margin-top: 5px; color: #86efac; font: 700 21px/1.15 Consolas, monospace; overflow-wrap: anywhere; }
    .organic-analysis-guess-card { padding: 16px; }
    .organic-analysis-guess-card h2 { margin: 0 0 5px; font-size: 18px; }
    .organic-analysis-guess-card p { margin: 0 0 12px; color: #cbd5e1; font-size: 13px; }
    .organic-analysis-guess-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: stretch; }
    .organic-analysis-guess-input,
    .organic-analysis-answer-input,
    .organic-analysis-number-input,
    .organic-analysis-select {
      min-height: 42px; border: 1px solid #475569; border-radius: 8px; outline: none;
      background: #0f172a; color: #f9fafb; padding: 9px 10px; font: 15px/1.3 Consolas, "Courier New", monospace;
    }
    .organic-analysis-guess-input { flex: 1 1 360px; }
    .organic-analysis-answer-input { width: min(100%, 330px); }
    .organic-analysis-number-input { width: 120px; font-family: Arial, sans-serif; }
    .organic-analysis-select { width: min(100%, 230px); font-family: Arial, sans-serif; font-weight: 700; }
    .organic-analysis-feedback { min-height: 22px; margin: 10px 0 0; color: #cbd5e1; font-size: 13px; }
    .organic-analysis-feedback.ok { color: #86efac; }
    .organic-analysis-feedback.error { color: #fca5a5; }
    .organic-analysis-feedback.warning { color: #fde68a; }
    .organic-analysis-attempts { margin-top: 11px; padding: 10px; border-radius: 8px; background: #111827; color: #9ca3af; font: 12px/1.45 Consolas, monospace; }
    .organic-analysis-tests-card { margin-bottom: 18px; }
    .organic-analysis-tests-card h2 { margin: 0; padding: 13px 15px; border-bottom: 1px solid #374151; font-size: 16px; }
    .organic-analysis-tests-content { padding: 13px; }
    .organic-analysis-test-helper { margin: 0 0 11px; color: #cbd5e1; font-size: 13px; }
    .organic-analysis-test-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
    button.organic-analysis-test-button {
      padding: 8px 10px; background: #374151; color: #f9fafb; border: 1px solid #475569;
      font: 700 12px/1.25 Arial, sans-serif;
    }
    button.organic-analysis-test-button:hover { background: #4b5563; border-color: #93c5fd; transform: none; filter: none; }
    button.organic-analysis-test-button.ran { background: #153b26; border-color: #86efac; color: #dcfce7; }
    .organic-analysis-test-results { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 12px; }
    .organic-analysis-test-result { padding: 11px; border: 1px solid #475569; border-radius: 10px; background: #111827; }
    .organic-analysis-test-result.positive { border-color: #86efac; background: #153b26; }
    .organic-analysis-test-result.negative { border-color: #64748b; }
    .organic-analysis-test-result.unsuitable { border-color:#f59e0b; background:#3b2a12; }
    .organic-analysis-test-result strong { display: block; color: #f9fafb; font-size: 13px; }
    .organic-analysis-test-result span { display: block; margin-top: 5px; color: #fde68a; font-weight: 700; font-size: 13px; }
    .organic-analysis-test-result.positive span { color: #bbf7d0; }
    .organic-analysis-test-result.unsuitable span { color:#fde68a; }
    .organic-analysis-test-result p { margin: 7px 0 0; color: #d1d5db; font-size: 12px; line-height: 1.4; }
    .organic-analysis-steps { display: grid; gap: 15px; }
    .organic-analysis-step { overflow: hidden; }
    .organic-analysis-step.locked { border-color: #475569; opacity: .78; }
    .organic-analysis-step.complete { border-color: #4ade80; }
    .organic-analysis-step.hint { border-color: #f59e0b; }
    .organic-analysis-step-header {
      display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px;
      border-bottom: 1px solid #374151; background: #172033;
    }
    .organic-analysis-step.complete .organic-analysis-step-header { background: #153b26; }
    .organic-analysis-step.hint .organic-analysis-step-header { background: #3f3210; }
    .organic-analysis-step-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .organic-analysis-step-number {
      flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
      background: #1d4ed8; color: #eff6ff; font: 700 14px Arial, sans-serif;
    }
    .organic-analysis-step.complete .organic-analysis-step-number { background: #15803d; }
    .organic-analysis-step.hint .organic-analysis-step-number { background: #b45309; }
    .organic-analysis-step-heading h2 { margin: 0; font-size: 16px; }
    .organic-analysis-step-heading p { margin: 2px 0 0; color: #cbd5e1; font-size: 12px; }
    .organic-analysis-step-xp { flex: 0 0 auto; color: #fde68a; font: 700 14px Consolas, monospace; white-space: nowrap; }
    .organic-analysis-step.complete .organic-analysis-step-xp { color: #bbf7d0; }
    .organic-analysis-step.hint .organic-analysis-step-xp { color: #fde68a; }
    .organic-analysis-step-body { padding: 15px; }
    .organic-analysis-locked-message { margin: 0; color: #9ca3af; font-size: 14px; font-style: italic; }
    .organic-analysis-solved-note { margin: 0 0 12px; padding: 9px 10px; border-left: 3px solid #86efac; border-radius: 0 7px 7px 0; background: #153b26; color: #dcfce7; font-size: 13px; }
    .organic-analysis-clue-title { margin: 0 0 10px; color: #e5e7eb; font-size: 14px; }
    .organic-analysis-clue-table { width: 100%; border-collapse: collapse; overflow: hidden; border: 1px solid #475569; border-radius: 9px; background: #111827; }
    .organic-analysis-clue-table th, .organic-analysis-clue-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #334155; }
    .organic-analysis-clue-table th { color: #9ca3af; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
    .organic-analysis-clue-table td { color: #f9fafb; font: 14px/1.35 Consolas, monospace; }
    .organic-analysis-clue-table tr:last-child td { border-bottom: 0; }
    .organic-analysis-input-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 13px; }
    .organic-analysis-answer-result { margin-top: 10px; color: #86efac; font-weight: 700; font-size: 14px; }
    .organic-analysis-spectrum-card { padding: 0; overflow: hidden; border: 1px solid #475569; border-radius: 11px; background: #0f172a; }
    .organic-analysis-spectrum-card h3 { margin: 0; padding: 11px 12px 7px; color: #f9fafb; font-size: 14px; }
    .organic-analysis-spectrum-card p { margin: 0; padding: 0 12px 10px; color: #cbd5e1; font-size: 12px; }
    .organic-analysis-spectrum-svg { overflow: auto; border-top: 1px solid #334155; background: #fff; }
    .organic-analysis-spectrum-svg svg { display: block; min-width: 620px; width: 100%; height: auto; }
    .organic-analysis-spectra-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
    .organic-analysis-peak-info { margin: 0; padding: 11px 13px 13px 30px; color: #d1d5db; font-size: 12px; line-height: 1.45; }
    .organic-analysis-peak-info li { margin-bottom: 5px; }
    .organic-analysis-peak-info li:last-child { margin-bottom: 0; }
    .organic-analysis-choice-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    button.organic-analysis-choice {
      padding: 8px 10px; background: #111827; color: #d1d5db; border: 1px solid #475569;
      font: 700 12px/1.25 Arial, sans-serif;
    }
    button.organic-analysis-choice:hover { border-color: #93c5fd; background: #172033; transform: none; filter: none; }
    button.organic-analysis-choice.selected { border-color: #fde68a; background: #3f3210; color: #fef3c7; }
    .organic-analysis-nmr-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 14px; }
    .organic-analysis-nmr-field { display: grid; gap: 6px; color: #cbd5e1; font-size: 13px; font-weight: 700; }
    .organic-analysis-nmr-field label { display: block; }
    .organic-analysis-hint-actions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:12px; }
    .organic-analysis-hint-note { margin:0; color:#fde68a; font-size:12px; line-height:1.4; }
    .organic-analysis-mass-answers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
    .organic-analysis-mass-field { display:grid; gap:6px; min-width:0; padding:10px; border:1px solid #475569; border-radius:9px; background:#111827; }
    .organic-analysis-mass-field.correct { border-color:#22c55e; background:#102718; }
    .organic-analysis-mass-field label { color:#cbd5e1; font-size:12px; font-weight:800; line-height:1.35; }
    .organic-analysis-mass-field small { color:#9ca3af; font-size:11px; line-height:1.35; }
    .organic-analysis-mass-field input { width:100%; min-width:0; }
    .organic-analysis-component-result { color:#86efac; font:700 13px/1.4 Consolas,monospace; overflow-wrap:anywhere; }
    .organic-analysis-nmr-peak-table { width:100%; margin-top:14px; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid #475569; border-radius:10px; background:#111827; }
    .organic-analysis-nmr-peak-table th,
    .organic-analysis-nmr-peak-table td { padding:9px 10px; border-bottom:1px solid #334155; text-align:left; }
    .organic-analysis-nmr-peak-table th { color:#9ca3af; font-size:11px; text-transform:uppercase; letter-spacing:.035em; }
    .organic-analysis-nmr-peak-table td { color:#f9fafb; font-size:13px; }
    .organic-analysis-nmr-peak-table tr:last-child td { border-bottom:0; }
    .organic-analysis-nmr-peak-row { cursor:pointer; }
    .organic-analysis-nmr-peak-row.correct { background:#102718; }
    .organic-analysis-nmr-peak-row.exchangeable { background:#172033; }
    .organic-analysis-nmr-peak-label { display:inline-grid; place-items:center; min-width:26px; height:26px; border-radius:50%; background:#1d4ed8; color:#eff6ff; font-weight:900; }
    .organic-analysis-nmr-neighbour-input { width:92px; }
    .organic-analysis-nmr-exchangeable { color:#fde68a; font-size:12px; font-weight:700; }
    .organic-analysis-empty { padding: 30px 14px; text-align: center; color: #9ca3af; font-style: italic; }
    @media (max-width: 850px) {
      .organic-analysis-summary-grid { grid-template-columns: 1fr; }
      .organic-analysis-spectra-grid { grid-template-columns: 1fr; }
      .organic-analysis-test-results { grid-template-columns: 1fr; }
      .organic-analysis-mass-answers { grid-template-columns:1fr; }
    }
    @media (max-width: 560px) {
      .organic-analysis-xp-grid { grid-template-columns: 1fr; }
      .organic-analysis-step-header { align-items: flex-start; flex-direction: column; }
      .organic-analysis-step-xp { align-self: flex-start; }
      .organic-analysis-guess-row button { width: 100%; }
      .organic-analysis-nmr-peak-table { display:block; overflow-x:auto; }
      .organic-analysis-hint-actions > button { width:100%; }
    }


    /* ---------- MOBILE PHONE LAYOUT (v91) ----------
       These rules intentionally sit after the desktop/tablet rules so a phone
       receives a single-column, touch-friendly interface without changing the
       existing desktop layout. */
    @media (max-width: 680px) {
      html { -webkit-text-size-adjust: 100%; }
      body { overflow-x: hidden; font-size: 15px; }
      .app {
        width: 100%; max-width: none;
        padding: 14px 12px calc(26px + env(safe-area-inset-bottom));
      }
      h1 { font-size: clamp(23px, 7vw, 30px); line-height: 1.12; }
      .subtitle { margin: 6px 0 14px; font-size: 13px; line-height: 1.38; }

      /* Keep every tab available without squeezing four labels into one row. */
      .tabs {
        position: sticky; top: 0; z-index: 80;
        display: flex; flex-wrap: nowrap; gap: 8px;
        margin: 0 -12px 14px; padding: 8px 12px 9px;
        overflow-x: auto; overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        background: linear-gradient(145deg, rgba(17,24,39,.98), rgba(15,23,42,.98));
        box-shadow: 0 6px 13px rgba(2,6,23,.28);
        scrollbar-width: none;
      }
      .tabs::-webkit-scrollbar { display: none; }
      .tab {
        flex: 0 0 auto; min-width: 146px; min-height: 44px;
        padding: 10px 12px; white-space: nowrap;
        scroll-snap-align: start;
      }

      button, input, select, textarea { font-size: 16px !important; }
      button, .tab, .quick-example { touch-action: manipulation; }
      button { min-height: 44px; padding: 10px 12px; }

      .toolbar {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px; margin-bottom: 12px;
      }
      .toolbar > button, .toolbar > label { width: 100%; min-width: 0; }
      .toolbar > label {
        grid-column: 1 / -1; justify-content: space-between !important;
        min-height: 44px; padding: 0 !important;
      }
      .toolbar > label select { flex: 1 1 150px; min-width: 0; }
      #analysisPanel > .toolbar { grid-template-columns: 1fr; }
      #quizPanel > .toolbar #checkQuizBtn,

      .grid, .structure-controls, .organic-analysis-summary-grid,
      .organic-analysis-spectra-grid, .molecule-info-layout { grid-template-columns: 1fr !important; }
      .structure-controls { gap: 12px; }
      .skeletal-card { grid-column: auto; }
      .card { border-radius: 13px; }
      .card-header { align-items: flex-start; padding: 12px 13px; }
      .card-header span { max-width: 48%; text-align: right; font-size: 12px; }

      textarea { min-height: 180px; padding: 13px; }
      #builderPanel .structure-input,
      #quizPanel .structure-input { grid-row: auto; }
      #builderPanel .structure-input > textarea { min-height:48px; }
      .builder-mode-row { align-items: stretch; padding: 12px 13px 0; }
      .builder-mode-label { width: 100%; }
      .builder-mode-select { min-height: 42px; flex: 1 1 150px; min-width: 0; }
      .builder-recognition { flex: 1 1 100%; justify-content: center; }

      /* Mobile molecule entry uses an explicit two-mode control. Formula mode
         keeps the native keyboard closed and exposes only chemistry keys;
         name mode restores the native lowercase keyboard. */
      #builderPanel .builder-mode-row > .builder-mode-label,
      #builderPanel .builder-mode-row > .builder-mode-select { display:none; }
      #builderPanel .builder-mobile-mode-toggle {
        display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
        width:100%; padding:3px; gap:3px; border:1px solid #475569;
        border-radius:11px; background:#111827;
      }
      #builderPanel .builder-mobile-mode-button {
        min-height:42px; padding:8px 9px; border-radius:8px;
        background:transparent; color:#cbd5e1; box-shadow:none;
      }
      #builderPanel .builder-mobile-mode-button.active {
        background:#2563eb; color:#eff6ff;
      }
      #builderPanel #structureInput {
        min-height:48px !important; height:48px !important; resize:none;
        padding:12px 13px; white-space:pre; overflow-x:auto; overflow-y:hidden;
        overflow-wrap:normal; line-height:24px;
      }
      #builderPanel #structureInput[readonly] {
        cursor:text; caret-color:#f9fafb;
      }
      #builderPanel .builder-chem-keyboard {
        display:block; padding:10px 10px 12px; border-top:1px solid #374151;
        background:#0f172a;
      }
      #builderPanel .builder-chem-keyboard[hidden] { display:none !important; }
      #builderPanel .builder-chem-keyboard-row {
        display:grid; gap:6px; margin-bottom:7px;
      }
      #builderPanel .builder-chem-shortcuts { grid-template-columns:repeat(6, minmax(0, 1fr)); }
      #builderPanel .builder-chem-keyboard-grid {
        display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px;
        margin-bottom:7px;
      }
      #builderPanel .builder-chem-editing {
        grid-template-columns:repeat(5, minmax(0, 1fr)); margin-bottom:0;
      }
      #builderPanel .builder-chem-keyboard button {
        min-width:0; min-height:42px; padding:7px 4px; border-radius:8px;
        background:#273449; color:#f8fafc; font-size:15px !important;
      }
      #builderPanel .builder-chem-keyboard button:active { transform:none; background:#3b4a62; }
      #builderPanel .builder-chem-shortcuts button { color:#bfdbfe; font-size:13px !important; }
      #builderPanel .builder-chem-editing button { background:#374151; }
      #builderPanel .builder-chem-editing .builder-chem-abc { background:#2563eb; color:#eff6ff; }
      #builderPanel .builder-mobile-hide-examples,
      #builderPanel .builder-example-action { display:none !important; }

      #builderPanel .builder-structure-toggle {
        display:grid; grid-column:1; grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:4px; padding:4px; border:1px solid var(--border); border-radius:12px;
        background:#111827;
      }
      #builderPanel .builder-structure-toggle button {
        min-height:42px; padding:8px 10px; background:transparent; color:#cbd5e1;
      }
      #builderPanel .builder-structure-toggle button.active {
        background:#2563eb; color:#eff6ff;
      }
      #builderPanel .builder-structure-view-card { display:none; }
      #builderPanel .builder-structure-view-card.mobile-active { display:block; }

      #builderPanel.builder-floating-active { padding-bottom:226px; }
      #builderPanel .builder-floating-structure {
        position:fixed; left:10px; right:10px;
        bottom:max(10px, env(safe-area-inset-bottom)); z-index:78;
        display:block; overflow:hidden; border:1px solid rgba(148,163,184,.72);
        border-radius:15px; background:rgba(15,23,42,.96);
        box-shadow:0 16px 44px rgba(0,0,0,.45); backdrop-filter:blur(12px);
      }
      #builderPanel .builder-floating-header {
        display:flex; align-items:center; justify-content:space-between; gap:8px;
        min-height:38px; padding:5px 7px 5px 11px; border-bottom:1px solid #334155;
        color:#e5e7eb; font-size:12px; font-weight:800;
      }
      #builderPanel .builder-floating-view-buttons { display:flex; gap:4px; }
      #builderPanel .builder-floating-view-buttons button {
        min-height:30px; padding:5px 9px; border-radius:8px; background:#273449;
        color:#cbd5e1; font-size:11px !important; box-shadow:none;
      }
      #builderPanel .builder-floating-view-buttons button.active {
        background:#2563eb; color:#eff6ff;
      }
      #builderPanel .builder-floating-meta {
        display:grid; gap:2px; padding:5px 10px 6px; border-bottom:1px solid #334155;
        background:rgba(17,24,39,.98); min-width:0;
      }
      #builderPanel .builder-floating-name,
      #builderPanel .builder-floating-semi {
        min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      }
      #builderPanel .builder-floating-name { color:#f8fafc; font:700 11px/1.25 Arial,sans-serif; }
      #builderPanel .builder-floating-semi { color:#bfdbfe; font:10px/1.25 Consolas,"Courier New",monospace; }
      #builderPanel .builder-floating-svg-wrap {
        height:132px; padding:3px 7px 6px; overflow:hidden; background:#fff;
      }
      #builderPanel #builderFloatingStructureSvg {
        display:block; width:100%; height:100%; min-width:0 !important;
      }

      .builder-output-stack { padding: 0 13px 13px; }
      #builderPanel .builder-output-row textarea {
        min-height: 54px !important; height: 54px !important; padding: 9px 10px;
      }
      .builder-examples-title, .builder-inline-note { margin-left: 13px; margin-right: 13px; }
      .quick-examples { padding: 0 13px 5px !important; gap: 7px; }
      .quick-example { display: inline-flex; align-items: center; min-height: 36px; }
      .builder-formatter { margin-top: 16px; }
      .builder-formatter .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .builder-formatter textarea { min-height: 140px; }

      /* The structure canvases now scale into the card instead of forcing a
         500–550 px desktop canvas across a phone screen. */
      .svg-wrap, .skeletal-wrap { min-height: 0; padding: 6px; overflow: hidden; }
      #structureSvg, #nameStructureSvg, #quizStructureSvg,
      #structureSkeletalSvg, #nameSkeletalSvg, #quizSkeletalSvg {
        width: 100% !important; min-width: 0 !important;
      }
      #structureSvg, #nameStructureSvg { height: 250px !important; }
      #structureSvg > text:only-child, #structureSkeletalSvg > text:only-child { font-size: 14px; }
      #structureSkeletalSvg, #nameSkeletalSvg { height: 185px !important; }
      #quizPanel .svg-wrap { min-height: 244px; }
      #quizPanel .skeletal-wrap { min-height: 188px; }
      #quizPanel #quizStructureSvg { height: 232px !important; }
      #quizPanel #quizSkeletalSvg { height: 176px !important; }

      .examples { margin-top: 14px; padding: 14px; }
      .examples-grid { grid-template-columns: 1fr; gap: 10px; }
      .status { margin-top: 12px; }

      /* Quiz cards contain some layout values set inline in the original
         version. These overrides avoid narrow three-column tiles on phones. */
      #quizPanel div[style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important; gap: 8px !important;
      }
      #quizPanel #quizMasteryList { grid-template-columns: 1fr !important; }
      #quizPanel #quizSemiCard {
        min-height: 64px !important; padding: 15px !important;
        font-size: 18px !important; overflow-x: auto;
      }
      #quizPanel #quizAnswer { min-height: 96px !important; height: 96px !important; }
      #quizPanel .quiz-difficulty-options,
      #quizPanel .quiz-functional-options { grid-template-columns: 1fr; }

      /* Keep the three progress boxes on one compact row on phones. */
      #quizPanel div.quiz-xp-summary-grid {
        display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:6px !important; margin-bottom:10px !important;
      }
      #quizPanel .quiz-xp-tile { min-width:0; padding:7px 5px !important; text-align:center; }
      #quizPanel .quiz-xp-label { font-size:9px !important; line-height:1.15; min-height:21px; }
      #quizPanel .quiz-xp-value { font-size:17px !important; line-height:1.1 !important; white-space:nowrap; }
      #quizPanel #skipQuizBtn { min-height:34px; padding:5px 3px !important; font-size:10px !important; }

      /* The first representation shown for each naming question stays visible
         above the fixed Check name button while the student types. */
      #quizPanel.quiz-floating-active {
        padding-bottom:calc(258px + env(safe-area-inset-bottom));
      }
      #quizPanel .quiz-floating-molecule {
        position:fixed; left:10px; right:10px;
        bottom:calc(72px + env(safe-area-inset-bottom)); z-index:79;
        display:block; overflow:hidden; border:1px solid rgba(148,163,184,.72);
        border-radius:14px; background:rgba(15,23,42,.96);
        box-shadow:0 14px 38px rgba(0,0,0,.44); backdrop-filter:blur(12px);
      }
      #quizPanel .quiz-floating-header {
        display:flex; justify-content:space-between; align-items:center; gap:8px;
        min-height:31px; padding:5px 9px; border-bottom:1px solid #334155;
        color:#e5e7eb; font-size:11px; font-weight:800;
      }
      #quizPanel .quiz-floating-header span:last-child { color:#93c5fd; font-weight:700; }
      #quizPanel .quiz-floating-semi[hidden],
      #quizPanel .quiz-floating-svg-wrap[hidden] { display:none !important; }
      #quizPanel .quiz-floating-semi {
        min-height:104px; display:grid; place-items:center; padding:12px; background:#fff;
        color:#111827; text-align:center; overflow-wrap:anywhere;
        font:700 18px/1.35 Consolas,"Courier New",monospace;
      }
      #quizPanel .quiz-floating-svg-wrap { height:112px; padding:4px 7px; overflow:hidden; background:#fff; }
      #quizPanel #quizFloatingSvg { display:block; width:100%; height:100%; min-width:0 !important; }

      /* The priority reference is independently scrollable on a phone rather
         than widening or lengthening the entire Help sheet. */
      .naming-help-priority-scroll {
        max-height:min(46dvh, 390px); overflow:auto;
        overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
      }
      .naming-help-priority-table thead th { position:sticky; top:0; z-index:2; }
      #quizPanel .quiz-difficulty-option,
      #quizPanel .quiz-functional-option { min-height: 42px; }

      /* Organic analysis: answers and task actions read as vertical steps. */
      .organic-analysis-summary-grid { gap: 12px; margin-bottom: 12px; }
      .organic-analysis-summary-card, .organic-analysis-guess-card { padding: 13px; }
      .organic-analysis-xp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px; }
      .organic-analysis-xp-card { padding: 8px; }
      .organic-analysis-xp-card span { font-size: 10px; }
      .organic-analysis-xp-card strong { font-size: 17px; }
      .organic-analysis-guess-row { display: grid; grid-template-columns: 1fr; }
      .organic-analysis-guess-input,
      .organic-analysis-answer-input,
      .organic-analysis-number-input,
      .organic-analysis-select { width: 100%; }
      .organic-analysis-input-row { align-items: stretch; }
      .organic-analysis-input-row > button { width: 100%; }
      .organic-analysis-test-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .organic-analysis-test-buttons button { width: 100%; }
      .organic-analysis-test-results { grid-template-columns: 1fr; }
      .organic-analysis-step-header { padding: 12px; align-items: flex-start; flex-direction: column; }
      .organic-analysis-step-xp { align-self: flex-start; }
      .organic-analysis-step-body { padding: 12px; }
      .organic-analysis-clue-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .organic-analysis-spectrum-svg { overflow-x: auto; -webkit-overflow-scrolling: touch; }

      /* Organic reactions retain the reaction flow but use a compact two-side
         equation layout. The 320–380 px override below switches to one item
         per line for very narrow handsets. */
      #reactionPanel .reaction-equation {
        grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto;
        column-gap: 5px; row-gap: 9px;
        padding: 14px 10px 15px; min-height: 0;
      }
      #reactionPanel .reaction-condition { grid-column: 1 / -1; grid-row: 1; }
      #reactionPanel .reaction-r1 { grid-column: 1; grid-row: 2; }
      #reactionPanel .reaction-plus-1 { grid-column: 2; grid-row: 2; }
      #reactionPanel .reaction-r2 { grid-column: 3; grid-row: 2; }
      #reactionPanel .reaction-arrow {
        grid-column: 1 / -1; grid-row: 3; transform: rotate(90deg);
        height: 31px; margin: 0; font-size: 36px;
      }
      #reactionPanel .reaction-p1 { grid-column: 1; grid-row: 4; }
      #reactionPanel .reaction-plus-2 { grid-column: 2; grid-row: 4; }
      #reactionPanel .reaction-p2 { grid-column: 3; grid-row: 4; }
      #reactionPanel .reaction-slot { min-height: 90px; padding: 10px; }
      #reactionPanel .reaction-slot.condition-slot { min-height: 66px; }
      #reactionPanel .reaction-slot-value { font-size: 14px; overflow-wrap: anywhere; }
      #reactionPanel .reaction-organic-input { min-height: 52px; font-size: 15px !important; }
      #reactionPanel .reaction-bank-target { min-height: 50px; font-size: 13px; }
      #reactionPanel .reaction-instructions { padding: 12px; font-size: 12px; }
      #reactionPanel .reaction-status-row {
        align-items: flex-start; flex-direction: column; margin: 0 12px 6px;
      }
      #reactionPanel .reaction-feedback,
      #reactionPanel .reaction-attempts-section,
      #reactionPanel .reaction-mastery-section { margin-left: 12px; margin-right: 12px; }
      #reactionPanel .reaction-choice-panel { margin: 0 10px 14px; padding: 12px; }
      #reactionPanel .reaction-choice-header { align-items: stretch; flex-direction: column; }
      #reactionPanel .reaction-choice-close { align-self: stretch; }
      #reactionPanel .reaction-equation-actions { margin: 8px 10px 0; justify-content:stretch; }
      #reactionPanel .reaction-check-button { width:100%; min-width:0; }
      #reactionPanel .reaction-choice-group-options,
      #reactionPanel .reaction-mastery-list { grid-template-columns: 1fr !important; }

      /* Molecule Info becomes a full-screen phone sheet, with controls large
         enough to tap and all property content in a single readable column. */
      .molecule-info-overlay { align-items: stretch; padding: 0; }
      .molecule-info-page { width: 100%; min-height: 100%; margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
      .molecule-info-header {
        position: sticky; top: 0; z-index: 4; padding: 12px;
        gap: 10px; box-shadow: 0 8px 16px rgba(2,6,23,.35);
      }
      .molecule-info-header h2 { font-size: 22px; }
      .molecule-info-header p { font-size: 12px; }
      .molecule-info-close { min-width: 72px; }
      .molecule-info-body { padding: 12px; }
      .molecule-info-layout { gap: 12px; }
      .molecule-3d-viewer { height: 250px; }
      .molecule-info-field { grid-column: 1 / -1 !important; }
      .molecule-info-properties { grid-template-columns: 1fr; padding: 12px; }
      .molecule-viewer-theme-toggle { width: 100%; padding: 0 12px 12px; }
      .molecule-viewer-theme-btn { flex: 1 1 0; }
      .molecule-viewer-control-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .molecule-viewer-control-group button:last-child:nth-child(odd) { grid-column: 1 / -1; }
      .molecule-spectrum-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 12px 0; }
      .molecule-spectrum-toolbar button { width: 100%; }
      .molecule-spectrum-display { min-height: 280px; margin: 12px; padding: 10px; }
      .molecule-spectrum-svg-wrap { -webkit-overflow-scrolling: touch; }
      .molecule-analysis-mass-row { align-items: stretch; }
      .molecule-analysis-mass-label { width: 100%; }
      .molecule-analysis-mass-input { width: 100%; }
      .molecule-info-links { display: grid; grid-template-columns: 1fr; gap: 8px; }
      .molecule-info-link { justify-content: center; width: 100%; }

      .quiz-reset-zone { margin-top: 24px; padding: 14px; }
      .quiz-reset-actions { display: grid; grid-template-columns: 1fr; }
    }

    @media (max-width: 380px) {
      h1 { font-size: 23px; }
      #builderPanel .builder-chem-shortcuts { grid-template-columns:repeat(3, minmax(0, 1fr)); }
      #builderPanel .builder-chem-keyboard-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
      #builderPanel .builder-chem-editing { grid-template-columns:repeat(5, minmax(0, 1fr)); }
      #builderPanel.builder-floating-active { padding-bottom:210px; }
      #builderPanel .builder-floating-svg-wrap { height:112px; }
      .tab { min-width: 136px; }
      .organic-analysis-xp-grid { grid-template-columns: 1fr !important; }
      .organic-analysis-test-buttons { grid-template-columns: 1fr; }
      #reactionPanel .reaction-equation {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto auto auto;
      }
      #reactionPanel .reaction-plus-1,
      #reactionPanel .reaction-plus-2 { display: none; }
      #reactionPanel .reaction-r1 { grid-column: 1; grid-row: 2; }
      #reactionPanel .reaction-r2 { grid-column: 1; grid-row: 3; }
      #reactionPanel .reaction-arrow { grid-column: 1; grid-row: 4; }
      #reactionPanel .reaction-p1 { grid-column: 1; grid-row: 5; }
      #reactionPanel .reaction-p2 { grid-column: 1; grid-row: 6; }
    }


    /* ---------- QUIZ: SINGLE-COLUMN PHONE FLOW (v92) ----------
       The original quiz uses a desktop grid where the answer card occupies
       the left column and revealed hints occupy the right column. On smaller
       screens, make the hint cards arrive first in one vertical stream, then
       place the answer and progress card beneath them. */
    @media (max-width: 800px) {
      #quizPanel .structure-controls {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }
      #quizPanel .quiz-hint-card {
        order: 1;
        width: 100%;
        grid-column: auto !important;
        grid-row: auto !important;
      }
      #quizPanel .structure-input {
        order: 2;
        width: 100%;
        grid-column: auto !important;
        grid-row: auto !important;
      }
      #quizPanel #quizSemiStructureCard,
      #quizPanel #quizFullStructureCard,
      #quizPanel #quizSkeletalStructureCard {
        grid-column: auto !important;
        grid-row: auto !important;
      }
      #quizPanel .skeletal-card { margin-top: 0; }
    }

  

    /* ---------- MOBILE QUIZ ACTION + MOLECULE INFO SCROLL (v93) ---------- */
    @media (max-width: 800px) {
      /* Keep the main quiz action reachable while students move between
         the revealed structure, answer box and attempt history. */
      #quizPanel {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
      }
      #quizPanel #checkQuizBtn {
        position: fixed;
        z-index: 950;
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        width: auto;
        min-height: 52px;
        margin: 0;
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 14px;
        box-shadow: 0 10px 26px rgba(0,0,0,.48);
        font-size: 16px;
      }

      /* The desktop overlay relies on the page itself scrolling. iOS can
         prevent that when a fixed dialog contains a large document. Make the
         dialog a viewport-height sheet and give its body the scroll area. */
      .molecule-info-overlay {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
        overflow: hidden;
        overscroll-behavior: contain;
      }
      .molecule-info-page {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .molecule-info-header {
        flex: 0 0 auto;
        padding-top: calc(14px + env(safe-area-inset-top));
      }
      .molecule-info-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
      }
    }


    /* ---------- MOLECULE COMPARISON TAB (v94) ---------- */
    .comparison-intro { margin:0 0 16px; color:#cbd5e1; font-size:14px; }
    .comparison-input-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:16px; }
    .comparison-input-card { padding:15px; }
    .comparison-input-card h2 { margin:0 0 5px; font-size:18px; }
    .comparison-input-card p { margin:0 0 11px; color:#cbd5e1; font-size:12px; }
    .comparison-molecule-input { width:100%; min-height:48px; border:1px solid #475569; border-radius:8px; background:#0f172a; color:#f9fafb; padding:10px; outline:none; font:16px/1.35 Consolas, "Courier New", monospace; }
    .comparison-molecule-input:focus { border-color:#93c5fd; box-shadow:0 0 0 2px rgba(96,165,250,.18); }
    .comparison-status { min-height:20px; margin:8px 0 0; color:#9ca3af; font-size:12px; }
    .comparison-status.ok { color:#86efac; } .comparison-status.error { color:#fca5a5; } .comparison-status.warning { color:#fde68a; }
    .comparison-options { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:13px; border:1px solid var(--border); border-radius:12px; background:rgba(31,41,55,.9); }
    .comparison-options-title { flex:0 0 100%; color:#e5e7eb; font-size:13px; font-weight:700; }
    .comparison-option { display:flex; align-items:center; gap:7px; min-height:38px; padding:8px 10px; border:1px solid #475569; border-radius:8px; background:#111827; color:#f9fafb; font-size:13px; font-weight:700; cursor:pointer; }
    .comparison-option input { width:16px; height:16px; margin:0; accent-color:var(--accent); }
    .comparison-section { margin-bottom:16px; }
    .comparison-section[hidden] { display:none; }
    .comparison-section-title { margin:0 0 8px; color:#e5e7eb; font-size:17px; }
    .comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
    .comparison-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:#1f2937; }
    .comparison-card-header { padding:12px 14px; border-bottom:1px solid var(--border); background:#172033; }
    .comparison-card-header strong { display:block; color:#f9fafb; font-size:15px; }
    .comparison-card-header span { display:block; margin-top:2px; color:#9ca3af; font-size:12px; }
    .comparison-empty { padding:22px 14px; color:#9ca3af; font-size:13px; font-style:italic; }
    .comparison-text-output { min-height:92px; padding:16px; color:#f9fafb; background:#111827; font:17px/1.45 Consolas, "Courier New", monospace; overflow-wrap:anywhere; }
    .comparison-full-wrap { min-height:330px; padding:10px; background:#fff; overflow:auto; }
    .comparison-full-wrap svg { display:block; width:100%; min-width:460px; height:310px; }
    /* Each chosen spectrum uses the full width of its molecule column.
       Multiple selected spectra stack vertically rather than becoming small 2-up tiles. */
    .comparison-spectra { display:grid; grid-template-columns:1fr; gap:12px; padding:12px; }
    .comparison-spectrum { min-width:0; overflow:hidden; border:1px solid #475569; border-radius:10px; background:#0f172a; }
    .comparison-spectrum h4 { margin:0; padding:10px 11px 6px; color:#f9fafb; font-size:13px; }
    .comparison-spectrum .molecule-spectrum-note { padding:0 11px 8px; font-size:11px; }
    .comparison-spectrum .molecule-spectrum-svg-wrap { border-left:0; border-right:0; border-radius:0; }
    .comparison-spectrum .molecule-spectrum-svg-wrap svg { min-width:620px; }
    .comparison-spectrum .molecule-spectrum-summary { padding:0 18px 10px; margin:8px 0 0; color:#d1d5db; font-size:11px; }
    @media (max-width:800px) {
      .comparison-input-grid, .comparison-grid, .comparison-spectra { grid-template-columns:1fr; }
      .comparison-full-wrap { min-height:270px; }
      .comparison-full-wrap svg { min-width:420px; height:250px; }
      .comparison-options { gap:7px; }
      .comparison-option { flex:1 1 145px; }
    }

  
    /* Comparison spectrum ↔ structure highlighting */
    .comparison-spectrum li, .comparison-spectrum svg text { cursor: help; }
    .comparison-spectrum li:hover { color:#86efac; }
    svg .comparison-highlight-ring { fill:none; stroke:#22c55e; stroke-width:3; pointer-events:none; }
    svg .comparison-highlight-bond { stroke:#22c55e; stroke-width:5; stroke-linecap:round; pointer-events:none; opacity:.95; }
    svg .comparison-highlight-label { fill:#16a34a !important; font-weight:700 !important; }
    svg .comparison-highlight-hydrogen { fill:#16a34a !important; font-weight:700 !important; }
    .comparison-floating-structures { position:fixed; right:18px; bottom:18px; width:min(560px, calc(100vw - 32px)); max-height:44vh; z-index:80; padding:12px; border:1px solid rgba(148,163,184,.55); border-radius:16px; background:rgba(15,23,42,.96); box-shadow:0 18px 48px rgba(0,0,0,.42); backdrop-filter:blur(12px); }
    .comparison-floating-structures[hidden] { display:none !important; }
    .comparison-floating-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; color:#f9fafb; font-size:13px; }
    .comparison-floating-header span { color:#cbd5e1; font-weight:600; }
    .comparison-floating-close { width:30px; height:30px; min-height:30px; padding:0; border-radius:999px; background:#334155; color:#f9fafb; font-size:18px; line-height:1; }
    .comparison-floating-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .comparison-floating-card { min-width:0; overflow:hidden; border:1px solid #475569; border-radius:12px; background:#111827; }
    .comparison-floating-title { padding:7px 9px; color:#e5e7eb; font-size:12px; font-weight:800; border-bottom:1px solid #334155; }
    .comparison-floating-svg-wrap { height:150px; padding:4px; overflow:hidden; background:#fff; }
    .comparison-floating-svg-wrap svg { display:block; width:100%; height:100%; }
    .comparison-floating-empty { padding:18px 10px; color:#9ca3af; font-size:12px; font-style:italic; }
    .comparison-floating-note { margin-top:7px; color:#cbd5e1; font-size:11px; }
    @media (max-width: 720px) {
      #comparisonPanel.comparison-floating-active { padding-bottom:190px; }
      .comparison-floating-structures {
        left:10px; right:10px; bottom:max(10px, env(safe-area-inset-bottom));
        width:auto; max-height:38vh; padding:9px;
      }
      .comparison-floating-header { margin-bottom:6px; }
      .comparison-floating-close { display:none; }
      .comparison-floating-grid { gap:7px; }
      .comparison-floating-title { padding:5px 7px; font-size:10px; }
      .comparison-floating-svg-wrap { height:116px; }
      .comparison-floating-empty { padding:12px 7px; font-size:10px; }
      .comparison-floating-note { display:none; }
    }


    /* ---------- CHEMISODE STARTUP SPLASH ---------- */
    .startup-splash {
      position: fixed; inset: 0; z-index: 11050; display: grid; place-items: center;
      padding: 22px; overflow: auto;
      background:
        radial-gradient(circle at 50% 35%, rgba(37, 99, 235, .22), transparent 34%),
        radial-gradient(circle at 18% 20%, rgba(14, 165, 233, .12), transparent 28%),
        linear-gradient(145deg, rgba(2, 6, 23, .98), rgba(15, 23, 42, .98));
      color: #f9fafb;
    }
    .startup-splash[hidden] { display: none !important; }
    .startup-splash::before,
    .startup-splash::after {
      content: ""; position: absolute; inset: auto; pointer-events: none; opacity: .17;
      border: 3px solid #38bdf8; border-radius: 18px; transform: rotate(30deg);
    }
    .startup-splash::before { width: 210px; height: 210px; left: 6%; top: 12%; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 42%); }
    .startup-splash::after { width: 260px; height: 180px; right: 6%; bottom: 10%; clip-path: polygon(0 10%, 92% 0, 100% 88%, 16% 100%); opacity: .11; }
    .startup-splash-card {
      position: relative; z-index: 1; width: min(520px, 100%); padding: 34px 28px 28px;
      border: 1px solid rgba(148, 163, 184, .36); border-radius: 26px;
      background: rgba(15, 23, 42, .78); box-shadow: 0 30px 90px rgba(0, 0, 0, .52);
      text-align: center; backdrop-filter: blur(14px);
    }
    .startup-splash-logo {
      width: 154px; height: 154px; margin: 0 auto 14px; display: block;
      filter: drop-shadow(0 16px 24px rgba(14, 165, 233, .26));
    }
    .startup-splash-title { margin: 0; font-size: clamp(40px, 9vw, 68px); line-height: .95; letter-spacing: -.055em; font-weight: 900; }
    .startup-splash-subtitle { margin: 12px 0 18px; color: #7dd3fc; font-size: clamp(18px, 4.2vw, 26px); font-weight: 800; letter-spacing: .03em; }
    .startup-splash-message { min-height: 22px; margin: 0 0 14px; color: #dbeafe; font-size: 14px; }
    .startup-progress {
      display: grid; gap: 8px; margin: 16px auto 0; max-width: 360px; text-align: left;
    }
    .startup-progress-row {
      display: flex; justify-content: space-between; align-items: center; gap: 12px;
      padding: 8px 10px; border: 1px solid rgba(71, 85, 105, .72); border-radius: 12px;
      background: rgba(2, 6, 23, .33); color: #cbd5e1; font-size: 13px;
    }
    .startup-progress-state { color: #93c5fd; font-weight: 800; white-space: nowrap; }
    .startup-progress-row.done .startup-progress-state { color: #86efac; }
    .startup-progress-row.error .startup-progress-state { color: #fca5a5; }
    .startup-spinner {
      width: 30px; height: 30px; margin: 18px auto 0; border-radius: 999px;
      border: 3px solid rgba(147, 197, 253, .25); border-top-color: #38bdf8;
      animation: chemisode-spin .85s linear infinite;
    }
    .startup-splash.fading { opacity: 0; transform: scale(1.01); transition: opacity .16s ease, transform .16s ease; }
    @keyframes chemisode-spin { to { transform: rotate(360deg); } }
    @media (max-width: 520px) {
      .startup-splash-card { padding: 28px 18px 22px; border-radius: 22px; }
      .startup-splash-logo { width: 126px; height: 126px; }
    }

    /* ---------- SUPABASE ACCOUNT LAYER (staging) ---------- */
    body.auth-locked { overflow: hidden; }
    .auth-overlay {
      position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
      padding: 20px; background: rgba(2, 6, 23, .92); backdrop-filter: blur(8px);
    }
    .auth-overlay[hidden] { display: none; }
    .auth-card {
      width: min(440px, 100%); overflow: hidden; border: 1px solid #475569; border-radius: 18px;
      background: #111827; box-shadow: 0 26px 70px rgba(0,0,0,.58);
    }
    .auth-card-header { padding: 22px 22px 17px; background: linear-gradient(125deg,#172554,#111827); border-bottom: 1px solid #374151; }
    .auth-card-header h2 { margin: 0; font-size: 25px; letter-spacing: -.025em; }
    .auth-card-header p { margin: 7px 0 0; color: #bfdbfe; font-size: 13px; }
    .auth-card-body { padding: 20px 22px 22px; }
    .auth-field { display: grid; gap: 6px; margin-bottom: 13px; color: #e5e7eb; font-size: 13px; font-weight: 700; }
    .auth-field input {
      width: 100%; min-height: 44px; border: 1px solid #475569; border-radius: 8px;
      background: #0f172a; color: #f9fafb; padding: 10px 11px; outline: none; font: 16px/1.3 Arial, sans-serif;
    }
    .auth-field input:focus { border-color: #93c5fd; box-shadow: 0 0 0 2px rgba(96,165,250,.18); }
    .auth-invite-code-input { text-align: center; font-size: 24px !important; font-weight: 800; letter-spacing: .42em; font-variant-numeric: tabular-nums; }
    .auth-submit { width: 100%; min-height: 46px; margin-top: 4px; }
    .auth-secondary-actions { margin: 10px 0 0; text-align: center; }
    .auth-link-btn { border: 0; background: transparent; color: #93c5fd; font: 13px/1.25 Arial, sans-serif; cursor: pointer; text-decoration: underline; padding: 4px 6px; }
    .auth-link-btn:hover, .auth-link-btn:focus { color: #bfdbfe; outline: none; }
    .auth-divider { margin: 15px 0; border: 0; border-top: 1px solid #374151; }
    .auth-password-rules { margin: 0 0 12px; color: #cbd5e1; font-size: 12px; line-height: 1.45; }
    .auth-mini-actions { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
    .auth-status { min-height: 22px; margin: 13px 0 0; color: #cbd5e1; font-size: 13px; }
    .auth-status.error { color: #fca5a5; } .auth-status.ok { color: #86efac; } .auth-status.warning { color: #fde68a; }
    .auth-note { margin: 14px 0 0; color: #9ca3af; font-size: 12px; line-height: 1.45; }
    .auth-setup-note { margin: 0 0 14px; padding: 10px 11px; border-left: 3px solid #fbbf24; border-radius: 0 8px 8px 0; background: #3f3210; color: #fef3c7; font-size: 12px; line-height: 1.45; }
    .auth-expired-panel { display: grid; gap: 13px; }
    .auth-expired-panel[hidden] { display: none; }
    .auth-expired-message { padding: 13px 14px; border: 1px solid #92400e; border-radius: 10px; background: #3f2410; color: #fde68a; font-size: 13px; line-height: 1.5; }
    .auth-expired-message strong { display: block; margin-bottom: 5px; color: #fef3c7; font-size: 15px; }
    .auth-expired-panel .auth-mini-actions { margin-top: 0; }
    .account-bar {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
      margin: 0 0 18px; padding: 12px 14px; border: 1px solid #475569; border-radius: 13px;
      background: rgba(23,32,51,.92);
    }
    .account-bar[hidden] { display: none; }
    .account-identity { min-width: 0; }
    .account-identity strong { display: block; color: #f9fafb; font-size: 14px; overflow-wrap: anywhere; }
    .account-identity span { display: block; margin-top: 2px; color: #cbd5e1; font-size: 12px; }
    .account-role { display: inline-flex; align-items: center; margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: #172554; color: #bfdbfe; font-size: 11px; font-weight: 700; vertical-align: middle; }
    .account-controls { display: flex; flex: 1 1 400px; flex-wrap: wrap; justify-content: flex-end; align-items: end; gap: 8px; }
    .account-class-control { display: grid; gap: 4px; min-width: min(100%, 235px); color: #cbd5e1; font-size: 11px; font-weight: 700; }
    .account-class-control[hidden] { display: none; }
    .account-class-control select {
      min-height: 36px; border: 1px solid #475569; border-radius: 8px; background: #0f172a; color: #f9fafb;
      padding: 7px 9px; font: 13px/1.2 Arial, sans-serif;
    }
    .guest-activity-note {
      display:flex; align-items:center; justify-content:center; min-height:36px; padding:8px 11px;
      border:1px solid #2563eb; border-radius:9px; background:#172554;
      color:#dbeafe; font:700 12px/1.25 Arial, sans-serif; text-align:center; cursor:pointer;
    }
    .guest-activity-note:hover { border-color:#60a5fa; background:#1e3a8a; color:#eff6ff; }
    .guest-activity-note:focus-visible { outline:2px solid #93c5fd; outline-offset:2px; }
    .guest-activity-note[hidden] { display:none; }
    .account-sync { flex: 0 0 100%; min-height: 17px; text-align: right; color: #9ca3af; font-size: 11px; }
    .account-sync:empty, .account-sync[hidden] { display:none; }
    .account-sync.ok { color: #86efac; } .account-sync.error { color: #fca5a5; } .account-sync.warning { color: #fde68a; }
    .account-signout { min-height: 36px; padding: 8px 10px; }
    .account-session-actions { display:flex; align-items:stretch; gap:8px; }
    .student-streak-tile {
      display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:7px 11px;
      border:1px solid #f59e0b; border-radius:9px; background:#3f2a0d; color:#fef3c7;
      font:800 12px/1.15 Arial,sans-serif; white-space:nowrap; cursor:pointer;
    }
    .student-streak-tile:hover { border-color:#fbbf24; background:#5a3a0b; color:#fff7d6; }
    .student-streak-tile:focus-visible { outline:2px solid #fde68a; outline-offset:2px; }
    .student-streak-tile[hidden] { display:none; }
    .student-streak-flame { font-size:16px; line-height:1; }
    .student-streak-value { font:800 15px/1 Consolas,monospace; }
    .account-offline-note { color: #fde68a; font-size: 12px; }
    /* Progress is now immutable account data. The old browser-only reset UI is intentionally removed. */
    .quiz-reset-zone { display: none !important; }
    @media (max-width: 680px) {
      .auth-overlay { padding: 12px; }
      .auth-card-header, .auth-card-body { padding-left: 16px; padding-right: 16px; }
      .account-bar { align-items: stretch; padding: 12px; }
      .account-controls { flex-basis: 100%; justify-content: stretch; }
      .account-class-control { flex: 1 1 100%; }
      .account-session-actions { width:100%; }
      .account-session-actions .account-signout, .account-session-actions .student-streak-tile { flex:1 1 0; width:auto; }
      .account-sync { text-align: left; }
    }


    /* ---------- TEACHER DASHBOARD + READ-ONLY STUDENT VIEW (staging) ---------- */
    .teacher-dashboard-panel { padding-bottom: 20px; }
    .teacher-dashboard-top {
      display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px;
      margin:0 0 16px; padding:16px; border:1px solid var(--border); border-radius:15px;
      background:linear-gradient(125deg,rgba(23,37,84,.92),rgba(31,41,55,.95));
    }
    .teacher-dashboard-top h2 { margin:0; font-size:22px; letter-spacing:-.02em; }
    .teacher-dashboard-top p { margin:5px 0 0; max-width:670px; color:#cbd5e1; font-size:13px; }
    .teacher-dashboard-actions { display:flex; flex-wrap:wrap; align-items:end; gap:8px; }
    .teacher-class-picker { display:grid; gap:5px; min-width:min(100%,270px); color:#dbeafe; font-size:12px; font-weight:700; }
    .teacher-class-picker select, .teacher-filter-select {
      min-height:39px; border:1px solid #475569; border-radius:8px; outline:none;
      background:#0f172a; color:#f9fafb; padding:8px 9px; font:13px/1.25 Arial,sans-serif;
    }
    .teacher-class-picker select:focus, .teacher-filter-select:focus { border-color:#93c5fd; box-shadow:0 0 0 2px rgba(96,165,250,.18); }
    .teacher-dashboard-status { min-height:22px; margin:0 0 14px; color:#cbd5e1; font-size:13px; }
    .teacher-dashboard-status.ok { color:#86efac; }
    .teacher-dashboard-status.error { color:#fca5a5; }
    .teacher-dashboard-status.warning { color:#fde68a; }
    .teacher-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
    .teacher-summary-card { min-width:0; padding:13px; border:1px solid #475569; border-radius:11px; background:#111827; }
    .teacher-summary-card span { display:block; color:#9ca3af; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
    .teacher-summary-card strong { display:block; margin-top:6px; color:#f9fafb; font:700 23px/1.08 Consolas,monospace; overflow-wrap:anywhere; }
    .teacher-summary-card em { display:block; margin-top:5px; color:#cbd5e1; font-size:11px; font-style:normal; }
    .teacher-dashboard-section { overflow:visible; margin:0 0 16px; border:1px solid var(--border); border-radius:14px; background:rgba(31,41,55,.96); }
    .teacher-dashboard-section-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:13px 15px; border-bottom:1px solid var(--border); background:#172033; }
    .teacher-dashboard-section-header h3 { margin:0; color:#f9fafb; font-size:16px; }
    .teacher-dashboard-section-header p { flex:1 1 260px; margin:2px 0 0; color:#cbd5e1; font-size:12px; }
    .teacher-overview-controls { display:flex; flex-wrap:wrap; align-items:end; justify-content:flex-end; gap:8px; }
    .teacher-overview-control { display:grid; gap:4px; color:#cbd5e1; font-size:11px; font-weight:800; }
    .teacher-anonymous-toggle {
      display:inline-flex; align-items:center; gap:7px; min-height:39px; padding:7px 10px; border:1px solid #475569;
      border-radius:8px; background:#0f172a; color:#dbeafe; font-size:12px; font-weight:800; cursor:pointer;
    }
    .teacher-anonymous-toggle input { width:17px; height:17px; margin:0; accent-color:#2563eb; }
    .teacher-anonymous-note { display:block; margin-top:3px; color:#fbbf24; font-size:10px; font-weight:700; }
    .teacher-roster-wrap { overflow:auto; }
    .teacher-roster { width:100%; min-width:850px; border-collapse:collapse; }
    .teacher-roster th, .teacher-roster td { padding:11px 12px; border-bottom:1px solid #334155; text-align:left; vertical-align:middle; }
    .teacher-roster th { color:#9ca3af; background:#111827; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.045em; white-space:nowrap; }
    .teacher-roster td { color:#e5e7eb; font-size:12px; }
    .teacher-roster tr:last-child td { border-bottom:0; }
    .teacher-student-name { border:0; border-radius:0; min-height:0; padding:0; background:transparent; color:#bfdbfe; font:700 13px/1.25 Arial,sans-serif; text-align:left; }
    .teacher-student-name:hover { color:#eff6ff; text-decoration:underline; transform:none; filter:none; }
    .teacher-metric-main { color:#f9fafb; font-weight:700; }
    .teacher-metric-sub { display:block; margin-top:3px; color:#9ca3af; font-size:10px; }
    .teacher-flag-list { display:flex; flex-wrap:wrap; gap:4px; min-width:130px; }
    .teacher-flag { position:relative; display:inline-flex; align-items:center; min-height:20px; padding:3px 6px; border:0; border-radius:999px; background:#172554; color:#bfdbfe; font:700 10px/1.2 Arial,sans-serif; white-space:nowrap; cursor:default; }
    button.teacher-flag[data-tooltip] { cursor:help; }
    .teacher-flag.support { background:#3f3210; color:#fef3c7; }
    .teacher-flag.inactive { background:#3f1f1f; color:#fecaca; }
    .teacher-flag.good { background:#153b26; color:#bbf7d0; }
    .teacher-flag[data-tooltip]::after { content:attr(data-tooltip); position:absolute; z-index:20; left:0; top:calc(100% + 7px); display:none; width:min(290px,72vw); padding:9px 10px; border:1px solid #64748b; border-radius:8px; background:#0f172a; color:#e5e7eb; box-shadow:0 12px 28px rgba(0,0,0,.38); font:12px/1.42 Arial,sans-serif; white-space:pre-line; text-align:left; }
    /* Tooltips are rendered into a top-level portal because table scroll containers clip normal descendants. */
    .teacher-flag[data-tooltip]::after { display:none !important; }
    .teacher-tooltip-portal {
      position:fixed; z-index:10900; display:none; max-width:min(330px, calc(100vw - 24px));
      padding:9px 10px; border:1px solid #64748b; border-radius:8px; background:#0f172a;
      color:#e5e7eb; box-shadow:0 12px 28px rgba(0,0,0,.42); font:12px/1.42 Arial,sans-serif;
      white-space:pre-line; text-align:left; pointer-events:none;
    }
    .teacher-tooltip-portal.visible { display:block; }
    @media (max-width:800px) { .teacher-flag[data-tooltip] { cursor:pointer; } .teacher-flag[data-tooltip]::after { position:fixed; left:12px; right:12px; top:auto; bottom:calc(14px + env(safe-area-inset-bottom)); width:auto; max-width:none; font-size:13px; } }
    .teacher-empty { padding:25px 15px; color:#9ca3af; font-size:13px; font-style:italic; }
    .teacher-skill-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; padding:13px; }
    .teacher-skill-column { min-width:0; padding:11px; border:1px solid #475569; border-radius:10px; background:#111827; }
    .teacher-skill-column h4 { margin:0 0 8px; color:#e5e7eb; font-size:13px; }
    .teacher-skill-list { display:grid; gap:7px; }
    .teacher-skill-row { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; color:#cbd5e1; font-size:12px; }
    .teacher-skill-row strong { min-width:0; color:#f9fafb; font-weight:700; overflow-wrap:anywhere; }
    .teacher-skill-row span { flex:0 0 auto; color:#86efac; font:700 12px/1.2 Consolas,monospace; }
    .teacher-skill-row.filterable { width:100%; padding:8px; border:1px solid transparent; border-radius:9px; background:transparent; text-align:left; cursor:pointer; }
    .teacher-skill-row.filterable:hover { border-color:#60a5fa; background:#172033; }
    .teacher-skill-row.filterable.active { border-color:#38bdf8; background:#0f2a3d; box-shadow:0 0 0 1px rgba(56,189,248,.18) inset; }
    .teacher-class-activity-student { color:#dbeafe; font-weight:800; }
    .teacher-class-activity-student button { padding:0; border:0; background:transparent; color:#dbeafe; font:inherit; text-decoration:underline; cursor:pointer; }
    .teacher-dashboard-note { margin:0; padding:10px 14px; border-top:1px solid #334155; color:#9ca3af; font-size:11px; line-height:1.4; }
    .teacher-view-overlay { position:fixed; inset:0; z-index:11000; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:24px; background:rgba(2,6,23,.86); backdrop-filter:blur(5px); }
    .teacher-view-overlay[hidden] { display:none; }
    .teacher-view-sheet { width:min(1080px,100%); max-height:calc(100dvh - 48px); margin:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid #475569; border-radius:18px; background:#111827; box-shadow:0 26px 70px rgba(0,0,0,.58); }
    .teacher-view-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 20px; border-bottom:1px solid #374151; background:linear-gradient(125deg,#172554,#111827); }
    .teacher-view-header h2 { margin:0; font-size:23px; letter-spacing:-.025em; }
    .teacher-view-header p { margin:5px 0 0; color:#bfdbfe; font-size:12px; }
    .teacher-view-close { flex:0 0 auto; background:#374151; color:#f9fafb; }
    .teacher-view-body { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:visible; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:18px 20px 22px; }
    .teacher-view-status { min-height:21px; margin:0 0 13px; color:#cbd5e1; font-size:13px; }
    .teacher-view-status.error { color:#fca5a5; }
    .teacher-view-intro { margin:0 0 15px; padding:10px 11px; border-left:3px solid #93c5fd; border-radius:0 8px 8px 0; background:#172033; color:#dbeafe; font-size:12px; line-height:1.42; }
    .teacher-student-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-bottom:16px; }
    .teacher-view-card { min-width:0; overflow:visible; margin-bottom:15px; border:1px solid #475569; border-radius:12px; background:#1f2937; }
    .teacher-view-card h3 { margin:0; padding:12px 13px; border-bottom:1px solid #475569; color:#f9fafb; font-size:15px; }
    .teacher-view-card-body { padding:13px; }
    .teacher-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
    .teacher-tool-card { min-width:0; padding:11px; border:1px solid #475569; border-radius:10px; background:#111827; }
    .teacher-tool-card strong { display:block; margin-bottom:8px; color:#f9fafb; font-size:13px; }
    .teacher-tool-line { display:flex; justify-content:space-between; gap:10px; padding:4px 0; color:#cbd5e1; font-size:12px; }
    .teacher-tool-line span:last-child { color:#f9fafb; font-weight:700; }
    .teacher-readonly-mastery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
    .teacher-readonly-mastery-column { min-width:0; padding:11px; border:1px solid #475569; border-radius:10px; background:#111827; }
    .teacher-readonly-mastery-column h4 { margin:0 0 9px; color:#f9fafb; font-size:13px; }
    .teacher-readonly-skill { margin-bottom:9px; }
    .teacher-readonly-skill:last-child { margin-bottom:0; }
    .teacher-readonly-skill.filterable { width:100%; padding:8px; border:1px solid transparent; border-radius:9px; background:transparent; color:inherit; text-align:left; cursor:pointer; }
    .teacher-readonly-skill.filterable:hover { border-color:#60a5fa; background:#172033; }
    .teacher-readonly-skill.filterable.active { border-color:#38bdf8; background:#0f2a3d; box-shadow:0 0 0 1px rgba(56,189,248,.18) inset; }
    .teacher-skill-filter-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:0 0 10px; padding:8px 10px; border:1px solid #334155; border-radius:10px; background:#111827; color:#dbeafe; font-size:12px; }
    .teacher-skill-filter-bar strong { color:#f9fafb; }
    .teacher-load-more-wrap { display:flex; justify-content:center; padding:10px 0 2px; }
    .teacher-load-more-btn { min-width:150px; }
    .teacher-skill-filter-clear { padding:5px 9px; border-radius:999px; background:#374151; color:#f9fafb; font-size:11px; }
    .teacher-activity-filter-controls { display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin:0 0 10px; padding:10px; border:1px solid #334155; border-radius:10px; background:#172033; }
    .teacher-activity-filter-controls label { display:grid; gap:4px; min-width:190px; color:#dbeafe; font-size:11px; font-weight:700; }
    .teacher-activity-filter-controls select { min-height:36px; border:1px solid #475569; border-radius:8px; outline:none; background:#0f172a; color:#f9fafb; padding:7px 9px; font:13px/1.2 Arial,sans-serif; }
    .teacher-activity-filter-controls select:focus { border-color:#93c5fd; box-shadow:0 0 0 2px rgba(96,165,250,.18); }
    .teacher-activity-filter-help { flex:1 1 240px; color:#9ca3af; font-size:11px; line-height:1.4; }
    .teacher-skill-column .teacher-activity-filter-controls,
    .teacher-readonly-mastery-column .teacher-activity-filter-controls { margin:0 0 10px; padding:8px; }
    .teacher-skill-column .teacher-activity-filter-controls label,
    .teacher-readonly-mastery-column .teacher-activity-filter-controls label { min-width:0; width:100%; }
    .teacher-skill-column .teacher-activity-filter-help,
    .teacher-readonly-mastery-column .teacher-activity-filter-help { flex-basis:100%; }
    @media (max-width:620px) { .teacher-activity-filter-controls label { width:100%; min-width:0; } }
    .teacher-readonly-skill-head { display:flex; justify-content:space-between; gap:8px; align-items:baseline; color:#cbd5e1; font-size:12px; }
    .teacher-readonly-skill-head strong { min-width:0; color:#e5e7eb; overflow-wrap:anywhere; }
    .teacher-readonly-skill-head span { flex:0 0 auto; color:#86efac; font:700 12px/1.2 Consolas,monospace; }
    .teacher-progress-track { height:6px; margin-top:5px; overflow:hidden; border-radius:999px; background:#334155; }
    .teacher-progress-fill { display:block; height:100%; border-radius:inherit; background:#60a5fa; }
    .teacher-activity-list { display:grid; gap:8px; }
    .teacher-activity-item { display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:10px; align-items:start; padding:9px 0; border-bottom:1px solid #334155; }
    .teacher-activity-item:last-child { padding-bottom:0; border-bottom:0; }
    .teacher-activity-time { color:#9ca3af; font-size:11px; line-height:1.35; }
    .teacher-activity-main strong { display:block; color:#f9fafb; font-size:12px; }
    .teacher-activity-main span { display:block; margin-top:3px; color:#cbd5e1; font-size:11px; overflow-wrap:anywhere; }
    .teacher-activity-xp { color:#86efac; font:700 12px/1.2 Consolas,monospace; white-space:nowrap; }
    .teacher-activity-xp.negative { color:#fca5a5; }
    .teacher-view-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
    .activity-calendar-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:0 0 14px; }
    .activity-calendar-card { min-width:0; padding:11px; border:1px solid #475569; border-radius:10px; background:#111827; }
    .activity-calendar-card span { display:block; color:#9ca3af; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
    .activity-calendar-card strong { display:block; margin-top:6px; color:#f9fafb; font:800 21px/1.05 Consolas,monospace; }
    .activity-calendar-card em { display:block; margin-top:5px; color:#cbd5e1; font-style:normal; font-size:11px; }
    .activity-calendar-heatmap { display:grid; grid-template-columns:repeat(14,minmax(16px,1fr)); gap:5px; padding:12px; border:1px solid #334155; border-radius:12px; background:#0f172a; }
    .activity-calendar-day { min-width:0; min-height:32px; padding:3px 2px; border:1px solid #334155; border-radius:6px; background:#111827; color:#e5e7eb; font:700 9px/1 Consolas,monospace; white-space:nowrap; cursor:default; }
    .activity-calendar-day:hover { border-color:#93c5fd; transform:translateY(-1px); }
    .activity-calendar-day[data-level="1"] { background:#12301f; border-color:#166534; }
    .activity-calendar-day[data-level="2"] { background:#14532d; border-color:#22c55e; }
    .activity-calendar-day[data-level="3"] { background:#166534; border-color:#4ade80; }
    .activity-calendar-day[data-level="4"] { background:#15803d; border-color:#86efac; color:#f0fdf4; }
    .activity-calendar-legend { display:flex; align-items:center; justify-content:flex-end; gap:5px; margin:8px 0 0; color:#9ca3af; font-size:11px; }
    .activity-calendar-legend i { width:18px; height:12px; border:1px solid #334155; border-radius:3px; background:#111827; }
    .activity-calendar-legend i:nth-of-type(2) { background:#12301f; border-color:#166534; }
    .activity-calendar-legend i:nth-of-type(3) { background:#14532d; border-color:#22c55e; }
    .activity-calendar-legend i:nth-of-type(4) { background:#15803d; border-color:#86efac; }
    .activity-calendar-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:14px; }
    .activity-calendar-chip-list { display:flex; flex-wrap:wrap; gap:6px; }
    .activity-calendar-chip { display:inline-flex; align-items:center; min-height:23px; padding:4px 8px; border-radius:999px; background:#172554; color:#dbeafe; font-size:11px; font-weight:800; }
    .activity-calendar-chip.note { background:#3f3210; color:#fef3c7; }
    .activity-calendar-empty { padding:18px; color:#9ca3af; font-size:13px; font-style:italic; }
    @media (max-width:800px) { .activity-calendar-summary-grid, .activity-calendar-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .activity-calendar-heatmap { grid-template-columns:repeat(7,minmax(18px,1fr)); } }
    @media (max-width:520px) { .activity-calendar-summary-grid, .activity-calendar-detail-grid { grid-template-columns:1fr; } }
    .teacher-view-flags { display:flex; flex-wrap:wrap; gap:6px; }
    .teacher-readonly-label { display:inline-flex; align-items:center; margin-left:7px; padding:3px 7px; border:1px solid #93c5fd; border-radius:999px; color:#bfdbfe; font-size:10px; font-weight:700; vertical-align:middle; }
    @media (max-width:900px) {
      .teacher-summary-grid, .teacher-student-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .teacher-skill-grid, .teacher-tool-grid, .teacher-readonly-mastery-grid { grid-template-columns:1fr; }
    }
    @media (max-width:680px) {
      .teacher-dashboard-top { padding:13px; }
      .teacher-dashboard-actions { width:100%; }
      .teacher-class-picker, .teacher-dashboard-actions > button { width:100%; }
      .teacher-summary-grid, .teacher-student-summary-grid { grid-template-columns:1fr; }
      .teacher-view-overlay { align-items:stretch; overflow:hidden; padding:0; }
      .teacher-view-sheet { width:100%; height:100dvh; max-height:100dvh; margin:0; border-radius:0; display:flex; flex-direction:column; }
      .teacher-view-header { flex:0 0 auto; padding:14px 12px; }
      .teacher-view-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:13px 12px calc(22px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch; }
      .teacher-activity-item { grid-template-columns:84px minmax(0,1fr); }
      .teacher-activity-xp { grid-column:2; }
    }

  

    /* ---------- TEACHER CLASS MANAGEMENT + REVEAL COUNTS ---------- */
    .teacher-summary-grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
    .teacher-skill-row .teacher-skill-counts { flex:0 0 auto; display:grid; gap:2px; text-align:right; font:700 11px/1.2 Consolas,monospace; }
    .teacher-skill-row .teacher-skill-counts b { font:inherit; font-weight:700; }
    .teacher-skill-row .teacher-skill-counts .teacher-skill-correct { color:#86efac; }
    .teacher-skill-row .teacher-skill-counts .teacher-skill-revealed { color:#fde68a; }
    .teacher-readonly-skill-head .teacher-readonly-skill-counts { flex:0 0 auto; display:grid; gap:2px; text-align:right; font:700 11px/1.2 Consolas,monospace; }
    .teacher-readonly-skill-head .teacher-readonly-skill-counts b { color:#86efac; font:inherit; font-weight:700; }
    .teacher-readonly-skill-head .teacher-readonly-skill-counts em { color:#fde68a; font:inherit; font-style:normal; font-weight:700; }
    .teacher-management-sheet { width:min(960px,100%); }
    .teacher-manage-intro { margin:0 0 15px; padding:10px 11px; border-left:3px solid #60a5fa; border-radius:0 8px 8px 0; background:#172033; color:#dbeafe; font-size:12px; line-height:1.45; }
    .teacher-manage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
    .teacher-manage-card { min-width:0; padding:14px; border:1px solid #475569; border-radius:12px; background:#1f2937; }
    .teacher-manage-card h3 { margin:0 0 5px; color:#f9fafb; font-size:16px; }
    .teacher-manage-card p { margin:0 0 13px; color:#cbd5e1; font-size:12px; line-height:1.45; }
    .teacher-manage-form { display:grid; gap:10px; }
    .teacher-manage-field { display:grid; gap:5px; color:#dbeafe; font-size:12px; font-weight:700; }
    .teacher-manage-field input, .teacher-manage-field select, .teacher-manage-field textarea {
      width:100%; min-height:39px; border:1px solid #475569; border-radius:8px; outline:none;
      background:#0f172a; color:#f9fafb; padding:8px 9px; font:14px/1.35 Arial,sans-serif;
    }
    .teacher-manage-field textarea { min-height:78px; resize:vertical; }
    .teacher-manage-field input:focus, .teacher-manage-field select:focus, .teacher-manage-field textarea:focus { border-color:#93c5fd; box-shadow:0 0 0 2px rgba(96,165,250,.18); }
    .teacher-manage-submit { width:100%; }
    .teacher-manage-note { margin:0; color:#9ca3af; font-size:11px; line-height:1.42; }
    .teacher-manage-status { min-height:22px; margin:0 0 13px; color:#cbd5e1; font-size:13px; }
    .teacher-manage-status.ok { color:#86efac; }
    .teacher-manage-status.error { color:#fca5a5; }
    .teacher-manage-status.warning { color:#fde68a; }
    .teacher-current-class { margin:0 0 11px; padding:9px 10px; border:1px solid #334155; border-radius:8px; background:#111827; color:#cbd5e1; font-size:12px; }
    .teacher-current-class strong { color:#f9fafb; }
    .teacher-manage-class-target, .teacher-manage-invite-card, .teacher-manage-create-card, .teacher-class-code-card { margin-bottom:13px; }
    .teacher-manage-top-grid { display:grid; grid-template-columns:minmax(250px,0.9fr) minmax(300px,1.1fr); gap:13px; margin-bottom:13px; align-items:stretch; }
    .teacher-manage-top-grid .teacher-manage-card { margin-bottom:0; }
    .teacher-manage-top-grid .teacher-class-code-card { grid-column:auto; }
    .teacher-manage-class-target { border-color:#60a5fa; background:linear-gradient(125deg,#172554,#1f2937); }
    .teacher-manage-class-target h3 { color:#dbeafe; }
    .teacher-manage-class-target.compact { padding:12px; }
    .teacher-manage-class-target.compact h3, .teacher-manage-top-grid h3 { font-size:15px; }
    .teacher-manage-class-target.compact .teacher-manage-field { margin:0; }
    .teacher-class-code-card .teacher-manage-field { margin: 12px 0 10px; }
    .teacher-class-code-card .teacher-current-class { margin-top: 0; }
    .teacher-create-class-backdrop { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(15,23,42,.72); }
    .teacher-create-class-dialog { width:min(560px,100%); max-height:min(720px,calc(100dvh - 36px)); overflow:auto; padding:16px; border:1px solid #60a5fa; border-radius:14px; background:#111827; box-shadow:0 22px 65px rgba(0,0,0,.45); }
    .teacher-create-class-dialog h3 { margin:0 0 5px; color:#f9fafb; font-size:18px; }
    .teacher-create-class-dialog p { margin:0 0 13px; color:#cbd5e1; font-size:12px; line-height:1.45; }
    .teacher-create-class-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:3px; }
    .teacher-class-reaction-settings { margin-bottom:13px; border-color:#7c3aed; background:linear-gradient(125deg,#2e1065,#1f2937); }
    .teacher-class-setting-toggle { display:flex; align-items:flex-start; gap:10px; padding:11px; border:1px solid #6d28d9; border-radius:10px; background:#111827; color:#f9fafb; cursor:pointer; }
    .teacher-class-setting-toggle input { flex:0 0 auto; width:19px; height:19px; margin:1px 0 0; accent-color:#7c3aed; }
    .teacher-class-setting-toggle span { display:grid; gap:3px; min-width:0; }
    .teacher-class-setting-toggle strong { color:#f9fafb; font-size:13px; line-height:1.35; }
    .teacher-class-setting-toggle small { color:#cbd5e1; font-size:11px; line-height:1.4; }
    .teacher-class-setting-toggle.disabled { cursor:wait; opacity:.72; }
    .teacher-class-setting-state { margin:8px 0 0 !important; color:#c4b5fd !important; font-weight:700; }
    @media (max-width:900px) { .teacher-manage-grid, .teacher-manage-top-grid { grid-template-columns:1fr; } }
    @media (max-width:680px) {
      .teacher-management-sheet { width:100%; height:100dvh; max-height:100dvh; margin:0; border-radius:0; display:flex; flex-direction:column; }
    }

  


    /* ---------- CLASS JOIN CODES ---------- */
    .teacher-class-code-card { grid-column:1 / -1; }
    .teacher-class-code-value { display:inline-flex; align-items:center; min-height:40px; padding:8px 11px; border:1px solid #60a5fa; border-radius:8px; background:#172554; color:#dbeafe; font:700 20px/1 Consolas,monospace; letter-spacing:.08em; }
    .teacher-class-code-muted { color:#9ca3af; font-size:13px; }
    .teacher-class-code-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
    .teacher-class-code-link { margin:10px 0 0; color:#cbd5e1; font:12px/1.45 Consolas,monospace; overflow-wrap:anywhere; }
    .teacher-class-code-state { margin:8px 0 0; font-size:12px; color:#cbd5e1; }
    .teacher-class-code-state.paused { color:#fde68a; }
    @media (max-width:680px) { .teacher-class-code-actions { display:grid; grid-template-columns:1fr; } .teacher-class-code-actions button { width:100%; } }

    /* ---------- PUBLIC PILOT PAGES ---------- */
    .site-footer {
      margin-top: 28px; padding: 17px 0 4px; border-top: 1px solid var(--border);
      display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 18px;
      color:var(--muted); font-size:12px;
    }
    .site-footer-links { display:flex; flex-wrap:wrap; gap:10px 14px; }
    .site-build-version { margin-left:5px; color:#64748b; font-size:10px; font-weight:700; }
    .site-footer-link { border:0; padding:0; min-height:0; background:transparent; color:#93c5fd; font:700 12px/1.35 Arial,sans-serif; text-decoration:underline; cursor:pointer; }
    .site-footer-link:hover { color:#dbeafe; transform:none; filter:none; }
    .public-page-overlay { position:fixed; inset:0; z-index:13000; display:flex; align-items:stretch; justify-content:center; padding:22px; background:rgba(2,6,23,.86); backdrop-filter:blur(6px); }
    .public-page-overlay[hidden] { display:none; }
    .public-page-sheet { width:min(860px,100%); max-height:calc(100dvh - 44px); display:flex; flex-direction:column; overflow:hidden; border:1px solid #475569; border-radius:18px; background:#111827; box-shadow:0 26px 70px rgba(0,0,0,.62); }
    .public-page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:19px 20px 16px; border-bottom:1px solid #374151; background:linear-gradient(125deg,#172554,#111827); }
    .public-page-header h2 { margin:0; font-size:23px; letter-spacing:-.025em; }
    .public-page-header p { margin:5px 0 0; color:#bfdbfe; font-size:12px; }
    .public-page-close { flex:0 0 auto; background:#374151; color:#f9fafb; }
    .public-page-body { flex:1 1 auto; min-height:0; overflow:auto; padding:20px; color:#e5e7eb; font-size:14px; line-height:1.55; }
    .public-page-body h3 { margin:19px 0 7px; color:#f9fafb; font-size:16px; }
    .public-page-body h3:first-child { margin-top:0; }
    .public-page-body p { margin:0 0 11px; }
    .public-page-body ul { margin:0 0 12px; padding-left:21px; }
    .public-page-body li { margin-bottom:6px; }
    .public-page-callout { margin:14px 0; padding:11px 12px; border-left:3px solid #93c5fd; border-radius:0 8px 8px 0; background:#172033; color:#dbeafe; font-size:13px; }
    .public-contact-card { margin-top:12px; padding:14px; border:1px solid #475569; border-radius:11px; background:#0f172a; }
    .public-contact-card strong { display:block; margin-bottom:4px; color:#f9fafb; }
    .public-contact-card a { color:#93c5fd; font-weight:700; overflow-wrap:anywhere; }
    @media (max-width:680px) {
      .site-footer { margin-top:22px; padding-bottom:8px; align-items:flex-start; flex-direction:column; }
      .public-page-overlay { padding:0; }
      .public-page-sheet { width:100%; height:100dvh; max-height:100dvh; border-radius:0; border-left:0; border-right:0; }
      .public-page-header { padding:calc(14px + env(safe-area-inset-top)) 14px 13px; }
      .public-page-body { padding:15px 14px calc(22px + env(safe-area-inset-bottom)); }
    }

  
    .auth-public-links { display:flex; justify-content:center; gap:12px; margin-top:14px; }
    .auth-public-link { min-height:0; padding:0; border:0; background:transparent; color:#93c5fd; text-decoration:underline; font:700 12px/1.35 Arial,sans-serif; }
    .auth-public-link:hover { color:#dbeafe; transform:none; filter:none; }
    /* Account activity is a student-only control. The role class below is a visual safety net while account data refreshes. */
    #accountBar.account-role-admin #accountClassControl,
    #accountBar.account-role-teacher #accountClassControl { display:none !important; }


    /* ---------- STUDENT CLASS JOIN ---------- */
    .account-join-class { min-height:36px; padding:8px 10px; }
    .student-join-sheet { width:min(520px,100%); }
    .student-join-intro { margin:0 0 14px; color:#cbd5e1; font-size:13px; line-height:1.45; }
    .student-join-form { display:grid; gap:11px; }
    .student-join-field { display:grid; gap:6px; color:#dbeafe; font-size:12px; font-weight:700; }
    .student-join-field input { width:100%; min-height:45px; border:1px solid #475569; border-radius:8px; outline:none; background:#0f172a; color:#f9fafb; padding:10px 11px; font:700 19px/1 Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; }
    .student-join-field input:focus { border-color:#93c5fd; box-shadow:0 0 0 2px rgba(96,165,250,.18); }
    .student-join-actions { display:flex; flex-wrap:wrap; gap:8px; }
    .student-join-actions button { flex:1 1 150px; }
    .student-join-status { min-height:22px; margin:0; color:#cbd5e1; font-size:13px; }
    .student-join-status.error { color:#fca5a5; }.student-join-status.ok { color:#86efac; }.student-join-status.warning { color:#fde68a; }
    .student-join-confirm { margin-top:14px; padding:13px; border:1px solid #60a5fa; border-radius:11px; background:#172554; }
    .student-join-confirm[hidden] { display:none; }
    .student-join-confirm strong { display:block; margin-bottom:4px; color:#f9fafb; font-size:16px; }
    .student-join-confirm p { margin:0; color:#dbeafe; font-size:13px; }
    @media (max-width:680px) { .account-join-class { width:100%; } .student-join-actions { display:grid; grid-template-columns:1fr; } }



    /* ---------- ACCOUNT & MEMBERSHIP MANAGEMENT ---------- */
    .account-manage-btn { min-height:36px; padding:8px 10px; }
    .account-manage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
    .account-manage-card { min-width:0; padding:14px; border:1px solid #475569; border-radius:12px; background:#1f2937; }
    .account-manage-card.full { grid-column:1 / -1; }
    .account-manage-card h3 { margin:0 0 5px; color:#f9fafb; font-size:16px; }
    .account-manage-card p { margin:0 0 12px; color:#cbd5e1; font-size:12px; line-height:1.45; }
    .account-manage-list { display:grid; gap:8px; }
    .account-manage-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px; border:1px solid #475569; border-radius:9px; background:#111827; }
    .account-manage-row-main { min-width:0; }
    .account-manage-row-main strong { display:block; color:#f9fafb; font-size:13px; overflow-wrap:anywhere; }
    .account-manage-row-main span { display:block; margin-top:3px; color:#9ca3af; font-size:11px; overflow-wrap:anywhere; }
    .account-manage-empty { padding:11px; border-radius:8px; background:#111827; color:#9ca3af; font-size:12px; font-style:italic; }
    .account-manage-danger { background:#7f1d1d; color:#fee2e2; }
    .account-manage-danger:hover { background:#991b1b; }
    .account-manage-confirm { margin-top:10px; padding:10px; border-left:3px solid #fca5a5; border-radius:0 8px 8px 0; background:#3f1f1f; color:#fee2e2; font-size:12px; line-height:1.4; }
    .teacher-class-students-card { grid-column:1 / -1; }
    .teacher-class-students-card .account-manage-row { align-items:flex-start; }
    .student-manage-actions { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
    .student-manage-actions button { min-height:32px; padding:7px 9px; font-size:12px; }
    .account-password-flag { display:inline-flex; align-items:center; margin-top:4px; padding:3px 7px; border-radius:999px; background:#3f3210; color:#fde68a; font-size:11px; font-weight:700; }
    .teacher-manage-field.compact { margin:0 0 8px; }
    @media (max-width:680px) { .account-manage-grid { grid-template-columns:1fr; } .account-manage-card.full, .teacher-class-students-card { grid-column:auto; } .account-manage-row { align-items:stretch; flex-direction:column; } .account-manage-row button { width:100%; } }



    /* ---------- UI CLEAN-UP ---------- */
    .card-header span:empty { display:none; }
    .ui-help,
    .compact-guide {
      margin:14px 0 0; padding:0; overflow:hidden;
      border:1px solid #475569; border-radius:10px; background:#172033;
      color:#cbd5e1; font-size:12px; line-height:1.45;
    }
    .ui-help summary,
    .compact-guide summary {
      padding:10px 12px; color:#dbeafe; font-weight:700; cursor:pointer;
      list-style:none;
    }
    .ui-help summary::-webkit-details-marker,
    .compact-guide summary::-webkit-details-marker { display:none; }
    .ui-help summary::after,
    .compact-guide summary::after { content:"+"; float:right; color:#93c5fd; font-size:16px; line-height:.9; }
    .ui-help[open] summary,
    .compact-guide[open] summary { border-bottom:1px solid #475569; }
    .ui-help[open] summary::after,
    .compact-guide[open] summary::after { content:"−"; }
    .ui-help p { margin:0; padding:10px 12px 12px; }
    .builder-input-help { margin:0 16px 14px; }
    .quiz-scoring-help { margin:12px 0 0; }
    .compact-guide { margin-top:18px; padding:0; }
    .compact-guide .examples-grid,
    .compact-guide .reaction-reference-grid { padding:0 14px 14px; }
    .reaction-attempts-section[hidden] { display:none; }
    .organic-analysis-interpretation { margin:10px 12px 12px; border:1px solid #475569; border-radius:8px; background:#172033; }
    .organic-analysis-interpretation summary { padding:8px 10px; color:#dbeafe; font-size:12px; font-weight:700; cursor:pointer; }
    .organic-analysis-interpretation .organic-analysis-peak-info { margin:0; }
    .comparison-highlight-tip { grid-column:1 / -1; margin:0; padding:10px 12px; border:1px solid #475569; border-radius:10px; background:#172033; color:#cbd5e1; font-size:12px; }
    .comparison-spectrum li:focus,
    .comparison-spectrum svg text:focus { outline:2px solid #93c5fd; outline-offset:2px; }


    /* ---------- SITE ADMIN DASHBOARD ---------- */
    .site-admin-panel { padding-bottom: 22px; }
    .site-admin-top {
      display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px;
      margin:0 0 16px; padding:16px; border:1px solid var(--border); border-radius:15px;
      background:linear-gradient(125deg,rgba(88,28,135,.92),rgba(31,41,55,.95));
    }
    .site-admin-top h2 { margin:0; font-size:22px; letter-spacing:-.02em; }
    .site-admin-top p { margin:5px 0 0; max-width:760px; color:#e9d5ff; font-size:13px; }
    .site-admin-status { min-height:22px; margin:0 0 14px; color:#cbd5e1; font-size:13px; }
    .site-admin-status.ok { color:#86efac; }
    .site-admin-status.error { color:#fca5a5; }
    .site-admin-status.warning { color:#fde68a; }
    .site-admin-summary-grid {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px;
    }
    .site-admin-summary-card {
      min-width:0; padding:13px; border:1px solid #475569; border-radius:11px; background:#111827;
    }
    .site-admin-summary-card span {
      display:block; color:#9ca3af; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    }
    .site-admin-summary-card strong {
      display:block; margin-top:6px; color:#f9fafb; font:700 23px/1.08 Consolas,monospace;
    }
    .site-admin-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
    .site-admin-tab-btn { background:#374151; color:#f9fafb; border:1px solid #475569; }
    .site-admin-tab-btn.active { background:#7c3aed; color:#f5f3ff; border-color:#c4b5fd; }
    .site-admin-section { display:none; }
    .site-admin-section.active { display:block; }
    .site-admin-grid {
      display:grid; grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr); gap:14px; align-items:start;
    }
    .site-admin-card {
      min-width:0; overflow:hidden; border:1px solid #475569; border-radius:14px; background:#1f2937;
    }
    .site-admin-card h3 { margin:0; padding:13px 15px; border-bottom:1px solid #374151; font-size:16px; }
    .site-admin-card-body { padding:14px; }
    .site-admin-form { display:grid; gap:10px; }
    .site-admin-field { display:grid; gap:5px; color:#dbeafe; font-size:12px; font-weight:700; }
    .site-admin-field input,
    .site-admin-field select,
    .site-admin-field textarea {
      width:100%; min-height:40px; border:1px solid #475569; border-radius:8px; outline:none;
      background:#0f172a; color:#f9fafb; padding:8px 9px; font:14px/1.35 Arial,sans-serif;
    }
    .site-admin-field textarea {
      min-height:120px; resize:vertical; font-family:Consolas, "Courier New", monospace;
    }
    .site-admin-checkbox-row { display:flex; align-items:center; gap:8px; color:#cbd5e1; font-size:13px; font-weight:700; }
    .site-admin-checkbox-row[hidden] { display:none !important; }
    .site-admin-checkbox-row input { width:17px; height:17px; accent-color:#7c3aed; }
    .site-admin-note { margin:8px 0 0; color:#9ca3af; font-size:12px; line-height:1.45; }
    .site-admin-email-note[hidden] { display:none !important; }
    .site-admin-table-wrap { overflow:auto; }
    .site-admin-table { width:100%; min-width:720px; border-collapse:collapse; }
    .site-admin-table th,
    .site-admin-table td { padding:10px 11px; border-bottom:1px solid #334155; text-align:left; vertical-align:top; }
    .site-admin-table th {
      color:#9ca3af; background:#111827; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.045em;
    }
    .site-admin-table td { color:#e5e7eb; font-size:12px; }
    .site-admin-audit-table { min-width:1180px; table-layout:fixed; }
    .site-admin-audit-table th:nth-child(1) { width:130px; }
    .site-admin-audit-table th:nth-child(2) { width:190px; }
    .site-admin-audit-table th:nth-child(3) { width:170px; }
    .site-admin-audit-table th:nth-child(4) { width:205px; }
    .site-admin-audit-table th:nth-child(5) { width:205px; }
    .site-admin-audit-person, .site-admin-audit-target, .site-admin-audit-context { display:grid; gap:3px; min-width:0; }
    .site-admin-audit-person strong, .site-admin-audit-target strong, .site-admin-audit-context strong { color:#f9fafb; font-size:12px; overflow-wrap:anywhere; }
    .site-admin-audit-person span, .site-admin-audit-target span, .site-admin-audit-context span { color:#9ca3af; font-size:11px; overflow-wrap:anywhere; }
    .site-admin-audit-action { display:inline-flex; padding:4px 7px; border-radius:999px; background:#312e81; color:#e0e7ff; font-size:11px; font-weight:800; }
    .site-admin-audit-summary { color:#d1d5db; font-size:12px; line-height:1.42; }
    .site-admin-audit-details { margin-top:7px; }
    .site-admin-audit-details > summary { color:#93c5fd; font-size:11px; font-weight:800; cursor:pointer; }
    .site-admin-audit-details[open] > summary { margin-bottom:8px; }
    .site-admin-audit-muted { color:#9ca3af; font-size:11px; }
    .site-admin-audit-details-grid { display:grid; gap:8px; min-width:0; }
    .site-admin-audit-json-block { min-width:0; }
    .site-admin-audit-json-block > strong { display:block; margin:0 0 4px; color:#cbd5e1; font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
    .site-admin-audit-json-block pre { margin:0; max-height:220px; overflow:auto; padding:8px; border-radius:8px; background:#020617; color:#d1d5db; font:10px/1.4 Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
    .site-admin-pill {
      display:inline-flex; align-items:center; min-height:22px; padding:3px 7px; border-radius:999px;
      background:#172554; color:#bfdbfe; font:700 11px/1.2 Arial,sans-serif; margin:0 3px 3px 0;
    }
    .site-admin-pill.admin { background:#581c87; color:#f3e8ff; }
    .site-admin-pill.teacher { background:#172554; color:#bfdbfe; }
    .site-admin-pill.student { background:#153b26; color:#bbf7d0; }
    .site-admin-output {
      min-height:46px; max-height:300px; overflow:auto; padding:10px; border-radius:8px;
      background:#111827; color:#cbd5e1; font:12px/1.45 Consolas, "Courier New", monospace; white-space:pre-wrap;
    }
    .site-admin-two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .site-admin-temp-password {
      margin-top:10px; padding:10px; border:1px solid #fde68a; border-radius:9px; background:#3f3210; color:#fef3c7;
      font:700 13px/1.45 Consolas, "Courier New", monospace; overflow-wrap:anywhere;
    }

    .site-admin-user-toolbar {
      display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
      padding:12px 14px; border-bottom:1px solid #374151; background:#172033;
    }
    .site-admin-user-search {
      flex:1 1 320px; min-height:40px; border:1px solid #475569; border-radius:8px; outline:none;
      background:#0f172a; color:#f9fafb; padding:8px 10px; font:14px/1.35 Arial,sans-serif;
    }
    .site-admin-user-search:focus { border-color:#c4b5fd; box-shadow:0 0 0 2px rgba(124,58,237,.18); }
    .site-admin-user-count { color:#cbd5e1; font-size:12px; }
    .site-admin-sort-btn {
      min-height:0; padding:0; border:0; border-radius:0; background:transparent; color:#9ca3af;
      font:700 10px/1.25 Arial,sans-serif; text-transform:uppercase; letter-spacing:.045em;
    }
    .site-admin-sort-btn:hover { color:#f9fafb; background:transparent; transform:none; filter:none; text-decoration:underline; }
    .site-admin-sort-btn.active { color:#c4b5fd; }
    .site-admin-user-row { cursor:pointer; }
    .site-admin-user-row:hover td { background:#243042; }
    .site-admin-user-row.selected td { background:#312e81; }
    .site-admin-user-meta { display:grid; gap:3px; color:#cbd5e1; font-size:12px; }
    .site-admin-user-meta span { color:#9ca3af; font-size:11px; }
    .site-admin-selected-note {
      margin:0 0 10px; padding:9px 10px; border:1px solid #7c3aed; border-radius:9px; background:#2e1065;
      color:#f3e8ff; font-size:12px; line-height:1.4;
    }
    .site-admin-form-actions { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:stretch; }
    .site-admin-form-actions button { width:100%; }
    .site-admin-clear-user { background:#374151; color:#f9fafb; }
    @media (max-width:800px) { .site-admin-form-actions { grid-template-columns:1fr; } }
    .site-admin-users-card { grid-column:1 / -1; }
    .site-admin-user-toolbar-with-action { grid-template-columns:minmax(220px,1fr) auto auto; }
    .site-admin-user-table { min-width:1080px; table-layout:fixed; }
    .site-admin-user-col-email { width:24%; }
    .site-admin-user-col-name { width:14%; }
    .site-admin-user-col-org { width:16%; }
    .site-admin-user-col-classes { width:22%; }
    .site-admin-user-col-roles { width:10%; }
    .site-admin-user-col-password { width:9%; }
    .site-admin-user-col-updated { width:13%; }
    .site-admin-user-col-action { width:90px; }
    .site-admin-cell-list { display:grid; gap:5px; min-width:0; }
    .site-admin-cell-list div { overflow-wrap:anywhere; line-height:1.35; }
    .site-admin-user-action-btn { padding:7px 10px; border-radius:999px; font-size:12px; white-space:nowrap; }
    .site-admin-modal-overlay {
      position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
      padding:18px; background:rgba(2,6,23,.74); backdrop-filter:blur(6px);
    }
    .site-admin-modal-overlay[hidden] { display:none !important; }
    .site-admin-modal {
      width:min(760px,100%); max-height:92vh; overflow:auto; background:#111827; color:#f9fafb;
      border:1px solid #475569; border-radius:18px; box-shadow:0 24px 80px rgba(0,0,0,.45);
    }
    .site-admin-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid #334155; }
    .site-admin-modal-head h3 { margin:0; padding:0; border:0; font-size:19px; }
    .site-admin-modal-close { width:36px; min-width:36px; height:36px; padding:0; border-radius:999px; font-size:22px; line-height:1; }
    .site-admin-user-modal-form { padding:16px 18px 0; }
    .site-admin-class-picker-card { border:1px solid #334155; border-radius:14px; background:#0f172a; overflow:hidden; }
    .site-admin-class-picker-head { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid #334155; color:#dbeafe; font-size:13px; }
    .site-admin-class-picker-head span { color:#9ca3af; font-weight:500; }
    .site-admin-class-checklist { display:grid; gap:0; max-height:240px; overflow:auto; padding:6px; color:#cbd5e1; font-size:13px; }
    .site-admin-class-option { display:flex; align-items:flex-start; gap:9px; padding:8px; border-radius:10px; cursor:pointer; }
    .site-admin-class-option:hover { background:#1f2937; }
    .site-admin-class-option input { margin-top:2px; accent-color:#7c3aed; }
    .site-admin-class-option strong { display:block; color:#f9fafb; font-size:13px; }
    .site-admin-class-option span { display:block; color:#9ca3af; font-size:12px; margin-top:2px; }
    .site-admin-modal-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:4px; }
    .site-admin-modal-actions button { width:auto; }
    @media (max-width:800px) {
      .site-admin-user-toolbar-with-action { grid-template-columns:1fr; }
      .site-admin-modal { max-height:94vh; }
      .site-admin-modal-actions { display:grid; grid-template-columns:1fr; }
      .site-admin-modal-actions button { width:100%; }
    }

    @media (max-width:800px) {
      .site-admin-grid, .site-admin-two-col { grid-template-columns:1fr; }
      .site-admin-top { padding:13px; }
    }


    .teacher-activity-meta { display:block; color:#64748b; font-size:12px; margin-top:2px; }
    .teacher-incorrect-attempts { margin-top:6px; padding:7px 9px; border-radius:10px; background:#f8fafc; border:1px solid #e2e8f0; color:#334155; }
    .teacher-incorrect-attempts span { display:block; font-size:11px; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
    .teacher-incorrect-attempts ul { margin:0; padding-left:18px; }
    .teacher-incorrect-attempts li { margin:2px 0; line-height:1.35; overflow-wrap:anywhere; }


    /* ---------- TEACHER ATTEMPT DETAIL POPUP ---------- */
    .teacher-attempt-detail-sheet { width:min(1180px,100%); }
    .teacher-attempt-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:9px; margin-bottom:14px; }
    .teacher-attempt-summary-card { padding:10px 11px; border:1px solid #475569; border-radius:10px; background:#1f2937; }
    .teacher-attempt-summary-card span { display:block; color:#9ca3af; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
    .teacher-attempt-summary-card strong { display:block; margin-top:4px; color:#f9fafb; font-size:16px; line-height:1.2; overflow-wrap:anywhere; }
    .teacher-attempt-card { margin:0 0 13px; border:1px solid #475569; border-radius:12px; background:#1f2937; overflow:hidden; }
    .teacher-attempt-card h3 { margin:0; padding:11px 13px; border-bottom:1px solid #475569; color:#f9fafb; font-size:14px; }
    .teacher-attempt-card-body { padding:13px; color:#d1d5db; font-size:13px; line-height:1.45; }
    .teacher-attempt-question { padding:13px; border:1px solid #334155; border-radius:12px; background:#111827; color:#f9fafb; font-size:15px; line-height:1.45; overflow-wrap:anywhere; }
    .teacher-attempt-question-label { color:#93c5fd; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
    .teacher-attempt-structure-wrap { margin-top:12px; border:1px solid #cbd5e1; border-radius:12px; background:#fff; padding:10px; overflow:auto; }
    .teacher-attempt-structure-wrap svg { display:block; width:100%; max-width:680px; height:auto; margin:0 auto; }
    .teacher-attempt-structure-wrap.naming svg { max-width:340px; }
    .teacher-attempt-reaction { display:grid; gap:9px; }
    .teacher-attempt-equation { padding:12px; border:1px solid #334155; border-radius:12px; background:#0f172a; color:#f8fafc; font:700 16px/1.45 Arial,sans-serif; text-align:center; overflow-wrap:anywhere; }
    .teacher-attempt-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
    .teacher-attempt-tag { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; background:#172554; color:#bfdbfe; font-size:11px; font-weight:800; }
    .teacher-attempt-tag.warning { background:#3f3210; color:#fde68a; }
    .teacher-attempt-answer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .teacher-attempt-answer-box { min-width:0; padding:10px; border:1px solid #475569; border-radius:10px; background:#111827; }
    .teacher-attempt-answer-box span { display:block; color:#9ca3af; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
    .teacher-attempt-answer-box strong { display:block; color:#f9fafb; font-size:13px; line-height:1.35; overflow-wrap:anywhere; white-space:pre-wrap; }
    .teacher-attempt-incorrect-list { margin:0; padding-left:18px; }
    .teacher-attempt-incorrect-list li { margin:5px 0; overflow-wrap:anywhere; white-space:pre-wrap; }
    .teacher-attempt-json { margin:0; max-height:260px; overflow:auto; padding:10px; border-radius:10px; background:#020617; color:#d1d5db; font:12px/1.45 Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
    .teacher-attempt-open-btn { margin-top:7px; align-self:flex-start; padding:5px 9px; border-radius:999px; background:#334155; color:#f8fafc; font-size:11px; }
    .teacher-attempt-open-btn:hover { background:#475569; }
    .teacher-activity-item.has-detail { border-radius:10px; padding:9px; }
    .teacher-activity-item.has-detail:hover { background:#172033; }

    .teacher-attempt-legacy-note {
      margin:0 0 12px; padding:10px 12px; border-left:3px solid #f59e0b; border-radius:0 10px 10px 0;
      background:#2a1f07; color:#fde68a; font-size:13px; font-weight:700;
    }
    .teacher-attempt-reaction-replay {
      border:1px solid #334155; border-radius:14px; background:#1f2937; overflow:auto; padding:12px;
    }
    .teacher-attempt-reaction-replay .reaction-observation { margin:0 0 10px; }
    .teacher-attempt-reaction-replay .reaction-equation {
      min-width:900px; padding:18px 10px 12px; min-height:210px;
      grid-template-columns:minmax(150px,1.15fr) 32px minmax(150px,1.15fr) 140px minmax(150px,1.15fr) 32px minmax(150px,1.15fr);
    }
    .teacher-attempt-reaction-replay .reaction-slot { min-height:100px; }
    .teacher-attempt-reaction-replay .reaction-slot.condition-slot { min-height:74px; }
    .teacher-attempt-reaction-replay .reaction-slot.missing { background:#261a06; }
    .teacher-attempt-reaction-replay .reaction-slot.correct { background:#12361f; }
    .teacher-attempt-reaction-replay .reaction-slot-value { overflow-wrap:anywhere; word-break:normal; }
    .teacher-attempt-reaction-replay .reaction-slot.missing .reaction-slot-value,
    .teacher-attempt-reaction-replay .reaction-slot.correct .reaction-slot-value { margin-top:3px; }
    .teacher-attempt-slot-correct-label {
      margin-top:7px; color:#bbf7d0; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.05em;
    }
    .teacher-attempt-slot-feedback { margin-top:8px; padding-top:8px; border-top:1px dashed rgba(248,250,252,.22); }
    .teacher-attempt-slot-feedback span {
      display:block; margin-bottom:4px; color:#fca5a5; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.05em;
    }
    .teacher-attempt-slot-feedback ul { margin:0; padding-left:16px; color:#fecaca; font-size:12px; line-height:1.35; }
    .teacher-attempt-slot-feedback li { margin:2px 0; overflow-wrap:anywhere; }
    .teacher-attempt-analysis-case { display:grid; gap:11px; }
    .teacher-attempt-analysis-empirical { padding:12px; border:1px solid #475569; border-radius:12px; background:#0f172a; }
    .teacher-attempt-analysis-empirical h4, .teacher-attempt-analysis-molecule h4 { margin:0 0 8px; color:#f9fafb; font-size:14px; }
    .teacher-attempt-analysis-empirical .organic-analysis-clue-title { margin:0 0 9px; color:#dbeafe; font-weight:800; }
    .teacher-attempt-analysis-empirical .organic-analysis-clue-table { width:100%; border-collapse:collapse; margin-top:8px; background:#111827; color:#f9fafb; }
    .teacher-attempt-analysis-empirical .organic-analysis-clue-table th, .teacher-attempt-analysis-empirical .organic-analysis-clue-table td { border:1px solid #475569; padding:7px 8px; text-align:left; }
    .teacher-attempt-analysis-empirical .organic-analysis-clue-table th { background:#1f2937; color:#bfdbfe; }
    .teacher-attempt-analysis-empirical .organic-analysis-feedback { margin-top:9px; color:#fde68a; }
    .teacher-attempt-analysis-molecule { padding:12px; border:1px solid #475569; border-radius:12px; background:#111827; }
    .teacher-attempt-analysis-molecule-name { font-size:18px; font-weight:900; color:#f9fafb; overflow-wrap:anywhere; }
    .teacher-attempt-analysis-molecule-semi { margin-top:4px; color:#dbeafe; font-weight:800; }
    .teacher-attempt-structure-wrap.analysis svg { max-width:520px; }
    .teacher-attempt-analysis-steps { display:grid; gap:10px; }
    .teacher-attempt-analysis-step {
      border:1px solid #475569; border-radius:12px; background:#111827; overflow:hidden;
    }
    .teacher-attempt-analysis-step.complete { border-color:#86efac; background:#102718; }
    .teacher-attempt-analysis-step.hint { border-color:#f59e0b; background:#3f3210; }
    .teacher-attempt-analysis-step.incomplete { border-color:#fca5a5; background:#2a1111; }
    .teacher-attempt-analysis-step-header {
      display:flex; justify-content:space-between; gap:10px; align-items:flex-start;
      padding:10px 12px; border-bottom:1px solid #334155;
    }
    .teacher-attempt-analysis-step-title { display:flex; gap:9px; align-items:flex-start; }
    .teacher-attempt-analysis-step-number {
      display:inline-grid; place-items:center; width:24px; height:24px; border-radius:999px;
      background:#334155; color:#f9fafb; font-size:12px; font-weight:900; flex:0 0 auto;
    }
    .teacher-attempt-analysis-step.complete .teacher-attempt-analysis-step-number { background:#15803d; }
    .teacher-attempt-analysis-step.incomplete .teacher-attempt-analysis-step-number { background:#991b1b; }
    .teacher-attempt-analysis-step-title h4 { margin:0; color:#f9fafb; font-size:14px; }
    .teacher-attempt-analysis-step-title p { margin:2px 0 0; color:#9ca3af; font-size:12px; }
    .teacher-attempt-analysis-step-status { color:#fde68a; font-size:12px; font-weight:900; white-space:nowrap; }
    .teacher-attempt-analysis-step-body { padding:10px 12px; color:#d1d5db; font-size:13px; line-height:1.45; }
    .teacher-attempt-analysis-step-body ul { margin:6px 0 0; padding-left:18px; }
    .teacher-attempt-analysis-step-answer {
      margin:0 0 8px; padding:8px 9px; border:1px solid #334155; border-radius:10px; background:#0f172a;
    }
    .teacher-attempt-analysis-step-answer span {
      display:block; margin-bottom:3px; color:#9ca3af; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.05em;
    }
    .teacher-attempt-analysis-step-answer strong { display:block; color:#f9fafb; overflow-wrap:anywhere; white-space:pre-wrap; }
    .teacher-attempt-analysis-step-answer.correct { border-color:#15803d; background:#102718; }
    .teacher-attempt-analysis-step-answer.correct span { color:#86efac; }
    .teacher-attempt-analysis-step-answer.incorrect { border-color:#7f1d1d; background:#2a1111; }
    .teacher-attempt-analysis-step-answer.incorrect span { color:#fca5a5; }
    .teacher-attempt-analysis-step-answer.incorrect ul { color:#fecaca; }
    .teacher-attempt-analysis-test-list { display:flex; flex-wrap:wrap; gap:7px; }
    .teacher-attempt-analysis-test-list span { padding:4px 8px; border-radius:999px; background:#172554; color:#bfdbfe; font-size:11px; font-weight:800; }
    @media (max-width:680px) {
      .teacher-attempt-answer-grid { grid-template-columns:1fr; }
      .teacher-attempt-equation { font-size:14px; text-align:left; }
    }