/* ============================================================
   Page-specific styles. Auth, dashboard, process flow,
   review, result, admin, errors.
   Depends on tokens.css + base.css + components.css.
   ============================================================ */

/* ===== Auth (login / register) ===== */
.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-7) var(--space-4);
  background:
    radial-gradient(ellipse at top, var(--accent-soft), transparent 60%),
    var(--bg-primary);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-elev);
}
.auth-card__brand {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.auth-card__brand .sidebar__logo { width: 36px; height: 36px; font-size: var(--ts-body); }
.auth-card__brand .sidebar__brand-label { font-size: var(--ts-h4); }
.auth-card__title {
  font: 700 var(--ts-h2) / 1.2 var(--font-display);
  color: var(--text-heading);
  letter-spacing: -0.4px;
  margin-bottom: 6px;
}
.auth-card__subtitle {
  font-size: var(--ts-body-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}
.auth-card .field { margin-bottom: var(--space-4); }
.auth-card__footer {
  text-align: center;
  font-size: var(--ts-caption);
  color: var(--text-muted);
  margin-top: var(--space-5);
}
.auth-card__footer a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }

.password-hint {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  margin-top: var(--space-2);
  font-size: var(--ts-caption);
}
.password-hint__item {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-dimmed);
}
.password-hint__item.is-valid { color: var(--state-success); }
.password-hint__item.is-invalid { color: var(--state-danger); }
.password-hint__item svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ===== Dashboard ===== */
.dash-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.dash-toolbar__search { flex: 1; min-width: 240px; max-width: 400px; }
.dash-toolbar__filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.status-pip {
  display: inline-flex; align-items: center; gap: 6px;
}
.status-pip__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-pip__dot--upload     { background: var(--state-info); }
.status-pip__dot--processing { background: var(--state-warning); }
.status-pip__dot--review     { background: var(--state-warning); }
.status-pip__dot--done       { background: var(--state-success); }
.status-pip__dot--error      { background: var(--state-danger); }

/* Step pip used in dashboard progress column */
.steps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.steps__step {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--border-base);
  font: 600 var(--ts-tag) / 1 var(--font-ui);
  color: var(--text-dimmed);
  background: var(--bg-card);
  flex-shrink: 0;
}
.steps__step.is-done {
  background: var(--state-success);
  border-color: var(--state-success);
  color: #0a1a0e;
}
.steps__step.is-active {
  border-color: var(--accent);
  color: var(--text-primary);
}
.steps__step.is-error {
  background: var(--state-danger);
  border-color: var(--state-danger);
  color: #1a0a0e;
}
.steps__line {
  width: 16px; height: 1.5px;
  background: var(--border-base);
}
.steps__line.is-done { background: var(--state-success); }

/* ===== Process flow page shell (upload / review / result) ===== */
.flow-shell {
  display: grid;
  grid-template-columns: minmax(220px, 240px) 1fr;
  gap: var(--space-6);
  align-items: start;
}
.flow-shell--no-rail {
  grid-template-columns: 1fr;
}
@media (max-width: 1023px) {
  .flow-shell { grid-template-columns: 1fr; }
}

