/* frontend/styles/base.css */
:root {
  --color-bg-primary: #f0f4f8;
  --color-bg-secondary: #f0f4f8d9;
  --color-bg-tertiary: #eef1f5;
  --color-bg-card: #fff;
  --color-bg-hover: #1a233204;
  --color-accent: #437396;
  --color-accent-hover: #35607f;
  --color-accent-light: #4373961f;
  --color-accent-dark: #2d5f80;
  --color-ink: #1a2332;
  --color-ink-mid: #3d4f63;
  --color-ink-light: #556270;
  --color-ink-faint: #64707f;
  --color-red: #c0392b;
  --color-red-light: #c44133;
  --color-blue-line: #b8cfe0;
  --color-blue-accent: #437396;
  --color-pencil: #556270;
  --color-paper: #f0f4f8;
  --color-paper-warm: #eef1f5;
  --color-grid-minor: #88abcc2e;
  --color-grid-major: #88abcc52;
  --color-text-primary: #1a2332;
  --color-text-secondary: #3d4f63;
  --color-text-muted: #556270;
  --color-text-inverse: #fff;
  --color-border: #6b7b8d;
  --color-border-light: #1a23321f;
  --color-border-focus: #437396;
  --color-success: #1c7f46;
  --color-warning: #9a630b;
  --color-error: #c0392b;
  --color-info: #437396;
  --color-success-strong: #176a3b;
  --color-warning-strong: #815309;
  --color-overlay-bg: #1a23324d;
  --color-subtle-bg: #1a233204;
  --color-subtle-border: #1a23321f;
  --color-focus-ring: #43739640;
  --color-selection-bg: #43739633;
  --color-code-text: #cdd6f4;
  --color-code-bg: #1e2030;
  --shadow-sm: 0 1px 3px #1a23320f;
  --shadow-md: 0 2px 12px #1a233214;
  --shadow-lg: 0 4px 20px #1a23321a;
  --shadow-glow: none;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-full: 9999px;
  --radius-brand: 30% 70% 70% 30% / 30% 30% 70% 70%;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --font-family: "IBM Plex Sans", sans-serif;
  --font-family-heading: "Archivo", sans-serif;
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --transition: .25s ease;
  --transition-fast: .15s ease;
  --transition-normal: .25s ease;
  --transition-slow: .3s ease;
  --z-dropdown: 100;
  --z-drawer: 150;
  --z-panel: 175;
  --z-modal: 200;
  --z-tooltip: 250;
  --z-toast: 300;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  overflow-x: hidden;
  max-width: 100%;
  min-height: 100vh;
}

#root {
  display: flex;
  overflow-x: hidden;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-paper);
}

::-webkit-scrollbar-thumb {
  background: var(--color-ink-faint);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-ink-light);
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-ink);
}

a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], input[type="search"], textarea {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border: 1px solid var(--color-ink-light);
  font-family: inherit;
  font-size: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  border-radius: 0;
  padding: 10px 14px;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--color-accent);
  cursor: pointer;
  width: 16px;
  height: 16px;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-bg-card);
  color: var(--color-text-primary);
  border: 2px solid var(--color-ink-mid);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234b4e87' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  padding: 8px 36px 8px 14px;
  font-weight: 600;
}

@supports (appearance: base-select) {
  select, ::picker(select) {
    appearance: base-select;
  }

  select {
    display: inline-flex;
    align-items:  center;
    gap: 10px;
    padding: 7px 7px 7px 14px;
    background-image: none;
  }

  select::picker-icon {
    content: "";
    flex: none;
    width: 1.5em;
    height: 1.5em;
    margin-left: auto;
    background-color: var(--color-ink-mid);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: .85em .85em;
    border-radius: 7px;
    transition: transform .15s;
  }

  select:open::picker-icon {
    transform: rotate(180deg);
  }

  ::picker(select) {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    padding: 8px;
    margin-top: 6px;
    box-shadow: 0 14px 34px #05003429;
  }

  option {
    display: flex;
    align-items:  center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 500;
    color: var(--color-text-primary);
  }

  option:hover, option:focus {
    background: color-mix(in srgb, var(--color-ink-mid) 12%, transparent);
  }

  option:checked {
    background: var(--color-ink-mid);
    color: #fff;
    font-weight: 600;
  }

  option::checkmark {
    order: 1;
    margin-left: auto;
    content: "✓";
  }

  option:not(:checked)::checkmark {
    content: "";
  }
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

input::placeholder, textarea::placeholder {
  color: var(--color-ink-light);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

input[type="date"] {
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-ink);
  letter-spacing: -.01em;
}

h1, h2 {
  font-size: var(--font-size-2xl);
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-lg);
}

p {
  margin-bottom: var(--space-4);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-dark);
}

a, button, input, select, textarea, [role="button"] {
  touch-action: manipulation;
}

.scroll-contain {
  overscroll-behavior: contain;
}

@media (hover: none) {
  .touch-show {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

html.bg-none body {
  background-image: none;
}

html.bg-grid body {
  background-image: repeating-linear-gradient(0deg, var(--color-grid-minor) 0px, var(--color-grid-minor) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, var(--color-grid-minor) 0px, var(--color-grid-minor) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(0deg, var(--color-grid-major) 0px, var(--color-grid-major) 1px, transparent 1px, transparent 100px), repeating-linear-gradient(90deg, var(--color-grid-major) 0px, var(--color-grid-major) 1px, transparent 1px, transparent 100px);
}

html.bg-organic body {
  background-color: var(--color-bg-primary);
  background-image: radial-gradient(42% 55% at 18% 22%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 72%), radial-gradient(38% 50% at 82% 16%, color-mix(in srgb, var(--color-accent-dark) 18%, transparent), transparent 70%), radial-gradient(50% 62% at 74% 80%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 74%), radial-gradient(40% 52% at 24% 84%, color-mix(in srgb, var(--color-accent-dark) 14%, transparent), transparent 72%), radial-gradient(34% 44% at 50% 48%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%);
  animation: organic-drift 38s ease-in-out infinite alternate;
  will-change: background-position;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  background-attachment: fixed;
}

@keyframes organic-drift {
  0% {
    background-position: 0 0, 100% 0%, 100% 100%, 0% 100%, 50%;
  }

  100% {
    background-position: 14% 10%, 84% 6%, 88% 90%, 8% 94%, 58% 42%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.bg-organic body {
    animation: none;
  }
}

/* frontend/styles/botanical.css */
html.theme-botanical {
  --color-bg-primary: #f0f4e8;
  --color-bg-secondary: #f0f4e8d9;
  --color-bg-tertiary: #e4ebda;
  --color-bg-card: #fff;
  --color-bg-hover: #2c3e2f04;
  --color-accent: #487856;
  --color-accent-hover: #3d6b4c;
  --color-accent-light: #4878561f;
  --color-accent-dark: #2d5f3a;
  --color-ink: #2c3e2f;
  --color-ink-mid: #5a6b5e;
  --color-ink-light: #536456;
  --color-ink-faint: #5f7263;
  --color-red: #c0392b;
  --color-red-light: #c44133;
  --color-blue-line: #a8c5a0;
  --color-blue-accent: #487856;
  --color-pencil: #5a6b5e;
  --color-paper: #f0f4e8;
  --color-paper-warm: #e4ebda;
  --color-grid-minor: #4a7c591a;
  --color-grid-major: #4a7c5933;
  --color-text-primary: #2c3e2f;
  --color-text-secondary: #5a6b5e;
  --color-text-muted: #536456;
  --color-text-inverse: #fff;
  --color-border: #8a9b8e;
  --color-border-light: #2c3e2f1f;
  --color-border-focus: #487856;
  --color-success: #487856;
  --color-warning: #806b46;
  --color-error: #c0392b;
  --color-info: #517759;
  --color-success-strong: #3d6649;
  --color-warning-strong: #6c5a3b;
  --color-overlay-bg: #2c3e2f4d;
  --color-subtle-bg: #2c3e2f04;
  --color-subtle-border: #2c3e2f1f;
  --color-focus-ring: #4a7c5940;
  --color-selection-bg: #4a7c5933;
  --color-code-text: #d4e8d0;
  --color-code-bg: #1e2820;
  --shadow-sm: 0 1px 3px #2c3e2f0f;
  --shadow-md: 0 2px 12px #2c3e2f14;
  --shadow-lg: 0 4px 20px #2c3e2f1a;
  --shadow-glow: none;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --font-family: "Nunito", sans-serif;
  --font-family-heading: "Crimson Pro", serif;
  --transition: .3s ease-in-out;
  --transition-fast: .2s ease-in-out;
  --transition-normal: .3s ease-in-out;
  --transition-slow: .4s ease-in-out;
}

html.theme-botanical ::selection {
  background: #4a7c5933;
}

.vine-nav {
  position: fixed;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-dropdown);
  display: flex;
  border-right: 1px solid var(--color-border-light);
  overflow-y: auto;
  background: linear-gradient(135deg, #ffffffd9, #f0f4e8e6);
  flex-direction: column;
  width: 260px;
  height: 100vh;
  padding: 24px 0;
  top: 0;
  left: 0;
}

.vine-brand {
  display: flex;
  text-decoration: none;
  color: inherit;
  align-items:  center;
  gap: 12px;
  padding: 0 28px 20px;
}

.vine-nav > .brain-switcher, .vine-nav > .brain-context-marker {
  margin: 0 20px var(--space-2);
}

.vine-nav .brain-switcher-trigger {
  width: 100%;
  max-width: none;
}

.vine-nav > .brain-context-marker {
  max-width: none;
}

.vine-nav .brain-switcher-menu {
  width: 100%;
  left: 0;
  right: auto;
}

.vine-container {
  position: relative;
  flex: 1;
  padding: 12px 0;
}

.vine-svg {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  width: 20px;
  height: auto;
  top: 0;
  left: 34px;
}

.vine-path {
  fill: none;
  stroke: var(--color-ink-faint);
  stroke-width: 2;
  stroke-linecap: round;
}

.vine-bud {
  fill: var(--color-ink-faint);
  transition: var(--transition);
}

.vine-items {
  position: relative;
  z-index: 2;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vine-item {
  position: relative;
}

.vine-link {
  display: flex;
  text-decoration: none;
  color: var(--color-text-secondary);
  transition: var(--transition);
  cursor: pointer;
  border-radius: 0 24px 24px 0;
  align-items:  center;
  gap: 14px;
  margin-right: 16px;
  padding: 10px 24px 10px 28px;
  font-size: .88rem;
  font-weight: 500;
}

.vine-link:hover {
  color: var(--color-accent);
  background: var(--color-bg-hover);
}

.vine-link.active {
  color: var(--color-accent);
  background: var(--color-accent-light);
  font-weight: 600;
}

.vine-leaf {
  background: var(--color-bg-tertiary);
  display: flex;
  transition: var(--transition);
  border: 2px solid #0000;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 32px;
  height: 32px;
}

.vine-leaf svg {
  stroke: var(--color-text-muted);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: var(--transition);
  width: 16px;
  height: 16px;
}

.vine-link:hover .vine-leaf {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg-card));
  border-color: var(--color-accent);
  transform: scale(1.08);
}

.vine-link:hover .vine-leaf svg {
  stroke: var(--color-accent);
}

.vine-link.active .vine-leaf {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-accent) 30%, transparent);
  transform: scale(1.12);
}

.vine-link.active .vine-leaf svg {
  stroke: #fff;
}

.vine-account-utilities {
  padding: 4px 16px 12px;
}

.vine-environment-switch {
  display: flex;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-card) 70%, transparent);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition);
  align-items:  center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.25;
}

.vine-environment-switch:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-hover);
  color: var(--color-accent);
}

.vine-environment-icon {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
}

.vine-environment-icon svg {
  width: 18px;
  height: 18px;
}

.vine-user-row {
  display: flex;
  border-top: 1px solid var(--color-border-light);
  align-items:  center;
  margin-top: auto;
  padding-right: 16px;
}

.vine-user {
  display: flex;
  color: inherit;
  text-decoration: none;
  flex: 1;
  align-items:  center;
  gap: 12px;
  min-width: 0;
  padding: 16px 12px 16px 28px;
  transition: background .2s;
}

.vine-user:hover {
  background: var(--color-bg-hover);
}

.vine-logout-btn {
  flex-shrink: 0;
}

.vine-avatar {
  border-radius: var(--radius-brand);
  background: linear-gradient(135deg, var(--color-warning), var(--color-error));
  display: flex;
  font-family: var(--font-family-heading);
  color: #fff;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 36px;
  height: 36px;
  font-size: .9rem;
  font-weight: 600;
}

.vine-avatar-sm {
  width: 28px;
  height: 28px;
  font-size: .75rem;
}

.vine-user-info {
  display: flex;
  flex-direction: column;
}

.vine-user-name {
  color: var(--color-text-primary);
  font-size: .85rem;
  font-weight: 600;
}

.vine-user-role {
  color: var(--color-text-muted);
  font-size: .72rem;
}

html.nav-vine .top-bar, html.nav-vine .mobile-dropdown {
  display: none;
}

html.nav-vine .app-main {
  padding-top: var(--space-8);
  width: auto;
  max-width: none;
  margin-left: 260px;
  margin-right: 0;
}

.vine-mobile-header {
  display: none;
  position: fixed;
  background: var(--color-bg-secondary);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-light);
  z-index: var(--z-dropdown);
  justify-content: space-between;
  align-items:  center;
  height: 56px;
  padding: 0 16px;
  top: 0;
  left: 0;
  right: 0;
}

.vine-mobile-brand {
  font-family: var(--font-family-heading);
  color: var(--color-accent);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
}

.vine-mobile-user {
  text-decoration: none;
}

.vine-mobile-header > .brain-switcher, .vine-mobile-header > .brain-context-marker {
  max-width: min(52vw, 200px);
}

.vine-mobile-header .brain-switcher-trigger {
  max-width: 100%;
}

.vine-mobile-header .brain-switcher-menu {
  right: 50%;
  transform: translateX(50%);
}

.vine-mobile-bar {
  display: none;
  position: fixed;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border-light);
  z-index: var(--z-drawer);
  background: #fffffff2;
  justify-content: space-around;
  align-items:  center;
  padding-left: 8px;
  padding-right: 8px;
  bottom: 0;
  left: 0;
  right: 0;
}

.vine-mobile-tab {
  display: flex;
  text-decoration: none;
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  flex-direction: column;
  align-items:  center;
  gap: 3px;
  min-height: 44px;
  padding: 8px;
  transition: color .2s;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 500;
}

.vine-mobile-tab.active {
  color: var(--color-accent);
}

.vine-mobile-tab-icon {
  display: flex;
  justify-content: center;
  align-items:  center;
}

.vine-mobile-tab-icon svg {
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  width: 24px;
  height: 24px;
}

.vine-mobile-tab-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 64px;
}

.vine-mobile-more {
  position: relative;
}

.vine-mobile-more-menu {
  position: absolute;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-panel);
  border: 1px solid var(--color-border-light);
  min-width: 180px;
  max-width: calc(100vw - 16px);
  padding: 8px;
  right: -8px;
}

.vine-mobile-more-item {
  display: flex;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: none;
  border: none;
  align-items:  center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  transition: background .2s;
  font-family: inherit;
  font-size: .82rem;
}

.vine-mobile-more-item:hover {
  background: var(--color-bg-hover);
}

.vine-mobile-more-item.active {
  color: var(--color-accent);
  font-weight: 600;
}

.vine-mobile-more-icon svg {
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  width: 18px;
  height: 18px;
}

.vine-mobile-more-logout {
  color: var(--color-error);
  border-top: 1px solid var(--color-border-light);
  border-radius: 0;
  margin-top: 4px;
  padding-top: 14px;
}

.vine-mobile-environment-switch {
  border-top: 1px solid var(--color-border-light);
  border-radius: 0;
  margin-top: 4px;
  padding-top: 14px;
}

.vine-mobile-more-logout:hover {
  background: #c0392b0f;
}

@media (max-width: 768px) {
  html.nav-vine .vine-nav {
    display: none;
  }

  html.nav-vine .vine-mobile-bar, html.nav-vine .vine-mobile-header {
    display: flex;
  }

  html.nav-vine .top-bar, html.nav-vine .mobile-dropdown {
    display: none;
  }

  html.nav-vine .app-main {
    padding: 72px var(--space-4) calc(80px + env(safe-area-inset-bottom, 0px)) var(--space-4);
    max-width: none;
    margin-left: 0;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .vine-mobile-tab[data-nav-item="ghostwriting"] .vine-mobile-tab-label {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .vine-mobile-tab {
    padding: 8px 4px;
  }

  .vine-mobile-tab-label {
    max-width: 60px;
    font-size: .56rem;
  }
}

/* frontend/styles/indigo.css */
html.theme-indigo {
  --color-bg-primary: #f4f3ee;
  --color-bg-secondary: #f4f3eee6;
  --color-bg-tertiary: #e3e1d8;
  --color-bg-card: #fff;
  --color-bg-hover: #05003409;
  --color-accent: #4b4e87;
  --color-accent-hover: #050034;
  --color-accent-light: #4b4e8724;
  --color-accent-dark: #050034;
  --color-ink: #050034;
  --color-ink-mid: #4b4e87;
  --color-ink-light: #585c8c;
  --color-ink-faint: #666a98;
  --color-red: #c0392b;
  --color-red-light: #a63e09;
  --color-blue-line: #8b8fb8;
  --color-blue-accent: #4b4e87;
  --color-pencil: #4b4e87;
  --color-paper: #f4f3ee;
  --color-paper-warm: #e3e1d8;
  --color-grid-minor: #4b4e871a;
  --color-grid-major: #4b4e8733;
  --color-text-primary: #050034;
  --color-text-secondary: #4b4e87;
  --color-text-muted: #585c8c;
  --color-text-inverse: #fff;
  --color-border: #8b8fb8;
  --color-border-light: #0500341f;
  --color-border-focus: #4b4e87;
  --color-success: #5a7742;
  --color-warning: #7a5a14;
  --color-error: #c0392b;
  --color-info: #3a6b8f;
  --color-success-strong: #4c6438;
  --color-warning-strong: #755613;
  --color-overlay-bg: #0500344d;
  --color-subtle-bg: #05003409;
  --color-subtle-border: #0500341f;
  --color-focus-ring: #4b4e8740;
  --color-selection-bg: #4b4e8733;
  --color-code-text: #eeeefe;
  --color-code-bg: #050034;
  --shadow-sm: 0 1px 3px #05003414;
  --shadow-md: 0 2px 12px #0500341a;
  --shadow-lg: 0 5px 24px #05003424;
  --shadow-glow: 0 0 0 1px #4b4e871f;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --font-family: "Nunito", system-ui, sans-serif;
  --font-family-heading: "Bricolage Grotesque", sans-serif;
  --transition: .25s ease;
  --transition-fast: .15s ease;
  --transition-normal: .25s ease;
  --transition-slow: .3s ease;
}

html.theme-indigo ::selection {
  background: var(--color-selection-bg);
  color: var(--color-ink);
}

/* frontend/styles/components.css */
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  display: inline-flex;
  justify-content: center;
  align-items:  center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  font-family: var(--font-family-heading);
  font-size: .78rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-ink);
  background-color: var(--color-ink);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled, .btn-danger:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.btn-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.btn-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.btn:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  color: var(--color-ink);
  background-color: #0000;
}

.btn-secondary {
  color: var(--color-ink);
  border: 1.5px solid var(--color-ink-mid);
  background-color: #0000;
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-ink);
  color: var(--color-ink);
  background-color: color-mix(in srgb, var(--color-ink) 7%, transparent);
}

.btn-ghost {
  color: var(--color-ink-mid);
  background-color: #0000;
  border: none;
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--color-bg-hover);
  color: var(--color-ink);
}

.btn-danger {
  color: var(--color-red);
  border: 2px solid var(--color-red);
  background-color: #0000;
}

.btn-danger:hover:not(:disabled) {
  background-color: var(--color-red);
  color: #fff;
}

.btn-ghost.btn-danger {
  color: var(--color-ink-mid);
  background-color: #0000;
  border: none;
}

.btn-ghost.btn-danger:hover:not(:disabled) {
  color: var(--color-red);
  background-color: #c0392b14;
}

.btn-sm {
  padding: .4rem .8rem;
  font-size: .7rem;
}

.btn-icon {
  flex-shrink: 0;
}

.btn-busy {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
}

.spinner {
  display: inline-block;
  animation: spin .8s linear infinite;
  border: 2px solid;
  border-top-color: #0000;
  border-radius: 50%;
  flex-shrink: 0;
  width: .85em;
  height: .85em;
}

.spinner-md, .loading-spinner {
  border: 2px solid var(--color-ink-faint);
  border-top-color: var(--color-ink);
  animation: spin .8s linear infinite;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.bulk-busy-note {
  color: var(--color-ink-light);
  font-size: .8rem;
}

.feedback-row {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
  padding-left: var(--space-6);
  margin-top: var(--space-2);
}

.feedback-btn {
  display: inline-flex;
  justify-content: center;
  align-items:  center;
  gap: var(--space-2);
  border: 1px solid var(--color-ink-faint);
  background: var(--color-bg-card);
  color: var(--color-ink-mid);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: 0;
  padding: .35rem .65rem;
}

.feedback-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.feedback-btn.icon {
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  width: 30px;
  height: 30px;
  padding: 0;
}

.feedback-btn.icon:hover:not(:disabled) {
  border-color: var(--color-blue-accent);
  color: var(--color-blue-accent);
}

.feedback-btn.icon:focus-visible:not(:disabled) {
  border-color: var(--color-blue-accent);
  color: var(--color-blue-accent);
}

.feedback-btn.icon.active.up {
  border-color: var(--color-success);
  color: var(--color-success);
}

.feedback-btn.icon.active.down {
  border-color: var(--color-red);
  color: var(--color-red);
}

.feedback-btn.primary {
  background: var(--color-ink);
  color: var(--color-text-inverse);
  border-color: var(--color-ink);
}

.feedback-btn.primary:hover:not(:disabled) {
  color: var(--color-ink);
  background: none;
}

.ghostwriting-page {
  padding: var(--space-8);
  width: min(100%, 1200px);
  margin: 0 auto;
}

.ghostwriting-header {
  margin-bottom: var(--space-6);
}

.ghostwriting-page .settings-hint {
  margin-bottom: var(--space-5);
}

.ghost-home-empty-note {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.ghostwriting-loading {
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: var(--space-4);
  color: var(--color-ink-light);
  flex-direction: column;
  min-height: 240px;
}

.ghostwriting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: var(--space-5);
}

.ghostwriting-card {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  min-width: 0;
}

.ghostwriting-card-header {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: var(--space-4);
}

.ghostwriting-card-header h2 {
  margin: 0 0 var(--space-1);
}

.ghostwriting-card-header p {
  color: var(--color-ink-light);
  font-size: var(--font-size-sm);
  margin: 0;
}

.ghostwriting-default {
  display: flex;
  align-items:  flex-end;
  gap: var(--space-1);
  text-align: right;
  flex-direction: column;
  flex-shrink: 0;
}

.ghostwriting-default span {
  color: var(--color-ink-light);
  font-size: var(--font-size-xs);
}

.ghostwriting-default strong {
  font-size: var(--font-size-sm);
}

.ghostwriting-grants-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.ghostwriting-grants-scroll:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.ghostwriting-grants {
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  width: 100%;
}

.ghostwriting-grants caption {
  margin-bottom: var(--space-2);
  color: var(--color-ink);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  text-align: left;
}

.ghostwriting-grants th, .ghostwriting-grants td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: right;
}

.ghostwriting-grants td, .ghostwriting-grants tbody th {
  white-space: nowrap;
}

.ghostwriting-grants th:first-child {
  text-align: left;
  padding-left: 0;
}

.ghostwriting-grants th:last-child, .ghostwriting-grants td:last-child {
  padding-right: 0;
}

.ghostwriting-grants thead th {
  color: var(--color-ink-light);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.ghostwriting-grants tbody tr:last-child th, .ghostwriting-grants tbody tr:last-child td {
  border-bottom: 0;
}

.ghostwriting-switch {
  align-self:  flex-start;
  margin-top: auto;
}

@media (max-width: 600px) {
  .ghostwriting-page, .ghostwriting-card {
    padding: var(--space-4);
  }

  .ghostwriting-card-header {
    flex-direction: column;
  }

  .ghostwriting-default {
    text-align: left;
    align-items:  flex-start;
  }

  .ghostwriting-switch {
    width: 100%;
  }
}

.feedback-btn.ghost {
  background: none;
  border-color: #0000;
}

.feedback-btn.ghost:hover:not(:disabled) {
  background: var(--color-bg-hover);
}

.feedback-note {
  margin-top: var(--space-2);
  margin-left: var(--space-6);
  padding: var(--space-3);
  border: 1px solid var(--color-ink-light);
  background: var(--color-bg-card);
  box-shadow: none;
  border-radius: 0;
  max-width: 420px;
}

.feedback-note-title {
  font-family: var(--font-family-heading);
  color: var(--color-ink-light);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--space-2);
  font-size: .72rem;
}

.feedback-note textarea {
  resize: vertical;
  border: 1px solid var(--color-ink-faint);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border-radius: 0;
  width: 100%;
  min-height: 72px;
}

.feedback-note textarea:focus-visible {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.feedback-note-actions {
  margin-top: var(--space-2);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-label, .settings-field-label {
  display: block;
  font-family: var(--font-family-heading);
  font-size: .72rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-light);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--space-2);
}

.settings-field-label {
  margin-bottom: 0;
}

.form-input {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-ink-light);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
  padding: 10px 14px;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.form-input::placeholder {
  color: var(--color-ink-faint);
}

.form-error {
  font-size: var(--font-size-sm);
  color: var(--color-red);
  margin-top: var(--space-2);
}

.card {
  background-color: var(--color-bg-card);
  box-shadow: none;
  border: 1px solid var(--color-ink-light);
  transition: box-shadow var(--transition-fast);
  border-radius: 0;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  padding: 14px var(--space-6);
  border-bottom: 2px solid var(--color-ink);
  background: var(--color-bg-hover);
  font-family: var(--font-family-heading);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding: 14px var(--space-6);
  border-top: 1px solid var(--color-border-light);
}

table {
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  width: 100%;
}

thead th {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 2px solid var(--color-ink);
  color: var(--color-ink);
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

tbody td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
  color: var(--color-text-primary);
}

tbody tr {
  transition: background var(--transition-fast);
}

tbody tr:hover {
  background: var(--color-bg-hover);
}

tbody tr:last-child td {
  border-bottom: none;
}

.table-card, .table-wrapper {
  overflow-x: auto;
}

.title-cell {
  display: grid;
  gap: .2rem;
}

.title-cell span {
  color: var(--color-text-secondary);
  font-size: .8rem;
}

tbody td.empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-8);
}

.clickable-row {
  cursor: pointer;
}

.page {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.container {
  padding: 0 var(--space-6);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items:  center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: var(--space-2);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-6 {
  gap: var(--space-6);
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: var(--space-4);
  color: var(--color-ink-light);
  flex-direction: column;
  flex: 1;
}

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

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.search-input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-ink-faint);
  font-size: var(--font-size-sm);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast);
  border-radius: 0;
  min-width: 200px;
}

.search-input:focus {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.transcript-viewer {
  overflow-y: auto;
  padding: var(--space-3);
  max-height: 600px;
}

.transcript-turn {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.transcript-turn-clickable {
  cursor: pointer;
  border-radius: 0;
  transition: background-color .15s;
}

.transcript-turn-clickable:hover {
  background-color: var(--color-subtle-bg);
}

.transcript-turn-changed .turn-text {
  background-color: #ffe68c26;
  border-bottom: 1px dashed #d4a017;
  padding: 0 2px;
}

.turn-diff-word {
  background-color: #f39c1273;
  border-radius: 2px;
  padding: 0 1px;
}

.transcript-header {
  display: flex;
  align-items:  flex-start;
  gap: var(--space-3);
  flex-direction: column;
}

.transcript-diff-toggle {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  color: var(--color-text-secondary);
}

.transcript-diff-toggle input {
  cursor: pointer;
}

.improve-textarea {
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  padding: var(--space-2);
  border: 1px solid var(--color-ink-light);
  background: var(--color-bg-card);
  width: 100%;
  min-width: 0;
  min-height: 140px;
  line-height: 1.5;
}

.improve-queued-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.transcript-compare-toggles {
  display: flex;
  align-items:  center;
  gap: var(--space-2) var(--space-4);
  flex-wrap: wrap;
  width: 100%;
}

.transcript-turn .turn-body {
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}

.transcript-turn-low-confidence {
  padding-left: var(--space-2);
  background-color: #ffc4001a;
  border-left: 2px solid #d4a017;
}

.turn-alt {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.turn-alt-label {
  font-size: .66rem;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink-faint);
  flex-shrink: 0;
  padding-top: 2px;
}

.turn-alt-text {
  overflow-wrap: anywhere;
  min-width: 0;
  font-style: italic;
}

.turn-alt-fireflies .turn-alt-text {
  border-left: 2px solid var(--color-border-light);
  padding-left: var(--space-2);
}

.turn-alt-asr .turn-alt-text {
  border-left: 2px solid var(--color-blue-line);
  padding-left: var(--space-2);
}

.card-header-actions {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-3);
  margin-left: auto;
}

.header-actions {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-3);
}

.meetings-filters {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.knowledge-content .card-header.meetings-toolbar {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  background: none;
}

.filter-select {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.meetings-stats {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-4);
  font-family: var(--font-family);
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-left: auto;
  font-size: .78rem;
  font-weight: 400;
}

.meetings-stats strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

.knowledge-content .table-card {
  border: none;
}

.knowledge-content .table-card:hover {
  box-shadow: none;
}

@media (min-width: 769px) {
  .knowledge-content .table-card tbody td {
    padding-top: .45rem;
    padding-bottom: .45rem;
  }
}

.enrichment-chip {
  margin-left: var(--space-2);
  font-size: .7rem;
}

.enrichment-chip.muted {
  opacity: .7;
}

.enrichment-chip.failed {
  color: var(--color-error, #c0392b);
  border-color: var(--color-error, #c0392b);
}

.not-present-chip {
  margin-left: var(--space-2);
  color: var(--color-warning, #f39c12);
  border-color: var(--color-warning, #f39c12);
  font-size: .7rem;
}

.bulk-action-bar {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm, 6px);
  flex-wrap: wrap;
  font-size: .85rem;
}

.bulk-result {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: .85rem;
}

.document-content-banner {
  display: inline-block;
  padding: var(--space-1) 10px;
  font-size: var(--font-size-sm);
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
  background-color: #ffe68c40;
  border: 1px dashed #d4a017;
  border-radius: 4px;
}

.turn-time {
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 45px;
}

.turn-speaker {
  color: color-mix(in srgb, var(--color-blue-accent) 76%, var(--color-ink));
  flex-shrink: 0;
  min-width: 100px;
  font-weight: 600;
}

.turn-text {
  color: var(--color-text-primary);
  flex: 1;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background-color: var(--color-subtle-bg);
}

.sortable-header {
  cursor: pointer;
  user-select: none;
}

.sort-caret {
  opacity: .7;
  margin-left: 4px;
}

.meetings-filters .search-input {
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-ink-mid);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  flex: 260px;
  min-width: 260px;
  max-width: 420px;
}

.meetings-filters .search-input:hover {
  border-color: var(--color-ink);
}

.meetings-filters .search-input:focus {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.meeting-title-line {
  display: flex;
  align-items:  center;
  gap: 2px var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.meeting-title-badges {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-1);
  flex-wrap: wrap;
  min-width: 0;
}

.meeting-title-line .enrichment-chip, .meeting-title-line .not-present-chip {
  margin-left: 0;
}

.meeting-date-cell, .meeting-duration-cell {
  white-space: nowrap;
}

.share-cell-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  cursor: default;
}

.meeting-delete-btn {
  display: inline-flex;
  justify-content: center;
  align-items:  center;
  line-height: 1;
}

td.empty .meetings-empty-state {
  margin: var(--space-4) auto;
  max-width: 460px;
}

td.empty .meetings-empty-state .settings-hint {
  justify-content: center;
}

.tag-input-wrapper {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-ink-light);
  background: var(--color-bg-card);
  border-radius: 0;
  flex-wrap: wrap;
  align-items:  center;
  min-height: 38px;
}

.tag-input-wrapper:focus-within {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.tag-input {
  outline: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: none;
  border: none;
  flex: 1;
  min-width: 100px;
  padding: .15rem 0;
}

.tag-input::placeholder {
  color: var(--color-ink-faint);
}

.tag-chips-inline {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.import-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
}

.import-file-row {
  display: flex;
  align-items:  center;
  gap: var(--space-4);
}

.file-input-hidden {
  display: none;
}

.import-transcript-input {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.form-actions-with-hint {
  row-gap: var(--space-2);
  flex-wrap: wrap;
}

.form-required-hint {
  flex-basis: 100%;
  margin: 0;
}

.char-count {
  color: var(--color-ink-faint);
  font-size: .85rem;
  font-weight: normal;
}

.char-count.upload-recording-meta, .field-hint.upload-recording-meta {
  color: var(--color-ink-mid);
}

.badge, .status-pill, .share-badge, .format-badge, .scope-badge, .sync-badge {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-ink-faint);
  color: var(--color-ink-light);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  background: none;
  line-height: 1.4;
}

.status-pill-sm {
  font-size: .7rem;
}

.badge-success {
  border-color: var(--color-success);
  color: var(--color-success);
}

.badge-warning {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.badge-danger {
  border-color: var(--color-red);
  color: var(--color-red);
}

.badge-info {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.format-badge.document {
  color: var(--color-blue-accent);
  border: 1px solid var(--color-blue-accent);
  background: none;
}

.format-badge.braindump {
  color: var(--color-pencil);
  border: 1px solid var(--color-pencil);
  background: none;
}

.scope-badge {
  margin-left: .35rem;
}

.scope-badge.personal {
  color: var(--color-red);
  border: 1px solid var(--color-red);
  background: none;
}

.chip {
  display: inline-flex;
  padding: 7px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  align-items:  center;
  gap: 6px;
}

.chip:hover {
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

.chip.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.chip-sm {
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  padding: 2px 10px;
}

.chip-count {
  font-size: .7rem;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
  color: inherit;
  padding: 1px 6px;
}

.chip.active .chip-count {
  background: #ffffff38;
}

.chip button {
  display: inline-flex;
  cursor: pointer;
  color: inherit;
  opacity: .7;
  background: none;
  border: none;
  justify-content: center;
  align-items:  center;
  margin-left: .15rem;
  padding: 0;
  font-size: .85rem;
  line-height: 1;
}

.chip button:hover {
  opacity: 1;
  color: var(--color-red);
}

.filter-group {
  display: flex;
  gap: var(--space-2);
  align-items:  center;
}

.format-filter {
  border: 1px solid var(--color-ink-faint);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border-radius: 0;
  padding: .35rem .6rem;
  font-size: .85rem;
}

.modal-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  justify-content: flex-start;
}

.text-form {
  display: grid;
  gap: var(--space-4);
}

.text-form textarea {
  resize: vertical;
  border: 1px solid var(--color-ink-light);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  border-radius: 0;
  width: 100%;
}

.text-form textarea:focus {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.text-form textarea::placeholder {
  color: var(--color-ink-faint);
}

.alert, .admin-error, .admin-success {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  animation: adminSlideIn .2s ease-out;
  border: 1px solid #0000;
  border-left-width: 4px;
}

.alert-error, .admin-error {
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-error) 25%, transparent);
  border-left-color: var(--color-error);
  color: var(--color-red);
}

.alert-success, .admin-success {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
  border-left-color: var(--color-success);
  color: var(--color-success);
}

.alert-info {
  background: var(--color-accent-light);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-left-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.alert-warning {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
  border-left-color: var(--color-warning);
  color: var(--color-warning);
}

.empty-state {
  display: flex;
  text-align: center;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-5);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  flex-direction: column;
}

.empty-state-icon {
  display: grid;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-accent-light);
  color: var(--color-accent);
  place-items:  center;
  width: 64px;
  height: 64px;
}

.empty-state-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.empty-state-sub {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  max-width: 42ch;
}

.empty-state--plain {
  padding: var(--space-8) var(--space-4);
  background: none;
  border: 0;
}

.empty-state--plain .empty-state-icon {
  width: 48px;
  height: 48px;
}

.back-link {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
  background: none;
  border: 0;
  padding: 0;
}

.back-link:hover {
  color: var(--color-accent);
}

.back-link:focus-visible {
  color: var(--color-accent);
}

.back-link-icon {
  flex: none;
}

.settings-hint {
  display: flex;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--color-border-light);
  background: var(--color-subtle-bg);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  flex-wrap: wrap;
}

.settings-hint-text {
  flex: 18ch;
  min-width: 0;
}

.settings-hint-links {
  display: flex;
  align-items:  center;
  gap: var(--space-1) var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
}

.settings-link {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-1);
  color: var(--color-accent-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  border-bottom: 1px solid #0000;
  min-width: 0;
}

.settings-link:hover {
  color: var(--color-ink);
  border-bottom-color: currentColor;
}

.settings-link:focus-visible {
  color: var(--color-ink);
  border-bottom-color: currentColor;
}

.settings-link-label {
  overflow-wrap: anywhere;
  min-width: 0;
}

.settings-link-icon, .settings-link-chevron {
  flex: none;
}

.settings-link-chevron {
  opacity: .7;
}

.ai-cleanup-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.ai-cleanup-canvas .card-header .muted {
  font-size: var(--font-size-sm);
  color: var(--color-ink-faint);
  margin-left: auto;
}

.ai-cleanup-textarea {
  padding: var(--space-3);
  border: 1px solid var(--color-border-light);
  resize: vertical;
  background: var(--color-bg-card);
  color: var(--color-ink);
  border-radius: 0;
  width: 100%;
  min-height: 600px;
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
}

.ai-cleanup-textarea:focus {
  outline: none;
  border-color: var(--color-ink);
}

.ai-cleanup-instruction-textarea {
  min-height: 140px;
}

.ai-cleanup-sections {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  overflow-y: auto;
  flex-direction: column;
  max-height: 600px;
}

.ai-cleanup-sidebar-hint {
  padding: var(--space-2) var(--space-3) 0;
  font-size: var(--font-size-xs);
  color: var(--color-ink-light);
  margin: 0;
  line-height: 1.5;
}

.ai-cleanup-section {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border-light);
  font-size: var(--font-size-sm);
  border-radius: 0;
}

.ai-cleanup-section.inactive {
  opacity: .5;
}

.ai-cleanup-section .section-title {
  grid-column: 1 / -1;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.ai-cleanup-section .section-number {
  color: var(--color-ink-faint);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-normal);
  text-align: right;
  min-width: 24px;
  font-size: .9em;
}

.ai-cleanup-section .section-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.ai-cleanup-sort {
  margin-left: auto;
}

.ai-cleanup-status {
  display: flex;
  align-items:  center;
}

.ai-cleanup-status-pill {
  display: inline-flex;
  padding: var(--space-1) 10px;
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border-light);
  color: var(--color-ink-faint);
  background: var(--color-bg-card);
  border-radius: 0;
  align-items:  center;
  gap: 6px;
}

