/* BankRoll — style.css
   Mobile-first: o estilo base é o do celular; media queries só AMPLIAM para telas
   maiores. Testado mentalmente em 360px, 390px e 768px (seção 5.1). */

/* Transição suave entre páginas (Dashboard <-> Apostas etc.) via View Transitions
   API nativa do navegador — sem JS, degrada silenciosamente onde não há suporte
   (ex.: Safari ainda não suporta cross-document view transitions). */
@view-transition{
  navigation: auto;
}

:root{
  --bg:#0B1220;
  --surface:#111A2E;
  --surface-2:#16223C;
  --border:#22304F;
  --text:#E6EDF7;
  --text-dim:#8FA0BC;
  --green:#25D07A;
  --green-soft:#123626;
  --red:#F0564B;
  --red-soft:#3A1714;
  --gray:#6B7A93;
  --accent:#2E7DF6;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --radius:14px;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-display:'Fraunces',Georgia,serif;
  --tap:44px;
}

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

html{ font-size:16px; scrollbar-color:var(--surface-2) var(--bg); scrollbar-width:thin; } /* base 16px evita zoom automático do iOS nos inputs; scrollbar-color/-width = Firefox */

::selection{ background:rgba(37,208,122,.35); color:var(--text); }

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--surface-2); border-radius:8px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--border); }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(64px + env(safe-area-inset-bottom)); /* espaço pra bottom-nav no mobile */
}

a{ color:var(--accent); text-decoration:none; }
h1,h2,h3{ margin:0 0 4px; }
small{ color:var(--text-dim); }
.text-dim{ color:var(--text-dim); }
.text-green{ color:var(--green); }
.text-red{ color:var(--red); }

/* ---------------------------------------------------------------- topbar --- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(11,18,32,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  box-shadow:0 12px 30px -18px rgba(0,0,0,.7);
  padding-top:env(safe-area-inset-top);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; gap:12px;
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); }
.brand-mark-wrap{ position:relative; display:flex; align-items:center; justify-content:center; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.brand-mark-wrap::before{
  content:''; position:absolute; inset:-9px; border-radius:50%;
  background:radial-gradient(circle, rgba(37,208,122,.45), transparent 72%);
  filter:blur(7px); z-index:0; animation:authGlowPulse 4s ease-in-out infinite;
}
.brand-mark{ position:relative; z-index:1; width:40px; height:40px; display:block; filter:drop-shadow(0 2px 10px rgba(0,0,0,.4)); }
.brand-name{
  font-family:var(--font-display); font-weight:600; font-size:1.3rem; letter-spacing:-.01em;
  background:linear-gradient(135deg,#F3FBF7 10%,var(--green) 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-arrow{
  color:var(--green); opacity:0; transform:translate(-3px, 5px) scale(.75);
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
@media (hover:hover){
  .brand:hover .brand-mark-wrap{ transform:scale(1.08) rotate(-4deg); }
  .brand:hover .brand-arrow{ opacity:1; transform:translate(0,0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .brand-mark-wrap, .brand-arrow, .user-avatar{ transition:none; }
  .brand:hover .brand-mark-wrap{ transform:none; }
}

@media (min-width:600px){
  .brand-mark-wrap::before{ inset:-12px; }
  .brand-mark{ width:52px; height:52px; }
  .brand-name{ font-size:1.55rem; }
}
.top-links{ display:none; gap:4px; }
.top-links a{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--text-dim); padding:8px 14px; border-radius:10px; font-weight:600; font-size:.95rem;
  transition:background .18s ease, color .18s ease;
}
.top-links a svg{ opacity:.7; transition:opacity .18s ease, color .18s ease; }
.top-links a:hover{ color:var(--text); background:var(--surface-2); }
.top-links a:hover svg{ opacity:1; }
.top-links a.active{ color:var(--text); background:var(--surface-2); box-shadow:inset 0 -2px 0 var(--green); }
.top-links a.active svg{ opacity:1; color:var(--green); }
.topbar-right{ display:flex; align-items:center; gap:10px; }

.user-chip{
  display:flex; align-items:center; gap:8px; background:transparent; border:none;
  padding:4px 6px; margin:0; border-radius:10px; cursor:pointer; font-family:var(--font);
  min-height:var(--tap); transition:background .18s ease;
}
.user-chip:hover{ background:var(--surface-2); }
.user-avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--green));
  color:#0B1220; font-weight:800; font-size:.8rem; letter-spacing:.02em;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
@media (hover:hover){
  .user-chip:hover .user-avatar{ transform:scale(1.1); }
}
.user-name{ display:none; color:var(--text-dim); font-size:.9rem; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.hamburger{
  width:var(--tap); height:var(--tap);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:transparent; border:1px solid var(--border); border-radius:10px;
}
.hamburger span{ width:18px; height:2px; background:var(--text); border-radius:2px; }

.mobile-menu{
  display:flex; flex-direction:column;
  border-top:1px solid var(--border);
  background:var(--surface);
}
/* O atributo HTML "hidden" tem a mesma especificidade de ".mobile-menu" acima;
   sem esta regra o display:flex vence a cascata e o menu fica sempre visível. */
