/* ============================================================
   Sahara° Tools — colours from brand-knowledge/05-visual-identity.md
   ============================================================ */
:root {
  /* --- Brand palette (do not change) --- */
  --forest-night: #212721;
  --forest: #3d441e;
  --olive: #a3a883;
  --cta: #d2451e;
  --cream: #f6f4eb;
  --sand: #ece6ce;

  /* --- Layout --- */
  --sidebar-width: 240px;
  --max-content-width: 760px;
  --max-chat-width: 720px;
  --radius: 12px;

  /* --- Surface tokens (LIGHT mode defaults) ---
     The component CSS only references these. Switch the values in
     [data-theme="dark"] below to recolour the whole app. */
  --surface-bg: var(--cream);
  --surface-elevated: white;
  --surface-card: var(--sand);
  --surface-border: var(--sand);
  /* Input fields: sand bg sits darker than the white form around it
     so the field reads as a recess. Border is transparent — only appears on focus. */
  --surface-input-bg: var(--sand);
  --surface-input-border: transparent;
  --surface-input-focus: var(--olive);

  --surface-text: var(--forest-night);
  --surface-text-muted: rgba(33, 39, 33, 0.55);

  --sidebar-bg: var(--forest-night);
  --sidebar-text: var(--cream);
  --sidebar-text-muted: rgba(246, 244, 235, 0.55);
  --sidebar-hover: rgba(246, 244, 235, 0.08);
  --sidebar-active: rgba(246, 244, 235, 0.14);
  --sidebar-border: rgba(246, 244, 235, 0.08);

  --bubble-user-bg: var(--sand);
  --bubble-user-text: var(--forest-night);
  --bubble-assistant-bg: var(--forest-night);
  --bubble-assistant-text: var(--cream);

  --login-bg: var(--forest);
  --login-card-bg: var(--cream);
  --login-card-text: var(--forest-night);

  --logo-color-login: var(--forest);
  --logo-color-sidebar: var(--cream);

  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   DARK MODE
   Brand book has no defined dark surfaces, so we extend with values
   layered around forest-night to keep a coherent feel.
   ============================================================ */
[data-theme="dark"] {
  --surface-bg: #151915; /* slightly green-tinted near-black */
  --surface-elevated: #1f241f;
  --surface-card: #2a2f2a;
  --surface-border: rgba(246, 244, 235, 0.08);
  /* Input bg darker than the form around it = "carved into" the surface.
     Border transparent until focus. Focus border uses a darker, less luminous
     olive so it doesn't read as off-white against the dark background. */
  --surface-input-bg: #0e110e;
  --surface-input-border: transparent;
  --surface-input-focus: rgba(163, 168, 131, 0.45);

  --surface-text: var(--cream);
  --surface-text-muted: rgba(246, 244, 235, 0.55);

  --sidebar-bg: #0e110e;
  --sidebar-text: var(--cream);
  --sidebar-text-muted: rgba(246, 244, 235, 0.5);
  --sidebar-hover: rgba(246, 244, 235, 0.07);
  --sidebar-active: rgba(246, 244, 235, 0.13);
  --sidebar-border: rgba(246, 244, 235, 0.08);

  --bubble-user-bg: var(--forest);
  --bubble-user-text: var(--cream);
  --bubble-assistant-bg: #2a2f2a;
  --bubble-assistant-text: var(--cream);

  --login-bg: #0e110e;
  --login-card-bg: #1f241f;
  --login-card-text: var(--cream);

  --logo-color-login: var(--cream);

  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   BASE
   ============================================================ */
* {
  box-sizing: border-box;
}

/* The HTML `hidden` attribute defaults to `display: none`, but it gets
   overridden by any explicit `display:` in our CSS (e.g. .panel has display:flex).
   Force it to win so view-switching actually hides things. */
[hidden] {
  display: none !important;
}

/* ============================================================
   CAPSULE CLUSTER — the Sahara design pattern
   Light: cream envelope, Sahara Forest active pill, Forest idle text.
   Dark:  inverted — Forest envelope, Cream active pill, Cream idle text.
   ============================================================ */
.capsule-cluster {
  display: inline-flex;
  align-items: center;
  background: var(--cream);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}

.capsule-cluster > button,
.capsule-cluster > .capsule {
  border: 0;
  background: transparent;
  color: var(--forest);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.capsule-cluster > button:hover {
  background: rgba(61, 68, 30, 0.08);
}

.capsule-cluster > .active,
.capsule-cluster > [aria-pressed="true"],
.capsule-cluster > [aria-selected="true"] {
  background: var(--forest-night);
  color: var(--cream);
}

.capsule-cluster > .active:hover {
  background: var(--forest-night);
}

/* ===== Dark mode: inverted (Forest envelope, Cream active pill) =====
   This applies to every variant of the capsule pattern in the app:
   .capsule-cluster, .lab-mode-pill, .image-submode-pill, .view-toggle, .tabs */
[data-theme="dark"] .capsule-cluster,
[data-theme="dark"] .lab-mode-pill,
[data-theme="dark"] .image-submode-pill,
[data-theme="dark"] .view-toggle,
[data-theme="dark"] .tabs {
  background: var(--forest);
}

[data-theme="dark"] .capsule-cluster > button,
[data-theme="dark"] .lab-mode-btn,
[data-theme="dark"] .image-submode-btn,
[data-theme="dark"] .view-btn,
[data-theme="dark"] .tab-btn {
  color: rgba(246, 244, 235, 0.8); /* idle = soft cream on forest */
}

[data-theme="dark"] .capsule-cluster > button:hover,
[data-theme="dark"] .lab-mode-btn:hover,
[data-theme="dark"] .image-submode-btn:hover,
[data-theme="dark"] .view-btn:hover,
[data-theme="dark"] .tab-btn:hover {
  background: rgba(246, 244, 235, 0.1);
  color: var(--cream);
}

/* Active capsule in dark mode: CTA orange — the brand "action" colour.
   Cream felt like a beacon on dark backgrounds. */
[data-theme="dark"] .capsule-cluster > .active,
[data-theme="dark"] .capsule-cluster > [aria-pressed="true"],
[data-theme="dark"] .capsule-cluster > [aria-selected="true"],
[data-theme="dark"] .lab-mode-btn.active,
[data-theme="dark"] .image-submode-btn.active,
[data-theme="dark"] .view-btn.active,
[data-theme="dark"] .tab-btn.active {
  background: var(--cta);
  color: white;
}

[data-theme="dark"] .capsule-cluster > .active:hover,
[data-theme="dark"] .lab-mode-btn.active:hover,
[data-theme="dark"] .view-btn.active:hover {
  background: var(--cta);
  color: white;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--surface-bg);
  color: var(--surface-text);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

/* Global focus state — only the border appears, no halo.
   The halo was reading as off-white on dark surfaces and felt off-brand. */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--surface-input-focus);
  box-shadow: none;
}

/* Caret colour matches the brand instead of the OS default white.
   Subtle but stops the cursor from looking like a foreign element on dark surfaces. */
input,
textarea {
  caret-color: var(--olive);
}

/* ============================================================
   SAHARA LOGO (SVG injected; uses fill="currentColor")
   ============================================================ */
.sahara-logo {
  display: block;
  line-height: 0;
}

.sahara-logo svg {
  width: 100%;
  height: auto;
  display: block;
}

.logo-login {
  width: 130px;
  color: var(--logo-color-login);
  margin: 0 auto 8px;
}

.login-brand {
  text-align: center;
  margin-bottom: 28px;
}

.logo-sidebar {
  width: 130px;
  color: var(--logo-color-sidebar);
  padding: 4px 24px 28px;
}

/* ============================================================
   LOGIN
   ============================================================ */
.login-bg {
  height: 100%;
  background: var(--login-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  background: var(--login-card-bg);
  color: var(--login-card-text);
  padding: 44px 36px 36px;
  border-radius: var(--radius);
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-card);
}

.login-tagline {
  margin: 4px 0 0;
  color: var(--login-card-text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 700;
  opacity: 0.7;
  text-align: center;
}

/* Old #login-form rules removed — they were applying CTA-button styling
   to every <button> inside the form (including the subtle .link-btn ones)
   because of higher specificity. Now .auth-submit and .link-btn handle
   their own styling. */

.error {
  color: var(--cta);
  margin-top: 12px;
  font-size: 14px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--login-card-text);
  opacity: 0.85;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.auth-form input[type="email"],
.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--surface-input-border);
  border-radius: 10px;
  background: var(--surface-input-bg);
  color: var(--surface-text);
  margin-bottom: 12px;
  font-size: 15px;
  font-family: inherit;
}

