/* LW Tracker — papel quadriculado, traço grosso, sombra dura e marca-texto amarelo */
:root {
    --paper: #fbf6e9;
    --grid: rgba(31, 27, 22, .055);
    --surface: #fffdf7;
    --surface-2: #f4edda;
    --ink: #1f1b16;
    --text: #1f1b16;
    --muted: #6f6656;
    --line: #1f1b16;
    --line-soft: #e6dcc4;
    --accent: #ffd43b;
    --accent-soft: #fff1b8;
    --brand: #ff7a1a;
    --ok: #1d9a5f;
    --ok-soft: #d9f4e5;
    --warn: #b98500;
    --warn-soft: #fff1b8;
    --bad: #e5484d;
    --bad-soft: #ffe1df;
    --new: #2f7de1;
    --new-soft: #dfecff;
    --tier-s: #ff7a1a;
    --tier-a: #ffd43b;
    --tier-b: #7cc0ff;
    --tier-c: #d8ccb0;
    --tier-d: #ff8f8f;
    --muted-bar: #d8ccb0;
    --save: #a99f8a;
    --radius: 18px;
    --stroke: 2.5px;
    --shadow: 4px 4px 0 var(--ink);
    --shadow-sm: 3px 3px 0 var(--ink);
    --font-display: "Bricolage Grotesque", Rubik, system-ui, sans-serif;
    --font-body: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}
body {
    background-color: var(--paper);
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 26px 26px;
    min-height: 100vh;
}

a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
a:hover { background: var(--accent-soft); }
code { background: var(--surface-2); border: 1.5px solid var(--line-soft); padding: 1px 6px; border-radius: 6px; font-family: var(--font-mono); font-size: .85em; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; }
h1 { font-size: 2.1rem; font-weight: 800; margin: 12px 0 8px; line-height: 1.1; }
h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 14px; }
h1:focus { outline: none; }

