/* =====================================================================
   CaféComTrade — style.css  v18 (design system v1, nov/2026)
   Tokens oficiais: Carvão (escuro, padrão) e Creme (claro). Âmbar é a única
   cor de marca; verde/vermelho só para variação. Mono só em números.
   Os nomes antigos (--card, --txt-2, --acc-rgb…) continuam existindo como
   apelidos dos tokens novos, para as páginas que os usam seguirem funcionando.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #11100e; --surface: #191715; --surface-raised: #221f1c; --surface-sunken: #0c0b0a;
  --line: #2e2a26; --line-strong: #746b61;
  --ink: #f3eee7; --ink-muted: #a89e92; --ink-faint: #7d746a;
  --amber: #f5a524; --amber-strong: #ffb940; --amber-text: #f7b955; --amber-soft: #33260f; --on-amber: #1a1206;
  --up: #6fc497; --up-soft: #1a2c22; --down: #ef8a78; --down-soft: #36211d;
  --session-asia: #b9c6d8; --session-london: #e7d29c; --session-ny: #e5a985;
  --focus: #f5a524;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 1px 2px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.35);
  --shadow-3: 0 2px 6px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.45);
  --shadow-4: 0 4px 10px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.5);
  --shadow-5: 0 8px 18px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.6);
  /* componentes RGB para rgba() nas páginas antigas */
  --acc-rgb: 245,165,36; --up-rgb: 111,196,151; --dn-rgb: 239,138,120;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f3ee; --surface: #fcfaf7; --surface-raised: #ffffff; --surface-sunken: #efebe4;
  --line: #e4ddd2; --line-strong: #8f8578;
  --ink: #1b1814; --ink-muted: #655c52; --ink-faint: #8a8073;
  --amber: #f5a524; --amber-strong: #e3910c; --amber-text: #8a5000; --amber-soft: #fbecd0; --on-amber: #1a1206;
  --up: #2b7550; --up-soft: #e3f1e8; --down: #b03e2c; --down-soft: #f8e4e0;
  --session-asia: #4a5d73; --session-london: #76601e; --session-ny: #934d2d;
  --focus: #8a5000;
  --shadow-1: 0 1px 2px rgba(43,30,15,.08);
  --shadow-2: 0 1px 2px rgba(43,30,15,.06), 0 4px 10px rgba(43,30,15,.06);
  --shadow-3: 0 2px 6px rgba(43,30,15,.06), 0 10px 24px rgba(43,30,15,.08);
  --shadow-4: 0 4px 10px rgba(43,30,15,.06), 0 18px 40px rgba(43,30,15,.1);
  --shadow-5: 0 8px 18px rgba(43,30,15,.08), 0 30px 70px rgba(43,30,15,.14);
  --acc-rgb: 138,80,0; --up-rgb: 43,117,80; --dn-rgb: 176,62,44;
}
:root {
  /* apelidos dos nomes antigos */
  --bg-2: var(--surface); --card: var(--surface); --card-h: var(--surface-raised);
  --txt: var(--ink); --txt-2: var(--ink-muted); --txt-3: var(--ink-faint);
  --amber-2: var(--amber-text); --amber-dim: var(--amber-soft);
  --dn: var(--down); --fl: var(--ink-muted);
  --radius: 16px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: var(--font); --font-mono: var(--mono);
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.up { color: var(--up); } .dn { color: var(--down); } .fl { color: var(--ink-muted); }
button { font: inherit; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--amber-soft); color: var(--ink); }