.auth-form textarea {
  resize: vertical;
  min-height: 60px;
}

/* Auth inputs use the global focus rule (border + halo). */

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 16px;
}

.auth-submit {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--cta);
  color: white;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  transition:
    filter 0.15s ease,
    transform 0.1s ease;
}

.auth-submit:hover:not(:disabled) {
  filter: brightness(0.95);
}

.auth-submit:active:not(:disabled) {
  transform: scale(0.98);
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-footer {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--login-card-text);
  opacity: 0.7;
}

.link-inline {
  background: transparent;
  border: 0;
  padding: 0 0 0 4px;
  color: var(--login-card-text);
  font-weight: 600;
  cursor: pointer;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.link-inline:hover {
  opacity: 1;
}

.success-msg {
  color: var(--surface-text);
  background: var(--surface-card);
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 12px;
  font-size: 14px;
  border-left: 3px solid var(--cta);
}

.auth-heading {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  text-align: center;
  color: var(--login-card-text);
}

.auth-body {
  font-size: 14px;
  text-align: center;
  margin: 0 0 24px;
  color: var(--login-card-text);
  opacity: 0.8;
}

.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cta);
  cursor: pointer;
}

.link-btn,
.link-btn:hover,
.link-btn:focus,
.link-btn:active {
  /* Hard reset against any user-agent or inherited button styling. */
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
}

.link-btn {
  display: block;
  margin: 18px auto 0;
  border: 0;
  color: var(--login-card-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 6px;
  opacity: 0.45;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.15s ease;
}

/* When the link sits inside an .auth-row (e.g. next to Remember me),
   it stays inline-block with no auto-margins — keeps the row layout intact. */
.auth-row .link-btn {
  display: inline-block;
  margin: 0;
}

.link-btn:hover,
.link-btn:focus-visible {
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.link-btn:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
  border-radius: 4px;
}

.modal-narrow {
  max-width: 480px;
}

.forgot-body {
  padding: 18px 22px 22px;
  font-size: 14px;
  line-height: 1.55;
}

.forgot-body p {
  margin: 0 0 12px;
}

.forgot-body code {
  background: var(--surface-card);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */
#dashboard-view {
  display: flex;
  height: 100%;
  background: var(--surface-bg);
}

/* ----- Sidebar ----- */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 24px 0;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  color: var(--sidebar-text-muted);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.nav-item:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}

.nav-item.active {
  background: var(--sidebar-active);
  color: var(--sidebar-text);
  font-weight: 600;
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 12px 12px 0;
  border-top: 1px solid var(--sidebar-border);
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: var(--sidebar-text);
  margin-bottom: 6px;
  transition: background 0.15s ease;
  width: 100%;
}

.user-chip:hover {
  background: var(--sidebar-hover);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--forest-night);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.user-info {
  min-width: 0;
  flex: 1;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sidebar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-email {
  font-size: 11px;
  color: var(--sidebar-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  color: var(--sidebar-text-muted);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.sidebar-btn:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}

.sidebar-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Sidebar row with a switch (theme toggle).
   Same look as .sidebar-btn but the trailing element is a switch, not just a label. */
.sidebar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--sidebar-text-muted);
  transition:
    background 0.15s ease,
    color 0.15s ease;
  user-select: none;
}

.sidebar-row:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}

.sidebar-row svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-row-label {
  flex: 1;
}

/* Theme toggle: show sun in dark mode, moon in light mode */
.icon-sun {
  display: none;
}
[data-theme="dark"] .icon-sun {
  display: block;
}
[data-theme="dark"] .icon-moon {
  display: none;
}

/* ===== Switch (iOS-style) ===== */
.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.switch-slider {
  position: absolute;
  inset: 0;
  background: rgba(246, 244, 235, 0.22);
  border-radius: 20px;
  transition: background 0.2s ease;
  pointer-events: none;
}

.switch-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: var(--cream);
  border-radius: 50%;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.switch input:checked + .switch-slider {
  background: var(--cta);
}

.switch input:checked + .switch-slider::before {
  transform: translateX(16px);
}

.switch input:focus-visible + .switch-slider {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

/* ----- Main area ----- */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.page-header {
  padding: 24px 32px 20px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-bg);
  flex-shrink: 0;
}

.page-header h1 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: var(--surface-text);
  letter-spacing: -0.01em;
}

.page-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--surface-text-muted);
}

/* ----- Panel ----- */
.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================
   CHAT — modern chat-app feel: centered column, floating composer
   ============================================================ */

/* The chat panel is a single centered column. The composer sits at the
   bottom and matches the message column width — same vibe as Claude.ai. */
#chat-panel .messages {
  flex: 1;
  overflow-y: auto;
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
}

/* Empty state — centered vertically (the "ask me anything" landing). */
#chat-panel .messages:has(> .empty-state:only-child) {
  justify-content: center;
}

.empty-state {
  max-width: var(--max-chat-width);
  margin: 0 auto;
  text-align: center;
  color: var(--surface-text-muted);
  font-size: 14px;
  padding: 24px 16px;
}

#chat-panel .empty-state {
  font-size: 16px;
}

#chat-panel .empty-state #chat-greeting {
  font-size: 22px;
  font-weight: 600;
  color: var(--surface-text);
  opacity: 0.85;
  margin: 0 0 12px;
  line-height: 1.3;
}

.empty-state em {
  font-style: normal;
  background: var(--surface-card);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--surface-text);
}

.message {
  max-width: var(--max-chat-width);
  width: 100%;
  margin: 0 auto 16px;
  padding: 14px 18px;
  border-radius: var(--radius);
  word-wrap: break-word;
}

.message.user .message-body,
.message.error .message-body {
  white-space: pre-wrap;
}

.message-body p {
  margin: 0 0 10px;
}

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

.message-body h3,
.message-body h4,
.message-body h5,
.message-body h6 {
  margin: 14px 0 6px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.message-body h3 {
  font-size: 16px;
}

.message-body ul,
.message-body ol {
  margin: 6px 0 10px;
  padding-left: 22px;
}

.message-body li {
  margin-bottom: 3px;
}

.message-body code {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
}

.message.user .message-body code {
  background: rgba(0, 0, 0, 0.08);
}

.message-body pre {
  background: rgba(0, 0, 0, 0.25);
  padding: 10px 12px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 8px 0;
}

.message-body pre code {
  background: transparent;
  padding: 0;
}

.message-body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.message-body strong {
  font-weight: 700;
}

.message-body hr {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 14px 0;
}

.message.user {
  background: var(--bubble-user-bg);
  color: var(--bubble-user-text);
}

.message.assistant {
  background: var(--bubble-assistant-bg);
  color: var(--bubble-assistant-text);
}

.message.error {
  background: #ffe4dc;
  color: var(--cta);
  border: 1px solid var(--cta);
}

[data-theme="dark"] .message.error {
  background: #3a1a14;
  color: #ff8a6a;
}

.message .role-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.55;
  margin-bottom: 6px;
  font-weight: 600;
}

.thinking {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  max-width: var(--max-content-width);
  margin: 0 auto;
  color: var(--surface-text);
  opacity: 0.85;
}

/* Bear paws walking — three paws fade in/out with stagger,
   alternating tilt to look like footsteps. Subtle: olive in dark, forest
   in light, max opacity ~0.5. CTA orange is reserved for buttons. */
.thinking .paw {
  display: inline-flex;
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: translateY(2px) rotate(-12deg);
  animation: paw-step 1.6s ease-in-out infinite;
  color: var(--forest-night, currentColor);
}
.thinking .paw.alt {
  transform: translateY(-2px) rotate(12deg);
}
.thinking .paw svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.thinking .paw:nth-child(1) { animation-delay: 0s; }
.thinking .paw:nth-child(2) { animation-delay: 0.22s; }
.thinking .paw:nth-child(3) { animation-delay: 0.44s; }