.ai-cleanup-status-pill.status-saving, .ai-cleanup-status-pill.status-dirty {
  color: #7a5c0a;
  background: #ffe68c26;
  border-color: #d4a017;
}

.ai-cleanup-status-pill.status-saved {
  color: #2e7d32;
  background: #2e7d3214;
  border-color: #2e7d32;
}

.ai-cleanup-status-pill.status-error {
  border-color: var(--color-red);
  color: var(--color-red);
  background: #c0392b0f;
}

.ai-cleanup-sort select {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
}

.ai-cleanup-section .badge-new {
  display: inline-block;
  background: var(--color-warning);
  color: var(--color-text-inverse);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 2px;
  padding: 1px 6px;
}

.section-control {
  display: inline-flex;
  font-size: var(--font-size-sm);
  color: var(--color-ink-faint);
  align-items:  center;
  gap: 6px;
}

.section-control input[type="number"] {
  border: 1px solid var(--color-border-light);
  font-family: inherit;
  font-size: inherit;
  text-align: right;
  border-radius: 0;
  width: 56px;
  padding: 2px 6px;
}

.section-control input[type="checkbox"] {
  cursor: pointer;
}

@media (max-width: 768px) {
  .ai-cleanup-layout {
    grid-template-columns: 1fr;
  }

  .ai-cleanup-textarea {
    min-height: 400px;
  }

  .ai-cleanup-termen-layout {
    grid-template-columns: 1fr;
  }
}

.ai-cleanup-termen-layout > * {
  min-width: 0;
}

.meeting-timeline-editor {
  margin-top: var(--space-3);
  border-top: 4px solid var(--color-ink);
  min-width: 0;
}

.meeting-editor-header, .meeting-editor-actions, .meeting-editor-commit-row, .transcript-correction-actions, .meeting-impact-dialog-actions, .meeting-edit-status-actions, .shared-meeting-title-row {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.meeting-editor-header {
  justify-content: space-between;
}

.meeting-editor-header h2, .meeting-editor-header p, .shared-meeting-title-row h1 {
  margin: 0;
}

.meeting-editor-kicker {
  margin-bottom: var(--space-1);
  color: var(--color-ink-light);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.meeting-editor-intro {
  color: var(--color-text-secondary);
  max-width: 70ch;
}

.meeting-redacted-badge {
  border: 1px solid var(--color-red);
  color: var(--color-red);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.meeting-editor-no-audio {
  margin: var(--space-5) 0 var(--space-3);
  padding: var(--space-3);
  border-left: 4px solid var(--color-border);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.meeting-montage-track {
  display: block;
  border: 2px solid var(--color-ink);
  background: var(--color-bg-card);
  cursor: crosshair;
  touch-action: none;
  width: 100%;
  min-height: 52px;
  padding: 9px 0;
}

.meeting-montage-track svg {
  display: block;
  width: 100%;
  height: 32px;
}

.meeting-track-retained {
  fill: var(--color-success);
  opacity: .28;
}

.meeting-track-removed {
  stroke: var(--color-red);
  stroke-width: 500;
}

.meeting-gap-hatch {
  fill: var(--color-red);
}

.meeting-track-selection {
  fill: var(--color-accent-light);
  stroke: var(--color-accent-dark);
  stroke-width: 650;
}

.meeting-track-playhead {
  stroke: var(--color-accent-dark);
  stroke-width: 2.5;
  stroke-linecap: round;
  pointer-events: none;
}

.meeting-playhead-readout {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-ink);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
}

.meeting-editor-legend {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.meeting-editor-legend span {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
}

.meeting-editor-legend span:before {
  border: 1px solid var(--color-border);
  content: "";
  width: 18px;
  height: 8px;
}

.meeting-editor-legend-retained:before {
  background: color-mix(in srgb, var(--color-success) 28%, transparent);
}

.meeting-editor-legend-removed:before {
  background: repeating-linear-gradient(135deg, var(--color-red) 0 2px, transparent 2px 5px);
}

.meeting-range-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border-light);
}

.meeting-range-controls legend {
  padding-inline: var(--space-2);
  color: var(--color-ink);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.meeting-range-controls label {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.meeting-range-controls input[type="range"] {
  accent-color: var(--color-accent-dark);
  width: 100%;
  min-height: 44px;
}

.meeting-editor-actions {
  margin-bottom: var(--space-5);
}

.meeting-removed-ranges {
  padding: var(--space-4);
  border-left: 4px solid var(--color-red);
  background: var(--color-bg-tertiary);
}

.meeting-removed-ranges h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
}

.meeting-removed-ranges ul {
  display: grid;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.meeting-removed-ranges li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-variant-numeric: tabular-nums;
}

.meeting-removed-ranges li span:nth-child(2) {
  color: var(--color-red);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.meeting-editor-announcement {
  margin: var(--space-3) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.meeting-editor-commit-row {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  justify-content: flex-end;
}

.meeting-impact-dialog {
  border: 2px solid var(--color-ink);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
  width: min(560px, 100vw - 32px);
  padding: 0;
}

.meeting-impact-dialog::backdrop {
  background: var(--color-overlay-bg);
}

.meeting-impact-dialog-body {
  padding: var(--space-6);
}

.meeting-impact-dialog-body h2 {
  margin-top: 0;
}

.meeting-impact-dialog-body ul {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
}

.meeting-impact-dialog-actions {
  margin-top: var(--space-6);
  justify-content: flex-end;
}

.transcript-correction {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.transcript-correction label {
  display: grid;
  gap: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.transcript-correction textarea {
  resize: vertical;
  width: 100%;
  min-height: 88px;
}

.transcript-inline-hint {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}

.transcript-inline-editable {
  border-radius: var(--radius-sm);
  cursor: text;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.transcript-inline-editable:hover {
  background: var(--color-subtle-bg);
  box-shadow: 0 0 0 3px var(--color-subtle-bg);
}

.transcript-inline-editable:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 3px;
}

.meeting-edit-status-page {
  display: grid;
  padding: var(--space-6);
  place-items:  center;
  min-height: min(620px, 100vh - 120px);
}

.meeting-edit-status {
  position: relative;
  overflow: hidden;
  width: min(680px, 100%);
}

.meeting-edit-status-marker {
  background: var(--color-accent);
  height: 6px;
}

.meeting-edit-status.is-failed .meeting-edit-status-marker {
  background: var(--color-red);
}

.meeting-edit-status-back {
  margin-bottom: var(--space-4);
}

.meeting-edit-status h1 {
  font-size: var(--font-size-2xl);
}

.meeting-edit-status-details {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0;
}

.meeting-edit-status-details div {
  display: grid;
  grid-template-columns: minmax(100px, .35fr) 1fr;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
}

.meeting-edit-status-details dt {
  color: var(--color-text-muted);
}

.meeting-edit-status-details dd {
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.initial-upload-progress {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.initial-upload-progress-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-secondary);
}

.initial-upload-progress progress {
  accent-color: var(--color-accent);
  width: 100%;
  height: 10px;
}

.initial-upload-leave-hint {
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-light);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.meeting-edit-progress {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-accent);
  background: var(--color-bg-card);
  border-left-width: 5px;
}

.meeting-edit-progress.is-failed {
  border-color: var(--color-red);
}

.meeting-edit-progress h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-base);
}

.meeting-edit-progress p {
  color: var(--color-text-secondary);
  margin: 0;
}

.shared-meeting-title-row h1 {
  flex: auto;
}

.shared-meeting-redaction-note {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-red);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.shared-meeting-redaction-note strong {
  color: var(--color-text-primary);
}

.shared-meeting-gap-list {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  font-variant-numeric: tabular-nums;
}

.transcript-removal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.transcript-turn-selector {
  display: inline-flex;
  cursor: pointer;
  flex: 0 0 44px;
  justify-content: center;
  align-items:  center;
  width: 44px;
  min-height: 44px;
}

.transcript-turn-selector input {
  accent-color: var(--color-accent-dark);
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin: 0;
}

.transcript-turn-seek {
  padding: var(--space-1);
  color: var(--color-link);
  cursor: pointer;
  background: none;
  border: 0;
  min-width: 44px;
  min-height: 44px;
}

.transcript-turn-seek:hover {
  text-decoration: underline;
}

.transcript-turn-seek:focus-visible {
  text-decoration: underline;
}

.shared-meeting-summary-hint {
  margin: 0;
}

@media (max-width: 768px) {
  .meeting-detail-main > .meeting-timeline-editor, .meeting-detail-main > .meeting-edit-progress {
    order: -1;
  }

  .meeting-range-controls {
    grid-template-columns: 1fr;
  }

  .meeting-editor-actions, .meeting-editor-commit-row, .meeting-impact-dialog-actions, .meeting-edit-status-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .meeting-editor-actions .btn, .meeting-editor-commit-row .btn, .meeting-impact-dialog-actions .btn, .meeting-edit-status-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .meeting-montage-track {
    min-height: 56px;
  }

  .meeting-audio-dock {
    grid-template-columns: 1fr;
  }

  .meeting-audio-dock .btn {
    width: 100%;
    min-height: 44px;
  }

  .meeting-removed-ranges li {
    flex-wrap: wrap;
    align-items:  flex-start;
  }

  .meeting-removed-ranges li .btn {
    flex: 1 0 100%;
    width: 100%;
    min-height: 44px;
  }

  .meeting-edit-status-page {
    padding: var(--space-3);
  }

  .meeting-edit-progress {
    flex-direction: column;
    align-items: stretch;
  }

  .meeting-edit-progress .btn {
    width: 100%;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .meeting-timeline-editor *, .meeting-impact-dialog * {
    scroll-behavior: auto;
    transition-duration: .01ms;
  }
}

.ai-cleanup-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-4);
  gap: 0;
}

.ai-cleanup-tab {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  color: var(--color-ink-light);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}

.ai-cleanup-tab:hover {
  color: var(--color-text-primary);
}

.ai-cleanup-tab.ai-cleanup-tab-active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-ink);
}

.ai-cleanup-tab-badge {
  display: inline-flex;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  background: var(--color-border-light);
  color: var(--color-ink-light);
  border-radius: 10px;
  justify-content: center;
  align-items:  center;
  min-width: 22px;
  padding: 1px 6px;
}

.ai-cleanup-tab.ai-cleanup-tab-active .ai-cleanup-tab-badge {
  background: var(--color-ink);
  color: var(--color-bg-card);
}

.ai-cleanup-stack {
  display: flex;
  gap: var(--space-6, 40px);
  flex-direction: column;
}

.ai-cleanup-termen {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

.ai-cleanup-termen-layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: var(--space-4);
  align-items:  start;
}

.ai-cleanup-termen-list {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  max-height: calc(100vh - 220px);
}

.ai-cleanup-termen-list .search-input {
  margin-top: var(--space-1);
  width: 100%;
}

.ai-cleanup-termen-items {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  gap: 2px;
  padding: 2px;
}

.ai-cleanup-termen-item {
  display: flex;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  flex-direction: column;
  gap: 2px;
  transition: background .1s;
  font-family: inherit;
}

.ai-cleanup-termen-item:hover {
  background: var(--color-bg-hover, #00000008);
}

.ai-cleanup-termen-item.selected {
  border-color: var(--color-ink);
  background: var(--color-accent-light);
}

.ai-cleanup-termen-item.inactive {
  opacity: .55;
}

.termen-item-title {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
}

.termen-item-term {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.termen-item-sub {
  font-size: var(--font-size-sm);
  color: var(--color-ink-light);
}

.termen-item-meta {
  color: var(--color-ink-faint);
  font-size: 11px;
}

.ai-cleanup-termen-detail .empty-detail {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-ink-faint);
}

.ai-cleanup-termen-detail .text-form {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

.ai-cleanup-termen-detail .termen-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-4);
}

.termen-field-full {
  grid-column: 1 / -1;
}

.termen-field-term input {
  font-weight: var(--font-weight-medium);
  border-width: 1px;
  border-color: var(--color-ink);
}

.termen-field-apply, .termen-field-skip {
  padding: var(--space-3);
  border-left: 3px solid #0000;
  border-radius: 0;
}

.termen-field-apply {
  border-left-color: var(--color-success, var(--color-accent));
  background: #4a7c590f;
}

.termen-field-apply > span {
  color: var(--color-success, var(--color-accent));
}

.termen-field-skip {
  border-left-color: var(--color-red);
  background: #c0392b0d;
}

.termen-field-skip > span {
  color: var(--color-red);
}

.termen-form-footer {
  display: flex;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
}

.termen-footer-meta {
  display: flex;
  gap: var(--space-4);
  align-items:  center;
}

.termen-footer-actions {
  display: flex;
  gap: var(--space-2);
  align-items:  center;
}

.termen-form-row {
  display: flex;
  gap: var(--space-4);
  align-items:  center;
}

.field-inline {
  align-items:  center;
  gap: var(--space-2);
  flex-direction: row !important;
}

.form-hint {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  background: var(--color-accent-light, #00000008);
  border-left: 2px solid var(--color-ink-faint);
  font-size: .8rem;
  line-height: 1.4;
}

.chip-input-wrapper {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-ink-light);
  background: var(--color-bg-card);
  border-radius: 0;
  flex-wrap: wrap;
  align-items:  center;
  min-height: 38px;
}

.chip-input-wrapper:focus-within {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.chip-input-wrapper.chip-skip .chip {
  color: var(--color-red);
  border-color: var(--color-red);
  background: #c0392b0a;
}

.chip-input {
  outline: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: none;
  border: none;
  flex: 1;
  min-width: 120px;
  padding: .15rem 0;
}

.chip-input::placeholder {
  color: var(--color-ink-faint);
}

@media (max-width: 768px) {
  .ai-cleanup-termen-layout {
    grid-template-columns: 1fr;
  }

  .ai-cleanup-termen-list {
    max-height: 360px;
  }

  .ai-cleanup-termen-detail .termen-form-grid {
    grid-template-columns: 1fr;
    padding: var(--space-3);
  }
}

.empty-text {
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-8);
  font-size: var(--font-size-sm);
}

.title-editable {
  cursor: pointer;
  border-bottom: 1px dashed #0000;
  transition: border-color .15s;
}

.title-editable:hover {
  border-bottom-color: var(--color-ink-faint);
}

.title-edit-row {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
}

.title-edit-input {
  font-size: var(--font-size-2xl);
  font-family: var(--font-family-heading);
  letter-spacing: -.02em;
  background: var(--color-bg-card);
  border: 2px solid var(--color-ink);
  padding: var(--space-1) var(--space-3);
  color: var(--color-text-primary);
  box-shadow: none;
  border-radius: 0;
  width: 100%;
  font-weight: 700;
}

.source-title-subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-ink-faint);
}

.summary-text {
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  margin: 0;
}

.summary-long {
  margin-top: var(--space-3);
  color: var(--color-ink-mid);
}

.summary-toggle {
  margin-top: var(--space-2);
}

.summary-keywords {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

.summary-divider {
  margin: var(--space-4) 0;
  border-top: 1px solid var(--color-border-light);
}

.summary-section-label {
  font-family: var(--font-family-heading);
  font-size: .72rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-light);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.meeting-audio-section {
  margin-top: var(--space-3);
}

.meeting-audio-dock {
  position: sticky;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:  center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
  top: 0;
}

.meeting-audio-player {
  border-radius: 0;
  width: 100%;
  height: 36px;
}

.meeting-links-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
}

.meeting-link {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  text-decoration: none;
  line-height: 1.2;
}

.meeting-link:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-border-focus);
  background: var(--color-bg-hover);
}

.meeting-link svg {
  flex-shrink: 0;
}

.markdown-body {
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  word-wrap: break-word;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  margin: 1.2em 0 .4em;
  line-height: 1.3;
}

.markdown-body h1:first-child, .markdown-body h2:first-child, .markdown-body h3:first-child {
  margin-top: 0;
}

.markdown-body h1 {
  font-size: var(--font-size-xl);
}

.markdown-body h2 {
  font-size: 1.1rem;
}

.markdown-body h3 {
  font-size: .95rem;
}

.markdown-body h4 {
  font-size: var(--font-size-sm);
}

.markdown-body p {
  margin: .5em 0;
}

.markdown-body p:first-child {
  margin-top: 0;
}

.markdown-body p:last-child {
  margin-bottom: 0;
}

.markdown-body ul, .markdown-body ol {
  margin: .5em 0;
  padding-left: 1.5em;
}

.markdown-body li {
  line-height: var(--line-height-relaxed);
  margin: .25em 0;
}

.markdown-body li > p {
  margin: 0;
}

.markdown-body strong {
  color: var(--color-ink);
  font-weight: 600;
}

.markdown-body em {
  color: var(--color-ink-mid);
  font-style: italic;
}

.markdown-body a {
  color: var(--color-blue-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.markdown-body a:hover {
  color: var(--color-accent-dark);
}

.markdown-body blockquote {
  padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--color-blue-accent);
  background: var(--color-bg-hover);
  color: var(--color-ink-mid);
  border-radius: 0;
  margin: .75em 0;
}

.markdown-body blockquote p {
  margin: 0;
}

.markdown-body code {
  background: var(--color-paper-warm);
  border: 1px solid var(--color-border-light);
  color: var(--color-ink-mid);
  border-radius: 0;
  padding: .15em .4em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em;
}

.markdown-body pre {
  padding: var(--space-3);
  background: var(--color-paper-warm);
  border: 1px solid var(--color-border-light);
  overflow-x: auto;
  border-radius: 0;
  margin: .75em 0;
}

.markdown-body pre code {
  font-size: var(--font-size-sm);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

.markdown-body hr {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: 1em 0;
}

.markdown-body table {
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  width: 100%;
  margin: .75em 0;
}

.markdown-body th, .markdown-body td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-light);
  text-align: left;
}

.markdown-body th {
  font-family: var(--font-family-heading);
  font-size: .72rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-ink-light);
  background: var(--color-bg-hover);
}

.document-content {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-mid);
  overflow-y: auto;
  overflow-x: auto;
  padding: var(--space-3);
  background: var(--color-paper-warm);
  border: 1px solid #1a233214;
  border-radius: 0;
  max-height: 600px;
  margin: 0;
}

.document-content-edit {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
  padding: var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-ink-light);
  resize: vertical;
  width: 100%;
}

.topics-list {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

.topic-item {
  display: flex;
  align-items:  flex-start;
  gap: var(--space-2);
  flex-direction: row;
}

.topic-idea-btn {
  display: inline-flex;
  border: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 28px;
  height: 28px;
  padding: 0;
}

.topic-idea-btn:hover:not(:disabled) {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  border-color: var(--color-accent);
}

.topic-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .15rem;
  min-width: 0;
}

.topic-label {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  font-size: var(--font-size-sm);
}

.topic-summary {
  display: block;
  color: var(--color-ink-mid);
  font-size: var(--font-size-sm);
}

.artifact-group {
  margin-bottom: var(--space-4);
}

.artifact-group:last-child {
  margin-bottom: 0;
}

.artifact-type-label {
  font-family: var(--font-family-heading);
  font-size: .72rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-mid);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 var(--space-2);
}

.artifact-list {
  padding-left: var(--space-5);
  display: flex;
  gap: var(--space-1);
  flex-direction: column;
  margin: 0;
}

.artifact-item {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

.speaker-warning {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background: #f39c120f;
  border-radius: 0;
}

.speaker-warning-content {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
}

.modal.speaker-modal {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  max-width: 600px;
  max-height: 85vh;
}

.speaker-modal .speaker-cards {
  overflow-y: auto;
  padding-right: var(--space-1);
  flex: auto;
  min-height: 0;
}

.speaker-modal .modal-actions {
  margin-top: 0;
}

.speaker-audio {
  border-radius: 0;
  width: 100%;
  height: 36px;
}

.speaker-cards {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

.speaker-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-ink-faint);
  padding: var(--space-4);
  border-radius: 0;
}

.speaker-card-header {
  display: flex;
  margin-bottom: var(--space-2);
  justify-content: space-between;
  align-items:  center;
}

.speaker-label {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  color: var(--color-ink);
}

.speaker-turn-count {
  font-size: var(--font-size-xs);
  color: var(--color-ink-faint);
}

.speaker-quote {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-blue-accent);
  font-size: var(--font-size-sm);
  color: var(--color-ink-mid);
  line-height: var(--line-height-relaxed);
  overflow-y: auto;
  max-height: 120px;
}

.speaker-card-controls {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.speaker-timestamp {
  font-size: var(--font-size-xs);
  color: var(--color-ink-faint);
  font-variant-numeric: tabular-nums;
}

.btn-play {
  display: inline-flex;
  border: 1px solid var(--color-ink-faint);
  background: var(--color-bg-card);
  color: var(--color-blue-accent);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  width: 28px;
  height: 28px;
  padding: 0;
  transition: background .15s, border-color .15s;
}

.btn-play:hover {
  background: var(--color-accent-light);
  border-color: var(--color-blue-accent);
}

.speaker-name-input {
  margin-top: var(--space-2);
}

.speaker-name-input input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-ink-faint);
  font-size: var(--font-size-sm);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border-radius: 0;
  width: 100%;
}