/* Wizard step rail (vertical) */
.wizard-rail {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}
.wizard-rail__back {
  display: inline-flex;
  align-items: center; gap: 6px;
  font-size: var(--ts-caption);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  text-decoration: none;
}
.wizard-rail__back:hover { color: var(--text-primary); }
.wizard-rail__back svg { width: 14px; height: 14px; }
.wizard-rail__title {
  font: 600 var(--ts-body) / 1.3 var(--font-ui);
  color: var(--text-primary);
  word-break: break-word;
  margin-bottom: 2px;
}
.wizard-rail__id {
  font: 400 var(--ts-caption) / 1 var(--font-mono);
  color: var(--text-dimmed);
  margin-bottom: var(--space-4);
}
.wizard-steps {
  display: flex; flex-direction: column; gap: 0;
}
.wizard-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  text-decoration: none;
  color: var(--text-secondary);
  position: relative;
}
.wizard-step + .wizard-step::before {
  content: "";
  position: absolute;
  left: 13px; top: -8px;
  width: 2px; height: 16px;
  background: var(--border-base);
}
.wizard-step.is-done + .wizard-step::before { background: var(--state-success); }
.wizard-step__pip {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--border-base);
  background: var(--bg-card);
  font: 600 var(--ts-body-sm) / 1 var(--font-ui);
  color: var(--text-dimmed);
  flex-shrink: 0;
}
.wizard-step.is-done .wizard-step__pip {
  background: var(--state-success);
  border-color: var(--state-success);
  color: #0a1a0e;
}
.wizard-step.is-active .wizard-step__pip {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.wizard-step.is-error .wizard-step__pip {
  background: var(--state-danger);
  border-color: var(--state-danger);
  color: #1a0a0e;
}
.wizard-step__pip svg { width: 14px; height: 14px; }
.wizard-step__label {
  font: 500 var(--ts-body-sm) / 1.3 var(--font-ui);
  color: var(--text-secondary);
}
.wizard-step.is-active .wizard-step__label { color: var(--text-primary); }
.wizard-step.is-done .wizard-step__label { color: var(--text-muted); }
.wizard-step__sub {
  font: 400 var(--ts-caption) / 1.2 var(--font-ui);
  color: var(--text-dimmed);
}
.wizard-rail__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-4) 0;
}
.wizard-rail__entities {
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--ts-caption);
}
.wizard-rail__entity {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text-secondary);
  padding: 4px 0;
}
.wizard-rail__entity-name { font-weight: 500; }
.wizard-rail__entity-status { color: var(--text-dimmed); font-size: var(--ts-tag); text-transform: uppercase; letter-spacing: 0.5px; }

/* ===== Upload page ===== */
.upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.upload-card {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.upload-card.is-uploaded { border-color: rgba(74, 222, 128, 0.35); }
.upload-card.has-error { border-color: var(--state-danger); }
.upload-card.is-uploading { border-color: var(--state-info); }

.upload-card__head {
  display: flex; align-items: center; gap: var(--space-2);
}
.upload-card__icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--bg-secondary);
  border-radius: var(--radius-base);
  color: var(--icon-default);
  flex-shrink: 0;
}
.upload-card.is-uploaded .upload-card__icon {
  background: rgba(74, 222, 128, 0.15);
  color: var(--state-success);
}
.upload-card__title {
  font: 600 var(--ts-body) / 1.2 var(--font-ui);
  color: var(--text-primary);
}
.upload-card__sub {
  font: 400 var(--ts-caption) / 1.3 var(--font-ui);
  color: var(--text-muted);
}

.upload-card__file {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3);
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: var(--radius-base);
  color: var(--text-body);
  font-size: var(--ts-caption);
}
.upload-card__file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-card__file-size { color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.upload-card__file-delete {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  color: var(--icon-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.upload-card__file-delete:hover { background: var(--bg-hover); color: var(--state-danger); }
.upload-card__file-delete svg { width: 14px; height: 14px; }

.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--bg-secondary);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-base);
  text-align: center;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}
.upload-zone:hover,
.upload-zone.is-drag {
  background: var(--bg-hover);
  border-color: var(--accent);
}
.upload-zone__icon {
  width: 28px; height: 28px;
  color: var(--icon-muted);
}
.upload-zone__label {
  font: 500 var(--ts-body-sm) / 1.3 var(--font-ui);
  color: var(--text-secondary);
}
.upload-zone__hint {
  font: 400 var(--ts-caption) / 1.3 var(--font-ui);
  color: var(--text-muted);
}

.upload-progress {
  display: none;
  flex-direction: column; gap: 4px;
}
.upload-progress.is-visible { display: flex; }
.upload-progress__label {
  display: flex; justify-content: space-between;
  font-size: var(--ts-caption);
  color: var(--text-muted);
}
.upload-error {
  display: none;
  font-size: var(--ts-caption);
  color: var(--state-danger);
  padding: var(--space-2);
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: var(--radius-base);
}
.upload-error.is-visible { display: block; }

