/* ============================================================================
   Setup Hunter — TEMA UNIFICADO  (14/08/2026)
   ============================================================================
   Fonte da verdade visual de TODAS as páginas. Linguagem extraída da tela de
   login (SH-AUTH-V2), que era a única com design coerente: DM Sans + Space
   Grotesk, turquesa #00E8D0 sobre tinta #1C2538, superfícies de vidro.

   COMO FUNCIONA
   Este arquivo é carregado DEPOIS de /shared/style.css e REDEFINE os tokens
   --sh-* que o style.css já expunha. Quem já usava as variáveis (trades,
   config) é retematizado sem tocar no HTML. As páginas com CSS local próprio
   perdem só as regras conflitantes de cor/fonte/fundo — estrutura e
   comportamento ficam idênticos.

   REGRA: aqui só entra APARÊNCIA. Nenhuma regra deste arquivo pode depender de
   estado de dados nem alterar layout a ponto de mudar comportamento de JS.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  /* ---- marca ---- */
  --tq-1:    #00E8D0;   /* turquesa viva — acento primário */
  --tq-2:    #06C6C6;
  --tq-deep: #04A8B2;   /* turquesa legível sobre claro (texto/links) */
  --px-1:    #1D4ED8;
  --px-soft: #60A5FA;

  /* ---- tinta ---- */
  --ink:       #1C2538;
  --ink-soft:  #3a4f6a;
  --ink-faint: #7d8ca3;

  /* ---- fundo da página ---- */
  --bg-1: #D8DFDD;
  --bg-2: #CDDAD6;
  --bg-3: #DBD8E5;

  /* ---- vidro ---- */
  --paper:        rgba(255,255,255,0.62);
  --paper-solid:  rgba(255,255,255,0.86);
  --paper-border: rgba(255,255,255,0.78);
  --paper-inset:  rgba(255,255,255,0.38);

  /* ---- semântica ---- */
  --ok:      #0a7d32;
  --ok-bg:   rgba(16,185,129,0.12);
  --warn:    #8a5d00;
  --warn-bg: rgba(245,158,11,0.14);
  --danger:  #C0261F;
  --danger-bg: rgba(240,56,40,0.10);
  --danger-border: rgba(240,56,40,0.30);

  --shadow-card:  0 20px 60px -20px rgba(28,37,56,0.22), 0 2px 8px rgba(28,37,56,0.05);
  --shadow-soft:  0 4px 16px -6px rgba(28,37,56,0.14);
  --shadow-focus: 0 0 0 3px rgba(0,232,208,0.24), 0 0 24px -4px rgba(0,232,208,0.35);

  --radius:    14px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  --font:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-disp: 'Space Grotesk', 'DM Sans', sans-serif;
  --font-mono: 'SF Mono', Monaco, Menlo, Consolas, monospace;

  /* ---- ponte com o style.css legado: mesmos nomes, valores novos ---- */
  --sh-bg:            transparent;
  --sh-surface:       var(--paper);
  --sh-surface-alt:   var(--paper-inset);
  --sh-text:          var(--ink);
  --sh-text-muted:    var(--ink-soft);
  --sh-text-faint:    var(--ink-faint);
  --sh-teal:          var(--tq-deep);
  --sh-green:         var(--ok);
  --sh-red:           var(--danger);
  --sh-orange:        var(--warn);
  --sh-purple:        #7c6bd6;
  --sh-border:        rgba(28,37,56,0.10);
  --sh-border-strong: rgba(28,37,56,0.20);
  --sh-shadow-sm:     var(--shadow-soft);
  --sh-shadow:        var(--shadow-soft);
  --sh-shadow-lg:     var(--shadow-card);
  --sh-radius:        var(--radius);
  --sh-radius-sm:     var(--radius-sm);
  --sh-font:          var(--font);
  --sh-font-mono:     var(--font-mono);
  --sh-blue-deep:     var(--px-1);
  --sh-blue-sky:      var(--px-soft);
}

/* ============================ base ============================ */
*, *::before, *::after { box-sizing: border-box; }

