:root {
  --bg: #0c0f13;
  --screen-bg: #0f1319;
  --surface: #191f27;
  --surface-2: #212a34;
  --border: #2a333f;
  --text: #f2f5f8;
  --text-dim: #93a1b0;
  --accent: #c8ff3d;
  --accent-ink: #16210a;
  --tabbar-bg: rgba(18,23,30,.96);
  --live: #ff4d4d;

  --slam: #f4c430;
  --masters: #4aa3ff;
  --wta1000: #ff6fb5;
  --finais: #b98cff;
  --exib: #ff8a3d;

  --atp: #3d8bfd;   /* ATP (masculino) */
  --wta: #ff5ca8;   /* WTA (feminino) */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tabbar-h: 62px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 600px at 50% -10%, #1b2430 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Palco (desktop) */
.stage {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 28px 16px;
}
.stage-caption { text-align: center; max-width: 380px; color: var(--text-dim); }
.stage-caption h1 { color: var(--text); font-size: 1.15rem; margin: 0 0 4px; letter-spacing: -.02em; }
.stage-caption p { margin: 0; font-size: .82rem; line-height: 1.5; }
.stage-caption code { background: var(--surface); padding: 1px 5px; border-radius: 5px; font-size: .78rem; }
.stage-note p { font-size: .74rem; }

/* Moldura do telefone */
.phone {
  position: relative;
  width: 390px; height: 780px; max-height: calc(100vh - 40px);
  background: #05070a;
  border-radius: 46px;
  padding: 10px;
  box-shadow: 0 0 0 2px #2c333c, 0 24px 60px rgba(0,0,0,.55);
}
.phone-notch {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 128px; height: 30px; background: #05070a; border-radius: 0 0 18px 18px; z-index: 30;
}
.phone-screen {
  position: relative; width: 100%; height: 100%;
  background: var(--screen-bg); color: var(--text); border-radius: 38px; overflow: hidden;
  display: flex; flex-direction: column;
}

.statusbar {
  height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; font-size: .78rem; font-weight: 600; color: var(--text);
}
.sb-icons { letter-spacing: 2px; font-size: .7rem; }

/* Telas */
.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.screen.hidden, .hidden { display: none !important; }

.screen-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 18px 10px;
}
.screen-head h2 { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; }
.icon-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  width: 38px; height: 38px; border-radius: 50%; font-size: 1rem; cursor: pointer;
  display: grid; place-items: center;
}

.search-wrap { padding: 0 18px 8px; }
.search-wrap input {
  width: 100%; padding: 10px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: .95rem;
}

/* Segmented (escopo Todos / Meu calendário) */
.segmented {
  display: flex; gap: 4px; margin: 0 18px 10px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.seg {
  flex: 1; border: none; background: none; color: var(--text-dim); cursor: pointer;
  padding: 8px 6px; border-radius: 9px; font-size: .84rem; font-weight: 700;
}
.seg.active { background: var(--accent); color: var(--accent-ink); }

/* Filtro de tour ATP/WTA/ITF */
.tour-seg { display: flex; gap: 6px; padding: 0 18px 12px; }
.tseg {
  flex: 1; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
  padding: 6px; border-radius: 999px; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.tseg.active { background: var(--surface-2); color: var(--accent); border-color: var(--accent); }

/* Barra de filtros (abre o painel Airbnb-style) */
.filterbar { display: flex; align-items: center; gap: 8px; padding: 0 18px 12px; overflow-x: auto; scrollbar-width: none; }
.filterbar::-webkit-scrollbar { display: none; }
.filtros-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--text-dim); background: transparent; color: var(--text);
  padding: 9px 16px; border-radius: 999px; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.fcount { background: var(--accent); color: var(--accent-ink); border-radius: 999px; min-width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: .68rem; padding: 0 5px; }
.applied-pills { display: flex; gap: 6px; }
.apill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  padding: 6px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; cursor: pointer;
}
.apill .x { color: var(--text-dim); font-weight: 800; }

/* Rodapé fixo do sheet + limpar */
.sheet-foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.sheet-clear { background: none; border: none; color: var(--accent); font-weight: 700; font-size: .9rem; cursor: pointer; text-decoration: underline; }

/* Grupos de filtro multi-seleção */
.fgroup-title { font-size: .95rem; font-weight: 800; margin: 6px 0 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.fgroup-title:first-child { border-top: none; padding-top: 6px; }
.fchips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.fchip {
  border: 1px solid var(--border); background: transparent; color: var(--text);
  padding: 9px 17px; border-radius: 999px; font-size: .86rem; font-weight: 600; cursor: pointer;
}
.fchip.sel { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }

/* ===== Ranking ===== */
.rank-note { font-size: .74rem; color: var(--exib); background: rgba(255,138,61,.08); border: 1px solid rgba(255,138,61,.25); border-radius: 10px; padding: 8px 10px; margin: 4px 0 10px; }
.rank-updated { font-size: .74rem; color: var(--text-dim); margin: 4px 0 10px; }
.rank-thead { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; padding: 8px 8px 6px; font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); }
.rank-thead span:last-child { text-align: right; }
.rank-card { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.rank-row { display: grid; grid-template-columns: 40px 44px 1fr auto auto; align-items: center; gap: 12px; padding: 13px 12px; border-bottom: 1px solid var(--border); }
.rank-heart { background: none; border: none; cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 4px; color: var(--text-dim); flex: 0 0 auto; }
.rank-heart.on { color: var(--live); }
.rank-row:last-child { border-bottom: none; }
.rank-posgroup { text-align: center; }
.rank-pos { font-weight: 800; font-size: 1.15rem; }
.rank-mov { font-size: .68rem; font-weight: 800; min-height: 1em; }
.rank-mov.up { color: #35d07f; }
.rank-mov.down { color: var(--live); }
.rank-mov.same { color: var(--text-dim); }
.rank-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-weight: 800; font-size: .76rem; color: var(--text-dim); overflow: hidden; }
.rank-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rank-main { min-width: 0; display: flex; align-items: center; gap: 8px; }
.rank-flag { font-size: 1.15rem; }
.rank-name { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-pts { text-align: right; }
.rank-pts b { font-weight: 800; font-size: .95rem; }
.rank-pts span { display: block; font-size: .68rem; color: var(--text-dim); }
.share-outline { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 16px; padding: 14px; font-weight: 700; font-size: .92rem; cursor: pointer; margin: 2px 0 12px; }
.share-outline svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Chips roláveis */
.chips-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 18px 12px; scrollbar-width: none;
}
.chips-row::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; border: 1px solid var(--border); background: transparent; color: var(--text);
  padding: 9px 16px; border-radius: 999px; font-size: .84rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }

/* Área rolável */
.scroll-area { flex: 1; overflow-y: auto; padding: 0 18px calc(var(--tabbar-h) + 30px); -webkit-overflow-scrolling: touch; }
.scroll-area::-webkit-scrollbar { width: 0; }

/* Destaque (próximo / ao vivo) */
.dq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dq-head .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: var(--text-dim); }
.dq-count { font-size: .72rem; color: var(--text-dim); font-weight: 700; }
.destaque {
  background: linear-gradient(150deg, #10161d, #0a0e13);
  border: 1px solid var(--border); border-radius: 20px; padding: 16px; margin-bottom: 8px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 6px;
}
.destaque.live { border-color: var(--accent); }
.dq-ball { position: absolute; right: -26px; top: 50%; transform: translateY(-44%); width: 150px; height: 150px; opacity: .95; pointer-events: none; filter: drop-shadow(0 0 22px rgba(200,255,61,.25)); }
.dq-body, .dq-arrow { position: relative; z-index: 1; }
.dq-head .lbl-live { color: var(--accent); }
.dq-body { flex: 1; min-width: 0; cursor: pointer; }
.dq-arrow {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(0,0,0,.22); color: var(--text);
  font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.dq-arrow:disabled { opacity: .3; cursor: default; }
.dq-dates { font-weight: 700; color: var(--text); margin-top: 2px; }
.dq-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.dq-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.dq-dot.on { background: var(--accent); }

.enc-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; border-top: 1px solid var(--border);
  color: var(--text-dim); font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  padding: 14px 2px 12px; margin-top: 8px; cursor: pointer;
}
.enc-chev { transition: transform .2s ease; display: inline-block; }
.enc-header.open .enc-chev { transform: rotate(90deg); }
.enc-list { display: none; }
.enc-list.open { display: block; }

.list-head-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; }
.ordem-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 5px 12px; font-size: .74rem; font-weight: 700; cursor: pointer; }
.ordem-btn:hover { color: var(--text); }
.destaque .flag { font-size: 1.5rem; }
.destaque .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: var(--text-dim); }
.destaque.live .lbl { color: var(--live); }
.destaque .nome { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 2px; }
.destaque .sub { font-size: .82rem; color: var(--text-dim); }
.destaque .cd {
  display: inline-flex; align-items: baseline; gap: 6px; margin-top: 12px;
  background: rgba(0,0,0,.25); padding: 6px 12px; border-radius: 10px;
}
.destaque .cd b { font-size: 1.5rem; color: var(--accent); line-height: 1; }
.destaque.live .cd b { color: var(--accent); }
.destaque .cd span { font-size: .74rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }

.list-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 700; margin: 4px 0 8px; }