.upload-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xl);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.upload-status-bar__text {
  font: 500 var(--ts-body-sm) / 1 var(--font-ui);
  color: var(--text-secondary);
  display: flex; align-items: center; gap: var(--space-2);
}
.upload-status-bar__text strong {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Full-screen processing overlay */
.processing-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: var(--overlay);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
}
.processing-overlay.is-visible { display: flex; }
.processing-overlay__card {
  background: var(--bg-popover);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-3xl);
  padding: var(--space-7);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  box-shadow: var(--shadow-modal);
  text-align: center;
  max-width: 360px;
}
.processing-overlay__title {
  font: 600 var(--ts-h4) / 1.3 var(--font-ui);
  color: var(--text-primary);
}
.processing-overlay__hint {
  font-size: var(--ts-body-sm);
  color: var(--text-muted);
  min-height: 40px;
}

/* ===== Review page ===== */
/* Legacy review-shell kept for any pages still referencing it; chat is now
   in a right-edge drawer outside the shell, so the third column is gone. */
.review-shell {
  display: grid;
  grid-template-columns: minmax(220px, 240px) 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
.review-shell--no-rail { grid-template-columns: 1fr; }
@media (max-width: 1023px) {
  .review-shell { grid-template-columns: 1fr; }
}

.review-stats {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.review-stat {
  display: flex; align-items: baseline; gap: 6px;
}
.review-stat__value {
  font: 700 var(--ts-h3) / 1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.review-stat__value--success { color: var(--state-success); }
.review-stat__value--danger  { color: var(--state-danger); }
.review-stat__label {
  font-size: var(--ts-caption);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.review-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.review-table-scroll {
  overflow: auto;
  max-height: calc(100dvh - 320px);
  min-height: 320px;
}
.review-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 var(--ts-body-sm) / 1.45 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.review-table thead th {
  position: sticky; top: 0;
  background: var(--bg-secondary);
  font: 600 var(--ts-tag) / 1 var(--font-ui);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-dimmed);
  text-align: left;
  padding: 10px 12px;
  white-space: nowrap;
  z-index: 1;
  border-bottom: 1px solid var(--border-base);
  cursor: pointer;
  user-select: none;
}
.review-table thead th:hover { color: var(--text-primary); }
.review-table thead th[data-sort="asc"]::after  { content: " ↑"; color: var(--accent); }
.review-table thead th[data-sort="desc"]::after { content: " ↓"; color: var(--accent); }
.review-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-body);
  vertical-align: middle;
}
.review-table tbody tr { cursor: pointer; transition: background var(--motion-fast) var(--ease-standard); }
.review-table tbody tr:hover td { background: var(--bg-hover); }
.review-table tbody tr.is-selected td {
  background: var(--accent-soft);
  border-bottom-color: var(--border-base);
}
.review-table tbody tr.is-unmatched td {
  color: var(--state-danger);
  background: rgba(248, 113, 113, 0.05);
}
.review-table .num { text-align: right; white-space: nowrap; }
.review-table td.col-type-income { color: var(--state-success); }
.review-table td.col-type-expense { color: var(--state-danger); }

.review-table-toolbar {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  align-items: center;
}
.review-table-toolbar .input-group { flex: 1; min-width: 220px; max-width: 320px; }
.review-table-toolbar .select { max-width: 180px; }

/* ============================================================
   Review layout — table + slide-in agent panel that COEXIST.
   The agent slot is ALWAYS reserved on desktop, so the table is
   always at its compact width whether the chat is open or not.
   The inner panel only TRANSLATES X (GPU-composited) — no layout
   reflow during animation.
   ============================================================ */
.review-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  position: relative;
}

.review-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.agent-panel {
  /* Permanently reserved column. Width never changes — keeps the
     table at constant width and avoids layout reflow on toggle. */
  flex: 0 0 min(440px, 40vw);
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  align-self: stretch;
  height: calc(100dvh - var(--header-height) - var(--space-7));
  /* Pointer events pass through when closed. */
  pointer-events: none;
  /* Clip the inner when it's translated off the right edge so it
     can't push the body into horizontal scroll. */
  overflow: hidden;
}