.speaker-name-input input:focus {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.speaker-name-input input::placeholder {
  color: var(--color-ink-faint);
}

.speaker-fragment-btn {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  border: 1px solid var(--color-ink-faint);
  background: var(--color-bg-card);
  color: var(--color-blue-accent);
  cursor: pointer;
  font-size: var(--font-size-xs);
  border-radius: 2px;
  transition: background .15s, border-color .15s;
}

.speaker-fragment-btn:hover {
  background: var(--color-accent-light);
  border-color: var(--color-blue-accent);
}

.speaker-fragment-btn.is-active {
  border-color: var(--color-blue-accent);
  background: var(--color-accent-light);
}

.speaker-fragment-btn .speaker-timestamp {
  color: inherit;
}

.speaker-suggested-hint {
  display: inline-block;
  margin-top: var(--space-1);
  color: var(--color-ink-faint);
  font-size: .68rem;
  font-style: italic;
}

.speaker-collision-note {
  margin: var(--space-1) 0 0;
  color: var(--color-warning);
  font-size: .72rem;
}

.proc-speaker-control {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.section-header {
  display: flex;
  margin-bottom: var(--space-4);
  align-items:  center;
  gap: 14px;
}

.section-header:after {
  content: "";
  background: var(--color-ink);
  flex: 1;
  height: 2px;
}

.section-mark {
  border: 2px solid var(--color-ink);
  display: inline-flex;
  font-family: var(--font-family-heading);
  font-size: .78rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 32px;
  height: 32px;
}

@media (max-width: 768px) {
  .btn-play, .feedback-btn.icon {
    width: 44px;
    height: 44px;
  }

  .btn-secondary {
    min-height: 44px;
  }

  .chip button {
    min-width: 20px;
    min-height: 20px;
    padding: 2px;
    font-size: .8rem;
  }

  .badge, .chip-sm {
    padding: 2px 6px;
    font-size: .7rem;
  }

  .tag-input-wrapper {
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    min-height: 30px;
  }

  .tag-input {
    font-size: var(--font-size-xs);
    min-width: 60px;
  }

  .transcript-turn {
    gap: var(--space-1);
    flex-wrap: wrap;
  }

  .turn-time {
    font-size: var(--font-size-xs);
    order: 2;
    min-width: auto;
  }

  .transcript-turn-selector {
    order: 1;
  }

  .transcript-turn .turn-body {
    flex-basis: 100%;
    order: 3;
  }

  .turn-speaker {
    flex-basis: auto;
    order: 1;
    min-width: auto;
  }

  .turn-text {
    flex-basis: 100%;
    order: 3;
    padding-left: 0;
  }

  .import-row {
    grid-template-columns: 1fr;
  }

  .speaker-modal {
    max-width: 95vw;
  }

  .speaker-card-controls {
    flex-wrap: wrap;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

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

  .modal-actions {
    flex-wrap: wrap;
  }

  .modal-actions .btn {
    min-height: 44px;
  }

  .table-wrapper {
    position: relative;
    margin: 0;
    padding: 0;
  }

  .table-card, .table-wrapper {
    background: linear-gradient(to right, var(--color-bg-card) 30%, transparent) left / 40px 100% no-repeat, linear-gradient(to left, var(--color-bg-card) 30%, transparent) right / 40px 100% no-repeat, linear-gradient(to right, #1a233214, transparent) left / 14px 100% no-repeat, linear-gradient(to left, #1a233214, transparent) right / 14px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  .filter-group {
    flex-wrap: wrap;
    width: 100%;
  }
}

.ai-cleanup-contacten {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

.ai-cleanup-contacten-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.ai-cleanup-subtabs {
  display: inline-flex;
  border: 1px solid var(--color-border-light);
  border-radius: 0;
  align-self:  flex-start;
  gap: 0;
  padding: 2px;
}

.ai-cleanup-subtab {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  cursor: pointer;
  color: var(--color-ink-light);
  background: none;
  border: none;
  font-family: inherit;
}

.ai-cleanup-subtab-active {
  background: var(--color-ink);
  color: #fff;
}

.ai-cleanup-contacten-layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: var(--space-4);
  align-items:  start;
}

.ai-cleanup-contacten-list {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  max-height: calc(100vh - 260px);
}

.ai-cleanup-contacten-list .search-input {
  margin-top: var(--space-1);
  width: 100%;
}

.ai-cleanup-contacten-items {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  gap: 2px;
  padding: 2px;
}

.ai-cleanup-contacten-item {
  display: flex;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  flex-direction: column;
  gap: 2px;
  transition: background .1s;
  font-family: inherit;
}

.ai-cleanup-contacten-item:hover {
  background: var(--color-bg-hover, #00000008);
}

.ai-cleanup-contacten-item.selected {
  border-color: var(--color-ink);
  background: var(--color-accent-light);
}

.ai-cleanup-contacten-item.inactive {
  opacity: .55;
}

.contacten-item-title {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
}

.contacten-item-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.contacten-item-meta {
  color: var(--color-ink-faint);
  font-size: 11px;
}

.crm-list-controls {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  flex-wrap: wrap;
}

.crm-list-controls .search-input {
  flex: 200px;
  width: auto;
  min-width: 0;
  margin-top: 0;
}

.crm-sort-header {
  display: flex;
  align-items:  center;
  gap: var(--space-1);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  transition: color .1s;
  font-family: inherit;
}

.crm-table-head .crm-sort-header {
  color: var(--color-ink);
}

.crm-table-head .crm-sort-header:hover, .crm-table-head .crm-sort-header.is-active {
  color: var(--color-text-primary);
}

.crm-sort-header .crm-th-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.crm-sort-header:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.crm-sort-caret {
  color: var(--color-accent);
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1;
}

.crm-sort-header:not(.is-active):hover .crm-sort-caret:after {
  content: "↕";
  color: var(--color-text-muted);
}

.crm-table {
  display: flex;
  overflow-y: auto;
  --crm-cols: minmax(0, 1.8fr) minmax(0, 1.9fr) minmax(0, 1.3fr) 104px 128px 30px;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.crm-table--companies {
  --crm-cols: minmax(0, 1.8fr) minmax(0, 1.6fr) minmax(0, 1.1fr) 104px 128px;
}

.crm-table-head, .crm-row {
  display: grid;
  grid-template-columns: var(--crm-cols);
  align-items:  center;
  column-gap: var(--space-3);
}

.crm-table-head {
  position: sticky;
  z-index: 1;
  padding: var(--space-2) var(--space-2);
  background: var(--color-bg-card);
  border-bottom: 2px solid var(--color-ink);
  top: 0;
}

.crm-th {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-ink);
  font-weight: 600;
}

.crm-row {
  padding: 7px var(--space-2);
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border-light);
  text-align: left;
  cursor: pointer;
  transition: background .1s;
  font-family: inherit;
}

.crm-row:hover {
  background: #4140990d;
}

.crm-row:focus-visible {
  outline: 2px solid var(--color-accent, #4a7fa5);
  outline-offset: -2px;
}

.crm-cell {
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-size: 13px;
}

.crm-cell-name {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  overflow: visible;
}

.crm-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.crm-name {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-email {
  color: var(--color-text-secondary);
}

.crm-col-created, .crm-col-lastcontact {
  color: var(--color-text-muted);
  font-size: 12px;
}

.crm-cell-empty {
  color: var(--color-ink-faint);
}

.crm-row-subline {
  display: none;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

.crm-col-actions {
  display: flex;
  overflow: visible;
  justify-content: flex-end;
}

.crm-row-avatar {
  align-self:  center;
}

.crm-row-avatar-square {
  border-radius: 7px;
}

.ai-cleanup-contacten-list > .card-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
}

.crm-inline-form {
  margin-bottom: var(--space-4);
}

.crm-related-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.crm-related-sub {
  font-size: var(--font-size-xs);
  opacity: .65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-row-delete {
  color: var(--color-ink-faint);
  cursor: pointer;
  opacity: 0;
  background: none;
  border: none;
  border-radius: 4px;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  transition: opacity .1s, background .1s, color .1s;
  font-size: 18px;
  line-height: 1;
}

.crm-row:hover .crm-row-delete {
  opacity: 1;
}

.crm-row-delete:focus-visible {
  opacity: 1;
}

.crm-row-delete:hover {
  color: var(--color-error);
  background: #c0392b1a;
}

@media (hover: none) {
  .crm-row-delete {
    opacity: .55;
  }
}

@media (max-width: 768px) {
  .crm-table--contacts {
    --crm-cols: minmax(0, 1fr) 30px;
  }

  .crm-table--companies {
    --crm-cols: minmax(0, 1fr);
  }

  .crm-col-email, .crm-col-company, .crm-col-domain, .crm-col-type, .crm-col-created, .crm-col-lastcontact {
    display: none;
  }

  .crm-row-subline {
    display: block;
  }
}

.contact-title-row {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.contact-title-row h1 {
  margin: 0;
}

.contact-company-current {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.contact-company-link {
  font: inherit;
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-dark);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  border: none;
  min-width: 0;
  padding: 0;
}

.contact-company-link:hover {
  text-decoration: underline;
}

.contact-company-empty {
  margin: 0 0 var(--space-2);
}

.contact-company-assign {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.contact-company-assign .contact-field-input {
  flex: 140px;
  min-width: 0;
}

.contact-company-hint {
  margin: var(--space-2) 0 0;
  color: var(--color-ink-faint);
  font-size: 11px;
}

.contact-danger-zone {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.contact-delete-btn:hover {
  color: var(--color-error);
  background: #c0392b14;
}

.ai-cleanup-contacten-detail .empty-detail {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-ink-faint);
}

.contacten-detail-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items:  center;
  min-width: 0;
}

.ai-cleanup-contacten-detail .text-form.contacten-form {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  flex-direction: column;
}

.contacten-collision {
  margin: 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  background: #00000008;
  border-left: 3px solid;
}

.contacten-collision-win {
  border-left-color: var(--color-success, var(--color-accent));
  color: var(--color-success, var(--color-accent));
}

.contacten-collision-lose {
  border-left-color: var(--color-ink-faint);
  color: var(--color-ink-light);
}

.contacten-form-footer {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
}

.field-hint {
  color: var(--color-ink-faint);
  font-size: 11px;
  font-weight: normal;
}

.card-header.skp-doc-head {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.skp-doc-head-left {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
}

.skp-hint-tight {
  margin-top: var(--space-1);
}

.skp-error-hint {
  padding: 0 var(--space-4);
  color: var(--color-error);
}

.skp-pad-hint {
  padding: var(--space-4);
  margin: 0;
}

.skp-create-form {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
}

.meetings-toolbar.skp-toolbar h2 {
  white-space: normal;
  min-width: 0;
}

.skp-toolbar .meetings-filters {
  min-width: 0;
  max-width: 100%;
}

.skp-toolbar .search-input {
  flex: 140px;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 768px) {
  .ai-cleanup-contacten-layout {
    grid-template-columns: 1fr;
  }

  .ai-cleanup-contacten-list {
    max-height: 320px;
  }
}

.proc-debug {
  display: flex;
  font-size: var(--font-size-xs, .8rem);
  flex-direction: column;
  gap: 6px;
}

.proc-row {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-2);
  min-width: 0;
}

.proc-label {
  color: var(--color-text-secondary);
}

.proc-value {
  font-weight: var(--font-weight-medium, 500);
  text-align: right;
  min-width: 0;
}

.proc-error-text {
  color: var(--color-red);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.proc-note {
  font-size: var(--font-size-xs, .75rem);
  color: var(--color-text-muted);
  margin: 0;
}

.proc-reclean {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-direction: column;
}

.proc-reclean .improve-textarea {
  min-height: 56px;
}

.proc-reclean-explain {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
  margin: 0;
}

.proc-reclean .settings-hint {
  margin-top: var(--space-1);
}

.cleanup-edit-list {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.cleanup-edit {
  display: flex;
  font-size: var(--font-size-xs, .8rem);
  overflow-wrap: anywhere;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cleanup-edit-turn {
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.cleanup-edit-change s {
  opacity: .6;
}

.cleanup-edit-rejected {
  opacity: .65;
}

.cleanup-edit-reason {
  color: var(--color-text-muted);
}

.proc-badge {
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs, .75rem);
  font-weight: var(--font-weight-semibold, 600);
  white-space: nowrap;
}

.proc-badge.proc-ok {
  color: color-mix(in srgb, var(--color-success, #27ae60) 62%, var(--color-ink));
  background: #27ae601a;
}

.proc-badge.proc-info {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.proc-badge.proc-bad {
  color: var(--color-red);
  background: #c0392b14;
}

.proc-badge.proc-muted {
  background: var(--color-paper-warm, #eef1f5);
  color: var(--color-text-secondary);
}

.proc-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-2);
}

.proc-actions {
  display: flex;
  gap: var(--space-1);
}

.proc-action-btn {
  display: inline-flex;
  border: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
  border-radius: 6px;
  justify-content: center;
  align-items:  center;
  width: 28px;
  height: 28px;
  padding: 0;
}

.proc-action-btn:hover:not(:disabled) {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  border-color: var(--color-accent);
}

.proc-action-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.radio-option-block {
  display: flex;
  cursor: pointer;
  align-items:  flex-start;
  gap: .6rem;
}

.radio-option-block input[type="radio"] {
  margin-top: var(--space-1);
  flex-shrink: 0;
}

.radio-option-text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

.radio-option-label {
  font-weight: 600;
}

.radio-option-description {
  color: var(--color-text-muted);
  font-size: .85rem;
}

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

.radio-option-phase {
  color: var(--color-text-secondary);
  font-size: .8rem;
  font-weight: 400;
}

.proc-method-select {
  padding: var(--space-1) var(--space-2);
  font-size: .8rem;
}

.proc-method-select:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.proc-note {
  font-size: var(--font-size-xs, .75rem);
  color: var(--color-text-secondary);
  font-style: italic;
}

.proc-hint {
  display: flex;
  font-size: var(--font-size-xs, .75rem);
  color: var(--color-text-secondary);
  background: var(--color-paper-warm, #eef1f5);
  padding: 5px var(--space-2);
  border-radius: 6px;
  align-items:  flex-start;
  gap: 6px;
}

.proc-hint:before {
  content: "i";
  background: var(--color-text-secondary);
  color: var(--color-paper, #fff);
  font-size: 10px;
  font-weight: var(--font-weight-bold, 700);
  text-align: center;
  border-radius: 50%;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  font-style: normal;
  line-height: 14px;
}

.proc-advanced {
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-border-light);
  padding-top: 6px;
}

.settings-advanced {
  margin-top: var(--space-4);
}

.proc-advanced > summary, .settings-advanced > summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium, 500);
  user-select: none;
  align-items:  center;
  gap: 6px;
}

.proc-advanced > summary::-webkit-details-marker {
  display: none;
}

.settings-advanced > summary::-webkit-details-marker {
  display: none;
}

.proc-advanced > summary:before, .settings-advanced > summary:before {
  content: "";
  transition: transform var(--transition-fast);
  border-bottom: 1.5px solid;
  border-right: 1.5px solid;
  width: 6px;
  height: 6px;
  transform: rotate(-45deg);
}

.proc-advanced[open] > summary:before, .settings-advanced[open] > summary:before {
  transform: rotate(45deg);
}

.proc-advanced-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.share-badge--none {
  border-color: var(--color-ink-faint);
  color: var(--color-ink-light);
}

.share-badge--ai_only {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.share-badge--summary {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.share-badge--full {
  border-color: var(--color-success);
  color: var(--color-success);
}

.share-intro {
  margin: 0 0 var(--space-1);
  color: var(--color-ink-mid);
  font-size: .85rem;
}

.share-options {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
}

.share-option {
  display: flex;
  align-items:  flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 14px;
  border: 1px solid var(--color-ink-light);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.share-option:hover {
  background: var(--color-bg-hover);
}

.share-option.is-selected {
  border-color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.share-option input {
  flex: none;
  width: auto;
  margin: 3px 0 0;
}

.share-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.share-option-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  font-size: .9rem;
}

.share-option-desc {
  color: var(--color-ink-mid);
  font-size: .8rem;
  line-height: 1.45;
}

.share-warning {
  color: var(--color-ink-mid);
  margin: 10px 0 0;
  font-size: .8rem;
}

.share-exclude {
  display: flex;
  align-items:  flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  cursor: pointer;
}

.share-exclude input {
  flex: none;
  width: auto;
  margin: 3px 0 0;
}

.share-exclude-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.share-exclude-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  font-size: .9rem;
}

.share-exclude-desc {
  color: var(--color-ink-mid);
  font-size: .8rem;
  line-height: 1.45;
}

.share-filter-summary {
  display: inline-flex;
  padding: var(--space-2) 36px var(--space-2) 14px;
  border: 2px solid var(--color-ink-mid);
  background-color: var(--color-bg-card);
  color: var(--color-text-primary);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234b4e87' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  border-radius: 11px;
  align-items:  center;
  gap: 10px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
}

@supports (appearance: base-select) {
  .share-filter-summary {
    padding: 7px 7px 7px 14px;
    background-image: none;
  }

  .share-filter-summary:after {
    content: "";
    flex: none;
    width: 1.5em;
    height: 1.5em;
    margin-left: auto;
    background-color: var(--color-ink-mid);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: .85em .85em;
    border-radius: 7px;
    transition: transform .15s;
  }

  .share-filter-summary.is-open:after {
    transform: rotate(180deg);
  }
}

.share-filter-summary.is-open {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.share-filter-menu {
  display: flex;
  padding: var(--space-2);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  flex-direction: column;
  gap: 2px;
  min-width: 100%;
  margin-top: 6px;
  box-shadow: 0 14px 34px #05003429;
}

.share-filter-menu.is-floating {
  z-index: var(--z-dropdown);
  min-width: 190px;
  margin-top: 0;
}

.share-filter-menu .share-filter-chip {
  text-align: left;
}

.share-filter-chip {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  margin: 0;
  padding: 9px 14px;
  transition: background .12s, color .12s;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
}

.share-filter-chip:after {
  content: "";
  margin-left: auto;
  font-weight: 700;
  line-height: 1;
}

.share-filter-chip.active:after {
  content: "✓";
}

.share-filter-chip:hover {
  background: color-mix(in srgb, var(--color-ink-mid) 12%, transparent);
  color: var(--color-text-primary);
}

.share-filter-chip.active, .share-filter-chip.active:hover {
  background: var(--color-ink-mid);
  color: #fff;
}

.share-picklist-trigger {
  cursor: pointer;
  font-family: var(--font-family-heading);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  gap: 5px;
}

.share-picklist-trigger:hover:not(:disabled) {
  background: color-mix(in srgb, currentColor 9%, transparent);
}

.share-picklist-trigger:disabled {
  cursor: default;
  opacity: .55;
}

.share-picklist-trigger--placeholder {
  border-style: dashed;
}

.share-picklist-caret {
  opacity: .75;
  flex: none;
}

.share-picklist-menu {
  display: flex;
  padding: var(--space-2);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  z-index: var(--z-dropdown);
  border-radius: 16px;
  flex-direction: column;
  gap: 2px;
  min-width: 230px;
  max-width: 280px;
  box-shadow: 0 14px 34px #0500342e;
}

.share-picklist-item {
  display: flex;
  padding: 9px var(--space-3);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 12px;
  align-items:  flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  transition: background .12s, color .12s;
  font-family: inherit;
}

.share-picklist-item:hover {
  background: color-mix(in srgb, var(--color-ink-mid) 12%, transparent);
}

.share-picklist-item.active, .share-picklist-item.active:hover {
  background: var(--color-ink-mid);
  color: #fff;
}

.share-picklist-item-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.share-picklist-item-title {
  font-weight: var(--font-weight-semibold);
  font-size: .85rem;
  line-height: 1.3;
}

.share-picklist-item-desc {
  color: var(--color-ink-mid);
  font-size: .76rem;
  line-height: 1.4;
}

.share-picklist-item.active .share-picklist-item-desc {
  color: #ffffffd1;
}

.share-picklist-item-check {
  margin-left: var(--space-1);
  flex: none;
  font-weight: 700;
  line-height: 1.3;
}

.share-picklist-row {
  margin: var(--space-1) 0 2px;
}

.data-table-container {
  background: var(--color-bg-card);
  border: 1px solid var(--color-ink-light);
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

.data-table-container .data-table thead th {
  background: var(--color-bg-hover);
}

.data-table-container .data-table tbody tr:last-child td {
  border-bottom: none;
}

.content-refs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.content-refs-summary {
  font-size: var(--font-size-xs, .8rem);
  color: var(--color-text-secondary);
  margin: 0;
}

.content-refs-list {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.content-ref {
  padding: var(--space-2) 10px;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-tertiary, #eef1f5);
  border-radius: 8px;
  min-width: 0;
}

.content-ref-head {
  display: flex;
  align-items:  center;
  gap: 6px;
  min-width: 0;
}

.content-ref-title {
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-accent-dark);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.content-ref-title:hover {
  text-decoration: underline;
}

.content-ref-tag {
  border-radius: var(--radius-full);
  font-size: .68rem;
  font-weight: var(--font-weight-semibold, 600);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 1px 7px;
}

.content-ref-tag--primary {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.content-ref-tag--enricher {
  background: var(--color-paper-warm, #eef1f5);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-light);
}

.content-ref-meta {
  color: var(--color-text-muted);
  margin-top: 2px;
  font-size: .72rem;
}

.content-ref-fragments {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0 0;
  padding: 0;
}

.content-ref-fragment {
  color: var(--color-text-secondary);
  border-left: 2px solid var(--color-blue-line, #b8cfe0);
  padding-left: var(--space-2);
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  font-size: .74rem;
  font-style: italic;
}

.share-compact {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  font-size: var(--font-size-xs, .8rem);
  flex-wrap: wrap;
  margin: 10px 0;
}

.share-compact-exclude {
  display: inline-flex;
  padding: 5px var(--space-3);
  border: 2px solid var(--color-ink-mid);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  cursor: pointer;
  border-radius: 11px;
  align-items:  center;
  gap: 7px;
  transition: background .15s, color .15s, border-color .15s;
  font-weight: 600;
  line-height: 1.1;
}

.share-compact-exclude input[type="checkbox"] {
  accent-color: var(--color-ink-mid);
  cursor: pointer;
  width: 15px;
  height: 15px;
  margin: 0;
}

.share-compact-exclude:has(input:checked) {
  background: var(--color-ink-mid);
  border-color: var(--color-ink-mid);
  color: #fff;
}

.share-compact-exclude:has(input:checked) input[type="checkbox"] {
  accent-color: #fff;
}

.share-compact-status {
  color: var(--color-text-muted);
  font-size: .72rem;
}

.avatar-img {
  object-fit: cover;
  border-radius: inherit;
  display: block;
  width: 100%;
  height: 100%;
}

.persona-avatar {
  overflow: hidden;
}

.content-source-toggle {
  display: inline-flex;
  padding: 2px var(--space-2);
  font-family: var(--font-family-heading);
  font-size: .62rem;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  border: 1px solid var(--color-success);
  color: var(--color-success);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
  background: none;
  border-radius: 0;
  align-items:  center;
  line-height: 1.4;
}

.content-source-toggle:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.content-source-toggle.is-excluded {
  border-color: var(--color-ink-faint);
  color: var(--color-ink-light);
}

.vine-brand-icon {
  overflow: hidden;
  background: none;
}

.vine-brand-icon img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.cid-copy-toast {
  position: fixed;
  z-index: var(--z-toast);
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  background: var(--color-ink);
  color: #fff;
  animation: cid-copy-toast-in .18s ease-out;
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  max-width: calc(100vw - 32px);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.3;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 8px 28px #05003447;
}

.cid-copy-toast svg {
  color: #5fd08a;
  flex-shrink: 0;
}

.cid-copy-toast span {
  min-width: 0;
}

@keyframes cid-copy-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }

  to {
    opacity: 1;
    transform: translate(-50%);
  }
}

.btn-link {
  cursor: pointer;
  font: inherit;
  color: var(--color-accent);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  font-size: .8rem;
}

.btn-link.danger {
  color: var(--color-error);
}

.near-dup-banner {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-red-light, #e74c3c);
  background: #e74c3c0f;
  border-radius: 8px;
  flex-wrap: wrap;
  min-width: 0;
  padding: 10px 14px;
  font-size: .9rem;
}

.near-dup-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items:  center;
  margin-left: 6px;
}

.tooltip-trigger {
  cursor: help;
  display: inline-flex;
  border-radius: 50%;
}

.tooltip-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.tooltip-glyph {
  border: 1px solid var(--color-ink-faint, #6b7888);
  color: var(--color-ink-faint, #6b7888);
  display: inline-flex;
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  width: 16px;
  height: 16px;
  font-size: 11px;
  line-height: 1;
}

.tooltip-bubble {
  position: fixed;
  left: var(--tooltip-x, 0px);
  top: var(--tooltip-y, 0px);
  z-index: var(--z-tooltip);
  padding: var(--space-2) 10px;
  background: var(--color-ink, #1a2332);
  color: var(--color-text-inverse, #fff);
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  border-radius: 8px;
  width: max-content;
  max-width: min(280px, 100vw - 16px);
  transition: opacity .12s ease-out;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.4;
  transform: translateX(-50%);
  box-shadow: 0 4px 14px #0000002e;
}

.tooltip-bubble--anchored {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tooltip-bubble {
    transition: none;
  }
}

.usage-cap-banner {
  position: sticky;
  z-index: var(--z-toast);
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-card);
  color: var(--color-warning);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid #f39c124d;
  flex-wrap: wrap;
  top: 0;
  box-shadow: inset 0 0 0 100vmax #f39c121f;
}

.usage-cap-banner .settings-hint {
  color: inherit;
  margin: 0;
}

.usage-cap-banner-dismiss {
  color: var(--color-warning);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  background: none;
  border: 1px solid #f39c1266;
  padding: .2rem .6rem;
}

.grant-controls {
  display: flex;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  flex-direction: column;
  padding: 1rem;
}

.grant-controls-title {
  margin: 0;
}

.grant-controls-empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.grant-controls-list {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.grant-controls-row {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  min-width: 0;
}

.grant-controls-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.grant-controls-row select {
  flex: none;
  width: auto;
}

.grant-controls-exclude {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.grant-controls-exclude input {
  flex: none;
  width: auto;
  margin: 0;
}

.member-meetings-toggle {
  margin-top: var(--space-3);
}

.shared-meetings-sub {
  margin-top: var(--space-1);
}

.table-empty-note {
  padding: var(--space-4);
  margin: 0;
}

.company-share-control {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  padding: 1rem;
}

.company-share-control > div {
  min-width: 0;
}

.company-share-control h3, .company-share-control p {
  margin: 0;
}

.company-share-control p {
  color: var(--color-text-secondary);
  margin-top: .25rem;
}

.company-share-control .alert {
  width: 100%;
}

.company-share-control > .btn {
  white-space: normal;
  width: 100%;
}

/* frontend/styles/login.css */
.login-page {
  display: flex;
  padding: var(--space-4);
  justify-content: center;
  align-items:  center;
  min-height: 100vh;
}

.login-container {
  background: var(--color-bg-card);
  border: 2px solid var(--color-ink);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  border-radius: 0;
  width: 100%;
  max-width: 400px;
}

.login-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.login-avatar {
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  width: 64px;
  height: 64px;
}

.login-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -.02em;
  color: var(--color-accent);
  margin: 0;
}

.login-strapline {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-ink-light);
  margin: 2px 0 var(--space-3);
}

.login-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-ink-light);
  margin: 0;
}

.login-form {
  display: flex;
  gap: var(--space-5);
  flex-direction: column;
}

.login-form .form-group {
  margin-bottom: 0;
}

.login-error {
  padding: var(--space-3) var(--space-4);
  border: 1px solid #ef535040;
  border-left: 4px solid var(--color-error);
  color: var(--color-red);
  font-size: var(--font-size-sm);
  background: #c0392b14;
  border-radius: 0;
}

.login-button {
  margin-top: var(--space-2);
  padding: .875rem var(--space-6);
  border: 2px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-text-inverse);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  border-radius: 0;
}

.login-button:hover:not(:disabled) {
  color: var(--color-ink);
  background: none;
}

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

/* frontend/styles/profile.css */
.profile-section {
  display: grid;
  gap: var(--space-6);
}

.status-pill.empty, .status-pill.idle {
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
  background: none;
}

.status-pill.processing, .status-pill.discovering {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: none;
}

.status-pill.failed {
  border: 1px solid var(--color-error);
  color: var(--color-error);
  background: none;
}

.field {
  display: grid;
  color: var(--color-ink);
  gap: .4rem;
  font-weight: 600;
}

.field small {
  color: var(--color-ink-mid);
  font-weight: 400;
}

.field.inline {
  min-width: 180px;
}

.card-actions {
  margin-top: var(--space-4);
  display: flex;
  align-items:  center;
  gap: .8rem;
}

.status-text {
  color: var(--color-ink-mid);
  font-weight: 500;
}

.sync-row {
  display: flex;
  align-items:  flex-end;
  gap: var(--space-4);
}

.sync-card-header {
  align-items:  flex-start;
}

.sync-header-feedback {
  border: 1px solid var(--color-ink-light);
  background: var(--color-bg-card);
  display: grid;
  border-radius: 0;
  gap: .12rem;
  min-width: 240px;
  max-width: 380px;
  padding: .55rem .7rem;
}

.sync-header-feedback strong {
  color: var(--color-ink);
  font-size: .86rem;
  line-height: 1.3;
}

.sync-header-feedback span {
  color: var(--color-ink-mid);
  font-size: .77rem;
  line-height: 1.35;
}

.sync-header-feedback.working {
  border-color: var(--color-warning);
  background: #f39c120f;
}

.sync-header-feedback.complete {
  border-color: var(--color-success);
  background: #27ae600f;
}

.sync-header-feedback.warning {
  border-color: var(--color-warning);
  background: #f39c120f;
}

.sync-header-feedback.error {
  border-color: var(--color-error);
  background: #c0392b0f;
}

.sync-header-feedback.idle {
  background: var(--color-bg-card);
}

.sync-meta {
  margin-top: var(--space-2);
  color: var(--color-ink-mid);
  display: grid;
  gap: .15rem;
  font-size: .85rem;
}

.hint {
  margin-top: var(--space-3);
  color: var(--color-ink-mid);
  font-size: .85rem;
}

.sync-progress {
  margin-top: var(--space-4);
  border: 1px solid var(--color-ink-light);
  padding: var(--space-4);
  background: var(--color-bg-card);
  display: grid;
  border-radius: 0;
  gap: .8rem;
}

.sync-progress-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
}

.sync-progress-header strong {
  color: var(--color-ink);
  font-size: .95rem;
}

.sync-progress.working .sync-badge {
  color: var(--color-warning);
  border-color: var(--color-warning);
  background: none;
}

.sync-progress.complete .sync-badge {
  color: var(--color-success);
  border-color: var(--color-success);
  background: none;
}

.sync-progress.warning .sync-badge {
  color: var(--color-warning);
  border-color: var(--color-warning);
  background: none;
}

.sync-progress.error .sync-badge {
  color: var(--color-error);
  border-color: var(--color-error);
  background: none;
}

.sync-steps {
  display: grid;
  gap: .45rem;
}

.sync-step {
  display: flex;
  color: var(--color-ink-light);
  align-items:  center;
  gap: .6rem;
  font-size: .9rem;
}

.sync-step .dot {
  background: var(--color-ink-faint);
  border-radius: 0;
  width: 10px;
  height: 10px;
}

.sync-step[data-state="active"] {
  color: var(--color-ink);
  font-weight: 600;
}

.sync-step[data-state="active"] .dot {
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
  animation: syncPulse 1.4s ease-in-out infinite;
}

.sync-step[data-state="done"] {
  color: var(--color-ink);
}

.sync-step[data-state="done"] .dot {
  background: var(--color-success);
}

.sync-step[data-state="error"] {
  color: var(--color-error);
  font-weight: 600;
}

.sync-step[data-state="error"] .dot {
  background: var(--color-error);
}

.sync-message {
  color: var(--color-ink-mid);
  font-size: .9rem;
}

.sync-deals {
  display: flex;
  margin-top: var(--space-2);
  flex-wrap: wrap;
  gap: .4rem;
}

.sync-deal-item {
  display: flex;
  background: var(--color-accent-light);
  border: 1px solid var(--color-focus-ring);
  border-radius: 0;
  align-items:  center;
  gap: .35rem;
  padding: .2rem .6rem;
  font-size: .82rem;
}

.sync-deal-name {
  color: var(--color-ink);
  font-weight: 500;
}

.sync-deal-count {
  color: var(--color-ink-mid);
}

@keyframes syncPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 3px var(--color-accent-light);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 6px var(--color-accent-light);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px var(--color-accent-light);
  }
}

.table-card {
  padding-top: var(--space-4);
}

.table-wrapper {
  overflow-x: auto;
}

.title-cell {
  display: grid;
  gap: .2rem;
}

.title-cell span {
  color: var(--color-ink-mid);
  font-size: .8rem;
}

tbody td.empty {
  text-align: center;
  color: var(--color-ink-light);
  padding: var(--space-8);
}

@media (max-width: 768px) {
  .sync-card-header {
    flex-direction: column;
  }

  .sync-header-feedback {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .card {
    padding: var(--space-4);
  }

  .card-header {
    gap: var(--space-2);
    flex-direction: column;
    align-items:  flex-start;
  }

  .sync-row {
    flex-direction: column;
    align-items: stretch;
  }

  .field.inline {
    min-width: 0;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .summary-card {
    padding: var(--space-3);
  }
}

/* frontend/styles/admin.css */
.row-inactive {
  opacity: .45;
}

.row-inactive:hover {
  opacity: .7;
}

.admin-environment-marker {
  position: sticky;
  z-index: var(--z-dropdown);
  padding: var(--space-1) var(--space-4);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  top: 0;
}

body:has(.admin-environment-marker) .top-bar {
  border-top: 3px solid var(--color-accent);
}

body:has(.admin-environment-marker) .mobile-dropdown {
  border-top: 3px solid var(--color-accent);
}

.company-access-controls {
  display: grid;
  gap: var(--space-1);
  min-width: 12rem;
}

.company-access-controls label {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.company-access-audit {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

@media (max-width: 700px) {
  .company-access-controls {
    min-width: 0;
  }
}

.action-buttons {
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items:  center;
}

.admin-action-destructive {
  color: var(--color-red);
}

.admin-action-destructive:hover {
  color: var(--color-red);
  background: color-mix(in srgb, var(--color-red) 8%, transparent);
}

.status-pill.queued {
  border: 1px solid var(--color-text-secondary);
  color: var(--color-text-secondary);
  background: none;
}

.status-pill.processing {
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
  animation: statusPulse 2s ease-in-out infinite;
  background: none;
}

.status-pill.error {
  border: 1px solid var(--color-red);
  color: var(--color-red);
  background: none;
}

.status-pill.idea {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: none;
}

.status-pill.planned {
  border: 1px solid var(--color-blue-accent);
  color: var(--color-blue-accent);
  background: none;
}

.status-pill.drafting {
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
  background: none;
}

.status-pill.ready {
  border: 1px solid var(--color-accent-dark);
  color: var(--color-accent-dark);
  background: none;
}

.status-pill.published {
  border: 1px solid var(--color-success);
  color: var(--color-success);
  background: none;
}

.status-pill.parked {
  border: 1px solid var(--color-text-secondary);
  color: var(--color-text-secondary);
  background: none;
}

.status-pill-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 2px 22px 2px var(--space-2);
  font-family: inherit;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-full);
  cursor: pointer;
  width: var(--status-pill-select-width, auto);
  inline-size: var(--status-pill-select-width, auto);
  background-color: #0000;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23050034' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-position: right 6px center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  min-inline-size: 0;
  max-inline-size: 128px;
  font-weight: 600;
  line-height: 1.4;
}

.status-pill-select.idea {
  --status-pill-select-width: 70px;
}

.status-pill-select.planned, .status-pill-select.drafting {
  --status-pill-select-width: 92px;
}

.status-pill-select.ready {
  --status-pill-select-width: 76px;
}

.status-pill-select.published {
  --status-pill-select-width: 126px;
}

.status-pill-select.parked {
  --status-pill-select-width: 112px;
}

.status-pill-select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.status-pill-select:hover {
  filter: brightness(1.08);
}

.status-pill.captured {
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
  animation: statusPulse 2s ease-in-out infinite;
  background: none;
}

.status-pill.enriched {
  border: 1px solid var(--color-success);
  color: var(--color-success);
  background: none;
}

.inspiration-meta {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 6px;
  margin-top: 2px;
}

.inspiration-author {
  color: var(--color-text-secondary);
  font-size: .8rem;
}

.inspiration-domain {
  color: var(--color-text-muted);
  font-size: .8rem;
  font-style: italic;
}

.content-filters {
  display: flex;
  align-items:  center;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
  flex-wrap: wrap;
}

.content-filter-group {
  display: flex;
  align-items:  center;
  gap: var(--space-2, 8px);
}

.content-filter-label {
  font-size: var(--font-size-sm, .875rem);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.content-filter-tabs, .dashboard-filter-row {
  display: flex;
  gap: var(--space-1, 4px);
  padding: 0 var(--space-3) var(--space-2);
  flex-wrap: wrap;
}

.content-filter-tab {
  display: inline-flex;
  padding: 5px var(--space-3);
  font-family: var(--font-family-heading);
  font-size: .72rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 2px solid var(--color-ink);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  background: none;
  border-radius: 0;
  justify-content: center;
  align-items:  center;
}

.content-filter-tab:hover:not(.active) {
  background: color-mix(in srgb, var(--color-ink) 7%, transparent);
}

.content-filter-tab.active {
  background: var(--color-ink);
  color: var(--color-text-inverse);
  border-color: var(--color-ink);
}

.content-filter-tab:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

.content-filter-clear {
  margin-inline-start: var(--space-2);
}

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.view-toggle-btn {
  display: flex;
  padding: 6px var(--space-4);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-fast, .15s ease);
  background: none;
  border: none;
  justify-content: center;
  align-items:  center;
}

.view-toggle-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.view-toggle-btn.active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.view-toggle-btn + .view-toggle-btn {
  border-left: 1px solid var(--color-border);
}

.media-stats-bar {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-3, 12px);
  font-size: var(--font-size-sm, .875rem);
  color: var(--color-text-secondary);
}

.media-stat-dot {
  background: var(--color-text-muted, #555);
  border-radius: 50%;
  width: 3px;
  height: 3px;
}

.media-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

.media-gallery-card {
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  overflow: hidden;
  cursor: pointer;
  border-radius: 0;
  transition: border-color .15s, transform .15s;
}

.media-gallery-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.media-gallery-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-paper-warm, #eef1f5);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items:  center;
  width: 100%;
}

.media-gallery-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.media-gallery-icon {
  display: flex;
  color: var(--color-text-secondary);
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  width: 48px;
  height: 48px;
}

.media-gallery-icon.carousel {
  color: var(--color-blue-accent);
  background: #8ed8f826;
}

.media-gallery-icon.video {
  color: var(--color-accent);
  background: #4a7fa514;
}

.media-gallery-icon.image {
  color: var(--color-ink-mid);
  background: #7a7fbd26;
}

.media-type-badge {
  position: absolute;
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600;
  font-family: var(--font-family-heading);
  border-radius: 0;
  top: 8px;
  right: 8px;
}

.media-type-badge.image {
  color: #fff;
  background: #7a7fbdd9;
}

.media-type-badge.carousel {
  color: var(--color-paper-warm, #eef1f5);
  background: #8ed8f8d9;
}

.media-type-badge.video {
  color: #fff;
  background: #4a7fa5d9;
}

.media-gallery-info {
  padding: 10px var(--space-3);
}

.media-gallery-title {
  font-size: var(--font-size-sm, .875rem);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--space-1);
  font-weight: 500;
}

.media-gallery-meta {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.media-gallery-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.media-gallery-filename {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-header {
  display: flex;
  margin-bottom: var(--space-4, 16px);
  justify-content: space-between;
  align-items:  center;
}

.calendar-header-center {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  min-width: 0;
}

.calendar-unscheduled-note {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.calendar-unscheduled-note a {
  color: var(--color-accent);
}

.calendar-header h2 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  font-family: var(--font-family-heading);
  text-transform: capitalize;
  margin: 0;
}

.calendar-nav-btn {
  padding: 6px var(--space-3);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: var(--transition-fast, .15s ease);
  background: none;
  border-radius: 0;
}

.calendar-nav-btn:hover {
  background: var(--color-bg-hover);
}

.calendar-today-btn {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--color-border);
  border: 1px solid var(--color-border);
  overflow: hidden;
  border-radius: 0;
  gap: 1px;
}

.calendar-day-header {
  padding: var(--space-2) var(--space-1);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-paper-warm, #eef1f5);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  font-family: var(--font-family-heading);
}

.calendar-day {
  background: var(--color-bg-card);
  vertical-align: top;
  overflow: hidden;
  min-width: 0;
  min-height: 100px;
  padding: 6px;
}

.calendar-day.other-month {
  background: color-mix(in srgb, var(--color-bg-card) 92%, var(--color-border));
}

.calendar-day.other-month .calendar-day-number {
  color: var(--color-text-muted);
}

.calendar-day.today {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.calendar-day-number {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.calendar-day.today .calendar-day-number {
  color: var(--color-accent);
}

.calendar-idea {
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: var(--transition-fast, .15s ease);
  border-radius: 3px;
  max-width: 100%;
  margin-bottom: 2px;
  padding: 3px 6px;
  font-size: .7rem;
  line-height: 1.3;
}

.calendar-idea:hover {
  filter: brightness(1.2);
}

.calendar-idea.idea {
  background: #4a7fa526;
}

.calendar-idea.planned {
  background: #4a7fa514;
}

.calendar-idea.drafting {
  background: #f39c1214;
}

.calendar-idea.ready {
  background: #27ae6014;
}

.calendar-idea.published {
  background: #27ae6026;
}

.calendar-idea.parked {
  background: #1a233204;
}

.calendar-status-dot {
  display: inline-block;
  border-radius: var(--radius-full);
  vertical-align: baseline;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-right: 5px;
}

.calendar-status-dot.idea {
  background: var(--color-accent);
}

.calendar-status-dot.planned {
  background: var(--color-blue-accent);
}

.calendar-status-dot.drafting {
  background: var(--color-warning);
}

.calendar-status-dot.ready {
  background: var(--color-accent-dark);
}

.calendar-status-dot.published {
  background: var(--color-success);
}

.calendar-status-dot.parked {
  background: var(--color-text-secondary);
}

.calendar-legend {
  display: flex;
  align-items:  center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  flex-wrap: wrap;
}

.calendar-legend-item {
  display: inline-flex;
  white-space: nowrap;
  align-items:  center;
}

.app-main:has(.content-list-wide) {
  max-width: none;
  padding-left: 3%;
  padding-right: 3%;
}

.content-title-cell {
  max-width: 320px;
}

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

.published-link-icon {
  display: inline-flex;
  color: var(--color-accent);
  opacity: .6;
  vertical-align: middle;
  transition: opacity var(--transition-fast);
  align-items:  center;
  margin-left: 6px;
}

.published-link-icon:hover {
  opacity: 1;
}

.open-comments-badge {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, var(--color-warning) 50%, var(--color-border-light));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg-card));
  color: color-mix(in srgb, var(--color-warning) 80%, var(--color-text-primary));
  vertical-align: middle;
  align-items:  center;
  margin-left: 6px;
  padding: 2px 7px;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
}

input[type="date"].content-date-input {
  padding: var(--space-1) 6px;
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  width: 128px;
  min-height: 30px;
  font-size: .82rem;
}

input[type="date"].content-date-input.has-value {
  color: var(--color-text-primary);
}

input[type="date"].content-date-input:hover, input[type="date"].content-date-input:focus {
  border-color: var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  outline: none;
}

.content-tags-cell {
  overflow: hidden;
  max-width: 300px;
}

.content-tags-cell .tag-chips-inline {
  overflow: hidden;
  flex-wrap: nowrap;
}

.content-empty-cell {
  padding: var(--space-5);
  text-align: center;
  color: var(--color-text-secondary);
}

.content-col-thumb {
  width: 72px;
}

.content-col-chevron {
  width: 36px;
}

.content-thumb-cell {
  padding: var(--space-1) 6px;
}

.content-row-thumb {
  background: var(--color-bg-tertiary);
  display: flex;
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  justify-content: center;
  align-items:  center;
  width: 48px;
  height: 48px;
}

.content-row-thumb img {
  object-fit: cover;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

.content-row-thumb > span {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.content-review-cell {
  text-align: center;
  font-size: .8rem;
}

.content-review-done {
  color: var(--color-success);
}

.app-main:has(.content-detail-wide) {
  max-width: none;
  padding-left: 3%;
  padding-right: 3%;
}

.content-detail-wide .page-header {
  margin-bottom: var(--space-3);
}

.content-highlights-panel {
  grid-area: highlights;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5);
  position: relative;
  border-radius: 0;
}

.highlights-delete-btn {
  position: absolute;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  opacity: .5;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  background: none;
  border: none;
  top: 10px;
  right: 10px;
}

.highlights-delete-btn:hover {
  opacity: 1;
  color: var(--color-red, #c0392b);
}

.content-highlights-panel h1 {
  margin: 0 0 var(--space-3) 0;
  font-weight: 600;
  font-family: var(--font-family-heading);
}

.highlights-meta {
  display: flex;
  gap: var(--space-4) var(--space-6);
  flex-wrap: wrap;
  align-items:  flex-start;
}

.highlights-field {
  display: flex;
  gap: var(--space-1);
  flex-direction: column;
  min-width: 110px;
}

.highlights-field label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  font-weight: 600;
  font-family: var(--font-family-heading);
}

.highlights-field select, .highlights-field input[type="date"] {
  font-size: .85rem;
}

.highlights-value {
  color: var(--color-text-primary);
  font-size: .85rem;
}

.highlights-share-btn {
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}

.content-context-nav {
  display: none;
}

.content-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 531px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "highlights sidebar" "main       sidebar";
  gap: var(--space-5, 24px);
}

.content-detail-main {
  grid-area: main;
  min-width: 0;
}

.editor-duo-card {
  padding: var(--space-4);
}

.editor-duo-titles {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  align-items:  center;
}

.editor-duo-title-left, .editor-duo-title-right {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-2);
}

.editor-duo-title-center {
  display: flex;
  align-items:  center;
}

.editor-duo-title-center button {
  white-space: nowrap;
  font-size: var(--font-size-xs);
}

.editor-duo-titles h2 {
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
  margin: 0;
}

.editor-duo-toolbars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-2);
}

.editor-duo-toolbars > .rich-text-toolbar, .editor-duo-toolbars > .editor-duo-toolbar-alt {
  margin-left: 36px;
}

.editor-duo-toolbar-alt .rich-text-toolbar {
  background: #4a7fa50f;
  border-color: #4a7fa533;
}

textarea.alt-editor, .alt-editor.guttered-textarea {
  background: #4a7fa50a;
  border-color: #4a7fa52e;
}

.editor-duo-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

.editor-duo-body textarea {
  resize: vertical;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-paper-warm, #eef1f5);
  color: var(--color-text-primary);
  border-radius: 0;
  width: 100%;
  min-height: 300px;
  font-family: inherit;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .editor-duo-titles {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .editor-duo-title-center {
    justify-content: center;
  }

  .editor-duo-toolbars, .editor-duo-body {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .editor-duo-toolbar-alt {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 2px solid var(--color-border-light);
  }
}

.persona-card-header {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
}

.persona-avatar {
  display: flex;
  font-size: var(--font-size-xs);
  color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 32px;
  height: 32px;
  font-weight: 700;
}

.persona-info {
  flex: 1;
  min-width: 0;
}

.persona-name {
  font-size: .9rem;
  font-weight: 600;
}

.persona-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bsa-active-count {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  font-size: .8rem;
}

.bsa-card-actions {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.bsa-card-inactive {
  opacity: .6;
}

.bsa-add-row {
  margin-top: var(--space-3);
}

.profile-tabs {
  display: flex;
  border-bottom: 2px solid var(--color-border-light);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
}

.profile-tabs::-webkit-scrollbar {
  display: none;
}

.profile-tab {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family-heading);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  font-size: .78rem;
  font-weight: 600;
}

.profile-tab:hover {
  color: var(--color-text-primary);
}

.profile-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.profile-tab.disabled {
  opacity: .4;
}

.card.drag-over {
  border-color: var(--color-accent);
  background: #4a7fa508;
  box-shadow: 0 0 0 2px #4a7fa526;
}

@media (max-width: 1100px) {
  .content-detail-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "highlights" "sidebar" "main";
  }
}

.app-main:has(.meeting-detail-wide) {
  max-width: none;
  padding-left: 3%;
  padding-right: 3%;
}

.meeting-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "highlights sidebar" "main       sidebar";
  gap: var(--space-5, 24px);
}

.meeting-highlights-panel {
  grid-area: highlights;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5);
  border-radius: 0;
}

.meeting-highlights-panel h1 {
  margin: 0 0 var(--space-1) 0;
  font-weight: 600;
  font-family: var(--font-family-heading);
}

.meeting-highlights-panel .source-title-subtitle {
  margin: 0 0 var(--space-3) 0;
}

.meeting-detail-topbar {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-2) var(--space-4);
  flex-wrap: wrap;
}

.meeting-detail-topbar .meeting-links-row {
  margin-top: 0;
}

.meeting-detail-titlerow {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: var(--space-2) var(--space-5);
  margin: 6px 0 var(--space-3);
  flex-wrap: wrap;
}

.meeting-detail-titlecol {
  flex: 280px;
  min-width: 0;
}

.meeting-detail-titlecol .source-title-subtitle {
  margin: var(--space-1) 0 0;
}

.meeting-detail-titlerow .share-compact {
  flex: 0 auto;
  justify-content: flex-end;
  margin: 0;
}

.meeting-highlights-meta {
  display: flex;
  gap: var(--space-4) var(--space-6);
  flex-wrap: wrap;
  align-items:  flex-start;
}

.meeting-highlights-meta .highlights-field {
  display: flex;
  gap: var(--space-1);
  flex-direction: column;
  min-width: 100px;
}

.meeting-highlights-meta .highlights-field label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  font-weight: 600;
  font-family: var(--font-family-heading);
}

.meeting-highlights-meta .highlights-value {
  color: var(--color-text-primary);
  font-size: .85rem;
}

.meeting-detail-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5, 24px);
  min-width: 0;
}

.meeting-detail-sidebar {
  grid-area: sidebar;
  display: grid;
  align-self:  start;
  gap: 10px;
  min-width: 0;
}

.meeting-detail-sidebar .card {
  margin-bottom: 0;
}

.meeting-detail-sidebar .card-header {
  padding: 10px 14px;
}

.meeting-detail-sidebar .card-header h2 {
  font-size: .85rem;
  font-family: var(--font-family-heading);
}

.meeting-detail-sidebar .card-body {
  padding: 10px 14px;
}

.meeting-detail-sidebar .detail-grid {
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: 10px 14px;
}

.meeting-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meeting-company-with-participants {
  margin-bottom: var(--space-3);
}

.meeting-company-label {
  margin-right: var(--space-2);
  font-size: var(--font-size-sm);
  opacity: .7;
}

.meeting-notes-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
}

.meeting-actions-divider {
  margin: var(--space-2) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.meeting-actions-stack .btn-secondary {
  display: flex;
  text-transform: none;
  letter-spacing: normal;
  border: 1px solid var(--color-border-light);
  color: var(--color-ink);
  padding: var(--space-2) .9rem;
  justify-content: center;
  align-items:  center;
  width: 100%;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
}

.meeting-actions-stack .btn-secondary:hover:not(:disabled) {
  border-style: solid;
  border-color: var(--color-ink);
  color: var(--color-ink);
  background: none;
}

.btn-clean-now {
  display: flex;
  margin: var(--space-1) 0;
  width: 100%;
}

.meeting-detail-sidebar .speaker-warning {
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  flex-direction: column;
  font-size: .8rem;
}

.meeting-detail-sidebar .speaker-warning .btn-secondary {
  width: 100%;
  font-size: .8rem;
}

.meeting-related-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meeting-related-item {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  cursor: pointer;
  transition: background var(--transition-fast);
  border-radius: 0;
  min-width: 0;
  font-size: .8rem;
}

.meeting-related-item:hover {
  background: #1a233204;
}

.meeting-related-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
}

.proc-row-cleanup {
  align-items:  flex-start;
}

.proc-cleanup-summary {
  display: flex;
  align-items:  flex-end;
  gap: var(--space-1);
  text-align: right;
  flex-direction: column;
  min-width: 0;
}

.proc-cleanup-detail {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs, .75rem);
  line-height: 1.4;
}

.annotations-intro {
  color: var(--color-text-secondary);
  margin: 0 0 10px;
  font-size: .78rem;
  line-height: 1.5;
}

.annotations-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.annotation-item {
  display: flex;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-light, #0500340f);
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.annotation-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.annotation-meta {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.annotation-kind {
  display: inline-flex;
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-paper-warm, #eef1f5);
  color: var(--color-text-secondary);
  white-space: nowrap;
  align-items:  center;
  font-size: .7rem;
  font-weight: 600;
}

.annotation-kind-flag, .annotation-kind-speaker-mismatch {
  color: var(--color-red);
  background: #c0392b14;
}

.annotation-kind-rejected-correction {
  color: var(--color-red);
  background: #c0392b0f;
}

.annotation-kind-redacteur-question {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.annotation-time {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #aaa);
  font-size: .72rem;
}

.annotation-body {
  color: var(--color-text-primary);
  word-break: break-word;
  font-size: .82rem;
  line-height: 1.45;
}

.annotation-evidence {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted, #999);
  word-break: break-word;
  line-height: 1.4;
}

.meeting-toast {
  padding: var(--space-2) 14px;
  color: var(--color-success);
  font-size: var(--font-size-sm);
  background: #27ae6014;
  border-radius: 0;
}

@media (max-width: 1100px) {
  .meeting-detail-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "highlights" "sidebar" "main";
  }
}

.lightbox-overlay {
  position: fixed;
  z-index: var(--z-modal);
  display: flex;
  background: #1a23324d;
  justify-content: center;
  align-items:  center;
  inset: 0;
}

.lightbox-content {
  position: relative;
  display: flex;
  align-items:  center;
  gap: var(--space-4);
  flex-direction: column;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox-close {
  position: absolute;
  color: #fff;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 28px;
  top: -40px;
  right: 0;
}

.lightbox-image {
  object-fit: contain;
  border-radius: 0;
  max-width: 90vw;
  max-height: 75vh;
}

.lightbox-actions {
  display: flex;
  gap: var(--space-3);
}

.finder-modal {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  border-radius: 0;
  flex-direction: column;
  width: 700px;
  max-width: 95vw;
  max-height: 85vh;
}

.finder-error {
  margin: 0 var(--space-4);
}

.finder-modal-description {
  padding: var(--space-3) var(--space-5) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin: 0;
}

.finder-status-cell {
  padding: var(--space-5);
  text-align: center;
  color: var(--color-text-secondary);
}

.finder-selected-count {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.finder-done-message {
  margin-bottom: var(--space-4);
  color: var(--color-success);
  font-size: var(--font-size-lg);
}

.finder-spinner {
  display: flex;
  margin-bottom: var(--space-3);
  justify-content: center;
}

.finder-modal-header {
  display: flex;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  justify-content: space-between;
  align-items:  center;
}

.finder-modal-header h2 {
  font-size: 1.1rem;
  font-family: var(--font-family-heading);
  margin: 0;
}

.finder-modal-search {
  padding: var(--space-4) var(--space-5);
  display: flex;
  border-bottom: 1px solid var(--color-border);
  align-items:  flex-end;
  gap: 10px;
}

.finder-modal-search textarea {
  resize: none;
  flex: 1;
}

.finder-modal-results {
  overflow-y: auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  flex: 1;
}

.finder-suggestion {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  cursor: pointer;
  border-radius: 0;
  transition: border-color .15s, background .15s;
}

.finder-suggestion:hover {
  background: #1a233204;
}

.finder-suggestion.selected {
  border-color: var(--color-accent);
  background: #4a7fa50d;
}

.finder-suggestion-check {
  border: 2px solid var(--color-border);
  display: flex;
  color: var(--color-accent);
  border-radius: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  font-size: 14px;
}

.finder-suggestion.selected .finder-suggestion-check {
  border-color: var(--color-accent);
  background: #4a7fa51f;
}

.finder-suggestion-content {
  flex: 1;
  min-width: 0;
}

.finder-suggestion-title {
  margin-bottom: var(--space-1);
  font-size: .95rem;
  font-weight: 600;
}

.finder-suggestion-desc {
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  font-size: .8rem;
}

.finder-suggestion-quote {
  color: var(--color-text-secondary);
  border-left: 2px solid var(--color-accent);
  margin: 6px 0;
  padding-left: 10px;
  font-size: .8rem;
  font-style: italic;
}

.finder-suggestion-source {
  color: var(--color-text-muted, #666);
  font-size: .7rem;
}

.finder-modal-actions {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items:  center;
}

.studio-tabs {
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 0;
}

.studio-tab {
  padding: 6px var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
}

.studio-tab:hover {
  color: var(--color-text-primary);
}

.studio-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.image-studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.image-studio-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-paper-warm, #eef1f5);
  border-radius: 0;
}

.image-studio-item img {
  aspect-ratio: 1;
  object-fit: cover;
  cursor: pointer;
  width: 100%;
}

.image-studio-actions {
  display: flex;
  gap: var(--space-1);
  background: var(--color-paper-warm, #eef1f5);
  border-top: 1px solid var(--color-border);
  padding: 6px;
}

.image-studio-actions button {
  padding: var(--space-1) 6px;
  flex: 1;
  font-size: .7rem;
}

.image-studio-prompt {
  padding: var(--space-1) 6px;
  color: var(--color-text-muted, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .65rem;
  font-style: italic;
}

.chat-panel-close {
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0 var(--space-1);
  background: none;
  border: none;
  font-size: 18px;
}

.variation-card {
  border: 1px solid var(--color-border);
  overflow: hidden;
  border-radius: 0;
}

.variation-card:nth-child(odd) {
  background: var(--color-bg-card);
}

.variation-card:nth-child(2n) {
  background: var(--color-paper-warm, #eef1f5);
}

.variation-gen-details {
  border-top: 1px solid var(--color-border-light);
}

.variation-gen-summary {
  display: flex;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: background var(--transition-fast);
  justify-content: space-between;
  align-items:  center;
}

.variation-gen-summary::-webkit-details-marker {
  display: none;
}

.variation-gen-summary:hover {
  background: #1a233204;
}

.variation-gen-body {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

.variation-gen-body > textarea {
  resize: vertical;
  width: 100%;
  font-size: .85rem;
}

.variation-gen-row {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.variation-gen-select {
  flex: 120px;
  min-width: 0;
  font-size: .8rem;
}

.variation-gen-btn {
  white-space: nowrap;
  flex: none;
}

.cid-profile-picker {
  position: relative;
  flex: none;
}

.cid-profile-picker-trigger {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-ink-mid);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  border-radius: 11px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
}

.cid-profile-picker-trigger:hover {
  border-color: var(--color-ink);
}

.cid-profile-picker-count {
  border-radius: var(--radius-full);
  background: var(--color-accent-light);
  color: var(--color-accent);
  padding: 1px 7px;
  font-size: .72rem;
  font-weight: 800;
}

.cid-profile-picker-chevron {
  color: var(--color-ink-mid);
  font-size: .7rem;
  line-height: 1;
}

.cid-profile-picker-panel {
  position: absolute;
  z-index: 30;
  overflow-y: auto;
  display: flex;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-lg);
  border-radius: 10px;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  max-height: 280px;
  padding: 6px;
  top: calc(100% + 6px);
  right: 0;
}

.cid-profile-picker-row {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: .82rem;
}

.cid-profile-picker-row:hover {
  background: var(--color-bg-hover);
}

.cid-profile-picker-row input {
  cursor: pointer;
}

.variation-card-header {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper-warm, #eef1f5);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.variation-hook-badge {
  font-size: var(--font-size-xs);
  color: var(--color-ink-mid);
  font-weight: 600;
  font-family: var(--font-family-heading);
  background: #4a7fa51f;
  border-radius: 0;
  padding: 2px 10px;
}

.variation-cards-grid {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  scrollbar-gutter: stable;
  flex-direction: row;
}

.variation-cards-grid::-webkit-scrollbar {
  height: 6px;
}

.variation-cards-grid::-webkit-scrollbar-track {
  background: none;
}

.variation-cards-grid::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.variation-cards-grid > .variation-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 100%;
  min-width: 0;
}

.variation-carousel-nav {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.variation-nav-btn {
  display: inline-flex;
  background: var(--color-bg-card, #fff);
  color: var(--color-ink, #1a2332);
  border: 1px solid var(--color-border, #d8dde6);
  cursor: pointer;
  border-radius: 8px;
  justify-content: center;
  align-items:  center;
  width: 36px;
  height: 36px;
  padding: 0;
  transition: background .12s, border-color .12s, transform 80ms;
}

.variation-nav-btn:hover:not(:disabled) {
  background: var(--color-ink, #1a2332);
  color: var(--color-text-inverse, #fff);
  border-color: var(--color-ink, #1a2332);
}

.variation-nav-btn:active:not(:disabled) {
  transform: scale(.95);
}

.variation-nav-btn:focus-visible {
  outline: 2px solid var(--color-accent, #5564eb);
  outline-offset: 2px;
}

.variation-nav-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.variation-nav-btn svg {
  display: block;
}

@media (max-width: 768px) {
  .variation-nav-btn {
    border-width: 2px;
    width: 44px;
    height: 44px;
  }

  .variation-nav-btn svg {
    width: 22px;
    height: 22px;
  }
}

.variation-gen-toggle {
  appearance: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  background: none;
  border: 0;
  width: 100%;
}

.variation-gen-toggle:hover {
  background: #4a7fa50a;
}

.variation-gen-toggle:focus-visible {
  outline: 2px solid var(--color-accent, #5564eb);
  outline-offset: -2px;
}

.variation-gen-chevron {
  color: var(--color-text-muted, #666);
  font-size: .9rem;
  line-height: 1;
}

.variation-card-layout {
  display: block;
}

.variation-card-body {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm, .875rem);
  color: var(--color-text-primary);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  line-height: 1.6;
}

.variation-card-actions {
  display: flex;
  border-top: 1px solid var(--color-border);
  background: #4a7fa50a;
  flex-flow: wrap;
  gap: 6px;
  padding: 10px;
}

.variation-card-actions .btn-secondary, .variation-card-actions .btn-ghost {
  font-size: var(--font-size-xs);
  text-align: center;
  width: auto;
  padding: 5px 10px;
}

.variation-card-prompt {
  color: var(--color-text-muted, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
  font-size: .7rem;
  font-style: italic;
}

.variation-refine {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-paper-warm, #eef1f5);
}

.variation-system-prompt {
  padding: var(--space-3) var(--space-4);
  background: var(--color-paper-warm, #eef1f5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  max-height: 300px;
  margin: 0;
  font-size: .7rem;
}

.variation-generating {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-secondary);
}

.variation-generating .loading-spinner {
  margin: 0 auto var(--space-3);
}

.variation-refined-label {
  color: var(--color-text-muted);
  font-size: .7rem;
}

.variation-generation-error-body {
  display: flex;
  align-items:  center;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
}

.variation-generation-error-body > span {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.variation-generation-error-detail {
  color: var(--color-text-secondary);
}

.variation-original-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  font-style: italic;
}

.variation-history-footer {
  border-top: 1px solid var(--color-border);
  padding: 6px var(--space-3);
}

.variation-history-item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  opacity: .6;
}

.variation-history-item:last-child {
  border-bottom: none;
}

.variation-history-item .variation-hook-badge {
  margin-right: 6px;
}

.variation-history-prompt {
  color: var(--color-text-muted);
  font-size: .7rem;
  font-style: italic;
}

.variation-history-text {
  margin-top: var(--space-1);
  white-space: pre-wrap;
  overflow: auto;
  max-height: 100px;
  font-size: .8rem;
}

.variation-provenance {
  display: flex;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-paper-warm, #eef1f5);
  color: var(--color-text-secondary);
  flex-direction: column;
  gap: 10px;
  font-size: .78rem;
}

.variation-provenance-reasoning {
  margin: 0;
  font-style: italic;
}

.variation-provenance-block {
  border-left: 3px solid var(--color-border);
  padding-left: 10px;
}

.variation-provenance-label {
  display: block;
  margin-bottom: var(--space-1);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-size: .68rem;
  font-weight: 700;
}

.variation-provenance-block ul {
  margin: 0;
  padding-left: 18px;
}

.variation-provenance-block li {
  overflow-wrap: anywhere;
  margin: 2px 0;
}

.variation-provenance-block.is-grounded {
  border-left-color: var(--color-success);
}

.variation-provenance-block.is-grounded .variation-provenance-label {
  color: var(--color-success);
}

.variation-provenance-block.is-inferred {
  border-left-color: var(--color-warning);
}

.variation-provenance-block.is-inferred .variation-provenance-label {
  color: var(--color-warning);
}

@media (max-width: 768px) {
  .variation-card-prompt {
    max-width: 100%;
  }
}

.cid-critic-panel {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-card);
  flex-direction: column;
  min-width: 0;
}

.cid-critic-header {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cid-critic-header-text {
  min-width: 0;
}

.cid-critic-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: 2px 0 0;
}

.cid-critic-meta {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.cid-critic-stale-body {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.critic-status {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-border);
  background: var(--color-paper-warm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  min-width: 0;
}

.critic-status.is-inProgress {
  border-left-color: var(--color-info);
}

.critic-status.is-done {
  border-left-color: var(--color-success);
}

.critic-status.is-partial, .critic-status.is-emptyConfiguration {
  border-left-color: var(--color-warning);
}

.critic-status.is-failed {
  border-left-color: var(--color-error);
}

.critic-status.is-superseded {
  border-left-color: var(--color-text-muted);
  font-style: italic;
}

.critic-status-detail {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.critic-layers-heading {
  font-size: var(--font-size-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}

.critic-layers {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.critic-layer-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  flex-wrap: wrap;
  min-width: 0;
}

.critic-layer-name {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.critic-layer-outcome {
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: .04em;
  font-weight: 700;
}

.critic-layer-row.is-ran .critic-layer-outcome {
  color: var(--color-success);
}

.critic-layer-row.is-skipped .critic-layer-outcome {
  color: var(--color-text-muted);
}

.critic-layer-row.is-failed .critic-layer-outcome {
  color: var(--color-error);
}

.critic-layer-reason {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.critic-groups {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
  min-width: 0;
}

.critic-group-header {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.critic-group-label {
  font-size: var(--font-size-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}

.critic-group-label.is-must {
  color: var(--color-error);
}

.critic-group-label.is-should {
  color: var(--color-warning);
}

.critic-group-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.critic-findings {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.critic-finding {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-2) var(--space-3);
  display: flex;
  gap: var(--space-1);
  flex-direction: column;
  min-width: 0;
}

.critic-finding.is-resolved {
  opacity: .72;
}

.critic-finding-quote {
  border-left: 3px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding-left: 10px;
  font-style: italic;
}

.critic-finding-quote-missing {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.critic-finding-reason {
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
  margin: 0;
}

.critic-finding-citation {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  min-width: 0;
}

.critic-citation-label {
  display: block;
  font-size: var(--font-size-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}

.critic-citation-body {
  overflow-wrap: anywhere;
}

.critic-finding-footer {
  display: flex;
  justify-content: flex-end;
  align-items:  center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.critic-finding-resolved {
  font-size: var(--font-size-xs);
  color: var(--color-success);
}

.critic-finding-resolved-detail {
  color: var(--color-text-muted);
}

.cid-critic-opener-bubble {
  min-width: 0;
  max-width: 100%;
}

.cid-critic-opener {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  min-width: 0;
}

.cid-critic-opener p {
  margin: 0;
}

.cid-critic-opener-subhead {
  font-weight: 700;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cid-critic-opener-layers, .cid-critic-opener-findings {
  padding-left: var(--space-4);
  display: flex;
  gap: var(--space-1);
  flex-direction: column;
  margin: 0;
}

.cid-critic-opener-findings {
  list-style: none;
  padding-left: 0;
}

.cid-critic-opener-finding {
  border-left: 2px solid var(--color-border-light);
  padding-left: var(--space-2);
  display: flex;
  gap: var(--space-1);
  flex-direction: column;
  min-width: 0;
}

.cid-critic-opener-finding.is-resolved {
  opacity: .65;
}

.cid-critic-opener-finding blockquote {
  overflow-wrap: anywhere;
  margin: 0;
  font-style: italic;
}

.cid-critic-opener-citation, .cid-critic-opener-weigh {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.cid-critic-opener-resolved {
  font-size: var(--font-size-xs);
  color: var(--color-success);
}

.cid-critic-opener-error {
  color: var(--color-error);
  font-size: var(--font-size-xs);
}

.cid-critic-opener-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.cid-persona-system-tag, .bsa-system-tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-muted);
  background: var(--color-bg-hover);
  padding: 1px 6px;
  font-weight: 700;
}

.bsa-system-tag {
  margin-left: var(--space-2);
  vertical-align: middle;
}

.media-item {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.media-item:last-child {
  border-bottom: none;
}

.media-item-link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: var(--font-size-sm, .875rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.media-item-link:hover {
  text-decoration: underline;
}

.related-list-table {
  border-collapse: collapse;
  font-size: var(--font-size-sm, .875rem);
  width: 100%;
}

.related-list-table thead th:first-child, .related-list-table tbody td:first-child, .related-list-table thead th:last-child, .related-list-table tbody td:last-child {
  white-space: nowrap;
  width: 1%;
}

.related-list-table thead th {
  padding: var(--space-2) var(--space-3);
}

.related-list-table tbody tr {
  transition: background .15s;
}

.related-list-table tbody tr:hover {
  background: #1a233204;
}

.related-list-table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.related-list-table tbody tr:last-child td {
  border-bottom: none;
}

.related-list-title {
  color: var(--color-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-list-table tbody tr:hover .related-list-title {
  text-decoration: underline;
}

.related-list-date {
  color: var(--color-text-muted, #999);
  white-space: nowrap;
  font-size: .8rem;
}

.media-add-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.media-hint {
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  font-size: .8rem;
  font-style: italic;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.media-thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-paper-warm, #eef1f5);
  border-radius: 0;
}

.media-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.media-thumb-placeholder {
  display: flex;
  color: var(--color-text-secondary);
  padding: var(--space-2);
  text-align: center;
  word-break: break-all;
  justify-content: center;
  align-items:  center;
  height: 100%;
  font-size: .7rem;
}

.media-thumb-delete {
  position: absolute;
  color: #fff;
  cursor: pointer;
  display: flex;
  opacity: .85;
  background: #c0392be6;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  width: 32px;
  height: 32px;
  transition: opacity .15s, transform .15s;
  font-size: 14px;
  line-height: 1;
  top: 6px;
  right: 6px;
  box-shadow: 0 1px 4px #0000004d;
}

.media-thumb-delete:hover {
  opacity: 1;
  transform: scale(1.1);
}

.inspiration-card {
  display: flex;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
  background: var(--color-paper-warm, #eef1f5);
  border-radius: 0;
  padding: 10px;
}

.inspiration-card-image {
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  width: 80px;
  height: 60px;
}

.inspiration-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.inspiration-card-title {
  font-weight: 600;
  font-size: var(--font-size-sm, .875rem);
  color: var(--color-accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspiration-card-title:hover {
  text-decoration: underline;
}

.inspiration-card-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  margin: 0;
}

.inspiration-card-url {
  color: var(--color-text-muted, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .7rem;
}

.insp-form-card, .insp-filters {
  margin-bottom: var(--space-4);
}

.insp-tag-filter {
  max-width: 180px;
}

.insp-saving {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.insp-enriching {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.insp-textarea {
  width: 100%;
}

.insp-linked-row {
  margin-bottom: var(--space-2);
}

.insp-enrich-failed-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.insp-enrich-failed-body {
  margin: var(--space-1) 0 0;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

.insp-enrich-tech {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
}

.insp-enrich-tech summary {
  cursor: pointer;
  color: var(--color-text-muted);
}

.insp-enrich-tech code {
  display: block;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

.source-search-item:hover {
  background: var(--color-paper-warm, #eef1f5) !important;
}

.source-item {
  padding: 6px 0;
}

.star-rating {
  display: inline-flex;
  gap: 1px;
}

.star-rating .star {
  cursor: pointer;
  color: #555;
  user-select: none;
  transition: color .1s;
  font-size: 16px;
  line-height: 1;
}

.star-rating .star:hover, .star-rating .star.filled, .star-rating .star:hover, .star-rating .star.filled {
  color: #f5c518;
}

.linkedin-preview {
  padding: var(--space-4);
  color: #e0e0e0;
  overflow-wrap: break-word;
  word-break: break-word;
  background: #1b1f23;
  border: 1px solid #333;
  border-radius: 8px;
  width: 100%;
  max-width: 560px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.linkedin-preview-header {
  display: flex;
  margin-bottom: var(--space-3);
  align-items:  center;
  gap: 10px;
}

.linkedin-preview-avatar {
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.linkedin-preview-avatar-initials {
  display: flex;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: 700;
  font-size: var(--font-size-base);
  justify-content: center;
  align-items:  center;
}

.linkedin-preview-name {
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 600;
}

.linkedin-preview-meta {
  color: #999;
  font-size: 12px;
}

.linkedin-preview-body {
  margin-bottom: var(--space-3);
  word-wrap: break-word;
  position: relative;
}

.linkedin-see-more {
  position: absolute;
  color: #999;
  cursor: pointer;
  background: #1b1f23;
  border: none;
  padding-left: 6px;
  font-family: inherit;
  font-size: 14px;
  bottom: 0;
  right: 0;
}

.linkedin-see-more:hover {
  color: #ccc;
  text-decoration: underline;
}

.linkedin-see-less {
  color: #999;
  cursor: pointer;
  margin-top: var(--space-1);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
}

.linkedin-see-less:hover {
  color: #ccc;
  text-decoration: underline;
}

.linkedin-preview-duo {
  display: flex;
  gap: var(--space-6);
  flex-direction: column;
  align-items:  center;
  min-width: 0;
}

.device-frame-mobile {
  box-sizing: border-box;
  background: var(--color-ink);
  overflow: hidden;
  border: 1px solid #ffffff2e;
  border-radius: 30px;
  width: 320px;
  max-width: 100%;
  padding: 7px;
  box-shadow: 0 18px 50px #05003452;
}

.device-frame-mobile-notch {
  background: var(--color-ink);
  display: flex;
  justify-content: center;
  align-items:  center;
  height: 22px;
}

.device-frame-mobile-notch:after {
  content: "";
  background: #fff3;
  border-radius: 3px;
  width: 58px;
  height: 5px;
}

.device-frame-mobile-screen {
  overflow-y: auto;
  scrollbar-width: thin;
  background: #1b1f23;
  border-radius: 18px;
  height: 369px;
}

.device-frame-mobile-screen .linkedin-preview {
  border: none;
  border-radius: 0;
  font-size: 13px;
}

.device-frame-mobile-bar {
  background: var(--color-ink);
  display: flex;
  justify-content: center;
  align-items:  center;
  height: 18px;
}

.device-frame-mobile-bar:after {
  content: "";
  background: #ffffff47;
  border-radius: 2px;
  width: 78px;
  height: 4px;
}

.device-frame-desktop {
  width: 100%;
  min-width: 0;
  max-width: 560px;
}

.device-frame-desktop-screen {
  overflow: hidden;
  background: #1b1f23;
  border: 1px solid #ffffff2e;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 20px 56px #05003457;
}

.device-frame-desktop-screen .linkedin-preview {
  border: none;
  border-radius: 0;
}

.device-frame-desktop-stand {
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  background: linear-gradient(#ffffff38, #ffffff14);
  width: 120px;
  height: 22px;
  margin: 0 auto;
}

.linkedin-preview-label {
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
  font-size: .7rem;
  font-weight: 600;
}

.linkedin-preview-stats {
  color: #666;
  margin-bottom: 10px;
  font-size: 11px;
}

.linkedin-preview-line-info {
  color: #555;
  padding: var(--space-1) var(--space-4) 0;
  font-size: 10px;
}

.rich-text-toolbar {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-1);
  background: none;
  border: 0;
  flex-wrap: wrap;
  padding: 0;
}

.rich-text-btn {
  display: inline-flex;
  padding: 0 var(--space-2);
  color: var(--color-text-secondary, #51607a);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 8px;
  justify-content: center;
  align-items:  center;
  min-width: 34px;
  height: 34px;
  transition: background .12s, color .12s, border-color .12s;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
}

.rich-text-btn.rt-bold {
  font-weight: 800;
}

.rich-text-btn.rt-italic {
  font-family: Georgia, Times New Roman, serif;
  font-style: italic;
}

.rich-text-btn:hover:not(:disabled) {
  background: var(--color-bg-secondary, #eef1f5);
  color: var(--color-ink, #1a2332);
}

.rich-text-btn.active, .rich-text-btn[aria-pressed="true"] {
  background: var(--color-accent, #4a7fa5);
  border-color: var(--color-accent, #4a7fa5);
  color: #fff;
}

.rich-text-btn:focus-visible {
  outline: 2px solid var(--color-accent, #4a7fa5);
  outline-offset: 2px;
}

.rich-text-btn.disabled, .rich-text-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.rich-text-sep {
  background: var(--color-border-light, #e2e6ee);
  margin: 0 var(--space-1);
  align-self:  center;
  width: 1px;
  height: 22px;
}

.rich-text-symbols {
  position: relative;
  display: flex;
  align-items:  center;
  gap: var(--space-1);
  flex-wrap: nowrap;
  flex: auto;
  min-width: 0;
}

.rich-text-measure {
  position: absolute;
  display: flex;
  gap: var(--space-1);
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  top: 0;
  left: 0;
}

.rich-text-pop-wrap {
  position: relative;
  display: inline-flex;
}

.rich-text-popover {
  position: absolute;
  z-index: 40;
  padding: var(--space-2);
  border: 1px solid var(--color-border-light, #e2e6ee);
  background: var(--color-bg-card, #fff);
  box-shadow: var(--shadow-md, 0 8px 24px #141c2e29);
  border-radius: 10px;
  top: calc(100% + 6px);
  left: 0;
}

.rich-text-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  width: max-content;
}

.rich-text-symbols-row {
  display: flex;
  gap: 2px;
}

.rich-text-emoji, .rich-text-symbol {
  display: inline-flex;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  justify-content: center;
  align-items:  center;
  width: 34px;
  height: 34px;
  transition: background .12s;
  font-size: 1.1rem;
  line-height: 1;
}

.rich-text-emoji:hover, .rich-text-symbol:hover {
  background: var(--color-bg-secondary, #eef1f5);
}

.rich-text-symbol {
  color: var(--color-ink, #1a2332);
  font-size: var(--font-size-base);
}

.cid-char-count.over {
  color: var(--color-red, #d6453d);
}

.linkedin-preview-mode-toggle {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}

.linkedin-preview-mode-toggle button {
  color: #999;
  cursor: pointer;
  background: none;
  border: 1px solid #444;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11px;
}

.linkedin-preview-mode-toggle button.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: #4a7fa533;
}

._unused-stats {
  padding-bottom: var(--space-2);
}

.li-reactions {
  display: flex;
  padding: var(--space-2) 0 var(--space-1);
  color: #999;
  justify-content: space-between;
  align-items:  center;
  font-size: 12px;
}

.li-reactions-left {
  display: flex;
  align-items:  center;
  gap: 6px;
}

.li-emoji-cluster {
  display: flex;
}

.li-emoji {
  position: relative;
  display: flex;
  border: 1.5px solid #1b1f23;
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  width: 18px;
  height: 18px;
  margin-left: -4px;
}

.li-emoji:first-child {
  margin-left: 0;
}

.li-emoji:first-child {
  z-index: 3;
}

.li-emoji:nth-child(2) {
  z-index: 2;
}

.li-emoji:nth-child(3) {
  z-index: 1;
}

.li-reactions-names {
  color: #999;
}

.li-reactions-right {
  display: flex;
  gap: var(--space-1);
  color: #999;
}

.li-action-bar {
  display: flex;
  padding: var(--space-1) 0;
  margin-top: var(--space-1);
  border-top: 1px solid #333;
  justify-content: space-around;
}

.li-action-btn {
  display: flex;
  padding: var(--space-2) var(--space-3);
  color: #999;
  cursor: default;
  border-radius: 6px;
  align-items:  center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.li-action-btn svg {
  flex-shrink: 0;
}

.device-frame-mobile .li-action-btn {
  padding: 6px var(--space-1);
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
}

.device-frame-mobile .li-reactions-names {
  display: none;
}

.device-frame-mobile .li-reactions-right {
  font-size: 10px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.summary-card {
  background: var(--color-bg-card);
  padding: var(--space-5) var(--space-5) var(--space-4);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  border-radius: 0;
}

.summary-card:before {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  opacity: .7;
  height: 3px;
  top: 0;
  left: 0;
  right: 0;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px #1a233212;
}

.summary-card h3 {
  margin: 0 0 var(--space-2) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

.summary-card p {
  letter-spacing: -.03em;
  color: var(--color-text-primary);
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.modal-backdrop {
  position: fixed;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  z-index: var(--z-modal);
  padding: var(--space-6);
  animation: backdropFadeIn .2s ease-out;
  background: #0009;
  justify-content: center;
  align-items:  center;
  inset: 0;
}

.modal {
  background: var(--color-bg-card);
  padding: var(--space-6) var(--space-6) var(--space-5);
  border: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-4);
  animation: modalSlideIn .25s cubic-bezier(.16, 1, .3, 1);
  border-radius: 0;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 24px 48px #1a233226, 0 0 0 1px #4a7fa51a;
}

.modal h2 {
  font-size: var(--font-size-xl);
  letter-spacing: -.01em;
  margin: 0;
}

.modal .field {
  margin-bottom: var(--space-3);
}

.modal .field span {
  font-size: var(--font-size-sm);
}

.modal select {
  width: 100%;
  padding: .65rem .85rem;
  font-size: .95rem;
}

.modal select:focus, .modal input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.modal-description {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.publish-advisory-modal {
  overflow-y: auto;
  min-width: 0;
  max-width: 560px;
  max-height: min(85vh, 85dvh);
}

.publish-advisory-not-checked {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
  margin: 0;
}

.publish-advisory-intro {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.publish-advisory-section {
  min-width: 0;
}

.publish-advisory-section h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  letter-spacing: .01em;
}

.publish-advisory-section ul {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  overflow-y: auto;
  min-width: 0;
  max-height: 40vh;
  margin: 0;
  padding: 0;
}

.publish-advisory-section li {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.publish-advisory-section blockquote {
  border-left: 3px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding-left: 10px;
  font-style: italic;
}

.publish-advisory-section li > span {
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.modal-actions {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.text-form {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.text-form textarea {
  border: 1px solid var(--color-border);
  padding: var(--space-3) .9rem;
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  resize: vertical;
  line-height: var(--line-height-relaxed);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  border-radius: 0;
  width: 100%;
}

.text-form textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.upload-btn {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.upload-btn:hover {
  transform: translateY(-1px);
}

.knowledge-nav-link {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-1);
}

.knowledge-nav-link svg {
  flex: none;
}

.knowledge-nav-sep {
  background: var(--color-border);
  align-self:  center;
  width: 1px;
  height: 22px;
}

.library-empty-inline {
  padding: var(--space-8) var(--space-4);
  background: none;
  border: none;
}

.knowledge-content {
  position: relative;
}

.knowledge-content.drop-active > :not(.drop-overlay) {
  opacity: .4;
  transition: opacity .15s;
}

.drop-overlay {
  position: absolute;
  z-index: 50;
  display: flex;
  pointer-events: none;
  justify-content: center;
  align-items:  center;
  inset: 0;
}

.drop-overlay-content {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-8);
  background: var(--color-bg-primary);
  border: 2px dashed var(--color-accent);
  color: var(--color-accent);
  border-radius: 0;
  flex-direction: column;
}

.drop-overlay-content svg {
  opacity: .8;
}

.drop-overlay-content p {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.search-test {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.search-row {
  display: flex;
  gap: var(--space-3);
}

.search-row .form-input {
  border-radius: 0;
  flex: 1;
}

.search-results {
  display: grid;
  gap: var(--space-3);
}

.search-result-item {
  padding: var(--space-4);
  border: 1px solid var(--color-border-light);
  display: grid;
  gap: var(--space-2);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  border-radius: 0;
}

.search-result-item:hover {
  border-color: var(--color-border);
  box-shadow: 0 4px 12px #1a23320a;
}

.search-result-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
}

.search-score {
  font-size: var(--font-size-xs);
  color: #fff;
  background: var(--color-accent);
  padding: .15rem var(--space-2);
  border-radius: var(--radius-full);
  font-weight: 700;
  line-height: 1.4;
}

.search-context {
  font-size: var(--font-size-sm);
  color: var(--color-accent-dark);
  margin: 0;
  font-style: italic;
}

.search-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.prompt-tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--color-paper-warm, #eef1f5);
  border-radius: var(--radius-full);
  width: -moz-fit-content;
  width: fit-content;
}

.prompt-tabs .tab-button {
  padding: .45rem var(--space-4);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-normal);
  background: none;
  border: none;
}

.prompt-tabs .tab-button:hover {
  color: var(--color-text-primary);
}

.prompt-tabs .tab-button.active {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
}

.prompt-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.prompt-header {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: var(--space-4);
}

.prompt-header h2 {
  font-size: var(--font-size-lg);
  margin: 0 0 .2rem;
}

.prompt-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.template-vars {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 0;
  flex-wrap: wrap;
}

.vars-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

.var-badge {
  padding: .2rem var(--space-2);
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  border-radius: 0;
  font-family: monospace;
  font-size: .7rem;
  font-weight: 500;
}

.prompt-textarea {
  border: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-sm);
  resize: vertical;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  border-radius: 0;
  width: 100%;
  min-height: 400px;
  font-family: SF Mono, Fira Code, Cascadia Code, Menlo, Consolas, monospace;
  line-height: 1.7;
}

.prompt-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.prompt-history {
  display: grid;
  gap: var(--space-3);
}

.history-item {
  border: 1px solid var(--color-border-light);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
  transition: border-color var(--transition-fast);
  border-radius: 0;
}

.history-item:hover {
  border-color: var(--color-border);
}

.history-header {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
}

.history-header strong {
  font-size: var(--font-size-sm);
}

.history-header span {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.history-preview {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  padding: var(--space-3);
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: var(--line-height-relaxed);
  border-radius: 0;
  max-height: 80px;
  margin: 0;
  font-family: SF Mono, Fira Code, Cascadia Code, Menlo, Consolas, monospace;
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px)scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

@keyframes adminSlideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes statusPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .7;
  }
}

@media (max-width: 768px) {
  .app-main:has(.content-detail-wide) {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }

  .app-main:has(.meeting-detail-wide) {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }

  .app-main:has(.content-list-wide) {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }

  .page-header .btn-secondary {
    letter-spacing: 0;
    min-height: 36px;
    padding: .35rem .6rem;
    font-size: .7rem;
  }

  .page-header .btn-ghost {
    min-height: 36px;
    padding: .35rem .6rem;
    font-size: .7rem;
  }

  .page-header-nav {
    flex-wrap: wrap;
    width: 100%;
    gap: 6px !important;
  }

  .page-header-divider {
    display: none;
  }

  .meeting-highlights-meta .highlights-field {
    min-width: 0;
  }

  .content-highlights-panel {
    padding: var(--space-3) 14px;
  }

  .content-highlights-panel h1 {
    font-size: var(--font-size-base);
    margin: 0 0 10px;
    padding-right: 28px;
  }

  .highlights-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px var(--space-3);
  }

  .highlights-field {
    overflow: hidden;
    min-width: 0;
  }

  .highlights-field-wide {
    grid-column: 1 / -1;
  }

  .highlights-field .highlights-value {
    white-space: normal;
    word-break: break-word;
  }

  .highlights-field label {
    font-size: var(--font-size-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .highlights-field select, .highlights-field input[type="date"], .highlights-field input[type="url"] {
    padding: 6px var(--space-2);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    font-size: .85rem;
  }

  .highlights-value {
    white-space: normal;
    word-break: break-word;
    font-size: .85rem;
  }

  .page-header {
    margin-bottom: var(--space-1);
  }

  .content-detail-wide {
    padding-bottom: calc(88px + var(--safe-area-bottom));
  }

  .content-detail-wide > .page-header {
    display: none;
  }

  .content-context-nav {
    position: fixed;
    left: max(var(--space-2), var(--safe-area-left));
    right: max(var(--space-2), var(--safe-area-right));
    bottom: max(var(--space-2), var(--safe-area-bottom));
    z-index: var(--z-panel);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  html.nav-vine .content-detail-wide {
    padding-bottom: calc(162px + var(--safe-area-bottom));
  }

  html.nav-vine .content-context-nav {
    bottom: calc(76px + var(--safe-area-bottom));
  }

  .content-context-nav-action {
    display: flex;
    padding: 6px var(--space-1);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-family: var(--font-family);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    background: none;
    border: 1px solid #0000;
    flex-direction: column;
    justify-content: center;
    align-items:  center;
    gap: 3px;
    min-width: 0;
    min-height: 54px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .content-context-nav-action:hover:not(:disabled) {
    background: var(--color-accent-light);
    border-color: var(--color-border-light);
    color: var(--color-ink);
    outline: none;
  }

  .content-context-nav-action:focus-visible {
    background: var(--color-accent-light);
    border-color: var(--color-border-light);
    color: var(--color-ink);
    outline: none;
  }

  .content-context-nav-action:disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: .42;
  }

  .content-context-nav-action.is-done {
    color: var(--color-accent);
    background: var(--color-accent-light);
  }

  .content-context-nav-icon {
    display: inline-flex;
    justify-content: center;
    align-items:  center;
    width: 22px;
    height: 22px;
  }

  .content-context-nav-icon svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }

  .profile-content {
    min-width: 0;
  }

  .profile-tabs {
    overflow-x: hidden;
    flex-wrap: wrap;
  }

  .profile-tab {
    white-space: normal;
    font-size: var(--font-size-xs);
    text-align: center;
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
  }

  .config-block pre {
    overflow-x: auto;
    max-width: 100%;
    font-size: .7rem;
  }

  .key-display code, .key-masked code {
    word-break: break-all;
    font-size: .7rem;
  }

  .key-existing {
    gap: var(--space-2);
    flex-direction: column;
  }

  .profile-content .card-header {
    flex-wrap: wrap;
  }

  .profile-content .card-body, .profile-content .card-inner {
    padding: var(--space-3);
  }

  .profile-content .card-inner h2 {
    font-size: var(--font-size-base);
  }

  .profile-content .field-row {
    gap: var(--space-2);
  }

  .profile-content .field-row .btn-secondary, .profile-content .field-row .btn-primary {
    flex: 1;
    padding: .4rem .6rem;
    font-size: .7rem;
  }

  .rich-text-toolbar {
    padding: var(--space-1) 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: 2px;
  }

  .rich-text-toolbar::-webkit-scrollbar {
    display: none;
  }

  .rich-text-btn {
    padding: 6px var(--space-2);
    font-size: var(--font-size-xs);
    background: #1a23320a;
    border: none;
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
  }

  .editor-duo-card {
    padding: var(--space-2);
  }

  .editor-duo-titles {
    gap: var(--space-2);
  }

  .editor-duo-titles h2 {
    font-size: var(--font-size-base);
  }

  .editor-duo-title-center {
    order: -1;
  }

  .editor-duo-title-right {
    display: none;
  }

  .rich-text-sep {
    flex-shrink: 0;
    height: 20px;
    margin: 0 2px;
  }

  .editor-duo-body textarea {
    min-height: 180px;
  }

  .editor-duo-toolbars > .rich-text-toolbar, .editor-duo-toolbars > .editor-duo-toolbar-alt {
    margin-left: 0;
  }

  .editor-duo-toolbar-alt {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 2px solid var(--color-border-light);
  }

  .editor-duo-toolbar-alt:before {
    content: "Alternatief";
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: var(--font-family-heading);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
  }

  .dashboard-filter-row {
    padding: 0 var(--space-2) 6px;
  }

  .dashboard-filter-row .content-filter-tab {
    padding: 3px var(--space-2);
    font-size: .7rem;
  }

  .related-list-table thead th, .related-list-table tbody td {
    padding: 5px 6px;
    font-size: .72rem;
  }

  .related-list-date {
    font-size: var(--font-size-xs);
  }

  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .prompt-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .prompt-tabs .tab-button {
    white-space: nowrap;
  }

  .search-row {
    flex-direction: column;
  }

  .prompt-header {
    gap: var(--space-3);
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .summary-grid {
    grid-template-columns: 1fr;
  }
}

.author-badge {
  display: inline-block;
  color: var(--color-text-secondary);
  background: none;
  padding: 0;
  font-size: .8rem;
}

.author-badge.own {
  color: var(--color-accent);
  font-weight: 600;
}

.visibility-badge {
  vertical-align: middle;
  margin-left: 6px;
}

.row-inactive td {
  opacity: .5;
}

.calendar-idea.other-user {
  opacity: .7;
  border-left: 2px solid var(--color-accent);
}

.comments-quiet-cell {
  padding: var(--space-3) 0;
  color: var(--color-text-secondary);
}

.comment-error {
  margin-bottom: var(--space-3);
}

.comment-error-dismiss {
  margin-left: var(--space-2);
  color: inherit;
  font-size: var(--font-size-base);
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
}

.comment-form-actions {
  display: flex;
  margin-top: var(--space-2);
  justify-content: flex-start;
}

.comments-list {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-direction: column;
}

.comment-group {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
}

.comment-group-title {
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 800;
}

.comment-item {
  display: flex;
  border-bottom: 1px solid var(--color-border-light);
  gap: 10px;
  padding: 10px 0;
}

.comment-item.is-open {
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-warning) 38%, var(--color-border-light));
  background: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg-card));
  border-radius: 8px;
}

.comment-item.is-resolved {
  opacity: .72;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-avatar {
  background: var(--color-accent-light);
  color: var(--color-accent);
  display: flex;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 32px;
  height: 32px;
  font-size: .7rem;
  font-weight: 600;
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-meta {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.comment-author {
  font-size: .85rem;
  font-weight: 500;
}

.comment-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.comment-state-pill, .comment-open-heading {
  display: inline-flex;
  border-radius: var(--radius-full);
  align-items:  center;
  padding: 2px 7px;
  font-size: .7rem;
  font-weight: 800;
}

.comment-state-pill.is-open, .comment-open-heading {
  background: color-mix(in srgb, var(--color-warning) 14%, var(--color-bg-card));
  color: color-mix(in srgb, var(--color-warning) 78%, var(--color-text-primary));
}

.comment-state-pill.is-resolved {
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-bg-card));
  color: var(--color-success);
}

.comment-open-heading {
  vertical-align: middle;
  margin-left: 10px;
}

.comment-resolve-btn {
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: 6px;
  margin-left: auto;
  font-weight: 700;
}

.comment-resolve-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.comment-delete-btn {
  color: var(--color-text-secondary);
  cursor: pointer;
  opacity: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 2px 6px;
  transition: opacity .15s;
  font-size: .8rem;
}

.comment-item:hover .comment-delete-btn {
  opacity: 1;
}

.comment-delete-btn:hover {
  color: var(--color-red);
  background: #c0392b0f;
}

.comment-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .9rem;
  line-height: 1.5;
}

.comment-form {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.comment-input {
  resize: vertical;
  padding: var(--space-2) 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border-radius: 0;
  width: 100%;
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.5;
}

.comment-input::placeholder {
  color: var(--color-text-muted);
}

.comment-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px #4a7fa533;
}

.cid-history-section {
  margin-top: var(--space-4, 16px);
}

.cid-history-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.cid-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  padding: 10px 0;
  font-size: .88rem;
}

.cid-history-item:last-child {
  border-bottom: 0;
}

.cid-history-item em {
  grid-column: 1 / -1;
  color: var(--color-text-secondary);
  font-style: normal;
}

.cid-history-item time, .cid-history-empty {
  color: var(--color-text-muted);
  font-size: .78rem;
}

.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (hover: none) {
  .media-thumb-delete {
    opacity: .9;
  }

  .comment-delete-btn {
    opacity: .7;
  }

  .clickable-row:active {
    background-color: #1a233204;
  }
}

@media (max-width: 768px) {
  .btn-sm {
    display: inline-flex;
    padding: var(--space-2) .8rem;
    justify-content: center;
    align-items:  center;
    min-width: 44px;
    min-height: 44px;
  }

  .bsp-close {
    width: 44px;
    height: 44px;
  }

  .star-rating .star {
    padding: var(--space-2) var(--space-1);
    display: inline-flex;
    justify-content: center;
    align-items:  center;
    min-width: 44px;
    min-height: 44px;
    font-size: 20px;
  }

  .star-rating {
    gap: 0;
  }

  .calendar-nav-btn {
    padding: var(--space-2) 14px;
    min-width: 44px;
    min-height: 44px;
  }

  .linkedin-preview-mode-toggle button {
    min-height: 44px;
    padding: 6px 14px;
    font-size: 12px;
  }

  .media-thumb-delete {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .comment-delete-btn {
    min-height: 44px;
    padding: 6px 10px;
  }

  .calendar-idea {
    padding: var(--space-2) 10px;
    font-size: var(--font-size-xs);
    display: flex;
    align-items:  center;
    min-height: 44px;
  }

  .calendar-grid {
    grid-template-columns: 1fr;
    background: none;
    border: none;
    border-radius: 0;
    gap: 0;
  }

  .calendar-day-header {
    display: none;
  }

  .calendar-day {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
    background: none;
    min-height: auto;
  }

  .calendar-day.other-month:not(:has(.calendar-idea)) {
    display: none;
  }

  .calendar-day.other-month {
    opacity: .7;
  }

  .calendar-day-number {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
  }

  .calendar-idea {
    white-space: normal;
    text-overflow: initial;
    margin-bottom: var(--space-1);
  }

  .form-grid-2col, .linkedin-preview-duo {
    grid-template-columns: 1fr;
  }

  .device-frame-desktop {
    display: none;
  }

  .device-frame-mobile {
    box-shadow: none;
    background: none;
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .device-frame-mobile-notch, .device-frame-mobile-bar {
    display: none;
  }

  .device-frame-mobile-screen {
    border-radius: 0;
    height: auto;
  }

  .linkedin-preview {
    padding: var(--space-3);
    max-width: 100%;
  }

  .li-action-btn span {
    display: none;
  }

  .device-frame-mobile .li-action-btn {
    padding: var(--space-2) 6px;
    flex-direction: row;
  }

  .device-frame-mobile .li-action-btn span {
    display: none;
  }

  .variation-refine {
    flex-wrap: wrap;
  }

  .variation-refine input {
    flex: 1;
    min-width: 0;
  }

  .variation-card-prompt {
    max-width: 100%;
  }

  .variation-card-layout {
    grid-template-columns: 1fr;
  }

  .variation-card-body {
    padding: var(--space-2) 10px;
  }

  .variation-card-actions {
    border-left: none;
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-2) 10px;
    gap: var(--space-1);
    flex-flow: wrap;
  }

  .variation-card-actions .btn-secondary, .variation-card-actions .btn-ghost {
    padding: var(--space-1) var(--space-2);
    flex: none;
    width: auto;
    font-size: .7rem;
  }

  .variation-card-header {
    padding: 6px 10px;
  }

  .variation-gen-summary {
    padding: var(--space-2) 10px;
  }

  .variation-gen-body {
    padding: var(--space-2) 10px 10px;
  }

  .card-header {
    padding: 10px var(--space-3);
  }

  .card-body {
    padding: var(--space-3);
  }

  .media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .media-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .media-stats-bar {
    font-size: var(--font-size-xs);
    flex-wrap: wrap;
  }

  .content-filter-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .content-filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .content-filter-tab {
    white-space: nowrap;
    display: inline-flex;
    flex-shrink: 0;
    align-items:  center;
    min-height: 44px;
  }

  .action-buttons {
    justify-content: flex-start;
    gap: var(--space-2);
    width: 100%;
  }

  .action-buttons .btn-secondary {
    font-size: var(--font-size-xs);
    text-align: center;
    flex: 1;
    justify-content: center;
    min-height: 40px;
    padding: .4rem .6rem;
  }

  .view-toggle-btn {
    padding: var(--space-2) var(--space-3);
    min-width: 44px;
    min-height: 44px;
  }

  .content-title-cell {
    max-width: none;
  }

  .content-filters {
    gap: var(--space-2);
  }

  .content-filter-group {
    width: 100%;
  }

  .content-filter-label {
    font-size: var(--font-size-xs);
    min-width: 42px;
  }
}

@media (max-width: 480px) {
  .media-grid, .media-gallery-grid {
    grid-template-columns: 1fr;
  }

  .calendar-idea {
    padding: var(--space-2) 10px;
    font-size: .8rem;
  }
}

.editor-gutter-wrapper {
  display: flex;
  position: relative;
  gap: 0;
}

.editor-gutter {
  border-right: 1px solid var(--color-border-light);
  display: flex;
  padding-top: var(--space-1);
  overflow-y: hidden;
  flex-direction: column;
  flex-shrink: 0;
  width: 36px;
}

.guttered-textarea {
  resize: none;
  overflow-y: hidden;
  flex: 1;
  align-self:  flex-start;
  width: 100%;
  min-width: 0;
  font-family: inherit;
  line-height: 1.5;
}

.gutter-sparkle {
  position: relative;
  display: flex;
  color: #0000;
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items:  flex-start;
  width: 36px;
  min-height: 24px;
  padding-top: 0;
}

.gutter-sparkle svg {
  position: relative;
  padding: var(--space-1);
  color: var(--color-text-muted);
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 10px;
  transition: all .15s;
}

.gutter-sparkle:hover svg {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.gutter-sparkle.active svg {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 8px #4a7fa566;
}

.gutter-whole-post {
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: var(--space-1);
  min-height: 28px;
  margin-bottom: 2px;
}

.gutter-whole-post svg {
  margin-top: var(--space-1);
}

.body-shop-panel {
  position: fixed;
  background: var(--color-bg-card);
  border: 1px solid var(--color-accent);
  box-shadow: var(--shadow-lg), 0 0 20px #4a7fa526;
  z-index: var(--z-panel, 175);
  display: flex;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  border-radius: 0;
  flex-direction: column;
  width: 420px;
  max-height: calc(100dvh - 32px);
  transition: opacity .2s ease-out, transform .2s cubic-bezier(.16,1,.3,1);
  right: 16px;
  transform: translateX(8px)scale(.98);
}

.body-shop-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0)scale(1);
}

.bsp-header {
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  background: var(--color-bg-card);
  justify-content: space-between;
  align-items:  center;
  padding: 10px 14px;
}

.bsp-header-left {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  min-width: 0;
}

.bsp-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}

.bsp-header-label {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 600;
}

.body-shop-panel .settings-hint {
  padding: var(--space-2) 14px;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  font-size: var(--font-size-xs);
  margin: 0;
}

.body-shop-panel .settings-link {
  font-size: var(--font-size-xs);
}

.bsp-empty-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.bsp-close {
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  background: none;
  border: none;
  border-radius: 0;
  justify-content: center;
  align-items:  center;
  width: 28px;
  height: 28px;
  transition: all .15s;
  font-size: 1.1rem;
}

.bsp-close:hover {
  color: var(--color-text-primary);
  background: #1a233204;
}

.bsp-agent-bar {
  display: flex;
  padding: var(--space-2) 14px;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  overflow-x: auto;
  gap: 6px;
}

.agent-pill {
  display: flex;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 0;
  flex-shrink: 0;
  align-items:  center;
  gap: 6px;
  padding: 5px 10px;
  transition: all .15s;
  font-size: .78rem;
  font-weight: 600;
}

.agent-pill:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text-primary);
}

.agent-pill.active {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  color: var(--color-accent-hover);
}

.agent-pill.inactive {
  opacity: .5;
}

.agent-avatar {
  display: flex;
  overflow: hidden;
  color: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  width: 20px;
  height: 20px;
  font-size: .6rem;
  font-weight: 700;
}

.bsp-chat-area {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) 14px;
  display: flex;
  flex-direction: column;
  flex: auto;
  gap: 10px;
  min-height: 0;
  max-height: 320px;
}

.bsp-empty-hint {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-5) var(--space-3);
  font-size: .8rem;
  line-height: 1.6;
}

.bsp-msg {
  display: flex;
  flex-direction: column;
}

.bsp-msg.user {
  align-items:  flex-end;
}

.bsp-msg.assistant {
  align-items:  flex-start;
}

.bsp-msg-row {
  display: flex;
  align-items:  flex-start;
  gap: var(--space-2);
  max-width: 100%;
}

.bsp-msg.user .bsp-msg-row {
  flex-direction: row-reverse;
}

.bsp-msg-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bsp-msg.user .bsp-msg-main {
  align-items:  flex-end;
}

.bsp-msg-avatar {
  display: inline-flex;
  overflow: hidden;
  color: #fff;
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items:  center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  font-size: .62rem;
  font-weight: 800;
}

.bsp-msg-avatar-user {
  background: var(--color-ink-mid);
}

.bsp-msg-agent-name {
  color: var(--color-text-muted);
  margin-bottom: 2px;
  font-size: .6rem;
  font-weight: 600;
}

.bsp-msg-bubble {
  padding: var(--space-2) var(--space-3);
  white-space: pre-wrap;
  border-radius: 0;
  max-width: 90%;
  font-size: .8rem;
  line-height: 1.5;
}

.bsp-msg.user .bsp-msg-bubble {
  background: var(--color-accent);
  color: #fff;
  border-bottom-right-radius: 0;
}

.bsp-msg.assistant .bsp-msg-bubble {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 0;
}

.bsp-typing {
  display: flex;
  gap: var(--space-1);
  padding: 10px 14px;
}

.bsp-typing-dot {
  background: var(--color-text-muted);
  animation: bspTypingBounce 1.4s ease-in-out infinite;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.bsp-typing-dot:nth-child(2) {
  animation-delay: .2s;
}

.bsp-typing-dot:nth-child(3) {
  animation-delay: .4s;
}

@keyframes bspTypingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: .4;
  }

  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.bsp-variations {
  display: flex;
  margin-top: var(--space-2);
  flex-direction: column;
  gap: 6px;
  max-width: 90%;
}

.bsp-var-card {
  padding: var(--space-2) 10px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0;
  transition: border-color .15s;
}

.bsp-var-card:hover {
  border-color: var(--color-accent);
}

.bsp-var-text {
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: 200px;
  font-size: .78rem;
  line-height: 1.5;
}

.bsp-var-footer {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  margin-top: 6px;
}

.bsp-var-label {
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .65rem;
  font-weight: 600;
}

.bsp-error {
  color: var(--color-error);
  font-size: var(--font-size-xs);
  background: #c0392b0f;
  padding: 6px 14px;
}

.bsp-input-bar {
  border-top: 1px solid var(--color-border-light);
  display: flex;
  gap: var(--space-2);
  background: var(--color-bg-card);
  padding: 10px 14px;
}

.bsp-input {
  background: var(--color-paper-warm, #eef1f5);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  padding: var(--space-2) 14px;
  font-family: var(--font-family);
  border-radius: 0;
  flex: 1;
  font-size: .8rem;
}

.bsp-input::placeholder {
  color: var(--color-text-muted);
}

.bsp-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
}

.bsp-input:disabled {
  opacity: .5;
}

.bsp-send {
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 36px;
  height: 36px;
  transition: background .15s;
}

.bsp-send:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.bsp-send:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.badge-hook {
  color: var(--color-blue-accent);
  background: #4a7fa51f;
}

.badge-body {
  color: var(--color-ink-mid);
  background: #4a7fa51f;
}

.badge-cta {
  color: var(--color-warning);
  background: #f39c121f;
}

.segment-selected {
  border-color: var(--color-accent);
  background: #4a7fa50f;
}

@media (max-width: 1100px) and (min-width: 769px) {
  .body-shop-panel {
    width: min(380px, 100vw - 32px);
  }
}

@media (max-width: 768px) {
  .body-shop-panel {
    position: fixed;
    z-index: var(--z-modal);
    border-radius: 0;
    width: 100%;
    height: 100dvh;
    max-height: none;
    inset: 0;
  }

  .bsp-header {
    padding-top: calc(10px + var(--safe-area-top));
  }

  .bsp-chat-area {
    max-height: none;
  }

  .bsp-input {
    min-height: 44px;
    font-size: 16px;
  }

  .bsp-send {
    width: 44px;
    height: 44px;
  }

  .bsp-input-bar {
    padding-bottom: calc(10px + var(--safe-area-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .body-shop-panel {
    transition: none;
  }

  .bsp-typing-dot {
    animation: none;
  }
}

.content-row-mobile-meta, .content-row-mobile-trailing, .content-title-cell-meta {
  display: none;
}

@media (max-width: 1100px) {
  .content-list-wide .page-header {
    margin: 0 0 var(--space-2) 0;
    align-items:  center;
    gap: var(--space-2);
    border-bottom: 0;
    flex-direction: row;
    padding: 0;
  }

  .content-list-wide .page-header h1 {
    display: none;
  }

  .content-list-wide .action-buttons {
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
  }

  .content-list-wide .action-buttons .btn {
    border-radius: 6px;
    flex: none;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
  }

  .content-list-wide .action-buttons .btn .btn-label {
    display: none;
  }

  .content-mobile-filters {
    display: flex;
    margin-bottom: var(--space-3, 12px);
    flex-wrap: wrap;
    gap: 6px;
  }

  .content-mobile-filters .content-mobile-filter-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 30px 0 var(--space-3);
    background: var(--color-bg-card);
    border: 1px solid var(--color-ink);
    font-family: var(--font-family-heading);
    color: var(--color-ink);
    letter-spacing: .02em;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23414099' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 12px;
    border-radius: 6px;
    flex: 140px;
    min-width: 0;
    height: 40px;
    font-size: .8rem;
    font-weight: 600;
  }

  .content-mobile-filters .content-mobile-filter-sort {
    flex: 100%;
  }

  .content-mobile-filters .content-mobile-filter-select:focus {
    outline: none;
    border-color: var(--color-ink);
    box-shadow: 0 0 0 2px var(--color-accent-light);
  }

  .content-mobile-filters .content-mobile-filter-clear {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-accent);
    font-family: var(--font-family-heading);
    cursor: pointer;
    border-radius: 6px;
    flex: 100%;
    height: 38px;
    font-size: .8rem;
    font-weight: 700;
  }

  .content-mobile-filters .content-mobile-filter-clear:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
  }

  .content-list-wide .table-card {
    border: 1px solid var(--color-border-light);
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    padding: 0;
  }

  .content-list-wide .table-card table, .content-list-wide .table-card tbody, .content-list-wide .table-card tr, .content-list-wide .table-card td, .content-list-wide .table-card th {
    display: block;
  }

  .content-list-wide .table-card thead {
    display: none;
  }

  .content-list-wide .table-card tr.clickable-row > td {
    border-bottom: 0;
  }

  .content-list-wide .table-card tr.clickable-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    column-gap: var(--space-3);
    padding: 6px var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
    cursor: pointer;
    align-items:  start;
    row-gap: 0;
    transition: background .12s;
  }

  .content-list-wide .table-card tr.clickable-row:last-child {
    border-bottom: 0;
  }

  .content-list-wide .table-card tr.clickable-row:hover {
    background: #4140990a;
  }

  .content-list-wide .table-card tr.clickable-row > td:first-child {
    grid-column: 1;
    grid-row: 1;
    align-self:  start;
    height: auto;
    padding: 0;
  }

  .content-list-wide .table-card tr.clickable-row > td:first-child > div {
    border-radius: 6px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .content-list-wide .table-card tr.clickable-row > td:first-child img {
    border-radius: 6px;
  }

  .content-list-wide .content-title-cell {
    grid-column: 2;
    grid-row: 1;
    color: var(--color-ink);
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-self:  start;
    gap: 5px;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .content-list-wide .content-title-cell .content-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    text-box: trim-start cap alphabetic;
    max-width: 100%;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.15;
  }

  .content-list-wide .content-title-cell .content-title-cell-meta {
    display: block;
    color: var(--color-ink-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-box: trim-end cap alphabetic;
    font-size: .78rem;
    line-height: 1.15;
  }

  .content-list-wide .content-title-cell .content-title-cell-meta:empty, .content-list-wide .content-title-cell .visibility-badge, .content-list-wide .content-title-cell .published-link-icon, .content-list-wide .content-title-cell .open-comments-badge {
    display: none;
  }

  .content-list-wide .content-row-mobile-meta {
    display: none !important;
  }

  .content-list-wide .content-row-mobile-trailing {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    flex-shrink: 0;
    align-self:  start;
    align-items:  center;
    padding: 0;
  }

  .content-list-wide .content-row-mobile-trailing .status-pill {
    padding: 3px var(--space-2);
    font-size: .7rem;
    line-height: 1;
  }

  .content-list-wide .content-row-status-desktop, .content-list-wide .content-tags-cell, .content-list-wide .table-card .col-hide-mobile {
    display: none !important;
  }
}

.contact-avatar {
  object-fit: cover;
  display: inline-flex;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid #ffffff14;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 28px;
  height: 28px;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
}

.contact-avatar-initials {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-ink-mid) 100%);
}

.contact-avatar-large {
  border-width: 2px;
  width: 64px;
  height: 64px;
  font-size: 1.4rem;
}

.contact-avatar-pending {
  position: relative;
  animation: contact-avatar-spin 1.6s linear infinite;
  background-image: linear-gradient(var(--color-ink), var(--color-ink)), linear-gradient(90deg, var(--color-accent) 0%, var(--color-blue-line) 50%, var(--color-accent) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 2px solid #0000;
}

@keyframes contact-avatar-spin {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 0 0, 200% 0;
  }
}

.contact-avatar-row {
  display: inline-flex;
  vertical-align: middle;
  align-items:  center;
  gap: 6px;
}

.meeting-related-item .contact-avatar {
  margin-right: var(--space-2);
}

.contact-enrichment-section {
  display: flex;
  border: 1px solid var(--color-border, #ffffff14);
  background: #4140990a;
  border-radius: 10px;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
}

.contact-enrichment-row {
  display: flex;
  flex-direction: row;
  align-items:  center;
  gap: 14px;
  min-width: 0;
}

@media (max-width: 480px) {
  .contact-enrichment-row {
    flex-direction: column;
    align-items:  flex-start;
    gap: 10px;
  }
}

.contact-enrichment-text {
  display: flex;
  gap: var(--space-1);
  flex-direction: column;
  flex: auto;
  min-width: 0;
}

.contact-enrichment-headline {
  color: var(--color-text-primary);
  word-wrap: break-word;
  font-size: .95rem;
  font-weight: 600;
}

.contact-enrichment-meta {
  color: var(--color-text-muted);
  word-wrap: break-word;
  font-size: .85rem;
}

.contact-enrichment-empty {
  color: var(--color-text-muted);
  font-size: .85rem;
  font-style: italic;
}

.contact-enrichment-pill {
  display: inline-block;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-full);
  background: var(--color-accent-light);
  color: var(--color-accent);
  align-self:  flex-start;
  margin-top: 2px;
  padding: 2px 10px;
  font-weight: 600;
}

.contact-enrichment-pill-pending {
  color: #2a8cb8;
  background: #8ed8f826;
}

.contact-enrichment-pill-not_found, .contact-enrichment-pill-skipped {
  color: var(--color-text-muted);
  background: #7a7fbd26;
}

.contact-enrichment-pill-failed {
  color: #b76e00;
  background: #faa61a26;
}

.contact-enrichment-pill-found {
  color: #b76e00;
  background: #faa61a1f;
}

.contact-enrichment-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}

.contact-enrichment-confirm {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}

.contact-enrichment-confirm-label {
  color: #b76e00;
  border-radius: var(--radius-full);
  background: #faa61a1f;
  padding: 2px 10px;
  font-size: .85rem;
  font-weight: 600;
}

.contact-enrichment-skip-reason {
  color: var(--color-text-muted);
  margin-top: 6px;
  font-size: .85rem;
  line-height: 1.4;
}

.contact-enrichment-url-row {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  border-top: 1px solid #7a7fbd26;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
}

.contact-enrichment-url-label {
  color: var(--color-text-muted);
  flex: none;
  font-size: .85rem;
}

.contact-enrichment-url-input {
  color: var(--color-text-primary);
  background: #fff;
  border: 1px solid #7a7fbd4d;
  border-radius: 6px;
  flex: 240px;
  min-width: 0;
  padding: 6px 10px;
  font-size: .85rem;
}

.contact-enrichment-url-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.contact-fields-toolbar {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-2) 0 6px;
}

.contact-field-input {
  color: var(--color-text-primary);
  background: #fff;
  border: 1px solid #7a7fbd4d;
  border-radius: 6px;
  width: 100%;
  padding: 6px 10px;
  font-family: inherit;
  font-size: .9rem;
}

.contact-field-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.contact-field-textarea {
  resize: vertical;
  min-height: 44px;
  line-height: 1.4;
}

.contact-field-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

.highlights-field-wide {
  grid-column: 1 / -1;
}

.contact-new-company-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  background: #4140990a;
  border: 1px dashed #41409940;
  border-radius: 6px;
  flex-direction: column;
  padding: 10px;
}

.contact-new-company-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.app-main:has(.content-idea-redesign) {
  background: linear-gradient(var(--color-grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid-minor) 1px, transparent 1px), var(--color-bg-primary);
  background-size: 96px 96px;
  max-width: none;
  padding: 0;
}

.content-idea-redesign {
  padding: var(--space-4) var(--space-6) var(--space-10);
  color: var(--color-text-primary);
  overflow-x: hidden;
  width: min(100%, 2252px);
  margin: 0 auto;
}

.content-idea-redesign > * {
  min-width: 0;
}

.cid-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items:  center;
  gap: var(--space-5);
  background: var(--color-ink);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  min-height: 72px;
  padding: 0 30px;
}

.cid-topbar-back, .cid-topbar-btn, .cid-topbar-overflow summary {
  cursor: pointer;
  font-family: var(--font-family);
  border: 1px solid #0000;
}

.cid-topbar-back {
  display: inline-flex;
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  background: none;
  justify-content: center;
  align-items:  center;
  width: 38px;
  height: 38px;
}

.cid-topbar-back:hover {
  background: color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
  outline: none;
}

.cid-topbar-back:focus-visible {
  background: color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
  outline: none;
}

.cid-breadcrumb {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  font-family: var(--font-family-heading);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-inverse) 72%, var(--color-accent-light));
  min-width: 0;
  font-size: .76rem;
  font-weight: 700;
}

.cid-breadcrumb span + span:before {
  content: "·";
  margin-right: var(--space-3);
  color: color-mix(in srgb, var(--color-text-inverse) 55%, transparent);
}

.cid-autosave {
  color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent);
  white-space: nowrap;
  font-size: .9rem;
}

.cid-topbar-actions {
  display: flex;
  justify-content: flex-end;
  align-items:  center;
  gap: var(--space-4);
}

.cid-topbar-btn {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
  background: var(--color-bg-card);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
  border-radius: 8px;
  min-height: 38px;
  padding: 0 18px;
  font-size: .9rem;
  font-weight: 800;
}

.cid-topbar-primary {
  color: var(--color-text-inverse);
  box-shadow: none;
  background: none;
}

.cid-topbar-visibility {
  background-color: var(--color-bg-card);
  color: var(--color-ink);
  font-family: var(--font-family);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 8px;
  min-height: 38px;
  padding: 0 30px 0 14px;
  font-size: .85rem;
  font-weight: 800;
}

.cid-topbar-visibility:hover {
  border-color: var(--color-accent-light);
  outline: none;
}

.cid-topbar-visibility:focus-visible {
  border-color: var(--color-accent-light);
  outline: none;
}

.cid-topbar-btn:hover {
  border-color: var(--color-accent-light);
  outline: none;
  transform: translateY(-1px);
}

.cid-topbar-btn:focus-visible {
  border-color: var(--color-accent-light);
  outline: none;
  transform: translateY(-1px);
}

.cid-topbar-overflow {
  display: none;
  position: relative;
}

.cid-topbar-overflow summary {
  list-style: none;
  display: inline-flex;
  background: var(--color-bg-card);
  color: var(--color-ink);
  border-radius: 8px;
  justify-content: center;
  align-items:  center;
  min-width: 38px;
  height: 38px;
  font-weight: 800;
}

.cid-topbar-overflow summary::-webkit-details-marker {
  display: none;
}

.cid-topbar-overflow[open] {
  z-index: var(--z-dropdown);
}

.cid-topbar-overflow[open]:before {
  content: "";
  position: fixed;
  inset: 0;
}

.cid-topbar-overflow button {
  display: block;
  padding: 10px var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  width: 150px;
}

.cid-topbar-overflow button:first-of-type {
  position: absolute;
  border-radius: 8px 8px 0 0;
  top: calc(100% + 8px);
  right: 0;
}

.cid-topbar-overflow button:last-of-type {
  position: absolute;
  border-bottom: 0;
  border-radius: 0 0 8px 8px;
  top: calc(100% + 47px);
  right: 0;
}

.content-idea-redesign .admin-error {
  margin: 14px 0;
}

.content-idea-redesign .content-detail-layout {
  display: grid;
  grid-template-columns: minmax(280px, 416px) minmax(520px, 1fr) minmax(320px, 416px);
  grid-template-rows: auto auto;
  grid-template-areas: "highlights highlights highlights" "sparring main variations";
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-top: 0;
  align-items: stretch;
  gap: 0;
}

.content-idea-redesign .content-highlights-panel {
  grid-area: highlights;
  padding: 30px 30px var(--space-6);
  background: var(--color-bg-card);
  border: 0;
  border-bottom: 1px solid var(--color-border-light);
  border-radius: 0;
}

.cid-hero-pills {
  display: flex;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  align-items:  center;
  gap: 10px;
  padding-right: 44px;
}

.cid-pill {
  display: inline-flex;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  white-space: nowrap;
  align-items:  center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 13px;
  font-size: .86rem;
  font-weight: 700;
}

.cid-pill select, .cid-pill input[type="date"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.cid-pill-status {
  position: relative;
  background: var(--color-accent-light);
  color: var(--color-ink);
  transition: background var(--transition-fast, .15s ease);
}

.cid-pill-status:has(select) {
  cursor: pointer;
}

.cid-pill-status:focus-within {
  background: color-mix(in srgb, var(--color-accent-light) 70%, var(--color-accent) 30%);
}

.cid-pill-status:has(select):hover {
  background: color-mix(in srgb, var(--color-accent-light) 70%, var(--color-accent) 30%);
}

.cid-pill-status:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.cid-pill-status select {
  position: absolute;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  width: 100%;
  height: 100%;
  inset: 0;
}

.cid-pill-status select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.cid-pill-date {
  position: relative;
}

.cid-pill-date.is-editable {
  cursor: pointer;
  transition: background var(--transition-fast, .15s ease);
}

.cid-pill-date.is-editable:hover, .cid-pill-date:focus-within {
  background: color-mix(in srgb, var(--color-bg-card) 70%, var(--color-accent-light) 30%);
}

.cid-pill-date:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.cid-pill-date input[type="date"] {
  position: absolute;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: 0;
  width: 100%;
  height: 100%;
  inset: 0;
}

.cid-pill-date input[type="date"]:disabled {
  cursor: default;
}

.cid-pill-date input[type="date"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.cid-pill-label {
  pointer-events: none;
  font-weight: 600;
  line-height: 1;
}

.cid-pill-chevron {
  opacity: .7;
  pointer-events: none;
  flex-shrink: 0;
}

.cid-pill-status .cid-status-dot, .cid-pill-icon {
  pointer-events: none;
}

.cid-pill-status:hover .cid-pill-chevron {
  opacity: 1;
}

.cid-status-dot {
  background: var(--color-ink);
  box-shadow: inset 0 0 0 2px var(--color-accent-light);
  border-radius: 50%;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.cid-pill-review {
  background: var(--color-bg-secondary);
  cursor: pointer;
}

.cid-pill-review:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.cid-pill-review.is-done {
  color: var(--color-ink);
}

.cid-pill-wait:not(.is-done) {
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border-light));
  color: var(--color-warning-strong);
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg-card));
}

.cid-checkmark {
  font-size: .74rem;
}

.cid-hero-counts {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.content-idea-redesign .content-highlights-panel h1 {
  color: var(--color-ink);
  font-family: var(--font-family-heading);
  letter-spacing: 0;
  overflow-wrap: anywhere;
  max-width: 1500px;
  margin: 0 0 18px;
  padding-right: 0;
  font-size: clamp(2.1rem, 3vw, 3.15rem);
  font-weight: 500;
  line-height: 1.04;
}

.cid-title-edit-row {
  display: flex;
  margin-bottom: var(--space-4);
  align-items:  center;
  gap: 10px;
}

.cid-title-edit-row .title-edit-input {
  flex: 1;
  min-width: 0;
  font-size: 2rem;
  font-weight: 700;
}

.cid-comment-badge {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, var(--color-warning) 48%, var(--color-border-light));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-warning) 11%, var(--color-bg-card));
  color: color-mix(in srgb, var(--color-warning) 75%, var(--color-text-primary));
  align-items:  center;
  gap: 7px;
  min-height: 34px;
  margin: -4px 0 14px auto;
  padding: 5px 14px;
  font-size: .86rem;
  font-weight: 800;
}

.cid-comment-badge.small {
  min-height: 30px;
  margin: 0;
  font-size: .8rem;
}

.cid-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items:  start;
  gap: 18px 28px;
}

.cid-context-grid .cid-insteek-row {
  margin-top: 0;
}

.cid-context-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items:  start;
  gap: 14px;
}

.cid-eyebrow, .eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 800;
}

.cid-context-row .cid-eyebrow {
  padding-top: var(--space-3);
  color: var(--color-ink);
}

.cid-context-shell {
  border: 1px dashed var(--color-border-light);
  background: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-bg-primary));
  border-radius: 8px;
  min-width: 0;
}

.cid-context-input {
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  field-sizing: content;
  overflow-wrap: anywhere;
  overflow-y: hidden;
  resize: vertical;
  white-space: pre-wrap;
  background: none;
  border: 0;
  width: 100%;
  min-height: 112px;
  font-size: 1.03rem;
  font-style: italic;
  line-height: 1.6;
}

.cid-context-input:focus {
  box-shadow: none;
}

.cid-context-read {
  padding: 14px var(--space-4);
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  display: flex;
  border-radius: 8px;
  align-items:  flex-start;
  width: 100%;
  min-height: 112px;
  font-size: 1.03rem;
  font-style: italic;
  line-height: 1.6;
}

.cid-context-read.editable {
  cursor: text;
  transition: background .15s;
}

.cid-context-read.editable:hover {
  background: color-mix(in srgb, var(--color-accent-light) 50%, transparent);
  outline: none;
}

.cid-context-read.editable:focus-visible {
  background: color-mix(in srgb, var(--color-accent-light) 50%, transparent);
  outline: none;
}

.cid-context-placeholder {
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .cid-context-read {
    overflow-y: auto;
    max-height: 280px;
  }
}

.cid-context-actions {
  display: flex;
  color: var(--color-text-muted);
  align-items:  center;
  gap: 10px;
  margin: 10px 0 0 84px;
  font-size: .78rem;
}

.cid-insteek-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items:  start;
  gap: 14px;
  margin-top: 14px;
}

.cid-insteek-row .cid-eyebrow {
  padding-top: var(--space-3);
  color: var(--color-ink);
}

.cid-insteek-aside {
  display: flex;
  text-align: right;
  flex-direction: column;
  align-items:  flex-end;
  gap: 10px;
  min-width: 0;
}

.cid-insteek-toggle {
  display: flex;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-direction: column;
  align-items:  flex-end;
  gap: 6px;
  font-size: .82rem;
}

.cid-insteek-toggle input {
  cursor: pointer;
  flex: none;
}

.cid-insteek-toggle .pill-toggle:disabled {
  opacity: .55;
  cursor: default;
}

.cid-insteek-actions {
  grid-column: 2;
  display: flex;
  margin-top: var(--space-2);
  align-items:  center;
  gap: 10px;
}

.cid-enriched-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items:  start;
  gap: 14px;
  margin-top: 18px;
}

.cid-enriched-row .cid-eyebrow {
  padding-top: var(--space-3);
  color: var(--color-ink);
}

.cid-enriched-shell {
  border: 1px solid var(--color-border-light);
  background: color-mix(in srgb, var(--color-accent-light) 18%, var(--color-bg-card));
  padding: 14px var(--space-4);
  display: flex;
  border-radius: 8px;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.cid-enriched-shell.is-loading, .cid-enriched-shell.is-error, .cid-enriched-shell.is-empty {
  border-style: dashed;
}

.cid-enriched-empty {
  color: var(--color-text-muted);
  font-size: .95rem;
  line-height: 1.5;
}

.cid-enriched-trigger {
  align-self:  flex-start;
}

.cid-enriched-shell.is-error {
  background: color-mix(in srgb, var(--color-bg-card) 92%, #c0392b);
}

.cid-enriched-text {
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 1.03rem;
  line-height: 1.6;
}

.cid-enriched-meta {
  color: var(--color-text-muted);
  font-size: .78rem;
}

.cid-enriched-loading {
  color: var(--color-text-muted);
  font-size: .95rem;
  font-style: italic;
}

.cid-enriched-error {
  color: var(--color-text-secondary);
  font-size: .92rem;
}

.cid-enriched-sources {
  margin-top: var(--space-1);
}

.cid-enriched-sources summary {
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-1) 0;
  user-select: none;
  font-size: .82rem;
}

.cid-enriched-sources summary:hover {
  color: var(--color-text-secondary);
}

.cid-enriched-sources-list {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-left: var(--space-1);
  flex-direction: column;
}

.cid-enriched-source-item {
  border-left: 2px solid var(--color-border-light);
  min-width: 0;
  padding-left: 10px;
}

.cid-enriched-source-item .cid-eyebrow {
  margin-bottom: var(--space-1);
  padding-top: 0;
  font-size: .7rem;
}

.cid-enriched-source-title a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: .92rem;
}

.cid-enriched-source-title a:hover {
  text-decoration: underline;
}

.cid-enriched-source-chunk {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  font-size: .82rem;
  font-style: italic;
  line-height: 1.5;
}

.cid-enriched-structured {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
  min-width: 0;
}

.cid-enriched-section-label {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 6px;
  font-size: .72rem;
}

.cid-enriched-quotables {
  min-width: 0;
}

.cid-enriched-section-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cid-quotable-row {
  display: flex;
  align-items:  flex-start;
  gap: var(--space-2);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  padding: var(--space-2) 10px;
  border-radius: 6px;
  min-width: 0;
}

.cid-quotable-text {
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
  flex: auto;
  min-width: 0;
  font-size: .95rem;
  line-height: 1.5;
}

.cid-copy-btn {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-1);
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px var(--space-1);
  background: none;
  border: 0;
  border-radius: 4px;
  flex: none;
  min-height: 24px;
}

.cid-copy-btn:hover {
  color: var(--color-text-secondary);
  background: var(--color-accent-light);
}

.cid-copy-done {
  color: var(--color-accent);
  white-space: nowrap;
  font-size: .72rem;
}

.cid-enriched-section {
  min-width: 0;
}

.cid-enriched-section > summary {
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-1) 0;
  user-select: none;
  font-size: .82rem;
}

.cid-enriched-section > summary:hover {
  color: var(--color-text-secondary);
}

.cid-enriched-section-item {
  color: var(--color-text-secondary);
  padding: var(--space-1) 0 var(--space-1) 10px;
  border-left: 2px solid var(--color-border-light);
  overflow-wrap: anywhere;
  font-size: .92rem;
  line-height: 1.5;
}

.cid-toon-meer {
  cursor: pointer;
  color: var(--color-text-muted);
  text-decoration: underline;
  background: none;
  border: 0;
  align-self:  flex-start;
  padding: 2px 0;
  font-size: .8rem;
}

.cid-toon-meer:hover {
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .cid-enriched-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .cid-enriched-row .cid-eyebrow {
    padding-top: 0;
  }
}

.cid-mobile-main-tabs {
  display: none;
}

.content-ai-sparring-panel {
  grid-area: sparring;
  display: flex;
  background: color-mix(in srgb, var(--color-accent-light) 52%, var(--color-bg-card));
  border-right: 1px solid var(--color-border-light);
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.cid-panel-heading, .cid-variation-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  padding: 22px 18px 14px;
}

.cid-panel-subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin: 2px 0 0;
  line-height: 1.4;
}

.cid-persona-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 0 18px 10px;
}

.cid-persona-card {
  display: flex;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items:  center;
  gap: 5px;
  min-width: 0;
  min-height: 66px;
  padding: 10px 6px;
  font-size: .78rem;
  font-weight: 800;
}

.cid-persona-card.active {
  background: var(--color-ink);
  color: var(--color-text-inverse);
}

.cid-persona-card.inactive {
  opacity: .55;
}

.cid-persona-avatar, .cid-sparring-avatar {
  display: inline-flex;
  overflow: hidden;
  color: var(--color-text-inverse);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 30px;
  height: 30px;
  font-size: .72rem;
  font-weight: 900;
}

.cid-active-persona {
  margin: 0 18px var(--space-4);
  padding: var(--space-3) 14px;
  background: var(--color-accent-light);
  color: var(--color-text-secondary);
  border-radius: 8px;
}

.cid-active-persona strong, .cid-active-persona span, .cid-active-persona em {
  display: block;
}

.cid-active-persona strong {
  color: var(--color-ink);
}

.cid-active-persona em {
  color: var(--color-text-muted);
  margin-top: 2px;
  font-size: .82rem;
}

.cid-sparring-messages {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-height: 0;
}

.cid-sparring-scroll {
  position: absolute;
  overflow-y: auto;
  padding: 0 18px var(--space-4);
  display: flex;
  flex-direction: column;
  inset: 0;
}

.cid-sparring-scroll > .cid-sparring-message:first-child {
  margin-top: auto;
}

.cid-sparring-message {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items:  start;
  gap: 10px;
  margin-bottom: 14px;
}

.cid-sparring-message.user {
  grid-template-columns: minmax(0, 1fr) 30px;
}

.cid-sparring-message.user .cid-sparring-avatar {
  grid-column: 2;
  grid-row: 1;
  background: var(--color-accent);
}

.cid-sparring-message.user .cid-sparring-bubble {
  grid-column: 1;
  grid-row: 1;
  background: var(--color-ink);
  color: var(--color-text-inverse);
  justify-self: end;
}

.cid-sparring-message.assistant .cid-sparring-avatar {
  background: var(--color-accent);
}

.cid-sparring-bubble {
  padding: var(--space-3) 14px;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  white-space: pre-wrap;
  border-radius: 16px;
  max-width: 100%;
  line-height: 1.45;
}

.cid-sparring-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.cid-sparring-empty {
  border: 1px dashed var(--color-border-light);
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-bg-card) 80%, transparent);
  border-radius: 8px;
  padding: 18px;
  font-size: .9rem;
  line-height: 1.5;
}

.cid-quick-actions {
  display: flex;
  gap: var(--space-2);
  padding: 14px 18px var(--space-2);
  border-top: 1px solid var(--color-border-light);
  flex-wrap: wrap;
}

.cid-sparring-input {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 18px 18px;
}

.cid-sparring-input input {
  background: var(--color-bg-card);
  border-radius: 8px;
  flex: 1;
  min-width: 0;
  min-height: 50px;
}

.cid-send-btn {
  background: var(--color-ink);
  color: var(--color-text-inverse);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  width: 46px;
  height: 46px;
}

.cid-send-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.content-idea-redesign .content-detail-main {
  display: contents;
}

.content-editor-panel {
  grid-area: main;
  display: flex;
  border: 0;
  border-right: 1px solid var(--color-border-light);
  background: color-mix(in srgb, var(--color-bg-primary) 78%, var(--color-bg-card));
  box-shadow: none;
  border-radius: 0;
  flex-direction: column;
  min-width: 0;
}

.cid-editor-tabs {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  padding: 14px 22px;
}

.cid-editor-tabs button, .cid-device-toggle button, .cid-segmented-tabs button, .cid-work-tabs button {
  color: var(--color-text-secondary);
  cursor: pointer;
  font-family: var(--font-family);
  background: none;
  border: 0;
  font-weight: 800;
}

.cid-editor-tabs button {
  padding: 0 var(--space-4);
  border-radius: 8px;
  min-height: 40px;
  font-size: .9rem;
}

.cid-editor-tabs button.active {
  background: var(--color-ink);
  color: var(--color-text-inverse);
}

.cid-scratch-textarea {
  resize: vertical;
  width: 100%;
  font-family: inherit;
  line-height: 1.5;
}

.cid-editor-toolbar {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  flex-wrap: nowrap;
  padding: 10px 22px;
}

.cid-editor-toolbar > .cid-char-count, .cid-editor-toolbar > .cid-save-state, .cid-editor-toolbar > .btn-ghost, .cid-editor-toolbar > .btn-secondary {
  flex-shrink: 0;
}

.cid-device-toggle {
  display: flex;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-secondary);
  border-radius: 8px;
  gap: 2px;
  padding: 3px;
}

.cid-device-toggle button {
  display: inline-flex;
  border-radius: 6px;
  align-items:  center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  font-size: .8rem;
}

.cid-device-toggle button.active {
  background: var(--color-bg-card);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.cid-editor-toolbar .rich-text-toolbar {
  flex-wrap: nowrap;
  flex: auto;
  min-width: 0;
}

.cid-editor-toolbar .cid-char-count {
  margin-left: auto;
}

.cid-char-count, .cid-save-state {
  color: var(--color-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  font-weight: 800;
}

.cid-editor-stage {
  margin: 28px auto var(--space-4);
  flex: 1;
  width: min(100%, 820px);
  padding: 0 18px;
}

.cid-hook-card {
  padding: 18px var(--space-5);
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
  border-radius: 8px;
  margin-bottom: 14px;
}

.cid-hook-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem;
  font-weight: 800;
}

.cid-hook-card p {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  white-space: pre-wrap;
  line-height: 1.55;
}

.content-editor-panel .editor-gutter-wrapper {
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border-radius: 8px;
}

.content-editor-panel .editor-gutter {
  background: color-mix(in srgb, var(--color-bg-card) 86%, var(--color-bg-primary));
}

.content-editor-panel .guttered-textarea {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  overflow-y: hidden;
  border: 0;
  border-radius: 0;
  min-height: 420px;
  line-height: 1.65;
}

.cid-notes-placeholder {
  display: grid;
  border: 1px dashed var(--color-border-light);
  background: var(--color-bg-card);
  color: var(--color-text-muted);
  text-align: center;
  border-radius: 8px;
  place-content:  center;
  gap: 10px;
  min-height: 360px;
}

.cid-suggestion-toast {
  margin: 0 auto var(--space-3);
  padding: var(--space-2) 14px;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm, 0 1px 2px #0000000f);
  border-radius: 6px;
  width: min(100% - 44px, 1280px);
  font-size: .85rem;
}

.cid-editor-preview {
  margin: 0 auto var(--space-6);
  width: min(100% - 44px, 620px);
}

.cid-preview-tab {
  display: flex;
  align-items:  center;
  gap: var(--space-4);
  padding: var(--space-4) 0 0;
  flex-direction: column;
}

.cid-preview-tab .cid-device-toggle {
  margin-bottom: var(--space-1);
}

.content-variations-panel {
  grid-area: variations;
  background: var(--color-bg-card);
  box-shadow: none;
  border: 0;
  border-radius: 0;
  min-width: 0;
}

.content-variations-panel .card-body {
  padding: 0;
}

.content-variations-panel .variation-gen-controls {
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
}

.content-variations-panel .variation-gen-body {
  padding: var(--space-3) 14px 14px;
  border-top: 0;
}

.content-variations-panel .variation-card {
  border: 0;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  border-radius: 0;
}

.content-variations-panel .variation-card:nth-child(odd), .content-variations-panel .variation-card:nth-child(2n) {
  background: var(--color-bg-card);
}

.content-variations-panel .variation-card:first-child {
  background: var(--color-accent-light);
  box-shadow: inset 4px 0 0 var(--color-ink);
}

.content-variations-panel .variation-card-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-4) 22px var(--space-1);
  background: none;
  border-bottom: 0;
}

.variation-index-badge {
  color: var(--color-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 900;
}

.content-variations-panel .variation-hook-badge {
  color: var(--color-ink);
  font-family: var(--font-family-heading);
  background: none;
  padding: 0;
  font-size: .92rem;
  font-weight: 900;
}

.variation-line-count {
  color: var(--color-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-xs);
}

.content-variations-panel .variation-card-prompt {
  grid-column: 1 / -1;
  max-width: 100%;
}

.content-variations-panel .variation-card-body {
  padding: var(--space-1) 22px 10px;
  color: var(--color-text-secondary);
}

.content-variations-panel .variation-card-actions {
  padding: 0 22px var(--space-4);
  background: none;
  border-top: 0;
}

.cid-media-section, .cid-work-section, .cid-comments-section {
  background: var(--color-bg-card);
  border-left: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light);
}

.cid-media-section {
  border-bottom: 1px solid var(--color-border-light);
  padding: 30px;
}

.cid-section-heading {
  display: flex;
  justify-content: space-between;
  align-items:  end;
  gap: 18px;
  margin-bottom: 22px;
}

.cid-section-heading h2, .cid-work-tabs h2 {
  color: var(--color-ink);
  font-family: var(--font-family-heading);
  margin: 0;
  font-size: 1.42rem;
  line-height: 1.1;
}

.cid-section-heading p {
  color: var(--color-text-muted);
  margin-top: 6px;
}

.cid-segmented-tabs {
  display: flex;
  padding: var(--space-1);
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-secondary);
  border-radius: 8px;
  gap: 3px;
}

.cid-segmented-tabs button {
  border-radius: 6px;
  min-height: 34px;
  padding: 0 14px;
  font-size: .86rem;
}

.cid-segmented-tabs button.active {
  background: var(--color-bg-card);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.cid-media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, .9fr);
  gap: var(--space-6);
}

.cid-media-preview {
  overflow: hidden;
  min-width: 0;
}

.cid-media-image-frame {
  position: relative;
  display: grid;
  background: color-mix(in srgb, var(--color-bg-primary) 72%, var(--color-bg-card));
  place-items:  center;
  min-height: 430px;
}

.cid-media-image-frame .cid-media-delete {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.cid-media-image-frame .cid-media-delete:hover {
  background: var(--color-bg-card);
  border-color: var(--color-error);
}

.cid-media-image-frame img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 560px;
}

.cid-media-empty {
  display: grid;
  border: 1px dashed var(--color-border-light);
  color: var(--color-text-muted);
  border-radius: 8px;
  place-items:  center;
  min-height: 430px;
}

.cid-media-footer {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-4) 18px;
  border-top: 1px solid var(--color-border-light);
  color: var(--color-ink);
  text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  font-weight: 800;
}

.cid-media-link-panel {
  min-height: 430px;
  padding: 18px;
}

.cid-published-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  align-items:  end;
  margin-bottom: 18px;
  padding-bottom: 18px;
}

.cid-published-url-row label {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.cid-media-link-panel .media-add-row, .cid-inspiration-panel .media-add-row, .cid-studio-form .media-add-row {
  align-items:  center;
}

.cid-media-link-panel .media-add-row input, .cid-inspiration-panel .media-add-row input, .cid-source-add input, .cid-studio-form input {
  flex: 1;
  min-width: 0;
}

.cid-media-side {
  display: grid;
  align-content:  start;
  gap: 18px;
}

.cid-seo-card, .cid-studio-callout {
  padding: var(--space-5);
  border-radius: 8px;
}

.cid-card-topline {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-muted);
  margin-bottom: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
}

.cid-filename-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  border-radius: 8px;
}

.cid-filename-field input {
  background: var(--color-bg-secondary);
  border: 0;
  border-radius: 0;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cid-filename-field span {
  display: inline-flex;
  border-left: 1px solid var(--color-border-light);
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  align-items:  center;
  padding: 0 14px;
}

.cid-seo-card p, .cid-studio-callout p {
  color: var(--color-text-muted);
  margin: 0 0 14px;
  line-height: 1.5;
}

.cid-studio-callout {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border-light));
  background: var(--color-accent-light);
}

.cid-work-section {
  border-bottom: 1px solid var(--color-border-light);
}

.cid-work-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border-light);
  align-items:  center;
  gap: 18px;
  padding: 18px 30px 0;
}

.cid-work-tabs h2 {
  margin-right: var(--space-5);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-bottom: 18px;
  font-size: 1.05rem;
}

.cid-work-tabs button {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
  padding: 0 0 var(--space-4);
  border-bottom: 2px solid #0000;
  min-height: 44px;
}

.cid-work-tabs button.active {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

.cid-work-tabs button span {
  display: inline-flex;
  border-radius: var(--radius-full);
  background: var(--color-accent-light);
  color: var(--color-text-secondary);
  justify-content: center;
  align-items:  center;
  min-width: 24px;
  min-height: 20px;
  font-size: .74rem;
}

.cid-work-body {
  padding: 30px;
}

.cid-source-grid, .cid-reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.cid-source-card, .cid-reference-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-secondary);
  border-radius: 8px;
  min-width: 0;
}

.cid-source-card a, .cid-source-card > span {
  display: block;
  color: var(--color-ink);
  font-size: var(--font-size-base);
  text-decoration: none;
  margin: 10px 0;
  font-weight: 800;
}

.cid-source-add {
  position: relative;
  background: var(--color-bg-card);
}

.source-search-dropdown {
  position: absolute;
  z-index: var(--z-dropdown);
  overflow-y: auto;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-lg);
  border-radius: 8px;
  max-height: 240px;
  top: calc(100% - 18px);
  left: 20px;
  right: 20px;
}

.source-search-item {
  display: block;
  padding: 10px var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  background: none;
  width: 100%;
}

.cid-reference-panel.drag-over, .cid-media-preview.drag-over {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.cid-reference-card {
  display: grid;
  gap: 10px;
}

.cid-reference-card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  cursor: pointer;
  border-radius: 6px;
  width: 100%;
}

.cid-inspiration-panel, .cid-tags-panel, .cid-studio-block {
  padding: 18px var(--space-5);
  border-radius: 8px;
}

.cid-section-subheading {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 14px;
}

.cid-section-subheading .cid-eyebrow {
  color: var(--color-ink);
}

.cid-section-subheading span {
  color: var(--color-text-muted);
  font-size: .78rem;
}

.cid-studio-panel {
  max-width: none;
}

.cid-studio-block .cid-studio-panel .studio-tabs {
  display: flex;
  margin-bottom: var(--space-3);
  width: 100%;
}

.cid-studio-block .cid-studio-panel .studio-tab {
  text-align: center;
  flex: 1;
  padding: 7px 10px;
}

.cid-studio-block .cid-studio-upload-row {
  margin-bottom: 10px;
}

.cid-studio-block .cid-studio-upload-row .btn-secondary {
  flex: 1;
}

.cid-studio-block .cid-studio-form {
  gap: 10px;
  max-width: none;
}

.cid-studio-block .image-studio-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
}

.cid-tags-panel {
  display: grid;
  gap: 14px;
}

.cid-studio-panel .studio-tabs {
  display: inline-flex;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  border-radius: 8px;
}

.cid-studio-panel .studio-tab {
  border-radius: 0;
}

.cid-studio-upload-row {
  display: flex;
  margin-bottom: var(--space-4);
  align-items:  center;
  gap: 10px;
}

.cid-mini-thumb {
  object-fit: cover;
  cursor: pointer;
  border-radius: 6px;
  width: 42px;
  height: 42px;
}

.cid-studio-form {
  display: grid;
  gap: var(--space-3);
  max-width: 760px;
}

.cid-studio-form textarea {
  resize: vertical;
  width: 100%;
}

.cid-comments-section {
  border-bottom: 1px solid var(--color-border-light);
  padding: 30px;
}

.cid-comments-section .card {
  border-radius: 8px;
  max-width: 980px;
}

.cid-feedback-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  background: var(--color-bg-card);
  border-left: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  align-items:  start;
  padding: 30px;
}

.cid-feedback-grid .cid-comments-section {
  background: none;
  border: 0;
  padding: 0;
}

.cid-feedback-grid .cid-comments-section .card {
  max-width: none;
}

.cid-feedback-grid .cid-history-section {
  margin-top: 0;
}

@media (max-width: 1320px) {
  .content-idea-redesign .content-detail-layout {
    grid-template-columns: minmax(260px, 340px) minmax(430px, 1fr) minmax(290px, 340px);
  }

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

@media (max-width: 768px) {
  .app-main:has(.content-idea-redesign) {
    background-size: 64px 64px;
  }

  .content-idea-redesign {
    padding: 0 0 calc(92px + var(--safe-area-bottom));
    overflow-x: hidden;
    width: 100%;
  }

  .content-idea-redesign > .cid-topbar, .content-idea-redesign > .content-detail-layout, .content-idea-redesign > .cid-media-section, .content-idea-redesign > .cid-work-section, .content-idea-redesign > .cid-comments-section, .content-idea-redesign > .cid-feedback-grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .cid-feedback-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .cid-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-2);
    padding: var(--space-2) 10px;
    border-radius: 0;
    min-height: 58px;
  }

  .cid-breadcrumb {
    gap: 0;
    font-size: .68rem;
  }

  .cid-breadcrumb span:first-child, .cid-breadcrumb span:nth-child(2), .cid-breadcrumb span + span:before, .cid-autosave, .cid-topbar-preview, .cid-topbar-share {
    display: none;
  }

  .cid-topbar-actions {
    gap: var(--space-2);
  }

  .cid-topbar-primary {
    padding: 0 var(--space-3);
    background: var(--color-bg-card);
    color: var(--color-ink);
    min-height: 36px;
  }

  .cid-topbar-visibility {
    min-height: 36px;
    padding: 0 26px 0 10px;
    font-size: .78rem;
  }

  .cid-topbar-overflow {
    display: block;
  }

  .content-idea-redesign .content-detail-layout {
    display: block;
    border-left: 0;
    border-right: 0;
    width: 100%;
    min-width: 0;
  }

  .content-idea-redesign .content-highlights-panel {
    padding: 18px 14px;
  }

  .cid-hero-pills {
    gap: 7px;
    padding-right: 34px;
  }

  .cid-pill {
    padding: var(--space-1) 10px;
    max-width: 100%;
    min-height: 30px;
    font-size: .76rem;
  }

  .cid-hero-counts {
    width: 100%;
    margin-left: 0;
  }

  .content-idea-redesign .content-highlights-panel h1 {
    font-size: 1.9rem;
    line-height: 1.08;
  }

  .cid-context-grid {
    grid-template-columns: 1fr;
  }

  .cid-context-row, .cid-insteek-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .cid-context-row .cid-eyebrow, .cid-insteek-row .cid-eyebrow {
    padding-top: 0;
  }

  .cid-insteek-toggle, .cid-insteek-actions {
    grid-column: 1;
    flex-wrap: wrap;
  }

  .cid-insteek-aside {
    text-align: left;
    align-items:  flex-start;
  }

  .cid-insteek-toggle {
    align-items:  flex-start;
  }

  .cid-context-actions {
    flex-wrap: wrap;
    margin-left: 0;
  }

  .cid-mobile-main-tabs {
    position: sticky;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
    padding: var(--space-2);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-card);
    top: 0;
  }

  .content-ai-sparring-panel .cid-persona-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-2);
    padding-bottom: var(--space-1);
    -webkit-overflow-scrolling: touch;
    flex-flow: row;
  }

  .content-ai-sparring-panel .cid-persona-card {
    scroll-snap-align: start;
    flex: none;
    min-width: 0;
  }

  .cid-mobile-main-tabs button {
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-radius: 8px;
    min-width: 0;
    min-height: 38px;
    font-weight: 800;
  }

  .cid-mobile-main-tabs button.active {
    background: var(--color-ink);
    color: var(--color-text-inverse);
  }

  .content-ai-sparring-panel, .content-editor-panel, .content-variations-panel {
    display: none;
    border-right: 0;
    min-height: auto;
  }

  .content-ai-sparring-panel.is-mobile-active, .content-editor-panel.is-mobile-active, .content-variations-panel.is-mobile-active {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
  }

  .content-ai-sparring-panel {
    max-height: none;
  }

  .cid-sparring-messages {
    position: static;
    overflow: visible;
    flex: 0 auto;
    min-height: 0;
  }

  .cid-sparring-scroll {
    position: static;
    max-height: 58vh;
    inset: auto;
  }

  .cid-editor-tabs {
    overflow-x: auto;
    padding: 10px;
  }

  .cid-editor-tabs button {
    flex: none;
  }

  .cid-editor-toolbar {
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: 10px;
  }

  .cid-editor-toolbar .rich-text-toolbar {
    flex: 100%;
    order: 3;
    gap: 6px;
    width: 100%;
    margin-left: 0;
  }

  .rich-text-btn, .rich-text-emoji, .rich-text-symbol {
    min-width: 44px;
    height: 44px;
  }

  .cid-editor-toolbar .cid-char-count {
    margin-left: 0;
  }

  .cid-editor-stage, .cid-editor-preview {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    padding-right: 10px;
  }

  .cid-hook-header {
    flex-direction: column;
    align-items:  flex-start;
  }

  .content-editor-panel .guttered-textarea {
    min-height: 360px;
    font-size: .95rem;
  }

  .content-variations-panel .variation-card-header, .content-variations-panel .variation-card-body, .content-variations-panel .variation-card-actions {
    padding-left: 14px;
    padding-right: 14px;
  }

  .cid-media-section, .cid-work-section, .cid-comments-section {
    border-left: 0;
    border-right: 0;
  }

  .cid-media-section, .cid-work-body, .cid-comments-section {
    padding: 18px var(--space-3);
  }

  .cid-section-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .cid-segmented-tabs {
    overflow-x: auto;
  }

  .cid-segmented-tabs button {
    flex: none;
  }

  .cid-media-grid, .cid-source-grid, .cid-reference-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cid-media-image-frame, .cid-media-empty, .cid-media-link-panel {
    min-height: 280px;
  }

  .cid-media-footer {
    flex-direction: column;
    align-items:  flex-start;
  }

  .cid-work-tabs {
    overflow-x: hidden;
    gap: var(--space-2) 14px;
    padding: 14px var(--space-3) 0;
    flex-wrap: wrap;
  }

  .cid-work-tabs button {
    white-space: nowrap;
    flex: 0 auto;
    min-width: 0;
  }

  .source-search-dropdown {
    left: 12px;
    right: 12px;
  }

  html.nav-vine .content-idea-redesign {
    padding-bottom: calc(162px + var(--safe-area-bottom));
  }
}

@media (max-width: 480px) {
  .content-idea-redesign .content-highlights-panel h1 {
    font-size: 1.68rem;
  }

  .cid-topbar-primary span {
    display: none;
  }

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

.meeting-mobile-meta {
  display: none;
}

@media (max-width: 1100px) {
  .meetings-list .page-header {
    margin-bottom: var(--space-3);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0;
  }

  .meetings-list .page-header h1 {
    display: block;
    font-size: 1.4rem;
  }

  .meetings-list .header-actions {
    display: flex;
    gap: var(--space-2);
    width: 100%;
  }

  .meetings-list .header-actions > button {
    flex: 1 1 0;
    justify-content: center;
  }

  .meetings-list .summary-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  .meetings-list .summary-card {
    padding: 10px var(--space-3);
  }

  .meetings-list .summary-card h3 {
    font-size: .58rem;
  }

  .meetings-list .summary-card p {
    font-size: 1.3rem;
  }

  .meetings-list .meetings-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .meetings-list .meetings-toolbar h2 {
    font-size: var(--font-size-base);
    white-space: normal;
  }

  .meetings-list .meetings-filters {
    gap: var(--space-2);
    width: 100%;
  }

  .meetings-list .meetings-filters .search-input {
    flex: 100%;
    width: 100%;
    min-width: 0;
  }

  .meetings-list .meetings-filters .filter-select {
    flex: calc(50% - 4px);
    min-width: 0;
  }

  .meetings-list .meetings-filters .share-filter-summary {
    width: 100%;
  }

  .meetings-list .table-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    overflow: hidden;
    border-radius: 0;
    padding: 0;
  }

  .meetings-list .table-card table, .meetings-list .table-card tbody, .meetings-list .table-card tr, .meetings-list .table-card td {
    display: block;
  }

  .meetings-list .table-card thead {
    display: none;
  }

  .meetings-list .table-card .col-hide-mobile, .meetings-list .table-card .meeting-date-cell {
    display: none !important;
  }

  .meetings-list .table-card tr.clickable-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: var(--space-3);
    padding: var(--space-3) 14px;
    border-bottom: 1px solid var(--color-border-light);
    align-items:  center;
    row-gap: 3px;
  }

  .meetings-list .table-card tr.clickable-row:last-child {
    border-bottom: 0;
  }

  .meetings-list .table-card tr.clickable-row > td:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self:  center;
    height: auto;
    padding: 0;
  }

  .meetings-list .table-card tr.clickable-row > td:first-child input {
    width: 18px;
    height: 18px;
  }

  .meetings-list .meeting-title-cell {
    grid-column: 2;
    grid-row: 1;
    overflow-wrap: anywhere;
    min-width: 0;
    padding: 0;
    line-height: 1.3;
  }

  .meetings-list .meeting-title-cell strong {
    font-size: .95rem;
    font-weight: 600;
  }

  .meetings-list .meeting-title-cell .enrichment-chip {
    margin-left: 0;
  }

  .meetings-list .meeting-mobile-meta {
    display: block;
    grid-column: 2;
    grid-row: 2;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    padding: 0;
    font-size: .78rem;
  }

  .meetings-list .meeting-actions-cell {
    grid-column: 3;
    grid-row: 1 / span 2;
    text-align: right;
    align-self:  center;
    padding: 0;
  }
}

.history-btn {
  display: inline-flex;
  color: var(--color-text-muted);
  justify-content: center;
  align-items:  center;
}

.history-btn:hover {
  color: var(--color-accent);
}

.hook-formula-actions, .settings-rule-actions {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-1);
}

.history-drawer {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  display: flex;
  animation: modalSlideIn .25s cubic-bezier(.16, 1, .3, 1);
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 640px;
  max-height: 85vh;
  box-shadow: 0 24px 48px #1a23322e;
}

.history-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.history-drawer-eyebrow {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.history-drawer-title {
  font-size: var(--font-size-lg);
  word-break: break-word;
  margin: .2rem 0 0;
}

.history-drawer-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  overflow-y: auto;
  min-width: 0;
}

.history-list {
  list-style: none;
  display: flex;
  gap: var(--space-4);
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.history-item {
  border-left: 2px solid var(--color-border-light);
  padding-left: var(--space-3);
  min-width: 0;
}

.history-item-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.history-action {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  text-transform: lowercase;
}

.history-action-delete {
  color: var(--color-red);
  background: #c0392b1f;
}

.history-action-create {
  color: var(--color-success);
  background: #27ae6024;
}

.history-actor {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.history-stamp {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.history-changes {
  list-style: none;
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.history-change {
  min-width: 0;
}

.history-change-field {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.history-change-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  min-width: 0;
}

.history-change-side {
  min-width: 0;
}

.history-change-tag {
  display: block;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
  font-size: .7rem;
}

.history-change-val {
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-light);
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow-y: auto;
  max-height: 220px;
  margin: 0;
  font-family: inherit;
}

.history-change-none {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

@media (max-width: 480px) {
  .history-change-diff {
    grid-template-columns: 1fr;
  }
}

.history-change-val .diff-del {
  color: var(--color-red);
  text-decoration: line-through;
  background: #c0392b2e;
  border-radius: 2px;
  padding: 0 1px;
}

.history-change-val .diff-ins {
  color: var(--color-success);
  background: #27ae6038;
  border-radius: 2px;
  padding: 0 1px;
}

.cid-media-library-row {
  display: flex;
  margin: var(--space-1) 0 var(--space-3);
  justify-content: flex-end;
}

.cid-media-source-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
  white-space: nowrap;
  font-size: .72rem;
}

.cid-media-image-frame .cid-media-source-badge {
  position: absolute;
  top: 6px;
  left: 6px;
}

.cid-library-modal {
  width: 100%;
  max-width: 520px;
}

.cid-library-list {
  display: flex;
  overflow-y: auto;
  margin: var(--space-3) 0;
  flex-direction: column;
  gap: 6px;
  max-height: 44vh;
}

.cid-library-option {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-2) 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-card);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.cid-library-option:hover:not(:disabled) {
  border-color: var(--color-accent);
}

.cid-library-option.linked, .cid-library-option:disabled {
  opacity: .55;
  cursor: default;
}

.cid-library-thumb {
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.cid-library-thumb.placeholder {
  display: flex;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
  justify-content: center;
  align-items:  center;
  font-size: .68rem;
}

.cid-library-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cid-library-option-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.cid-library-option-meta {
  color: var(--color-text-muted);
  font-size: .78rem;
}

.admin-home, .ghost-home {
  display: grid;
  gap: var(--space-5);
}

.home-calendar {
  overflow: hidden;
}

.home-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.home-calendar-day {
  padding: var(--space-2);
  border-block-start: 1px solid var(--color-border-light);
  border-inline-end: 1px solid var(--color-border-light);
  min-width: 0;
  min-height: 9rem;
}

.home-calendar-day.other-month {
  opacity: .55;
}

.home-calendar-day.today {
  background: var(--color-accent-light);
}

.home-calendar-day.today > time {
  color: var(--color-accent);
}

.home-calendar-day > time {
  display: block;
  margin-block-end: var(--space-2);
  font-weight: 700;
}

.home-calendar-day-tiles {
  display: grid;
  gap: var(--space-1);
}

.home-calendar-tile {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  text-decoration: none;
  min-width: 0;
}

.home-calendar-tile.openable {
  cursor: pointer;
  border-color: var(--color-accent);
}

.home-calendar-tile.inert {
  cursor: default;
  color: var(--color-text-muted);
  border-style: dashed;
}

.home-calendar-thumbnail {
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  flex: none;
  block-size: 2rem;
  inline-size: 2rem;
}

.home-calendar-tile-copy {
  min-width: 0;
}

.home-calendar-tile-copy strong, .home-calendar-tile-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-calendar-more {
  color: var(--color-accent);
  cursor: pointer;
  background: none;
  border: 0;
  margin-block-start: var(--space-1);
}

.home-calendar-title-group {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-3);
  min-width: 0;
}

.home-calendar-title-group h2 {
  margin: 0;
}

.admin-stats {
  overflow: hidden;
}

.admin-stats-toggle {
  margin-block-start: var(--space-3);
}

@media (max-width: 640px) {
  .home-calendar-grid {
    display: block;
  }

  .home-calendar-grid > .calendar-day-header {
    display: none;
  }

  .home-calendar-day.other-month:has(.home-calendar-day-tiles:empty) {
    display: none;
  }

  .home-calendar-day {
    border-inline-end: 0;
    min-height: 0;
  }

  .home-calendar-day > time {
    font-size: var(--font-size-sm);
  }

  .home-calendar-thumbnail {
    block-size: 3rem;
    inline-size: 3rem;
  }
}

.admin-control-list {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  margin-block-start: var(--space-3);
}

.admin-control-row {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  min-width: 0;
}

.admin-control-row > * {
  min-width: 0;
}

.admin-control-row strong {
  display: block;
}

.admin-control-row p {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-light);
  font-size: var(--font-size-sm);
}

.admin-control-row > label {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
}

.admin-control-row .form-input {
  flex: none;
  width: auto;
  min-width: 15rem;
  max-width: 100%;
}

.admin-control-list > .admin-control-row:not(.card) {
  border-block-end: 1px solid var(--color-border-light);
}

.admin-control-list > .admin-control-row:not(.card):last-child {
  border-block-end: 0;
}

@media (max-width: 640px) {
  .admin-control-row {
    align-items: stretch;
    gap: var(--space-3);
    flex-direction: column;
  }

  .admin-control-row .form-input {
    width: 100%;
    min-width: 0;
  }
}

/* frontend/styles/layout.css */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-main {
  background: var(--color-bg-secondary);
  padding: 96px var(--space-10) var(--space-8) var(--space-10);
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: 1400px;
  margin: 0 auto;
}

.top-bar {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  padding: 0 var(--space-10) 0 88px;
  background: var(--color-bg-secondary);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-grid-major);
  z-index: var(--z-dropdown);
  height: 72px;
  top: 0;
  left: 0;
  right: 0;
}

.top-brand {
  display: flex;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  align-items:  center;
}

.top-brand:hover {
  opacity: .8;
}

.app-brand-lockup {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-3);
  min-width: 0;
}

.app-brand-icon {
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-brand);
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 40px;
  height: 40px;
}

.app-brand-icon img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.app-brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-brand-name {
  font-family: var(--font-family-heading);
  letter-spacing: -.02em;
  color: var(--color-accent);
  white-space: nowrap;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
}

.app-brand-subtitle {
  font-family: var(--font-family-heading);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-top: 1px;
  font-size: .7rem;
  font-weight: 400;
}

.top-user {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.top-user:hover {
  opacity: .8;
}

.classic-user-controls {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.classic-environment-switch {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-ink-mid);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  min-height: 36px;
  transition: background .15s, border-color .15s, color .15s;
  font-weight: 600;
  line-height: 1.2;
}

.classic-environment-switch:hover {
  border-color: var(--color-ink-faint);
  background: var(--color-subtle-bg);
  color: var(--color-ink);
}

.classic-environment-switch svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
}

.top-logout-btn {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-ink-mid);
  cursor: pointer;
  background: none;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 36px;
  height: 36px;
  padding: 0;
  transition: background .15s, border-color .15s, color .15s;
}

.top-logout-btn:hover {
  border-color: var(--color-red);
  color: var(--color-red);
  background: color-mix(in srgb, var(--color-red) 6%, transparent);
}

.top-logout-btn:focus-visible {
  border-color: var(--color-red);
  color: var(--color-red);
  background: color-mix(in srgb, var(--color-red) 6%, transparent);
}

.top-logout-btn svg {
  flex-shrink: 0;
}

.brain-switcher {
  position: relative;
  display: flex;
  align-items:  center;
  gap: var(--space-1);
  flex-shrink: 0;
  min-width: 0;
}

.brain-switcher-trigger {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
  max-width: 220px;
  min-height: 36px;
}

.brain-switcher-trigger:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.brain-switcher-trigger:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.brain-switcher-current {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  min-width: 0;
}

.brain-switcher-name, .brain-context-marker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brain-switcher-name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.brain-switcher-chevron {
  flex-shrink: 0;
}

.brain-switcher-ghost-marker, .brain-switcher-company-marker {
  border-radius: var(--radius-full);
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
  padding: 2px 6px;
  font-weight: 700;
  line-height: 1.25;
}

.brain-switcher-company-marker {
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  color: var(--color-success);
}

.brain-switcher-own-marker {
  border-radius: var(--radius-full);
  background: var(--color-subtle-border);
  color: var(--color-ink-mid);
  font-size: var(--font-size-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 2px 6px;
  font-weight: 700;
  line-height: 1.25;
}

.brain-context-marker {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  color: var(--color-ink-mid);
  font-size: var(--font-size-xs);
  min-width: 0;
  max-width: 220px;
}

.brain-switcher-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  z-index: var(--z-drawer);
  display: flex;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-direction: column;
  width: min(280px, 100vw - 32px);
  max-width: calc(100vw - 32px);
  max-height: min(60vh, 100dvh - 96px);
  right: 0;
}

.brain-switcher-option {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  width: 100%;
}

.brain-switcher-option:hover, .brain-switcher-option.active {
  background: var(--color-accent-light);
}

.brain-switcher-option:focus-visible {
  background: var(--color-accent-light);
}

.brain-switcher-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.brain-switcher-option-relation {
  color: var(--color-ink-light);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}

.top-bar > .brain-switcher, .top-bar > .brain-context-marker {
  margin-left: var(--space-3);
}

.top-user-info {
  display: flex;
  flex-direction: column;
  align-items:  flex-end;
  gap: 1px;
}

.top-user-name {
  font-size: var(--font-size-sm);
  color: var(--color-ink);
  font-weight: 500;
  line-height: 1.2;
}

.top-user-role {
  font-size: var(--font-size-xs);
  color: var(--color-ink-light);
  line-height: 1.2;
}

.top-user-stamp {
  border-radius: var(--radius-full);
  border: 2px solid var(--color-ink);
  display: flex;
  overflow: hidden;
  background: var(--color-bg-card);
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 36px;
  height: 36px;
}

.mobile-dropdown {
  display: none;
  position: fixed;
  align-items:  center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--color-bg-secondary);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-grid-major);
  z-index: var(--z-dropdown);
  height: 56px;
  top: 0;
  left: 0;
  right: 0;
}

.mobile-menu-btn {
  border: 2px solid var(--color-ink);
  background: var(--color-bg-card);
  color: var(--color-ink);
  display: flex;
  cursor: pointer;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 40px;
  height: 40px;
  padding: 0;
  transition: background .15s, color .15s;
}

.mobile-menu-btn:hover {
  background: var(--color-ink);
  color: var(--color-bg-card);
}

.mobile-brand-text {
  display: inline-flex;
  font-family: var(--font-family-heading);
  color: var(--color-ink);
  letter-spacing: .02em;
  text-decoration: none;
  align-items:  center;
  gap: 9px;
  font-size: 1.05rem;
  font-weight: 700;
}

.mobile-dropdown > .brain-context-marker {
  max-width: min(24vw, 150px);
  margin-left: auto;
  padding-right: 0;
}

.mobile-dropdown .brain-context-marker-name {
  max-width: 110px;
}

.mobile-brand-logo {
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.classic-mobile-user {
  display: flex;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
}

.classic-mobile-avatar-stamp {
  width: 34px;
  height: 34px;
}

.page-container, .knowledge-content, .sync-content, .dashboard-page {
  width: 100%;
  min-width: 0;
}

.knowledge-content, .sync-content, .dashboard-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.page-header-nav {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items:  center;
}

.page-header-divider {
  background: var(--color-border);
  width: 1px;
  height: 24px;
}

.page-header h1 {
  letter-spacing: -.02em;
  margin: 0 0 .3rem;
}

.page-header p {
  color: var(--color-text-secondary);
  margin: 0;
}

.dashboard-page > *, .stats-grid > * {
  min-width: 0;
}

.dashboard-header {
  margin-bottom: var(--space-2);
}

.dashboard-header h1 {
  letter-spacing: -.02em;
  margin: 0 0 .3rem;
}

.dashboard-header p {
  color: var(--color-text-secondary);
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}

.dashboard-viewall {
  font-size: .8rem;
}

.dashboard-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: .85rem;
}

.dashboard-page .card-header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  text-transform: none;
  letter-spacing: normal;
}

.dashboard-page .card-header h2 {
  font-size: var(--font-size-lg);
  letter-spacing: -.01em;
  margin: 0;
}

.route-notfound-alert {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.route-notfound-close {
  color: inherit;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
  padding: 0;
}

.stat-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-card:before {
  content: "";
  position: absolute;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
  opacity: .5;
  height: 3px;
  top: 0;
  left: 0;
  right: 0;
}

.stat-icon {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  line-height: 1;
}

.stat-icon svg {
  width: 22px;
  height: 22px;
}

.stat-value {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  line-height: 1.1;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.stat-sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.dashboard-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.dashboard-link-card {
  background: var(--color-bg-card);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.dashboard-link-card:before {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
  opacity: .5;
  height: 3px;
  top: 0;
  left: 0;
  right: 0;
}

.dashboard-link-card:hover {
  box-shadow: var(--shadow-md);
  color: var(--color-text-primary);
  border-color: var(--color-accent-dark);
  transform: translateY(-2px);
}

.dashboard-link-card h3 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-lg);
}

.dashboard-link-card p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.recent-activity-card {
  padding: 0;
}

.recent-activity-card .card-inner h2 {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-lg);
}

.activity-list {
  display: grid;
  gap: 0;
}

.activity-item {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-sm);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-type-icon {
  color: var(--color-text-muted);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 20px;
  height: 20px;
}

.activity-type-icon svg {
  width: 16px;
  height: 16px;
}

.activity-title {
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.activity-date {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}

.profile-content {
  display: grid;
  gap: var(--space-6);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.profile-content > * {
  min-width: 0;
  max-width: 100%;
}

.card-inner {
  padding: var(--space-6);
}

.card-description {
  margin: .3rem 0 var(--space-4) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.card-inner h2 {
  font-size: var(--font-size-xl);
  letter-spacing: -.01em;
  margin: 0;
}

.field-row {
  display: flex;
  gap: var(--space-3);
  align-items:  flex-start;
}

.field-input-wrapper {
  position: relative;
  flex: 1;
}

.field-input-wrapper .form-input {
  padding-right: 5rem;
}

.toggle-visibility {
  position: absolute;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  background: none;
  border: none;
  top: 50%;
  right: .75rem;
  transform: translateY(-50%);
}

.field-feedback {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.key-reveal {
  display: grid;
  gap: var(--space-3);
}

.key-warning {
  padding: var(--space-3) var(--space-4);
  color: var(--color-warning);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  background: #f39c121f;
  border: 1px solid #f39c124d;
  border-radius: 0;
}

.key-display {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0;
}

.key-display code {
  font-family: SF Mono, Fira Code, Menlo, Consolas, monospace;
  font-size: var(--font-size-sm);
  word-break: break-all;
  color: var(--color-text-primary);
  flex: 1;
}

.copy-btn {
  border: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  padding: .35rem var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  border-radius: 0;
}

.copy-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.key-existing {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-4);
}

.key-masked {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
}

.key-masked code {
  font-family: SF Mono, Fira Code, Menlo, Consolas, monospace;
  font-size: var(--font-size-sm);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-radius: 0;
  padding: .3rem .6rem;
}

.key-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.config-block {
  position: relative;
}

.config-block pre {
  background: var(--color-ink);
  color: var(--color-code-text);
  padding: var(--space-5);
  overflow-x: auto;
  font-family: SF Mono, Fira Code, Menlo, Consolas, monospace;
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: 0;
  margin: 0;
  line-height: 1.7;
}

.config-copy {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  color: var(--color-code-text);
  background: #ffffff14;
  border-color: #ffffff26;
}

.config-copy:hover {
  color: #fff;
  background: #ffffff26;
}

.meeting-summary-cell {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  max-width: 280px;
}

.meetings-toolbar {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.meetings-toolbar h2 {
  white-space: nowrap;
  margin: 0;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-light);
}

.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  min-width: 120px;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.card-header-row h2 {
  margin: 0;
}

.browse-actions {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.select-all {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.select-all input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--color-accent);
}

.row-selected {
  background: var(--color-accent-light) !important;
}

.sync-toggle-stack {
  display: flex;
  align-items:  flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-direction: column;
}

.sync-visibility {
  display: inline-flex;
  justify-self: start;
  width: max-content;
  max-width: 100%;
}

.sync-filters {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  flex-wrap: wrap;
  align-items:  flex-end;
}

.sync-filter-group {
  display: flex;
  gap: var(--space-1);
  flex-direction: column;
}

.sync-filter-group label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.sync-filter-group input[type="date"], .sync-filter-group select {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.sync-filter-group input[type="date"]:focus, .sync-filter-group select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.sync-search-group {
  flex: 1;
  min-width: 200px;
}

.sync-search-group input[type="text"] {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast);
  border-radius: 0;
  width: 100%;
}

.sync-search-group input[type="text"]:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.sync-search-group input[type="text"]::placeholder {
  color: var(--color-text-muted);
}

.row-imported {
  opacity: .4;
}

.row-imported td {
  cursor: default !important;
}

.row-imported .imported-title {
  text-decoration: line-through;
}

.imported-badge {
  margin-left: var(--space-2);
}

.sync-settings {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.sync-settings-block {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.sync-settings-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.alias-chips .chip {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: .78rem;
}

.sync-scope-select {
  white-space: nowrap;
  max-width: 260px;
}

.sync-info {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.sync-info-row {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.sync-info-label {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  min-width: 100px;
}

.text-error {
  color: var(--color-error);
}

.sync-col-select {
  width: 40px;
}

tr.sync-row-selectable {
  cursor: pointer;
}

tr.row-imported {
  cursor: default;
}

.sync-progress-bar {
  margin-top: var(--space-4);
  background: var(--color-bg-tertiary);
  overflow: hidden;
  border-radius: 0;
  height: 4px;
}

.sync-progress-bar-inner {
  background: var(--color-accent);
  animation: progressSlide 1.5s ease-in-out infinite;
  border-radius: 0;
  width: 30%;
  height: 100%;
}

@keyframes progressSlide {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(400%);
  }
}

@media (max-width: 768px) {
  .top-bar {
    display: none;
  }

  .mobile-dropdown {
    display: flex;
  }

  .app-main {
    padding: 62px var(--space-2) var(--space-4) var(--space-2);
  }

  .card-body {
    padding: var(--space-3);
  }

  .card-header {
    padding: 10px var(--space-3);
  }

  .card-inner {
    padding: var(--space-3);
  }

  .mobile-menu-btn {
    border-width: 1.5px;
    width: 44px;
    height: 44px;
  }

  .mobile-menu-btn svg {
    width: 20px;
    height: 20px;
  }

  .mobile-dropdown {
    gap: var(--space-2);
    height: 48px;
    padding: 0 10px;
  }

  .page-header {
    gap: var(--space-2);
    flex-direction: column;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .stat-card {
    padding: var(--space-3) var(--space-4);
  }

  .dashboard-page {
    gap: var(--space-3);
  }

  .dashboard-header h1 {
    font-size: var(--font-size-xl);
    word-break: break-word;
  }

  .field-row {
    flex-direction: column;
  }

  .key-existing {
    flex-direction: column;
    align-items:  flex-start;
  }

  .card-header-row {
    flex-direction: column;
  }

  .browse-actions {
    flex-direction: column;
    align-items:  flex-start;
  }

  .sync-visibility {
    flex-wrap: wrap;
  }

  .sync-visibility .view-toggle-btn {
    font-size: var(--font-size-xs);
    padding: var(--space-2) var(--space-3);
  }

  .sync-filters {
    flex-direction: column;
  }

  .sync-search-group {
    width: 100%;
    min-width: 0;
  }

  .dashboard-links {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-link-card {
    padding: var(--space-3) var(--space-4);
  }

  .dashboard-link-card p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .activity-item {
    gap: var(--space-2);
  }

  .pagination {
    padding: var(--space-3);
    flex-wrap: wrap;
  }

  .pagination-info {
    min-width: auto;
  }

  .col-hide-mobile, .col-hide-phone {
    display: none;
  }

  table {
    font-size: .85rem;
  }

  thead th, tbody td {
    padding: .6rem .4rem;
  }

  .clickable-row td {
    vertical-align: middle;
  }
}

html.nav-classic .top-bar {
  padding-left: var(--space-10);
}

html.nav-classic .app-main:has(.content-idea-redesign) {
  padding-top: 72px;
}

.classic-nav {
  display: flex;
  margin-left: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
  flex: 1;
  align-items:  center;
  gap: 0;
  min-width: 0;
}

.classic-nav::-webkit-scrollbar {
  display: none;
}

.classic-nav-link {
  font-family: var(--font-family-heading);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-ink-light);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 10px;
  transition: color .15s;
  font-size: .68rem;
  font-weight: 600;
}

.classic-nav-link:hover {
  color: var(--color-ink);
}

.classic-nav-link.active {
  color: var(--color-ink);
  border-bottom: 2px solid var(--color-red);
}

.classic-mobile-drawer {
  display: none;
  position: fixed;
  background: var(--color-bg-secondary);
  backdrop-filter: blur(8px);
  z-index: var(--z-drawer);
  padding: var(--space-2) var(--space-3);
  overflow-y: auto;
  inset: 56px 0 0;
}

.brain-no-access {
  display: grid;
  padding: var(--space-6);
  place-items:  center;
  min-height: 100vh;
}

.brain-no-access-card {
  padding: var(--space-8);
  text-align: center;
  width: min(100%, 520px);
}

.brain-no-access-card h1 {
  margin-bottom: var(--space-3);
}

.brain-no-access-card p {
  color: var(--color-ink-light);
}

.brain-no-access-exit {
  margin-top: var(--space-5);
}

.brain-no-access-error {
  margin-top: var(--space-3);
  color: var(--color-error);
}

.classic-mobile-drawer.open {
  display: block;
}

.classic-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.classic-mobile-list > .brain-switcher, .classic-mobile-list > .brain-context-marker {
  margin: var(--space-1) var(--space-2) var(--space-2);
}

.classic-mobile-list > .brain-switcher {
  flex-direction: column;
}

.classic-mobile-list .brain-switcher-trigger {
  width: 100%;
  max-width: none;
}

.classic-mobile-list .brain-context-marker {
  max-width: none;
}

.classic-mobile-list .brain-switcher-menu {
  position: static;
  margin-top: var(--space-1);
  width: 100%;
}

.classic-mobile-link {
  display: flex;
  font-family: var(--font-family-heading);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-ink-mid);
  text-decoration: none;
  border-left: 3px solid #0000;
  align-items:  center;
  gap: 10px;
  padding: 10px 14px;
  transition: all .15s;
  font-size: .78rem;
  font-weight: 600;
}

.classic-mobile-link:hover {
  background: var(--color-subtle-bg);
  color: var(--color-ink);
}

.classic-mobile-link.active {
  color: var(--color-ink);
  border-left-color: var(--color-red);
  background: var(--color-accent-light);
}

.classic-mobile-link svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.classic-mobile-section {
  padding: 10px 14px var(--space-1);
  font-family: var(--font-family-heading);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-ink-faint);
  font-size: .58rem;
  font-weight: 700;
}

.classic-mobile-section:first-child {
  padding-top: var(--space-1);
}

.classic-mobile-logout {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-light);
}

.classic-mobile-utility {
  margin-top: var(--space-2);
  padding-top: calc(10px + var(--space-2));
  border-top: 1px solid var(--color-border-light);
}

.classic-mobile-logout .classic-mobile-link {
  color: var(--color-red);
}

.classic-mobile-logout button.classic-mobile-link {
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  font-family: inherit;
}

.classic-mobile-logout .classic-mobile-link:hover {
  background: #c0392b0f;
}

html.nav-classic .vine-nav, html.nav-classic .vine-mobile-bar, html.nav-classic .vine-mobile-header, html.nav-vine .classic-nav {
  display: none;
}

@media (max-width: 1330px) and (min-width: 1101px) {
  html.nav-classic .top-user-info {
    display: none;
  }

  html.nav-classic .classic-nav-link {
    padding: 6px 7px;
  }

  html.nav-classic .classic-nav {
    margin-left: var(--space-4);
  }
}

@media (max-width: 1100px) {
  html.nav-classic .classic-nav, html.nav-classic .top-bar {
    display: none;
  }

  html.nav-classic .mobile-dropdown {
    display: flex;
  }

  html.nav-classic .app-main {
    padding-top: 72px;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-card {
    padding: var(--space-3) var(--space-4);
  }

  .dashboard-header h1 {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .col-hide-phone {
    display: none;
  }
}

/* frontend/styles/utilities.css */
.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
}

.text-center {
  text-align: center;
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-muted {
  color: var(--color-text-muted);
}

.mb-3 {
  margin-bottom: var(--space-3);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-6 {
  margin-bottom: var(--space-6);
}

.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-2 {
  margin-top: var(--space-2);
}

.mt-6 {
  margin-top: var(--space-6);
}

.mb-5 {
  margin-bottom: var(--space-5);
}

.flex-1 {
  flex: 1;
}

.pre-wrap {
  white-space: pre-wrap;
}

.hidden {
  display: none;
}

.th-sortable {
  cursor: pointer;
  user-select: none;
}

.sort-arrow {
  margin-left: var(--space-1);
  opacity: .7;
}

.link-plain {
  text-decoration: none;
  color: inherit;
}

.app-error-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.show-on-mobile {
  display: none;
}

@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }

  .show-on-mobile {
    display: inline;
  }
}

/* frontend/styles/settings.css */
.settings-shell {
  display: flex;
  align-items:  flex-start;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-4) 64px;
  box-sizing: border-box;
  flex-direction: row;
  width: 100%;
  min-width: 0;
}

.settings-sidebar {
  position: sticky;
  top: var(--space-4);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  flex: 0 0 240px;
  align-self:  flex-start;
  min-width: 0;
}

.settings-sidebar-header {
  padding: var(--space-1) var(--space-2) var(--space-3);
}

.settings-sidebar-header h1 {
  color: var(--color-text-primary);
  margin: 0;
  font-weight: 600;
}

.settings-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-sidebar-group-heading {
  margin: var(--space-4) var(--space-3) var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.settings-sidebar-nav > .settings-sidebar-group-heading:first-child {
  margin-top: var(--space-2);
}

.settings-visibility-note {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.nav-settings-icon {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
}

.classic-mobile-user, .vine-mobile-user {
  align-items:  center;
  gap: var(--space-2);
}

.vine-mobile-user {
  display: inline-flex;
}

.settings-sidebar-link {
  display: flex;
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  text-decoration: none;
  align-items:  flex-start;
  gap: 10px;
  min-width: 0;
  transition: background .12s, color .12s;
  font-size: .9rem;
  font-weight: 500;
}

.settings-sidebar-link:hover {
  background: var(--color-accent-light);
}

.settings-sidebar-link.active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.settings-sidebar-link.active .settings-sidebar-icon {
  color: var(--color-text-inverse);
}

.settings-sidebar-icon {
  display: inline-flex;
  color: var(--color-text-secondary);
  flex: 0 0 22px;
  margin-top: 1px;
}

.settings-sidebar-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.settings-sidebar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.settings-sidebar-desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  -webkit-box-orient: vertical;
  min-width: 0;
  font-weight: 400;
  line-height: 1.35;
}

.settings-sidebar-link.active .settings-sidebar-desc {
  color: var(--color-text-inverse);
  opacity: .85;
}

.settings-content {
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: 960px;
}

.settings-section {
  display: flex;
  gap: var(--space-4);
  flex-direction: column;
  min-width: 0;
}

.settings-section-header h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
  font-weight: 600;
}

.settings-section-header p {
  margin: 0 0 var(--space-2);
  color: var(--color-text-secondary);
  font-size: .85rem;
  line-height: 1.5;
}

.settings-index {
  padding: var(--space-3) var(--space-3) 64px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.settings-index-header {
  padding: var(--space-1) var(--space-1) var(--space-4);
}

.settings-index-header h1 {
  margin: 0 0 var(--space-1);
  color: var(--color-text-primary);
  font-weight: 600;
}

.settings-index-header p {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: .85rem;
}

.settings-index-list {
  list-style: none;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.settings-index-group-heading {
  padding: var(--space-3) var(--space-4) var(--space-2);
  background: var(--color-bg-tertiary);
  border-top: 1px solid var(--color-border-light);
  margin: 0;
}

.settings-index-group-heading:first-child {
  border-top: 0;
}

.settings-index-group-heading h2 {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin: 0;
}

.settings-index-row {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text-primary);
  border-bottom: 1px solid #0500340f;
  min-width: 0;
  min-height: 56px;
  padding: 14px;
}

.settings-index-list li:last-child .settings-index-row {
  border-bottom: none;
}

.settings-index-row:active {
  background: var(--color-accent-light);
}

.settings-index-icon {
  color: var(--color-accent);
  display: inline-flex;
  flex: 0 0 22px;
}

.settings-index-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.settings-index-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .95rem;
  font-weight: 500;
}

.settings-index-desc {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
}

.settings-index-chevron {
  color: var(--color-text-muted, #aaa);
  display: inline-flex;
  flex: 0 0 18px;
}

@media (max-width: 768px) {
  .settings-shell {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .settings-sidebar {
    display: none;
  }

  .settings-content {
    padding: var(--space-3) var(--space-3) 64px;
    max-width: 100%;
  }
}

.settings-shell, .settings-content, .settings-section, .settings-index {
  overflow-x: hidden;
}

.settings-ghostwriters-page {
  width: 100%;
  min-width: 0;
}

.settings-ghostwriter-appoint .card-inner {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

.settings-ghostwriter-appoint h3, .settings-ghostwriter-list-section h3 {
  margin: 0;
}

.settings-ghostwriter-form-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 200px) auto;
  gap: var(--space-3);
  align-items:  end;
  min-width: 0;
}

.settings-ghostwriter-form-fields label, .settings-ghostwriter-list-section {
  min-width: 0;
}

.settings-ghostwriter-state {
  margin: var(--space-3) 0 0;
  color: var(--color-text-secondary);
}

.settings-ghostwriter-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
  min-width: 0;
  padding: 0;
}

.settings-ghostwriter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 200px) auto;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  align-items:  end;
  min-width: 0;
}

.settings-ghostwriter-row.is-inactive {
  background: var(--color-bg-tertiary);
}

.settings-ghostwriter-identity, .settings-ghostwriter-level, .settings-ghostwriter-actions {
  min-width: 0;
}

.settings-ghostwriter-identity {
  display: flex;
  gap: var(--space-1);
  flex-direction: column;
}

.settings-ghostwriter-name {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.settings-ghostwriter-email {
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.settings-ghostwriter-actions {
  display: flex;
  justify-content: flex-end;
  align-items:  center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.settings-ghostwriter-confirm-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-align: right;
  flex-basis: 100%;
}

.settings-ghostwriter-row-error {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .settings-ghostwriter-form-fields, .settings-ghostwriter-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-ghostwriter-form-fields .btn, .settings-ghostwriter-actions .btn {
    width: 100%;
  }

  .settings-ghostwriter-form-fields input, .settings-ghostwriter-form-fields select, .settings-ghostwriter-form-fields .btn, .settings-ghostwriter-row select, .settings-ghostwriter-actions .btn {
    min-height: 44px;
  }

  .settings-ghostwriter-actions {
    justify-content: stretch;
  }

  .settings-ghostwriter-confirm-text {
    text-align: left;
  }
}

.settings-stack {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

.settings-stack-lg {
  display: flex;
  gap: var(--space-4);
  flex-direction: column;
}

.settings-subsection-spacer {
  margin-top: var(--space-8);
}

.settings-subhead {
  margin: 0 0 var(--space-1);
  font-size: 1.05rem;
}

.settings-subhead-desc {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
  font-size: .8rem;
  line-height: 1.6;
}

.settings-empty {
  color: var(--color-text-muted);
  padding: var(--space-5) 0;
  font-size: .85rem;
}

.settings-input-full {
  margin-top: var(--space-1);
  width: 100%;
}

.settings-textarea-full {
  margin-top: var(--space-1);
  resize: vertical;
  width: 100%;
  font-family: inherit;
  font-size: .8rem;
  line-height: 1.5;
}

.settings-textarea-mono {
  resize: vertical;
  width: 100%;
  font-family: monospace;
  font-size: .8rem;
  line-height: 1.5;
}

.settings-flex-grow {
  flex: 1;
  min-width: 0;
}

.settings-feedback-success {
  padding: var(--space-2) var(--space-4);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-bg-card));
  color: var(--color-success);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  font-size: .85rem;
}

.settings-card-row {
  display: flex;
  gap: var(--space-2);
  align-items:  center;
}

.settings-muted-tag {
  color: var(--color-text-muted);
  font-size: .7rem;
}

.settings-card-desc-inline {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: .72rem;
}

.settings-pre-block {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text-secondary);
  overflow: auto;
  max-height: 400px;
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
}

.settings-card-dim {
  opacity: .5;
}

.settings-button-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.settings-flex-row-wrap {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.settings-flex-row-wrap-tight {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

button.is-disabled {
  opacity: .4;
}

.settings-algorithm-meta {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border, #e6e6e6);
  display: flex;
  gap: var(--space-4);
  flex-direction: column;
  min-width: 0;
}

.settings-algorithm-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  min-width: 0;
}

.settings-algorithm-meta-label {
  color: var(--color-text-muted, #555);
  font-size: 13px;
  font-weight: 500;
}

.settings-algorithm-sources {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  min-width: 0;
}

.settings-algorithm-source-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.settings-algorithm-source-item {
  display: flex;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
  align-items:  center;
  min-width: 0;
}

.settings-algorithm-source-label {
  font-weight: 500;
}

.settings-algorithm-source-url {
  overflow-wrap: anywhere;
  word-break: break-all;
  flex: auto;
  min-width: 0;
}

.settings-algorithm-source-add {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items:  center;
  min-width: 0;
}

.settings-algorithm-source-add input {
  flex: 200px;
  min-width: 0;
}

.settings-rule-add-card {
  margin: var(--space-2) 0 var(--space-4) 0;
}

.settings-choice-card {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-ink-light));
  background-color: var(--color-bg-card);
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 7%, transparent) 0%, transparent 46%);
}

.settings-choice-card:before {
  content: "";
  position: absolute;
  background: var(--color-accent);
  opacity: .85;
  width: 3px;
  top: 0;
  bottom: 0;
  left: 0;
}

.settings-choice-card .card-inner h3 {
  color: var(--color-accent-dark);
}

.settings-styling-group {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

.settings-styling-group-tenant {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-light);
}

.settings-styling-group-heading {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin: 0;
}

.settings-scope-line {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.avatar-setting-row {
  display: flex;
  align-items:  center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.avatar-preview {
  overflow: hidden;
  display: flex;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-family-heading);
  border: 2px solid var(--color-border-light);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items:  center;
  width: 64px;
  height: 64px;
  font-size: 1.4rem;
  font-weight: 600;
}

.avatar-preview img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.avatar-setting-actions {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 10px;
}

.avatar-setting-error {
  margin: var(--space-2) 0 0;
  color: var(--color-error);
  font-size: .8rem;
}

.settings-rules-table {
  border-collapse: collapse;
  width: 100%;
}

.settings-rules-table th {
  padding: var(--space-2) 10px;
}

.settings-rules-table td {
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: top;
  padding: 7px 10px;
}

.settings-rules-table th:first-child, .settings-rules-table td:first-child {
  width: 120px;
}

.settings-rules-table th:nth-child(2), .settings-rules-table td:nth-child(2) {
  width: 160px;
}

.settings-rules-table th:nth-child(4), .settings-rules-table td:nth-child(4) {
  text-align: center;
  width: 64px;
}

.settings-rules-table th:nth-child(5), .settings-rules-table td:nth-child(5) {
  text-align: center;
  width: 44px;
}

.settings-rule-tr-dim {
  opacity: .5;
}

.settings-rule-active-cell {
  text-align: center;
}

.settings-rules-table .settings-rule-severity-select, .settings-rules-table .settings-rule-category-input, .settings-rules-table .settings-rule-body-input {
  padding: 6px var(--space-2);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  width: 100%;
  font-family: inherit;
  font-size: .85rem;
}

.settings-rules-table .settings-rule-body-input {
  resize: vertical;
  min-height: var(--space-10);
  line-height: 1.4;
}

.settings-rules-table .settings-rule-severity-select {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  font-weight: 600;
}

.settings-rule-severity-select.severity-must {
  color: var(--color-error);
}

.settings-rule-severity-select.severity-should {
  color: var(--color-accent-dark);
}

.settings-rule-severity-select.severity-avoid {
  color: var(--color-ink-light);
}

.settings-rule-active-cell input[type="checkbox"] {
  cursor: pointer;
}

.category-new-input {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-1);
  width: 100%;
}

.category-new-input input {
  padding: 6px var(--space-2);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
  font-size: .85rem;
}

.profile-accordion {
  display: flex;
  margin-top: var(--space-1);
  flex-direction: column;
  gap: 10px;
}

.accordion-block {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  overflow: hidden;
  transition: border-color .16s, box-shadow .16s;
}

.accordion-block.open {
  border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border-light));
  box-shadow: var(--shadow-sm);
}