.mobile-menu[hidden]{ display:none; }
.mobile-menu a{
  padding:14px 16px; color:var(--text); border-bottom:1px solid var(--border);
  min-height:var(--tap); display:flex; align-items:center; font-weight:600;
}
.mobile-menu a.active{ color:var(--green); }

/* barra inferior fixa (mobile) */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; background:var(--surface); border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 4px; min-height:var(--tap); color:var(--text-dim); font-size:.72rem; font-weight:600;
}
.bottom-nav a.active{ color:var(--green); }

/* --------------------------------------------------------- page shell --- */
.page-content{ max-width:1100px; margin:0 auto; padding:16px; }
.page-head{ margin-bottom:16px; }
.page-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ------------------------------------------------------------- cards --- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow); margin-bottom:16px;
}
.card-head-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.card-title{ display:flex; align-items:center; gap:8px; }
.card-title svg{ color:var(--green); opacity:.85; flex-shrink:0; }
.link-more{
  display:inline-flex; align-items:center; gap:4px; font-size:.85rem; font-weight:600;
  min-height:var(--tap); padding:0 4px;
}
.link-more svg{ transition:transform .2s ease; }
@media (hover:hover){
  .link-more:hover svg{ transform:translateX(3px); }
}
@media (prefers-reduced-motion: reduce){
  .link-more svg{ transition:none; }
}

/* ------------------------------------------------------------- KPIs ----
   Mobile-first: 1 coluna. Amplia em telas maiores (seção 5.1). */
.kpi-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:12px; }
.kpi-card{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-left:3px solid transparent;
  border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:8px;
  box-shadow:var(--shadow); animation:authFadeUp .5s cubic-bezier(.16,1,.3,1) both;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:default;
}
.kpi-grid .kpi-card:nth-child(1){ animation-delay:.02s; }
.kpi-grid .kpi-card:nth-child(2){ animation-delay:.06s; }
.kpi-grid .kpi-card:nth-child(3){ animation-delay:.10s; }
.kpi-grid .kpi-card:nth-child(4){ animation-delay:.14s; }
.kpi-grid .kpi-card:nth-child(5){ animation-delay:.18s; }
.kpi-grid .kpi-card:nth-child(6){ animation-delay:.22s; }
.kpi-grid .kpi-card:nth-child(7){ animation-delay:.26s; }
.kpi-grid .kpi-card:nth-child(8){ animation-delay:.30s; }

/* Borda lateral reage ao estado real do KPI (verde/vermelho/neutro) */
.kpi-card:has(.kpi-value.positive){ border-left-color:var(--green); }
.kpi-card:has(.kpi-value.negative){ border-left-color:var(--red); }

.kpi-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kpi-label{ font-size:.8rem; color:var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:.02em; }
.kpi-icon{ color:var(--text-dim); opacity:.55; flex-shrink:0; transition:opacity .18s ease, color .18s ease; }
.kpi-card:has(.kpi-value.positive) .kpi-icon{ color:var(--green); }
.kpi-card:has(.kpi-value.negative) .kpi-icon{ color:var(--red); }
.kpi-value{ font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums; }
.kpi-value.positive{ color:var(--green); }
.kpi-value.negative{ color:var(--red); }

.page-head h1{ font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; }

.card{ animation:authFadeUp .5s cubic-bezier(.16,1,.3,1) both; transition:transform .18s ease, box-shadow .18s ease; }

.kpi-card:active{ transform:scale(.97); }

