/**
 * Worked Example Styles
 * Extracted from main.css — all .we-* classes + dark mode variants
 */

/* ══════════════════════════════════════════════════════════════════════
   WORKED EXAMPLE ENGINE
   ══════════════════════════════════════════════════════════════════════ */

.we-step-content { max-width: 700px; margin: 0 auto; }

/* Scenario text */
.we-scenario { margin-bottom: 20px; line-height: 1.7; }
.we-scenario p { margin-bottom: 10px; color: var(--on-surface, #191c1e); }

/* Persistent scenario bar (visible across all 4 steps) */
.we-scenario-bar { margin-bottom: 16px; padding: 14px 18px; border-radius: 10px; background: var(--surface-variant, #e1e2e8); border-left: 3px solid var(--secondary, #0058be); font-size: 0.88rem; line-height: 1.65; }
.we-scenario-bar p { margin-bottom: 8px; color: var(--on-surface, #191c1e); }
.we-scenario-bar p:last-child { margin-bottom: 0; }
.we-scenario-expanded { }

/* Compact scenario: shows first 3 lines, expandable */
.we-scenario-compact .we-scenario-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.we-scenario-compact .we-scenario-preview p { margin-bottom: 6px; }
.we-scenario-compact.we-scenario-full .we-scenario-preview { display: block; -webkit-line-clamp: unset; overflow: visible; }
.we-scenario-expand-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; font-size: 0.75rem; font-weight: 600; color: var(--secondary, #0058be); font-family: inherit; padding: 4px 0; margin-top: 4px; }
.we-scenario-expand-btn:hover { text-decoration: underline; }

/* Optional diagram */
.we-diagram { margin: 16px 0; text-align: center; }
.we-diagram-img { max-width: 100%; border-radius: 10px; border: 1px solid var(--outline-variant, #c4c7cc); }

/* Vector message bubble */
.we-vector-message {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 18px; border-radius: 12px; margin-bottom: 16px;
    background: var(--secondary-container, #d6e3ff); color: var(--on-secondary-container, #001b3e);
    font-size: 0.9rem; line-height: 1.5;
}
.we-vector-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; color: var(--secondary, #0058be); }
.we-vector-text { flex: 1; }

/* Vector feedback color variants */
.we-vector-correct { background: #dcfce7; color: #14532d; }
.we-vector-correct .we-vector-icon { color: #16a34a; }
.we-vector-related { background: #fef3c7; color: #78350f; }
.we-vector-related .we-vector-icon { color: #d97706; }
.we-vector-wrong { background: #fee2e2; color: #7f1d1d; }
.we-vector-wrong .we-vector-icon { color: #dc2626; }
.we-vector-hint { background: #ede9fe; color: #3b0764; }
.we-vector-hint .we-vector-icon { color: #7c3aed; }

/* Drop zone */
.we-drop-zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100px; padding: 24px; margin-bottom: 16px;
    border: 2px dashed var(--outline-variant, #c4c7cc); border-radius: 14px;
    background: var(--surface-variant, #e1e2e8); color: var(--on-surface-variant, #45474c);
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
    text-align: center; cursor: default;
}
.we-drop-icon { font-size: 32px; margin-bottom: 6px; opacity: 0.5; }
.we-drop-label { font-size: 0.85rem; font-weight: 500; }

/* Drop zone hover (drag over) — class added by formula-library.js */
.we-drop-zone-hover {
    border-color: var(--secondary, #0058be) !important;
    background: rgba(0, 88, 190, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(0, 88, 190, 0.15);
}

/* Drop zone states */
.we-drop-zone-correct {
    border-color: #16a34a; border-style: solid;
    background: #dcfce7; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}
.we-drop-zone-related {
    border-color: #d97706; border-style: solid;
    background: #fef3c7; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}
.we-drop-zone-wrong {
    border-color: #dc2626; border-style: solid;
    background: #fee2e2; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Dropped formula display inside zone */
.we-dropped-formula { text-align: center; }
.we-dropped-name { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.we-dropped-equation { display: block; font-size: 1.1rem; }

/* Open Formula Library button */
.we-formula-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 10px; border: none; cursor: pointer;
    background: var(--secondary, #0058be); color: #fff;
    font-size: 0.85rem; font-weight: 600; font-family: inherit;
    transition: background 0.2s, transform 0.15s; margin-bottom: 16px;
}
.we-formula-btn:hover { background: #004a9e; transform: translateY(-1px); }
.we-formula-btn:active { transform: translateY(0); }

/* Hint button */
.we-hint-btn {
    display: none; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; border: 1.5px solid #7c3aed; cursor: pointer;
    background: transparent; color: #7c3aed;
    font-size: 0.82rem; font-weight: 600; font-family: inherit;
    transition: background 0.2s; margin-bottom: 16px;
}
.we-hint-btn:hover { background: rgba(124, 58, 237, 0.08); }

/* Hint pulse animation */
.we-hint-pulse { animation: weHintPulse 1.5s ease-in-out 3; }
@keyframes weHintPulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.18); }
}

/* Feedback container */
.we-feedback { margin-bottom: 16px; }

/* Trap alert — shown below field when triggerTrap is true */
.we-trap-alert {
    display: flex; align-items: flex-start; gap: 8px; width: 100%;
    margin-top: 8px; padding: 10px 14px; border-radius: 8px;
    background: #fef3c7; color: #78350f; border-left: 3px solid #d97706;
    font-size: 0.82rem; line-height: 1.5;
    animation: weTrapPulse 0.6s ease-out;
}
.we-trap-alert-icon { color: #d97706; font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.we-trap-alert-text { flex: 1; }
@keyframes weTrapPulse {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Confirmed formula (Step 2+) */
.we-confirmed-formula {
    background: var(--secondary-container, #d6e3ff); border-radius: 12px;
    padding: 14px 18px; margin-bottom: 16px; text-align: center;
}
.we-confirmed-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--secondary, #0058be); margin-bottom: 6px; }
.we-confirmed-equation { font-size: 1.15rem; }

/* Given values list */
.we-given-values { margin-bottom: 16px; padding: 12px 16px; background: var(--surface-variant, #e1e2e8); border-radius: 10px; }
.we-given-heading { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--on-surface-variant, #45474c); margin-bottom: 8px; }
.we-given-row { display: flex; align-items: baseline; gap: 6px; padding: 4px 0; font-family: 'JetBrains Mono', monospace; font-size: 0.88rem; }
.we-given-symbol { font-weight: 600; min-width: 40px; }
.we-given-equals { color: var(--on-surface-variant, #45474c); }
.we-given-value { font-weight: 500; }
.we-given-unit { font-size: 0.78rem; color: var(--on-surface-variant, #45474c); }
.we-given-label { font-size: 0.75rem; color: var(--on-surface-variant, #45474c); font-family: var(--font-body, 'Inter', sans-serif); }

/* Variable input fields */
.we-fields { margin-bottom: 16px; }
.we-field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 8px; border-radius: 10px; border: 1.5px solid var(--outline-variant, #c4c7cc); background: var(--surface, #fafafa); transition: border-color 0.25s, background 0.25s; }
.we-field-label { font-weight: 600; font-size: 0.85rem; min-width: 100px; color: var(--on-surface, #191c1e); }
.we-field-input-wrap { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 120px; }
.we-field-input {
    width: 100%; max-width: 140px; padding: 8px 12px; border: 1.5px solid var(--outline-variant, #c4c7cc);
    border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem;
    background: #fff; color: var(--on-surface, #191c1e); transition: border-color 0.2s;
}
.we-field-input:focus { outline: none; border-color: var(--secondary, #0058be); box-shadow: 0 0 0 2px rgba(0, 88, 190, 0.12); }
.we-field-unit { font-size: 0.78rem; color: var(--on-surface-variant, #45474c); font-weight: 500; white-space: nowrap; }
.we-field-feedback { width: 100%; font-size: 0.8rem; min-height: 20px; }
.we-field-ok { color: #16a34a; }
.we-field-err { color: #dc2626; }
.we-field-hint { color: #7c3aed; font-size: 0.8125rem; line-height: 1.4; margin-top: 4px; }

/* Concept-type: selection/radio/checkbox fields */
.we-field-options { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.we-field-option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: background 0.15s; }
.we-field-option:hover { background: rgba(0, 88, 190, 0.04); }
.we-field-option input { accent-color: var(--secondary, #0058be); }
.we-answer-options { display: flex; flex-direction: column; gap: 6px; }

/* Skip button (Free Study mode) */
.we-skip-row { text-align: right; margin-bottom: 12px; }
.we-skip-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px; border: 1.5px solid var(--outline-variant, #c4c7cc);
    background: transparent; color: var(--on-surface-variant, #45474c);
    font-size: 0.8rem; font-weight: 500; font-family: inherit; cursor: pointer;
    transition: background 0.2s;
}
.we-skip-btn:hover { background: var(--surface-variant, #e1e2e8); }

/* Field states */
.we-field-correct { border-color: #16a34a; background: rgba(22, 163, 74, 0.05); }
.we-field-correct .we-field-input { border-color: #16a34a; background: #f0fdf4; }
.we-field-wrong { border-color: #dc2626; background: rgba(220, 38, 38, 0.04); }
.we-field-wrong .we-field-input { border-color: #dc2626; }

/* Check button */
.we-check-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; border-radius: 10px; border: none; cursor: pointer;
    background: var(--secondary, #0058be); color: #fff;
    font-size: 0.85rem; font-weight: 600; font-family: inherit;
    transition: background 0.2s, transform 0.15s, opacity 0.3s; margin-bottom: 16px;
}
.we-check-btn:hover { background: #004a9e; transform: translateY(-1px); }
.we-check-btn:active { transform: translateY(0); }

/* Variable summary chips (Step 3) */
.we-var-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.we-var-chip { display: inline-block; padding: 4px 12px; border-radius: 20px; background: var(--surface-variant, #e1e2e8); font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--on-surface, #191c1e); }

/* Scratchpad */
.we-scratchpad { margin-bottom: 16px; padding: 12px 16px; border-radius: 10px; border: 1px dashed var(--outline-variant, #c4c7cc); background: var(--surface, #fafafa); }
.we-scratchpad-heading { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--on-surface-variant, #45474c); margin-bottom: 8px; }
.we-scratchpad-note { font-weight: 400; text-transform: none; letter-spacing: 0; }
.we-scratch-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.we-scratch-label { font-size: 0.82rem; font-weight: 500; min-width: 100px; color: var(--on-surface, #191c1e); }
.we-scratch-input { flex: 1; padding: 6px 10px; border: 1px solid var(--outline-variant, #c4c7cc); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; background: #fff; color: var(--on-surface, #191c1e); }
.we-scratch-input:focus { outline: none; border-color: var(--outline, #74777d); }

/* Final answer row */
.we-answer-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 16px; border-radius: 10px; background: var(--secondary-container, #d6e3ff); }
.we-answer-label { font-weight: 700; font-size: 0.9rem; min-width: 110px; color: var(--on-secondary-container, #001b3e); }
.we-answer-input { max-width: 160px; font-weight: 600; }

/* Walkthrough panel */
.we-walkthrough { margin-bottom: 16px; padding: 16px; border-radius: 12px; background: var(--surface-variant, #e1e2e8); border-left: 4px solid var(--secondary, #0058be); }
.we-walkthrough-heading { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.88rem; color: var(--secondary, #0058be); margin-bottom: 12px; }
.we-walkthrough-step { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.we-walkthrough-num { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--secondary, #0058be); color: #fff; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.we-walkthrough-text { font-size: 0.88rem; line-height: 1.5; color: var(--on-surface, #191c1e); }

/* Your answer display (Step 4) */
.we-your-answer { padding: 12px 18px; border-radius: 10px; background: var(--secondary-container, #d6e3ff); margin-bottom: 16px; font-size: 0.95rem; }
.we-your-answer-label { font-weight: 600; color: var(--on-secondary-container, #001b3e); }
.we-your-answer-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; }

/* Verification options (radio-style buttons) */
.we-verify-options { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.we-verify-option {
    flex: 1; min-width: 100px; padding: 12px 20px; border-radius: 10px;
    border: 2px solid var(--outline-variant, #c4c7cc); background: var(--surface, #fafafa);
    color: var(--on-surface, #191c1e); font-size: 0.9rem; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: border-color 0.2s, background 0.2s;
    text-align: center;
}
.we-verify-option:hover { border-color: var(--secondary, #0058be); background: rgba(0, 88, 190, 0.04); }
.we-verify-selected { border-color: var(--secondary, #0058be); background: rgba(0, 88, 190, 0.08); color: var(--secondary, #0058be); }
.we-verify-correct { border-color: #16a34a !important; background: #dcfce7 !important; color: #14532d !important; }
.we-verify-wrong { border-color: #dc2626 !important; background: #fee2e2 !important; color: #7f1d1d !important; }

/* Full solution panel */
.we-full-solution { margin-top: 20px; padding: 20px; border-radius: 14px; background: var(--surface-variant, #e1e2e8); border: 1px solid var(--outline-variant, #c4c7cc); }
.we-solution-heading { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; color: var(--secondary, #0058be); margin-bottom: 16px; }
.we-solution-ref { font-size: 0.85rem; color: var(--on-surface-variant, #45474c); margin-bottom: 12px; padding: 8px 12px; background: var(--surface, #fafafa); border-radius: 8px; }
.we-solution-steps { margin-bottom: 16px; }
.we-solution-step { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }

/* Exam trap callout */
.we-exam-trap {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 18px; border-radius: 10px; margin-bottom: 16px;
    background: #fef3c7; color: #78350f; border-left: 4px solid #d97706;
    font-size: 0.88rem; line-height: 1.5;
}
.we-exam-trap .material-symbols-outlined { color: #d97706; flex-shrink: 0; }

/* Performance summary */
.we-performance {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 10px; margin-bottom: 16px;
    background: rgba(0, 88, 190, 0.06); color: var(--secondary, #0058be);
    font-weight: 600; font-size: 0.88rem;
}

/* Complete button */
.we-complete-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; border-radius: 10px; border: none; cursor: pointer;
    background: #16a34a; color: #fff;
    font-size: 0.9rem; font-weight: 700; font-family: inherit;
    transition: background 0.2s, transform 0.15s;
}
.we-complete-btn:hover { background: #15803d; transform: translateY(-1px); }
.we-complete-btn:active { transform: translateY(0); }

/* Step indicator bar (master renderer) */
.we-indicator { display: flex; align-items: center; justify-content: center; gap: 0; padding: 16px 8px; margin-bottom: 20px; flex-wrap: nowrap; overflow-x: auto; }
.we-indicator-step { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.we-indicator-num {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; font-size: 0.78rem; font-weight: 700;
    flex-shrink: 0; transition: background 0.3s, color 0.3s;
}
.we-indicator-label { font-size: 0.75rem; font-weight: 500; }
.we-indicator-line { width: 24px; height: 2px; flex-shrink: 0; margin: 0 4px; transition: background 0.3s; }

/* Indicator states */
.we-indicator-done .we-indicator-num { background: #16a34a; color: #fff; }
.we-indicator-done .we-indicator-label { color: #16a34a; }
.we-indicator-active .we-indicator-num { background: var(--secondary, #0058be); color: #fff; }
.we-indicator-active .we-indicator-label { color: var(--secondary, #0058be); font-weight: 700; }
.we-indicator-upcoming .we-indicator-num { background: var(--surface-variant, #e1e2e8); color: var(--on-surface-variant, #45474c); }
.we-indicator-upcoming .we-indicator-label { color: var(--on-surface-variant, #45474c); }
.we-indicator-line-done { background: #16a34a; }
.we-indicator-line-upcoming { background: var(--outline-variant, #c4c7cc); }

/* Back button */
.we-back-row { margin-bottom: 12px; }
.we-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px; border: 1.5px solid var(--outline-variant, #c4c7cc);
    background: transparent; color: var(--on-surface-variant, #45474c);
    font-size: 0.8rem; font-weight: 500; font-family: inherit; cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.we-back-btn:hover { background: var(--surface-variant, #e1e2e8); border-color: var(--outline, #74777d); }
.we-back-btn .material-symbols-outlined { font-size: 18px; }

/* ── Dark mode ── */
[data-theme="dark"] .we-scenario p { color: #e2e8f0; }

[data-theme="dark"] .we-scenario-bar { background: #1e293b; border-left-color: #60a5fa; }
[data-theme="dark"] .we-scenario-bar p { color: #e2e8f0; }
[data-theme="dark"] .we-scenario-expand-btn { color: #60a5fa; }
[data-theme="dark"] .we-diagram-img { border-color: #334155; }

[data-theme="dark"] .we-vector-message { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .we-vector-icon { color: #60a5fa; }

[data-theme="dark"] .we-vector-correct { background: #14532d; color: #dcfce7; }
[data-theme="dark"] .we-vector-correct .we-vector-icon { color: #4ade80; }
[data-theme="dark"] .we-vector-related { background: #78350f; color: #fef3c7; }
[data-theme="dark"] .we-vector-related .we-vector-icon { color: #fbbf24; }
[data-theme="dark"] .we-vector-wrong { background: #7f1d1d; color: #fee2e2; }
[data-theme="dark"] .we-vector-wrong .we-vector-icon { color: #f87171; }
[data-theme="dark"] .we-vector-hint { background: #3b0764; color: #ede9fe; }
[data-theme="dark"] .we-vector-hint .we-vector-icon { color: #a78bfa; }

[data-theme="dark"] .we-drop-zone {
    border-color: #475569; background: #1e293b; color: #94a3b8;
}
[data-theme="dark"] .we-drop-zone-hover {
    border-color: #60a5fa !important; background: rgba(96, 165, 250, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}
[data-theme="dark"] .we-drop-zone-correct {
    border-color: #4ade80; background: rgba(22, 163, 74, 0.15);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
}
[data-theme="dark"] .we-drop-zone-related {
    border-color: #fbbf24; background: rgba(217, 119, 6, 0.15);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}
[data-theme="dark"] .we-drop-zone-wrong {
    border-color: #f87171; background: rgba(220, 38, 38, 0.15);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}

[data-theme="dark"] .we-dropped-name { color: #e2e8f0; }
[data-theme="dark"] .we-dropped-equation { color: #cbd5e1; }

[data-theme="dark"] .we-formula-btn { background: #2563eb; }
[data-theme="dark"] .we-formula-btn:hover { background: #1d4ed8; }

[data-theme="dark"] .we-hint-btn { border-color: #a78bfa; color: #a78bfa; }
[data-theme="dark"] .we-hint-btn:hover { background: rgba(167, 139, 250, 0.1); }

[data-theme="dark"] .we-confirmed-formula { background: #1e293b; }
[data-theme="dark"] .we-confirmed-label { color: #60a5fa; }
[data-theme="dark"] .we-confirmed-equation { color: #e2e8f0; }

[data-theme="dark"] .we-given-values { background: #1e293b; }
[data-theme="dark"] .we-given-heading { color: #94a3b8; }
[data-theme="dark"] .we-given-row { color: #e2e8f0; }
[data-theme="dark"] .we-given-unit, [data-theme="dark"] .we-given-label, [data-theme="dark"] .we-given-equals { color: #94a3b8; }

[data-theme="dark"] .we-field-row { border-color: #475569; background: #0f172a; }
[data-theme="dark"] .we-field-label { color: #e2e8f0; }
[data-theme="dark"] .we-field-input { background: #1e293b; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .we-field-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15); }
[data-theme="dark"] .we-field-unit { color: #94a3b8; }
[data-theme="dark"] .we-field-correct { border-color: #4ade80; background: rgba(22, 163, 74, 0.1); }
[data-theme="dark"] .we-field-correct .we-field-input { border-color: #4ade80; background: rgba(22, 163, 74, 0.1); }
[data-theme="dark"] .we-field-wrong { border-color: #f87171; background: rgba(220, 38, 38, 0.08); }
[data-theme="dark"] .we-field-wrong .we-field-input { border-color: #f87171; }
[data-theme="dark"] .we-field-ok { color: #4ade80; }
[data-theme="dark"] .we-field-err { color: #f87171; }
[data-theme="dark"] .we-field-hint { color: #a78bfa; }

[data-theme="dark"] .we-check-btn { background: #2563eb; }
[data-theme="dark"] .we-check-btn:hover { background: #1d4ed8; }

[data-theme="dark"] .we-var-chip { background: #334155; color: #e2e8f0; }

[data-theme="dark"] .we-scratchpad { border-color: #475569; background: #0f172a; }
[data-theme="dark"] .we-scratchpad-heading { color: #94a3b8; }
[data-theme="dark"] .we-scratch-label { color: #e2e8f0; }
[data-theme="dark"] .we-scratch-input { background: #1e293b; border-color: #475569; color: #e2e8f0; }

[data-theme="dark"] .we-answer-row { background: #1e293b; }
[data-theme="dark"] .we-answer-label { color: #e2e8f0; }

[data-theme="dark"] .we-walkthrough { background: #1e293b; border-left-color: #60a5fa; }
[data-theme="dark"] .we-walkthrough-heading { color: #60a5fa; }
[data-theme="dark"] .we-walkthrough-num { background: #2563eb; }
[data-theme="dark"] .we-walkthrough-text { color: #e2e8f0; }

[data-theme="dark"] .we-your-answer { background: #1e293b; }
[data-theme="dark"] .we-your-answer-label { color: #e2e8f0; }
[data-theme="dark"] .we-your-answer-value { color: #60a5fa; }

[data-theme="dark"] .we-verify-option { border-color: #475569; background: #0f172a; color: #e2e8f0; }
[data-theme="dark"] .we-verify-option:hover { border-color: #60a5fa; background: rgba(96, 165, 250, 0.08); }
[data-theme="dark"] .we-verify-selected { border-color: #60a5fa; background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
[data-theme="dark"] .we-verify-correct { border-color: #4ade80 !important; background: rgba(22, 163, 74, 0.15) !important; color: #4ade80 !important; }
[data-theme="dark"] .we-verify-wrong { border-color: #f87171 !important; background: rgba(220, 38, 38, 0.12) !important; color: #f87171 !important; }

[data-theme="dark"] .we-full-solution { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .we-solution-heading { color: #60a5fa; }
[data-theme="dark"] .we-solution-ref { color: #94a3b8; background: #0f172a; }

[data-theme="dark"] .we-exam-trap { background: #78350f; color: #fef3c7; border-left-color: #fbbf24; }
[data-theme="dark"] .we-exam-trap .material-symbols-outlined { color: #fbbf24; }

[data-theme="dark"] .we-trap-alert { background: #78350f; color: #fef3c7; border-left-color: #fbbf24; }
[data-theme="dark"] .we-trap-alert-icon { color: #fbbf24; }

[data-theme="dark"] .we-performance { background: rgba(96, 165, 250, 0.1); color: #60a5fa; }

[data-theme="dark"] .we-complete-btn { background: #16a34a; }
[data-theme="dark"] .we-complete-btn:hover { background: #15803d; }

[data-theme="dark"] .we-indicator-done .we-indicator-label { color: #4ade80; }
[data-theme="dark"] .we-indicator-active .we-indicator-num { background: #2563eb; }
[data-theme="dark"] .we-indicator-active .we-indicator-label { color: #60a5fa; }
[data-theme="dark"] .we-indicator-upcoming .we-indicator-num { background: #334155; color: #94a3b8; }
[data-theme="dark"] .we-indicator-upcoming .we-indicator-label { color: #64748b; }
[data-theme="dark"] .we-indicator-line-done { background: #4ade80; }
[data-theme="dark"] .we-indicator-line-upcoming { background: #475569; }

[data-theme="dark"] .we-skip-btn { border-color: #475569; color: #94a3b8; }
[data-theme="dark"] .we-skip-btn:hover { background: #334155; }

[data-theme="dark"] .we-back-btn { border-color: #475569; color: #94a3b8; }
[data-theme="dark"] .we-back-btn:hover { background: #334155; border-color: #64748b; }

/* ── Step 1: Diagnose — Diagnostic Questions ── */
.we-diagnose-questions { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.we-diagnose-q { background: var(--glass-bg, rgba(255,255,255,0.7)); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; padding: 16px; }
.we-diagnose-prompt { font-weight: 600; margin: 0 0 12px 0; line-height: 1.5; }
.we-diagnose-options { display: flex; flex-direction: column; gap: 8px; }
.we-diagnose-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1.5px solid var(--border-color, #e2e8f0); border-radius: 8px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.we-diagnose-option:hover { border-color: var(--color-primary, #3b82f6); background: rgba(59,130,246,0.04); }
.we-diagnose-option--selected { border-color: var(--color-primary, #3b82f6); background: rgba(59,130,246,0.08); }
.we-diagnose-option--correct { border-color: var(--color-success, #16a34a) !important; background: rgba(22,163,74,0.08) !important; }
.we-diagnose-option--wrong { border-color: var(--color-error, #dc2626) !important; background: rgba(220,38,38,0.06) !important; }
.we-diagnose-option input[type="radio"] { margin-top: 3px; flex-shrink: 0; }
.we-diagnose-option-text { line-height: 1.5; }
.we-diagnose-feedback { margin-top: 8px; padding: 8px 12px; border-radius: 6px; font-size: 0.9rem; line-height: 1.4; }
.we-diagnose-feedback--correct { background: rgba(22,163,74,0.08); color: var(--color-success, #16a34a); }
.we-diagnose-feedback--wrong { background: rgba(220,38,38,0.06); color: var(--color-error, #dc2626); }
.we-diagnose-check-btn { margin-top: 8px; }

/* Vector Bridge — physical meaning after diagnostics */
.we-vector-bridge { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; margin: 16px 0; background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.06)); border: 1px solid rgba(59,130,246,0.15); border-radius: 12px; border-left: 4px solid var(--color-primary, #3b82f6); }
.we-vector-bridge .we-vector-icon { color: var(--color-primary, #3b82f6); font-size: 22px; margin-top: 1px; }
.we-vector-bridge-text { line-height: 1.6; font-size: 0.95rem; }

/* ── Dark Mode: Diagnose ── */
[data-theme="dark"] .we-diagnose-q { background: rgba(30,41,59,0.7); border-color: rgba(148,163,184,0.2); }
[data-theme="dark"] .we-diagnose-option { border-color: rgba(148,163,184,0.2); color: #e2e8f0; }
[data-theme="dark"] .we-diagnose-option:hover { border-color: rgba(96,165,250,0.5); background: rgba(59,130,246,0.1); }
[data-theme="dark"] .we-diagnose-option--selected { border-color: rgba(96,165,250,0.6); background: rgba(59,130,246,0.15); }
[data-theme="dark"] .we-diagnose-option--correct { border-color: rgba(74,222,128,0.5) !important; background: rgba(22,163,74,0.15) !important; }
[data-theme="dark"] .we-diagnose-option--wrong { border-color: rgba(248,113,113,0.5) !important; background: rgba(220,38,38,0.12) !important; }
[data-theme="dark"] .we-diagnose-feedback--correct { background: rgba(22,163,74,0.12); color: #4ade80; }
[data-theme="dark"] .we-diagnose-feedback--wrong { background: rgba(220,38,38,0.12); color: #f87171; }
[data-theme="dark"] .we-vector-bridge { background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(139,92,246,0.1)); border-color: rgba(96,165,250,0.2); }

/* ── Step 2: Locate — Drag-Mapping ── */
.we-mapping-container { display: flex; gap: 20px; margin-bottom: 20px; }
.we-mapping-quotes, .we-mapping-slots { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.we-mapping-col-label { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary, #64748b); margin-bottom: 4px; }
.we-quote-card { padding: 12px 16px; background: var(--glass-bg, rgba(255,255,255,0.85)); border: 1.5px solid var(--border-color, #e2e8f0); border-radius: 10px; cursor: grab; transition: border-color 0.2s, box-shadow 0.2s, opacity 0.3s; line-height: 1.5; font-size: 0.93rem; }
.we-quote-card:hover { border-color: var(--color-primary, #3b82f6); box-shadow: 0 2px 8px rgba(59,130,246,0.12); }
.we-quote-card--dragging { opacity: 0.4; border-style: dashed; }
.we-quote-card--selected { border-color: var(--color-primary, #3b82f6); background: rgba(59,130,246,0.1); box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
.we-quote-card--matched { border-color: var(--color-success, #16a34a); background: rgba(22,163,74,0.06); cursor: default; }
.we-quote-card--wrong { border-color: var(--color-error, #dc2626); background: rgba(220,38,38,0.06); }
.we-slot { padding: 14px 16px; border: 2px dashed var(--border-color, #cbd5e1); border-radius: 10px; min-height: 56px; display: flex; flex-direction: column; gap: 4px; transition: border-color 0.2s, background 0.2s; }
.we-slot--empty { background: rgba(241,245,249,0.5); }
.we-slot--hover { border-color: var(--color-primary, #3b82f6); background: rgba(59,130,246,0.06); border-style: solid; }
.we-slot--filled { border-style: solid; border-color: var(--border-color, #94a3b8); background: var(--glass-bg, rgba(255,255,255,0.85)); }
.we-slot--correct { border-color: var(--color-success, #16a34a) !important; background: rgba(22,163,74,0.06) !important; }
.we-slot--wrong { border-color: var(--color-error, #dc2626) !important; background: rgba(220,38,38,0.04) !important; }
.we-slot-label { font-weight: 600; font-size: 0.9rem; }
.we-slot-placeholder { color: var(--text-tertiary, #94a3b8); font-size: 0.85rem; font-style: italic; }
.we-slot-quote-text { font-size: 0.9rem; color: var(--text-primary, #1e293b); line-height: 1.4; }
.we-slot-feedback { margin-top: 6px; font-size: 0.85rem; color: var(--color-error, #dc2626); }

/* Mapping summary (collapsed pills after validation) */
.we-mapping-summary { margin-bottom: 16px; padding: 12px 16px; background: rgba(22,163,74,0.04); border: 1px solid rgba(22,163,74,0.15); border-radius: 10px; }
.we-mapping-summary-label { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-success, #16a34a); margin-bottom: 8px; }
.we-mapping-pill { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.9rem; }
.we-mapping-pill-var { font-weight: 600; min-width: 120px; }
.we-mapping-pill-arrow { color: var(--text-tertiary, #94a3b8); }
.we-mapping-pill-quote { color: var(--text-secondary, #475569); font-style: italic; }

/* Slot undo button */
.we-slot-undo { position: absolute; top: 6px; right: 8px; background: none; border: none; font-size: 18px; color: var(--text-tertiary, #94a3b8); cursor: pointer; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.we-slot-undo:hover { color: var(--color-error, #dc2626); background: rgba(220,38,38,0.08); }
.we-slot { position: relative; }

/* Not Needed noise zone */
.we-noise-zone { margin-top: 12px; padding: 14px 16px; border: 2px dashed var(--border-color, #cbd5e1); border-radius: 10px; background: rgba(241,245,249,0.3); min-height: 56px; transition: border-color 0.2s, background 0.2s; }
.we-noise-zone.we-slot--hover { border-color: var(--color-warning, #f59e0b); background: rgba(245,158,11,0.06); border-style: solid; }
.we-noise-zone--correct { border-color: var(--color-success, #16a34a) !important; background: rgba(22,163,74,0.04) !important; border-style: solid !important; }
.we-noise-zone--wrong { border-color: var(--color-error, #dc2626) !important; background: rgba(220,38,38,0.04) !important; border-style: solid !important; }
.we-noise-zone-label { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary, #64748b); }
.we-noise-zone-hint { font-size: 0.82rem; color: var(--text-tertiary, #94a3b8); font-style: italic; margin-top: 2px; }
.we-noise-zone-items { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.we-noise-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--glass-bg, rgba(255,255,255,0.7)); border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; font-size: 0.9rem; position: relative; }
.we-noise-item-text { flex: 1; line-height: 1.4; }
.we-noise-zone-feedback { margin-top: 8px; font-size: 0.85rem; color: var(--color-error, #dc2626); }

/* ── Dark Mode: Mapping ── */
[data-theme="dark"] .we-quote-card { background: rgba(30,41,59,0.8); border-color: rgba(148,163,184,0.2); color: #e2e8f0; }
[data-theme="dark"] .we-quote-card:hover { border-color: rgba(96,165,250,0.5); box-shadow: 0 2px 8px rgba(59,130,246,0.2); }
[data-theme="dark"] .we-quote-card--matched { border-color: rgba(74,222,128,0.5); background: rgba(22,163,74,0.12); }
[data-theme="dark"] .we-quote-card--wrong { border-color: rgba(248,113,113,0.5); background: rgba(220,38,38,0.1); }
[data-theme="dark"] .we-quote-card--selected { border-color: rgba(96,165,250,0.7); background: rgba(59,130,246,0.15); box-shadow: 0 0 0 3px rgba(59,130,246,0.25); }
[data-theme="dark"] .we-slot { border-color: rgba(148,163,184,0.25); }
[data-theme="dark"] .we-slot--empty { background: rgba(30,41,59,0.4); }
[data-theme="dark"] .we-slot--hover { border-color: rgba(96,165,250,0.5); background: rgba(59,130,246,0.1); }
[data-theme="dark"] .we-slot--filled { background: rgba(30,41,59,0.7); border-color: rgba(148,163,184,0.3); }
[data-theme="dark"] .we-slot--correct { border-color: rgba(74,222,128,0.5) !important; background: rgba(22,163,74,0.12) !important; }
[data-theme="dark"] .we-slot--wrong { border-color: rgba(248,113,113,0.5) !important; background: rgba(220,38,38,0.1) !important; }
[data-theme="dark"] .we-slot-label { color: #e2e8f0; }
[data-theme="dark"] .we-slot-placeholder { color: rgba(148,163,184,0.6); }
[data-theme="dark"] .we-slot-quote-text { color: #cbd5e1; }
[data-theme="dark"] .we-slot-feedback { color: #f87171; }
[data-theme="dark"] .we-mapping-summary { background: rgba(22,163,74,0.08); border-color: rgba(74,222,128,0.2); }
[data-theme="dark"] .we-mapping-summary-label { color: #4ade80; }
[data-theme="dark"] .we-mapping-pill-var { color: #e2e8f0; }
[data-theme="dark"] .we-mapping-pill-quote { color: #94a3b8; }
[data-theme="dark"] .we-slot-undo { color: rgba(148,163,184,0.6); }
[data-theme="dark"] .we-slot-undo:hover { color: #f87171; background: rgba(220,38,38,0.15); }
[data-theme="dark"] .we-noise-zone { border-color: rgba(148,163,184,0.2); background: rgba(30,41,59,0.3); }
[data-theme="dark"] .we-noise-zone.we-slot--hover { border-color: rgba(251,191,36,0.4); background: rgba(245,158,11,0.1); }
[data-theme="dark"] .we-noise-zone--correct { border-color: rgba(74,222,128,0.4) !important; background: rgba(22,163,74,0.08) !important; }
[data-theme="dark"] .we-noise-zone--wrong { border-color: rgba(248,113,113,0.4) !important; background: rgba(220,38,38,0.08) !important; }
[data-theme="dark"] .we-noise-zone-label { color: rgba(148,163,184,0.8); }
[data-theme="dark"] .we-noise-item { background: rgba(30,41,59,0.6); border-color: rgba(148,163,184,0.2); color: #e2e8f0; }
[data-theme="dark"] .we-noise-zone-feedback { color: #f87171; }

/* ── Sub-scratchpad (computed values) ── */
.we-sub-scratchpad { background: var(--glass-bg, rgba(241,245,249,0.6)); border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: 14px 16px; margin-top: 4px; }
.we-sub-scratchpad-prompt { font-size: 0.88rem; color: var(--text-secondary, #475569); margin-bottom: 10px; font-style: italic; }
.we-sub-step { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.we-sub-step-label { font-size: 0.9rem; min-width: 100px; font-weight: 500; }
.we-sub-result { border-top: 1px solid var(--border-color, #e2e8f0); padding-top: 10px; margin-top: 4px; }
.we-sub-result .we-sub-step-label { font-weight: 700; }
.we-sub-step-input { max-width: 120px; }
[data-theme="dark"] .we-sub-scratchpad { background: rgba(30,41,59,0.5); border-color: rgba(148,163,184,0.2); }
[data-theme="dark"] .we-sub-scratchpad-prompt { color: #94a3b8; }
[data-theme="dark"] .we-sub-step-label { color: #e2e8f0; }
[data-theme="dark"] .we-sub-result { border-color: rgba(148,163,184,0.2); }

/* ── Step 3: Solve — Anchor + Confirmed Pills + Walkthrough Thinking ── */
.we-anchor { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; margin-bottom: 16px; background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(234,88,12,0.06)); border: 1px solid rgba(245,158,11,0.15); border-radius: 12px; border-left: 4px solid var(--color-warning, #f59e0b); }
.we-anchor-icon { color: var(--color-warning, #f59e0b); font-size: 22px; margin-top: 1px; }
.we-anchor-text { line-height: 1.6; font-size: 0.95rem; }
.we-confirmed-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.we-confirmed-pill { display: inline-block; padding: 6px 14px; background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.2); border-radius: 20px; font-size: 0.88rem; font-weight: 500; color: var(--color-success, #16a34a); }
.we-walkthrough-thinking { padding: 8px 12px; margin-bottom: 6px; background: rgba(59,130,246,0.06); border-left: 3px solid var(--color-primary, #3b82f6); border-radius: 0 8px 8px 0; font-size: 0.88rem; color: var(--text-secondary, #475569); line-height: 1.5; font-style: italic; }
.we-walkthrough-content { flex: 1; }

[data-theme="dark"] .we-anchor { background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(234,88,12,0.1)); border-color: rgba(251,191,36,0.2); }
[data-theme="dark"] .we-anchor-icon { color: #fbbf24; }
[data-theme="dark"] .we-anchor-text { color: #e2e8f0; }
[data-theme="dark"] .we-confirmed-pill { background: rgba(22,163,74,0.12); border-color: rgba(74,222,128,0.25); color: #4ade80; }
[data-theme="dark"] .we-walkthrough-thinking { background: rgba(59,130,246,0.1); border-color: rgba(96,165,250,0.4); color: #94a3b8; }

/* ── Step 3: Solve — Multi-Stage ── */
.we-stages { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.we-stage { padding: 16px; border: 1.5px solid var(--border-color, #e2e8f0); border-radius: 12px; transition: opacity 0.3s, border-color 0.3s; }
.we-stage--locked { opacity: 0.45; pointer-events: none; }
.we-stage--active { border-color: var(--color-primary, #3b82f6); background: rgba(59,130,246,0.03); }
.we-stage--complete { border-color: var(--color-success, #16a34a); background: rgba(22,163,74,0.03); opacity: 0.85; }
.we-stage-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.we-stage-num { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary, #3b82f6); }
.we-stage-label { font-weight: 600; font-size: 0.95rem; }
.we-stage-vectornote { font-size: 0.88rem; color: var(--text-secondary, #475569); margin-bottom: 8px; font-style: italic; padding-left: 4px; }
.we-stage-formula { font-size: 1rem; margin-bottom: 10px; padding: 8px 12px; background: rgba(241,245,249,0.6); border-radius: 8px; text-align: center; }
.we-stage-input-row { display: flex; align-items: center; gap: 10px; }
.we-stage-check { padding: 6px 16px; font-size: 0.88rem; }
.we-stage-feedback { margin-top: 6px; font-size: 0.88rem; }

[data-theme="dark"] .we-stage { border-color: rgba(148,163,184,0.2); }
[data-theme="dark"] .we-stage--active { border-color: rgba(96,165,250,0.5); background: rgba(59,130,246,0.06); }
[data-theme="dark"] .we-stage--complete { border-color: rgba(74,222,128,0.4); background: rgba(22,163,74,0.06); }
[data-theme="dark"] .we-stage-num { color: #60a5fa; }
[data-theme="dark"] .we-stage-label { color: #e2e8f0; }
[data-theme="dark"] .we-stage-vectornote { color: #94a3b8; }
[data-theme="dark"] .we-stage-formula { background: rgba(30,41,59,0.5); color: #e2e8f0; }

/* ── Step 4: Reflect — Questions ── */
.we-reflect-progress { font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary, #94a3b8); margin-bottom: 12px; }
.we-reflect-questions { display: flex; flex-direction: column; gap: 16px; }
.we-reflect-q { background: var(--glass-bg, rgba(255,255,255,0.7)); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; padding: 16px; }
.we-reflect-prompt { font-weight: 600; margin: 0 0 12px 0; line-height: 1.5; }
.we-reflect-options { display: flex; flex-direction: column; gap: 8px; }
.we-reflect-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1.5px solid var(--border-color, #e2e8f0); border-radius: 8px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.we-reflect-option:hover { border-color: var(--color-primary, #3b82f6); background: rgba(59,130,246,0.04); }
.we-reflect-option--selected { border-color: var(--color-primary, #3b82f6); background: rgba(59,130,246,0.08); }
.we-reflect-option--correct { border-color: var(--color-success, #16a34a) !important; background: rgba(22,163,74,0.08) !important; }
.we-reflect-option--wrong { border-color: var(--color-error, #dc2626) !important; background: rgba(220,38,38,0.06) !important; }
.we-reflect-option input[type="radio"] { margin-top: 3px; flex-shrink: 0; }
.we-reflect-option-text { line-height: 1.5; }
.we-reflect-feedback { margin-top: 8px; padding: 8px 12px; border-radius: 6px; font-size: 0.9rem; line-height: 1.4; }
.we-reflect-feedback--correct { background: rgba(22,163,74,0.08); color: var(--color-success, #16a34a); }
.we-reflect-feedback--wrong { background: rgba(220,38,38,0.06); color: var(--color-error, #dc2626); }
.we-reflect-check { margin-top: 10px; }

[data-theme="dark"] .we-reflect-q { background: rgba(30,41,59,0.7); border-color: rgba(148,163,184,0.2); }
[data-theme="dark"] .we-reflect-option { border-color: rgba(148,163,184,0.2); color: #e2e8f0; }
[data-theme="dark"] .we-reflect-option:hover { border-color: rgba(96,165,250,0.5); background: rgba(59,130,246,0.1); }
[data-theme="dark"] .we-reflect-option--selected { border-color: rgba(96,165,250,0.6); background: rgba(59,130,246,0.15); }
[data-theme="dark"] .we-reflect-option--correct { border-color: rgba(74,222,128,0.5) !important; background: rgba(22,163,74,0.15) !important; }
[data-theme="dark"] .we-reflect-option--wrong { border-color: rgba(248,113,113,0.5) !important; background: rgba(220,38,38,0.12) !important; }
[data-theme="dark"] .we-reflect-feedback--correct { background: rgba(22,163,74,0.12); color: #4ade80; }
[data-theme="dark"] .we-reflect-feedback--wrong { background: rgba(220,38,38,0.12); color: #f87171; }

/* ── Completion Screen ── */
.we-completion { display: flex; flex-direction: column; gap: 16px; }
.we-completion-header { display: flex; align-items: center; gap: 12px; }
.we-completion-icon { font-size: 32px; color: var(--color-success, #16a34a); }
.we-completion-title { font-size: 1.3rem; font-weight: 700; }
.we-completion-answer { font-size: 1.1rem; padding: 8px 0; }
.we-completion-answer-label { font-weight: 600; color: var(--text-secondary, #475569); }
.we-completion-answer-value { font-weight: 700; color: var(--color-success, #16a34a); }
.we-completion-clean { font-size: 0.9rem; font-weight: 600; color: var(--color-success, #16a34a); }

/* Did You Know */
.we-did-you-know { padding: 14px 18px; background: linear-gradient(135deg, rgba(6,182,212,0.06), rgba(59,130,246,0.06)); border: 1px solid rgba(6,182,212,0.15); border-left: 4px solid #06b6d4; border-radius: 12px; }
.we-did-you-know-header { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; color: #0891b2; display: flex; align-items: center; gap: 8px; }
.we-did-you-know-text { font-size: 0.93rem; line-height: 1.6; }

/* Performance Summary */
.we-perf-summary { background: var(--glass-bg, rgba(255,255,255,0.7)); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; padding: 16px; }
.we-perf-summary-header { font-weight: 700; font-size: 0.95rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.we-perf-step { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.9rem; }
.we-perf-step--clean .material-symbols-outlined { color: var(--color-success, #16a34a); }
.we-perf-step--struggled .material-symbols-outlined { color: var(--color-warning, #f59e0b); }
.we-perf-step--wrong .material-symbols-outlined { color: var(--color-error, #dc2626); }
.we-perf-step-name { font-weight: 500; min-width: 140px; }
.we-perf-step-result { color: var(--text-secondary, #475569); }

/* Solution Accordion */
.we-solution-accordion { border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; }
.we-solution-toggle { padding: 14px 18px; cursor: pointer; font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; list-style: none; }
.we-solution-toggle::-webkit-details-marker { display: none; }
.we-solution-body { padding: 0 18px 18px; }

/* Related Examples */
.we-related-examples { font-size: 0.85rem; color: var(--text-tertiary, #94a3b8); }
.we-related-label { font-weight: 600; }
.we-related-tag { color: var(--text-secondary, #475569); }

/* Complete Button */
.we-complete-btn { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 14px 24px; background: var(--color-success, #16a34a); color: white; border: none; border-radius: 12px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.2s; }
.we-complete-btn:hover { background: #15803d; }

/* Dark Mode: Completion */
[data-theme="dark"] .we-completion-icon { color: #4ade80; }
[data-theme="dark"] .we-completion-answer-value { color: #4ade80; }
[data-theme="dark"] .we-completion-clean { color: #4ade80; }
[data-theme="dark"] .we-did-you-know { background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(59,130,246,0.1)); border-color: rgba(34,211,238,0.2); }
[data-theme="dark"] .we-did-you-know-header { color: #22d3ee; }
[data-theme="dark"] .we-perf-summary { background: rgba(30,41,59,0.7); border-color: rgba(148,163,184,0.2); }
[data-theme="dark"] .we-perf-step-result { color: #94a3b8; }
[data-theme="dark"] .we-solution-accordion { border-color: rgba(148,163,184,0.2); }
[data-theme="dark"] .we-solution-toggle { color: #e2e8f0; }
[data-theme="dark"] .we-related-tag { color: #94a3b8; }
[data-theme="dark"] .we-complete-btn { background: #15803d; }
[data-theme="dark"] .we-complete-btn:hover { background: #166534; }

/* ── Progress Bar ── */
.we-continue-bar { position: relative; margin-top: 20px; padding: 12px 20px; background: rgba(148,163,184,0.1); border: 1.5px solid var(--border-color, #e2e8f0); border-radius: 12px; overflow: hidden; text-align: center; cursor: default; }
.we-continue-fill { position: absolute; top: 0; left: 0; height: 100%; background: rgba(22,163,74,0.12); transition: width 0.6s ease; z-index: 0; }
.we-continue-label { position: relative; z-index: 1; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary, #64748b); }
.we-continue-bar--ready { border-color: var(--color-success, #16a34a); cursor: pointer; }
.we-continue-bar--ready .we-continue-fill { background: rgba(22,163,74,0.2); }
.we-continue-bar--ready .we-continue-label { color: var(--color-success, #16a34a); font-weight: 700; }

[data-theme="dark"] .we-continue-bar { background: rgba(30,41,59,0.5); border-color: rgba(148,163,184,0.2); }
[data-theme="dark"] .we-continue-fill { background: rgba(74,222,128,0.1); }
[data-theme="dark"] .we-continue-label { color: #94a3b8; }
[data-theme="dark"] .we-continue-bar--ready { border-color: rgba(74,222,128,0.5); }
[data-theme="dark"] .we-continue-bar--ready .we-continue-label { color: #4ade80; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .we-step-content { padding: 0 8px; }
    .we-drop-zone { min-height: 80px; padding: 16px; }
    .we-formula-btn { width: 100%; justify-content: center; }
    .we-diagnose-option { padding: 8px 10px; }
    .we-mapping-container { flex-direction: column; }
    .we-mapping-quotes, .we-mapping-slots { flex: none; }
    .we-quote-card { padding: 10px 12px; }
    .we-slot { min-height: 48px; padding: 10px 12px; }
}

/* ── Sanity Gate (engineering judgment check before submit) ── */
.we-sanity-check {
    margin: 1.25rem 0;
    padding: 1.25rem;
    background: var(--color-warning-light, #fffbeb);
    border: 1.5px solid var(--color-warning-muted, #fde68a);
    border-radius: 10px;
}
.we-sanity-header {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
    color: var(--color-warning-dark, #92400e);
}
.we-sanity-question {
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.we-sanity-options {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.we-sanity-option {
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    background: var(--color-surface, #fff);
    cursor: pointer;
    text-align: left;
    font-size: 0.88rem;
    font-family: inherit;
    color: inherit;
}
.we-sanity-option:hover {
    border-color: var(--color-primary, #3b82f6);
}
.we-sanity-option--selected {
    background: var(--color-primary-light, #eff6ff);
    border-color: var(--color-primary, #3b82f6);
}
.we-sanity-result {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--color-surface-alt, #f8fafc);
    border-left: 3px solid var(--color-warning, #f59e0b);
}

/* Dark mode: Sanity Gate */
[data-theme="dark"] .we-sanity-check {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.25);
}
[data-theme="dark"] .we-sanity-header { color: #fbbf24; }
[data-theme="dark"] .we-sanity-option {
    background: var(--color-bg-card, #1e293b);
    border-color: var(--color-border-dark, #334155);
    color: var(--color-text, #e2e8f0);
}
[data-theme="dark"] .we-sanity-option:hover {
    border-color: rgba(59, 130, 246, 0.5);
}
[data-theme="dark"] .we-sanity-option--selected {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
}
[data-theme="dark"] .we-sanity-result {
    background: rgba(255, 255, 255, 0.03);
    border-left-color: rgba(251, 191, 36, 0.5);
}

/* ── Handbook Search (reference navigation training) ── */
.we-handbook-search {
    margin: 1rem 0;
    padding: 1.25rem;
    background: var(--color-surface-alt, #f8fafc);
    border: 1.5px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
}
.we-handbook-header {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
.we-handbook-instruction {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.we-handbook-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.we-handbook-label {
    font-weight: 600;
    font-size: 0.88rem;
    min-width: 5rem;
}
.we-handbook-optional {
    font-weight: 400;
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.8rem;
}
.we-handbook-prefix {
    font-weight: 600;
    font-size: 0.95rem;
}
.we-handbook-input {
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.9rem;
    width: 6rem;
    font-family: inherit;
}
.we-handbook-input--wide { width: 14rem; }
.we-handbook-input:focus {
    border-color: var(--color-primary, #3b82f6);
    outline: none;
}
.we-handbook-icon {
    font-size: 1.1rem;
    min-width: 1.5rem;
}
.we-handbook-feedback {
    font-size: 0.82rem;
    width: 100%;
    padding-left: 5.5rem;
    margin-top: 0.15rem;
}
.we-handbook-feedback--correct { color: var(--color-success-dark, #14532d); }
.we-handbook-feedback--wrong { color: var(--color-danger-dark, #7f1d1d); }
.we-handbook-field--correct .we-handbook-input {
    border-color: var(--color-success, #22c55e);
    background: var(--color-success-light, #dcfce7);
}
.we-handbook-field--correct .we-handbook-icon { color: var(--color-success, #22c55e); }
.we-handbook-field--wrong .we-handbook-input { border-color: var(--color-danger, #ef4444); }
.we-handbook-field--wrong .we-handbook-icon { color: var(--color-danger, #ef4444); }
.we-handbook-field--warn .we-handbook-input { border-color: var(--color-warning, #f59e0b); }
.we-handbook-field--warn .we-handbook-icon { color: var(--color-warning-dark, #92400e); }
.we-handbook-hint {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--color-info-light, #f0f9ff);
    border-radius: 6px;
    font-size: 0.85rem;
}

/* "I don't know" button + mandatory term field layout */
.we-handbook-field--term {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.we-handbook-input--term {
    flex: 1;
    min-width: 10rem;
    width: auto;
}
.we-handbook-idk {
    padding: 0.4rem 0.75rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--color-text-secondary, #64748b);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
.we-handbook-idk:hover {
    border-color: var(--color-primary, #3b82f6);
    color: var(--color-primary, #3b82f6);
}
.we-handbook-idk--used {
    opacity: 0.5;
    cursor: default;
}
.we-handbook-idk-msg {
    color: var(--color-info, #3b82f6);
    font-style: italic;
}

/* Best terms panel (teaching moment) */
.we-handbook-best-terms {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface-alt, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    font-size: 0.85rem;
}
.we-handbook-best-terms-header {
    font-weight: 600;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
}
.we-handbook-best-term {
    padding: 0.2rem 0;
    line-height: 1.4;
}
.we-handbook-best-term--fail {
    color: var(--color-text-secondary, #64748b);
}
.we-handbook-best-terms-fail-header {
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.2rem;
    font-size: 0.82rem;
    color: var(--color-text-secondary, #64748b);
}

/* Reference identification MCQ */
.we-handbook-ref {
    margin: 1rem 0;
    padding: 1.25rem;
    background: var(--color-surface-alt, #f8fafc);
    border: 1.5px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
}
.we-handbook-ref-q {
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.we-handbook-ref-options,
.we-handbook-chapter-options {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.we-handbook-ref-option,
.we-handbook-chapter-option {
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    background: var(--color-surface, #fff);
    cursor: pointer;
    text-align: left;
    font-size: 0.88rem;
    font-family: inherit;
    color: inherit;
}
.we-handbook-ref-option:hover:not(:disabled),
.we-handbook-chapter-option:hover:not(:disabled) {
    border-color: var(--color-primary, #3b82f6);
}
.we-handbook-ref-option--disabled,
.we-handbook-chapter-option--disabled {
    cursor: default;
    opacity: 0.85;
}
.we-handbook-ref-option--correct,
.we-handbook-chapter-option--correct {
    background: var(--color-success-light, #dcfce7);
    border-color: var(--color-success, #22c55e);
}
.we-handbook-ref-option--wrong,
.we-handbook-chapter-option--wrong {
    background: var(--color-danger-light, #fee2e2);
    border-color: var(--color-danger, #ef4444);
}

/* Memorize flow */
.we-handbook-memorize {
    border-color: var(--color-warning-muted, #fde68a);
}
.we-handbook-memorize-note {
    padding: 0.75rem;
    background: var(--color-warning-light, #fffbeb);
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.we-handbook-memorize-list { margin-bottom: 1rem; }
.we-handbook-memorize-item {
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 0.3rem;
}

/* Formula Library filter banner */
.fl-filter-banner {
    padding: 0.6rem 1rem;
    background: var(--color-primary-light, #eff6ff);
    border-bottom: 1px solid var(--color-primary-muted, #93c5fd);
    font-size: 0.85rem;
    font-weight: 600;
}
.fl-filter-clear {
    background: none;
    border: none;
    color: var(--color-primary, #3b82f6);
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.85rem;
}

/* Dark mode: Handbook Search */
[data-theme="dark"] .we-handbook-search {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--color-border-dark, #334155);
}
[data-theme="dark"] .we-handbook-ref {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--color-border-dark, #334155);
}
[data-theme="dark"] .we-handbook-input {
    background: var(--color-bg-card, #1e293b);
    border-color: var(--color-border-dark, #334155);
    color: var(--color-text, #e2e8f0);
}
[data-theme="dark"] .we-handbook-ref-option,
[data-theme="dark"] .we-handbook-chapter-option {
    background: var(--color-bg-card, #1e293b);
    border-color: var(--color-border-dark, #334155);
    color: var(--color-text, #e2e8f0);
}
[data-theme="dark"] .we-handbook-ref-option:hover:not(:disabled),
[data-theme="dark"] .we-handbook-chapter-option:hover:not(:disabled) {
    border-color: rgba(59, 130, 246, 0.5);
}
[data-theme="dark"] .we-handbook-ref-option--correct,
[data-theme="dark"] .we-handbook-chapter-option--correct {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
}
[data-theme="dark"] .we-handbook-ref-option--wrong,
[data-theme="dark"] .we-handbook-chapter-option--wrong {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}
[data-theme="dark"] .we-handbook-feedback--correct { color: #86efac; }
[data-theme="dark"] .we-handbook-feedback--wrong { color: #fca5a5; }
[data-theme="dark"] .we-handbook-hint {
    background: rgba(59, 130, 246, 0.1);
}
[data-theme="dark"] .we-handbook-idk {
    background: var(--color-bg-card, #1e293b);
    border-color: var(--color-border-dark, #334155);
    color: var(--color-text-secondary);
}
[data-theme="dark"] .we-handbook-idk:hover {
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
}
[data-theme="dark"] .we-handbook-best-terms {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--color-border-dark, #334155);
}
[data-theme="dark"] .we-handbook-memorize-note {
    background: rgba(251, 191, 36, 0.1);
}
[data-theme="dark"] .fl-filter-banner {
    background: rgba(59, 130, 246, 0.1);
    border-bottom-color: rgba(59, 130, 246, 0.2);
}

/* ── Variable Sandbox (extract → identify → derive) ── */
.we-sandbox { margin: 1rem 0; }
.we-sandbox-header {
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary, #64748b);
    margin: 1rem 0 0.5rem;
}

/* Phrase pool */
.we-sandbox-phrases {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.we-sandbox-phrase {
    padding: 0.5rem 0.75rem;
    background: var(--color-surface, #fff);
    border: 1.5px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    cursor: grab;
    font-size: 0.88rem;
    line-height: 1.4;
    transition: border-color 0.2s;
    user-select: none;
}
.we-sandbox-phrase:hover { border-color: var(--color-primary, #3b82f6); }
.we-sandbox-phrase--selected {
    border-color: var(--color-primary, #3b82f6);
    background: var(--color-primary-light, #eff6ff);
}
.we-sandbox-phrase--dragging { opacity: 0.5; }

/* Slots */
.we-sandbox-slots {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.we-sandbox-slot {
    padding: 1rem;
    border: 2px dashed var(--color-border, #e2e8f0);
    border-radius: 8px;
    background: var(--color-surface-alt, #f8fafc);
    transition: all 0.2s;
}
.we-sandbox-slot--empty { opacity: 0.7; }
.we-sandbox-slot--filled { border-style: solid; opacity: 1; }
.we-sandbox-slot--correct {
    border-color: var(--color-success, #22c55e);
    background: var(--color-success-light, #dcfce7);
}
.we-sandbox-slot--error { border-color: var(--color-danger, #ef4444); }
.we-sandbox-slot-label {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--color-text-secondary, #64748b);
    margin-bottom: 0.4rem;
}
.we-sandbox-slot-hint {
    font-size: 0.85rem;
    color: var(--color-text-muted, #94a3b8);
    font-style: italic;
    padding: 0.75rem;
}
.we-sandbox-slot-phrase {
    font-size: 0.88rem;
    line-height: 1.4;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 0.5rem;
}
.we-sandbox-slot-clear {
    background: none;
    border: none;
    color: var(--color-text-muted, #94a3b8);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem;
    min-width: 2rem;
    min-height: 2rem;
}
.we-sandbox-slot-clear:hover { color: var(--color-danger, #ef4444); }

/* Identify dropdown */
.we-sandbox-identify-label {
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem;
}
.we-sandbox-dropdown {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.88rem;
    width: 100%;
    max-width: 20rem;
    font-family: inherit;
}

/* Value input */
.we-sandbox-value-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.we-sandbox-value-label {
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 3rem;
}
.we-sandbox-value-input {
    padding: 0.4rem 0.6rem;
    border: 1.5px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.9rem;
    width: 6rem;
    font-family: inherit;
}
.we-sandbox-value-unit {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #64748b);
}
.we-sandbox-compute-btn {
    padding: 0.3rem 0.75rem;
    background: var(--color-info-light, #f0f9ff);
    border: 1px solid var(--color-info-muted, #93c5fd);
    border-radius: 4px;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
}
.we-sandbox-compute-hint {
    font-size: 0.82rem;
    color: var(--color-text-secondary, #64748b);
    font-style: italic;
    margin-top: 0.25rem;
}

/* Not Needed zone */
.we-sandbox-notneed {
    padding: 0.75rem;
    border: 2px dashed var(--color-border, #e2e8f0);
    border-radius: 8px;
    margin-top: 0.75rem;
    min-height: 3rem;
    cursor: pointer;
}
.we-sandbox-notneed-label {
    font-weight: 600;
    font-size: 0.82rem;
}
.we-sandbox-notneed-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted, #94a3b8);
}
.we-sandbox-notneed-item {
    padding: 0.4rem 0.75rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 4px;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.we-sandbox-notneed-item--error { border-color: var(--color-danger, #ef4444); }

/* Feedback */
.we-sandbox-slot-fb {
    font-size: 0.82rem;
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
}
.we-sandbox-slot-fb--correct {
    background: var(--color-success-light, #dcfce7);
    color: var(--color-success-dark, #14532d);
}
.we-sandbox-slot-fb--error {
    background: var(--color-danger-light, #fee2e2);
    color: var(--color-danger-dark, #7f1d1d);
}
.we-sandbox-global-fb {
    padding: 0.6rem;
    margin-top: 0.5rem;
    background: var(--color-warning-light, #fffbeb);
    border-radius: 6px;
    font-size: 0.85rem;
}

/* Confirmed panel (Session E) */
.we-sandbox-confirmed {
    padding: 1rem;
    background: var(--color-success-light, #dcfce7);
    border: 1.5px solid var(--color-success, #22c55e);
    border-radius: 10px;
    margin: 1rem 0;
}
.we-sandbox-confirmed-header {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}
.we-sandbox-confirmed-row {
    padding: 0.3rem 0;
    font-size: 0.88rem;
}

/* Buttons */
.we-sandbox-add {
    background: none;
    border: 1px dashed var(--color-border, #e2e8f0);
    padding: 0.4rem 1rem;
    border-radius: 6px;
    color: var(--color-text-secondary, #64748b);
    cursor: pointer;
    font-size: 0.82rem;
    margin-bottom: 0.75rem;
    font-family: inherit;
}
.we-sandbox-continue {
    padding: 0.6rem 1.5rem;
    background: var(--color-success, #22c55e);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.75rem;
    font-family: inherit;
}

/* Dark mode: Variable Sandbox */
[data-theme="dark"] .we-sandbox-phrase {
    background: var(--color-bg-card, #1e293b);
    border-color: var(--color-border-dark, #334155);
    color: var(--color-text, #e2e8f0);
}
[data-theme="dark"] .we-sandbox-phrase--selected {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
}
[data-theme="dark"] .we-sandbox-slot {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--color-border-dark, #334155);
}
[data-theme="dark"] .we-sandbox-slot--correct {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}
[data-theme="dark"] .we-sandbox-notneed {
    border-color: var(--color-border-dark, #334155);
}
[data-theme="dark"] .we-sandbox-notneed-item {
    background: var(--color-bg-card, #1e293b);
    border-color: var(--color-border-dark, #334155);
}
[data-theme="dark"] .we-sandbox-dropdown {
    background: var(--color-bg-card, #1e293b);
    border-color: var(--color-border-dark, #334155);
    color: var(--color-text, #e2e8f0);
}
[data-theme="dark"] .we-sandbox-value-input {
    background: var(--color-bg-card, #1e293b);
    border-color: var(--color-border-dark, #334155);
    color: var(--color-text, #e2e8f0);
}
[data-theme="dark"] .we-sandbox-confirmed {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}
[data-theme="dark"] .we-sandbox-slot-fb--correct {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}
[data-theme="dark"] .we-sandbox-slot-fb--error {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}
[data-theme="dark"] .we-sandbox-global-fb {
    background: rgba(251, 191, 36, 0.08);
}

/* Mobile: Variable Sandbox */
@media (max-width: 768px) {
    .we-sandbox-phrases { flex-direction: column; }
    .we-sandbox-phrase { padding: 0.75rem; min-height: 44px; }
    .we-sandbox-slot { width: 100%; }
    .we-sandbox-slot-clear { min-width: 44px; min-height: 44px; }
    .we-sandbox-notneed { min-height: 60px; }
    .we-sandbox-dropdown { max-width: 100%; }
}

/* ── Completion Screen ── */
.we-completion { margin-top: 1rem; }

.we-did-you-know {
    padding: 1rem 1.25rem;
    background: var(--color-info-light, #f0f9ff);
    border: 1.5px solid var(--color-info-muted, #93c5fd);
    border-radius: 10px;
    margin-bottom: 1rem;
}
.we-dyk-header {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary-dark, #1e40af);
}
.we-dyk-text { font-size: 0.9rem; line-height: 1.55; }

.we-perf-summary {
    padding: 1rem;
    background: var(--color-surface-alt, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    margin-bottom: 1rem;
}
.we-perf-header {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.we-perf-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.88rem;
}
.we-perf-icon { min-width: 1.2rem; font-weight: 700; }
.we-perf-name { font-weight: 600; min-width: 4rem; }
.we-perf-step--clean .we-perf-icon { color: var(--color-success, #22c55e); }
.we-perf-step--struggled .we-perf-icon { color: var(--color-warning, #f59e0b); }
.we-perf-step--wrong .we-perf-icon { color: var(--color-danger, #ef4444); }

.we-solution-accordion {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    margin-bottom: 1rem;
}
.we-solution-toggle {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    user-select: none;
}
.we-solution-body {
    padding: 0 1rem 1rem;
}
.we-sol-steps { padding-left: 1.25rem; }
.we-sol-steps li { margin-bottom: 0.5rem; font-size: 0.88rem; line-height: 1.5; }
.we-sol-thinking { color: var(--color-text-secondary, #64748b); font-style: italic; font-size: 0.85rem; }
.we-sol-latex { margin-top: 0.25rem; }

.we-complete-btn {
    margin-top: 1rem;
    background: var(--color-success, #22c55e);
    color: #fff;
}

/* Principle Path */
.we-principle-path { margin-top: 1.25rem; }
.we-pp-card {
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--color-border, #e2e8f0);
}
.we-pp-header {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
    color: var(--color-text-secondary, #64748b);
}
.we-pp-content { font-size: 0.9rem; line-height: 1.6; }
.we-pp-physics {
    background: var(--color-info-light, #f0f9ff);
    border-color: var(--color-info-muted, #93c5fd);
}
.we-pp-reference {
    background: var(--color-surface-alt, #f8fafc);
}
.we-pp-whatif {
    background: var(--color-warning-light, #fffbeb);
    border-color: var(--color-warning-muted, #fde68a);
}
.we-pp-whatif-item {
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 0.3rem;
}

/* Dark mode: Completion + Principle Path */
[data-theme="dark"] .we-did-you-know {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
}
[data-theme="dark"] .we-dyk-header { color: #93c5fd; }
[data-theme="dark"] .we-perf-summary {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--color-border-dark, #334155);
}
[data-theme="dark"] .we-solution-accordion {
    border-color: var(--color-border-dark, #334155);
}
[data-theme="dark"] .we-pp-physics {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}
[data-theme="dark"] .we-pp-reference {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--color-border-dark, #334155);
}
[data-theme="dark"] .we-pp-whatif {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.2);
}

/* ── Estimation Test ── */
.we-estimation {
    margin: 0 0 1rem;
    padding: 1.25rem;
    background: var(--color-primary-light, #eff6ff);
    border: 1.5px solid var(--color-primary-muted, #93c5fd);
    border-radius: 10px;
}
.we-estimation-header {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
    color: var(--color-primary-dark, #1e40af);
}
.we-estimation-q { font-size: 0.92rem; line-height: 1.5; margin-bottom: 0.75rem; }
.we-estimation-options { display: flex; flex-direction: column; gap: 0.4rem; }
.we-estimation-option {
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    background: var(--color-surface, #fff);
    cursor: pointer;
    text-align: left;
    font-size: 0.88rem;
    font-family: inherit;
    color: inherit;
}
.we-estimation-option:hover:not(:disabled) { border-color: var(--color-primary); }
.we-estimation-option--selected {
    background: var(--color-primary-light, #eff6ff);
    border-color: var(--color-primary, #3b82f6);
}
.we-estimation-result {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--color-info-light, #f0f9ff);
    border-left: 3px solid var(--color-primary, #3b82f6);
}

/* ── Final Review Screen (Screen 2) ── */
.we-final-review { margin-top: 0.5rem; }
.we-review-heading {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.we-review-section {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    background: var(--color-surface, #fff);
}
.we-review-section-header {
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-secondary, #64748b);
}
.we-review-section-body { font-size: 0.88rem; line-height: 1.55; }
.we-review-terms { margin-top: 0.5rem; }
.we-review-term { font-size: 0.82rem; padding: 0.15rem 0; }
.we-review-term--fail { color: var(--color-text-secondary, #64748b); }
.we-review-whatif-item { font-size: 0.88rem; line-height: 1.5; margin-bottom: 0.3rem; }
.we-definitions-table { width: 100%; font-size: 0.85rem; border-collapse: collapse; }
.we-definitions-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--color-border, #e2e8f0); }
.we-definitions-symbol { font-weight: 700; width: 3rem; font-family: var(--font-mono, monospace); }
.we-definitions-note { color: var(--color-text-secondary, #64748b); font-size: 0.82rem; }
.we-formula-cluster-item { padding: 0.3rem 0; font-size: 0.88rem; }
.we-formula-cluster-primary { padding: 0.3rem 0; font-size: 0.88rem; font-weight: 700; }
.we-formula-cluster-eq { font-family: var(--font-mono, monospace); }
.we-exam-pattern-row { display: flex; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.85rem; align-items: baseline; }
.we-exam-pattern-trigger { font-style: italic; color: var(--color-text-secondary); }
.we-exam-pattern-arrow { color: var(--color-text-muted); }
.we-exam-pattern-means { font-weight: 600; }
.we-mistakes-step { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border, #e2e8f0); font-size: 0.85rem; line-height: 1.4; }
.we-mistakes-step:last-child { border-bottom: none; }
.we-mistakes-icon { margin-right: 0.4rem; font-weight: 700; }
.we-mistakes-step--clean .we-mistakes-icon { color: var(--color-success, #22c55e); }
.we-mistakes-step--struggled .we-mistakes-icon { color: var(--color-warning, #f59e0b); }
.we-mistakes-step--hard .we-mistakes-icon { color: var(--color-danger, #ef4444); }
.we-review-timer { text-align: center; font-size: 0.85rem; color: var(--color-text-secondary); margin: 1rem 0; }
.we-review-complete--locked { opacity: 0.4; cursor: not-allowed; }
.we-review-complete--active { opacity: 1; cursor: pointer; }
.we-review-advance { margin-top: 1rem; }
@keyframes reviewPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* Dark mode: Estimation + Review */
[data-theme="dark"] .we-estimation {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
}
[data-theme="dark"] .we-estimation-header { color: #93c5fd; }
[data-theme="dark"] .we-estimation-option {
    background: var(--color-bg-card, #1e293b);
    border-color: var(--color-border-dark, #334155);
    color: var(--color-text, #e2e8f0);
}
[data-theme="dark"] .we-estimation-option--selected {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
}
[data-theme="dark"] .we-estimation-result {
    background: rgba(59, 130, 246, 0.08);
    border-left-color: rgba(59, 130, 246, 0.4);
}
[data-theme="dark"] .we-review-section {
    background: var(--color-bg-card, #1e293b);
    border-color: var(--color-border-dark, #334155);
}
[data-theme="dark"] .we-definitions-table td {
    border-bottom-color: var(--color-border-dark, #334155);
}
[data-theme="dark"] .we-mistakes-step {
    border-bottom-color: var(--color-border-dark, #334155);
}