.accordion-head {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  padding: 10px 14px 10px var(--space-1);
  width: 100%;
}

.accordion-head-main {
  display: flex;
  padding: 6px var(--space-1) 6px 14px;
  cursor: pointer;
  text-align: left;
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  background: none;
  border: none;
  flex: 1;
  align-items:  center;
  gap: 14px;
  min-width: 0;
}

.accordion-head-main:hover {
  background: var(--color-bg-hover);
}

.accordion-head .pill-toggle {
  margin-left: 2px;
}

.accordion-chevron {
  color: var(--color-ink-light);
  flex: none;
  width: 18px;
  height: 18px;
  transition: transform .16s;
}

.accordion-block.open .accordion-chevron {
  color: var(--color-accent);
  transform: rotate(90deg);
}

.accordion-block-icon {
  display: grid;
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
  color: var(--color-accent);
  flex: none;
  place-items:  center;
  width: 36px;
  height: 36px;
}

.accordion-block-icon svg {
  width: 19px;
  height: 19px;
}

.accordion-block-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.accordion-block-title {
  font-family: var(--font-family-heading);
  color: var(--color-text-primary);
  font-size: 1.02rem;
  font-weight: 700;
}

.accordion-block-desc {
  color: var(--color-ink-light);
  font-size: .82rem;
}

