/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   app.css — Evident eDiscovery application styles
   Gemstone Identity: Labradorite Dark + Sapphire accent + Gold highlights
   Scoped under .app-page to avoid bleeding into marketing pages.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Import Gradient System ────────────────────────────────── */
@import url('../../packages/design-tokens/gradients-comprehensive.css');

/* ── Design tokens — Gemstone dark palette ──────────────── */

:root {
  --app-bg: color-mix(in srgb, var(--gem-obsidian-flat, #181818) 62%, var(--gem-labradorite-flat, #2d3f6e));
  --app-surface: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 68%, var(--gem-obsidian-flat, #181818));
  --app-surface-2: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 78%, var(--gem-obsidian-flat, #181818));
  --app-border: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 55%, var(--gem-moonstone-flat, #c0c8e0));
  --app-text: var(--gem-pearl-flat, #ece8e0);
  --app-text-muted: var(--gem-moonstone-flat, #c0c8e0);
  --app-accent: var(--gem-sapphire-flat, #1f3a99);
  --app-accent-hover: var(--gem-blue-topaz-flat, #0288d1);
  --app-success: var(--gem-emerald-flat, #0a6840);
  --app-error: var(--gem-ruby-flat, #9b0020);
  --app-warning: var(--gem-gold-native-flat, #c88c00);
  --app-link: var(--gem-blue-topaz-text, #002540);
  --app-radius: var(--radius-md, 6px);
  --app-radius-lg: var(--radius-lg, 10px);
  --app-font: var(--font-sans, 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif);
}

/* ── Page-level overrides ───────────────────────────────── */

.app-page {
  background:
    radial-gradient(ellipse 80% 50% at 10% 90%, color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 14%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 10%, color-mix(in srgb, var(--gem-tanzanite-flat, #4a2db5) 10%, transparent), transparent 50%),
    radial-gradient(ellipse 90% 60% at 50% 50%, color-mix(in srgb, var(--gem-nuummite-flat, #18180e) 8%, transparent), transparent 70%),
    var(--app-bg);
  color: var(--app-text);
  font-family: var(--app-font);
  min-height: 100vh;
  padding: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AUTH FORMS  (signup, login)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.auth-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 12rem);
  padding: 2rem 1rem;
}

.auth-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 420px;
}

.auth-card--wide {
  max-width: 560px;
}

.auth-card__header {
  text-align: center;
  margin-block-end: 2rem;
}

.auth-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--app-text);
}

.auth-card__subtitle {
  font-size: 0.9rem;
  color: var(--app-text-muted);
  margin: 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.auth-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-text);
}

.auth-input {
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  color: var(--app-text);
  font-size: 0.95rem;
  padding: 0.65rem 0.75rem;
  transition: border-color 0.15s;
}

.auth-input:focus {
  outline: none;
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 22%, transparent);
}

.auth-hint {
  font-size: 0.8rem;
  color: var(--app-text-muted);
  margin: 0;
}

.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--app-accent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: var(--app-radius);
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.auth-btn:hover {
  background: var(--app-accent-hover);
}

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

.auth-btn--sm {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
}

.auth-btn--outline {
  background: transparent;
  border: 1px solid var(--app-border);
  color: var(--app-text);
}

.auth-btn--outline:hover {
  border-color: var(--app-accent);
  color: var(--app-accent);
}

.auth-alert {
  padding: 0.75rem 1rem;
  border-radius: var(--app-radius);
  font-size: 0.9rem;
  margin-block-end: 1rem;
}

.auth-alert--error {
  background: color-mix(in srgb, var(--gem-ruby-flat, #9b0020) 10%, transparent);
  border: 1px solid var(--app-error);
  color: var(--gem-ruby-text, #ffe0e8);
}

.auth-alert--success {
  background: color-mix(in srgb, var(--gem-emerald-flat, #0a6840) 10%, transparent);
  border: 1px solid var(--app-success);
  color: var(--gem-emerald-text, #c8ffe0);
}

.auth-alert--info {
  background: color-mix(in srgb, var(--gem-blue-topaz-flat, #0288d1) 10%, transparent);
  border: 1px solid var(--gem-blue-topaz-flat, #0288d1);
  color: var(--gem-blue-topaz-text, #002540);
}

.auth-footer {
  text-align: center;
  margin-block-start: 1.5rem;
  font-size: 0.9rem;
  color: var(--app-text-muted);
}

.auth-footer--compact {
  margin-block-start: 0.9rem;
}

.auth-footer a {
  color: var(--app-accent);
  text-decoration: none;
}

.auth-footer a:hover {
  text-decoration: underline;
}

.auth-legal {
  text-align: center;
  font-size: 0.8rem;
  color: var(--app-text-muted);
  margin-block-start: 0.75rem;
}

.auth-legal a {
  color: var(--app-accent);
  text-decoration: none;
}

.auth-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--app-text-muted);
  line-height: 1.6;
}

.auth-list {
  margin: 0;
  padding-inline-start: 1.25rem;
  color: var(--app-text);
  display: grid;
  gap: 0.55rem;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
}

.auth-actions[hidden] {
  display: none;
}

.auth-btn--secondary {
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
}

.auth-btn--secondary:hover {
  background: #243252;
}

/* Auth login-method tabs */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--app-border);
  margin-block-end: 1.5rem;
}

.auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 0.65rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.auth-tab:hover {
  color: var(--app-text);
}

.auth-tab--active {
  color: var(--app-text);
  border-bottom-color: var(--app-accent);
}

.auth-input--mono {
  font-family: var(--app-font-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  letter-spacing: -0.02em;
}

.auth-scopes {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--app-text-muted);
}

.auth-scopes__label {
  font-weight: 500;
}

.auth-scopes__or {
  opacity: 0.5;
}

@media (width <= 640px) {
  .auth-card {
    padding: 2rem 1.25rem;
  }

  .auth-actions {
    flex-direction: column;
  }

  .auth-actions .auth-btn {
    width: 100%;
  }
}

.auth-scope-badge {
  background: color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 12%, transparent);
  color: var(--gem-sapphire-text, #d0dcff);
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-family: var(--app-font-mono, ui-monospace, monospace);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DASHBOARD  (app-shell, sidebar, files, pipeline)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.app-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 5rem);
}

@media (width <= 768px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    border-inline-end: none;
    border-block-end: 1px solid var(--app-border);
    max-height: 40vh;
    overflow-y: auto;
  }
}

/* ── Sidebar ────────────────────────────────────────────── */

.app-sidebar {
  background: var(--app-surface);
  border-inline-end: 1px solid var(--app-border);
  padding: 1.25rem;
  overflow-y: auto;
}

.app-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 1rem;
}

.app-sidebar__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--app-text);
}

.app-sidebar__add {
  background: var(--app-accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.app-sidebar__add:hover {
  background: var(--app-accent-hover);
}

.sidebar-form {
  display: flex;
  gap: 0.5rem;
  margin-block-end: 1rem;
}

.sidebar-form .auth-input {
  flex: 1;
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
}

/* ── Case list ──────────────────────────────────────────── */

.case-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.case-list__empty {
  font-size: 0.85rem;
  color: var(--app-text-muted);
  padding: 1rem 0;
}

.case-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: var(--app-radius);
  cursor: pointer;
  transition: background 0.1s;
}

.case-list__item:hover {
  background: var(--app-surface-2);
}

.case-list__item--active {
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
}

.case-list__name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--app-text);
}

.case-list__count {
  font-size: 0.8rem;
  color: var(--app-text-muted);
}

/* ── Main panel ─────────────────────────────────────────── */

.app-main {
  padding: 2rem;
  overflow-y: auto;
}

.app-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 2rem;
  color: var(--app-text-muted);
  text-align: center;
}

/* ── Case detail ────────────────────────────────────────── */

.case-detail__header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-block-end: 1.5rem;
}

.case-detail__name {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  color: var(--app-text);
}

.case-detail__meta {
  font-size: 0.85rem;
  color: var(--app-text-muted);
}

/* ── Upload zone ────────────────────────────────────────── */

.upload-zone {
  border: 2px dashed var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-block-end: 1.5rem;
}

.upload-zone:hover,
.upload-zone--active {
  border-color: var(--app-accent);
  background: color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 6%, transparent);
}

.upload-zone__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--app-accent);
}

.upload-zone__hint {
  font-size: 0.8rem;
  color: var(--app-text-muted);
  margin: 0.5rem 0 0;
}

/* ── Upload progress ────────────────────────────────────── */

.upload-progress {
  margin-block-end: 1.5rem;
  font-size: 0.85rem;
  color: var(--app-text-muted);
}

.progress-bar {
  height: 4px;
  background: var(--app-surface-2);
  border-radius: 2px;
  margin-block-start: 0.5rem;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--app-accent);
  border-radius: 2px;
  transition: width 0.3s;
  width: 0;
}

/* ── File cards ─────────────────────────────────────────── */

.file-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.file-list__empty {
  font-size: 0.9rem;
  color: var(--app-text-muted);
  padding: 1rem 0;
}

.analysis-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1rem;
  margin-block-start: 1.5rem;
  align-items: start;
}

.assist-panel {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 1rem;
}

.review-sidebar,
.help-center {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: 1rem;
}

.review-sidebar h3 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--app-text);
}

.help-center__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.help-center__title {
  margin: 0;
  font-size: 0.95rem;
  color: var(--app-text);
}

.help-center__tier {
  font-size: 0.7rem;
  color: var(--app-accent);
  border: 1px solid rgb(74 122 223 / 40%);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
}

.help-center__meta {
  margin: 0.55rem 0 0.8rem;
  color: var(--app-text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.help-center__advisor {
  border: 1px solid rgb(74 122 223 / 35%);
  border-radius: var(--app-radius);
  background: linear-gradient(135deg, rgb(74 122 223 / 18%), rgb(22 32 56 / 95%));
  padding: 0.7rem;
  margin-block-end: 0.75rem;
}

.help-advisor__label {
  margin: 0;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-link);
}

.help-advisor__text {
  margin: 0.25rem 0 0.55rem;
  font-size: 0.76rem;
  color: var(--app-text);
  line-height: 1.45;
}

.help-center__recommendations {
  display: grid;
  gap: 0.55rem;
  margin-block-end: 0.8rem;
}

.help-recommendation {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface-2);
  padding: 0.65rem;
}

.help-recommendation--locked {
  border-color: rgb(210 153 34 / 45%);
}

.help-recommendation__title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--app-text);
}

.help-recommendation__desc {
  margin: 0.3rem 0 0.5rem;
  font-size: 0.73rem;
  color: var(--app-text-muted);
  line-height: 1.45;
}

.help-center__search-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  margin-block-end: 0.65rem;
}

.help-center__search {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-bg);
  color: var(--app-text);
  font-size: 0.85rem;
  padding: 0.5rem 0.65rem;
}

