:root {
  --blue: #24365e; --blue-deep: #1b2a4a; --blue-ink: #24365e; --accent: #e8622a; --accent-ink: #c04e22; --paper: #f4f3ee;
  --bg: #f6f5f1; --text: #1a2340; --muted: #6b7590; --line: #e0dfd8; --soft: #ecebe5;
  --ok: #1e8e5a; --warn: #c27a06; --bad: #c62828;
  --r: 14px; --pill: 999px;
}
:root { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; --bg: #172038; --text: #eef2f8; --muted: #9fabc4; --line: #2b3858; --soft: #1f2a47; --blue: #3b5391; --blue-deep: #172038; --blue-ink: #b9c8ea; --accent: #ef7a4a; --accent-ink: #ef7a4a; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { font: 16px/1.5 -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); padding-bottom: calc(80px + env(safe-area-inset-bottom)); -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
body.blue { background: var(--blue); padding-bottom: 0; }
@media (min-width: 600px) { body.blue { background: #0b1326; } }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0 0 .35rem; line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .6rem; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.center { text-align: center; }
.mt { margin-top: 1rem; } .mb { margin-bottom: 1rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; }
.i { width: 22px; height: 22px; flex: none; vertical-align: -5px; }
.i.lg { width: 28px; height: 28px; }
.i.sm { width: 16px; height: 16px; vertical-align: -3px; }
.blue-ink { color: var(--blue-ink); }
.u { text-decoration: underline; text-underline-offset: 3px; }

/* topo */
.topbar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: calc(env(safe-area-inset-top) + 12px) 16px 10px; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--line); }
.topbar .back { background: none; border: 0; color: var(--blue-ink); padding: 11px; margin: -8px 0 -8px -12px; cursor: pointer; display: inline-flex; }
.topbar h1 { font-size: 1.05rem; margin: 0; font-weight: 600; }
.topbar .brand { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-ink); text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.topbar .brand img { height: 30px; width: auto; }

.page { max-width: 430px; margin: 0 auto; padding: 16px 20px; }

/* tela inicial azul */
.splash { min-height: 100svh; display: flex; flex-direction: column; color: #fff; background: linear-gradient(180deg, #2a3f6e 0%, #1f2f55 50%, #172542 100%); padding: calc(env(safe-area-inset-top) + 22px) 24px calc(env(safe-area-inset-bottom) + 16px); max-width: 430px; margin: 0 auto; }
.splash .top { display: flex; justify-content: space-between; align-items: center; }
.splash .logo { display: flex; align-items: center; gap: 10px; margin-top: 44px; }
.splash .logo .mark { width: 40px; height: 40px; }
.splash .brand-img { width: min(82%, 320px); height: auto; margin-top: 56px; }
.splash .tagline { color: rgba(255,255,255,.85); margin-top: 10px; font-size: 1rem; }
.splash .logo .word { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.splash .logo .word small { display: block; font-size: .95rem; font-weight: 400; opacity: .9; letter-spacing: 0; margin-top: 3px; }
.splash .body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 28px; }
.splash .body h2 { font-size: 1.6rem; font-weight: 600; }
.splash .body p { opacity: .88; max-width: 420px; }
.splash .btn.white { width: 100%; }
.splash .alt { display: block; text-align: center; margin: 22px 0 8px; color: #fff; font-weight: 600; }
.splash .quick { display: flex; border-top: 1px solid rgba(255,255,255,.25); padding-top: 22px; margin-top: 22px; }
.splash .quick button { flex: 1; background: none; border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .9rem; cursor: pointer; padding: 4px 6px; border-left: 1px solid rgba(255,255,255,.25); line-height: 1.2; }
.splash .quick button:first-child { border-left: 0; }
.splash .quick .i { width: 30px; height: 30px; }

/* folha inferior (login, cadastro, informações) */
.sheet-bg { position: fixed; inset: 0; background: rgba(10,20,40,.45); z-index: 30; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 92svh; overflow: auto; background: var(--bg); color: var(--text); border-radius: 20px 20px 0 0; z-index: 31; padding: 8px 20px calc(env(safe-area-inset-bottom) + 20px); max-width: 430px; margin: 0 auto; animation: up .22s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet .sh { display: flex; align-items: center; gap: 6px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; color: var(--blue-ink); font-weight: 600; }
.sheet .sh button { background: none; border: 0; color: inherit; display: inline-flex; padding: 11px; margin: -8px 0 -8px -11px; cursor: pointer; }

/* listas e blocos */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 12px; }
.list { border-top: 1px solid var(--line); }
.item { display: block; text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.item .t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.item .when { font-weight: 600; font-size: 1.02rem; }
.item .venue { color: var(--muted); margin-top: 1px; }
.item .meta { color: var(--muted); font-size: .86rem; margin-top: 4px; }
.item .st { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.st.hot { color: var(--blue-ink); } .st.ok { color: var(--ok); } .st.warn { color: var(--warn); } .st.bad { color: var(--bad); } .st.soft { color: var(--muted); font-weight: 500; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu li { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.menu li .i { color: var(--blue-ink); }
.menu li .grow { line-height: 1.3; }
.menu li .sub { color: var(--muted); font-size: .84rem; }
.section { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 22px 0 4px; }
.kv { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.kv span + span::before { content: "·"; margin-right: 8px; }
.tag { color: var(--blue-ink); font-weight: 600; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1.5px solid var(--blue); border-radius: var(--pill); padding: 13px 20px; font-weight: 600; cursor: pointer; background: var(--blue); color: #fff; text-decoration: none; line-height: 1.2; }
.btn.white { background: #fff; color: var(--blue); border-color: #fff; }
.btn.ghost { background: transparent; color: var(--blue-ink); border-color: var(--blue-ink); }
.btn.quiet { background: transparent; color: var(--muted); border-color: var(--line); }
.btn.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn.block { width: 100%; }
.btn.sm { padding: 9px 14px; font-size: .9rem; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.btn-row .btn { flex: 1; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }

/* formulários */
label { display: block; font-weight: 600; font-size: .9rem; margin: 14px 0 6px; }
input[type=text], input[type=tel], input[type=email], input[type=url], input[type=search], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); }
textarea { min-height: 70px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.help { font-size: .8rem; color: var(--muted); margin-top: 5px; }
.error { color: var(--bad); border: 1px solid var(--bad); border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: .9rem; }
.switch { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; margin: 0; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch:checked { background: var(--blue); } .switch:checked::after { left: 21px; }

.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button { flex: 1 0 auto; padding: 9px 14px; border-radius: var(--pill); border: 1.5px solid var(--line); background: transparent; cursor: pointer; font-weight: 500; font-size: .92rem; color: var(--text); }
.seg button.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.seg button:disabled { opacity: .4; cursor: default; }
.seg.cats button { flex: 1 0 20%; }

.days { display: flex; flex-direction: column; }
.dayrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dayrow .dchk { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 66px; font-weight: 500; }
.dayrow .dchk input { width: 20px; height: 20px; accent-color: var(--blue); }
.dayrow .dtimes { display: flex; align-items: center; gap: 6px; flex: 1; opacity: .4; }
.dayrow.on .dtimes { opacity: 1; }
.dayrow select { padding: 7px 10px; border-radius: 10px; flex: 1; }

.venue-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.venue-list label { display: flex; gap: 12px; align-items: center; margin: 0; padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 500; cursor: pointer; }
.venue-list input { width: 20px; height: 20px; accent-color: var(--blue); flex: none; }
.venue-list .sub { font-size: .8rem; color: var(--muted); font-weight: 400; }

.tabs { display: flex; gap: 18px; margin: 4px 0 6px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; background: none; padding: 10px 2px; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.tabs button.on { color: var(--blue-ink); border-bottom-color: var(--blue-ink); }
.tabs button:disabled { opacity: .45; cursor: default; }

.players { list-style: none; margin: 4px 0 0; padding: 0; }
.players li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--blue-ink); color: var(--blue-ink); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.avatar.slot { border: 1.5px dashed color-mix(in srgb, var(--blue-ink) 45%, var(--line)); color: var(--blue-ink); background: color-mix(in srgb, var(--blue) 5%, var(--bg)); }
.avatar.slot .i { width: 16px; height: 16px; opacity: .8; }
.avatar.ghost { border-color: var(--line); color: var(--muted); }
.players .nm { font-weight: 500; }
.players .sub { font-size: .82rem; color: var(--muted); }

.rel { display: flex; gap: 14px; align-items: center; }
.rel .big { font-size: 2rem; font-weight: 600; color: var(--ok); }
.rel .big.warn { color: var(--warn); } .rel .big.bad { color: var(--bad); } .rel .big.na { color: var(--muted); font-size: 1.1rem; }

.notif { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; align-items: flex-start; }
.notif .i { color: var(--blue-ink); margin-top: 2px; }
.notif.unread .tx { font-weight: 600; }
.notif .tm { font-size: .78rem; color: var(--muted); margin-top: 2px; }

.empty { text-align: center; color: var(--muted); padding: 36px 12px 24px; }
.empty .i { width: 40px; height: 40px; color: var(--blue-ink); margin-bottom: 8px; }

.tabbar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg); border-top: 1px solid var(--line); display: flex; justify-content: space-around; padding: 8px 4px calc(env(safe-area-inset-bottom) + 8px); z-index: 10; }
/* min-height explícito: a altura vinha só do conteúdo (ícone 24 + rótulo + gap) e
   dava 43px, 1px abaixo do alvo de toque mínimo de 44px. */
.tabbar a { flex: 1; text-decoration: none; text-align: center; font-size: .68rem; font-weight: 500; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; min-height: 44px; }
.tabbar a .i { width: 24px; height: 24px; }
.tabbar a.on { color: var(--blue-ink); }
/* Contraste sobre o laranja da marca. Branco sobre #e8622a dá 3,38:1 (e 2,78:1 no tema
   escuro), abaixo do mínimo de 4,5:1 para texto normal, e badge pequeno em negrito
   ainda conta como texto normal na norma, não como texto grande. Marinho sobre o mesmo
   laranja dá 4,57:1 e 5,56:1, então dá para manter o laranja vivo e ler bem sob sol.

   O --accent estava em #de5d2c, meio tom mais escuro que o --laranja #e8622a do site:
   a mesma conta caía para 4,20:1 e reprovava por pouco. Unificado com o site, o que de
   quebra deixa app e site com exatamente o mesmo laranja. */
.badge { position: absolute; top: -4px; right: calc(50% - 18px); background: var(--accent); color: #1a2340; font-size: .62rem; font-weight: 700; border-radius: 999px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; }

.share-box { background: var(--soft); border-radius: 10px; padding: 10px 12px; font-size: .82rem; word-break: break-all; color: var(--muted); }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.steps li .i { color: var(--blue-ink); margin-top: 2px; }
.progress { height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.progress i { display: block; height: 100%; background: var(--accent); }
.venue-list label.all { font-weight: 600; background: var(--soft); padding: 10px 8px; border-radius: 10px; border-bottom: 0; margin-bottom: 4px; }
.soon { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; vertical-align: 2px; white-space: nowrap; }
.venue-list label.off { cursor: default; color: var(--muted); }
.venue-list label.off input { opacity: .35; }
.menu li.off { color: var(--muted); }
.menu li.off .i { color: var(--muted); }
.wiz { margin: 4px 0 6px; }
.wiz-bar { display: flex; gap: 6px; }
.wiz-bar i { flex: 1; height: 4px; border-radius: 999px; background: var(--line); }
.wiz-bar i.on { background: var(--blue); }
.wiz-title { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; color: var(--blue-ink); font-size: .95rem; }
.phone { display: flex; gap: 8px; }
.phone select { flex: 0 0 auto; width: 96px; padding-left: 12px; padding-right: 24px; }
.phone input { flex: 1; min-width: 0; }
.langsel { border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 28px 6px 12px; background: var(--bg); color: var(--text); font-size: .85rem; font-weight: 600; }
.langsel.onblue { border-color: rgba(255,255,255,.5); background: transparent; color: #fff; }
.langsel.onblue option { color: var(--text); }
.pickbtn { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 11px 12px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.pickbtn .i { color: var(--muted); }
.pickbtn .ph { color: var(--muted); font-weight: 400; }
.pickbtn.wide { width: 100%; justify-content: flex-start; }
.pickbtn.wide span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.phone .pickbtn { flex: 0 0 auto; }
.flag { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; flex: none; font-size: 16px; line-height: 18px; }
.pick-search { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); margin: 4px 0 8px; }
.menu.pick li { cursor: pointer; padding: 12px 0; }
.menu.pick li.sel { color: var(--blue-ink); font-weight: 600; }
.menu.pick li.custom { color: var(--blue-ink); }
.menu.pick .flag { margin-right: 4px; }

/* alvo de toque mínimo e comportamento de app */
button, .btn, .item, .menu li, .tabbar a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.seg button, .pickbtn, .btn.sm { min-height: 40px; }
input, select, textarea { font-size: 16px; } /* evita zoom automático no iOS */
html, body { overscroll-behavior: none; }

/* em tela grande (só para demonstração no computador), o app fica numa coluna de celular */
@media (min-width: 600px) {
  body { background: #e9edf3; }
  body.blue { background: #10305f; }
  #app { max-width: 430px; margin: 0 auto; min-height: 100svh; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
  body.blue #app { background: transparent; box-shadow: none; }
  .topbar { max-width: 430px; margin: 0 auto; }
  .tabbar { max-width: 430px; margin: 0 auto; left: 0; right: 0; }
  .toast { max-width: 380px; }
}
.sportgrid { --cols: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 4px; }
.sportgrid button { flex: 0 0 calc((100% - (var(--cols) - 1) * 8px) / var(--cols)); }
.sportgrid.cols-4 button { padding: 10px 4px 8px; }
.sportgrid.cols-4 button .nm { font-size: .8rem; }
.sportgrid.cols-4 button .sub { font-size: .64rem; }
.sportgrid.cols-4 button .i { width: 22px; height: 22px; }
.sportgrid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--muted); cursor: pointer; line-height: 1.2; }
.sportgrid button .i { width: 26px; height: 26px; }
.sportgrid button .nm { font-weight: 600; font-size: .9rem; color: var(--text); }
.sportgrid button .sub { font-size: .7rem; }
.sportgrid button.on { border-color: var(--blue); color: var(--blue-ink); background: color-mix(in srgb, var(--blue) 8%, var(--bg)); }
.sportgrid button.on .nm, .sportgrid button.on .sub { color: var(--blue-ink); }
.sportgrid button:disabled { opacity: .55; cursor: default; }
/* gestos */
.ptr { position: fixed; top: 0; left: 50%; transform: translate(-50%, -56px); z-index: 25; display: none; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); color: var(--muted); box-shadow: 0 2px 10px rgba(0,0,0,.14), 0 0 0 1px var(--line); transition: transform .12s; pointer-events: none; align-items: center; justify-content: center; }
.ptr.show { display: flex; }
.ptr.ready { color: var(--blue-ink); }
.ptr-ic { width: 22px; height: 22px; transition: transform .1s; }
.ptr-ic.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.page.slide-l { animation: slideL .22s ease-out; }
.page.slide-r { animation: slideR .22s ease-out; }
@keyframes slideL { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideR { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* perfil */
.phead { text-align: center; padding: 8px 0 14px; }
.phead .avatar.big { width: 64px; height: 64px; font-size: 1.3rem; margin: 0 auto 10px; }
.phead h2 { margin: 0 0 2px; }
.pstat { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.plist { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pitem { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; border-bottom: 1px solid var(--line); min-height: 60px; }
.pitem:last-child { border-bottom: 0; }
.pitem .i { color: var(--blue-ink); }
.pitem .ttl { font-weight: 600; }
.pitem .sub { color: var(--muted); font-size: .84rem; margin-top: 1px; }
.pitem:active { background: var(--soft); }

/* botão de salvar fixo no rodapé das telas longas (acima da barra de abas) */
.sticky-save { position: sticky; bottom: calc(env(safe-area-inset-bottom) + 76px); background: var(--bg); padding: 10px 0 6px; margin-top: 8px; box-shadow: 0 -12px 12px -12px rgba(0,0,0,.15); }
body:has(#tabbar[hidden]) .sticky-save { bottom: 0; }
.tag-plus { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: .72rem; font-weight: 700; color: #1a2340; background: var(--accent); border-radius: 999px; padding: 2px 9px 2px 7px; }
.tag-plus .i { width: 12px; height: 12px; stroke-width: 2.2; }

.players li > a.blue-ink { padding: 12px 4px 12px 12px; margin: -12px -4px -12px 0; display: inline-flex; }
.notif.done { color: var(--muted); }
.notif.done .tx { font-weight: 400; }
/* partidas que o próprio usuário organizou */
.item.own { border-left: 3px solid var(--blue); padding-left: 12px; margin-left: -15px; background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 6%, transparent), transparent 60%); }
.own-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--blue-ink); background: color-mix(in srgb, var(--blue) 12%, var(--bg)); border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); border-radius: 999px; padding: 2px 9px 2px 6px; }
.own-tag .i { width: 12px; height: 12px; }
/* destaque: falta só 1 */
.st.one { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #1a2340; border-radius: 999px; padding: 3px 10px 3px 8px; font-size: .8rem; }
.st.one i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.item.one { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); }
.item.one .progress i { background: var(--accent); }
/* folga no fim das listas para o último botão não encostar na barra de abas */
.page { padding-bottom: 28px; }
[data-theme=dark] .btn.quiet { color: var(--text); border-color: #3a4a6e; }
/* Início: cabeçalho fixo (sticky) abaixo da barra de título; a lista rola por baixo */
.home-head { position: sticky; z-index: 4; background: var(--bg); margin: -16px -20px 0; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); box-shadow: 0 6px 12px -10px rgba(0,0,0,.25); }
.home-head + .list { border-top: 0; }
/* cartões de esporte (perfil e cadastro) */
.sportcards { display: flex; flex-direction: column; gap: 10px; }
.sportcard { border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
.sportcard.on { border-color: var(--blue); }
.sc-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.sc-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--soft); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sportcard.on .sc-ic { background: color-mix(in srgb, var(--blue) 12%, var(--bg)); color: var(--blue-ink); }
.sc-name { font-weight: 600; }
.sc-sub { font-size: .82rem; color: var(--muted); margin-top: 1px; }
.sc-body { border-top: 1px solid var(--line); padding: 10px 14px 14px; background: color-mix(in srgb, var(--blue) 4%, var(--bg)); }
.sc-title { font-weight: 600; font-size: .88rem; margin: 2px 0 8px; }
.switch:disabled { opacity: .5; }
.confirm-text { margin: 6px 0 14px; line-height: 1.5; }
.btn.danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; }
/* ação destrutiva discreta: só a tinta avisa, porque a confirmação de verdade está na folha */
.btn.quiet.danger-ink { color: var(--bad); }
/* campo de PIN na folha de confirmação: curto e centralizado, não parece um campo de texto livre */
/* (a regra que encolhia #cf-input[type=password] para 8 caracteres era do PIN de 4 dígitos; com senha, o campo é comum) */

/* aviso rápido, minimalista: cartão discreto acima da barra de abas */
/* pointer-events: none porque o toast nasce exatamente sobre a barra de ação fixa
   (.sticky-save) e sobre as .btn-row do fim das telas. Sem isto, nos 3 a 4,5 segundos
   seguintes a qualquer aviso, o próximo toque do usuário é engolido pelo aviso, e é
   justamente o momento em que ele quer continuar. O timer já dispensa o toast sozinho. */
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 78px); transform: translateX(-50%); width: max-content; max-width: min(90vw, 380px); z-index: 40; display: flex; align-items: center; gap: 8px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: .9rem; line-height: 1.35; box-shadow: 0 6px 20px rgba(0,0,0,.12); animation: toast-in .2s ease-out; cursor: pointer; pointer-events: none; }
body:has(#tabbar[hidden]) .toast { bottom: calc(env(safe-area-inset-bottom) + 20px); }
.toast .toast-ic { display: inline-flex; color: var(--blue-ink); flex: none; }
.toast .toast-ic .i { width: 18px; height: 18px; stroke-width: 2; }
.toast.err .toast-ic { color: var(--bad); }
@keyframes toast-in { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
/* seletores com busca em tela cheia: busca fixa no topo, lista rola abaixo (fica visível com o teclado aberto) */
.sheet.full { top: 0; bottom: 0; max-height: none; height: 100dvh; border-radius: 0; display: flex; flex-direction: column; padding-bottom: 0; animation: none; }
.sheet.full .sh { padding-top: calc(env(safe-area-inset-top) + 12px); }
.sheet.full .pick-search { flex: none; }
.sheet.full .pick-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(env(safe-area-inset-bottom) + 12px); }
/* chips de dia e hora na criação da partida */
.chips-x { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips-x::-webkit-scrollbar { display: none; }
.chips-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.chip { flex: none; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 8px 12px; font-weight: 600; font-size: .9rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-height: 40px; justify-content: center; }
.chip .c-top { font-size: .7rem; font-weight: 500; color: var(--muted); }
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip.on .c-top { color: rgba(255,255,255,.85); }
.chip.h { padding: 8px 4px; }
.chip.m { min-width: 64px; }
/* campos nativos de data e hora: mesma aparência dos demais campos */
input[type=date], input[type=time] { min-height: 46px; -webkit-appearance: none; appearance: none; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { opacity: .6; }
[data-theme=dark] input[type=date], [data-theme=dark] input[type=time] { color-scheme: dark; }
.brand .mk-d { display: none; }
[data-theme=dark] .brand .mk-l { display: none; }
[data-theme=dark] .brand .mk-d { display: inline; }
.menu li.cancel-reason .i { color: var(--bad); }
/* cores dos ícones dos alertas */
.notif.tone-ok .i { color: var(--ok); }
.notif.tone-bad .i { color: var(--bad); }
.notif.tone-warn .i { color: var(--accent); }
.notif.tone-muted .i { color: var(--muted); }
.notif.done { color: var(--muted); }
.notif.done .tx { font-weight: 400; }

.copybox { width: 100%; box-sizing: border-box; font-size: 14px; line-height: 1.45; font-family: inherit; color: var(--text); min-height: 260px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 12px; resize: none; margin-bottom: 12px; }

/* logo do clube: quadrado arredondado sobre fundo branco (logos têm fundos variados) */
.vlogo { width: 40px; height: 40px; flex: none; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 3px; box-sizing: border-box; }
.vlogo.sm { width: 28px; height: 28px; border-radius: 7px; padding: 2px; }
.menu li .vlogo, .pick-item .vlogo { margin: 0; }
.venue-list label.off .vlogo { opacity: .45; }
.vlinks { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
/* Turnstile: o widget tem largura própria; centraliza e dá respiro sem brigar com ela */
.turnstile { display: flex; justify-content: center; margin: 14px 0 4px; min-height: 65px; }

/* campo de senha com botão de mostrar: o olho fica dentro do campo, sem empurrar o layout */
.pass-wrap { position: relative; display: block; }
.pass-wrap input { width: 100%; padding-right: 46px; }
.pass-eye { position: absolute; right: 4px; top: 0; height: 100%; width: 42px; display: inline-flex;
  align-items: center; justify-content: center; background: none; border: 0; color: var(--muted); cursor: pointer; }
.pass-eye:hover { color: var(--blue-ink); }

/* botão do Google: marca oficial, sem recolorir */
.gbtn { gap: 10px; background: var(--bg); border-color: var(--line); color: var(--text); font-weight: 600; }
.gbtn .i { width: 20px; height: 20px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .85rem; margin: 16px 0 4px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* SSO na tela inicial: é o caminho mais curto para entrar, então vem primeiro e em
   destaque. O "Entrar" por telefone vira contorno para não competir com ele. */
.splash .gbtn-splash { width: 100%; background: #fff; color: #1a2340; border-color: #fff; margin-bottom: 12px; }
.splash .btn.outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); width: 100%; }

/* Telas baixas (o Moto G7 Play dá 616px de altura útil). Sem isto a fileira de atalhos
   nasce cortada ao meio na tela de entrada, medido no aparelho, 78px de excesso.
   Aperta o ritmo vertical em vez de esconder algo: tudo continua visível. */
@media (max-height: 700px) {
  .splash .brand-img { margin-top: 24px; width: min(70%, 260px); }
  .splash .tagline { margin-top: 6px; font-size: .95rem; }
  .splash .body { padding-bottom: 12px; }
  .splash .body h2 { font-size: 1.35rem; }
  .splash .body p { font-size: .92rem; }
  .splash .alt { margin: 14px 0 4px; }
  .splash .quick { padding-top: 14px; margin-top: 14px; }
  .splash .quick button { gap: 6px; font-size: .82rem; }
  .splash .quick .i { width: 24px; height: 24px; }
}

/* Criar partida é a ação que gera todo o resto: uma partida criada é o que dispara os
   avisos. Por isso a aba "Criar" da barra é o ÚNICO ponto preenchido em laranja do app
   (o botão do topo do início saiu por ser repetido), laranja só significa alguma coisa
   enquanto for um. As outras marcas laranja (contador, etiqueta de prioridade,
   pílula "falta 1") são pequenas e não competem com um botão.

   O texto é MARINHO, não branco: branco sobre o laranja da marca dá 3,38:1 no tema claro
   e 2,78:1 no escuro, abaixo do mínimo de 4,5:1, e este app é usado sob sol, na quadra.
   Marinho sobre o mesmo laranja dá 4,57:1 e 5,56:1, então o laranja continua vivo sem
   precisar escurecer.

   Altura mínima de 44px: é a ação principal, usada com uma mão só e com pressa. */
.btn.accent { background: var(--accent); border-color: var(--accent); color: #1a2340; min-height: 44px; }
[data-theme=dark] .btn.accent { color: #14203c; }

/* Girinho do estado de carregando nos botões. Respeita quem pediu menos movimento:
   sem animação, vira um ponto estático, o botão continua desabilitado, que é o que
   de fato impede o toque duplo. */
.spin { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; border-right-color: currentColor; opacity: .5; } }


/* ===== acessibilidade: medições da auditoria =====================================
   Os valores abaixo foram calculados pela fórmula WCAG sobre as cores computadas, não
   estimados. O mínimo é 4,5:1 para texto normal e 3:1 para borda de componente. */

/* O alerta virou <a> para ser alcançável por teclado; mantém a aparência de bloco. */
a.notif { text-decoration: none; color: inherit; display: flex; }

/* Foco visível. O CSS fazia `outline: none` nos campos e trocava por mudança de cor da
   borda, que no tema escuro dava 2,18:1 contra o fundo, quase invisível. --blue-ink dá
   10,91:1 no claro e 9,62:1 no escuro, então serve nos dois sem regra extra. */
:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; border-radius: 6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 1px; }

/* Texto secundário: #6b7590 sobre o papel dava 4,20:1, abaixo do mínimo, e é a cor de
   quase todo o texto de apoio (local, horário, categoria, ajuda de formulário), lido sob
   sol na beira da quadra. #5e677d dá 5,19:1 no papel e 4,74:1 sobre o cinza dos blocos. */
:root { --muted: #5e677d; --ok: #177a4c; --warn: #9a6105; }
/* Estados também faltavam no tema escuro: a caixa de erro ficava em 2,87:1. */
:root[data-theme=dark] { --muted: #9fabc4; --bad: #e06060; --ok: #3fbd82; }

/* Borda de campo. --line existe para divisória decorativa (1,22:1, e tudo bem para isso),
   mas os campos usam o mesmo fundo da página: a borda é a única coisa que os delimita, e
   precisa de 3:1. A chave desligada era literalmente invisível no tema claro. */
:root { --field-line: #8e8b80; }
:root[data-theme=dark] { --field-line: #5a6d99; }
input, select, textarea, .pickbtn, .pick-search, .seg button, .switch { border-color: var(--field-line); }

/* Alvo de toque: 44px na ação principal e nos segmentados. */
.seg button, .btn.sm, .pickbtn { min-height: 44px; }

/* Movimento: o app não respeitava prefers-reduced-motion em lugar nenhum, e o pontinho
   do selo "Falta 1" animava indefinidamente. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* .section virou <h2> para entrar na navegação por títulos do leitor de tela (antes era
   <div> e o rotor pulava do título da tela direto para o fim). A aparência não muda. */
h2.section { font-size: .78rem; font-weight: 600; line-height: 1.3; }

/* aba Criar em destaque: o "+" num disco laranja da marca, como o botão "Criar partida" do início */
.tabbar a.create .i { width: 30px; height: 30px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: var(--accent); color: #1a2340; margin-top: -3px; }
.tabbar a.create { color: var(--accent-ink); }
.tabbar a.create.on .i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }
[data-theme=dark] .tabbar a.create .i { color: #14203c; }

/* aba Clubes: miniatura maior do clube (logo, ou pino num azulejo quando não há logo) */
.menu.clubs li { align-items: flex-start; }
.menu.clubs li > .vlogo { width: 56px; height: 56px; border-radius: 14px; padding: 4px; }
.menu.clubs li > .i { width: 56px; height: 56px; flex: none; padding: 15px; border-radius: 14px; background: var(--soft); color: var(--muted); box-sizing: border-box; }
.menu.clubs li.off > .vlogo { opacity: .55; }

/* portal de desktop ("continue no app") */
.gate { min-height: 100svh; display: flex; flex-direction: column; color: #fff; background: linear-gradient(160deg, #2a3f6e 0%, #1f2f55 50%, #172542 100%); }
.gate-in { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; max-width: 1040px; width: 100%; margin: 0 auto; padding: 56px 40px 24px; box-sizing: border-box; }
.gate-txt { max-width: 440px; justify-self: end; }
.gate-logo { width: 220px; height: auto; margin-bottom: 28px; }
.gate h1 { font-size: 2.4rem; line-height: 1.1; margin: 0 0 12px; color: #fff; }
.gate-sub { font-size: 1.1rem; line-height: 1.5; color: rgba(255,255,255,.82); margin: 0 0 26px; }
.gate-ver { font-size: .85rem; color: rgba(255,255,255,.62); margin: 18px 0 0; }
/* botão principal com a largura exata dos dois selos abaixo dele: a coluna se ajusta aos selos */
.gate-actions { display: inline-flex; flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 22px; max-width: 100%; }
.gate-cta { display: flex; box-sizing: border-box; min-height: 52px; }
.gate-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.loja { display: inline-flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 18px; border: 1.5px dashed rgba(255,255,255,.42); border-radius: 12px; color: #fff; line-height: 1.2; }
.loja__nome { font-weight: 700; font-size: 1rem; }
.loja__estado { font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.gate-badge { flex: 0 0 auto; white-space: nowrap; justify-content: center; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff; text-decoration: none; font-size: .92rem; font-weight: 600; }
.gate-badge:hover { border-color: #fff; }
.gate-web { color: rgba(255,255,255,.75); font-size: .92rem; text-decoration: underline; }
.gate-phone { justify-self: start; }
.gate-frame { width: 300px; aspect-ratio: 420 / 900; border-radius: 40px; padding: 10px; background: #0f1a33; box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.12); }
.gate-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; display: block; }
.gate-foot { display: flex; justify-content: center; gap: 22px; padding: 18px; font-size: .86rem; color: rgba(255,255,255,.6); }
.gate-foot a { color: inherit; }
@media (max-width: 899px) { .gate-in { grid-template-columns: 1fr; text-align: center; } .gate-txt, .gate-phone { justify-self: center; } }
@media (min-width: 600px) { #app.gate-host { max-width: none; box-shadow: none; background: transparent; } }
/* portal no celular: coluna única, mockup menor, botão largo */
@media (max-width: 899px) { .gate-in { padding: 36px 24px 16px; gap: 28px; } .gate-txt { max-width: 420px; } .gate-logo { width: 170px; } .gate h1 { font-size: 1.9rem; } .gate-frame { width: 220px; } .gate-actions { width: 100%; } .gate-web { display: block; text-align: center; margin-top: -4px; } }
/* aceite dos termos sob o botão de criar conta */
.legal { margin: 12px 0 0; line-height: 1.45; }
.legal a { color: inherit; }
/* a folha recebe o foco ao abrir (para o leitor de tela anunciar o diálogo): sem contorno nela inteira */
.sheet:focus, .sheet:focus-visible { outline: none; }
.pick-item[role=option]:focus-visible { outline-offset: -2px; }