:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --sidebar: #f7f7f6;
  --surface: #f2f2f0;
  --hover: #ececea;
  --text: #1f1f1e;
  --muted: #6d6d69;
  --border: #e3e3e0;
  --accent: #1f1f1e;
  --on-accent: #ffffff;
  --danger: #b3261e;
  --c-key: #8a3ffc;
  --c-str: #0f7b3f;
  --c-num: #b25000;
  --c-fn: #0b5cad;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #212120;
    --sidebar: #181817;
    --surface: #2f2f2d;
    --hover: #2a2a28;
    --text: #ececea;
    --muted: #a3a39e;
    --border: #3a3a37;
    --accent: #ececea;
    --on-accent: #1f1f1e;
    --danger: #f2877f;
    --c-key: #c9a2ff;
    --c-str: #7fd6a0;
    --c-num: #f0b070;
    --c-fn: #8cc2ff;
  }
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
svg { display: block; flex: none; }

/* Centered screens: login and niche picker */
.center { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.login { width: min(360px, 100%); display: grid; gap: 12px; }
.login h1, .picker h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
.login input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.primary { padding: 12px 14px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 500; }
.primary:disabled { opacity: .5; cursor: default; }
.form-error { color: var(--danger); font-size: 14px; margin: 0; }
.picker { width: min(720px, 100%); }
.picker p { color: var(--muted); margin: 0 0 24px; }
.niche-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.niche-card { display: block; padding: 16px; border: 1px solid var(--border); border-radius: 14px; color: inherit; text-decoration: none; transition: background-color .15s; }
.niche-card:hover { background: var(--surface); }
.niche-card strong { display: block; font-weight: 600; }
.niche-card span { color: var(--muted); font-size: 14px; }

/* Layout */
.app { height: 100%; display: flex; }
.sidebar { width: 264px; flex: none; background: var(--sidebar); display: flex; flex-direction: column; padding: 10px; gap: 2px; transition: width .18s ease; overflow: hidden; }
.brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 8px 8px; min-height: 42px; }
.brand-name { color: inherit; text-decoration: none; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 10px; text-align: left; font-size: 14px; white-space: nowrap; }
a.side-btn { color: inherit; text-decoration: none; }
.side-btn:hover { background: var(--hover); }
.side-btn kbd { margin-left: auto; font: 11px var(--sans); color: var(--muted); }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.side-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 500; padding: 14px 4px 4px 8px; min-height: 40px; }
.history { margin: 0; padding: 0; list-style: none; }
.history li { position: relative; display: flex; align-items: center; border-radius: 10px; }
.history li:hover, .history li.active { background: var(--hover); }
.history li.empty-note:hover { background: none; }
.history a { flex: 1; min-width: 0; padding: 8px; color: inherit; text-decoration: none; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-link { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 8px; font-size: 14px; text-align: left; }
.project-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history .del { padding: 6px; margin-right: 2px; border-radius: 8px; color: var(--muted); opacity: 0; }
.history li:hover .del, .history li.active .del, .history .del:focus-visible { opacity: 1; }
.history .del:hover { color: var(--danger); }
.empty-note { color: var(--muted); font-size: 13px; padding: 6px 8px; margin: 0; }
.side-foot { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }

.app.collapsed .sidebar { width: 0; padding-left: 0; padding-right: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.topbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 52px; }
.topbar-title { font-weight: 600; display: none; }
.app.collapsed .topbar-title { display: inline; }
.spacer { flex: 1; }
.icon-btn { padding: 6px; border-radius: 8px; color: inherit; display: grid; place-items: center; }
.icon-btn:hover { background: var(--hover); }
.icon-btn.mini { padding: 3px; color: var(--muted); }
.only-mobile, .only-collapsed { display: none; }
.app.collapsed .only-collapsed { display: grid; }
.private-btn { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 13px; border: 1px solid transparent; color: var(--muted); }
.private-btn:hover { background: var(--hover); color: var(--text); }
.private-btn[aria-pressed="true"] { border-color: var(--text); color: var(--text); }
.private-note { display: grid; place-items: center; margin-bottom: 10px; }
.app.private .composer { border-style: dashed; }
.scrim { display: none; }

/* Side panel */
.panel { display: none; width: min(46vw, 680px); flex: none; flex-direction: column; border-left: 1px solid var(--border); background: var(--bg); min-width: 0; }
.app.panel-open .panel { display: flex; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 16px; min-height: 52px; border-bottom: 1px solid var(--border); text-transform: capitalize; }
.panel-actions { display: flex; gap: 2px; }
.panel-body { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
.panel-body pre { margin: 0; font: 13.5px/1.6 var(--mono); }

/* Thread */
.thread { flex: 1; overflow-y: auto; min-height: 0; }
.column { width: min(760px, 100%); margin: 0 auto; padding: 0 16px; }
.column.fill { height: 100%; }
.messages { padding: 24px 0 16px; display: flex; flex-direction: column; gap: 24px; }
.msg-user { align-self: flex-end; max-width: 85%; background: var(--surface); padding: 10px 16px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-assistant { min-width: 0; overflow-wrap: anywhere; }
.status { color: var(--muted); font-size: 14px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .status { animation: none; } }
.msg-error { color: var(--danger); font-size: 14px; }

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3 { line-height: 1.3; font-weight: 600; margin: 1.4em 0 .5em; }
.prose h1 { font-size: 1.3em; } .prose h2 { font-size: 1.15em; } .prose h3 { font-size: 1.02em; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre { margin: 0 0 .9em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: .25em 0; }
.prose blockquote { border-left: 3px solid var(--border); padding-left: 14px; color: var(--muted); }
.prose code { font: .9em var(--mono); background: var(--surface); padding: .1em .35em; border-radius: 5px; }
.prose pre { background: var(--surface); padding: 12px 14px; border-radius: 10px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 1.4em 0; }
.prose a { color: inherit; }
.prose .table-wrap { overflow-x: auto; margin: 0 0 .9em; }
.prose table { border-collapse: collapse; font-size: .94em; }
.prose th, .prose td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }

.msg-actions { display: flex; gap: 2px; margin-top: 8px; }
.msg-actions button { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; color: var(--muted); font-size: 13px; }
.msg-actions button:hover { background: var(--hover); color: var(--text); }
.sources { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.sources a { font-size: 13px; color: var(--muted); text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sources a:hover { color: var(--text); background: var(--hover); }

/* Empty state */
.empty { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.empty h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; text-align: center; }
.empty > p { color: var(--muted); text-align: center; margin: 0 0 24px; }
.suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.suggestion { text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; font-size: 14px; font-weight: 500; transition: background-color .15s; }
.suggestion:hover { background: var(--surface); }

/* Code and diagrams */
.code-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 0 0 .9em; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 6px 5px 12px; font-size: 12.5px; color: var(--muted); background: var(--surface); }
.code-actions { display: flex; gap: 2px; }
.code-actions button { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 7px; font-size: 12.5px; color: var(--muted); }
.code-actions button:hover { background: var(--hover); color: var(--text); }
.prose .code-card pre { margin: 0; border-radius: 0; background: none; font-size: 13.5px; }
.code-note { color: var(--muted); font-size: 13px; padding: 0 12px 10px; margin: 0; }
.diagram { padding: 14px; overflow-x: auto; display: flex; justify-content: center; background: var(--bg); }
.diagram svg { max-width: 100%; height: auto; }
.diagram.large { padding: 0; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type { color: var(--c-key); }
.hljs-string, .hljs-attr, .hljs-symbol, .hljs-template-variable { color: var(--c-str); }
.hljs-number, .hljs-literal, .hljs-variable { color: var(--c-num); }
.hljs-comment, .hljs-quote { color: var(--muted); font-style: italic; }
.hljs-title, .hljs-section, .hljs-function .hljs-title, .hljs-name { color: var(--c-fn); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; }
.chips[hidden] { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; padding: 4px 8px; border-radius: 9px; background: var(--surface); font-size: 13px; }
.chip button { display: grid; place-items: center; padding: 2px; border-radius: 5px; color: var(--muted); }
.chip button:hover { background: var(--hover); color: var(--text); }
.chip.accent { box-shadow: inset 0 0 0 1px var(--text); background: none; }
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.msg-user .chip { background: var(--bg); }

/* Composer */
.composer-wrap { padding: 4px 0 max(10px, env(safe-area-inset-bottom)); background: var(--bg); }
.composer { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 22px; padding: 10px 10px 8px 12px; background: var(--bg); box-shadow: 0 1px 6px rgb(0 0 0 / .06); }
.composer:focus-within { border-color: var(--muted); }
.composer textarea { width: 100%; border: 0; background: none; resize: none; outline: none; padding: 4px 6px; max-height: 220px; line-height: 1.5; font-size: 16px; }
.composer-tools { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.icon-btn.tool { width: 36px; height: 36px; border-radius: 50%; color: var(--muted); }
.icon-btn.tool:hover { color: var(--text); }
.icon-btn.recording { color: var(--on-accent); background: var(--danger); animation: pulse 1.4s ease-in-out infinite; }
.send { width: 36px; height: 36px; margin-left: 2px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; }
.send:disabled { opacity: .3; cursor: default; }
.disclaimer { color: var(--muted); font-size: 12px; text-align: center; margin: 8px 0 0; }

/* Popover */
.popover { position: absolute; left: 8px; bottom: 54px; z-index: 15; width: min(300px, calc(100vw - 48px)); max-height: 60vh; overflow-y: auto; padding: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 28px rgb(0 0 0 / .16); }
.popover[hidden] { display: none; }
.popover hr { border: 0; border-top: 1px solid var(--border); margin: 5px 4px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 9px; font-size: 14px; text-align: left; }
.menu-item:hover { background: var(--hover); }
.menu-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-label small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.menu-back { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px 8px; font-size: 13px; font-weight: 500; color: var(--muted); }

/* Dialogs */
.dialog { border: 0; border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: 70vh; background: var(--bg); color: var(--text); box-shadow: 0 16px 48px rgb(0 0 0 / .25); }
.dialog::backdrop, .voice::backdrop { background: rgb(0 0 0 / .4); }
.search-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--border); }
.search-head input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 16px; }
.search-results { list-style: none; margin: 0; padding: 6px; }
.search-results a { display: block; padding: 8px 10px; border-radius: 9px; color: inherit; text-decoration: none; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results a:hover { background: var(--hover); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 4px 18px; }
.dialog-note { color: var(--muted); font-size: 13px; margin: 0; padding: 0 18px 8px; }
.connector-list { list-style: none; margin: 0; padding: 0 10px 12px; }
.connector-list li { display: flex; align-items: center; gap: 12px; padding: 10px 8px; }
.connector-list li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.connector-list strong { font-weight: 500; font-size: 14px; }
.connector-list small { color: var(--muted); font-size: 12.5px; }
.connector-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); display: grid; place-items: center; flex: none; }
.ghost-btn { padding: 5px 10px; border: 1px solid var(--border); border-radius: 9px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* Voice mode */
.voice { border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: var(--bg); color: var(--text); }
.voice[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px; }
.orb { width: 132px; height: 132px; border-radius: 50%; background: var(--accent); transition: transform .3s; }
.orb[data-mode="listening"] { animation: breathe 2s ease-in-out infinite; }
.orb[data-mode="thinking"] { animation: pulse 1.1s ease-in-out infinite; transform: scale(.8); }
.orb[data-mode="speaking"] { animation: breathe .8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); } }
.voice-state { margin: 8px 0 0; font-weight: 500; }
.voice-transcript { margin: 0; color: var(--muted); text-align: center; max-width: 560px; min-height: 3em; }
.voice-close { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); }
@media (prefers-reduced-motion: reduce) { .orb { animation: none !important; } .icon-btn.recording { animation: none; } }