@keyframes paw-step {
  0%, 75%, 100% { opacity: 0; }
  25%, 55%      { opacity: 0.45; }
}

/* Dark mode — olive (the brand neutral). CTA orange stays exclusive to buttons. */
[data-theme="dark"] .thinking .paw {
  color: var(--olive, #a3a883);
}

@media (prefers-reduced-motion: reduce) {
  .thinking .paw {
    animation: none;
    opacity: 0.6;
  }
}

/* Generic composer (kept simple as fallback for non-chat contexts) */
.composer {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  background: var(--surface-bg);
  flex-shrink: 0;
}

.composer textarea {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--surface-input-border);
  border-radius: 10px;
  background: var(--surface-input-bg);
  color: var(--surface-text);
  resize: vertical;
  min-height: 48px;
  max-height: 200px;
  font-family: inherit;
}

/* Composer textarea uses the global focus rule. */

/* ===== Chat composer — modern app-style: floating, centered, rounded ===== */
#chat-panel .composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 24px 24px;
  background: var(--surface-bg);
  flex-shrink: 0;
  max-width: calc(var(--max-chat-width) + 48px);
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#chat-panel .composer::before {
  /* Subtle fade so messages above feel like they "go under" the composer */
  content: "";
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(to bottom, transparent, var(--surface-bg));
  pointer-events: none;
}

#chat-panel .composer textarea {
  flex: 1;
  padding: 14px 18px;
  border: 1px solid var(--surface-input-border);
  border-radius: 16px;
  background: var(--surface-elevated);
  color: var(--surface-text);
  resize: none;
  min-height: 52px;
  max-height: 240px;
  font-family: inherit;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

#chat-panel .composer textarea::placeholder {
  color: var(--surface-text-muted);
}

#chat-panel .composer textarea:focus {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

#chat-panel .composer button {
  padding: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--cta);
  color: white;
  cursor: pointer;
  align-self: flex-end;
  margin-bottom: 4px;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    filter 0.15s ease,
    transform 0.1s ease;
  flex-shrink: 0;
}

#chat-panel .composer button::before {
  /* Send arrow icon (paper-plane), painted via CSS mask so it inherits 'color: white' */
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 11.5L20 4l-7.5 16.5-2-7.5-7-1.5z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 11.5L20 4l-7.5 16.5-2-7.5-7-1.5z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

#chat-panel .composer button:hover:not(:disabled) {
  filter: brightness(0.95);
  transform: scale(1.05);
}

#chat-panel .composer button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Hide the literal "Send" text — paper-plane icon does the job */
#chat-panel .composer button {
  text-indent: -9999px;
}

/* ============================================================
   TABULEIRO v2 — multi-view boards (Table / Chart / Canvas)
   ============================================================ */
#board-panel {
  overflow: hidden;
}

.board-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-bg);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.board-title-area {
  display: flex;
  align-items: center;
  gap: 8px;
}

.board-select {
  padding: 8px 12px;
  border: 1px solid var(--surface-input-border);
  border-radius: 8px;
  background: var(--surface-input-bg);
  color: var(--surface-text);
  font-size: 14px;
  font-weight: 500;
  min-width: 220px;
}

/* Tabuleiro view toggle — Sahara capsule pattern */
.view-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--cream);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.view-btn {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--forest);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.view-btn:hover {
  background: rgba(61, 68, 30, 0.08);
}

.view-btn.active {
  background: var(--forest-night);
  color: var(--cream);
}

.view-btn.active:hover {
  background: var(--forest-night);
}

.board-actions {
  display: flex;
  gap: 8px;
}

.board-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.board-view {
  flex: 1;
  overflow: auto;
  padding: 24px 32px;
  background: var(--surface-bg);
}

.board-view-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--surface-text-muted);
}

/* ----- Table view ----- */
.board-table {
  width: 100%;
  max-width: 960px;
  border-collapse: collapse;
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 14px;
}

.board-table thead th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--surface-text-muted);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-card);
}

.board-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--surface-border);
  vertical-align: middle;
}

.board-table tbody tr:last-child td {
  border-bottom: 0;
}

.board-table .col-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 16px;
}

.board-table .col-meta {
  font-size: 12px;
  color: var(--surface-text-muted);
}

.board-table .filter-chip {
  display: inline-block;
  padding: 1px 7px;
  background: var(--surface-card);
  border-radius: 4px;
  font-size: 11px;
  color: var(--surface-text-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.row-delete-btn {
  background: transparent;
  border: 0;
  color: var(--surface-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.board-table tbody tr:hover .row-delete-btn {
  opacity: 1;
}

.row-delete-btn:hover {
  color: var(--cta);
  background: var(--surface-card);
}

/* ----- Chart view (horizontal bars) ----- */
.board-chart-list {
  max-width: 800px;
}

.bar-row {
  display: grid;
  grid-template-columns: 220px 1fr 100px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-border);
}

.bar-row:last-child {
  border-bottom: 0;
}

.bar-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--surface-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track {
  height: 20px;
  background: var(--surface-card);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--cta);
  transition: width 0.4s ease;
  border-radius: 4px;
}

.bar-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  text-align: right;
}

/* ----- Canvas view (FigJam-style) ----- */
.board-canvas-wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - 200px);
  background:
    radial-gradient(circle, var(--surface-border) 1px, transparent 1px) 0 0 /
      24px 24px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: grab;
}

.board-canvas-wrap.panning {
  cursor: grabbing;
}

.board-canvas {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

.canvas-edges-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.canvas-edge {
  stroke: var(--surface-input-border);
  stroke-width: 2;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
}

.canvas-edge:hover {
  stroke: var(--cta);
  stroke-width: 3;
}

.canvas-node {
  position: absolute;
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 180px;
  max-width: 240px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: move;
  user-select: none;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.canvas-node:hover {
  border-color: var(--olive);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.canvas-node.connecting-source {
  border-color: var(--cta);
  box-shadow: 0 0 0 3px rgba(210, 69, 30, 0.2);
}

.canvas-node-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--surface-text-muted);
  font-weight: 700;
  margin-bottom: 4px;
}

.canvas-node-value {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}

.canvas-node-meta {
  font-size: 11px;
  color: var(--surface-text-muted);
}

.canvas-node-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.canvas-node:hover .canvas-node-actions {
  opacity: 1;
}

.canvas-node-actions button {
  background: transparent;
  border: 0;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--surface-text-muted);
  font-size: 14px;
  line-height: 1;
}

.canvas-node-actions button:hover {
  background: var(--surface-card);
  color: var(--surface-text);
}

.canvas-help {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--surface-text-muted);
  pointer-events: none;
}

/* ----- Add Query modal ----- */
.add-query-body {
  padding: 20px 24px 24px;
}

.add-query-body label.form-label {
  margin-top: 12px;
}

.add-query-body label.form-label:first-child {
  margin-top: 0;
}

.add-query-body input,
.add-query-body select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--surface-input-border);
  border-radius: 8px;
  background: var(--surface-input-bg);
  color: var(--surface-text);
  font-size: 14px;
  margin-bottom: 6px;
}

.aq-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.aq-preview {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-card);
  border-radius: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.aq-preview-value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ----- Suggested queries panel (shown when board is empty) ----- */
.suggested-panel {
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.suggested-panel h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}

.suggested-panel .muted-info {
  margin-bottom: 16px;
  display: block;
  font-size: 13px;
}

.suggested-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.suggested-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.suggested-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-card);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.suggested-list .sq-label {
  flex: 1;
  font-weight: 500;
}

.suggested-list .sq-note {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--surface-text-muted);
  padding-top: 2px;
}

.sq-add-btn {
  background: transparent;
  border: 1px solid var(--surface-input-border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--surface-text);
}

.sq-add-btn:hover {
  background: var(--surface-elevated);
  border-color: var(--cta);
  color: var(--cta);
}

/* ----- Star (favorite) icon ----- */
.fav-star {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  color: var(--surface-text-muted);
  transition:
    color 0.15s ease,
    transform 0.1s ease;
}