/* ---------- 3. Cabeçalho (uma barra: marca · navegação · ferramentas) ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-4); height: 56px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); }
@supports not (background: color-mix(in srgb, red 50%, transparent)) { .top { background: var(--bg); } }
.brand { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.brand .cup { width: 22px; height: 22px; color: var(--amber); }
.brand em { font-style: normal; color: var(--amber-text); }
.brand small { display: none; }
.nav { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: 0 0 auto; padding: 7px var(--space-3); border-radius: var(--radius-md); color: var(--ink-muted); font-size: 14px; font-weight: 500; transition: background-color .15s ease-out, color .15s ease-out; }
.nav a:hover { color: var(--ink); background: var(--surface-raised); }
.nav a.ativo { color: var(--ink); background: var(--surface-raised); box-shadow: inset 0 -2px 0 var(--amber); }
.nav-sep { color: var(--ink-faint); font-size: 11px; padding: 0 2px 0 var(--space-2); align-self: center; }
.nav a.priv { color: var(--amber-text); }
.nav a.priv.ativo { color: var(--ink); }
.ferr { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: none; border: 1px solid transparent; color: var(--ink-muted); cursor: pointer; font-size: 16px; border-radius: var(--radius-md); transition: background-color .15s ease-out, color .15s ease-out; }
.ico:hover { color: var(--ink); background: var(--surface-raised); }
.quem { font-size: 13px; color: var(--ink-muted); margin-left: var(--space-1); }
.voltar { font-size: 13px; color: var(--ink-faint); }
.rodape-form { margin: 14px 0 0; font-size: 13px; color: var(--ink-muted); }
.rodape-form a { color: var(--amber-text); }
.nav-entrar { font-size: 13px; font-weight: 600; color: var(--ink); padding: 6px var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.nav-entrar:hover { background: var(--surface-raised); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.dot.ok { background: var(--up); box-shadow: 0 0 0 3px var(--up-soft); } .dot.err { background: var(--down); box-shadow: 0 0 0 3px var(--down-soft); }
/* linha sob o cabeçalho: abas do destino à esquerda, carimbo de atualização à direita */
.brandbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; max-width: 1320px; margin: 0 auto; }
.brandbar:empty, .brandbar:not(:has(.abas)):has(.status:empty) { display: none; }
.abas { display: flex; gap: 2px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); }
.abas a { padding: 5px var(--space-3); border-radius: 7px; color: var(--ink-muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.abas a:hover { color: var(--ink); }
.abas a.ativo { color: var(--ink); background: var(--surface-raised); box-shadow: var(--shadow-1); }
.abas a.btn { background: var(--surface); }
.status { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
/* menu da conta */
.conta { position: relative; }
.conta summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-2) 0 3px; border-radius: var(--radius-full); border: 1px solid var(--line-strong); cursor: pointer; color: var(--ink-muted); font-size: 13px; }
.conta summary::-webkit-details-marker { display: none; }
.conta summary:hover { background: var(--surface-raised); color: var(--ink); }
.conta .avatar { width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--amber); color: var(--on-amber); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.conta[open] summary { color: var(--ink); background: var(--surface-raised); }
.conta__menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-4); z-index: 30; display: flex; flex-direction: column; }
.conta__menu a { padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); font-size: 13.5px; }
.conta__menu a:hover { background: var(--surface-sunken); }
.conta__menu a.ativo { color: var(--amber-text); }
.conta__menu a.sair { color: var(--ink-muted); border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; border-radius: 0; }