.badge-pill {
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: var(--space-1) 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex: none;
  font-size: .7rem;
  font-weight: 700;
}

.badge-pill.is-on {
  background: color-mix(in srgb, var(--color-success) 18%, transparent);
  color: var(--color-success-strong);
}

.badge-pill.is-off {
  background: var(--color-subtle-bg);
  color: var(--color-ink-faint);
}

.badge-pill.is-count {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  text-transform: none;
  letter-spacing: 0;
}

.accordion-body {
  padding: var(--space-1) 18px var(--space-5) 68px;
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

.accordion-actions {
  margin-bottom: 2px;
}

.pill-toggle {
  position: relative;
  width: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--color-border);
  cursor: pointer;
  border: none;
  flex: none;
  height: 23px;
  transition: background .16s;
}

.pill-toggle:after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  transition: transform .16s;
  top: 3px;
  left: 3px;
  box-shadow: 0 1px 2px #00000040;
}

.pill-toggle.on {
  background: var(--color-success);
}

.pill-toggle.on:after {
  transform: translateX(17px);
}

.hook-editor {
  display: flex;
  margin-top: var(--space-1);
  flex-direction: column;
  gap: 10px;
}

.hook-editor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.hook-editor-hint {
  color: var(--color-ink-light);
  font-size: .8rem;
}