@media (hover:hover){
  .card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.45); }
  .kpi-card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.45); }
  .kpi-card:hover .kpi-icon{ opacity:1; }
  .kpi-card:has(.kpi-value.positive):hover{ box-shadow:0 18px 40px rgba(37,208,122,.22), 0 0 0 1px rgba(37,208,122,.25) inset; }
  .kpi-card:has(.kpi-value.negative):hover{ box-shadow:0 18px 40px rgba(240,86,75,.22), 0 0 0 1px rgba(240,86,75,.25) inset; }
}
@media (prefers-reduced-motion: reduce){
  .kpi-card, .card{ animation:none; }
  .kpi-card:hover, .card:hover, .kpi-card:active{ transform:none; }
}

.period-filter{ display:flex; gap:6px; flex-wrap:wrap; }
.period-btn{
  min-height:var(--tap); padding:0 16px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text-dim); font-family:var(--font); font-weight:700;
  font-size:.85rem; cursor:pointer;
}
.period-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

.kpi-breakdown{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }

.origin-compare{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.origin-col{
  display:flex; flex-direction:column; gap:4px; padding:14px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--border); border-left:3px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.origin-col:has(.kpi-value.positive){ border-left-color:var(--green); }
.origin-col:has(.kpi-value.negative){ border-left-color:var(--red); }
.origin-label{ font-size:.8rem; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.origin-col .kpi-value{ font-size:1.3rem; }
@media (hover:hover){
  .origin-col:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.35); }
}
.chip{
  padding:8px 14px; border-radius:999px; font-size:.85rem; background:var(--surface-2); border:1px solid var(--border);
  transition:background .18s ease, border-color .18s ease, transform .15s ease; cursor:default;
}
.chip-green{ color:var(--green); }
.chip-red{ color:var(--red); }
.chip-gray{ color:var(--gray); }

.chip:active{ transform:scale(.94); }
.chip-green:active{ background:var(--green-soft); border-color:var(--green); }
.chip-red:active{ background:var(--red-soft); border-color:var(--red); }
.chip-gray:active{ background:rgba(107,122,147,.18); border-color:var(--gray); }
@media (hover:hover){
  .chip-green:hover{ background:var(--green-soft); border-color:var(--green); transform:translateY(-1px); }
  .chip-red:hover{ background:var(--red-soft); border-color:var(--red); transform:translateY(-1px); }
  .chip-gray:hover{ background:rgba(107,122,147,.18); border-color:var(--gray); transform:translateY(-1px); }
}
@media (prefers-reduced-motion: reduce){
  .chip, .chip:hover, .chip:active{ transform:none; }
}

@media (min-width:600px){
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:900px){
  .kpi-grid{ grid-template-columns:repeat(4,1fr); }
  .charts-row{ grid-template-columns:2fr 1fr; }
}