.fav-star:hover {
  transform: scale(1.15);
}

.fav-star.is-favorite {
  color: #f5b942;
}

.fav-star.is-favorite:hover {
  color: #f5b942;
}

/* Star inside the table */
.board-table .col-fav {
  width: 30px;
  padding-right: 4px;
  text-align: center;
}

/* Star inside chart bars */
.bar-row .fav-star {
  margin-left: -8px;
  margin-right: 2px;
}

/* Star inside canvas node */
.canvas-node .fav-star {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 14px;
  padding: 2px;
}

/* Special board indicator (★ in dropdown) */
.board-select option[data-fav="1"] {
  font-weight: 700;
}

/* ============================================================
   LAB — Copy Creator
   ============================================================ */
#lab-panel {
  overflow-y: auto;
}

.lab-content {
  padding: 24px 32px 40px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.lab-form {
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 24px;
}

/* Mode pill: Email | Copy | Image — uses Sahara capsule pattern */
.lab-mode-pill {
  display: inline-flex;
  align-items: center;
  background: var(--cream);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 18px;
}

.lab-mode-btn {
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--forest);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.lab-mode-btn:hover {
  background: rgba(61, 68, 30, 0.08);
}

.lab-mode-btn.active {
  background: var(--forest-night);
  color: var(--cream);
}

.lab-mode-btn.active:hover {
  background: var(--forest-night);
}

/* Always-visible action row at the bottom of the lab form */
.lab-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--surface-border);
  flex-wrap: wrap;
}

.lab-actions-buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.lab-actions-row .error {
  margin: 0;
  flex: 1;
  min-width: 200px;
}

/* Sub-toggle within Image mode — Sahara capsule pattern, smaller variant */
.image-submode-pill {
  display: inline-flex;
  align-items: center;
  background: var(--cream);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 6px;
}

.image-submode-btn {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--forest);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.image-submode-btn:hover {
  background: rgba(61, 68, 30, 0.08);
}

.image-submode-btn.active {
  background: var(--forest-night);
  color: var(--cream);
}

.lab-image-drop {
  border: 2px dashed var(--surface-input-border);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
  margin-bottom: 14px;
}

.lab-image-drop:hover,
.lab-image-drop:focus-visible,
.lab-image-drop.dragover {
  border-color: var(--cta);
  background: var(--surface-card);
  outline: none;
}

.lab-image-drop-prompt {
  color: var(--surface-text-muted);
  font-size: 13px;
}

.lab-image-preview {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lab-image-preview img {
  max-width: 220px;
  max-height: 220px;
  border-radius: 8px;
  display: block;
}

/* ===== Image critique output ===== */
.image-critique-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 720px) {
  .image-critique-grid {
    grid-template-columns: 1fr;
  }
}

.image-critique-img {
  border-radius: 10px;
  background: var(--surface-card);
  padding: 8px;
  border: 1px solid var(--surface-border);
}

.image-critique-img img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.image-verdict-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
}

.verdict-use_it {
  background: rgba(136, 163, 94, 0.25);
  color: #88a35e;
}

.verdict-edit_it {
  background: rgba(245, 185, 66, 0.2);
  color: #d49500;
}

.verdict-replace_it {
  background: rgba(210, 69, 30, 0.2);
  color: var(--cta);
}

.image-strengths,
.image-violations {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.image-strengths li,
.image-violations li {
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 13px;
}

.image-strengths li {
  background: rgba(136, 163, 94, 0.1);
  border-left: 3px solid #88a35e;
}

.image-violations li {
  background: rgba(210, 69, 30, 0.08);
  border-left: 3px solid var(--cta);
}

.image-traits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.image-trait {
  background: var(--surface-card);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
}

.image-trait-label {
  color: var(--surface-text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.image-trait-value {
  font-weight: 600;
  margin-top: 2px;
}

.image-trait.aligned .image-trait-value::after {
  content: " ✓";
  color: #88a35e;
}

.image-trait.misaligned .image-trait-value::after {
  content: " ✗";
  color: var(--cta);
}

.lab-field {
  margin-bottom: 14px;
}

.lab-field input[type="text"],
.lab-field textarea,
.lab-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--surface-input-border);
  border-radius: 8px;
  background: var(--surface-input-bg);
  color: var(--surface-text);
  font-size: 14px;
  font-family: inherit;
}

.lab-field textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.5;
}

/* Lab fields use the global focus rule. */

.lab-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

#lab-analyse-btn {
  height: 42px;
  padding: 0 20px;
  white-space: nowrap;
}

#lab-clear-btn {
  height: 42px;
  padding: 0 14px;
  white-space: nowrap;
}

/* ----- Inbox preview block ----- */
.lab-preview-block {
  margin: 18px 0 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--surface-border);
}

.lab-preview-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.lab-preview-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 720px) {
  .lab-preview-grid {
    grid-template-columns: 1fr;
  }
}

.lab-preview-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.preview-device-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--surface-text-muted);
  font-weight: 700;
}

.preview-frame {
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Mobile frame — iPhone Mail-ish, narrow */
.preview-frame-mobile {
  max-width: 320px;
}

.preview-frame-mobile .preview-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.preview-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.preview-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.preview-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--surface-text-muted);
  margin-bottom: 2px;
}

.preview-sender {
  font-weight: 600;
  color: var(--surface-text);
  font-size: 14px;
}

.preview-time {
  font-size: 11px;
  flex-shrink: 0;
  margin-left: 8px;
}

.preview-subject {
  font-size: 14px;
  font-weight: 600;
  color: var(--surface-text);
  margin: 1px 0;
}

.preview-pre {
  font-size: 13px;
  color: var(--surface-text-muted);
}

.preview-empty {
  opacity: 0.4;
  font-style: italic;
}

/* Desktop frame — Gmail-ish, single row */
.preview-frame-desktop .preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}

.preview-checkbox {
  flex-shrink: 0;
  margin: 0;
}

.preview-sender-d {
  font-weight: 600;
  color: var(--surface-text);
  width: 130px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-subject-d {
  font-weight: 600;
  color: var(--surface-text);
  flex-shrink: 0;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-dash {
  color: var(--surface-text-muted);
  flex-shrink: 0;
}

.preview-pre-d {
  flex: 1;
  color: var(--surface-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.preview-time-d {
  font-size: 11px;
  color: var(--surface-text-muted);
  flex-shrink: 0;
  margin-left: 8px;
}

.lab-examples {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--surface-border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.lab-examples-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--surface-text-muted);
  font-weight: 700;
  padding-top: 6px;
  white-space: nowrap;
}

.lab-examples-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.lab-example-chip {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  color: var(--surface-text);
  padding: 5px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.lab-example-chip:hover {
  border-color: var(--cta);
  color: var(--cta);
}

.lab-example-chip.bad-example {
  /* "What NOT to do" examples — subtle red tint */
  border-color: rgba(210, 69, 30, 0.3);
}

.lab-example-chip.bad-example::before {
  content: "✕ ";
  color: var(--cta);
  font-weight: 700;
}

.lab-output {
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.axes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.axis-card {
  background: var(--surface-card);
  padding: 14px 16px;
  border-radius: 10px;
}

.axis-card h4 {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--surface-text-muted);
  font-weight: 700;
}

.axis-score {
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.axis-score-suffix {
  font-size: 14px;
  color: var(--surface-text-muted);
  margin-left: 4px;
  font-weight: 500;
}

.axis-bar {
  height: 6px;
  background: var(--surface-bg);
  border-radius: 3px;
  overflow: hidden;
  margin: 10px 0;
}

.axis-bar-fill {
  height: 100%;
  background: var(--cta);
  transition: width 0.3s ease;
}

.axis-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  background: var(--surface-bg);
  color: var(--surface-text-muted);
  margin-bottom: 6px;
}

.axis-tag-barrier {
  background: rgba(210, 69, 30, 0.18);
  color: var(--cta);
}

.axis-tag-solution {
  background: rgba(163, 168, 131, 0.3);
  color: var(--surface-text);
}

.axis-explanation {
  font-size: 12px;
  color: var(--surface-text-muted);
  line-height: 1.5;
  margin-top: 8px;
}

.person-bars {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  margin: 10px 0 8px;
}

.person-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  transition: width 0.3s ease;
}

.person-bar-1st {
  background: var(--forest);
}
.person-bar-2nd {
  background: var(--olive);
  color: var(--forest-night);
}
.person-bar-3rd {
  background: var(--cta);
}

.lab-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--surface-border);
}

.lab-section h3 {
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--surface-text-muted);
  font-weight: 700;
}