/* ---------- 4. Layout ---------- */
/* Largura única para todas as páginas (v57): o conteúdo alinha com as abas e com o rodapé */
body :is(.wrap, .co, .es, .gr, .hx, .jr, .tv, .nt, .ref, .rel, .scr, .tt, .gl) { max-width: 1320px; padding-left: var(--space-4); padding-right: var(--space-4); }
@media (min-width: 900px) { body :is(.wrap, .co, .es, .gr, .hx, .jr, .tv, .nt, .ref, .rel, .scr, .tt, .gl) { padding-left: var(--space-6); padding-right: var(--space-6); } }
/* Instalado na tela de início (iOS): o cabeçalho desce abaixo da barra de status */
.app .top { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
@media (max-width: 640px) { .app .top { height: auto; } }
.app body { padding-bottom: env(safe-area-inset-bottom); }
.wrap { max-width: 1320px; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-12); }
/* a altura vem do próprio widget (60 px em tela larga, 86 px em tela estreita): nada fica cortado em iPad nem celular (v60) */
.tape { margin: 0 0 var(--space-4); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: #131313; min-height: 46px; }
.tape .tradingview-widget-container, .tape .tradingview-widget-container__widget { height: auto !important; }
.tape iframe { display: block; }
.charts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.chart { height: 350px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.chart.dark { background: var(--surface); }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
@media (min-width: 900px) { .wrap { padding: var(--space-6) var(--space-6) var(--space-12); } .top { padding: 0 var(--space-6); } .brandbar { padding-left: var(--space-6); padding-right: var(--space-6); } }

/* ---------- 5. Card e tabela ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); }
.card > h3 { margin: 0; padding: var(--space-3) var(--space-4) var(--space-2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.card > h3 .sub { font-weight: 450; letter-spacing: 0; text-transform: none; color: var(--ink-faint); font-size: 12px; }
.tb { width: 100%; border-collapse: collapse; }
.tb td { padding: 7px var(--space-4); border-top: 1px solid var(--line); white-space: nowrap; font-size: 13.5px; }
.tb tr:first-child td { border-top: 0; }
.tb tr:hover td { background: var(--surface-raised); }
.tb td.n { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.tb td.p { text-align: right; font-weight: 500; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tb td.v { text-align: right; width: 80px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.tb td.h { text-align: right; color: var(--ink-faint); font-size: 11px; width: 54px; font-family: var(--mono); }
.flag { font-size: 14px; width: 18px; text-align: center; }
.tb .vazio { color: var(--ink-faint); padding: 14px; }

/* ---------- 6. Widgets do Market ---------- */
.col .cj, .col .cw { display: flex; flex-direction: column; gap: var(--space-4); }
.col .cw [data-w] { display: flex; flex-direction: column; }
@media (min-width: 1101px) {
  .cols:not(.medindo) { align-items: stretch; }
  .cols:not(.medindo) .col .cw { flex: 1; }
  .cols:not(.medindo) .col:has(.cw:empty) .cj { flex: 1; }
  .cols:not(.medindo) .col:has(.cw:empty) .cj > :last-child, .cols:not(.medindo) .col .cw > :last-child, .cols:not(.medindo) .col .cw > :last-child > .card { flex: 1; }
}
.col .cw:empty { display: none; }
.largo:empty { display: none; }
.largo { margin-top: var(--space-4); }
#cal { margin-top: var(--space-4); }
.w-news .news { max-height: 560px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; }
.w-news .news a { border-top: 1px solid var(--line); }
.w-news .news a:nth-child(odd) { border-right: 1px solid var(--line); }
.w-regime .regime .lista { grid-template-columns: repeat(6, 1fr); }
.news { max-height: 520px; overflow: auto; }
.news a { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); align-items: center; font-size: 13.5px; }
.news a:first-child { border-top: 0; }
.news a:hover { background: var(--surface-raised); }
.news .src { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); border: 1px solid var(--line); padding: 2px 6px; border-radius: var(--radius-sm); font-weight: 600; }
.news .t { font-size: 11px; color: var(--ink-faint); font-family: var(--mono); }
.baro { padding: var(--space-3) var(--space-4); }
.baro table { width: 100%; border-collapse: separate; border-spacing: 4px; }
.baro th { font-size: 11px; color: var(--ink-faint); font-weight: 500; }
.baro td { text-align: center; padding: 10px 4px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.baro th.r { text-align: left; }
.fg { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; padding: var(--space-3) var(--space-4); }
.fg .gauge { width: 170px; height: 100px; }
.fg .big { font-size: 38px; font-weight: 600; line-height: 1; font-family: var(--mono); letter-spacing: -.02em; }
.fg .rating { color: var(--amber-text); font-weight: 600; text-transform: capitalize; margin-top: 2px; }
.fg .hist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; font-size: 11px; color: var(--ink-faint); }
.fg .hist b { display: block; color: var(--ink); font-size: 14px; }
.regime { padding: var(--space-3) var(--space-4); }
.pill { display: inline-block; font-weight: 600; letter-spacing: .06em; font-size: 12px; padding: 5px 12px; border-radius: 999px; background: var(--surface-sunken); border: 1px solid var(--line); }
.pill.on { color: var(--up); background: var(--up-soft); border-color: transparent; } .pill.off { color: var(--down); background: var(--down-soft); border-color: transparent; } .pill.neutro { color: var(--amber-text); background: var(--amber-soft); border-color: transparent; }
.regime .lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
.regime .it { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; }
.regime .it b { display: block; font-size: 13px; }
.ver { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.ver.ALTA { color: var(--up); } .ver.BAIXA { color: var(--down); } .ver.NEUTRO { color: var(--amber-text); }
.regime .txt { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }
.regime .niv { margin-top: auto !important; display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; font-size: 11px; color: var(--ink-faint); padding-top: 5px; border-top: 1px dashed var(--line); }
.regime .hj { margin-bottom: 6px; }
.regime .niv .mono { color: var(--ink-muted); text-align: right; }
.cal { margin-top: var(--space-4); }
.cal iframe { width: 100%; height: 560px; border: 0; display: block; background: #fff; }

/* ---------- 7. Rodapé ---------- */
.foot { max-width: 1320px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); color: var(--ink-faint); font-size: 12px; line-height: 1.6; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.foot .slogan { color: var(--ink-muted); }
.foot .slogan b { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .foot { padding-left: var(--space-6); padding-right: var(--space-6); } }

/* ---------- 8. Configurar, botões e campos ---------- */
.cfg { max-width: 980px; margin: 0 auto; padding: var(--space-6) var(--space-4) 60px; }
.cfg h1 { font-size: 24px; letter-spacing: -.01em; margin: 0 0 4px; }
.cfg .lead { color: var(--ink-muted); margin: 0 0 var(--space-4); }
.cfg .card { margin-bottom: var(--space-4); }
.cfg .body { padding: var(--space-3) var(--space-4); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 600; transition: background-color .15s ease-out, transform .15s ease-out; }
.btn:hover { background: var(--surface-raised); filter: none; }
.btn:active { transform: translateY(1px); }
.btn.pri { background: var(--amber); border-color: var(--amber); color: var(--on-amber); box-shadow: var(--shadow-1); }
.btn.pri:hover { background: var(--amber-strong); border-color: var(--amber-strong); }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn.dn { color: var(--down); }
.lista-conj .row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.lista-conj .row:first-child { border-top: 0; }
.lista-conj .nome { font-weight: 600; flex: 1; }
.lista-conj .qtd { color: var(--ink-faint); font-size: 12px; }
.pos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pos .colbox { background: var(--surface-sunken); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); min-height: 120px; padding: 8px; }
.pos .colbox h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; color: var(--ink-faint); text-transform: uppercase; }
.pos .chip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 10px; margin-bottom: 6px; cursor: grab; font-weight: 600; font-size: 12.5px; display: flex; justify-content: space-between; box-shadow: var(--shadow-1); }
.pos .chip.arrastando { opacity: .4; }
.pos .colbox.sobre { border-color: var(--amber); }
.gtab { width: 100%; border-collapse: collapse; }
.gtab th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); text-align: left; padding: 6px 6px; font-weight: 600; }
.gtab td { padding: 5px 6px; border-top: 1px solid var(--line); }
select, input[type=text] { font: inherit; font-size: 13px; background: var(--surface-sunken); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 8px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--amber); }
.wlist label { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.wlist label:first-child { border-top: 0; }
.salvar { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 10px 14px; display: flex; justify-content: flex-end; gap: 10px; align-items: center; margin: 0 -14px; }
.salvar .msg { margin-right: auto; color: var(--ink-muted); font-size: 12.5px; }

/* modal do seletor */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 50; }
.modal.aberto { display: flex; }
.modal .box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-5); width: min(820px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.modal .box header { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.modal .box header input[type=text] { flex: 1; }
.modal .corpo { display: grid; grid-template-columns: 1fr 260px; gap: 0; overflow: hidden; flex: 1; }
.modal .cat { overflow: auto; padding: 8px 12px; }
.modal .cat h5 { margin: 10px 0 4px; font-size: 11px; letter-spacing: .08em; color: var(--ink-faint); text-transform: uppercase; }
.modal .cat label { display: flex; gap: 8px; align-items: center; padding: 4px 2px; font-size: 13px; }
.modal .sel { border-left: 1px solid var(--line); padding: 8px 12px; overflow: auto; }
.modal .sel h5 { margin: 6px 0; font-size: 11px; letter-spacing: .08em; color: var(--ink-faint); text-transform: uppercase; }
.modal .sel .s { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 12.5px; border-top: 1px solid var(--line); }
.modal .sel .s button { background: none; border: 0; color: var(--ink-faint); cursor: pointer; }
.modal .sel .s:hover button { color: var(--down); }
.modal .box footer { padding: 10px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }

/* login */
.form { max-width: 380px; margin: 80px auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-3); padding: var(--space-6); }
.form .brand { font-size: 22px; }
.form input { width: 100%; padding: 10px 12px; margin: 6px 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-sunken); color: var(--ink); font-size: 15px; }
.form .erro { color: var(--down); font-size: 13px; margin-bottom: 10px; }

