:root {
  color-scheme: light dark;
  --ink: #19213d;
  --muted: #6f7890;
  --line: #e7e9f0;
  --panel: #ffffff;
  --canvas: #f8f9fc;
  --accent: #4b44d4;
  --accent-dark: #3731b0;
  --accent-soft: #efeeff;
  --teal: #0b8574;
  --orange: #b85d12;
  --red: #b53d57;
  --shadow: 0 10px 30px rgba(31, 37, 75, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; min-height: 0; margin: 0; overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, math-field:focus-visible { outline: 3px solid rgba(75, 68, 212, 0.28); outline-offset: 2px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.initial-loading { z-index: 200; position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--canvas); }
.initial-loading-card { display: flex; align-items: center; gap: 14px; width: min(430px, 100%); padding: 20px 22px; border: 1px solid #e1e3ed; border-radius: 16px; background: var(--panel); box-shadow: 0 18px 48px rgba(31, 37, 75, .12); }
.initial-loading-brand { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: white; font-family: Georgia, serif; font-size: 25px; font-weight: 700; background: linear-gradient(145deg, #655ef5, #3d36be); box-shadow: 0 6px 14px rgba(75, 68, 212, .28); }
.initial-loading-copy { display: grid; min-width: 0; gap: 4px; }
.initial-loading-copy strong { font-size: 18px; letter-spacing: -.02em; }
.initial-loading-copy span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.initial-loading-spinner { flex: 0 0 auto; width: 22px; height: 22px; margin-left: auto; border: 3px solid #e3e2fb; border-top-color: var(--accent); border-radius: 50%; animation: initial-loading-spin 900ms linear infinite; }
@keyframes initial-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .initial-loading-spinner { animation-duration: 1.8s; } }

.app-shell { --tutor-panel-width: 348px; height: 100vh; display: grid; grid-template-columns: 258px minmax(0, 1fr) var(--tutor-panel-width); transition: grid-template-columns 180ms ease; }
.app-shell.library-collapsed { grid-template-columns: 48px minmax(0, 1fr) var(--tutor-panel-width); }
.mobile-header { display: none; }

.library-panel, .tutor-panel { background: var(--panel); min-height: 0; height: 100vh; }
.library-panel { border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; transition: border-color 160ms ease; }
.brand { display: flex; align-items: center; gap: 11px; min-height: 84px; padding: 20px 20px 15px; }
.library-collapse-button { margin-left: auto; font-size: 27px; }
.library-collapsed .brand { min-height: 58px; justify-content: center; padding: 10px 4px; }
.library-collapsed .brand > :not(.library-collapse-button), .library-collapsed .panel-actions, .library-collapsed .library-tree, .library-collapsed .library-footer { display: none; }
.library-collapsed .library-collapse-button { margin: 0; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; color: white; font-family: Georgia, serif; font-weight: 700; font-size: 22px; background: linear-gradient(145deg, #655ef5, #3d36be); box-shadow: 0 6px 14px rgba(75, 68, 212, 0.28); }
.brand strong { display: block; font-size: 18px; letter-spacing: -0.02em; }
.brand small { color: var(--muted); font-size: 12px; }
.panel-actions { padding: 0 15px 16px; }
.library-creation-status { display: flex; align-items: center; gap: 7px; margin: 9px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.library-creation-status::before { width: 12px; height: 12px; border: 2px solid color-mix(in srgb, var(--accent) 24%, transparent); border-top-color: var(--accent); border-radius: 50%; content: ""; animation: library-creation-spin 800ms linear infinite; }
.tree-action:disabled { cursor: wait; opacity: .48; }
@keyframes library-creation-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .library-creation-status::before { animation-duration: 1.6s; } }
.primary-button, .secondary-button, .small-button, .send-button { border-radius: 9px; border: 1px solid transparent; transition: 150ms ease; }
.primary-button { border-color: var(--accent); background: var(--accent); color: white; padding: 10px 14px; font-weight: 650; }
.primary-button:hover { background: var(--accent-dark); }
.primary-button:disabled { cursor: wait; opacity: .7; }
.primary-button.danger-button { border-color: var(--red); background: var(--red); }
.primary-button.danger-button:hover { border-color: #922f46; background: #922f46; }
.full { width: 100%; }
.secondary-button { background: white; border-color: #d6d9e5; color: var(--ink); padding: 8px 11px; font-weight: 600; }
.secondary-button:hover { background: #f6f6fa; }
.dialog-fields.with-tabs { grid-template-columns: 112px minmax(0, 1fr); align-items: start; }
.dialog-tabs { display: flex; gap: 5px; margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.dialog-fields.with-tabs .dialog-tabs { grid-row: 1 / span 20; flex-direction: column; margin: 0; padding: 0 10px 0 0; border: 0; border-right: 1px solid var(--line); }
.dialog-fields.with-tabs [data-dialog-tab] { grid-column: 2; }
.dialog-tab-button { border: 1px solid transparent; border-radius: 7px; padding: 6px 9px; color: var(--muted); background: transparent; font: inherit; font-size: 12px; font-weight: 700; text-align: left; }
.dialog-tab-button:hover { color: var(--accent-dark); background: var(--accent-soft); }
.dialog-tab-button.active { border-color: #c9c5f3; color: var(--accent-dark); background: var(--accent-soft); }
@media (max-width: 520px) { .dialog-fields.with-tabs { grid-template-columns: 1fr; } .dialog-fields.with-tabs .dialog-tabs { grid-row: auto; flex-direction: row; margin-bottom: 8px; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--line); } .dialog-fields.with-tabs [data-dialog-tab] { grid-column: auto; } }
.small-button { background: var(--accent-soft); color: var(--accent-dark); padding: 7px 9px; font-size: 12px; font-weight: 700; }
.small-button:hover { background: #e5e3ff; }
.library-tree { flex: 1; overflow-y: auto; padding: 0 10px 24px; }
.tree-empty { padding: 23px 15px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.notebook-item { margin: 4px 0 12px; }
.tree-heading, .sheet-row { width: 100%; display: flex; align-items: center; gap: 2px; }
.tree-toggle, .sheet-item { min-width: 0; display: flex; align-items: center; gap: 7px; border: 0; color: var(--ink); text-align: left; border-radius: 7px; background: transparent; }
.tree-toggle { flex: 1; padding: 7px 6px; font-weight: 700; font-size: 13px; }
.tree-toggle:hover, .sheet-item:hover { background: #f3f4f9; }
.notebook-heading { padding-right: 2px; }
.section-heading { padding: 1px 2px 1px 12px; color: #515b72; }
.section-heading .tree-toggle { padding-block: 6px 5px; font-size: 12px; font-weight: 650; }
.notebook-children { padding-left: 8px; }
.section-children { padding-left: 12px; }
.sheet-item { flex: 1; padding: 7px 4px 7px 13px; color: #596278; font-size: 13px; }
.sheet-item.active { color: var(--accent-dark); background: var(--accent-soft); font-weight: 700; }
.tree-label { min-width: 0; overflow-wrap: anywhere; }
.tree-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: #818aa2; }
.tree-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tree-chevron { width: 13px; height: 13px; transition: transform 140ms ease; }
.tree-toggle[aria-expanded="true"] .tree-chevron { transform: rotate(90deg); }
.tree-toggle:hover .tree-icon { color: var(--accent); }
.tree-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 1px; }
.tree-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 4px; border: 1px solid transparent; border-radius: 7px; color: #71809d; background: transparent; }
.tree-action-icon { width: 17px; height: 17px; }
.tree-action .tree-action-icon svg { stroke-width: 2.3; }
.tree-menu-trigger .tree-action-icon svg { fill: currentColor; stroke: none; }
.tree-action:hover, .tree-menu[open] > summary { border-color: #c9c5f3; color: var(--accent-dark); background: #f4f3ff; }
.tree-action:focus-visible { position: relative; z-index: 1; }
.tree-menu { position: relative; flex: 0 0 auto; }
.tree-menu > summary { list-style: none; cursor: pointer; }
.tree-menu > summary::-webkit-details-marker { display: none; }
.tree-menu-popover { z-index: 20; position: absolute; top: calc(100% + 4px); right: 0; min-width: 142px; padding: 5px; border: 1px solid #dfe1eb; border-radius: 8px; background: white; box-shadow: 0 10px 25px rgba(31, 37, 75, .16); }
.tree-menu.opens-up .tree-menu-popover { top: auto; bottom: calc(100% + 4px); }
.tree-menu-item { display: flex; align-items: center; width: 100%; gap: 7px; padding: 7px 8px; border: 0; border-radius: 6px; color: #596278; background: transparent; font-size: 11px; text-align: left; white-space: nowrap; }
.tree-menu-item:hover { color: var(--accent-dark); background: #f1f0ff; }
.tree-menu-item-danger { color: var(--red); }
.tree-menu-item-danger:hover { color: #922f46; background: #fff0f3; }
.tree-menu-icon { width: 14px; height: 14px; }
.library-footer { border-top: 1px solid var(--line); padding: 10px 12px; color: var(--muted); font-size: 11px; }
.storage-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border: 1px solid #e2e4ef; border-radius: 9px; color: var(--muted); background: #fafbff; text-align: left; font-size: 11px; line-height: 1.35; }
.storage-button:hover { border-color: #c9c5f3; color: var(--accent-dark); background: #f4f3ff; }
.storage-button:focus-visible { outline-offset: 0; }
.storage-button #storage-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.storage-action { flex: 0 0 auto; color: var(--accent-dark); font-weight: 750; }

.sheet-area { min-width: 0; height: 100vh; background: radial-gradient(circle at 50% 0%, #fff 0, #fbfbfe 46%, #f5f6fb 100%); overflow-y: auto; overscroll-behavior: contain; }
.empty-state { max-width: 470px; text-align: center; margin: 18vh auto 0; padding: 24px; }
.empty-symbol { margin: auto; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 24px; color: var(--accent); font-family: Georgia, serif; font-size: 46px; background: var(--accent-soft); }
.empty-state h1 { letter-spacing: -0.04em; font-size: clamp(27px, 3vw, 38px); margin: 22px 0 10px; }
.empty-state p { color: var(--muted); line-height: 1.55; margin: 0 0 23px; }
.sheet-view { padding: 32px clamp(24px, 4vw, 64px) 80px; max-width: 1080px; margin: auto; }
.sheet-header { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; padding-bottom: 21px; border-bottom: 1px solid var(--line); }
.sheet-title-wrap { min-width: 210px; flex: 1; }
.sheet-title { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-weight: 750; letter-spacing: -0.04em; font-size: clamp(27px, 3vw, 38px); }
.save-status { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.save-status.saving { color: var(--orange); }
.save-status.error { color: var(--red); }
.sheet-controls { display: flex; justify-content: flex-end; gap: 8px; }
.library-toggle { display: inline-flex; align-items: center; gap: 5px; }
.sheet-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 0; }
.sheet-toolbar button { padding: 7px 9px; border-radius: 7px; border: 1px solid #dbdeea; color: #4c5570; background: white; font-size: 12px; font-weight: 650; }
.sheet-toolbar button:hover { border-color: #a7a2ed; background: #f8f7ff; color: var(--accent-dark); }
.toolbar-hint { margin-left: auto; color: var(--muted); font-size: 12px; }
.verification-result { margin: -4px 0 14px; padding: 9px 11px; border-radius: 8px; font-size: 12px; line-height: 1.4; }
.verification-result.verified { color: #106a5c; background: #eefaf7; border: 1px solid #c4eee5; }
.verification-result.not_equivalent { color: #9c3149; background: #fff3f5; border: 1px solid #f5cbd4; }
.verification-result.out_of_scope { color: #87521d; background: #fff7eb; border: 1px solid #f2dcb7; }
.transform-panel { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: -4px 0 14px; padding: 11px 12px; border: 1px solid #dcd9fb; border-radius: 10px; background: #faf9ff; }
.transform-heading { min-width: 0; }
.transform-heading .eyebrow { color: #746ec6; }
.transform-heading strong { display: block; margin-top: 2px; color: #413b91; font-size: 12px; }
.transform-heading p { margin: 4px 0 0; color: #69718b; font-size: 11px; line-height: 1.4; }
.transform-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.transform-actions button { padding: 6px 8px; border-radius: 7px; font-size: 11px; font-weight: 750; }
.transform-primary { border: 1px solid var(--accent); color: white; background: var(--accent); }
.transform-primary:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.transform-secondary { border: 1px solid #c9c5f3; color: #4b45a4; background: white; }
.transform-secondary:hover { border-color: #9993e6; background: #f0efff; }
.sheet-problem { display: grid; gap: 13px; margin: 20px 0 13px; }
.sheet-blocks { display: grid; gap: 13px; }
.empty-sheet { padding: 34px; border: 1px dashed #cfd3e1; border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.7); text-align: center; }
.empty-sheet h2 { margin: 0; color: var(--ink); font-size: 17px; letter-spacing: -.02em; }
.empty-sheet p { margin: 8px auto 18px; max-width: 390px; font-size: 13px; line-height: 1.45; }
.empty-sheet button { border: 1px solid var(--accent); border-radius: 8px; padding: 8px 10px; color: white; background: var(--accent); font-size: 12px; font-weight: 700; }
.empty-sheet button:hover { background: var(--accent-dark); }
.sheet-block { position: relative; padding: 14px 16px 15px; background: white; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 2px 8px rgba(42, 50, 97, 0.025); transition: 140ms ease; }
.sheet-block:hover { border-color: #ccd0df; }
.sheet-block.selected { border-color: #918bea; box-shadow: 0 0 0 3px rgba(75, 68, 212, 0.11); }
.sheet-block.annotation { border-left: 4px solid var(--teal); background: #fcfffe; }
.sheet-block.annotation.tone-hint { border-left-color: #7e67ca; background: #fcfbff; }
.sheet-block.annotation.tone-error { border-left-color: var(--red); background: #fffafb; }
.sheet-block.annotation.tone-success { border-left-color: var(--teal); background: #f9fffd; }
.sheet-problem-card { border-color: #d9d8ee; background: linear-gradient(180deg, #fff 0%, #fcfcff 100%); }
.sheet-problem-card.selected { border-color: #918bea; box-shadow: 0 0 0 3px rgba(75, 68, 212, 0.11); }
.sheet-blocks > .sheet-block { padding-left: 44px; }
.problem-readonly-label { margin-left: auto; color: #8b91a4; font-size: 10px; font-weight: 700; }
.problem-content { padding: 13px 14px; border: 1px solid #e1e3ed; border-radius: 8px; color: #2e3854; background: #fff; line-height: 1.55; }
.problem-math-preview { display: block; width: 100%; min-height: 48px; padding: 5px 0; border: 0; background: transparent; font-size: 19px; pointer-events: none; }
.problem-text-preview { white-space: pre-wrap; }
.problem-text-preview .chat-math.display { display: block; margin: 10px 0; }
.block-header { display: flex; align-items: center; min-height: 20px; gap: 8px; margin-bottom: 8px; }
.block-kind { color: #6e778f; font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.block-origin { color: #9aa1b2; font-size: 10px; }
.block-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.block-actions button { border: 0; color: #7b8398; background: transparent; border-radius: 5px; padding: 2px 5px; font-size: 11px; }
.block-drag-handle { position: absolute; top: 14px; left: 10px; display: grid; place-items: center; width: 24px; height: 28px; padding: 0; border: 0; border-radius: 6px; color: #9aa1b2; background: transparent; cursor: grab; touch-action: none; user-select: none; }
.block-drag-handle::before { content: ""; width: 12px; height: 18px; background-image: radial-gradient(circle, currentColor 1.35px, transparent 1.55px); background-position: 0 0; background-size: 6px 6px; }
.block-drag-handle:hover, .block-drag-handle:focus-visible { color: var(--accent); background: #f1f0ff; }
.block-drag-handle:active, .sheet-block.dragging .block-drag-handle { cursor: grabbing; }
.block-actions button:hover { color: var(--accent); background: #f1f0ff; }
.block-actions .block-delete:hover { color: var(--red); background: #fff0f3; }
.sheet-block.dragging { opacity: .48; }
.sheet-block.drag-over-before { box-shadow: 0 -3px 0 var(--accent); }
.sheet-block.drag-over-after { box-shadow: 0 3px 0 var(--accent); }
.block-drop-preview { display: flex; align-items: center; justify-content: center; min-height: 38px; border: 1px dashed #918bea; border-radius: 9px; color: #5e57b5; background: rgba(239, 238, 255, .8); font-size: 11px; font-weight: 750; letter-spacing: .01em; }
.block-drop-preview-pulse { animation: block-drop-preview-in 150ms ease-out; }
@keyframes block-drop-preview-in { from { opacity: 0; transform: scaleY(.35); } to { opacity: 1; transform: scaleY(1); } }
.text-editor { width: 100%; min-height: 74px; resize: vertical; border: 0; background: transparent; color: #2e3854; line-height: 1.55; font-size: 15px; outline: none; }
.math-editor { display: block; width: 100%; min-height: 52px; padding: 9px 11px; border: 1px solid #e1e3ed; border-radius: 7px; background: #fcfcfe; font-size: 19px; }
.math-fallback { width: 100%; min-height: 52px; border: 1px solid #e1e3ed; border-radius: 7px; padding: 9px 11px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.annotation-content, .block-explanation { color: #606a81; line-height: 1.45; white-space: pre-wrap; }
.block-explanation { margin: 10px 0 0; font-size: 13px; }
.annotation-content .chat-math.display, .block-explanation .chat-math.display { display: block; margin: 8px 0; }
.inline-suggestions { margin-top: 11px; }
.inline-suggestion { margin: 0; border-left: 4px solid #7e67ca; background: #fcfbff; }
.block-continuation { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #edf0f6; }
.block-continuation span { margin-right: auto; color: #7d8599; font-size: 11px; }
.block-continuation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.block-continuation button { padding: 5px 7px; border: 1px solid #d9dce7; border-radius: 6px; color: #575f78; background: #fff; font-size: 11px; font-weight: 700; }
.block-continuation .continue-copy { border-color: #c9c5f3; color: #4b45a4; background: #f8f7ff; }
.block-continuation button:hover { border-color: #aba6ef; color: var(--accent-dark); background: #f8f7ff; }

.tutor-panel { border-left: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; min-height: 0; overflow: hidden; }
.tutor-resize-handle { z-index: 3; position: absolute; inset: 0 auto 0 0; width: 10px; padding: 0; border: 0; background: transparent; cursor: col-resize; touch-action: none; }
.tutor-resize-handle::after { position: absolute; inset: 0 auto 0 4px; width: 2px; background: var(--accent); content: ""; opacity: 0; transition: opacity 140ms ease; }
.tutor-resize-handle:hover::after, .tutor-resize-handle:focus-visible::after, body.tutor-resizing .tutor-resize-handle::after { opacity: .75; }
body.tutor-resizing { cursor: col-resize; user-select: none; }
body.tutor-resizing .app-shell { transition: none; }
.tutor-header { display: flex; justify-content: space-between; align-items: center; padding: 21px 20px 16px; border-bottom: 1px solid var(--line); }
.eyebrow { display: block; color: #8a92a5; font-size: 10px; letter-spacing: .11em; font-weight: 800; }
.tutor-header h2 { margin: 3px 0 0; font-size: 19px; letter-spacing: -0.025em; }
.provider-connection-status { margin: 10px 16px 0; padding: 10px 11px; border: 1px solid #b8e8de; border-left: 4px solid var(--teal); border-radius: 8px; color: #0b685b; background: #eafaf6; font-size: 12px; font-weight: 700; line-height: 1.35; }
.provider-notice { margin: 12px 16px 0; padding: 9px 10px; border-radius: 8px; background: #f7f7fb; color: #626c83; font-size: 11px; line-height: 1.35; }
.provider-notice.ready { color: #106a5c; background: #eefaf7; }
.provider-notice.warn { color: #985414; background: #fff7eb; }
.quick-mode-control { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 10px 16px 0; color: #717a91; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.quick-mode-control strong { color: var(--accent-dark); font-size: 11px; letter-spacing: normal; text-transform: none; }
.tutor-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 16px 0; }
.tutor-quick-actions .small-button { min-width: 0; padding-inline: 6px; font-size: 11px; }
.selected-step { margin: 10px 16px 0; padding: 8px 10px; border-left: 3px solid #8e87e8; border-radius: 0 6px 6px 0; color: #5f6090; background: #f6f5ff; font-size: 11px; }
.chat-log { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; padding: 18px 16px; overscroll-behavior: contain; }
.chat-empty { margin: auto 0; color: var(--muted); text-align: center; line-height: 1.5; font-size: 13px; }
.chat-message { max-width: 94%; padding: 10px 11px; border-radius: 11px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.chat-message.user { align-self: flex-end; color: #312c81; background: #eeedff; border-bottom-right-radius: 3px; }
.chat-message.assistant { align-self: flex-start; color: #3d465a; background: #f6f7fa; border-bottom-left-radius: 3px; }
.chat-message.tutor-error-message { color: #8b3348; background: #fff4f5; border: 1px solid #efcbd2; border-left: 3px solid var(--red); }
.retry-tutor-button { display: block; margin-top: 8px; padding: 5px 8px; border: 1px solid #c88a98; border-radius: 6px; color: #8b3348; background: white; font-size: 11px; font-weight: 750; }
.retry-tutor-button:hover:not(:disabled) { border-color: #a95066; color: #70253a; background: #fffafb; }
.retry-tutor-button:disabled { cursor: wait; opacity: .62; }
.chat-math { min-width: 0; color: #302b95; background: transparent; pointer-events: none; }
math-field.chat-math { border: 0; padding: 0; }
math-field.chat-math.inline { display: inline-block; width: auto; min-height: 0; margin: 0 2px; vertical-align: -0.17em; font-size: 1.04em; }
math-field.chat-math.display { display: block; width: 100%; min-height: 30px; margin: 6px 0; padding: 4px 0; overflow-x: auto; font-size: 1.08em; }
code.chat-math { border-radius: 4px; padding: 1px 3px; color: #302b95; background: #eeedff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; white-space: pre-wrap; }
code.chat-math.display { display: block; margin: 6px 0; padding: 5px 6px; overflow-x: auto; }
.thinking-message { display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; color: #5e6296; background: #f4f3ff; }
.thinking-message i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: tutor-thinking 900ms ease-in-out infinite; }
.thinking-message i:nth-child(2) { animation-delay: 120ms; }
.thinking-message i:nth-child(3) { animation-delay: 240ms; }
.thinking-message span { margin-left: 3px; }
.pending-actions { display: contents; }
.action-card { margin: 0 0 9px; padding: 10px; border: 1px solid #dddaf9; border-radius: 8px; background: #fbfaff; }
.action-card strong { display: block; font-size: 11px; color: #514aa8; margin-bottom: 5px; }
.action-card p { margin: 0 0 7px; color: #59627b; white-space: pre-wrap; font-size: 12px; line-height: 1.35; }
.action-math-preview { display: block; width: 100%; min-height: 33px; margin: 1px 0 9px; padding: 6px 7px; border: 1px solid #e1dff6; border-radius: 6px; color: #2e2b88; background: white; font-size: 15px; pointer-events: none; overflow-wrap: anywhere; }
code.action-math-preview { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; white-space: pre-wrap; }
.exercise-statement-preview { margin: 1px 0 9px; padding: 6px 7px; border: 1px solid #e1dff6; border-radius: 6px; color: #2e2b88; background: white; overflow-wrap: anywhere; }
.statement-text-preview { color: #59627b; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.statement-text-preview .chat-math.display { display: block; margin: 7px 0; }
.action-card-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.action-card button { padding: 5px 7px; border: 1px solid #b9b4f0; border-radius: 6px; color: #4840ac; background: white; font-size: 11px; font-weight: 700; }
.action-card button:hover { background: #edecff; }
.action-card .dismiss-action { border-color: #d8dbe5; color: #727b90; }
.action-card .dismiss-action:hover { color: #4d5670; background: #f4f5f8; }
.assistant-settings { margin: 0 16px; border: 1px solid #e1e3ed; border-radius: 10px; background: #fafbfe; }
.assistant-settings[open] { padding: 12px; }
.assistant-settings summary { cursor: pointer; list-style: none; padding: 9px 10px; }
.assistant-settings summary::-webkit-details-marker { display: none; }
.assistant-settings summary::after { content: "⌄"; color: #737c94; font-size: 14px; }
.assistant-settings[open] summary { padding: 0 0 10px; }
.assistant-settings[open] summary::after { transform: rotate(180deg); }
.assistant-settings-heading, .reasoning-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.assistant-settings-heading > span, .reasoning-heading > span { color: #4d5670; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.assistant-settings-heading small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.assistant-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.assistant-settings label { display: grid; gap: 4px; color: #778097; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.assistant-settings .model-field { grid-column: 1 / -1; }
.assistant-settings select, .assistant-settings input:not([type="range"]) { width: 100%; height: 32px; padding: 5px 8px; border: 1px solid #d9dce6; border-radius: 7px; color: var(--ink); background: white; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: normal; }
.assistant-settings input.invalid { border-color: #c26b7f; background: #fff7f8; }
.reasoning-control { margin-top: 11px; }
.reasoning-heading output { color: var(--accent-dark); font-size: 11px; font-weight: 750; }
.reasoning-control input[type="range"] { width: 100%; height: 18px; margin: 6px 0 0; accent-color: var(--accent); }
.reasoning-scale { display: flex; justify-content: space-between; gap: 3px; color: #7a8297; font-size: 9px; line-height: 1; }
.reasoning-scale span { overflow: hidden; text-overflow: ellipsis; }
.reasoning-scale span.active { color: var(--accent-dark); font-weight: 800; }
.reasoning-control.disabled { opacity: .58; }
.chat-form { border-top: 1px solid var(--line); padding: 11px 16px 12px; }
.chat-form textarea { width: 100%; resize: none; padding: 10px; border: 1px solid #d8dbe6; border-radius: 8px; color: var(--ink); line-height: 1.4; outline: 0; }
.chat-form textarea:focus { border-color: #8d87e3; box-shadow: 0 0 0 3px rgba(75, 68, 212, .1); }
.chat-attachments { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 7px; }
.attach-button { padding: 5px 8px; border: 1px solid #d8dbe6; border-radius: 6px; color: #59627b; background: white; font-size: 11px; font-weight: 750; }
.attach-button:hover:not(:disabled) { border-color: #aaa5ed; color: var(--accent-dark); background: #f8f7ff; }
.attach-button:disabled { cursor: not-allowed; opacity: .52; }
.image-file-list { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.image-file-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 150px; padding: 3px 5px 3px 3px; border: 1px solid #dedcf5; border-radius: 6px; color: #555d75; background: #faf9ff; font-size: 10px; }
.image-file-chip img { width: 23px; height: 23px; border-radius: 4px; object-fit: cover; }
.image-file-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remove-image-button { border: 0; padding: 0 2px; color: #7d8599; background: transparent; font-size: 15px; line-height: 1; }
.remove-image-button:hover { color: var(--red); }
.image-check-card { margin: 0 0 9px; padding: 10px; border: 1px solid #dddaf9; border-left: 4px solid var(--teal); border-radius: 8px; background: #fbfaff; }
.image-check-header { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.image-check-card.mismatch { border-color: #efcbd2; border-left-color: var(--red); background: #fffafb; }
.image-check-card.uncertain { border-color: #eadcb5; border-left-color: #c49a42; background: #fffdf7; }
.image-check-card strong { display: block; margin-bottom: 5px; color: #514aa8; font-size: 11px; }
.dismiss-image-check { flex: 0 0 auto; border: 0; border-radius: 5px; padding: 2px 4px; color: #727b90; background: transparent; font-size: 11px; font-weight: 700; }
.dismiss-image-check:hover { color: #4d5670; background: rgba(125, 118, 194, .1); }
.image-check-card.mismatch strong { color: #9b3f57; }
.image-check-card.uncertain strong { color: #92722b; }
.image-check-card p { margin: 0 0 7px; color: #59627b; font-size: 12px; line-height: 1.35; }
.image-check-details { margin-top: 8px; border-top: 1px solid rgba(125, 118, 194, .16); }
.image-check-details summary { cursor: pointer; padding: 8px 0 2px; color: #514aa8; font-size: 11px; font-weight: 750; list-style: none; }
.image-check-details summary::-webkit-details-marker { display: none; }
.image-check-details summary::after { content: "⌄"; display: inline-block; margin-left: 5px; color: #737c94; font-size: 13px; transition: transform 150ms ease; }
.image-check-details[open] summary::after { transform: rotate(180deg); }
.image-check-details-content { padding-top: 2px; }
.image-check-field { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(125, 118, 194, .16); }
.image-check-field strong { margin-bottom: 3px; color: #727a91; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.image-check-value { color: #414a64; font-size: 12px; line-height: 1.4; white-space: pre-wrap; }
.image-check-value .chat-math.display { display: block; margin: 5px 0; }
.image-check-list.differences { color: #9b3f57; }
.chat-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 7px; }
@keyframes tutor-thinking { 0%, 100% { transform: translateY(0); opacity: .35; } 45% { transform: translateY(-3px); opacity: 1; } }
.send-button { margin-left: auto; padding: 7px 10px; color: white; background: var(--accent); font-size: 12px; font-weight: 700; }
.send-button:disabled { cursor: wait; opacity: .65; }

.template-dialog { width: min(660px, calc(100vw - 36px)); max-height: min(720px, calc(100vh - 36px)); padding: 0; border: 0; border-radius: 13px; box-shadow: 0 22px 70px rgba(23, 29, 63, .25); overflow: hidden; }
.template-dialog::backdrop { background: rgba(25, 28, 51, .36); }
.template-dialog form { max-height: inherit; padding: 20px; overflow-y: auto; overflow-x: hidden; }
.template-dialog header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 17px; }
.template-dialog h2 { margin: 2px 0 0; letter-spacing: -.03em; }
.icon-button { border: 0; border-radius: 7px; background: transparent; color: #697189; font-size: 21px; line-height: 1; padding: 5px 7px; }
.icon-button:hover { background: #f1f2f7; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.template-choice { min-width: 0; min-height: 88px; padding: 11px; border: 1px solid #e0e2ec; border-radius: 8px; text-align: left; background: white; }
.template-choice:hover { border-color: #9d97e8; background: #faf9ff; }
.template-choice strong { display: block; color: #4f5870; font-size: 11px; }
.template-preview { display: block; width: 100%; min-width: 0; min-height: 28px; margin-top: 7px; color: #302b95; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; white-space: normal; pointer-events: none; }
code.template-preview { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
math-field.template-preview { padding: 0; border: 0; background: transparent; overflow: hidden; }
.template-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.mate-dialog { width: min(460px, calc(100vw - 36px)); padding: 0; border: 0; border-radius: 13px; box-shadow: 0 22px 70px rgba(23, 29, 63, .25); }
.mate-dialog::backdrop { background: rgba(25, 28, 51, .36); }
.mate-dialog form { padding: 20px; }
.mate-dialog header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.mate-dialog h2 { margin: 2px 0 0; letter-spacing: -.03em; }
.dialog-description { margin: 12px 0 0; color: #667087; font-size: 13px; line-height: 1.45; }
.dialog-fields { display: grid; gap: 12px; margin-top: 18px; }
.dialog-fields label { display: grid; gap: 5px; color: #59627b; font-size: 11px; font-weight: 750; }
.dialog-fields input, .dialog-fields select, .dialog-fields textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #d8dbe6; border-radius: 8px; color: var(--ink); background: white; resize: vertical; line-height: 1.4; }
.dialog-fields input:disabled { cursor: not-allowed; opacity: .55; }
.dialog-fields input:focus, .dialog-fields select:focus, .dialog-fields textarea:focus { border-color: #8d87e3; box-shadow: 0 0 0 3px rgba(75, 68, 212, .1); outline: 0; }
.dialog-file-list { color: #7c8498; font-size: 10px; font-weight: 500; line-height: 1.35; }
.dialog-auxiliary-actions { display: flex; justify-content: flex-start; margin-top: -3px; }
.dialog-auxiliary-button { padding: 7px 9px; border: 1px solid #d8d5f6; border-radius: 7px; color: var(--accent-dark); background: #f8f7ff; font-size: 11px; font-weight: 750; }
.dialog-auxiliary-button:hover { border-color: #aaa5ed; background: #efeeff; }
.dialog-auxiliary-button:disabled { cursor: wait; opacity: .62; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; }
.toast { z-index: 100; position: fixed; right: 20px; bottom: 20px; max-width: min(420px, calc(100vw - 40px)); padding: 12px 14px; border-radius: 9px; color: white; background: #94364c; box-shadow: 0 12px 30px rgba(38, 42, 70, .2); font-size: 13px; line-height: 1.4; opacity: 0; pointer-events: none; transform: translateY(10px); transition: 160ms ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast[data-kind="success"] { background: #197f6d; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --ink: #edf0ff;
    --muted: #aeb6cc;
    --line: #303952;
    --panel: #161c2c;
    --canvas: #0e1320;
    --accent: #9892ff;
    --accent-dark: #c0bcff;
    --accent-soft: #2a2b55;
    --teal: #58cdb9;
    --orange: #f4b56f;
    --red: #ff91a7;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  }

  html:not([data-theme="light"]) button:focus-visible, html:not([data-theme="light"]) input:focus-visible, html:not([data-theme="light"]) select:focus-visible, html:not([data-theme="light"]) textarea:focus-visible, html:not([data-theme="light"]) math-field:focus-visible { outline-color: rgba(152, 146, 255, .48); }
  html:not([data-theme="light"]) .initial-loading-card { border-color: #35405a; box-shadow: 0 18px 48px rgba(0, 0, 0, .38); }
  html:not([data-theme="light"]) .initial-loading-spinner { border-color: #3a3a67; }
  html:not([data-theme="light"]) .secondary-button { border-color: #49536e; background: #20283a; }
  html:not([data-theme="light"]) .secondary-button:hover { background: #2a3449; }
  html:not([data-theme="light"]) .small-button:hover { background: #38376b; }
  html:not([data-theme="light"]) .tree-toggle:hover, html:not([data-theme="light"]) .sheet-item:hover { background: #222b3e; }
  html:not([data-theme="light"]) .section-heading, html:not([data-theme="light"]) .sheet-item, html:not([data-theme="light"]) .tree-menu-item { color: #c2c9da; }
  html:not([data-theme="light"]) .tree-icon, html:not([data-theme="light"]) .tree-action { color: #a8b2ca; }
  html:not([data-theme="light"]) .tree-action:hover, html:not([data-theme="light"]) .tree-menu[open] > summary { border-color: #615fc0; color: var(--accent-dark); background: #2b2b59; }
  html:not([data-theme="light"]) .tree-menu-popover { border-color: #3c4761; background: #20283a; box-shadow: 0 10px 25px rgba(0, 0, 0, .42); }
  html:not([data-theme="light"]) .tree-menu-item:hover { color: var(--accent-dark); background: #2b2b59; }
  html:not([data-theme="light"]) .tree-menu-item-danger:hover { color: #ffb0bd; background: #4a2837; }
  html:not([data-theme="light"]) .storage-button { border-color: #39445e; background: #1b2334; }
  html:not([data-theme="light"]) .storage-button:hover { border-color: #615fc0; background: #2b2b59; }
  html:not([data-theme="light"]) .sheet-area { background: radial-gradient(circle at 50% 0%, #1e273b 0, #141b2b 46%, #0d1320 100%); }
  html:not([data-theme="light"]) .sheet-toolbar button { border-color: #46516b; color: #d5dbee; background: #20283a; }
  html:not([data-theme="light"]) .sheet-toolbar button:hover { border-color: #7773d8; background: #2b2b59; }
  html:not([data-theme="light"]) .verification-result.verified, html:not([data-theme="light"]) .provider-notice.ready { color: #8ce7d6; background: #143b3a; border-color: #286a61; }
  html:not([data-theme="light"]) .verification-result.not_equivalent { color: #ffadbd; background: #482633; border-color: #874257; }
  html:not([data-theme="light"]) .verification-result.out_of_scope, html:not([data-theme="light"]) .provider-notice.warn { color: #f6c785; background: #46351f; border-color: #80613b; }
  html:not([data-theme="light"]) .transform-panel { border-color: #4c4a88; background: #202543; }
  html:not([data-theme="light"]) .transform-heading .eyebrow { color: #b7b2ff; }
  html:not([data-theme="light"]) .transform-heading strong { color: #d5d3ff; }
  html:not([data-theme="light"]) .transform-heading p { color: #b6bfd4; }
  html:not([data-theme="light"]) .transform-secondary { border-color: #6662bd; color: #cbc8ff; background: #252d42; }
  html:not([data-theme="light"]) .transform-secondary:hover { border-color: #9892ff; background: #323160; }
  html:not([data-theme="light"]) .empty-sheet { border-color: #4a566f; background: rgba(27, 35, 52, .76); }
  html:not([data-theme="light"]) .sheet-block { background: #1a2233; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
  html:not([data-theme="light"]) .sheet-block:hover { border-color: #56627e; }
  html:not([data-theme="light"]) .block-drag-handle:hover, html:not([data-theme="light"]) .block-drag-handle:focus-visible { background: #2b2b59; }
  html:not([data-theme="light"]) .block-drop-preview { border-color: #9892ff; color: #d1ceff; background: rgba(43, 43, 89, .72); }
  html:not([data-theme="light"]) .sheet-block.selected, html:not([data-theme="light"]) .sheet-problem-card.selected { border-color: #9892ff; box-shadow: 0 0 0 3px rgba(152, 146, 255, .2); }
  html:not([data-theme="light"]) .sheet-block.annotation { background: #172c31; }
  html:not([data-theme="light"]) .sheet-block.annotation.tone-hint, html:not([data-theme="light"]) .inline-suggestion { background: #24243f; }
  html:not([data-theme="light"]) .sheet-block.annotation.tone-error { background: #3b232d; }
  html:not([data-theme="light"]) .sheet-block.annotation.tone-success { background: #172e2c; }
  html:not([data-theme="light"]) .sheet-problem-card { border-color: #4a4d78; background: linear-gradient(180deg, #20283a 0%, #191f30 100%); }
  html:not([data-theme="light"]) .problem-readonly-label, html:not([data-theme="light"]) .block-origin { color: #aeb6ca; }
  html:not([data-theme="light"]) .problem-content { border-color: #3e4961; color: #e0e5f5; background: #131a29; }
  html:not([data-theme="light"]) .block-kind { color: #b8c0d5; }
  html:not([data-theme="light"]) .block-actions button, html:not([data-theme="light"]) .remove-image-button { color: #aeb8ce; }
  html:not([data-theme="light"]) .block-actions button:hover { background: #2b2b59; }
  html:not([data-theme="light"]) .block-actions .block-delete:hover { background: #4a2837; }
  html:not([data-theme="light"]) .text-editor { color: #e0e5f5; }
  html:not([data-theme="light"]) .math-editor, html:not([data-theme="light"]) .math-fallback { border-color: #3e4961; color: var(--ink); background: #131a29; }
  html:not([data-theme="light"]) .annotation-content { color: #d5ddec; }
  html:not([data-theme="light"]) .block-explanation { color: #c2cadc; }
  html:not([data-theme="light"]) .block-continuation { border-color: #333e56; }
  html:not([data-theme="light"]) .block-continuation span { color: #b2bbd1; }
  html:not([data-theme="light"]) .block-continuation button { border-color: #49546e; color: #d1d8e9; background: #20283a; }
  html:not([data-theme="light"]) .block-continuation .continue-copy { border-color: #6662bd; color: #cbc8ff; background: #29294f; }
  html:not([data-theme="light"]) .block-continuation button:hover { border-color: #8883ea; background: #2b2b59; }
  html:not([data-theme="light"]) .eyebrow { color: #b0b9ce; }
  html:not([data-theme="light"]) .provider-connection-status { border-color: #286a61; color: #9aeadd; background: #143b3a; }
  html:not([data-theme="light"]) .provider-notice { color: #c1c9dc; background: #202737; }
  html:not([data-theme="light"]) .quick-mode-control { color: #bbc3d5; }
  html:not([data-theme="light"]) .selected-step { border-left-color: #9892ff; color: #cfccff; background: #2a2a51; }
  html:not([data-theme="light"]) .chat-message.user { color: #e1dfff; background: #302e63; }
  html:not([data-theme="light"]) .chat-message.assistant { color: #e0e5f5; background: #252e40; }
  html:not([data-theme="light"]) .chat-message.tutor-error-message { color: #ffc1ce; background: #3b232d; border-color: #874257; }
  html:not([data-theme="light"]) .retry-tutor-button { border-color: #b75a70; color: #ffd0d9; background: #242c40; }
  html:not([data-theme="light"]) .retry-tutor-button:hover:not(:disabled) { border-color: #ef8ca1; color: #ffe8ed; background: #3b2d46; }
  html:not([data-theme="light"]) .chat-math, html:not([data-theme="light"]) code.chat-math { color: #c8c5ff; }
  html:not([data-theme="light"]) code.chat-math { background: #302e63; }
  html:not([data-theme="light"]) .thinking-message { color: #cbc9ff; background: #2b2b59; }
  html:not([data-theme="light"]) .action-card, html:not([data-theme="light"]) .image-check-card { border-color: #4a4a83; background: #24243f; }
  html:not([data-theme="light"]) .action-card strong, html:not([data-theme="light"]) .image-check-card strong { color: #c9c6ff; }
  html:not([data-theme="light"]) .action-card p, html:not([data-theme="light"]) .statement-text-preview, html:not([data-theme="light"]) .image-check-card p { color: #c7cfdf; }
  html:not([data-theme="light"]) .action-math-preview, html:not([data-theme="light"]) .exercise-statement-preview { border-color: #49477d; color: #c8c5ff; background: #171e2d; }
  html:not([data-theme="light"]) .action-card button { border-color: #706bd1; color: #d1ceff; background: #242c40; }
  html:not([data-theme="light"]) .action-card button:hover { background: #38376b; }
  html:not([data-theme="light"]) .action-card .dismiss-action { border-color: #4b566e; color: #c1c9d9; }
  html:not([data-theme="light"]) .action-card .dismiss-action:hover { color: #e1e6f5; background: #303a4e; }
  html:not([data-theme="light"]) .assistant-settings { border-color: #3d4861; background: #1c2536; }
  html:not([data-theme="light"]) .assistant-settings summary::after, html:not([data-theme="light"]) .assistant-settings-heading > span, html:not([data-theme="light"]) .reasoning-heading > span, html:not([data-theme="light"]) .assistant-settings label, html:not([data-theme="light"]) .reasoning-scale { color: #bac3d6; }
  html:not([data-theme="light"]) .assistant-settings select, html:not([data-theme="light"]) .assistant-settings input:not([type="range"]), html:not([data-theme="light"]) .chat-form textarea, html:not([data-theme="light"]) .attach-button, html:not([data-theme="light"]) .dialog-fields input, html:not([data-theme="light"]) .dialog-fields select, html:not([data-theme="light"]) .dialog-fields textarea { border-color: #46516a; color: var(--ink); background: #141b2a; }
  html:not([data-theme="light"]) .assistant-settings input.invalid { border-color: #b75a70; background: #3b242d; }
  html:not([data-theme="light"]) .chat-form textarea:focus, html:not([data-theme="light"]) .dialog-fields input:focus, html:not([data-theme="light"]) .dialog-fields select:focus, html:not([data-theme="light"]) .dialog-fields textarea:focus { border-color: #9892ff; box-shadow: 0 0 0 3px rgba(152, 146, 255, .18); }
  html:not([data-theme="light"]) .attach-button { color: #ccd3e4; }
  html:not([data-theme="light"]) .attach-button:hover:not(:disabled) { border-color: #8883ea; background: #2b2b59; }
  html:not([data-theme="light"]) .image-file-chip { border-color: #4a4a83; color: #c9d0e1; background: #24243f; }
  html:not([data-theme="light"]) .image-check-card.mismatch { border-color: #874257; background: #3b232d; }
  html:not([data-theme="light"]) .image-check-card.uncertain { border-color: #80613b; background: #3f3222; }
  html:not([data-theme="light"]) .image-check-card.mismatch strong, html:not([data-theme="light"]) .image-check-list.differences { color: #ffadbd; }
  html:not([data-theme="light"]) .image-check-card.uncertain strong { color: #f6c785; }
  html:not([data-theme="light"]) .image-check-details { border-color: rgba(183, 178, 255, .25); }
  html:not([data-theme="light"]) .image-check-details summary { color: #c9c6ff; }
  html:not([data-theme="light"]) .image-check-field { border-color: rgba(183, 178, 255, .25); }
  html:not([data-theme="light"]) .image-check-field strong { color: #bec7da; }
  html:not([data-theme="light"]) .image-check-value { color: #d6ddec; }
  html:not([data-theme="light"]) .template-dialog, html:not([data-theme="light"]) .mate-dialog { color: var(--ink); background: var(--panel); box-shadow: 0 22px 70px rgba(0, 0, 0, .55); }
  html:not([data-theme="light"]) .template-dialog::backdrop, html:not([data-theme="light"]) .mate-dialog::backdrop { background: rgba(0, 0, 0, .6); }
  html:not([data-theme="light"]) .icon-button { color: #c0c9dc; }
  html:not([data-theme="light"]) .icon-button:hover { background: #293247; }
  html:not([data-theme="light"]) .template-choice { border-color: #414c65; background: #1d2637; }
  html:not([data-theme="light"]) .template-choice:hover { border-color: #817ce2; background: #29294f; }
  html:not([data-theme="light"]) .template-choice strong { color: #d1d8e9; }
  html:not([data-theme="light"]) .template-preview { color: #c8c5ff; }
  html:not([data-theme="light"]) .dialog-description, html:not([data-theme="light"]) .dialog-fields label { color: #c5cddd; }
  html:not([data-theme="light"]) .dialog-file-list { color: #b4bed2; }
  html:not([data-theme="light"]) .dialog-auxiliary-button { border-color: #625ec0; background: #29294f; }
  html:not([data-theme="light"]) .dialog-auxiliary-button:hover { border-color: #8883ea; background: #38376b; }

}

/* Preferencia explícita elegida desde el diálogo de Preferencias. */
  html[data-theme="dark"] {
    --ink: #edf0ff;
    --muted: #aeb6cc;
    --line: #303952;
    --panel: #161c2c;
    --canvas: #0e1320;
    --accent: #9892ff;
    --accent-dark: #c0bcff;
    --accent-soft: #2a2b55;
    --teal: #58cdb9;
    --orange: #f4b56f;
    --red: #ff91a7;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  }

  html[data-theme="dark"] button:focus-visible, html[data-theme="dark"] input:focus-visible, html[data-theme="dark"] select:focus-visible, html[data-theme="dark"] textarea:focus-visible, html[data-theme="dark"] math-field:focus-visible { outline-color: rgba(152, 146, 255, .48); }
  html[data-theme="dark"] .initial-loading-card { border-color: #35405a; box-shadow: 0 18px 48px rgba(0, 0, 0, .38); }
  html[data-theme="dark"] .initial-loading-spinner { border-color: #3a3a67; }
  html[data-theme="dark"] .secondary-button { border-color: #49536e; background: #20283a; }
  html[data-theme="dark"] .secondary-button:hover { background: #2a3449; }
  html[data-theme="dark"] .small-button:hover { background: #38376b; }
  html[data-theme="dark"] .tree-toggle:hover, html[data-theme="dark"] .sheet-item:hover { background: #222b3e; }
  html[data-theme="dark"] .section-heading, html[data-theme="dark"] .sheet-item, html[data-theme="dark"] .tree-menu-item { color: #c2c9da; }
  html[data-theme="dark"] .tree-icon, html[data-theme="dark"] .tree-action { color: #a8b2ca; }
  html[data-theme="dark"] .tree-action:hover, html[data-theme="dark"] .tree-menu[open] > summary { border-color: #615fc0; color: var(--accent-dark); background: #2b2b59; }
  html[data-theme="dark"] .tree-menu-popover { border-color: #3c4761; background: #20283a; box-shadow: 0 10px 25px rgba(0, 0, 0, .42); }
  html[data-theme="dark"] .tree-menu-item:hover { color: var(--accent-dark); background: #2b2b59; }
  html[data-theme="dark"] .tree-menu-item-danger:hover { color: #ffb0bd; background: #4a2837; }
  html[data-theme="dark"] .storage-button { border-color: #39445e; background: #1b2334; }
  html[data-theme="dark"] .storage-button:hover { border-color: #615fc0; background: #2b2b59; }
  html[data-theme="dark"] .sheet-area { background: radial-gradient(circle at 50% 0%, #1e273b 0, #141b2b 46%, #0d1320 100%); }
  html[data-theme="dark"] .sheet-toolbar button { border-color: #46516b; color: #d5dbee; background: #20283a; }
  html[data-theme="dark"] .sheet-toolbar button:hover { border-color: #7773d8; background: #2b2b59; }
  html[data-theme="dark"] .verification-result.verified, html[data-theme="dark"] .provider-notice.ready { color: #8ce7d6; background: #143b3a; border-color: #286a61; }
  html[data-theme="dark"] .verification-result.not_equivalent { color: #ffadbd; background: #482633; border-color: #874257; }
  html[data-theme="dark"] .verification-result.out_of_scope, html[data-theme="dark"] .provider-notice.warn { color: #f6c785; background: #46351f; border-color: #80613b; }
  html[data-theme="dark"] .transform-panel { border-color: #4c4a88; background: #202543; }
  html[data-theme="dark"] .transform-heading .eyebrow { color: #b7b2ff; }
  html[data-theme="dark"] .transform-heading strong { color: #d5d3ff; }
  html[data-theme="dark"] .transform-heading p { color: #b6bfd4; }
  html[data-theme="dark"] .transform-secondary { border-color: #6662bd; color: #cbc8ff; background: #252d42; }
  html[data-theme="dark"] .transform-secondary:hover { border-color: #9892ff; background: #323160; }
  html[data-theme="dark"] .empty-sheet { border-color: #4a566f; background: rgba(27, 35, 52, .76); }
  html[data-theme="dark"] .sheet-block { background: #1a2233; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
  html[data-theme="dark"] .sheet-block:hover { border-color: #56627e; }
  html[data-theme="dark"] .block-drag-handle:hover, html[data-theme="dark"] .block-drag-handle:focus-visible { background: #2b2b59; }
  html[data-theme="dark"] .block-drop-preview { border-color: #9892ff; color: #d1ceff; background: rgba(43, 43, 89, .72); }
  html[data-theme="dark"] .sheet-block.selected, html[data-theme="dark"] .sheet-problem-card.selected { border-color: #9892ff; box-shadow: 0 0 0 3px rgba(152, 146, 255, .2); }
  html[data-theme="dark"] .sheet-block.annotation { background: #172c31; }
  html[data-theme="dark"] .sheet-block.annotation.tone-hint, html[data-theme="dark"] .inline-suggestion { background: #24243f; }
  html[data-theme="dark"] .sheet-block.annotation.tone-error { background: #3b232d; }
  html[data-theme="dark"] .sheet-block.annotation.tone-success { background: #172e2c; }
  html[data-theme="dark"] .sheet-problem-card { border-color: #4a4d78; background: linear-gradient(180deg, #20283a 0%, #191f30 100%); }
  html[data-theme="dark"] .problem-readonly-label, html[data-theme="dark"] .block-origin { color: #aeb6ca; }
  html[data-theme="dark"] .problem-content { border-color: #3e4961; color: #e0e5f5; background: #131a29; }
  html[data-theme="dark"] .block-kind { color: #b8c0d5; }
  html[data-theme="dark"] .block-actions button, html[data-theme="dark"] .remove-image-button { color: #aeb8ce; }
  html[data-theme="dark"] .block-actions button:hover { background: #2b2b59; }
  html[data-theme="dark"] .block-actions .block-delete:hover { background: #4a2837; }
  html[data-theme="dark"] .text-editor { color: #e0e5f5; }
  html[data-theme="dark"] .math-editor, html[data-theme="dark"] .math-fallback { border-color: #3e4961; color: var(--ink); background: #131a29; }
  html[data-theme="dark"] .annotation-content { color: #d5ddec; }
  html[data-theme="dark"] .block-explanation { color: #c2cadc; }
  html[data-theme="dark"] .block-continuation { border-color: #333e56; }
  html[data-theme="dark"] .block-continuation span { color: #b2bbd1; }
  html[data-theme="dark"] .block-continuation button { border-color: #49546e; color: #d1d8e9; background: #20283a; }
  html[data-theme="dark"] .block-continuation .continue-copy { border-color: #6662bd; color: #cbc8ff; background: #29294f; }
  html[data-theme="dark"] .block-continuation button:hover { border-color: #8883ea; background: #2b2b59; }
  html[data-theme="dark"] .eyebrow { color: #b0b9ce; }
  html[data-theme="dark"] .provider-connection-status { border-color: #286a61; color: #9aeadd; background: #143b3a; }
  html[data-theme="dark"] .provider-notice { color: #c1c9dc; background: #202737; }
  html[data-theme="dark"] .quick-mode-control { color: #bbc3d5; }
  html[data-theme="dark"] .selected-step { border-left-color: #9892ff; color: #cfccff; background: #2a2a51; }
  html[data-theme="dark"] .chat-message.user { color: #e1dfff; background: #302e63; }
  html[data-theme="dark"] .chat-message.assistant { color: #e0e5f5; background: #252e40; }
  html[data-theme="dark"] .chat-message.tutor-error-message { color: #ffc1ce; background: #3b232d; border-color: #874257; }
  html[data-theme="dark"] .retry-tutor-button { border-color: #b75a70; color: #ffd0d9; background: #242c40; }
  html[data-theme="dark"] .retry-tutor-button:hover:not(:disabled) { border-color: #ef8ca1; color: #ffe8ed; background: #3b2d46; }
  html[data-theme="dark"] .chat-math, html[data-theme="dark"] code.chat-math { color: #c8c5ff; }
  html[data-theme="dark"] code.chat-math { background: #302e63; }
  html[data-theme="dark"] .thinking-message { color: #cbc9ff; background: #2b2b59; }
  html[data-theme="dark"] .action-card, html[data-theme="dark"] .image-check-card { border-color: #4a4a83; background: #24243f; }
  html[data-theme="dark"] .action-card strong, html[data-theme="dark"] .image-check-card strong { color: #c9c6ff; }
  html[data-theme="dark"] .action-card p, html[data-theme="dark"] .statement-text-preview, html[data-theme="dark"] .image-check-card p { color: #c7cfdf; }
  html[data-theme="dark"] .action-math-preview, html[data-theme="dark"] .exercise-statement-preview { border-color: #49477d; color: #c8c5ff; background: #171e2d; }
  html[data-theme="dark"] .action-card button { border-color: #706bd1; color: #d1ceff; background: #242c40; }
  html[data-theme="dark"] .action-card button:hover { background: #38376b; }
  html[data-theme="dark"] .action-card .dismiss-action { border-color: #4b566e; color: #c1c9d9; }
  html[data-theme="dark"] .action-card .dismiss-action:hover { color: #e1e6f5; background: #303a4e; }
  html[data-theme="dark"] .assistant-settings { border-color: #3d4861; background: #1c2536; }
  html[data-theme="dark"] .assistant-settings summary::after, html[data-theme="dark"] .assistant-settings-heading > span, html[data-theme="dark"] .reasoning-heading > span, html[data-theme="dark"] .assistant-settings label, html[data-theme="dark"] .reasoning-scale { color: #bac3d6; }
  html[data-theme="dark"] .assistant-settings select, html[data-theme="dark"] .assistant-settings input:not([type="range"]), html[data-theme="dark"] .chat-form textarea, html[data-theme="dark"] .attach-button, html[data-theme="dark"] .dialog-fields input, html[data-theme="dark"] .dialog-fields select, html[data-theme="dark"] .dialog-fields textarea { border-color: #46516a; color: var(--ink); background: #141b2a; }
  html[data-theme="dark"] .assistant-settings input.invalid { border-color: #b75a70; background: #3b242d; }
  html[data-theme="dark"] .chat-form textarea:focus, html[data-theme="dark"] .dialog-fields input:focus, html[data-theme="dark"] .dialog-fields select:focus, html[data-theme="dark"] .dialog-fields textarea:focus { border-color: #9892ff; box-shadow: 0 0 0 3px rgba(152, 146, 255, .18); }
  html[data-theme="dark"] .attach-button { color: #ccd3e4; }
  html[data-theme="dark"] .attach-button:hover:not(:disabled) { border-color: #8883ea; background: #2b2b59; }
  html[data-theme="dark"] .image-file-chip { border-color: #4a4a83; color: #c9d0e1; background: #24243f; }
  html[data-theme="dark"] .image-check-card.mismatch { border-color: #874257; background: #3b232d; }
  html[data-theme="dark"] .image-check-card.uncertain { border-color: #80613b; background: #3f3222; }
  html[data-theme="dark"] .image-check-card.mismatch strong, html[data-theme="dark"] .image-check-list.differences { color: #ffadbd; }
  html[data-theme="dark"] .image-check-card.uncertain strong { color: #f6c785; }
  html[data-theme="dark"] .image-check-details { border-color: rgba(183, 178, 255, .25); }
  html[data-theme="dark"] .image-check-details summary { color: #c9c6ff; }
  html[data-theme="dark"] .image-check-field { border-color: rgba(183, 178, 255, .25); }
  html[data-theme="dark"] .image-check-field strong { color: #bec7da; }
  html[data-theme="dark"] .image-check-value { color: #d6ddec; }
  html[data-theme="dark"] .template-dialog, html[data-theme="dark"] .mate-dialog { color: var(--ink); background: var(--panel); box-shadow: 0 22px 70px rgba(0, 0, 0, .55); }
  html[data-theme="dark"] .template-dialog::backdrop, html[data-theme="dark"] .mate-dialog::backdrop { background: rgba(0, 0, 0, .6); }
  html[data-theme="dark"] .icon-button { color: #c0c9dc; }
  html[data-theme="dark"] .icon-button:hover { background: #293247; }
  html[data-theme="dark"] .template-choice { border-color: #414c65; background: #1d2637; }
  html[data-theme="dark"] .template-choice:hover { border-color: #817ce2; background: #29294f; }
  html[data-theme="dark"] .template-choice strong { color: #d1d8e9; }
  html[data-theme="dark"] .template-preview { color: #c8c5ff; }
  html[data-theme="dark"] .dialog-description, html[data-theme="dark"] .dialog-fields label { color: #c5cddd; }
  html[data-theme="dark"] .dialog-file-list { color: #b4bed2; }
  html[data-theme="dark"] .dialog-auxiliary-button { border-color: #625ec0; background: #29294f; }
  html[data-theme="dark"] .dialog-auxiliary-button:hover { border-color: #8883ea; background: #38376b; }

@media (max-width: 1120px) {
  .app-shell { --tutor-panel-width: 310px; grid-template-columns: 220px minmax(0, 1fr) var(--tutor-panel-width); }
  .sheet-view { padding-left: 28px; padding-right: 28px; }
  .sheet-header { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 800px) {
  html, body, #app { height: auto; min-height: 100%; overflow: visible; }
  .app-shell { display: block; }
  .app-shell.library-collapsed { display: block; }
  .library-collapsed .library-panel { border-color: var(--line); }
  .library-collapse-button { display: none; }
  .mobile-header { z-index: 10; position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; height: 51px; padding: 0 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 96%, transparent); backdrop-filter: blur(10px); }
  .library-panel, .tutor-panel { z-index: 9; position: fixed; top: 51px; bottom: 0; width: min(335px, 90vw); min-height: 0; transition: transform 180ms ease; box-shadow: var(--shadow); }
  .library-panel { left: 0; transform: translateX(-105%); }
  .tutor-panel { right: 0; transform: translateX(105%); height: auto; }
  .tutor-resize-handle { display: none; }
  .assistant-settings summary { padding: 8px 10px; }
  .chat-form { padding: 9px 12px 10px; }
  .chat-form textarea { padding: 8px 9px; font-size: 14px; }
  .chat-attachments { padding-top: 6px; }
  .chat-form-footer { padding-top: 6px; }
  .library-panel.open, .tutor-panel.open { transform: translateX(0); }
  .sheet-area { height: auto; min-height: calc(100vh - 51px); overflow: visible; }
  .sheet-view { padding: 23px 16px 55px; }
  .toolbar-hint { width: 100%; margin: 4px 0 0; }
  .transform-panel { align-items: stretch; flex-direction: column; }
  .transform-actions { justify-content: flex-start; }
  .block-continuation-actions { width: 100%; justify-content: flex-start; }
  .library-toggle { display: none; }
}
@media (max-width: 490px) {
  .template-grid { grid-template-columns: repeat(2, 1fr); }
}