body.sh-themed {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 15% 12%, rgba(0,232,208,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 88% 78%, rgba(80,82,194,0.11) 0%, transparent 60%),
    linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

.sh-themed h1, .sh-themed h2, .sh-themed h3,
.sh-themed .sh-display { font-family: var(--font-disp); letter-spacing: -0.01em; }

.sh-themed h1 { font-size: 27px; font-weight: 700; margin: 0 0 6px; }
.sh-themed h2 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.sh-themed a  { color: var(--tq-deep); text-decoration: none; }
.sh-themed a:hover { text-decoration: underline; }
.sh-themed code, .sh-themed .mono, .sh-themed .sh-mono { font-family: var(--font-mono); font-size: 0.92em; }

.sh-wrap { max-width: 1200px; margin: 0 auto; padding: 24px; position: relative; z-index: 1; }
.sh-wrap-narrow { max-width: 880px; }
.sh-sub { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0 0 20px; }

/* ============================ cartões ============================ */
.sh-themed .sh-card, .sh-themed .card, .sh-themed .panel {
  background: var(--paper);
  border: 1px solid var(--paper-border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.sh-themed .sh-card:hover, .sh-themed .card:hover { box-shadow: var(--shadow-card); }
.sh-hint { color: var(--ink-soft); font-size: 12px; line-height: 1.5; margin: 0 0 14px; }

/* barra escura de controles (seletor de ativo etc.) */
.sh-bar {
  background: linear-gradient(135deg, var(--ink) 0%, #243049 100%);
  color: #fff; padding: 16px 20px; border-radius: var(--radius);
  margin-bottom: 20px; display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  box-shadow: var(--shadow-soft);
}
.sh-bar label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .72; display: block; margin-bottom: 5px; }
.sh-bar select, .sh-bar input {
  font-family: var(--font-mono); font-size: 15px; padding: 9px 12px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-xs); color: #fff;
}
.sh-bar select:focus, .sh-bar input:focus { outline: none; box-shadow: var(--shadow-focus); }
.sh-bar select option { color: var(--ink); }
.sh-bar .status, .sh-bar .sh-bar-status { margin-left: auto; font-size: 12px; opacity: .78; font-family: var(--font-mono); }

/* ============================ tabelas ============================ */
.sh-themed table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sh-themed th, .sh-themed td {
  text-align: left; padding: 8px 9px;
  border-bottom: 1px solid rgba(28,37,56,0.08); vertical-align: top;
}
.sh-themed th {
  color: var(--ink-soft); font-weight: 600; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .05em;
}
.sh-themed tbody tr:hover { background: rgba(255,255,255,0.34); }
.sh-themed tr:last-child td { border-bottom: none; }
.sh-themed td.num, .sh-themed th.num { text-align: right; font-family: var(--font-mono); }

/* ============================ métricas ============================ */
.sh-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.sh-metric {
  background: var(--paper-inset); border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-sm); padding: 12px;
}
.sh-metric .k, .sh-metric .sh-metric-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); margin-bottom: 5px;
}
.sh-metric .v, .sh-metric .sh-metric-value { font-size: 20px; font-weight: 700; font-family: var(--font-mono); }