.rewrite-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rewrite-list li {
  padding: 10px 14px;
  background: var(--surface-card);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  border-left: 3px solid var(--cta);
}

.match-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.match-pill-yes {
  background: rgba(163, 168, 131, 0.3);
  color: var(--surface-text);
}

.match-pill-no {
  background: rgba(210, 69, 30, 0.18);
  color: var(--cta);
}

.critique {
  font-size: 14px;
  line-height: 1.6;
  background: var(--surface-card);
  padding: 14px 16px;
  border-radius: 8px;
}

.subsection-h {
  margin: 14px 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--surface-text);
  font-weight: 700;
  opacity: 0.85;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.mini-card {
  background: var(--surface-card);
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--olive);
}

.mini-card.mini-good {
  border-left-color: #88a35e;
}

.mini-card.mini-ok {
  border-left-color: var(--olive);
}

.mini-card.mini-warning {
  border-left-color: var(--cta);
}

.mini-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--surface-text-muted);
  font-weight: 700;
  margin-bottom: 4px;
}

.mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.mini-score {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 50px;
}

.mini-score small {
  font-size: 11px;
  font-weight: 500;
  color: var(--surface-text-muted);
}

.mini-bar {
  flex: 1;
  height: 4px;
  background: var(--surface-bg);
  border-radius: 2px;
  overflow: hidden;
}

.mini-bar-fill {
  height: 100%;
  background: var(--cta);
  transition: width 0.3s ease;
}

.mini-explanation {
  font-size: 11px;
  color: var(--surface-text-muted);
  line-height: 1.4;
  margin-top: 4px;
}

.entman-bars {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  margin: 6px 0 8px;
}

.entman-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.3s ease;
}

.entman-problem {
  background: var(--cta);
}

.entman-cause {
  background: var(--forest);
}

.entman-moral {
  background: var(--olive);
  color: var(--forest-night);
}

.entman-solution {
  background: #88a35e;
}

/* ----- Sliders for "rewrite to targets" ----- */
.sliders-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 14px;
}

/* Collapsible "Deep analysis" — hidden by default, expand on click */
.lab-deep-details {
  margin-top: 18px;
  border-top: 1px solid var(--surface-border);
  padding-top: 16px;
}

.lab-deep-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-card);
  transition: background 0.12s ease;
}

.lab-deep-details > summary::-webkit-details-marker {
  display: none;
}

.lab-deep-details > summary:hover {
  background: var(--surface-elevated);
}

.lab-deep-details > summary::before {
  content: "▸";
  font-size: 12px;
  color: var(--surface-text-muted);
  transition: transform 0.15s ease;
  display: inline-block;
}

.lab-deep-details[open] > summary::before {
  transform: rotate(90deg);
}

.deep-summary-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--surface-text);
}

.deep-summary-meta {
  font-size: 11px;
  color: var(--surface-text-muted);
  flex: 1;
}

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

.sliders-card-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--surface-text-muted);
}

.sliders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 18px;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--surface-text);
  width: 90px;
  flex-shrink: 0;
}

.slider-input {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface-bg);
  height: 4px;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cta);
  cursor: pointer;
  border: 2px solid var(--surface-elevated);
}

.slider-input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cta);
  cursor: pointer;
  border: 2px solid var(--surface-elevated);
}

.slider-value {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 24px;
  text-align: right;
  color: var(--surface-text);
}

.slider-delta {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  width: 32px;
  text-align: right;
  color: var(--surface-text-muted);
}

.slider-delta.positive {
  color: #88a35e;
}
.slider-delta.negative {
  color: var(--cta);
}

.rewrite-banner {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--surface-bg);
  border: 1px dashed var(--olive);
  border-radius: 8px;
  font-size: 12px;
  color: var(--surface-text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.rewrite-banner-actions {
  display: flex;
  gap: 8px;
}

/* ============================================================
   PROFILE
   ============================================================ */
.profile-form {
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  max-width: 520px;
}

.profile-form .form-label,
.form-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--surface-text-muted);
  font-weight: 700;
  margin-bottom: 6px;
}

.profile-form input[type="text"],
.profile-form input[type="email"],
.profile-form input[type="password"],
.onboarding-body input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--surface-input-border);
  border-radius: 8px;
  background: var(--surface-input-bg);
  color: var(--surface-text);
  font-size: 14px;
  margin-bottom: 14px;
  font-family: inherit;
}

.profile-form input[readonly] {
  opacity: 0.6;
  cursor: default;
}

/* Profile / onboarding inputs use the global focus rule. */

.profile-section {
  margin-bottom: 22px;
}

.profile-section h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--surface-text);
}

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

.profile-status {
  margin-top: 10px;
  font-size: 13px;
  color: var(--surface-text-muted);
}

.profile-status.success {
  color: var(--surface-text);
  background: var(--surface-card);
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--cta);
}

.profile-status.error {
  color: var(--cta);
  background: rgba(210, 69, 30, 0.08);
  padding: 8px 10px;
  border-radius: 6px;
}

.divider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
}

.divider-row::before,
.divider-row::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--surface-border);
}

.divider-row span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--surface-text-muted);
  font-weight: 600;
}

/* ============================================================
   ONBOARDING
   ============================================================ */
.onboarding-body {
  padding: 20px 24px 24px;
}

.onboarding-greeting {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 500;
}

/* ============================================================
   ADMIN
   ============================================================ */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.admin-table thead th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--surface-text-muted);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-card);
}

.admin-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-border);
  vertical-align: middle;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.user-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

.user-status-pending {
  background: rgba(210, 69, 30, 0.15);
  color: var(--cta);
}

.user-status-active {
  background: rgba(163, 168, 131, 0.25);
  color: var(--surface-text);
}

.user-status-rejected {
  background: var(--surface-card);
  color: var(--surface-text-muted);
}

.user-role-admin {
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cta);
  margin-left: 4px;
}

.admin-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-btn {
  padding: 4px 10px;
  border: 1px solid var(--surface-input-border);
  border-radius: 6px;
  background: transparent;
  color: var(--surface-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.admin-btn:hover {
  background: var(--surface-card);
}

.admin-btn-primary {
  background: var(--cta);
  color: white;
  border-color: var(--cta);
}

.admin-btn-primary:hover {
  filter: brightness(0.95);
  background: var(--cta);
}

/* ============================================================
   IMAGE TRACKER
   ============================================================ */
#tracker-panel {
  overflow-y: auto;
}

.tracker-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--surface-border);
  flex-shrink: 0;
}

.primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--cta);
  color: white;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition:
    filter 0.15s ease,
    transform 0.1s ease;
}

.primary-btn:hover:not(:disabled) {
  filter: brightness(0.95);
}

.primary-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.primary-btn svg {
  width: 16px;
  height: 16px;
}

.muted-info {
  color: var(--surface-text-muted);
  font-size: 13px;
}

.tracker-list {
  padding: 8px 16px 32px;
  flex: 1;
  overflow-y: auto;
}

.batch-progress {
  margin: 8px 16px 0;
  padding: 12px 16px;
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
}

.batch-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.batch-progress-text {
  font-size: 13px;
  font-weight: 500;
}

.batch-cancel-btn {
  background: transparent;
  border: 1px solid var(--surface-input-border);
  color: var(--surface-text);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.batch-cancel-btn:hover {
  background: var(--surface-card);
}

.batch-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-card);
  overflow: hidden;
}

.batch-progress-fill {
  height: 100%;
  background: var(--cta);
  transition: width 0.2s ease;
}

.campaign-images-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0 18px 8px;
  background: var(--surface-bg);
  border-top: 1px solid var(--surface-border);
  margin-top: -1px;
}