@media (max-width: 1100px) { .charts { grid-template-columns: repeat(2, 1fr); } .cols { grid-template-columns: minmax(0, 1fr); } .w-news .news { grid-template-columns: 1fr; } .w-news .news a:nth-child(odd) { border-right: 0; } .w-regime .regime .lista { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .charts { grid-template-columns: 1fr; } .tb td.h { display: none; } .tb td { padding-left: var(--space-3); padding-right: var(--space-3); } .tb td.n { min-width: 0; } .tb td.n > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .top { height: auto; flex-wrap: wrap; gap: 0 var(--space-2); padding: 0 var(--space-3); } .brand { order: 0; height: 48px; } .ferr { order: 1; margin-left: auto; height: 48px; } .nav { order: 2; flex-basis: 100%; padding-bottom: var(--space-2); } .conta .quem { display: none; } .brandbar { overflow-x: auto; scrollbar-width: none; } .status { display: none; } .brand { font-size: 16px; } .brand .cup { width: 20px; height: 20px; } .nav a { padding: 6px 10px; font-size: 13px; } .quem { display: none; } .regime .lista { grid-template-columns: 1fr; } .pos { grid-template-columns: 1fr; } }

/* ---------- 9. DIs Brasil ---------- */
.dis > h3 { align-items: flex-start; } .dis h3 .incl { display: block; font-weight: 450; letter-spacing: 0; text-transform: none; color: var(--ink-faint); font-size: 11.5px; margin-top: 3px; }
.dis h3 .incl b { color: var(--amber-text); }
.dis .abas button { background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink-muted); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer; margin-left: 4px; }
.dis .abas button.on { color: var(--amber-text); border-color: transparent; background: var(--amber-soft); }
.dis .corpo .cv, .dis .corpo.curva .cot { display: none; } .dis .corpo.curva .cv { display: block; padding: 10px 12px; }
.dis .comp { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.dis .comp select { font-size: 12px; padding: 4px 6px; }
.dis tr.cab th { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; text-align: right; padding: 4px 12px; }
.dis .todos { display: block; width: 100%; background: var(--surface-raised); border: 0; border-top: 1px solid var(--line); color: var(--ink-muted); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 9px; cursor: pointer; }
.dis .dicurva { width: 100%; height: auto; }

/* ---------- 10. Fear & Greed ---------- */
.fg2 { padding: var(--space-3) var(--space-4); }
.fg2 .gauge { width: 100%; max-width: 330px; height: auto; display: block; margin: 0 auto; }
.fg2 .hist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin-top: 10px; }
.fg2 .hi small { display: block; font-size: 11px; color: var(--ink-faint); }
.fg2 .hi > div { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dotted var(--line); padding: 4px 0; font-weight: 600; font-size: 13px; }
.fg2 .bol { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; background: var(--surface-raised); color: var(--ink); font-family: var(--mono); }
.fg2 .bol.medo { background: var(--down-soft); color: var(--down); } .fg2 .bol.ganancia { background: var(--up-soft); color: var(--up); }
.fg2 .quando { text-align: right; font-size: 11px; color: var(--ink-faint); margin-top: 8px; }