.hook-formula-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hook-formula-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  padding: 14px var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  align-items:  start;
  gap: 14px;
}

.hook-formula-row.is-off {
  opacity: .55;
}

.hook-formula-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hook-formula-name {
  font-family: var(--font-family-heading);
  color: var(--color-text-primary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  font-size: .98rem;
  font-weight: 700;
}

.hook-formula-sublabel {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-ink-light);
  margin-top: 2px;
  font-size: .72rem;
  font-weight: 700;
}

.hook-formula-when, .hook-formula-example {
  box-sizing: border-box;
  font-family: var(--font-family);
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  resize: vertical;
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  font-size: .86rem;
}

.hook-formula-name:focus, .hook-formula-when:focus, .hook-formula-example:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.hook-formula-delete {
  align-self:  start;
  font-size: 1.2rem;
  line-height: 1;
}

.hook-formula-add {
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: var(--space-2);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink-light);
  cursor: pointer;
  background: none;
  width: 100%;
  padding: 11px;
  transition: border-color .16s, color .16s;
  font-size: .88rem;
  font-weight: 700;
}

.hook-formula-add:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (max-width: 768px) {
  .accordion-head {
    gap: var(--space-2);
    padding: var(--space-2) 10px var(--space-2) 2px;
  }

  .accordion-head-main {
    padding: 6px 2px 6px var(--space-2);
    gap: 10px;
  }

  .accordion-block-icon {
    width: 30px;
    height: 30px;
  }

  .accordion-block-icon svg {
    width: 17px;
    height: 17px;
  }

  .accordion-block-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .96rem;
  }

  .accordion-block-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .accordion-head .badge-pill.is-count {
    display: none;
  }

  .accordion-body {
    padding: var(--space-1) 14px 18px 14px;
  }

  .hook-formula-row {
    grid-template-columns: 1fr;
    position: relative;
    padding: 58px 14px 14px;
  }

  .hook-formula-row > .pill-toggle {
    position: absolute;
    top: 14px;
    left: 14px;
  }

  .hook-formula-row > .hook-formula-delete {
    position: absolute;
    top: var(--space-2);
    right: 10px;
  }

  .example-post-toprow .hook-formula-name {
    min-width: 0;
  }

  .pill-toggle {
    position: relative;
  }

  .pill-toggle:before {
    content: "";
    position: absolute;
    inset: -11px -6px;
  }

  .settings-rules-wrapper {
    overflow-x: visible;
  }

  .settings-rules-table thead {
    display: none;
  }

  .settings-rules-table, .settings-rules-table tbody {
    display: block;
    width: 100%;
  }

  .settings-rules-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) 10px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    align-items:  center;
    margin-bottom: 10px;
  }

  .settings-rules-table td {
    display: block;
    border: none;
    padding: 0;
    width: auto !important;
  }

  .settings-rules-table td:first-child {
    grid-column: 1;
  }

  .settings-rules-table td:nth-child(2) {
    grid-column: 2;
  }

  .settings-rules-table td:nth-child(3) {
    grid-column: 1 / -1;
  }

  .settings-rules-table td:nth-child(4) {
    grid-column: 1;
    display: flex;
    align-items:  center;
    gap: var(--space-2);
    text-align: left;
  }

  .settings-rules-table td:nth-child(4):before {
    content: "Actief";
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-ink-light);
    font-size: .72rem;
    font-weight: 700;
  }

  .settings-rules-table td:nth-child(5) {
    grid-column: 2;
    text-align: right;
  }
}