/* ============================ botões e forms ============================ */
.sh-themed .sh-btn, .sh-themed button.sh-btn {
  font-family: var(--font); font-size: 14px; font-weight: 500;
  padding: 9px 18px; border-radius: var(--radius-xs);
  border: 1px solid var(--sh-border-strong); background: var(--paper-solid);
  color: var(--ink); cursor: pointer; transition: all .15s;
}
.sh-themed .sh-btn:hover { border-color: var(--tq-deep); color: var(--tq-deep); }
.sh-themed .sh-btn-primary, .sh-themed button.sh-btn-primary {
  background: linear-gradient(135deg, var(--tq-1) 0%, var(--tq-2) 100%);
  border: none; color: #06323a; font-weight: 700;
}
.sh-themed .sh-btn-primary:hover { filter: brightness(1.06); color: #06323a; }
.sh-themed input[type=text], .sh-themed input[type=number], .sh-themed input[type=password],
.sh-themed input[type=date], .sh-themed select, .sh-themed textarea {
  font-family: var(--font); font-size: 14px; color: var(--ink);
  background: var(--paper-solid); border: 1px solid var(--sh-border-strong);
  border-radius: var(--radius-xs); padding: 9px 11px;
}
.sh-themed input:focus, .sh-themed select:focus, .sh-themed textarea:focus {
  outline: none; border-color: var(--tq-2); box-shadow: var(--shadow-focus);
}

/* ============================ proveniência e frescor ============================
   Componentes REPETIDOS: precisam ser idênticos em toda página. Ver
   lib/freshness.js — os status são ok | atencao | stale | ausente.            */
.sh-prov {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 11px; color: var(--ink-soft);
  background: var(--paper-inset); border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-xs); padding: 7px 10px; margin: 0 0 14px;
}
.sh-prov b { color: var(--ink); font-weight: 600; }
.sh-sel, .sh-badge-fresh {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-weight: 700; font-size: 10.5px; white-space: nowrap;
}
.sh-sel-ok,      .sh-badge-fresh.ok      { background: var(--ok-bg);     color: var(--ok); }
.sh-sel-atencao, .sh-badge-fresh.atencao { background: var(--warn-bg);   color: var(--warn); }
.sh-sel-stale,   .sh-badge-fresh.stale   { background: var(--danger-bg); color: var(--danger); }
.sh-sel-ausente, .sh-badge-fresh.ausente { background: rgba(28,37,56,0.08); color: var(--ink-faint); }

/* tarja de alerta: dado velho o bastante para o guard suprimir o sinal */
.sh-tarja {
  background: var(--danger-bg); border: 1px solid var(--danger-border);
  color: var(--danger); border-radius: var(--radius-xs);
  padding: 9px 12px; margin: 0 0 14px; font-size: 12px; font-weight: 600; line-height: 1.5;
}

/* caixa de erro padrão — 404/500 aparecem AQUI, nunca em redirect */
.sh-err, .sh-themed .err {
  background: var(--danger-bg); border: 1px solid var(--danger-border);
  color: var(--danger); padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.5; margin: 0 0 14px;
}
.sh-err code, .sh-themed .err code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px; }
.sh-loading, .sh-themed .loading { color: var(--ink-faint); font-size: 13px; font-style: italic; }

/* ============================ pills e estados ============================ */
.sh-pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.sh-pill-ok   { background: var(--ok-bg);     color: var(--ok); }
.sh-pill-warn { background: var(--warn-bg);   color: var(--warn); }
.sh-pill-bad  { background: var(--danger-bg); color: var(--danger); }
.sh-pill-mut  { background: rgba(28,37,56,0.07); color: var(--ink-soft); }
.sh-themed .pos, .sh-themed .ok   { color: var(--ok); }
.sh-themed .neg, .sh-themed .bad  { color: var(--danger); }
.sh-themed .warn                  { color: var(--warn); }
.sh-themed .mut, .sh-themed .muted, .sh-themed .sh-muted { color: var(--ink-soft); }
.sh-note { font-size: 11.5px; color: var(--ink-soft); line-height: 1.6; margin-top: 22px; }

/* ============================ header compartilhado ============================ */
.sh-themed .sh-header {
  background: rgba(255,255,255,0.55); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--paper-border);
  position: sticky; top: 0; z-index: 50;
}
.sh-themed .sh-header-inner {
  max-width: 1200px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 22px;
}
.sh-themed .sh-brand {
  font-family: var(--font-disp); font-weight: 700; font-size: 17px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.sh-themed .sh-brand:hover { text-decoration: none; }
.sh-themed .sh-brand-accent { color: var(--tq-1); }
.sh-themed .sh-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.sh-themed .sh-nav-link {
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
  padding: 6px 11px; border-radius: 99px; text-decoration: none; transition: all .15s;
}
.sh-themed .sh-nav-link:hover { background: rgba(255,255,255,0.6); color: var(--ink); text-decoration: none; }
.sh-themed .sh-nav-link.sh-active { background: var(--ink); color: #fff; }
.sh-themed .sh-nav-spacer { flex: 1; }
.sh-themed .sh-nav-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-faint); }