.agent-panel__inner {
  width: 100%;
  height: 100%;
  background: var(--bg-popover);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;

  /* GPU-composited animation — transform + opacity only. No layout. */
  transform: translateX(105%);
  opacity: 0;
  transition:
    transform 320ms var(--ease-emphasized),
    opacity   240ms var(--ease-standard);
  will-change: transform, opacity;
}
.review-layout[data-agent-open="true"] .agent-panel {
  pointer-events: auto;
}
.review-layout[data-agent-open="true"] .agent-panel__inner {
  transform: translateX(0);
  opacity: 1;
}

.agent-mobile-backdrop {
  display: none;
}

/* Chat panel inside agent-panel__inner — drop redundant chrome. */
.chat {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 1023px) {
  /* On narrow viewports the table needs full width; the agent becomes
     a fixed overlay drawer with a backdrop, sliding in from the right. */
  .review-layout { gap: 0; }

  .agent-panel {
    flex: 0 0 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    max-height: 100dvh;
    height: 100dvh;
    z-index: var(--z-modal);
    transform: translateX(100%);
    transition: transform 320ms var(--ease-emphasized);
    overflow: visible;
    pointer-events: none;
    will-change: transform;
  }
  .review-layout[data-agent-open="true"] .agent-panel {
    flex-basis: 0;
    width: min(420px, 100vw);
    transform: translateX(0);
    pointer-events: auto;
  }

  .agent-panel__inner {
    width: 100%;
    position: static;
    top: auto;
    height: 100%;
    border: 0;
    border-left: 1px solid var(--border-base);
    border-radius: 0;
    box-shadow: var(--shadow-modal);
    /* Reset desktop transform — on mobile it's the OUTER panel that slides. */
    transform: none;
    opacity: 1;
    transition: none;
    will-change: auto;
  }

  .agent-mobile-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(2px);
    z-index: calc(var(--z-modal) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--ease-emphasized);
  }
  .review-layout[data-agent-open="true"] ~ * .agent-mobile-backdrop,
  .review-layout[data-agent-open="true"] .agent-mobile-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}
.chat__header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-shrink: 0;
}
.chat__title {
  display: flex; align-items: center; gap: var(--space-2);
  font: 600 var(--ts-body) / 1 var(--font-ui);
  color: var(--text-primary);
}
.chat__title svg { width: 16px; height: 16px; color: var(--icon-muted); }
.chat__context {
  padding: var(--space-2) var(--space-4);
  font: 400 var(--ts-caption) / 1.4 var(--font-ui);
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  word-wrap: break-word;
}
.chat__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.chat-msg {
  max-width: 92%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--ts-body-sm);
  line-height: 1.55;
  word-wrap: break-word;
  white-space: pre-wrap;
  animation: chat-paragraph-in var(--motion-base) var(--ease-emphasized);
}
.chat-msg--user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--text-inverse);
  border-bottom-right-radius: 4px;
}
.chat-msg--ai {
  align-self: flex-start;
  background: var(--bg-secondary);
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
  border-bottom-left-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.chat-paragraph { animation: chat-paragraph-in var(--motion-base) var(--ease-emphasized); }
@keyframes chat-paragraph-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat__footer {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.chat__form {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}
.chat__input {
  flex: 1;
  min-height: 40px;
  max-height: 140px;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font: 400 var(--ts-body-sm) / 1.45 var(--font-ui);
  resize: none;
}
.chat__input:focus { outline: none; border-color: var(--border-input-focus); }
.chat__send {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--text-inverse);
  border: 0;
  border-radius: var(--radius-base);
  cursor: pointer;
  flex-shrink: 0;
}
.chat__send:disabled { opacity: 0.4; cursor: not-allowed; }
.chat__send svg { width: 18px; height: 18px; }

/* Proposal card inside chat message */
.proposal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-base);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-2);
}
.proposal-card__head {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.proposal-card__title {
  font: 600 var(--ts-body-sm) / 1.3 var(--font-ui);
  color: var(--text-primary);
}
.proposal-card__row {
  display: flex; gap: 6px; align-items: baseline;
  font-size: var(--ts-caption);
}
.proposal-card__key { color: var(--text-muted); flex-shrink: 0; }
.proposal-card__val { color: var(--text-body); }

.proposal-progress {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.proposal-stage {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--ts-caption);
  color: var(--text-muted);
}
.proposal-stage__pip {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}
.proposal-stage--active { color: var(--state-info); }
.proposal-stage--active .proposal-stage__pip { background: var(--state-info); animation: pulse 1.2s infinite; }
.proposal-stage--done { color: var(--state-success); }
.proposal-stage--done .proposal-stage__pip { background: var(--state-success); }
.proposal-stage--error { color: var(--state-danger); }
.proposal-stage--error .proposal-stage__pip { background: var(--state-danger); }
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.proposal-actions {
  display: flex; gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Floating quick-open trigger for the agent drawer.
   Always available on review pages, even on desktop (the header button
   is the primary entry; this FAB is a thumb-friendly secondary one on mobile). */
.chat-fab {
  display: none;
  position: fixed;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  right: calc(var(--space-5) + env(safe-area-inset-right));
  width: 56px; height: 56px;
  background: var(--accent);
  color: var(--text-inverse);
  border-radius: 50%;
  border: 0;
  align-items: center; justify-content: center;
  box-shadow: var(--shadow-elev);
  cursor: pointer;
  z-index: var(--z-popover);
  transition: transform var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}
.chat-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-modal); }
.chat-fab svg { width: 24px; height: 24px; }
@media (max-width: 1023px) {
  .chat-fab { display: inline-flex; }
}

