/* ================================================================
   boraADS — Component primitives
   Reusable classes that compose on top of tokens.css.
   Imported by app/globals.css AFTER `@import "tailwindcss"`.
   ================================================================ */

@layer components {
  /* ================================================================
     Buttons — fiel ao DS Adquila (.btn, .btn-{primary,secondary,ghost,link,destructive,icon}, .btn-{sm,lg})
     ================================================================ */
  .btn {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    font: 500 13px/1 var(--font-sans);
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease), color var(--dur) var(--ease);
    white-space: nowrap;
    text-decoration: none;
  }
  .btn:active { transform: translateY(1px); }
  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }
  .btn-sm {
    height: 26px;
    padding: 0 9px;
    font-size: 12px;
    border-radius: var(--r-sm);
  }
  .btn-lg {
    height: 38px;
    padding: 0 16px;
    font-size: 14px;
  }

  .btn-primary {
    background: var(--acc);
    color: var(--acc-ink);
  }
  .btn-primary:hover:not(:disabled) { background: var(--acc-hover); }
  .btn-primary:active:not(:disabled) { background: var(--acc-press); }

  .btn-secondary {
    background: var(--bg-3);
    color: var(--fg-0);
    border-color: var(--line);
  }
  .btn-secondary:hover:not(:disabled) {
    background: var(--bg-4);
    border-color: var(--line-strong);
  }

  .btn-ghost {
    background: transparent;
    color: var(--fg-0);
    border-color: var(--line);
  }
  .btn-ghost:hover:not(:disabled) {
    background: var(--bg-2);
    border-color: var(--line-strong);
  }

  .btn-link {
    background: transparent;
    color: var(--fg-1);
    border-color: transparent;
    padding: 0 6px;
    height: auto;
  }
  .btn-link:hover:not(:disabled) { color: var(--fg-0); }

  .btn-destructive {
    background: var(--neg);
    color: #FFF1EE;
  }
  .btn-destructive:hover:not(:disabled) { filter: brightness(1.08); }

  .btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
  }
  .btn-icon.btn-sm {
    width: 26px;
    height: 26px;
  }

  /* ================================================================
     App shell — responsive 2-col layout (sidebar + main + mobile drawer)
     ================================================================ */
  .app-shell {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    min-height: 100vh;
    overflow-x: clip;
  }
  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 256px;
    flex-shrink: 0;
  }
  .app-main {
    padding: 32px;
    min-width: 0;
    max-width: 100%;
  }

  /* Hamburger button — mobile only */
  .mobile-menu-btn {
    display: none;
    width: 36px; height: 36px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--line-soft);
    color: var(--fg-1);
    cursor: pointer;
    place-items: center;
    transition: all var(--dur) var(--ease);
    flex-shrink: 0;
  }
  .mobile-menu-btn:hover {
    background: var(--bg-2);
    color: var(--fg-0);
    border-color: var(--line);
  }
  .mobile-menu-close {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    color: var(--fg-1);
    cursor: pointer;
    place-items: center;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
    z-index: 1;
  }
  .mobile-menu-close:hover {
    background: var(--bg-3);
    border-color: var(--line);
    color: var(--fg-0);
  }

  /* Drawer backdrop (rendered as real <div data-mobile-menu-backdrop> by MobileMenuToggle) */
  .mobile-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 49;
    cursor: pointer;
    animation: backdrop-fade 200ms ease both;
  }
  @keyframes backdrop-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-main { padding: 20px; }

    /* Sidebar becomes off-canvas drawer */
    .app-sidebar {
      position: fixed;
      top: 0; left: 0;
      width: 280px;
      max-width: 85vw;
      height: 100vh;
      transform: translateX(-100%);
      transition: transform var(--dur-slow) var(--ease);
      z-index: 50;
      box-shadow: var(--shadow-3);
    }
    [data-mobile-menu="open"] .app-sidebar {
      transform: translateX(0);
    }

    .mobile-menu-btn { display: inline-grid; }
    .mobile-menu-close { display: grid; }

    /* Hide breadcrumbs on very small screens — focus on the drawer toggle */
    .ds-crumbs { font-size: 11px; }
    .ds-crumbs > span:not(:last-child) { display: none; }
  }

  /* ================================================================
     GLOBAL MOBILE PASS — applies across all screens
     ================================================================ */
  @media (max-width: 720px) {
    /* Topbar tighter padding */
    .ds-topbar { padding: 0 14px; gap: 8px; }
    .topbar-actions {
      gap: 6px;
    }
    .topbar-actions .top-icon-btn:first-child {
      display: none;
    }
    .top-divider { display: none; }

    /* Page head row stacks vertically */
    .page-head-row {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
      margin-bottom: 20px;
    }
    .page-head-row > div {
      min-width: 0;
    }
    .page-head-right {
      flex-direction: row;
      align-items: stretch;
      gap: 8px;
      flex-wrap: wrap;
    }
    .page-head-right .btn {
      flex: 1 1 auto;
      justify-content: center;
      min-width: min(100%, 140px);
    }

    /* H1 in page heads — smaller on mobile */
    .page-head-row h1,
    .page-head-h1 {
      font-size: 24px !important;
      line-height: 1.15;
      gap: 10px;
    }
    .page-head-h1 .count {
      font-size: 16px;
      padding: 4px 10px;
    }

    /* KPI strip — 1 col */
    .kpi-strip-mobile-stack,
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
      grid-template-columns: 1fr !important;
    }
    .kpi { padding: 14px; }
    .kpi-value { font-size: 28px !important; }
    .kpi-period {
      font-size: 9.5px;
      padding: 2px 6px;
    }

    /* Section heads */
    .section-head h2 {
      font-size: 20px !important;
    }

    /* Toolbar: search input shrinks */
    .toolbar { gap: 8px; }
    .search-input {
      min-width: 0;
      flex: 1 1 100%;
      width: 100%;
    }
    .seg {
      flex: 1 1 100%;
      justify-content: space-between;
    }
    .seg > a, .seg > button {
      padding: 0 8px;
      font-size: 11.5px;
    }

    /* Tables → horizontal scroll wrapper */
    .tbl-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .acct-tbl, .audits-tbl {
      min-width: 540px;
    }
    .acct-tbl thead th,
    .audits-tbl thead th {
      padding: 10px 12px;
      font-size: 9.5px;
    }
    .acct-tbl tbody td,
    .audits-tbl tbody td {
      padding: 12px;
      font-size: 12.5px;
    }

    /* Auditorias summary — 2 cols on mobile */
    .summary { grid-template-columns: 1fr 1fr; gap: 8px; }
    .sum { padding: 12px; }
    .sum .v { font-size: 20px; }

    /* Agentes strip — 2 cols */
    .strip { grid-template-columns: 1fr 1fr; gap: 8px; }
    .strip .item { padding: 12px; }
    .strip .v { font-size: 20px; }

    /* Agentes grid — 1 col */
    .agent-grid { grid-template-columns: 1fr; gap: 10px; }
    .agent-card-rich { padding: 14px; gap: 12px; }
    .agent-card-rich .nm { font-size: 14.5px; }

    /* Activity feed + side stack stack */
    .dashboard-2col {
      grid-template-columns: 1fr !important;
    }

    /* Feed row tighter */
    .feed-row { padding: 12px; gap: 10px; }
    .feed-row {
      grid-template-columns: 32px minmax(0, 1fr) auto;
      align-items: flex-start;
    }
    .feed-row > div[style*="min-width"] {
      display: none;
    }
    .feed-row .st-badge {
      grid-column: 2;
      justify-self: flex-start;
    }
    .feed-row .feed-title { font-size: 12.5px; }

    /* Proposal cards */
    .prop { padding: 14px; }
    .prop-title { font-size: 14px; }
    .prop-desc { padding-left: 0; font-size: 12.5px; }
    .prop-foot { padding-left: 0; }
    .prop-head { gap: 10px; }
    .prop-head,
    .prop-head.no-check {
      grid-template-columns: auto minmax(0, 1fr);
    }
    .prop-head > .cb-box {
      grid-row: span 2;
    }
    .prop-status {
      grid-column: 2;
      justify-self: flex-start;
    }
    .prop-meta-row {
      gap: 6px;
      line-height: 1.45;
    }
    .prop-foot .spacer,
    .bulk .spacer,
    .toolbar .spacer {
      display: none;
    }
    .prop-foot .btn,
    .bulk .btn,
    .bulk [data-slot="button"] {
      flex: 1 1 100%;
      justify-content: center;
    }

    /* Bulk bar wraps */
    .bulk {
      gap: 10px;
      padding: 10px 12px;
    }
    .bulk .pill-acc { font-size: 10.5px; }

    /* Contas — cred card stacks */
    .cred {
      grid-template-columns: 1fr !important;
      gap: 16px;
      padding: 18px;
    }
    .cred .actions {
      width: 100%;
      align-items: stretch;
    }
    .cred .actions > *,
    .cred .actions form,
    .cred .actions .btn {
      width: 100%;
    }
    .cred .actions .btn {
      justify-content: center;
    }
    .cred .since { text-align: left; }
    .cred .email-row {
      display: flex;
      align-items: flex-start;
    }
    .cred .email-row .email {
      max-width: 100%;
      overflow-wrap: anywhere;
      line-height: 1.35;
    }
    .cred .stats { gap: 14px 20px; }
    .cred .stat .v { font-size: 18px; }

    /* MCC grid → 1 col */
    .mcc-grid { grid-template-columns: 1fr; }
    .mcc {
      grid-template-columns: 36px minmax(0, 1fr);
      padding: 14px;
      gap: 12px;
    }
    .mcc .right {
      grid-column: 2;
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    /* Chart row → 1 col */
    .grid.gap-5.lg\:grid-cols-2,
    .grid.gap-6.lg\:grid-cols-2 {
      grid-template-columns: 1fr !important;
    }
    .chart-card { padding: 14px; }
    .chart-head {
      flex-direction: column;
      gap: 12px;
    }
    .chart-head .stat {
      text-align: left;
    }
    .chart-svg { height: 160px; }
    .bar-row {
      grid-template-columns: minmax(82px, 0.9fr) minmax(0, 1fr) 24px;
      gap: 8px;
    }

    /* Tabs row */
    .tabs-row { flex-direction: column; align-items: flex-start; }
    .utabs {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      flex-wrap: nowrap;
      gap: 14px;
    }
    .utabs > a, .utabs > button {
      white-space: nowrap;
      flex-shrink: 0;
    }
    .tabs-meta { padding-bottom: 0; }

    /* Sec head with title + button (Auditorias "Ver fila") */
    .section-head.flex,
    .sec-head.flex {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    /* Tbl footer */
    .tbl-foot {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 10px 14px;
    }

    /* Acc-chip max-width adjustment */
    .acc-chip { max-width: 160px; font-size: 11px; }
    .acc-chip .av { width: 18px; height: 18px; font-size: 8.5px; }

    /* Score bar shrinks */
    .score .bar { width: 40px; }
  }

  /* Tighter still on iPhone SE 375px */
  @media (max-width: 400px) {
    .ds-topbar { padding: 0 12px; }
    .app-main { padding: 16px 14px; }
    .page-head-row h1 { font-size: 22px !important; }
  }

  /* ================================================================
     MOBILE HORIZONTAL-SCROLL GUARD — defensiva contra qualquer elemento
     que vaze pra fora do viewport em mobile (pill com white-space:nowrap
     que estoura, SVG sem overflow control, breadcrumb longo, etc).
     Usar `clip` em vez de `hidden` pra preservar position:sticky.
     ================================================================ */
  @media (max-width: 900px) {
    html, body { overflow-x: clip; }
    .app-main {
      overflow-x: clip;
      min-width: 0;
    }
    /* Min-width: 0 nos containers críticos pra flex children truncarem
       em vez de empurrar o pai. */
    .ds-topbar > * { min-width: 0; }
    .kpi-top { min-width: 0; }
    .kpi-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .kpi-period {
      flex-shrink: 0;
      max-width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .feed-title, .feed-meta {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Breadcrumb — truncate na current page em vez de wrap */
    .ds-crumbs {
      min-width: 0;
      overflow: hidden;
    }
    .ds-crumbs > span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* Wizard frame width em mobile: sem max-width inteiro pra evitar
       margens negativas em qualquer wrapper que cause overflow */
    .wizard-frame { max-width: 100%; }
  }

  /* Em telas BEM estreitas (< 400px), tira o breadcrumb inteiro do topbar
     — o user tem o hamburger pra navegar. Recupera ~120px pro avatar +
     icons cabem confortáveis. */
  @media (max-width: 460px) {
    .ds-crumbs { display: none; }
    .top-divider { display: none; }
    .ds-topbar { gap: 8px; }
  }

  /* Em iPhone SE (320-375px) o topbar ainda tem hamburger + 3 icons (40 cada)
     + avatar (32). Encolhe ícones pra 36 pra dar respiro real. */
  @media (max-width: 380px) {
    .top-icon-btn,
    .mobile-menu-btn {
      width: 36px; height: 36px;
    }
    .ds-topbar { padding: 0 10px; gap: 6px; }
  }

  /* ================================================================
     MOBILE TOUCH TARGET PASS — tap zones ≥44px (Apple HIG) onde possível.
     Aplica em pointer:coarse (touch input) em vez de só width pra cobrir
     também tablets que usam touch mesmo em viewport ≥720px. Visual stays
     compacto no desktop (mouse), só expande pra touch.
     ================================================================ */
  @media (pointer: coarse), (max-width: 720px) {
    /* Buttons — height bumped pra acomodar touch */
    .btn {
      min-height: 40px;
      padding: 0 14px;
    }
    .btn-sm {
      min-height: 36px;
      padding: 0 12px;
    }
    .btn-icon {
      min-width: 40px;
      min-height: 40px;
    }
    .btn-icon.btn-sm {
      min-width: 36px;
      min-height: 36px;
    }

    /* Topbar icon buttons — touch zone */
    .top-icon-btn {
      width: 40px; height: 40px;
    }
    .mobile-menu-btn {
      width: 40px; height: 40px;
    }

    /* DS chip (multi-select tags) — touch zone */
    .ds-chip {
      min-height: 36px;
      padding: 8px 14px;
    }

    /* AccountPicker rows — touch zone com mais ar */
    .ds-account-row {
      padding: 14px 16px;
      gap: 14px;
    }
    .ds-account-name { font-size: 14px; }
    .ds-account-meta { font-size: 12px; }

    /* Stepper — clickable area maior (dot stays 28, button padding cresce) */
    .wizard-stepper-button {
      padding: 8px 0;
      min-height: 44px;
    }

    /* Status pill / badge — não muda visual mas garante target em click */
    .badge {
      min-height: 24px;
    }

    /* Form inputs — touch height */
    .ds-input {
      min-height: 40px;
      padding: 10px 12px;
      font-size: 14px;
    }
    .ds-input.ds-input-sm {
      min-height: 36px;
      padding: 6px 10px;
      font-size: 13px;
    }
    textarea.ds-input {
      min-height: 96px;
    }
  }

  /* ================================================================
     MOBILE NARROW — ajustes pra 540px ↓ que precisam de mais que touch
     ================================================================ */
  @media (max-width: 540px) {
    /* Stepper dots maiores pra touch + número mais legível */
    .wizard-stepper {
      --stepper-dot-size: 32px;
      --stepper-dot-half: 16px;
    }
    .wizard-stepper-circle {
      font-size: 13px;
    }
    .wizard-stepper-icon { width: 15px; height: 15px; }

    /* Stage-hero — stats stack abaixo do meta em vez de lado direito */
    .stage-hero {
      grid-template-columns: 40px 1fr;
      grid-template-rows: auto auto;
      gap: 12px;
    }
    .stage-hero-stats {
      grid-column: 1 / -1;
      justify-content: space-between;
      padding-top: 12px;
      border-top: 1px dashed var(--line-soft);
    }
    .stage-hero-stat {
      align-items: flex-start;
    }

    /* Brief preview — drop sticky behavior em mobile (vira block normal) */
    .brief-preview {
      position: static;
      top: auto;
    }

    /* Campaign hero — title menor, tiles wrap mais cedo */
    .campaign-hero { padding: 18px 18px 16px; }
    .campaign-hero-title { font-size: 22px; }
    .campaign-hero-icon { width: 36px; height: 36px; }
    .campaign-hero-icon svg { width: 18px; height: 18px; }
    .campaign-tile { padding: 10px 12px; }
    .campaign-tile-value { font-size: 18px; }

    /* Published hero — CTA full-width pra acomodar polegar */
    .published-hero { padding: 22px 20px; }
    .published-hero-icon { width: 48px; height: 48px; border-radius: 14px; }
    .published-hero-icon svg { width: 24px; height: 24px; }
    .published-hero-title { font-size: 22px; }
    .published-hero-cta {
      width: 100%;
      justify-content: center;
      height: 44px;
    }

    /* Adgroup-rich — header em 1 col, stats stack */
    .adgroup-rich-head {
      grid-template-columns: 32px 1fr;
      gap: 10px;
    }
    .adgroup-rich-stats {
      grid-column: 1 / -1;
      justify-content: flex-start;
      gap: 18px;
      padding-top: 10px;
      border-top: 1px dashed var(--line-soft);
    }

    /* kw-table — esconde volume bar + competition label (mantém dot),
       compacta remove btn em ícone-style */
    .kw-table .kw-vol-bar { display: none; }
    .kw-table .kw-vol-num { min-width: 0; text-align: left; }
    .kw-vol-cell { width: 80px; }
    .competition-dot { font-size: 0; }
    .competition-dot::before { width: 9px; height: 9px; }

    /* SERP preview — padding menor pra render perto da edge */
    .serp-preview { padding: 14px 16px; }
    .serp-preview-headline { font-size: 17px; }

    /* Wizard actions sticky — confirmar safe-area pra notch */
    .wizard-actions-sticky {
      padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }

    /* PublishConfirm / Abandon Dialog — max-h evita push de footer offscreen */
    [role="dialog"] {
      max-height: 90vh;
      overflow-y: auto;
    }

    /* Page eyebrow badge — não cresce em touch (já é label) */
    .page-eyebrow {
      padding: 4px 10px;
    }

    /* Wizard frame — padding lateral pra não tocar edge */
    .wizard-frame {
      width: auto;
    }

    /* Brief-split — vira 1 col abaixo de 540 também */
    .brief-split {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    /* Wizard form section spacing menor */
    .wizard-form-section + .wizard-form-section {
      margin-top: 20px;
      padding-top: 18px;
    }

    /* Selected account hero stats — stack em vez de side-by-side */
    .stage-hero-stat-value { font-size: 14px; }
  }

  /* ---- Surfaces ---- */
  .surface {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }
  .ds-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
  }
  .ds-card-raised {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
  }

  /* ---- Badges ---- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    font: 500 11px var(--font-mono);
    letter-spacing: 0.02em;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--fg-1);
    background: var(--bg-3);
  }
  .badge-acc  { color: var(--acc);  border-color: var(--acc-line); background: var(--acc-soft); }
  .badge-pos  { color: var(--pos);  border-color: color-mix(in oklab, var(--pos) 30%, transparent); background: var(--pos-soft); }
  .badge-warn { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 30%, transparent); background: var(--warn-soft); }
  .badge-neg  { color: var(--neg);  border-color: color-mix(in oklab, var(--neg) 30%, transparent); background: var(--neg-soft); }
  .badge-info { color: var(--info); border-color: color-mix(in oklab, var(--info) 30%, transparent); background: var(--info-soft); }

  /* Live pulse pip pra badge "executando" */
  .badge .pip {
    width: 6px; height: 6px; border-radius: 999px;
    background: currentColor;
    animation: pulse-dot 1.6s var(--ease) infinite;
  }

  /* ---- Dense table ---- */
  .table-dense th,
  .table-dense td {
    padding: 8px 12px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }
  .table-dense th {
    color: var(--fg-2);
    font: 500 10.5px var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
  }
  .table-dense tr { border-bottom: 1px solid var(--line-soft); }
  .table-dense tbody tr:hover td { background: var(--bg-3); }

  /* ---- Labels ---- */
  .label-caps {
    font: 500 10.5px var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .label-eyebrow {
    font: 500 11px var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acc);
  }

  /* Page eyebrow badge — pill com cor accent que SITS ABOVE o page-head-h1
     em bloco próprio. Substitui o pattern label-caps inline-prefix do h1
     que ficava esquisito (eyebrow grudada ao começo do título). */
  .page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 4px;
    border-radius: 999px;
    font: 500 10.5px var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acc);
    background: var(--acc-soft);
    border: 1px solid var(--acc-line);
    /* Permite que o consumer apenas troque o markup; o badge já se posiciona
       sozinho no fluxo (não precisa wrapper div pra quebrar linha). */
  }
  .page-eyebrow-wrap {
    display: flex;
    margin-bottom: 12px;
  }

  kbd.key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 4px;
    font: 500 11px var(--font-mono);
    color: var(--fg-1);
  }

  /* ---- Brand mark ---- */
  .brand-mark {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: var(--acc);
    color: var(--acc-ink);
    display: grid;
    place-items: center;
    font: 700 13px var(--font-sans);
    letter-spacing: -0.02em;
    box-shadow: 0 0 0 1px var(--acc-line), 0 6px 18px -6px var(--acc-glow);
    flex-shrink: 0;
  }

  /* ---- Sidebar primitives ---- */
  .ds-side-section {
    font: 500 10px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
    padding: 14px 8px 6px;
  }
  .ds-side-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 6px;
    font: 400 13px var(--font-sans);
    color: var(--fg-1);
    text-decoration: none;
    transition: all var(--dur) var(--ease);
    gap: 10px;
  }
  .ds-side-link:hover { background: var(--bg-2); color: var(--fg-0); }
  .ds-side-link.active {
    background: var(--bg-3);
    color: var(--fg-0);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .ds-side-link .count {
    font: 400 10px var(--font-mono);
    color: var(--fg-3);
  }
  .ds-side-link .icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: currentColor;
  }

  /* ---- KPI ---- */
  .kpi {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-1);
    position: relative;
    overflow: hidden;
  }
  .kpi::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(420px 160px at 100% 0%, var(--acc-soft), transparent 60%);
    opacity: 0.5;
    pointer-events: none;
  }
  .kpi.pos::before { background: radial-gradient(420px 160px at 100% 0%, var(--pos-soft), transparent 60%); }
  .kpi.warn::before { background: radial-gradient(420px 160px at 100% 0%, var(--warn-soft), transparent 60%); }
  .kpi-top {
    display: flex; align-items: center; justify-content: space-between;
    position: relative;
    gap: 10px;
  }
  .kpi-top-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    flex-shrink: 0;
  }
  .kpi-label {
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .kpi-label .ic {
    width: 12px; height: 12px;
    color: var(--fg-2);
    flex-shrink: 0;
  }
  .kpi-period {
    font: 400 10.5px var(--font-mono);
    color: var(--fg-2);
    padding: 3px 7px;
    border: 1px solid var(--line-soft);
    background: var(--bg-1);
    border-radius: 999px;
    white-space: nowrap;
  }
  .kpi-value-row {
    margin-top: 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    position: relative;
  }
  .kpi-value {
    font: 500 36px var(--font-mono);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--fg-0);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
  }
  .kpi-unit {
    font: 400 14px var(--font-mono);
    color: var(--fg-2);
  }
  .kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px 3px 6px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: 500 11px var(--font-mono);
    letter-spacing: 0.02em;
  }
  .kpi-delta.pos {
    color: var(--pos);
    background: var(--pos-soft);
    border-color: color-mix(in oklab, var(--pos) 26%, transparent);
  }
  .kpi-delta.neg {
    color: var(--neg);
    background: var(--neg-soft);
    border-color: color-mix(in oklab, var(--neg) 26%, transparent);
  }
  .kpi-delta.warn {
    color: var(--warn);
    background: var(--warn-soft);
    border-color: color-mix(in oklab, var(--warn) 26%, transparent);
  }
  .kpi-delta.acc {
    color: var(--acc);
    background: var(--acc-soft);
    border-color: var(--acc-line);
  }
  .kpi-vs {
    font: 400 11px/1.4 var(--font-mono);
    color: var(--fg-2);
    margin-top: 8px;
    letter-spacing: 0.02em;
    position: relative;
  }
  .kpi-vs b { color: var(--fg-1); font-weight: 500; }

  /* Inline progress bar inside a KPI card */
  .kpi-progress {
    margin-top: 16px;
    height: 4px;
    border-radius: 999px;
    background: var(--bg-4);
    border: 1px solid var(--line-soft);
    position: relative;
    overflow: hidden;
  }
  .kpi-progress > i {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--acc); border-radius: 999px;
  }
  .kpi.pos .kpi-progress > i { background: var(--pos); }
  .kpi.warn .kpi-progress > i { background: var(--warn); }
  .kpi.neg .kpi-progress > i { background: var(--neg); }

  /* Larger sparkline area (full-width inside KPI) */
  .kpi-spark-full {
    margin-top: 14px;
    height: 36px;
    position: relative;
  }
  .kpi-spark-full svg {
    width: 100%; height: 100%; display: block; overflow: visible;
  }

  .kpi.metric-color-kpi {
    --metric-color: var(--acc);
    background:
      linear-gradient(135deg, color-mix(in oklab, var(--metric-color) 28%, var(--bg-2)) 0%, var(--bg-2) 64%),
      var(--bg-2);
    border-color: color-mix(in oklab, var(--metric-color) 58%, var(--line));
    box-shadow:
      0 1px 0 rgba(255,255,255,0.05) inset,
      0 0 0 1px color-mix(in oklab, var(--metric-color) 18%, transparent),
      0 18px 42px -26px color-mix(in oklab, var(--metric-color) 80%, transparent);
  }
  .kpi.metric-color-kpi::before {
    background:
      radial-gradient(460px 190px at 100% 0%, color-mix(in oklab, var(--metric-color) 46%, transparent), transparent 62%),
      linear-gradient(90deg, color-mix(in oklab, var(--metric-color) 18%, transparent), transparent 62%);
    opacity: 0.9;
  }
  .kpi.metric-color-kpi::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--metric-color), color-mix(in oklab, var(--metric-color) 58%, var(--bg-2)));
    box-shadow: 0 0 28px -5px var(--metric-color);
    pointer-events: none;
  }
  .kpi.metric-color-kpi .kpi-label,
  .kpi.metric-color-kpi .kpi-label .ic {
    color: color-mix(in oklab, var(--metric-color) 74%, var(--fg-0));
  }
  .kpi.metric-color-kpi .kpi-period {
    color: color-mix(in oklab, var(--metric-color) 62%, var(--fg-0));
    background: color-mix(in oklab, var(--metric-color) 15%, var(--bg-1));
    border-color: color-mix(in oklab, var(--metric-color) 36%, transparent);
  }
  .kpi.metric-color-kpi .kpi-vs {
    color: color-mix(in oklab, var(--metric-color) 24%, var(--fg-2));
  }
  .metric-color-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 2;
  }
  .metric-color-swatch,
  .metric-color-reset {
    appearance: none;
    width: 24px;
    height: 24px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid color-mix(in oklab, var(--metric-color) 44%, transparent);
    background: color-mix(in oklab, var(--metric-color) 18%, var(--bg-1));
    color: color-mix(in oklab, var(--metric-color) 78%, var(--fg-0));
    cursor: pointer;
    transition:
      background var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease),
      transform var(--dur-fast) var(--ease);
  }
  .metric-color-swatch {
    position: relative;
    overflow: hidden;
  }
  .metric-color-swatch::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 4px;
    background: var(--metric-color);
    opacity: 0.34;
  }
  .metric-color-swatch svg,
  .metric-color-reset svg {
    position: relative;
    z-index: 1;
  }
  .metric-color-swatch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  .metric-color-swatch:hover,
  .metric-color-reset:hover {
    background: color-mix(in oklab, var(--metric-color) 28%, var(--bg-1));
    border-color: color-mix(in oklab, var(--metric-color) 68%, transparent);
    transform: translateY(-1px);
  }
  .metric-color-swatch:focus-within,
  .metric-color-reset:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--metric-color) 26%, transparent);
  }

  /* ---- Score Ring (custom — não tem nos arquivos do DS, criamos seguindo style) ---- */
  .score-ring {
    --score: 0; /* @kind other */
    --ring-size: 96px;
    --ring-stroke: 8px;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 999px;
    background:
      conic-gradient(var(--acc) calc(var(--score) * 1%), var(--bg-3) 0);
    display: grid;
    place-items: center;
    position: relative;
  }
  .score-ring::after {
    content: "";
    position: absolute; inset: var(--ring-stroke);
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--line);
  }
  .score-ring > .score-val {
    position: relative; z-index: 1;
    font: 500 24px var(--font-mono);
    letter-spacing: -0.02em;
    color: var(--fg-0);
  }
  .score-ring > .score-val small {
    font: 400 11px var(--font-mono);
    color: var(--fg-2);
  }
  /* Variant: lower score = warn/neg */
  .score-ring.warn { background: conic-gradient(var(--warn) calc(var(--score) * 1%), var(--bg-3) 0); }
  .score-ring.neg  { background: conic-gradient(var(--neg)  calc(var(--score) * 1%), var(--bg-3) 0); }

  /* ---- Status timeline (oauth-step inspired) ---- */
  .step-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .step-row:last-child { border-bottom: 0; }
  .step-num {
    width: 24px; height: 24px;
    border-radius: 999px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--fg-1);
    display: grid; place-items: center;
    font: 500 12px var(--font-mono);
    margin-top: 2px;
  }
  .step-num.done {
    background: var(--acc);
    border-color: transparent;
    color: var(--acc-ink);
  }
  .step-num.active {
    background: var(--acc-soft);
    border-color: var(--acc-line);
    color: var(--acc);
    animation: pulse-dot 1.6s var(--ease) infinite;
  }
  .step-num.failed {
    background: var(--neg-soft);
    border-color: color-mix(in oklab, var(--neg) 30%, transparent);
    color: var(--neg);
  }
  .step-title {
    font: 500 13px var(--font-sans);
    color: var(--fg-0);
    letter-spacing: -0.005em;
  }
  .step-desc {
    margin-top: 4px;
    font: 400 12px var(--font-sans);
    color: var(--fg-1);
    line-height: 1.55;
  }

  /* ---- Empty state ---- */
  .empty {
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    background: color-mix(in oklab, var(--bg-1) 50%, transparent);
  }
  .empty-icon {
    width: 48px; height: 48px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    color: var(--fg-2);
    display: grid; place-items: center;
  }
  .empty h4 {
    margin: 0;
    font: 500 15px var(--font-sans);
    letter-spacing: -0.005em;
    color: var(--fg-0);
  }
  .empty p {
    margin: 0;
    max-width: 380px;
    color: var(--fg-1);
    font: 400 12.5px var(--font-sans);
    line-height: 1.55;
  }

  /* ---- Skeleton ---- */
  .sk {
    background: linear-gradient(90deg, var(--bg-3) 0%, var(--bg-4) 50%, var(--bg-3) 100%);
    background-size: 200% 100%;
    border-radius: var(--r-sm);
    animation: sk 1.6s ease-in-out infinite;
  }

  /* ---- Proposal card (HITL queue style) ---- */
  .proposal {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 18px 18px 16px;
    box-shadow: var(--shadow-2);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .proposal.accepted {
    border-color: color-mix(in oklab, var(--pos) 32%, transparent);
    background: color-mix(in oklab, var(--pos) 4%, var(--bg-2));
  }
  .proposal.rejected {
    opacity: 0.55;
  }
  .proposal.rejected .proposal-title {
    text-decoration: line-through;
  }
  .proposal.executing {
    border-color: var(--acc-line);
    box-shadow: var(--shadow-glow);
  }
  .proposal.failed {
    border-color: color-mix(in oklab, var(--neg) 32%, transparent);
  }
  .proposal-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .proposal-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }
  .proposal-title {
    font: 500 14px var(--font-sans);
    letter-spacing: -0.005em;
    color: var(--fg-0);
  }
  .proposal-sub {
    font: 400 11.5px var(--font-mono);
    color: var(--fg-2);
  }
  .proposal-summary {
    font: 400 13px var(--font-sans);
    color: var(--fg-1);
    background: var(--bg-1);
    padding: 12px 14px;
    border-radius: var(--r-md);
    line-height: 1.55;
    white-space: pre-wrap;
  }
  .proposal-error {
    font: 400 12px var(--font-mono);
    color: var(--neg);
    background: var(--neg-soft);
    border: 1px solid color-mix(in oklab, var(--neg) 30%, transparent);
    padding: 10px 12px;
    border-radius: var(--r-md);
    line-height: 1.55;
  }
  .proposal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }

  /* ---- Top bar ---- */
  .ds-topbar {
    height: 56px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg-0);
    position: sticky; top: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
  }
  .ds-crumbs {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
  }
  .ds-crumbs > span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ds-crumbs > span:last-child {
    flex: 1 1 auto;
  }
  .ds-crumbs a,
  .ds-crumbs span span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- Section header ---- */
  .section-head h2 {
    font: 500 24px var(--font-sans);
    letter-spacing: -0.015em;
    color: var(--fg-0);
    margin: 0;
  }
  .section-head .label-caps {
    margin-bottom: 4px;
    display: block;
  }
  .section-head p {
    margin: 4px 0 0;
    color: var(--fg-1);
    font: 400 13px var(--font-sans);
    line-height: 1.55;
  }

  /* ================================================================
     Sidebar — workspace switcher row + user card footer
     ================================================================ */
  .side-ws {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    margin: 4px 0 6px;
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease);
  }
  .side-ws:hover { border-color: var(--line); }
  .side-ws .av {
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--acc-soft); color: var(--acc);
    border: 1px solid var(--acc-line);
    display: grid; place-items: center;
    font: 600 10px/1 var(--font-mono);
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .side-ws .nm {
    flex: 1; min-width: 0;
    font: 500 12.5px/1.1 var(--font-sans);
    color: var(--fg-0);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .side-ws .ic {
    width: 12px; height: 12px;
    color: var(--fg-2);
    flex-shrink: 0;
  }

  /* Active nav count pill (acc background) */
  .ds-side-link.active .count {
    background: var(--acc);
    color: var(--acc-ink);
    padding: 3px 6px;
    border-radius: 999px;
    font: 500 10px var(--font-mono);
  }

  .side-user {
    margin-top: auto;
    display: flex; align-items: center; gap: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--line-soft);
    background: var(--bg-2);
  }
  .side-user .av {
    width: 28px; height: 28px; border-radius: 999px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    display: grid; place-items: center;
    font: 600 11px/1 var(--font-mono);
    color: var(--fg-0);
    flex-shrink: 0;
  }
  .side-user .col { flex: 1; min-width: 0; }
  .side-user .nm {
    font: 500 12px/1.2 var(--font-sans);
    color: var(--fg-0);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .side-user .role {
    font: 400 10.5px/1 var(--font-mono);
    color: var(--fg-2);
    margin-top: 3px;
    letter-spacing: 0.02em;
  }
  .side-user .gear {
    color: var(--fg-2);
    cursor: pointer;
    transition: color var(--dur) var(--ease);
    flex-shrink: 0;
  }
  .side-user .gear:hover { color: var(--fg-0); }

  /* ================================================================
     Topbar — icon buttons (search, bell, theme)
     ================================================================ */
  .top-icon-btn {
    width: 32px; height: 32px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--line-soft);
    color: var(--fg-1);
    cursor: pointer;
    display: grid; place-items: center;
    transition: all var(--dur) var(--ease);
  }
  .top-icon-btn:hover {
    background: var(--bg-2);
    color: var(--fg-0);
    border-color: var(--line);
  }
  .top-divider {
    width: 1px; height: 18px;
    background: var(--line-soft);
    margin: 0 4px;
  }
  .topbar-user-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  /* ================================================================
     Dashboard — page-head with right-side actions + role pill
     ================================================================ */
  .page-head-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
  }
  .role-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.02em;
    color: var(--acc);
    background: var(--acc-soft);
    border: 1px solid var(--acc-line);
    padding: 3px 8px;
    border-radius: 999px;
    margin-left: 6px;
  }
  .page-head-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  }

  /* ================================================================
     Activity feed — Auditorias list
     ================================================================ */
  .feed {
    display: flex; flex-direction: column;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .feed-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    gap: 14px;
    padding: 14px 16px;
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
    transition: background var(--dur) var(--ease);
    text-decoration: none;
    color: inherit;
  }
  .feed-row:last-child { border-bottom: 0; }
  .feed-row:hover { background: var(--bg-3); }

  .feed-av {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    display: grid; place-items: center;
    color: var(--fg-1);
    flex-shrink: 0;
  }
  .feed-av.acc {
    background: var(--acc-soft); color: var(--acc);
    border-color: var(--acc-line);
  }
  .feed-av.info {
    background: var(--info-soft); color: var(--info);
    border-color: color-mix(in oklab, var(--info) 26%, transparent);
  }
  .feed-av.warn {
    background: var(--warn-soft); color: var(--warn);
    border-color: color-mix(in oklab, var(--warn) 26%, transparent);
  }
  .feed-av.pos {
    background: var(--pos-soft); color: var(--pos);
    border-color: color-mix(in oklab, var(--pos) 26%, transparent);
  }
  .feed-av svg { width: 14px; height: 14px; }

  .feed-body { min-width: 0; }
  .feed-title {
    font: 500 13px/1.3 var(--font-sans);
    letter-spacing: -0.005em;
    color: var(--fg-0);
  }
  .feed-title .on {
    color: var(--fg-1);
    font-weight: 400;
    margin-left: 2px;
  }
  .feed-title .on::before {
    content: "·";
    color: var(--fg-3);
    margin: 0 6px;
  }
  .feed-meta {
    font: 400 11px/1.4 var(--font-mono);
    color: var(--fg-2);
    margin-top: 4px;
    letter-spacing: 0.02em;
  }
  .feed-meta .dot {
    color: var(--fg-3);
    margin: 0 6px;
  }
  .feed-meta b {
    color: var(--fg-1);
    font-weight: 500;
  }

  .feed-score {
    display: flex; align-items: center; gap: 10px;
  }
  .feed-score .num {
    font: 500 12.5px/1 var(--font-mono);
    color: var(--fg-0);
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.005em;
  }
  .feed-score .num .max {
    color: var(--fg-3);
    margin-left: 2px;
  }
  .feed-score .bar {
    width: 64px; height: 4px;
    border-radius: 999px;
    background: var(--bg-4);
    border: 1px solid var(--line-soft);
    position: relative;
    overflow: hidden;
  }
  .feed-score .bar i {
    position: absolute; left: 0; top: 0; bottom: 0;
    border-radius: 999px;
  }
  .feed-score.lo .bar i { background: var(--warn); }
  .feed-score.md .bar i { background: var(--acc); }
  .feed-score.hi .bar i { background: var(--pos); }

  .feed-val {
    font: 500 12.5px/1 var(--font-mono);
    color: var(--pos);
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.005em;
    white-space: nowrap;
  }
  .feed-val small {
    color: var(--fg-3);
    font-weight: 400;
  }

  /* Status badge (matches design — lowercase, pip on left) */
  .st-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 999px;
    text-transform: lowercase;
    white-space: nowrap;
  }
  .st-badge .pip {
    width: 5px; height: 5px;
    border-radius: 999px;
    background: currentColor;
  }
  .st-badge.completed {
    color: var(--pos);
    background: var(--pos-soft);
    border: 1px solid color-mix(in oklab, var(--pos) 26%, transparent);
  }
  .st-badge.pending {
    color: var(--warn);
    background: var(--warn-soft);
    border: 1px solid color-mix(in oklab, var(--warn) 26%, transparent);
  }
  .st-badge.pending .pip {
    box-shadow: 0 0 6px currentColor;
    animation: pulse-dot 1.6s ease-in-out infinite;
  }
  .st-badge.failed {
    color: var(--neg);
    background: var(--neg-soft);
    border: 1px solid color-mix(in oklab, var(--neg) 26%, transparent);
  }
  .st-badge.info {
    color: var(--info);
    background: var(--info-soft);
    border: 1px solid color-mix(in oklab, var(--info) 26%, transparent);
  }
  .st-badge.info .pip {
    box-shadow: 0 0 6px currentColor;
    animation: pulse-dot 1.6s ease-in-out infinite;
  }
  .st-badge.muted {
    color: var(--fg-2);
    background: var(--bg-3);
    border: 1px solid var(--line);
  }

  /* ================================================================
     Shortcut cards (side stack)
     ================================================================ */
  .shortcut {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: center;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all var(--dur) var(--ease);
  }
  .shortcut:hover {
    border-color: var(--line-strong);
    background: var(--bg-3);
  }
  .shortcut .ic-wrap {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: grid; place-items: center;
    background: var(--acc-soft);
    color: var(--acc);
    border: 1px solid var(--acc-line);
    flex-shrink: 0;
  }
  .shortcut.info .ic-wrap {
    background: var(--info-soft); color: var(--info);
    border-color: color-mix(in oklab, var(--info) 26%, transparent);
  }
  .shortcut.warn .ic-wrap {
    background: var(--warn-soft); color: var(--warn);
    border-color: color-mix(in oklab, var(--warn) 26%, transparent);
  }
  .shortcut.neutral .ic-wrap {
    background: var(--bg-3); color: var(--fg-1);
    border-color: var(--line);
  }
  .shortcut .ic-wrap svg { width: 16px; height: 16px; }
  .shortcut .ttl {
    font: 500 13px/1.3 var(--font-sans);
    letter-spacing: -0.005em;
    color: var(--fg-0);
  }
  .shortcut .sub {
    font: 400 11.5px/1.3 var(--font-mono);
    color: var(--fg-2);
    margin-top: 4px;
    letter-spacing: 0.02em;
  }
  .shortcut .sub b { color: var(--fg-1); font-weight: 500; }
  .shortcut .chev {
    color: var(--fg-2);
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
    flex-shrink: 0;
  }
  .shortcut:hover .chev {
    transform: translateX(2px);
    color: var(--fg-0);
  }

  /* ================================================================
     Chart card — head with cap/ttl/sub + stat
     ================================================================ */
  .chart-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px 18px 14px;
  }
  .chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
  }
  .chart-head .cap {
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .chart-head .ttl {
    font: 500 16px/1.2 var(--font-sans);
    letter-spacing: -0.01em;
    margin-top: 6px;
    color: var(--fg-0);
  }
  .chart-head .sub {
    font: 400 12px/1.4 var(--font-sans);
    color: var(--fg-1);
    margin-top: 4px;
  }
  .chart-head .stat {
    text-align: right;
    flex-shrink: 0;
  }
  .chart-head .stat .v {
    font: 500 24px/1 var(--font-mono);
    color: var(--fg-0);
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.01em;
  }
  .chart-head .stat .l {
    font: 400 11px/1 var(--font-mono);
    color: var(--fg-2);
    margin-top: 5px;
    letter-spacing: 0.02em;
  }

  /* Horizontal agent activity bars */
  .bars { display: flex; flex-direction: column; gap: 12px; }
  .bar-row {
    display: grid;
    grid-template-columns: 120px 1fr 28px;
    gap: 12px;
    align-items: center;
  }
  .bar-row .nm {
    font: 500 12.5px/1.2 var(--font-sans);
    color: var(--fg-0);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bar-row .tr {
    height: 10px;
    background: var(--bg-1);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    position: relative;
    overflow: hidden;
  }
  .bar-row .tr i {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--acc) 0%, color-mix(in oklab, var(--acc) 70%, transparent) 100%);
    border-radius: 999px;
  }
  .bar-row.alt .tr i {
    background: linear-gradient(90deg, var(--info) 0%, color-mix(in oklab, var(--info) 70%, transparent) 100%);
  }
  .bar-row .n {
    text-align: right;
    font: 500 12.5px/1 var(--font-mono);
    color: var(--fg-0);
    font-feature-settings: "tnum" 1;
  }
  .bar-axis {
    display: grid;
    grid-template-columns: 120px 1fr 28px;
    gap: 12px;
    margin-top: 14px;
  }
  .bar-axis .scale {
    display: flex; justify-content: space-between;
    font: 400 10px/1 var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
  }

  /* ================================================================
     Contas Google Ads — Credential card (the integration)
     ================================================================ */
  .cred {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 22px 24px 20px;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 20px;
    align-items: flex-start;
    box-shadow: var(--shadow-2);
  }
  .cred::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(520px 220px at 100% 0%, var(--acc-soft), transparent 60%);
    opacity: 0.55;
    pointer-events: none;
  }
  .cred .gicon {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--bg-1); border: 1px solid var(--line);
    display: grid; place-items: center;
    box-shadow: var(--shadow-1);
    position: relative;
  }
  .cred .gicon::after {
    content: ""; position: absolute; bottom: -3px; right: -3px;
    width: 16px; height: 16px; border-radius: 999px;
    background: var(--pos);
    border: 3px solid var(--bg-3);
    box-shadow: 0 0 8px var(--pos);
  }
  .cred .gicon.error::after { background: var(--neg); box-shadow: 0 0 8px var(--neg); }
  .cred .gicon.warn::after { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
  .cred .gicon svg { width: 26px; height: 26px; }

  .cred .body { position: relative; min-width: 0; }
  .cred .eyebrow {
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .cred h2 {
    margin: 6px 0 4px;
    font: 500 22px/1.1 var(--font-sans);
    letter-spacing: -0.018em;
    color: var(--fg-0);
  }
  .cred .email-row {
    display: inline-flex; align-items: center; gap: 8px;
    font: 400 13px/1 var(--font-sans);
    color: var(--fg-1);
    margin-top: 6px;
    flex-wrap: wrap;
  }
  .cred .email-row .email {
    font: 500 13px/1 var(--font-mono);
    color: var(--fg-0);
    background: var(--bg-1);
    border: 1px solid var(--line-soft);
    padding: 5px 9px;
    border-radius: 6px;
    letter-spacing: 0.005em;
  }
  .cred .stats {
    display: flex; gap: 28px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--line-soft);
    flex-wrap: wrap;
  }
  .cred .stat .l {
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .cred .stat .v {
    font: 500 22px/1 var(--font-mono);
    color: var(--fg-0);
    font-feature-settings: "tnum" 1;
    margin-top: 8px;
    letter-spacing: -0.005em;
  }
  .cred .stat .v small {
    font: 500 11px/1 var(--font-mono);
    color: var(--fg-2);
    margin-left: 4px;
    letter-spacing: 0.02em;
  }
  .cred .stat.status .v {
    color: var(--pos);
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px;
  }
  .cred .stat.status.neg .v { color: var(--neg); }
  .cred .stat.status.warn .v { color: var(--warn); }
  .cred .stat.status .pip {
    width: 8px; height: 8px; border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: pulse-dot 1.6s ease-in-out infinite;
  }

  .cred .actions {
    position: relative;
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 10px;
  }
  .cred .since {
    font: 400 11px/1.4 var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
    text-align: right;
  }
  .cred .since b { color: var(--fg-1); font-weight: 500; }

  @media (max-width: 1100px) {
    .cred { grid-template-columns: 1fr; }
    .cred .actions { align-items: flex-start; }
  }

  /* ================================================================
     Contas Google Ads — MCC grid cards
     ================================================================ */
  .mcc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  @media (max-width: 1100px) { .mcc-grid { grid-template-columns: 1fr; } }
  .mcc {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 14px;
    align-items: center;
    transition: border-color var(--dur) var(--ease);
    text-decoration: none;
    color: inherit;
  }
  .mcc:hover { border-color: var(--line-strong); }
  .mcc .ic-wrap {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--info-soft); color: var(--info);
    border: 1px solid color-mix(in oklab, var(--info) 26%, transparent);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .mcc.untitled .ic-wrap {
    background: var(--bg-3); color: var(--fg-2);
    border-color: var(--line);
  }
  .mcc .ic-wrap svg { width: 16px; height: 16px; }
  .mcc .ttl {
    font: 500 14px/1.2 var(--font-sans);
    letter-spacing: -0.005em;
    color: var(--fg-0);
  }
  .mcc.untitled .ttl {
    color: var(--fg-1);
    font-style: italic;
    font-weight: 400;
  }
  .mcc .id-row {
    display: flex; align-items: center; gap: 6px;
    margin-top: 5px;
    font: 400 11.5px/1 var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
    flex-wrap: wrap;
  }
  .mcc .id-row .id { color: var(--fg-1); font-weight: 500; }
  .mcc .id-row .pipe { color: var(--fg-3); }
  .mcc .right {
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
  }
  .mcc .role-tag {
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--info);
    background: var(--info-soft);
    padding: 4px 7px;
    border-radius: 4px;
    border: 1px solid color-mix(in oklab, var(--info) 26%, transparent);
  }
  .mcc.untitled .role-tag {
    color: var(--fg-2);
    background: var(--bg-3);
    border-color: var(--line);
  }

  /* ================================================================
     Contas Google Ads — Toolbar (search + filters + sync pill)
     ================================================================ */
  .toolbar {
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .toolbar .spacer { flex: 1; }
  .search-input {
    display: flex; align-items: center; gap: 8px;
    height: 32px;
    padding: 0 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    min-width: 260px;
    flex: 0 1 320px;
    transition: border-color var(--dur) var(--ease);
  }
  .search-input:focus-within {
    border-color: var(--acc-line);
    box-shadow: 0 0 0 3px var(--acc-soft);
  }
  .search-input svg {
    color: var(--fg-2);
    flex-shrink: 0;
  }
  .search-input input {
    border: 0; outline: none; background: transparent;
    flex: 1; min-width: 0;
    font: 400 13px/1 var(--font-sans);
    color: var(--fg-0);
  }
  .search-input input::placeholder { color: var(--fg-2); }
  .search-input .kbd {
    font: 500 10px/1 var(--font-mono);
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--fg-2);
  }

  /* Generic info pill (currency, timezone, sync) */
  .pill-info {
    display: inline-flex; align-items: center; gap: 5px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.02em;
    color: var(--fg-1);
    background: var(--bg-1);
    border: 1px solid var(--line-soft);
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
  }
  .pill-info .ic {
    width: 10px; height: 10px;
    color: var(--fg-2);
    flex-shrink: 0;
  }
  .pill-info.cur { color: var(--fg-0); }

  /* Status pill — pos with pulsing pip */
  .status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.02em;
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--pos);
    background: var(--pos-soft);
    border: 1px solid color-mix(in oklab, var(--pos) 26%, transparent);
  }
  .status-pill.warn {
    color: var(--warn);
    background: var(--warn-soft);
    border-color: color-mix(in oklab, var(--warn) 26%, transparent);
  }
  .status-pill.neg {
    color: var(--neg);
    background: var(--neg-soft);
    border-color: color-mix(in oklab, var(--neg) 26%, transparent);
  }
  .status-pill.muted {
    color: var(--fg-2);
    background: var(--bg-3);
    border-color: var(--line);
  }
  .status-pill .pip {
    width: 5px; height: 5px; border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 5px currentColor;
  }
  .status-pill.live .pip { animation: pulse-dot 1.6s ease-in-out infinite; }

  /* ================================================================
     Contas Google Ads — Accounts table
     ================================================================ */
  .tbl-wrap {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .acct-tbl {
    width: 100%;
    border-collapse: collapse;
  }
  .acct-tbl thead th {
    text-align: left;
    padding: 11px 16px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-2);
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
  }
  .acct-tbl thead th.right { text-align: right; }
  .acct-tbl tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    font: 400 13px/1.3 var(--font-sans);
    color: var(--fg-0);
  }
  .acct-tbl tbody tr:last-child td { border-bottom: 0; }
  .acct-tbl tbody tr {
    transition: background var(--dur) var(--ease);
  }
  .acct-tbl tbody tr:hover td { background: var(--bg-3); }
  .acct-tbl tbody tr a.row-link {
    color: inherit; text-decoration: none;
    display: block;
  }

  .acct-cell {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
  }
  .acct-cell .av {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: grid; place-items: center;
    flex-shrink: 0;
    font: 600 12px/1 var(--font-mono);
    letter-spacing: 0.02em;
    color: var(--acc-ink);
    border: 1px solid transparent;
  }
  .acct-cell .av.c0 { background: linear-gradient(135deg, oklch(0.62 0.18 255), oklch(0.55 0.20 235)); }
  .acct-cell .av.c1 { background: linear-gradient(135deg, oklch(0.62 0.16 175), oklch(0.55 0.18 200)); }
  .acct-cell .av.c2 { background: linear-gradient(135deg, oklch(0.65 0.16 145), oklch(0.58 0.18 170)); }
  .acct-cell .av.c3 { background: linear-gradient(135deg, oklch(0.68 0.18 60),  oklch(0.62 0.20 35));  }
  .acct-cell .av.c4 { background: linear-gradient(135deg, oklch(0.65 0.18 320), oklch(0.58 0.20 295)); }
  .acct-cell .av.c5 { background: linear-gradient(135deg, oklch(0.66 0.17 100), oklch(0.60 0.19 80));  }
  .acct-cell .av.c6 { background: linear-gradient(135deg, oklch(0.64 0.18 15),  oklch(0.58 0.20 345)); }
  .acct-cell .col { min-width: 0; }
  .acct-cell .nm {
    font: 500 13.5px/1.2 var(--font-sans);
    letter-spacing: -0.005em;
    color: var(--fg-0);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .acct-cell .id {
    font: 400 11.5px/1 var(--font-mono);
    color: var(--fg-2);
    margin-top: 5px;
    letter-spacing: 0.02em;
  }

  .row-action {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--line-soft);
    color: var(--fg-2);
    cursor: pointer;
    display: inline-grid; place-items: center;
    transition: all var(--dur) var(--ease);
  }
  .row-action:hover {
    background: var(--bg-3);
    color: var(--fg-0);
    border-color: var(--line);
  }

  .tbl-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--line-soft);
    background: var(--bg-1);
    font: 400 11.5px/1 var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
  }
  .tbl-foot b { color: var(--fg-1); font-weight: 500; }

  @media (max-width: 720px) {
    .acct-tbl thead th.hide-sm,
    .acct-tbl tbody td.hide-sm { display: none; }
  }

  /* ================================================================
     Auditorias — Summary strip (small KPI cards, status-tinted)
     ================================================================ */
  .summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 22px;
  }
  @media (max-width: 1100px) { .summary { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 720px)  { .summary { grid-template-columns: 1fr 1fr; } }
  .sum {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
  }
  .sum .l {
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .sum .v {
    font: 500 26px/1 var(--font-mono);
    font-feature-settings: "tnum" 1, "zero" 1;
    letter-spacing: -0.015em;
    color: var(--fg-0);
    margin-top: 12px;
  }
  .sum .v small {
    font: 500 12px/1 var(--font-mono);
    color: var(--fg-2);
    margin-left: 4px;
    letter-spacing: 0.02em;
  }
  .sum .v.pos { color: var(--pos); }
  .sum .v.warn { color: var(--warn); }
  .sum .v.neg { color: var(--neg); }
  .sum .v.mono-sm { font-size: 22px; }
  .sum .pip { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
  .sum.completed .pip { background: var(--pos); box-shadow: 0 0 6px var(--pos); }
  .sum.pending .pip {
    background: var(--warn);
    box-shadow: 0 0 6px var(--warn);
    animation: pulse-dot 1.6s ease-in-out infinite;
  }
  .sum.failed .pip { background: var(--neg); box-shadow: 0 0 6px var(--neg); }

  /* ================================================================
     Segmented filter (status tabs)
     ================================================================ */
  .seg {
    display: inline-flex;
    padding: 3px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    gap: 2px;
  }
  .seg > button,
  .seg > a {
    height: 26px;
    padding: 0 10px;
    border-radius: 4px;
    border: 0;
    background: transparent;
    color: var(--fg-1);
    font: 500 12px/1 var(--font-sans);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all var(--dur) var(--ease);
    text-decoration: none;
  }
  .seg > button:hover,
  .seg > a:hover { color: var(--fg-0); }
  .seg > button.active,
  .seg > a.active {
    background: var(--bg-4);
    color: var(--fg-0);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .seg > button .ct,
  .seg > a .ct {
    font: 500 10.5px/1 var(--font-mono);
    color: var(--fg-2);
  }
  .seg > button.active .ct,
  .seg > a.active .ct { color: var(--fg-0); }

  /* ================================================================
     Campanhas — cockpit live de performance
     ================================================================ */
  .campaign-cockpit {
    display: grid;
    gap: 16px;
  }
  .campaign-freshness {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 360px;
  }
  .campaign-freshness span {
    height: 24px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-soft);
    background: var(--bg-2);
    padding: 0 8px;
    font: 500 11px/1 var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  /* Toolbar única: período (seg) à esquerda, filtros inline à direita */
  .campaign-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .campaign-filter-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
  }
  .campaign-filter-form .ds-input {
    min-height: 32px;
    height: 32px;
    min-width: 0;
    max-width: 190px;
    font-size: 12px;
    cursor: pointer;
  }
  .conversion-coverage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 120px)) minmax(220px, 1fr);
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background:
      linear-gradient(180deg, color-mix(in oklab, var(--bg-3) 72%, transparent), transparent),
      var(--bg-2);
    box-shadow: var(--shadow-1);
  }
  .conversion-coverage .cc-stat {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-soft);
    background: var(--bg-1);
  }
  .conversion-coverage .cc-stat span {
    font: 500 9.5px/1 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .conversion-coverage .cc-stat strong {
    font: 500 18px/1 var(--font-mono);
    color: var(--fg-0);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
  }
  .conversion-coverage .cc-stat.warn {
    border-color: color-mix(in oklab, var(--warn) 34%, transparent);
    background: var(--warn-soft);
  }
  .conversion-coverage .cc-stat.warn strong { color: var(--warn); }
  .conversion-coverage .cc-stat.ok {
    border-color: color-mix(in oklab, var(--pos) 30%, transparent);
    background: var(--pos-soft);
  }
  .conversion-coverage .cc-stat.ok strong { color: var(--pos); }
  .conversion-coverage p {
    margin: 0;
    align-self: center;
    font: 400 12px/1.45 var(--font-sans);
    color: var(--fg-1);
  }
  @media (max-width: 720px) {
    .conversion-coverage {
      grid-template-columns: 1fr 1fr;
    }
    .conversion-coverage p {
      grid-column: 1 / -1;
    }
  }
  /* Sinais clicáveis — funde radar + filtro de performance numa só linha */
  .campaign-signals {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }
  .campaign-signal-card {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 11px 13px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: inherit;
    transition: background var(--dur) var(--ease),
      border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
      transform var(--dur) var(--ease);
  }
  .campaign-signal-card:hover {
    background: var(--bg-3);
    border-color: var(--line-strong);
    transform: translateY(-1px);
  }
  .campaign-signal-card .cs-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--bg-3);
    color: var(--fg-1);
    border: 1px solid var(--line-soft);
  }
  .campaign-signal-card .cs-main {
    min-width: 0;
    display: grid;
    gap: 3px;
  }
  .campaign-signal-card .cs-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  .campaign-signal-card .cs-label {
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .campaign-signal-card .cs-count {
    font: 500 20px/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--fg-0);
    flex-shrink: 0;
  }
  .campaign-signal-card .cs-detail {
    font: 400 11.5px/1.3 var(--font-sans);
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* tom por sinal (cor do ícone) */
  .campaign-signal-card.neutral .cs-icon {
    color: var(--acc);
    background: var(--acc-soft);
    border-color: var(--acc-line);
  }
  .campaign-signal-card.pos .cs-icon {
    color: var(--pos);
    background: var(--pos-soft);
    border-color: color-mix(in oklab, var(--pos) 28%, transparent);
  }
  .campaign-signal-card.warn .cs-icon {
    color: var(--warn);
    background: var(--warn-soft);
    border-color: color-mix(in oklab, var(--warn) 28%, transparent);
  }
  .campaign-signal-card.neg .cs-icon {
    color: var(--neg);
    background: var(--neg-soft);
    border-color: color-mix(in oklab, var(--neg) 28%, transparent);
  }
  .campaign-signal-card.muted .cs-icon {
    color: var(--fg-2);
  }
  /* estado ativo = filtro selecionado (anel na cor do tom) */
  .campaign-signal-card.active {
    background: var(--bg-3);
    border-color: var(--line-strong);
    box-shadow: inset 0 0 0 1px var(--line-strong);
  }
  .campaign-signal-card.neutral.active {
    border-color: var(--acc-line);
    box-shadow: inset 0 0 0 1px var(--acc-line);
  }
  .campaign-signal-card.pos.active {
    border-color: color-mix(in oklab, var(--pos) 45%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pos) 45%, transparent);
  }
  .campaign-signal-card.warn.active {
    border-color: color-mix(in oklab, var(--warn) 45%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn) 45%, transparent);
  }
  .campaign-signal-card.neg.active {
    border-color: color-mix(in oklab, var(--neg) 45%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--neg) 45%, transparent);
  }
  .account-performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
  }
  .account-performance-card {
    display: grid;
    gap: 13px;
    padding: 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: inherit;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
      transform var(--dur) var(--ease);
  }
  .account-performance-card:hover {
    background: var(--bg-3);
    border-color: var(--line-strong);
    transform: translateY(-1px);
  }
  .account-performance-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .account-performance-metrics span {
    display: grid;
    gap: 4px;
    color: var(--fg-2);
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .account-performance-metrics b {
    color: var(--fg-0);
    font: 500 13px/1 var(--font-mono);
    letter-spacing: 0;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .account-performance-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--bg-4);
    overflow: hidden;
  }
  .account-performance-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--acc);
  }
  .account-performance-risk {
    color: var(--warn);
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.02em;
  }
  .campaign-performance-table-wrap {
    overflow-x: auto;
  }
  .campaign-performance-table {
    min-width: 1040px;
  }
  /* Tint de bucket: barra fina à esquerda da linha pra escanear de bate-pronto */
  .campaign-row[data-bucket="scaling"] td:first-child {
    box-shadow: inset 3px 0 0 var(--pos);
  }
  .campaign-row[data-bucket="attention"] td:first-child {
    box-shadow: inset 3px 0 0 var(--warn);
  }
  .campaign-row[data-bucket="waste"] td:first-child {
    box-shadow: inset 3px 0 0 var(--neg);
  }
  .campaign-name-cell {
    display: grid;
    gap: 5px;
    max-width: 320px;
  }
  .campaign-name-cell span {
    color: var(--fg-0);
    font: 500 13px/1.25 var(--font-sans);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .campaign-name-cell small,
  .campaign-account-link small {
    color: var(--fg-2);
    font: 400 11px/1 var(--font-mono);
    letter-spacing: 0.02em;
  }
  .campaign-account-link {
    display: grid;
    gap: 5px;
    color: var(--fg-1);
    text-decoration: none;
    max-width: 220px;
  }
  .campaign-account-link:hover {
    color: var(--fg-0);
  }
  /* Nome da campanha vira link pro detalhe — hover accent sinaliza clicabilidade */
  .campaign-name-link {
    text-decoration: none;
    cursor: pointer;
  }
  .campaign-name-link:hover span {
    color: var(--acc);
  }

  /* Ações + freshness empilhados no canto direito do cabeçalho da página */
  .page-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  @media (max-width: 1100px) {
    .campaign-signals {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 960px) {
    .campaign-freshness {
      justify-content: flex-start;
      max-width: 100%;
    }
    .campaign-filter-form {
      width: 100%;
      margin-left: 0;
    }
    .campaign-filter-form .ds-input {
      flex: 1 1 150px;
      max-width: none;
    }
  }

  @media (max-width: 720px) {
    .campaign-toolbar .seg {
      width: 100%;
      overflow-x: auto;
      justify-content: flex-start;
    }
    .campaign-toolbar .seg > a,
    .campaign-toolbar .seg > button {
      flex-shrink: 0;
    }
    .campaign-filter-form .btn {
      flex: 1 1 auto;
      justify-content: center;
    }
    .campaign-signals {
      grid-template-columns: 1fr 1fr;
    }
    .account-performance-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 480px) {
    .campaign-signals {
      grid-template-columns: 1fr;
    }
  }

  /* ================================================================
     Audits table — agent cell, account chip, status pill, score cell
     ================================================================ */
  .audits-tbl { width: 100%; border-collapse: collapse; }
  .audits-tbl thead th {
    text-align: left;
    padding: 11px 16px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-2);
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  .audits-tbl thead th.right { text-align: right; }
  .audits-tbl tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    font: 400 13px/1.3 var(--font-sans);
    color: var(--fg-0);
  }
  .audits-tbl tbody tr:last-child td { border-bottom: 0; }
  .audits-tbl tbody tr {
    transition: background var(--dur) var(--ease);
  }
  .audits-tbl tbody tr:hover td { background: var(--bg-3); }
  .audits-tbl tbody tr.failed td {
    background: color-mix(in oklab, var(--neg) 4%, transparent);
  }
  .audits-tbl tbody tr.failed:hover td {
    background: color-mix(in oklab, var(--neg) 7%, var(--bg-3));
  }
  .audits-tbl tbody td.right { text-align: right; }
  .audits-tbl tbody a.row-link {
    color: inherit;
    text-decoration: none;
    display: block;
  }

  @media (max-width: 1100px) {
    .audits-tbl thead th.hide-md,
    .audits-tbl tbody td.hide-md { display: none; }
  }

  /* Agent cell — colored avatar + name + sub */
  .ag-cell {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
  }
  .ag-av {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: grid; place-items: center;
    flex-shrink: 0;
    border: 1px solid transparent;
  }
  .ag-av svg { width: 14px; height: 14px; }
  .ag-av.account {
    background: var(--acc-soft); color: var(--acc);
    border-color: var(--acc-line);
  }
  .ag-av.weekly {
    background: var(--info-soft); color: var(--info);
    border-color: color-mix(in oklab, var(--info) 26%, transparent);
  }
  .ag-av.keyword {
    background: var(--warn-soft); color: var(--warn);
    border-color: color-mix(in oklab, var(--warn) 26%, transparent);
  }
  .ag-av.copy {
    background: var(--pos-soft); color: var(--pos);
    border-color: color-mix(in oklab, var(--pos) 26%, transparent);
  }
  .ag-av.negkw {
    background: var(--bg-3); color: var(--fg-1);
    border-color: var(--line);
  }
  .ag-nm {
    font: 500 13px/1.2 var(--font-sans);
    letter-spacing: -0.005em;
    color: var(--fg-0);
  }
  .ag-id {
    font: 400 11px/1 var(--font-mono);
    color: var(--fg-2);
    margin-top: 4px;
    letter-spacing: 0.02em;
  }

  /* Account chip — pill with tiny gradient avatar */
  .acc-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
    background: var(--bg-1);
    border: 1px solid var(--line-soft);
    font: 500 12px/1 var(--font-sans);
    color: var(--fg-0);
    max-width: 240px;
    overflow: hidden;
  }
  .acc-chip .av {
    width: 20px; height: 20px; border-radius: 999px;
    display: grid; place-items: center;
    font: 600 9px/1 var(--font-mono);
    color: var(--acc-ink);
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }
  .acc-chip .nm {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
  }
  .acc-chip .av.c0 { background: linear-gradient(135deg, oklch(0.62 0.18 255), oklch(0.55 0.20 235)); }
  .acc-chip .av.c1 { background: linear-gradient(135deg, oklch(0.62 0.16 175), oklch(0.55 0.18 200)); }
  .acc-chip .av.c2 { background: linear-gradient(135deg, oklch(0.65 0.16 145), oklch(0.58 0.18 170)); }
  .acc-chip .av.c3 { background: linear-gradient(135deg, oklch(0.68 0.18 60), oklch(0.62 0.20 35)); }
  .acc-chip .av.c4 { background: linear-gradient(135deg, oklch(0.65 0.18 320), oklch(0.58 0.20 295)); }
  .acc-chip .av.c5 { background: linear-gradient(135deg, oklch(0.66 0.17 100), oklch(0.60 0.19 80)); }
  .acc-chip .av.c6 { background: linear-gradient(135deg, oklch(0.64 0.18 15), oklch(0.58 0.20 345)); }

  /* Status pill — lowercase tag (.st) — distinct from .st-badge dashboard variant */
  .st {
    display: inline-flex; align-items: center; gap: 5px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.02em;
    padding: 4px 8px;
    border-radius: 999px;
    text-transform: lowercase;
    white-space: nowrap;
  }
  .st .pip {
    width: 5px; height: 5px;
    border-radius: 999px;
    background: currentColor;
  }
  .st.completed {
    color: var(--pos);
    background: var(--pos-soft);
    border: 1px solid color-mix(in oklab, var(--pos) 26%, transparent);
  }
  .st.pending {
    color: var(--warn);
    background: var(--warn-soft);
    border: 1px solid color-mix(in oklab, var(--warn) 26%, transparent);
  }
  .st.pending .pip {
    box-shadow: 0 0 6px currentColor;
    animation: pulse-dot 1.6s ease-in-out infinite;
  }
  .st.failed {
    color: var(--neg);
    background: var(--neg-soft);
    border: 1px solid color-mix(in oklab, var(--neg) 26%, transparent);
  }
  .st.info {
    color: var(--info);
    background: var(--info-soft);
    border: 1px solid color-mix(in oklab, var(--info) 26%, transparent);
  }
  .st.info .pip {
    box-shadow: 0 0 6px currentColor;
    animation: pulse-dot 1.6s ease-in-out infinite;
  }
  .st.muted {
    color: var(--fg-2);
    background: var(--bg-3);
    border: 1px solid var(--line);
  }

  /* Score cell — bar + number, variants lo/md/hi/findings */
  .score {
    display: inline-flex; align-items: center; gap: 10px;
    justify-content: flex-end;
    min-width: 0;
  }
  .score .num {
    font: 500 13px/1 var(--font-mono);
    color: var(--fg-0);
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.005em;
    white-space: nowrap;
  }
  .score .num .max { color: var(--fg-3); margin-left: 1px; }
  .score .bar {
    width: 60px; height: 4px;
    border-radius: 999px;
    background: var(--bg-4);
    border: 1px solid var(--line-soft);
    position: relative;
    overflow: hidden;
  }
  .score .bar i {
    position: absolute; left: 0; top: 0; bottom: 0;
    border-radius: 999px;
  }
  .score.lo .bar i { background: var(--warn); }
  .score.md .bar i { background: var(--acc); }
  .score.hi .bar i { background: var(--pos); }
  .score.findings .num { color: var(--info); }
  .score-empty {
    color: var(--fg-3);
    font-family: var(--font-mono);
  }

  /* Cost cell */
  .cost {
    font: 500 12.5px/1 var(--font-mono);
    color: var(--fg-1);
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.005em;
    text-align: right;
    white-space: nowrap;
  }
  .cost.empty { color: var(--fg-3); }

  /* Timestamp cell */
  .when {
    font: 400 12px/1.4 var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
    text-align: right;
    white-space: nowrap;
  }
  .when .d {
    color: var(--fg-0);
    display: block;
    font-weight: 500;
  }
  .when .ago {
    color: var(--fg-3);
    font-size: 11px;
    display: block;
    margin-top: 3px;
  }

  /* ================================================================
     Fila de Aprovação — Page head count pill (warn-colored)
     ================================================================ */
  .page-head-h1 {
    margin: 10px 0 8px;
    font: 500 32px/1.05 var(--font-sans);
    letter-spacing: -0.022em;
    color: var(--fg-0);
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .page-head-h1 .count {
    display: inline-flex;
    align-items: center;
    font: 500 22px/1 var(--font-mono);
    color: var(--warn);
    background: var(--warn-soft);
    border: 1px solid color-mix(in oklab, var(--warn) 26%, transparent);
    padding: 6px 12px;
    border-radius: 999px;
    letter-spacing: -0.005em;
    font-feature-settings: "tnum" 1;
  }
  .page-head-h1 .count.pos {
    color: var(--pos);
    background: var(--pos-soft);
    border-color: color-mix(in oklab, var(--pos) 26%, transparent);
  }

  /* Extra KPI negative variant glow (warn/pos already declared in dashboard block) */
  .kpi.neg::before {
    background: radial-gradient(420px 160px at 100% 0%, var(--neg-soft), transparent 60%);
  }
  .kpi.neg .kpi-progress > i { background: var(--neg); }

  /* ================================================================
     Underline tabs (.utabs) — used in Queue + future Settings
     ================================================================ */
  .tabs-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 18px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .utabs {
    display: flex; gap: 20px;
    flex-wrap: wrap;
  }
  .utabs > a,
  .utabs > button {
    height: 42px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--fg-1);
    cursor: pointer;
    font: 500 13.5px/1 var(--font-sans);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color var(--dur) var(--ease);
    text-decoration: none;
  }
  .utabs > a:hover,
  .utabs > button:hover { color: var(--fg-0); }
  .utabs > a.active,
  .utabs > button.active {
    color: var(--fg-0);
    border-color: var(--acc);
  }
  .utabs > a .ct,
  .utabs > button .ct {
    font: 500 11px/1 var(--font-mono);
    color: var(--fg-2);
    padding: 3px 6px;
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
  }
  .utabs > a.active .ct,
  .utabs > button.active .ct {
    color: var(--acc);
    background: var(--acc-soft);
    border-color: var(--acc-line);
  }
  .tabs-meta {
    font: 400 11.5px/1 var(--font-mono);
    color: var(--fg-2);
    padding-bottom: 12px;
    letter-spacing: 0.02em;
  }
  .tabs-meta b { color: var(--fg-1); font-weight: 500; }

  /* ================================================================
     Bulk action bar (Queue)
     ================================================================ */
  .bulk {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .bulk .check-row {
    display: flex; align-items: center; gap: 10px;
    font: 400 13px/1 var(--font-sans);
    color: var(--fg-0);
    cursor: pointer;
  }
  .bulk .check-row .ct {
    color: var(--fg-2);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
  }
  .bulk .spacer { flex: 1; }
  .bulk .pill-acc {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 11px/1 var(--font-mono);
    color: var(--acc);
    background: var(--acc-soft);
    border: 1px solid var(--acc-line);
    padding: 4px 8px;
    border-radius: 999px;
  }

  /* Custom checkbox (.cb) — replaces native input pra match mock */
  .cb-box {
    width: 18px; height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--line-strong);
    background: var(--bg-2);
    display: inline-grid; place-items: center;
    flex: none;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    position: relative;
  }
  .cb-box:hover { border-color: var(--acc); }
  .cb-box.checked {
    background: var(--acc);
    border-color: transparent;
  }
  .cb-box.checked::after {
    content: "";
    width: 10px; height: 6px;
    border-left: 2px solid var(--acc-ink);
    border-bottom: 2px solid var(--acc-ink);
    transform: rotate(-45deg) translate(1px, -1px);
  }
  .cb-box.disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* ================================================================
     Proposal cards — new .prop layout (Queue)
     ================================================================ */
  .props {
    display: flex; flex-direction: column;
    gap: 12px;
  }
  .prop {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px 20px 16px;
    position: relative;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .prop:hover { border-color: var(--line-strong); }
  .prop.selected {
    border-color: var(--acc-line);
    box-shadow: 0 0 0 1px var(--acc-line), 0 8px 32px -16px var(--acc-glow);
  }
  .prop.executing {
    border-color: var(--acc-line);
    box-shadow: var(--shadow-glow);
  }
  .prop.failed {
    border-color: color-mix(in oklab, var(--neg) 32%, transparent);
  }
  .prop.done {
    opacity: 0.55;
  }
  .prop.done .prop-title { text-decoration: line-through; }

  .prop-head {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 14px;
    align-items: flex-start;
  }
  .prop-head.no-check {
    grid-template-columns: auto 1fr auto;
  }
  .prop-av {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--acc-soft); color: var(--acc);
    border: 1px solid var(--acc-line);
    display: grid; place-items: center;
    font: 600 11px/1 var(--font-mono);
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }
  .prop-av.info {
    background: var(--info-soft); color: var(--info);
    border-color: color-mix(in oklab, var(--info) 26%, transparent);
  }
  .prop-av.muted {
    background: var(--bg-3); color: var(--fg-1);
    border-color: var(--line);
  }
  .prop-av.pulse {
    animation: pulse-dot 1.6s ease-in-out infinite;
  }

  .prop-body { min-width: 0; }
  .prop-title {
    font: 500 15px/1.35 var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--fg-0);
  }
  .prop-meta-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 8px;
    font: 400 11.5px/1 var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
  }
  .prop-meta-row .agent {
    color: var(--fg-1);
    font-weight: 500;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .prop-meta-row .agent svg {
    width: 11px; height: 11px;
    color: var(--acc);
  }
  .prop-meta-row .acct { color: var(--fg-0); }
  .prop-meta-row .age { color: var(--fg-2); }
  .prop-meta-row .id { color: var(--fg-3); }
  .prop-meta-row .dot { color: var(--fg-3); }

  /* ================================================================
     Account row no topo do card — destaca de qual cliente é a rec.
     Cor accent vem do CSS var --prop-account-hue (set inline pelo JSX
     via accountHue(customer_id)). Default fallback usa --acc.
     ================================================================ */
  .prop-account {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 8px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: oklch(0.985 0.012 var(--prop-account-hue, 250));
    color: oklch(0.32 0.13 var(--prop-account-hue, 250));
    border: 1px solid oklch(0.85 0.06 var(--prop-account-hue, 250) / 0.6);
    font: 600 10.5px/1 var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
    max-width: 100%;
    overflow: hidden;
  }
  /* Dark theme — invert lightness pra ficar legível em fundo escuro */
  :root[data-theme="dark"] .prop-account,
  .dark .prop-account {
    background: oklch(0.22 0.06 var(--prop-account-hue, 250) / 0.55);
    color: oklch(0.84 0.12 var(--prop-account-hue, 250));
    border-color: oklch(0.48 0.1 var(--prop-account-hue, 250) / 0.55);
  }
  .prop-account:hover {
    background: oklch(0.95 0.05 var(--prop-account-hue, 250));
    border-color: oklch(0.62 0.12 var(--prop-account-hue, 250) / 0.7);
  }
  :root[data-theme="dark"] .prop-account:hover,
  .dark .prop-account:hover {
    background: oklch(0.3 0.08 var(--prop-account-hue, 250) / 0.7);
    border-color: oklch(0.6 0.14 var(--prop-account-hue, 250) / 0.7);
  }
  .prop-account-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
  }
  .prop-account-name {
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
  }
  .prop-account-id {
    font: 500 10px/1 var(--font-mono);
    color: oklch(0.46 0.07 var(--prop-account-hue, 250));
    letter-spacing: 0.04em;
    text-transform: none;
    padding-left: 4px;
    border-left: 1px solid oklch(0.78 0.05 var(--prop-account-hue, 250) / 0.6);
  }
  :root[data-theme="dark"] .prop-account-id,
  .dark .prop-account-id {
    color: oklch(0.7 0.08 var(--prop-account-hue, 250));
    border-left-color: oklch(0.5 0.08 var(--prop-account-hue, 250) / 0.5);
  }

  /* ================================================================
     Avatar ring color por conta — borda esquerda no .prop-av usa o
     hue accentua qual cliente sem mudar muito o look base.
     ================================================================ */
  .prop-av[style*="--prop-account-hue"] {
    box-shadow:
      inset 3px 0 0 oklch(0.6 0.14 var(--prop-account-hue, 250));
  }

  /* ================================================================
     Account filter pills (topo da queue page, entre tabs e lista)
     ================================================================ */
  .queue-account-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 16px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .queue-account-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--fg-1);
    font: 500 12px/1 var(--font-sans);
    letter-spacing: -0.003em;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
    cursor: pointer;
  }
  .queue-account-pill:hover {
    background: var(--bg-3);
    border-color: var(--line-strong);
    color: var(--fg-0);
  }
  .queue-account-pill.active {
    background: oklch(0.22 0.08 var(--queue-account-hue, 250) / 0.6);
    color: oklch(0.92 0.05 var(--queue-account-hue, 250));
    border-color: oklch(0.55 0.13 var(--queue-account-hue, 250) / 0.7);
  }
  :root[data-theme="light"] .queue-account-pill.active,
  .light .queue-account-pill.active {
    background: oklch(0.94 0.05 var(--queue-account-hue, 250));
    color: oklch(0.32 0.14 var(--queue-account-hue, 250));
    border-color: oklch(0.7 0.13 var(--queue-account-hue, 250));
  }
  .queue-account-pill-icon {
    width: 11px;
    height: 11px;
    color: oklch(0.62 0.12 var(--queue-account-hue, 250));
    flex-shrink: 0;
  }
  .queue-account-pill-label {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }
  .queue-account-pill-count {
    font: 500 10.5px/1 var(--font-mono);
    color: var(--fg-2);
    padding: 2px 6px;
    border-radius: 999px;
    background: oklch(0.18 0.02 250 / 0.5);
    letter-spacing: 0.04em;
  }
  .queue-account-pill.active .queue-account-pill-count {
    background: oklch(0.55 0.13 var(--queue-account-hue, 250) / 0.25);
    color: inherit;
  }

  /* ================================================================
     Banner ativo quando ?account filtro está set
     ================================================================ */
  .queue-account-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--r-md);
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--fg-0);
    font: 400 12.5px/1.3 var(--font-sans);
    margin: -8px 0 16px;
  }
  .queue-account-clear {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fg-1);
    font: 500 11.5px/1 var(--font-sans);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    transition: background var(--dur-fast) var(--ease);
  }
  .queue-account-clear:hover {
    background: var(--bg-3);
    color: var(--fg-0);
  }

  /* ================================================================
     Section headers — agrupam recs por conta quando filtro=Todas
     ================================================================ */
  .queue-account-section {
    margin-bottom: 24px;
  }
  .queue-account-section:last-child {
    margin-bottom: 0;
  }
  .queue-account-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 8px;
    margin-bottom: 10px;
    border-radius: var(--r-sm);
    background: oklch(0.2 0.04 var(--queue-account-hue, 250) / 0.4);
    border-left: 3px solid oklch(0.62 0.14 var(--queue-account-hue, 250));
    color: var(--fg-0);
  }
  :root[data-theme="light"] .queue-account-section-header,
  .light .queue-account-section-header {
    background: oklch(0.96 0.03 var(--queue-account-hue, 250));
    border-left-color: oklch(0.55 0.14 var(--queue-account-hue, 250));
  }
  .queue-account-section-bullet {
    display: none; /* reservado pra futura customização */
  }
  .queue-account-section-name {
    font: 600 13px/1.2 var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--fg-0);
  }
  .queue-account-section-id {
    font: 500 10.5px/1 var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.04em;
    padding-left: 6px;
    border-left: 1px solid var(--line);
  }
  .queue-account-section-count {
    margin-left: auto;
    font: 500 11px/1 var(--font-mono);
    color: var(--fg-1);
    padding: 3px 8px;
    border-radius: 999px;
    background: oklch(0.18 0.02 250 / 0.5);
    letter-spacing: 0.04em;
  }
  .queue-account-section-focus {
    font: 500 11px/1 var(--font-sans);
    color: var(--fg-1);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
  }
  .queue-account-section-focus:hover {
    background: var(--bg-3);
    color: var(--fg-0);
  }

  /* Status pill top-right of card */
  .prop-status {
    display: inline-flex; align-items: center; gap: 5px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 999px;
    text-transform: lowercase;
    white-space: nowrap;
    color: var(--warn);
    background: var(--warn-soft);
    border: 1px solid color-mix(in oklab, var(--warn) 26%, transparent);
  }
  .prop-status .pip {
    width: 5px; height: 5px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    animation: pulse-dot 1.6s ease-in-out infinite;
  }
  .prop-status.pos {
    color: var(--pos);
    background: var(--pos-soft);
    border-color: color-mix(in oklab, var(--pos) 26%, transparent);
  }
  .prop-status.pos .pip { animation: none; }
  .prop-status.neg {
    color: var(--neg);
    background: var(--neg-soft);
    border-color: color-mix(in oklab, var(--neg) 26%, transparent);
  }
  .prop-status.neg .pip { animation: none; }
  .prop-status.info {
    color: var(--info);
    background: var(--info-soft);
    border-color: color-mix(in oklab, var(--info) 26%, transparent);
  }
  .prop-status.muted {
    color: var(--fg-2);
    background: var(--bg-3);
    border-color: var(--line);
  }
  .prop-status.muted .pip { animation: none; }

  .prop-desc {
    margin: 12px 0 0;
    padding-left: 44px;
    font: 400 13px/1.6 var(--font-sans);
    color: var(--fg-1);
    letter-spacing: -0.002em;
    white-space: pre-wrap;
  }
  .prop-head.no-check + .prop-desc { padding-left: 44px; }

  .prop-error {
    margin: 12px 0 0;
    padding: 10px 12px 10px 44px;
    font: 400 12px/1.55 var(--font-mono);
    color: var(--neg);
    background: var(--neg-soft);
    border: 1px solid color-mix(in oklab, var(--neg) 30%, transparent);
    border-radius: var(--r-md);
  }

  .prop-foot {
    margin-top: 14px;
    padding-left: 44px;
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
  }
  .prop-foot .spacer { flex: 1; }
  .prop-foot .guardrail {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.02em;
    color: var(--pos);
  }
  .prop-foot .guardrail svg {
    width: 12px; height: 12px;
  }
  .prop-foot .guardrail b {
    color: var(--fg-1);
    font-weight: 500;
  }
  .prop-foot .guardrail .sep {
    color: var(--fg-3);
  }
  .prop-foot .guardrail.unsafe { color: var(--neg); }

  @media (max-width: 1100px) {
    .prop-desc, .prop-foot { padding-left: 0; }
  }

  /* ================================================================
     Agentes — Strip (4-col KPI items + agent grid)
     ================================================================ */
  .strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin-bottom: 22px;
  }
  @media (max-width: 1100px) { .strip { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 720px)  { .strip { grid-template-columns: 1fr 1fr; } }

  .strip .item {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
  }
  .strip .item::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(420px 160px at 100% 0%, var(--acc-soft), transparent 60%);
    opacity: 0.35;
  }
  .strip .item.live::before {
    background: radial-gradient(420px 160px at 100% 0%, var(--acc-soft), transparent 60%);
    opacity: 0.55;
  }
  .strip .item.pos::before {
    background: radial-gradient(420px 160px at 100% 0%, var(--pos-soft), transparent 60%);
  }
  .strip .l {
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
    display: inline-flex; align-items: center; gap: 6px;
    position: relative;
  }
  .strip .l .ic { width: 11px; height: 11px; }
  .strip .v {
    font: 500 26px/1 var(--font-mono);
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.015em;
    color: var(--fg-0);
    margin-top: 12px;
    position: relative;
  }
  .strip .v small {
    font: 500 12px/1 var(--font-mono);
    color: var(--fg-2);
    margin-left: 4px;
    letter-spacing: 0.02em;
  }
  .strip .v.pos { color: var(--pos); }
  .strip .v.mono-sm { font-size: 22px; }
  .strip .pip {
    width: 6px; height: 6px; border-radius: 999px;
    background: var(--acc);
    box-shadow: 0 0 6px var(--acc);
    animation: pulse-dot 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }

  /* Segmented filter pip variants (live/idle) */
  .seg .pip {
    width: 5px; height: 5px; border-radius: 999px;
    flex-shrink: 0;
  }
  .seg .pip.live {
    background: var(--acc);
    box-shadow: 0 0 6px var(--acc);
    animation: pulse-dot 1.6s ease-in-out infinite;
  }
  .seg .pip.idle { background: var(--fg-3); }

  /* ================================================================
     Agent card grid + per-agent color avatars + scan animation
     ================================================================ */
  .agent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  @media (max-width: 1100px) { .agent-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 720px)  { .agent-grid { grid-template-columns: 1fr; } }

  .agent-card-rich {
    position: relative;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
    text-decoration: none;
    color: inherit;
  }
  .agent-card-rich:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }
  .agent-card-rich.executando {
    border-color: var(--acc-line);
    box-shadow: 0 0 0 1px var(--acc-line), 0 16px 48px -24px var(--acc-glow);
  }
  .agent-card-rich.executando::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(540px 240px at 100% 0%, var(--acc-soft), transparent 60%);
    opacity: 0.5;
  }
  .agent-card-rich.executando::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--acc), transparent);
    animation: agent-scan 2.4s ease-in-out infinite;
  }
  @keyframes agent-scan {
    0%, 100% { transform: translateX(-100%); opacity: 0.6; }
    50% { transform: translateX(100%); opacity: 1; }
  }

  .agent-card-rich .head {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    align-items: flex-start;
    position: relative;
  }
  .agent-card-rich .av {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: grid; place-items: center;
    font: 600 13px/1 var(--font-mono);
    color: var(--acc-ink);
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    flex-shrink: 0;
  }
  .agent-card-rich .av.account {
    background: var(--acc); color: var(--acc-ink);
    border-color: var(--acc-line);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--acc) 8%, transparent);
  }
  .agent-card-rich .av.negkw   { background: linear-gradient(135deg, oklch(0.62 0.16 175), oklch(0.55 0.18 200)); }
  .agent-card-rich .av.copy    { background: linear-gradient(135deg, oklch(0.65 0.16 145), oklch(0.58 0.18 170)); }
  .agent-card-rich .av.keyword { background: linear-gradient(135deg, oklch(0.68 0.18 60), oklch(0.62 0.20 35)); }
  .agent-card-rich .av.weekly  { background: linear-gradient(135deg, oklch(0.65 0.18 320), oklch(0.58 0.20 295)); }

  .agent-card-rich .nm {
    font: 500 15.5px/1.2 var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--fg-0);
  }
  .agent-card-rich .desc-scope {
    margin-top: 6px;
    font: 400 12px/1.45 var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.005em;
  }
  .agent-card-rich .description {
    margin: 0;
    font: 400 13px/1.55 var(--font-sans);
    color: var(--fg-1);
    position: relative;
  }

  .agent-status {
    display: inline-flex; align-items: center; gap: 5px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 999px;
    text-transform: lowercase;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .agent-status .pip {
    width: 5px; height: 5px;
    border-radius: 999px;
    background: currentColor;
  }
  .agent-status.executando {
    color: var(--acc);
    background: var(--acc-soft);
    border: 1px solid var(--acc-line);
  }
  .agent-status.executando .pip {
    box-shadow: 0 0 8px currentColor;
    animation: blink-status 1.4s ease-in-out infinite;
  }
  @keyframes blink-status {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
  .agent-status.idle {
    color: var(--fg-2);
    background: var(--bg-1);
    border: 1px solid var(--line-soft);
  }

  /* Stats 2x2 grid inside agent card */
  .agent-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    padding: 14px 0;
    border-top: 1px dashed var(--line-soft);
    border-bottom: 1px dashed var(--line-soft);
    position: relative;
  }
  .agent-stats-grid .stat .l {
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-2);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .agent-stats-grid .stat .v {
    font: 500 18px/1 var(--font-mono);
    color: var(--fg-0);
    margin-top: 8px;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.005em;
  }
  .agent-stats-grid .stat .v small {
    font: 400 11px/1.3 var(--font-mono);
    color: var(--fg-2);
    margin-left: 4px;
    letter-spacing: 0.02em;
    display: block;
    margin-top: 5px;
  }
  .agent-stats-grid .stat .v.pos { color: var(--pos); }
  .agent-stats-grid .stat .v.warn { color: var(--warn); }
  .agent-stats-grid .stat .v.neg { color: var(--neg); }

  /* Success rate bar */
  .succ-bar {
    margin-top: 8px;
    height: 4px;
    border-radius: 999px;
    background: var(--bg-4);
    border: 1px solid var(--line-soft);
    position: relative;
    overflow: hidden;
  }
  .succ-bar i {
    position: absolute; left: 0; top: 0; bottom: 0;
    border-radius: 999px;
  }
  .succ-bar.hi i { background: var(--pos); }
  .succ-bar.md i { background: var(--acc); }
  .succ-bar.lo i { background: var(--warn); }

  /* Foot — last run + details link */
  .agent-card-rich .foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    position: relative;
  }
  .agent-card-rich .foot .last {
    font: 400 11.5px/1.3 var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .agent-card-rich .foot .last b {
    color: var(--fg-1);
    font-weight: 500;
  }
  .agent-card-rich .foot .last svg {
    color: var(--fg-3);
    flex-shrink: 0;
  }
  .agent-card-rich .foot .details {
    font: 500 12px/1 var(--font-sans);
    color: var(--acc);
    display: inline-flex; align-items: center; gap: 4px;
    text-decoration: none;
    transition: gap var(--dur) var(--ease);
  }
  .agent-card-rich:hover .foot .details { gap: 7px; }

  /* ================================================================
     Login screen — ambient backdrop, hero grid, auth card, live demo
     ================================================================ */
  .login-backdrop {
    position: fixed; inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .login-backdrop .grid-bg {
    position: absolute; inset: -2px;
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.45;
    mask-image: radial-gradient(ellipse 80% 70% at 70% 50%, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 50%, black 30%, transparent 70%);
  }
  .login-backdrop .glow-a {
    position: absolute; top: -200px; right: -200px;
    width: 900px; height: 900px;
    background: radial-gradient(circle at center, var(--acc-soft) 0%, transparent 60%);
    filter: blur(20px);
    opacity: 0.9;
  }
  .login-backdrop .glow-b {
    position: absolute; bottom: -300px; left: -100px;
    width: 700px; height: 700px;
    background: radial-gradient(circle at center,
      color-mix(in oklab, var(--info) 24%, transparent) 0%,
      transparent 65%);
    filter: blur(40px);
  }
  .login-backdrop .aurora {
    position: absolute; top: 30%; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--acc) 50%, transparent 100%);
    opacity: 0.3;
    box-shadow: 0 0 60px 6px var(--acc-glow);
  }
  .login-backdrop .aurora.b { top: 70%; opacity: 0.18; }

  .login-backdrop--subtle .grid-bg {
    opacity: 0.22;
    mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, black 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, black 20%, transparent 75%);
  }
  .login-backdrop--subtle .glow-a {
    width: 640px;
    height: 640px;
    top: -120px;
    right: -80px;
    opacity: 0.45;
  }
  .login-backdrop--subtle .glow-b,
  .login-backdrop--subtle .aurora { display: none; }

  [data-theme="light"] .login-backdrop .grid-bg { opacity: 0.6; }
  [data-theme="light"] .login-backdrop .aurora { opacity: 0.18; }
  [data-theme="light"] .login-backdrop .glow-a,
  [data-theme="light"] .login-backdrop .glow-b { opacity: 0.7; }

  /* Page shell */
  .login-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* Top nav */
  .login-nav {
    display: flex; align-items: center; gap: 14px;
    padding: 22px 40px;
  }
  .login-nav .right {
    margin-left: auto;
    display: flex; align-items: center; gap: 10px;
  }
  .login-nav .status-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    font: 500 11px/1 var(--font-mono);
    color: var(--fg-1);
    letter-spacing: 0.02em;
  }
  .login-nav .status-pill .pip {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--pos);
    box-shadow: 0 0 8px var(--pos);
    animation: pulse-dot 1.6s ease-in-out infinite;
  }
  .login-nav .lang {
    display: inline-flex; align-items: center; gap: 4px;
    font: 500 12px/1 var(--font-mono);
    color: var(--fg-2);
    padding: 6px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
  }
  .login-nav .lang:hover { color: var(--fg-0); border-color: var(--line); }
  .login-nav .theme-btn {
    width: 32px; height: 32px;
    border-radius: 6px;
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    color: var(--fg-1);
    cursor: pointer;
    display: grid; place-items: center;
  }
  .login-nav .theme-btn:hover { color: var(--fg-0); border-color: var(--line); }

  .login-nav--minimal {
    padding: 20px 32px;
    justify-content: space-between;
  }
  .login-nav--minimal .right { display: none; }

  /* Hero grid */
  .login-hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 64px;
    padding: 40px 40px 64px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
  }
  @media (max-width: 1100px) {
    .login-hero {
      grid-template-columns: 1fr;
      gap: 48px;
      padding: 32px 32px 56px;
    }
  }
  @media (max-width: 640px) {
    .login-hero {
      padding: 16px 20px 40px;
      gap: 32px;
    }
    .login-nav { padding: 16px 20px; }
  }

  .login-hero--balanced {
    grid-template-columns: 1fr minmax(320px, 420px);
    gap: 80px;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 48px;
  }
  @media (max-width: 1100px) {
    .login-hero--balanced {
      grid-template-columns: 1fr;
      gap: 40px;
      max-width: 480px;
    }
  }

  .login-copy { max-width: 520px; }

  /* Eyebrow pill */
  .login-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    background: var(--acc-soft);
    border: 1px solid var(--acc-line);
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acc);
  }
  .login-eyebrow .pip {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--acc);
    box-shadow: 0 0 8px var(--acc);
  }
  .login-eyebrow--plain {
    padding: 0;
    border: 0;
    background: transparent;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-2);
  }

  .login-title {
    margin: 26px 0 22px;
    font: 500 76px/0.98 var(--font-sans);
    letter-spacing: -0.035em;
    color: var(--fg-0);
    text-wrap: balance;
    max-width: 720px;
  }
  .login-title .acc {
    color: var(--acc);
    position: relative;
  }
  .login-title .acc::after {
    content: ""; position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 3px;
    background: var(--acc);
    border-radius: 2px;
    box-shadow: 0 0 12px var(--acc-glow);
  }
  @media (max-width: 1100px) { .login-title { font-size: 56px; } }
  @media (max-width: 640px) { .login-title { font-size: 40px; } }

  .login-title--compact {
    margin: 16px 0 18px;
    font-size: 52px;
    line-height: 1.02;
    max-width: 14ch;
  }
  .login-title--compact .acc {
    display: block;
    margin-top: 4px;
  }
  .login-title--compact .acc::after { display: none; }
  @media (max-width: 1100px) { .login-title--compact { font-size: 44px; } }
  @media (max-width: 640px) { .login-title--compact { font-size: 34px; } }

  .login-lead {
    font: 400 18px/1.5 var(--font-sans);
    color: var(--fg-1);
    max-width: 560px;
    margin: 0 0 32px;
  }
  @media (max-width: 640px) { .login-lead { font-size: 15px; } }

  .login-lead--compact {
    font-size: 16px;
    line-height: 1.55;
    max-width: 42ch;
    margin-bottom: 28px;
  }

  .login-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .login-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font: 400 14px/1.45 var(--font-sans);
    color: var(--fg-1);
  }
  .login-features li svg {
    color: var(--acc);
    flex-shrink: 0;
    margin-top: 2px;
  }

  /* Live demo card */
  .live-stack { position: relative; max-width: 540px; }
  .live-label {
    display: inline-flex; align-items: center; gap: 8px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
    margin-bottom: 12px;
  }
  .live-label .dot {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--pos);
    box-shadow: 0 0 8px var(--pos);
    animation: pulse-dot 1.6s ease-in-out infinite;
  }
  .live-card {
    background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 18px 20px 16px;
    box-shadow: var(--shadow-3), 0 0 0 1px var(--acc-line);
    transform: rotate(-0.4deg);
    position: relative;
    overflow: hidden;
  }
  .live-card::before {
    content: ""; position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(420px 200px at 100% 0%, var(--acc-soft), transparent 60%);
    opacity: 0.5;
  }
  .live-card .agent-row {
    display: flex; align-items: center; gap: 12px;
    position: relative;
  }
  .live-card .av {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--acc-soft);
    color: var(--acc);
    border: 1px solid var(--acc-line);
    display: grid; place-items: center;
    font: 600 12px/1 var(--font-mono);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--acc) 8%, transparent);
    flex-shrink: 0;
  }
  .live-card .who {
    font: 500 13px/1.25 var(--font-sans);
    color: var(--fg-0);
    flex: 1;
    min-width: 0;
  }
  .live-card .who small {
    display: block;
    font: 400 11px/1.3 var(--font-mono);
    color: var(--fg-2);
    margin-top: 4px;
    letter-spacing: 0.02em;
  }
  .live-card .status {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--acc);
    flex-shrink: 0;
  }
  .live-card .status .blink {
    width: 5px; height: 5px;
    border-radius: 999px;
    background: var(--acc);
    box-shadow: 0 0 6px var(--acc);
    animation: blink-status 1.4s ease-in-out infinite;
  }
  .live-card .ttl {
    margin: 14px 0 10px;
    font: 500 15px/1.35 var(--font-sans);
    color: var(--fg-0);
    letter-spacing: -0.005em;
    position: relative;
  }
  .live-card .summary {
    font: 400 12.5px/1.6 var(--font-sans);
    color: var(--fg-1);
    padding: 12px 14px;
    background: var(--bg-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    position: relative;
  }
  .live-card .summary b { color: var(--fg-0); font-weight: 500; }
  .live-card .impact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--bg-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    position: relative;
  }
  .live-card .impact .l {
    font: 500 9.5px/1 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .live-card .impact .v {
    font: 500 14px/1 var(--font-mono);
    color: var(--fg-0);
    margin-top: 6px;
    font-feature-settings: "tnum" 1;
  }
  .live-card .impact .v.pos { color: var(--pos); }
  .live-card .actions {
    margin-top: 14px;
    display: flex; gap: 8px;
    align-items: center;
    position: relative;
  }
  .live-card .actions .stamp {
    margin-left: auto;
    font: 500 11px/1 var(--font-mono);
    color: var(--pos);
    display: inline-flex; align-items: center; gap: 6px;
  }

  /* Activity ticker rows */
  .login-ticker {
    margin-top: 22px;
    display: flex; flex-direction: column;
    gap: 8px;
    max-width: 540px;
  }
  .ticker-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: color-mix(in oklab, var(--bg-2) 70%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font: 400 12px/1 var(--font-mono);
    color: var(--fg-1);
    letter-spacing: 0.005em;
    backdrop-filter: blur(8px);
  }
  .ticker-row .ts {
    color: var(--fg-3);
    font-size: 11px;
    flex-shrink: 0;
  }
  .ticker-row .who {
    color: var(--acc);
    font-weight: 500;
  }
  .ticker-row b { color: var(--fg-0); font-weight: 500; }
  .ticker-row .ic {
    width: 14px; height: 14px;
    color: var(--fg-2);
    flex-shrink: 0;
  }

  /* Agent stack pill */
  .agent-stack {
    margin-top: 28px;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: color-mix(in oklab, var(--bg-2) 60%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    max-width: 540px;
  }
  .agent-stack .avatars { display: flex; }
  .agent-stack .avatars .av {
    width: 32px; height: 32px;
    border-radius: 999px;
    border: 2px solid var(--bg-0);
    margin-left: -10px;
    display: grid; place-items: center;
    font: 600 11px/1 var(--font-mono);
    color: var(--acc-ink);
    flex-shrink: 0;
  }
  .agent-stack .avatars .av:first-child { margin-left: 0; }
  .agent-stack .avatars .av.a0 { background: linear-gradient(135deg, oklch(0.68 0.21 255), oklch(0.58 0.22 235)); }
  .agent-stack .avatars .av.a1 { background: linear-gradient(135deg, oklch(0.65 0.18 320), oklch(0.58 0.20 295)); }
  .agent-stack .avatars .av.a2 { background: linear-gradient(135deg, oklch(0.68 0.18 60), oklch(0.62 0.20 35)); }
  .agent-stack .avatars .av.a3 { background: linear-gradient(135deg, oklch(0.65 0.16 145), oklch(0.58 0.18 170)); }
  .agent-stack .avatars .av.a4 { background: linear-gradient(135deg, oklch(0.62 0.16 175), oklch(0.55 0.18 200)); }
  .agent-stack .label .ttl {
    font: 500 13px/1.2 var(--font-sans);
    color: var(--fg-0);
  }
  .agent-stack .label .sub {
    font: 400 11.5px/1.3 var(--font-mono);
    color: var(--fg-2);
    margin-top: 4px;
    letter-spacing: 0.02em;
  }

  /* Right column auth card */
  .login-right { display: flex; flex-direction: column; align-items: flex-end; }
  @media (max-width: 1100px) { .login-right { align-items: stretch; } }
  .login-hero--balanced .login-right { align-items: stretch; }

  .auth {
    width: 100%;
    max-width: 460px;
    position: relative;
    border-radius: var(--r-2xl);
    padding: 1px;
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--acc) 50%, transparent) 0%,
      color-mix(in oklab, var(--line) 100%, transparent) 30%,
      var(--line) 100%);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--acc) 20%, transparent),
      0 32px 80px -24px color-mix(in oklab, var(--acc) 30%, black),
      0 1px 0 rgba(255, 255, 255, 0.04) inset;
  }
  @media (max-width: 1100px) {
    .auth { max-width: 520px; margin: 0 auto; }
  }

  .auth--minimal {
    max-width: 400px;
    padding: 0;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
  }
  .auth-inner--minimal {
    padding: 32px 28px 24px;
    background: var(--bg-2);
    border-radius: var(--r-xl);
  }
  .auth-inner--minimal::before,
  .auth-inner--minimal::after { display: none; }
  .auth-inner--minimal h2 {
    margin: 0 0 24px;
    font: 500 24px/1.1 var(--font-sans);
    letter-spacing: -0.02em;
    color: var(--fg-0);
  }
  .auth-inner--minimal .login-divider { margin: 20px 0; }
  .auth-inner--minimal .auth-foot { margin-top: 20px; }
  .auth-inner--minimal .submit-btn {
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--acc) 40%, transparent);
  }

  .auth-inner {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border-radius: calc(var(--r-2xl) - 1px);
    padding: 36px 36px 28px;
    position: relative;
    overflow: hidden;
  }
  @media (max-width: 640px) { .auth-inner { padding: 24px 22px 22px; } }
  .auth-inner::before {
    content: ""; position: absolute;
    top: -1px; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--acc), transparent);
    box-shadow: 0 0 10px 0 var(--acc-glow);
    opacity: 0.6;
  }
  .auth-inner::after {
    content: ""; position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(500px 200px at 50% -10%, var(--acc-soft), transparent 60%);
    opacity: 0.5;
  }
  .auth-eyebrow {
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acc);
    position: relative;
  }
  .auth h2 {
    margin: 12px 0 6px;
    font: 500 30px/1.05 var(--font-sans);
    letter-spacing: -0.022em;
    color: var(--fg-0);
    position: relative;
  }
  .auth .auth-sub {
    margin: 0 0 28px;
    font: 400 13.5px/1.55 var(--font-sans);
    color: var(--fg-1);
    position: relative;
  }
  .auth .auth-sub b { color: var(--fg-0); font-weight: 500; }

  .google-btn {
    width: 100%; height: 44px;
    background: var(--bg-3);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font: 500 13.5px/1 var(--font-sans);
    color: var(--fg-0);
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    position: relative;
  }
  .google-btn:hover:not(:disabled) {
    background: var(--bg-4);
    border-color: var(--fg-3);
    transform: translateY(-1px);
  }
  .google-btn:active:not(:disabled) { transform: translateY(0); }
  .google-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

  .login-divider {
    margin: 22px 0;
    display: flex; align-items: center; gap: 12px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    position: relative;
  }
  .login-divider::before,
  .login-divider::after {
    content: ""; flex: 1; height: 1px;
    background: var(--line-soft);
  }

  /* Form fields with inline icon */
  .form-field {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 14px;
    position: relative;
  }
  .form-field label {
    font: 500 11.5px/1 var(--font-sans);
    color: var(--fg-1);
    letter-spacing: -0.005em;
    display: flex; align-items: center; justify-content: space-between;
  }
  .form-field label .forgot {
    font: 500 11px/1 var(--font-sans);
    color: var(--acc);
    text-decoration: none;
  }
  .form-field label .forgot:hover {
    color: var(--acc-hover);
    text-decoration: underline;
  }
  .form-field .input-wrap {
    position: relative;
    display: flex; align-items: center;
  }
  .form-field .input-wrap input {
    width: 100%; height: 44px;
    padding: 0 14px 0 40px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 8px;
    font: 400 14px/1 var(--font-sans);
    color: var(--fg-0);
    transition: all var(--dur) var(--ease);
  }
  .form-field .input-wrap input::placeholder {
    color: var(--fg-3);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.005em;
  }
  .form-field .input-wrap input:hover { border-color: var(--line-strong); }
  .form-field .input-wrap input:focus {
    outline: none;
    border-color: var(--acc);
    box-shadow: 0 0 0 4px var(--acc-soft);
    background: var(--bg-2);
  }
  .form-field .input-icon {
    position: absolute;
    left: 14px;
    color: var(--fg-2);
    pointer-events: none;
    width: 16px; height: 16px;
    transition: color var(--dur) var(--ease);
  }
  .form-field .input-wrap:focus-within .input-icon { color: var(--acc); }

  .form-field > input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 8px;
    font: 400 14px/1 var(--font-sans);
    color: var(--fg-0);
    transition: all var(--dur) var(--ease);
  }
  .form-field > input::placeholder {
    color: var(--fg-3);
    font-size: 13px;
  }
  .form-field > input:hover { border-color: var(--line-strong); }
  .form-field > input:focus {
    outline: none;
    border-color: var(--acc);
    box-shadow: 0 0 0 3px var(--acc-soft);
    background: var(--bg-2);
  }

  /* Submit gradient button */
  .submit-btn {
    width: 100%; height: 48px;
    margin-top: 10px;
    background: linear-gradient(180deg, var(--acc-hover), var(--acc));
    color: var(--acc-ink);
    border: 0;
    border-radius: 10px;
    font: 600 14px/1 var(--font-sans);
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--acc) 50%, transparent),
      0 8px 24px -4px var(--acc-glow),
      0 1px 0 rgba(255, 255, 255, 0.2) inset;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    position: relative;
  }
  .submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--acc) 70%, transparent),
      0 12px 32px -4px var(--acc-glow),
      0 1px 0 rgba(255, 255, 255, 0.25) inset;
  }
  .submit-btn:active:not(:disabled) { transform: translateY(0); }
  .submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }
  .submit-btn svg { transition: transform var(--dur) var(--ease); }
  .submit-btn:hover:not(:disabled) svg { transform: translateX(2px); }

  .auth-foot {
    margin-top: 22px;
    text-align: center;
    font: 400 13px/1.5 var(--font-sans);
    color: var(--fg-1);
    position: relative;
  }
  .auth-foot a {
    color: var(--fg-0);
    font-weight: 500;
    text-decoration: none;
  }
  .auth-foot a:hover { color: var(--acc); }

  .trust-row {
    margin-top: 20px;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: var(--bg-1);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font: 400 11.5px/1.4 var(--font-mono);
    color: var(--fg-2);
    position: relative;
    letter-spacing: 0.005em;
  }
  .trust-row svg {
    color: var(--pos);
    flex-shrink: 0;
  }
  .trust-row b { color: var(--fg-1); font-weight: 500; }

  /* Aceite de termos no signup */
  .terms-check {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 4px 0 18px;
    padding: 11px 13px;
    background: var(--bg-1);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font: 400 12.5px/1.5 var(--font-sans);
    color: var(--fg-1);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
    position: relative;
  }
  .terms-check:hover { border-color: var(--line); background: var(--bg-2); }
  .terms-check input[type="checkbox"] {
    appearance: none;
    width: 16px; height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    border: 1.5px solid var(--line-strong);
    border-radius: 4px;
    background: var(--bg-2);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    position: relative;
  }
  .terms-check input[type="checkbox"]:hover { border-color: var(--acc); }
  .terms-check input[type="checkbox"]:checked {
    background: var(--acc);
    border-color: var(--acc);
  }
  .terms-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid var(--acc-ink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .terms-check input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--acc-soft);
  }
  .terms-check a {
    color: var(--fg-0);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--line-strong);
    transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
  }
  .terms-check a:hover {
    color: var(--acc);
    text-decoration-color: var(--acc);
  }

  /* Footer */
  .login-foot {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 40px 24px;
    font: 400 11.5px/1 var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
  }
  .login-foot .sep { color: var(--fg-3); }
  .login-foot .right {
    margin-left: auto;
    display: flex; align-items: center; gap: 14px;
  }
  .login-foot a {
    color: var(--fg-2);
    text-decoration: none;
  }
  .login-foot a:hover { color: var(--fg-0); }
  .login-foot--minimal {
    padding: 16px 32px 24px;
    border-top: 1px solid var(--line-soft);
  }
  @media (max-width: 640px) {
    .login-foot {
      padding: 16px 20px 20px;
      flex-wrap: wrap;
      gap: 10px;
    }
  }

  /* Entrance animations */
  @keyframes loginFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .login-anim-1 { animation: loginFadeUp 600ms cubic-bezier(.32,.72,.32,1) both; }
  .login-anim-2 { animation: loginFadeUp 600ms cubic-bezier(.32,.72,.32,1) 100ms both; }
  .login-anim-3 { animation: loginFadeUp 600ms cubic-bezier(.32,.72,.32,1) 200ms both; }
  .login-anim-4 { animation: loginFadeUp 600ms cubic-bezier(.32,.72,.32,1) 300ms both; }
  .login-anim-5 { animation: loginFadeUp 700ms cubic-bezier(.32,.72,.32,1) 400ms both; }
  .login-anim-6 { animation: loginFadeUp 700ms cubic-bezier(.32,.72,.32,1) 500ms both; }
  .login-anim-7 { animation: loginFadeUp 700ms cubic-bezier(.32,.72,.32,1) 600ms both; }

  /* ================================================================
     Login — feed de agentes ao vivo (operações) + motion
     ================================================================ */

  /* lead com destaque */
  .login-lead b { color: var(--fg-0); font-weight: 500; }

  /* título com gradiente animado (sheen) */
  .login-title--compact .acc {
    background: linear-gradient(110deg, var(--acc-hover) 0%, var(--info) 50%, var(--acc) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: loginSheen 7s linear infinite;
  }
  @keyframes loginSheen { to { background-position: 220% 0; } }

  /* backdrop: aurora em movimento (modifier --live) */
  .login-backdrop--live .glow-a { animation: loginDriftA 22s var(--ease) infinite alternate; }
  .login-backdrop--live .glow-b { animation: loginDriftB 27s var(--ease) infinite alternate; }
  @keyframes loginDriftA {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(-60px,40px,0) scale(1.12); }
  }
  @keyframes loginDriftB {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(50px,-30px,0) scale(1.1); }
  }

  /* feed */
  .login-feed-wrap { width: 100%; max-width: 540px; margin-top: 6px; }
  @media (max-width: 1100px) { .login-feed-wrap { display: none; } }
  .login-feed-head {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 11px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--fg-2);
  }
  .login-feed-head .dot {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--pos); box-shadow: 0 0 8px var(--pos);
    animation: pulse-dot 1.6s ease-in-out infinite;
  }
  .login-feed-head .ct { color: var(--fg-3); letter-spacing: 0.04em; }

  .login-feed {
    position: relative;
    height: 332px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    box-shadow: var(--shadow-2);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
  }
  .login-feed:hover .login-feed-track { animation-play-state: paused; }
  .login-feed-track {
    display: flex; flex-direction: column;
    animation: loginFeedScroll 36s linear infinite;
    will-change: transform;
  }
  @keyframes loginFeedScroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
  }
  .login-feed-scan {
    position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--acc), transparent);
    opacity: 0.35;
    box-shadow: 0 0 16px 1px var(--acc-glow);
  }

  .feed-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12.5px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .feed-row .ic {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: var(--r-md);
    display: grid; place-items: center;
    color: var(--acc-ink);
    box-shadow: 0 0 0 1px color-mix(in oklab, white 8%, transparent), 0 2px 8px -2px rgba(0,0,0,0.5);
  }
  .feed-row .ic.h-a { background: linear-gradient(150deg, oklch(0.70 0.20 255), oklch(0.54 0.21 250)); }
  .feed-row .ic.h-b { background: linear-gradient(150deg, oklch(0.72 0.13 210), oklch(0.56 0.15 222)); }
  .feed-row .ic.h-c { background: linear-gradient(150deg, oklch(0.66 0.16 292), oklch(0.55 0.18 286)); }
  .feed-row .ic svg { width: 17px; height: 17px; }
  .feed-row .info { flex: 1; min-width: 0; }
  .feed-row .nm { font: 500 13.5px/1.3 var(--font-sans); color: var(--fg-0); }
  .feed-row .do {
    font: 400 12px/1.3 var(--font-sans); color: var(--fg-2);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .feed-row .rt { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
  .feed-row .mt { font: 500 11px/1 var(--font-mono); color: var(--fg-2); font-variant-numeric: tabular-nums; }

  .feed-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font: 500 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid; white-space: nowrap;
  }
  .feed-badge .dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
  .feed-badge.is-run  { color: var(--acc);  border-color: var(--acc-line);  background: var(--acc-soft); }
  .feed-badge.is-wait { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 36%, transparent); background: var(--warn-soft); }
  .feed-badge.is-done { color: var(--pos);  border-color: color-mix(in oklab, var(--pos) 36%, transparent);  background: var(--pos-soft); }
  .feed-badge.is-run .dot,
  .feed-badge.is-wait .dot { animation: blink-status 1.4s ease-in-out infinite; }

  /* auth card — toques de motion (escopo --live) */
  .auth--live .submit-btn { overflow: hidden; }
  .auth--live .submit-btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-18deg);
    animation: loginShine 5s var(--ease) 1.4s infinite;
    pointer-events: none;
  }
  @keyframes loginShine { 0% { left: -60%; } 24%, 100% { left: 130%; } }

  /* links legais no card */
  .auth-legal {
    margin-top: 16px;
    text-align: center;
    font: 400 11.5px/1.55 var(--font-sans);
    color: var(--fg-2);
    position: relative;
  }
  .auth-legal a {
    color: var(--fg-1);
    text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: var(--line-strong);
    transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
  }
  .auth-legal a:hover { color: var(--acc); text-decoration-color: var(--acc); }

  /* ---- alinhamento consistente: nav / hero / footer na mesma grade ---- */
  .login-nav--minimal,
  .login-hero--balanced,
  .login-foot--minimal {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
  }
  .login-nav--minimal { padding-top: 24px; padding-bottom: 24px; }
  .login-hero--balanced { gap: 64px; }
  @media (max-width: 1100px) {
    .login-nav--minimal,
    .login-hero--balanced,
    .login-foot--minimal { max-width: 520px; }
  }

  /* reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .login-feed-track,
    .login-backdrop--live .glow-a,
    .login-backdrop--live .glow-b,
    .login-title--compact .acc,
    .auth--live .submit-btn::after { animation: none !important; }
    .login-title--compact .acc { background-position: 0 0; }
  }

  /* ================================================================
     Misc utility carryovers (was here before agentes section)
     ================================================================ */
  /* Load more button (dashed) */
  .load-more {
    margin-top: 18px;
    padding: 14px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    color: var(--fg-1);
    font: 500 12.5px/1 var(--font-sans);
    cursor: pointer;
    width: 100%;
    transition: all var(--dur) var(--ease);
  }
  .load-more:hover {
    background: var(--bg-2);
    color: var(--fg-0);
    border-color: var(--line-strong);
  }
  .load-more .ct {
    font-family: var(--font-mono);
    color: var(--fg-2);
  }
}