/* orbes decorativos (nav.js injeta) — no tema novo ficam sutis */
.sh-themed .sh-orb { position: fixed; border-radius: 50%; filter: blur(70px); opacity: .30; z-index: 0; pointer-events: none; }
.sh-themed .sh-orb-1 { width: 320px; height: 320px; background: radial-gradient(circle, var(--tq-1) 0%, transparent 70%); top: 6%; left: 4%; }
.sh-themed .sh-orb-2 { width: 260px; height: 260px; background: radial-gradient(circle, var(--px-soft) 0%, transparent 70%); bottom: 10%; right: 6%; }
.sh-themed .sh-orb-3, .sh-themed .sh-orb-4 { display: none; }

/* ============================ grid de atalhos (hub) ============================ */
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 26px; }
.sh-themed a.sh-tile {
  display: block; background: var(--paper); border: 1px solid var(--paper-border);
  border-radius: var(--radius); padding: 16px; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-soft); transition: transform .15s, box-shadow .15s, border-color .15s;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.sh-themed a.sh-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--tq-2); text-decoration: none; }
.sh-themed a.sh-tile h3 { font-family: var(--font-disp); font-size: 15px; margin: 0 0 6px; }
.sh-themed a.sh-tile p  { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* ============================ mobile ============================ */
@media (max-width: 720px) {
  .sh-wrap { padding: 16px 13px; }
  .sh-themed h1 { font-size: 22px; }
  .sh-themed .sh-header-inner { padding: 10px 13px; gap: 12px; flex-wrap: wrap; }
  .sh-themed .sh-nav { gap: 2px; }
  .sh-themed .sh-nav-link { font-size: 12.5px; padding: 5px 9px; }
  .sh-themed .sh-nav-meta { display: none; }
  .sh-bar { flex-direction: column; align-items: stretch; }
  .sh-bar .status, .sh-bar .sh-bar-status { margin-left: 0; }
  .sh-metrics { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  /* tabela larga rola dentro do card em vez de estourar a página */
  .sh-themed .sh-card, .sh-themed .card, .sh-themed .panel { padding: 14px; }
  .sh-themed table { display: block; overflow-x: auto; white-space: nowrap; }
  .sh-themed .sh-orb { display: none; }
}

/* ============================================================================
   ALIASES — as páginas já existiam com nomes de classe próprios (.card, .bar,
   .prov, .tarja, .err, .metric, .pill…). Em vez de reescrever HTML e arriscar
   quebrar JS que consulta esses seletores, o tema responde pelos dois nomes.
   Assim a migração é só: apagar as regras LOCAIS conflitantes.
   ============================================================================ */
.sh-themed .bar { background: linear-gradient(135deg, var(--ink) 0%, #243049 100%); color:#fff;
  padding:16px 20px; border-radius:var(--radius); margin-bottom:20px;
  display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; box-shadow:var(--shadow-soft); }
.sh-themed .bar label { font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.72; display:block; margin-bottom:5px; }
.sh-themed .bar select, .sh-themed .bar input { font-family:var(--font-mono); font-size:15px; padding:9px 12px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-xs); color:#fff; }
.sh-themed .bar select:focus, .sh-themed .bar input:focus { outline:none; box-shadow:var(--shadow-focus); }
.sh-themed .bar select option { color:var(--ink); }
.sh-themed .bar .status { margin-left:auto; font-size:12px; opacity:.78; font-family:var(--font-mono); }

.sh-themed .metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.sh-themed .metric { background:var(--paper-inset); border:1px solid rgba(255,255,255,0.5);
  border-radius:var(--radius-sm); padding:12px; }
.sh-themed .metric .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:5px; }
.sh-themed .metric .v { font-size:20px; font-weight:700; font-family:var(--font-mono); }

.sh-themed .prov { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:11px; color:var(--ink-soft);
  background:var(--paper-inset); border:1px solid rgba(255,255,255,0.5);
  border-radius:var(--radius-xs); padding:7px 10px; margin:0 0 14px; }
.sh-themed .prov b { color:var(--ink); font-weight:600; }
.sh-themed .prov .sel { display:inline-block; padding:2px 8px; border-radius:99px; font-weight:700; font-size:10.5px; white-space:nowrap; }
.sh-themed .sel-ok      { background:var(--ok-bg);     color:var(--ok); }
.sh-themed .sel-atencao { background:var(--warn-bg);   color:var(--warn); }
.sh-themed .sel-stale   { background:var(--danger-bg); color:var(--danger); }
.sh-themed .sel-ausente { background:rgba(28,37,56,0.08); color:var(--ink-faint); }

.sh-themed .tarja { background:var(--danger-bg); border:1px solid var(--danger-border); color:var(--danger);
  border-radius:var(--radius-xs); padding:9px 12px; margin:0 0 14px; font-size:12px; font-weight:600; line-height:1.5; }

/* badges de frescor do /status */
.sh-themed .badge { display:inline-block; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:700; white-space:nowrap; }
.sh-themed .b-ok      { background:var(--ok-bg);     color:var(--ok); }
.sh-themed .b-atencao { background:var(--warn-bg);   color:var(--warn); }
.sh-themed .b-stale   { background:var(--danger-bg); color:var(--danger); }
.sh-themed .b-ausente { background:rgba(28,37,56,0.08); color:var(--ink-faint); }

/* veredito do /status */
.sh-themed .veredito { border-radius:var(--radius); padding:18px 20px; margin-bottom:20px;
  display:flex; align-items:center; gap:16px; border:1px solid; }
.sh-themed .veredito .big { font-size:30px; }
.sh-themed .veredito .txt { font-size:15px; font-weight:600; line-height:1.45; }
.sh-themed .v-ok      { background:var(--ok-bg);     border-color:rgba(16,185,129,0.35); color:var(--ok); }
.sh-themed .v-atencao { background:var(--warn-bg);   border-color:rgba(245,158,11,0.38); color:var(--warn); }
.sh-themed .v-stale   { background:var(--danger-bg); border-color:var(--danger-border);  color:var(--danger); }

/* pills do /estudo (IV×HV) */
.sh-themed .pill { display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:700; }
.sh-themed .pill-cara   { background:var(--danger-bg); color:var(--danger); }
.sh-themed .pill-barata { background:var(--ok-bg);     color:var(--ok); }
.sh-themed .pill-justa  { background:rgba(28,37,56,0.07); color:var(--ink-soft); }

/* wrappers legados */
.sh-themed .wrap { max-width:1200px; margin:0 auto; padding:24px; position:relative; z-index:1; }
.sh-themed .sub  { color:var(--ink-soft); font-size:14px; line-height:1.55; margin:0 0 20px; }
.sh-themed .hint, .sh-themed .card .hint { color:var(--ink-soft); font-size:12px; line-height:1.5; margin:0 0 14px; }
.sh-themed .note, .sh-themed .foot { font-size:11.5px; color:var(--ink-soft); line-height:1.6; margin-top:22px; }
.sh-themed .src  { color:var(--ink-soft); font-size:11.5px; }
.sh-themed .cron { color:var(--ink-faint); font-size:11px; font-family:var(--font-mono); }
.sh-themed .worst { color:var(--danger); font-size:11px; font-family:var(--font-mono); margin-top:4px; }
.sh-themed .refresh { float:right; font-size:12px; color:var(--ink-soft); }
.sh-themed .legend { font-size:11.5px; color:var(--ink-soft); margin-top:10px; line-height:1.7; }
.sh-themed .legend b { color:var(--ink); }

@media (max-width: 720px) {
  .sh-themed .wrap { padding:16px 13px; }
  .sh-themed .bar { flex-direction:column; align-items:stretch; }
  .sh-themed .bar .status { margin-left:0; }
  .sh-themed .metrics { grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); }
}

/* hub: <a class="card"> é atalho, não cartão de conteúdo — ganha o realce de tile */
.sh-themed a.card {
  display:block; text-decoration:none; color:var(--ink);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.sh-themed a.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:var(--tq-2); text-decoration:none; }
.sh-themed a.card h3 { font-family:var(--font-disp); font-size:15px; margin:0 0 6px; }
.sh-themed a.card p  { font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.sh-themed .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-bottom:26px; }
.sh-themed .panel h3 { font-family:var(--font-disp); font-size:14px; margin:0 0 10px; color:var(--tq-deep); }