/* Linhas compactas */
.row {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.row:active { background: var(--surface); }
.row .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.row .row-main { flex: 1; min-width: 0; }
.row .row-name { font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .row-sub { font-size: .78rem; color: var(--text-dim); margin-top: 1px; }
.row .row-when { font-size: .74rem; color: var(--text-dim); text-align: right; flex: 0 0 auto; }
.rbadge { display: inline-block; font-size: .62rem; font-weight: 800; padding: 2px 7px; border-radius: 5px; margin-right: 6px; vertical-align: middle; letter-spacing: .02em; }
.rb-atp { background: #2563eb; color: #fff; }
.rb-wta { background: #7c3aed; color: #fff; }
.rb-slam { background: #1d4ed8; color: #fff; }
.rb-itf { background: #14b8a6; color: #04231b; }
.rb-exib { background: #ff8a3d; color: #221000; }
.row-watch { font-size: .74rem; color: var(--text-dim); margin-top: 2px; }
.row-when.on { color: var(--accent); font-weight: 700; }
.row .row-heart { background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: 4px 2px; flex: 0 0 auto; color: var(--text-dim); }
.row .row-heart.on { color: var(--live); }
.row .chev { color: var(--text-dim); font-size: .9rem; flex: 0 0 auto; }
.row.is-live .row-name::after { content: "AO VIVO"; margin-left: 8px; font-size: .6rem; background: var(--live); color: #fff; padding: 1px 6px; border-radius: 999px; vertical-align: middle; letter-spacing: .05em; }

/* ============ REDESIGN HOME (mockups) ============ */
/* Headline */
.page-title.home-title { font-size: .72rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; margin: 2px 18px 14px; white-space: nowrap; color: var(--text-dim); }
.home-title .ht-accent { color: var(--accent); font-weight: 700; }

/* Chips com ícone */
.chip { display: inline-flex; align-items: center; }
.chip-ico { margin-right: 6px; font-size: .92rem; line-height: 1; }
.chip-ico:empty { display: none; }

/* Linhas de torneio com badge de data */
.trow { display: flex; align-items: center; gap: 11px; padding: 11px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.trow:active { background: var(--surface); }
.tdate { flex: 0 0 auto; width: 46px; height: 48px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.tdate b { font-size: 1.08rem; font-weight: 800; }
.tdate span { font-size: .56rem; font-weight: 800; letter-spacing: .1em; color: var(--text-dim); margin-top: 3px; }
.tdate.live { border-color: var(--accent); background: rgba(200,255,61,.12); }
.tdate.live b { color: var(--accent); }
.trow-main { flex: 1; min-width: 0; }
.trow-name { font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tflag { font-size: .9rem; }
.trow-sub { font-size: .76rem; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow-end { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.trow-status { font-size: .58rem; font-weight: 800; letter-spacing: .05em; padding: 4px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.trow-status.live { background: rgba(255,77,77,.16); color: var(--live); }
.trow-status.soon { background: var(--surface-2); color: var(--text-dim); }
.trow-status.past { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.trow-status.tbd { background: transparent; color: var(--text-dim); }
.lpulse { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: lpulse 1.2s infinite; }
@keyframes lpulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.trow-heart { background: none; border: none; cursor: pointer; font-size: 1.05rem; padding: 0; color: var(--text-dim); line-height: 1; }
.trow-heart.on { color: var(--live); }
.trow .chev { color: var(--text-dim); font-size: .95rem; flex: 0 0 auto; }

/* Card SEU PROGRESSO */
.prog-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 800; margin: 16px 0 8px; }
.prog-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; }
.prog-ring { position: relative; flex: 0 0 auto; width: 62px; height: 62px; display: grid; place-items: center; }
.prog-ring .ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 6; }
.prog-ring .ring-fg { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .7s ease; }
.prog-pct { position: absolute; font-size: .86rem; font-weight: 800; }
.prog-info { flex: 1; min-width: 0; }
.prog-title { font-size: .92rem; font-weight: 800; }
.prog-metric { font-size: .8rem; color: var(--text-dim); margin-top: 2px; }
.prog-metric b { color: var(--accent); font-size: .95rem; }
.prog-sub { font-size: .72rem; color: var(--text-dim); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-spark { flex: 0 0 auto; width: 104px; height: 44px; }
.prog-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.prog-spark circle { fill: var(--accent); }

/* ============ REFINO v2: banner + chips + números ============ */
/* Chips: ícone de linha monocromático + número do tier sutil */
.chip { padding: 9px 15px; }
.chip .ci { width: 15px; height: 15px; margin-right: 7px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linejoin: round; stroke-linecap: round; flex: 0 0 auto; vertical-align: -2px; }
.chip .chip-lbl { display: inline; }
.chip-num { opacity: .5; font-weight: 700; margin-left: 2px; }
.chip.active .chip-num { opacity: .68; }

/* Banner: cabeçalho dentro do card, ícones de linha, pílula AGORA */
.dq-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dq-top .lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--text-dim); }
.destaque .dq-top .lbl-live { color: var(--accent); }
.dq-top .dq-count { font-size: .72rem; color: var(--text-dim); font-weight: 800; }
.destaque .nome { margin-bottom: 8px; }
.destaque .sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.dqi { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.destaque .cd { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; background: none; padding: 0; border-radius: 0; }
.destaque .cd .cd-pill { background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .95rem;
  padding: 7px 16px; border-radius: 999px; line-height: 1; }
.destaque .cd .cd-lbl { font-size: .68rem; font-weight: 800; letter-spacing: .09em; color: var(--text-dim); text-transform: uppercase; }
.destaque.live .cd .cd-lbl { color: rgba(240,244,249,.82); }
/* setas do carrossel */
.dq-arrow.next { right: 12px; width: 38px; height: 38px; font-size: 1.4rem; background: rgba(10,13,17,.5); border-color: rgba(255,255,255,.16); }
.dq-arrow.prev { left: 12px; width: 38px; height: 38px; font-size: 1.4rem; background: rgba(10,13,17,.5); border-color: rgba(255,255,255,.16); }
/* título do banner: SEMPRE em 1 linha (como a referência); corta com reticências */
.destaque .nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.15rem; }
.destaque .dq-body { max-width: 85%; }
/* setas nos dois lados: recua só as linhas do meio (local/data e pílula), o título fica cheio */
.destaque.nav2 .dq-body .sub,
.destaque.nav2 .dq-body .cd { margin-left: 42px; }
.destaque .cd .cd-lbl { white-space: nowrap; }

/* Detalhe */
.detail-panel {
  position: absolute; inset: 0; background: var(--screen-bg); z-index: 20;
  display: flex; flex-direction: column; animation: slideIn .22s ease;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.detail-back {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--accent); font-size: .95rem; font-weight: 600; cursor: pointer; padding: 12px 18px 8px;
}
.detail-hero { padding: 4px 18px 14px; }
.detail-hero .flag { font-size: 2.2rem; }
.detail-hero h2 { margin: 6px 0 2px; font-size: 1.5rem; letter-spacing: -.02em; }
.detail-hero .loc { color: var(--text-dim); font-size: .9rem; }
.detail-actions { display: flex; gap: 10px; margin-top: 14px; }
.act-btn {
  flex: 1; padding: 10px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 700; font-size: .85rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.act-btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.act-btn.bell.on { background: var(--surface-2); color: var(--accent); border-color: var(--accent); }

.detail-grid { padding: 6px 18px; }
.drow { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.drow .k { color: var(--text-dim); font-size: .88rem; }
.drow .v { font-weight: 700; font-size: .9rem; text-align: right; }
.drow .v.dim { color: var(--text-dim); font-weight: 500; font-style: italic; }
.dlink { color: var(--accent); text-decoration: none; font-weight: 700; }

/* Onde assistir — bloco destacado */
.watch-block { margin: 14px 18px 2px; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--surface); }
.watch-block.on { border-color: var(--accent); background: rgba(200,255,61,.06); }
.watch-head { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 8px; }
.watch-pais { color: var(--text-dim); font-weight: 600; }
.watch-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.watch-chip { background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .82rem; padding: 6px 12px; border-radius: 999px; }
.watch-todo { font-size: .85rem; color: var(--text-dim); }
.lm-watch { font-size: .82rem; font-weight: 700; color: var(--accent); margin-top: 10px; }
.lm-watch.dim { color: var(--text-dim); font-weight: 500; }

/* Seções ricas do detalhe */
.detail-section { padding: 8px 18px 4px; }
.section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 800; margin: 14px 0 8px; }
.historia-txt { font-size: .9rem; line-height: 1.55; color: var(--text); }
.hl-list { list-style: none; margin: 0; padding: 0; }
.hl-list li { display: flex; gap: 9px; padding: 6px 0; font-size: .88rem; align-items: flex-start; }
.hl-list li::before { content: "🎾"; font-size: .8rem; flex: 0 0 auto; }
.champ-list { display: flex; flex-direction: column; gap: 0; }
.champ-row { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: center; }
.champ-row .ano { font-weight: 800; color: var(--accent); font-size: .95rem; }
.champ-row .who { font-size: .86rem; }
.champ-row .who .lbl { color: var(--text-dim); font-size: .74rem; }
.champ-row .who .nm { font-weight: 700; }
.placeholder-note { font-size: .82rem; color: var(--text-dim); font-style: italic; padding: 4px 0 8px; }

/* Chave / jogos / qualifying */
.qual-label { font-size: .74rem; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin: 6px 0; }
.phase-title { font-weight: 800; font-size: .82rem; margin: 12px 0 6px; }
.match { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.mp { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--text-dim); }
.mp.win { color: var(--text); font-weight: 700; }
.mname { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msets { display: flex; gap: 6px; flex: 0 0 auto; }
.mset { min-width: 18px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--text-dim); }
.mset.w { color: var(--text); font-weight: 800; }
.mtag { margin-top: 5px; }
.mt.live { color: var(--live); font-weight: 800; font-size: .66rem; letter-spacing: .04em; }
.mt.sched { color: var(--text-dim); font-size: .72rem; }
.badge {
  display: inline-block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; color: #10151a;
}
.b-slam { background: var(--slam); } .b-masters { background: var(--masters); }
.b-wta1000 { background: var(--wta1000); } .b-finais { background: var(--finais); } .b-exib { background: var(--exib); }
.b-atp250 { background: #5ad1b0; }

/* Diferenciação ATP × WTA (cor por tour) */
.tour-atp { background: var(--atp) !important; color: #04122b !important; }
.tour-wta { background: var(--wta) !important; color: #2b0417 !important; }
.tour-mixed { background: linear-gradient(90deg, var(--atp), var(--wta)) !important; color: #fff !important; }
.tour-itf { background: #5ad1b0 !important; color: #04231b !important; }
.tour-tag { display: inline-block; font-size: .6rem; font-weight: 800; letter-spacing: .02em; padding: 2px 6px; border-radius: 5px; margin-right: 7px; vertical-align: middle; }
/* segmented do ranking (trilho, ativo em accent — referência) */
.rank-seg { display: flex; gap: 4px; margin: 0 18px 10px; padding: 4px; border: 1px solid var(--border); border-radius: 16px; }
.rank-seg .tseg { flex: 1; border: none; background: transparent; color: var(--text-dim); padding: 10px; border-radius: 12px; font-size: .92rem; font-weight: 700; cursor: pointer; }
.rank-seg .tseg.active { background: var(--accent); color: var(--accent-ink); }

/* Partida ao vivo (tela Ao vivo) */
.livematch { background: var(--surface); border: 1px solid var(--live); border-radius: 16px; padding: 14px; margin-bottom: 16px; }
.lm-tag { color: var(--live); font-weight: 800; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.lm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; }
.lm-name { font-size: 1rem; font-weight: 700; }
.serving { font-size: .7rem; }
.stats-btn { width: 100%; margin-top: 12px; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 12px; padding: 12px; font-weight: 800; font-size: .9rem; cursor: pointer; }

/* Painel de estatísticas */
.stats-scorebox { padding: 4px 18px 6px; }
.stat-row { padding: 8px 0; }
.stat-vals { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .86rem; }
.stat-vals .sv { font-weight: 800; min-width: 44px; }
.stat-vals .sv:last-child { text-align: right; }
.stat-label { color: var(--text-dim); font-size: .78rem; text-align: center; flex: 1; }
.stat-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; margin-top: 5px; background: var(--border); }
.sb-a { background: var(--accent); }
.sb-b { background: var(--masters); }
.stat-row.blurred { filter: blur(4px); opacity: .5; }
.stats-lock { position: relative; }
.insider-live { width: 100%; text-align: left; background: linear-gradient(150deg, var(--surface-2), var(--surface)); border: 1px solid var(--live); color: var(--text); border-radius: 14px; padding: 14px; font-weight: 700; font-size: .92rem; cursor: pointer; margin-bottom: 10px; }

/* Compartilhar cartão */
#share-panel { z-index: 30; } /* acima do detalhe (é aberto por cima dele) */
.share-cta { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 12px; font-weight: 700; font-size: .9rem; cursor: pointer; margin-top: 12px; }
.share-cta:hover { border-color: var(--accent); }
.share-preview { padding: 4px 18px 12px; }
.share-preview canvas { width: 100%; max-width: 300px; height: auto; display: block; margin: 8px auto; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.share-actions { display: flex; flex-direction: column; gap: 10px; padding: 0 18px; }

/* Ao vivo */
.live-hero {
  border: 1px solid var(--border); border-radius: 18px; padding: 18px; text-align: center;
  background: linear-gradient(150deg, var(--surface-2), var(--surface)); margin-bottom: 16px;
}
.live-hero.on { border-color: var(--live); }
.live-hero .tag { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.live-hero.on .tag { color: var(--live); }
.live-hero .big { font-size: 1.35rem; font-weight: 800; margin: 8px 0 4px; }
.live-hero .cd-big { font-size: 2.6rem; font-weight: 800; color: var(--accent); letter-spacing: -.03em; }
.live-hero .cd-lbl { font-size: .78rem; color: var(--text-dim); }

.mock-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 700; margin: 20px 0 10px; }
.lockscreen {
  border-radius: 16px; padding: 14px 16px; margin-bottom: 12px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.lockscreen .ls-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 1.2rem; font-weight: 800; }
.lockscreen .ls-main { flex: 1; }
.lockscreen .ls-t { font-weight: 700; font-size: .9rem; }
.lockscreen .ls-s { font-size: .78rem; color: var(--text-dim); }
.mock-note { font-size: .74rem; color: var(--text-dim); line-height: 1.5; }

/* Widget */
.widget {
  width: 160px; border-radius: 20px; padding: 14px;
  background: linear-gradient(150deg, #2a3340, var(--surface)); border: 1px solid var(--border);
}
.widget .w-lbl { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 800; }
.widget .w-flag { font-size: 1.3rem; margin: 6px 0 2px; }
.widget .w-name { font-size: .82rem; font-weight: 800; line-height: 1.2; }
.widget .w-cd { margin-top: 8px; font-size: 1.4rem; font-weight: 800; color: var(--accent); }
.widget .w-cd span { font-size: .7rem; color: var(--text-dim); font-weight: 600; }

/* Favoritos */
.fav-empty { text-align: center; padding: 40px 20px; color: var(--text-dim); }
.fav-empty .big-ico { font-size: 2.4rem; }
.fav-empty p { font-size: .9rem; margin: 10px 0 18px; }
.btn-primary {
  background: var(--accent); color: var(--accent-ink); border: none; border-radius: 12px;
  padding: 12px 22px; font-weight: 800; font-size: .92rem; cursor: pointer;
}
.fav-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 700; margin: 18px 0 6px; }
.fav-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border);
}
.fav-row .av { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 1.1rem; flex: 0 0 auto; }
.fav-row .fav-main { flex: 1; min-width: 0; }
.fav-row .fav-name { font-weight: 700; font-size: .92rem; }
.fav-row .fav-sub { font-size: .76rem; color: var(--text-dim); }
.mini-btn { background: none; border: none; cursor: pointer; font-size: 1.15rem; padding: 6px; }
.mini-btn.heart { color: var(--live); }
.mini-btn.bell { color: var(--text-dim); }
.mini-btn.bell.on { color: var(--accent); }

/* Picker sheet */
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 40; display: flex; align-items: flex-end; }
.sheet { width: 100%; max-height: 82%; background: var(--screen-bg); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; animation: sheetUp .25s ease; padding-top: 6px; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-grip { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 6px auto 4px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px; }
.sheet-head h3 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.sheet-done { background: none; border: none; color: var(--accent); font-weight: 800; font-size: .95rem; cursor: pointer; }
.pick-group-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 700; margin: 14px 0 6px; }
.pick-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.pick-row .av { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 1rem; }
.pick-row .pick-name { flex: 1; font-weight: 600; font-size: .9rem; }
.pick-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; color: transparent; font-size: .8rem; }
.pick-row.sel .pick-check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Assinatura */
.plan-card {
  background: linear-gradient(155deg, #232d3a, var(--surface)); border: 1px solid var(--border);
  border-radius: 20px; padding: 22px; text-align: center; margin-bottom: 18px; position: relative; overflow: hidden;
}
.plan-card::after { content: "INSIDER"; position: absolute; top: 12px; right: -30px; transform: rotate(45deg); background: var(--accent); color: var(--accent-ink); font-size: .6rem; font-weight: 800; letter-spacing: .1em; padding: 3px 36px; }
.plan-card .price { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; }
.plan-card .price small { font-size: 1rem; color: var(--text-dim); font-weight: 600; }
.plan-card .promo { font-size: .82rem; color: var(--accent); font-weight: 700; margin-top: 4px; }
.plan-card .after { font-size: .78rem; color: var(--text-dim); margin-top: 2px; }
.benefits { list-style: none; margin: 0 0 18px; padding: 0; }
.benefits li { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.benefits .ck { color: var(--accent); font-weight: 800; flex: 0 0 auto; }
.subscribe-btn { width: 100%; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 14px; padding: 15px; font-size: 1rem; font-weight: 800; cursor: pointer; }
.sub-fine { font-size: .72rem; color: var(--text-dim); text-align: center; margin-top: 10px; line-height: 1.5; }

/* ===== Camada Insider (premium) ===== */
/* Teaser bloqueado */
.lock-teaser { position: relative; margin-top: 22px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
.teaser-blur { filter: blur(5px); opacity: .55; pointer-events: none; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.lock-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; font-weight: 700; font-size: .9rem; color: var(--text);
  background: linear-gradient(180deg, rgba(15,19,25,.35), rgba(15,19,25,.75));
}
.lock-overlay .lock-ico { font-size: 1.8rem; }

/* Cards Insider */
.insider-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.insider-badge { font-size: .8rem; font-weight: 800; color: var(--accent); letter-spacing: .04em; }
.insider-sub { font-size: .74rem; color: var(--text-dim); }
.mini-manage { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); border-radius: 10px; padding: 7px 12px; font-weight: 700; font-size: .8rem; cursor: pointer; }
.sample-note { font-size: .74rem; color: var(--exib); background: rgba(255,138,61,.08); border: 1px solid rgba(255,138,61,.25); border-radius: 10px; padding: 8px 10px; margin: 4px 0 8px; }
.insider-sec { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 800; margin: 18px 0 8px; }

.insider-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.ic-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ic-tourn { font-size: .74rem; color: var(--text-dim); }
.ic-title { font-weight: 800; font-size: .98rem; letter-spacing: -.01em; }
.ic-favs { font-size: .82rem; color: var(--text-dim); margin: 6px 0; }
.ic-favs b { color: var(--text); }
.ic-text { font-size: .86rem; line-height: 1.5; color: var(--text); }
.conf { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; color: #10151a; }
.conf-alta { background: var(--accent); }
.conf-media { background: var(--slam); }
.conf-baixa { background: var(--text-dim); }
.tag-ex { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--exib); border: 1px solid var(--exib); border-radius: 999px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }

.h2h { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.h2h-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--wta1000); overflow: hidden; }
.h2h-bar span { display: block; height: 100%; background: var(--masters); }
.h2h-nums { font-weight: 800; font-size: .9rem; white-space: nowrap; }

.alerta-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.alerta-row .al-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 1rem; }
.al-desc { font-weight: 700; font-size: .88rem; }
.al-sub { font-size: .76rem; color: var(--text-dim); }

/* Header com múltiplas ações */
.head-actions { display: flex; gap: 8px; }

/* Marca THE TOUR */
.brand-head { padding-bottom: 2px; }
.brand-logo { display: flex; align-items: center; gap: 3px; }
.logo-the { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .48rem; font-weight: 800; letter-spacing: .18em; color: var(--text); }
.logo-tour { font-size: 1.7rem; font-weight: 900; letter-spacing: -.02em; color: var(--text); display: inline-flex; align-items: center; gap: 1px; }
.ball-o { width: 23px; height: 23px; }
.page-title { margin: 4px 18px 10px; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Chips de preferência (cadastro/perfil) — reusa .fchip */
.pref-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.pref-select {
  font-family: var(--font); font-size: .95rem; font-weight: 500;
  padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); width: 100%;
}
.pref-select:focus { outline: none; border-color: var(--accent); }
.termos { display: flex; gap: 9px; align-items: flex-start; font-size: .82rem; color: var(--text-dim); text-transform: none; letter-spacing: 0; font-weight: 500; line-height: 1.4; }
.termos input { margin-top: 2px; accent-color: var(--accent); }

/* Perfil */
.profile-head { display: flex; align-items: center; gap: 14px; padding: 4px 18px 12px; }
.profile-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 1.9rem; font-weight: 800; flex: 0 0 auto; }
.profile-nome { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.profile-email { color: var(--text-dim); font-size: .85rem; }
.profile-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); }
.profile-badge.on { background: rgba(200,255,61,.12); border-color: var(--accent); color: var(--accent); }
.social-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.social-row .pref-select { flex: 1; }
.soc-ico { font-size: 1.2rem; flex: 0 0 auto; }
.soc-link { color: var(--accent); font-weight: 700; font-size: .82rem; text-decoration: none; white-space: nowrap; flex: 0 0 auto; }

/* Login / cadastro */
.auth-hero { text-align: center; padding: 18px 0 20px; }
.auth-ico { font-size: 2.4rem; }
.auth-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.auth-sub { font-size: .86rem; color: var(--text-dim); margin-top: 2px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 700; }
.field input {
  font-family: var(--font); font-size: .95rem; text-transform: none; letter-spacing: 0; font-weight: 500;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.field input:focus { outline: none; border-color: var(--accent); }
.auth-err { font-size: .82rem; color: var(--live); min-height: 1em; }
.auth-switch { width: 100%; background: none; border: none; color: var(--accent); font-weight: 700; font-size: .88rem; cursor: pointer; padding: 14px 0; }

.cancel-sub { width: 100%; background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 12px; padding: 12px; font-weight: 700; font-size: .85rem; cursor: pointer; margin-top: 16px; }
.cancel-sub:hover { color: var(--live); border-color: var(--live); }

/* Tab bar */
.tabbar {
  position: absolute; left: 10px; right: 10px; bottom: 10px; height: var(--tabbar-h);
  display: flex; background: var(--tabbar-bg); backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: 24px; z-index: 15;
}
.tab {
  flex: 1; background: none; border: none; color: var(--text-dim); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: .66rem; font-weight: 600;
}
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.tab.active { color: var(--accent); font-weight: 700; }
/* marcação da seção ativa: ícone preenchido em verde */
.tab.active svg { fill: currentColor; transform: translateY(-1px); }
.tab svg .ln { fill: none; }          /* traços abertos (arcos/alças) nunca preenchem */

/* Loader rápido: bolinha de tênis do logo */
.page-loader { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; pointer-events: none;
  background: rgba(9,12,16,.42); animation: plFade .4s ease; }
.page-loader.hidden { display: none; }
.page-loader .tball { width: 44px; height: 44px; filter: drop-shadow(0 0 10px rgba(200,255,61,.45)); animation: plSpin .5s cubic-bezier(.4,0,.2,1); }
@keyframes plSpin { from { transform: rotate(-150deg) scale(.7); } to { transform: rotate(190deg) scale(1); } }
@keyframes plFade { 0% { opacity: 0; } 28% { opacity: 1; } 74% { opacity: 1; } 100% { opacity: 0; } }
.phone-screen[data-theme="light"] .page-loader { background: rgba(230,235,240,.55); }

/* ============ TELA AO VIVO (redesign) ============ */
.lv-subtitle { margin: -4px 0 14px; color: var(--text-dim); font-size: .9rem; }
/* hero */
.lvh .dq-top { justify-content: flex-start; gap: 12px; }
.lv-badge { background: var(--live); color: #fff; font-weight: 800; font-size: .62rem; letter-spacing: .06em; padding: 5px 10px; border-radius: 8px; }
.lv-badge.sm { font-size: .55rem; padding: 4px 8px; }
.lv-views { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: .74rem; font-weight: 700; }
.lvi { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lvm-flag { font-size: 1.05rem; flex: 0 0 auto; }
/* card da partida em destaque */
.lvmatch { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; margin: 6px 0 16px; }
.lvm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lvm-fase { color: var(--accent); font-weight: 800; font-size: .68rem; letter-spacing: .08em; }
.lvm-clock { color: var(--text-dim); font-weight: 700; font-size: .72rem; }
.lvm-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; }
.lvm-p { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.lvm-name { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; box-shadow: 0 0 6px rgba(200,255,61,.6); }
.lvm-score { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lm-set { font-size: 1.05rem; font-weight: 800; color: var(--text); min-width: 12px; text-align: center; }
.lm-set.w { color: var(--accent); }
.lm-pts { font-size: 1.05rem; font-weight: 800; color: var(--text); min-width: 42px; text-align: center; padding: 6px 0; border-radius: 9px; background: var(--surface-2); border: 1.5px solid transparent; }
.lm-pts.srv { border-color: var(--accent); color: var(--accent); background: rgba(200,255,61,.08); }
.lvm-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.lvm-saque { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--text-dim); }
.lvball { width: 18px; height: 18px; flex: 0 0 auto; }
.lvm-stats { background: none; border: 1.5px solid var(--accent); color: var(--accent); font-weight: 800; font-size: .76rem; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.lvm-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 14px; }
.lv-act { display: flex; flex-direction: column; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 3px; cursor: pointer; color: var(--text-dim); font-size: .58rem; font-weight: 600; }
.lv-act span { text-align: center; line-height: 1.15; }
.lva { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* seções */
.lv-sec-head { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 10px; }
.lv-sec-head span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 800; }
.lv-vertodas { background: none; border: none; color: var(--accent); font-weight: 800; font-size: .74rem; cursor: pointer; }
/* outras partidas */
.lv-omatch { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; }
.lvo-left { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex: 0 0 auto; }
.lvo-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.lvo-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lvo-p { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lvo-p .lvm-name { font-size: .92rem; }
.lv-omatch .lvm-score { gap: 8px; }
.lv-omatch .lm-set { font-size: .95rem; min-width: 11px; }
.lv-omatch .lm-pts { min-width: 34px; font-size: .95rem; padding: 5px 0; }
.lv-omatch .chev { color: var(--text-dim); font-size: .95rem; flex: 0 0 auto; }
/* recursos nativos */
.lv-recursos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.lv-rec { display: flex; flex-direction: column; gap: 8px; }
.lv-rec-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); }
.lv-rec-ic.app { background: none; }
.lv-rec-ic svg { width: 24px; height: 24px; }
.lv-rec-ic .lva { width: 22px; height: 22px; }
.lv-rec-tx b { display: block; font-size: .8rem; font-weight: 800; }
.lv-rec-tx small { display: block; font-size: .64rem; color: var(--text-dim); margin-top: 3px; line-height: 1.3; }

.toast {
  position: absolute; bottom: calc(var(--tabbar-h) + 14px); left: 50%; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  padding: 10px 16px; border-radius: 12px; font-size: .82rem; font-weight: 600; z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: toastIn .2s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Mobile: telefone ocupa a tela */
@media (max-width: 480px) {
  .stage { padding: 0; gap: 0; }
  .stage-caption { display: none; }
  .phone { width: 100vw; height: 100vh; max-height: none; border-radius: 0; padding: 0; box-shadow: none; }
  .phone-screen { border-radius: 0; }
  .phone-notch { display: none; }
}
/* PWA instalado (standalone): tela cheia, sem moldura nem legenda, em qualquer tamanho */
@media (display-mode: standalone) {
  .stage { padding: 0; gap: 0; min-height: 100vh; }
  .stage-caption { display: none; }
  .phone { width: 100vw; height: 100vh; max-height: none; border-radius: 0; padding: 0; box-shadow: none; }
  .phone-screen { border-radius: 0; }
  .phone-notch { display: none; }
}

/* ===== Rebranding THE TOUR — auth e utilidades ===== */
.page-title-row { display: flex; align-items: center; justify-content: space-between; padding-right: 18px; }
.auth-hero2 { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 18px 20px; margin: 4px 0 16px; background: linear-gradient(150deg, #121a12, #0a0e13); border: 1px solid var(--border); }
.auth-ball { position: absolute; right: -34px; top: -6px; width: 150px; height: 150px; opacity: .9; pointer-events: none; filter: drop-shadow(0 0 24px rgba(200,255,61,.22)); }
.auth-kicker { position: relative; z-index: 1; color: var(--accent); font-weight: 800; font-size: .72rem; letter-spacing: .12em; margin-bottom: 10px; }
.auth-kicker::after { content: ""; display: block; width: 34px; height: 3px; background: var(--accent); margin-top: 6px; border-radius: 2px; }
.auth-big { position: relative; z-index: 1; margin: 0 0 8px; font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.auth-big em { font-style: normal; color: var(--accent); }
.auth-sub2 { position: relative; z-index: 1; margin: 0; color: var(--text-dim); font-size: .92rem; line-height: 1.5; max-width: 24ch; }
.field-box { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0 14px; }
.field-box svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--text-dim); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.field-box input, .field-box select { flex: 1; border: none; background: transparent; color: var(--text); font-family: var(--font); font-size: .95rem; font-weight: 500; padding: 13px 0; outline: none; min-width: 0; }
.field-box:focus-within { border-color: var(--accent); }
.field-box .eye { background: none; border: none; padding: 4px 0 4px 4px; cursor: pointer; flex: 0 0 auto; }
.auth-switch b { color: var(--accent); }
.fchip { display: inline-flex; align-items: center; gap: 7px; }
.fchip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ===== Ao vivo (referência THE TOUR) ===== */
.live-hero2 { border: 1px solid var(--live); border-radius: 18px; padding: 16px; margin: 4px 0 14px; background: linear-gradient(120deg, #170e0a, #0a0e13); position: relative; overflow: hidden; }
.lh-tag { color: var(--live); font-weight: 800; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px; }
.lh-city { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.lh-sub { color: var(--text-dim); font-size: .9rem; margin-top: 4px; }
.livematch .mset.w { color: var(--accent); }
.lockscreen { border-radius: 16px; align-items: center; }
.lockscreen .ls-ico { width: 52px; height: 52px; border-radius: 14px; font-size: 1.5rem; }
.lockscreen .chev { color: var(--text-dim); font-size: 1rem; }
.widget2 { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 16px; padding: 14px; background: var(--surface); }
.w2-left { flex: 1; min-width: 0; }
.w2-tag { color: var(--live); font-weight: 800; font-size: .62rem; letter-spacing: .06em; }
.w2-city { font-weight: 800; font-size: .92rem; margin-top: 2px; }
.w2-avs { display: flex; }
.w2-av { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--screen-bg); display: grid; place-items: center; font-size: .64rem; font-weight: 800; color: var(--text-dim); margin-left: -8px; }
.w2-av:first-child { margin-left: 0; }
.w2-score { text-align: center; }
.w2-score b { color: var(--accent); font-size: 1.35rem; font-weight: 800; }
.w2-score span { display: block; font-size: .54rem; color: var(--text-dim); font-weight: 700; letter-spacing: .05em; }
.w2-play { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: grid; place-items: center; font-size: .85rem; flex: 0 0 auto; }

/* ===== Refino Home (referência exata) ===== */
.page-title { margin-bottom: 14px; }
.chips-row { padding-bottom: 14px; }
.destaque { display: block; min-height: 195px; padding: 18px 16px; }
.dq-photo { position: absolute; inset: 0; background: url('assets/hero-live.jpg') 68% 35% / cover no-repeat; }
.dq-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,10,14,.95) 30%, rgba(7,10,14,.6) 58%, rgba(7,10,14,.22)); }
.destaque .dq-body { position: relative; z-index: 1; max-width: 78%; cursor: pointer; }
.destaque .nome { font-size: 1.35rem; }
.dq-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(10,13,17,.5); }
.dq-arrow.prev { left: 10px; }
.dq-arrow.next { right: 10px; }
.destaque .cd { background: rgba(8,11,15,.55); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(4px); margin-top: 14px; padding: 8px 14px; border-radius: 12px; }
.dq-dots { margin-bottom: 18px; }
.list-head-row { margin: 6px 0 10px; }
.row { padding: 14px 2px; }
.row .row-name { font-size: 1rem; }
.row .row-sub { margin-top: 3px; }
.row-watch { margin-top: 3px; }

/* Hero do Ao vivo com foto de quadra (saibro) */
.live-hero2 { background: url('assets/court-clay.jpg') 65% 30% / cover no-repeat; min-height: 150px; display: flex; flex-direction: column; justify-content: center; }
.live-hero2::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,8,7,.93) 35%, rgba(10,8,7,.5) 68%, rgba(10,8,7,.22)); }
.live-hero2 > * { position: relative; z-index: 1; }
.w2-av { position: relative; overflow: hidden; }
.w2-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Arte por torneio (foto real ou cena SVG gerada pelo DNA) */
.art-bg { position: absolute; inset: 0; background-size: cover; background-position: 68% 35%; background-repeat: no-repeat; }
.art-bg.art-gen svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.destaque .art-bg::after, .live-hero2 .art-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,10,14,.94) 30%, rgba(7,10,14,.58) 58%, rgba(7,10,14,.2)); }
.live-hero2 { background: #0a0e13; }

/* Bio do atleta */
.rank-row { cursor: pointer; }
.rank-row:active { background: rgba(255,255,255,.03); }
.bio-head { display: flex; align-items: center; gap: 14px; padding: 4px 18px 10px; }
.bio-avatar { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: var(--text-dim); overflow: hidden; flex: 0 0 auto; }
.bio-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bio-nome { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.bio-sub { color: var(--text-dim); font-size: .88rem; margin-top: 2px; }

/* Upload de foto (cadastro + perfil) */
.up-row { display: flex; align-items: center; gap: 10px; }
.up-avatar { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); border: 1.5px dashed var(--border); display: grid; place-items: center; font-size: 1.25rem; overflow: hidden; flex: 0 0 auto; }
.up-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.up-btn { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 8px 14px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.up-btn:active { border-color: var(--accent); color: var(--accent); }
.profile-avatar { position: relative; overflow: hidden; }
.profile-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Principais títulos na bio */
.titulo-list { display: flex; flex-direction: column; gap: 8px; }
.titulo-item { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px 10px 34px; font-size: .88rem; font-weight: 600; }
.titulo-item::before { content: "🏆"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .8rem; }

/* Desafio H2H (banner na home) */
.h2h-card { margin: 14px 16px 6px; padding: 16px 16px 14px; border-radius: 18px; background: linear-gradient(145deg, #1b2430, #10151c 65%); border: 1px solid var(--border); position: relative; overflow: hidden; }
.h2h-card::before { content: ""; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(200,255,61,.14), transparent 70%); }
.h2h-kicker { color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.h2h-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 10px; }
.h2h-seg { margin: 0 0 10px; }
.h2h-picks { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.h2h-picks .pref-select { flex: 1; min-width: 0; font-size: .82rem; }
.h2h-x { color: var(--text-dim); font-weight: 800; }
.h2h-face { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px 10px; }
.h2h-side { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; width: 86px; }
.h2h-side.lead .h2h-av { border-color: var(--accent); box-shadow: 0 0 14px rgba(200,255,61,.25); }
.h2h-av { position: relative; width: 58px; height: 58px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); display: grid; place-items: center; font-weight: 800; font-size: .95rem; color: var(--text-dim); overflow: hidden; }
.h2h-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h2h-score { display: flex; align-items: baseline; gap: 8px; font-size: 2rem; font-weight: 900; letter-spacing: -.02em; }
.h2h-score i { font-style: normal; color: var(--text-dim); font-size: 1rem; }
.h2h-score.h2h-none { font-size: 1rem; color: var(--text-dim); }
.h2h-hist { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.h2h-match { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .78rem; }
.h2h-match:last-child { border-bottom: none; }
.hm-info { color: var(--text-dim); } .hm-info em { font-style: normal; opacity: .75; }
.hm-res { white-space: nowrap; color: var(--accent); font-weight: 600; }
.hm-res b { color: var(--text); font-weight: 700; margin-left: 4px; }
.h2h-cmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .85rem; font-weight: 700; }
.h2h-cmp span:first-child { text-align: right; }
.h2h-cmp em { font-style: normal; color: var(--text-dim); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* H2H: estados fechado/aberto */
.h2h-card.h2h-closed { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; margin-top: 18px; }
.h2h-teaser { color: var(--text-dim); font-size: .78rem; margin-top: 2px; }
.h2h-open-btn { flex: 0 0 auto; background: var(--accent); color: #0b0f14; font-weight: 800; font-size: .82rem; border-radius: 999px; padding: 10px 18px; }
.h2h-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

/* H2H como página separada */
.h2h-launch { border-color: rgba(200,255,61,.4); color: var(--accent); white-space: nowrap; }
#h2h-panel .h2h-card { margin: 4px 2px; border: none; background: transparent; }
#h2h-panel .h2h-card::before { display: none; }
#h2h-slot { padding: 8px 16px 24px; }

/* H2H estado inicial (zerado) */
.h2h-empty { text-align: center; padding: 30px 16px; color: var(--text-dim); font-size: 2rem; }
.h2h-empty p { font-size: .9rem; margin-top: 8px; }

/* H2H: campo digitável + limpar */
.h2h-input { min-width: 0; }
.h2h-clear { display: block; width: 100%; margin: 0 0 12px; background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 9px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.h2h-clear:active { border-color: var(--accent); color: var(--accent); }

/* ============ TEMA CLARO (escopado ao app; padrão = escuro) ============ */
.phone-screen[data-theme="light"] {
  --bg: #e7ebef;
  --screen-bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --border: #dde3ea;
  --text: #141a20;
  --text-dim: #5c6b7a;
  --accent: #3c8a12;          /* verde legível: serve de preenchimento e de texto no claro */
  --accent-ink: #ffffff;
  --tabbar-bg: rgba(255,255,255,.94);
}
/* sombras mais suaves e divisórias visíveis no claro */
.phone-screen[data-theme="light"] .tabbar { box-shadow: 0 6px 20px rgba(20,30,45,.12); }
.phone-screen[data-theme="light"] .rank-row:active { background: rgba(0,0,0,.03); }
.phone-screen[data-theme="light"] .h2h-match,
.phone-screen[data-theme="light"] .h2h-cmp,
.phone-screen[data-theme="light"] .titulo-item::after { border-color: rgba(0,0,0,.07); }
/* Cards com fundo escuro fixo (foto ou gradiente) mantêm texto claro no tema claro,
   senão o texto herda o --text escuro e some sobre a imagem (ex.: hero da home). */
.phone-screen[data-theme="light"] .destaque,
.phone-screen[data-theme="light"] .live-hero2,
.phone-screen[data-theme="light"] .auth-hero2,
.phone-screen[data-theme="light"] .h2h-card {
  --text: #f4f6f9;
  --text-dim: rgba(240,244,249,.74);
  --accent: #c8ff3d;
  --border: rgba(255,255,255,.14);
  color: var(--text);
}
/* botão de alternância de tema */
.icon-btn.theme-on { color: var(--accent); }