.campaign-images-toolbar button {
  font-size: 12px;
  padding: 5px 10px;
}

.campaign-card {
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  margin: 8px 0;
  overflow: hidden;
}

.campaign-card-header {
  display: grid;
  grid-template-columns: 110px 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.campaign-card-header:hover {
  background: var(--surface-card);
}

.campaign-date {
  font-size: 12px;
  color: var(--surface-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.campaign-name {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-stat {
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 80px;
}

.campaign-stat-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--surface-text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}

.campaign-images {
  padding: 16px 18px;
  border-top: 1px solid var(--surface-border);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  background: var(--surface-bg);
}

.campaign-image {
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--surface-card);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  transition:
    border-color 0.12s ease,
    transform 0.12s ease;
}

.campaign-image:hover {
  border-color: var(--olive);
  transform: scale(1.02);
}

.campaign-image.tagged::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: var(--cta);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.tracker-error {
  padding: 14px 18px;
  background: #ffe4dc;
  color: var(--cta);
  border-radius: var(--radius);
  border: 1px solid var(--cta);
  margin: 8px 0;
}

[data-theme="dark"] .tracker-error {
  background: #3a1a14;
  color: #ff8a6a;
}

/* ============================================================
   INSIGHTS
   ============================================================ */
#insights-panel {
  overflow-y: auto;
}

.insights-content {
  padding: 24px 32px 40px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* Overview cards */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.stat-card-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--surface-text-muted);
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-card-value {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stat-card-sub {
  font-size: 12px;
  color: var(--surface-text-muted);
  margin-top: 2px;
}

/* Section heading */
.insights-section {
  margin-bottom: 32px;
}

.insights-section h2 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--surface-text-muted);
}

/* Tag performance table */
.tag-perf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}

.tag-perf-card {
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.tag-perf-card h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

.perf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.perf-table thead th {
  text-align: right;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--surface-text-muted);
  font-weight: 600;
  padding: 4px 8px;
  border-bottom: 1px solid var(--surface-border);
}

.perf-table thead th:first-child {
  text-align: left;
}

.perf-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--surface-border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.perf-table tbody tr:last-child td {
  border-bottom: 0;
}

.perf-table tbody td:first-child {
  text-align: left;
  text-transform: capitalize;
}

.perf-table tbody tr.low-n {
  opacity: 0.55;
}

.low-n-badge {
  display: inline-block;
  font-size: 9px;
  background: var(--surface-card);
  color: var(--surface-text-muted);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Top campaigns table */
.top-campaigns {
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.top-campaigns table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.top-campaigns thead th {
  text-align: right;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--surface-text-muted);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-card);
}

.top-campaigns thead th:first-child,
.top-campaigns thead th:nth-child(2) {
  text-align: left;
}

.top-campaigns tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.top-campaigns tbody tr:last-child td {
  border-bottom: 0;
}

.top-campaigns tbody td:first-child,
.top-campaigns tbody td:nth-child(2) {
  text-align: left;
}

.top-campaigns tbody td:nth-child(2) {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tagging progress */
.progress-list {
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 4px 0;
}

.progress-row {
  display: grid;
  grid-template-columns: 1fr 80px 110px;
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--surface-border);
  font-size: 13px;
}

.progress-row:last-child {
  border-bottom: 0;
}

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

.progress-row .progress-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--surface-text-muted);
}

.progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-card);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--cta);
  transition: width 0.3s ease;
}

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

.section-toolbar h2 {
  margin: 0;
}

/* Tabs — same Sahara capsule pattern, ultra-compact */
.tabs {
  display: inline-flex;
  align-items: center;
  background: var(--cream);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.tab-btn {
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--forest);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.tab-btn:hover {
  background: rgba(61, 68, 30, 0.08);
}

.tab-btn.active {
  background: var(--forest-night);
  color: var(--cream);
}

/* ============================================================
   TAG MODAL
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.modal-content {
  position: relative;
  background: var(--surface-bg);
  color: var(--surface-text);
  border-radius: var(--radius);
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--surface-border);
  flex-shrink: 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.modal-close {
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--surface-text-muted);
  padding: 0 4px;
}

.modal-close:hover {
  color: var(--surface-text);
}

.modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.modal-image-wrap {
  background: var(--surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  border-right: 1px solid var(--surface-border);
}

.modal-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.tag-form {
  overflow-y: auto;
  padding: 18px 22px 22px;
}

.tag-form-section {
  margin-bottom: 20px;
}

.tag-form-section h3 {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--surface-text-muted);
  font-weight: 700;
}

.tag-field {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.tag-field label {
  font-size: 13px;
  font-weight: 500;
}

.tag-field select,
.tag-field input[type="text"],
.tag-field input[type="number"],
.tag-field textarea {
  padding: 7px 10px;
  border: 1px solid var(--surface-input-border);
  border-radius: 7px;
  background: var(--surface-input-bg);
  color: var(--surface-text);
  font-size: 13px;
  width: 100%;
  font-family: inherit;
}

.tag-field textarea {
  resize: vertical;
  min-height: 56px;
  line-height: 1.4;
}

/* Tag-modal fields use the global focus rule. */

/* Text-in-image field stretches across both columns of the modal grid */
.tag-form-section:has(textarea) .tag-field {
  grid-template-columns: 110px 1fr;
}

.auto-tag-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-card);
  border-radius: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.auto-tag-bar .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.auto-tag-icon {
  font-size: 14px;
}

.tag-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--surface-border);
  position: sticky;
  bottom: 0;
  background: var(--surface-bg);
}

.btn-secondary {
  padding: 8px 16px;
  border: 1px solid var(--surface-input-border);
  border-radius: 999px;
  background: transparent;
  color: var(--surface-text);
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.btn-secondary:hover {
  background: var(--surface-card);
  border-color: var(--olive);
}

@media (max-width: 720px) {
  .modal-body {
    grid-template-columns: 1fr;
  }
  .modal-image-wrap {
    border-right: 0;
    border-bottom: 1px solid var(--surface-border);
    max-height: 40vh;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .sidebar {
    width: 64px;
    padding: 16px 0;
  }
  .logo-sidebar {
    width: 36px;
    padding: 4px 0 16px;
    margin: 0 auto;
  }
  .nav-item span,
  .sidebar-btn span {
    display: none;
  }
  .nav-item,
  .sidebar-btn {
    justify-content: center;
    padding: 10px 0;
  }
}

/* =========================================================
   USAGE — Profile card + Admin team table + drill-down modal
   ========================================================= */

.muted-suffix {
  font-weight: 400;
  color: var(--surface-text-muted);
  font-size: 0.85em;
  margin-left: 4px;
}

/* Three-up summary cards (7d / 30d / all-time). */
.usage-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 4px 0 18px;
}
.usage-stat {
  background: var(--surface-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  border: 1px solid var(--surface-border);
}
.usage-stat-label {
  font-size: 12px;
  color: var(--surface-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.usage-stat-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--surface-text);
}
.usage-stat-unit {
  font-size: 14px;
  font-weight: 400;
  color: var(--surface-text-muted);
}
.usage-stat-sub {
  font-size: 12px;
  color: var(--surface-text-muted);
  margin-top: 4px;
}

.usage-recent-header {
  margin: 18px 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--surface-text-muted);
  font-weight: 600;
}

/* Generic usage table (Profile recent + drill-down recent). */
.usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.usage-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--surface-text-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--surface-border);
}
.usage-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--surface-border);
  vertical-align: top;
}
.usage-table tbody tr:last-child td {
  border-bottom: none;
}
.usage-when { white-space: nowrap; color: var(--surface-text-muted); }
.usage-prompt {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.usage-tokens, .usage-cost {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Tool badges. */
.usage-tool {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
}
.usage-tool.tool-saharaman    { background: rgba(61, 68, 30, 0.15); border-color: rgba(61, 68, 30, 0.3); }
.usage-tool.tool-calibrator   { background: rgba(210, 69, 30, 0.15); border-color: rgba(210, 69, 30, 0.3); }
.usage-tool.tool-tracks,
.usage-tool.tool-tracks_batch { background: rgba(163, 168, 131, 0.2); border-color: rgba(163, 168, 131, 0.4); }

/* Team usage table (admin). */
.usage-team-totals {
  display: flex;
  gap: 28px;
  padding: 14px 16px;
  background: var(--surface-card);
  border-radius: var(--radius);
  border: 1px solid var(--surface-border);
  margin-bottom: 14px;
}
.usage-team-totals > div {
  display: flex;
  flex-direction: column;
}
.usage-team-totals .muted {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--surface-text-muted);
}
.usage-team-totals strong {
  font-size: 20px;
  font-weight: 600;
}
.usage-team-table tbody tr.usage-row { cursor: pointer; }
.usage-team-table tbody tr.usage-row:hover { background: var(--surface-card); }
.usage-row-email {
  font-size: 11px;
  color: var(--surface-text-muted);
}
.usage-team-hint {
  font-size: 12px;
  color: var(--surface-text-muted);
  margin-top: 8px;
  font-style: italic;
}

/* Drill-down modal — overrides default modal-content width.
   The base .modal-content sets `width: min(960px, calc(100vw - 32px))`,
   we just override the body padding so usage tables breathe. */
.modal-card-wide .modal-body {
  padding: 18px 20px 20px;
  overflow-y: auto;
}

@media (max-width: 700px) {
  .usage-summary { grid-template-columns: 1fr; }
  .usage-team-totals { flex-direction: column; gap: 10px; }
  .usage-prompt { max-width: 200px; }
}

/* =========================================================
   FLARE — sidebar button, badge, modal, admin triage cards
   ========================================================= */

/* Sidebar button — sits in .sidebar-footer above user-chip.
   Quietly bold: a slim accent border hints "this does something". */
.sidebar-flare {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: transparent;
  color: var(--sidebar-text);
  border: 1px dashed rgba(246, 244, 235, 0.18);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  transition: border-color 120ms, background 120ms;
}
.sidebar-flare:hover {
  border-color: var(--cta);
  background: rgba(210, 69, 30, 0.08);
}
.sidebar-flare svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--cta);
}
.sidebar-flare span:nth-of-type(1) {
  font-weight: 600;
}
.sidebar-flare-hint {
  font-size: 11px;
  color: var(--sidebar-text-muted);
  margin-left: auto;
}