/* ===== Result page ===== */
.result-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
@media (max-width: 640px) {
  .result-actions { grid-template-columns: 1fr; }
}

/* ===== Admin shell (sub-nav) ===== */
.admin-subnav {
  display: flex;
  gap: 4px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-base);
  margin-bottom: var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-subnav::-webkit-scrollbar { display: none; }
.admin-subnav__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font: 500 var(--ts-body-sm) / 1 var(--font-ui);
  color: var(--text-muted);
  border-radius: var(--radius-base);
  text-decoration: none;
  white-space: nowrap;
}
.admin-subnav__item:hover { background: var(--bg-hover); color: var(--text-primary); }
.admin-subnav__item.is-active {
  background: var(--bg-pressed);
  color: var(--text-primary);
}

/* Avatar (admin user list) */
.avatar {
  width: 32px; height: 32px;
  background: var(--accent);
  color: var(--text-inverse);
  border-radius: 50%;
  display: grid; place-items: center;
  font: 600 var(--ts-caption) / 1 var(--font-ui);
  flex-shrink: 0;
}
.avatar--lg { width: 40px; height: 40px; }

/* Process card grid */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}
.process-card {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
  text-decoration: none;
  color: inherit;
}
.process-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
.process-card__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2);
}
.process-card__title {
  font: 600 var(--ts-h5) / 1.3 var(--font-ui);
  color: var(--text-primary);
  word-break: break-word;
}
.process-card__sub {
  font: 400 var(--ts-caption) / 1.4 var(--font-ui);
  color: var(--text-muted);
}
.process-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  font: 400 var(--ts-caption) / 1.4 var(--font-ui);
  color: var(--text-muted);
}
.process-card__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.process-card__meta-item svg { width: 12px; height: 12px; }
.process-card__actions {
  display: flex; gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

/* Error pages */
.error-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-7) var(--space-4);
}
.error-card {
  text-align: center;
  max-width: 480px;
}
.error-card__code {
  font: 700 96px / 1 var(--font-display);
  color: var(--text-primary);
  letter-spacing: -3px;
  margin-bottom: var(--space-3);
}
.error-card__title {
  font: 600 var(--ts-h3) / 1.2 var(--font-ui);
  color: var(--text-heading);
  margin-bottom: var(--space-2);
}
.error-card__body {
  font-size: var(--ts-body-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

/* Activity log row (admin) */
.log-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--ts-body-sm);
}
.log-row:last-child { border-bottom: 0; }
.log-row__icon {
  width: 32px; height: 32px;
  background: var(--bg-secondary);
  border-radius: var(--radius-base);
  display: grid; place-items: center;
  color: var(--icon-default);
  flex-shrink: 0;
}
.log-row__main { min-width: 0; }
.log-row__action { color: var(--text-primary); font-weight: 500; }
.log-row__details { color: var(--text-muted); font-size: var(--ts-caption); }
.log-row__meta {
  font: 400 var(--ts-caption) / 1.4 var(--font-mono);
  color: var(--text-dimmed);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ===== Proposal card (legacy class names — created dynamically by review.html JS) ===== */
.proposal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-base);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--ts-caption);
}
.proposal-card-title {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--ts-body-sm);
}
.proposal-status {
  font: 500 var(--ts-tag) / 1 var(--font-ui);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid var(--border-subtle);
}
.proposal-status-awaiting_approval { background: rgba(96,165,250,0.12); color: var(--state-info); border-color: rgba(96,165,250,0.25); }
.proposal-status-approved          { background: rgba(251,191,36,0.12); color: var(--state-warning); border-color: rgba(251,191,36,0.25); }
.proposal-status-tested            { background: rgba(96,165,250,0.12); color: var(--state-info); border-color: rgba(96,165,250,0.25); }
.proposal-status-published         { background: rgba(74,222,128,0.12); color: var(--state-success); border-color: rgba(74,222,128,0.25); }
.proposal-status-rejected          { background: rgba(248,113,113,0.12); color: var(--state-danger); border-color: rgba(248,113,113,0.25); }