.block-content-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.example-post-toprow {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 10px;
}

.example-post-toprow .hook-formula-name {
  flex: 1;
  min-width: 180px;
}

.example-kind-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  background: var(--color-bg-card);
  overflow: hidden;
  flex: none;
}

.example-kind-btn {
  color: var(--color-ink-light);
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px 14px;
  transition: background .14s, color .14s;
  font-size: .8rem;
  font-weight: 700;
}

.example-kind-btn.good.active {
  background: color-mix(in srgb, var(--color-success) 18%, transparent);
  color: var(--color-success-strong);
}

.example-kind-btn.bad.active {
  background: color-mix(in srgb, var(--color-error) 16%, transparent);
  color: var(--color-error);
}

.example-post-row.is-off {
  opacity: .55;
}

.settings-palette-label {
  color: var(--color-text-secondary);
  min-width: 180px;
  font-size: .9rem;
}

.source-connections-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.source-connections-row {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  flex-direction: column;
  min-width: 0;
}

.source-connections-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.source-connections-main {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 10px;
  min-width: 0;
}

.source-connections-provider {
  min-width: 80px;
  font-weight: 600;
}

.source-connections-status {
  display: inline-flex;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  align-items:  center;
  gap: 5px;
}

.source-connections-status svg {
  flex: none;
}