/* ------------------------------------------------------------ alerts --- */
.alert{ padding:12px 14px; border-radius:10px; margin-bottom:14px; font-size:.9rem; }
.alert-red{ background:var(--red-soft); color:#ffb4ac; border:1px solid #5b241f; }
.alert-yellow{ background:#3a2f12; color:#f0c95b; border:1px solid #5b4a1f; }

/* ------------------------------------------------------------ charts ---
   Wrapper com altura definida + position:relative é exigido pelo Chart.js
   pra redimensionar corretamente (maintainAspectRatio:false no JS). */
.chart-main, .charts-row{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px; }
.chart-box{ position:relative; width:100%; height:260px; }
@media (min-width:900px){ .chart-box{ height:320px; } }

.legend-list{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.legend-list li{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text-dim); }
.legend-swatch{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }

/* --------------------------------------------------------- bet cards --- */
.bet-cards{ display:flex; flex-direction:column; gap:10px; }
.bet-card{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid transparent;
  border-radius:var(--radius); padding:14px; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bet-card:has(.tag-green){ border-left-color:var(--green); }
.bet-card:has(.tag-red){ border-left-color:var(--red); }
.bet-card:has(.tag-gray){ border-left-color:var(--gray); }
.bet-card:has(.tag-blue){ border-left-color:var(--accent); }
.bet-card:active{ transform:scale(.98); }
.bet-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.bet-card-top strong{ font-size:.98rem; }
.bet-card-meta{ display:flex; gap:10px; flex-wrap:wrap; color:var(--text-dim); font-size:.8rem; margin-bottom:8px; }
.bet-card-nums{ display:flex; gap:14px; flex-wrap:wrap; font-size:.9rem; font-weight:700; align-items:center; }
.bet-card-actions{ display:flex; gap:8px; margin-top:10px; }

/* Saltinho + brilho na cor do resultado ao passar o mouse (desktop). */
@media (hover:hover){
  .bet-card:hover{ transform:translateY(-3px); }
  .bet-card:has(.tag-green):hover{ box-shadow:0 14px 32px rgba(37,208,122,.2); }
  .bet-card:has(.tag-red):hover{ box-shadow:0 14px 32px rgba(240,86,75,.2); }
  .bet-card:has(.tag-gray):hover{ box-shadow:0 14px 32px rgba(107,122,147,.2); }
  .bet-card:has(.tag-blue):hover{ box-shadow:0 14px 32px rgba(46,125,246,.2); }
}
@media (prefers-reduced-motion: reduce){
  .bet-card, .bet-card:hover, .bet-card:active{ transform:none; }
}

/* A partir de ~700px o card vira uma única linha organizada, em vez de empilhado
   (empilhado faz sentido só em telas estreitas; numa tela larga a tag ficava
   "solta" longe do título). */
@media (min-width:700px){
  .bet-card{ display:flex; align-items:center; gap:20px; padding:14px 20px; }
  .bet-card-top{ justify-content:flex-start; margin-bottom:0; flex:1 1 260px; min-width:0; }
  .bet-card-top strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bet-card-meta{ margin-bottom:0; flex:0 0 auto; }
  .bet-card-nums{ flex:0 0 auto; margin-left:auto; }
  .bet-card-actions{ margin-top:0; flex:0 0 auto; }
}

.tag{ padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:700; }
.tag-green{ background:var(--green-soft); color:var(--green); }
.tag-red{ background:var(--red-soft); color:var(--red); }
.tag-gray{ background:var(--surface-2); color:var(--gray); }
.tag-blue{ background:#122a4a; color:var(--accent); }
.tag-cashout{ background:#3A2E11; border:1px dashed #FFC24D; color:#FFC24D; }

/* Tag de resultado clicável (edição rápida) + menu suspenso de opções. */
.tag-select{ font-family:var(--font); cursor:pointer; border:none; margin:0; -webkit-appearance:none; appearance:none; }
.tag-select:hover{ filter:brightness(1.15); }
.tag-select:active{ transform:scale(.93); }

.result-menu{
  position:absolute; z-index:150; display:flex; flex-direction:column; gap:2px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:6px; box-shadow:var(--shadow); min-width:120px;
}
.result-menu[hidden]{ display:none; }
.result-menu-item{
  border:none; background:transparent; text-align:left; padding:8px 12px; border-radius:8px;
  cursor:pointer; font-family:var(--font); font-weight:700; font-size:.85rem; min-height:36px;
}
.result-menu-item:hover{ background:var(--surface-2); }
.result-menu-item.tag-green{ color:var(--green); }
.result-menu-item.tag-red{ color:var(--red); }
.result-menu-item.tag-gray{ color:var(--gray); }
.result-menu-item.tag-blue{ color:var(--accent); }

.empty-state{
  color:var(--text-dim); text-align:center; padding:32px 16px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.empty-state[hidden]{ display:none; }
.empty-state-icon{ color:var(--text-dim); opacity:.5; margin-bottom:8px; }
.empty-state-title{ color:var(--text); font-weight:700; font-size:.95rem; margin:0; }
.empty-state-sub{ margin:0; font-size:.85rem; }

/* Tabela: só aparece no desktop (>=900px); no mobile usamos os cards acima. */
.table-wrap{ display:none; }
@media (min-width:900px){
  .apostas-cards{ display:none; }
  .table-wrap{ display:block; overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
  .bets-table{ width:100%; border-collapse:collapse; font-size:.87rem; }
  .bets-table th, .bets-table td{ padding:10px 10px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
  .bets-table th{ color:var(--text-dim); font-size:.75rem; text-transform:uppercase; letter-spacing:.02em; }
  .bets-table tbody tr{ transition:background .15s ease; }
  .bets-table tbody tr:hover{ background:var(--surface-2); }
  .bets-table td:first-child{ border-left:3px solid transparent; }
  .bets-table tbody tr:has(.tag-green) td:first-child{ border-left-color:var(--green); }
  .bets-table tbody tr:has(.tag-red) td:first-child{ border-left-color:var(--red); }
  .bets-table tbody tr:has(.tag-gray) td:first-child{ border-left-color:var(--gray); }
  .bets-table tbody tr:has(.tag-blue) td:first-child{ border-left-color:var(--accent); }
  /* Evento e Mercado são as colunas de texto livre: podem truncar em vez de forçar a tabela a esticar. */
  .bets-table td.col-event, .bets-table td.col-market{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px;
  }
  .bets-table td.col-actions{ display:flex; gap:6px; }
}

.icon-btn{
  width:34px; height:34px; min-height:0; padding:0; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); cursor:pointer;
}
.icon-btn:hover{ color:var(--text); }
.icon-btn.icon-btn-danger:hover{ color:var(--red); border-color:#5b241f; }

/* ----------------------------------------------------------- buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:0 18px; border-radius:10px; border:1px solid transparent;
  font-family:var(--font); font-weight:700; font-size:.95rem; cursor:pointer;
}
.btn-primary{ background:var(--accent); color:#fff; position:relative; overflow:hidden; }
.btn-primary::after{
  content:''; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
}
.btn-primary:hover::after{ transform:translateX(120%); transition:transform .7s ease; }
@media (prefers-reduced-motion: reduce){
  .btn-primary::after{ display:none; }
}
.btn-primary:active{ opacity:.85; }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--text); }
.btn-sm{ min-height:36px; padding:0 12px; font-size:.85rem; }
.btn-block{ width:100%; }
.btn-danger{ background:var(--red-soft); color:var(--red); border-color:#5b241f; }

/* Feedback de carregamento: esconde o texto e mostra um spinner girando por cima. */
.btn.is-loading{ color:transparent !important; pointer-events:none; position:relative; }
.btn.is-loading::after{
  content:''; position:absolute; top:50%; left:50%; width:18px; height:18px;
  margin:-9px 0 0 -9px; border-radius:50%; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; animation:btnSpin .6s linear infinite;
}
.btn-ghost.is-loading::after, .btn-danger.is-loading::after{
  border-color:rgba(230,237,247,.25); border-top-color:var(--text);
}
@keyframes btnSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn.is-loading::after{ animation:none; }
}

/* ------------------------------------------------------------- forms --- */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field span{ font-size:.85rem; color:var(--text-dim); font-weight:600; }
.field input, .field select{
  min-height:var(--tap); font-size:16px; /* evita zoom automático no iOS */
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:0 12px; color:var(--text); font-family:var(--font); width:100%;
}
.field input:focus, .field select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.input-wrap{ position:relative; display:flex; }
.input-wrap input{ padding-right:44px; }
.toggle-password{
  position:absolute; right:0; top:0; width:44px; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--text-dim); cursor:pointer; padding:0;
}
.toggle-password:hover{ color:var(--text); }
.toggle-password:active{ color:var(--green); }
.toggle-password .icon-eye-off{ display:none; }
.toggle-password.is-showing .icon-eye{ display:none; }
.toggle-password.is-showing .icon-eye-off{ display:block; }

.bets-toolbar{ display:flex; align-items:flex-end; gap:12px; margin-bottom:16px; flex-wrap:wrap; }

.bets-search{ position:relative; margin-bottom:12px; }
.bets-search-icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-dim); pointer-events:none; }
.bets-search input{
  width:100%; min-height:var(--tap); font-size:16px; padding:0 12px 0 40px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-family:var(--font);
}
.bets-search input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.field-inline{ margin-bottom:0; flex:1; min-width:140px; }
.field-inline select{ min-height:40px; }

.more-details{ margin-bottom:14px; }
.more-details summary{
  cursor:pointer; color:var(--accent); font-weight:700; font-size:.9rem;
  list-style:none; padding:10px 0; min-height:var(--tap); display:flex; align-items:center;
}
.more-details summary::-webkit-details-marker{ display:none; }
.more-details[open] summary{ color:var(--text-dim); }
.more-details .field{ margin-top:4px; }

/* --------------------------------------------------------- auth pages ---
   Tratamento "private banking / trading terminal": fundo atmosférico com
   glow + linha de gráfico sutil, cartão em glassmorphism com textura de grão,
   e entrada em cascata (logo → título → campos → botão). */
body.auth-page{
  background:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(37,208,122,.10), transparent 60%),
    radial-gradient(ellipse 800px 500px at 105% 105%, rgba(46,125,246,.12), transparent 60%),
    var(--bg);
  overflow-x:hidden;
}

.auth-wrap{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px; overflow:hidden;
}

.auth-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.auth-glow{ position:absolute; border-radius:50%; filter:blur(70px); animation:authGlowPulse 7s ease-in-out infinite; }
.auth-glow-green{ width:340px; height:340px; left:-90px; top:-60px; background:rgba(37,208,122,.35); }
.auth-glow-blue{ width:380px; height:380px; right:-110px; bottom:-90px; background:rgba(46,125,246,.28); animation-delay:-3.5s; }

.auth-chart-line{ position:absolute; inset:0; width:100%; height:100%; opacity:.16; }
.auth-chart-line path{
  fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1400; stroke-dashoffset:1400; animation:authLineDraw 5s ease-out .2s forwards;
}

.auth-card{
  position:relative; z-index:1; width:100%; max-width:400px;
  background:rgba(17,26,46,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(143,160,188,.16); border-radius:calc(var(--radius) + 4px);
  padding:32px 24px 26px; box-shadow:0 20px 60px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04) inset;
  overflow:hidden;
  animation:authFadeUp .6s cubic-bezier(.16,1,.3,1) both;
}
.auth-card::before{
  /* textura de grão sutil, evita o cartão parecer um gradiente liso demais */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.auth-brand{ position:relative; display:flex; justify-content:center; margin-bottom:10px; animation:authFadeUp .6s cubic-bezier(.16,1,.3,1) .05s both; }
.auth-logo-mark{
  position:relative; width:112px; height:112px;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.4));
}
.auth-logo-glow{
  position:absolute; width:150px; height:150px; left:50%; top:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(37,208,122,.5), transparent 70%); filter:blur(22px);
  animation:authGlowPulse 3.4s ease-in-out infinite;
}

.auth-title{
  font-family:var(--font-display); font-weight:600; font-size:1.9rem; text-align:center;
  letter-spacing:-.01em; margin:0 0 6px; background:linear-gradient(135deg,#F3FBF7 20%,var(--green) 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:authFadeUp .6s cubic-bezier(.16,1,.3,1) .1s both;
}
.auth-sub{
  color:var(--text-dim); font-size:.9rem; margin-bottom:22px; text-align:center;
  animation:authFadeUp .6s cubic-bezier(.16,1,.3,1) .15s both;
}
.auth-alt{ text-align:center; font-size:.9rem; color:var(--text-dim); margin-top:8px; }

.auth-form > .field{ animation:authFadeUp .55s cubic-bezier(.16,1,.3,1) both; }
.auth-form > .field:nth-of-type(1){ animation-delay:.2s; }
.auth-form > .field:nth-of-type(2){ animation-delay:.26s; }
.auth-form > .field:nth-of-type(3){ animation-delay:.32s; }
.auth-form > .field:nth-of-type(4){ animation-delay:.38s; }
.auth-form > .btn{ animation:authFadeUp .55s cubic-bezier(.16,1,.3,1) .44s both; }

.auth-form .field input:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(37,208,122,.18);
}

@media (prefers-reduced-motion: reduce){
  .auth-glow, .auth-chart-line path, .auth-logo-glow, .auth-card, .auth-brand,
  .auth-title, .auth-sub, .auth-form > .field, .auth-form > .btn, .auth-form .btn-primary::after{
    animation:none !important; transition:none !important;
  }
  .auth-chart-line path{ stroke-dashoffset:0; }
}

@keyframes authFadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes authGlowPulse{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.08); } }
@keyframes authLineDraw{ to{ stroke-dashoffset:0; } }