.proposal-section-title {
  font: 600 var(--ts-tag) / 1 var(--font-ui);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.proposal-summary { display: flex; flex-direction: column; gap: 2px; color: var(--text-body); }
.proposal-summary div strong { color: var(--text-primary); margin-right: 4px; }
.proposal-rationale {
  font-size: var(--ts-caption);
  color: var(--text-muted);
  font-style: italic;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}
.proposal-conditions, .proposal-test-block {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.proposal-condition-line {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: var(--ts-caption);
}
.proposal-condition-line span:first-child { color: var(--text-muted); }
.proposal-condition-line span:last-child  { color: var(--text-body); text-align: right; }
.proposal-impact-sample {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
}
.proposal-impact-entry {
  font-size: var(--ts-caption);
  color: var(--text-muted);
}
.chat-inline-meta {
  font-size: var(--ts-caption);
  color: var(--text-muted);
  padding: 6px 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}
.chat-inline-meta strong { color: var(--text-primary); }

.proposal-actions {
  display: flex; gap: 6px;
  margin-top: 4px;
}
.proposal-action-btn {
  height: 28px;
  padding: 0 12px;
  font: 500 var(--ts-caption) / 1 var(--font-ui);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.proposal-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.proposal-action-primary {
  background: var(--text-primary); color: var(--text-inverse); border-color: var(--text-primary);
}
.proposal-action-primary:hover:not(:disabled) { background: var(--text-body); }
.proposal-action-secondary {
  background: transparent; color: var(--text-secondary); border-color: var(--border-base);
}
.proposal-action-secondary:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.proposal-action-success {
  background: var(--state-success); color: #0a1a0e; border-color: var(--state-success);
}
.proposal-action-success:hover:not(:disabled) { filter: brightness(1.05); }

.proposal-progress {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 4px;
  margin-top: 4px;
  border-top: 1px solid var(--border-subtle);
}
.proposal-stage {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--ts-caption);
  color: var(--text-muted);
}
.proposal-stage-marker, .proposal-stage__pip {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}
.proposal-stage-active, .proposal-stage--active { color: var(--state-info); }
.proposal-stage-active .proposal-stage-marker,
.proposal-stage--active .proposal-stage__pip { background: var(--state-info); animation: pulse 1.2s infinite; }
.proposal-stage-done, .proposal-stage--done { color: var(--state-success); }
.proposal-stage-done .proposal-stage-marker,
.proposal-stage--done .proposal-stage__pip { background: var(--state-success); }
.proposal-stage-error, .proposal-stage--error { color: var(--state-danger); }
.proposal-stage-error .proposal-stage-marker,
.proposal-stage--error .proposal-stage__pip { background: var(--state-danger); }

.candidate-articles-block {
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}
.candidate-articles-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.candidate-article-chip {
  padding: 2px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-full);
  font-size: var(--ts-caption);
  color: var(--text-body);
}

/* Chat thinking dots */
.chat-msg.thinking {
  align-self: flex-start;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border-bottom-left-radius: 4px;
}
.thinking-dots {
  display: inline-flex;
  gap: 3px;
}
.thinking-dots span {
  width: 6px; height: 6px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: thinking-pulse 1.2s infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinking-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.2); }
}