/* ---------- 11. Calendário ---------- */
.calf { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 8px var(--space-4); border-bottom: 1px solid var(--line); font-size: 12px; background: var(--surface-sunken); }
.calf .g { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.calf .g > span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-right: 2px; font-weight: 600; }
.calf label { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
.calf input { accent-color: var(--amber); }
.ajuda { padding: 8px var(--space-4) 10px; font-size: 12px; line-height: 1.5; color: var(--ink-faint); border-top: 1px dashed var(--line); }
.ajuda b { color: var(--ink-muted); font-weight: 600; }
.vivo { color: var(--up); font-weight: 600; }
.tb td.p { transition: background .9s ease; border-radius: 4px; }
.tb td.p.f-up { background: var(--up-soft); transition: none; }
.tb td.p.f-dn { background: var(--down-soft); transition: none; }
.tb td.p.f-up, .tb td.p.f-dn { animation: apaga 1.2s forwards; }
@keyframes apaga { to { background: transparent; } }
.cal > h3 { flex-wrap: wrap; gap: 8px; }
.ec-abas button { background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink-muted); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: none; padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; margin-left: 4px; }
.ec-abas button.on { color: var(--amber-text); border-color: transparent; background: var(--amber-soft); }
.ec-prox { padding: 9px var(--space-4); font-size: 13px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-prox .cont { color: var(--amber-text); font-family: var(--mono); }
.ec-i { display: inline-block; width: 14px; height: 11px; border-radius: 2px; vertical-align: middle; position: relative; }
.ec-i::before { content: ''; position: absolute; left: 0; top: -3px; width: 6px; height: 3px; border-radius: 2px 2px 0 0; background: inherit; }
.ec-i.i3 { background: #e8453c; } .ec-i.i2 { background: #f28c28; } .ec-i.i1 { background: #e6c229; } .ec-i.i0 { background: #8a8f98; }
.ec-tab { overflow: auto; max-height: 560px; }
.ec-tab table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ec-tab th { position: sticky; top: 0; background: var(--surface-raised); text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 7px 10px; font-weight: 600; z-index: 1; }
.ec-tab td { padding: 7px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
.ec-tab td.ev { white-space: normal; font-weight: 500; } .ec-tab td.d { color: var(--ink-muted); font-weight: 500; width: 90px; font-family: var(--mono); }
.ec-tab tr.nd td { border-top: 2px solid var(--line); }
.ec-tab tr.passou td { color: var(--ink-faint); } .ec-tab tr.passou td.ev { font-weight: 400; }
.ec-tab tr.prox td { background: var(--amber-soft); } .ec-tab tr.prox td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.ec-tab .breve { color: var(--amber-text); font-weight: 600; } .ec-tab .vazio { color: var(--ink-faint); padding: 18px; text-align: center; }
.ec-rod { padding: 8px var(--space-4); font-size: 11px; color: var(--ink-faint); border-top: 1px solid var(--line); }
.ec-f .g label { gap: 5px; }
.ec-toast { position: fixed; right: 18px; bottom: 18px; z-index: 80; background: var(--surface-raised); border: 1px solid var(--down); box-shadow: var(--shadow-4); border-radius: var(--radius-md); padding: 12px 16px; font-size: 13.5px; font-weight: 600; max-width: 420px; cursor: pointer; }
@media (max-width: 640px) { .ec-tab th:nth-child(6), .ec-tab td:nth-child(6), .ec-tab th:nth-child(7), .ec-tab td:nth-child(7) { display: none; } }
.ec-tab .src { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-left: 4px; font-weight: 600; }
.leitura { padding: 10px var(--space-4); font-size: 12.5px; line-height: 1.55; color: var(--ink-muted); border-top: 1px solid var(--line); }
.leitura b { color: var(--ink); font-weight: 600; } .leitura .lt { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-text); margin-bottom: 3px; font-weight: 600; }

/* ---------- 12. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- 13. Boas-vindas do Mercado (visitante, v59) ---------- */
.bv { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6) var(--space-8); align-items: center; padding: var(--space-8); margin-bottom: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-2); }
.bv[hidden] { display: none; }
.bv__eyebrow { margin: 0 0 var(--space-2); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-text); }
.bv h1 { margin: 0; font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -.02em; }
.bv__lead { margin: var(--space-3) 0 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); max-width: 56ch; }
.bv__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.bv__acoes .btn { height: 40px; padding: 0 var(--space-4); font-size: 14px; }
.bv__cards { display: flex; flex-direction: column; gap: var(--space-3); }
.bv__cards a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color .15s ease-out, background-color .15s ease-out; }
.bv__cards a:hover { border-color: var(--line-strong); background: var(--surface-raised); }
.bv__cards b { font-size: 15px; } .bv__cards b::after { content: " →"; color: var(--amber-text); }
.bv__cards span { font-size: 13.5px; line-height: 20px; color: var(--ink-muted); }
.bv__aviso { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--ink-faint); }
@media (max-width: 900px) { .bv { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-4); } .bv h1 { font-size: 28px; line-height: 34px; } }