@media (min-width:600px){
  .auth-card{ padding:40px 36px 32px; }
  .auth-logo-mark{ width:128px; height:128px; }
  .auth-title{ font-size:2.1rem; }
}

/* -------------------------------------------------------------- modal --- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(4,8,16,.7); z-index:50;
  display:flex; align-items:flex-end; justify-content:center;
}
.modal-backdrop[hidden]{ display:none; }
.modal{
  width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
}
@media (min-width:600px){
  .modal-backdrop{ align-items:center; }
  .modal{ border-radius:var(--radius); }
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.modal-close{
  width:var(--tap); height:var(--tap); background:transparent; border:none; color:var(--text-dim);
  font-size:1.6rem; line-height:1; cursor:pointer;
}

/* ---------------------------------------------------- toast + confirm ---
   Substituem alert()/confirm() nativos do navegador (ver assets/js/app.js). */
.toast-container{
  position:fixed; top:calc(16px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  z-index:200; display:flex; flex-direction:column; gap:8px; width:calc(100% - 32px); max-width:380px;
  pointer-events:none;
}
.toast{
  pointer-events:auto; background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:12px 16px; box-shadow:var(--shadow); font-size:.9rem; color:var(--text);
  opacity:0; transform:translateY(-10px); transition:opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast-error{ border-color:#5b241f; background:var(--red-soft); color:#ffb4ac; }
.toast-success{ border-color:#1c5c3c; background:var(--green-soft); color:#8CEFC0; }

.confirm-backdrop{ z-index:210; }
.confirm-modal{ max-width:360px; text-align:center; }
.confirm-message{ margin:4px 0 20px; color:var(--text); font-size:.95rem; }
.confirm-actions{ display:flex; gap:10px; }
.confirm-actions .btn{ flex:1; }

/* ------------------------------------------------------- skeleton ------ */
@keyframes skeletonShimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }
.skeleton{
  color:transparent !important; border-radius:6px; min-width:60px; display:inline-block;
  background:linear-gradient(90deg, var(--surface-2) 25%, rgba(255,255,255,.06) 50%, var(--surface-2) 75%);
  background-size:200% 100%; animation:skeletonShimmer 1.4s ease-in-out infinite;
}
.chart-box.loading::before{
  content:''; position:absolute; inset:0; border-radius:10px; z-index:1;
  background:linear-gradient(90deg, var(--surface-2) 25%, rgba(255,255,255,.06) 50%, var(--surface-2) 75%);
  background-size:200% 100%; animation:skeletonShimmer 1.4s ease-in-out infinite;
}
.bet-card.skeleton-card{
  height:96px;
  background:linear-gradient(90deg, var(--surface-2) 25%, rgba(255,255,255,.05) 50%, var(--surface-2) 75%);
  background-size:200% 100%; animation:skeletonShimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .skeleton, .chart-box.loading::before, .bet-card.skeleton-card{ animation:none; }
}

/* --------------------------------------------------------------- footer --- */
.app-footer{ margin-top:24px; border-top:1px solid var(--border); padding:0 16px; }
.app-footer-inner{
  max-width:1100px; margin:0 auto; padding:28px 0 calc(28px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.footer-brand{ display:flex; align-items:center; gap:10px; color:var(--text); }
.footer-mark-wrap{ position:relative; display:flex; align-items:center; justify-content:center; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.footer-mark-wrap::before{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  background:radial-gradient(circle, rgba(37,208,122,.4), transparent 72%);
  filter:blur(7px); z-index:0; animation:authGlowPulse 4s ease-in-out infinite;
}
.footer-mark{
  position:relative; z-index:1; width:36px; height:36px; display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.footer-name{
  font-family:var(--font-display); font-weight:600; font-size:1.35rem; letter-spacing:-.01em;
  background:linear-gradient(135deg,#F3FBF7 10%,var(--green) 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.footer-arrow{
  color:var(--green); opacity:0; transform:translate(-3px,5px) scale(.75);
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
@media (hover:hover){
  .footer-brand:hover .footer-mark-wrap{ transform:scale(1.08) rotate(-4deg); }
  .footer-brand:hover .footer-arrow{ opacity:1; transform:translate(0,0) scale(1); }
}
.footer-copyright{ margin:0; color:var(--text-dim); font-size:.82rem; }

@media (min-width:600px){
  .app-footer-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; text-align:left; }
  .footer-brand{ grid-column:1; justify-self:start; }
  .footer-copyright{ grid-column:2; justify-self:center; }
}
@media (prefers-reduced-motion: reduce){
  .footer-mark-wrap, .footer-arrow{ transition:none; }
  .footer-brand:hover .footer-mark-wrap{ transform:none; }
}

/* --------------------------------------------------------- >=600px --- */
@media (min-width:600px){
  .top-links{ display:flex; }
  .user-name{ display:inline; }
  .hamburger{ display:none; }
  .bottom-nav{ display:none; }
  body{ padding-bottom:0; }
  .field-row{ grid-template-columns:1fr 1fr; }
}