/* Admin nav badge — count of open flares. */
.nav-badge {
  display: inline-block;
  margin-left: auto;
  background: var(--cta);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  line-height: 1.2;
}

/* Flare modal-specific — re-uses .modal/.modal-content styles */
.flare-intro {
  font-size: 13px;
  color: var(--surface-text-muted);
  margin: 0 0 14px;
}

/* Admin Flares section */
.flare-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
}
.flare-stat-pill,
.flare-status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.flare-pill-open         { background: rgba(210, 69, 30, 0.18); color: var(--cta); }
.flare-pill-considering  { background: rgba(163, 168, 131, 0.25); color: var(--olive); }
.flare-pill-planned      { background: rgba(61, 68, 30, 0.18); color: var(--forest); }
.flare-pill-done         { background: rgba(61, 68, 30, 0.35); color: var(--forest); }
.flare-pill-rejected     { background: var(--surface-card); color: var(--surface-text-muted); }
[data-theme="dark"] .flare-pill-planned { color: var(--olive); }
[data-theme="dark"] .flare-pill-done    { color: var(--olive); background: rgba(163, 168, 131, 0.3); }

.flare-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flare-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.flare-card.flare-status-open       { border-left-color: var(--cta); }
.flare-card.flare-status-considering { border-left-color: var(--olive); }
.flare-card.flare-status-planned    { border-left-color: var(--forest); }
.flare-card.flare-status-done       { border-left-color: var(--forest); opacity: 0.7; }
.flare-card.flare-status-rejected   { opacity: 0.55; }

.flare-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.flare-cat {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--surface-text-muted);
  font-size: 11px;
}
.flare-from {
  margin-left: auto;
  color: var(--surface-text-muted);
  font-size: 11px;
}
.flare-title {
  margin: 4px 0 6px;
  font-size: 15px;
  font-weight: 600;
}
.flare-desc {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--surface-text);
  line-height: 1.5;
  white-space: pre-wrap;
}
.flare-decided {
  font-size: 11px;
  color: var(--surface-text-muted);
  margin-bottom: 4px;
}
.flare-notes {
  font-size: 12px;
  color: var(--surface-text);
  background: var(--surface-elevated);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 6px 0 10px;
  font-style: italic;
}
.flare-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.flare-action {
  font-size: 12px;
  padding: 5px 10px;
}

/* =========================================================
   FIELD NOTES — journal-style weekly highlights page
   ========================================================= */

.notes-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 4px 40px;
}

