/* ==========================================================================
   RMRADAR — Tema "Trading Terminal" (dark-native, alto contraste)
   --------------------------------------------------------------------------
   Camada de OVERRIDE carregada DEPOIS de app.css. Só toca em cor, borda,
   sombra, raio e tipografia — NUNCA em layout (grid/flex/position/width).
   app.css continua dono de toda a estrutura; este arquivo é a pele.
   Rollback total = remover o <link rel="theme.css"> no base.html.

   Princípios:
   - Verde = positivo / compra / sucesso.   Vermelho = negativo / venda / falha.
   - Âmbar = atenção / pendente.            Azul    = info / processando / ação.
   - Acento de AÇÃO (botões primários) é AZUL, para não confundir com P&L.
   - Hierarquia por degraus de superfície + borda, não por sombras pesadas
     (sombra some no quase-preto; o terminal vive de contraste e linha fina).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- superfícies (degraus de elevação) — preto Kalshi ---- */
  --bg: #0a0a0b;
  --bg-2: #0e0e10;
  --panel: #121214;
  --surface-2: #171719;
  --surface-3: #1e1e22;
  --surface-4: #26262b;
  --nav: #0b0b0c;
  --nav-soft: #161618;

  /* ---- texto ---- */
  --ink: #f2f3f5;
  --ink-soft: #c3c7cd;
  --muted: #8b9098;
  --faint: #5e636b;

  /* ---- linhas / bordas ---- */
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --line-soft: rgba(255, 255, 255, 0.045);

  /* ---- cores semânticas (paleta Kalshi) ---- */
  --green: #2ee6a6;          /* menta — sim / alta / marca */
  --green-dark: #1fbf89;
  --green-deep: #123d2b;     /* preenchimento de botão "submit" */
  --green-strong: #4ff0b6;
  --red: #ff5d6e;            /* coral — não / baixa */
  --red-dark: #d84656;
  --red-strong: #ff7d8a;
  --amber: #e7b24c;          /* dourado de categoria */
  --amber-strong: #f5c869;
  --blue: #4d8bff;           /* linha secundária / info */
  --blue-dark: #3a6fe0;
  --blue-strong: #76a6ff;
  --teal: #2dd4d4;
  --gold: #e7b24c;

  /* ---- acento de marca/ação = menta ---- */
  --accent: #2ee6a6;
  --accent-hover: #4ff0b6;
  --accent-ink: #04130d;

  /* ---- P&L ---- */
  --positive: var(--green);
  --negative: var(--red);

  /* ---- tints semânticos ---- */
  --tint-green: rgba(46, 230, 166, 0.13);
  --tint-green-ink: #5ceab4;
  --tint-red: rgba(255, 93, 110, 0.13);
  --tint-red-ink: #ff8a96;
  --tint-amber: rgba(231, 178, 76, 0.14);
  --tint-amber-ink: #f3cd80;
  --tint-blue: rgba(77, 139, 255, 0.14);
  --tint-blue-ink: #8fb6ff;

  /* ---- raio (cards arredondados Kalshi) ---- */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- elevação ---- */
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.4);
  --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

/* ============================================================ base */
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

/* títulos mais pesados e apertados (vibe Kalshi) */
h1, h2, h3, .panel h1, .panel h2, .panel-title, .metric strong {
  letter-spacing: -0.018em;
}
.panel h1, .panel h2, .panel-title { font-weight: 800; }
.metric strong { font-weight: 800; }