/* ============================================================
   Help / Руководство пользователя — FinPo-style two-pane manual.
   Sticky left nav, scrollable right article. Doc primitives:
   .doc, .doc__h, .doc__steps (numbered round badges), .doc__deflist,
   .doc__tip, .doc__files, .doc__code.
   ============================================================ */
.help-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .help-shell {
    grid-template-columns: 240px 1fr;
  }
}

.help-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (min-width: 1024px) {
  .help-nav {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    align-self: start;
    max-height: calc(100dvh - var(--header-height) - var(--space-7));
    overflow-y: auto;
  }
}
.help-nav__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-base);
  font: 500 var(--ts-body-sm) / 1.4 var(--font-ui);
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.help-nav__btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.help-nav__btn.is-active {
  background: var(--bg-pressed);
  color: var(--text-primary);
  font-weight: 600;
}
.help-nav__btn svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }

.help-article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  animation: page-enter var(--motion-slow) var(--ease-emphasized);
}
.help-article__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-base);
}
.help-article__head svg {
  width: 20px; height: 20px;
  color: var(--text-primary);
  flex-shrink: 0;
}
.help-article__title {
  font: 600 var(--ts-h3) / 1.2 var(--font-ui);
  color: var(--text-heading);
  letter-spacing: -0.2px;
}

/* Doc primitives */
.doc {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  font: 400 var(--ts-body-sm) / 1.6 var(--font-ui);
  color: var(--text-body);
  max-width: 70ch;
}
.doc p { color: var(--text-body); line-height: 1.6; }
.doc strong { color: var(--text-primary); font-weight: 600; }
.doc__h {
  font: 600 var(--ts-body) / 1.3 var(--font-ui);
  color: var(--text-primary);
  margin-top: var(--space-3);
  letter-spacing: -0.2px;
}
.doc__h:first-child { margin-top: 0; }

.doc__code {
  display: inline-block;
  padding: 2px 6px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font: 400 12px / 1 var(--font-mono);
  color: var(--text-primary);
}

/* Numbered steps */
.doc__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.doc__step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.doc__step::before {
  counter-increment: step;
  content: counter(step);
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font: 600 var(--ts-caption) / 1 var(--font-ui);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  background: var(--bg-card);
  flex-shrink: 0;
  margin-top: 2px;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}
.doc__step-title {
  font: 600 var(--ts-body-sm) / 1.5 var(--font-ui);
  color: var(--text-primary);
}
.doc__step-desc {
  font-size: var(--ts-body-sm);
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: 2px;
}

/* Definition list */
.doc__deflist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.doc__defterm {
  font: 600 var(--ts-body-sm) / 1.4 var(--font-ui);
  color: var(--text-primary);
  margin-bottom: 2px;
}
.doc__defdesc {
  font-size: var(--ts-body-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

/* Tip / callout */
.doc__tip {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-base);
  font-size: var(--ts-body-sm);
  color: var(--text-body);
}
.doc__tip svg {
  width: 16px; height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--text-primary);
}

/* Files list (Download icon) */
.doc__files {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.doc__file {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--space-2);
  align-items: start;
  font-size: var(--ts-body-sm);
}
.doc__file svg {
  width: 14px; height: 14px;
  margin-top: 4px;
  color: var(--text-muted);
}
.doc__file strong { color: var(--text-primary); margin-right: 4px; }
.doc__file span { color: var(--text-muted); }

/* Pagination */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-5);
  font-size: var(--ts-caption);
  color: var(--text-muted);
}
.pager__pages { display: flex; gap: 4px; }
.pager__btn {
  min-width: 32px; height: 32px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-base);
  color: var(--text-secondary);
  cursor: pointer;
  font: 500 var(--ts-caption) / 1 var(--font-ui);
}
.pager__btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.pager__btn.is-active { background: var(--bg-pressed); color: var(--text-primary); border-color: var(--border-strong); }
.pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }