litura-app 0.1.0

package/public/style.css

@@ -0,0 +1,849 @@
+@font-face {
+  font-family: 'iA Writer Duo';
+  src: url('/fonts/iAWriterDuoS-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'iA Writer Duo';
+  src: url('/fonts/iAWriterDuoS-Italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'iA Writer Duo';
+  src: url('/fonts/iAWriterDuoS-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'iA Writer Duo';
+  src: url('/fonts/iAWriterDuoS-BoldItalic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * Design tokens lifted from chatgpt.com (OpenAI design system).
+ * Prose keeps iA Writer Duo (--font); every other surface uses --ui-font.
+ */
+/* The page is warm paper; chat blocks are white cards on top of it. That
+   contrast is what separates the conversation from the draft, so the cards
+   need no shadow to lift off. */
+:root {
+  --bg:            #f7f5f0;  /* surface-canvas — warm paper */
+  --surface:       #f7f5f0;  /* surface-primary */
+  --surface-2:     #f0ede5;  /* hover */
+  --surface-3:     #e6e2d8;  /* pressed / ghost hover */
+  --border:        #0000001a;
+  --border-subtle: #0000000d;
+  --border-strong: #00000026;
+  --text:          #0d0d0d;
+  --text-2:        #5d5d5d;
+  --muted:         #8f8f8f;
+  --accent:        #3a83f7;
+  --danger:        #911e1b;
+  --fill:          #eae6dd;  /* filled (secondary) button */
+  --fill-hover:    #ddd8cd;
+  --primary-bg:    #0d0d0d;
+  --primary-fg:    #ffffff;
+  --primary-hover: #212121;
+  --overlay:       #ffffff;
+  --scrim:         #00000073;
+
+  --shadow-sm: 0 1px 2px 0 #00000014;
+  --shadow-md: 0 4px 16px 0 #0000001f;
+  --shadow-lg: 0 12px 40px 0 #0000002e;
+
+  --r-xs:      4px;
+  --r-sm:      6px;
+  --r-field:   10px;
+  --r-overlay: 20px;
+  --r-pill:    999px;
+
+  --ease: cubic-bezier(.16, 1, .3, 1);
+
+  --ui-font: 'OpenAI Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font:    'iA Writer Duo', 'Menlo', 'Monaco', 'Courier New', monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg:            #000000;
+    --surface:       #212121;
+    --surface-2:     #303030;
+    --surface-3:     #414141;
+    --border:        #ffffff26;
+    --border-subtle: #ffffff0d;
+    --border-strong: #ffffff33;
+    --text:          #ffffff;
+    --text-2:        #cdcdcd;
+    --muted:         #afafaf;
+    --accent:        #63a8f8;
+    --danger:        #ff9b97;
+    --fill:          #414141;
+    --fill-hover:    #4f4f4f;
+    --primary-bg:    #ffffff;
+    --primary-fg:    #0d0d0d;
+    --primary-hover: #ececec;
+    --overlay:       #303030;
+
+    /* A shadow tuned for paper is invisible on a dark canvas — the floating
+       panel then reads as text sitting on top of the draft. */
+    --shadow-sm: 0 1px 2px 0 #00000059;
+    --shadow-md: 0 6px 20px 0 #00000080;
+    --shadow-lg: 0 16px 48px 0 #000000a6;
+  }
+}
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--ui-font);
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── Scrollbars ───────────────────────────────────────── */
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 0.3s;
+}
+
+*:hover {
+  scrollbar-color: var(--border-strong) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: var(--r-pill);
+  transition: background 0.3s;
+}
+
+*:hover::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--muted);
+}
+
+/* ── Layout ───────────────────────────────────────────── */
+
+.app {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 180px;
+  overflow: hidden;
+  background: var(--surface);
+}
+
+.pane-header {
+  position: relative;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px 0 20px;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--text-2);
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--surface);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.wordmark {
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: -.02em;
+}
+
+/* Working pane: CodeMirror 6 mounts here */
+#editor-wrapper {
+  flex: 1;
+  overflow: hidden;
+  background: var(--surface);
+}
+
+/* CM6 root fills the wrapper */
+#editor-wrapper .cm-editor {
+  height: 100%;
+}
+
+/* ── Header controls (ChatGPT ghost/pill buttons) ─────── */
+
+.icon-btn,
+.settings-open {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: var(--r-pill);
+  background: transparent;
+  color: var(--text-2);
+  font: inherit;
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--motion, .12s) ease, color .12s ease;
+}
+
+.icon-btn:hover,
+.settings-open:hover {
+  background: var(--surface-3);
+  color: var(--text);
+}
+
+.agent-status {
+  max-width: 42%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 400;
+}
+
+/* Local style score — computed in the browser, so it updates as you type */
+.style-score {
+  margin-left: auto;
+  min-width: 24px;
+  text-align: right;
+  color: var(--muted);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+.style-score:empty { margin-left: auto; }
+.style-score.warn { color: var(--accent); }
+
+/* Secondary pill button — ChatGPT's action/secondary style */
+.review-button {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-pill);
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: none;
+  cursor: pointer;
+  transition: background .12s ease, border-color .12s ease;
+}
+
+.review-button:hover { background: var(--surface-2); }
+.review-button:active { background: var(--surface-3); }
+.review-button:disabled { cursor: default; opacity: .5; }
+.review-button.has-findings { color: var(--accent); border-color: var(--accent); }
+
+/* A background check is still the writer's money being spent — show it */
+.review-button.is-busy { animation: review-busy 1.4s ease-in-out infinite; }
+
+@keyframes review-busy {
+  0%, 100% { border-color: var(--border); }
+  50%      { border-color: var(--accent); }
+}
+
+.style-score { cursor: pointer; }
+.style-score:empty { cursor: default; }
+
+/* ── Chat ─────────────────────────────────────────────── */
+/*
+ * Pinned bottom-centre over the canvas, Granola-style: understated at rest,
+ * grows upward when it has something to say. Never modal — the draft below
+ * stays readable and editable, so there is no scrim.
+ */
+
+.chat {
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  z-index: 100;
+  width: min(680px, calc(100vw - 32px));
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: none;
+}
+
+.chat > * { pointer-events: auto; }
+
+/* The draft has to stop where the panel starts. Without this backdrop the
+   cards sit directly on running text and their edges disappear into it. */
+.chat::before {
+  content: '';
+  position: absolute;
+  inset: -20px -28px -32px;
+  z-index: -1;
+  pointer-events: none;
+  background: linear-gradient(to bottom, transparent, var(--surface) 72px);
+}
+
+.chat-stream {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 46vh;
+  overflow-y: auto;
+  padding: 4px;
+  /* Content clipped at the top should read as scrollable, not as broken. */
+  mask-image: linear-gradient(to bottom, transparent, #000 24px);
+}
+
+.chat-stream:empty { display: none; }
+
+/* Way out of the stream. Only shown once there is something to leave. */
+.chat-clear {
+  align-self: flex-end;
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--r-pill);
+  background: var(--overlay);
+  color: var(--muted);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition: color .12s ease;
+}
+
+.chat-clear:hover { color: var(--text); }
+.chat-clear[hidden] { display: none; }
+
+.chat-message,
+.chat-card,
+.chat-note,
+.chat-error {
+  border-radius: var(--r-field);
+  border: 1px solid var(--border-subtle);
+  background: var(--overlay);
+  font-size: 14px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  animation: chat-in .2s var(--ease);
+}
+
+@keyframes chat-in {
+  from { opacity: 0; translate: 0 6px; }
+  to   { opacity: 1; translate: 0 0; }
+}
+
+.chat-message {
+  padding: 10px 14px;
+  border: 1px solid var(--border-subtle);
+  color: var(--text);
+}
+
+/* Your own words are already known — let them recede next to the answer. */
+.chat-message.is-user {
+  align-self: flex-end;
+  max-width: 80%;
+  border: 0;
+  background: var(--fill);
+  color: var(--text-2);
+  font-size: 13px;
+}
+
+.chat-error { padding: 10px 14px; color: var(--danger); }
+
+/* Rendered reply: block spacing comes from the tags, not from pre-wrap */
+.chat-message.is-markdown { white-space: normal; }
+.chat-message.is-markdown > * + * { margin-top: 8px; }
+.chat-message.is-markdown ul,
+.chat-message.is-markdown ol { padding-left: 20px; }
+.chat-message.is-markdown li + li { margin-top: 3px; }
+.chat-message.is-markdown .md-heading { font-weight: 600; }
+.chat-message.is-markdown a { color: var(--accent); }
+
+.chat-message.is-markdown code {
+  padding: 1px 5px;
+  border-radius: var(--r-xs);
+  background: var(--surface-3);
+  font-family: var(--font);
+  font-size: .9em;
+}
+
+.chat-message.is-markdown pre {
+  overflow-x: auto;
+  padding: 10px 12px;
+  border-radius: var(--r-sm);
+  background: var(--surface-3);
+}
+
+.chat-message.is-markdown pre code { padding: 0; background: none; }
+
+/* Streaming cursor, dropped as soon as the first token lands */
+.chat-caret {
+  display: inline-block;
+  width: 7px;
+  height: 15px;
+  vertical-align: -2px;
+  background: var(--muted);
+  animation: chat-blink 1s steps(2) infinite;
+}
+
+@keyframes chat-blink { 50% { opacity: 0; } }
+
+.chat-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 34px 12px 14px;
+  color: var(--text-2);
+  font-size: 13px;
+}
+
+/* Dismiss: rejecting a finding must be as cheap as accepting one */
+.chat-card-dismiss {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  border: 0;
+  background: none;
+  padding: 2px 6px;
+  color: var(--muted);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: .6;
+}
+
+.chat-card-dismiss:hover { opacity: 1; color: var(--text); }
+
+/* Offered, not spent: the rewrite request starts here, not on the underline */
+.chat-offer {
+  align-self: flex-start;
+  margin-top: 6px;
+  height: 26px;
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-pill);
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background .12s ease;
+}
+
+.chat-offer:hover { background: var(--surface-2); }
+
+.chat-card strong { color: var(--text); font-size: 15px; font-weight: 600; }
+.chat-card small { color: var(--muted); font: inherit; }
+
+.chat-variants {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* ── Composer ─────────────────────────────────────────── */
+
+.chat-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 8px 8px 18px;
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  background: var(--overlay);
+  box-shadow: var(--shadow-lg);
+  transition: border-color .12s ease, box-shadow .12s ease;
+}
+
+.chat-composer:focus-within {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-lg), 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
+}
+
+/* One line at rest: field left, send right, both on the same baseline. */
+.chat-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+#chat-input {
+  flex: 1;
+  padding: 7px 0;
+  border: 0;
+  outline: none;
+  resize: none;
+  background: none;
+  color: var(--text);
+  font-family: var(--ui-font);
+  font-size: 16px;
+  line-height: 1.45;
+  max-height: 160px;
+}
+
+#chat-input::placeholder { color: var(--muted); }
+
+.chat-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: var(--r-pill);
+  background: var(--primary-bg);
+  color: var(--primary-fg);
+  cursor: pointer;
+  transition: opacity .12s ease, background .12s ease;
+}
+
+.chat-send:hover:not(:disabled) { background: var(--primary-hover); }
+
+/* Dim, not hidden: the writer should see where the send is before they type. */
+.chat-send:disabled {
+  background: var(--fill);
+  color: var(--muted);
+  cursor: default;
+}
+
+/* Names what is attached; the passage itself stays highlighted in the draft. */
+.chat-chip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  align-self: flex-start;
+  max-width: 100%;
+  padding: 3px 4px 3px 10px;
+  border-radius: var(--r-pill);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  color: var(--text-2);
+}
+
+.chat-chip.hidden { display: none; }
+
+.chat-chip-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.chat-chip button {
+  position: relative;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border: 0;
+  border-radius: var(--r-pill);
+  background: none;
+  color: var(--muted);
+  font: inherit;
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.chat-chip button:hover { background: var(--fill-hover); color: var(--text); }
+
+/* Fitts: the visible dot is small, the thing you can hit is not. */
+.chat-chip button::after { content: ''; position: absolute; inset: -8px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-message,
+  .chat-card,
+  .chat-error,
+  .variant-card { animation: none; }
+  .review-button.is-busy { animation: none; border-color: var(--accent); }
+  .chat-caret { animation: none; opacity: .6; }
+}
+
+/* Keep the last lines of the draft clear of the panel. The panel grows with
+   its content, so the reserved space is measured, not guessed. */
+#editor-wrapper .cm-content { padding-bottom: var(--chat-height, 140px); }
+
+/* ── Loading skeletons ────────────────────────────────── */
+/*
+ * Used where the shape of what is coming is known — the three variant cards.
+ * A spinner there would collapse the box and then shove it open again.
+ */
+
+/* ── Variant cards ────────────────────────────────────── */
+
+.variant-card {
+  padding: 12px 14px;
+  border-radius: var(--r-field);
+  border: 1px solid var(--border-subtle);
+  background: var(--overlay);
+  cursor: pointer;
+  color: var(--text);
+  font-size: 14px;
+  line-height: 1.55;
+  transition: background .12s ease;
+  animation: chat-in .2s var(--ease);
+}
+
+.variant-card:hover { background: var(--surface-2); }
+
+.variant-label {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 4px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* Draft score if you pick this variant. Informational — never fed to the model. */
+.variant-delta {
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+}
+
+.variant-delta.is-better { color: #53b559; }
+.variant-delta.is-worse  { color: var(--danger); }
+
+.variant-card.is-loading { cursor: default; }
+.variant-card.is-loading:hover { background: var(--overlay); }
+
+/* Once one option is applied the others point at a range that is gone. Stop
+ * advertising a click that would silently do nothing. */
+.chat-variants.is-spent .variant-card { cursor: default; opacity: .45; }
+.chat-variants.is-spent .variant-card:hover { background: var(--overlay); }
+
+.chat-variants.is-spent .variant-card.is-applied { opacity: 1; }
+
+/* Three options the writer dislikes is a dead end without this */
+.chat-again {
+  align-self: flex-end;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-pill);
+  background: var(--overlay);
+  box-shadow: var(--shadow-sm);
+  color: var(--muted);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition: color .12s ease;
+}
+
+.chat-again:hover { color: var(--text); }
+.chat-variants.is-spent .chat-again { display: none; }
+.variant-card.is-applied .variant-label::after {
+  content: 'applied';
+  color: var(--accent);
+  font-weight: 400;
+}
+
+.skeleton {
+  border-radius: var(--r-xs);
+  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
+  background-size: 400% 100%;
+  animation: skeleton-sheen 1.4s ease-in-out infinite;
+}
+
+.skeleton-label {
+  width: 64px;
+  height: 10px;
+  margin-bottom: 8px;
+}
+
+.skeleton-line {
+  height: 12px;
+  margin-top: 7px;
+}
+
+.skeleton-line.is-short { width: 62%; }
+
+@keyframes skeleton-sheen {
+  from { background-position: 100% 50%; }
+  to   { background-position: 0 50%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton { animation: none; }
+}
+
+.error-msg {
+  padding: 12px 14px;
+  font-size: 14px;
+  color: var(--danger);
+}
+
+/* ── Pi settings dialog ──────────────────────────────── */
+
+.settings-dialog {
+  /* the global `* { margin: 0 }` reset kills the UA's `margin: auto` centring */
+  margin: auto;
+  width: min(680px, calc(100vw - 32px));
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--r-overlay);
+  padding: 0;
+  color: var(--text);
+  background: var(--overlay);
+  font-family: var(--ui-font);
+  box-shadow: var(--shadow-lg);
+}
+
+/* Native <dialog> centres itself — animate opacity only, no transform. */
+.settings-dialog[open] { animation: dialog-in .2s var(--ease); }
+
+@keyframes dialog-in {
+  from { opacity: 0; translate: 0 8px; }
+  to   { opacity: 1; translate: 0 0; }
+}
+
+.settings-dialog::backdrop { background: var(--scrim); }
+.settings-dialog form { display: flex; flex-direction: column; }
+.settings-dialog header, .settings-dialog footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+}
+.settings-dialog header { border-bottom: 1px solid var(--border-subtle); }
+.settings-dialog footer { border-top: 1px solid var(--border-subtle); justify-content: flex-end; gap: 8px; }
+.settings-dialog header span, .settings-dialog h3 {
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
+}
+.settings-dialog h2 { font-size: 22px; font-weight: 600; margin-top: 2px; }
+.settings-dialog h3 { margin-bottom: 12px; font-weight: 500; }
+.settings-dialog section { padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); }
+.settings-dialog section:last-of-type { border-bottom: 0; }
+
+/* Fields: rectangular, flat, unfilled — the quiet half of the pair */
+.settings-dialog input, .settings-dialog select {
+  min-height: 44px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-field);
+  padding: 0 12px;
+  color: var(--text);
+  background: var(--surface);
+  font: inherit;
+  font-size: 14px;
+  outline: none;
+}
+.settings-dialog input:focus, .settings-dialog select:focus { border-color: var(--accent); }
+
+/* The UA chevron sits flush against the border — draw our own, inset properly */
+.settings-dialog select {
+  appearance: none;
+  padding-right: 36px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238f8f8f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 16px 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .settings-dialog select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23afafaf' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
+  }
+}
+
+/* Buttons: pill AND filled — never mistakable for a field */
+.settings-dialog button {
+  min-height: 44px;
+  padding: 0 20px;
+  border: 1px solid transparent;
+  border-radius: var(--r-pill);
+  background: var(--fill);
+  color: var(--text);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background .12s ease;
+}
+.settings-dialog button:hover { background: var(--fill-hover); }
+.settings-dialog button.primary {
+  color: var(--primary-fg);
+  background: var(--primary-bg);
+  border-color: var(--primary-bg);
+}
+.settings-dialog button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
+.settings-dialog button:disabled { opacity: .5; cursor: default; }
+.settings-dialog .dialog-close {
+  width: 32px;
+  min-height: 32px;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 20px;
+  color: var(--text-2);
+}
+.settings-dialog .dialog-close:hover { background: var(--surface-3); }
+
+.settings-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; }
+.settings-grid label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; }
+.key-entry { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; }
+.settings-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
+.settings-check input { min-height: 0; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); }
+.settings-check span { color: var(--text); font-size: 14px; }
+.settings-check small { display: block; color: var(--muted); font-size: 13px; }
+
+.settings-hint, .settings-error { min-height: 18px; margin-top: 10px; color: var(--muted); font-size: 13px; }
+.settings-error { color: var(--danger); }
+.configured-keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
+.key-chip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-pill);
+  font-size: 13px;
+}
+.key-chip i { width: 6px; height: 6px; border-radius: 50%; background: #53b559; }
+.key-chip button { min-height: auto; border: 0; padding: 0 2px; background: none; color: var(--muted); }
+.key-chip button:hover { background: none; color: var(--text); }
+
+@media (max-width: 640px) {
+  .settings-grid, .key-entry { grid-template-columns: 1fr; }
+}