::selection { background: rgba(46, 230, 166, 0.28); color: #04130d; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: rgba(231, 234, 240, 0.14); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(231, 234, 240, 0.26); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* números alinhados (sensação de terminal) onde há dado numérico */
table, .metric, .metric strong, .ladder-table, .money, .money-negative,
.history-return-profit, .history-return-loss, .return-preview,
.account-dashboard-metrics, .dash-pos, .dash-neg, .trade-order-values {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv01" 1;
}

/* ============================================================ topbar / nav */
.topbar {
  background: linear-gradient(180deg, var(--nav-soft), var(--nav));
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.main-nav a {
  color: var(--muted);
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  transition: color 0.14s ease, background 0.14s ease;
}
.main-nav a:hover { color: var(--ink); background: var(--nav-soft); }
.main-nav a.active {
  color: var(--ink);
  background: var(--nav-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.role-pill {
  border: 1px solid rgba(46, 230, 166, 0.4);
  color: var(--green);
  background: var(--tint-green);
  letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.user-name { color: var(--ink-soft); }
.nav-counter { background: var(--red); color: #190a0c; }

/* marca RM — placa "metálica" do app icon */
.brand-mark,
.brand-mark.large {
  background: linear-gradient(180deg, #20242c, #0b0d11);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: var(--inset-hi), 0 4px 14px rgba(0, 0, 0, 0.5);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.brand:hover .brand-mark {
  border-color: rgba(46, 230, 166, 0.55);
  box-shadow: var(--inset-hi), 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(46, 230, 166, 0.14);
}

/* ============================================================ superfícies */
.panel,
.metric,
.login-panel,
.drawer-panel,
.mirror-audit-stack,
.credential-choice,
.layer-board,
.bettor-control-card,
.add-layer-panel,
.event-search-dropdown,
.account-card,
.market-card,
.pro-market-card,
.execution-form,
.selected-action,
.account-dashboard-card,
.return-preview,
.action-summary {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--inset-hi), var(--shadow-soft);
  color: var(--ink);
  border-radius: var(--radius);
}
.panel h1, .panel h2, .panel-title { color: var(--ink); }
.panel h3, .drawer-section h3, .execution-form h3 { color: var(--ink-soft); }

/* superfícies secundárias (campos, tiras, chips neutros) */
.secondary-link-button,
.history-filters a,
.history-filters span,
.order-type-toggle,
.layer-order-toggle,
.segmented-field,
.event-button,
.outcome-button,
.icon-text-button,
.history-overview div,
.history-pager a,
.account-facts,
.account-dashboard-metrics div,
.event-focus,
.layer-event-strip,
.layer-selected-strip,
.mode-switch,
.trade-sidebar section,
.add-event-preview,
.add-button-config,
.manage-button-layer-row,
.add-account-picker,
.add-account-option,
.market-card-title span,
.selected-action-grid,
.return-preview,
.close-button {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
.event-button:hover,
.outcome-button:hover,
.icon-text-button:hover,
.history-pager a:hover,
.add-account-option:hover { background: var(--surface-3); border-color: var(--line-strong); }
.secondary-link-button { box-shadow: none; border-radius: var(--radius-sm); }
.secondary-link-button:hover { background: var(--surface-3); border-color: var(--line-strong); }

/* placas internas escuras (logs, json) */
.audit-json { background: #0b0d11; color: var(--muted); border: 1px solid var(--line); }
.error-details pre { background: #0b0d11; color: var(--tint-red-ink); border: 1px solid var(--line); }

/* ============================================================ formulários */
input, select, textarea {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: var(--radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  border-color: rgba(46, 230, 166, 0.6);
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.18);
}
.add-button-labels input.readonly { background: var(--surface-2); color: var(--muted); }
.history-account-filter select { background: var(--surface-2); color: var(--ink); }
label, .checkbox-line span, .order-type-field > span, .segmented-field span,
.layer-order-row > span { color: var(--muted); }

/* ============================================================ tabelas */
table th { color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
table th, table td { border-color: var(--line); }
tbody tr:hover td { background: rgba(255, 255, 255, 0.022); }
.table-wrap tr { background: transparent; }
.table-wrap td { border-color: var(--line); color: var(--ink); }

/* ============================================================ botões */
.ghost-button,
.secondary-button,
.tiny-button,
.icon-text-button { border-radius: var(--radius-sm); }

/* —— PRIMÁRIO unificado: <button> e <a> com a MESMA métrica (pílula menta) —— */
.primary-button,
.primary-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 18px;
  background: var(--green);
  color: var(--accent-ink);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: var(--inset-hi), 0 2px 12px rgba(46, 230, 166, 0.22);
  transition: background 0.14s ease, box-shadow 0.14s ease;
}
.primary-button:hover,
.primary-link-button:hover { background: var(--green-strong); box-shadow: var(--inset-hi), 0 4px 18px rgba(46, 230, 166, 0.36); }
.primary-button:disabled { opacity: 0.5; box-shadow: none; }
.primary-button.full, .form-actions .primary-button { width: 100%; }
/* variante compacta de toolbar densa: mesma identidade, só menor */
.compact-action-button { min-height: 34px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700; }

/* —— SECUNDÁRIO unificado: pílula outline (Cancelar, Atualizar saldos, Fechar) —— */
.secondary-button,
.secondary-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.secondary-button:hover,
.secondary-link-button:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); border-color: rgba(255, 255, 255, 0.24); }

/* guarda: não reexibir botões marcados como hidden (o display acima venceria o [hidden]) */
.primary-button[hidden],
.primary-link-button[hidden],
.secondary-button[hidden],
.secondary-link-button[hidden],
.compact-action-button[hidden] { display: none; }
.ghost-button { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
.ghost-button:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); border-color: rgba(255, 255, 255, 0.22); }
.ghost-button.light { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }

.tiny-button { background: var(--surface-3); color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
.tiny-button:hover { background: var(--surface-4); color: var(--ink); }
.tiny-button.active { background: var(--green); color: var(--accent-ink); border-color: transparent; box-shadow: 0 2px 8px rgba(46, 230, 166, 0.28); }
.tiny-button.danger { background: transparent; color: var(--red); border-color: rgba(255, 93, 110, 0.45); }
.tiny-button.warning { background: transparent; color: var(--amber); border-color: rgba(231, 178, 76, 0.45); }

.icon-text-button { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong); }
.icon-text-button.danger { background: transparent; color: var(--red); border-color: rgba(255, 93, 110, 0.45); }
.icon-text-button.success { background: transparent; color: var(--green); border-color: rgba(46, 230, 166, 0.45); }

.close-button:hover { background: var(--surface-3); color: var(--ink); }

/* filtros de histórico (chips estilo Kalshi: pílula outline, ativo = menta) */
.history-filters a {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.history-filters a:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.24); }
.history-filters a.active {
  background: var(--tint-green);
  border-color: rgba(46, 230, 166, 0.5);
  color: var(--green);
}

/* ============================================================ status / pills
   estilo Kalshi: pílula OUTLINE (borda + texto na cor semântica, fundo quase nulo) */
.table-status, .activity-pill {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.table-status.accepted, .table-status.placed, .table-status.matched,
.table-status.won, .table-status.finalized,
.activity-pill.buy {
  background: var(--tint-green); border-color: rgba(46, 230, 166, 0.45); color: var(--green);
}
.table-status.open, .table-status.partial, .table-status.unmatched {
  background: var(--tint-amber); border-color: rgba(231, 178, 76, 0.45); color: var(--amber-strong);
}
.table-status.lost, .table-status.canceled, .table-status.failed,
.activity-pill.sell {
  background: var(--tint-red); border-color: rgba(255, 93, 110, 0.45); color: var(--red);
}
.table-status.cashout, .activity-pill.redeem {
  background: var(--tint-blue); border-color: rgba(77, 139, 255, 0.45); color: var(--blue-strong);
}

/* badges/indicadores sólidos (mantêm tint cheio) */
.connection.on, .live-badge.on, .status-dot.ready::before { background: var(--tint-green); color: var(--green); }
.connection.off, .live-badge.off, .account-dashboard-warning, .account-warning { background: var(--tint-amber); color: var(--amber-strong); }
.status-dot.blocked::before { background: var(--tint-red); color: var(--red); }
.button-slot-badge { background: var(--tint-blue); color: var(--blue-strong); }

.order-type-option.active, .layer-order-option.active, .detach-layer-button {
  background: var(--tint-green); color: var(--green); border-color: rgba(46, 230, 166, 0.45);
}
.detach-layer-button:hover { background: rgba(46, 230, 166, 0.2); }
.mode-switch button.active { background: var(--surface-4); color: var(--ink); }
.segmented-field input:checked + span { background: var(--surface-4); color: var(--ink); }
.narrator-layer-tabs button.active { background: var(--surface-3); color: var(--ink); }

.layer-save-status { background: var(--tint-blue); color: var(--tint-blue-ink); }
.layer-save-status[data-state="saved"] { background: var(--tint-green); color: var(--tint-green-ink); }
.layer-save-status[data-state="pending"] { background: var(--tint-amber); color: var(--tint-amber-ink); }
.layer-save-status[data-state="error"] { background: var(--tint-red); color: var(--tint-red-ink); }

.credential-choice.selected { background: var(--tint-green); border-color: rgba(46, 230, 166, 0.45); }

/* ============================================================ flash */
.flash { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--radius-sm); }
.flash.error { border-left-color: var(--red); }
.flash.success { border-left-color: var(--green); }
.flash.warning { border-left-color: var(--gold); }

/* ============================================================ feed de ordens */
.trade-sidebar section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 34%), var(--panel);
  border-color: var(--line-strong);
  box-shadow: var(--inset-hi), 0 20px 50px rgba(0, 0, 0, 0.38);
}
.trade-sidebar h2 {
  color: var(--ink);
  font-size: 15px;
  letter-spacing: -0.015em;
}
.trade-order-empty {
  color: var(--muted);
}
.trade-order-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 42%), #151518;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--blue);
  color: var(--ink);
  box-shadow: var(--inset-hi);
}
.trade-order-card.processing {
  border-left-color: var(--teal);
  background: linear-gradient(90deg, rgba(45, 212, 212, 0.12), #151518 58%);
}
.trade-order-card.processing::after { background: linear-gradient(90deg, transparent, rgba(45, 212, 212, 0.22), transparent); }
.trade-order-card.unmatched { border-left-color: var(--amber); }
.trade-order-card.failed { border-left-color: var(--red); }
.trade-order-card.cashout, .trade-order-card.finalized { border-left-color: var(--green); }
.trade-order-card strong { color: var(--ink); }
.trade-order-card p,
.trade-order-card small {
  color: var(--muted);
}
.trade-order-card span {
  color: var(--tint-green-ink);
  letter-spacing: 0.01em;
}
.trade-order-card.unmatched span { color: var(--tint-amber-ink); }
.trade-order-card.failed span { color: var(--tint-red-ink); }
.trade-order-card.processing span { color: var(--tint-blue-ink); }
.trade-order-card em {
  color: var(--tint-red-ink);
  line-height: 1.35;
}
.trade-order-side.buy {
  background: var(--tint-green);
  border: 1px solid rgba(46, 230, 166, 0.2);
  color: var(--tint-green-ink);
}
.trade-order-side.sell {
  background: var(--tint-red);
  border: 1px solid rgba(255, 93, 110, 0.2);
  color: var(--tint-red-ink);
}
.trade-order-meta small,
.trade-order-values small {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.trade-order-values small {
  background: rgba(255, 255, 255, 0.035);
}
.trade-order-values strong {
  color: var(--ink);
}
.trade-order-result.positive { color: var(--tint-green-ink); }
.trade-order-result.negative { color: var(--tint-red-ink); }
.trade-order-result.muted { color: var(--muted); }
.trade-order-actions button {
  background: var(--surface-3);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.trade-order-actions button:hover { background: var(--surface-4); }
.trade-order-actions button[data-feed-cashout] {
  border-color: rgba(46, 230, 166, 0.26);
  color: var(--tint-green-ink);
}
.trade-order-actions button[data-feed-redeem] {
  border-color: rgba(77, 139, 255, 0.28);
  color: var(--tint-blue-ink);
}
.trade-order-actions button[data-feed-cancel] {
  border-color: rgba(231, 178, 76, 0.28);
  color: var(--tint-amber-ink);
}

/* ============================================================ ladder */
.ladder-table { color: var(--ink); }
.ladder-table th { background: var(--bg-2); border-bottom: 1px solid var(--line); color: var(--muted); }
.ladder-toolbar { background: var(--surface-2); border-color: var(--line); }
.ladder-amount-field input { background: var(--surface-3); border-color: var(--line-strong); color: var(--ink); }
.ladder-amount-field .tiny-button { background: var(--surface-3); color: var(--ink); }
.ladder-amount-field .tiny-button.active { background: var(--green); color: #04140d; }

.ladder-table tr.current-odd .ladder-price {
  background: rgba(231, 178, 76, 0.16);
  box-shadow: inset 0 0 0 1px rgba(231, 178, 76, 0.7);
}
.ladder-table tr.current-odd .ladder-price strong { color: var(--gold); }
.ladder-liq.trade-cell-placing::after { background: linear-gradient(90deg, transparent, rgba(231, 178, 76, 0.6), transparent); }
.ladder-liq.trade-cell-placing::before { background: var(--teal); box-shadow: 0 0 0 4px rgba(45, 212, 212, 0.2); }
.ladder-liq.trade-cell-placed::before { background: var(--green); box-shadow: 0 0 0 2px rgba(37, 209, 139, 0.25); }
.ladder-liq.trade-cell-failed::before { background: var(--red); box-shadow: 0 0 0 2px rgba(255, 91, 102, 0.25); }
.ladder-profit.positive { color: var(--tint-green-ink); }
.ladder-profit.negative { color: var(--tint-red-ink); }
.ladder-profit.closing { background: rgba(76, 154, 255, 0.12); color: var(--tint-blue-ink); }

/* profundidade do ladder: azul nas BUY, vermelho nas SELL (pedido do dono) */
.ladder-liq.buy, .ladder-liq.sell { color: var(--ink); }
.ladder-liq.buy.has-depth { background: rgba(76, 154, 255, 0.32); color: #d6e6ff; }
.ladder-liq.sell.has-depth { background: rgba(255, 91, 102, 0.3); color: #ffdada; }
.ladder-table tr.best-ask .ladder-liq.buy, .ladder-table tr.best-bid .ladder-liq.sell {
  box-shadow: inset 0 0 0 1px rgba(231, 178, 76, 0.5);
}

/* odds buttons */
.odds-button { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.odds-button:hover { background: var(--surface-3); }
.odds-button span, .odds-button small { color: var(--muted); }
.odds-button strong { color: var(--ink); }
.odds-button.quote-unavailable { background: var(--surface-2); color: var(--faint); }
.odds-button.selected, .odds-button.selected span,
.odds-button.selected strong, .odds-button.selected small {
  background: rgba(46, 230, 166, 0.14);
  border-color: rgba(46, 230, 166, 0.6);
  color: #c7f6e6;
}
.odds-button.selected { box-shadow: inset 0 0 0 1px rgba(46, 230, 166, 0.4); }

/* ============================================================ métricas */
.metric strong { color: var(--ink); }
.metric span { color: var(--muted); }
.metric.live strong { color: var(--positive); }
.metric.warn strong { color: var(--gold); }
.dash-pos, .history-return-profit { color: var(--positive); }
.dash-neg, .history-return-loss { color: var(--negative); }
.money-negative { color: var(--tint-red-ink); }

/* ============================================================ overlays / misc */
.drawer-backdrop { background: rgba(4, 5, 8, 0.72); backdrop-filter: blur(3px); }
.drawer-panel, .trade-sidebar section { box-shadow: var(--shadow); }
.detached-window-bar { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
html.detached-action-root, html.detached-action-root body { background: var(--bg); color: var(--ink); }
.login-body, .bettor-body { background: var(--bg); }
.event-focus img { background: var(--surface-3); }
.narrator-action-card.status-pending .narrator-action-button,
.narrator-action-card.status-blocked .narrator-action-button { background: var(--surface-3); }
.event-search-dropdown button:hover, .event-search-dropdown button:focus { background: var(--surface-3); }

/* ============================================================ skeleton loaders */
@keyframes rm-skeleton-sheen {
  0% { background-position: -220px 0; }
  100% { background-position: calc(220px + 100%) 0; }
}
.skeleton {
  display: block;
  position: relative;
  border-radius: var(--radius-sm);
  background-color: var(--surface-3);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.06) 110px, rgba(255, 255, 255, 0) 220px);
  background-size: 220px 100%;
  background-repeat: no-repeat;
  animation: rm-skeleton-sheen 1.15s ease-in-out infinite;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
  min-height: 10px;
}
.skeleton-line { height: 12px; }
.skeleton-line.lg { height: 19px; }
.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  margin-bottom: 10px;
}

/* ============================================================ barra de progresso de nav */
#rm-nav-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0;
  z-index: 1200;
  opacity: 0;
  background: linear-gradient(90deg, var(--accent), var(--teal));
  box-shadow: 0 0 12px rgba(46, 230, 166, 0.6);
  transition: width 0.25s ease, opacity 0.3s ease;
  pointer-events: none;
}
#rm-nav-progress.active { opacity: 1; }

/* ==========================================================================
   COMPLETAR COBERTURA — seletores do app.css com especificidade maior que os
   grupos acima (estados .active / :has / headers / filhos). Sem isto, sobravam
   superfícies claras e texto escuro-sobre-escuro. Ordem = vence empates.
   ========================================================================== */

/* superfícies que escapavam */
.action-summary.active { background: var(--surface-3); color: var(--ink); border-color: var(--line-strong); }
.add-account-option:has(input:checked) { background: var(--tint-green); border-color: rgba(46, 230, 166, 0.45); color: var(--ink); }
.narrator-layer-tabs button { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.narrator-layer-tabs button strong { color: var(--ink); }
.layer-board-header { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.event-search-dropdown button, .event-search-state { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.layer-board:not(.trade-board) .ladder-table tbody tr:hover .ladder-liq.buy.has-depth { background: rgba(76, 154, 255, 0.4); color: #d6e6ff; }
.ladder-table .ladder-liq.selected-cell { background: rgba(244, 198, 74, 0.2); color: var(--gold); }
.ladder-profit.closing::before { background: var(--blue); }
.add-layer-panel header, .add-layer-panel footer { border-color: var(--line); }

/* texto escuro-sobre-escuro */
.selected-action-grid strong { color: var(--ink); }
.error-details summary { color: var(--tint-red-ink); }
.mirror-audit-details summary { color: var(--tint-blue-ink); }
.audit-json.error { color: var(--tint-red-ink); }
.order-type-option.active strong { color: var(--tint-blue-ink); }
.mode-switch button { color: var(--muted); }
.manage-button-note { color: var(--muted); }
.ladder-profit { color: var(--muted); }
.ladder-profit.muted { color: var(--faint); }
.trade-order-result.muted { color: var(--muted); }
.trade-order-actions button[data-feed-cashout] { color: var(--tint-green-ink); }
.trade-order-actions button[data-feed-redeem] { color: var(--tint-blue-ink); }
.trade-order-actions button[data-feed-cancel] { color: var(--tint-amber-ink); }

/* ==========================================================================
   REFINAMENTOS ESTRUTURAIS — header, KPIs, seções e tabelas (linguagem Kalshi).
   Carrega depois de app.css + "density pass", então vence em empates. Mexe em
   espaçamento/tipografia/composição; o grid de layout das telas continua no
   app.css (Ações/ladder preservados — só herdam a pele).
   ========================================================================== */

/* ---- header / navegação ---- */
.topbar { min-height: 60px; padding: 0 24px; gap: 16px; }
.brand { font-weight: 800; letter-spacing: -0.01em; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; }
.main-nav { gap: 2px; }
.main-nav a { padding: 8px 13px; font-size: 13.5px; font-weight: 600; border-radius: var(--radius-sm); }
.main-nav a.active { font-weight: 750; box-shadow: inset 0 -2px 0 var(--accent); }
.topbar-right { gap: 12px; }
.user-name { font-size: 13px; font-weight: 600; color: var(--ink-soft); }

/* ---- eyebrow + títulos de página ---- */
.eyebrow { color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.page-heading h1 { font-weight: 800; letter-spacing: -0.025em; }
.page-heading { margin-bottom: 4px; }

/* ---- KPI cards ---- */
.metric { padding: 15px 16px; gap: 7px; border-radius: var(--radius); }
.metric span { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); }
.metric strong { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.metric.compact strong { font-size: 23px; }
.metric.live strong { color: var(--green); }
.metric.warn strong { color: var(--gold); }

/* ---- seções / panel ---- */
.panel { border-radius: var(--radius); }
.panel-title { margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.panel h1, .panel h2 { font-weight: 800; letter-spacing: -0.02em; }

/* ---- tabelas (headers title-case mutados, linhas com respiro e hover) ---- */
.table-wrap { border-radius: var(--radius-sm); border: 1px solid var(--line); }
table th {
  background: var(--panel);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
}
table td { border-bottom: 1px solid var(--line); }
tbody tr { transition: background 0.12s ease; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.032); }
.muted-label { color: var(--muted); }
.dash-mirror-pill { color: var(--muted); border-color: var(--line-strong); }
.inline-actions { display: inline-flex; gap: 7px; }

/* ---- correções de superfícies translúcidas-brancas (renderizavam CINZA no preto) ---- */
.layer-empty-state {
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  border-radius: var(--radius);
}
.layer-empty-state strong { color: var(--ink); }
.order-type-option:hover, .order-type-option:focus { background: var(--surface-3); color: var(--ink); }

/* scrim de modais/drawers = neutro escuro (era navy do tema antigo) */
.add-layer-backdrop { background: rgba(4, 5, 8, 0.72); }

/* ==========================================================================
   NAVBAR V1 — topbar profissional: ícones nos menus, ativo em pílula menta,
   chip de usuário com dropdown (Sair dentro). Estrutura nova em base.html.
   ========================================================================== */
.topbar {
  min-height: 60px;
  padding: 0 18px;
  gap: 16px;
  background: linear-gradient(180deg, var(--nav-soft), var(--nav));
  border-bottom: 1px solid var(--line-strong);
}
.brand { gap: 10px; font-weight: 800; letter-spacing: -0.01em; }
.brand-name { white-space: nowrap; }
.topbar-divider { width: 1px; height: 26px; background: var(--line-strong); flex: 0 0 auto; }

.main-nav { gap: 2px; flex: 1; min-width: 0; }
.main-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.14s ease, color 0.14s ease;
}
.main-nav .nav-link .nav-ic {
  width: 17px; height: 17px;
  stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}
.main-nav .nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.main-nav .nav-link.active { color: var(--ink); background: rgba(46, 230, 166, 0.1); box-shadow: none; }
.main-nav .nav-link.active .nav-ic { color: var(--green); }

/* badge do Histórico: agora inline (era absoluto) */
.nav-link .nav-counter {
  position: static; top: auto; right: auto;
  border: 0; box-shadow: none;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--red); color: #190a0c;
  font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-link .nav-counter[hidden] { display: none; }

/* cluster direito + menu de usuário */
.topbar-right { gap: 10px; }
.user-menu { position: relative; }
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}
.user-chip:hover { background: var(--surface-3); }
.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--green-strong), var(--green));
}
.user-avatar.lg { width: 38px; height: 38px; font-size: 14px; }
.user-meta { display: flex; flex-direction: column; line-height: 1.16; text-align: left; }
.user-meta b { font-size: 13px; font-weight: 700; color: var(--ink); }
.user-role { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--green); }
.user-chev { width: 16px; height: 16px; stroke: var(--muted); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1300;
  min-width: 244px;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
}
.user-dropdown[hidden] { display: none; }
.user-dropdown-head {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.user-dropdown-head b { display: block; font-size: 13.5px; color: var(--ink); }
.user-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13.5px; font-weight: 600;
}
.user-dropdown-item:hover { background: var(--surface-3); color: var(--ink); }
.user-dropdown-item svg {
  width: 17px; height: 17px;
  stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}