.source-connections-status.is-connected {
  color: var(--color-success);
}

.source-connections-status.is-disabled {
  color: color-mix(in srgb, var(--color-warning) 55%, var(--color-ink));
}

.source-connections-status.is-off {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.source-connections-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
  min-width: 0;
}

.source-connections-actions {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.source-connections-confirm-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
  min-width: 0;
}

.source-connections-form {
  flex-wrap: wrap;
  align-items:  center;
}

.source-connections-form .field-input-wrapper {
  flex: 220px;
  min-width: 0;
}

@media (max-width: 768px) {
  .source-connections-form {
    align-items: stretch;
  }

  .source-connections-form .field-input-wrapper {
    flex: none;
    width: 100%;
  }
}

.usage-table-wrap {
  overflow-x: auto;
}

.usage-cap-warning {
  font-weight: var(--font-weight-semibold);
}

.usage-cap-row {
  margin-top: var(--space-1);
  flex-wrap: wrap;
}

.settings-read-only-notice {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.settings-section .persona-card-header {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
}

.settings-section .persona-name {
  font-family: var(--font-family-heading);
}

.settings-section .persona-desc {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 640px) {
  .settings-section .persona-card-header {
    flex-wrap: wrap;
  }

  .settings-section .bsa-card-actions {
    justify-content: flex-start;
    row-gap: var(--space-2);
    flex-wrap: wrap;
    flex-shrink: 1;
    flex-basis: 100%;
    min-width: 0;
  }

  .settings-section .bsa-card-actions > select.form-input {
    flex: 100%;
    width: 100%;
    min-width: 0;
  }
}

.admin-users-field {
  display: flex;
  gap: var(--space-1);
  flex-direction: column;
  min-width: 0;
}

.admin-users-field-help {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.admin-users-subcard-lg {
  margin-top: var(--space-6);
}

.persona-avatar-read-only {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.settings-read-only-notice strong {
  color: var(--color-accent-dark);
}

.reviewer-explainer-body {
  display: flex;
  gap: var(--space-4);
  flex-direction: column;
}

.reviewer-explainer-body h4 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
}

.reviewer-explainer-body p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
  line-height: 1.6;
}

:root {
  --user-access-panel-width: 27rem;
  --user-access-panel-inset-top: 72px;
}

.app-main:has(.settings-users-page) {
  max-width: calc(1400px + var(--user-access-panel-width));
}

.settings-content:has(.settings-users-page) {
  max-width: none;
}

.settings-users-page.has-panel-beside {
  padding-right: var(--user-access-panel-width);
}

.settings-users-page {
  display: flex;
  gap: var(--space-4);
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.settings-users-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.settings-users-explanation, .settings-users-state {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  max-width: 72ch;
  margin: 0;
  line-height: 1.6;
}

.settings-users-table-wrapper {
  width: 100%;
  min-width: 0;
}

.settings-users-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.settings-users-table th:first-child {
  width: 20%;
}

.settings-users-table th:nth-child(2) {
  width: 24%;
}

.settings-users-table th:nth-child(3) {
  width: 9%;
}

.settings-users-table th:nth-child(4) {
  width: 12%;
}

.settings-users-table th:nth-child(5) {
  width: 9%;
}

.settings-users-table th:nth-child(6) {
  width: 10%;
}

.settings-users-table th:nth-child(7) {
  width: 16%;
}

.settings-users-table th, .settings-users-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
  font-size: var(--font-size-sm);
  overflow-wrap: break-word;
  border-bottom: 1px solid var(--color-border-light);
}

.settings-users-table .settings-users-email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-users-table th {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: normal;
}

.settings-users-table tbody tr:nth-child(odd) {
  background: var(--color-bg-card);
}

.settings-users-table tbody tr.settings-users-row {
  cursor: pointer;
}

.settings-users-table tbody tr.settings-users-row.is-inactive {
  background: color-mix(in srgb, var(--color-text-secondary) 18%, var(--color-bg-card));
}

.settings-users-table tbody tr.settings-users-row:hover {
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg-card));
}

.settings-users-table tbody tr.settings-users-row.is-selected {
  background: color-mix(in srgb, var(--color-accent) 28%, var(--color-bg-card));
}

.settings-users-row-link {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.settings-users-row-link:hover {
  text-decoration: underline;
}

.settings-users-row-link:focus-visible {
  text-decoration: underline;
}

.settings-users-access {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.settings-users-access-full {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.settings-users-access-partial {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.settings-users-access-none {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

@media (max-width: 1024px) {
  .settings-users-table, .settings-users-table tbody, .settings-users-table tr, .settings-users-table td {
    display: block;
    width: 100%;
  }

  .settings-users-table thead {
    display: none;
  }

  .settings-users-table tr {
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
  }

  .settings-users-table td {
    display: grid;
    grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.2fr);
    gap: var(--space-3);
    padding: var(--space-3);
    overflow-wrap: anywhere;
    border-bottom: none;
  }

  .settings-users-table td:before {
    content: attr(data-label);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
  }

  .settings-users-table .settings-users-email {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 1532px) {
  .settings-users-page.has-panel-beside .settings-users-table, .settings-users-page.has-panel-beside .settings-users-table tbody, .settings-users-page.has-panel-beside .settings-users-table tr, .settings-users-page.has-panel-beside .settings-users-table td {
    display: block;
    width: 100%;
  }

  .settings-users-page.has-panel-beside .settings-users-table thead {
    display: none;
  }

  .settings-users-page.has-panel-beside .settings-users-table tr {
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
  }

  .settings-users-page.has-panel-beside .settings-users-table td {
    display: grid;
    grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.2fr);
    gap: var(--space-3);
    padding: var(--space-3);
    overflow-wrap: anywhere;
    border-bottom: none;
  }

  .settings-users-page.has-panel-beside .settings-users-table td:before {
    content: attr(data-label);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
  }

  .settings-users-page.has-panel-beside .settings-users-table .settings-users-email {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

.ghost-notes-list {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-5);
}

.user-access-panel {
  position: fixed;
  z-index: var(--z-modal);
  max-width: var(--user-access-panel-width);
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  flex-direction: column;
  width: 100%;
  min-width: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.user-access-panel.is-beside {
  top: var(--user-access-panel-inset-top);
}

.user-access-panel.is-modal {
  top: 0;
}

.user-access-panel-scrim {
  position: fixed;
  z-index: var(--z-panel);
  background: var(--color-overlay-bg);
  inset: 0;
}

.user-access-panel:focus {
  outline: none;
}

.user-access-panel:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.user-access-panel-header {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: var(--space-3);
}

.user-access-panel-identity {
  min-width: 0;
}

.user-access-panel-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
  margin: 0;
}

.user-access-panel-email {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.user-access-panel-state {
  display: flex;
  align-items:  flex-start;
  gap: var(--space-3);
  flex-direction: column;
}

.user-access-panel-state-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  max-width: 48ch;
  margin: 0;
  line-height: 1.6;
}

.user-access-panel-fields {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

.user-access-panel-field {
  display: grid;
  grid-template-columns: minmax(6rem, .8fr) minmax(0, 1.2fr);
  align-items:  center;
  gap: var(--space-3);
  min-width: 0;
}

.user-access-panel-field-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.user-access-panel-field-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.user-access-panel-field .form-input {
  width: 100%;
  min-width: 0;
}

.user-access-panel-section, .user-access-panel-danger {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
  flex-direction: column;
}

.user-access-panel-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.user-access-panel-check {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

.user-access-panel-check:has(input:disabled) {
  color: var(--color-text-muted);
  cursor: default;
}

.user-access-panel-hint, .user-access-panel-audit {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  max-width: 48ch;
  margin: 0;
  line-height: 1.6;
}

.user-access-panel-error {
  font-size: var(--font-size-sm);
  color: var(--color-error);
  margin: 0;
}

.user-access-panel-error.is-panel-level {
  position: sticky;
  z-index: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  top: 0;
}

.user-danger-zone {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  min-width: 0;
}

.user-danger-zone-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items:  center;
}

.user-danger-zone-reset {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  flex-direction: column;
  min-width: 0;
}

.user-danger-zone-reset-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.user-danger-zone-reset .form-input {
  width: 100%;
  min-width: 0;
}

/* frontend/styles/media.css */
.media-page, .media-head-text {
  min-width: 0;
}

.media-subtitle {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.media-capture {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.media-dropzone {
  display: flex;
  align-items:  center;
  gap: var(--space-4);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  background: var(--color-bg-card);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  flex: 56%;
  min-width: 0;
}

.media-dropzone:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

.media-dropzone:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.media-dropzone.dragover {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  border-style: solid;
}

.media-dropzone-icon {
  display: grid;
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
  color: var(--color-accent);
  flex: none;
  place-items:  center;
  width: 48px;
  height: 48px;
}

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

.media-dropzone-hint {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.media-dropzone-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.media-url-row {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex: 40%;
  min-width: 0;
}

.media-url-input {
  flex: 200px;
  min-width: 0;
}

.media-upload-queue {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-direction: column;
}

.media-upload-item {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-tertiary);
  flex-wrap: wrap;
}

.media-upload-item.error {
  border-color: color-mix(in srgb, var(--color-error) 35%, transparent);
  background: color-mix(in srgb, var(--color-error) 8%, var(--color-bg-card));
}

.media-upload-name {
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
  min-width: 0;
}

.media-upload-status {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.media-upload-spinner {
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  animation: media-spin .7s linear infinite;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

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

@media (prefers-reduced-motion: reduce) {
  .media-upload-spinner {
    animation: none;
  }
}

.media-upload-status-error {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-error);
  flex-wrap: wrap;
}

.media-toolbar {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.media-search {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  flex: 240px;
  min-width: 0;
}

.media-search:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.media-search-icon {
  color: var(--color-text-muted);
  flex: none;
}

.media-search .media-search-input {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  background: none;
  border: none;
  flex: 1;
  min-width: 0;
  padding: 9px 0;
}

.media-search .media-search-input:focus {
  outline: none;
  box-shadow: none;
}

.media-filter-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.medialib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.media-card {
  display: flex;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
  flex-direction: column;
  min-width: 0;
}

.media-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
  transform: translateY(-2px);
}

.medialib-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-tertiary);
  border: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

button.medialib-thumb {
  cursor: zoom-in;
}

.medialib-thumb-img {
  position: absolute;
  object-fit: cover;
  transition: transform var(--transition-normal);
  width: 100%;
  height: 100%;
  inset: 0;
}

.medialib-thumb-inner {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-3);
  text-align: center;
  flex-direction: column;
  inset: 0;
}

button.medialib-thumb:hover .medialib-thumb-img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .medialib-thumb-img {
    transition: none;
  }

  button.medialib-thumb:hover .medialib-thumb-img {
    transform: none;
  }
}

.medialib-thumb-glyph {
  display: block;
  color: var(--color-text-muted);
}

.medialib-thumb.kind-video {
  background: #c0392b12;
}

.medialib-thumb.kind-video .medialib-thumb-glyph {
  color: #c0392b;
}

.medialib-thumb.kind-pdf {
  background: #ca772a17;
}

.medialib-thumb.kind-pdf .medialib-thumb-glyph {
  color: #c2772a;
}

.medialib-thumb.kind-audio {
  background: var(--color-accent-light);
}

.medialib-thumb.kind-audio .medialib-thumb-glyph {
  color: var(--color-accent);
}

.medialib-thumb.kind-other {
  background: var(--color-bg-tertiary);
}

.medialib-thumb.kind-other .medialib-thumb-glyph {
  color: var(--color-text-muted);
}

.medialib-thumb-link {
  display: inline-flex;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  align-items:  center;
  gap: 5px;
}

.medialib-thumb-link:hover {
  color: var(--color-accent-dark);
}

.media-kind-badge {
  position: absolute;
  border-radius: var(--radius-full);
  font-size: .66rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .02em;
  text-transform: lowercase;
  color: #fff;
  background: color-mix(in srgb, var(--color-ink) 72%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 3px 9px;
  top: 8px;
  left: 8px;
}

.media-card-body {
  display: flex;
  padding: var(--space-3);
  flex-direction: column;
  flex: 1;
  gap: 6px;
  min-width: 0;
}

.media-card-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.media-card-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.media-card-tags {
  margin-top: auto;
  padding-top: 6px;
}

.media-card-tags .tag-input-wrapper {
  background: none;
  border: none;
  gap: 5px;
  min-height: 0;
  padding: 0;
}

.media-card-tags .tag-input-wrapper:focus-within {
  box-shadow: inset 0 -1.5px 0 var(--color-accent);
}

.media-card-tags .tag-input {
  font-size: var(--font-size-xs);
  box-shadow: none;
  background: none;
  border: none;
  min-width: 80px;
  padding: 2px 0;
}

.media-card-tags .tag-input:focus {
  box-shadow: none;
  outline: none;
  border: none;
}

.media-card-actions {
  display: flex;
  justify-content: flex-start;
  align-items:  center;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  border-top: 1px solid var(--color-border-light);
  flex-wrap: wrap;
}

.media-action-btn {
  display: inline-flex;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  background: none;
  border: none;
  align-items:  center;
  gap: 6px;
  min-height: 38px;
}

.media-action-btn:hover {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.media-action-btn.danger {
  justify-content: center;
  min-width: 38px;
  margin-left: auto;
}

.media-action-btn.danger:hover {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
}

.medialib-layout {
  display: flex;
  align-items:  flex-start;
  gap: var(--space-5);
}

.medialib-rail {
  display: flex;
  position: sticky;
  top: var(--space-4);
  flex-direction: column;
  flex: 0 0 216px;
  gap: 2px;
  min-width: 0;
}

.medialib-main {
  flex: 1;
  min-width: 0;
}

.medialib-rail-head {
  display: flex;
  padding: 2px var(--space-2) 6px;
  justify-content: space-between;
  align-items:  center;
}

.medialib-rail-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}

.medialib-rail-add {
  display: grid;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  place-items:  center;
  width: 26px;
  height: 26px;
}

.medialib-rail-add:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.medialib-rail-new {
  display: flex;
  padding: 2px var(--space-1) 6px;
  align-items:  center;
  gap: 6px;
}

.medialib-rail-input {
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
}

.medialib-rail-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.medialib-folder {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  padding: var(--space-2) 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
  background: none;
  border: none;
  width: 100%;
}

.medialib-folder:hover {
  background: var(--color-accent-light);
}

.medialib-folder.active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.medialib-folder-icon {
  display: inline-flex;
  color: var(--color-text-muted);
  flex: none;
}

.medialib-folder.active .medialib-folder-icon {
  color: var(--color-text-inverse);
}

.medialib-folder-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.medialib-folder-muted {
  color: var(--color-text-muted);
}

.medialib-folder.active .medialib-folder-muted {
  color: var(--color-text-inverse);
}

.medialib-folder-count {
  font-size: .7rem;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
  color: var(--color-text-muted);
  flex: none;
  padding: 1px 7px;
}

.medialib-folder.active .medialib-folder-count {
  color: #fff;
  background: #ffffff38;
}

.medialib-folder-row {
  display: flex;
  align-items:  center;
  gap: 2px;
  min-width: 0;
}

.medialib-folder-row .medialib-folder {
  flex: 1;
  min-width: 0;
}

.medialib-folder-actions {
  display: none;
  flex: none;
  gap: 0;
}

.medialib-folder-row:hover .medialib-folder-actions, .medialib-folder-row:focus-within .medialib-folder-actions {
  display: flex;
}

.medialib-folder-action {
  display: grid;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  background: none;
  border: none;
  place-items:  center;
  width: 28px;
  height: 28px;
}

.medialib-folder-action:hover {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.medialib-folder-action.danger:hover {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
}

.medialib-empty-inline {
  padding: var(--space-10) var(--space-5);
}

.medialib-card-folder {
  display: inline-flex;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
  background: none;
  align-self:  flex-start;
  align-items:  center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 9px;
}

.medialib-card-folder svg {
  flex: none;
}

.medialib-card-folder:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.medialib-card-folder.filed {
  color: var(--color-accent-dark);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  background: var(--color-accent-light);
}

.medialib-card-folder-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.medialib-idea-search {
  width: 100%;
}

.medialib-idea-list {
  display: flex;
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
}

.medialib-idea-option {
  display: flex;
  text-align: left;
  padding: 9px var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
  transition: background var(--transition-fast), color var(--transition-fast);
  background: none;
  border: none;
  flex-direction: column;
  gap: 1px;
}

.medialib-idea-option:hover {
  background: var(--color-accent-light);
}

.medialib-idea-option.selected {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.medialib-idea-option-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.medialib-idea-option-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.medialib-idea-option.selected .medialib-idea-option-meta {
  color: #ffffffd1;
}

.medialib-idea-empty {
  padding: var(--space-3);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.media-lightbox {
  position: fixed;
  z-index: var(--z-modal);
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: media-fade-in .18s ease-out;
  background: #000000c7;
  flex-direction: column;
  inset: 0;
}

@keyframes media-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-lightbox {
    animation: none;
  }
}

.media-lightbox-img {
  object-fit: contain;
  border-radius: var(--radius-md);
  cursor: default;
  max-width: min(92vw, 1100px);
  max-height: 82vh;
  box-shadow: 0 24px 60px #00000080;
}

.media-lightbox-caption {
  color: #ffffffdb;
  font-size: var(--font-size-sm);
  text-align: center;
  overflow-wrap: anywhere;
  max-width: 90vw;
}

.media-lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  border-radius: var(--radius-full);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-fast);
  background: #ffffff24;
  border: none;
  place-items:  center;
  width: 40px;
  height: 40px;
}

.media-lightbox-close:hover {
  background: #ffffff47;
}

@media (max-width: 768px) {
  .media-capture {
    flex-direction: column;
  }

  .media-dropzone {
    padding: var(--space-4);
    flex: auto;
  }

  .media-url-row {
    flex: auto;
  }

  .media-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .media-search {
    flex: auto;
  }

  .medialib-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-3);
  }

  .medialib-layout {
    gap: var(--space-4);
    flex-direction: column;
  }

  .medialib-rail {
    position: static;
    overflow-y: auto;
    flex: auto;
    width: 100%;
    max-height: 260px;
  }

  .medialib-folder-actions {
    display: flex;
  }

  .medialib-folder, .medialib-folder-action, .media-action-btn {
    min-height: 44px;
  }

  .media-action-btn.danger {
    min-width: 44px;
  }

  .media-filter-chips .chip {
    padding: 9px 13px;
  }
}

.medialib-link-feedback {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  font-size: .9rem;
}

.medialib-link-feedback.error {
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
}

.medialib-link-feedback.success {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}

/* frontend/styles/app.css */