/* Marca-texto: <mark> nos títulos */
mark {
    background: var(--accent); color: var(--ink);
    padding: 0 .18em; border-radius: 8px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.lead { color: var(--muted); margin: 0 0 22px; max-width: 680px; font-size: 1.05rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mt { margin-top: 10px; }

/* Etiqueta em fonte mono, maiúscula (ex.: cabeçalho de tabela, rótulo de KPI) */
.eyebrow, .grid th, .kpi span, .field > span, .legend, .chart-note {
    font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
}

/* Balão: borda grossa, sombra dura e rabinho embaixo à esquerda */
.bubble {
    position: relative;
    background: var(--surface);
    border: var(--stroke) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.bubble::after {
    content: ""; position: absolute; left: 28px; bottom: -10px;
    width: 16px; height: 16px; background: var(--surface);
    border-right: var(--stroke) solid var(--ink); border-bottom: var(--stroke) solid var(--ink);
    transform: rotate(45deg);
}
.bubble.tail-right::after { left: auto; right: 26px; }

/* Barra superior: dois balões flutuando */
.topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 14px;
    max-width: 1200px; margin: 0 auto; padding: 14px 24px 18px;
    background: linear-gradient(var(--paper) 70%, transparent);
}
.nav-bubble { flex: 1; display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 16px; min-width: 0; }
.brand {
    display: flex; align-items: center; gap: 8px; text-decoration: none;
    color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em;
}
.brand:hover { background: none; }
.brand-mark {
    display: inline-grid; place-items: center;
    background: var(--brand); color: var(--ink);
    border: var(--stroke) solid var(--ink); border-radius: 10px; box-shadow: 2px 2px 0 var(--ink);
    padding: 1px 7px; font-size: 1rem; font-weight: 800;
    transform: rotate(-6deg); transition: transform .2s;
}
.brand:hover .brand-mark { transform: rotate(6deg) scale(1.05); }
.brand-name { background: var(--accent); border-radius: 8px; padding: 0 .2em; }

.topbar nav { display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a {
    color: var(--ink); text-decoration: none; font-weight: 600;
    padding: 6px 11px; border-radius: 999px; border: 2px solid transparent; white-space: nowrap;
}
.topbar nav a:hover { background: var(--accent-soft); }
.topbar nav a.active { background: var(--accent); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }

.account { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; flex: 0 1 auto; min-width: 0; }
.account .who { line-height: 1.2; min-width: 0; color: var(--ink); text-decoration: none; border-radius: 8px; }
.account .who:hover { background: var(--accent-soft); }
.account .who b { display: block; font-family: var(--font-display); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.account .who span { display: block; color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.account form { margin: 0; }
/* Janela média: o menu tem prioridade, o nome da aliança e o e-mail saem */
@media (max-width: 1080px) {
    .account .who { display: none; }
}

.page { max-width: 1200px; margin: 0 auto; padding: 18px 24px 70px; }

/* Cartões */
.card {
    background: var(--surface);
    border: var(--stroke) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 22px;
    min-width: 0;
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2 { margin: 0; }

.notice, .empty {
    background: var(--accent-soft); border: var(--stroke) solid var(--ink); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 14px 18px; margin-bottom: 22px;
}
.empty { background: var(--surface); text-align: center; padding: 44px 16px; font-size: 1.05rem; }

/* Campos */
.row-fields { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 200px; flex: 1; }
.field > span { color: var(--muted); }
.static { padding: 9px 0; font-weight: 600; }
.inline { display: flex; gap: 8px; align-items: center; }
.inline input, .inline select { flex: 1; min-width: 0; }

input, select {
    background: #fff; color: var(--ink);
    border: 2px solid var(--ink); border-radius: 12px;
    padding: 9px 12px; font: inherit; width: 100%;
    transition: box-shadow .12s;
}
input::placeholder { color: #a39a87; }
input:focus, select:focus { outline: none; box-shadow: 3px 3px 0 var(--accent), 3px 3px 0 2px var(--ink); }
input[type=date] { color-scheme: light; }
select { appearance: none; padding-right: 34px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }

/* Botões: pílula com sombra dura que "afunda" ao clicar */
.btn {
    border: 2px solid var(--ink); background: var(--surface); color: var(--ink);
    padding: 9px 18px; border-radius: 999px; font: inherit; font-weight: 700;
    cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
    box-shadow: var(--shadow-sm); transition: transform .08s, box-shadow .08s, background .12s;
}
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); }
.btn.danger { color: var(--bad); }
.btn.danger:hover:not(:disabled) { background: var(--bad-soft); }
.btn.ghost { background: var(--surface); }
.btn.sm { padding: 4px 12px; font-size: .85rem; box-shadow: 2px 2px 0 var(--ink); }
.btn.icon { padding: 4px 9px; }
.btn.wide { width: 100%; justify-content: center; padding: 12px 18px; font-size: 1.05rem; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.actions.end { justify-content: flex-end; }

.file-btn { position: relative; overflow: hidden; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Área de upload */
.dropzone {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 40px 16px; text-align: center;
    border: var(--stroke) dashed var(--ink); border-radius: var(--radius);
    background: repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--surface-2) 14px 28px);
    cursor: pointer; transition: background .15s, transform .15s;
}
.dropzone:hover { background: var(--accent-soft); transform: rotate(-.4deg); }
.dropzone.disabled { opacity: .55; cursor: not-allowed; }
.dropzone.disabled:hover { background: repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--surface-2) 14px 28px); transform: none; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: inherit; }
.dz-icon {
    display: grid; place-items: center; width: 54px; height: 54px; font-size: 1.5rem;
    background: var(--accent); border: var(--stroke) solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm);
    transform: rotate(-4deg);
}
.dropzone:hover .dz-icon { animation: bob .6s ease-in-out infinite alternate; }
.dz-title { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; margin-top: 6px; }
.dz-sub { color: var(--muted); font-size: .88rem; }
/* Colar com Ctrl+V: só aparece onde tem teclado e mouse */
.dz-paste { display: none; margin-top: 4px; font-size: .88rem; font-weight: 600; }
.dz-paste kbd {
    font-family: var(--font-mono); font-size: .78rem; padding: 1px 6px; background: var(--surface);
    border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: 1px 1px 0 var(--ink);
}
@media (hover: hover) and (pointer: fine) { .dz-paste { display: block; } }
.hidden-input { display: none; }

/* Termos, privacidade e contato no pé das páginas */
.legal-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 40px; font-size: .82rem; }
.legal-foot a { color: var(--muted); }
.consent { margin: 4px 0 12px; }

/* Bandeja dos prints colados, esperando o "Ler" */
.paste-tray { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.paste-tray:empty { display: none; }
.paste-tray figure {
    position: relative; margin: 0; width: 76px; height: 120px; overflow: hidden;
    border: 2px solid var(--ink); border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); background: var(--surface-2);
}
.paste-tray img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.paste-tray .n {
    position: absolute; left: 4px; bottom: 4px; min-width: 20px; padding: 0 5px; text-align: center;
    font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
    background: var(--accent); border: 1.5px solid var(--ink); border-radius: 99px;
}
.paste-tray .x {
    position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 0; line-height: 1;
    font-size: .8rem; font-weight: 800; cursor: pointer;
    background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 50%;
}
.paste-tray .x:hover { background: var(--bad-soft); }
.paste-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.progress { height: 14px; background: var(--surface); border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; margin-top: 18px; }
.progress-bar { height: 100%; background: repeating-linear-gradient(135deg, var(--accent) 0 10px, #ffc400 10px 20px); border-right: 2px solid var(--ink); transition: width .3s; }

/* Alertas e chips */
.alert { padding: 10px 14px; border-radius: 12px; margin: 12px 0 0; border: 2px solid var(--ink); font-weight: 500; }
.alert.error { background: var(--bad-soft); }
.alert.warn { background: var(--warn-soft); margin: 0 0 10px; }
.alert.ok { background: var(--ok-soft); }
.alert a { margin-left: 4px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--surface); border: 2px solid var(--ink);
    padding: 2px 11px; border-radius: 99px; font-size: .85rem; font-weight: 600;
}
.chip.ok { background: var(--ok-soft); }
.chip.warn { background: var(--warn-soft); }
.chip.new { background: var(--new-soft); }
.chip .x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 0 0 0 2px; }
.chip .x:hover { color: var(--bad); }

/* Tabelas */
.table-wrap { overflow-x: auto; border: 2px solid var(--ink); border-radius: 14px; background: var(--surface); }
table.grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.grid th {
    text-align: left; color: var(--ink);
    padding: 11px 12px; background: var(--surface-2); border-bottom: 2px solid var(--ink);
    white-space: nowrap;
}
.grid td { padding: 9px 12px; border-bottom: 1.5px solid var(--line-soft); white-space: nowrap; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover td { background: var(--accent-soft); }
.grid a, .plist a { text-decoration: none; }
.grid a:hover, .plist a:hover { text-decoration: underline; text-decoration-color: var(--accent); background: none; }
.grid .num { text-align: right; }
.grid .rank { color: var(--muted); width: 1%; font-family: var(--font-mono); font-size: .85rem; }
.grid .total { font-weight: 800; }
.grid .zero { color: var(--bad); font-weight: 700; background: var(--bad-soft); }

.ranking .sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.ranking thead .sticky { background: var(--surface-2); }
.ranking tbody tr:hover .sticky { background: var(--accent-soft); }
.ranking tr.below-goal td.total { color: var(--bad); }
.below-goal-sample { color: var(--bad); }

.review td { vertical-align: middle; }
.review .name { font-weight: 600; }
.review select { min-width: 190px; padding-top: 6px; padding-bottom: 6px; }
.review .pts { width: 140px; text-align: right; padding-top: 6px; padding-bottom: 6px; }
.review tr.row-warn td { background: #fffaf0; }
.review tr.row-new td { background: #f6faff; }
.tag { font-size: .7rem; padding: 1px 8px; border-radius: 99px; margin-left: 6px; font-weight: 700; border: 1.5px solid var(--ink); }
.tag.ok { background: var(--ok-soft); }
.tag.warn { background: var(--accent); }
.tag.new { background: var(--new-soft); }

.tier {
    display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px;
    border: 2px solid var(--ink); border-radius: 7px; box-shadow: 1.5px 1.5px 0 var(--ink);
    font-family: var(--font-display); font-size: .75rem; font-weight: 800; color: var(--ink);
}
.tier.S { background: var(--tier-s); }
.tier.A { background: var(--tier-a); }
.tier.B { background: var(--tier-b); }
.tier.C { background: var(--tier-c); }
.tier.D { background: var(--tier-d); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; color: var(--muted); margin-bottom: 14px; }
.legend .tier { margin-right: 4px; }

.up { color: var(--ok); font-weight: 700; }
.down { color: var(--bad); font-weight: 700; }

/* KPIs e gráficos */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi {
    background: var(--surface); border: var(--stroke) solid var(--ink); border-radius: 16px;
    box-shadow: var(--shadow-sm); padding: 14px 16px;
}
.kpi span { color: var(--muted); }
.kpi b { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; line-height: 1.15; margin-top: 4px; }
.kpi.bad { background: var(--bad-soft); }
.kpi.bad b { color: var(--bad); }

.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 22px; }
.charts .card { margin-bottom: 0; }
.charts .wide { grid-column: 1 / -1; }
.chart-box { position: relative; height: 270px; }
.chart-box.tall { height: 430px; }

.lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.lists .card { margin-bottom: 0; }
.plist { list-style: none; padding: 0; margin: 0; }
.plist li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1.5px dashed var(--line-soft); }
.plist li:last-child { border-bottom: 0; }
.plist a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.back { display: inline-block; margin-bottom: 4px; color: var(--muted); }

/* Semana (ganhar/salvar) e adversário */
.segmented {
    display: inline-flex; background: var(--surface); border: 2px solid var(--ink); border-radius: 999px;
    padding: 3px; gap: 3px; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
/* Dentro de um campo: do tamanho dos botões, sem esticar nem quebrar linha */
.field:has(> .segmented) { flex: 0 0 auto; min-width: 0; max-width: 100%; }
.field > .segmented { align-self: flex-start; }
.segmented button {
    background: transparent; border: 2px solid transparent; color: var(--ink); font: inherit; font-weight: 700;
    padding: 6px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.segmented button:hover { background: var(--accent-soft); }
.segmented button.on { background: var(--accent); border-color: var(--ink); }

.week-card { border-top-width: 10px; border-top-color: var(--accent); }
.week-card.is-save {
    border-top-color: var(--save);
    background: repeating-linear-gradient(135deg, var(--surface) 0 16px, #f8f3e6 16px 32px);
}
.week-card.is-save .segmented button.on { background: var(--surface-2); }
.week-card-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.week-card .row-fields { margin-bottom: 0; }

.field.grow { flex: 3; }
.field.small-field { flex: 1; min-width: 120px; }
.field.btn-field { flex: 0 0 auto; min-width: 0; }

.badge {
    display: inline-block; font-size: .7rem; font-weight: 700; padding: 1px 8px;
    border: 1.5px solid var(--ink); border-radius: 99px; margin-left: 6px; vertical-align: middle; white-space: nowrap;
}
.badge.in { background: var(--ok-soft); }
.badge.out { background: var(--bad-soft); }
h1 .badge { font-family: var(--font-body); font-size: .8rem; }

.grid td.out { color: var(--muted); font-style: italic; font-size: .82rem; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(31,27,22,.05) 6px 12px); }
.grid tr.save-row td { color: var(--muted); }

.actions-cell { width: 1%; }
.confirm { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; }

.absent { margin-top: 18px; padding: 16px; border: var(--stroke) dashed var(--ink); border-radius: 14px; background: var(--surface-2); }
.absent h3 { margin: 0 0 4px; font-size: 1.05rem; }
.absent-list { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }

.chart-note { margin: -6px 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--ink); margin-left: 8px; }
.dot:first-child { margin-left: 0; }
.dot.win { background: var(--accent); }
.dot.save { background: var(--muted-bar); }

/* Conta: login e cadastro */
.auth-page { max-width: 480px; margin: 0 auto; padding: 56px 16px 70px; }
.auth-brand { justify-content: center; margin-bottom: 26px; font-size: 1.6rem; }
.auth-card { padding: 26px; }
.auth-card h1 { margin-top: 0; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.auth-card .field { min-width: 0; }
.auth-card .small-field { max-width: 120px; }
.auth-card > p:last-child { margin: 18px 0 0; text-align: center; }
.field-error { color: var(--bad); font-size: .8rem; font-weight: 600; }

/* Entrada suave só no login/cadastro: nas telas interativas o Blazor troca o HTML pré-renderizado e a animação piscaria */
.auth-card { animation: rise .35s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bob { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(4deg) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

#blazor-error-ui {
    background: var(--bad-soft); color: var(--ink); border-top: var(--stroke) solid var(--ink);
    bottom: 0; display: none; left: 0; padding: .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; font-weight: 600;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Celular */
@media (max-width: 860px) {
    /* Um balão com marca + menu rolável, e o "Sair" num balãozinho ao lado */
    /* Instalado na tela inicial, o site ocupa a área do notch: desconta */
    .topbar { align-items: flex-start; padding: max(10px, env(safe-area-inset-top)) 16px 8px; gap: 10px; position: static; background: none; }
    .nav-bubble { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
    .topbar nav { width: 100%; margin: 0 -4px; }
    .topbar nav a { padding: 5px 11px; font-size: .92rem; }
    .account { padding: 6px; }
    .account .who { display: none; }
    .segmented { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .segmented button { padding: 5px 12px; font-size: .9rem; }
    .page { padding: 18px 16px 56px; }
    h1 { font-size: 1.65rem; }
    .card { padding: 16px; }
    .charts, .lists { grid-template-columns: 1fr; }
    .chart-box.tall { height: 380px; }
    .field { min-width: 100%; }
    .field.small-field, .field.btn-field { min-width: calc(50% - 8px); }
    .week-card-head { gap: 8px; }
    .actions.end .btn { flex: 1; justify-content: center; }
}

/* Equipe: R5, R4s, convites e uso do plano */
.kpi small { display: block; margin-top: 2px; font-size: .8rem; }
.meter { height: 10px; margin-top: 8px; background: var(--surface-2); border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-right: 2px solid var(--ink); }
.kpi.bad .meter i { background: var(--bad); }

.team-list { list-style: none; margin: 0; padding: 0; }
.team-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1.5px dashed var(--line-soft); flex-wrap: wrap; }
.team-list li:last-child { border-bottom: 0; }
.team-list .who { flex: 1; min-width: 160px; line-height: 1.3; }
.team-list .who b { display: block; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.role-tag {
    display: inline-grid; place-items: center; min-width: 40px; height: 30px; padding: 0 8px;
    border: 2px solid var(--ink); border-radius: 10px; box-shadow: 2px 2px 0 var(--ink);
    font-family: var(--font-display); font-weight: 800; font-size: .85rem;
}
.role-tag.r5 { background: var(--brand); }
.role-tag.r4 { background: var(--accent); }
.role-tag.pending { background: var(--surface-2); }
.account .role-tag { min-width: 34px; height: 26px; font-size: .78rem; }

.invite-link {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px;
    background: var(--accent-soft); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-sm);
}
.invite-link code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: #fff; }
h3.mt { margin-top: 20px; font-size: 1rem; }

/* Plano e pagamento (Equipe) */
.plan-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.plan-opt {
    display: flex; flex-direction: column; gap: 6px; padding: 16px; border: var(--stroke) solid var(--ink);
    border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm);
}
.plan-opt.best { background: var(--accent-soft); }
.plan-opt h3 { margin: 0; font-size: 1.15rem; }
.plan-opt .amount { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.plan-opt .amount small { font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--muted); }
.plan-opt ul { margin: 4px 0 8px; padding-left: 18px; }
.plan-opt .btn { margin-top: auto; justify-content: center; }
.save-tag { margin-left: 4px; font-size: .7rem; background: var(--ok-soft); border: 1.5px solid var(--ink); border-radius: 99px; padding: 0 6px; }
.sub-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sub-status .who { flex: 1; min-width: 180px; line-height: 1.35; }
.sub-status .who b { display: block; font-size: 1.1rem; }

/* Aviso de reconexão (troca de app no celular, deploy): balão discreto no rodapé, sem travar a tela */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-retrying {
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1001;
    padding: 10px 16px; max-width: calc(100% - 32px);
    background: var(--accent); color: var(--ink); font-weight: 700;
    border: var(--stroke) solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm);
}
#components-reconnect-modal .spin { width: 16px; height: 16px; border: 3px solid var(--ink); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
#components-reconnect-modal .failed, #components-reconnect-modal.components-reconnect-failed .trying { display: none; }
#components-reconnect-modal.components-reconnect-failed .failed { display: inline; }
#components-reconnect-modal button { font: inherit; font-weight: 800; background: var(--surface); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
@keyframes spin { to { transform: rotate(360deg); } }

.view-switch { margin-bottom: 12px; }

/* Celular estreito: no topo cabe só o "VS" ao lado de R5, PT|EN e Sair */
@media (max-width: 420px) {
    .nav-bubble .brand-name { display: none; }
}

/* Botão PT | EN */
.lang-switch {
    display: inline-flex; align-items: stretch; flex: 0 0 auto;
    border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; text-decoration: none;
    font-family: var(--font-mono); font-size: .72rem; font-weight: 700; background: var(--surface);
}
.lang-switch span { display: grid; place-items: center; padding: 4px 8px; color: var(--muted); }
.lang-switch span.on { background: var(--accent); color: var(--ink); }
.lang-switch:hover { background: var(--accent-soft); }
.auth-top { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 26px; }
.auth-top .auth-brand { margin-bottom: 0; }

/* Barra de abas do celular (escondida no computador) */
.tabbar { display: none; }

/* Só no celular */
.mobile-only { display: none; }

@media (max-width: 640px) {
    .mobile-only { display: inline-flex; }
    .hide-sm { display: none; }

    /* Menu: abas fixas no rodapé; em cima fica só a marca e o "Sair" */
    .topbar nav { display: none; }
    .topbar { align-items: center; }
    .nav-bubble { flex: 0 1 auto; min-width: 0; }
    .account { margin-left: auto; flex: 0 0 auto; gap: 8px; }
    .page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    .tabbar {
        display: grid; grid-template-columns: repeat(5, 1fr);
        position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 20;
        background: var(--surface); border: var(--stroke) solid var(--ink); border-radius: 20px; box-shadow: var(--shadow);
        padding: 6px;
    }
    .tabbar a {
        display: flex; flex-direction: column; align-items: center; gap: 1px;
        padding: 6px 2px; border-radius: 14px; border: 2px solid transparent;
        color: var(--ink); text-decoration: none; font-size: .7rem; font-weight: 700;
    }
    .tabbar a:hover { background: none; }
    .tabbar a.active { background: var(--accent); border-color: var(--ink); }
    .tabbar .ti { font-size: 1.25rem; line-height: 1.2; }
    /* O botão de salvar fixo da revisão fica acima das abas */
    .card > .actions.end { bottom: calc(76px + env(safe-area-inset-bottom)); }
    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-retrying { bottom: calc(86px + env(safe-area-inset-bottom)); }

    /* iOS dá zoom em campo com texto menor que 16px */
    input, select, textarea { font-size: 16px; }

    /* Dedo precisa de alvo maior que mouse */
    .btn { min-height: 44px; }
    .btn.sm { min-height: 38px; padding: 6px 13px; }
    .chip .x { padding: 0 6px; font-size: 1.25rem; }
    .lang-switch span { padding: 8px 10px; }
    .check { min-height: 34px; }
    .topbar nav a { padding: 8px 12px; }

    .kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
    .kpi { padding: 12px; }
    .kpi b { font-size: 1.45rem; }
    .grid td, .grid th { padding: 10px 6px; }
    .grid td:first-child, .grid th:first-child { padding-left: 10px; }

    /* Ranking: total ou dias, nunca a tabela inteira */
    .view-switch { margin-bottom: 12px; }
    .ranking.view-total .c-day, .ranking.view-total .c-avg { display: none; }
    .ranking { font-size: .9rem; }
    .ranking td.sticky { white-space: normal; overflow-wrap: break-word; }
    .ranking .c-total, .ranking .c-chg, .ranking .c-day { width: 1%; padding-left: 6px; padding-right: 6px; }
    .ranking td.c-chg { font-size: .75rem; }
    .ranking td.sticky .tier { float: left; margin: 0 6px 0 0; }
    .ranking .rank { padding-right: 2px; }
    .ranking.view-days .c-total, .ranking.view-days .c-avg, .ranking.view-days .c-chg { display: none; }

    /* Revisão do upload: cada linha vira um cartão (nome, jogador, pontos) */
    .review thead { display: none; }
    .review, .review tbody { display: block; }
    .review tr {
        display: grid; grid-template-columns: 30px minmax(0, 1fr) 112px; gap: 8px;
        grid-template-areas: "rank read read" "rank player pts";
        padding: 12px 10px; border-bottom: 1.5px solid var(--line-soft);
    }
    .review td { display: block; padding: 0; border: 0; white-space: normal; background: none !important; }
    .review td.rank { grid-area: rank; font-size: 1rem; padding-top: 2px; }
    .review td.c-read { grid-area: read; }
    .review td.c-player { grid-area: player; }
    .review td.c-pts { grid-area: pts; text-align: left; }
    .review select, .review .pts { min-width: 0; width: 100%; text-align: left; }
    .review tr.row-warn { background: #fffaf0; }
    .review tr.row-new { background: #f6faff; }

    /* Botão de salvar sempre à mão no fim da revisão (lista longa) */
    .card > .actions.end {
        position: sticky; bottom: 0; z-index: 2;
        margin: 16px -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--surface); border-top: 2px solid var(--ink); border-radius: 0 0 var(--radius) var(--radius);
    }

    .team-list .row-actions { width: 100%; }
    .team-list .row-actions .btn { flex: 1; justify-content: center; }
    .confirm { flex-wrap: wrap; }
    .invite-link .btn { flex: 1; justify-content: center; }
    .plan-pick { grid-template-columns: 1fr; }
    .sub-status .btn { flex: 1; justify-content: center; }
}