/* Generated by reader/scripts/build.mjs from reader/src/style-sections. Edit the section files instead. */

[data-reader-runtime="online"] body:has(.reader-activation-screen) {
  min-height: 100vh;
  background: #f6f7f8;
  color: #1f252d;
}

.reader-activation-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.reader-activation-panel {
  width: min(680px, 100%);
  display: grid;
  gap: 24px;
  padding: 28px;
  border: 1px solid rgba(35, 44, 56, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(32, 40, 52, 0.10);
}

.reader-activation-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #6b7280;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reader-activation-brand strong {
  color: #202833;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
}

.reader-activation-copy {
  display: grid;
  gap: 10px;
}

.reader-activation-copy h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 720;
  letter-spacing: 0;
}

.reader-activation-copy p {
  max-width: 560px;
  margin: 0;
  color: #596273;
  font-size: 15px;
  line-height: 1.65;
}

.reader-activation-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid rgba(35, 44, 56, 0.14);
}

.reader-activation-status div {
  min-width: 0;
  padding: 16px 16px 16px 0;
  display: grid;
  gap: 8px;
}

.reader-activation-status span {
  color: #7b8492;
  font-size: 12px;
}

.reader-activation-status strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #202833;
  font-size: 14px;
  font-weight: 650;
}

.reader-activation-primary {
  justify-self: start;
  height: 40px;
  border: 1px solid #202833;
  border-radius: 8px;
  padding: 0 16px;
  background: #202833;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
}

@media (max-width: 720px) {
  .reader-activation-screen {
    place-items: stretch;
    align-content: center;
  }

  .reader-activation-copy h1 {
    font-size: 26px;
  }

  .reader-activation-status {
    grid-template-columns: 1fr;
  }

  .reader-activation-status div {
    padding-right: 0;
    border-bottom: 1px solid rgba(35, 44, 56, 0.10);
  }

  .reader-activation-status div:last-child {
    border-bottom: 0;
  }
}

/* ── Reset & Tokens ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #f5f7fa;
  --bg-raised:     #ffffff;
  --bg-overlay:    #eaeff5;
  --border:        #cdd5de;
  --border-subtle: #d8e0e8;

  --text:          #1c2128;
  --text-muted:    #545d68;
  --text-dim:      #8b95a1;

  --blue:          #1a6fef;
  --blue-bg:       #e6f0fd;
  --blue-border:   #a8c8f8;
  --green:         #1c8c3e;
  --green-bg:      #e2f5ea;
  --yellow:        #c98000;
  --yellow-bg:     #fdf0d0;
  --purple:        #6f41e8;
  --purple-bg:     #ece8fd;
  --blocks-doc-font-en: initial;
  --blocks-doc-font-zh: initial;
  --blocks-doc-texture-fill: transparent;
  --blocks-doc-texture-image: none;
  --blocks-doc-texture-size: auto;
  --blocks-doc-texture-position: 0 0;
  --blocks-doc-texture-repeat: repeat;

  --radius:        8px;
  --sidebar-w:     268px;
  --analysis-w:    50%;
}

[data-theme="dark"] {
  --bg:            #0d1117;
  --bg-raised:     #161b22;
  --bg-overlay:    #1c2128;
  --border:        #30363d;
  --border-subtle: #21262d;

  --text:          #e6edf3;
  --text-muted:    #8b949e;
  --text-dim:      #484f58;

  --blue:          #58a6ff;
  --blue-bg:       rgba(56,139,253,.12);
  --blue-border:   rgba(56,139,253,.4);
  --green:         #3fb950;
  --green-bg:      rgba(63,185,80,.12);
  --yellow:        #e3b341;
  --yellow-bg:     rgba(227,179,65,.12);
  --purple:        #d2a8ff;
  --purple-bg:     rgba(210,168,255,.12);
}

html, body { height: 100%; overflow: hidden; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}

/* ── Top bar ─────────────────────────────────────────────── */
#preview-mode-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 980;
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(-100% - 20px));
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
}

#preview-mode-banner.show {
  opacity: 1;
  transform: translateY(0);
}

.preview-mode-banner-shell {
  position: relative;
  width: 100%;
  min-height: calc(44px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4d2a1d;
  border-bottom: 1px solid rgba(165, 86, 38, .18);
  background:
    linear-gradient(135deg, rgba(255, 247, 228, .98) 0%, rgba(255, 232, 205, .98) 56%, rgba(255, 218, 188, .98) 100%);
  box-shadow: 0 16px 34px rgba(108, 55, 22, .18);
  overflow: hidden;
}

.preview-mode-banner-shell::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: min(24vw, 220px);
  height: 100%;
  border-radius: 999px;
  background: radial-gradient(circle at left center, rgba(255, 255, 255, .34) 0, rgba(255, 255, 255, 0) 72%);
}

.preview-mode-banner-shell::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 123, 72, .96), rgba(255, 176, 72, .88));
  transform-origin: left center;
  transform: scaleX(0);
}

#preview-mode-banner.show .preview-mode-banner-shell::after {
  animation: preview-mode-banner-progress 2.6s linear both;
}

.preview-mode-banner-copy {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.preview-mode-banner-copy span {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  color: #4f2d1f;
}

@keyframes preview-mode-banner-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

[data-theme="dark"] .preview-mode-banner-shell {
  color: #fde7d4;
  border-bottom-color: rgba(255, 168, 115, .2);
  background:
    linear-gradient(135deg, rgba(78, 37, 20, .98) 0%, rgba(103, 46, 26, .98) 56%, rgba(129, 56, 30, .98) 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .preview-mode-banner-copy span {
  color: #fff0e4;
}

@media (max-width: 720px) {
  .preview-mode-banner-shell {
    padding: env(safe-area-inset-top, 0px) 14px 0;
  }

  .preview-mode-banner-copy {
    text-align: center;
  }

  .preview-mode-banner-copy span {
    font-size: 13px;
  }
}

#topbar {
  height: 44px;
  min-height: 44px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  z-index: 10;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  letter-spacing: -.3px;
  cursor: pointer;
  transition: filter .18s ease, opacity .18s ease;
}

.topbar-logo-mark {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.topbar-logo span { color: #fe7151; }

html[data-topbar-logo-muted="1"] .topbar-logo {
  filter: grayscale(1);
  opacity: .76;
}

.topbar-logo:focus-visible {
  outline: 2px solid var(--blue-border);
  outline-offset: 4px;
  border-radius: 8px;
}

#topbar-file-shell {
  margin-left: 8px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(640px, 52vw);
}

#topbar-file {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 2px 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#topbar-file-actions {
  display: none;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#topbar-analysis-pane-actions {
  display: none;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#topbar-file-actions .analysis-action-btn {
  height: 28px;
}

#topbar-analysis-pane-actions .analysis-action-btn {
  height: 28px;
}

#topbar-file-actions .analysis-action-btn.icon-only {
  width: 28px;
  min-width: 28px;
}

#topbar-analysis-pane-actions .analysis-action-btn.icon-only {
  width: 28px;
  min-width: 28px;
}

.topbar-status {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-task-status {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: min(420px, 34vw);
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 76%, var(--border-subtle) 24%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue-bg) 78%, var(--bg-raised) 22%), color-mix(in srgb, var(--bg-overlay) 86%, var(--blue-bg) 14%));
  color: var(--text);
  box-shadow: 0 10px 24px rgba(24, 88, 149, .12);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}

.topbar-task-status:hover {
  border-color: color-mix(in srgb, var(--blue-border) 88%, var(--border) 12%);
}

.topbar-task-status:active {
  transform: translateY(1px);
}

.topbar-task-status.is-success {
  border-color: color-mix(in srgb, var(--green) 44%, var(--border-subtle) 56%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green-bg) 72%, var(--bg-raised) 28%), color-mix(in srgb, var(--bg-overlay) 88%, var(--green-bg) 12%));
}

.topbar-task-status.is-error {
  border-color: color-mix(in srgb, #f85149 44%, var(--border-subtle) 56%);
  background:
    linear-gradient(135deg, color-mix(in srgb, rgba(248, 81, 73, .18) 74%, var(--bg-raised) 26%), color-mix(in srgb, var(--bg-overlay) 88%, rgba(248, 81, 73, .14) 12%));
}

.topbar-task-status .spinner {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
  flex-shrink: 0;
}

.topbar-task-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent);
  flex-shrink: 0;
}

.topbar-task-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}

.topbar-task-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  flex-shrink: 0;
}

.topbar-task-status.is-success .topbar-task-label,
.topbar-task-status.is-success .topbar-task-dot {
  color: color-mix(in srgb, var(--green) 88%, var(--text) 12%);
}

.topbar-task-status.is-error .topbar-task-label,
.topbar-task-status.is-error .topbar-task-dot {
  color: color-mix(in srgb, #f85149 88%, var(--text) 12%);
}

.topbar-task-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
  color: var(--text);
}

.topbar-task-detail {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-muted);
}

#reader-task-backdrop {
  position: fixed;
  inset: 44px 0 0 0;
  background: rgba(6,10,14,.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 190;
  backdrop-filter: blur(2px);
}

#reader-task-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

#reader-task-panel {
  position: fixed;
  top: 44px;
  right: 0;
  bottom: 0;
  width: min(860px, 100vw);
  background: var(--bg-raised);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 44px rgba(0,0,0,.28);
  z-index: 220;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .24s cubic-bezier(.22,1,.36,1), opacity .18s ease;
}

#reader-task-panel.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.reader-task-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.reader-task-panel-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

.reader-task-column {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border-subtle);
}

.reader-task-column-detail {
  border-right: 0;
}

.reader-task-section {
  padding: 10px 12px 14px;
}

.reader-task-section-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0 4px 8px;
}

.reader-task-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.reader-task-item:hover,
.reader-task-item.is-selected {
  background: var(--bg-overlay);
  border-color: var(--border-subtle);
}

.reader-task-item + .reader-task-item {
  margin-top: 8px;
}

.reader-task-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.reader-task-item-title {
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-task-item-status {
  flex-shrink: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}

.reader-task-item-status.is-success { color: var(--green); }
.reader-task-item-status.is-error { color: #f85149; }

.reader-task-item-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

#reader-task-detail {
  min-height: 100%;
  padding: 18px 18px 20px;
}

.reader-task-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reader-task-detail-status {
  font-size: 11px;
  color: var(--text-dim);
}

.reader-task-detail-status.is-success { color: var(--green); }
.reader-task-detail-status.is-error { color: #f85149; }

.reader-task-detail-meta {
  margin-top: 10px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.reader-task-detail-meta > div {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-task-detail-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.reader-task-detail-actions .btn-mini {
  flex: 0 0 auto;
}

.reader-task-action-danger {
  color: #f85149;
  border-color: rgba(248, 81, 73, .28);
  background: rgba(248, 81, 73, .07);
}

.reader-task-action-danger:hover {
  border-color: rgba(248, 81, 73, .48);
  background: rgba(248, 81, 73, .12);
}

.reader-task-detail-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(248, 81, 73, .08);
  color: #f85149;
  font-size: 12px;
  line-height: 1.5;
}

.reader-task-event-list {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.reader-task-event {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
}

.reader-task-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--text-dim);
}

.reader-task-event-body {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.55;
}

.reader-task-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-dim);
}

#btn-memo {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  padding: 0 9px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
  font-family: inherit;
  flex-shrink: 0;
}
#btn-memo:hover,
#btn-memo.active {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
#btn-memo:active { transform: translateY(1px); }

.memo-pill {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
  flex-shrink: 0;
}

#memo-current-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
}

#memo-current-count {
  color: var(--text-dim);
  font-size: 11px;
  flex-shrink: 0;
}

/* ── Main layout ─────────────────────────────────────────── */
#layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sidebar-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Sidebar tabs */
#sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.stab {
  flex: 1;
  padding: 8px;
  font-size: 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--text-muted);
  transition: color .15s, border-color .15s;
  font-family: inherit;
}
.stab:hover { color: var(--text); }
.stab.active { border-bottom-color: var(--blue); color: var(--text); }
html[data-sidebar-tab="tree"] .stab[data-tab="tree"] {
  border-bottom-color: var(--blue);
  color: var(--text);
}
html[data-sidebar-tab="tree"] .stab[data-tab="knowledge"] {
  border-bottom-color: transparent;
  color: var(--text-muted);
}
html[data-sidebar-tab="knowledge"] .stab[data-tab="tree"] {
  border-bottom-color: transparent;
  color: var(--text-muted);
}
html[data-sidebar-tab="knowledge"] .stab[data-tab="knowledge"] {
  border-bottom-color: var(--blue);
  color: var(--text);
}

#mook-count {
  display: inline-block;
  background: var(--blue-bg);
  color: var(--blue);
  border-radius: 8px;
  font-size: 10px;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
  font-weight: 700;
}
#mook-count:empty { display: none; }

#tab-tree {
  overflow-y: auto;
  flex: 1;
  padding: 0;
}
html[data-sidebar-tab="knowledge"] #tab-tree {
  display: none !important;
}

#tab-knowledge {
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html[data-sidebar-tab="tree"] #tab-knowledge {
  display: none !important;
}
html[data-sidebar-tab="knowledge"] #tab-knowledge {
  display: flex !important;
}

#tab-mooks {
  overflow-y: auto;
  flex: 1;
  padding: 6px 0;
}

#skill-tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 0;
}

#tree-active-sticky {
  position: fixed;
  z-index: 18;
  display: none;
  pointer-events: auto;
}

#tree-active-sticky.open {
  display: block;
}

#tree-active-sticky .tree-file.sticky-proxy {
  margin: 0;
  opacity: .85;
  box-shadow: 0 12px 26px rgba(8, 16, 28, 0.18);
}

#tree-active-sticky .tree-file.sticky-proxy:hover {
  opacity: .9;
  background: var(--blue-bg);
  color: var(--blue);
  border-color: var(--blue-border);
  --tree-file-icon-fill: var(--blue);
}

#tree-active-sticky .toc-trigger {
  display: none !important;
}

#sidebar-action-dock {
  position: relative;
  padding: 10px;
  border-top: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-raised) 82%, var(--bg-overlay) 18%);
}

#sidebar-action-dock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
}

#btn-sidebar-action,
#btn-sidebar-action-switch {
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
  font-family: inherit;
}

#btn-sidebar-action {
  min-width: 0;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
}

#btn-sidebar-action:hover,
#btn-sidebar-action-switch:hover,
#btn-sidebar-action-switch.active {
  border-color: var(--border);
  background: var(--bg-overlay);
}

#btn-sidebar-action:disabled,
#btn-sidebar-action-switch:disabled {
  cursor: not-allowed;
  opacity: .48;
  border-color: var(--border-subtle);
  background: color-mix(in srgb, var(--bg) 84%, var(--bg-overlay) 16%);
  color: var(--text-dim);
  box-shadow: none;
}

#btn-sidebar-action:active,
#btn-sidebar-action-switch:active {
  transform: translateY(1px);
}

.sidebar-action-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sidebar-action-main,
.sidebar-action-item-copy {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.sidebar-action-main {
  flex: 1 1 auto;
}

.sidebar-action-icon,
.sidebar-action-item-icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-self: center;
  line-height: 0;
  color: color-mix(in srgb, var(--text) 84%, var(--text-dim) 16%);
}

.sidebar-action-icon iconify-icon,
.sidebar-action-item-icon iconify-icon {
  display: block !important;
  width: 16px;
  height: 16px;
  font-size: 16px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

#sidebar-action-label {
  display: block;
  min-width: 0;
  min-height: 16px;
  font-size: 12.5px;
  line-height: 16px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(-.5px);
}

.sidebar-action-meta {
  display: none;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--text-dim);
  opacity: .82;
}

.sidebar-action-meta.visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-action-meta svg {
  width: 14px;
  height: 14px;
  display: block;
}

html:not([data-sidebar-action-ready="1"]) #sidebar-action-dock-row {
  visibility: hidden;
  pointer-events: none;
}

#btn-sidebar-action-switch {
  width: 34px;
  height: 100%;
  min-height: 42px;
  border-radius: 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#btn-sidebar-action-switch svg {
  width: 16px;
  height: 16px;
  display: block;
}

#sidebar-action-menu {
  display: none;
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 8px);
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-raised);
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
  z-index: 80;
}

#sidebar-action-menu.open {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-action-item {
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  padding: 10px 11px;
  transition: border-color .15s, background .15s;
}

.sidebar-action-item:hover {
  border-color: var(--border-subtle);
  background: var(--bg-overlay);
}

.sidebar-action-item:disabled {
  cursor: not-allowed;
  opacity: .42;
  border-color: transparent;
  background: transparent;
}

.sidebar-action-item:disabled:hover {
  border-color: transparent;
  background: transparent;
}

.sidebar-action-item.active {
  border-color: var(--blue-border);
  background: var(--blue-bg);
}

.sidebar-action-item-label {
  display: block;
  min-width: 0;
  min-height: 16px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 16px;
  color: var(--text);
  transform: translateY(-.5px);
}

.sidebar-action-item.active .sidebar-action-item-icon,
#btn-sidebar-action:hover .sidebar-action-icon {
  color: var(--blue);
}

/* Tree nodes */
.tree-dir { }

.tree-dir-header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 10px 5px 12px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text);
  border-radius: 5px;
  margin: 1px 6px;
  transition: background .12s;
  user-select: none;
}
.tree-dir-header:hover { background: rgba(255,255,255,.06); }
[data-theme="light"] .tree-dir-header:hover { background: rgba(0,0,0,.05); }

.chevron {
  color: var(--text-muted);
  font-size: 10px;
  transition: transform .15s;
  width: 10px;
  flex-shrink: 0;
}
.tree-dir-icon {
  width: 13px;
  height: 13px;
  min-width: 13px;
  flex: 0 0 13px;
  fill: #e3b341;
  transition: fill .18s ease, color .18s ease;
}
.tree-dir-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tree-dir-meta {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-left: 8px;
}
.tree-dir-count {
  position: absolute;
  inset: 0;
  font-size: 11px;
  line-height: 1;
  color: color-mix(in srgb, var(--text-muted) 78%, transparent 22%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.92);
  filter: blur(2px);
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
  pointer-events: none;
}
.tree-dir-agent-btn {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  border-radius: 999px;
  color: var(--blue);
  opacity: 0;
  transform: scale(.92);
  filter: blur(2px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease, background .16s ease, color .16s ease;
}
.tree-dir-agent-btn:hover {
  background: color-mix(in srgb, var(--blue) 14%, transparent 86%);
}
.tree-dir.collapsed > .tree-dir-header:hover .tree-dir-count {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}
.tree-dir.collapsed.agent-cta-visible > .tree-dir-header .tree-dir-count {
  opacity: 0;
  transform: scale(.86);
  filter: blur(3px);
}
.tree-dir.collapsed.agent-cta-visible > .tree-dir-header .tree-dir-agent-btn {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  pointer-events: auto;
}
.tree-dir:not(.collapsed) > .tree-dir-header .tree-dir-meta {
  display: none;
}
.tree-dir:not(.collapsed) > .tree-dir-header .tree-dir-count {
  display: none;
}
.tree-dir:not(.collapsed) > .tree-dir-header .tree-dir-agent-btn {
  display: none;
}
.tree-dir.has-directory-agent > .tree-dir-header .tree-dir-icon {
  fill: var(--blue);
}
.tree-dir.has-directory-agent > .tree-dir-header .tree-dir-agent-btn {
  display: none;
}
.tree-dir.collapsed .chevron { transform: rotate(-90deg); }

.tree-dir-children { padding-left: 14px; }
.tree-dir-children.hidden { display: none; }

.tree-file {
  --tree-file-icon-fill: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-muted);
  border-radius: 5px;
  margin: 1px 6px;
  transition: all .12s;
}
.tree-file:hover { background: rgba(255,255,255,.05); color: var(--text); --tree-file-icon-fill: var(--text); }
[data-theme="light"] .tree-file:hover { background: rgba(0,0,0,.05); }
.tree-file.active,
.tree-file.active:hover {
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid var(--blue-border);
  --tree-file-icon-fill: var(--blue);
}
.toc-trigger {
  flex-shrink: 0;
  display: none;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: none; border: none; padding: 0;
  cursor: pointer; border-radius: 3px;
  color: var(--text-dim);
  transition: color .15s, background .15s;
}
.tree-file.active .toc-trigger { display: flex; }
.toc-trigger:hover { color: var(--text-muted); background: rgba(255,255,255,.08); }
[data-theme="light"] .toc-trigger:hover { background: rgba(0,0,0,.07); }

.toc-popup {
  position: fixed;
  z-index: 500;
  min-width: 200px; max-width: 300px;
  max-height: 360px; overflow-y: auto;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  padding: 4px 0;
  animation: toc-in .15s ease;
}
@keyframes toc-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toc-item {
  padding: 5px 14px;
  font-size: 12px; color: var(--text-muted);
  cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: background .1s, color .1s;
}
.toc-item:hover { background: var(--bg-overlay); color: var(--text); }
.toc-item.toc-h1 { font-size: 12.5px; font-weight: 500; color: var(--text); }
.toc-item.toc-h2 { padding-left: 24px; }
.toc-item.toc-h3 { padding-left: 34px; font-size: 11.5px; }

/* ── Content area ────────────────────────────────────────── */
#content {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Content states */
.content-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-muted);
}
.content-state-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}
.content-state h2 { font-size: 18px; color: var(--text); font-weight: 600; }
.content-state p  { font-size: 13px; }
.content-state .spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.welcome-tips {
  width: min(540px, calc(100vw - 64px));
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 78%, var(--bg-overlay) 22%), color-mix(in srgb, var(--bg-overlay) 86%, transparent)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue-bg) 48%, transparent), transparent 52%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}

.welcome-tips-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.welcome-tips-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
}

.welcome-tips-count {
  font-size: 11px;
  color: var(--text-dim);
}

.welcome-tips-body {
  margin-top: 10px;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.welcome-tips-body strong {
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
}

.welcome-tips-body p {
  margin: 0;
  line-height: 1.7;
  color: var(--text-muted);
}

.welcome-tips-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.welcome-tip-btn {
  appearance: none;
  -webkit-appearance: none;
  min-width: 84px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 82%, var(--bg-raised) 18%);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}

.welcome-tip-btn:hover {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--bg-overlay) 64%, var(--blue-bg) 36%);
  transform: translateY(-1px);
}

.welcome-tip-btn:active {
  transform: translateY(0);
}

.welcome-tip-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Panes wrapper */
#panes {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Skill (left) pane */
#blocks-pane {
  flex: 1;
  width: 50%;
  overflow-y: auto;
  padding: 24px 20px;
  border-right: 1px solid var(--border);
}

.skill-heading {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.skill-heading-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.skill-heading-copy {
  min-width: 0;
  flex: 1;
}
.skill-heading-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.skill-heading h1 {
  font-size: 17px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 3px;
}
.skill-heading .fp {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: 'Cascadia Code', 'Consolas', monospace;
}

/* Block cards */
.block {
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
  cursor: default;
}
.block:hover, .block.active {
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

.block-bar {
  padding: 8px 13px;
  background: rgba(255,255,255,.025);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
}

/* Bookmark button */
.btn-star {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 2px;
  line-height: 1;
  transition: color .15s, opacity .15s;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-star svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-star.starred { color: var(--yellow); opacity: 1; }
.btn-star.starred svg { fill: currentColor; }
.block:hover .btn-star, .block.active .btn-star { opacity: 1; }

.badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  flex-shrink: 0;
}
.badge-meta   { background: var(--yellow-bg); color: var(--yellow); }
.badge-h1     { background: var(--blue-bg);   color: var(--blue);   }
.badge-h2     { background: var(--green-bg);  color: var(--green);  }
.badge-text   { background: var(--purple-bg); color: var(--purple); }
.block-heading-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block-body {
  padding: 13px 14px;
  font-size: 13.5px;
  line-height: 1.75;
  background-color: var(--blocks-doc-texture-fill, transparent);
  background-image: var(--blocks-doc-texture-image, none);
  background-size: var(--blocks-doc-texture-size, auto);
  background-position: var(--blocks-doc-texture-position, 0 0);
  background-repeat: var(--blocks-doc-texture-repeat, repeat);
}

.block-font-en { font-family: var(--blocks-doc-font-en, initial); }
.block-font-zh { font-family: var(--blocks-doc-font-zh, initial); }

.blocks-doc-frontmatter {
  font: inherit;
  font-size: 12.5px;
  line-height: 1.9;
}

.blocks-doc-frontmatter-row {
  display: flex;
  gap: 8px;
  padding: 2px 0;
}

.blocks-doc-frontmatter-key {
  min-width: 80px;
  color: var(--text-muted);
}

.blocks-doc-frontmatter-value {
  color: var(--text);
}

/* Markdown inside blocks */
.block-body h1, .block-body h2, .block-body h3, .block-body h4 {
  color: var(--blue);
  margin: 12px 0 6px;
  line-height: 1.4;
}
.block-body h1 { font-size: 16px; }
.block-body h2 { font-size: 14.5px; }
.block-body h3 { font-size: 13.5px; }
.block-body h4 { font-size: 13px; color: var(--text-muted); }

.block-body p   { margin: 5px 0; }
.block-body ul, .block-body ol { padding-left: 20px; margin: 5px 0; }
.block-body li  { margin: 3px 0; }
.block-body strong { color: var(--text); }
.block-body em     { color: var(--text-muted); }

.block-body code {
  font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--green);
}

.block-body pre,
.analysis-body pre {
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 12px 14px;
  overflow-x: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 8px 0;
  max-width: 100%;
  box-sizing: border-box;
}
.block-body pre code,
.analysis-body pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-size: 12px;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.block-body blockquote {
  border-left: 3px solid var(--blue-border);
  padding: 4px 12px;
  color: var(--text-muted);
  margin: 6px 0;
  background: var(--blue-bg);
  border-radius: 0 4px 4px 0;
}

.block-body table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 12.5px; }
.block-body th, .block-body td { border: 1px solid var(--border); padding: 5px 10px; text-align: left; }
.block-body th { background: var(--bg-overlay); color: var(--text-muted); font-weight: 600; }

.block-body a,
.analysis-body a {
  color: var(--blue);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: color-mix(in srgb, var(--blue) 50%, var(--border-subtle) 50%);
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
  text-decoration-skip-ink: auto;
}

.block-body a:hover,
.analysis-body a:hover {
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  text-decoration-color: currentColor;
  text-decoration-thickness: .1em;
}

.block-body img,
.analysis-body img {
  max-width: 100%;
  height: auto;
}

.block-body img {
  cursor: zoom-in;
}

.block-body video,
.analysis-body video {
  display: block;
  max-width: 100%;
  height: auto;
}

.block-body .katex-display,
.analysis-body .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
}

.block-body .katex,
.analysis-body .katex {
  font-size: 1.02em;
}

.block-body hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }

.translation-pair-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.translation-pair {
  display: flex;
  flex-direction: column;
}

.translation-pair-source,
.translation-pair-target {
  min-width: 0;
}

.translation-pair-target {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--border-subtle) 78%, transparent);
}

.translation-pair-target p,
.translation-pair-target li,
.translation-pair-target blockquote,
.translation-pair-target td,
.translation-pair-target th,
.translation-pair-target h1,
.translation-pair-target h2,
.translation-pair-target h3,
.translation-pair-target h4 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: color-mix(in srgb, var(--blue) 42%, var(--border-subtle) 58%);
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
  text-decoration-skip-ink: auto;
}

.translation-comparison-list {
  padding-left: 20px;
  margin: 5px 0;
}

.translation-comparison-list-item {
  margin: 3px 0;
}

.translation-comparison-list-item-body > :first-child {
  margin-top: 0;
}

.translation-comparison-list-item-body > :last-child {
  margin-bottom: 0;
}

.translation-comparison-list-item-target .translation-comparison-list-item-body p,
.translation-comparison-list-item-target .translation-comparison-list-item-body li,
.translation-comparison-list-item-target .translation-comparison-list-item-body blockquote,
.translation-comparison-list-item-target .translation-comparison-list-item-body td,
.translation-comparison-list-item-target .translation-comparison-list-item-body th,
.translation-comparison-list-item-target .translation-comparison-list-item-body h1,
.translation-comparison-list-item-target .translation-comparison-list-item-body h2,
.translation-comparison-list-item-target .translation-comparison-list-item-body h3,
.translation-comparison-list-item-target .translation-comparison-list-item-body h4,
.translation-comparison-list-item-target .translation-comparison-list-item-body {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: color-mix(in srgb, var(--blue) 42%, var(--border-subtle) 58%);
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
  text-decoration-skip-ink: auto;
}

.translation-pair-source > :first-child,
.translation-pair-target > :first-child {
  margin-top: 0;
}

.translation-pair-source > :last-child,
.translation-pair-target > :last-child {
  margin-bottom: 0;
}

.translation-pair.partial {
  gap: 0;
}

.critical-reading-mark {
  position: relative;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-image: linear-gradient(180deg, transparent 0 48%, var(--critical-reading-bg, rgba(255,255,255,.18)) 48% 100%);
  text-decoration-line: underline;
  text-decoration-color: var(--critical-reading-line, currentColor);
  text-decoration-thickness: .15em;
  text-underline-offset: .18em;
  text-decoration-skip-ink: none;
  cursor: help;
}

.critical-reading-floating-bubble {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 92px;
  max-width: min(360px, calc(100vw - 24px));
  pointer-events: none;
  padding: 9px 11px 10px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-raised) 92%, var(--bg-overlay) 8%);
  color: var(--text);
  white-space: normal;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translateY(4px) scale(.98);
  transition: opacity .08s ease, transform .08s ease;
  z-index: 360;
  overflow-wrap: anywhere;
}

.critical-reading-floating-bubble::after {
  content: '';
  position: absolute;
  left: var(--critical-bubble-anchor-x, 50%);
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  transform: translateX(-50%) rotate(45deg);
}

.critical-reading-floating-bubble.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.critical-reading-floating-bubble.below {
  transform: translateY(-4px) scale(.98);
}

.critical-reading-floating-bubble.below.open {
  transform: translateY(0) scale(1);
}

.critical-reading-floating-bubble.below::after {
  top: -7px;
  bottom: auto;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid var(--border-subtle);
  border-top: 1px solid var(--border-subtle);
}

.critical-reading-bubble-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
}

.critical-reading-bubble-comment {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.critical-reading-mark[data-critical-type="claim"] {
  --critical-reading-bg: var(--critical-claim-bg, rgba(63, 185, 80, 0.26));
  --critical-reading-line: var(--critical-claim-line, #3fb950);
}

.critical-reading-mark[data-critical-type="evidence"] {
  --critical-reading-bg: var(--critical-evidence-bg, rgba(88, 166, 255, 0.26));
  --critical-reading-line: var(--critical-evidence-line, #58a6ff);
}

.critical-reading-mark[data-critical-type="premise"] {
  --critical-reading-bg: var(--critical-premise-bg, rgba(224, 218, 31, 0.28));
  --critical-reading-line: var(--critical-premise-line, #e0da1f);
}

.critical-reading-mark[data-critical-type="alternative"] {
  --critical-reading-bg: var(--critical-alternative-bg, rgba(255, 161, 88, 0.28));
  --critical-reading-line: var(--critical-alternative-line, #ffa158);
}

.critical-reading-mark[data-critical-type="counterexample"] {
  --critical-reading-bg: var(--critical-counterexample-bg, rgba(248, 81, 73, 0.28));
  --critical-reading-line: var(--critical-counterexample-line, #f85149);
}

.critical-reading-mark:hover {
  filter: brightness(1.04);
}

.critical-reading-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.critical-reading-color-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-overlay) 72%, var(--bg-raised) 28%);
}

.critical-reading-color-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.critical-reading-color-text {
  min-width: 0;
}

.critical-reading-color-swatch {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--swatch-line, currentColor);
  box-shadow: inset 0 0 0 4px var(--swatch-bg, rgba(255,255,255,.18));
  border: 1px solid color-mix(in srgb, var(--swatch-line, currentColor) 72%, var(--border-subtle) 28%);
}

.critical-reading-color-text strong {
  display: block;
  font-size: 12px;
  color: var(--text);
  line-height: 1.2;
}

.critical-reading-color-text span {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.3;
}

.critical-reading-color-input {
  width: 34px;
  height: 34px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-overlay) 76%, var(--bg-raised) 24%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-raised) 42%, transparent);
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
}

.critical-reading-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.critical-reading-color-input::-webkit-color-swatch,
.critical-reading-color-input::-moz-color-swatch {
  border: none;
  border-radius: 9px;
}

.critical-reading-color-input:focus-visible {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

.critical-reading-color-actions {
  display: flex;
  justify-content: flex-end;
}

/* ── Analysis (right) pane ───────────────────────────────── */
#analysis-pane {
  width: var(--analysis-w);
  min-width: var(--analysis-w);
  overflow-y: auto;
  padding: 24px 18px;
  background: var(--bg);
}

.analysis-header {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}

.analysis-header-main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.analysis-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.analysis-mode-switch {
  min-width: 0;
}

.analysis-mode-switch .tseg-btn {
  flex: 0 0 auto;
  min-width: 68px;
  padding-inline: 12px;
}

.analysis-mode-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue-bg) 76%, var(--bg-raised) 24%);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.analysis-action-btn {
  border: 1px solid var(--border-subtle);
  background: var(--bg-raised);
  color: var(--text);
  border-radius: 999px;
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1px;
  transition: border-color .15s, transform .15s, background .15s, color .15s;
}

.analysis-action-btn.icon-only {
  width: 30px;
  min-width: 30px;
  padding: 0;
  justify-content: center;
  gap: 0;
}

.analysis-action-btn .spinner {
  width: 11px;
  height: 11px;
  border-width: 1.5px;
}

.analysis-action-btn:hover {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--bg-raised) 92%, var(--bg-overlay) 8%);
  transform: translateY(-1px);
}

.analysis-action-btn.secondary {
  background: var(--bg-raised);
}

.analysis-action-btn.generated {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue-border) 74%, var(--border-subtle) 26%);
  background: var(--bg-raised);
}

.analysis-action-btn.generated:hover {
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--blue-bg) 12%);
}

.analysis-action-btn.active {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--bg-raised) 64%, var(--blue-bg) 36%);
  color: var(--blue);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue-border) 72%, transparent 28%);
}

.analysis-action-btn.generated.active {
  background: color-mix(in srgb, var(--bg-raised) 58%, var(--blue-bg) 42%);
}

.analysis-action-btn:disabled {
  cursor: wait;
  opacity: .7;
  transform: none;
}

.analysis-visual-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px 0 6px;
}

.analysis-progress-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.analysis-progress-count {
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.analysis-progress-text {
  color: var(--text-muted);
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.analysis-card {
  margin-bottom: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all .22s ease;
}

.analysis-card.active {
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg), 0 4px 20px rgba(56,139,253,.12);
  transform: scale(1.015);
  z-index: 1;
  position: relative;
}

.analysis-card-bar {
  padding: 7px 12px;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}

.analysis-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-body {
  padding: 12px 13px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text);
}

/* Markdown in analysis */
.analysis-body h1, .analysis-body h3 {
  font-size: 12.5px;
  color: var(--green);
  margin: 8px 0 4px;
  font-weight: 700;
}
.analysis-body h2 {
  font-size: 12px;
  color: var(--green);
  margin: 8px 0 4px;
  font-weight: 700;
}
.analysis-body p   { margin: 4px 0; }
.analysis-body ul, .analysis-body ol { padding-left: 16px; margin: 4px 0; }
.analysis-body li  { margin: 2px 0; }
.analysis-body strong {
  color: var(--yellow);
}
.analysis-body em     { color: var(--text-muted); }
.analysis-body code   {
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 11.5px;
  background: var(--bg-overlay);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--green);
}
.analysis-body .mermaid {
  margin: 10px 0 4px;
  text-align: center;
  overflow-x: auto;
}
.analysis-body .mermaid[data-content-media-preview="mermaid"] {
  cursor: zoom-in;
  border-radius: 18px;
  transition: background .18s ease, box-shadow .18s ease;
}
.analysis-body .mermaid[data-content-media-preview="mermaid"]:hover,
.analysis-body .mermaid[data-content-media-preview="mermaid"]:focus-visible {
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  outline: none;
}
.analysis-body .mermaid svg { max-width: 100%; height: auto; }
.analysis-map-block {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.analysis-map-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}
.analysis-map-copy {
  display: grid;
  gap: 2px;
}
.analysis-map-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.analysis-map-copy strong,
.analysis-map-count {
  font-size: 12px;
  color: var(--text-muted);
}
.analysis-map-copy strong {
  color: var(--text);
}
.analysis-map-location-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.analysis-map-location {
  appearance: none;
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-raised) 84%, var(--bg-overlay) 16%);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.analysis-map-location:hover,
.analysis-map-location:focus-visible,
.analysis-map-location.is-active {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--blue-border) 58%, var(--border) 42%);
  background: color-mix(in srgb, var(--blue-bg) 36%, var(--bg-raised) 64%);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  outline: none;
}
.analysis-map-location-name {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text);
}
.analysis-map-location-context {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.analysis-map-canvas {
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: 248px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-overlay) 54%, var(--bg-raised) 46%);
}
.analysis-map-stage {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  user-select: none;
}
.analysis-map-stage,
.analysis-map-stage * {
  user-select: none;
}
.analysis-map-stage .maplibregl-map,
.analysis-map-stage .maplibregl-canvas-container,
.analysis-map-stage .maplibregl-canvas {
  width: 100%;
  height: 100%;
  z-index: 0 !important;
}
.analysis-map-stage .maplibregl-control-container {
  display: none;
}
.analysis-map-stage .maplibregl-canvas {
  outline: none;
}
.analysis-map-stage .maplibregl-canvas-container.maplibregl-interactive,
.analysis-map-stage .maplibregl-canvas-container.maplibregl-interactive .maplibregl-canvas {
  cursor: grab;
}
.analysis-map-stage .maplibregl-canvas-container.maplibregl-interactive:active,
.analysis-map-stage .maplibregl-canvas-container.maplibregl-interactive:active .maplibregl-canvas {
  cursor: grabbing;
}
.analysis-map-marker {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.analysis-map-marker:focus-visible {
  outline: none;
}
.analysis-map-marker-core {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 88%, white 12%);
  border: 2px solid color-mix(in srgb, var(--bg-raised) 82%, var(--bg) 18%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.analysis-map-marker:hover .analysis-map-marker-core,
.analysis-map-marker:focus-visible .analysis-map-marker-core,
.analysis-map-marker.is-active .analysis-map-marker-core {
  transform: scale(1.18);
  background: color-mix(in srgb, var(--blue) 74%, var(--text) 26%);
  border-color: color-mix(in srgb, var(--bg-raised) 68%, var(--blue-bg) 32%);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--blue) 24%, transparent);
}
.analysis-map-stage .maplibregl-popup {
  z-index: 2 !important;
  pointer-events: none;
}
.analysis-map-stage .maplibregl-popup-tip {
  display: none;
}
.analysis-map-stage .maplibregl-popup-content {
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 44%, var(--border-subtle) 56%);
  background: color-mix(in srgb, var(--bg-raised) 95%, var(--bg) 5%);
  color: var(--text);
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}
.analysis-map-stage .maplibregl-popup-close-button {
  display: none;
}
.analysis-map-popup-copy {
  display: grid;
  gap: 3px;
}
.analysis-map-popup-copy strong {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
}
.analysis-map-popup-copy span {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-muted);
  max-width: 180px;
  white-space: normal;
}
.analysis-map-footnote {
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: .02em;
}
.vega-lite-block {
  display: block;
  width: 100%;
  margin: 10px 0 4px;
  overflow-x: auto;
}
.vega-lite-block .vega-embed {
  width: 100%;
}
.vega-lite-block .vega-embed summary,
.vega-lite-block .vega-embed details,
.vega-lite-block .vega-actions {
  display: none !important;
}
.vega-lite-block canvas,
.vega-lite-block svg {
  max-width: 100%;
  height: auto;
}
.vega-lite-error {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(248,81,73,.28);
  background: rgba(248,81,73,.08);
  color: #f85149;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.analysis-idle-state {
  display: grid;
  gap: 6px;
  padding: 14px 2px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}
.analysis-idle-state strong {
  color: var(--text);
  font-size: 12.5px;
}

.knowledge-card-empty {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px dashed var(--border-subtle);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
}

.knowledge-card-empty-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.knowledge-card-empty strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}

.knowledge-card-empty span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.knowledge-card-empty .loading-row {
  padding: 0;
}

.knowledge-card-empty .analysis-action-btn {
  width: fit-content;
}

#knowledge-card-pane {
  display: grid;
  gap: 12px;
}

#analysis-list[hidden],
#knowledge-card-pane[hidden] {
  display: none !important;
}

.knowledge-card-list {
  display: grid;
  gap: 12px;
}

.knowledge-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 94%, transparent), color-mix(in srgb, var(--bg-overlay) 64%, var(--bg-raised) 36%));
  box-shadow: 0 18px 34px rgba(0,0,0,.12);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}

.knowledge-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--yellow), var(--blue));
  opacity: .94;
}

.knowledge-card:hover {
  border-color: color-mix(in srgb, var(--blue-border) 72%, var(--border-subtle) 28%);
  transform: translateY(-1px);
}

.knowledge-card.active {
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg), 0 18px 34px rgba(24,88,149,.14);
  transform: translateY(-1px);
}

.knowledge-card-shell {
  display: grid;
  gap: 12px;
  padding: 16px 16px 14px 18px;
}

.knowledge-card-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.knowledge-card-index {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--yellow);
}

.knowledge-card-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 70%, var(--border-subtle) 30%);
  background: color-mix(in srgb, var(--blue-bg) 68%, var(--bg-raised) 32%);
  color: var(--blue);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
}

.knowledge-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.45;
}

.knowledge-card-face {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg) 52%, var(--bg-raised) 48%);
}

.knowledge-card-face-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.knowledge-card-prompt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}

.knowledge-card-answer {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
  white-space: pre-wrap;
}

.knowledge-card-clue {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--yellow) 28%, var(--border-subtle) 72%);
  background: color-mix(in srgb, var(--yellow-bg) 48%, var(--bg-raised) 52%);
  color: color-mix(in srgb, var(--text) 88%, var(--yellow) 12%);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.knowledge-card:not(.flipped) .knowledge-card-face-back {
  display: none;
}

.knowledge-card.flipped .knowledge-card-face-front {
  display: none;
}

.knowledge-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.knowledge-card-source {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.knowledge-card-btn {
  border: 1px solid var(--border-subtle);
  background: var(--bg-raised);
  color: var(--text);
  border-radius: 999px;
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  transition: border-color .15s, transform .15s, background .15s, color .15s;
  font-family: inherit;
}

.knowledge-card-btn:hover {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--bg-raised) 90%, var(--bg-overlay) 10%);
  transform: translateY(-1px);
}

.knowledge-card-btn.primary {
  border-color: color-mix(in srgb, var(--blue-border) 70%, var(--border-subtle) 30%);
  background: color-mix(in srgb, var(--blue-bg) 58%, var(--bg-raised) 42%);
  color: var(--blue);
}

/* Loading states */
.loading-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255,255,255,.1);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .75s linear infinite;
  flex-shrink: 0;
}

[data-theme="light"] .spinner {
  border: 2px solid rgba(0,0,0,.1);
  border-top-color: var(--blue);
}

/* Streaming cursor */
.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--blue);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: blink .7s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Progress bar */
#progress-bar {
  height: 2px;
  background: var(--blue);
  position: fixed;
  top: 44px;
  left: 0;
  z-index: 100;
  transition: width .3s ease;
}

/* Scrollbars */
::-webkit-scrollbar         { width: 5px; height: 5px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #484f58; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #8b95a1; }

/* Analysis card refresh button */
.btn-refresh {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  padding: 3px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  opacity: 0;
  transition: color .15s, opacity .15s, background .15s;
  flex-shrink: 0;
}
.btn-refresh:hover { color: var(--text); background: var(--bg-overlay); }
.analysis-card:hover .btn-refresh { opacity: 1; }
.btn-refresh:disabled,
.analysis-card:hover .btn-refresh:disabled {
  opacity: .45;
  cursor: wait;
  color: var(--text-dim);
  background: none;
}

/* Regenerating indicator (shown while keeping old content) */
.regen-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-dim);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.regen-bar .spinner { width: 10px; height: 10px; border-width: 1.5px; }
.regen-bar.error {
  color: #f85149;
  border-bottom-color: rgba(248,81,73,.2);
}

/* File tree icon states */
.tree-file .file-icon { fill: var(--tree-file-icon-fill); transition: fill .15s; }
.tree-file.analyzed { --tree-file-icon-fill: var(--text-muted); }
.tree-file.visualized,
.tree-file.visualized:hover,
.tree-file.visualized.active { --tree-file-icon-fill: var(--blue); }

.tree-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-status { flex-shrink: 0; display: flex; align-items: center; }
.file-status .spinner { width: 10px; height: 10px; border-width: 1.5px; }

/* Light mode overrides */
[data-theme="light"] .block-bar         { background: var(--bg-overlay); }
[data-theme="light"] .analysis-card-bar { background: var(--bg-overlay); }
[data-theme="light"] .analysis-body strong {
  color: var(--blue);
}

/* Generated by reader/scripts/build.mjs from reader/src/settings-panel-sections. Edit the section files instead. */

/* ── Settings button & panel ─────────────────────────────── */
#btn-settings,
#btn-content-fullscreen {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, border-color .15s, background .15s;
  flex-shrink: 0;
}
#btn-settings:hover, #btn-settings.active,
#btn-content-fullscreen:hover, #btn-content-fullscreen.active {
  color: var(--text); border-color: var(--border); background: var(--bg-overlay);
}

#btn-content-fullscreen-exit {
  position: fixed;
  top: 16px;
  right: 18px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-overlay);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 55;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, color .15s, border-color .15s, background .15s;
}

#btn-content-fullscreen-exit:hover,
#btn-content-fullscreen-exit:focus-visible {
  opacity: 1;
  color: var(--text);
  border-color: var(--border);
  background: var(--bg-overlay);
  outline: none;
}

html[data-content-fullscreen="1"] #btn-content-fullscreen-exit {
  visibility: visible;
  opacity: .28;
  pointer-events: auto;
}

html[data-content-fullscreen="1"] #topbar,
html[data-content-fullscreen="1"] #sidebar,
html[data-content-fullscreen="1"] #selection-action,
html[data-content-fullscreen="1"] #progress-bar {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-content-fullscreen="1"] #content {
  position: fixed;
  inset: 0;
  z-index: 40;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
}

#settings-backdrop {
  position: fixed;
  inset: 44px 0 0 0;
  background: rgba(6, 10, 14, .34);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 190;
  backdrop-filter: blur(2px);
}
#settings-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

#settings-panel {
  position: fixed;
  top: 44px;
  right: 0;
  bottom: 0;
  width: min(680px, 100vw);
  background: var(--bg-raised);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 44px rgba(0,0,0,.28);
  z-index: 220;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
}
#settings-panel.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

#conv-queue-wrap { position: relative; flex-shrink: 0; }

@media (max-width: 1180px) {
  .topbar-task-detail { display: none; }
  .topbar-task-status { max-width: min(320px, 30vw); }
}

#btn-conv-queue {
  display: flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 10px 0 8px; border-radius: 999px;
  border: 1px solid var(--border-subtle); background: var(--bg-overlay);
  color: var(--text); font-size: 12px; font-family: inherit;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
#btn-conv-queue:hover { border-color: var(--border); background: color-mix(in srgb, var(--bg-overlay) 80%, var(--blue) 20%); }
#btn-conv-queue.active { border-color: var(--blue-border); background: var(--blue-bg); color: var(--blue); }
#conv-queue-badge { display: inline-flex; align-items: center; gap: 5px; }
#btn-conv-queue .spinner { width: 9px; height: 9px; border-width: 1.5px; }

#conv-queue-backdrop {
  position: fixed; inset: 44px 0 0 0;
  background: rgba(6,10,14,.34); opacity: 0; pointer-events: none;
  transition: opacity .2s ease; z-index: 190; backdrop-filter: blur(2px);
}
#conv-queue-backdrop.open { opacity: 1; pointer-events: auto; }

#conv-queue-panel {
  position: fixed; top: 44px; right: 0; bottom: 0;
  width: min(480px, 100vw); background: var(--bg-raised);
  border-left: 1px solid var(--border); box-shadow: -18px 0 44px rgba(0,0,0,.28);
  z-index: 220; display: grid;
  grid-template-rows: auto auto auto minmax(0,1fr) auto;
  transform: translateX(100%); opacity: 0; pointer-events: none;
  transition: transform .24s cubic-bezier(.22,1,.36,1), opacity .18s ease;
}
#conv-queue-panel.open { transform: translateX(0); opacity: 1; pointer-events: auto; }

.conv-queue-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
}
.conv-queue-head strong { font-size: 14px; font-weight: 700; color: var(--text); }

.conv-queue-tabs {
  display: flex; gap: 6px;
  padding: 10px 16px; border-bottom: 1px solid var(--border-subtle);
}
.conv-queue-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; padding: 6px 10px;
  border: 1px solid var(--border-subtle); border-radius: 999px;
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: 12px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.conv-queue-tab:hover {
  border-color: var(--border);
  color: var(--text);
}
.conv-queue-tab.active {
  border-color: var(--blue-border);
  background: var(--blue-bg);
  color: var(--blue);
}
.conv-queue-tab.is-running {
  border-color: var(--blue-border);
  color: var(--blue);
}
.conv-queue-tab-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--bg-overlay); color: inherit;
  font-size: 11px; line-height: 1;
}
.conv-queue-tab-count .spinner {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
}

.conv-queue-selbar {
  position: relative;
  display: flex; align-items: center;
  min-height: 33px;
  padding: 7px 16px; border-bottom: 1px solid var(--border-subtle);
  font-size: 12px; color: var(--text-muted);
}
.conv-queue-selbar label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding-right: 168px;
}
.conv-queue-provider-label {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 152px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

#conv-queue-list { overflow-y: auto; padding: 4px 0; }

.conv-queue-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; transition: background .1s;
}
.conv-queue-row:hover { background: var(--bg-overlay); }
.conv-queue-row.is-disabled { opacity: .72; }
.conv-queue-check { flex-shrink: 0; width: 14px; height: 14px; cursor: pointer; }
.conv-queue-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conv-queue-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-queue-dir  { font-size: 11px; color: var(--text-dim); }
.conv-queue-status { flex-shrink: 0; width: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.conv-queue-status.ok    { color: var(--green); }
.conv-queue-status.error { color: #f85149; }
.conv-queue-status.active { color: var(--blue); }
.conv-queue-provider { flex-shrink: 0; }
.conv-queue-converter {
  flex: 0 0 auto;
  max-width: 96px;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 42%, var(--border-subtle) 58%);
  background: color-mix(in srgb, var(--blue-bg) 34%, var(--bg-raised) 66%);
  color: color-mix(in srgb, var(--blue) 74%, var(--text-muted) 26%);
  font-size: 11px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-queue-row .cext-seg .tseg-btn {
  min-width: 72px;
  padding: 3px 10px;
  white-space: nowrap;
}

.conv-queue-item + .conv-queue-item { border-top: 1px solid var(--border-subtle); }
.marker-opts-panel {
  padding: 0 16px 10px 40px;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  align-items: end;
  gap: 6px 18px;
}
.marker-opts-field,
.marker-opts-check-wrap { display: grid; grid-template-rows: 13px 26px; gap: 3px; align-items: start; }
.marker-opts-label { font-size: 10px; color: var(--text-dim); font-family: monospace; letter-spacing: .02em; user-select: none; }
.marker-opts-field input[type="text"] {
  box-sizing: border-box;
  height: 26px;
  font-size: 11.5px; padding: 3px 7px; width: 108px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg-overlay); color: var(--text); outline: none; font-family: monospace;
}
.marker-opts-field input[type="text"]:focus { border-color: var(--blue-border); }
.marker-opts-check-row { display: flex; align-items: center; gap: 5px; height: 26px; }
.marker-opts-check-row input[type="checkbox"] { width: 13px; height: 13px; cursor: pointer; accent-color: var(--blue); flex-shrink: 0; }
.marker-opts-check-row label { font-size: 11.5px; color: var(--text-muted); cursor: pointer; }
.marker-opts-toggle {
  flex-shrink: 0; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0; border-radius: 4px;
  color: var(--text-dim); transition: color .15s;
}
.marker-opts-toggle:hover { color: var(--blue); }
.marker-opts-toggle svg { transition: transform .2s; }
.marker-opts-toggle.expanded { color: var(--blue); }
.marker-opts-toggle.expanded svg { transform: rotate(90deg); }
.conv-queue-config-panel {
  padding: 0 16px 10px 40px;
  display: flex; align-items: flex-end; gap: 12px;
}
.conv-queue-config-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.conv-queue-config-label { font-size: 10px; color: var(--text-dim); letter-spacing: .02em; user-select: none; }
.conv-queue-image-type-select {
  min-width: 132px; height: 28px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-overlay); color: var(--text);
  font: inherit; font-size: 12px; outline: none;
}
.conv-queue-image-type-select:focus { border-color: var(--blue-border); }

.conv-queue-foot {
  padding: 11px 16px; border-top: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.conv-queue-foot-info { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

#btn-conv-run {
  padding: 7px 18px; border: 1px solid var(--blue-border); background: var(--blue-bg);
  color: var(--blue); border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: filter .15s;
}
#btn-conv-run:hover { filter: brightness(1.1); }
#btn-conv-run:disabled { opacity: .5; cursor: not-allowed; filter: none; }

/* Generated by reader/scripts/build.mjs from reader/src/memo-settings-sections. Edit the section files instead. */

#memo-backdrop {
  position: fixed;
  inset: 44px 0 0 0;
  background: rgba(6, 10, 14, .34);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 190;
  backdrop-filter: blur(2px);
}
#memo-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

#memo-panel {
  position: fixed;
  top: 44px;
  right: 0;
  bottom: 0;
  width: min(720px, 100vw);
  background: var(--bg-raised);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 44px rgba(0,0,0,.28);
  z-index: 220;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
}
#memo-panel.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.memo-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-raised) 86%, var(--bg-overlay) 14%);
}

.memo-panel-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.memo-panel-title strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.memo-panel-title span {
  font-size: 11px;
  color: var(--text-dim);
}

.memo-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-mini {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--bg-overlay);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.btn-mini:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-overlay) 80%, var(--blue) 20%);
}
.btn-mini:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--bg-overlay);
  border-color: var(--border-subtle);
}

.btn-icon-mini {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--bg-overlay);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: border-color .15s, background .15s, color .15s;
}

.btn-icon-mini:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-overlay) 84%, var(--blue) 16%);
  color: var(--text);
}

.memo-panel-sub {
  padding: 12px 14px;
  color: var(--text-muted);
  font-size: 11px;
}

.memo-panel-layout {
  display: grid;
  grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
  min-height: 0;
}

.memo-panel-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border-right: 1px solid var(--border-subtle);
}

.memo-panel-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

#memo-list {
  overflow-y: auto;
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.memo-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.memo-row:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-overlay) 82%, var(--bg-raised) 18%);
}
.memo-row.active {
  border-color: var(--border);
  background: var(--bg-overlay);
}

.memo-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.memo-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.memo-row-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memo-row-rename {
  display: none;
  align-items: center;
  gap: 4px;
}
.memo-row:hover .memo-row-rename,
.memo-row.active .memo-row-rename { display: flex; }
.memo-row-rename-btn {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); border-radius: 4px; padding: 0;
  transition: color .15s, background .15s;
}
.memo-row-rename-btn:hover { color: var(--text); background: var(--bg-raised); }
.memo-row-name-input {
  flex: 1; min-width: 0;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-size: 12.5px; font-weight: 600;
  font-family: inherit; border-radius: 5px;
  padding: 1px 6px; outline: none;
}
.memo-row-name-input:focus { border-color: var(--blue); }

.memo-current-badge {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: .3px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.memo-row-meta {
  font-size: 11px;
  color: var(--text-dim);
}

.memo-row-del,
.memo-entry-del {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  transition: color .15s, background .15s;
}
.memo-row-del:hover,
.memo-entry-del:hover {
  color: #f85149;
  background: rgba(248,81,73,.08);
}

.memo-panel-label {
  padding: 12px 16px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .45px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle);
}
.memo-content-name {
  cursor: text;
  border-radius: 4px;
  padding: 1px 4px;
  margin: -1px -4px;
  transition: background .15s;
}
.memo-content-name:hover { background: var(--bg-overlay); }
.memo-content-name-input {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-size: 11px; font-weight: 700;
  letter-spacing: .45px; text-transform: uppercase;
  font-family: inherit; border-radius: 5px;
  padding: 3px 8px; outline: none; width: 220px;
}
.memo-content-name-input:focus { border-color: var(--blue); }
.memo-row-del:disabled { opacity: .25; cursor: not-allowed; }

#memo-items {
  overflow-y: auto;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.memo-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-raised) 90%, var(--bg-overlay) 10%);
}

.memo-entry-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.memo-entry-text {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.memo-entry-note {
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-overlay) 76%, var(--blue-bg) 24%);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, var(--blue) 28%);
  color: var(--text);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.memo-entry-meta {
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.5;
}

.memo-entry-source {
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.5;
}

.memo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
}

.memo-highlight {
  background: color-mix(in srgb, var(--yellow-bg) 82%, transparent);
  color: var(--text);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--yellow) 55%, transparent);
  border-radius: 4px;
  padding: 0 .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#selection-action {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, 0);
  z-index: 160;
  display: none;
  align-items: center;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--bg-raised) 22%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
  box-shadow: 0 10px 26px rgba(0,0,0,.24);
  overflow: hidden;
}

#selection-action.open { display: inline-flex; }

.selection-action-btn {
  position: relative;
  height: 36px;
  padding: 0 15px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform .15s, background .15s, color .15s;
}

.selection-action-btn + .selection-action-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: color-mix(in srgb, var(--border) 72%, transparent);
}

.selection-action-btn:hover {
  background: color-mix(in srgb, var(--bg-overlay) 68%, var(--bg-raised) 32%);
}

.selection-action-btn:active { transform: translateY(1px); }

.selection-action-btn.is-secondary {
  color: color-mix(in srgb, var(--blue) 82%, var(--text) 18%);
}

.selection-action-btn.is-secondary:hover {
  background: color-mix(in srgb, var(--blue-bg) 42%, var(--bg-raised) 58%);
}

#memo-note-dialog {
  position: fixed;
  inset: 44px 0 0 0;
  z-index: 260;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

#memo-note-dialog.open {
  opacity: 1;
  pointer-events: auto;
}

.memo-note-dialog-shell {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 28px;
}

.memo-note-dialog-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(6, 10, 14, .44);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.memo-note-dialog-backdrop:disabled {
  cursor: default;
}

.memo-note-dialog-card {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--bg-raised) 18%);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--yellow-bg) 38%, transparent) 0, transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 92%, var(--bg-overlay) 8%), var(--bg-raised));
  box-shadow: 0 22px 60px rgba(0,0,0,.34);
}

.memo-note-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.memo-note-dialog-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.memo-note-dialog-copy strong {
  font-size: 18px;
  line-height: 1.1;
  color: var(--text);
}

.memo-note-dialog-copy span {
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.6;
}

.memo-note-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.memo-note-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.memo-note-field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.memo-note-input {
  min-height: 160px;
  width: 100%;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 76%, var(--bg-overlay) 24%);
  color: var(--text);
  padding: 14px 15px;
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.memo-note-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-bg) 60%, transparent);
  background: color-mix(in srgb, var(--bg) 84%, var(--bg-overlay) 16%);
}

.memo-note-input::placeholder {
  color: var(--text-dim);
}

.memo-note-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.memo-note-save-btn {
  border-color: color-mix(in srgb, var(--yellow) 46%, var(--border-subtle) 54%);
  background: color-mix(in srgb, var(--yellow-bg) 78%, var(--bg-overlay) 22%);
  color: color-mix(in srgb, var(--yellow) 70%, var(--text) 30%);
}

.memo-note-save-btn:hover {
  border-color: color-mix(in srgb, var(--yellow) 58%, var(--border) 42%);
  background: color-mix(in srgb, var(--yellow-bg) 88%, var(--bg-overlay) 12%);
}

.memo-note-dialog-card .btn-mini:disabled,
.memo-note-dialog-card .btn-icon-mini:disabled {
  opacity: .42;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .memo-note-dialog-shell {
    padding: 14px;
    align-items: end;
  }

  .memo-note-dialog-card {
    width: min(100%, 100vw - 16px);
    padding: 16px;
    border-radius: 18px 18px 14px 14px;
  }

  .memo-note-dialog-head {
    gap: 10px;
  }

  .memo-note-dialog-copy strong {
    font-size: 16px;
  }

  .memo-note-input {
    min-height: 140px;
  }

  .memo-note-dialog-actions {
    justify-content: stretch;
  }

  .memo-note-dialog-actions .btn-mini {
    flex: 1 1 0;
    justify-content: center;
  }
}

.set-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-raised);
}
.set-title strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: none;
  color: var(--text);
}
.set-title-actions {
  display: flex;
  align-items: center;
}
#settings-panel-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  background: var(--bg-raised);
}
.settings-index-pane {
  min-height: 0;
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.settings-index-sticky {
  position: sticky;
  top: 0;
  padding: 14px 10px 16px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.settings-index-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}
.settings-index-link {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 8px 10px 8px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
  transition: background .15s, color .15s;
}
.settings-index-link:hover {
  background: color-mix(in srgb, var(--bg-overlay) 86%, var(--blue-bg) 14%);
  color: var(--text);
}
.settings-index-link.active {
  background: color-mix(in srgb, var(--bg-overlay) 68%, var(--blue-bg) 32%);
  color: var(--blue);
}
.settings-index-footer {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.settings-index-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.settings-index-utility:hover,
.settings-index-utility:focus-visible {
  border-color: color-mix(in srgb, var(--blue-border) 72%, var(--border) 28%);
  background: color-mix(in srgb, var(--bg-overlay) 64%, var(--blue-bg) 36%);
  color: var(--text);
}
.settings-index-utility-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-index-utility-copy strong {
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
}
.settings-index-utility-copy span {
  font-size: 11px;
  color: var(--text-dim);
}
.settings-panel-main {
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.settings-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.settings-group:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.settings-group-header {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.settings-group-header strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.settings-group-cards {
  display: grid;
  gap: 14px;
}
.settings-group-cards > .set-section + .set-section {
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent 22%);
}
#btn-settings-close {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--bg-overlay);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: border-color .15s, background .15s, color .15s;
}
#btn-settings-close:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-overlay) 84%, var(--blue) 16%);
  color: var(--text);
}
.set-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.set-divider { border-top: 1px solid var(--border-subtle); }

.set-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analysis-auto-run-stack {
  margin-top: 14px;
  margin-bottom: 12px;
}

.set-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
}

.set-switch-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.set-switch-copy strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.set-switch-copy span {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

.set-switch-toggle {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}

.set-switch-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.set-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-overlay) 82%, var(--bg-raised) 18%);
  border: 1px solid var(--border-subtle);
  transition: background .15s, border-color .15s;
}

.set-switch-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform .18s ease, background .15s ease;
}

.set-switch-toggle input:checked + .set-switch-slider {
  background: color-mix(in srgb, var(--blue-bg) 80%, var(--bg-overlay) 20%);
  border-color: var(--blue-border);
}

.set-switch-toggle input:checked + .set-switch-slider::after {
  transform: translateX(18px);
  background: var(--blue);
}

.theme-seg {
  display: flex;
  gap: 3px;
  background: var(--bg-overlay);
  border-radius: 7px;
  padding: 3px;
}
.tseg-btn {
  flex: 1;
  padding: 5px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-muted);
  border-radius: 5px;
  transition: all .15s;
  font-family: inherit;
  font-weight: 500;
}
.tseg-btn.active {
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
}
.tseg-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.cext-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }
.cext-row:last-child { margin-bottom:0; }
.cext-name { font-size:12px; font-family:monospace; color:var(--text); min-width:68px; }
.cext-seg { display:flex; gap:3px; background:var(--bg-overlay); border-radius:7px; padding:3px; }
.cext-seg .tseg-btn { padding:3px 8px; font-size:11px; }

#extra-prompt,
#moffee-extra-prompt {
  width: 100%;
  min-height: 72px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.6;
  padding: 7px 10px;
  resize: vertical;
  font-family: inherit;
}
#extra-prompt::placeholder,
#moffee-extra-prompt::placeholder { color: var(--text-dim); }
#extra-prompt:focus,
#moffee-extra-prompt:focus {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}
.set-hint { font-size: 11px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; }

.blocks-font-settings-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
}

.blocks-font-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.blocks-font-settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.blocks-font-settings-label {
  font-size: 11px;
  color: var(--text-dim);
}

.blocks-texture-preview {
  display: block;
  width: 100%;
  position: relative;
  height: 40px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 52%, transparent);
  background-color: var(--texture-preview-fill, color-mix(in srgb, var(--bg-overlay) 64%, var(--bg-raised) 36%));
  background-image: var(--texture-preview-image, none);
  background-size: var(--texture-preview-size, auto);
  background-position: var(--texture-preview-position, 0 0);
  background-repeat: var(--texture-preview-repeat, repeat);
  overflow: hidden;
}

.blocks-texture-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

.blocks-texture-card .blocks-texture-preview {
  min-height: 46px;
  height: 46px;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent),
    inset 0 -10px 18px color-mix(in srgb, #000 5%, transparent);
}

.blocks-texture-card .blocks-texture-copy {
  width: 100%;
  min-width: 0;
  align-items: flex-start;
}

@media (max-width: 720px) {
  .blocks-font-settings-grid { grid-template-columns: 1fr; }
}

.doc-dir-settings-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-dir-settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc-dir-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
}

.doc-dir-settings-row.is-disabled {
  opacity: .72;
}

.doc-dir-settings-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.doc-dir-settings-order {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-overlay) 72%, var(--bg) 28%);
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
}

.doc-dir-settings-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.doc-dir-settings-copy strong {
  font-size: 12.5px;
  color: var(--text);
}

.doc-dir-settings-copy span {
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.4;
}

.doc-dir-settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.doc-dir-settings-move {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.doc-dir-settings-move svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.doc-dir-settings-move:disabled {
  color: var(--text-dim);
  opacity: .42;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--bg-overlay) 92%, var(--bg) 8%);
  border-color: var(--border-subtle);
}

.doc-dir-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-size: 11px;
  color: var(--text-muted);
  user-select: none;
}

.doc-dir-settings-toggle.is-disabled {
  opacity: .52;
}

.doc-dir-settings-toggle input {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
}

.doc-dir-settings-empty {
  padding: 12px;
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  font-size: 11.5px;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--bg-overlay) 70%, transparent 30%);
}

#moffee-extra-prompt {
  min-height: 96px;
}

#moffee-extra-prompt:disabled {
  opacity: .65;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--bg-overlay) 90%, var(--bg) 10%);
}

.moffee-settings-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.moffee-settings-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.moffee-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 18px;
}

.moffee-settings-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .01em;
}

.moffee-settings-meta {
  font-size: 10.5px;
  color: var(--text-dim);
  text-align: right;
}

.moffee-scheme-grid,
.moffee-flow-grid,
.moffee-theme-grid,
.moffee-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.moffee-theme-grid,
.moffee-template-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.moffee-flow-btn,
.moffee-theme-card {
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}

.moffee-flow-btn {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.moffee-flow-btn strong,
.moffee-theme-card strong {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
}

.moffee-flow-btn span,
.moffee-theme-card span {
  font-size: 10.5px;
  line-height: 1.4;
}

.moffee-theme-card {
  padding: 9px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.moffee-theme-preview {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--theme-preview);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.moffee-theme-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.moffee-flow-btn:hover,
.moffee-theme-card:hover {
  border-color: var(--border);
  background: var(--bg-elevated);
  transform: translateY(-1px);
}

.moffee-flow-btn.active,
.moffee-theme-card.active {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--blue-bg) 38%, var(--bg-elevated));
  color: var(--text);
}

#moffee-extra-prompt {
  width: 100%;
  min-height: 96px;
  resize: vertical;
}

.settings-model-picker {
  margin-top: -2px;
}

.blocks-texture-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.blocks-texture-card {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 10px;
  background: color-mix(in srgb, var(--bg) 74%, var(--bg-overlay) 26%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}

.blocks-texture-card:hover {
  border-color: color-mix(in srgb, var(--blue-border) 52%, var(--border-subtle) 48%);
  transform: translateY(-1px);
}

.blocks-texture-card.active {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--bg-raised) 82%, var(--blue-bg) 18%);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--blue-bg) 42%, transparent);
}

.blocks-texture-preview {
  height: 40px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 52%, transparent);
  background-color: var(--texture-preview-fill, color-mix(in srgb, var(--bg-overlay) 64%, var(--bg-raised) 36%));
  background-image: var(--texture-preview-image, none);
  background-size: var(--texture-preview-size, auto);
  background-position: var(--texture-preview-position, 0 0);
  background-repeat: var(--texture-preview-repeat, repeat);
}

.blocks-texture-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.blocks-texture-copy strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.blocks-texture-copy span {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.moffee-flow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.moffee-flow-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--bg) 78%, var(--bg-overlay) 22%);
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: border-color .16s, background .16s, transform .16s, color .16s;
}

.moffee-flow-btn:hover {
  border-color: color-mix(in srgb, var(--blue-border) 52%, var(--border-subtle) 48%);
  transform: translateY(-1px);
}

.moffee-flow-btn.active {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--bg-raised) 82%, var(--blue-bg) 18%);
  color: var(--text);
}

.moffee-flow-btn strong {
  display: block;
  font-size: 12px;
  color: inherit;
}

.moffee-flow-btn span {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.moffee-syntax-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.moffee-syntax-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 90%, var(--bg) 10%);
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1;
}

.dim-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dim-shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dim-shell-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dim-shell-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.dim-count {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 48%, var(--border-subtle) 52%);
  background: color-mix(in srgb, var(--bg-overlay) 74%, var(--blue-bg) 26%);
  color: var(--blue);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
}

.dim-shell-note {
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

.dim-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dim-list + .dim-shell-note {
  margin-top: 2px;
}

.dim-empty {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--border-subtle) 72%, var(--blue-border) 28%);
  background: color-mix(in srgb, var(--bg-overlay) 82%, var(--bg-raised) 18%);
  font-size: 11px;
  line-height: 1.65;
  color: var(--text-dim);
}

.dim-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 84%, var(--bg-raised) 16%);
}

.dim-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dim-type {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: .01em;
}

.dim-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dim-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, transparent 18%);
  background: color-mix(in srgb, var(--bg-raised) 90%, var(--bg-overlay) 10%);
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.dim-item-actions {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
}

.dim-item-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-raised);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  color: var(--text-dim);
  transition: border-color .15s, background .15s, color .15s;
}

.dim-item-btn:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-overlay) 82%, var(--bg-raised) 18%);
  color: var(--text);
}

.dim-item-btn.del:hover {
  border-color: color-mix(in srgb, #f85149 44%, var(--border-subtle) 56%);
  background: rgba(248,81,73,.08);
  color: #f85149;
}

.dim-form {
  margin-top: 2px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 68%, var(--border-subtle) 32%);
  background: color-mix(in srgb, var(--bg-overlay) 86%, var(--blue-bg) 14%);
}

.dim-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dim-form-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
}

.dim-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dim-form-row-wide {
  grid-column: 1 / -1;
}

.dim-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dim-form-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.dim-form-inline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dim-form input,
.dim-form select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  outline: none;
  font-family: inherit;
  appearance: none;
}

.dim-form select {
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 1px),
    calc(100% - 11px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.dim-form input:focus,
.dim-form select:focus {
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

.dim-sub-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dim-sub-empty {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--border-subtle) 74%, var(--blue-border) 26%);
  background: color-mix(in srgb, var(--bg-overlay) 86%, var(--bg-raised) 14%);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

.dim-sub-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.dim-sub-item-main {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.dim-sub-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-overlay) 72%, var(--blue-bg) 28%);
  color: var(--blue);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

.dim-sub-input {
  width: 100%;
  min-width: 0;
}

.dim-sub-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dim-inline-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-raised);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  color: var(--text-dim);
  transition: border-color .15s, background .15s, color .15s, opacity .15s;
}

.dim-inline-btn:hover:not(:disabled) {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-overlay) 82%, var(--bg-raised) 18%);
  color: var(--text);
}

.dim-inline-btn:disabled {
  cursor: default;
  opacity: .42;
}

.dim-inline-btn.danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, #f85149 44%, var(--border-subtle) 56%);
  background: rgba(248,81,73,.08);
  color: #f85149;
}

.dim-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dim-save-btn {
  background: var(--blue-bg);
  border-color: var(--blue-border);
  color: var(--blue);
}

#btn-dim-add {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}

#btn-dim-add:hover {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--bg-overlay) 72%, var(--blue-bg) 28%);
  color: var(--blue);
}

@media (max-width: 760px) {
  .dim-sub-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .dim-sub-actions {
    justify-content: flex-start;
  }
}

.settings-model-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-model-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.settings-model-toolbar.compact {
  grid-template-columns: minmax(0, 1fr) auto;
}

#default-model-select,
#analysis-model-select,
#knowledge-card-model-select,
#quiz-model-select,
#quiz-grade-model-select,
#moffee-model-select,
#translation-model-select,
#critical-reading-model-select,
#writer-chat-model-select,
#translation-target-language-select,
.settings-select {
  width: 100%;
  height: 38px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--bg-overlay);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238b949e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text);
  font-size: 12.5px;
  padding: 0 40px 0 10px;
  font-family: inherit;
}

#default-model-select:focus,
#analysis-model-select:focus,
#knowledge-card-model-select:focus,
#quiz-model-select:focus,
#quiz-grade-model-select:focus,
#moffee-model-select:focus,
#translation-model-select:focus,
#critical-reading-model-select:focus,
#writer-chat-model-select:focus,
#translation-target-language-select:focus,
.settings-select:focus {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

#btn-default-model-refresh,
#btn-timezone-system,
#btn-analysis-model-refresh,
#btn-knowledge-card-model-refresh,
#btn-quiz-model-refresh,
#btn-quiz-grade-model-refresh,
#btn-mook-settings-model-refresh,
#btn-moffee-model-refresh,
#btn-critical-reading-model-refresh,
#btn-writer-chat-model-refresh,
#btn-translation-model-refresh {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-overlay);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}

#btn-default-model-refresh:hover,
#btn-timezone-system:hover,
#btn-analysis-model-refresh:hover,
#btn-knowledge-card-model-refresh:hover,
#btn-quiz-model-refresh:hover,
#btn-quiz-grade-model-refresh:hover,
#btn-mook-settings-model-refresh:hover,
#btn-moffee-model-refresh:hover,
#btn-critical-reading-model-refresh:hover,
#btn-writer-chat-model-refresh:hover,
#btn-translation-model-refresh:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-overlay) 84%, var(--blue) 16%);
}

#btn-default-model-refresh:disabled,
#btn-timezone-system:disabled,
#btn-analysis-model-refresh:disabled,
#btn-knowledge-card-model-refresh:disabled,
#btn-quiz-model-refresh:disabled,
#btn-quiz-grade-model-refresh:disabled,
#btn-mook-settings-model-refresh:disabled,
#btn-moffee-model-refresh:disabled,
#btn-critical-reading-model-refresh:disabled,
#btn-writer-chat-model-refresh:disabled,
#btn-translation-model-refresh:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--bg-overlay);
  border-color: var(--border-subtle);
}

.translation-settings-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timezone-preview-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-overlay) 68%, var(--bg-raised) 32%);
}

.timezone-preview-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.timezone-preview-card strong {
  font-size: 14px;
  line-height: 1.3;
  color: var(--text);
}

.timezone-preview-card span:last-child {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  word-break: break-word;
}

/* Generated by reader/scripts/build.mjs from reader/src/analysis-writer-settings-sections. Edit the section files instead. */

.analysis-settings-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, var(--blue-border) 28%);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue-bg) 16%, transparent), transparent 52%),
    color-mix(in srgb, var(--bg-overlay) 62%, var(--bg-raised) 38%);
}

.analysis-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.analysis-settings-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.analysis-settings-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.analysis-settings-kicker strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.analysis-settings-copy span {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-dim);
}

.analysis-settings-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 78%, var(--bg-raised) 22%);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
  flex-shrink: 0;
}

.analysis-settings-chip.direct {
  color: color-mix(in srgb, var(--blue) 84%, var(--text) 16%);
  border-color: color-mix(in srgb, var(--blue-border) 62%, var(--border-subtle) 38%);
  background: color-mix(in srgb, var(--blue-bg) 38%, var(--bg-overlay) 62%);
}

.analysis-settings-chip.openrouter {
  color: color-mix(in srgb, var(--yellow) 80%, var(--text) 20%);
  border-color: color-mix(in srgb, var(--yellow) 36%, var(--border-subtle) 64%);
  background: color-mix(in srgb, var(--bg-overlay) 74%, rgba(217, 119, 6, .18) 26%);
}

.analysis-settings-shell .settings-model-picker {
  gap: 8px;
}

.analysis-settings-shell .settings-model-status,
.analysis-settings-shell .set-hint {
  margin-top: 0;
}

.quiz-settings-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-settings-shell .analysis-settings-shell {
  gap: 10px;
  padding: 12px 12px 11px;
  border-radius: 14px;
}

.quiz-settings-shell .analysis-settings-head {
  gap: 10px;
}

.quiz-settings-shell .analysis-settings-copy {
  gap: 3px;
}

.quiz-settings-shell .analysis-settings-kicker strong {
  font-size: 12.5px;
}

.quiz-settings-shell .analysis-settings-copy span {
  line-height: 1.5;
}

.quiz-settings-shell .settings-model-picker {
  gap: 6px;
}

.quiz-settings-shell .settings-model-status {
  font-size: 10.5px;
  line-height: 1.45;
}

.writer-chat-settings-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.connector-settings-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.connector-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 66%, transparent), transparent 46%),
    color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
}

.connector-card-head {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.connector-card-head strong {
  font-size: 14px;
  color: var(--text);
}

.connector-token-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}

.connector-token-status-code {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 62%, var(--bg-raised) 38%);
  color: var(--text);
  font-size: 12px;
  font-family: "Cascadia Code", "JetBrains Mono", "SFMono-Regular", monospace;
  letter-spacing: .02em;
}

.connector-token-status-ok {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(63,185,80,.24);
  background: rgba(63,185,80,.12);
  color: var(--green);
}

.connector-token-status-ok svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}

.connector-card-head p {
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.connector-layout {
  height: 100%;
  padding: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(88,166,255,.1), transparent 26%),
    radial-gradient(circle at bottom right, rgba(227,179,65,.08), transparent 30%);
}

.connector-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 375px minmax(0, 1fr);
  gap: 16px;
}

.connector-platform-list,
.connector-main {
  min-width: 0;
}

.connector-platform-list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.connector-platform-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-self: stretch;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 76%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 80%, transparent), transparent 100%),
    color-mix(in srgb, var(--bg-raised) 92%, var(--bg-overlay) 8%);
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 3;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border-subtle) 66%, transparent);
}

.connector-platform-tabs::-webkit-scrollbar {
  display: none;
}

.connector-platform-tab {
  appearance: none;
  flex: 0 0 auto;
  min-width: max-content;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}

.connector-platform-tab:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bg-overlay) 72%, transparent);
  color: var(--text);
}

.connector-platform-tab.is-active {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue-bg) 78%, transparent), transparent 100%),
    color-mix(in srgb, var(--bg-raised) 82%, var(--bg-overlay) 18%);
  color: var(--text);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--blue) 42%, var(--blue-border) 58%),
    0 8px 18px rgba(16, 33, 61, .12);
}

.connector-platform-tab:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px var(--blue),
    0 0 0 3px rgba(88,166,255,.12);
}

.connector-platform-tab-label {
  display: block;
  white-space: nowrap;
}

.connector-platform-scroller {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 8px 2px 0;
  position: relative;
  z-index: 1;
  scrollbar-gutter: stable;
}

.connector-platform-empty {
  padding: 16px 14px;
  border: 1px dashed var(--border-subtle);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-raised) 86%, var(--bg-overlay) 14%);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.connector-platform-footer {
  flex: 0 0 auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 88%, transparent) 18%),
    color-mix(in srgb, var(--bg-raised) 94%, var(--bg-overlay) 6%);
  position: relative;
  z-index: 2;
}

.connector-platform-add-btn {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--blue) 42%, var(--border-subtle) 58%);
  background: color-mix(in srgb, var(--blue-bg) 58%, var(--bg-raised) 42%);
  color: var(--blue);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s, color .15s;
}

.connector-platform-add-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--blue-border);
}

.connector-platform-add-btn.is-active {
  border-style: solid;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(88,166,255,.1);
}

.connector-platform-add-btn:focus-visible {
  outline: none;
  border-style: solid;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(88,166,255,.12);
}

.connector-platform-card {
  width: 100%;
  appearance: none;
  border: 1px solid var(--blue-border);
  border-radius: 18px;
  padding: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue-bg) 78%, transparent), transparent 92%),
    color-mix(in srgb, var(--bg-raised) 90%, var(--bg-overlay) 10%);
  text-align: left;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s, background .15s;
}

.connector-platform-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.connector-platform-card:hover:not(:disabled) {
  transform: translateY(-1px);
}

.connector-platform-card.is-active {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--blue-border) 42%);
  box-shadow: 0 12px 28px rgba(16, 33, 61, .18);
}

.connector-platform-card.is-syncing {
  border-color: color-mix(in srgb, var(--blue) 68%, var(--blue-border) 32%);
  box-shadow: 0 12px 28px rgba(16, 33, 61, .18);
}

.connector-platform-card:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(88,166,255,.12);
}

.connector-platform-card strong {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  color: var(--text);
}

.connector-platform-card p {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.connector-platform-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 44%, var(--blue-border) 56%);
  background: color-mix(in srgb, var(--blue-bg) 72%, var(--bg-raised) 28%);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.connector-platform-status-pill .spinner {
  width: 9px;
  height: 9px;
  border-width: 1.5px;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  border-top-color: currentColor;
}

.connector-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.connector-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.connector-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.connector-detail-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.connector-detail-copy strong {
  font-size: 15px;
  color: var(--text);
}

.connector-detail-copy p {
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.connector-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.connector-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 56%, var(--bg-raised) 44%);
  font-size: 11px;
  color: var(--text-muted);
}

.connector-badge.emphasis {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--blue-bg) 72%, var(--bg-raised) 28%);
  color: var(--blue);
}

.connector-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}

.connector-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-raised) 86%, var(--bg-overlay) 14%);
}

.connector-stat-card span {
  font-size: 10.5px;
  color: var(--text-dim);
}

.connector-stat-card strong {
  font-size: 18px;
  line-height: 1.2;
  color: var(--text);
}

.connector-result-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--bg-raised) 90%, var(--bg-overlay) 10%);
}

.connector-report-note {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--yellow) 24%, var(--border-subtle) 76%);
  background: color-mix(in srgb, var(--yellow) 8%, var(--bg-overlay) 92%);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text);
}

.connector-report-note code {
  font-size: 11px;
}

.connector-token-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.connector-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.connector-config-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.connector-config-control {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  font: inherit;
}

.connector-config-textarea {
  min-height: 104px;
  padding: 10px 12px;
  line-height: 1.45;
  resize: vertical;
}

select.connector-config-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238b949e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
}

.connector-config-control:focus {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px rgba(88,166,255,.12);
}

.connector-config-control:disabled {
  opacity: .62;
  cursor: not-allowed;
}

.connector-config-note {
  margin-top: -2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

.connector-live-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border-subtle) 72%);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue-bg) 56%, transparent), transparent 100%),
    color-mix(in srgb, var(--bg-overlay) 74%, var(--bg-raised) 26%);
  color: var(--text);
}

.connector-live-status .spinner {
  width: 11px;
  height: 11px;
  margin-top: 2px;
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
  border-top-color: var(--blue);
}

.connector-live-status-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.connector-live-status-copy strong {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
}

.connector-live-status-copy p {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}

.connector-token-row,
.connector-settings-actions,
.connector-runbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.connector-token-row input,
.connector-settings-actions input,
.connector-token-input {
  flex: 1 1 280px;
}

#connector-readwise-token,
#connector-settings-readwise-token {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  font: inherit;
}

#connector-readwise-token:focus,
#connector-settings-readwise-token:focus {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px rgba(88,166,255,.12);
}

#connector-readwise-token:disabled,
#connector-settings-readwise-token:disabled {
  opacity: .62;
  cursor: not-allowed;
}

.connector-primary-btn,
.connector-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s, opacity .15s, color .15s;
}

.connector-primary-btn {
  border: 1px solid var(--blue-border);
  background: color-mix(in srgb, var(--blue) 82%, #163a72 18%);
  color: #f7fbff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.connector-primary-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.connector-secondary-btn {
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 62%, var(--bg-raised) 38%);
  color: var(--text);
}

.integration-manage-link {
  text-decoration: none;
}

.integration-inline-link {
  color: var(--blue);
  text-decoration: none;
}

.integration-inline-link:hover,
.integration-inline-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.connector-secondary-btn:hover:not(:disabled) {
  border-color: var(--border);
  background: var(--bg-overlay);
}

.connector-primary-btn:disabled,
.connector-secondary-btn:disabled {
  cursor: not-allowed;
  transform: none;
}

.connector-primary-btn:disabled {
  opacity: 1;
  color: color-mix(in srgb, var(--text-dim) 90%, var(--bg) 10%);
  background: color-mix(in srgb, var(--bg-overlay) 82%, var(--bg-raised) 18%);
  border-color: var(--border-subtle);
  box-shadow: none;
}

.connector-secondary-btn:disabled {
  opacity: 1;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--bg-overlay) 78%, var(--bg-raised) 22%);
  border-color: var(--border-subtle);
}

.connector-primary-btn .spinner,
.connector-secondary-btn .spinner {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
  border-top-color: currentColor;
}

#btn-readwise-import {
  min-width: 124px;
}

.connector-runbar {
  justify-content: flex-end;
}

.connector-feedback {
  min-height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.connector-feedback:empty {
  display: none;
}

.connector-feedback.loading,
.connector-feedback.success,
.connector-feedback.error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.connector-feedback.loading {
  background: color-mix(in srgb, var(--blue-bg) 65%, var(--bg-raised) 35%);
  color: var(--text);
}

.connector-feedback.success {
  background: rgba(63,185,80,.12);
  border-color: rgba(63,185,80,.24);
  color: var(--green);
}

.connector-feedback.error {
  background: rgba(248,81,73,.1);
  border-color: rgba(248,81,73,.24);
  color: #f85149;
}

.connector-result-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.connector-result-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.connector-result-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-raised) 86%, var(--bg-overlay) 14%);
}

.connector-result-card strong {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
}

.connector-result-card span {
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-dim);
  word-break: break-word;
}

.connector-feed-list {
  display: grid;
  gap: 12px;
}

.connector-feed-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
}

.connector-feed-head,
.connector-feed-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.connector-feed-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.connector-feed-copy strong {
  font-size: 13px;
  color: var(--text);
}

.connector-feed-url {
  font-size: 11px;
  line-height: 1.55;
  color: var(--blue);
  word-break: break-all;
  text-decoration: none;
}

.connector-feed-url:hover {
  text-decoration: underline;
}

.connector-empty-state {
  padding: 18px;
  border: 1px dashed var(--border-subtle);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-overlay) 56%, var(--bg-raised) 44%);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}

.translation-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.translation-settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.translation-settings-label {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.2;
}

.translation-mode-grid {
  display: flex;
  gap: 3px;
  background: var(--bg-overlay);
  border-radius: 7px;
  padding: 3px;
}

.translation-mode-grid .tseg-btn {
  padding-inline: 12px;
}

.settings-model-status {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

.settings-model-status.error {
  color: #f85149;
}

.settings-model-status strong {
  color: var(--text);
  font-weight: 600;
}

.settings-model-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-model-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
}

.settings-model-chip span {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}

.settings-model-chip button {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: color .15s, background .15s;
}

.settings-model-chip button:hover {
  color: #f85149;
  background: rgba(248,81,73,.08);
}

.settings-model-empty {
  padding: 12px;
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.6;
}

/* Generated by reader/scripts/build.mjs from reader/src/action-modal-core-sections. Edit the section files instead. */

#action-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 12, 18, .56);
  backdrop-filter: blur(6px);
  z-index: 320;
}

#action-modal.open {
  display: flex;
}

.action-modal-shell {
  width: min(1100px, calc(100vw - 32px));
  height: min(780px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 28px 60px rgba(0,0,0,.34);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#action-modal[data-action="connector"] .action-modal-shell {
  width: min(1320px, calc(100vw - 32px));
}

#action-modal[data-action="podcast-audio"] .action-modal-shell,
#action-modal[data-action="video-extract"] .action-modal-shell {
  width: min(1420px, calc(100vw - 32px));
  height: min(975px, calc(100vh - 48px));
}

#action-modal[data-action="quiz"] .action-modal-shell {
  width: min(1360px, calc(100vw - 32px));
  height: min(920px, calc(100vh - 48px));
}

#action-modal[data-action="data-insights"] .action-modal-shell {
  width: min(1160px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100vh - 48px);
}

#action-modal[data-action="data-insights"][data-data-insights-mode="setup"] .action-modal-shell {
  width: min(760px, calc(100vw - 32px));
  height: auto;
  max-height: min(760px, calc(100vh - 48px));
}

#action-modal[data-action="data-insights"][data-data-insights-mode="setup"] #action-modal-body {
  overflow: auto;
}

#action-modal[data-action="data-insights"][data-data-insights-mode="working"] .action-modal-shell {
  width: min(1120px, calc(100vw - 32px));
  height: auto;
  max-height: min(820px, calc(100vh - 48px));
}

#action-modal[data-action="data-insights"][data-data-insights-mode="working"] #action-modal-body {
  overflow: auto;
}

#action-modal[data-action="data-insights"][data-data-insights-mode="report"] .action-modal-shell {
  width: min(1380px, calc(100vw - 32px));
  height: min(900px, calc(100vh - 48px));
}

#action-modal[data-action="data-insights"][data-data-insights-mode="report"] #action-modal-body {
  overflow: auto;
}

.action-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.action-modal-titlebox {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.action-modal-titlebox strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.action-modal-titlebox span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.action-modal-head-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

#action-modal-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#action-modal-head-actions:empty {
  display: none;
}

.action-modal-head-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-overlay) 86%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}

.action-modal-head-link:hover {
  border-color: var(--border);
  background: var(--bg-overlay);
  color: var(--text);
  transform: translateY(-1px);
}

.action-modal-head-link svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

#btn-action-modal-close {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: border-color .15s, background .15s, color .15s;
}

#btn-action-modal-close:hover {
  border-color: var(--border);
  background: var(--bg-overlay);
  color: var(--text);
}

#action-modal-body {
  min-height: 0;
  overflow: hidden;
}

.quiz-layout {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 0;
  background:
    radial-gradient(circle at top left, rgba(88,166,255,.09), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 92%, var(--bg-overlay) 8%), var(--bg-raised));
}

.quiz-main,
.quiz-side {
  min-width: 0;
  min-height: 0;
}

.quiz-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 18px 20px;
  overflow: auto;
}

.quiz-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 20px 0;
  overflow: auto;
}

.quiz-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 82%, transparent);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent),
    color-mix(in srgb, var(--bg-raised) 84%, var(--bg-overlay) 16%);
  border-radius: 18px;
}

.quiz-toolbar-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.quiz-toolbar-kicker {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.quiz-toolbar-copy strong {
  font-size: 20px;
  line-height: 1.2;
  color: var(--text);
  font-weight: 400;
}

.quiz-toolbar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.quiz-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.quiz-inline-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 42%, var(--border-subtle) 58%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue-bg) 64%, var(--bg-raised) 36%);
  font-size: 12px;
  color: var(--text);
}

.quiz-inline-status.error {
  border-color: rgba(248,81,73,.24);
  background: rgba(248,81,73,.1);
  color: #f85149;
}

.quiz-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quiz-filter-panel {
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 52%, transparent), transparent 68%),
    color-mix(in srgb, var(--bg-raised) 90%, var(--bg-overlay) 10%);
}

.quiz-filter-label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.quiz-filter-group {
  flex-wrap: wrap;
}

.quiz-filter-seg {
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
}

.quiz-filter-seg .tseg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 74px;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 400;
}

.quiz-filter-seg .tseg-btn:hover {
  color: var(--text);
}

.quiz-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-overlay) 88%, var(--bg-raised) 12%);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.quiz-filter-seg .tseg-btn.active .quiz-filter-count {
  background: color-mix(in srgb, var(--blue-bg) 76%, var(--bg-raised) 24%);
  color: var(--blue);
}

.quiz-question-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quiz-question-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 15px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 62%, transparent), transparent 56%),
    color-mix(in srgb, var(--bg-raised) 90%, var(--bg-overlay) 10%);
}

.quiz-question-card.graded {
  border-color: color-mix(in srgb, var(--blue-border) 36%, var(--border-subtle) 64%);
}

.quiz-question-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: flex-start;
}

.quiz-question-index {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--blue-bg) 74%, var(--bg-raised) 26%);
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
}

.quiz-question-head-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.quiz-question-meta,
.quiz-question-tags,
.quiz-empty-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quiz-tag,
.quiz-result-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.quiz-question-meta {
  gap: 6px 10px;
}

.quiz-question-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.quiz-question-meta-item:not(:first-child)::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-dim) 72%, transparent);
}

.quiz-question-meta-item.points {
  color: var(--text);
  font-weight: 600;
}

.quiz-question-meta-item.points::before {
  background: color-mix(in srgb, var(--blue-border) 72%, transparent);
}

.quiz-question-stem {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  word-break: break-word;
}

.quiz-link-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.quiz-link-btn:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-overlay) 82%, var(--blue) 18%);
}

.quiz-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quiz-choice-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-raised) 86%, var(--bg-overlay) 14%);
  cursor: pointer;
}

.quiz-choice-option input {
  margin: 0;
}

.quiz-choice-letter {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-overlay) 74%, var(--bg-raised) 26%);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
}

.quiz-choice-copy {
  min-width: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
}

.quiz-answer-field {
  display: flex;
}

.quiz-text-input,
.quiz-textarea {
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--bg-overlay);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
}

.quiz-text-input {
  min-height: 44px;
  padding: 0 14px;
}

.quiz-textarea {
  min-height: 126px;
  padding: 12px 14px;
  resize: vertical;
}

.quiz-text-input:focus,
.quiz-textarea:focus {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px rgba(88,166,255,.12);
}

.quiz-question-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.quiz-tag {
  background: color-mix(in srgb, var(--bg-overlay) 76%, var(--bg-raised) 24%);
  color: var(--text-muted);
}

.quiz-source-label {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

.quiz-result-tags {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.quiz-result-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quiz-result-tags .quiz-tag {
  min-height: 24px;
  padding: 0 9px;
  border-color: color-mix(in srgb, var(--blue-border) 20%, var(--border-subtle) 80%);
  background: color-mix(in srgb, var(--blue-bg) 28%, var(--bg-raised) 72%);
  color: color-mix(in srgb, var(--text) 82%, var(--blue) 18%);
}

.quiz-result-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 2px;
  border-top: 1px dashed color-mix(in srgb, var(--border-subtle) 84%, transparent);
}

.quiz-result-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.quiz-result-badge.correct {
  border-color: rgba(63,185,80,.28);
  background: rgba(63,185,80,.14);
  color: var(--green);
}

.quiz-result-badge.partial {
  border-color: color-mix(in srgb, var(--yellow) 32%, var(--border-subtle) 68%);
  background: color-mix(in srgb, rgba(217,119,6,.16) 76%, var(--bg-raised) 24%);
  color: color-mix(in srgb, var(--yellow) 90%, var(--text) 10%);
}

.quiz-result-badge.wrong {
  border-color: rgba(248,81,73,.28);
  background: rgba(248,81,73,.1);
  color: #f85149;
}

.quiz-result-feedback {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.quiz-result-line,
.quiz-result-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.quiz-result-line span,
.quiz-result-block span,
.quiz-result-tags > span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.quiz-side-title {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.quiz-result-line strong,
.quiz-result-block div {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text);
}

.quiz-side-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 72%, transparent), transparent 52%),
    color-mix(in srgb, var(--bg-raised) 92%, var(--bg-overlay) 8%);
}

.quiz-score-card {
  gap: 6px;
}

.quiz-score-card span {
  font-size: 11px;
  color: var(--text-dim);
}

.quiz-score-card strong {
  font-size: 28px;
  line-height: 1.1;
  color: var(--text);
}

.quiz-score-card em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-muted);
}

.quiz-score-card.pending strong {
  color: var(--blue);
}

.quiz-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 1.5;
}

.quiz-summary-row span {
  color: var(--text-muted);
}

.quiz-summary-row strong {
  color: var(--text);
  font-weight: 700;
}

.quiz-side-empty,
.quiz-side-note {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-dim);
}

.quiz-empty-state,
.quiz-empty-inline {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}

.quiz-empty-state strong,
.quiz-empty-inline {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

.quiz-empty-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.quiz-empty-note {
  max-width: 440px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

.quiz-empty-note.error {
  padding: 11px 12px;
  border: 1px solid rgba(248,81,73,.24);
  border-radius: 14px;
  background: rgba(248,81,73,.08);
  color: #f85149;
}

.quiz-empty-inline {
  min-height: 180px;
  border: 1px dashed var(--border-subtle);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
}

#action-modal[data-action="mook-editor"] .action-modal-shell {
  width: min(1240px, calc(100vw - 32px));
  max-height: min(88vh, 860px);
}

.mook-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px 14px;
}

.mook-card {
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 14px 14px 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 78%, var(--bg-overlay) 22%), color-mix(in srgb, var(--bg-overlay) 86%, transparent)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue-bg) 32%, transparent), transparent 54%);
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
}

.mook-card:hover {
  border-color: var(--border);
  transform: translateY(-1px);
}

.mook-card.active {
  border-color: var(--blue-border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue-bg) 24%, var(--bg-raised) 76%), color-mix(in srgb, var(--bg-overlay) 80%, transparent)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue-bg) 42%, transparent), transparent 52%);
}

.mook-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.mook-card-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
}

.mook-card-time {
  font-size: 11px;
  color: var(--text-dim);
}

.mook-card-title {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.mook-card-subtitle {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.mook-card-meta {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mook-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-overlay) 84%, transparent);
  border: 1px solid var(--border-subtle);
}

.mook-empty {
  padding: 36px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.7;
}

.mook-empty button {
  margin-top: 12px;
  min-width: 96px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  cursor: pointer;
}

.mook-viewer-shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--blue-bg) 36%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 82%, var(--bg) 18%), var(--bg));
}

.mook-viewer-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.mook-viewer-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mook-viewer-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
}

.mook-viewer-copy strong {
  font-size: 24px;
  line-height: 1.05;
  color: var(--text);
}

.mook-viewer-copy span {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.mook-viewer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mook-viewer-btn {
  min-width: 88px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-raised) 72%, var(--bg-overlay) 28%);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.mook-viewer-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.mook-viewer-stage {
  min-height: 0;
  padding: 16px;
}

.mook-viewer-stage iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 20px;
  background: #0f0c0a;
  box-shadow: 0 26px 58px rgba(0,0,0,.28);
}

.mook-editor-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
}

.mook-editor-pane,
.mook-editor-status {
  min-height: 0;
  padding: 18px 20px;
}

.mook-editor-pane {
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;
}

.mook-editor-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mook-editor-field label,
.mook-editor-subhead {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mook-editor-field input,
.mook-editor-field textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg) 84%, var(--bg-raised) 16%);
  color: var(--text);
  font: inherit;
  padding: 14px 15px;
  resize: vertical;
}

.mook-editor-field textarea {
  min-height: 160px;
  line-height: 1.75;
}

.mook-directory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mook-directory-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mook-directory-toolbtn {
  min-width: 52px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-raised) 72%, var(--bg-overlay) 28%);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.mook-directory-toolbtn:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--blue-bg) 22%, var(--bg-raised) 78%);
  color: var(--text);
}

.mook-directory-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow: auto;
  padding: 8px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 54%, var(--bg-raised) 46%);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, transparent);
}

.mook-tree-node {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mook-tree-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.mook-tree-row[data-depth="0"] {
  margin-top: 2px;
}

.mook-tree-toggle {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  line-height: 0;
}

.mook-tree-toggle svg {
  width: 12px;
  height: 12px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mook-tree-toggle:hover {
  background: color-mix(in srgb, var(--bg-raised) 70%, var(--bg-overlay) 30%);
  color: var(--text);
}

.mook-tree-toggle.empty {
  cursor: default;
  visibility: hidden;
}

.mook-tree-checkrow {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  border: 1px solid transparent;
}

.mook-tree-checkrow:hover,
.mook-tree-checkrow.checked,
.mook-tree-checkrow.partial {
  background: color-mix(in srgb, var(--blue-bg) 26%, var(--bg-raised) 74%);
  border-color: color-mix(in srgb, var(--blue-border) 76%, transparent);
}

.mook-tree-checkrow input {
  margin: 0;
}

.mook-tree-copy {
  min-width: 0;
  display: block;
}

.mook-tree-copy span {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mook-tree-count {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  padding-left: 8px;
}

.mook-tree-children {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 11px;
  padding-left: 14px;
  border-left: 1px solid color-mix(in srgb, var(--blue-border) 42%, transparent);
}

.mook-tree-children.hidden {
  display: none;
}

.mook-directory-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  border: 1px solid transparent;
}

.mook-directory-row:hover,
.mook-directory-row.checked {
  background: color-mix(in srgb, var(--blue-bg) 26%, var(--bg-raised) 74%);
  border-color: color-mix(in srgb, var(--blue-border) 76%, transparent);
}

.mook-directory-row input {
  margin: 0;
}

.mook-directory-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mook-directory-copy strong {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mook-directory-copy span {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mook-directory-count {
  font-size: 11px;
  color: var(--text-muted);
}

.mook-editor-runbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: auto;
  padding-top: 14px;
  padding-bottom: 2px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-raised) 82%, var(--bg) 18%) 26%);
}

.mook-editor-runbar button {
  min-width: 132px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 78%, var(--border-subtle) 22%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue-bg) 62%, var(--bg-raised) 38%), color-mix(in srgb, var(--bg-overlay) 70%, var(--blue-bg) 30%));
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.mook-editor-runbar button[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.mook-editor-selection {
  font-size: 12px;
  color: var(--text-muted);
}

.mook-editor-status {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
}

.mook-progress-card {
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 72%, var(--bg-overlay) 28%), color-mix(in srgb, var(--bg-overlay) 86%, transparent)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue-bg) 22%, transparent), transparent 52%);
}

.mook-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.mook-progress-top strong {
  font-size: 15px;
  color: var(--text);
}

.mook-progress-top span {
  font-size: 11px;
  color: var(--text-dim);
}

.mook-progress-message {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

.mook-progress-bar {
  margin-top: 12px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 68%, var(--bg-raised) 32%);
}

.mook-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 68%, white 32%), color-mix(in srgb, var(--green) 56%, var(--blue) 44%));
}

.mook-progress-log {
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 10px;
  background: color-mix(in srgb, var(--bg) 82%, var(--bg-raised) 18%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 220px;
  max-height: 420px;
  overflow: auto;
}

.mook-log-row {
  padding: 10px 11px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-overlay) 76%, transparent);
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-muted);
}

.mook-log-row.warning {
  background: color-mix(in srgb, var(--yellow-bg) 58%, var(--bg-overlay) 42%);
  color: var(--text);
}

.mook-log-row.error {
  background: color-mix(in srgb, rgba(248,81,73,.18) 74%, var(--bg-overlay) 26%);
  color: #f9b4ae;
}

#writer-chat-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at top right, rgba(90, 126, 176, 0.14), transparent 26%),
    radial-gradient(circle at bottom left, rgba(150, 122, 92, 0.16), transparent 30%),
    rgba(8, 12, 18, .62);
  backdrop-filter: blur(8px);
  z-index: 330;
}

#writer-chat-modal.open {
  display: flex;
}

#action-modal[data-action="knowledge"] .action-modal-shell {
  width: min(1360px, calc(100vw - 32px));
  height: min(920px, calc(100vh - 48px));
}

#action-modal[data-action="rednote-guide"] .action-modal-shell {
  width: min(1180px, calc(100vw - 32px));
  height: min(900px, calc(100vh - 48px));
}

#action-modal[data-action="rednote-guide"][data-rednote-guide-mode="setup"] .action-modal-shell {
  width: min(820px, calc(100vw - 32px));
  height: auto;
  max-height: min(760px, calc(100vh - 48px));
}

#action-modal[data-action="rednote-guide"] #action-modal-body,
#action-modal[data-action="rednote-guide"][data-rednote-guide-mode="setup"] #action-modal-body,
#action-modal[data-action="rednote-guide"][data-rednote-guide-mode="review"] #action-modal-body {
  overflow: auto;
}

.rednote-guide-layout {
  min-height: 100%;
  padding: 18px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--blue) 14%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 92%, var(--bg-overlay) 8%), var(--bg-raised));
}

.rednote-guide-shell {
  display: grid;
  gap: 16px;
}

.rednote-guide-card,
.rednote-guide-review-card,
.rednote-guide-empty {
  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, transparent 18%);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 48%, transparent), transparent 68%),
    color-mix(in srgb, var(--bg-raised) 92%, var(--bg-overlay) 8%);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}

.rednote-guide-card,
.rednote-guide-review-card {
  padding: 18px;
}

.rednote-guide-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px auto;
  gap: 12px;
  align-items: end;
}

.rednote-guide-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.rednote-guide-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-dim);
}

.rednote-guide-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-overlay) 78%, var(--bg-raised) 22%);
  color: var(--text);
  font: inherit;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.rednote-guide-field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
  background: color-mix(in srgb, var(--bg) 84%, var(--bg-overlay) 16%);
}

.rednote-guide-field input:disabled {
  opacity: .72;
  cursor: wait;
}

.rednote-guide-runbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.rednote-guide-provider-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 12px;
}

.rednote-guide-provider-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 34%, transparent 66%);
  background: color-mix(in srgb, var(--blue-bg) 68%, var(--bg-raised) 32%);
  color: var(--text);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
}

.rednote-guide-provider-hint {
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.6;
}

#btn-rednote-guide-crawl,
#btn-rednote-guide-generate {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s, color .15s;
}

#btn-rednote-guide-crawl {
  background: color-mix(in srgb, var(--blue) 88%, white 12%);
  color: #fff;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--blue) 22%, transparent);
}

#btn-rednote-guide-generate {
  background: color-mix(in srgb, var(--green, #238636) 88%, white 12%);
  color: #fff;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--green, #238636) 20%, transparent);
}

#btn-rednote-guide-crawl:hover,
#btn-rednote-guide-generate:hover {
  transform: translateY(-1px);
}

#btn-rednote-guide-crawl:disabled,
#btn-rednote-guide-generate:disabled {
  opacity: .56;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.rednote-guide-feedback {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-overlay) 82%, transparent 18%);
}

.rednote-guide-feedback:empty {
  display: none;
}

.rednote-guide-feedback.rg-loading,
.rednote-guide-feedback.rg-info {
  border: 1px solid color-mix(in srgb, var(--blue-border) 42%, var(--border-subtle) 58%);
  background: color-mix(in srgb, var(--blue-bg) 62%, var(--bg-raised) 38%);
  color: var(--text);
}

.rednote-guide-feedback.rg-success {
  border: 1px solid color-mix(in srgb, var(--green, #238636) 30%, var(--border-subtle) 70%);
  background: color-mix(in srgb, var(--green, #238636) 12%, var(--bg-raised) 88%);
  color: var(--text);
}

.rednote-guide-feedback.rg-error {
  border: 1px solid rgba(248, 81, 73, .28);
  background: rgba(248, 81, 73, .10);
  color: #f85149;
}

.rednote-guide-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.rednote-guide-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, transparent 18%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-overlay) 76%, transparent 24%);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
}

.rednote-guide-chip.warn {
  border-color: color-mix(in srgb, #d29922 44%, var(--border-subtle) 56%);
  background: color-mix(in srgb, #d29922 14%, var(--bg-raised) 86%);
  color: var(--text);
}

.rednote-guide-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.rednote-guide-review-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rednote-guide-review-copy strong {
  font-size: 18px;
  line-height: 1.2;
  color: var(--text);
}

.rednote-guide-review-copy span {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.rednote-guide-review-list {
  display: grid;
  gap: 12px;
}

.rednote-guide-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-overlay) 68%, var(--bg-raised) 32%);
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}

.rednote-guide-item:hover {
  border-color: color-mix(in srgb, var(--blue-border) 42%, var(--border-subtle) 58%);
  transform: translateY(-1px);
}

.rednote-guide-item.is-selected {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--border-subtle) 64%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue-bg) 42%, transparent), transparent 76%),
    color-mix(in srgb, var(--bg-overlay) 68%, var(--bg-raised) 32%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 10%, transparent);
}

.rednote-guide-item-check {
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

.rednote-guide-item-check input {
  width: 16px;
  height: 16px;
}

.rednote-guide-item-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.rednote-guide-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rednote-guide-item-head strong {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  font-weight: 400;
}

.rednote-guide-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.rednote-guide-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 74%, var(--bg-overlay) 26%);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.rednote-guide-badge.ai {
  background: color-mix(in srgb, var(--blue-bg) 82%, var(--bg-raised) 18%);
  border-color: color-mix(in srgb, var(--blue-border) 44%, transparent 56%);
  color: var(--text);
}

.rednote-guide-badge.fallback {
  background: color-mix(in srgb, #d29922 14%, var(--bg-raised) 86%);
  border-color: color-mix(in srgb, #d29922 38%, transparent 62%);
  color: var(--text);
}

.rednote-guide-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

.rednote-guide-item-reason {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 40%, transparent 60%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 10%, transparent), transparent 100%),
    color-mix(in srgb, var(--bg) 88%, var(--blue-bg) 12%);
  color: var(--text);
  font-size: 12px;
  line-height: 1.6;
}

.rednote-guide-item-summary {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.rednote-guide-item-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 42%, transparent 58%);
  background: color-mix(in srgb, var(--blue-bg) 54%, transparent 46%);
  color: var(--text);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 500;
}

.rednote-guide-item-link:hover {
  border-color: var(--blue);
}

.rednote-guide-empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 24px;
  color: var(--text-dim);
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
}

@media (max-width: 860px) {
  .rednote-guide-layout {
    padding: 14px;
  }

  .rednote-guide-entry-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rednote-guide-runbar {
    justify-content: stretch;
  }

  #btn-rednote-guide-crawl,
  #btn-rednote-guide-generate {
    width: 100%;
  }

  .rednote-guide-review-head,
  .rednote-guide-item-head {
    display: grid;
  }

  .rednote-guide-item-badges {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  #action-modal[data-action="rednote-guide"] .action-modal-shell,
  #action-modal[data-action="rednote-guide"][data-rednote-guide-mode="setup"] .action-modal-shell {
    width: min(100vw - 24px, 100%);
    height: min(100vh - 24px, 100%);
    max-height: min(100vh - 24px, 100%);
  }

  .rednote-guide-layout {
    padding: 12px;
  }

  .rednote-guide-card,
  .rednote-guide-review-card {
    padding: 14px;
    border-radius: 16px;
  }

  .rednote-guide-item {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }
}

.writer-chat-modal-shell {
  width: min(1240px, calc(100vw - 32px));
  height: min(86vh, 860px);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 32px 88px rgba(0,0,0,.38);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.writer-chat-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 82%, transparent), transparent);
}

.writer-chat-modal-titlebox {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.writer-chat-modal-titlebox strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.writer-chat-modal-titlebox span {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.writer-chat-modal-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#btn-writer-chat-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 60%, var(--bg-raised) 40%);
  color: var(--text);
  border-radius: 999px;
  padding: 0 14px;
  min-height: 34px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s, opacity .15s;
}

#btn-writer-chat-new:hover:not(:disabled) {
  border-color: var(--border);
  background: var(--bg-overlay);
  transform: translateY(-1px);
}

#btn-writer-chat-new:disabled {
  opacity: .56;
  cursor: not-allowed;
  transform: none;
}

#btn-writer-chat-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: border-color .15s, background .15s, color .15s;
}

#btn-writer-chat-close:hover {
  border-color: var(--border);
  background: var(--bg-overlay);
  color: var(--text);
}

.writer-chat-modal-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
}

.writer-chat-sidebar {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 18px 16px 18px 18px;
  border-right: 1px solid var(--border-subtle);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 56%, transparent), transparent 44%);
}

.writer-chat-sidebar-intro {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.writer-chat-sidebar-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.writer-chat-sidebar-intro strong {
  font-size: 16px;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.03em;
}

.writer-chat-sidebar-intro p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.writer-chat-session-list {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

.writer-chat-session-empty {
  padding: 14px;
  border: 1px dashed var(--border-subtle);
  border-radius: 16px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.7;
}

.writer-chat-session-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}

.writer-chat-session-item.active {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--blue-bg) 70%, var(--bg-raised) 30%);
  box-shadow: 0 16px 28px rgba(0,0,0,.12);
  transform: translateX(2px);
}

.writer-chat-session-main {
  min-width: 0;
  border: none;
  background: transparent;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.writer-chat-session-main strong {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
}

.writer-chat-session-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.writer-chat-session-meta span {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-dim);
  word-break: break-word;
}

.writer-chat-session-delete {
  width: 28px;
  height: 28px;
  align-self: start;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color .15s, background .15s;
}

.writer-chat-session-delete:hover:not(:disabled) {
  color: #f85149;
  background: rgba(248,81,73,.08);
}

.writer-chat-session-delete:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.writer-chat-sidebar-footer {
  padding-top: 2px;
}

.writer-chat-add-agent {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border-subtle);
  border-radius: 15px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg-overlay) 56%, transparent), transparent 72%),
    color-mix(in srgb, var(--bg-overlay) 68%, var(--bg-raised) 32%);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, opacity .15s;
}

.writer-chat-add-agent svg {
  flex: 0 0 auto;
}

.writer-chat-add-agent:hover:not(:disabled) {
  border-color: var(--border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg-overlay) 72%, transparent), transparent 74%),
    color-mix(in srgb, var(--bg-overlay) 84%, var(--bg-raised) 16%);
  color: var(--text);
}

.writer-chat-add-agent.is-added,
.writer-chat-add-agent.is-added:disabled {
  border-color: color-mix(in srgb, var(--green) 30%, var(--border-subtle) 70%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green-bg) 46%, transparent), transparent 74%),
    color-mix(in srgb, var(--bg-overlay) 76%, var(--bg-raised) 24%);
  color: color-mix(in srgb, var(--green) 78%, var(--text) 22%);
  opacity: 1;
}

.writer-chat-add-agent:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.writer-chat-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 36%, transparent), transparent 24%);
}

.writer-chat-thread-head {
  min-height: 70px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.writer-chat-thread-head strong {
  font-size: 15px;
  line-height: 1.3;
  color: var(--text);
}

.writer-chat-thread-head span {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.writer-chat-thread {
  min-height: 0;
  overflow: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.writer-chat-thread-empty {
  margin: auto;
  width: min(420px, 100%);
  padding: 18px 18px 20px;
  border: 1px dashed var(--border-subtle);
  border-radius: 18px;
  text-align: left;
  background: color-mix(in srgb, var(--bg-overlay) 56%, transparent);
}

.writer-chat-thread-empty strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text);
}

.writer-chat-thread-empty span {
  display: block;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

.writer-chat-message {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: min(88%, 760px);
}

.writer-chat-message.assistant {
  align-self: flex-start;
}

.writer-chat-message.user {
  align-self: flex-end;
}

.writer-chat-message-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.writer-chat-model-info {
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 55%, transparent);
  color: var(--text-dim);
}

.writer-chat-meta-audio-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 60%, var(--bg-raised) 40%);
  color: var(--text-dim);
  cursor: pointer;
  transition: filter .15s, opacity .15s, transform .15s, border-color .15s, color .15s;
}

.writer-chat-meta-audio-btn svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.writer-chat-meta-audio-btn:hover:not(:disabled) {
  filter: brightness(1.04);
}

.writer-chat-meta-audio-btn.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--blue-border) 74%, var(--border-subtle));
  background: color-mix(in srgb, var(--blue-bg) 62%, var(--bg-raised) 38%);
}

.writer-chat-meta-audio-btn.is-loading {
  animation: spin 1s linear infinite;
}

.writer-chat-meta-audio-btn:disabled {
  opacity: .58;
  cursor: default;
}

.writer-chat-message-bubble {
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 14px 15px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
  overflow-wrap: anywhere;
}

.writer-chat-message-quote {
  margin-bottom: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--blue-border) 44%, var(--border-subtle));
  background: color-mix(in srgb, var(--bg-overlay) 64%, var(--bg-raised) 36%);
}

.writer-chat-message-quote-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.writer-chat-message-quote-text {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.46;
  color: var(--text);
}

.writer-chat-message-quote-source {
  margin-top: 7px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.writer-chat-message.assistant .writer-chat-message-bubble {
  border-top-left-radius: 8px;
}

.writer-chat-message.user .writer-chat-message-bubble {
  border-top-right-radius: 8px;
  background: color-mix(in srgb, var(--blue-bg) 76%, var(--bg-raised) 24%);
  border-color: color-mix(in srgb, var(--blue-border) 72%, var(--border-subtle));
}

.writer-chat-message.is-pending .writer-chat-message-bubble {
  border-style: dashed;
}

.writer-chat-message.user.is-transcribing .writer-chat-message-bubble {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue-bg) 58%, transparent), transparent 55%),
    color-mix(in srgb, var(--blue-bg) 72%, var(--bg-raised) 28%);
}

.writer-chat-message.assistant.is-pending .writer-chat-message-bubble {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 82%, transparent), transparent 75%),
    color-mix(in srgb, var(--bg-raised) 92%, var(--bg-overlay) 8%);
}

.writer-chat-message.is-error .writer-chat-message-bubble {
  border-color: color-mix(in srgb, #f85149 56%, var(--border-subtle));
  background: color-mix(in srgb, #f85149 7%, var(--bg-raised) 93%);
}

.writer-chat-message-bubble p {
  margin: 0 0 6px;
}

.writer-chat-message-bubble p:last-child {
  margin-bottom: 0;
}

.writer-chat-message-quote-text p {
  margin: 0 0 5px;
}

.writer-chat-message-quote-text p:last-child {
  margin-bottom: 0;
}

.writer-chat-message-bubble ul,
.writer-chat-message-bubble ol {
  margin: 8px 0;
  padding-left: 20px;
}

.writer-chat-message-bubble pre {
  margin: 10px 0;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--bg);
  overflow: auto;
}

.writer-chat-message-bubble code {
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 11.5px;
}

.writer-chat-message-bubble blockquote {
  margin: 10px 0;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
}

.writer-chat-message-audio {
  margin-top: 12px;
}

.writer-chat-audio-btn {
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 64%, var(--bg-raised) 36%);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 11.5px;
  line-height: 1;
  cursor: pointer;
  transition: filter .15s, opacity .15s, transform .15s;
}

.writer-chat-audio-btn:hover:not(:disabled) {
  filter: brightness(1.05);
}

.writer-chat-audio-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.writer-chat-audio-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.writer-chat-compose {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.writer-chat-input-shell {
  position: relative;
}

.writer-chat-draft-quote {
  margin-bottom: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 42%, var(--border-subtle));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue-bg) 30%, transparent), transparent 54%),
    color-mix(in srgb, var(--bg-overlay) 72%, var(--bg-raised) 28%);
}

.writer-chat-draft-quote[hidden] {
  display: none;
}

.writer-chat-draft-quote-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.writer-chat-draft-quote-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.writer-chat-draft-quote-text {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.48;
  color: var(--text);
}

.writer-chat-draft-quote-text p {
  margin: 0 0 5px;
}

.writer-chat-draft-quote-text p:last-child {
  margin-bottom: 0;
}

.writer-chat-draft-quote-source {
  margin-top: 7px;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-dim);
  word-break: break-word;
}

#btn-writer-chat-clear-quote {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: border-color .15s, background .15s, color .15s;
}

#btn-writer-chat-clear-quote:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-overlay) 82%, var(--bg-raised) 18%);
  color: var(--text);
}

#writer-chat-input {
  width: 100%;
  min-height: 96px;
  max-height: 220px;
  resize: vertical;
  padding: 13px 56px 18px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 68%, var(--bg-raised) 32%);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.writer-chat-input-shell.is-listening #writer-chat-input {
  color: transparent;
  caret-color: transparent;
  user-select: none;
  pointer-events: none;
  background: color-mix(in srgb, var(--blue-bg) 28%, var(--bg-raised) 72%);
  border-color: color-mix(in srgb, var(--blue-border) 58%, var(--border-subtle));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-bg) 62%, transparent);
}

#writer-chat-input:focus {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
  background: color-mix(in srgb, var(--bg-overlay) 42%, var(--bg-raised) 58%);
}

#writer-chat-input:disabled {
  opacity: .68;
  cursor: not-allowed;
}

.writer-chat-input-listening {
  position: absolute;
  inset: 1px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 56px 14px 14px;
  border-radius: 13px;
  opacity: 0;
  pointer-events: none;
  transform: scale(.988);
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}

.writer-chat-input-shell.is-listening .writer-chat-input-listening {
  opacity: 1;
  transform: scale(1);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue-bg) 54%, transparent), transparent 42%),
    color-mix(in srgb, var(--bg-raised) 92%, var(--bg-overlay) 8%);
}

.writer-chat-input-listening-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.writer-chat-input-listening-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  background: #d93a49;
  box-shadow: 0 0 0 0 rgba(217, 58, 73, 0.3);
  animation: writerChatVoicePulse 1.4s ease-out infinite;
}

.writer-chat-input-listening strong {
  margin-left: auto;
  font-size: 12px;
  color: var(--text);
  letter-spacing: .02em;
}

.writer-chat-voice-bars {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
}

.writer-chat-voice-bar {
  flex: 1 1 0;
  min-width: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 42%, var(--border-subtle) 58%);
  transform-origin: 50% 50%;
  transform: scaleY(var(--voice-level, .18));
  transition: transform .08s linear, background .12s linear, opacity .12s linear;
  opacity: calc(.42 + (var(--voice-level, .18) * .72));
}

.writer-chat-input-shell.is-listening .writer-chat-voice-bar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 76%, #f0a34c 24%), color-mix(in srgb, var(--blue-border) 84%, var(--border-subtle) 16%));
}

.writer-chat-compose-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.writer-chat-compose-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#btn-writer-chat-send {
  flex-shrink: 0;
  border: 1px solid var(--blue-border);
  background: var(--blue-bg);
  color: var(--blue);
  border-radius: 12px;
  padding: 10px 16px;
  min-width: 92px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .15s, opacity .15s;
}

#btn-writer-chat-send:hover:not(:disabled) {
  filter: brightness(1.08);
}

#btn-writer-chat-send:active:not(:disabled) {
  transform: translateY(1px);
}

#btn-writer-chat-send:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: none;
}

#btn-writer-chat-voice {
  position: absolute;
  right: 11px;
  bottom: 11px;
  z-index: 2;
  width: 34px;
  height: 34px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 74%, var(--bg-raised) 26%);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter .15s, transform .15s, opacity .15s, border-color .15s, background .15s, color .15s, box-shadow .15s;
}

#btn-writer-chat-voice svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

#btn-writer-chat-voice:hover:not(:disabled) {
  filter: brightness(1.06);
}

#btn-writer-chat-voice:active:not(:disabled) {
  transform: translateY(1px);
}

#btn-writer-chat-voice.is-recording {
  border-color: color-mix(in srgb, #ff6b6b 54%, var(--border-subtle));
  background: color-mix(in srgb, #ff6b6b 14%, var(--bg-raised) 86%);
  color: #d93a49;
  box-shadow: 0 0 0 4px rgba(217, 58, 73, 0.12);
}

#btn-writer-chat-voice:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: none;
}

@keyframes writerChatVoicePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 58, 73, 0.32);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(217, 58, 73, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(217, 58, 73, 0);
  }
}

#reader-directory-agent-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue) 18%, transparent), transparent 28%),
    rgba(8, 12, 18, .62);
  backdrop-filter: blur(8px);
  z-index: 335;
}

#reader-directory-agent-modal.open {
  display: flex;
}

.reader-directory-agent-shell {
  width: min(520px, calc(100vw - 32px));
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 28px 78px rgba(0,0,0,.34);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.reader-directory-agent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue-bg) 48%, transparent), transparent);
}

.reader-directory-agent-titlebox {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reader-directory-agent-titlebox span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
}

.reader-directory-agent-titlebox strong {
  overflow: hidden;
  color: var(--text);
  font-size: 17px;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-directory-agent-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: border-color .15s, background .15s, color .15s;
}

.reader-directory-agent-close:hover:not(:disabled) {
  border-color: var(--border);
  background: var(--bg-overlay);
  color: var(--text);
}

.reader-directory-agent-close:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.reader-directory-agent-body {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.reader-directory-agent-field {
  display: grid;
  gap: 8px;
}

.reader-directory-agent-field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.reader-directory-agent-field input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg-overlay) 72%, var(--bg-raised) 28%);
  color: var(--text);
  font: inherit;
  padding: 0 13px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.reader-directory-agent-field input:focus {
  outline: none;
  border-color: var(--blue);
  background: color-mix(in srgb, var(--bg) 82%, var(--bg-overlay) 18%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}

.reader-directory-agent-mode-list {
  display: grid;
  gap: 10px;
}

.reader-directory-agent-mode {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-raised) 86%, var(--bg-overlay) 14%);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}

.reader-directory-agent-mode:hover {
  border-color: var(--border);
  background: var(--bg-overlay);
}

.reader-directory-agent-mode.active {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--blue-bg) 56%, var(--bg-raised) 44%);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

.reader-directory-agent-mode input {
  margin-top: 2px;
  accent-color: var(--blue);
}

.reader-directory-agent-mode span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.reader-directory-agent-mode strong {
  color: var(--text);
  font-size: 13px;
}

.reader-directory-agent-mode small {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.reader-directory-agent-error {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #f85149 36%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, rgba(248,81,73,.16) 76%, var(--bg-overlay) 24%);
  color: #f9b4ae;
  font-size: 12px;
  line-height: 1.5;
}

.reader-directory-agent-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px 18px;
  border-top: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 54%, transparent);
}

.reader-directory-agent-primary,
.reader-directory-agent-secondary {
  min-height: 36px;
  border-radius: 999px;
  padding: 0 15px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s, opacity .15s;
}

.reader-directory-agent-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
}

.reader-directory-agent-secondary {
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
}

.reader-directory-agent-primary:hover:not(:disabled),
.reader-directory-agent-secondary:hover:not(:disabled) {
  transform: translateY(-1px);
}

.reader-directory-agent-secondary:hover:not(:disabled) {
  border-color: var(--border);
  background: var(--bg-overlay);
  color: var(--text);
}

.reader-directory-agent-primary:disabled,
.reader-directory-agent-secondary:disabled {
  opacity: .58;
  cursor: not-allowed;
  transform: none;
}

#infographic-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(210, 152, 98, 0.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(55, 96, 145, 0.2), transparent 28%),
    rgba(9, 15, 24, 0.78);
  backdrop-filter: blur(14px);
  z-index: 340;
}

#infographic-modal.open {
  display: flex;
}

.infographic-modal-shell {
  width: min(1520px, calc(100vw - 36px));
  height: calc(100vh - 36px);
  background:
    linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(248, 241, 230, 0.96));
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 36px 120px rgba(0,0,0,.38);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.infographic-modal-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid rgba(20, 41, 67, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.54), rgba(255,255,255,0));
}

.infographic-modal-titlebox {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.infographic-modal-titlebox strong {
  font-size: clamp(18px, 1.2vw, 22px);
  color: #102235;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.infographic-modal-titlebox span {
  font-size: 12px;
  color: #4b6078;
  line-height: 1.5;
}

.infographic-modal-counter {
  font-size: 11.5px;
  color: #214468;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(23, 63, 104, 0.12);
  background: rgba(255,255,255,0.72);
  white-space: nowrap;
  font-weight: 700;
}

.infographic-head-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.infographic-head-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(20, 41, 67, 0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.66);
  color: #4b6078;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .18s, color .18s, background .18s, transform .18s, opacity .18s;
}

.infographic-head-btn:hover:not(:disabled) {
  border-color: rgba(24, 71, 117, 0.24);
  background: rgba(255,255,255,0.9);
  color: #163a5d;
  transform: translateY(-1px);
}

.infographic-head-btn:disabled {
  cursor: wait;
  opacity: .75;
}

.infographic-head-btn .spinner {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}

.infographic-close {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(20, 41, 67, 0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.66);
  color: #4b6078;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: border-color .18s, color .18s, background .18s, transform .18s;
}

.infographic-close:hover {
  border-color: rgba(24, 71, 117, 0.24);
  background: rgba(255,255,255,0.9);
  color: #163a5d;
  transform: translateY(-1px);
}

.infographic-modal-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.infographic-sidebar {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 20px;
  padding: 24px 20px 24px 24px;
  background:
    linear-gradient(180deg, rgba(247, 239, 227, 0.94), rgba(239, 231, 218, 0.9));
  border-right: 1px solid rgba(20, 41, 67, 0.08);
  overflow: hidden;
}

.infographic-sidebar-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 4px;
}

.infographic-sidebar-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9f6f44;
}

.infographic-sidebar-intro p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #53697f;
}

.infographic-sidebar-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.infographic-page-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
}

.infographic-sidebar-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(20, 41, 67, 0.08);
  color: #39516b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.infographic-sidebar-section {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.infographic-sidebar-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6d8297;
}

.infographic-page-tabs,
.infographic-slide-tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding-right: 4px;
  min-height: 0;
}

.infographic-page-tabs.infographic-page-strip {
  flex-direction: row;
  overflow: visible;
  padding-right: 0;
}

.infographic-stage {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  padding: 0;
  box-sizing: border-box;
  border-radius: 24px;
  border: 1px solid rgba(20, 41, 67, 0.08);
  background:
    radial-gradient(circle at top left, rgba(188, 149, 102, 0.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(56, 95, 143, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(251,247,240,0.98), rgba(240,234,225,0.96));
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 0 0 1px rgba(15, 31, 48, 0.04);
}

.infographic-stage-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  padding: 24px 28px 24px 24px;
  overflow: hidden;
}

.infographic-stage-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.infographic-stage-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.infographic-stage-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9f6f44;
}

.infographic-stage-copy strong {
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #102235;
}

.infographic-stage-copy span {
  font-size: 12.5px;
  line-height: 1.6;
  color: #5a6e83;
}

.infographic-stage-toolbar {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.infographic-nav {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(20, 41, 67, 0.1);
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: #163a5d;
  cursor: pointer;
  font-size: 20px;
  transition: border-color .18s, background .18s, transform .18s, opacity .18s;
}

.infographic-nav:hover:not(:disabled) {
  border-color: rgba(22, 58, 93, 0.22);
  background: rgba(255,255,255,0.96);
  transform: translateY(-1px);
}

.infographic-nav:disabled {
  opacity: .36;
  cursor: default;
}

.infographic-stage-view {
  width: 100%;
  height: 100%;
  background: transparent;
  min-width: 0;
  min-height: 0;
}

.infographic-stage-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #5a6e83;
  font-size: 12px;
}

.infographic-page-tabs:empty,
.infographic-slide-tabs:empty {
  display: none;
}

.infographic-page-tab {
  width: 100%;
  border: 1px solid rgba(20, 41, 67, 0.08);
  background: rgba(255,255,255,0.52);
  color: #53697f;
  border-radius: 16px;
  padding: 12px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  transition: border-color .18s, background .18s, color .18s, transform .18s;
}

.infographic-page-strip .infographic-page-tab {
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 9px 11px;
  border-radius: 999px;
  gap: 3px;
}

.infographic-page-strip .infographic-page-tab .infographic-page-tab-copy strong {
  font-size: 11.5px;
}

.infographic-page-strip .infographic-page-tab .infographic-page-tab-copy span {
  display: none;
}

.infographic-page-tab:hover {
  border-color: rgba(19, 66, 111, 0.16);
  background: rgba(255,255,255,0.8);
  color: #1a3d60;
}

.infographic-page-tab .infographic-page-tab-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a6b42;
}

.infographic-page-tab .infographic-page-tab-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.infographic-page-tab strong {
  font-size: 12px;
  color: inherit;
  line-height: 1.4;
}

.infographic-page-tab span {
  font-size: 10.5px;
  color: #72859a;
  line-height: 1.45;
}

.infographic-page-tab.active {
  border-color: rgba(19, 66, 111, 0.18);
  background: rgba(255,255,255,0.92);
  color: #102235;
  transform: translateX(3px);
  box-shadow: 0 14px 30px rgba(18, 42, 67, 0.06);
}

.infographic-slide-tab {
  width: 100%;
  border: 1px solid rgba(20, 41, 67, 0.07);
  background: rgba(255,255,255,0.42);
  color: #53697f;
  border-radius: 18px;
  padding: 12px;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  text-align: left;
  transition: border-color .18s, background .18s, color .18s, transform .18s, box-shadow .18s;
}

.infographic-slide-tab:hover {
  border-color: rgba(19, 66, 111, 0.15);
  background: rgba(255,255,255,0.78);
  color: #17395b;
}

.infographic-slide-no {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 49, 79, 0.06);
  color: #163a5d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.infographic-slide-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.infographic-slide-copy strong {
  font-size: 12.5px;
  line-height: 1.4;
  color: inherit;
}

.infographic-slide-copy span {
  font-size: 10.5px;
  line-height: 1.45;
  color: #72859a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.infographic-slide-tab.active {
  border-color: rgba(19, 66, 111, 0.18);
  background: rgba(255,255,255,0.96);
  color: #102235;
  transform: translateX(3px);
  box-shadow: 0 16px 34px rgba(18, 42, 67, 0.08);
}

.infographic-slide-tab.active .infographic-slide-no {
  background: linear-gradient(135deg, rgba(22, 58, 93, 0.92), rgba(159, 111, 68, 0.9));
  color: #fff8ef;
}

.infographic-sidebar-section.hidden {
  display: none;
}

#infographic-pdf-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(8, 12, 18, .66);
  backdrop-filter: blur(14px);
  z-index: 340;
}

#infographic-pdf-modal.open {
  display: flex;
}

.infographic-pdf-shell {
  width: min(1480px, calc(100vw - 36px));
  height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(20, 41, 67, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(246, 248, 250, 0.98), rgba(233, 237, 241, 0.96));
  box-shadow: 0 36px 120px rgba(0,0,0,.42);
}

.infographic-pdf-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 17px 20px;
  border-bottom: 1px solid rgba(20, 41, 67, 0.1);
  background: rgba(255,255,255,0.74);
}

.infographic-pdf-titlebox {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.infographic-pdf-titlebox strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(17px, 1.12vw, 22px);
  line-height: 1.25;
  color: #172231;
}

.infographic-pdf-titlebox span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  color: #607184;
}

.infographic-pdf-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.infographic-pdf-body {
  min-width: 0;
  min-height: 0;
  padding: 18px;
  background:
    radial-gradient(circle at 15% 10%, rgba(38, 83, 130, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(232,236,240,0.72), rgba(216,221,226,0.86));
}

.infographic-pdf-stage {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(20, 41, 67, 0.13);
  border-radius: 14px;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.infographic-pdf-stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f8fafc;
}

.infographic-pdf-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #5c6c7d;
  font-size: 12px;
}

.import-article-layout {
  height: 100%;
  min-height: 0;
  padding: 20px;
}

.content-media-viewer-open {
  overflow: hidden;
}

#content-media-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: rgba(8, 12, 18, .74);
  backdrop-filter: blur(10px);
  z-index: 345;
}

#content-media-modal.open {
  display: flex;
}

.content-media-modal-shell {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: block;
  overflow: hidden;
}

.content-media-modal-a11y-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.content-media-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 6;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-overlay) 84%, transparent);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s, transform .15s;
}

.content-media-modal-close:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-overlay) 78%, var(--blue) 22%);
  color: var(--text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.content-media-modal-close svg {
  display: block;
}

.content-media-modal-close:focus-visible {
  outline: none;
  border-color: var(--blue-border);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--blue-bg) 50%, transparent),
    0 12px 30px rgba(0, 0, 0, 0.22);
}

.content-media-modal-stage {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vh, 40px) clamp(22px, 3vw, 44px);
  box-sizing: border-box;
  background: transparent;
}

.content-media-modal-viewport {
  position: absolute;
  inset: clamp(24px, 3vh, 40px) clamp(22px, 3vw, 44px);
  overflow: hidden;
  touch-action: none;
}

.content-media-modal-viewport.is-draggable {
  cursor: grab;
}

.content-media-modal-viewport.is-dragging {
  cursor: grabbing;
}

.content-media-modal-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}

.content-media-modal-figure {
  display: block;
  user-select: none;
  pointer-events: none;
}

.content-media-modal-figure:not(.content-media-modal-figure-mermaid) {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.content-media-modal-figure-mermaid {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  border-radius: 0;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-subtle) 72%, transparent);
}

.content-media-modal-figure-mermaid svg {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: block;
  overflow: visible;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.content-media-modal-feedback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 36%, transparent), transparent 30%);
}

.content-media-modal-feedback[hidden] {
  display: none;
}

.content-media-modal-feedback.is-loading .spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.content-media-modal-feedback.is-error {
  font-size: 12px;
  color: var(--text-muted);
}

#content-media-modal[data-media-type="mermaid"] .content-media-modal-stage {
  background: transparent;
}

@media (max-width: 900px) {
  .content-media-modal-close {
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
  }

  .content-media-modal-stage {
    padding: 18px 16px 20px;
  }

  .content-media-modal-viewport {
    inset: 18px 16px 20px;
  }
}

.podcast-audio-layout {
  height: 100%;
  min-height: 0;
  padding: 0;
}

.import-article-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
}

.podcast-audio-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
}

.podcast-audio-shell-podcast {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.podcast-audio-entry-card {
  grid-column: 2 / 4;
  grid-row: 1;
}

.import-article-card.podcast-audio-entry-card {
  margin-top: 20px;
  margin-right: 20px;
}

.podcast-audio-content {
  min-height: 0;
  display: grid;
  gap: 16px;
  overflow: hidden;
}

.podcast-audio-content-video {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
}

.podcast-audio-library-card,
.podcast-audio-side,
.podcast-audio-main {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.podcast-audio-main {
  margin-right: 20px;
  margin-bottom: 20px;
}

.podcast-audio-shell-podcast > .podcast-audio-library-card {
  grid-column: 1;
  grid-row: 1 / 3;
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 46%, transparent), transparent 26%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue-bg) 20%, transparent), transparent 52%),
    color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
}

.podcast-audio-shell-podcast > .podcast-audio-side {
  grid-column: 2;
  grid-row: 2;
  margin-bottom: 20px;
}

.podcast-audio-shell-podcast > .podcast-audio-main {
  grid-column: 3;
  grid-row: 2;
}

.podcast-audio-selection-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.podcast-audio-selection-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.podcast-audio-selection-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--border-subtle) 74%);
  background: color-mix(in srgb, var(--blue-bg) 64%, var(--bg-raised) 36%);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.podcast-audio-selection-copy strong {
  min-width: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
}

.podcast-audio-selection-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.podcast-audio-selection-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: color-mix(in srgb, var(--bg-overlay) 82%, transparent 18%);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podcast-audio-selection-chip.is-ready {
  border-color: color-mix(in srgb, var(--green) 38%, var(--border-subtle) 62%);
  background: color-mix(in srgb, var(--green-bg) 50%, var(--bg-overlay) 50%);
  color: var(--green);
}

.podcast-audio-selection-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.podcast-audio-input-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.podcast-audio-url-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.podcast-audio-secondary-btn {
  height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .15s, border-color .15s, background .15s, color .15s;
}

.podcast-audio-secondary-btn:hover {
  filter: brightness(1.06);
}

.podcast-audio-secondary-btn:active {
  transform: translateY(1px);
}

.podcast-audio-secondary-btn:disabled {
  cursor: wait;
  opacity: .55;
  filter: none;
}

.podcast-audio-library-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  padding: 20px;
  border: none;
  border-radius: 0;
  background: transparent;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.podcast-audio-library-head {
  display: flex;
  align-items: center;
}

.podcast-audio-library-head strong {
  font-size: 12.5px;
  color: var(--text);
}

.podcast-audio-library-filter {
  display: grid;
}

#podcast-audio-show-filter,
#video-extract-channel-filter {
  width: 100%;
  min-width: 0;
  height: 38px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0 38px 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-overlay);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238b949e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  box-sizing: border-box;
}

#podcast-audio-show-filter:focus,
#video-extract-channel-filter:focus {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

#podcast-audio-show-filter:disabled,
#video-extract-channel-filter:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.podcast-audio-library-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 10px;
  align-content: start;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.podcast-audio-library-item {
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}

.podcast-audio-library-item:hover {
  border-color: color-mix(in srgb, var(--blue) 26%, var(--border-subtle) 74%);
  background: color-mix(in srgb, var(--bg-overlay) 76%, transparent 24%);
}

.podcast-audio-library-item:active {
  transform: translateY(1px);
}

.podcast-audio-library-item:disabled {
  opacity: .72;
  cursor: wait;
  transform: none;
}

.podcast-audio-library-item.is-active {
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border-subtle) 60%);
  background: color-mix(in srgb, var(--blue-bg) 58%, var(--bg-raised) 42%);
}

.podcast-audio-library-item-date {
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.podcast-audio-library-item strong {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  font-weight: 400;
}

.podcast-audio-library-item-show {
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
}

.podcast-audio-library-item-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.podcast-audio-library-flag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, transparent 18%);
  background: color-mix(in srgb, var(--bg-overlay) 80%, transparent 20%);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.podcast-audio-library-empty {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  border-radius: 16px;
  border: 1px dashed var(--border-subtle);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.7;
}

.import-article-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue) 8%, transparent), transparent 34%),
    color-mix(in srgb, var(--bg-raised) 92%, var(--bg-overlay) 8%);
}

.import-article-intro {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.import-article-intro strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.import-article-intro p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

.import-article-intro code {
  font-size: 11.5px;
  color: var(--text);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 5px;
}

.import-article-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.podcast-audio-url-field {
  position: relative;
  min-width: 0;
}

.podcast-audio-url-field.has-clipboard #podcast-audio-url,
.podcast-audio-url-field.has-clipboard #video-extract-url {
  padding-right: 44px;
}

#import-article-url,
#import-article-title,
#podcast-audio-url,
#video-extract-url {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}

.podcast-audio-paste-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}

.podcast-audio-paste-btn:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-overlay) 76%, transparent 24%);
  color: var(--text);
}

.podcast-audio-paste-btn:active {
  transform: translateY(-50%) scale(.98);
}

.podcast-audio-paste-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.podcast-audio-paste-btn svg {
  width: 15px;
  height: 15px;
}

#import-article-url:focus,
#import-article-title:focus,
#podcast-audio-url:focus,
#video-extract-url:focus {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

#import-article-url:disabled,
#import-article-title:disabled,
#podcast-audio-url:disabled,
#video-extract-url:disabled,
#import-article-markdown:disabled {
  opacity: .6;
  cursor: not-allowed;
}

#import-article-markdown {
  display: block;
  width: 100%;
  min-height: 320px;
  resize: none;
  padding: 14px 15px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.65;
  font-family: Consolas, "SFMono-Regular", Menlo, Monaco, monospace;
  box-sizing: border-box;
}

#import-article-markdown:focus {
  outline: none;
  box-shadow: none;
}

#btn-import-article-preview,
#btn-import-article-save-optimized,
#btn-import-article-save-direct,
#btn-podcast-audio-save,
#btn-video-extract-save {
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s, transform .15s, border-color .15s, background .15s, color .15s;
}

#btn-import-article-preview,
#btn-import-article-save-optimized,
#btn-podcast-audio-save,
#btn-video-extract-save {
  border: 1px solid var(--blue-border);
  background: var(--blue-bg);
  color: var(--blue);
}

#btn-import-article-save-direct {
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
}

#btn-import-article-preview:hover,
#btn-import-article-save-optimized:hover,
#btn-import-article-save-direct:hover,
#btn-podcast-audio-save:hover,
#btn-video-extract-save:hover {
  filter: brightness(1.07);
}

#btn-import-article-preview:active,
#btn-import-article-save-optimized:active,
#btn-import-article-save-direct:active,
#btn-podcast-audio-save:active,
#btn-video-extract-save:active {
  transform: translateY(1px);
}

#btn-import-article-preview:disabled,
#btn-import-article-save-optimized:disabled,
#btn-import-article-save-direct:disabled,
#btn-podcast-audio-save:disabled,
#btn-video-extract-save:disabled {
  cursor: wait;
  opacity: .55;
  filter: none;
}

.import-article-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.import-article-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.import-article-label {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-muted);
}

.import-article-runbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.import-article-runbar button {
  flex-shrink: 0;
}

.import-article-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-dim);
  min-height: 18px;
}

.import-article-route code {
  display: inline-block;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  font-size: 11px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.import-article-editor-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 92%, transparent 8%), color-mix(in srgb, var(--bg) 92%, transparent 8%));
}

.podcast-audio-progress-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 94%, transparent 6%), color-mix(in srgb, var(--bg) 94%, transparent 6%));
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.podcast-audio-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.podcast-audio-progress-head strong {
  font-size: 12.5px;
  color: var(--text);
}

.podcast-audio-progress-head span {
  font-size: 11px;
  color: var(--text-dim);
}

.podcast-audio-stage-list {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  align-content: start;
  overscroll-behavior: contain;
}

.podcast-audio-stage {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
  transition: border-color .15s, background .15s, opacity .15s;
}

.podcast-audio-stage-index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-overlay) 82%, var(--bg) 18%);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
}

.podcast-audio-stage-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.podcast-audio-stage-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.podcast-audio-stage-heading {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.podcast-audio-stage-top strong {
  min-width: 0;
  font-size: 12.5px;
  color: var(--text);
}

.podcast-audio-stage-status {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.podcast-audio-stage-copy span {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.podcast-audio-stage-action {
  flex-shrink: 0;
  min-width: 70px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: color-mix(in srgb, var(--bg-overlay) 86%, transparent 14%);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}

.podcast-audio-stage-action:hover {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--border-subtle) 70%);
  background: color-mix(in srgb, var(--blue-bg) 58%, var(--bg-overlay) 42%);
  color: var(--blue);
}

.podcast-audio-stage-action:active {
  transform: translateY(1px);
}

.podcast-audio-stage-action:disabled {
  cursor: not-allowed;
  opacity: .6;
  transform: none;
}

.podcast-audio-flow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.podcast-audio-flow-step {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: color-mix(in srgb, var(--bg-overlay) 82%, transparent 18%);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.podcast-audio-flow-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.podcast-audio-flow-sep svg {
  width: 12px;
  height: 12px;
}

.import-article-shell > .import-article-editor-card,
.import-article-shell > .import-article-empty,
.podcast-audio-main > .import-article-editor-card,
.podcast-audio-main > .import-article-empty {
  min-height: 0;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}

.podcast-audio-main > .import-article-editor-card {
  align-content: start;
}

#action-modal[data-action="video-extract"] .podcast-audio-main {
  align-items: start;
}

#action-modal[data-action="video-extract"] .podcast-audio-main > .import-article-editor-card,
#action-modal[data-action="video-extract"] .podcast-audio-main > .import-article-empty {
  height: auto;
  max-height: 100%;
  align-self: start;
}

.podcast-audio-stage.is-done {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border-subtle) 66%);
  background: color-mix(in srgb, var(--green-bg) 42%, var(--bg-raised) 58%);
}

.podcast-audio-stage.is-done .podcast-audio-stage-index {
  border-color: color-mix(in srgb, var(--green) 56%, var(--border) 44%);
  background: color-mix(in srgb, var(--green) 22%, var(--bg-raised) 78%);
  color: var(--green);
}

.podcast-audio-stage.is-done .podcast-audio-stage-status {
  color: var(--green);
}

.podcast-audio-stage.is-active {
  border-color: color-mix(in srgb, var(--yellow) 52%, var(--border-subtle) 48%);
  background: color-mix(in srgb, var(--yellow-bg) 34%, var(--bg-raised) 66%);
}

.podcast-audio-stage.is-active .podcast-audio-stage-index {
  border-color: color-mix(in srgb, var(--yellow) 62%, var(--border) 38%);
  background: color-mix(in srgb, var(--yellow) 18%, var(--bg-raised) 82%);
  color: var(--yellow);
  animation: podcast-stage-pulse 1.2s ease-in-out infinite;
}

.podcast-audio-stage.is-active .podcast-audio-stage-status {
  color: var(--yellow);
}

.podcast-audio-stage.is-error {
  border-color: color-mix(in srgb, #f85149 52%, var(--border-subtle) 48%);
  background: color-mix(in srgb, rgba(248,81,73,.12) 72%, var(--bg-raised) 28%);
}

.podcast-audio-stage.is-error .podcast-audio-stage-index {
  border-color: rgba(248,81,73,.42);
  background: rgba(248,81,73,.12);
  color: #f85149;
}

.podcast-audio-stage.is-error .podcast-audio-stage-status {
  color: #f85149;
}

.podcast-audio-stage.is-skipped,
.podcast-audio-stage.is-optional {
  opacity: .72;
}

.podcast-audio-stage.is-skipped .podcast-audio-stage-status,
.podcast-audio-stage.is-optional .podcast-audio-stage-status {
  color: var(--text-dim);
}

@keyframes podcast-stage-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227,179,65,0); }
  50% { box-shadow: 0 0 0 7px rgba(227,179,65,.1); }
}

.import-article-editor-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.import-article-editor-head strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.import-article-editor-surface {
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-overlay) 72%, transparent 28%);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  transition: border-color .15s, box-shadow .15s;
}

.import-article-editor-surface:focus-within {
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

.import-article-empty {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  border-radius: 20px;
  border: 1px dashed var(--border-subtle);
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--blue) 7%, transparent), transparent 34%),
    color-mix(in srgb, var(--bg-raised) 92%, transparent 8%);
  color: var(--text-dim);
  line-height: 1.7;
  font-size: 12px;
}

.import-article-feedback {
  font-size: 12px;
  border-radius: 12px;
  padding: 10px 13px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 8px;
}
.import-article-feedback:empty { display: none; }
.import-article-feedback.ia-loading {
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}
.import-article-feedback.ia-success {
  background: var(--green-bg);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  color: var(--green); align-items: flex-start;
}
.import-article-feedback.ia-error {
  background: color-mix(in srgb, var(--bg-overlay) 55%, rgba(248,81,73,.15) 45%);
  border: 1px solid rgba(248,81,73,.3);
  color: #f85149;
  align-items: flex-start;
}

.website-research-layout {
  min-height: 0;
  display: grid;
  padding: 18px;
}

.website-research-shell {
  min-height: 0;
  display: grid;
  gap: 14px;
}

.website-research-card,
.website-research-editor-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue) 7%, transparent), transparent 34%),
    color-mix(in srgb, var(--bg-raised) 92%, var(--bg-overlay) 8%);
}

.website-research-input-row,
.website-research-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.website-research-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 170px);
  gap: 10px;
  align-items: end;
}

.website-research-field,
.website-research-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.website-research-label {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-muted);
}

#website-research-seed-url,
#website-research-title,
#website-research-crawl-depth,
#website-research-site-search-page-limit {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}

#website-research-seed-url:focus,
#website-research-title:focus,
#website-research-crawl-depth:focus,
#website-research-site-search-page-limit:focus {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

#website-research-markdown {
  display: block;
  width: 100%;
  min-height: 360px;
  resize: none;
  padding: 14px 15px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.65;
  font-family: Consolas, "SFMono-Regular", Menlo, Monaco, monospace;
  box-sizing: border-box;
}

#website-research-markdown:focus {
  outline: none;
  box-shadow: none;
}

#website-research-seed-url:disabled,
#website-research-title:disabled,
#website-research-crawl-depth:disabled,
#website-research-site-search-page-limit:disabled,
#website-research-markdown:disabled {
  opacity: .6;
  cursor: not-allowed;
}

#btn-website-research-preview,
#btn-website-research-save {
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s, transform .15s, border-color .15s, background .15s, color .15s;
}

#btn-website-research-preview {
  border: 1px solid var(--blue-border);
  background: var(--blue-bg);
  color: var(--blue);
}

#btn-website-research-save {
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
}

#btn-website-research-preview:hover,
#btn-website-research-save:hover {
  filter: brightness(1.07);
}

#btn-website-research-preview:active,
#btn-website-research-save:active {
  transform: translateY(1px);
}

#btn-website-research-preview:disabled,
#btn-website-research-save:disabled {
  cursor: wait;
  opacity: .55;
  filter: none;
}

.website-research-toggle .set-switch {
  margin: 0;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  padding: 0 12px;
}

.website-research-toggle .set-switch-copy strong {
  font-size: 12.5px;
}

.website-research-toggle .set-switch-copy span {
  display: none;
}

.website-research-runbar {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 10px;
}

.website-research-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.website-research-stat {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: color-mix(in srgb, var(--bg-overlay) 72%, transparent 28%);
}

.website-research-stat strong {
  font-size: 13px;
  color: var(--text);
}

.website-research-stat span {
  font-size: 11px;
  color: var(--text-muted);
}

.website-research-feedback {
  font-size: 12px;
  border-radius: 12px;
  padding: 10px 13px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.website-research-feedback:empty { display: none; }

.website-research-feedback.wr-loading,
.website-research-feedback.wr-info {
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.website-research-feedback.wr-success {
  background: var(--green-bg);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  color: var(--green);
  align-items: flex-start;
}

.website-research-feedback.wr-error {
  background: color-mix(in srgb, var(--bg-overlay) 55%, rgba(248,81,73,.15) 45%);
  border: 1px solid rgba(248,81,73,.3);
  color: #f85149;
  align-items: flex-start;
}

.website-research-editor-surface {
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-overlay) 72%, transparent 28%);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  transition: border-color .15s, box-shadow .15s;
}

.website-research-editor-surface:focus-within {
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

.website-research-empty {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  border-radius: 20px;
  border: 1px dashed var(--border-subtle);
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--blue) 7%, transparent), transparent 34%),
    color-mix(in srgb, var(--bg-raised) 92%, transparent 8%);
  color: var(--text-dim);
  line-height: 1.7;
  font-size: 12px;
}

.data-insights-layout {
  min-height: 0;
  display: grid;
  padding: 18px;
}

.data-insights-shell {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.data-insights-shell.setup-mode {
  grid-template-columns: minmax(0, 1fr);
}

.data-insights-card,
.data-insights-report-card {
  min-height: 0;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue) 7%, transparent), transparent 34%),
    color-mix(in srgb, var(--bg-raised) 92%, var(--bg-overlay) 8%);
}

.data-insights-card {
  align-content: start;
  align-self: start;
}

.data-insights-upload {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--blue-border) 55%, var(--border-subtle) 45%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue-bg) 54%, var(--bg-overlay) 46%), color-mix(in srgb, var(--bg-raised) 84%, transparent));
  overflow: hidden;
  transition: border-color .15s, background .15s, transform .15s;
}

.data-insights-upload.is-dragover {
  border-color: var(--blue);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue-bg) 72%, var(--bg-overlay) 28%), color-mix(in srgb, var(--bg-raised) 78%, transparent));
  transform: translateY(-1px);
}

.data-insights-upload-copy {
  display: grid;
  gap: 4px;
  padding-right: 48px;
}

.data-insights-upload-copy strong {
  font-size: 14px;
  color: var(--text);
}

.data-insights-upload-copy span {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

.data-insights-upload-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-raised) 62%, transparent);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#data-insights-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.data-insights-sheet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.data-insights-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.data-insights-label {
  font-size: 11px;
  color: var(--text-muted);
}

#data-insights-sheet-select {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

#data-insights-sheet-select:focus {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

#data-insights-analysis-prompt,
#data-insights-rerun-prompt {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.65;
}

#data-insights-analysis-prompt:focus,
#data-insights-rerun-prompt:focus {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

#data-insights-analysis-prompt:disabled,
#data-insights-rerun-prompt:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.data-insights-runbar {
  display: flex;
  justify-content: flex-end;
}

.data-insights-report-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.data-insights-report-card.pre-report {
  align-self: start;
  grid-template-rows: auto auto;
}

.data-insights-report-card.pre-report .data-insights-report-head {
  align-items: flex-start;
}

.data-insights-report-card.is-stale {
  border-color: color-mix(in srgb, var(--blue-border) 58%, var(--border-subtle) 42%);
}

.data-insights-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.data-insights-report-copy {
  display: grid;
  gap: 4px;
}

.data-insights-report-copy strong {
  font-size: 14px;
  color: var(--text);
}

.data-insights-report-copy span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.data-insights-report-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#btn-data-insights-run,
#btn-data-insights-save,
#btn-data-insights-rerun {
  height: 38px;
  min-width: 108px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .15s, border-color .15s, background .15s, color .15s;
}

#btn-data-insights-run {
  border-color: color-mix(in srgb, var(--blue-border) 86%, transparent 14%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue-bg) 82%, var(--bg-overlay) 18%), color-mix(in srgb, var(--blue-bg) 62%, var(--bg-overlay) 38%));
  color: var(--blue);
}

#btn-data-insights-rerun {
  border-color: var(--blue-border);
  background: var(--blue-bg);
  color: var(--blue);
}

#btn-data-insights-save {
  background: color-mix(in srgb, var(--bg-overlay) 86%, var(--bg-raised) 14%);
}

#btn-data-insights-run:hover,
#btn-data-insights-save:hover,
#btn-data-insights-rerun:hover {
  filter: brightness(1.06);
}

#btn-data-insights-run:active,
#btn-data-insights-save:active,
#btn-data-insights-rerun:active {
  transform: translateY(1px);
}

#btn-data-insights-run:disabled,
#btn-data-insights-save:disabled,
#btn-data-insights-rerun:disabled,
#data-insights-sheet-select:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: none;
}

.data-insights-feedback {
  font-size: 12px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 12px;
}

.data-insights-feedback:empty {
  display: none;
}

.data-insights-feedback.di-loading,
.data-insights-feedback.di-info {
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.data-insights-feedback.di-success {
  background: var(--green-bg);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  color: var(--green);
  align-items: flex-start;
}

.data-insights-feedback.di-error {
  background: color-mix(in srgb, var(--bg-overlay) 55%, rgba(248,81,73,.15) 45%);
  border: 1px solid rgba(248,81,73,.3);
  color: #f85149;
  align-items: flex-start;
}

.data-insights-report-surface {
  min-height: 0;
  display: grid;
  align-content: start;
}

.data-insights-progress-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 82%, transparent 18%), color-mix(in srgb, var(--bg-raised) 88%, transparent 12%));
}

.data-insights-progress-card.is-error {
  border-color: rgba(248,81,73,.28);
  background:
    linear-gradient(180deg, color-mix(in srgb, rgba(248,81,73,.08) 72%, var(--bg-overlay) 28%), color-mix(in srgb, var(--bg-raised) 90%, transparent 10%));
}

.data-insights-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.data-insights-progress-head strong {
  font-size: 14px;
  color: var(--text);
}

.data-insights-progress-copy {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}

.data-insights-progress-list {
  display: grid;
  gap: 8px;
}

.data-insights-progress-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 86%, transparent 14%);
  background: color-mix(in srgb, var(--bg-overlay) 74%, transparent 26%);
  color: var(--text-muted);
}

.data-insights-progress-item.is-active {
  border-color: color-mix(in srgb, var(--blue-border) 76%, transparent 24%);
  background: color-mix(in srgb, var(--blue-bg) 74%, var(--bg-overlay) 26%);
  color: var(--blue);
}

.data-insights-progress-item.is-done {
  border-color: color-mix(in srgb, var(--green) 30%, transparent 70%);
  background: color-mix(in srgb, var(--green-bg) 72%, transparent 28%);
  color: var(--green);
}

.data-insights-progress-index {
  width: 20px;
  min-width: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.data-insights-progress-label {
  font-size: 12.5px;
  font-weight: 600;
}

.data-insights-report-preview,
.data-insights-report-editor {
  min-height: 0;
  height: 100%;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 70%, transparent 30%);
}

.data-insights-report-preview {
  overflow: auto;
  padding: 18px 20px 24px;
}

.data-insights-report-editor {
  overflow: hidden;
}

.data-insights-report-editor:focus-within {
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

.data-insights-rerun-shell {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue-bg) 34%, var(--bg-overlay) 66%), color-mix(in srgb, var(--bg-raised) 88%, transparent 12%));
}

.data-insights-rerun-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.data-insights-rerun-head strong {
  font-size: 12.5px;
  color: var(--text);
}

#data-insights-markdown {
  width: 100%;
  height: 100%;
  min-height: 420px;
  resize: none;
  padding: 16px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.65;
  font-family: Consolas, "SFMono-Regular", Menlo, Monaco, monospace;
}

#data-insights-markdown:focus {
  outline: none;
}

#data-insights-markdown:disabled {
  opacity: .68;
  cursor: not-allowed;
}

.data-insights-empty {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: 18px;
  border: 1px dashed var(--border-subtle);
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--blue-bg) 40%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 88%, transparent 12%), color-mix(in srgb, var(--bg-overlay) 76%, transparent 24%));
  color: var(--text-muted);
}

.data-insights-empty strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 960px) {
  .mook-editor-layout,
  .mook-viewer-head {
    grid-template-columns: 1fr;
    display: grid;
  }

  .mook-editor-pane {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .mook-front-grid,
  .mook-section-grid,
  .mook-closing-grid,
  .mook-article-grid,
  .mook-cover-grid {
    grid-template-columns: 1fr;
  }

  .mook-viewer-head {
    align-items: flex-start;
  }

  .mook-viewer-actions {
    width: 100%;
  }

  .mook-viewer-btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .import-article-layout {
    padding: 12px;
  }

  .podcast-audio-layout {
    padding: 0;
  }

  .website-research-layout {
    padding: 12px;
  }

  .data-insights-layout {
    padding: 12px;
  }

  .import-article-runbar {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
  }

  .import-article-runbar button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 12px;
    font-size: 12px;
  }

  .website-research-config-grid,
  .website-research-meta-grid,
  .website-research-input-row {
    grid-template-columns: 1fr;
  }

  .website-research-runbar {
    justify-content: stretch;
  }

  #btn-website-research-preview,
  #btn-website-research-save {
    width: 100%;
  }

  .website-research-stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .data-insights-shell {
    grid-template-columns: 1fr;
  }

  .data-insights-sheet-row {
    grid-template-columns: 1fr;
  }

  .data-insights-report-actions {
    justify-content: stretch;
  }

  #btn-data-insights-run,
  #btn-data-insights-save,
  #btn-data-insights-rerun {
    width: 100%;
  }

  .data-insights-rerun-head {
    align-items: stretch;
  }

  #data-insights-rerun-prompt {
    min-height: 96px;
  }

  .connector-shell {
    grid-template-columns: 1fr;
  }

  .connector-stat-grid,
  .connector-result-list {
    grid-template-columns: 1fr 1fr;
  }

  .connector-runbar,
  .connector-settings-actions {
    justify-content: stretch;
  }

  .connector-runbar .connector-primary-btn,
  .connector-runbar .connector-secondary-btn,
  .connector-settings-actions .connector-primary-btn,
  .connector-settings-actions .connector-secondary-btn {
    flex: 1 1 0;
  }

  .action-modal-shell {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }

  .podcast-audio-content,
  .podcast-audio-content-video {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, auto) minmax(220px, auto) minmax(0, 1fr);
  }

  .podcast-audio-shell-podcast {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(220px, auto) minmax(220px, auto) minmax(0, 1fr);
  }

  .podcast-audio-entry-card,
  .podcast-audio-shell-podcast > .podcast-audio-library-card,
  .podcast-audio-shell-podcast > .podcast-audio-side,
  .podcast-audio-shell-podcast > .podcast-audio-main {
    grid-column: auto;
    grid-row: auto;
  }

  .podcast-audio-url-actions {
    width: 100%;
  }

  .podcast-audio-url-actions button {
    flex: 1 1 0;
    min-width: 0;
  }

  .podcast-audio-selection-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .podcast-audio-selection-actions {
    width: 100%;
  }

  .podcast-audio-selection-actions .podcast-audio-secondary-btn {
    width: 100%;
  }

  .writer-chat-modal-shell {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
  }

  .writer-chat-modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(200px, 240px) minmax(0, 1fr);
  }

  .writer-chat-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding-right: 18px;
  }

  .writer-chat-message {
    max-width: 100%;
  }

  .writer-chat-compose-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .writer-chat-compose-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .writer-chat-compose-actions button {
    flex: 1 1 0;
  }

  #settings-panel {
    width: 100vw;
  }

  #settings-panel-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .settings-index-pane {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    overflow: visible;
  }

  .settings-index-sticky {
    position: static;
    padding: 10px 12px;
    min-height: auto;
  }

  .settings-index-nav {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .settings-index-link {
    min-width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .settings-index-footer {
    margin-top: 10px;
    padding-top: 0;
  }

  .settings-panel-main {
    padding: 14px 14px 18px;
    gap: 16px;
  }

  .settings-group {
    padding: 0 0 16px;
    gap: 10px;
  }

  .settings-group-cards {
    gap: 12px;
  }

  .doc-dir-settings-row {
    flex-direction: column;
    align-items: stretch;
  }

  .doc-dir-settings-actions {
    justify-content: space-between;
  }

  .dim-item {
    grid-template-columns: 1fr;
  }

  .dim-item-actions {
    justify-content: flex-end;
  }

  .dim-form-grid {
    grid-template-columns: 1fr;
  }

  #memo-panel {
    width: min(100vw, 640px);
  }

  .settings-model-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .settings-model-toolbar.compact {
    grid-template-columns: 1fr;
  }

  .analysis-settings-head {
    flex-direction: column;
    align-items: stretch;
  }

  .analysis-settings-chip {
    align-self: flex-start;
  }

  #moffee-model-select {
    grid-column: 1 / -1;
  }

  .moffee-flow-grid {
    grid-template-columns: 1fr;
  }

  .translation-settings-grid {
    grid-template-columns: 1fr;
  }

  .critical-reading-color-grid {
    grid-template-columns: 1fr;
  }

  .connector-token-row {
    flex-direction: column;
    align-items: stretch;
  }

  .connector-stat-grid,
  .connector-result-list {
    grid-template-columns: 1fr;
  }

  .moffee-settings-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .moffee-settings-meta {
    text-align: left;
  }

  .set-switch {
    align-items: flex-start;
  }

  .memo-panel-layout {
    grid-template-columns: 1fr;
  }

  .memo-panel-side {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .memo-panel-sub {
    border: none;
  }

  .analysis-header {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .skill-heading-row {
    flex-wrap: wrap;
  }

  .skill-heading-actions {
    width: 100%;
    margin-left: 0;
  }

  .knowledge-card-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .knowledge-card-actions {
    width: 100%;
  }

  .knowledge-card-btn {
    flex: 1 1 0;
  }

  .quiz-layout {
    grid-template-columns: 1fr;
  }

  .quiz-main {
    padding-bottom: 12px;
  }

  .quiz-side {
    padding: 0 18px 20px;
  }

  .quiz-filter-row {
    grid-template-columns: 1fr;
  }

  .quiz-choice-list {
    grid-template-columns: 1fr;
  }

  .quiz-question-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .quiz-link-btn {
    grid-column: 2;
    justify-self: start;
  }

  .quiz-toolbar {
    flex-direction: column;
  }

  .quiz-toolbar-actions {
    width: 100%;
    justify-content: stretch;
  }

  .quiz-toolbar-actions .analysis-action-btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .infographic-modal-shell {
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    border-radius: 18px;
  }

  .infographic-modal-head {
    flex-wrap: wrap;
  }

  .infographic-head-actions {
    margin-left: 0;
    order: 3;
  }

  .writer-chat-modal-head {
    flex-direction: column;
    align-items: stretch;
  }

  .writer-chat-modal-actions {
    width: 100%;
    justify-content: space-between;
  }

  #btn-writer-chat-new {
    flex: 1;
    justify-content: center;
  }

  .infographic-modal-counter {
    margin-left: 0;
  }

  .infographic-modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .infographic-sidebar {
    order: 2;
    border-right: none;
    border-top: 1px solid rgba(20, 41, 67, 0.08);
    padding: 16px 14px 18px;
    grid-template-rows: auto minmax(0, 220px);
  }

  .infographic-stage-panel {
    order: 1;
    padding: 18px 16px 16px;
    gap: 14px;
  }

  .infographic-stage-topbar {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .infographic-stage-toolbar {
    justify-content: flex-end;
  }
}

@media (max-height: 760px) {
  #action-modal {
    padding: 12px;
  }

  .action-modal-shell {
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
  }

  .podcast-audio-layout {
    padding: 0;
  }

  .podcast-audio-shell,
  .podcast-audio-content {
    gap: 12px;
  }

  .import-article-card,
  .podcast-audio-progress-card,
  .podcast-audio-main > .import-article-editor-card {
    padding: 14px;
  }

  .podcast-audio-progress-head,
  .podcast-audio-stage-top {
    align-items: flex-start;
    flex-direction: column;
  }
}

.knowledge-shell {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
}

.knowledge-shell-sidebar {
  height: 100%;
  padding: 12px 10px 10px;
}

.knowledge-shell-workspace {
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}

.knowledge-shell-workspace-atlas {
  padding: 0;
  grid-template-rows: minmax(0, 1fr);
}

.knowledge-shell-modal {
  height: 100%;
  padding: 0;
  gap: 0;
  grid-template-rows: minmax(0, 1fr);
}

.knowledge-modal-layout {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
}

.knowledge-modal-layout-atlas-entry {
  grid-template-columns: minmax(320px, 372px) minmax(0, 1fr);
}

.knowledge-tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 0;
}

.knowledge-tree-entry {
  width: calc(100% - 12px);
  margin: 0 6px 10px;
  padding: 12px 13px;
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  background: var(--bg-overlay);
  color: var(--text);
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.knowledge-tree-entry:hover,
.knowledge-tree-entry.active {
  border-color: var(--blue-border);
  background: var(--blue-bg);
  color: var(--blue);
}

.knowledge-tree-entry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.knowledge-tree-entry-label {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.knowledge-tree-empty {
  padding: 6px 10px 6px 24px;
  font-size: 12px;
  color: var(--text-dim);
}

.knowledge-scene-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.knowledge-scene-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.knowledge-scene-copy strong {
  font-size: 15px;
  color: var(--text);
}

.knowledge-scene-copy span {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.knowledge-scene-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.knowledge-layout {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(320px, 372px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
}

.knowledge-layout-detail {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.knowledge-workspace-body {
  min-height: 0;
  height: 100%;
  display: grid;
}

.knowledge-workspace-panes {
  min-height: 0;
  height: 100%;
  display: flex;
  overflow: hidden;
  background: var(--bg);
}

.knowledge-workspace-body-atlas {
  min-height: 0;
  height: 100%;
  overflow: auto;
  display: block;
  align-content: start;
  padding: 0;
}

.knowledge-workspace-body-atlas > .knowledge-empty,
.knowledge-workspace-body-atlas > .knowledge-feedback {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.knowledge-workspace-doc-pane,
.knowledge-workspace-detail-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.knowledge-workspace-doc-pane {
  flex: 1 1 0;
  width: auto;
  box-sizing: border-box;
  padding: 24px 20px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.knowledge-workspace-detail-pane {
  flex: 1 1 0;
  width: auto;
  box-sizing: border-box;
  padding: 24px 18px;
  overflow: hidden;
}

.knowledge-workspace-doc-pane > .knowledge-empty,
.knowledge-workspace-doc-pane > .knowledge-feedback,
.knowledge-workspace-detail-pane > .knowledge-empty,
.knowledge-workspace-detail-pane > .knowledge-feedback {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.knowledge-workspace-detail-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
  box-sizing: border-box;
}

.knowledge-workspace-detail-scroll > .knowledge-empty,
.knowledge-workspace-detail-scroll > .knowledge-feedback,
.knowledge-workspace-detail-scroll > .knowledge-workspace-loading {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.knowledge-workspace-loading {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.knowledge-workspace-loading .loading-row {
  padding: 0;
}

.knowledge-workspace-body > .knowledge-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.knowledge-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-raised);
  background-image: none;
  box-shadow: none;
  border-left-color: var(--border-subtle);
}

.knowledge-card::before,
.knowledge-card::after {
  content: none;
  display: none;
}

.knowledge-focus-card {
  overflow: hidden;
}

.knowledge-document-card {
  display: block;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.knowledge-atlas-document-card {
  padding: 0;
}

.knowledge-focus-card-standalone,
.knowledge-sidebar-card-tab {
  height: 100%;
}

.knowledge-sidebar-card {
  height: 100%;
  overflow: hidden;
}

.knowledge-focus-card-modal,
.knowledge-sidebar-card-modal {
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.knowledge-focus-card-modal {
  padding: 20px 22px 22px;
}

.knowledge-sidebar-card-modal {
  padding: 18px;
  border-left: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-raised) 90%, var(--bg-overlay) 10%);
}

.knowledge-focus-card-modal-atlas-entry {
  padding: 20px 22px 22px;
}

.knowledge-sidebar-card-modal-atlas-entry {
  padding: 18px;
  border-left: 0;
  border-right: 1px solid var(--border-subtle);
}

.knowledge-sidebar-card-modal .knowledge-sidebar-shell {
  height: 100%;
}

.knowledge-atlas-document,
.knowledge-atlas-blocks {
  display: grid;
  gap: 12px;
}

.knowledge-workspace-doc-pane .knowledge-atlas-document {
  gap: 0;
}

.knowledge-atlas-document-inline {
  min-height: 0;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
}

.knowledge-atlas-document-inline .knowledge-atlas-blocks {
  min-height: 0;
  overflow: auto;
  align-content: start;
}

.knowledge-detail-document {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
}

.knowledge-detail-document-scroll {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: visible;
}

.knowledge-detail-document-block {
  min-width: 0;
  flex: 0 0 auto;
  margin: 0;
}

.knowledge-detail-document-block.active {
  border-color: color-mix(in srgb, var(--blue-border) 54%, var(--border-subtle) 46%);
  background: color-mix(in srgb, var(--blue-bg) 18%, var(--bg-raised) 82%);
}

.knowledge-detail-document-block .block-bar {
  align-items: center;
}

.knowledge-detail-block-focus {
  margin-left: auto;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent 18%);
  color: var(--text-muted);
  font: inherit;
  font-size: 10.5px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.knowledge-detail-block-focus:hover {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--blue-bg) 42%, var(--bg-raised) 58%);
  color: var(--blue);
}

.knowledge-detail-block-focus.active {
  border-color: color-mix(in srgb, var(--green) 36%, var(--border-subtle) 64%);
  background: color-mix(in srgb, var(--green-bg) 60%, var(--bg-raised) 40%);
  color: var(--green);
}

.knowledge-detail-outline-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.knowledge-detail-outline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.knowledge-detail-section-btn {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  padding-left: calc(12px + (var(--knowledge-section-depth, 0) * 14px));
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: color-mix(in srgb, var(--bg-overlay) 78%, transparent 22%);
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 6px;
  transition: border-color .15s, background .15s, transform .15s;
}

.knowledge-detail-section-btn:hover {
  border-color: color-mix(in srgb, var(--blue-border) 58%, var(--border-subtle) 42%);
  background: color-mix(in srgb, var(--blue-bg) 34%, var(--bg-overlay) 66%);
  transform: translateY(-1px);
}

.knowledge-detail-section-btn.active {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border-subtle) 66%);
  background: color-mix(in srgb, var(--green-bg) 44%, var(--bg-overlay) 56%);
}

.knowledge-detail-section-btn.recommended:not(.active) {
  border-color: color-mix(in srgb, var(--blue-border) 42%, var(--border-subtle) 58%);
}

.knowledge-detail-section-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.knowledge-detail-section-row strong {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}

.knowledge-detail-section-row span,
.knowledge-detail-section-summary {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}

.knowledge-detail-section-summary {
  display: block;
}

.knowledge-detail-section-btn-clear {
  padding-left: 12px;
}

.knowledge-detail-document .knowledge-section-actions > button {
  height: 38px;
  min-width: 84px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .15s, border-color .15s, background .15s, color .15s;
}

.knowledge-detail-document .knowledge-section-actions > button:hover {
  filter: brightness(1.05);
}

.knowledge-detail-document .knowledge-section-actions > button:active {
  transform: translateY(1px);
}

.knowledge-detail-document .knowledge-section-actions > button:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: none;
}

.knowledge-atlas-heading {
  padding: 18px 18px 0;
}

.knowledge-atlas-blocks {
  padding: 0 18px 18px;
}

.knowledge-workspace-doc-pane .knowledge-atlas-heading,
.knowledge-workspace-doc-pane .knowledge-atlas-blocks {
  padding: 0;
}

.knowledge-workspace-doc-pane .knowledge-atlas-heading {
  padding-bottom: 14px;
}

.knowledge-workspace-detail-pane .knowledge-focus-shell {
  min-height: 0;
  height: auto;
  overflow: visible;
}

.knowledge-atlas-detail-shell {
  min-height: 100%;
  min-width: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.knowledge-atlas-detail-shell > *,
.knowledge-focus-shell > *,
.knowledge-detail-document > *,
.knowledge-detail-document-scroll > * {
  min-width: 0;
}

.knowledge-atlas-detail-shell > .knowledge-section-head {
  min-width: 0;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.knowledge-atlas-detail-lead {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.knowledge-atlas-detail-lead strong {
  font-size: 14px;
  color: var(--text);
}

.knowledge-atlas-detail-lead span {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.knowledge-atlas-detail-title {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
}

.knowledge-atlas-detail-shell > .knowledge-section-head .knowledge-section-copy,
.knowledge-atlas-detail-shell > .knowledge-section-head .knowledge-section-actions {
  min-width: 0;
}

.knowledge-atlas-detail-shell > .knowledge-section-head .knowledge-section-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.knowledge-atlas-detail-shell > .knowledge-section-head .knowledge-section-copy strong,
.knowledge-atlas-detail-shell > .knowledge-section-head .knowledge-section-copy span,
.knowledge-atlas-detail-lead strong,
.knowledge-atlas-detail-lead span {
  overflow-wrap: anywhere;
}

.knowledge-section-head,
.knowledge-results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.knowledge-section-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.knowledge-section-copy strong,
.knowledge-results-head strong {
  font-size: 14px;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.knowledge-section-copy span,
.knowledge-results-head span {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

.knowledge-section-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

#btn-knowledge-refresh-related,
#btn-knowledge-search,
#btn-knowledge-clear-search,
#btn-knowledge-ask,
#btn-knowledge-clear-ask,
#btn-knowledge-refresh-index,
#btn-knowledge-rebuild-index,
#btn-knowledge-open-index,
#btn-knowledge-open-detail-atlas,
#btn-knowledge-open-related-atlas {
  height: 38px;
  min-width: 84px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .15s, border-color .15s, background .15s, color .15s;
}

#btn-knowledge-search {
  border-color: var(--blue-border);
  background: var(--blue-bg);
  color: var(--blue);
}

#btn-knowledge-ask {
  border-color: var(--blue-border);
  background: var(--blue-bg);
  color: var(--blue);
}

#btn-knowledge-refresh-index,
#btn-knowledge-open-index,
#btn-knowledge-open-detail-atlas,
#btn-knowledge-open-related-atlas {
  border-color: color-mix(in srgb, var(--border-subtle) 74%, var(--green) 26%);
  background: color-mix(in srgb, var(--green-bg) 68%, var(--bg-overlay) 32%);
  color: var(--green);
}

#btn-knowledge-rebuild-index {
  border-color: color-mix(in srgb, var(--border-subtle) 92%, transparent 8%);
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-overlay) 12%);
  color: var(--text-muted);
  font-weight: 500;
}

#btn-knowledge-refresh-related:hover,
#btn-knowledge-search:hover,
#btn-knowledge-clear-search:hover,
#btn-knowledge-ask:hover,
#btn-knowledge-clear-ask:hover,
#btn-knowledge-refresh-index:hover,
#btn-knowledge-open-index:hover,
#btn-knowledge-open-detail-atlas:hover,
#btn-knowledge-open-related-atlas:hover {
  filter: brightness(1.05);
}

#btn-knowledge-rebuild-index:hover {
  border-color: color-mix(in srgb, var(--border-subtle) 62%, #f85149 38%);
  background: color-mix(in srgb, rgba(248, 81, 73, .12) 72%, var(--bg-raised) 28%);
  color: #f85149;
  filter: none;
}

#btn-knowledge-refresh-related:active,
#btn-knowledge-search:active,
#btn-knowledge-clear-search:active,
#btn-knowledge-ask:active,
#btn-knowledge-clear-ask:active,
#btn-knowledge-refresh-index:active,
#btn-knowledge-rebuild-index:active,
#btn-knowledge-open-index:active,
#btn-knowledge-open-detail-atlas:active,
#btn-knowledge-open-related-atlas:active {
  transform: translateY(1px);
}

#btn-knowledge-refresh-related:disabled,
#btn-knowledge-search:disabled,
#btn-knowledge-clear-search:disabled,
#btn-knowledge-ask:disabled,
#btn-knowledge-clear-ask:disabled,
#btn-knowledge-refresh-index:disabled,
#btn-knowledge-rebuild-index:disabled,
#btn-knowledge-open-index:disabled,
#btn-knowledge-open-detail-atlas:disabled,
#btn-knowledge-open-related-atlas:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: none;
}

.knowledge-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.knowledge-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.knowledge-subnav.compact {
  gap: 6px;
}

.knowledge-subnav-atlas-entry {
  gap: 18px;
  align-items: center;
}

.knowledge-subnav-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 72%, transparent 28%);
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.knowledge-subnav-btn:hover,
.knowledge-subnav-btn.active {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--blue-bg) 72%, transparent 28%);
  color: var(--blue);
}

.knowledge-subnav-btn-atlas-entry {
  position: relative;
  height: auto;
  padding: 0 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
}

.knowledge-subnav-btn-atlas-entry::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 86%, transparent 14%);
  opacity: 0;
  transform: scaleX(.45);
  transform-origin: center;
  transition: opacity .15s, transform .15s;
}

.knowledge-subnav-btn-atlas-entry:hover,
.knowledge-subnav-btn-atlas-entry.active {
  border-color: transparent;
  background: transparent;
  color: var(--text);
}

.knowledge-subnav-btn-atlas-entry.active {
  color: var(--blue);
}

.knowledge-subnav-btn-atlas-entry:hover::after,
.knowledge-subnav-btn-atlas-entry.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.knowledge-toolbar-actions {
  display: flex;
  align-items: stretch;
}

.knowledge-sidebar-shell {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.knowledge-sidebar-top,
.knowledge-sidebar-scroll {
  min-height: 0;
  display: grid;
  gap: 12px;
}

.knowledge-atlas-entry-mode-row {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 2px 2px 0;
}

.knowledge-sidebar-scroll {
  overflow: auto;
  align-content: start;
  padding-right: 2px;
}

.knowledge-side-section {
  display: grid;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: var(--bg-overlay);
}

.knowledge-query-panel {
  background: var(--bg-overlay);
}

.knowledge-query-panel-atlas-entry {
  background: color-mix(in srgb, var(--bg-overlay) 68%, var(--bg-raised) 32%);
}

.knowledge-query-row {
  display: grid;
  gap: 10px;
}

.knowledge-query-actions,
.knowledge-side-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.knowledge-query-actions > button,
.knowledge-side-actions > button {
  flex: 1 1 120px;
}

.knowledge-query-actions-atlas-entry > button {
  flex: 0 0 auto;
  min-width: 96px;
}

.knowledge-side-note {
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-muted);
  word-break: break-word;
}

.knowledge-side-strip {
  display: grid;
  gap: 8px;
}

.knowledge-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: stretch;
}

#knowledge-search-input,
#knowledge-ask-input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
}

.knowledge-query-panel-atlas-entry #knowledge-search-input,
.knowledge-query-panel-atlas-entry #knowledge-ask-input {
  background: color-mix(in srgb, var(--bg-raised) 88%, var(--blue-bg) 12%);
  border-color: color-mix(in srgb, var(--border-subtle) 76%, var(--blue-border) 24%);
}

.knowledge-query-panel-atlas-entry #knowledge-ask-input.knowledge-ask-textarea-atlas-entry {
  height: auto;
  min-height: 112px;
  padding: 10px 12px 12px;
  line-height: 1.7;
  resize: vertical;
}

#knowledge-search-input:focus,
#knowledge-ask-input:focus {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

#knowledge-search-input:disabled,
#knowledge-ask-input:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.knowledge-overview-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 14px;
}

.knowledge-overview-column,
.knowledge-focus-shell {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.knowledge-focus-shell {
  overflow: auto;
}

.knowledge-overview-side {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

.knowledge-subsection,
.knowledge-evidence-list,
.knowledge-insight-grid {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.knowledge-overview-side > .knowledge-subsection {
  min-height: 0;
}

.knowledge-thread-list,
.knowledge-list {
  min-height: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  overflow: visible;
}

.knowledge-layout > .knowledge-card,
.knowledge-layout-detail > .knowledge-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.knowledge-list.compact {
  gap: 8px;
}

.knowledge-doc-card,
.knowledge-thread-card,
.knowledge-thread-hero,
.knowledge-digest-card {
  min-width: 0;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: color-mix(in srgb, var(--bg-overlay) 76%, transparent 24%);
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 8px;
  transition: border-color .15s, background .15s, transform .15s;
}

.knowledge-doc-card:hover,
.knowledge-thread-card:hover,
.knowledge-thread-hero:hover,
.knowledge-digest-card:hover {
  border-color: color-mix(in srgb, var(--blue-border) 58%, var(--border-subtle) 42%);
  background: color-mix(in srgb, var(--blue-bg) 34%, var(--bg-overlay) 66%);
  transform: translateY(-1px);
}

.knowledge-doc-card.active,
.knowledge-thread-card.active,
.knowledge-digest-card.active {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border-subtle) 66%);
  background: color-mix(in srgb, var(--green-bg) 44%, var(--bg-overlay) 56%);
}

.knowledge-thread-card.static {
  cursor: default;
}

.knowledge-thread-card.static:hover {
  border-color: color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: color-mix(in srgb, var(--bg-overlay) 76%, transparent 24%);
  transform: none;
}

.knowledge-doc-head,
.knowledge-thread-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.knowledge-section-head > *,
.knowledge-results-head > *,
.knowledge-doc-head > *,
.knowledge-thread-head > * {
  min-width: 0;
}

.knowledge-doc-head strong,
.knowledge-thread-head strong,
.knowledge-thread-hero-copy strong {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.knowledge-doc-meta,
.knowledge-doc-excerpt,
.knowledge-thread-head span,
.knowledge-thread-hero-copy span,
.knowledge-thread-samples {
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

.knowledge-thread-samples {
  display: grid;
  gap: 4px;
}

.knowledge-score-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue-bg) 78%, transparent 22%);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
}

.knowledge-chip-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 8px;
}

.knowledge-chip {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: color-mix(in srgb, var(--bg-raised) 80%, transparent 20%);
  color: var(--text);
  border-radius: 12px;
  padding: 9px 10px 10px;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, color .15s, background .15s, transform .15s;
}

.knowledge-chip.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.knowledge-chip-add {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 0;
}

.knowledge-chip-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  transition: color .15s, transform .15s;
}

.knowledge-chip-add svg {
  display: block;
  width: 18px;
  height: 18px;
}

.knowledge-chip-add:hover .knowledge-chip-add-icon {
  color: var(--blue);
  transform: scale(1.04);
}

.knowledge-chip-label {
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
}

.knowledge-chip-meta {
  align-self: start;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue-bg) 76%, transparent 24%);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.knowledge-chip:hover {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--blue-bg) 38%, transparent 62%);
  transform: translateY(-1px);
}

.knowledge-chip.static {
  cursor: default;
}

.knowledge-chip.static:hover {
  border-color: color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: color-mix(in srgb, var(--bg-raised) 80%, transparent 20%);
  transform: none;
}

.knowledge-chip:disabled {
  opacity: .56;
  cursor: not-allowed;
  transform: none;
}

.knowledge-scope-card {
  display: grid;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: var(--bg-overlay);
}

.knowledge-scope-chip {
  min-height: 29px;
  padding: 7px 11px;
  font-size: 11.5px;
}

.knowledge-scope-chip.included {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border-subtle) 76%);
  background: color-mix(in srgb, var(--green-bg) 58%, var(--bg-raised) 42%);
  color: var(--green);
}

.knowledge-scope-chip.included:hover {
  border-color: color-mix(in srgb, var(--green) 48%, var(--border-subtle) 52%);
  background: color-mix(in srgb, var(--green-bg) 72%, var(--bg-raised) 28%);
  color: var(--green);
}

.knowledge-scope-chip.excluded {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--border-subtle) 94%, transparent 6%);
  background: color-mix(in srgb, var(--bg-overlay) 78%, transparent 22%);
  color: var(--text-dim);
}

.knowledge-scope-chip.excluded:hover {
  border-color: color-mix(in srgb, #f85149 42%, var(--border-subtle) 58%);
  background: color-mix(in srgb, rgba(248, 81, 73, .12) 60%, var(--bg-overlay) 40%);
  color: #f85149;
}

.knowledge-inline-error {
  font-size: 11.5px;
  line-height: 1.6;
  color: #f85149;
}

.knowledge-bridge-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: var(--bg-overlay);
}

.knowledge-atlas-entry-empty {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 4px 0 0;
}

.knowledge-atlas-entry-empty-copy {
  display: grid;
  gap: 8px;
  max-width: 560px;
}

.knowledge-atlas-entry-empty-copy strong {
  font-size: 21px;
  line-height: 1.35;
  color: var(--text);
  font-weight: 600;
}

.knowledge-atlas-entry-empty-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-muted);
}

.knowledge-atlas-entry-empty-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.7;
}

.knowledge-relation-list {
  display: grid;
  gap: 10px;
}

.knowledge-relation-card {
  display: grid;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: color-mix(in srgb, var(--bg-overlay) 88%, transparent 12%);
}

.knowledge-relation-card.active {
  border-color: color-mix(in srgb, var(--green) 36%, var(--border-subtle) 64%);
  background: color-mix(in srgb, var(--green-bg) 34%, var(--bg-overlay) 66%);
}

.knowledge-relation-head,
.knowledge-relation-route {
  display: flex;
  align-items: center;
  gap: 8px;
}

.knowledge-relation-head {
  align-items: flex-start;
  justify-content: space-between;
}

.knowledge-relation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.knowledge-relation-route {
  flex-wrap: wrap;
  min-width: 0;
}

.knowledge-relation-node-btn,
.knowledge-relation-type-pill,
.knowledge-relation-action {
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
}

.knowledge-relation-node-btn {
  max-width: 100%;
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent 18%);
  color: var(--text);
  white-space: normal;
  word-break: break-word;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.knowledge-relation-node-btn:hover {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--blue-bg) 60%, var(--bg-raised) 40%);
  color: var(--blue);
}

.knowledge-relation-node-btn.active {
  border-color: color-mix(in srgb, var(--green) 36%, var(--border-subtle) 64%);
  background: color-mix(in srgb, var(--green-bg) 54%, var(--bg-raised) 46%);
  color: var(--green);
}

.knowledge-relation-arrow {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  color: var(--text-dim);
}

.knowledge-relation-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: color-mix(in srgb, var(--bg-raised) 76%, transparent 24%);
  color: var(--text-muted);
}

.knowledge-relation-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent 18%);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.knowledge-relation-action:hover {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--blue-bg) 46%, var(--bg-raised) 54%);
  color: var(--blue);
}

.knowledge-relation-action.active {
  border-color: color-mix(in srgb, var(--green) 36%, var(--border-subtle) 64%);
  background: color-mix(in srgb, var(--green-bg) 58%, var(--bg-raised) 42%);
  color: var(--green);
}

.knowledge-relation-type-pill.type-derived_from {
  border-color: color-mix(in srgb, var(--blue-border) 50%, var(--border-subtle) 50%);
  background: color-mix(in srgb, var(--blue-bg) 66%, var(--bg-raised) 34%);
  color: var(--blue);
}

.knowledge-relation-type-pill.type-cites {
  border-color: color-mix(in srgb, var(--green) 40%, var(--border-subtle) 60%);
  background: color-mix(in srgb, var(--green-bg) 62%, var(--bg-raised) 38%);
  color: var(--green);
}

.knowledge-relation-type-pill.type-contrasts_with {
  border-color: color-mix(in srgb, var(--orange, #e59f3a) 46%, var(--border-subtle) 54%);
  background: color-mix(in srgb, rgba(229, 159, 58, .18) 70%, var(--bg-raised) 30%);
  color: var(--orange, #e59f3a);
}

.knowledge-relation-type-pill.type-similar_to {
  border-color: color-mix(in srgb, var(--border-subtle) 72%, transparent 28%);
  background: color-mix(in srgb, var(--bg-raised) 86%, transparent 14%);
  color: var(--text-muted);
}

.knowledge-relation-strip {
  display: grid;
  gap: 8px;
}

.knowledge-relation-evidence-list {
  display: grid;
  gap: 8px;
}

.knowledge-relation-evidence-doc {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 5px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 86%, transparent 14%);
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent 18%);
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}

.knowledge-relation-evidence-doc:hover {
  border-color: color-mix(in srgb, var(--blue-border) 58%, var(--border-subtle) 42%);
  background: color-mix(in srgb, var(--blue-bg) 26%, var(--bg-raised) 74%);
  transform: translateY(-1px);
}

.knowledge-relation-evidence-doc.active {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border-subtle) 66%);
  background: color-mix(in srgb, var(--green-bg) 40%, var(--bg-raised) 60%);
}

.knowledge-relation-evidence-doc strong {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

.knowledge-relation-evidence-doc span,
.knowledge-relation-evidence-doc p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}

.knowledge-path-panel {
  gap: 12px;
}

.knowledge-inline-close {
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent 18%);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.knowledge-inline-close:hover {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--blue-bg) 44%, var(--bg-raised) 56%);
  color: var(--blue);
}

.knowledge-inline-close.is-active {
  border-color: color-mix(in srgb, var(--border-subtle) 72%, var(--green) 28%);
  background: color-mix(in srgb, var(--green-bg) 72%, var(--bg-raised) 28%);
  color: var(--green);
}

.knowledge-inline-close.is-active:hover,
.knowledge-inline-close.is-active:focus-visible {
  border-color: color-mix(in srgb, var(--border-subtle) 66%, var(--green) 34%);
  background: color-mix(in srgb, var(--green-bg) 78%, var(--bg-raised) 22%);
  color: var(--green);
}

.knowledge-inline-close.danger {
  border-color: color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent 18%);
  color: var(--text-muted);
}

.knowledge-inline-close.danger:hover,
.knowledge-inline-close.danger:focus-visible {
  border-color: var(--danger-border, #d47c73);
  background: color-mix(in srgb, var(--danger-bg, rgba(212, 124, 115, .2)) 82%, var(--bg-raised) 18%);
  color: var(--danger-text, #b65046);
}

.knowledge-inline-close:disabled,
.knowledge-inline-close.danger:disabled {
  opacity: .56;
  cursor: not-allowed;
}

.knowledge-query-row-stack {
  grid-template-columns: minmax(0, 1fr);
}

.knowledge-node-draft,
.knowledge-restore-card {
  display: grid;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: color-mix(in srgb, var(--bg-overlay) 90%, transparent 10%);
}

.knowledge-node-draft {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--blue-border) 36%, var(--border-subtle) 64%);
  background: color-mix(in srgb, var(--blue-bg) 22%, var(--bg-overlay) 78%);
}

.knowledge-node-draft-modal {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: grid;
  place-items: center;
  padding: 24px;
}

.knowledge-node-draft-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: color-mix(in srgb, rgba(0, 0, 0, .54) 78%, var(--bg) 22%);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.knowledge-node-draft-dialog {
  position: relative;
  z-index: 1;
  width: min(480px, calc(100vw - 48px));
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent 14%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-raised) 94%, var(--bg) 6%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .24);
}

.knowledge-node-draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
}

.knowledge-node-draft-title {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.knowledge-node-draft-title strong {
  font-size: 15px;
  line-height: 1.35;
  color: var(--text);
}

.knowledge-node-draft-head .knowledge-network-viewer-close {
  width: 28px;
  height: 28px;
}

.knowledge-node-draft-head .knowledge-network-viewer-close svg {
  width: 13px;
  height: 13px;
}

.knowledge-node-draft-dialog .knowledge-node-draft {
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.knowledge-node-peek-modal {
  position: fixed;
  inset: 0;
  z-index: 470;
  display: grid;
  place-items: center;
  padding: 20px;
}

.knowledge-node-peek-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: color-mix(in srgb, rgba(0, 0, 0, .58) 78%, var(--bg) 22%);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.knowledge-node-peek-dialog {
  position: relative;
  z-index: 1;
  width: min(960px, calc(100vw - 40px));
  max-width: 100%;
  height: min(82vh, 860px);
  min-height: min(560px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent 14%);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-raised) 96%, var(--bg) 4%);
  box-shadow: 0 28px 72px rgba(0, 0, 0, .28);
}

.knowledge-node-peek-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-raised) 92%, var(--bg) 8%);
}

.knowledge-node-peek-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 20px 20px;
  overflow: auto;
}

.knowledge-node-peek-body .knowledge-section-head {
  flex-wrap: nowrap;
}

.knowledge-node-peek-body .knowledge-section-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.knowledge-node-peek-body .knowledge-section-actions {
  flex: 0 0 176px;
  min-width: 176px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.knowledge-node-peek-body .knowledge-section-actions > .knowledge-inline-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.knowledge-node-peek-body > .knowledge-focus-shell {
  min-height: auto;
  overflow: visible;
}

.knowledge-node-peek-body > .knowledge-feedback {
  margin-bottom: 12px;
}

.knowledge-node-draft-note {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 24%, var(--border-subtle) 76%);
  background: color-mix(in srgb, var(--blue-bg) 22%, var(--bg-overlay) 78%);
}

.knowledge-node-draft-fields {
  display: grid;
  gap: 12px;
}

.knowledge-node-draft-field {
  display: grid;
  gap: 7px;
}

.knowledge-node-draft-field > span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

.knowledge-node-draft-actions {
  justify-content: flex-end;
}

.knowledge-node-draft-submit {
  min-width: 86px;
  border-color: color-mix(in srgb, var(--blue-border) 68%, transparent 32%);
  background: color-mix(in srgb, var(--blue-bg) 62%, var(--bg-raised) 38%);
  color: var(--blue);
}

.knowledge-node-draft-submit:hover {
  border-color: color-mix(in srgb, var(--blue-border) 82%, transparent 18%);
  background: color-mix(in srgb, var(--blue-bg) 74%, var(--bg-raised) 26%);
  color: var(--blue);
}

.knowledge-node-supplement-entry {
  justify-content: flex-end;
}

.knowledge-node-supplement-modal {
  position: fixed;
  inset: 0;
  z-index: 452;
  display: grid;
  place-items: center;
  padding: 24px;
}

.knowledge-node-supplement-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: color-mix(in srgb, rgba(0, 0, 0, .58) 78%, var(--bg) 22%);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.knowledge-node-supplement-dialog {
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 48px));
  min-height: 560px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-raised) 94%, var(--bg) 6%);
  box-shadow: 0 24px 72px rgba(0, 0, 0, .28);
}

.knowledge-node-supplement-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
}

.knowledge-node-supplement-title {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.knowledge-node-supplement-title strong {
  font-size: 15px;
  line-height: 1.35;
  color: var(--text);
}

.knowledge-node-supplement-title span {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.knowledge-node-supplement-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
  gap: 16px;
}

.knowledge-node-supplement-side,
.knowledge-node-supplement-main {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.knowledge-node-supplement-main {
  padding-left: 16px;
  border-left: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
}

.knowledge-node-supplement-search {
  display: grid;
  gap: 10px;
}

.knowledge-node-supplement-limit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.knowledge-node-supplement-limit-row > span {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
}

.knowledge-node-supplement-limit-options {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.knowledge-node-supplement-limit {
  min-width: 34px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-overlay) 88%, transparent 12%);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.knowledge-node-supplement-limit:hover {
  border-color: var(--blue-border);
  color: var(--blue);
}

.knowledge-node-supplement-limit.active {
  border-color: color-mix(in srgb, var(--blue-border) 82%, transparent 18%);
  background: color-mix(in srgb, var(--blue-bg) 62%, var(--bg-overlay) 38%);
  color: var(--blue);
}

.knowledge-node-supplement-limit:disabled {
  opacity: .56;
  cursor: not-allowed;
}

.knowledge-node-supplement-query-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

#btn-knowledge-node-supplement-search {
  height: 38px;
  min-width: 76px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent 18%);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}

#btn-knowledge-node-supplement-search:hover {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--blue-bg) 38%, var(--bg-raised) 62%);
  color: var(--blue);
}

#btn-knowledge-node-supplement-search:active {
  transform: translateY(1px);
}

#btn-knowledge-node-supplement-search:disabled {
  opacity: .56;
  cursor: not-allowed;
  transform: none;
}

.knowledge-node-supplement-results {
  min-height: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  overflow: auto;
  padding-right: 2px;
}

.knowledge-node-supplement-result {
  text-align: left;
  display: grid;
  gap: 7px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: color-mix(in srgb, var(--bg-overlay) 88%, transparent 12%);
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}

.knowledge-node-supplement-result:hover {
  border-color: color-mix(in srgb, var(--blue-border) 54%, var(--border-subtle) 46%);
  background: color-mix(in srgb, var(--blue-bg) 22%, var(--bg-overlay) 78%);
  transform: translateY(-1px);
}

.knowledge-node-supplement-result.active {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border-subtle) 66%);
  background: color-mix(in srgb, var(--green-bg) 34%, var(--bg-overlay) 66%);
}

.knowledge-node-supplement-result:disabled {
  transform: none;
  cursor: default;
}

.knowledge-node-supplement-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.knowledge-node-supplement-result-head strong {
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
}

.knowledge-node-supplement-result-meta {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

.knowledge-node-supplement-result p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.knowledge-node-supplement-result-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue-bg) 72%, transparent 28%);
  color: var(--blue);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.knowledge-node-supplement-result-state.is-imported {
  background: color-mix(in srgb, var(--yellow-bg) 72%, transparent 28%);
  color: var(--yellow);
}

.knowledge-node-supplement-result-state.is-processing {
  background: color-mix(in srgb, var(--blue-bg) 84%, transparent 16%);
  color: var(--blue);
}

.knowledge-node-supplement-result-state.is-linked {
  background: color-mix(in srgb, var(--green-bg) 72%, transparent 28%);
  color: var(--green);
}

.knowledge-node-supplement-preview-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.knowledge-node-supplement-preview-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
}

.knowledge-node-supplement-preview-empty strong {
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}

.knowledge-node-supplement-preview-empty p {
  max-width: 420px;
  margin: 0;
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-muted);
}

.knowledge-node-supplement-field {
  display: grid;
  gap: 7px;
}

.knowledge-node-supplement-field > span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

.knowledge-node-supplement-preview-card,
.knowledge-node-supplement-preview-note {
  display: grid;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: color-mix(in srgb, var(--bg-overlay) 88%, transparent 12%);
}

.knowledge-node-supplement-markdown {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: color-mix(in srgb, var(--bg-overlay) 88%, transparent 12%);
  color: var(--text);
  font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.knowledge-node-supplement-preview-actions {
  justify-content: flex-end;
}

.knowledge-node-supplement-link {
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent 18%);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color .15s, background .15s, color .15s;
}

.knowledge-node-supplement-link:hover {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--blue-bg) 44%, var(--bg-raised) 56%);
  color: var(--blue);
}

.knowledge-restore-card {
  align-content: start;
}

#knowledge-node-add-label,
#knowledge-node-add-aliases,
#knowledge-node-supplement-query,
#knowledge-node-supplement-title {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-raised) 82%, var(--bg) 18%);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

#knowledge-node-add-label:focus,
#knowledge-node-add-aliases:focus,
#knowledge-node-supplement-query:focus,
#knowledge-node-supplement-title:focus {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px var(--blue-bg);
  background: color-mix(in srgb, var(--bg-raised) 90%, var(--bg) 10%);
}

#knowledge-node-add-label:disabled,
#knowledge-node-add-aliases:disabled,
#knowledge-node-supplement-query:disabled,
#knowledge-node-supplement-title:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.knowledge-path-summary,
.knowledge-path-hop-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: color-mix(in srgb, var(--bg-overlay) 88%, transparent 12%);
}

.knowledge-path-hop-list {
  display: grid;
  gap: 10px;
}

.knowledge-path-hop-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.knowledge-path-hop-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue-bg) 76%, transparent 24%);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.knowledge-network-card {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
}

.knowledge-network-card.is-fullscreen {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.knowledge-network-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 280px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: var(--bg);
}

.knowledge-network-stage.is-fullscreen {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
}

.knowledge-network-svg,
.knowledge-network-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.knowledge-network-svg {
  pointer-events: none;
}

.knowledge-network-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: color-mix(in srgb, var(--bg-raised) 84%, transparent 16%);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}

.knowledge-network-expand:hover {
  border-color: var(--blue-border);
  background: color-mix(in srgb, var(--blue-bg) 50%, var(--bg-raised) 50%);
  color: var(--blue);
  transform: translateY(-1px);
}

.knowledge-network-expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.knowledge-network-expand-icon svg {
  width: 14px;
  height: 14px;
}

.knowledge-network-edge {
  fill: none;
  stroke: color-mix(in srgb, var(--border-subtle) 70%, transparent 30%);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .86;
}

.knowledge-network-edge.type-focus-link {
  stroke: color-mix(in srgb, var(--blue-border) 72%, transparent 28%);
  stroke-width: 2;
}

.knowledge-network-edge.type-ask-thread,
.knowledge-network-edge.type-ask-document {
  stroke: color-mix(in srgb, var(--blue-border) 58%, var(--border-subtle) 42%);
}

.knowledge-network-edge.type-ask-node,
.knowledge-network-edge.type-node-thread,
.knowledge-network-edge.type-entity-document,
.knowledge-network-edge.type-node-document {
  stroke: color-mix(in srgb, var(--green) 44%, var(--border-subtle) 56%);
}

.knowledge-network-edge.type-node-node,
.knowledge-network-edge.type-document-document {
  stroke: color-mix(in srgb, var(--orange, #e59f3a) 50%, var(--border-subtle) 50%);
  stroke-dasharray: 5 5;
}

.knowledge-network-edge.type-relation-derived_from {
  stroke: color-mix(in srgb, var(--blue-border) 78%, transparent 22%);
  stroke-width: 2.1;
}

.knowledge-network-edge.type-relation-cites {
  stroke: color-mix(in srgb, var(--green) 62%, var(--border-subtle) 38%);
  stroke-width: 1.9;
}

.knowledge-network-edge.type-relation-contrasts_with {
  stroke: color-mix(in srgb, var(--orange, #e59f3a) 72%, var(--border-subtle) 28%);
  stroke-width: 2;
  stroke-dasharray: 7 5;
}

.knowledge-network-edge.type-relation-similar_to {
  stroke: color-mix(in srgb, var(--text-dim) 56%, var(--border-subtle) 44%);
  stroke-width: 1.7;
  stroke-dasharray: 4 6;
}

.knowledge-network-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 2px;
  min-width: 88px;
  max-width: 168px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: var(--bg-raised);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
}

.knowledge-network-node:hover {
  transform: translate(-50%, calc(-50% - 1px));
  box-shadow: 0 16px 30px rgba(0, 0, 0, .16);
}

.knowledge-network-node.root,
.knowledge-network-node.active {
  border-color: color-mix(in srgb, var(--blue-border) 56%, var(--border-subtle) 44%);
  background: color-mix(in srgb, var(--blue-bg) 38%, var(--bg-overlay) 62%);
}

.knowledge-network-node.thread {
  border-color: color-mix(in srgb, var(--blue-border) 48%, var(--border-subtle) 52%);
}

.knowledge-network-node.ask {
  border-color: color-mix(in srgb, var(--blue-border) 54%, var(--border-subtle) 46%);
  background: color-mix(in srgb, var(--blue-bg) 28%, var(--bg-overlay) 72%);
}

.knowledge-network-node.node,
.knowledge-network-node.entity {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border-subtle) 66%);
}

.knowledge-network-node.node.no-atlas-page,
.knowledge-network-node.entity.no-atlas-page {
  border-color: color-mix(in srgb, var(--yellow) 56%, var(--border-subtle) 44%);
}

.knowledge-network-node.document {
  max-width: 154px;
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent 12%);
}

.knowledge-network-node-kicker {
  font-size: 9.5px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim, var(--text-muted));
}

.knowledge-network-node strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text);
}

.knowledge-network-node span:last-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
}

.knowledge-network-viewer-open {
  overflow: hidden;
}

.knowledge-network-viewer {
  position: fixed;
  inset: 0;
  z-index: 460;
  display: grid;
  padding: 0;
  background: color-mix(in srgb, rgba(0, 0, 0, .64) 78%, var(--bg) 22%);
  backdrop-filter: blur(6px);
}

.knowledge-network-viewer-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.knowledge-network-viewer-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-raised) 92%, var(--bg) 8%);
}

.knowledge-network-viewer-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.knowledge-network-viewer-copy strong {
  font-size: 15px;
  color: var(--text);
}

.knowledge-network-viewer-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, opacity .15s;
}

.knowledge-network-viewer-back:hover {
  color: var(--text);
}

.knowledge-network-viewer-back:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue-border) 82%, transparent 18%);
  outline-offset: 4px;
  border-radius: 4px;
}

.knowledge-network-viewer-back svg {
  width: 13px;
  height: 13px;
  display: block;
}

.knowledge-network-viewer-back span {
  color: inherit;
  font-size: inherit;
  line-height: 1;
}

.knowledge-network-viewer-copy span {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.knowledge-network-viewer-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, background .15s, color .15s;
}

.knowledge-network-viewer-close:hover {
  border-color: var(--border);
  background: var(--bg-overlay);
  color: var(--text);
}

.knowledge-network-viewer-close svg {
  display: block;
  width: 14px;
  height: 14px;
}

.knowledge-network-viewer-close:focus-visible {
  outline: none;
  border-color: var(--blue-border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-bg) 50%, transparent);
}

.knowledge-network-viewer-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.knowledge-network-viewer-body > .knowledge-network-card {
  flex: 1 1 auto;
  min-height: 0;
}

.knowledge-network-viewer-body .knowledge-chip-row {
  flex: 0 0 auto;
  align-self: stretch;
}

.knowledge-word-cloud-viewer-body {
  padding: 0;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--blue-bg) 28%, transparent 72%) 0, transparent 34%),
    radial-gradient(circle at right 18% bottom 18%, color-mix(in srgb, var(--green-bg) 24%, transparent 76%) 0, transparent 30%),
    var(--bg);
}

.knowledge-word-cloud-viewer-body > .knowledge-network-card.is-fullscreen {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 20px 20px;
}

.knowledge-word-cloud-stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 18px 20px 20px;
  display: grid;
}

.knowledge-word-cloud-loading {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}

.knowledge-word-cloud-loading .loading-row {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: color-mix(in srgb, var(--bg-overlay) 88%, transparent 12%);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.knowledge-word-cloud-canvas {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 320px;
}

.knowledge-word-cloud-canvas.is-loading {
  opacity: 0;
}

.knowledge-word-cloud-empty {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: grid;
  place-items: center;
}

.knowledge-status-panel {
  gap: 12px;
}

.knowledge-status-group {
  display: grid;
  gap: 8px;
}

.knowledge-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.knowledge-status-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.knowledge-status-item {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 86%, transparent 14%);
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent 18%);
}

.knowledge-status-item.has-action {
  padding-right: 34px;
}

.knowledge-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.knowledge-status-item.success {
  border-color: color-mix(in srgb, var(--green) 36%, var(--border-subtle) 64%);
  background: color-mix(in srgb, var(--green-bg) 40%, var(--bg-raised) 60%);
}

.knowledge-status-item.danger {
  border-color: color-mix(in srgb, #f85149 34%, var(--border-subtle) 66%);
  background: color-mix(in srgb, rgba(248, 81, 73, .14) 58%, var(--bg-raised) 42%);
}

.knowledge-status-label {
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--text-dim);
}

.knowledge-status-action {
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, opacity .15s;
}

.knowledge-status-action:hover {
  color: var(--text);
}

.knowledge-status-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue-border) 82%, transparent 18%);
  outline-offset: 4px;
  border-radius: 4px;
}

.knowledge-status-action svg {
  display: block;
  width: 16px;
  height: 16px;
}

.knowledge-status-value {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

.knowledge-inline-note {
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  background: color-mix(in srgb, var(--bg-raised) 80%, transparent 20%);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.knowledge-inline-note.success {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border-subtle) 72%);
  background: color-mix(in srgb, var(--green-bg) 42%, var(--bg-raised) 58%);
  color: var(--green);
}

.knowledge-inline-note.error {
  border-color: color-mix(in srgb, #f85149 30%, var(--border-subtle) 70%);
  background: color-mix(in srgb, rgba(248, 81, 73, .12) 52%, var(--bg-raised) 48%);
  color: #f85149;
}

.knowledge-evidence-card {
  display: grid;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent 12%);
  background: var(--bg-overlay);
}

.knowledge-evidence-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.knowledge-evidence-head strong {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}

.knowledge-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.knowledge-evidence-doc {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 86%, transparent 14%);
  background: color-mix(in srgb, var(--bg-raised) 78%, transparent 22%);
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}

.knowledge-evidence-doc:hover {
  border-color: color-mix(in srgb, var(--blue-border) 60%, var(--border-subtle) 40%);
  background: color-mix(in srgb, var(--blue-bg) 28%, var(--bg-raised) 72%);
  transform: translateY(-1px);
}

.knowledge-evidence-doc.active {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border-subtle) 66%);
  background: color-mix(in srgb, var(--green-bg) 42%, var(--bg-raised) 58%);
}

.knowledge-evidence-doc strong {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

.knowledge-evidence-doc span,
.knowledge-evidence-doc p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.knowledge-mini-label {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.knowledge-thread-hero-copy {
  display: grid;
  gap: 4px;
}

.knowledge-feedback,
.knowledge-empty {
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.7;
}

.knowledge-feedback {
  border: 1px solid rgba(248, 81, 73, .28);
  background: color-mix(in srgb, var(--bg-overlay) 52%, rgba(248,81,73,.16) 48%);
  color: #f85149;
}

.knowledge-feedback.success {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-color: color-mix(in srgb, var(--green) 26%, transparent 74%);
  background: color-mix(in srgb, var(--green-bg) 58%, var(--bg-overlay) 42%);
  color: var(--green);
}

.knowledge-feedback.note {
  border-color: color-mix(in srgb, var(--blue-border) 24%, transparent 76%);
  background: color-mix(in srgb, var(--blue-bg) 42%, var(--bg-overlay) 58%);
  color: var(--text);
}

.knowledge-empty {
  border: 1px dashed var(--border-subtle);
  background: color-mix(in srgb, var(--bg-overlay) 72%, transparent 28%);
  color: var(--text-dim);
}

.knowledge-empty.compact {
  padding: 16px;
}

.knowledge-workspace-doc-pane > .knowledge-empty.compact,
.knowledge-workspace-doc-pane > .knowledge-feedback.compact,
.knowledge-workspace-detail-pane > .knowledge-empty.compact,
.knowledge-workspace-detail-pane > .knowledge-feedback.compact,
.knowledge-workspace-detail-scroll > .knowledge-empty.compact,
.knowledge-workspace-detail-scroll > .knowledge-feedback.compact {
  flex: 0 0 auto;
  min-height: auto;
  width: auto;
  max-width: min(320px, 100%);
  margin: auto;
  align-self: center;
}

@media (max-width: 1120px) {
  .knowledge-layout,
  .knowledge-layout-detail,
  .knowledge-overview-grid,
  .knowledge-modal-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-layout,
  .knowledge-layout-detail {
    height: auto;
    grid-template-rows: auto;
  }

  .knowledge-workspace-panes {
    flex-direction: column;
  }

  .knowledge-workspace-doc-pane,
  .knowledge-workspace-detail-pane {
    width: 100%;
  }

  .knowledge-workspace-doc-pane {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .knowledge-focus-card {
    max-height: none;
  }

  .knowledge-sidebar-card-modal {
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
  }

  .knowledge-sidebar-card-modal-atlas-entry {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-top: 0;
  }

  .knowledge-node-supplement-dialog {
    width: min(100vw - 32px, 960px);
  }

  .knowledge-node-supplement-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-node-supplement-limit-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .knowledge-node-supplement-main {
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  }
}

@media (max-width: 680px) {
  .knowledge-shell {
    padding: 14px;
  }

  .knowledge-network-expand {
    padding: 0 9px;
  }

  .knowledge-network-expand span:last-child {
    display: none;
  }

  .knowledge-network-viewer-bar,
  .knowledge-network-viewer-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .knowledge-workspace-doc-pane,
  .knowledge-workspace-detail-pane {
    padding: 18px 16px;
  }

  .knowledge-scene-header {
    display: grid;
  }

  .knowledge-query-actions,
  .knowledge-side-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-toolbar,
  .knowledge-search-row,
  .knowledge-evidence-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-relation-head {
    display: grid;
    gap: 10px;
  }

  .knowledge-path-hop-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-feedback.success {
    flex-direction: column;
    align-items: stretch;
  }

  .knowledge-focus-card-modal,
  .knowledge-sidebar-card-modal {
    padding: 16px;
  }

  .knowledge-node-supplement-modal {
    padding: 12px;
  }

  .knowledge-node-peek-modal {
    padding: 12px;
  }

  .knowledge-node-peek-dialog {
    width: min(100vw - 24px, 100%);
    height: min(100vh - 24px, 100%);
    min-height: 0;
  }

  .knowledge-node-peek-head,
  .knowledge-node-peek-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .knowledge-node-supplement-dialog {
    width: min(100vw - 24px, 100%);
    height: min(100vh - 24px, 100%);
    min-height: 0;
    padding: 14px;
  }

  .knowledge-node-supplement-preview-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

}

.knowledge-limit-settings-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.knowledge-limit-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.knowledge-limit-settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.knowledge-limit-settings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.knowledge-limit-settings-label {
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.3;
}

.knowledge-limit-settings-range {
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.2;
  white-space: nowrap;
}

.knowledge-limit-settings-input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-overlay) 78%, var(--bg-raised) 22%);
  color: var(--text);
  font: inherit;
  line-height: 1.2;
  box-sizing: border-box;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.knowledge-limit-settings-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
  background: color-mix(in srgb, var(--bg) 82%, var(--bg-overlay) 18%);
}

.knowledge-limit-settings-input:disabled {
  opacity: .72;
  cursor: wait;
}

.knowledge-limit-settings-description {
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

#action-modal[data-action="arxiv-radar"] .action-modal-shell {
  width: min(1240px, calc(100vw - 32px));
  height: min(900px, calc(100vh - 48px));
}

#action-modal[data-action="arxiv-radar"] #action-modal-body {
  overflow: auto;
}

.arxiv-radar-layout {
  min-height: 100%;
  padding: 18px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--blue) 15%, transparent), transparent 28%),
    radial-gradient(circle at bottom right, color-mix(in srgb, #d98e4a 14%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 94%, var(--bg-overlay) 6%), var(--bg-raised));
}

.arxiv-radar-shell {
  display: grid;
  gap: 16px;
}

.arxiv-radar-card,
.arxiv-radar-results-card,
.arxiv-radar-empty {
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent 16%);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 46%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg-raised) 94%, var(--bg-overlay) 6%);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}

.arxiv-radar-card,
.arxiv-radar-results-card {
  padding: 18px;
}

.arxiv-radar-empty {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 24px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.75;
}

.arxiv-radar-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 120px auto;
  gap: 12px;
  align-items: end;
}

.arxiv-radar-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.arxiv-radar-field-limit {
  max-width: 120px;
}

.arxiv-radar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-dim);
}

.arxiv-radar-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-overlay) 78%, var(--bg-raised) 22%);
  color: var(--text);
  font: inherit;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.arxiv-radar-picker {
  position: relative;
}

.arxiv-radar-picker-trigger {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-overlay) 78%, var(--bg-raised) 22%);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.arxiv-radar-picker-trigger:hover {
  border-color: color-mix(in srgb, var(--blue-border) 38%, transparent 62%);
}

.arxiv-radar-picker.open .arxiv-radar-picker-trigger,
.arxiv-radar-picker-trigger:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
  background: color-mix(in srgb, var(--bg) 84%, var(--bg-overlay) 16%);
}

.arxiv-radar-picker-trigger:disabled {
  opacity: .72;
  cursor: wait;
}

.arxiv-radar-picker-icon {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 1.35px solid currentColor;
  border-bottom: 1.35px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  opacity: .72;
  transition: transform .15s ease;
}

.arxiv-radar-picker.open .arxiv-radar-picker-icon {
  transform: translateY(1px) rotate(-135deg);
}

.arxiv-radar-picker-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 12;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 38%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg-raised) 94%, var(--bg-overlay) 6%);
  box-shadow: 0 18px 34px rgba(0,0,0,.22);
}

.arxiv-radar-picker-option {
  min-height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}

.arxiv-radar-picker-option:hover {
  background: color-mix(in srgb, var(--bg-overlay) 82%, var(--bg-raised) 18%);
  color: var(--text);
  transform: translateY(-1px);
}

.arxiv-radar-picker-option.active {
  background: color-mix(in srgb, var(--blue-bg) 62%, var(--bg-raised) 38%);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue-border) 30%, transparent 70%);
}

.arxiv-radar-field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
  background: color-mix(in srgb, var(--bg) 84%, var(--bg-overlay) 16%);
}

.arxiv-radar-field input:disabled {
  opacity: .72;
  cursor: wait;
}

.arxiv-radar-runbar {
  display: flex;
  justify-content: flex-end;
}

#btn-arxiv-radar-search,
.arxiv-radar-save-btn,
.arxiv-radar-topic-chip {
  min-height: 42px;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s, color .15s;
}

#btn-arxiv-radar-search,
.arxiv-radar-save-btn {
  padding: 0 16px;
  border: 1px solid transparent;
  cursor: pointer;
}

#btn-arxiv-radar-search {
  background: color-mix(in srgb, var(--blue) 88%, white 12%);
  color: #fff;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--blue) 22%, transparent);
}

.arxiv-radar-save-btn {
  background: color-mix(in srgb, #1e7a46 84%, white 16%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(30,122,70,.18);
}

#btn-arxiv-radar-search:hover,
.arxiv-radar-save-btn:hover,
.arxiv-radar-topic-chip:hover {
  transform: translateY(-1px);
}

#btn-arxiv-radar-search:disabled,
.arxiv-radar-save-btn:disabled,
.arxiv-radar-topic-chip:disabled {
  opacity: .56;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.arxiv-radar-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.arxiv-radar-topic-chip {
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 36%, transparent 64%);
  background: color-mix(in srgb, var(--blue-bg) 68%, var(--bg-raised) 32%);
  color: var(--text);
  cursor: pointer;
}

.arxiv-radar-feedback {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-overlay) 82%, transparent 18%);
}

.arxiv-radar-feedback.is-loading {
  color: var(--text);
}

.arxiv-radar-feedback.is-error {
  color: #f7b3ad;
  background: color-mix(in srgb, rgba(248,81,73,.18) 74%, var(--bg-overlay) 26%);
}

.arxiv-radar-feedback.is-success {
  color: #dcffe9;
  border: 1px solid color-mix(in srgb, rgba(46,160,67,.42) 78%, transparent 22%);
  background: color-mix(in srgb, rgba(20,86,45,.78) 76%, var(--bg-overlay) 24%);
}

.arxiv-radar-feedback.is-info {
  color: var(--text);
}

.arxiv-radar-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.arxiv-radar-chip,
.arxiv-radar-category-chip,
.arxiv-radar-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
}

.arxiv-radar-chip,
.arxiv-radar-category-chip,
.arxiv-radar-badge {
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent 20%);
  background: color-mix(in srgb, var(--bg-overlay) 78%, transparent 22%);
  color: var(--text-muted);
}

.arxiv-radar-badge.accent {
  border-color: color-mix(in srgb, var(--blue-border) 36%, transparent 64%);
  background: color-mix(in srgb, var(--blue-bg) 70%, var(--bg-raised) 30%);
  color: var(--text);
}

.arxiv-radar-badge.success {
  border-color: color-mix(in srgb, #2ea043 44%, transparent 56%);
  background: color-mix(in srgb, rgba(46,160,67,.22) 74%, var(--bg-raised) 26%);
  color: #9fe1b5;
}

.arxiv-radar-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.arxiv-radar-results-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.arxiv-radar-results-copy strong {
  font-size: 15px;
  color: var(--text);
}

.arxiv-radar-results-copy span {
  color: var(--text-muted);
  font-size: 12px;
}

.arxiv-radar-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.arxiv-radar-page-btn {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent 18%);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-overlay) 82%, transparent 18%);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s, color .15s;
}

.arxiv-radar-page-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--blue-border) 44%, transparent 56%);
  background: color-mix(in srgb, var(--blue-bg) 54%, var(--bg-overlay) 46%);
}

.arxiv-radar-page-btn:disabled {
  opacity: .56;
  cursor: not-allowed;
  transform: none;
}

.arxiv-radar-page-text {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.arxiv-radar-results-list {
  display: grid;
  gap: 12px;
}

.arxiv-radar-item {
  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, transparent 18%);
  border-radius: 16px;
  padding: 15px 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 34%, transparent), transparent 72%),
    color-mix(in srgb, var(--bg-overlay) 74%, var(--bg-raised) 26%);
  display: grid;
  gap: 12px;
}

.arxiv-radar-item.is-saved {
  border-color: color-mix(in srgb, #2ea043 34%, var(--border-subtle) 66%);
}

.arxiv-radar-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.arxiv-radar-item-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.arxiv-radar-item-copy strong {
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
}

.arxiv-radar-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--text-muted);
  font-size: 12px;
}

.arxiv-radar-item-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-self: flex-start;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.arxiv-radar-item-summary {
  color: var(--text);
  font-size: 13px;
  line-height: 1.75;
}

.arxiv-radar-item-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
}

.arxiv-radar-item-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.arxiv-radar-item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.arxiv-radar-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent 18%);
  color: var(--text);
  text-decoration: none;
  background: color-mix(in srgb, var(--bg-overlay) 78%, transparent 22%);
}

.arxiv-radar-link:hover {
  border-color: color-mix(in srgb, var(--blue-border) 44%, transparent 56%);
  color: var(--text);
}

@media (max-width: 1024px) {
  .arxiv-radar-entry-grid {
    grid-template-columns: minmax(0, 1fr) 150px 120px;
  }

  .arxiv-radar-runbar {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .arxiv-radar-item-head,
  .arxiv-radar-item-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .arxiv-radar-results-head {
    flex-direction: column;
    align-items: stretch;
  }

  .arxiv-radar-item-badges,
  .arxiv-radar-item-actions {
    justify-content: flex-start;
  }

  .arxiv-radar-pagination {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .arxiv-radar-layout {
    padding: 14px;
  }

  .arxiv-radar-card,
  .arxiv-radar-results-card {
    padding: 14px;
  }

  .arxiv-radar-entry-grid {
    grid-template-columns: 1fr;
  }

  .arxiv-radar-field-limit {
    max-width: none;
  }
}