/* [project]/apps/web/src/app/globals.css [app-client] (css) */
:root {
  --ds-bg: #f9fafb;
  --ds-content-bg: #f9fafb;
  --ds-surface: #fff;
  --ds-surface-subtle: #f3f4f6;
  --ds-border: #e5e7eb;
  --ds-border-subtle: #0000000d;
  --ds-border-hover: #d1d5db;
  --ds-ink: #111827;
  --ds-ink-muted: #4b5563;
  --ds-ink-light: #9ca3af;
  --ds-brand: #4a7c59;
  --ds-brand-soft: #edf5f0;
  --ds-brand-hover: #3a6447;
  --ds-brand-gold: #ffe3a8;
  --ds-data-did: #479095;
  --ds-data-bad: #dc5f54;
  --ds-data-thinking: #6b7c8d;
  --ds-mood-1: #e06c62;
  --ds-mood-2: #e09453;
  --ds-mood-3: #7b8e9d;
  --ds-mood-4: #52a3a8;
  --ds-mood-5: #58a068;
  --ds-mood-1-soft: #fdf2f1;
  --ds-mood-1-border: #f7d7d4;
  --ds-mood-2-soft: #fdf6f0;
  --ds-mood-2-border: #f8e5d3;
  --ds-mood-3-soft: #f2f4f6;
  --ds-mood-3-border: #e1e5e9;
  --ds-mood-4-soft: #f0f8f8;
  --ds-mood-4-border: #d2ebeb;
  --ds-mood-5-soft: #f0f7f2;
  --ds-mood-5-border: #d3e9d7;
  --ds-danger: #c66e5b;
  --ds-danger-soft: #fff1ed;
  --ds-tag-topic-bg: #edf5f0;
  --ds-tag-topic-text: #2d5a3f;
  --ds-tag-topic-border: #d6e8dc;
  --ds-badge-think-bg: #f3f5f7;
  --ds-badge-think-text: #4b5563;
  --ds-badge-think-border: #e2e6ea;
  --ds-badge-did-bg: #eef6f7;
  --ds-badge-did-text: #2a686c;
  --ds-badge-did-border: #cde4e6;
  --ds-font-size-caption: 12.5px;
  --ds-font-size-body: 14.5px;
  --ds-font-size-title: 16px;
  --ds-font-size-header: 22px;
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-pill: 9999px;
  --ds-shadow-card: 0 1px 2px 0 #00000008;
  --ds-shadow-hover: 0 2px 8px -1px #0000000f;
  --ds-shadow-floating: 0 10px 25px -5px #00000014;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 68px;
  --context-width: 320px;
  --tabbar-height: 64px;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Segoe UI", Roboto, sans-serif;
}

html[data-theme="sunset"] {
  --ds-brand: #d96b43;
  --ds-brand-soft: #fdf3ef;
  --ds-brand-hover: #b8522b;
  --ds-tag-topic-bg: #fdf3ef;
  --ds-tag-topic-text: #b8522b;
  --ds-tag-topic-border: #f8ded4;
}

html[data-theme="walnut"] {
  --ds-brand: #8c533e;
  --ds-brand-soft: #faf2ee;
  --ds-brand-hover: #693c2a;
  --ds-tag-topic-bg: #faf2ee;
  --ds-tag-topic-text: #693c2a;
  --ds-tag-topic-border: #f1ded5;
}

html[data-theme="mulberry"] {
  --ds-brand: #704e72;
  --ds-brand-soft: #f7f2f8;
  --ds-brand-hover: #523654;
  --ds-tag-topic-bg: #f7f2f8;
  --ds-tag-topic-text: #523654;
  --ds-tag-topic-border: #eddfe0;
}

html[data-theme="blue"] {
  --ds-brand: #3b71b1;
  --ds-brand-soft: #edf4fc;
  --ds-brand-hover: #2d5b92;
  --ds-tag-topic-bg: #edf4fc;
  --ds-tag-topic-text: #2d5b92;
  --ds-tag-topic-border: #dbe8fa;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ds-content-bg);
  color: var(--ds-ink);
  font-family: var(--font-sans);
  letter-spacing: -.015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
}

body {
  background: var(--ds-content-bg);
  min-width: 320px;
  color: var(--ds-ink);
  letter-spacing: -.015em;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  text-align: inherit;
  background: none;
  border: 0;
  padding: 0;
}

svg {
  flex-shrink: 0;
  display: block;
}

h1, h2, h3, p {
  overflow-wrap: anywhere;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

input:focus-visible, textarea:focus-visible {
  outline: none;
}

.ui-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-card);
  transition: border-color .15s, box-shadow .15s;
}

.ui-card--pad-none {
  padding: 0;
}

.ui-card--pad-sm {
  padding: 10px 14px;
}

.ui-card--pad-md {
  padding: 16px 18px;
}

.ui-card--pad-lg {
  padding: 20px 22px;
}

.ui-card--subtle {
  background: var(--ds-surface-subtle);
  box-shadow: none;
  border-color: #0000;
}

.ui-card--flat {
  box-shadow: none;
}

.ui-card--ghost {
  box-shadow: none;
  background: none;
  border-color: #0000;
}

.ui-card--interactive:hover, .ui-bento-card:hover {
  border-color: var(--ds-border-hover);
  box-shadow: var(--ds-shadow-hover);
}

.ui-card--interactive:active, .ui-bento-card:active {
  transform: translateY(0);
}

.ui-grouped-list {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-card);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.ui-grouped-item {
  color: var(--ds-ink);
  box-sizing: border-box;
  background: none;
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
  transition: background .12s;
  display: flex;
  position: relative;
}

.ui-grouped-item:not(:last-child):after {
  content: "";
  background: var(--ds-border-subtle);
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
}

.ui-grouped-item:hover {
  background: var(--ds-surface-hover);
}

.ui-metric-strip {
  background: var(--ds-border);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-card);
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.ui-metric-cell {
  background: var(--ds-surface);
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px 16px;
  display: flex;
}

.ui-metric-label {
  color: var(--ds-ink-light);
  letter-spacing: -.01em;
  font-size: 11.5px;
  font-weight: 500;
}

.ui-metric-value-row {
  align-items: baseline;
  gap: 4px;
  display: flex;
}

.ui-metric-value {
  color: var(--ds-ink);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.ui-metric-unit {
  color: var(--ds-ink-muted);
  font-size: 11.5px;
  font-weight: 500;
}

.ui-stat-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-card);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  transition: border-color .15s;
  display: flex;
}

.ui-stat-card.is-clickable:hover {
  border-color: var(--ds-border-hover);
  cursor: pointer;
}

.ui-stat-icon-wrap {
  border-radius: var(--ds-radius-md);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.ui-stat-icon-wrap--brand {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
}

.ui-stat-icon-wrap--did {
  color: var(--ds-data-did);
  background: #eef6f7;
}

.ui-stat-icon-wrap--thinking {
  color: var(--ds-data-thinking);
  background: #f3f5f7;
}

.ui-stat-icon-wrap--neutral {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
}

.ui-stat-icon-wrap svg {
  width: 16px;
  height: 16px;
}

.ui-stat-info {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.ui-stat-label {
  color: var(--ds-ink-muted);
  letter-spacing: -.01em;
  font-size: 11px;
  font-weight: 500;
}

.ui-stat-val {
  font-variant-numeric: tabular-nums;
  align-items: baseline;
  gap: 4px;
  display: flex;
}

.ui-stat-val strong {
  color: var(--ds-ink);
  letter-spacing: -.02em;
  font-size: 18px;
  font-weight: 700;
}

.ui-stat-unit {
  color: var(--ds-ink-light);
  font-size: 11px;
  font-weight: 500;
}

.ui-stat-hint {
  color: var(--ds-ink-light);
  margin-top: 1px;
  font-size: 11px;
}

.ui-segmented-control {
  background: var(--ds-surface-subtle);
  border-radius: var(--ds-radius-md);
  box-sizing: border-box;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 2px;
  display: inline-flex;
}

.ui-segmented-control--sm {
  border-radius: var(--ds-radius-sm);
  height: 26px;
  padding: 2px;
}

.ui-segmented-btn {
  border-radius: calc(var(--ds-radius-md) - 2px);
  height: 28px;
  color: var(--ds-ink-muted);
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  background: none;
  border: 0;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  transition: background .12s, color .12s;
  display: inline-flex;
}

.ui-segmented-control--sm .ui-segmented-btn {
  border-radius: calc(var(--ds-radius-sm) - 1px);
  height: 22px;
  padding: 0 7px;
  font-size: 11px;
}

.ui-segmented-btn:hover {
  color: var(--ds-ink);
}

.ui-segmented-btn.is-active {
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px #0000000d;
}

.ui-segmented-dot {
  border-radius: 50%;
  width: 6px;
  height: 6px;
  display: inline-block;
}

.ui-segmented-dot.is-brand {
  background: var(--ds-brand);
}

.ui-segmented-dot.is-did {
  background: var(--ds-data-did);
}

.ui-segmented-dot.is-thinking {
  background: var(--ds-data-thinking);
}

.ui-segmented-count {
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.ui-search-input-wrap {
  align-items: center;
  width: 100%;
  max-width: 280px;
  display: flex;
  position: relative;
}

.ui-search-icon {
  color: var(--ds-ink-light);
  pointer-events: none;
  align-items: center;
  display: flex;
  position: absolute;
  left: 11px;
}

.ui-search-icon svg {
  width: 14px;
  height: 14px;
}

.ui-search-input {
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  width: 100%;
  height: 36px;
  color: var(--ds-ink);
  box-sizing: border-box;
  outline: none;
  padding: 0 30px 0 32px;
  font-size: 12.5px;
  transition: all .15s;
}

.ui-search-input:focus {
  border-color: var(--ds-brand);
  box-shadow: 0 0 0 3px var(--ds-brand-soft);
}

.ui-search-clear-btn {
  background: var(--ds-surface-subtle);
  width: 18px;
  height: 18px;
  color: var(--ds-ink-light);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
  position: absolute;
  right: 8px;
}

.ui-search-clear-btn:hover {
  background: var(--ds-border);
  color: var(--ds-ink);
}

.ui-search-clear-btn svg {
  width: 10px;
  height: 10px;
}

.ui-date-input-wrap {
  align-items: center;
  display: inline-flex;
  position: relative;
}

.ui-date-icon {
  color: var(--ds-ink-light);
  pointer-events: none;
  align-items: center;
  display: flex;
  position: absolute;
  left: 10px;
}

.ui-date-icon svg {
  width: 14px;
  height: 14px;
}

.ui-date-input {
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  height: 36px;
  color: var(--ds-ink);
  box-sizing: border-box;
  outline: none;
  padding: 0 28px 0 30px;
  font-family: inherit;
  font-size: 12.5px;
  transition: all .15s;
}

.ui-date-input:focus {
  border-color: var(--ds-brand);
  box-shadow: 0 0 0 3px var(--ds-brand-soft);
}

.ui-date-clear-btn {
  background: var(--ds-surface-subtle);
  width: 18px;
  height: 18px;
  color: var(--ds-ink-light);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
  position: absolute;
  right: 8px;
}

.ui-date-clear-btn:hover {
  background: var(--ds-border);
  color: var(--ds-ink);
}

.ui-date-clear-btn svg {
  width: 10px;
  height: 10px;
}

.ui-toolbar {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  display: flex;
}

.ui-toolbar-left {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.ui-toolbar-right {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.ui-toolbar-reset-btn {
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  height: 36px;
  color: var(--ds-ink-muted);
  cursor: pointer;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
}

.ui-toolbar-reset-btn:hover {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink);
  border-color: var(--ds-border-hover);
}

.ui-topic-pill {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-tag-topic-bg);
  color: var(--ds-tag-topic-text);
  border: 1px solid var(--ds-tag-topic-border);
  white-space: nowrap;
  align-items: center;
  gap: 2px;
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: all .15s;
  display: inline-flex;
}

.ui-topic-pill.is-link:hover, .ui-topic-pill.is-interactive:hover {
  filter: brightness(.95);
  transform: translateY(-.5px);
}

.ui-topic-hash {
  opacity: .75;
  margin-right: 1px;
  font-weight: 700;
}

.ui-topic-count {
  opacity: .8;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
  font-size: 10.5px;
}

.ui-topic-text-link {
  color: var(--ds-brand);
  white-space: nowrap;
  background: none;
  border: 0;
  align-items: baseline;
  gap: 1px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: color .15s;
  display: inline-flex;
}

.ui-topic-text-link .ui-topic-hash {
  color: var(--ds-brand);
  opacity: .85;
  font-weight: 600;
}

.ui-topic-text-link.is-link:hover, .ui-topic-text-link.is-interactive:hover {
  color: var(--ds-brand-hover);
  text-decoration: underline;
}

.ui-topic-remove-btn {
  width: 13px;
  height: 13px;
  color: inherit;
  cursor: pointer;
  opacity: .7;
  background: none;
  border: 0;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin-left: 3px;
  display: inline-flex;
}

.ui-topic-remove-btn:hover {
  opacity: 1;
  background: #00000014;
}

.ui-topic-remove-btn svg {
  width: 9px;
  height: 9px;
}

.ui-badge {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  display: inline-flex;
}

.ui-badge--sm {
  padding: 1px 5px;
  font-size: 10.5px;
}

.ui-badge--think {
  background: var(--ds-badge-think-bg);
  color: var(--ds-badge-think-text);
  border: 1px solid var(--ds-badge-think-border);
}

.ui-badge--did {
  background: var(--ds-badge-did-bg);
  color: var(--ds-badge-did-text);
  border: 1px solid var(--ds-badge-did-border);
}

.ui-badge--brand {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  border: 1px solid #4a7c5940;
}

.ui-badge--neutral {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
  border: 1px solid var(--ds-border);
}

.ui-badge--danger {
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
  border: 1px solid #c66e5b40;
}

.ui-point-badge {
  flex-shrink: 0;
  margin-top: 1px;
}

.ui-section-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.ui-section-header-titles {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.ui-section-title {
  letter-spacing: -.02em;
  color: var(--ds-ink);
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
}

.ui-section-count {
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
}

.ui-section-subtitle {
  color: var(--ds-ink-muted);
  font-size: 12px;
}

.ui-section-action {
  align-items: center;
  gap: 8px;
  display: flex;
}

.app-shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) minmax(0, var(--context-width));
  background: var(--ds-content-bg);
  min-height: 100vh;
  transition: grid-template-columns .2s cubic-bezier(.2, 0, 0, 1);
  display: grid;
}

.app-shell.is-no-aside {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

html[data-sidebar-collapsed="true"] .app-shell.is-no-aside, .app-shell.is-sidebar-collapsed.is-no-aside {
  grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
}

.page-content.page-content--chat {
  background: var(--ds-content-bg);
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 0;
  padding: 0;
  display: flex;
  overflow: hidden;
}

:is(.app-shell:has(.page-content--chat), .page-column:has(.page-content--chat)) {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.page-content--chat .page-content-inner {
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.sidebar {
  background: var(--ds-surface);
  border-right: 1px solid var(--ds-border);
  z-index: 20;
  flex-direction: column;
  gap: 24px;
  height: 100vh;
  padding: 24px 14px 20px;
  transition: width .2s cubic-bezier(.2, 0, 0, 1), padding .2s cubic-bezier(.2, 0, 0, 1);
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden auto;
}

.sidebar-header {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  display: flex;
}

.brand {
  border-radius: var(--ds-radius-md);
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 0 4px;
  transition: opacity .15s;
  display: flex;
}

.brand:hover {
  opacity: .9;
}

.brand-mark {
  border-radius: var(--ds-radius-md);
  color: #fff;
  background: linear-gradient(135deg, var(--ds-brand) 0%, var(--ds-brand-hover) 100%);
  flex: 0 0 36px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.brand-mark svg {
  width: 24px;
  height: 24px;
}

.brand-copy {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.brand-copy strong {
  font-size: var(--ds-font-size-title);
  font-weight: 700;
  line-height: 1.15;
}

.brand-copy small {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
  line-height: 1.15;
}

.sidebar-toggle-btn {
  border-radius: var(--ds-radius-md);
  width: 32px;
  height: 32px;
  color: var(--ds-ink-light);
  background: none;
  border: 1px solid #0000;
  flex: 0 0 32px;
  place-items: center;
  transition: background .15s, color .15s, border-color .15s;
  display: grid;
}

.sidebar-toggle-btn:hover {
  color: var(--ds-ink);
  background: var(--ds-surface-subtle);
  border-color: var(--ds-border);
}

.sidebar-toggle-btn svg {
  width: 18px;
  height: 18px;
}

.nav-list {
  gap: 4px;
  display: grid;
}

.nav-item {
  border-radius: var(--ds-radius-md);
  min-height: 44px;
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-body);
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  font-weight: 520;
  transition: background .15s, color .15s;
  display: flex;
}

.nav-item svg {
  width: 20px;
  height: 20px;
}

.nav-item:hover {
  color: var(--ds-ink);
  background: var(--ds-surface-subtle);
}

.nav-item.is-active {
  color: var(--ds-brand-hover);
  background: var(--ds-brand-soft);
  font-weight: 600;
}

.sidebar-bottom {
  gap: 8px;
  margin-top: auto;
  display: grid;
}

.sidebar-write-btn {
  border-radius: var(--ds-radius-md);
  min-height: 42px;
  color: var(--ds-surface);
  background: var(--ds-brand);
  font-size: var(--ds-font-size-caption);
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-weight: 600;
  transition: background .15s, width .2s;
  display: flex;
}

.sidebar-write-btn:hover {
  background: var(--ds-brand-hover);
}

.sidebar-write-btn svg {
  width: 17px;
  height: 17px;
}

.sidebar-foot {
  border-radius: var(--ds-radius-md);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  transition: background .15s;
  display: flex;
}

.sidebar-foot:hover {
  background: var(--ds-surface-subtle);
}

.sidebar-foot-avatar {
  background: var(--ds-surface-subtle);
  width: 28px;
  height: 28px;
  color: var(--ds-ink-light);
  border: 1px solid var(--ds-border);
  border-radius: 50%;
  flex: 0 0 28px;
  place-items: center;
  transition: border-color .15s, color .15s;
  display: grid;
  position: relative;
}

.sidebar-foot:hover .sidebar-foot-avatar {
  color: var(--ds-brand);
  border-color: var(--ds-brand-soft);
}

.sidebar-foot-avatar svg {
  width: 16px;
  height: 16px;
}

.sidebar-foot-avatar .presence-dot {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 2px var(--ds-surface);
  position: absolute;
  bottom: -1px;
  right: -1px;
}

.presence-dot {
  background: var(--ds-brand);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px var(--ds-brand-soft);
  border-radius: 50%;
  flex: 0 0 8px;
}

.sidebar-foot-copy {
  gap: 1px;
  min-width: 0;
  display: grid;
}

.sidebar-foot-copy strong, .sidebar-foot-copy small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-foot-copy strong {
  font-size: var(--ds-font-size-caption);
  font-weight: 650;
}

.sidebar-foot-copy small {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
}

html[data-sidebar-collapsed="true"] {
  --sidebar-width: var(--sidebar-collapsed-width);
}

html[data-sidebar-collapsed="true"] .app-shell, .app-shell.is-sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr) minmax(0, var(--context-width));
}

html[data-sidebar-collapsed="true"] .sidebar, .sidebar.is-collapsed {
  width: var(--sidebar-collapsed-width);
  align-items: center;
  gap: 16px;
  padding: 20px 8px 16px;
}

html[data-sidebar-collapsed="true"] .sidebar-header, .sidebar.is-collapsed .sidebar-header {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}

html[data-sidebar-collapsed="true"] .brand, .sidebar.is-collapsed .brand {
  justify-content: center;
  padding: 0;
}

html[data-sidebar-collapsed="true"] .brand-copy, .sidebar.is-collapsed .brand-copy, html[data-sidebar-collapsed="true"] .nav-label, .sidebar.is-collapsed .nav-label, html[data-sidebar-collapsed="true"] .sidebar-write-btn span, .sidebar.is-collapsed .sidebar-write-btn span, html[data-sidebar-collapsed="true"] .sidebar-foot-copy, .sidebar.is-collapsed .sidebar-foot-copy {
  display: none !important;
}

html[data-sidebar-collapsed="true"] .nav-item, .sidebar.is-collapsed .nav-item {
  justify-content: center;
  gap: 0;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0 auto;
  padding: 0;
}

html[data-sidebar-collapsed="true"] .sidebar-bottom, .sidebar.is-collapsed .sidebar-bottom {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  display: flex;
}

html[data-sidebar-collapsed="true"] .sidebar-write-btn, .sidebar.is-collapsed .sidebar-write-btn {
  border-radius: var(--ds-radius-md);
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0 auto;
  padding: 0;
}

html[data-sidebar-collapsed="true"] .sidebar-foot, .sidebar.is-collapsed .sidebar-foot {
  border-radius: var(--ds-radius-md);
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell, .sidebar, .sidebar-write-btn {
    transition: none !important;
  }
}

.page-column {
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  display: flex;
}

.context-column {
  width: var(--context-width);
  max-width: var(--context-width);
  border-left: 1px solid var(--ds-border);
  background: var(--ds-surface-subtle);
  box-sizing: border-box;
  min-width: 0;
  height: 100vh;
  padding: 26px 20px 40px;
  position: sticky;
  top: 0;
  overflow: hidden auto;
}

.context-column-inner, .context-stack {
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  display: grid;
}

.context-panel {
  box-sizing: border-box;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-subtle);
  min-width: 0;
  max-width: 100%;
  padding: 18px;
}

.context-panel-head {
  gap: 3px;
  margin-bottom: 14px;
  display: grid;
}

.context-panel-title-row {
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  display: flex;
}

.context-inline-link {
  color: var(--ds-brand-hover);
  font-size: var(--ds-font-size-caption);
  font-weight: 600;
}

.context-inline-link:hover {
  text-decoration: underline;
}

.context-kicker {
  color: var(--ds-brand);
  letter-spacing: .02em;
  font-size: 12px;
  font-weight: 650;
}

.context-panel h3 {
  font-size: var(--ds-font-size-title);
  font-weight: 700;
}

.context-desc {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  line-height: 1.65;
}

.context-steps {
  gap: 12px;
  display: grid;
}

.context-step {
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  display: grid;
}

.context-step-dot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-top: 6px;
}

.context-step-dot.did {
  background: var(--ds-data-did);
}

.context-step-dot.thinking {
  background: var(--ds-data-thinking);
}

.context-step strong {
  font-size: var(--ds-font-size-caption);
  font-weight: 650;
  display: block;
}

.context-step p {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  margin-top: 2px;
  line-height: 1.55;
}

.context-stat-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.context-stat-item {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle);
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  display: flex;
}

.context-stat-item > span {
  color: var(--ds-ink-muted);
  font-size: 12px;
}

.context-stat-item > strong {
  color: var(--ds-ink);
  font-size: 20px;
  font-weight: 750;
  line-height: 1.15;
}

.context-stat-item > strong em {
  color: var(--ds-ink-light);
  margin-left: 3px;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.context-kv-list {
  gap: 8px;
  margin-top: 12px;
  display: grid;
}

.context-kv-row {
  border-top: 1px solid var(--ds-border);
  font-size: var(--ds-font-size-caption);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  display: flex;
}

.context-kv-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.context-kv-row > span {
  color: var(--ds-ink-muted);
}

.context-kv-row > strong {
  color: var(--ds-ink);
  font-weight: 600;
}

.context-kv-row kbd {
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-subtle);
  color: var(--ds-ink);
  border-radius: 6px;
  padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.context-action-group {
  gap: 8px;
  margin-top: 14px;
  display: grid;
}

.context-action-btn {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  min-height: 38px;
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-weight: 550;
  transition: background .15s, border-color .15s;
  display: flex;
}

.context-action-btn svg {
  width: 15px;
  height: 15px;
  color: var(--ds-brand);
}

.context-action-btn:hover {
  background: var(--ds-surface-subtle);
  border-color: var(--ds-border-hover);
}

.context-archive-list {
  gap: 4px;
  max-height: 280px;
  display: grid;
  overflow-y: auto;
}

.context-archive-item {
  border-radius: var(--ds-radius-sm);
  min-height: 36px;
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  transition: background .15s, color .15s;
  display: flex;
}

.context-archive-item b {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-light);
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}

.context-archive-item:hover {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink);
}

.context-archive-item.is-active {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  font-weight: 600;
}

.context-archive-item.is-active b {
  background: var(--ds-brand);
  color: #fff;
}

.page-header {
  z-index: 15;
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  position: sticky;
  top: 0;
}

.page-header-inner {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 10px clamp(20px, 3.5vw, 40px);
  display: flex;
}

.page-header-left {
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.page-header-back {
  width: 28px;
  height: 28px;
  color: var(--ds-ink);
  border-radius: 50%;
  flex: 0 0 28px;
  justify-content: center;
  align-items: center;
  transition: background .12s, transform .12s;
  display: flex;
}

.page-header-back svg {
  width: 20px;
  height: 20px;
}

.page-header-back:hover {
  background: var(--ds-surface-subtle);
}

.page-header-back:active {
  background: var(--ds-surface-subtle);
  transform: scale(.94);
}

.page-header-titles {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.page-header-title {
  color: var(--ds-ink);
  letter-spacing: -.2px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.page-header-subtitle {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  line-height: 1;
}

.page-header-right {
  flex: none;
  justify-content: flex-end;
  align-items: center;
  min-width: 36px;
  height: 34px;
  display: flex;
}

.header-pill-link {
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  height: 34px;
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
  display: inline-flex;
}

.header-pill-link svg {
  width: 15px;
  height: 15px;
}

.header-pill-link:hover {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink);
}

.header-pill-link.primary {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  border-color: #0000;
}

.header-pill-link.primary:hover {
  background: var(--ds-brand);
  color: #fff;
}

.page-header-share {
  border-radius: var(--ds-radius-md);
  width: 36px;
  height: 36px;
  color: var(--ds-ink);
  justify-content: center;
  align-items: center;
  transition: background .12s;
  display: flex;
}

.page-header-share svg {
  width: 20px;
  height: 20px;
}

.page-header-share:hover {
  background: var(--ds-surface-subtle);
}

.page-content {
  background: var(--ds-content-bg);
  flex: 1;
}

.page-content-inner {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 22px clamp(20px, 3.5vw, 40px) 52px;
}

.button {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  min-width: 96px;
  min-height: 42px;
  color: var(--ds-ink);
  font-size: var(--ds-font-size-body);
  white-space: nowrap;
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
  display: inline-flex;
}

.button svg {
  width: 18px;
  height: 18px;
}

.button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.button.is-loading, .button[aria-busy="true"] {
  cursor: progress;
}

.button-primary {
  background: var(--ds-brand);
  color: var(--ds-surface);
}

.button-primary:hover:not(:disabled) {
  background: var(--ds-brand-hover);
}

.button-secondary {
  background: var(--ds-surface);
  border-color: var(--ds-border);
  color: var(--ds-ink);
}

.button-secondary:hover:not(:disabled) {
  border-color: var(--ds-border-hover);
  background: #f0f2f5;
}

.button-ghost {
  color: var(--ds-ink-muted);
  background: none;
}

.button-ghost:hover:not(:disabled) {
  color: var(--ds-ink);
  background: #0000000a;
}

.button-danger {
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.button-danger-solid {
  background: var(--ds-danger);
  color: var(--ds-surface);
}

.button-danger-solid:hover:not(:disabled) {
  opacity: .92;
}

.button-large {
  min-height: 46px;
  padding: 10px 22px;
}

.date-badge {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle);
  flex-direction: column;
  flex: 0 0 48px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
}

.date-badge > span:first-child {
  font-size: var(--ds-font-size-caption);
  color: var(--ds-ink-light);
  margin-bottom: 3px;
  font-weight: 600;
  line-height: 1;
}

.date-badge > span:last-child {
  font-size: var(--ds-font-size-title);
  color: var(--ds-ink);
  font-weight: 700;
  line-height: 1;
}

.records-empty-card {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border-subtle);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 24px 30px;
  display: flex;
}

.records-empty-icon {
  background: var(--ds-brand-soft);
  width: 56px;
  height: 56px;
  color: var(--ds-brand);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
  display: flex;
}

.records-empty-icon svg {
  width: 28px;
  height: 28px;
}

.records-empty-title {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-title);
  font-weight: 700;
}

.records-empty-desc {
  max-width: 280px;
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  text-align: center;
  line-height: 1.55;
}

.records-empty-cta {
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand);
  min-height: 38px;
  color: var(--ds-surface);
  font-size: var(--ds-font-size-caption);
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0 16px;
  font-weight: 500;
  transition: background .15s;
  display: inline-flex;
}

.records-empty-cta svg {
  width: 14px;
  height: 14px;
}

.records-empty-cta:hover {
  background: var(--ds-brand-hover);
}

.page-content--home-redesign {
  padding: 24px 28px 48px;
}

.home-workbench {
  flex-direction: column;
  gap: 22px;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
}

.home-week-strip {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-card);
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 8px 12px;
  display: grid;
}

.home-week-day {
  border-radius: var(--ds-radius-md);
  min-width: 0;
  color: var(--ds-ink-muted);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0 8px;
  display: flex;
  position: relative;
}

.home-week-weekday {
  color: var(--ds-ink-light);
  font-size: 11.5px;
  font-weight: 500;
}

.home-week-day-number {
  width: 32px;
  height: 32px;
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 14.5px;
  font-weight: 600;
  transition: all .12s;
  display: flex;
}

.home-week-day.selected .home-week-day-number {
  background: var(--ds-brand);
  color: #fff;
}

.home-week-day .week-day-dot {
  background: var(--ds-brand);
  border-radius: 50%;
  width: 4px;
  height: 4px;
  position: absolute;
  bottom: 2px;
}

.home-week-day.selected .week-day-dot {
  background: var(--ds-brand-gold, #ffe3a8);
}

.home-hero-section {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.home-hero-head {
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  display: flex;
}

.home-hero-titles {
  align-items: center;
  gap: 10px;
  display: flex;
}

.home-hero-date-badge {
  color: var(--ds-ink-light);
  font-size: 12px;
  font-weight: 500;
}

.home-hero-titles h2 {
  color: var(--ds-ink);
  letter-spacing: -.02em;
  font-size: 15px;
  font-weight: 700;
}

.home-status-pill {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border);
  color: var(--ds-ink-muted);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
}

.home-status-pill.is-done {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  border-color: #0000;
}

.home-hero-card {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-card);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}

.home-hero-card.is-recorded:hover {
  border-color: var(--ds-border-hover);
  box-shadow: var(--ds-shadow-hover);
}

.home-hero-main {
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.home-hero-card-title-row {
  align-items: center;
  gap: 10px;
  display: flex;
}

.home-hero-record-title {
  color: var(--ds-ink);
  letter-spacing: -.02em;
  font-size: 16px;
  font-weight: 700;
}

.home-hero-summary {
  color: var(--ds-ink-muted);
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.home-hero-summary.is-takeaway {
  color: var(--ds-brand-hover);
  background: var(--ds-brand-soft);
  border-radius: var(--ds-radius-sm);
  padding: 4px 10px;
  display: inline-block;
}

.home-hero-meta-row {
  align-items: center;
  gap: 14px;
  margin-top: 2px;
  font-size: 12px;
  display: flex;
}

.home-hero-counts, .home-hero-topics {
  align-items: center;
  gap: 6px;
  display: flex;
}

.home-hero-cta {
  color: var(--ds-ink-muted);
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  transition: color .15s, transform .15s;
  display: inline-flex;
}

.home-hero-cta svg {
  width: 14px;
  height: 14px;
}

.home-hero-card:hover .home-hero-cta {
  color: var(--ds-ink);
  transform: translateX(2px);
}

.home-hero-card.is-empty {
  background: var(--ds-surface);
  border: 1px dashed var(--ds-border);
}

.home-hero-empty-copy strong {
  color: var(--ds-ink);
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: 650;
  display: block;
}

.home-hero-empty-copy p {
  color: var(--ds-ink-muted);
  margin: 0;
  font-size: 13px;
}

.home-hero-start-btn {
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand);
  color: #fff;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
  display: inline-flex;
}

.home-hero-start-btn:hover {
  background: var(--ds-brand-hover);
}

.home-hero-start-btn svg {
  width: 14px;
  height: 14px;
}

.home-recent-section {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.home-section-header-row {
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  display: flex;
}

.home-section-title-wrap {
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.home-section-title {
  color: var(--ds-ink);
  letter-spacing: -.015em;
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
}

.home-section-count {
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
}

.home-recent-link {
  color: var(--ds-ink-muted);
  align-items: center;
  gap: 3px;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
}

.home-recent-link:hover {
  color: var(--ds-brand);
}

.home-recent-link svg {
  width: 12px;
  height: 12px;
}

.home-retro-list-row {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.home-retro-row-left {
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  display: flex;
}

.home-retro-row-date {
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  width: 42px;
  font-size: 12px;
  font-weight: 600;
}

.home-retro-row-title {
  color: var(--ds-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.home-retro-row-summary {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--ds-ink-muted);
  flex: 1;
  font-size: 13px;
  overflow: hidden;
}

.home-retro-row-right {
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  display: flex;
}

.home-retro-row-counts {
  color: var(--ds-ink-light);
  font-size: 12px;
}

.home-retro-row-topic {
  color: var(--ds-brand);
  background: var(--ds-brand-soft);
  border-radius: var(--ds-radius-pill);
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 550;
}

.home-retro-row-arrow {
  width: 14px;
  height: 14px;
  color: var(--ds-ink-light);
  transition: transform .12s;
}

.home-retro-list-row:hover .home-retro-row-arrow {
  color: var(--ds-ink);
  transform: translateX(2px);
}

.today-summary-copy > span {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.today-summary-cta {
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand);
  color: #fff;
  font-size: var(--ds-font-size-caption);
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-weight: 600;
  transition: background .15s, color .15s;
  display: inline-flex;
}

.today-summary-cta.secondary {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
}

.today-summary-card:hover .today-summary-cta {
  background: var(--ds-brand-hover);
  color: #fff;
}

.home-selected-meta {
  font-size: var(--ds-font-size-caption);
  color: var(--ds-ink-muted);
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  display: flex;
}

.home-selected-meta .meta-sep {
  color: var(--ds-ink-light);
  opacity: .5;
}

.today-summary-cta svg {
  width: 15px;
  height: 15px;
}

.today-summary-card > svg {
  width: 20px;
  height: 20px;
  color: var(--ds-ink-light);
}

.home-recent-heading {
  justify-content: space-between;
  align-items: center;
  height: 54px;
  padding: 16px 2px 10px;
  display: flex;
}

.home-recent-heading > h2 {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-title);
  font-weight: 700;
}

.home-recent-action {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
  align-items: center;
  gap: 3px;
  font-weight: 600;
  display: inline-flex;
}

.home-recent-action svg {
  width: 14px;
  height: 14px;
}

.home-recent-action:hover {
  color: var(--ds-ink);
}

.record-card-list, .home-v2-record-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  display: grid;
}

@media (max-width: 840px) {
  .record-card-list, .home-v2-record-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.home-v2-record {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  min-height: 70px;
  box-shadow: var(--ds-shadow-card);
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  transition: all .18s cubic-bezier(.16, 1, .3, 1);
  display: flex;
}

.home-v2-record:hover {
  border-color: var(--ds-border-hover);
  box-shadow: var(--ds-shadow-hover);
  transform: translateY(-1px);
}

.home-v2-record:active {
  background: var(--ds-brand-soft);
  transform: translateY(0);
}

.home-v2-record-copy {
  flex-direction: column;
  flex: 1;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.home-v2-record-copy > strong {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-body);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 680;
  line-height: 1.25;
  overflow: hidden;
}

.home-v2-record-copy > span {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
  overflow: hidden;
}

.floating-action {
  z-index: 35;
  background: var(--ds-brand-hover);
  width: 57px;
  height: 57px;
  color: var(--ds-surface);
  box-shadow: var(--ds-shadow-floating);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: transform .12s, background .15s;
  display: flex;
  position: fixed;
  bottom: 28px;
  right: max(24px, 50vw - 360px);
}

.floating-action svg {
  stroke-width: 2.2px;
  width: 24px;
  height: 24px;
}

.floating-action:hover {
  background: var(--ds-brand);
}

.floating-action:active {
  background: var(--ds-brand);
  transform: scale(.92);
}

.records-search-bar {
  align-items: center;
  margin: 0 0 10px;
  display: flex;
}

.records-search-full {
  width: 100%;
  max-width: 100%;
}

.records-search-input-wrapper {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}

.records-search-input-wrapper:focus-within {
  border-color: var(--ds-brand);
  box-shadow: var(--ds-shadow-hover);
}

.records-search-input-wrapper > svg {
  width: 15px;
  height: 15px;
  color: var(--ds-ink-light);
}

.records-search-input-wrapper input {
  min-width: 0;
  height: 36px;
  font-size: var(--ds-font-size-caption);
  color: var(--ds-ink);
  appearance: none;
  background: none;
  border: 0;
  flex: 1;
}

.records-search-input-wrapper input::placeholder {
  color: var(--ds-ink-light);
}

.records-search-input-wrapper input::-webkit-search-cancel-button {
  display: none;
}

.search-clear {
  width: 20px;
  height: 20px;
  color: var(--ds-ink-muted);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.search-clear svg {
  width: 13px;
  height: 13px;
}

.search-clear:hover {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink);
}

.result-count {
  justify-content: space-between;
  align-items: center;
  margin: 0 2px 10px;
  display: flex;
}

.result-count > h2 {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-body);
  align-items: center;
  gap: 8px;
  font-weight: 700;
  display: flex;
}

.filter-chip-clear {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
}

.result-count > span {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
}

.records-search-empty {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  padding: 36px 2px;
}

.record-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  display: grid;
}

@media (max-width: 840px) {
  .record-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.records-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}

.records-toolbar-search {
  flex: 1;
  min-width: 220px;
  max-width: 320px;
}

.records-toolbar-controls {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  display: flex;
}

.ui-select-wrap {
  align-items: center;
  display: inline-flex;
  position: relative;
}

.ui-select {
  appearance: none;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  height: 36px;
  color: var(--ds-ink);
  cursor: pointer;
  outline: none;
  padding: 0 32px 0 12px;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
}

.ui-select:hover {
  background: var(--ds-surface-subtle);
  border-color: var(--ds-border-hover);
}

.ui-select:focus-visible {
  border-color: var(--ds-brand);
  outline: 2px solid var(--ds-brand-soft);
}

.ui-select-arrow {
  pointer-events: none;
  color: var(--ds-ink-light);
  align-items: center;
  display: flex;
  position: absolute;
  right: 10px;
}

.ui-select-arrow svg {
  width: 12px !important;
  height: 12px !important;
}

.records-header-meta {
  align-items: center;
  gap: 10px;
  display: flex;
}

.records-header-page-hint {
  color: var(--ds-ink-light);
  font-size: 12px;
  font-weight: 500;
}

.records-empty-reset {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  cursor: pointer;
  border: 1px solid #4a7c5933;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all .15s;
  display: inline-flex;
}

.records-empty-reset:hover {
  background: var(--ds-brand);
  color: #fff;
}

.record-feed-row {
  color: var(--ds-ink);
  box-sizing: border-box;
  background: none;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 13px 20px;
  text-decoration: none;
  transition: background .12s;
  display: flex;
  position: relative;
}

.record-feed-row:not(:last-child):after {
  content: "";
  background: var(--ds-border-subtle);
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
}

.record-feed-row:hover {
  background: var(--ds-surface-hover);
}

.record-feed-left {
  flex: 1;
  align-items: center;
  gap: 16px;
  min-width: 0;
  display: flex;
}

.record-feed-date-badge {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border-subtle);
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 42px;
  line-height: 1.15;
  transition: all .15s;
  display: flex;
}

.record-feed-date-badge.is-today {
  background: var(--ds-brand-soft);
  border-color: #4a7c5940;
}

.record-feed-date-month {
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
}

.record-feed-date-badge.is-today .record-feed-date-month {
  color: var(--ds-brand-hover);
}

.record-feed-date-weekday {
  color: var(--ds-ink-light);
  font-size: 10px;
  font-weight: 500;
}

.record-feed-date-badge.is-today .record-feed-date-weekday {
  color: var(--ds-brand);
  font-weight: 600;
}

.record-feed-info {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.record-feed-title-line {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.record-feed-title {
  color: var(--ds-ink);
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
}

.record-feed-row:hover .record-feed-title {
  color: var(--ds-brand-hover);
}

.record-feed-today-pill {
  color: #fff;
  background: var(--ds-brand);
  border-radius: var(--ds-radius-pill);
  flex-shrink: 0;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
}

.record-feed-snippet {
  color: var(--ds-ink-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  overflow: hidden;
}

.record-feed-right {
  flex-shrink: 0;
  align-items: center;
  gap: 14px;
  display: flex;
}

.record-feed-counts {
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: inline-flex;
}

.record-count-dot {
  vertical-align: 1px;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  margin-right: 3px;
  display: inline-block;
}

.record-count-dot.did {
  background: #3b7d52;
}

.record-count-dot.thinking {
  background: #73539e;
}

.record-feed-topic {
  color: var(--ds-brand-hover);
  background: var(--ds-brand-soft);
  border-radius: var(--ds-radius-pill);
  white-space: nowrap;
  border: 1px solid #4a7c5929;
  padding: 1.5px 8px;
  font-size: 11.5px;
  font-weight: 550;
}

.record-feed-chevron {
  color: var(--ds-ink-light);
  flex-shrink: 0;
  transition: transform .12s, color .12s;
  width: 14px !important;
  height: 14px !important;
}

.record-feed-row:hover .record-feed-chevron {
  color: var(--ds-ink);
  transform: translateX(2px);
}

.record-card {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-card);
  flex-direction: column;
  padding: 16px 18px;
  transition: all .18s cubic-bezier(.16, 1, .3, 1);
  display: flex;
}

.record-card:hover {
  border-color: var(--ds-border-hover);
  box-shadow: var(--ds-shadow-hover);
  transform: translateY(-1px);
}

.record-card:active {
  background: var(--ds-brand-soft);
  transform: translateY(0);
}

.record-meta-row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.record-card-date {
  align-items: center;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.record-card-date > span:first-child {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
}

.record-card-date > span:nth-child(2) {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  font-weight: 700;
}

.record-card-chevron {
  width: 14px;
  height: 14px;
  color: var(--ds-ink-light);
}

.record-title {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-body);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 8px;
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
}

.record-summary {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
  line-height: 1.45;
  overflow: hidden;
}

.record-counts {
  border-top: 1px solid var(--ds-border);
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  margin-top: 10px;
  padding-top: 9px;
}

.did-text {
  color: var(--ds-data-did);
  font-weight: 650;
}

.thinking-text {
  color: var(--ds-data-thinking);
  font-weight: 650;
}

.record-summary.is-takeaway, .today-summary-copy > span.is-takeaway {
  color: var(--ds-ink);
  font-weight: 500;
}

.record-card-meta-right {
  align-items: center;
  gap: 8px;
  display: flex;
}

.record-card-status-pill {
  border-radius: var(--ds-radius-pill);
  white-space: nowrap;
  align-items: center;
  padding: 1.5px 7px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  display: inline-flex;
}

.record-card-status-pill.succeeded {
  color: var(--ds-brand-hover);
  background: var(--ds-brand-soft);
}

.record-card-status-pill.running, .record-card-status-pill.pending, .record-card-status-pill.retrying {
  color: var(--ds-ink-muted);
  background: var(--ds-surface-subtle);
  animation: 1.8s ease-in-out infinite status-pulse;
}

.record-card-status-pill.failed, .record-card-status-pill.cancelled {
  color: var(--ds-danger);
  background: var(--ds-danger-soft);
}

.record-card-status-pill.idle {
  color: var(--ds-ink-light);
  background: var(--ds-surface-subtle);
}

@keyframes status-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .55;
  }
}

.record-card-footer {
  border-top: 1px solid var(--ds-border);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  display: flex;
}

.record-card-footer .record-counts {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.record-card-topics-inline {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.record-topic-tag {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-tag-topic-bg);
  color: var(--ds-tag-topic-text);
  border: 1px solid var(--ds-tag-topic-border);
  white-space: nowrap;
  align-items: center;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.home-selected-title-row {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.pagination-bar {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 16px;
  display: flex;
}

.pagination-info {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.pagination-info strong {
  color: var(--ds-ink);
  font-weight: 650;
}

.pagination-size-select-wrap {
  align-items: center;
  display: inline-flex;
}

.pagination-size-select {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  height: 30px;
  color: var(--ds-ink);
  cursor: pointer;
  padding: 0 8px;
  font-size: 12px;
  transition: border-color .15s, box-shadow .15s;
}

.pagination-size-select:focus {
  border-color: var(--ds-brand);
  box-shadow: var(--ds-shadow-hover);
  outline: none;
}

.pagination-controls {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.pagination-btn {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  min-width: 32px;
  height: 32px;
  color: var(--ds-ink);
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
  display: inline-flex;
}

.pagination-btn svg {
  width: 14px;
  height: 14px;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--ds-surface-subtle);
  border-color: var(--ds-border-hover);
}

.pagination-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  color: var(--ds-ink-light);
}

.pagination-pages {
  align-items: center;
  gap: 4px;
  display: flex;
}

.pagination-num {
  border-radius: var(--ds-radius-sm);
  width: 32px;
  height: 32px;
  color: var(--ds-ink);
  background: none;
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 550;
  transition: all .15s;
  display: inline-flex;
}

.pagination-num:hover:not(.is-active) {
  background: var(--ds-surface-subtle);
  border-color: var(--ds-border);
}

.pagination-num.is-active {
  background: var(--ds-brand);
  color: #fff;
  font-weight: 650;
  box-shadow: 0 1px 3px #4a7c594d;
}

.pagination-dots {
  width: 20px;
  height: 32px;
  color: var(--ds-ink-light);
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: inline-flex;
}

.pagination-jump {
  color: var(--ds-ink-muted);
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  font-size: 12px;
  display: inline-flex;
}

.pagination-jump-input {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  width: 42px;
  height: 30px;
  color: var(--ds-ink);
  text-align: center;
  padding: 0 4px;
  font-size: 12px;
  transition: border-color .15s, box-shadow .15s;
}

.pagination-jump-input:focus {
  border-color: var(--ds-brand);
  box-shadow: var(--ds-shadow-hover);
  outline: none;
}

.trend-workbench {
  flex-direction: column;
  gap: 18px;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
}

.trend-unified-toolbar {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.trend-range-selector {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-md);
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  display: inline-flex;
}

.trend-range-nav-btn {
  border-radius: var(--ds-radius-sm);
  width: 26px;
  height: 26px;
  color: var(--ds-ink-muted);
  cursor: pointer;
  border: 0;
  justify-content: center;
  align-items: center;
  transition: all .12s;
  display: flex;
}

.trend-range-nav-btn:hover {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink);
}

.trend-range-nav-btn svg {
  width: 14px;
  height: 14px;
}

.trend-range-current {
  color: var(--ds-ink);
  padding: 0 4px;
  font-size: 12.5px;
  font-weight: 600;
}

.trend-studio-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, 1fr);
  align-items: stretch;
  gap: 16px;
  display: grid;
}

@media (max-width: 960px) {
  .trend-studio-grid {
    grid-template-columns: 1fr;
  }
}

.trend-chart-studio-card {
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  display: flex;
}

.trend-chart-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.trend-chart-title-wrap {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.trend-chart-title {
  color: var(--ds-ink);
  letter-spacing: -.015em;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.trend-chart-insight-pill {
  color: var(--ds-brand-hover);
  background: var(--ds-brand-soft);
  border-radius: var(--ds-radius-pill);
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
}

.trend-chart-insight-pill svg {
  width: 12px;
  height: 12px;
}

.trend-chart-legend {
  align-items: center;
  gap: 12px;
  font-size: 12px;
  display: flex;
}

.trend-legend-pill {
  color: var(--ds-ink-muted);
  align-items: center;
  gap: 5px;
  display: flex;
}

.trend-chart-canvas-wrap {
  flex: 1;
  align-items: center;
  width: 100%;
  display: flex;
}

.trend-chart-footer-metrics {
  border-top: 1px solid var(--ds-border-subtle);
  grid-template-columns: 1fr 1fr 1.3fr;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  display: grid;
}

@media (max-width: 680px) {
  .trend-chart-footer-metrics {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.trend-footer-metric-item {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.trend-footer-metric-label {
  color: var(--ds-ink-light);
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  display: flex;
}

.trend-footer-metric-val {
  align-items: baseline;
  gap: 4px;
  display: flex;
}

.trend-footer-metric-val strong {
  color: var(--ds-ink);
  letter-spacing: -.02em;
  font-size: 17px;
  font-weight: 700;
}

.trend-footer-metric-val small {
  color: var(--ds-ink-light);
  font-size: 11px;
}

.trend-delta-pill {
  border-radius: var(--ds-radius-pill);
  margin-left: 4px;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 600;
}

.trend-delta-pill.is-up {
  color: var(--ds-brand-hover);
  background: var(--ds-brand-soft);
}

.trend-delta-pill.is-down {
  color: var(--ds-ink-muted);
  background: var(--ds-surface-subtle);
}

.trend-footer-ratio-item {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.trend-ratio-nums {
  color: var(--ds-ink-muted);
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
}

.trend-ratio-bar {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  width: 100%;
  height: 7px;
  display: flex;
  overflow: hidden;
}

.trend-ratio-seg {
  height: 100%;
  transition: width .25s;
}

.trend-ratio-seg.did {
  background: var(--ds-data-did);
}

.trend-ratio-seg.thinking {
  background: var(--ds-data-thinking);
}

.trend-calendar-card {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.trend-calendar-header {
  border-bottom: 1px solid var(--ds-border-subtle);
  padding-bottom: 8px;
}

.trend-calendar-month-row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.trend-calendar-heading {
  color: var(--ds-ink);
  letter-spacing: -.01em;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
}

.trend-topics-section {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.trend-topics-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.trend-topics-title-wrap {
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.trend-topics-title {
  color: var(--ds-ink);
  letter-spacing: -.015em;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.trend-topics-total-badge {
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
}

.trend-topic-controls {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.topic-compact-search {
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border-subtle);
  background: var(--ds-surface);
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  transition: border-color .15s;
  display: inline-flex;
}

.topic-compact-search:focus-within {
  border-color: var(--ds-brand);
}

.topic-compact-search svg {
  width: 12px;
  height: 12px;
  color: var(--ds-ink-light);
  flex-shrink: 0;
}

.topic-compact-search input {
  color: var(--ds-ink);
  background: none;
  border: 0;
  outline: none;
  width: 110px;
  font-size: 12px;
}

.topic-compact-search input::placeholder {
  color: var(--ds-ink-light);
}

.topic-compact-search button {
  cursor: pointer;
  color: var(--ds-ink-light);
  background: none;
  border: 0;
  align-items: center;
  padding: 0;
  display: inline-flex;
}

.topic-compact-search button:hover {
  color: var(--ds-ink);
}

.trend-topic-filters {
  align-items: center;
  gap: 6px;
  display: flex;
}

.topic-filter-pill {
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border-subtle);
  background: var(--ds-surface);
  height: 28px;
  color: var(--ds-ink-muted);
  cursor: pointer;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 500;
  transition: all .12s;
  display: inline-flex;
}

.topic-filter-pill:hover {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink);
}

.topic-filter-pill.is-active {
  background: var(--ds-ink);
  color: var(--ds-surface);
  border-color: var(--ds-ink);
  font-weight: 600;
}

.topic-filter-pill.is-active .legend-dot {
  box-shadow: 0 0 0 1px var(--ds-surface);
}

.trend-topics-compact-panel {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border-subtle);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  overflow: hidden;
}

.trend-topics-compact-grid {
  background: var(--ds-border-subtle);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  display: grid;
}

@media (max-width: 900px) {
  .trend-topics-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .trend-topics-compact-grid {
    grid-template-columns: 1fr;
  }
}

.topic-compact-row {
  background: var(--ds-surface);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  text-decoration: none;
  transition: background .12s;
  display: flex;
}

.topic-compact-row:hover {
  background: var(--ds-surface-subtle);
}

.topic-compact-left {
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.topic-compact-name {
  color: var(--ds-ink);
  letter-spacing: -.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
}

.topic-compact-right {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.topic-compact-stat {
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 11.5px;
}

.topic-compact-stat strong {
  color: var(--ds-ink-muted);
  font-weight: 600;
}

.topic-compact-arrow {
  width: 12px;
  height: 12px;
  color: var(--ds-ink-light);
  opacity: .65;
  transition: transform .15s, opacity .15s, color .15s;
}

.topic-compact-row:hover .topic-compact-arrow {
  opacity: 1;
  color: var(--ds-ink);
  transform: translateX(1.5px);
}

.topic-compact-more-btn {
  border: 0;
  border-top: 1px solid var(--ds-border-subtle);
  background: var(--ds-surface-subtle);
  width: 100%;
  color: var(--ds-ink-muted);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 500;
  transition: background .12s, color .12s;
  display: flex;
}

.topic-compact-more-btn:hover {
  background: var(--ds-border-subtle);
  color: var(--ds-ink);
}

.topic-more-chevron {
  width: 12px;
  height: 12px;
  transition: transform .18s;
  transform: rotate(90deg);
}

.topic-more-chevron.is-open {
  transform: rotate(-90deg);
}

.data-card {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-card);
  margin-bottom: 14px;
  padding: 18px 20px;
}

.trend-section-heading {
  border-bottom: 1px solid var(--ds-border);
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
  padding: 0 1px 10px;
  display: flex;
}

.trend-section-heading > span:first-child {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-title);
  font-weight: 710;
}

.heading-caption {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  font-weight: 500;
}

.line-chart-container {
  width: 100%;
  padding: 6px 0 2px;
  position: relative;
}

.line-chart {
  width: 100%;
  height: 196px;
  display: block;
  overflow: visible;
}

.chart-grid {
  stroke: var(--ds-border);
  stroke-width: 1px;
  stroke-dasharray: 3 3;
  opacity: .7;
}

.chart-grid.is-baseline {
  stroke-dasharray: none;
  opacity: 1;
}

.chart-hover-line {
  stroke: var(--ds-border-hover);
  stroke-width: 1px;
  stroke-dasharray: 3 3;
}

.chart-axis, .chart-axis-y, .chart-axis-x {
  fill: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.chart-axis-x.is-active {
  fill: var(--ds-ink);
  font-weight: 600;
}

.chart-line {
  fill: none;
  stroke-width: 2.25px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-line.did {
  stroke: var(--ds-data-did);
}

.chart-line.thinking {
  stroke: var(--ds-data-thinking);
}

.chart-dot {
  fill: var(--ds-surface);
  stroke-width: 2px;
  transition: r .12s;
}

.chart-dot.did {
  stroke: var(--ds-data-did);
}

.chart-dot.thinking {
  stroke: var(--ds-data-thinking);
}

.chart-dot.is-active.did {
  fill: var(--ds-data-did);
  stroke: var(--ds-surface);
}

.chart-dot.is-active.thinking {
  fill: var(--ds-data-thinking);
  stroke: var(--ds-surface);
}

.chart-floating-popover {
  z-index: 40;
  pointer-events: none;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  flex-direction: column;
  gap: 6px;
  min-width: 148px;
  padding: 8px 12px;
  transition: transform 80ms ease-out, opacity .12s;
  display: flex;
  position: absolute;
  box-shadow: 0 4px 18px -2px #0000001f, 0 2px 6px -1px #0000000f;
}

.chart-popover-header {
  border-bottom: 1px solid var(--ds-border-subtle);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  display: flex;
}

.chart-popover-date {
  color: var(--ds-ink);
  letter-spacing: -.01em;
  font-size: 11.5px;
  font-weight: 650;
}

.chart-popover-badge {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
}

.chart-popover-badge.is-empty {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-light);
}

.chart-popover-rows {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.chart-popover-row {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  display: flex;
}

.popover-row-label {
  color: var(--ds-ink-muted);
  align-items: center;
  gap: 5px;
  display: flex;
}

.popover-row-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.popover-row-val.text-did {
  color: var(--ds-data-did);
}

.popover-row-val.text-thinking {
  color: var(--ds-data-thinking);
}

.trend-v2-legend {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 4px 0 11px;
  display: flex;
}

.trend-v2-legend-item {
  align-items: center;
  gap: 8px;
  display: flex;
}

.legend-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  display: inline-block;
}

.legend-dot.did {
  background: var(--ds-data-did);
}

.legend-dot.thinking {
  background: var(--ds-data-thinking);
}

.trend-v2-insight {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle);
  min-height: 38px;
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  line-height: 1.5;
  display: flex;
}

.trend-insight-spark {
  width: 14px;
  height: 14px;
  color: var(--ds-brand);
}

.overview-block {
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding-top: 10px;
  display: flex;
}

.overview-stats-column {
  flex-direction: column;
  flex: 2.1;
  justify-content: space-around;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.overview-stat-card {
  border-radius: var(--ds-radius-lg);
  background: none;
  grid-template-columns: minmax(66px, .72fr) minmax(0, 1.8fr);
  align-items: stretch;
  column-gap: 12px;
  min-width: 0;
  min-height: 58px;
  padding: 8px 10px;
  display: grid;
}

.overview-stat-summary {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.overview-stat-label {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.overview-stat-title {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  overflow: hidden;
}

.overview-stat-num {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-body);
  font-weight: 800;
  line-height: 1;
}

.overview-stat-chart {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.overview-stat-change {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
  white-space: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
  display: flex;
}

.overview-stat-change-value {
  color: var(--ds-ink-muted);
  font-weight: 600;
}

.overview-stat-trend-arrow {
  color: var(--ds-brand);
}

.overview-stat-sparkline {
  opacity: .85;
  width: 100%;
  height: 16px;
  display: block;
}

.overview-stat-sparkline.did path {
  stroke: var(--ds-data-did);
}

.overview-stat-sparkline.thinking path {
  stroke: var(--ds-data-thinking);
}

.overview-donut-card {
  border-left: 1px solid var(--ds-border);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 9px 9px 9px 14px;
  display: flex;
}

.overview-donut-title {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  margin-bottom: 6px;
  font-weight: 600;
}

.overview-donut-content {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.overview-donut-canvas {
  width: 72px;
  height: 72px;
  display: block;
}

.overview-donut-legend {
  flex-direction: column;
  gap: 4px;
  width: 100%;
  display: flex;
}

.overview-donut-legend-row {
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  display: flex;
}

.overview-legend-dot-wrap {
  align-items: center;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.overview-legend-label {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  font-weight: 500;
}

.overview-legend-percent {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  font-weight: 700;
}

.trend-calendar-panel {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 16px 14px 14px;
  overflow: hidden;
}

.trend-calendar-head {
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 12px;
  display: flex;
}

.trend-calendar-top-row {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 24px;
  display: flex;
}

.trend-calendar-title {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-title);
  font-weight: 700;
  line-height: 1.2;
}

.trend-calendar-link {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  white-space: nowrap;
  align-items: center;
  gap: 3px;
  font-weight: 500;
  transition: color .15s;
  display: inline-flex;
}

.trend-calendar-link:hover {
  color: var(--ds-brand);
}

.trend-calendar-link svg {
  width: 13px;
  height: 13px;
}

.calendar-month-switch {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 32px;
  padding: 0 6px;
  transition: border-color .15s, background .15s;
  display: flex;
}

.calendar-month-switch:hover {
  border-color: var(--ds-border-hover);
}

.calendar-month-switch > button {
  width: 26px;
  height: 26px;
  color: var(--ds-ink-muted);
  border-radius: 50%;
  flex: 0 0 26px;
  justify-content: center;
  align-items: center;
  transition: background .15s, color .15s;
  display: flex;
}

.calendar-month-switch > button:hover {
  background: var(--ds-border);
  color: var(--ds-ink);
}

.calendar-month-switch > button svg {
  width: 14px;
  height: 14px;
}

.calendar-month-label, .calendar-month-switch > span {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  letter-spacing: -.01em;
  white-space: nowrap;
  font-weight: 650;
}

.calendar-v2-heading {
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 10px;
  display: flex;
}

.mini-calendar {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 4px;
}

.calendar-grid {
  box-sizing: border-box;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
}

.calendar-weekdays {
  color: var(--ds-ink-light);
  text-align: center;
  align-items: center;
  height: 26px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
}

.calendar-weekdays span.is-weekend {
  color: var(--ds-ink-light);
  opacity: .75;
}

.calendar-day {
  height: 32px;
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  border-radius: var(--ds-radius-sm);
  justify-content: center;
  align-items: center;
  transition: background .12s;
  display: flex;
  position: relative;
}

.calendar-day:hover:not(:disabled):not(.selected) {
  background: var(--ds-surface-subtle);
}

.calendar-day.outside {
  color: var(--ds-ink-light);
  opacity: .3;
  cursor: default;
}

.calendar-day.selected > span {
  background: var(--ds-brand);
  width: 28px;
  height: 28px;
  color: var(--ds-surface);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  display: flex;
  box-shadow: 0 2px 6px #4a7c5947;
}

.calendar-dot {
  background: var(--ds-brand);
  border-radius: 50%;
  width: 4px;
  height: 4px;
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
}

.calendar-day.selected .calendar-dot {
  background: var(--ds-surface);
  bottom: 3px;
}

.calendar-selected-card {
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-subtle);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 14px;
  padding: 12px;
  text-decoration: none;
  transition: all .16s;
  display: block;
  overflow: hidden;
}

.calendar-selected-card.is-recorded {
  cursor: pointer;
}

.calendar-selected-card.is-recorded:hover {
  border-color: var(--ds-brand);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  transform: translateY(-1px);
}

.calendar-selected-main {
  flex-direction: column;
  gap: 5px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
}

.calendar-selected-head {
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
}

.calendar-selected-date {
  color: var(--ds-brand);
  background: var(--ds-brand-soft);
  border-radius: var(--ds-radius-pill);
  white-space: nowrap;
  flex: none;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
}

.calendar-selected-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 0;
  min-width: 0;
  font-size: var(--ds-font-size-caption);
  color: var(--ds-ink);
  flex: 1;
  font-weight: 680;
  display: block;
  overflow: hidden;
}

.calendar-selected-arrow {
  width: 14px;
  height: 14px;
  color: var(--ds-ink-light);
  flex: none;
  transition: transform .15s, color .15s;
}

.calendar-selected-card.is-recorded:hover .calendar-selected-arrow {
  color: var(--ds-brand);
  transform: translateX(2px);
}

.calendar-selected-summary {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  color: var(--ds-ink-muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  display: block;
  overflow: hidden;
}

.calendar-selected-meta {
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  overflow: hidden;
}

.calendar-selected-meta .meta-sep {
  color: var(--ds-ink-light);
  opacity: .5;
}

.calendar-selected-card.is-empty {
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
}

.calendar-selected-card.is-empty.is-actionable {
  cursor: pointer;
}

.calendar-selected-card.is-empty.is-actionable:hover {
  border-color: var(--ds-brand);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  transform: translateY(-1px);
}

.calendar-selected-empty-copy {
  flex: 1;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.calendar-selected-empty-date {
  font-size: var(--ds-font-size-caption);
  color: var(--ds-ink);
  white-space: nowrap;
  font-weight: 680;
}

.calendar-selected-empty-label {
  color: var(--ds-ink-light);
  white-space: nowrap;
  font-size: 12px;
}

.calendar-selected-action-btn {
  color: var(--ds-brand);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand-soft);
  white-space: nowrap;
  flex: none;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 650;
  transition: all .15s;
  display: inline-flex;
}

.calendar-selected-action-btn svg {
  width: 12px;
  height: 12px;
  transition: transform .15s;
}

.calendar-selected-card.is-empty.is-actionable:hover .calendar-selected-action-btn {
  background: var(--ds-brand);
  color: #fff;
}

.calendar-selected-card.is-empty.is-actionable:hover .calendar-selected-action-btn svg {
  transform: translateX(2px);
}

.calendar-selected-card.is-empty.is-disabled {
  opacity: .7;
}

.calendar-record-detail {
  border-top: 1px solid var(--ds-border);
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
  margin-top: 11px;
  padding: 10px 4px 2px;
  display: flex;
}

.calendar-record-panel.is-actionable:hover {
  background: var(--ds-surface-subtle);
  border-radius: var(--ds-radius-md);
}

.calendar-record-main {
  align-items: center;
  gap: 9px;
  min-width: 0;
  display: flex;
}

.calendar-record-copy {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.calendar-record-title-line {
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.calendar-record-date {
  color: var(--ds-brand);
  font-size: var(--ds-font-size-caption);
  flex: none;
  font-weight: 680;
}

.calendar-record-title {
  min-width: 0;
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 690;
  overflow: hidden;
}

.calendar-record-summary {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.calendar-record-counts {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  align-items: center;
  gap: 5px;
  display: flex;
}

.detail-arrow {
  width: 14px;
  height: 14px;
  color: var(--ds-ink-muted);
  margin-left: auto;
}

.retro-document {
  width: 100%;
}

.detail-header-bar {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-card);
  background: var(--ds-surface);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 13px 18px;
  display: flex;
}

.detail-calendar-card {
  flex: 1;
  align-items: center;
  gap: 14px;
  min-width: 0;
  display: flex;
}

.record-header-fields {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.record-header-title-row {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.record-header-date-main {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.record-header-title-text {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-body);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
  line-height: 1.4;
  overflow: hidden;
}

.record-header-date-meta {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
}

.record-header-date-row {
  align-items: center;
  gap: 8px;
  display: flex;
}

.record-date-label {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
}

.record-date-inline-picker {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  height: 28px;
  color: var(--ds-ink-muted);
  cursor: pointer;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 9px;
  font-size: 12px;
  transition: border-color .15s, background .15s;
  display: inline-flex;
}

.record-date-inline-picker:hover, .record-date-inline-picker:focus-within {
  border-color: var(--ds-brand);
  background: var(--ds-surface);
}

.record-date-inline-picker svg {
  width: 13px;
  height: 13px;
  color: var(--ds-ink-light);
  flex-shrink: 0;
}

.record-date-inline-picker .record-date-input {
  height: 24px;
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  background: none;
  border: 0;
  outline: none;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
}

.record-date-input {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-subtle);
  height: 30px;
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  padding: 0 10px;
}

.record-date-input:focus {
  border-color: var(--ds-brand);
}

.autosave-status {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-weight: 500;
  display: inline-flex;
}

.autosave-status svg {
  width: 12px;
  height: 12px;
  color: var(--ds-brand);
}

.entry-module {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  min-height: 52px;
  box-shadow: var(--ds-shadow-card);
  background: var(--ds-surface);
  margin-bottom: 12px;
  padding: 15px 18px;
  transition: border-color .15s, box-shadow .15s;
}

.entry-module:focus-within {
  border-color: var(--ds-border-hover);
  box-shadow: var(--ds-shadow-hover);
}

.minimal-module-header {
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  display: flex;
}

.module-semantic-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
}

.module-semantic-dot.is-did {
  background: var(--ds-data-did);
}

.module-semantic-dot.is-thinking {
  background: var(--ds-data-thinking);
}

.minimal-module-header > .minimal-module-title {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  letter-spacing: .04em;
  font-weight: 700;
}

.minimal-module-header > .minimal-module-subtitle {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
  font-weight: 400;
}

.module-item-count {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 500;
}

.inline-todo-container {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.inline-todo-row {
  border-bottom: 1px solid var(--ds-border-subtle);
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  display: flex;
}

.inline-todo-container > .inline-todo-row:last-of-type {
  border-bottom: 0;
}

.todo-bullet {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  position: relative;
}

.todo-bullet:after {
  content: "";
  background: var(--ds-ink);
  opacity: .55;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.inline-todo-input, .inline-todo-text {
  min-width: 0;
  color: var(--ds-ink);
  font-size: var(--ds-font-size-body);
  word-break: break-word;
  background: none;
  border: 0;
  outline: none;
  flex: 1;
  padding: 2px 0;
  line-height: 1.5;
}

.inline-todo-input::placeholder {
  color: var(--ds-ink-light);
}

.inline-todo-del {
  background: var(--ds-surface-subtle);
  width: 24px;
  height: 24px;
  color: var(--ds-ink-muted);
  border-radius: 50%;
  flex: 0 0 24px;
  justify-content: center;
  align-items: center;
  transition: background .15s, color .15s;
  display: flex;
}

.inline-todo-del svg {
  width: 14px;
  height: 14px;
}

.inline-todo-del:hover {
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.minimal-add-row {
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0 4px;
  display: flex;
}

.add-icon-circle {
  background: var(--ds-surface-subtle);
  width: 24px;
  height: 24px;
  color: var(--ds-ink-muted);
  border-radius: 50%;
  flex: 0 0 24px;
  justify-content: center;
  align-items: center;
  transition: background .15s, color .15s;
  display: flex;
}

.add-icon-circle svg {
  width: 14px;
  height: 14px;
}

.inline-todo-add-label {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  font-weight: 500;
}

.minimal-add-row:hover .add-icon-circle {
  background: var(--ds-brand-soft);
  color: var(--ds-brand);
}

.minimal-add-row:hover .inline-todo-add-label {
  color: var(--ds-brand);
}

.inline-thinking-container {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.minimal-thinking-card {
  border-bottom: 1px solid var(--ds-border-subtle);
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0 24px;
  display: flex;
  position: relative;
}

.inline-thinking-container > .minimal-thinking-card:last-of-type {
  border-bottom: 0;
}

.inline-thinking-textarea, .inline-thinking-text {
  resize: vertical;
  min-width: 0;
  color: var(--ds-ink);
  font-size: var(--ds-font-size-body);
  white-space: pre-wrap;
  word-break: break-word;
  background: none;
  border: 0;
  outline: none;
  flex: 1;
  padding: 0;
  line-height: 1.6;
}

.inline-thinking-textarea {
  min-height: 68px;
}

.inline-thinking-textarea::placeholder {
  color: var(--ds-ink-light);
}

.thinking-char-count {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
  line-height: 1;
  position: absolute;
  bottom: 6px;
  right: 4px;
}

.empty-entry {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  padding: 8px 0 4px;
}

.inline-toast {
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  font-size: var(--ds-font-size-caption);
  text-align: center;
  margin: 6px 0;
  padding: 8px 12px;
  font-weight: 500;
}

.record-action-dock {
  padding: 8px 4px calc(20px + env(safe-area-inset-bottom));
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 6px 0 0;
  display: flex;
}

.record-dock-shortcut {
  color: var(--ds-ink-light);
  align-items: center;
  gap: 4px;
  font-size: 12px;
  display: inline-flex;
}

.record-dock-shortcut kbd {
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.2;
}

.record-dock-actions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.record-cancel-button {
  border-radius: var(--ds-radius-md);
  min-height: 36px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
}

.save-record-button {
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand);
  min-width: 116px;
  min-height: 36px;
  color: var(--ds-surface);
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, transform .12s;
  display: inline-flex;
}

.save-record-button:hover:not(:disabled) {
  background: var(--ds-brand-hover);
}

.save-record-button:active:not(:disabled) {
  background: var(--ds-brand-hover);
  transform: scale(.99);
}

.save-record-button.disabled, .save-record-button:disabled {
  opacity: .55;
}

.profile-card {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border-subtle);
  background: var(--ds-surface);
  width: 100%;
  min-height: 84px;
  box-shadow: var(--ds-shadow-card);
  cursor: pointer;
  text-align: left;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 20px;
  padding: 16px 20px;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
  display: flex;
}

.profile-card.is-actionable:hover {
  background: var(--ds-surface-subtle);
  border-color: var(--ds-border);
  box-shadow: var(--ds-shadow-hover);
}

.profile-card.is-actionable:active {
  transform: scale(.995);
}

.profile-card-main {
  flex: 1;
  align-items: center;
  gap: 14px;
  min-width: 0;
  display: flex;
}

.profile-avatar {
  background: var(--ds-brand-soft);
  width: 48px;
  height: 48px;
  color: var(--ds-brand-hover);
  font-size: var(--ds-font-size-title);
  border: 1px solid #4a7c593d;
  border-radius: 50%;
  flex: 0 0 48px;
  place-items: center;
  font-weight: 700;
  display: grid;
}

.profile-info {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.profile-title, .profile-subtitle {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.profile-title {
  color: var(--ds-ink);
  letter-spacing: -.01em;
  font-size: 16px;
  font-weight: 700;
}

.profile-subtitle {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
}

.profile-card-action {
  width: 18px;
  height: 18px;
  color: var(--ds-ink-light);
  justify-content: center;
  align-items: center;
  display: flex;
}

.profile-card-action svg {
  width: 16px;
  height: 16px;
  color: var(--ds-ink-light);
}

.settings-group {
  margin-bottom: 22px;
}

.settings-group-title {
  color: var(--ds-ink-muted);
  letter-spacing: -.01em;
  margin: 0 0 8px 4px;
  font-size: 12.5px;
  font-weight: 600;
  display: block;
}

.settings-list {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border-subtle);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  overflow: hidden;
}

.settings-list.in-sheet {
  box-shadow: none;
  border: 1px solid var(--ds-border);
}

.settings-row {
  border-top: 1px solid var(--ds-border-subtle);
  width: 100%;
  min-height: 52px;
  color: var(--ds-ink);
  font-size: var(--ds-font-size-body);
  text-align: left;
  cursor: pointer;
  background: none;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s;
  display: flex;
}

.settings-row:first-child {
  border-top: 0;
}

.settings-row.is-actionable:hover {
  background: var(--ds-surface-subtle);
}

.settings-row-label {
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.settings-row-icon {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-brand-soft);
  width: 28px;
  height: 28px;
  color: var(--ds-brand);
  flex: 0 0 28px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.settings-row-icon svg {
  width: 15px;
  height: 15px;
}

.settings-row-action {
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.settings-row-value {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  display: inline-flex;
}

.settings-row-chevron {
  width: 14px;
  height: 14px;
  color: var(--ds-ink-light);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.settings-row-chevron svg, .settings-row-action svg, .settings-row > svg {
  width: 14px;
  height: 14px;
  color: var(--ds-ink-light);
  flex-shrink: 0;
  transition: transform .15s, color .15s;
}

.settings-row.is-actionable:hover .settings-row-chevron svg, .settings-row.is-actionable:hover .settings-row-action svg {
  color: var(--ds-ink);
  transform: translateX(1.5px);
}

.settings-row.is-danger, .settings-row-danger {
  color: var(--ds-danger);
}

.settings-row.is-danger .settings-row-icon, .settings-row-danger .settings-row-icon {
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.settings-row.is-danger .settings-row-action, .settings-row.is-danger .settings-row-action svg, .settings-row.is-danger .settings-row-chevron svg {
  color: var(--ds-danger);
}

.theme-setting-row {
  cursor: default;
}

.theme-swatches {
  align-items: center;
  gap: 8px;
  display: flex;
}

.theme-swatch {
  border: 1px solid #0000;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  padding: 4px;
  transition: transform .14s, box-shadow .14s;
  display: flex;
}

.theme-swatch-color {
  background: var(--theme-color);
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.theme-swatch.selected {
  background: var(--theme-soft);
  border-color: var(--theme-color);
  box-shadow: 0 0 0 2px var(--theme-soft);
}

.theme-swatch:active {
  transform: scale(.88);
}

.about-text {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-body);
  line-height: 1.7;
}

.privacy-body {
  max-height: 55vh;
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  white-space: pre-wrap;
  line-height: 1.75;
  overflow-y: auto;
}

.modal-actions {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
  display: grid;
}

.modal-actions .button {
  width: 100%;
}

.dialog {
  border-radius: var(--ds-radius-lg);
  width: min(92vw, 400px);
  color: var(--ds-ink);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-floating);
  border: 0;
  padding: 0;
}

.dialog.sheet {
  width: min(92vw, 460px);
}

.dialog::backdrop {
  background: #0f141880;
}

.dialog-body {
  text-align: center;
  padding: 22px 20px 8px;
}

.dialog-body h2 {
  font-size: var(--ds-font-size-title);
  margin: 0 0 8px;
  font-weight: 700;
}

.dialog-text p {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-body);
  line-height: 1.55;
}

.dialog-actions {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 20px 20px;
  display: grid;
}

.dialog-actions .button {
  width: 100%;
}

.sheet-header {
  border-bottom: 1px solid var(--ds-border);
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px 12px;
  display: flex;
}

.sheet-header h2 {
  font-size: var(--ds-font-size-title);
  font-weight: 700;
}

.sheet-close {
  border-radius: var(--ds-radius-sm);
  width: 30px;
  height: 30px;
  color: var(--ds-ink-muted);
  justify-content: center;
  align-items: center;
  display: flex;
}

.sheet-close svg {
  width: 16px;
  height: 16px;
}

.sheet-close:hover {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink);
}

.sheet-body {
  padding: 16px 18px 20px;
}

.account-card, .space-key-card {
  gap: 12px;
  display: grid;
}

.account-card h2, .space-key-card h2 {
  display: none;
}

.account-card > p, .space-key-card > p {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  line-height: 1.65;
}

.account-form-grid {
  gap: 12px;
  display: grid;
}

.auth-field {
  gap: 5px;
  display: grid;
}

.auth-field label {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  font-weight: 500;
}

.auth-field input, .password-field {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  width: 100%;
  min-height: 42px;
  color: var(--ds-ink);
  background: var(--ds-surface);
  transition: border-color .15s, box-shadow .15s;
}

.auth-field input {
  font-size: var(--ds-font-size-body);
  padding: 0 12px;
}

.auth-field small {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
}

.password-field {
  align-items: center;
  display: flex;
}

.password-field input {
  background: none;
  border: 0;
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 4px 0 12px;
}

.password-toggle {
  border-radius: var(--ds-radius-sm);
  width: 36px;
  height: 36px;
  color: var(--ds-ink-light);
  place-items: center;
  margin-right: 3px;
  display: grid;
}

.password-toggle svg {
  width: 17px;
  height: 17px;
}

.password-toggle:hover {
  color: var(--ds-ink);
  background: var(--ds-surface-subtle);
}

.auth-field input:focus, .password-field:focus-within, .space-access-row input:focus {
  border-color: var(--ds-brand);
  box-shadow: var(--ds-shadow-hover);
}

.form-message {
  font-size: var(--ds-font-size-caption);
}

.form-message.error {
  color: var(--ds-danger);
}

.form-message.success {
  color: var(--ds-brand-hover);
}

.space-key-result {
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand-soft);
  gap: 6px;
  padding: 12px;
  display: grid;
}

.space-key-result label {
  color: var(--ds-brand-hover);
  font-size: var(--ds-font-size-caption);
  font-weight: 600;
}

.space-key-result input {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--ds-font-size-caption);
  padding: 8px 10px;
}

.space-key-result small {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  line-height: 1.55;
}

.space-access-form {
  gap: 8px;
  margin-top: 12px;
  display: grid;
}

.space-access-form > label {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  font-weight: 500;
}

.space-access-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  display: grid;
}

.space-access-row input {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  width: 100%;
  min-width: 0;
  min-height: 42px;
  font-size: var(--ds-font-size-body);
  padding: 0 12px;
}

.dialog.sheet:has(.model-config-modal-body) {
  width: min(92vw, 520px);
}

.model-config-modal-body {
  gap: 16px;
  display: grid;
}

.model-config-security-banner {
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand-soft);
  border: 1px solid #52a3a833;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.security-banner-icon {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  width: 28px;
  height: 28px;
  color: var(--ds-brand);
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.security-banner-icon svg {
  width: 16px;
  height: 16px;
}

.security-banner-text {
  font-size: var(--ds-font-size-caption);
  color: var(--ds-ink-muted);
  line-height: 1.55;
}

.security-banner-text strong {
  color: var(--ds-ink);
  margin-bottom: 2px;
  font-weight: 600;
  display: block;
}

.security-banner-text p {
  margin: 0;
}

.security-banner-text p strong {
  color: var(--ds-brand-hover);
}

.model-preset-section {
  gap: 8px;
  display: grid;
}

.model-field-label {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  font-weight: 500;
}

.model-preset-pills {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.model-preset-pill {
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  cursor: pointer;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  transition: all .15s;
  display: inline-flex;
}

.model-preset-pill small {
  color: var(--ds-ink-light);
  background: var(--ds-surface-subtle);
  border-radius: var(--ds-radius-sm);
  padding: 1px 5px;
  font-size: 11px;
  transition: all .15s;
}

.model-preset-pill:hover {
  background: var(--ds-surface-subtle);
  border-color: var(--ds-border-hover);
}

.model-preset-pill.is-active {
  background: var(--ds-brand);
  color: #fff;
  border-color: var(--ds-brand);
}

.model-preset-pill.is-active small {
  color: #fff;
  background: #ffffff38;
}

.model-config-form {
  gap: 14px;
  display: grid;
}

.field-label-row {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.quick-models-list {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  display: flex;
}

.quick-models-list span {
  color: var(--ds-ink-light);
  font-size: 11px;
}

.quick-model-btn {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border);
  color: var(--ds-ink-muted);
  cursor: pointer;
  padding: 2px 7px;
  font-size: 11px;
  transition: all .12s;
}

.quick-model-btn:hover {
  color: var(--ds-ink);
  border-color: var(--ds-border-hover);
}

.quick-model-btn.is-selected {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  border-color: var(--ds-brand);
  font-weight: 600;
}

.key-saved-badge {
  color: var(--ds-brand-hover);
  background: var(--ds-brand-soft);
  border-radius: var(--ds-radius-sm);
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
}

.key-saved-badge svg {
  width: 12px;
  height: 12px;
}

.field-tip {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.key-help-link {
  color: var(--ds-brand);
  font-weight: 500;
  text-decoration: none;
}

.key-help-link:hover {
  color: var(--ds-brand-hover);
  text-decoration: underline;
}

.model-feedback-msg {
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-font-size-caption);
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  line-height: 1.5;
  display: flex;
}

.model-feedback-msg svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.model-feedback-msg.is-success {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
}

.model-feedback-msg.is-error {
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.model-tiered-toggle-row {
  margin-top: -4px;
}

.model-tiered-toggle-btn {
  color: var(--ds-brand);
  font-size: var(--ds-font-size-caption);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-weight: 500;
  transition: color .15s;
  display: inline-flex;
}

.model-tiered-toggle-btn:hover {
  color: var(--ds-brand-hover);
}

.model-tiered-toggle-btn svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.model-tiered-toggle-btn small {
  color: var(--ds-ink-light);
  font-size: 11px;
  font-weight: normal;
}

.model-tiered-panel {
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  margin-top: -6px;
  padding: 12px 14px;
}

.model-tiered-grid {
  gap: 12px;
  display: grid;
}

.model-config-actions {
  border-top: 1px solid var(--ds-border);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  padding-top: 8px;
  display: flex;
}

.test-conn-btn {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.test-conn-btn svg {
  width: 14px;
  height: 14px;
}

.action-right-group {
  align-items: center;
  gap: 8px;
  display: flex;
}

.analysis-page-shell {
  gap: 18px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
}

.analysis-ribbon-bar {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  display: flex;
}

.analysis-ribbon-left {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.analysis-status-dot {
  background: var(--ds-ink-light);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.analysis-status-dot.is-online {
  background: #10b981;
  box-shadow: 0 0 0 3px #10b98126;
}

.analysis-ribbon-title {
  color: var(--ds-ink);
  font-size: 12px;
  font-weight: 600;
}

.analysis-ribbon-sep {
  color: var(--ds-border-hover);
  font-size: 12px;
}

.analysis-ribbon-tag {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
  font-size: 11.5px;
  font-family: var(--font-mono, monospace);
  padding: 2px 7px;
}

.analysis-ribbon-tag.is-muted {
  color: var(--ds-ink-light);
}

.analysis-ribbon-right {
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  display: flex;
}

.analysis-ribbon-right .sample-tool-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.analysis-ribbon-right .sample-tool-btn svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

.doc-monitor-bento {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  gap: 18px;
  padding: 22px 24px;
  display: grid;
}

.doc-monitor-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.doc-monitor-kicker {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ds-brand);
  font-size: 11px;
  font-weight: 700;
}

.doc-monitor-title {
  letter-spacing: -.02em;
  color: var(--ds-ink);
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 700;
}

.doc-monitor-rate-badge {
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.doc-rate-number {
  letter-spacing: -.03em;
  color: var(--ds-brand);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}

.doc-rate-desc {
  color: var(--ds-ink-light);
  font-size: 11.5px;
  font-weight: 500;
}

.doc-progress-container {
  gap: 8px;
  display: grid;
}

.doc-progress-bar {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  width: 100%;
  height: 8px;
  display: flex;
  overflow: hidden;
}

.doc-progress-segment {
  height: 100%;
  transition: width .3s;
  display: block;
}

.doc-progress-segment.is-completed {
  background: var(--ds-brand);
}

.doc-progress-segment.is-progress {
  background: #3b82f6;
}

.doc-progress-segment.is-failed {
  background: var(--ds-danger);
}

.doc-progress-legend-row {
  color: var(--ds-ink-muted);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.doc-progress-summary strong {
  color: var(--ds-ink);
  font-weight: 600;
}

.doc-progress-indicators {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  display: flex;
}

.doc-legend-item {
  color: var(--ds-ink-light);
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  display: inline-flex;
}

.doc-legend-item strong {
  color: var(--ds-ink);
  font-weight: 600;
}

.legend-dot {
  border-radius: 50%;
  width: 6.5px;
  height: 6.5px;
  display: inline-block;
}

.legend-dot.is-completed {
  background: var(--ds-brand);
}

.legend-dot.is-progress {
  background: #3b82f6;
}

.legend-dot.is-unprocessed {
  background: var(--ds-border-hover);
}

.legend-dot.is-failed {
  background: var(--ds-danger);
}

.doc-metric-grid {
  background: var(--ds-border);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.doc-metric-card {
  background: var(--ds-surface);
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px 14px;
  display: flex;
}

.doc-metric-card.is-highlight {
  background: var(--ds-brand-soft);
}

.doc-metric-card.is-clickable {
  cursor: pointer;
  transition: background-color .15s;
}

.doc-metric-card.is-clickable:hover {
  background: var(--ds-surface-subtle);
}

.doc-metric-label {
  color: var(--ds-ink-light);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11.5px;
  font-weight: 500;
  overflow: hidden;
}

.doc-metric-value {
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink);
  letter-spacing: -.02em;
  font-size: 20px;
  font-weight: 700;
}

.doc-metric-sub {
  color: var(--ds-ink-light);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10.5px;
  overflow: hidden;
}

.text-brand {
  color: var(--ds-brand) !important;
}

.text-amber {
  color: #d97706 !important;
}

.text-danger {
  color: var(--ds-danger) !important;
}

.record-analysis-duration-pill {
  color: var(--ds-ink-light);
  background: var(--ds-surface-secondary, #0000000a);
  border-radius: var(--ds-radius-pill);
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
}

.takeaways-duration-tag {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
}

.takeaways-duration-tag strong {
  color: var(--ds-ink);
  font-weight: 600;
}

.analysis-duration-chip {
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink);
  font-weight: 600;
}

.doc-monitor-actions-row {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
  display: flex;
}

.doc-actions-left {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.doc-enqueue-group {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.doc-batch-size-selector {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border-subtle);
  align-items: center;
  gap: 2px;
  padding: 2px;
  display: inline-flex;
}

.batch-chip {
  border-radius: var(--ds-radius-pill);
  color: var(--ds-ink-muted);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  transition: all .15s;
}

.batch-chip:hover:not(:disabled) {
  color: var(--ds-ink);
}

.batch-chip.is-active {
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px #0000000f;
}

.doc-actions-right {
  align-items: center;
  display: flex;
}

.doc-live-status-info {
  color: var(--ds-ink-muted);
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  display: inline-flex;
}

.doc-live-status-info strong {
  color: var(--ds-ink);
  font-weight: 600;
}

.doc-live-status-icon {
  width: 14px;
  height: 14px;
  color: var(--ds-primary, var(--ds-brand));
  flex-shrink: 0;
}

.doc-remaining-hint {
  color: var(--ds-ink-light);
  font-size: 12px;
}

.doc-remaining-hint strong {
  color: var(--ds-ink);
  font-weight: 600;
}

.doc-stop-all-btn {
  color: var(--ds-danger);
  background: var(--ds-surface);
  border-color: #dc262647;
  transition: all .15s;
}

.doc-stop-all-btn:hover:not(:disabled) {
  border-color: var(--ds-danger);
  color: var(--ds-danger);
  background: #dc262614;
}

.doc-stop-all-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.worker-current-box {
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand-soft);
  border: 1px solid #4a7c592e;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  display: grid;
}

.worker-current-pulse {
  background: #3b82f6;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  animation: 1.4s ease-in-out infinite worker-pulse;
  box-shadow: 0 0 0 3px #3b82f633;
}

.worker-current-info {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
  display: flex;
}

.worker-current-tag {
  color: var(--ds-brand-hover);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

.worker-current-link {
  color: var(--ds-brand-hover);
  font-size: 13.5px;
  font-weight: 650;
}

.worker-stage-badge {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  color: var(--ds-brand-hover);
  padding: 1px 7px;
  font-size: 11.5px;
  font-weight: 600;
}

.worker-current-item-preview {
  color: var(--ds-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-basis: 100%;
  font-size: 12px;
  overflow: hidden;
}

.worker-attempts-badge {
  color: var(--ds-ink-light);
  white-space: nowrap;
  font-size: 11.5px;
}

.worker-current-actions {
  flex: none;
  align-items: center;
  gap: 10px;
  display: flex;
}

.worker-current-stop-btn {
  border-radius: var(--ds-radius-sm);
  color: var(--ds-danger);
  background: var(--ds-surface);
  cursor: pointer;
  border: 1px solid #dc262647;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  transition: all .15s;
  display: inline-flex;
}

.worker-current-stop-btn:hover:not(:disabled) {
  border-color: var(--ds-danger);
  background: #dc262614;
}

.worker-current-stop-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.worker-current-stop-btn svg {
  width: 12px;
  height: 12px;
}

.worker-notice-bar {
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  font-size: 12.5px;
  display: flex;
}

.worker-notice-bar svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.worker-error-bar {
  border-radius: var(--ds-radius-md);
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  font-size: 12.5px;
  display: flex;
}

.worker-error-bar svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.analysis-log-section {
  gap: 12px;
  margin-top: 4px;
  display: grid;
}

.analysis-log-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.log-filter-segmented {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border-subtle);
  align-items: center;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.filter-tab {
  border-radius: var(--ds-radius-pill);
  color: var(--ds-ink-muted);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 500;
  transition: all .15s;
}

.filter-tab:hover {
  color: var(--ds-ink);
}

.filter-tab.is-active {
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px #0000000f;
}

.analysis-log-list-modern {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.analysis-run-card {
  border-bottom: 1px solid var(--ds-border);
}

.analysis-run-card:last-child {
  border-bottom: none;
}

.analysis-run-summary {
  cursor: pointer;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 14px 18px;
  list-style: none;
  transition: background .12s;
  display: grid;
}

.analysis-run-summary::-webkit-details-marker {
  display: none;
}

.analysis-run-summary:hover, .analysis-run-details[open] .analysis-run-summary {
  background: var(--ds-surface-subtle);
}

.analysis-dot {
  background: var(--ds-ink-light);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-top: 6px;
}

.analysis-dot.succeeded {
  background: var(--ds-brand);
}

.analysis-dot.running, .analysis-dot.retrying {
  background: #3b82f6;
  animation: 1.4s ease-in-out infinite worker-pulse;
  box-shadow: 0 0 0 3px #3b82f633;
}

.analysis-dot.failed {
  background: var(--ds-danger);
}

.analysis-dot.pending {
  background: var(--ds-border-hover);
}

.analysis-dot.cancelled {
  background: var(--ds-ink-light);
}

.analysis-row-main {
  min-width: 0;
}

.analysis-row-header {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.analysis-date-link {
  color: var(--ds-ink);
  font-size: 14px;
  font-weight: 650;
  transition: color .15s;
}

.analysis-date-link:hover {
  color: var(--ds-brand-hover);
}

.analysis-row-desc {
  color: var(--ds-ink-muted);
  margin: 3px 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
}

.analysis-row-meta {
  color: var(--ds-ink-light);
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  display: flex;
}

.analysis-run-right {
  flex: none;
  align-items: center;
  gap: 12px;
  display: flex;
}

.analysis-row-stop-btn {
  border-radius: var(--ds-radius-sm);
  color: var(--ds-danger);
  background: var(--ds-surface);
  cursor: pointer;
  border: 1px solid #dc262647;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  transition: all .15s;
  display: inline-flex;
}

.analysis-row-stop-btn:hover:not(:disabled) {
  border-color: var(--ds-danger);
  background: #dc262614;
}

.analysis-row-stop-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.analysis-row-stop-btn svg {
  width: 11px;
  height: 11px;
}

.analysis-row-retry-btn {
  border-radius: var(--ds-radius-sm);
  color: var(--ds-brand-dark);
  background: var(--ds-brand-soft);
  cursor: pointer;
  border: 1px solid #16653438;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  transition: all .15s;
  display: inline-flex;
}

.analysis-row-retry-btn:hover:not(:disabled) {
  border-color: var(--ds-brand);
  background: #22c55e29;
}

.analysis-row-retry-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.analysis-row-retry-btn svg {
  width: 11px;
  height: 11px;
}

.analysis-run-toggle {
  color: var(--ds-ink-light);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 12px;
  display: inline-flex;
}

.analysis-run-toggle svg {
  color: var(--ds-ink-light);
  transition: transform .15s;
  width: 13px !important;
  height: 13px !important;
}

.analysis-run-details[open] .analysis-run-toggle svg {
  transform: rotate(90deg);
}

.analysis-stage-timeline {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border-subtle);
  margin: 0 18px 14px 40px;
  padding: 0;
  list-style: none;
}

.analysis-stage-step {
  grid-template-columns: 100px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 12px;
  display: grid;
}

.analysis-stage-step + .analysis-stage-step {
  border-top: 1px solid var(--ds-border-subtle);
}

.stage-time {
  color: var(--ds-ink-light);
  font-size: 11px;
}

.stage-desc {
  color: var(--ds-ink-muted);
}

.rebuild-disclosure-card {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  margin-top: 6px;
  overflow: hidden;
}

.rebuild-disclosure-summary {
  cursor: pointer;
  color: var(--ds-ink-muted);
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  font-size: 13px;
  list-style: none;
  transition: background .12s;
  display: flex;
}

.rebuild-disclosure-summary::-webkit-details-marker {
  display: none;
}

.rebuild-disclosure-summary:hover {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink);
}

.rebuild-summary-left {
  color: var(--ds-ink);
  align-items: center;
  gap: 8px;
  font-weight: 600;
  display: inline-flex;
}

.rebuild-summary-left svg {
  width: 15px;
  height: 15px;
  color: var(--ds-ink-light);
}

.rebuild-summary-hint {
  color: var(--ds-ink-light);
  font-size: 11.5px;
}

.rebuild-disclosure-content {
  border-top: 1px solid var(--ds-border);
  background: var(--ds-bg);
  gap: 12px;
  padding: 16px 18px;
  display: grid;
}

.rebuild-actions-bar {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.rebuild-preview-container {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  padding: 12px 14px;
}

.rebuild-preview-badge {
  color: var(--ds-ink);
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.rebuild-manifest-details summary {
  color: var(--ds-brand-hover);
  cursor: pointer;
  font-size: 12px;
}

.rebuild-manifest-list {
  gap: 8px;
  max-height: 240px;
  margin-top: 8px;
  display: grid;
  overflow-y: auto;
}

.rebuild-manifest-item {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-subtle);
  padding: 8px 10px;
  font-size: 12px;
}

.rebuild-manifest-item a {
  color: var(--ds-brand-hover);
  font-weight: 600;
}

.rebuild-manifest-item p {
  color: var(--ds-ink-muted);
  margin: 2px 0 0;
}

.rebuild-batch-item {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: 12.5px;
  display: flex;
}

.rebuild-batch-info {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.rebuild-batch-failed {
  color: var(--ds-danger);
}

.rebuild-batch-conflict {
  color: #d97706;
}

.rebuild-batch-btns {
  align-items: center;
  gap: 6px;
  display: flex;
}

@media (max-width: 1024px) {
  .doc-metric-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .doc-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .doc-monitor-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .doc-monitor-rate-badge {
    align-items: flex-start;
  }
}

.welcome-shell {
  background: var(--ds-surface);
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  min-height: 100vh;
  display: grid;
}

.welcome-panel {
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 7vw, 96px);
  display: flex;
}

.welcome-brand {
  font-size: var(--ds-font-size-title);
  align-items: center;
  gap: 11px;
  margin-bottom: 44px;
  font-weight: 700;
  display: flex;
}

.welcome-panel h1 {
  letter-spacing: -.02em;
  max-width: 560px;
  margin: 0 0 12px;
  font-size: clamp(26px, 3.8vw, 38px);
  font-weight: 700;
  line-height: 1.25;
}

.welcome-lead {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-body);
  margin: 0 0 24px;
}

.welcome-caption {
  max-width: 380px;
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
  margin: 20px 0 0;
}

.login-form {
  gap: 12px;
  width: min(100%, 380px);
  display: grid;
}

.login-form .button {
  width: 100%;
}

.recovery-disclosure {
  width: min(100%, 380px);
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  margin-top: 14px;
}

.recovery-disclosure summary {
  cursor: pointer;
  width: fit-content;
  color: var(--ds-brand-hover);
  padding: 4px 0;
  font-weight: 600;
}

.welcome-evidence {
  background: var(--ds-brand-soft);
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px);
  display: flex;
}

.evidence-number {
  color: var(--ds-brand);
  font-size: var(--ds-font-size-caption);
  letter-spacing: .08em;
  margin-top: 24px;
  font-weight: 700;
}

.evidence-number:first-child {
  margin-top: 0;
}

.welcome-evidence h2 {
  font-size: var(--ds-font-size-title);
  margin: 4px 0;
  font-weight: 700;
}

.welcome-evidence p {
  max-width: 320px;
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  line-height: 1.65;
}

.status-shell {
  background: var(--ds-content-bg);
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  display: grid;
}

.status-panel {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  width: min(100%, 380px);
  box-shadow: var(--ds-shadow-card);
  text-align: center;
  padding: 32px 24px;
}

.status-panel h1 {
  font-size: var(--ds-font-size-title);
  margin: 0 0 8px;
  font-weight: 700;
}

.status-panel p {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  margin: 0 0 20px;
}

.skeleton {
  border-radius: var(--ds-radius-md);
  background: linear-gradient(90deg, #f0f2f4 0%, #f9fafb 50%, #f0f2f4 100%) 0 0 / 200% 100%;
  animation: 1.5s ease-in-out infinite shimmer;
}

.skeleton-pill {
  border-radius: var(--ds-radius-pill) !important;
}

.skeleton-square {
  border-radius: var(--ds-radius-md);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.skeleton-title {
  width: 120px;
  height: 28px;
}

.skeleton-block {
  border-radius: var(--ds-radius-lg);
  height: 96px;
  margin-bottom: 12px;
}

.skeleton-row {
  border-radius: var(--ds-radius-lg);
  height: 70px;
  margin-bottom: 10px;
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

.skeleton-workbench-shell {
  gap: 20px;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: grid;
}

.skeleton-bento-card {
  border: none;
  border-bottom: 1px solid var(--ds-border);
  background: none;
  gap: 16px;
  padding: 4px 0 20px;
  display: grid;
}

.skeleton-bento-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.skeleton-metrics-grid {
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 14px 0;
  display: grid;
}

@media (max-width: 768px) {
  .skeleton-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.skeleton-metric-cell {
  border: none;
  border-right: 1px solid var(--ds-border-subtle);
  background: none;
  flex-direction: column;
  padding: 2px 18px;
  display: flex;
}

.skeleton-metric-cell:first-child {
  padding-left: 0;
}

.skeleton-metric-cell:last-child {
  border-right: none;
}

.skeleton-inset-list {
  background: none;
  border: none;
}

.skeleton-list-row {
  border-bottom: 1px solid var(--ds-border);
  align-items: flex-start;
  gap: 14px;
  padding: 16px 4px;
  display: flex;
}

.skeleton-list-row:last-child {
  border-bottom: none;
}

.skeleton-row-body {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.settings-group-title {
  color: var(--ds-ink-muted);
  margin: 0 4px 6px;
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.header-actions-group, .record-header-tools {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.ai-extract-pill-btn {
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  font-size: var(--ds-font-size-caption);
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-weight: 600;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
  display: inline-flex;
}

.ai-extract-pill-btn svg {
  width: 14px;
  height: 14px;
  color: var(--ds-brand);
}

.ai-extract-pill-btn:hover {
  box-shadow: var(--ds-shadow-hover);
  border-color: var(--ds-brand);
}

.ai-extract-pill-btn:active {
  transform: scale(.98);
}

.sample-tool-btn {
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-weight: 500;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
  display: inline-flex;
}

.sample-tool-btn svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

.sample-tool-btn:hover {
  background: var(--ds-surface-subtle);
  border-color: var(--ds-border-hover);
  color: var(--ds-ink);
}

.sample-tool-btn.is-subtle {
  background: var(--ds-surface-subtle);
  border-color: #0000;
}

.sample-tool-btn.is-active {
  border-color: var(--ds-brand);
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  font-weight: 600;
}

.sample-tool-btn.is-active svg {
  color: var(--ds-brand);
}

.record-date-hint {
  color: var(--ds-ink-light);
  font-size: 12px;
}

.detail-header-bar.is-editable {
  flex-direction: column;
  align-items: stretch;
}

.assist-paste-box {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border);
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 14px 16px;
  display: flex;
}

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

.assist-paste-head strong {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  font-weight: 650;
  display: block;
}

.assist-paste-head p {
  color: var(--ds-ink-muted);
  margin-top: 2px;
  font-size: 12px;
}

.assist-paste-textarea {
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  width: 100%;
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  resize: vertical;
  padding: 10px 12px;
  line-height: 1.55;
}

.assist-paste-textarea:focus {
  border-color: var(--ds-brand);
  box-shadow: var(--ds-shadow-hover);
}

.assist-paste-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.quick-example-row {
  border-top: 1px solid var(--ds-border);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
}

.records-example-row, .ask-example-row {
  border-top: 0;
  margin-top: 8px;
  margin-bottom: 12px;
  padding-top: 0;
}

.quick-example-label {
  color: var(--ds-ink-light);
  font-size: 12px;
  font-weight: 500;
}

.quick-example-chip {
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
  display: inline-flex;
}

.quick-example-chip:hover, .quick-example-chip.is-active {
  background: var(--ds-brand-soft);
  border-color: var(--ds-brand);
  color: var(--ds-brand-hover);
}

.status-pill {
  border-radius: var(--ds-radius-pill);
  width: fit-content;
  color: var(--ds-brand-hover);
  background: var(--ds-brand-soft);
  white-space: nowrap;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.status-pill.pending, .status-pill.running, .status-pill.retrying, .status-pill.stale, .status-pill.cancelled {
  color: var(--ds-ink-muted);
  background: var(--ds-surface-subtle);
}

.status-pill.failed {
  color: var(--ds-danger);
  background: var(--ds-danger-soft);
}

.detail-stack {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.pattern-page-shell {
  gap: 18px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
}

.pattern-filter-bar-modern {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  display: flex;
}

.pattern-filter-left {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.pattern-filter-right {
  align-items: center;
  gap: 8px;
  display: flex;
}

.pattern-inline-date-picker {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border-subtle);
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  display: inline-flex;
}

.pattern-inline-date-picker input[type="date"] {
  color: var(--ds-ink);
  background: none;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 11.5px;
}

.pattern-inline-date-picker .date-sep {
  color: var(--ds-ink-light);
  font-size: 11px;
}

.pattern-overview-bento {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  gap: 16px;
  padding: 22px 24px;
  display: grid;
}

.pattern-overview-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.pattern-kicker {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ds-brand);
  font-size: 11px;
  font-weight: 700;
}

.pattern-title {
  letter-spacing: -.02em;
  color: var(--ds-ink);
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 700;
}

.pattern-status-chip {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
}

.status-dot {
  border-radius: 50%;
  width: 7px;
  height: 7px;
  display: inline-block;
}

.status-dot.is-green {
  background: #10b981;
}

.status-dot.is-blue {
  background: #3b82f6;
  animation: 1.4s ease-in-out infinite worker-pulse;
}

.status-dot.is-amber {
  background: #f59e0b;
}

.pattern-metric-grid {
  background: var(--ds-border);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.pattern-metric-card {
  background: var(--ds-surface);
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px 14px;
  display: flex;
}

.pattern-metric-card.is-did {
  background: var(--ds-brand-soft);
}

.pattern-metric-card.is-thinking {
  background: #fffbeb;
}

.pattern-metric-label {
  color: var(--ds-ink-light);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11.5px;
  font-weight: 500;
  overflow: hidden;
}

.pattern-metric-value {
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink);
  letter-spacing: -.02em;
  font-size: 20px;
  font-weight: 700;
}

.pattern-metric-sub {
  color: var(--ds-ink-light);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10.5px;
  overflow: hidden;
}

.pattern-status-hint {
  color: var(--ds-ink-muted);
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.pattern-progress-box {
  gap: 8px;
  padding-top: 4px;
  display: grid;
}

.pattern-progress-head {
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.pattern-progress-stage-name {
  color: var(--ds-ink);
}

.pattern-progress-pct {
  color: var(--ds-brand);
  font-variant-numeric: tabular-nums;
}

.pattern-progress-bar {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  height: 7px;
  overflow: hidden;
}

.pattern-progress-bar span {
  background: var(--ds-brand);
  border-radius: inherit;
  height: 100%;
  transition: width .3s;
  display: block;
}

.pattern-stage-steps {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.pattern-stage-pill {
  color: var(--ds-ink-light);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 11.5px;
  display: inline-flex;
}

.pattern-stage-pill.is-done {
  color: var(--ds-brand);
  background: var(--ds-brand-soft);
  font-weight: 600;
}

.pattern-stage-pill.is-active {
  color: #3b82f6;
  background: #3b82f61a;
  font-weight: 600;
}

.stage-mini-dot {
  background: currentColor;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.pattern-running-task-pill {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  display: inline-flex;
}

.pattern-clusters-section {
  gap: 12px;
  margin-top: 6px;
  display: grid;
}

.pattern-section-head {
  align-items: center;
  gap: 8px;
  display: flex;
}

.pattern-kind-dot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.pattern-kind-dot.did {
  background: var(--ds-brand);
}

.pattern-kind-dot.thinking {
  background: #d97706;
}

.pattern-section-title {
  color: var(--ds-ink);
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.pattern-section-count {
  color: var(--ds-ink-light);
  font-size: 12px;
  font-weight: 500;
}

.pattern-clusters-grid {
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 14px;
  display: grid;
}

.pattern-cluster-card {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-card);
  flex-direction: column;
  padding: 16px 18px;
  display: flex;
}

.pattern-cluster-head {
  border-bottom: 1px solid var(--ds-border-subtle);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  display: flex;
}

.pattern-cluster-title {
  color: var(--ds-ink);
  letter-spacing: -.015em;
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
}

.pattern-cluster-meta-badge {
  color: var(--ds-brand-hover);
  background: var(--ds-brand-soft);
  border-radius: var(--ds-radius-pill);
  white-space: nowrap;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
}

.pattern-cluster-meta-badge.thinking {
  color: #b45309;
  background: #fef3c7;
}

.pattern-evidence-list, .pattern-occurrence-list {
  gap: 8px;
  display: grid;
}

.pattern-evidence-row, .pattern-occurrence-row {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  transition: background .12s;
  display: flex;
}

.pattern-evidence-row:hover, .pattern-occurrence-row:hover {
  background: #edf0f2;
}

.pattern-evidence-main, .pattern-occurrence-main {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.pattern-evidence-top, .pattern-occurrence-top {
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.pattern-evidence-date, .pattern-occurrence-date {
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
}

.pattern-evidence-text, .pattern-occurrence-text {
  color: var(--ds-ink);
  font-size: 13px;
  line-height: 1.5;
}

.pattern-evidence-quote, .pattern-occurrence-quote {
  color: var(--ds-ink-muted);
  border-left: 2px solid var(--ds-border);
  margin: 0;
  padding-left: 8px;
  font-size: 11.5px;
  font-style: italic;
}

.pattern-evidence-link, .pattern-occurrence-link {
  border-radius: var(--ds-radius-sm);
  width: 24px;
  height: 24px;
  color: var(--ds-ink-light);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition: color .12s, background .12s;
  display: flex;
}

.pattern-evidence-link:hover, .pattern-occurrence-link:hover {
  color: var(--ds-brand-hover);
  background: var(--ds-surface);
}

.pattern-evidence-link svg, .pattern-occurrence-link svg {
  width: 13px !important;
  height: 13px !important;
}

.trace-count-pill {
  color: var(--ds-ink-light);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 500;
}

.trace-toolbar-row {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.trace-toolbar-desc {
  color: var(--ds-ink-light);
  font-size: 11.5px;
}

.trace-toolbar-right {
  align-items: center;
  gap: 6px;
  display: flex;
}

.pattern-trace-flow {
  gap: 6px;
  max-height: 260px;
  display: grid;
  overflow-y: auto;
}

.pattern-trace-row {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border-subtle);
  grid-template-columns: 80px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: 11.5px;
  display: grid;
}

.trace-time {
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.trace-stage-badge {
  text-align: center;
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10.5px;
  font-weight: 600;
}

.trace-stage-badge.is-comparing {
  color: #4338ca;
  background: #eef2ff;
}

.trace-stage-badge.is-indexing {
  color: var(--ds-brand-hover);
  background: #f0fdf4;
}

.trace-stage-badge.is-building {
  color: #b45309;
  background: #fffbeb;
}

.trace-desc {
  color: var(--ds-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.relation-chip {
  border-radius: var(--ds-radius-pill);
  white-space: nowrap;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
}

.relation-chip.is-same_action, .relation-chip.is-same_thought {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
}

.relation-chip.is-related_only {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
}

.relation-chip.is-different {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-light);
}

@media (max-width: 768px) {
  .pattern-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pattern-clusters-grid {
    grid-template-columns: 1fr;
  }
}

.analysis-card {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border-subtle);
  background: var(--ds-surface);
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  display: flex;
}

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

.analysis-card-title-wrap {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.analysis-insights-link {
  font-size: var(--ds-font-size-caption);
  color: var(--ds-brand);
  border-radius: var(--ds-radius-sm);
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
  display: inline-flex;
}

.analysis-insights-link:hover {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
}

.analysis-insights-link svg {
  width: 12px;
  height: 12px;
}

.takeaways-summary-bar {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
  justify-content: space-between;
  align-items: center;
  padding: 6px 2px 2px;
  display: flex;
}

.takeaways-summary-bar strong {
  color: var(--ds-ink);
  font-weight: 700;
}

.analysis-card-head h2 {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-title);
  margin-top: 2px;
  font-weight: 700;
}

.analysis-card-desc {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  line-height: 1.6;
}

.detail-header-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.detail-header-edit-btn {
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.detail-header-edit-btn svg {
  width: 14px;
  height: 14px;
}

.record-trace-section {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.record-trace-toggle-btn {
  border-radius: var(--ds-radius-md);
  border: 1px dashed var(--ds-border);
  width: 100%;
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  cursor: pointer;
  background: none;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.record-trace-toggle-btn:hover {
  background: var(--ds-surface);
  border-color: var(--ds-border-strong);
  color: var(--ds-ink);
}

.trace-toggle-left {
  align-items: center;
  gap: 8px;
  display: flex;
}

.trace-toggle-left svg {
  width: 14px;
  height: 14px;
  color: var(--ds-brand);
}

.trace-toggle-arrow {
  justify-content: center;
  align-items: center;
  transition: transform .18s;
  display: flex;
}

.trace-toggle-arrow svg {
  width: 13px;
  height: 13px;
  color: var(--ds-ink-light);
}

.trace-toggle-arrow.is-open {
  transform: rotate(90deg);
}

.record-analysis-control {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle);
  gap: 14px;
  padding: 14px 16px;
  display: grid;
}

.record-analysis-main {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  display: flex;
}

.record-analysis-copy {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.record-analysis-header-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.record-custom-model-badge {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
}

.record-custom-model-badge svg {
  width: 12px;
  height: 12px;
}

.record-analysis-copy p {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  line-height: 1.55;
}

.record-analysis-notice, .record-analysis-error {
  font-size: var(--ds-font-size-caption);
  line-height: 1.45;
  display: block;
}

.record-analysis-notice {
  color: var(--ds-brand-hover);
}

.record-analysis-error {
  color: var(--ds-danger);
}

.record-analysis-button, .record-analysis-complete {
  border-radius: var(--ds-radius-md);
  min-height: 42px;
  font-size: var(--ds-font-size-caption);
  white-space: nowrap;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  font-weight: 650;
  display: inline-flex;
}

.record-analysis-button {
  background: var(--ds-brand);
  color: var(--ds-surface);
  transition: background .15s, opacity .15s, transform .12s;
}

.record-analysis-button:hover:not(:disabled) {
  background: var(--ds-brand-hover);
}

.record-analysis-button:active:not(:disabled) {
  transform: scale(.99);
}

.record-analysis-button:focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

.record-analysis-button:disabled {
  cursor: wait;
  opacity: .62;
}

.record-analysis-button svg, .record-analysis-complete svg {
  width: 17px;
  height: 17px;
}

.record-analysis-button:disabled svg {
  animation: 1s linear infinite worker-spin;
}

.record-analysis-complete {
  min-height: 36px;
  color: var(--ds-brand-hover);
  background: var(--ds-brand-soft);
  padding: 0 12px;
}

.record-analysis-actions {
  flex: none;
  align-items: center;
  gap: 8px;
  display: flex;
}

.record-analysis-stop-btn {
  border-radius: var(--ds-radius-md);
  min-height: 42px;
  font-size: var(--ds-font-size-caption);
  white-space: nowrap;
  color: var(--ds-danger);
  background: var(--ds-surface);
  cursor: pointer;
  border: 1px solid #dc262647;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-weight: 600;
  transition: all .15s;
  display: inline-flex;
}

.record-analysis-stop-btn:hover:not(:disabled) {
  border-color: var(--ds-danger);
  color: var(--ds-danger);
  background: #dc262614;
}

.record-analysis-stop-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.record-analysis-stop-btn svg {
  width: 15px;
  height: 15px;
}

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

.record-analysis-progress {
  border-top: 1px solid var(--ds-border);
  gap: 10px;
  padding-top: 12px;
  display: grid;
}

.record-progress-heading, .record-recent-events-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.record-progress-heading strong, .record-recent-events-head strong {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  font-weight: 650;
}

.record-progress-heading span, .record-recent-events-head span {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
}

.record-progress-track {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-border);
  height: 7px;
  position: relative;
  overflow: hidden;
}

.record-progress-track > span {
  border-radius: inherit;
  background: var(--ds-brand);
  height: 100%;
  transition: width .3s;
  display: block;
}

.record-progress-stages {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.record-progress-stage {
  color: var(--ds-ink-light);
  font-size: var(--ds-font-size-caption);
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.record-progress-stage i {
  background: var(--ds-border);
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.record-progress-stage.is-active {
  color: var(--ds-brand-hover);
  font-weight: 650;
}

.record-progress-stage.is-active i {
  background: var(--ds-brand);
  box-shadow: 0 0 0 4px var(--ds-brand-soft);
}

.record-progress-stage.is-done {
  color: var(--ds-ink-muted);
}

.record-progress-stage.is-done i {
  background: var(--ds-brand);
}

.record-current-task {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  gap: 8px;
  padding: 10px 12px;
  display: grid;
}

.task-header-row {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.task-header-left {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.task-pulse-badge {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.pulse-indicator {
  background: var(--ds-brand);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1.4s ease-in-out infinite task-pulse;
  box-shadow: 0 0 0 3px #52a3a838;
}

@keyframes task-pulse {
  50% {
    opacity: .35;
    transform: scale(.75);
  }
}

.task-name-badge {
  font-size: var(--ds-font-size-caption);
  color: var(--ds-ink);
  font-weight: 650;
}

.task-progress-tag {
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  background: var(--ds-surface-subtle);
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  padding: 1px 6px;
  font-size: 11px;
}

.task-preview-box {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border);
  gap: 6px;
  padding: 8px 10px;
  display: grid;
}

.task-preview-meta {
  align-items: center;
  gap: 6px;
  display: flex;
}

.task-target-label {
  color: var(--ds-ink-muted);
  font-size: 11px;
  font-weight: 600;
}

.task-kind-pill {
  border-radius: var(--ds-radius-sm);
  align-items: center;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.task-kind-pill.is-did {
  color: #1a787e;
  background: #52a3a829;
}

.task-kind-pill.is-thinking {
  color: #7d3c98;
  background: #8e44ad1f;
}

.task-item-index-pill {
  color: var(--ds-ink-light);
  font-size: 11px;
}

.task-preview-text {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  word-break: break-word;
  margin: 0;
  line-height: 1.55;
}

.record-recent-events {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  gap: 8px;
  padding: 10px 12px;
  display: grid;
}

.record-recent-events-head {
  border-bottom: 1px solid var(--ds-border);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 7px;
  display: flex;
}

.trace-head-left {
  align-items: center;
  gap: 8px;
  display: flex;
}

.trace-head-left strong {
  font-size: var(--ds-font-size-caption);
  color: var(--ds-ink);
  font-weight: 650;
}

.trace-count-badge {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border);
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  font-size: 11px;
  display: inline-flex;
}

.trace-head-actions {
  align-items: center;
  gap: 6px;
  display: flex;
}

.trace-action-btn {
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-ink-muted);
  cursor: pointer;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  transition: all .15s;
  display: inline-flex;
}

.trace-action-btn svg {
  width: 12px;
  height: 12px;
}

.trace-action-btn:hover {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink);
  border-color: var(--ds-border-hover);
}

.record-trace-scroll-area {
  scrollbar-width: thin;
  scrollbar-color: var(--ds-border) transparent;
  max-height: 320px;
  padding-right: 4px;
  overflow: hidden auto;
}

.record-trace-scroll-area::-webkit-scrollbar {
  width: 5px;
}

.record-trace-scroll-area::-webkit-scrollbar-thumb {
  background: var(--ds-border);
  border-radius: var(--ds-radius-pill);
}

.record-trace-scroll-area::-webkit-scrollbar-thumb:hover {
  background: var(--ds-ink-light);
}

.trace-groups-flow {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.trace-group-card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  transition: border-color .15s;
  overflow: hidden;
}

.trace-group-card:hover {
  border-color: var(--ds-border-hover);
}

.trace-group-card.is-splitting {
  border-left: 3px solid #3498db;
}

.trace-group-card.is-committing {
  border-left: 3px solid #27ae60;
}

.trace-group-card.is-item {
  border-left: 3px solid var(--ds-brand);
}

.trace-group-header {
  background: var(--ds-surface-subtle);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: 12px;
  transition: background .12s;
  display: flex;
}

.trace-group-header:hover {
  background: #0000000a;
}

.trace-group-header:focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: -1px;
}

.trace-group-header-left {
  flex: 1;
  align-items: center;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.trace-group-badge {
  border-radius: var(--ds-radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.trace-group-badge.is-splitting {
  color: #2980b9;
  background: #3498db1f;
}

.trace-group-badge.is-committing {
  color: #27ae60;
  background: #27ae601f;
}

.trace-group-badge.is-item {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
}

.trace-group-badge.is-other {
  background: var(--ds-surface);
  color: var(--ds-ink-muted);
  border: 1px solid var(--ds-border);
}

.trace-group-quote {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--ds-ink-light);
  flex: 1;
  font-size: 11.5px;
  font-style: italic;
  overflow: hidden;
}

.trace-group-header-right {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: flex;
}

.group-outcome-chip {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand);
  color: #fff;
  white-space: nowrap;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 600;
  display: inline-flex;
}

.group-outcome-chip svg {
  width: 10px;
  height: 10px;
}

.group-rejected-chip {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-ink-light);
  border: 1px solid var(--ds-border);
  white-space: nowrap;
  align-items: center;
  padding: 1px 5px;
  font-size: 10px;
  display: inline-flex;
}

.group-skipped-chip {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-light);
  border: 1px solid var(--ds-border);
  white-space: nowrap;
  align-items: center;
  padding: 1px 5px;
  font-size: 10px;
  display: inline-flex;
}

.group-step-count {
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
  font-size: 11px;
}

.group-chevron-icon {
  color: var(--ds-ink-light);
  align-items: center;
  transition: transform .18s;
  display: inline-flex;
}

.group-chevron-icon svg {
  width: 12px;
  height: 12px;
}

.group-chevron-icon.is-collapsed {
  transform: rotate(-90deg);
}

.trace-substeps-wrapper {
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border);
  padding: 4px 8px 6px 12px;
}

.trace-substeps-list {
  border-left: 2px solid var(--ds-border);
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0 0 0 10px;
  list-style: none;
  display: flex;
}

.trace-substep-row {
  border-radius: var(--ds-radius-sm);
  white-space: nowrap;
  background: none;
  align-items: center;
  gap: 7px;
  min-height: 23px;
  padding: 2px 6px;
  font-size: 11.5px;
  line-height: 1.35;
  transition: background .1s;
  display: flex;
  position: relative;
}

.trace-substep-row:before {
  content: "";
  background: var(--ds-border);
  width: 6px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: -10px;
}

.trace-substep-row:hover {
  background: var(--ds-surface-subtle);
}

.trace-substep-row.is-error {
  background: var(--ds-danger-soft);
}

.substep-time {
  width: 68px;
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
}

.substep-badge {
  border-radius: var(--ds-radius-sm);
  text-align: center;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  min-width: 38px;
  padding: .5px 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  display: inline-flex;
}

.substep-badge.is-topic {
  background: var(--ds-brand);
  color: #fff;
}

.substep-badge.is-stage {
  color: #7d3c98;
  background: #8e44ad1f;
}

.substep-badge.is-retrieve {
  color: #2980b9;
  background: #3498db1f;
}

.substep-badge.is-done {
  color: #27ae60;
  background: #27ae601f;
}

.substep-badge.is-filter {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-light);
  border: 1px solid var(--ds-border);
}

.substep-badge.is-task {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
}

.substep-badge.is-error {
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.substep-title {
  color: var(--ds-ink);
  font-size: 11.5px;
  font-weight: 500;
}

.substep-topic-chip {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  border: 1px solid #52a3a840;
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  padding: .5px 5px;
  font-size: 10.5px;
  font-weight: 600;
  display: inline-flex;
}

.substep-topic-chip svg {
  width: 9px;
  height: 9px;
}

.substep-topic-chip.is-filtered {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-light);
  border-color: var(--ds-border);
  text-decoration: line-through;
}

.substep-code-chip {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-subtle);
  color: var(--ds-danger);
  flex-shrink: 0;
  padding: .5px 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
}

.analysis-summary-bar {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: flex;
}

.analysis-summary-bar strong {
  color: var(--ds-ink);
}

.analysis-summary-bar a {
  color: var(--ds-brand);
  font-weight: 600;
}

.analysis-summary-bar a:hover {
  color: var(--ds-brand-hover);
}

.pattern-filter-bar {
  flex-direction: column;
  gap: 12px;
  margin-bottom: 6px;
  display: flex;
}

.pattern-filter-group {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.pattern-filter-label {
  font-size: var(--ds-font-size-caption);
  color: var(--ds-ink-light);
  min-width: 32px;
  font-weight: 600;
}

.pattern-pills {
  background: var(--ds-surface-subtle);
  border-radius: var(--ds-radius-pill);
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  display: inline-flex;
}

.pattern-pill {
  border-radius: var(--ds-radius-pill);
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 5px 13px;
  font-weight: 500;
  transition: all .15s;
}

.pattern-pill:hover {
  color: var(--ds-ink);
}

.pattern-pill.is-active {
  background: var(--ds-surface);
  color: var(--ds-brand);
  font-weight: 600;
  box-shadow: 0 1px 3px #00000014;
}

.pattern-date-inputs {
  font-size: var(--ds-font-size-caption);
  color: var(--ds-ink-muted);
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.pattern-date-inputs input[type="date"] {
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  height: 32px;
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  outline: none;
  padding: 0 8px;
  font-family: inherit;
  transition: border-color .15s;
}

.pattern-date-inputs input[type="date"]:focus {
  border-color: var(--ds-brand);
}

.substep-badge.is-comparing, .substep-badge.is-pair_judge {
  color: #8e44ad;
  background: #8e44ad1f;
}

.substep-badge.is-indexing {
  color: #2980b9;
  background: #3498db1f;
}

.substep-badge.is-building {
  color: #27ae60;
  background: #27ae601f;
}

.substep-badge.is-snapshotting {
  color: #d35400;
  background: #f39c121f;
}

.relation-chip {
  border-radius: var(--ds-radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.relation-chip.is-same_action, .relation-chip.is-same_thought {
  background: var(--ds-mood-4-soft);
  color: var(--ds-data-did);
  border: 1px solid var(--ds-mood-4-border);
}

.relation-chip.is-related_only {
  background: var(--ds-mood-3-soft);
  color: var(--ds-data-thinking);
  border: 1px solid var(--ds-mood-3-border);
}

.relation-chip.is-different {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
  border: 1px solid var(--ds-border);
}

.pattern-clusters-section {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.pattern-section-title {
  color: var(--ds-ink);
  align-items: center;
  gap: 8px;
  margin: 16px 0 6px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
}

.pattern-section-count {
  font-size: var(--ds-font-size-caption);
  color: var(--ds-ink-light);
  font-weight: 500;
}

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

@media (max-width: 767px) {
  .evidence-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.evidence-item {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border);
  box-shadow: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  transition: border-color .15s, background .15s;
  display: flex;
}

.evidence-item:hover {
  border-color: var(--ds-border-hover);
  background: #edf0f2;
}

.evidence-item > a {
  color: var(--ds-brand);
  font-weight: 600;
  font-size: var(--ds-font-size-body);
  transition: color .15s;
}

.evidence-item > a:hover {
  color: var(--ds-brand-hover);
  text-decoration: underline;
}

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

.evidence-head-left {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.evidence-head-right {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.evidence-kind-badge {
  border-radius: var(--ds-radius-pill);
  align-items: center;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.evidence-kind-badge.did {
  background: var(--ds-mood-4-soft);
  color: var(--ds-data-did);
  border: 1px solid var(--ds-mood-4-border);
}

.evidence-kind-badge.thinking {
  background: var(--ds-mood-3-soft);
  color: var(--ds-data-thinking);
  border: 1px solid var(--ds-mood-3-border);
}

.evidence-topics-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.evidence-no-topic {
  color: var(--ds-ink-light);
  background: var(--ds-surface-subtle);
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  align-items: center;
  padding: 1px 6px;
  font-size: 11px;
  line-height: 1.35;
  display: inline-flex;
}

.evidence-unit-body {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.evidence-unit-title {
  color: var(--ds-ink);
  letter-spacing: -.01em;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

.evidence-quote-box {
  background: var(--ds-surface-subtle);
  border-radius: var(--ds-radius-sm);
  border-left: 2px solid var(--ds-border-strong);
  align-items: baseline;
  gap: 6px;
  margin-top: 1px;
  padding: 4px 8px;
  display: flex;
}

.evidence-quote-kicker {
  color: var(--ds-ink-light);
  -webkit-user-select: none;
  user-select: none;
  letter-spacing: .02em;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
}

.evidence-normalized {
  color: var(--ds-ink-light);
  font-size: 12px;
}

.evidence-quote {
  color: var(--ds-ink-muted);
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  quotes: none;
  background: none;
  border: none;
  -webkit-box-orient: vertical;
  margin: 0;
  padding: 0;
  font-size: 11.5px;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
}

.evidence-quote:before, .evidence-quote:after {
  content: none;
}

.evidence-empty, .topics-empty {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  padding: 2px 0;
  line-height: 1.6;
}

.evidence-item-footer {
  border-top: 1px dashed var(--ds-border);
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  padding-top: 6px;
  display: flex;
}

.similar-history-container {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.similar-history-trigger {
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  height: 22px;
  color: var(--ds-ink-light);
  cursor: pointer;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  transition: all .15s;
  display: inline-flex;
}

.similar-history-trigger:hover {
  color: var(--ds-ink);
  border-color: var(--ds-border-hover);
  background: var(--ds-surface-subtle);
}

.similar-history-trigger.is-active {
  color: var(--ds-brand-hover);
  border-color: var(--ds-brand-soft);
  background: var(--ds-brand-soft);
}

.similar-history-trigger-icon {
  opacity: .8;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.similar-history-chevron {
  opacity: .6;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  transition: transform .18s;
}

.similar-history-chevron.is-open {
  transform: rotate(180deg);
}

.similar-history-drawer {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border);
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  animation: .15s ease-out fadeInDown;
  display: flex;
}

.similar-history-drawer-head {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.similar-history-status {
  color: var(--ds-ink-light);
  font-size: 10.5px;
}

.similar-history-action-btn {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  height: 22px;
  color: var(--ds-brand-hover);
  cursor: pointer;
  white-space: nowrap;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  transition: all .15s;
}

.similar-history-action-btn:hover:not(:disabled) {
  background: var(--ds-brand-soft);
  border-color: var(--ds-brand-soft);
}

.similar-history-action-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.similar-history-loading {
  color: var(--ds-ink-muted);
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 11px;
  display: flex;
}

.similar-history-spinner {
  border: 1.5px solid var(--ds-border-strong);
  border-top-color: var(--ds-brand);
  border-radius: 50%;
  width: 11px;
  height: 11px;
  animation: .8s linear infinite worker-spin;
}

.similar-history-error, .similar-history-empty {
  color: var(--ds-ink-muted);
  margin: 2px 0;
  font-size: 11px;
}

.similar-history-error {
  color: var(--ds-danger);
}

.similar-history-list {
  flex-direction: column;
  gap: 5px;
  max-height: 180px;
  padding-right: 2px;
  display: flex;
  overflow-y: auto;
}

.similar-history-item {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  flex-direction: column;
  gap: 2px;
  padding: 5px 8px;
  transition: border-color .12s;
  display: flex;
}

.similar-history-item:hover {
  border-color: var(--ds-border-hover);
}

.similar-history-item-top {
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  display: flex;
}

.similar-history-item-link {
  color: var(--ds-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  overflow: hidden;
}

.similar-history-item-link:hover {
  color: var(--ds-brand-hover);
  text-decoration: underline;
}

.similar-history-item-date {
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-size: 10.5px;
}

.similar-history-item-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.similar-history-badge {
  border-radius: 3px;
  flex-shrink: 0;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
}

.similar-history-badge.related_only {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
  border: 1px solid var(--ds-border);
}

.similar-history-badge.repeated {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  border: 1px solid var(--ds-tag-topic-border);
}

.similar-history-item-quote {
  color: var(--ds-ink-muted);
  -webkit-line-clamp: 1;
  quotes: none;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
}

.similar-history-item-quote:before, .similar-history-item-quote:after {
  content: none;
}

.similar-history-more-hint {
  color: var(--ds-ink-light);
  text-align: center;
  margin: 2px 0 0;
  font-size: 10px;
}

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

.topic-review {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.topic-chip {
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-weight: 600;
  display: inline-flex;
}

.topic-chip.confirmed {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
  border-color: #4a7c594d;
}

.topic-chip.rejected {
  opacity: .55;
  text-decoration: line-through;
}

.topic-chip-state {
  color: var(--ds-ink-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

.topic-review-actions {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.topic-review-actions form {
  display: inline;
}

.topic-review-actions button {
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-ink);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
}

.topic-review-actions button:hover {
  border-color: var(--ds-brand);
  color: var(--ds-brand-hover);
}

.topic-review-actions button.is-reject:hover {
  border-color: var(--ds-danger);
  color: var(--ds-danger);
}

.topic-correction-form {
  border-top: 1px solid var(--ds-border);
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  display: flex;
}

.topic-correction-form label {
  color: var(--ds-ink-muted);
  font-size: 12px;
  font-weight: 500;
}

.topic-correction-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  display: grid;
}

.topic-correction-row input {
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  height: 34px;
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  padding: 0 10px;
}

.topic-correction-row input:focus {
  border-color: var(--ds-brand);
}

.topic-correction-row button {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-brand);
  height: 34px;
  color: var(--ds-surface);
  font-size: var(--ds-font-size-caption);
  padding: 0 12px;
  font-weight: 600;
}

.topic-correction-row button:hover {
  background: var(--ds-brand-hover);
}

.context-head-inline {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.context-evidence-mini {
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  display: flex;
}

.context-evidence-mini-item {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle);
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  display: flex;
}

.context-evidence-mini-item small {
  color: var(--ds-ink-light);
  font-size: 11px;
}

.context-evidence-mini-item q {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  line-height: 1.5;
}

.context-mini-topics {
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  display: flex;
}

.topics-list {
  flex-direction: column;
  margin-top: 6px;
  display: flex;
}

.topic-row {
  border-bottom: 1px solid var(--ds-border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 6px;
  transition: background .15s;
  display: flex;
}

.topic-row:last-child {
  border-bottom: 0;
}

.topic-row:hover {
  background: var(--ds-surface-subtle);
  border-radius: var(--ds-radius-sm);
}

.topic-row-main {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.topic-row-main strong {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-body);
  font-weight: 650;
}

.topic-row-metrics {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: flex;
}

.topic-detail-workspace {
  flex-direction: column;
  gap: 18px;
  display: flex;
}

.topic-detail-summary-bar {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border-subtle);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  display: flex;
}

.topic-summary-left {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.topic-summary-kind {
  color: var(--ds-ink);
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.topic-summary-aliases {
  color: var(--ds-ink-light);
  border-left: 1px solid var(--ds-border);
  padding-left: 10px;
  font-size: 12px;
}

.topic-summary-metrics {
  color: var(--ds-ink-muted);
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  display: flex;
}

.topic-summary-metrics strong {
  color: var(--ds-ink);
  font-weight: 700;
}

.topic-summary-sep {
  color: var(--ds-border-strong);
}

.topic-summary-span {
  color: var(--ds-ink-light);
}

.topic-month-stack {
  flex-direction: column;
  gap: 18px;
  display: flex;
}

.topic-month-group {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.topic-month-header {
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px;
  display: flex;
}

.topic-month-title {
  color: var(--ds-ink-muted);
  letter-spacing: -.01em;
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
}

.topic-month-count {
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

.topic-detail-list {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border-subtle);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
  overflow: hidden;
}

.topic-detail-row {
  border-top: 1px solid var(--ds-border-subtle);
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 18px;
  text-decoration: none;
  transition: background .12s;
  display: flex;
}

.topic-detail-row:first-child {
  border-top: 0;
}

.topic-detail-row:hover {
  background: var(--ds-surface-subtle);
}

.topic-row-date {
  width: 44px;
  color: var(--ds-ink-light);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  padding-top: 2px;
  font-size: 12px;
  font-weight: 600;
}

.topic-row-body {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.topic-row-title {
  color: var(--ds-ink);
  letter-spacing: -.01em;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.topic-row-quote {
  color: var(--ds-ink-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  display: -webkit-box;
  overflow: hidden;
}

.topic-row-action {
  color: var(--ds-ink-light);
  flex-shrink: 0;
  align-items: center;
  padding-top: 3px;
  display: flex;
}

.topic-row-action svg {
  width: 14px;
  height: 14px;
  transition: transform .15s, color .15s;
}

.topic-detail-row:hover .topic-row-action svg {
  color: var(--ds-ink);
  transform: translateX(2px);
}

.ask-workspace {
  flex-direction: column;
  display: flex;
}

.ask-search-form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  display: grid;
}

.search-box {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  height: 44px;
  box-shadow: var(--ds-shadow-card);
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  display: flex;
}

.search-box:focus-within {
  box-shadow: var(--ds-shadow-hover);
}

.search-box svg {
  width: 16px;
  height: 16px;
  color: var(--ds-ink-light);
  flex-shrink: 0;
}

.search-input {
  min-width: 0;
  color: var(--ds-ink);
  font-size: var(--ds-font-size-body);
  background: none;
  border: 0;
  flex: 1;
}

.ask-answer-card {
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  display: flex;
}

.ask-answer-head {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.ask-answer-head h2 {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-title);
  font-weight: 700;
}

.ask-answer-head p {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
}

.ask-metrics {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  display: grid;
}

.ask-metric-item {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle);
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  display: flex;
}

.ask-metric-item span {
  color: var(--ds-ink-light);
  font-size: 12px;
}

.ask-metric-item strong {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-title);
  font-weight: 700;
}

.ask-metric-item strong em {
  color: var(--ds-ink-light);
  margin-left: 3px;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.result-limit {
  color: var(--ds-ink-light);
  font-size: 12px;
}

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

.citation-card {
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 14px;
  transition: background .15s;
  display: grid;
}

.citation-card:hover {
  background: var(--ds-brand-soft);
}

.citation-meta {
  flex-wrap: wrap;
  grid-column: 1;
  align-items: center;
  gap: 8px;
  display: flex;
}

.citation-meta time {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-caption);
  font-weight: 650;
}

.citation-badges {
  gap: 6px;
  display: flex;
}

.citation-snippet {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-caption);
  grid-column: 1;
  line-height: 1.55;
}

.citation-card .detail-arrow {
  grid-area: 1 / 2 / span 2;
}

.board-container {
  flex-direction: column;
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
}

.board-stats-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  display: grid;
}

.board-stat-card {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-card);
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  transition: all .18s cubic-bezier(.16, 1, .3, 1);
  display: flex;
}

.board-stat-card:hover {
  border-color: var(--ds-border-hover);
  box-shadow: var(--ds-shadow-hover);
  transform: translateY(-1px);
}

.board-stat-icon-wrap {
  border-radius: var(--ds-radius-sm);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.board-stat-icon-wrap svg {
  width: 16px;
  height: 16px;
}

.board-stat-icon-wrap.is-brand {
  background: var(--ds-brand-soft);
  color: var(--ds-brand-hover);
}

.board-stat-icon-wrap.is-did {
  background: var(--ds-mood-4-soft);
  border: 1px solid var(--ds-mood-4-border);
}

.board-stat-icon-wrap.is-thinking {
  background: var(--ds-mood-3-soft);
  border: 1px solid var(--ds-mood-3-border);
}

.board-stat-info {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.board-stat-label {
  color: var(--ds-ink-light);
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.board-stat-val {
  align-items: baseline;
  gap: 4px;
  display: flex;
}

.board-stat-val strong {
  color: var(--ds-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.board-stat-val small {
  color: var(--ds-ink-muted);
  font-size: 11px;
}

.board-toolbar {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  display: flex;
  box-shadow: 0 1px 2px #00000008;
}

.board-toolbar-left {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.board-toolbar-right {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.board-search-box {
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  align-items: center;
  gap: 6px;
  min-width: 190px;
  height: 30px;
  padding: 0 8px;
  display: inline-flex;
}

.board-search-box:focus-within {
  border-color: var(--ds-brand);
}

.board-search-box svg {
  width: 13px;
  height: 13px;
  color: var(--ds-ink-light);
  flex-shrink: 0;
}

.board-search-box input {
  min-width: 0;
  color: var(--ds-ink);
  background: none;
  border: 0;
  outline: none;
  flex: 1;
  font-size: 12px;
}

.board-date-jump {
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  display: inline-flex;
}

.board-date-jump svg {
  width: 13px;
  height: 13px;
  color: var(--ds-ink-light);
  flex-shrink: 0;
}

.board-date-jump input[type="date"] {
  color: var(--ds-ink);
  background: none;
  border: 0;
  outline: none;
  font-size: 12px;
}

.board-clear-btn {
  background: var(--ds-surface-subtle);
  width: 16px;
  height: 16px;
  color: var(--ds-ink-light);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: color .15s, background .15s;
  display: flex;
}

.board-clear-btn:hover {
  background: var(--ds-border);
  color: var(--ds-ink);
}

.board-clear-btn svg {
  width: 10px;
  height: 10px;
}

.board-reset-btn {
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  height: 30px;
  color: var(--ds-ink-muted);
  cursor: pointer;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  transition: border-color .15s, color .15s;
}

.board-reset-btn:hover {
  border-color: var(--ds-ink-muted);
  color: var(--ds-ink);
}

.board-container {
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
}

.board-toolbar-compact {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-card);
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 6px 12px;
  display: flex;
}

.board-toolbar-filters {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.board-toolbar-search-wrap {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: flex;
}

.board-toolbar-search-wrap .ui-search-input-wrap {
  width: 210px;
  max-width: 220px;
}

.board-toolbar-search-wrap .ui-search-input {
  height: 30px;
  padding: 0 26px 0 28px;
  font-size: 12px;
}

.board-toolbar-search-wrap .ui-search-icon {
  left: 8px;
}

.board-toolbar-search-wrap .ui-search-icon svg {
  width: 13px;
  height: 13px;
}

.board-topic-pills-bar {
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  align-items: center;
  gap: 6px;
  padding: 2px 2px 6px;
  display: flex;
  overflow-x: auto;
}

.board-topic-filter-label {
  color: var(--ds-ink-light);
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
}

.board-topic-pill {
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-ink-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
}

.board-topic-pill:hover {
  border-color: var(--ds-border-hover);
  color: var(--ds-ink);
  background: var(--ds-surface-subtle);
}

.board-topic-pill.is-active {
  border-color: var(--ds-brand);
  background: var(--ds-brand-soft);
  color: var(--ds-brand);
  font-weight: 600;
}

.board-topic-pill .topic-hash {
  opacity: .7;
}

.board-topic-pill .topic-badge-count {
  border-radius: var(--ds-radius-pill);
  color: inherit;
  background: #0000000d;
  padding: 0 4px;
  font-size: 10.5px;
}

.board-topic-pill.is-active .topic-badge-count {
  background: #2d7a4f26;
}

.board-stream {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: stretch;
  gap: 14px;
  display: grid;
}

@media (max-width: 680px) {
  .board-stream {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.board-stream > .pagination-bar {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.board-day-group {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-card);
  box-sizing: border-box;
  flex-direction: column;
  height: 100%;
  min-height: 120px;
  padding: 13px 15px;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}

.board-day-group:hover {
  border-color: var(--ds-border-hover);
  box-shadow: 0 2px 8px #0000000a;
}

.board-day-group.is-today {
  border-color: var(--ds-brand);
  background: linear-gradient(180deg, var(--ds-brand-soft) 0%, var(--ds-surface) 35px);
}

.board-day-header {
  border-bottom: 1px solid var(--ds-border-subtle);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  display: flex;
}

.board-day-date-combo {
  align-items: baseline;
  gap: 6px;
  display: flex;
}

.board-day-date {
  letter-spacing: -.015em;
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 700;
}

.board-day-weekday {
  color: var(--ds-ink-muted);
  font-size: 12px;
}

.board-day-today-tag {
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand);
  color: #fff;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 600;
}

.board-day-today-tag.is-yesterday {
  background: var(--ds-surface-subtle);
  color: var(--ds-ink-muted);
  border: 1px solid var(--ds-border-subtle);
}

.board-day-header-right {
  align-items: center;
  gap: 8px;
  display: flex;
}

.board-day-counts-pill {
  color: var(--ds-ink-light);
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-pill);
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  font-size: 11px;
  line-height: 1.2;
  display: inline-flex;
}

.board-count-item {
  align-items: center;
  gap: 3px;
  font-weight: 600;
  display: inline-flex;
}

.board-count-item.is-did {
  color: var(--ds-data-did);
}

.board-count-item.is-thinking {
  color: var(--ds-data-thinking);
}

.board-count-dot {
  border-radius: 50%;
  width: 5px;
  height: 5px;
  display: inline-block;
}

.board-count-dot.is-did {
  background: var(--ds-data-did);
}

.board-count-dot.is-thinking {
  background: var(--ds-data-thinking);
}

.board-day-counts-pill .sep {
  opacity: .4;
  margin: 0 1px;
}

.board-day-jump-link {
  color: var(--ds-ink-muted);
  white-space: nowrap;
  align-items: center;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
  display: inline-flex;
}

.board-day-jump-link svg {
  width: 12px;
  height: 12px;
}

.board-day-jump-link:hover {
  color: var(--ds-brand);
}

.board-day-body {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  min-width: 0;
  display: flex;
}

.board-compact-points {
  flex-direction: column;
  flex: 1;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.board-compact-point-row {
  color: var(--ds-ink);
  align-items: baseline;
  gap: 7px;
  padding: 2px 0;
  font-size: 12.5px;
  line-height: 1.45;
  display: flex;
}

.board-point-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  display: inline-block;
  position: relative;
  top: -1px;
}

.board-point-dot.is-did {
  background: var(--ds-data-did);
}

.board-point-dot.is-thinking {
  background: var(--ds-data-thinking);
}

.board-point-text {
  word-break: break-word;
  flex: 1;
  min-width: 0;
}

.board-point-topic-tag {
  color: var(--ds-brand);
  background: var(--ds-brand-soft);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 4px;
  flex-shrink: 0;
  align-items: center;
  margin-left: 6px;
  padding: 0 5px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  transition: all .15s;
  display: inline-flex;
}

.board-point-topic-tag:hover {
  background: var(--ds-brand);
  color: #fff;
}

.board-point-topic-tag.is-selected {
  background: var(--ds-brand);
  color: #fff;
  border-color: var(--ds-brand);
}

.board-expand-toggle-btn {
  color: var(--ds-brand);
  cursor: pointer;
  background: none;
  border: none;
  align-self: flex-start;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  padding: 4px 0 0;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  transition: opacity .15s;
  display: inline-flex;
}

.board-expand-toggle-btn svg {
  width: 12px;
  height: 12px;
}

.board-expand-toggle-btn:hover {
  opacity: .8;
  text-decoration: underline;
}

.board-unassigned-notice {
  background: var(--ds-surface-subtle);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-ink-muted);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 11.5px;
  display: flex;
}

.status-card {
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px;
  display: flex;
}

.status-card h2 {
  color: var(--ds-ink);
  font-size: var(--ds-font-size-title);
  font-weight: 700;
}

.status-card p {
  color: var(--ds-ink-muted);
  font-size: var(--ds-font-size-body);
}

@media (min-width: 761px) {
  .floating-action {
    display: none;
  }
}

@media (max-width: 1200px) {
  :root {
    --sidebar-width: 212px;
    --context-width: 276px;
  }
}

@media (max-width: 880px) {
  :root {
    --sidebar-width: 200px;
  }

  .app-shell {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  html[data-sidebar-collapsed="true"] .app-shell, .app-shell.is-sidebar-collapsed {
    grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
  }

  .page-column {
    min-height: auto;
  }

  .context-column {
    background: var(--ds-content-bg);
    border-left: 0;
    grid-column: 2;
    height: auto;
    padding: 0 clamp(20px, 3.5vw, 40px) 48px;
    position: static;
    overflow: visible;
  }

  .context-column-inner {
    width: min(100%, 920px);
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    border: 0;
    width: 0;
    height: 0;
    padding: 0;
    position: static;
    overflow: visible;
  }

  .sidebar-header {
    display: none;
  }

  .sidebar-toggle-btn {
    display: none !important;
  }

  .brand, .sidebar-bottom {
    display: none;
  }

  .nav-list {
    z-index: 30;
    height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    padding: 8px 12px env(safe-area-inset-bottom);
    box-shadow: var(--ds-shadow-floating);
    background: #fffffff5;
    border-top: 1px solid #1c202412;
    justify-content: space-around;
    align-items: center;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .nav-item {
    min-width: 0;
    height: 54px;
    color: var(--ds-ink-light);
    border-radius: 0;
    flex-direction: column;
    flex: 1 1 0;
    justify-content: center;
    gap: 3px;
    padding: 0;
    background: none !important;
  }

  .nav-item svg {
    width: 22px;
    height: 22px;
  }

  .nav-label {
    font-size: var(--ds-font-size-caption);
    font-weight: 520;
    line-height: 1.1;
    display: block;
  }

  .nav-item.is-active {
    color: var(--ds-brand-hover);
  }

  .page-content-inner {
    padding-bottom: 18px;
  }

  .context-column {
    padding: 0 18px calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 32px);
  }

  .floating-action {
    right: 22px;
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 14px);
  }

  .dialog.sheet {
    border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
    width: 100vw;
    max-width: 100vw;
    padding-bottom: env(safe-area-inset-bottom);
    margin: auto 0 0;
  }

  .welcome-shell {
    grid-template-columns: 1fr;
  }

  .welcome-panel {
    min-height: 76vh;
    padding: 36px 22px;
  }

  .welcome-evidence {
    padding: 36px 22px 48px;
  }

  .space-access-row {
    grid-template-columns: 1fr;
  }

  .worker-control-card {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .worker-actions {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .worker-actions .button {
    width: 100%;
  }

  .analysis-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .analysis-run-details summary {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .analysis-run-right {
    grid-column: 2;
  }

  .analysis-stage-list {
    margin-left: 16px;
  }

  .analysis-stage-list li {
    grid-template-columns: 1fr auto;
  }

  .analysis-stage-list time {
    grid-column: 1 / -1;
  }

  .ask-search-form {
    grid-template-columns: 1fr;
  }

  .ask-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .topic-correction-row {
    grid-template-columns: 1fr;
  }

  .record-analysis-main {
    flex-direction: column;
    align-items: stretch;
  }

  .record-analysis-button, .record-analysis-complete {
    width: 100%;
  }

  .record-progress-heading, .record-recent-events-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .record-progress-stages {
    gap: 5px;
  }

  .record-progress-stage {
    align-items: flex-start;
  }

  .record-current-task q {
    white-space: normal;
  }

  .record-header-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .record-header-date-row {
    flex-wrap: wrap;
  }

  .pagination-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }

  .pagination-info {
    justify-content: space-between;
  }

  .pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination-btn-text {
    display: none;
  }

  .board-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .board-day-columns {
    grid-template-columns: 1fr;
  }

  .board-inputs-row {
    flex-direction: column;
    align-items: stretch;
  }

  .board-date-jump, .board-search-box {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

:root {
  --ds-content-bg: #fff;
}

.sidebar {
  background: #f8f9fa;
}

.page-content {
  background: #fff;
}

.ui-card, .ui-grouped-list, .ui-metric-strip, .ui-toolbar, .records-toolbar, .board-toolbar-compact, .trend-unified-toolbar, .pattern-filter-bar-modern {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.ui-toolbar, .records-toolbar, .board-toolbar-compact, .pattern-filter-bar-modern {
  border-bottom: 1px solid var(--ds-border) !important;
  padding: 0 0 14px !important;
}

.trend-unified-toolbar {
  border-bottom: none !important;
  padding: 0 0 8px !important;
}

.trend-studio-grid {
  border-bottom: 1px solid var(--ds-border) !important;
  gap: 28px !important;
  padding: 8px 0 24px !important;
}

.trend-chart-studio-card {
  border-right: 1px solid var(--ds-border-subtle) !important;
  padding: 4px 28px 4px 0 !important;
}

.trend-calendar-card {
  padding: 4px 0 !important;
}

@media (max-width: 960px) {
  .trend-chart-studio-card {
    border-right: none !important;
    border-bottom: 1px solid var(--ds-border) !important;
    padding-bottom: 20px !important;
    padding-right: 0 !important;
  }
}

.ui-metric-strip, .doc-metric-grid, .pattern-metric-grid {
  border: none !important;
  border-top: 1px solid var(--ds-border) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  box-shadow: none !important;
  background: none !important;
  border-radius: 0 !important;
  gap: 0 !important;
  padding: 14px 0 !important;
}

.ui-metric-cell, .doc-metric-card, .doc-metric-card.is-highlight, .pattern-metric-card {
  border: none !important;
  border-right: 1px solid var(--ds-border-subtle) !important;
  box-shadow: none !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 2px 18px !important;
}

.ui-metric-cell:first-child, .doc-metric-card:first-child, .pattern-metric-card:first-child {
  padding-left: 0 !important;
}

.ui-metric-cell:last-child, .doc-metric-card:last-child, .pattern-metric-card:last-child {
  border-right: none !important;
}

.ui-grouped-item, .analysis-run-card, .settings-row {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--ds-border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.retro-document, .detail-retro-document {
  gap: 0 !important;
}

.detail-header-bar.is-readonly, .retro-document .detail-header-bar, .retro-document .entry-module, .detail-ai-panel, .minimal-thinking-card {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.detail-header-bar.is-readonly, .retro-document .detail-header-bar {
  border-bottom: 1px solid var(--ds-border) !important;
  padding: 4px 0 20px !important;
}

.retro-document .entry-module {
  border-bottom: 1px solid var(--ds-border) !important;
  padding: 22px 0 !important;
}

.detail-ai-panel {
  padding: 22px 0 8px !important;
}

.minimal-thinking-card {
  background: var(--ds-surface-subtle) !important;
  border-radius: var(--ds-radius-md) !important;
  padding: 10px 14px !important;
}

.doc-monitor-bento, .pattern-overview-bento, .analysis-log-list-modern, .rebuild-disclosure-card {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.doc-monitor-bento, .pattern-overview-bento {
  border-bottom: 1px solid var(--ds-border) !important;
  padding-top: 4px !important;
  padding-bottom: 20px !important;
}

.analysis-run-summary {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.profile-card {
  border-bottom: 1px solid var(--ds-border) !important;
  padding: 6px 4px 20px !important;
}

.settings-list:not(.in-sheet) {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.home-week-strip {
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid var(--ds-border) !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 0 16px !important;
}

.home-hero-card {
  background: var(--ds-surface-subtle) !important;
  box-shadow: none !important;
  border: none !important;
}

.board-day-group {
  border-bottom: 1px solid var(--ds-border) !important;
  padding: 18px 0 !important;
}

.board-point-card, .pattern-cluster-card {
  box-shadow: none !important;
  background: var(--ds-surface-subtle) !important;
  border: none !important;
}

.topic-detail-summary-bar, .topic-month-card, .skeleton-bento-card, .skeleton-inset-list {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.topic-detail-summary-bar {
  border-bottom: 1px solid var(--ds-border) !important;
}

/*# sourceMappingURL=apps_web_src_app_globals_1wvyn-hyvojof.css.map*/