/* Eyebrow label — uppercase Inter, spaced. Replaces the old "// stamp" style. */
.notes-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--surface-text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.notes-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--surface-border);
}
.notes-week {
  margin: 4px 0 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.notes-totals {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.notes-total {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.notes-total-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--surface-text-muted);
  font-weight: 600;
}
.notes-total strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.delta-up   { color: #4a7c1c; font-size: 11px; margin-left: 2px; }
.delta-down { color: var(--cta); font-size: 11px; margin-left: 2px; }
.delta-flat { color: var(--surface-text-muted); font-size: 11px; margin-left: 2px; }
[data-theme="dark"] .delta-up { color: #8fc94e; }

/* Two product cards side by side */
.notes-products-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.notes-product-card {
  background: var(--surface-card);
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid var(--surface-border);
  border-left: 4px solid var(--surface-border);
}
.notes-product-card.notes-product-primary   { border-left-color: var(--cta); }
.notes-product-card.notes-product-secondary { border-left-color: var(--olive); opacity: 0.92; }

.notes-product-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--surface-text-muted);
  margin-bottom: 10px;
  font-weight: 700;
}
.notes-product-body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.notes-product-image {
  flex-shrink: 0;
  width: 160px;
  aspect-ratio: 1;
  background: var(--surface-elevated);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notes-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.notes-product-meta {
  flex: 1;
  min-width: 0;
}
.notes-product-title {
  margin: 4px 0 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

/* Pills — single class, colour variants. Used in product cards and column rows. */
.notes-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.notes-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}
.notes-pill-mini {
  padding: 1px 7px;
  font-size: 9.5px;
}
.notes-pill-series {
  background: rgba(61, 68, 30, 0.14);
  color: var(--forest);
  border-color: rgba(61, 68, 30, 0.22);
}
[data-theme="dark"] .notes-pill-series {
  background: rgba(163, 168, 131, 0.18);
  color: var(--olive);
  border-color: rgba(163, 168, 131, 0.3);
}
.notes-pill-type {
  background: rgba(163, 168, 131, 0.18);
  color: var(--forest-night);
  border-color: rgba(163, 168, 131, 0.3);
}
[data-theme="dark"] .notes-pill-type {
  color: var(--cream);
  background: rgba(246, 244, 235, 0.06);
  border-color: rgba(246, 244, 235, 0.14);
}
.notes-pill-magsafe {
  background: rgba(210, 69, 30, 0.14);
  color: var(--cta);
  border-color: rgba(210, 69, 30, 0.28);
}
.notes-pill-device {
  background: var(--surface-elevated);
  color: var(--surface-text-muted);
  border-color: var(--surface-border);
}
.notes-pill-source {
  background: var(--surface-elevated);
  color: var(--surface-text);
  border-color: var(--surface-border);
}

/* Product stats: side-by-side blocks */
.notes-product-stats {
  display: flex;
  gap: 18px;
  font-size: 13px;
  margin-top: 4px;
}
.notes-product-stats > div {
  display: flex;
  flex-direction: column;
}
.notes-stat-num {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.notes-stat-unit {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--surface-text-muted);
  font-weight: 600;
  margin-top: 2px;
}

/* 3-column lists */
.notes-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.notes-col-title {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--surface-text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--surface-border);
}
.notes-search-list,
.notes-cat-list,
.notes-src-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notes-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--surface-border);
}
.notes-search-row:last-child { border-bottom: none; }
.notes-search-thumb {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--surface-elevated);
  overflow: hidden;
}
.notes-search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.notes-search-title {
  font-size: 12.5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notes-search-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--surface-text-muted);
  margin-top: 4px;
  flex-wrap: wrap;
}
.notes-cat-row,
.notes-src-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--surface-border);
  font-size: 13px;
  gap: 8px;
}
.notes-cat-row:last-child,
.notes-src-row:last-child { border-bottom: none; }
.notes-cat-stat,
.notes-src-stat {
  color: var(--surface-text-muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.notes-cat-stat strong,
.notes-src-stat strong { color: var(--surface-text); font-weight: 600; }

/* ----- Email cards (Field Notes "Last 14 days · email") ----- */
.notes-emails {
  margin: 28px 0;
}
.email-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.email-card {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
}
.email-thumb {
  flex-shrink: 0;
  width: 90px;
  aspect-ratio: 1;
  background: var(--surface-elevated);
  border-radius: 6px;
  overflow: hidden;
}
.email-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.email-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.email-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.email-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-date {
  font-size: 11px;
  color: var(--surface-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.email-perf {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.email-perf strong { font-weight: 700; }
.email-perf .muted { color: var(--surface-text-muted); }
.email-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.brand-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brand-pill-score-good   { background: rgba(74, 124, 28, 0.18);  color: #4a7c1c; }
.brand-pill-score-mid    { background: rgba(163, 168, 131, 0.25); color: var(--forest); }
.brand-pill-score-mixed  { background: rgba(163, 168, 131, 0.18); color: var(--surface-text-muted); }
.brand-pill-score-low    { background: rgba(120, 120, 120, 0.18); color: var(--surface-text-muted); }
.brand-pill-score-none   { background: var(--surface-elevated); color: var(--surface-text-muted); }
[data-theme="dark"] .brand-pill-score-good { color: #8fc94e; }
[data-theme="dark"] .brand-pill-score-mid  { color: var(--olive); }
.brand-label {
  color: var(--surface-text-muted);
  text-transform: lowercase;
}
.brand-trend {
  color: var(--surface-text-muted);
  font-style: italic;
}

.email-card {
  cursor: pointer;
  transition: border-color 120ms, transform 120ms;
}
.email-card:hover { border-color: var(--cta); transform: translateY(-1px); }
.email-card:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

@media (max-width: 700px) {
  .email-card { flex-direction: column; }
  .email-thumb { width: 100%; max-width: 220px; aspect-ratio: 16/9; }
  .email-perf { gap: 12px; }
}

/* ----- Journey modal (campaign drill-down) ----- */
.journey-summary { margin-bottom: 18px; }
.journey-meta { display: flex; flex-direction: column; gap: 10px; }
.journey-perf {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.journey-perf .muted { color: var(--surface-text-muted); }

.journey-section { margin: 22px 0; }
.journey-section-title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--surface-text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--surface-border);
}

.journey-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.journey-image {
  margin: 0;
  background: var(--surface-card);
  border-radius: 8px;
  border: 1px solid var(--surface-border);
  overflow: hidden;
}
.journey-image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--surface-elevated);
  display: block;
}
.journey-image figcaption {
  padding: 8px 10px;
  font-size: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}
.journey-image-pos {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9px;
  color: var(--surface-text-muted);
}
.journey-image-tag {
  background: var(--surface-elevated);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  color: var(--surface-text-muted);
}
.journey-image-text {
  width: 100%;
  margin-top: 4px;
  font-style: italic;
  color: var(--surface-text-muted);
  line-height: 1.3;
}

.journey-totals {
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--surface-text);
}
.journey-orders {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.journey-order {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--olive);
  border-radius: 8px;
  padding: 10px 14px;
}
.journey-order-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 4px;
}
.journey-order-head strong { font-weight: 700; }
.journey-tag-new {
  background: rgba(74, 124, 28, 0.18);
  color: #4a7c1c;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
[data-theme="dark"] .journey-tag-new { color: #8fc94e; }
.journey-code {
  background: rgba(210, 69, 30, 0.14);
  color: var(--cta);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.journey-order-path {
  font-size: 11.5px;
  color: var(--surface-text-muted);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.journey-order-path code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--surface-elevated);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--surface-text);
}
.journey-order-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}
.journey-item {
  background: var(--surface-elevated);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--surface-border);
}

.journey-rankings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 14px;
}
.journey-rankings h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--surface-text-muted);
}
.journey-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.journey-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--surface-border);
}
.journey-list li:last-child { border-bottom: none; }
.journey-list code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  background: var(--surface-elevated);
  padding: 1px 5px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .journey-rankings { grid-template-columns: 1fr; }
}

/* =========================================================
   FINDINGS — discoveries list, detail page, embedded scoped chat
   ========================================================= */

.findings-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin: 0 auto;
  max-width: var(--max-content-width);
}

.finding-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  cursor: pointer;
  transition: border-color 120ms, transform 120ms;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.finding-card:hover {
  border-color: var(--cta);
  transform: translateY(-2px);
}
.finding-card:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}
.finding-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}
.finding-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--cat-color, var(--surface-text-muted));
  color: var(--cream);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.finding-pinned {
  color: var(--cta);
  font-size: 14px;
}
.finding-card-date {
  margin-left: auto;
  color: var(--surface-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.finding-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.finding-card-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--surface-text);
}
.finding-card-cta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--cta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* Finding detail page */
.finding-detail {
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.finding-back {
  margin-bottom: 16px;
  font-size: 12px;
}
.finding-head {
  border-bottom: 1px solid var(--surface-border);
  padding-bottom: 18px;
  margin-bottom: 22px;
}
.finding-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  margin-bottom: 10px;
}
.finding-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.finding-summary {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--surface-text);
  font-style: italic;
}

.finding-share {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.finding-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 7px 12px;
}
.finding-share-btn svg { flex-shrink: 0; }
.finding-share-status {
  font-size: 12px;
  color: var(--surface-text-muted);
  font-style: italic;
}
.finding-share-status.success { color: #4a7c1c; font-style: normal; font-weight: 600; }
[data-theme="dark"] .finding-share-status.success { color: #8fc94e; }
.finding-share-status.error { color: var(--cta); font-style: normal; }
.finding-share-status a { color: var(--cta); text-decoration: underline; }
.finding-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--surface-text);
}
.finding-body h2 {
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.finding-body h3 {
  margin-top: 22px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--surface-text-muted);
}
.finding-body p { margin: 0 0 14px; }
.finding-body ul, .finding-body ol {
  margin: 0 0 14px 22px;
  padding: 0;
}
.finding-body li { margin-bottom: 6px; }
.finding-body strong { font-weight: 700; }
.finding-body code {
  background: var(--surface-card);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}
.finding-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 13px;
}
.finding-body table th,
.finding-body table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--surface-border);
}
.finding-body table th {
  font-weight: 700;
  background: var(--surface-card);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--surface-text-muted);
}

/* Embedded scoped chat */
.finding-chat {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--surface-border);
}
.finding-chat-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--surface-text-muted);
}
.finding-chat-hint {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--surface-text-muted);
  font-style: italic;
}
.finding-messages {
  min-height: 80px;
  max-height: 480px;
  overflow-y: auto;
  margin-bottom: 12px;
  padding: 12px 0;
}
.finding-messages .empty-state {
  background: var(--surface-card);
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px dashed var(--surface-border);
}
.finding-chat-form {
  display: flex;
  gap: 8px;
  padding: 0;
  background: transparent;
}
.finding-chat-form .composer-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--surface-input-border);
  background: var(--surface-input-bg);
  color: var(--surface-text);
  font-family: inherit;
  font-size: 14px;
}
.finding-chat-form .composer-input:focus {
  outline: none;
  border-color: var(--surface-input-focus);
}
.finding-chat-form .primary-btn {
  padding: 10px 22px;
}

.notes-footer {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--surface-border);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--surface-text-muted);
  font-weight: 500;
}

@media (max-width: 900px) {
  .notes-products-grid { grid-template-columns: 1fr; }
  .notes-columns { grid-template-columns: 1fr; }
  .notes-product-body { flex-direction: column; }
  .notes-product-image { width: 100%; max-width: 320px; }
  .notes-totals { gap: 14px; }
  .notes-week { font-size: 22px; }
}