@layer utilities {
  .tnum { font-variant-numeric: tabular-nums; }
  .mono { font-family: var(--font-mono); }
  .text-balance { text-wrap: balance; }
  .text-pretty  { text-wrap: pretty; }

  .text-grad-acc {
    background: linear-gradient(180deg, var(--acc) 0%, color-mix(in oklab, var(--acc) 60%, var(--fg-0)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .ring-glow { box-shadow: var(--shadow-glow); }

  /* ================================================================
     Wizard stepper — horizontal stepper pro wizard de Campaign Creation.
     Usado em components/ds/stepper.tsx.

     Layout: track contínuo atrás dos dots, fill accent crescendo até o
     activeIndex. Dots done = verde com check, active = accent com ring
     pulsing, pending = bg-3 com número discreto, failed = neg com X.
     ================================================================ */
  .wizard-stepper {
    width: 100%;
    padding: 12px 0 4px;
    --stepper-dot-size: 28px;
    --stepper-dot-half: 14px;
    --stepper-track-h: 2px;
    --stepper-track-top: calc(var(--stepper-dot-half) - var(--stepper-track-h) / 2);
  }
  .wizard-stepper-list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0 var(--stepper-dot-half);
    gap: 0;
    position: relative;
  }
  /* Track de fundo — linha cinza atrás de todos os dots */
  .wizard-stepper-track {
    position: absolute;
    top: var(--stepper-track-top);
    left: var(--stepper-dot-half);
    right: var(--stepper-dot-half);
    height: var(--stepper-track-h);
    background: var(--line);
    border-radius: 999px;
    pointer-events: none;
  }
  /* Fill accent — cresce até activeIndex via custom property --stepper-progress */
  .wizard-stepper-track-fill {
    position: absolute;
    top: var(--stepper-track-top);
    left: var(--stepper-dot-half);
    width: calc(
      (100% - var(--stepper-dot-size)) * var(--stepper-progress, 0%) / 100%
    );
    height: var(--stepper-track-h);
    background: linear-gradient(
      90deg,
      var(--pos) 0%,
      color-mix(in oklab, var(--pos) 70%, var(--acc)) 100%
    );
    border-radius: 999px;
    pointer-events: none;
    transition: width 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .wizard-stepper-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 0;
    z-index: 1;
  }
  .wizard-stepper-button {
    background: none;
    border: 0;
    padding: 0;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--fg-2);
    font: 500 11px/1.2 var(--font-sans);
    text-align: center;
    width: 100%;
    transition: color var(--dur) var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .wizard-stepper-button:not(:disabled) {
    cursor: pointer;
  }
  .wizard-stepper-button:hover:not(:disabled) .wizard-stepper-circle {
    border-color: var(--line-strong);
    transform: translateY(-1px);
  }
  .wizard-stepper-button:focus-visible {
    outline: none;
  }
  .wizard-stepper-button:focus-visible .wizard-stepper-circle {
    box-shadow: 0 0 0 3px var(--acc-soft);
  }
  .wizard-stepper-circle {
    width: var(--stepper-dot-size);
    height: var(--stepper-dot-size);
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--bg-2);
    color: var(--fg-2);
    font: 500 12px/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
    border: 1.5px solid var(--line);
    transition: background 280ms var(--ease),
                border-color 280ms var(--ease),
                color 280ms var(--ease),
                box-shadow 280ms var(--ease),
                transform 220ms var(--ease);
    flex-shrink: 0;
    position: relative;
  }
  .wizard-stepper-icon {
    width: 13px;
    height: 13px;
    animation: wizard-stepper-icon-pop 320ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
  }
  .wizard-stepper-num {
    line-height: 1;
  }
  .wizard-stepper-label {
    font-size: 11px;
    line-height: 1.2;
    color: var(--fg-2);
    letter-spacing: -0.005em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--dur) var(--ease), font-weight var(--dur) var(--ease);
  }
  /* Active: dot accent com ring + glow leve + label destacado */
  .wizard-stepper-item.state-active .wizard-stepper-circle {
    background: var(--acc);
    color: var(--acc-ink);
    border-color: var(--acc);
    box-shadow:
      0 0 0 4px var(--acc-soft),
      0 4px 14px -4px var(--acc-glow);
    animation: wizard-stepper-pulse 2.4s ease-in-out infinite;
  }
  .wizard-stepper-item.state-active .wizard-stepper-label {
    color: var(--fg-0);
    font-weight: 600;
  }
  .wizard-stepper-item.state-active .wizard-stepper-num {
    color: var(--acc-ink);
  }
  /* Done: dot verde sólido com check */
  .wizard-stepper-item.state-done .wizard-stepper-circle {
    background: var(--pos);
    color: #FFFFFF;
    border-color: var(--pos);
  }
  .wizard-stepper-item.state-done .wizard-stepper-label {
    color: var(--fg-1);
  }
  /* Failed: dot vermelho com X */
  .wizard-stepper-item.state-failed .wizard-stepper-circle {
    background: var(--neg);
    color: #FFFFFF;
    border-color: var(--neg);
  }
  .wizard-stepper-item.state-failed .wizard-stepper-label {
    color: var(--neg);
  }

  /* Animations */
  @keyframes wizard-stepper-pulse {
    0%, 100% {
      box-shadow:
        0 0 0 4px var(--acc-soft),
        0 4px 14px -4px var(--acc-glow);
    }
    50% {
      box-shadow:
        0 0 0 8px color-mix(in oklab, var(--acc) 8%, transparent),
        0 4px 18px -4px var(--acc-glow);
    }
  }
  @keyframes wizard-stepper-icon-pop {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wizard-stepper-track-fill { transition: none; }
    .wizard-stepper-circle { transition: none; }
    .wizard-stepper-item.state-active .wizard-stepper-circle { animation: none; }
    .wizard-stepper-icon { animation: none; }
    .wizard-stepper-button:hover:not(:disabled) .wizard-stepper-circle {
      transform: none;
    }
  }

  /* Mobile: labels somem abaixo de 540px (só dots visíveis) */
  @media (max-width: 540px) {
    .wizard-stepper-label { display: none; }
    .wizard-stepper-button { gap: 0; }
  }

  /* ================================================================
     Form inputs — ds-input usado em wizards + forms
     ================================================================ */
  .ds-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-1);
    color: var(--fg-0);
    font: 400 13px/1.4 var(--font-sans);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .ds-input:hover:not(:disabled):not(:focus) {
    border-color: var(--line-strong);
  }
  .ds-input:focus {
    outline: none;
    border-color: var(--acc);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--acc) 18%, transparent);
  }
  .ds-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .ds-input-sm {
    padding: 4px 8px;
    font-size: 12px;
  }
  textarea.ds-input {
    line-height: 1.55;
    resize: vertical;
    min-height: 80px;
  }

  /* ================================================================
     Loading spinner — usado durante agente rodando + publicação
     ================================================================ */
  .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--line);
    border-top-color: var(--acc);
    border-radius: 50%;
    animation: ds-spin 700ms linear infinite;
    margin: 0 auto;
  }
  @keyframes ds-spin {
    to { transform: rotate(360deg); }
  }

  /* ================================================================
     Wizard form layout — usado nos steps do create-wizard
     ================================================================ */
  .wizard-frame {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
    width: 100%;
  }
  .wizard-frame-narrow {
    max-width: 720px;
  }
  /* Container interno pra steps que merecem focus-column estreito
     (Conta, Published) mantendo o stepper na largura padrão acima.
     **Left-aligned (não centered)** pra que o título do step compartilhe
     o mesmo eixo X do page-head e do título da página acima. Centralizar
     aqui criaria 3 alinhamentos distintos na mesma vista (page-head
     esquerda, stepper full, content centro). */
  .wizard-content-narrow {
    max-width: 720px;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  /* Section divider sutil entre grupos do form (Estratégia / Orçamento /
     Targeting). Hairline + eyebrow caps + spacing variável pra dar ritmo. */
  .wizard-form-section + .wizard-form-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px dashed var(--line-soft);
  }
  .wizard-form-section-eyebrow {
    display: block;
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
    margin-bottom: 14px;
  }

  /* ================================================================
     Briefing form — card seccionado "documented-form" (aside rótulo +
     coluna de campos). Usado no Step Briefing pra dar contenção,
     hierarquia e ritmo (estilo Stripe/Linear settings). Card branco
     (bg-2) faz pop no fundo off-white; inputs bg-1 viram inset.
     ================================================================ */
  .brief-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
  }
  .brief-sec {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 32px;
    padding: 24px 28px;
  }
  .brief-sec + .brief-sec {
    border-top: 1px solid var(--line-soft);
  }
  .brief-sec-aside {
    display: flex;
    gap: 11px;
    align-items: flex-start;
  }
  .brief-sec-num {
    flex-shrink: 0;
    margin-top: 1px;
    padding: 3px 6px;
    line-height: 1;
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--acc);
    background: var(--acc-soft);
    border: 1px solid var(--acc-line);
    border-radius: var(--r-sm);
  }
  .brief-sec-title {
    display: block;
    font: 600 13.5px/1.3 var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--fg-0);
  }
  .brief-sec-desc {
    margin-top: 4px;
    font: 400 12px/1.45 var(--font-sans);
    color: var(--fg-2);
  }
  .brief-sec-fields {
    display: grid;
    gap: 16px;
    min-width: 0;
  }
  @media (max-width: 760px) {
    .brief-sec {
      grid-template-columns: 1fr;
      gap: 14px;
      padding: 20px;
    }
  }
  /* Sticky wizard-actions pra steps com long content (Keywords, Copies,
     Revisar). Cola no fundo da viewport com backdrop blur sutil pro overlap
     ficar legível. */
  .wizard-actions-sticky {
    position: sticky;
    bottom: 0;
    margin-left: -32px;
    margin-right: -32px;
    padding: 14px 32px;
    background: color-mix(in oklab, var(--bg-0) 88%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 5;
  }
  @media (max-width: 720px) {
    .wizard-actions-sticky {
      margin-left: -20px;
      margin-right: -20px;
      padding-left: 20px;
      padding-right: 20px;
    }
  }
  /* Reduced stepper pro Step Published (todo done; só linha fina + label) */
  .wizard-progress-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 8px;
  }
  .wizard-progress-summary-label {
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pos);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .wizard-progress-summary-label .pip {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
  }
  .wizard-progress-summary-bar {
    flex: 1;
    height: 3px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .wizard-progress-summary-bar > i {
    position: absolute; inset: 0;
    background: linear-gradient(
      90deg,
      var(--pos) 0%,
      color-mix(in oklab, var(--pos) 70%, var(--acc)) 100%
    );
    border-radius: 999px;
  }
  .wizard-progress-summary-count {
    font: 500 11px var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .wizard-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .wizard-step-title {
    font: 600 18px/1.3 var(--font-sans);
    color: var(--fg-0);
    letter-spacing: -0.01em;
  }
  .wizard-step-subtitle {
    font: 400 13px/1.5 var(--font-sans);
    color: var(--fg-1);
  }
  .wizard-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    margin-top: 8px;
  }
  .wizard-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }
  .wizard-choice-card {
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-1);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
                transform var(--dur) var(--ease);
    text-align: left;
  }
  .wizard-choice-card:hover {
    border-color: var(--line-strong);
    background: var(--bg-2);
  }
  .wizard-choice-card.selected {
    border-color: var(--acc);
    background: color-mix(in oklab, var(--acc) 8%, var(--bg-1));
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--acc) 20%, transparent);
  }
  .wizard-choice-card-title {
    font: 600 14px/1.3 var(--font-sans);
    color: var(--fg-0);
  }
  .wizard-choice-card-desc {
    font: 400 12px/1.4 var(--font-sans);
    color: var(--fg-1);
  }

  /* ================================================================
     Chip — toggle multi-select (Locations, Languages, Tags)
     ================================================================ */
  .ds-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font: 500 12px/1 var(--font-sans);
    letter-spacing: -0.005em;
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--fg-0);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
    white-space: nowrap;
  }
  .ds-chip:hover:not(:disabled) {
    background: var(--bg-4);
    border-color: var(--line-strong);
  }
  .ds-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--acc-soft);
    border-color: var(--acc-line);
  }
  .ds-chip-selected {
    background: var(--acc);
    color: var(--acc-ink);
    border-color: var(--acc);
  }
  .ds-chip-selected:hover:not(:disabled) {
    background: var(--acc-hover);
    border-color: var(--acc-hover);
  }
  .ds-chip-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ================================================================
     Autosave status banner — shown on wizard frame during typing
     ================================================================ */
  .autosave-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.02em;
    border: 1px solid var(--line-soft);
    background: var(--bg-1);
    color: var(--fg-2);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .autosave-status .pip {
    width: 6px; height: 6px; border-radius: 999px;
    background: currentColor;
  }
  .autosave-status.saving {
    color: var(--info);
    border-color: color-mix(in oklab, var(--info) 26%, transparent);
  }
  .autosave-status.saving .pip {
    box-shadow: 0 0 6px currentColor;
    animation: pulse-dot 1.6s ease-in-out infinite;
  }
  .autosave-status.saved {
    color: var(--pos);
    border-color: color-mix(in oklab, var(--pos) 26%, transparent);
  }
  .autosave-status.error {
    color: var(--neg);
    border-color: color-mix(in oklab, var(--neg) 30%, transparent);
  }
  @media (prefers-reduced-motion: reduce) {
    .autosave-status.saving .pip {
      animation: none;
    }
  }

  /* ================================================================
     AccountPicker — list row (typeahead-filtered account list)
     ================================================================ */
  .ds-account-row {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    color: var(--fg-0);
    transition: background var(--dur-fast) var(--ease);
  }
  .ds-account-row:hover { background: var(--bg-3); }
  .ds-account-row:focus-visible {
    outline: none;
    background: var(--bg-3);
    box-shadow: 0 0 0 2px var(--acc) inset;
  }
  .ds-account-row-selected {
    background: color-mix(in oklab, var(--acc) 8%, var(--bg-2));
  }
  .ds-account-row-selected:hover {
    background: color-mix(in oklab, var(--acc) 12%, var(--bg-2));
  }
  .ds-account-check {
    width: 18px; height: 18px;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: var(--bg-1);
    display: grid; place-items: center;
    color: var(--acc);
    transition: all var(--dur-fast) var(--ease);
  }
  .ds-account-check[data-selected="1"] {
    background: var(--acc);
    border-color: var(--acc);
    color: var(--acc-ink);
  }
  .ds-account-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .ds-account-name {
    font: 500 13px/1.2 var(--font-sans);
    color: var(--fg-0);
    letter-spacing: -0.005em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ds-account-meta {
    font: 400 11px/1 var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ds-account-meta code {
    color: var(--fg-1);
    background: transparent;
    padding: 0;
    font-weight: 500;
  }

  /* ================================================================
     Loading spinner — used in AgentLoading and publishing states
     ================================================================ */
  .ds-spinner {
    width: 28px; height: 28px;
    border-radius: 999px;
    border: 2.5px solid var(--bg-3);
    border-top-color: var(--acc);
    margin: 0 auto;
    animation: ds-spin 800ms linear infinite;
  }
  @keyframes ds-spin {
    to { transform: rotate(360deg); }
  }
  /* Vestibular safety: reduce-motion disables rotation entirely and falls
     back to a pulsing opacity (same signal, no movement). */
  @media (prefers-reduced-motion: reduce) {
    .ds-spinner {
      animation: ds-spinner-pulse 1.6s ease-in-out infinite;
      border-top-color: var(--acc);
    }
  }
  @keyframes ds-spinner-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
  }

  /* ================================================================
     Stage hero — banda compacta no topo de cada step do wizard com
     contexto persistente (conta, draft name, budget se já decidido).
     ================================================================ */
  .stage-hero {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
  }
  .stage-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(360px 120px at 100% 0%, var(--acc-soft), transparent 60%);
    opacity: 0.5;
    pointer-events: none;
  }
  .stage-hero-avatar {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--acc-soft);
    color: var(--acc);
    border: 1px solid var(--acc-line);
    display: grid; place-items: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--acc-line), 0 6px 18px -6px var(--acc-glow);
  }
  .stage-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    position: relative;
  }
  .stage-hero-eyebrow {
    font: 500 10px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .stage-hero-title {
    font: 500 15px/1.2 var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--fg-0);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .stage-hero-stats {
    display: flex; gap: 18px;
    align-items: center;
    position: relative;
    flex-shrink: 0;
  }
  .stage-hero-stat {
    display: flex; flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .stage-hero-stat-label {
    font: 500 9.5px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .stage-hero-stat-value {
    font: 500 16px var(--font-mono);
    color: var(--fg-0);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.01em;
  }

  /* ================================================================
     Brief preview — sticky right pane no Step Inputs mostrando o que
     a IA vai receber, atualizando live conforme user preenche.
     ================================================================ */
  .brief-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: flex-start;
  }
  @media (max-width: 960px) {
    .brief-split { grid-template-columns: 1fr; }
  }
  .brief-preview {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-1);
  }
  .brief-preview-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acc);
  }
  .brief-preview-eyebrow .pip {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
  }
  .brief-preview-block {
    display: flex; flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--bg-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
  }
  .brief-preview-block-label {
    font: 500 9.5px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .brief-preview-block-value {
    font: 400 12.5px/1.4 var(--font-sans);
    color: var(--fg-0);
    word-break: break-word;
  }
  .brief-preview-block-value.muted {
    color: var(--fg-3);
    font-style: italic;
  }
  .brief-preview-block-value.mono {
    font-family: var(--font-mono);
    font-size: 12px;
  }
  .brief-preview-cost {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed var(--line-soft);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font: 400 11px var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
  }
  .brief-preview-cost b {
    color: var(--fg-0);
    font: 500 15px var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }

  /* ================================================================
     Agent phases timeline — substitui o spinner genérico do AgentLoading
     com uma timeline visível das phases do agente (analisando → coletando
     → escrevendo → consolidando). Phase ativa pulsa.
     ================================================================ */
  .agent-phases {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 24px 28px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
  }
  .agent-phases::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(520px 200px at 100% 0%, var(--acc-soft), transparent 60%);
    opacity: 0.4;
    pointer-events: none;
  }
  .agent-phase {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 11px 0;
    position: relative;
  }
  .agent-phase + .agent-phase {
    border-top: 1px dashed var(--line-soft);
  }
  .agent-phase-dot {
    width: 18px; height: 18px;
    border-radius: 999px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    display: grid; place-items: center;
    color: var(--fg-2);
    flex-shrink: 0;
    margin-left: 2px;
  }
  .agent-phase-dot svg {
    width: 11px; height: 11px;
  }
  .agent-phase.done .agent-phase-dot {
    background: var(--pos);
    border-color: transparent;
    color: white;
  }
  .agent-phase.active .agent-phase-dot {
    background: var(--acc);
    border-color: transparent;
    color: var(--acc-ink);
    box-shadow: 0 0 0 4px var(--acc-soft);
    animation: agent-phase-pulse 1.6s ease-in-out infinite;
  }
  @keyframes agent-phase-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--acc-soft); }
    50%      { box-shadow: 0 0 0 8px color-mix(in oklab, var(--acc) 6%, transparent); }
  }
  .agent-phase.failed .agent-phase-dot {
    background: var(--neg-soft);
    border-color: color-mix(in oklab, var(--neg) 32%, transparent);
    color: var(--neg);
  }
  .agent-phase-label {
    font: 500 13px var(--font-sans);
    color: var(--fg-0);
    letter-spacing: -0.005em;
  }
  .agent-phase.pending .agent-phase-label { color: var(--fg-2); font-weight: 400; }
  .agent-phase-eta {
    font: 400 11px var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
  }
  @media (prefers-reduced-motion: reduce) {
    .agent-phase.active .agent-phase-dot { animation: none; }
  }

  /* ================================================================
     Campaign hero — usado em AgentSuccess + FinalReview pra apresentar
     a campanha em destaque (nome BIG + KPI tiles + estimated reach bar).
     ================================================================ */
  .campaign-hero {
    background: linear-gradient(180deg, color-mix(in oklab, var(--acc) 6%, var(--bg-2)), var(--bg-2));
    border: 1px solid var(--acc-line);
    border-radius: var(--r-xl);
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-2);
  }
  .campaign-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(560px 240px at 100% 0%, var(--acc-soft), transparent 60%);
    opacity: 0.6;
    pointer-events: none;
  }
  .campaign-hero-head {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
  }
  .campaign-hero-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--acc);
    color: var(--acc-ink);
    display: grid; place-items: center;
    box-shadow: 0 0 0 1px var(--acc-line), 0 8px 24px -8px var(--acc-glow);
    flex-shrink: 0;
  }
  .campaign-hero-icon svg { width: 22px; height: 22px; }
  .campaign-hero-meta {
    flex: 1; min-width: 0;
  }
  .campaign-hero-eyebrow {
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acc);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .campaign-hero-eyebrow .pip {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
  }
  .campaign-hero-title {
    font: 500 26px/1.15 var(--font-sans);
    letter-spacing: -0.02em;
    color: var(--fg-0);
    margin-top: 4px;
  }
  .campaign-hero-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    position: relative;
  }
  .campaign-tile {
    background: var(--bg-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .campaign-tile-label {
    font: 500 10px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .campaign-tile-value {
    font: 500 22px var(--font-mono);
    color: var(--fg-0);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.015em;
  }
  .campaign-tile-value small {
    font-size: 12px;
    color: var(--fg-2);
    margin-left: 4px;
    font-weight: 400;
  }
  .campaign-tile-sub {
    font: 400 11px var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
  }
  .campaign-hero-reach {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--line-soft);
    position: relative;
    font: 400 12px var(--font-mono);
    color: var(--fg-2);
    letter-spacing: 0.02em;
  }
  .campaign-hero-reach b {
    color: var(--fg-0);
    font: 500 14px var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  .reach-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-4);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .reach-bar > i {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--acc) 0%, color-mix(in oklab, var(--acc) 50%, transparent) 100%);
    border-radius: 999px;
  }

  /* ================================================================
     AdGroup card rich — usado nos steps Keywords/Copies/Revisar.
     Header com theme + intent_tier badge + count stats + body slot.
     ================================================================ */
  .adgroup-rich {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .adgroup-rich-head {
    padding: 14px 18px;
    background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 12px;
    align-items: center;
  }
  .adgroup-rich-tag {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--acc-soft);
    color: var(--acc);
    border: 1px solid var(--acc-line);
    display: grid; place-items: center;
    font: 600 12px var(--font-mono);
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }
  .adgroup-rich-meta {
    display: flex; flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .adgroup-rich-name {
    font: 500 14px/1.2 var(--font-sans);
    color: var(--fg-0);
    letter-spacing: -0.005em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .adgroup-rich-theme {
    font: 400 12px/1.4 var(--font-sans);
    color: var(--fg-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .adgroup-rich-stats {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-shrink: 0;
  }
  .adgroup-rich-stat {
    text-align: right;
  }
  .adgroup-rich-stat .l {
    font: 500 9.5px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .adgroup-rich-stat .v {
    font: 500 14px var(--font-mono);
    color: var(--fg-0);
    font-variant-numeric: tabular-nums;
    margin-top: 3px;
    letter-spacing: -0.005em;
  }
  .adgroup-rich-body {
    padding: 14px 18px 18px;
  }

  /* Intent tier badges */
  .intent-tier {
    display: inline-flex;
    align-items: center;
    font: 500 9.5px var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid;
    background: transparent;
    margin-top: 4px;
  }
  .intent-tier.quente_transacional {
    color: var(--pos);
    border-color: color-mix(in oklab, var(--pos) 30%, transparent);
    background: var(--pos-soft);
  }
  .intent-tier.quente_amplo {
    color: var(--acc);
    border-color: var(--acc-line);
    background: var(--acc-soft);
  }
  .intent-tier.morno_controlado {
    color: var(--warn);
    border-color: color-mix(in oklab, var(--warn) 30%, transparent);
    background: var(--warn-soft);
  }
  .intent-tier.marca {
    color: var(--info);
    border-color: color-mix(in oklab, var(--info) 30%, transparent);
    background: var(--info-soft);
  }

  /* ================================================================
     Keyword row enriched — volume bar inline + competition dot.
     ================================================================ */
  .kw-table {
    width: 100%;
    border-collapse: collapse;
  }
  .kw-table th,
  .kw-table td {
    padding: 9px 12px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
  }
  .kw-table thead th {
    color: var(--fg-2);
    font: 500 10px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
  }
  .kw-table tbody tr {
    border-bottom: 1px solid var(--line-soft);
    transition: background var(--dur-fast) var(--ease);
  }
  .kw-table tbody tr:last-child { border-bottom: 0; }
  .kw-table tbody tr:hover {
    background: color-mix(in oklab, var(--fg-0) 2%, transparent);
  }
  .kw-text {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--fg-0);
  }
  .kw-vol-cell {
    width: 160px;
  }
  .kw-vol {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .kw-vol-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-1);
    min-width: 56px;
    text-align: right;
  }
  .kw-vol-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-3);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .kw-vol-bar > i {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--acc);
    border-radius: 999px;
    opacity: 0.7;
  }
  .competition-dot {
    display: inline-flex; align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--fg-1);
  }
  .competition-dot::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 999px;
    background: var(--fg-3);
    box-shadow: 0 0 4px currentColor;
    flex-shrink: 0;
  }
  .competition-dot.LOW::before    { background: var(--pos); color: var(--pos); }
  .competition-dot.MEDIUM::before { background: var(--warn); color: var(--warn); }
  .competition-dot.HIGH::before   { background: var(--neg); color: var(--neg); }
  .competition-dot.UNKNOWN::before,
  .competition-dot.UNSPECIFIED::before {
    background: var(--fg-3); box-shadow: none;
  }

  /* ================================================================
     SERP preview — mockup do anúncio Google como o operator vai ver.
     Usado no Step Copies pra dar feedback visual em tempo real.
     ================================================================ */
  .serp-preview {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    color: #202124;
    font-family: arial, sans-serif;
    box-shadow: var(--shadow-2);
    max-width: 600px;
  }
  [data-theme="dark"] .serp-preview,
  :root:not(.light) .serp-preview {
    background: #1f1f1f;
    color: #e8eaed;
    border-color: #3c4043;
  }
  .serp-preview-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 700 11px arial, sans-serif;
    color: #202124;
    background: transparent;
    padding: 0;
    margin-bottom: 4px;
  }
  [data-theme="dark"] .serp-preview-tag,
  :root:not(.light) .serp-preview-tag {
    color: #e8eaed;
  }
  .serp-preview-url {
    font-size: 12px;
    color: #5f6368;
    margin-bottom: 6px;
    line-height: 1.3;
  }
  [data-theme="dark"] .serp-preview-url,
  :root:not(.light) .serp-preview-url {
    color: #9aa0a6;
  }
  .serp-preview-headline {
    font-size: 20px;
    line-height: 1.3;
    color: #1a0dab;
    font-weight: 400;
    margin-bottom: 4px;
  }
  [data-theme="dark"] .serp-preview-headline,
  :root:not(.light) .serp-preview-headline {
    color: #8ab4f8;
  }
  .serp-preview-headline span + span::before {
    content: " · ";
    color: #5f6368;
    font-weight: 400;
  }
  .serp-preview-description {
    font-size: 14px;
    line-height: 1.45;
    color: #4d5156;
  }
  [data-theme="dark"] .serp-preview-description,
  :root:not(.light) .serp-preview-description {
    color: #bdc1c6;
  }
  .serp-preview-sitelinks {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
  }
  .serp-preview-sitelink {
    font-size: 13px;
    color: #1a0dab;
  }
  [data-theme="dark"] .serp-preview-sitelink,
  :root:not(.light) .serp-preview-sitelink {
    color: #8ab4f8;
  }

  /* ================================================================
     Published hero — launch view com big campaign ID + deep-link CTA.
     ================================================================ */
  .published-hero {
    background: linear-gradient(180deg, color-mix(in oklab, var(--pos) 8%, var(--bg-2)), var(--bg-2));
    border: 1px solid color-mix(in oklab, var(--pos) 40%, transparent);
    border-radius: var(--r-xl);
    padding: 28px 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-2);
  }
  .published-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(620px 280px at 100% 0%, color-mix(in oklab, var(--pos) 14%, transparent), transparent 60%);
    opacity: 0.8;
    pointer-events: none;
  }
  .published-hero-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--pos);
    color: #FFF7F0;
    display: grid; place-items: center;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--pos) 40%, transparent),
                0 12px 32px -8px color-mix(in oklab, var(--pos) 50%, transparent);
    flex-shrink: 0;
    position: relative;
  }
  .published-hero-icon svg { width: 28px; height: 28px; }
  .published-hero-head {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
  }
  .published-hero-title {
    font: 500 28px/1.1 var(--font-sans);
    letter-spacing: -0.025em;
    color: var(--fg-0);
    margin: 0;
  }
  .published-hero-subtitle {
    font: 400 13px var(--font-sans);
    color: var(--fg-1);
    margin-top: 4px;
  }
  .published-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    position: relative;
  }
  .published-hero-cell {
    background: var(--bg-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 12px 14px;
    display: flex; flex-direction: column;
    gap: 6px;
  }
  .published-hero-cell-label {
    font: 500 10px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .published-hero-cell-value {
    font: 500 18px var(--font-mono);
    color: var(--fg-0);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    word-break: break-all;
  }
  .published-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 0 18px;
    height: 38px;
    border-radius: var(--r-sm);
    background: var(--pos);
    color: #FFF7F0;
    border: 0;
    font: 500 14px var(--font-sans);
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
    box-shadow: 0 8px 20px -6px color-mix(in oklab, var(--pos) 50%, transparent);
    position: relative;
  }
  .published-hero-cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
  .published-hero-cta svg { width: 14px; height: 14px; }

  /* ================================================================
     Ad group section in Final Review — horizontal scroll cards
     ================================================================ */
  .ad-group-scroll {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ================================================================
     Section header for wizard steps — eyebrow + title + optional action
     ================================================================ */
  .wizard-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0 8px;
    border-bottom: 1px dashed var(--line-soft);
    margin-bottom: 4px;
  }
  .wizard-section-head .meta {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
  }
  .wizard-section-head .meta .eyebrow {
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .wizard-section-head .meta h3 {
    font: 500 16px var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--fg-0);
    margin: 0;
  }

  /* ================================================================
     Disclosure caret — rotating chevron pra <summary> dos <details>
     que strippam o marker default. Aplicar via className="ds-disclosure".
     ================================================================ */
  .ds-disclosure {
    list-style: none;
  }
  .ds-disclosure::-webkit-details-marker {
    display: none;
  }
  .ds-disclosure-caret {
    display: inline-block;
    width: 14px;
    height: 14px;
    color: var(--fg-2);
    flex-shrink: 0;
    transition: transform var(--dur) var(--ease);
  }
  details[open] > .ds-disclosure .ds-disclosure-caret,
  details[open] > summary .ds-disclosure-caret {
    transform: rotate(90deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .ds-disclosure-caret { transition: none; }
  }

  /* ================================================================
     Chat markdown — corpo das mensagens do assistente (.chat-md)
     Renderizado por react-markdown + remark-gfm em components/chat/.
     Escala compacta (base 13.5px) pra densidade de chat; tabelas no
     padrão .table-dense; tudo via tokens.
     ================================================================ */
  .chat-md {
    font: 400 13.5px/1.6 var(--font-sans);
    color: var(--fg-1);
    overflow-wrap: break-word;
  }
  .chat-md > :first-child { margin-top: 0; }
  .chat-md > :last-child { margin-bottom: 0; }

  .chat-md p { margin: 0 0 10px; }

  .chat-md strong { color: var(--fg-0); font-weight: 600; }

  .chat-md a {
    color: var(--acc);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, var(--acc) 35%, transparent);
    transition: border-color var(--dur-fast) var(--ease);
  }
  .chat-md a:hover { border-bottom-color: var(--acc); }

  .chat-md h1,
  .chat-md h2,
  .chat-md h3,
  .chat-md h4,
  .chat-md h5,
  .chat-md h6 {
    color: var(--fg-0);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 18px 0 6px;
  }
  .chat-md h1 { font-size: 17px; }
  .chat-md h2 { font-size: 15.5px; }
  .chat-md h3 { font-size: 14px; }
  .chat-md h4,
  .chat-md h5,
  .chat-md h6 {
    font: 500 10.5px var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg-2);
  }

  .chat-md ul,
  .chat-md ol {
    margin: 0 0 10px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .chat-md ul { list-style: disc; }
  .chat-md ol { list-style: decimal; }
  .chat-md li::marker { color: var(--fg-3); }
  .chat-md li > ul,
  .chat-md li > ol { margin: 3px 0 0; }

  .chat-md code {
    font: 400 12px var(--font-mono);
    color: var(--fg-0);
    background: var(--bg-3);
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    padding: 1px 5px 2px;
    white-space: nowrap;
  }
  .chat-md pre {
    margin: 0 0 10px;
    padding: 12px 14px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow-x: auto;
  }
  .chat-md pre code {
    background: transparent;
    border: 0;
    padding: 0;
    white-space: pre;
    color: var(--fg-1);
    font-size: 12px;
    line-height: 1.55;
  }

  .chat-md blockquote {
    margin: 0 0 10px;
    padding: 2px 0 2px 12px;
    border-left: 2px solid var(--line-strong);
    color: var(--fg-2);
  }

  .chat-md hr {
    border: 0;
    border-top: 1px solid var(--line-soft);
    margin: 14px 0;
  }

  /* Tabelas GFM — wrapper com scroll horizontal vem do componente
     (.chat-md-scroll); visual segue o .table-dense. */
  .chat-md-scroll {
    margin: 2px 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-1);
  }
  .chat-md table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }
  .chat-md th,
  .chat-md td {
    padding: 7px 12px;
    font-size: 12.5px;
    text-align: left;
    vertical-align: top;
  }
  .chat-md th {
    color: var(--fg-2);
    font: 500 10.5px var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  .chat-md tbody tr { border-bottom: 1px solid var(--line-soft); }
  .chat-md tbody tr:last-child { border-bottom: 0; }
  .chat-md tbody tr:hover td { background: var(--bg-2); }
  .chat-md td code { white-space: normal; }

  /* Final mobile overrides stay last so base component blocks cannot
     reintroduce horizontal overflow on authenticated screens. */
  @media (max-width: 900px) {
    html,
    body,
    .app-shell,
    .app-main {
      max-width: 100%;
      overflow-x: clip;
    }

    .app-shell {
      grid-template-columns: minmax(0, 1fr);
    }

    .app-shell > div {
      min-width: 0;
      max-width: 100vw;
    }

    .ds-topbar > *,
    .page-head-row > *,
    .dashboard-2col > *,
    .props,
    .prop,
    .feed,
    .chart-card,
    .cred,
    .mcc-grid,
    .mcc,
    .tbl-wrap {
      min-width: 0;
    }
  }

  @media (max-width: 720px) {
    .app-main {
      padding: 20px 16px;
    }

    .ds-topbar {
      padding: 0 14px;
      gap: 8px;
    }

    .topbar-actions {
      gap: 6px;
      flex-shrink: 0;
    }

    .topbar-actions .top-icon-btn:first-child {
      display: none;
    }

    .topbar-user {
      flex-shrink: 0;
    }

    .topbar-user-group {
      margin-left: auto;
      gap: 6px;
    }

    .ds-crumbs {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 11px;
    }

    .ds-crumbs > span:not(:last-child),
    .top-divider {
      display: none;
    }

    .page-head-row {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
      margin-bottom: 20px;
    }

    .page-head-row h1,
    .page-head-h1 {
      max-width: 100%;
      font-size: 24px !important;
      line-height: 1.15;
      flex-wrap: wrap;
    }

    .page-head-row p {
      max-width: 100% !important;
    }

    .role-pill {
      margin-left: 0;
      margin-top: 8px;
      vertical-align: middle;
    }

    .page-head-right {
      width: 100%;
      flex-direction: row;
      align-items: stretch;
      gap: 8px;
      flex-wrap: wrap;
    }

    .page-head-right .btn {
      flex: 1 1 auto;
      justify-content: center;
      min-width: min(100%, 140px);
    }

    .feed-row {
      grid-template-columns: 32px minmax(0, 1fr);
      align-items: flex-start;
      gap: 10px;
      padding: 12px;
    }

    .feed-row > div[style*="min-width"] {
      display: none;
    }

    .feed-row .st-badge {
      grid-column: 2;
      justify-self: flex-start;
      margin-top: 2px;
    }

    .feed-title,
    .feed-meta {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .shortcut,
    .mcc {
      grid-template-columns: 36px minmax(0, 1fr);
    }

    .shortcut .chev,
    .mcc .right {
      grid-column: 2;
      justify-self: flex-start;
    }

    .mcc .right {
      flex-wrap: wrap;
    }

    .cred {
      grid-template-columns: minmax(0, 1fr) !important;
      padding: 18px;
    }

    .cred .actions {
      width: 100%;
      align-items: stretch;
    }

    .cred .actions > *,
    .cred .actions form,
    .cred .actions .btn {
      width: 100%;
    }

    .cred .actions .btn,
    .bulk .btn,
    .bulk [data-slot="button"],
    .prop-foot .btn {
      justify-content: center;
    }

    .cred .since {
      text-align: left;
    }

    .cred .email-row .email {
      max-width: 100%;
      overflow-wrap: anywhere;
      line-height: 1.35;
    }

    .toolbar .spacer,
    .bulk .spacer,
    .prop-foot .spacer {
      display: none;
    }

    .tbl-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

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

    .pill-info {
      max-width: 100%;
      white-space: normal;
      line-height: 1.35;
    }

    .chart-head {
      flex-direction: column;
      gap: 12px;
    }

    .chart-head .stat {
      text-align: left;
    }

    .bar-row {
      grid-template-columns: minmax(82px, 0.9fr) minmax(0, 1fr) 24px;
      gap: 8px;
    }

    .prop-head,
    .prop-head.no-check {
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
    }

    .prop-head > .cb-box {
      grid-row: span 2;
    }

    .prop-status {
      grid-column: 2;
      justify-self: flex-start;
    }

    .prop-desc,
    .prop-foot {
      padding-left: 0;
    }

    .prop-meta-row {
      gap: 6px;
      line-height: 1.45;
    }

    .prop-foot .btn,
    .bulk .btn,
    .bulk [data-slot="button"] {
      flex: 1 1 100%;
    }

    .summary,
    .strip {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 460px) {
    .ds-crumbs {
      display: none;
    }

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

    .topbar-actions .top-icon-btn:first-child,
    .topbar-actions .top-icon-btn:nth-child(2) {
      display: none;
    }
  }

  @media (max-width: 400px) {
    .app-main {
      padding: 16px 14px;
    }

    .ds-topbar {
      padding: 0 10px;
      gap: 6px;
    }

    .page-head-row h1,
    .page-head-h1 {
      font-size: 22px !important;
    }
  }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@keyframes sk {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}