.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 32px); width: max-content; padding: 9px 14px; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-size: 14px; }
.offscreen { position: fixed; left: -9999px; }

@media (max-width: 760px) {
  .only-mobile { display: grid; }
  .app.collapsed .only-collapsed { display: none; }
  .topbar { border-bottom: 1px solid var(--border); }
  .topbar-title, .app.collapsed .topbar-title { display: inline; }
  .sidebar, .app.collapsed .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: min(280px, 84vw); padding: 10px; transform: translateX(-100%); transition: transform .2s ease; }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 10; background: rgb(0 0 0 / .4); }
  .history .del { opacity: 1; }
  .side-btn kbd { display: none; }
  .suggestions { grid-template-columns: minmax(0, 1fr); }
  .empty { justify-content: flex-end; }
  .app.panel-open .panel { position: fixed; inset: 0; z-index: 30; width: 100%; border: 0; }
}

/* Activity trail */
.activity { margin-bottom: 10px; font-size: 14px; }
.activity summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); list-style: none; padding: 2px 0; }
.activity summary::-webkit-details-marker { display: none; }
.activity summary:hover { color: var(--text); }
.activity.live .activity-label { animation: pulse 1.6s ease-in-out infinite; }
.activity-chevron { transition: transform .15s; }
.activity[open] .activity-chevron { transform: rotate(90deg); }
.steps { list-style: none; margin: 8px 0 12px; padding: 0; }
.step { position: relative; display: flex; gap: 10px; padding-bottom: 12px; }
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 2px; width: 1px; background: var(--border); }
.step-icon { width: 25px; height: 25px; border-radius: 50%; background: var(--surface); color: var(--muted); display: grid; place-items: center; flex: none; }
.step-body { flex: 1; min-width: 0; padding-top: 2px; }
.step-title { font-weight: 500; }
.step-detail { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.5; max-height: 220px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
code.step-detail { font: 12.5px/1.5 var(--mono); }
@media (prefers-reduced-motion: reduce) { .activity.live .activity-label { animation: none; } }

/* Small ask dialog */
.dialog.ask { width: min(400px, calc(100vw - 32px)); }
.dialog.ask form { display: grid; gap: 14px; padding: 18px; }
.dialog.ask strong { font-weight: 600; }
.dialog-input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-actions .ghost-btn { color: var(--text); font-size: 14px; padding: 8px 12px; }
.primary.small { padding: 8px 14px; font-size: 14px; border-radius: 9px; }
.primary.danger { background: var(--danger); color: #fff; }

/* Login and settings */
.login input[hidden] { display: none; }
.link-btn { color: var(--muted); font-size: 14px; text-decoration: underline; justify-self: center; }
.dialog.ask textarea.dialog-input { resize: vertical; line-height: 1.5; }
.settings-email { margin: -8px 0 0; color: var(--muted); font-size: 14px; }
.settings-label { margin: 0; font-size: 14px; color: var(--muted); }
.icon-btn[hidden] { display: none; }

/* Edit and regenerate */
.msg-user { position: relative; }
.msg-edit { position: absolute; left: -32px; top: 8px; padding: 4px; border-radius: 7px; color: var(--muted); opacity: 0; }
.msg-user:hover .msg-edit, .msg-edit:focus-visible { opacity: 1; }
.msg-edit:hover { background: var(--hover); color: var(--text); }
.msg-user.editing { width: 100%; max-width: 100%; }
.msg-edit-input { width: 100%; min-height: 60px; border: 0; outline: none; background: none; resize: vertical; line-height: 1.5; }
.msg-assistant:not(:last-child) .regen { display: none; }
@media (hover: none) { .msg-edit { opacity: 1; position: static; display: inline-grid; margin-left: 6px; vertical-align: middle; } }

/* Shared page */
.shared { height: 100%; overflow-y: auto; padding: 24px 0; }
.shared h1 { font-size: 22px; font-weight: 600; margin: 0; }
.shared-note { color: var(--muted); font-size: 13px; margin: 0 0 4px; }

/* PDF editor */
.pe { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: var(--bg); color: var(--text); }
.pe[open] { display: flex; flex-direction: column; }
.pe-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.pe-head .ghost-btn:not(:disabled) { color: var(--text); cursor: pointer; }
.pe-head .ghost-btn:disabled, .pe-head .primary:disabled { opacity: .4; cursor: default; }
.pe-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; text-align: center; color: var(--muted); }
.pe-empty[hidden], .pe-body[hidden], .pe-forms[hidden] { display: none; }
.pe-body { flex: 1; min-height: 0; display: flex; }
.pe-side { width: 210px; flex: none; overflow-y: auto; border-right: 1px solid var(--border); padding: 8px; }
.pe-thumbs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pe-thumbs li { display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 3px 4px 3px 8px; border-radius: 9px; font-size: 13px; }
.pe-thumbs li.active { background: var(--hover); font-weight: 500; }
.pe-num { flex: 1; text-align: left; white-space: nowrap; }
.pe-ops { display: flex; }
.pe-ops button { width: 22px; height: 24px; border-radius: 6px; color: var(--muted); font-size: 13px; }
.pe-ops button:hover { background: var(--surface); color: var(--text); }
.pe-forms { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; display: grid; gap: 8px; font-size: 13px; }
.pe-forms label { display: grid; gap: 3px; color: var(--muted); }
.pe-forms input { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); }
.pe-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pe-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px 2px; }
.pe-tool { padding: 6px 11px; border-radius: 9px; font-size: 13.5px; }
.pe-tool:hover { background: var(--hover); }
.pe-tool[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.pe-hint { color: var(--muted); font-size: 12.5px; margin: 2px 14px 8px; }
.pe-view { flex: 1; min-height: 0; overflow: auto; background: var(--surface); padding: 16px; }
.pe-stage { position: relative; margin: 0 auto; background: #fff; box-shadow: 0 2px 12px rgb(0 0 0 / .18); }
.pe-stage canvas { display: block; }
.pe-layer { position: absolute; inset: 0; touch-action: none; }
.pe-layer[data-tool="text"], .pe-layer[data-tool="image"] { cursor: copy; }
.pe-layer[data-tool="cover"] { cursor: crosshair; }
.pe-span { position: absolute; border-radius: 2px; cursor: text; }
.pe-span:hover { background: rgb(60 130 255 / .22); outline: 1px solid rgb(60 130 255 / .7); }
.pe-item { position: absolute; pointer-events: none; color: #000; white-space: pre; line-height: 1; font-family: Helvetica, Arial, sans-serif; }
.pe-replace { background: #fff; display: flex; align-items: flex-end; overflow: visible; }
.pe-cover { background: #fff; outline: 1px dashed #d33; }
.pe-image img { width: 100%; height: 100%; display: block; }
.pe-input { position: absolute; z-index: 2; padding: 1px 3px; border: 1px solid #3c82ff; background: #fff; color: #000; font-family: Helvetica, Arial, sans-serif; outline: none; line-height: 1.2; }
@media (max-width: 760px) {
  .pe-body { flex-direction: column; }
  .pe-side { width: 100%; max-height: 130px; border-right: 0; border-bottom: 1px solid var(--border); }
}

/* Printing one answer as PDF */
.print-root { display: none; }
@media print {
  :root { --bg: #fff; --surface: #f4f4f4; --text: #000; --muted: #444; --border: #bbb; --c-key: #000; --c-str: #000; --c-num: #000; --c-fn: #000; }
  body.print-mode { background: #fff; color: #000; }
  body.print-mode #root { display: none; }
  body.print-mode .print-root { display: block; }
  .print-root .code-head { display: none; }
  .print-root pre { white-space: pre-wrap; }
}

.file-card { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 14px; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 500; }