.help-center__search:focus {
  outline: none;
  border-color: var(--app-accent);
  box-shadow: 0 0 0 2px rgb(74 122 223 / 18%);
}

.help-center__clear {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface-2);
  color: var(--app-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0 0.55rem;
  cursor: pointer;
}

.help-center__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block-end: 0.75rem;
}

.help-filter {
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
  color: var(--app-text-muted);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  cursor: pointer;
}

.help-filter--active {
  border-color: var(--app-accent);
  color: var(--app-text);
}

.help-center__results {
  display: grid;
  gap: 0.55rem;
}

.help-tool {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 0.7rem;
  background: var(--app-surface-2);
}

.help-tool--locked {
  border-color: rgb(210 153 34 / 45%);
}

.help-tool__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.help-tool__category,
.help-tool__lock {
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.help-tool__lock--ok {
  color: var(--app-success);
}

.help-tool__title {
  margin: 0.35rem 0;
  font-size: 0.86rem;
  color: var(--app-text);
}

.help-tool__desc {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  color: var(--app-text-muted);
  line-height: 1.45;
}

.help-empty {
  margin: 0;
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

.lumen-panel--spotlight {
  outline: 2px solid var(--app-accent);
  box-shadow: 0 0 0 4px rgb(74 122 223 / 22%);
}

.export-btn--pulse {
  animation: export-pulse 1.2s ease-in-out 1;
}

@keyframes export-pulse {
  0% { box-shadow: 0 0 0 0 rgb(74 122 223 / 40%); }
  70% { box-shadow: 0 0 0 10px rgb(74 122 223 / 0%); }
  100% { box-shadow: 0 0 0 0 rgb(74 122 223 / 0%); }
}

.file-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
}

.file-card__info {
  flex: 1;
  min-width: 0;
}

.file-card__name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--app-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-card__meta {
  font-size: 0.8rem;
  color: var(--app-text-muted);
}

.file-card__pipeline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.file-card__actions {
  flex-shrink: 0;
}

.file-card__run {
  background: transparent;
  border: 1px solid var(--app-border);
  color: var(--app-accent);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: var(--app-radius);
  cursor: pointer;
  transition: border-color 0.15s;
}

.file-card__run:hover {
  border-color: var(--app-accent);
}

.file-card__run:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Pipeline badges ────────────────────────────────────── */

.pipeline-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pipeline-badge--pending {
  background: color-mix(in srgb, var(--gem-moonstone-flat, #c0c8e0) 15%, transparent);
  color: var(--app-text-muted);
}

.pipeline-badge--running {
  background: color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 15%, transparent);
  color: var(--gem-citrine-text, #1c0e00);
}

.pipeline-badge--complete {
  background: color-mix(in srgb, var(--gem-emerald-flat, #0a6840) 15%, transparent);
  color: var(--gem-emerald-text, #c8ffe0);
}

.pipeline-badge--error {
  background: color-mix(in srgb, var(--gem-ruby-flat, #9b0020) 15%, transparent);
  color: var(--gem-ruby-text, #ffe0e8);
}

.stage-badges {
  display: flex;
  gap: 0.25rem;
}

.stage-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: var(--app-radius);
  text-transform: uppercase;
}

.stage-badge--pending {
  color: var(--app-text-muted);
  background: color-mix(in srgb, var(--gem-moonstone-flat, #c0c8e0) 10%, transparent);
}

.stage-badge--running {
  color: var(--gem-citrine-text, #1c0e00);
  background: color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 10%, transparent);
}

.stage-badge--complete {
  color: var(--gem-emerald-text, #c8ffe0);
  background: color-mix(in srgb, var(--gem-emerald-flat, #0a6840) 10%, transparent);
}

.stage-badge--skipped {
  color: var(--app-text-muted);
  background: color-mix(in srgb, var(--gem-moonstone-flat, #c0c8e0) 8%, transparent);
}

.stage-badge--error {
  color: var(--gem-ruby-text, #ffe0e8);
  background: color-mix(in srgb, var(--gem-ruby-flat, #9b0020) 10%, transparent);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ACCOUNT PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.account-section {
  max-width: 800px;
  margin-inline: auto;
  padding: 2rem 1rem;
}

.account-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 2rem;
  color: var(--app-text);
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.account-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: 1.5rem;
}

.account-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--app-text);
}

.account-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.account-dl dt {
  color: var(--app-text-muted);
  font-weight: 500;
}

.account-dl dd {
  color: var(--app-text);
  margin: 0;
}

.tier-badge {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-block-end: 1rem;
  background: color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 15%, transparent);
  color: var(--gem-sapphire-text, #d0dcff);
}

.tier-badge[data-tier="professional"] {
  background: color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 15%, transparent);
  color: var(--gem-gold-text, #1c1000);
}

.tier-badge[data-tier="institutional"],
.tier-badge[data-tier="enterprise"] {
  background: color-mix(in srgb, var(--gem-tanzanite-flat, #4a2db5) 15%, transparent);
  color: var(--gem-tanzanite-text, #e8e0ff);
}

.account-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (width <= 480px) {
  .auth-card {
    padding: 1.5rem 1.25rem;
  }

  .app-main {
    padding: 1rem;
  }

  .file-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .analysis-workspace {
    grid-template-columns: 1fr;
  }

  .assist-panel {
    position: static;
  }

  .file-card__pipeline {
    order: 2;
  }

  .file-card__actions {
    order: 3;
    align-self: flex-end;
  }
}

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Focus-visible (keyboard navigation) ────────────────── */

.auth-btn:focus-visible,
.auth-input:focus-visible,
.app-sidebar__add:focus-visible,
.case-list__item:focus-visible,
.file-card__run:focus-visible,
.file-card__toggle:focus-visible,
.result-tab:focus-visible,
.export-btn:focus-visible,
.upload-zone__label:focus-visible,
.tool-card:focus-visible,
.verdict-btn:focus-visible,
.tools-btn:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}

/* ── Loading spinner ────────────────────────────────────── */

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

.spinner {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: 2px solid currentcolor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: evident-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-inline-end: 0.4em;
}

/* ── Pipeline running pulse ─────────────────────────────── */

@keyframes evident-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pipeline-badge--running {
  animation: evident-pulse 1.5s ease-in-out infinite;
}

.pipeline-badge--partial-error {
  background: rgb(210 153 34 / 15%);
  color: var(--app-warning);
}

/* ── Toast notifications ────────────────────────────────── */

.toast-container {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  padding: 0.75rem 1.25rem;
  border-radius: var(--app-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
  opacity: 0;
  transform: translateX(1rem);
  transition: opacity 0.25s, transform 0.25s;
  max-inline-size: 360px;
}

.toast.visible {
  opacity: 1;
  transform: translateX(0);
}

.toast--error {
  border-color: var(--app-error);
  background: color-mix(in srgb, var(--gem-ruby-flat, #9b0020) 12%, transparent);
  color: var(--gem-ruby-text, #ffe0e8);
}

.toast--success {
  border-color: var(--app-success);
  background: color-mix(in srgb, var(--gem-emerald-flat, #0a6840) 12%, transparent);
  color: var(--gem-emerald-text, #c8ffe0);
}

.toast--info {
  border-color: var(--gem-blue-topaz-flat, #0288d1);
  background: color-mix(in srgb, var(--gem-blue-topaz-flat, #0288d1) 12%, transparent);
  color: var(--gem-blue-topaz-text, #002540);
}

/* ── Results panel ──────────────────────────────────────── */

.file-card-wrapper {
  margin-block-end: 0.75rem;
}

.file-card-wrapper > .file-card {
  border-radius: var(--app-radius);
}

.file-card-wrapper:has(.results-panel:not([hidden])) > .file-card {
  border-radius: var(--app-radius) var(--app-radius) 0 0;
}

.results-panel {
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-top: none;
  border-radius: 0 0 var(--app-radius) var(--app-radius);
  padding: 1.25rem;
  margin-block-start: -1px;
}

.results-tabs {
  display: flex;
  gap: 0.25rem;
  border-block-end: 1px solid var(--app-border);
  margin-block-end: 1rem;
  padding-block-end: 0.5rem;
}

.result-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--app-radius) var(--app-radius) 0 0;
  color: var(--app-text-muted);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.3rem 1rem;
  text-transform: capitalize;
  transition: color 0.15s, border-color 0.15s;
}

.result-tab:hover {
  color: var(--app-text);
}

.result-tab.active {
  color: var(--app-accent);
  border-color: var(--app-border);
  border-block-end-color: var(--app-surface-2);
}

.result-tab--complete {
  color: var(--app-success);
}

.result-tab--error {
  color: var(--app-error);
}

.result-tab--skipped,
.result-tab--missing {
  color: var(--app-text-muted);
  opacity: 0.6;
}

.result-view {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--app-text);
}

.result-kv-table {
  inline-size: 100%;
  border-collapse: collapse;
}

.result-kv-table td {
  padding: 0.3rem 0.5rem;
  border-block-end: 1px solid var(--app-border);
  vertical-align: top;
}

.result-kv-table td:first-child {
  color: var(--app-text-muted);
  font-weight: 500;
  white-space: nowrap;
  inline-size: 10rem;
}

.result-hash {
  font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--gem-emerald-text, #c8ffe0);
  word-break: break-all;
}

.result-transcript {
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  color: var(--app-text);
  font-size: 0.8125rem;
  line-height: 1.6;
  margin-block-start: 0.5rem;
  max-block-size: 16rem;
  overflow-y: auto;
  padding: 1rem;
  white-space: pre-wrap;
}

.result-ocr-table {
  max-block-size: 20rem;
  overflow: auto;
  margin-block-start: 0.5rem;
}

.result-ocr-table table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.result-ocr-table th {
  background: var(--app-bg);
  color: var(--app-text-muted);
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  position: sticky;
  inset-block-start: 0;
  text-align: start;
}

.result-ocr-table td {
  padding: 0.3rem 0.5rem;
  border-block-end: 1px solid var(--app-border);
  vertical-align: top;
}

.result-error {
  background: color-mix(in srgb, var(--gem-ruby-flat, #9b0020) 8%, transparent);
  border: 1px solid var(--app-error);
  border-radius: var(--app-radius);
  color: var(--gem-ruby-text, #ffe0e8);
  font-size: 0.8125rem;
  padding: 0.5rem 1rem;
}

.result-skipped {
  color: var(--app-text-muted);
  font-style: italic;
}

/* ── Export button ──────────────────────────────────────── */

.export-btn {
  background: var(--app-accent);
  border: none;
  border-radius: var(--app-radius);
  color: #fff;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  margin-block-start: 1rem;
  padding: 0.5rem 1.25rem;
  transition: background 0.15s;
}

.export-btn:hover {
  background: var(--app-accent-hover);
}

.export-btn:disabled {
  cursor: wait;
  opacity: 0.6;
}

/* ── Upgrade banner ─────────────────────────────────────── */

.upgrade-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 8%, transparent);
  border: 1px solid var(--gem-sapphire-flat, #1f3a99);
  border-radius: var(--app-radius-lg);
  padding: 1.25rem 1.5rem;
  margin-block-end: 1.5rem;
}

.upgrade-banner__body {
  flex: 1;
}

.upgrade-banner__body strong {
  display: block;
  font-size: 1rem;
  color: var(--app-accent);
  margin-block-end: 0.25rem;
}

.upgrade-banner__body p {
  font-size: 0.85rem;
  color: var(--app-text-muted);
  margin: 0;
  line-height: 1.5;
}

.upgrade-banner__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ── Batch actions bar ──────────────────────────────────── */

.batch-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  margin-block-end: 0.75rem;
}

@media (width <= 480px) {
  .upgrade-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.export-btn.locked {
  background: var(--app-text-muted);
  cursor: pointer;
  opacity: 0.5;
}

.export-btn.locked:hover {
  opacity: 0.7;
}

.result-tab--toggle {
  background: transparent;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  color: var(--app-accent);
  cursor: pointer;
  font-size: 0.75rem;
  margin-block-start: 0.25rem;
  padding: 0.25rem 0.5rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOOLS PAGES  (court formatter, etc.)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.tools-page {
  max-width: 56rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.tools-page__header {
  margin-block-end: 2rem;
}

.tools-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--app-text);
}

.tools-page__desc {
  color: var(--app-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Tier gate banner */
.tools-gate {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: 1.5rem;
  margin-block-end: 2rem;
  color: var(--app-warning);
}

.tools-gate__text {
  margin: 0 0 0.5rem;
  color: var(--app-text);
}

.tools-gate__link {
  color: var(--app-accent);
  text-decoration: none;
  font-weight: 600;
}

.tools-gate__link:hover {
  color: var(--app-accent-hover);
}

/* Form layout */
.tools-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tools-fieldset {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 0;
  background: var(--app-surface);
}

.tools-legend {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--app-accent);
  padding: 0 0.5rem;
}

.tools-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block-start: 0.75rem;
}

@media (width <= 600px) {
  .tools-row {
    grid-template-columns: 1fr;
  }
}

.tools-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-block-start: 0.75rem;
}

.tools-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-text-muted);
}

.tools-label--inline {
  display: inline;
  color: var(--app-text);
  cursor: pointer;
}

.tools-required {
  color: var(--app-error);
}

.tools-hint {
  font-size: 0.78rem;
  color: var(--app-text-muted);
  margin: 0.25rem 0 0;
}

.tools-hint-inline {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--app-text-muted);
}

.tools-input,
.tools-select,
.tools-textarea {
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  color: var(--app-text);
  font-family: var(--app-font);
  font-size: 0.88rem;
  padding: 0.6rem 0.75rem;
  transition: border-color 0.15s;
}

.tools-input:focus,
.tools-select:focus,
.tools-textarea:focus {
  outline: none;
  border-color: var(--app-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 18%, transparent);
}

.tools-textarea {
  resize: vertical;
  min-height: 10rem;
  font-family: Consolas, Monaco, monospace;
  line-height: 1.5;
}

.tools-file-input {
  font-size: 0.82rem;
  color: var(--app-text-muted);
}

.tools-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.75rem;
}

.tools-checkbox {
  accent-color: var(--app-accent);
  width: 1rem;
  height: 1rem;
}

/* Actions */
.tools-actions {
  display: flex;
  justify-content: flex-end;
  padding-block-start: 0.5rem;
}

.tools-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--app-accent);
  color: #fff;
  border: none;
  border-radius: var(--app-radius);
  padding: 0.7rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.tools-btn:hover:not(:disabled) {
  background: var(--app-accent-hover);
}

.tools-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Mode toggle ──────────────────────────────────────── */

.tools-mode-toggle {
  display: flex;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
}

.tools-mode-option {
  cursor: pointer;
}

.tools-mode-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.tools-mode-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-text-muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.tools-mode-option input[type="radio"]:checked + .tools-mode-label {
  border-color: var(--gem-sapphire-flat, #1f3a99);
  color: var(--gem-sapphire-text, #d0dcff);
  background: color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 10%, transparent);
}

.tools-mode-option input[type="radio"]:focus-visible + .tools-mode-label {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}

/* ── Guided builder sections ──────────────────────────── */

.builder-section {
  position: relative;
}

.builder-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
}

.builder-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr 2rem;
  gap: 0.5rem;
  align-items: start;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 0.75rem;
}

.builder-item__num {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--app-accent);
  padding-block-start: 0.6rem;
  text-align: center;
}

.builder-item__fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.builder-item__title {
  font-weight: 600;
}

.builder-item__text {
  min-height: 4rem;
  resize: vertical;
}

.builder-item__remove {
  background: transparent;
  border: none;
  color: var(--app-text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--app-radius);
  transition: color 0.15s, background 0.15s;
}

.builder-item__remove:hover {
  color: var(--app-error);
  background: rgb(255 80 80 / 10%);
}

.builder-add {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-block-start: 0.5rem;
  background: transparent;
  border: 1px dashed var(--app-border);
  border-radius: var(--app-radius);
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-accent);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.builder-add:hover {
  border-color: var(--app-accent);
  background: rgb(88 166 255 / 6%);
}

/* ── INT count badge ──────────────────────────────────── */

.builder-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  background: var(--app-surface-2);
  color: var(--app-text-muted);
  margin-inline-start: 0.5rem;
  vertical-align: middle;
}

.builder-badge--warn {
  background: color-mix(in srgb, var(--gem-ruby-flat, #9b0020) 15%, transparent);
  color: var(--gem-ruby-text, #ffe0e8);
}

@media (width <= 600px) {
  .tools-mode-toggle {
    flex-direction: column;
  }

  .builder-item {
    grid-template-columns: 2rem 1fr 2rem;
  }
}

.file-card__toggle {
  background: transparent;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  color: var(--app-text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  transition: color 0.15s, border-color 0.15s;
}

.file-card__toggle:hover {
  color: var(--app-accent);
  border-color: var(--app-accent);
}

.file-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ── Results panel — mobile ─────────────────────────────── */

@media (width <= 768px) {
  .results-panel {
    padding: 0.75rem;
  }

  .results-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .result-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .result-kv-table td:first-child {
    inline-size: auto;
  }

  .result-ocr-table {
    max-block-size: 14rem;
  }

  .export-btn {
    inline-size: 100%;
  }
}

@media (width <= 480px) {
  .file-card__actions {
    flex-direction: column;
    gap: 0.35rem;
  }
}

/* ── Phase 2B: Burden Gauge ────────────────────────────────── */

.burden-gauge {
  position: relative;
  height: 1.5rem;
  background: var(--border, #2a2a3e);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-block-end: 0.75rem;
}

.burden-gauge__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gem-ruby-flat, #9b0020), var(--gem-gold-native-flat, #c88c00), var(--gem-emerald-flat, #0a6840));
  transition: width 0.6s;
}

.burden-gauge__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}

.burden-section {
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin-block-end: 0.5rem;
  border-inline-start: 3px solid;
}

.burden-section--pass {
  border-color: var(--gem-emerald-flat, #0a6840);
  background: color-mix(in srgb, var(--gem-emerald-flat, #0a6840) 8%, transparent);
}

.burden-section--warn {
  border-color: var(--gem-gold-native-flat, #c88c00);
  background: color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 8%, transparent);
}

.burden-section--fail {
  border-color: var(--gem-ruby-flat, #9b0020);
  background: color-mix(in srgb, var(--gem-ruby-flat, #9b0020) 8%, transparent);
}

.burden-section h4 {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}

.burden-section ul {
  margin: 0.25rem 0 0;
  padding-inline-start: 1.25rem;
  font-size: 0.8rem;
}

/* ── Phase 2B: Citation Chips ──────────────────────────────── */

.citation-chip {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  margin: 0.15rem;
  border-radius: 0.25rem;
  background: var(--surface, #1e1e2f);
  border: 1px solid var(--border, #2a2a3e);
  font-size: 0.75rem;
  color: var(--text-muted, #aaa);
}

.citation-section {
  margin-block-start: 0.75rem;
}

.citation-group-label {
  font-weight: 600;
  font-size: 0.8rem;
  margin-block: 0.3rem 0.15rem;
}

/* ── Phase 2B: Contradiction Row ───────────────────────────── */

.contradiction-row {
  background: color-mix(in srgb, var(--gem-ruby-flat, #9b0020) 6%, transparent);
}

.comparison-summary {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-block-end: 0.75rem;
}

/* ── Phase 2B: Brady Flag ──────────────────────────────────── */

.brady-flag {
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--gem-ruby-flat, #9b0020);
  background: color-mix(in srgb, var(--gem-ruby-flat, #9b0020) 6%, transparent);
  margin-block: 0.5rem;
}

.brady-flag h4 {
  color: var(--gem-ruby-text, #ffe0e8);
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}

/* ── Phase 2B: Confidence Badge ────────────────────────────── */

.confidence-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--surface, #1e1e2f);
  border: 1px solid var(--border, #2a2a3e);
  color: var(--text, #e0e0e0);
}

.confidence-badge--pass {
  border-color: var(--gem-emerald-flat, #0a6840);
  color: var(--gem-emerald-text, #c8ffe0);
}

.confidence-badge--fail {
  border-color: var(--gem-ruby-flat, #9b0020);
  color: var(--gem-ruby-text, #ffe0e8);
}

/* ── Phase 2B: Review Queue ────────────────────────────────── */

.review-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border, #2a2a3e);
  margin-block-end: 0.35rem;
  font-size: 0.8rem;
}

.review-item--critical {
  border-color: var(--gem-ruby-flat, #9b0020);
  background: color-mix(in srgb, var(--gem-ruby-flat, #9b0020) 6%, transparent);
}

.review-item--high {
  border-color: var(--gem-gold-native-flat, #c88c00);
  background: color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 6%, transparent);
}

.review-actions {
  margin-inline-start: auto;
  display: flex;
  gap: 0.25rem;
}

.verdict-btn {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 0.25rem;
  background: transparent;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--text, #e0e0e0);
}

.verdict-btn--approve:hover {
  border-color: var(--gem-emerald-flat, #0a6840);
  color: var(--gem-emerald-text, #c8ffe0);
}

.verdict-btn--dismiss:hover {
  border-color: #888;
  color: #888;
}

.pose-flags {
  margin-block-start: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .burden-gauge__fill { transition: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOOLS HUB  (/tools/)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.tools-hub {
  max-width: 72rem;
  margin-inline: auto;
  padding: 2rem 1.5rem 4rem;
}

/* ── Header ─────────────────────────────────────────────── */

.tools-hub__header {
  margin-block-end: 2.5rem;
}

.tools-hub__title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--app-text);
}

.tools-hub__subtitle {
  color: var(--app-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
  max-width: 48rem;
}

.tools-hub__tier-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tools-hub__tier-label {
  font-size: 0.85rem;
  color: var(--app-text-muted);
}

.tools-hub__tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text-muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tools-hub__tier-badge--active {
  border-color: var(--tier-color, var(--app-accent));
  color: var(--tier-color, var(--app-accent));
  background: color-mix(in oklch, var(--tier-color, var(--app-accent)) 12%, transparent);
}

.tools-hub__upgrade-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-accent);
  text-decoration: none;
}

.tools-hub__upgrade-link:hover {
  text-decoration: underline;
}

.tools-hub__readiness {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tools-hub__readiness-label {
  font-size: 0.78rem;
  color: var(--app-text-muted);
}

.tools-hub__readiness-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.readiness-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.28rem 0.55rem;
}

.readiness-badge--ok {
  color: var(--app-success);
  border-color: color-mix(in oklch, var(--app-success) 45%, var(--app-border));
  background: color-mix(in oklch, var(--app-success) 11%, var(--app-surface));
}

.readiness-badge--warn {
  color: var(--app-error);
  border-color: color-mix(in oklch, var(--app-error) 45%, var(--app-border));
  background: color-mix(in oklch, var(--app-error) 11%, var(--app-surface));
}

.tools-hub__readiness-link {
  font-size: 0.78rem;
  color: var(--app-accent);
  text-decoration: none;
}

.tools-hub__readiness-link:hover {
  text-decoration: underline;
}

/* ── Quota section ──────────────────────────────────────── */

.tools-hub__quotas {
  margin-block-end: 2.5rem;
}

.quota-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.quota-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 1rem 1.25rem;
}

.quota-card--warn {
  border-color: var(--app-warning);
}

.quota-card__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--app-text-muted);
  margin-block-end: 0.5rem;
}

.quota-card__bar {
  height: 6px;
  background: var(--app-bg);
  border-radius: 3px;
  overflow: hidden;
  margin-block-end: 0.35rem;
}

.quota-card__fill {
  height: 100%;
  background: var(--app-accent);
  border-radius: 3px;
  transition: width 0.4s;
}

.quota-card--warn .quota-card__fill {
  background: var(--app-warning);
}

.quota-card__text {
  font-size: 0.78rem;
  color: var(--app-text-muted);
}

/* ── Section typography ─────────────────────────────────── */

.tools-hub__section {
  margin-block-end: 2.5rem;
}

.tools-hub__section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--app-text);
}

.tools-hub__section-desc {
  font-size: 0.88rem;
  color: var(--app-text-muted);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

/* ── Tool card grid ─────────────────────────────────────── */

.tools-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.tool-card--unlocked:hover {
  border-color: var(--gem-sapphire-flat, #1f3a99);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 20%, transparent);
  transform: translateY(-2px);
}

.tool-card--locked {
  opacity: 0.6;
  cursor: default;
}

.tool-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--app-radius);
  flex-shrink: 0;
}

.tool-card__icon--blue {
  background: color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 14%, transparent);
  color: var(--gem-sapphire-text, #d0dcff);
}

.tool-card__icon--green {
  background: color-mix(in srgb, var(--gem-emerald-flat, #0a6840) 14%, transparent);
  color: var(--gem-emerald-text, #c8ffe0);
}

.tool-card__icon--amber {
  background: color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 14%, transparent);
  color: var(--gem-gold-text, #1c1000);
}

.tool-card__icon--purple {
  background: color-mix(in srgb, var(--gem-tanzanite-flat, #4a2db5) 14%, transparent);
  color: var(--gem-tanzanite-text, #e8e0ff);
}

.tool-card__icon--red {
  background: color-mix(in srgb, var(--gem-ruby-flat, #9b0020) 14%, transparent);
  color: var(--gem-ruby-text, #ffe0e8);
}

.tool-card__icon--gray {
  background: color-mix(in srgb, var(--gem-moonstone-flat, #c0c8e0) 14%, transparent);
  color: var(--app-text-muted);
}

.tool-card__body {
  flex: 1;
}

.tool-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--app-text);
}

.tool-card__desc {
  font-size: 0.82rem;
  color: var(--app-text-muted);
  line-height: 1.5;
  margin: 0;
}

.tool-card__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  align-self: flex-start;
}

.tool-card__badge--free {
  background: color-mix(in srgb, var(--gem-moonstone-flat, #c0c8e0) 15%, transparent);
  color: var(--app-text-muted);
}

.tool-card__badge--starter {
  background: color-mix(in srgb, var(--gem-blue-topaz-flat, #0288d1) 15%, transparent);
  color: var(--gem-blue-topaz-text, #002540);
}

.tool-card__badge--pro {
  background: color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 15%, transparent);
  color: var(--gem-gold-text, #1c1000);
}

.tool-card__badge--ent {
  background: color-mix(in srgb, var(--gem-tanzanite-flat, #4a2db5) 15%, transparent);
  color: var(--gem-tanzanite-text, #e8e0ff);
}

/* Lock overlay */
.tool-card__lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: rgb(13 17 23 / 60%);
  border-radius: var(--app-radius-lg);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-text-muted);
  pointer-events: none;
}

/* ── Pipeline stage map ─────────────────────────────────── */

.pipeline-stages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}

.pipeline-stage {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  font-size: 0.85rem;
  transition: border-color 0.15s;
}

.pipeline-stage--unlocked {
  border-color: var(--app-success);
}

.pipeline-stage--unlocked .pipeline-stage__indicator {
  color: var(--app-success);
}

.pipeline-stage--locked {
  opacity: 0.55;
}

.pipeline-stage--locked .pipeline-stage__indicator {
  color: var(--app-text-muted);
}

.pipeline-stage__indicator {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.pipeline-stage__content {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.pipeline-stage__label {
  font-weight: 600;
  color: var(--app-text);
}

.pipeline-stage__tier {
  font-size: 0.72rem;
  color: var(--app-text-muted);
  text-transform: capitalize;
}

/* ── Tools Hub responsive ───────────────────────────────── */

@media (width <= 768px) {
  .tools-hub {
    padding: 1.5rem 1rem 3rem;
  }

  .tools-hub__title {
    font-size: 1.35rem;
  }

  .tools-hub__grid {
    grid-template-columns: 1fr;
  }

  .pipeline-stages {
    grid-template-columns: 1fr 1fr;
  }
}

@media (width <= 480px) {
  .pipeline-stages {
    grid-template-columns: 1fr;
  }

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

/* ── Mobile touch-target fixes (WCAG 2.1 AA: 44×44px) ── */

@media (width <= 768px) {
  .app-sidebar__add {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }

  .case-list__item {
    min-height: 44px;
    padding: 0.75rem;
  }

  .sidebar-form .auth-input {
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
  }

  .file-card {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .file-card__run {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }

  .auth-btn {
    min-height: 44px;
    font-size: 1rem;
  }

  .auth-input {
    min-height: 44px;
    font-size: 1rem;
  }

  .auth-tab {
    min-height: 44px;
    font-size: 0.9rem;
  }

  .app-main {
    padding: 1rem;
  }

  .case-detail__header {
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LUMEN AI PANEL  (Evidence Analysis Tools)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lumen-panel {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  padding: 1.5rem;
  margin-block-start: 1.5rem;
}

.lumen-header {
  margin-block-end: 1.25rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--app-border);
}

.lumen-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--app-accent);
  margin: 0 0 0.35rem;
}

.lumen-scope-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--app-text-muted);
  margin: 0;
}

.lumen-modes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-block-end: 1.25rem;
}

.lumen-mode-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: var(--app-font);
}

.lumen-mode-card:hover:not(:disabled, .lumen-mode-card--locked) {
  background: var(--app-surface);
  border-color: var(--app-accent);
  box-shadow: 0 2px 8px rgb(74 122 223 / 20%);
}

.lumen-mode-card:disabled,
.lumen-mode-card--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lumen-mode-card--locked {
  background: var(--app-surface);
}

.lumen-mode-card:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}

.lumen-mode-card__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--app-text);
}

.lumen-badge {
  display: inline-block;
  background: var(--app-accent);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
  margin-inline-start: auto;
}

.lumen-mode-card__desc {
  display: block;
  font-size: 0.75rem;
  color: var(--app-text-muted);
  line-height: 1.4;
}

.lumen-result {
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 1.25rem;
  margin-block-end: 1rem;
  min-height: 120px;
  max-height: 600px;
  overflow-y: auto;
}

.lumen-result--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--app-text-muted);
}

.lumen-result--error {
  color: var(--app-error);
  background: rgb(196 48 64 / 8%);
}

.lumen-result--success {
  color: var(--app-success);
}

.lumen-sessions {
  border-block-start: 1px solid var(--app-border);
  padding-block-start: 1rem;
}

.lumen-sessions__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-text-muted);
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.lumen-session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 0.65rem 0.85rem;
  margin-block-end: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.8rem;
}

.lumen-session-item:hover {
  background: var(--app-surface);
  border-color: var(--app-accent);
}

.lumen-session-item__label {
  flex: 1;
  color: var(--app-text);
  font-weight: 500;
}

.lumen-session-item__time {
  color: var(--app-text-muted);
  font-size: 0.7rem;
}

/* ─ Lumen result content ─ */

.lumen-result h4 {
  font-size: 0.9rem;
  color: var(--app-accent);
  margin: 1rem 0 0.5rem;
}

.lumen-result p {
  margin: 0.5rem 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.lumen-result ul {
  margin: 0.5rem 0;
  padding-inline-start: 1.5rem;
  font-size: 0.85rem;
}

.lumen-result li {
  margin-block-end: 0.35rem;
  line-height: 1.4;
}

.lumen-result a {
  color: var(--app-link);
  text-decoration: none;
}

.lumen-result a:hover {
  text-decoration: underline;
}

/* ─ Lumen Brady/Giglio flags ─ */

.brady-flag {
  background: rgb(196 48 64 / 12%);
}

.brady-flag td {
  color: var(--app-error);
  font-weight: 500;
}

.confidence-badge {
  display: inline-block;
  background: var(--app-accent);
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
}

.amendment-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-block-end: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   🎨 GRADIENT UTILITIES — Gemstone Gradient Integration
   All gradient variables imported from packages/design-tokens/
   ═══════════════════════════════════════════════════════════════════ */

/* Dark Sections — Headers, Sidebars */
.section-dark {
  background: var(--gradient-dark-primary);
  color: white;
}

/* Success — Verified, Positive, Complete */
.section-success {
  background: var(--gradient-success-subtle);
  border-left: 4px solid oklch(70% 0.22 148deg);
  padding-left: 1rem;
}

/* Primary — Information, Trust */
.section-primary {
  background: var(--gradient-primary-subtle);
  border-left: 4px solid oklch(60% 0.22 232deg);
  padding-left: 1rem;
}

/* Button Gradients */
.btn-gradient-primary {
  background: var(--gradient-primary-bright);
  color: white;
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 12px oklch(60% 0.22 232deg / 20%);
}

.btn-gradient-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px oklch(60% 0.22 232deg / 35%);
}

.btn-gradient-success {
  background: var(--gradient-success-bright);
  color: white;
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 12px oklch(70% 0.22 148deg / 20%);
}

.btn-gradient-success:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px oklch(70% 0.22 148deg / 35%);
}

.btn-gradient-danger {
  background: var(--gradient-danger-bright);
  color: white;
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 12px oklch(50% 0.18 18deg / 20%);
}

.btn-gradient-danger:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px oklch(50% 0.18 18deg / 35%);
}

/* Card Gradients */
.card-success {
  background: linear-gradient(135deg,
    oklch(18% 0.03 213deg) 0%,
    oklch(16% 0.03 160deg) 100%
  );
  border-left: 3px solid oklch(70% 0.22 148deg);
}

.card-primary {
  background: linear-gradient(135deg,
    oklch(18% 0.03 213deg) 0%,
    oklch(16% 0.03 232deg) 100%
  );
  border-left: 3px solid oklch(60% 0.22 232deg);
}

.card-danger {
  background: linear-gradient(135deg,
    oklch(18% 0.03 213deg) 0%,
    oklch(16% 0.03 22deg) 100%
  );
  border-left: 3px solid oklch(50% 0.18 18deg);
}

/* Badge Styles */
.badge-success {
  background: var(--gradient-success-light);
  color: oklch(40% 0.16 158deg);
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
}

.badge-primary {
  background: var(--gradient-primary-light);
  color: oklch(38% 0.18 235deg);
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
}

.badge-danger {
  background: var(--gradient-danger-light);
  color: oklch(32% 0.14 22deg);
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
}

/* Glow Effects */
.glow-success {
  box-shadow: 0 0 20px oklch(70% 0.22 148deg / 35%),
              0 4px 12px oklch(70% 0.22 148deg / 15%);
}

.glow-primary {
  box-shadow: 0 0 20px oklch(60% 0.22 232deg / 35%),
              0 4px 12px oklch(60% 0.22 232deg / 15%);
}

.glow-danger {
  box-shadow: 0 0 20px oklch(50% 0.18 18deg / 30%),
              0 4px 12px oklch(50% 0.18 18deg / 12%);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FILE SELECTION STATE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.file-card__info {
  cursor: pointer;
}

.file-card-wrapper--selected > .file-card {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 1px var(--app-accent), 0 2px 8px rgb(74 122 223 / 15%);
}

/* Upload retry button inline */
.upload-retry-btn {
  margin-inline-start: 0.75rem;
  font-size: 0.8rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LUMEN AI PANEL  (dashboard)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lumen-panel {
  margin-block-start: 2rem;
  border-block-start: 1px solid var(--app-border);
  padding-block-start: 1.5rem;
}

.lumen-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-block-end: 1rem;
}

.lumen-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--app-text);
}

.lumen-scope-hint {
  font-size: 0.8rem;
  color: var(--app-text-muted);
}

.lumen-modes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin-block-end: 1.25rem;
}

.lumen-mode-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  cursor: pointer;
  text-align: start;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  color: var(--app-text);
}

.lumen-mode-card:hover:not(:disabled, .lumen-mode-card--disabled) {
  border-color: var(--app-accent);
  box-shadow: 0 2px 8px rgb(74 122 223 / 12%);
}

.lumen-mode-card--locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.lumen-mode-card--disabled:not(.lumen-mode-card--locked) {
  opacity: 0.6;
  cursor: default;
}

.lumen-mode-card__label {
  font-weight: 600;
  font-size: 0.9rem;
}

.lumen-mode-card__desc {
  font-size: 0.78rem;
  color: var(--app-text-muted);
  line-height: 1.4;
}

.lumen-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--app-surface-2);
  color: var(--app-warning);
  vertical-align: middle;
}

/* Result area */
.lumen-result {
  margin-block-end: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface);
}

.lumen-result-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 0.75rem;
}

.lumen-result-mode {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--app-accent);
  color: #fff;
}

.lumen-result-meta {
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

.lumen-result-body {
  font-size: 0.88rem;
  line-height: 1.6;
}

.lumen-result-body h3,
.lumen-result-body h4 {
  margin-block: 0.75rem 0.25rem;
  font-size: 0.95rem;
}

.lumen-result-body ul,
.lumen-result-body ol {
  padding-inline-start: 1.25rem;
  margin-block: 0.25rem;
}

.lumen-result-body pre {
  font-size: 0.78rem;
  overflow-x: auto;
  padding: 0.75rem;
  border-radius: var(--app-radius);
  background: var(--app-bg);
}

.lumen-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--app-text-muted);
  font-size: 0.88rem;
  padding: 1rem 0;
}

.lumen-error {
  color: var(--app-error);
  font-size: 0.88rem;
  padding: 0.5rem 0;
}

.lumen-upgrade {
  padding: 0.75rem;
  border: 1px solid var(--app-warning);
  border-radius: var(--app-radius);
  background: color-mix(in srgb, var(--app-warning) 8%, var(--app-surface));
}

.lumen-upgrade p {
  margin-block-end: 0.5rem;
}

/* Lumen tags */
.lumen-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.lumen-tag {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
}

/* Lumen score */
.lumen-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  margin-block: 0.5rem;
}

.lumen-score__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--app-accent);
}

.lumen-score__label {
  font-size: 1rem;
  color: var(--app-text-muted);
}

/* Lumen confidence badges */
.lumen-overall-conf { padding: 0.35rem 0.75rem; border-radius: var(--app-radius); font-size: 0.85rem; margin-block: 0.5rem; display: inline-block; }
.lumen-conf--high { color: #16a34a; background: rgba(22,163,74,0.1); }
.lumen-conf--med { color: #ca8a04; background: rgba(202,138,4,0.1); }
.lumen-conf--low { color: #dc2626; background: rgba(220,38,38,0.1); }

/* Lumen severity badges */
.lumen-sev--critical { color: #dc2626; font-weight: 700; }
.lumen-sev--significant { color: #ca8a04; font-weight: 600; }

/* Lumen integrity / Brady */
.lumen-integrity { padding: 0.5rem 0.75rem; background: var(--app-surface-2); border-left: 3px solid var(--app-accent); border-radius: var(--app-radius); margin-block: 0.5rem; font-size: 0.88rem; }
.lumen-brady { color: #dc2626; }
.lumen-brady-list li { color: #dc2626; font-weight: 600; }

/* Lumen anomaly cards */
.lumen-anomaly { padding: 0.4rem 0.75rem; margin-block: 0.25rem; border-radius: var(--app-radius); background: var(--app-surface-2); font-size: 0.88rem; border-left: 3px solid var(--app-border); }
.lumen-anomaly.lumen-sev--critical { border-left-color: #dc2626; }
.lumen-anomaly.lumen-sev--significant { border-left-color: #ca8a04; }

/* Lumen tag cards */
.lumen-tag-card { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; padding: 0.35rem 0; border-bottom: 1px solid var(--app-border); }
.lumen-tag-desc { font-size: 0.85rem; color: var(--app-text-muted); }
.lumen-tag-note { font-size: 0.8rem; font-style: italic; color: var(--app-text-muted); width: 100%; }

/* Lumen priority */
.lumen-pri--immediate { color: #dc2626; }
.lumen-pri--high { color: #ca8a04; }

/* Lumen corroboration */
.lumen-corr { font-size: 0.8rem; color: #16a34a; }

/* Lumen event type */
.lumen-event-type { font-size: 0.78rem; padding: 0.1rem 0.4rem; border-radius: 0.2rem; background: var(--app-surface-2); color: var(--app-text-muted); }

/* Lumen impeachment cards */
.lumen-impeach-card { padding: 0.75rem; margin-block: 0.5rem; background: var(--app-surface-2); border-radius: var(--app-radius); border-left: 3px solid var(--app-accent); }
.lumen-impeach-topic { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.35rem; }
.lumen-impeach-q { margin-block: 0.2rem; }
.lumen-impeach-a { margin-block: 0.2rem; color: var(--app-text-muted); }
.lumen-impeach-fu { margin-block: 0.2rem; font-size: 0.88rem; }
.lumen-impeach-ev { font-size: 0.82rem; color: var(--app-text-muted); margin-top: 0.25rem; }
.lumen-impeach-rule { font-size: 0.82rem; color: var(--app-accent); margin-top: 0.15rem; }

/* Lumen validation note */
.lumen-validation-note { font-size: 0.82rem; color: #ca8a04; padding: 0.35rem 0.75rem; background: rgba(202,138,4,0.08); border-radius: var(--app-radius); margin-block: 0.5rem; }

/* Lumen processing notes */
.lumen-processing-notes { font-size: 0.82rem; color: var(--app-text-muted); margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--app-border); }

/* Lumen burden standard */
.lumen-burden-standard { padding: 0.5rem 0.75rem; background: var(--app-surface-2); border-left: 3px solid var(--app-accent); border-radius: var(--app-radius); margin-block: 0.5rem; font-size: 0.95rem; text-transform: capitalize; }

/* Burden form */
.lumen-burden-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lumen-burden-form h4 {
  margin: 0;
  font-size: 1rem;
}

.lumen-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-text);
}

.lumen-select,
.lumen-textarea {
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-bg);
  color: var(--app-text);
}

.lumen-select:focus,
.lumen-textarea:focus {
  outline: 2px solid var(--app-accent);
  outline-offset: 1px;
}

/* Session history */
.lumen-sessions__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-block-end: 0.5rem;
}

.lumen-sessions__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.lumen-session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem;
  border-radius: var(--app-radius);
  cursor: pointer;
  transition: background 0.12s;
}

.lumen-session-item:hover {
  background: var(--app-surface-2);
}

.lumen-session-item__mode {
  font-size: 0.8rem;
  font-weight: 600;
}

.lumen-session-item__date {
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

@media (width <= 640px) {
  .lumen-modes {
    grid-template-columns: 1fr;
  }
}