/* ==========================================================================
   Save de Carreira — folha de estilos
   Identidade: gramado e linhas de cal. Verde do campo como cor principal,
   cartões amarelo e vermelho como sinais, placares em Barlow Condensed.
   ========================================================================== */

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/barlow-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/barlow-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/barlow-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}

/* --- Tokens --------------------------------------------------------------- */

:root {
    color-scheme: light dark;

    --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;

    --bg: #eef2ef;
    --surface: #ffffff;
    --inset: #e7ede9;
    --line: #d3dcd6;
    --line-strong: #aebcb3;
    --ink: #13201a;
    --ink-2: #47584f;
    --ink-3: #64756b;

    --pitch: #0b6b3a;
    --pitch-field: #0b5c33;
    --pitch-tint: #dcefe4;
    --chalk: #f4f7f5;

    --primary: #0b6b3a;
    --primary-hover: #095630;
    --primary-ink: #ffffff;
    --link: #0a6236;
    --focus: #1b5fd9;

    --win-bg: #0b6b3a;
    --win-ink: #ffffff;
    --draw-bg: #f2c230;
    --draw-ink: #2a2200;
    --loss-bg: #c8372d;
    --loss-ink: #ffffff;

    --danger: #b3261e;
    --danger-hover: #951f18;
    --danger-bg: #fbe3e0;
    --warn-bg: #fff5d1;
    --warn-ink: #5a4400;
    --warn-line: #e6d08a;

    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 16px;
    --shadow-pop: 0 14px 36px rgba(10, 30, 20, 0.2);

    --rail-width: 248px;
    --tabbar-height: 64px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0d1411;
        --surface: #141d18;
        --inset: #1b2620;
        --line: #26342c;
        --line-strong: #40534a;
        --ink: #e7eee9;
        --ink-2: #a9baaf;
        --ink-3: #8c9d92;

        --pitch: #0e7a43;
        --pitch-field: #0b5c33;
        --pitch-tint: #173426;

        --primary: #3cb878;
        --primary-hover: #55c98b;
        --primary-ink: #05170d;
        --link: #6fd49e;
        --focus: #8ab4f8;

        --win-bg: #34ad6d;
        --win-ink: #04160c;
        --loss-bg: #e4645a;
        --loss-ink: #1d0503;

        --danger: #f08a82;
        --danger-hover: #f5a39c;
        --danger-bg: #3a1614;
        --warn-bg: #332a0e;
        --warn-ink: #f1da8a;
        --warn-line: #5b4d1c;

        --shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.55);
    }
}

/* --- Base ----------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul,
figure {
    margin: 0;
}

ol,
ul {
    padding: 0;
    list-style: none;
}

h1 {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.005em;
}

h1:focus {
    outline: none;
}

h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

a {
    color: var(--link);
    text-underline-offset: 3px;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.only-narrow {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 14px;
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--ink);
}

.skip-link:focus {
    top: 12px;
}

.icon {
    flex: none;
}

/* --- Marca ---------------------------------------------------------------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}

/* --- Estrutura do aplicativo ---------------------------------------------- */

.shell {
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

.rail {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100vh;
    height: 100dvh;
    padding: 22px 16px 16px;
    border-right: 1px solid var(--line);
    background: var(--surface);
}

.rail-brand {
    padding: 0 8px;
    text-decoration: none;
}

.rail-career {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 12px 14px;
    border-radius: var(--radius-m);
    background: var(--pitch-field);
    color: var(--chalk);
    text-decoration: none;
}

.rail-career-club {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.rail-career-meta {
    font-size: 0.8125rem;
    color: rgba(244, 247, 245, 0.82);
}

.rail-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rail-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--ink-2);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.rail-link:hover {
    background: var(--inset);
    color: var(--ink);
}

.rail-link.active {
    background: var(--pitch-tint);
    color: var(--ink);
    font-weight: 600;
}

.rail-user {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.rail-user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar,
.tabbar {
    display: none;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1080px;
    padding: 32px 36px 56px;
}

/* --- Cabeçalho de página --------------------------------------------------- */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.page-sub {
    margin-top: 4px;
    color: var(--ink-2);
    max-width: 62ch;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-bottom: -8px;
    color: var(--ink-2);
    font-weight: 500;
    text-decoration: none;
}

.back-link:hover {
    color: var(--ink);
}

.summary-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    color: var(--ink-2);
}

.summary-line strong {
    color: var(--ink);
    font-weight: 600;
}

/* --- Botões ---------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--primary);
    color: var(--primary-ink);
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
}

.btn-secondary {
    border-color: var(--line-strong);
    background: var(--surface);
}

.btn-secondary:hover:not(:disabled) {
    border-color: var(--ink-3);
    background: var(--inset);
}

.btn-quiet {
    color: var(--ink-2);
}

.btn-quiet:hover:not(:disabled) {
    background: var(--inset);
    color: var(--ink);
}

.btn-danger {
    background: var(--danger);
    color: var(--surface);
}

.btn-danger:hover:not(:disabled) {
    background: var(--danger-hover);
}

.btn-danger-text {
    color: var(--danger);
}

.btn-danger-text:hover:not(:disabled) {
    background: var(--danger-bg);
    color: var(--danger);
}

.btn-chalk {
    background: var(--chalk);
    color: #0a4526;
}

.btn-chalk:hover {
    background: #ffffff;
}

.btn-lg {
    min-height: 52px;
    padding: 0 24px;
    font-size: 1.0625rem;
}

.btn-block {
    width: 100%;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
}

.icon-button:hover {
    background: var(--inset);
    color: var(--ink);
}

/* --- Painéis ---------------------------------------------------------------- */

.panel {
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.panel-link {
    font-size: 0.9375rem;
    font-weight: 500;
}

.panel-count {
    color: var(--ink-3);
    font-weight: 500;
}

.panel-note {
    color: var(--ink-2);
    font-size: 0.9375rem;
    max-width: 68ch;
}

.columns {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* --- Painel da temporada: o gramado ---------------------------------------- */

.pitch {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 26px 28px;
    border-radius: var(--radius-l);
    color: var(--chalk);
    background-color: var(--pitch-field);
    /* Faixas do corte da grama e as linhas de cal do meio de campo. */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 320' fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M330 -10v340'/%3E%3Ccircle cx='330' cy='160' r='78'/%3E%3Ccircle cx='330' cy='160' r='3' fill='%23ffffff' fill-opacity='.16'/%3E%3Cpath d='M530 70h-70v180h70M530 115h-28v90h28'/%3E%3C/svg%3E"),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 72px, rgba(255, 255, 255, 0) 72px 144px);
    background-repeat: no-repeat, repeat;
    background-position: right center, left top;
    background-size: auto 100%, auto;
}

.pitch-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.pitch-season,
.pitch-manager {
    font-size: 0.9375rem;
    color: rgba(244, 247, 245, 0.86);
}

.pitch-club {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.005em;
    overflow-wrap: anywhere;
}

.pitch-empty {
    max-width: 52ch;
    color: rgba(244, 247, 245, 0.9);
}

.scoreline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 34px;
}

.scoreline-item {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.scoreline dt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: rgba(244, 247, 245, 0.86);
}

.scoreline dd {
    font-family: var(--font-display);
    font-size: 2.375rem;
    font-weight: 700;
    line-height: 0.95;
}

.scoreline-hero dd {
    font-size: 4rem;
}

.scoreline-sep {
    margin: 0 2px;
    opacity: 0.7;
}

.pitch-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.pitch-form-label {
    font-size: 0.875rem;
    color: rgba(244, 247, 245, 0.86);
}

.pitch-form-badges {
    display: inline-flex;
    gap: 6px;
}

.pitch-run {
    padding: 4px 10px;
    border: 1px solid rgba(244, 247, 245, 0.4);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* --- Resultado V / E / D ---------------------------------------------------- */

.outcome {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.outcome-lg {
    width: 32px;
    height: 32px;
    font-size: 1.1875rem;
}

.outcome-v {
    background: var(--win-bg);
    color: var(--win-ink);
}

.outcome-e {
    background: var(--draw-bg);
    color: var(--draw-ink);
}

.outcome-d {
    background: var(--loss-bg);
    color: var(--loss-ink);
}

/* Sobre o gramado, a vitória usa a cal para não sumir no verde. */
.pitch .outcome-v {
    background: var(--chalk);
    color: #0a4526;
}

/* --- Posição ---------------------------------------------------------------- */

.pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 38px;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--inset);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

/* --- Explicação de indicador ------------------------------------------------ */

.tip {
    position: relative;
    display: inline-flex;
}

.tip summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: inherit;
    opacity: 0.85;
    list-style: none;
    cursor: pointer;
}

.tip summary::-webkit-details-marker {
    display: none;
}

.tip summary:hover,
.tip[open] summary {
    opacity: 1;
    background: rgba(127, 127, 127, 0.22);
}

.tip-body {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    width: min(280px, 72vw);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.45;
    box-shadow: var(--shadow-pop);
}

/* --- Primeiros passos ------------------------------------------------------- */

.steps h2 {
    margin-bottom: 8px;
}

.steps-list {
    display: flex;
    flex-direction: column;
}

.step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.step:first-child {
    border-top: 0;
    padding-top: 4px;
}

.step:last-child {
    padding-bottom: 2px;
}

.step-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--line-strong);
    border-radius: 50%;
    color: var(--ink-2);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
}

.step.is-done .step-mark {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-ink);
}

.step-body {
    display: flex;
    flex: 1 1 240px;
    flex-direction: column;
}

.step-title {
    font-weight: 600;
}

.step.is-done .step-title {
    color: var(--ink-2);
}

.step-text {
    color: var(--ink-2);
    font-size: 0.9375rem;
}

/* --- Partidas --------------------------------------------------------------- */

.match-list {
    display: flex;
    flex-direction: column;
}

.match-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 0 -10px;
    padding: 11px 10px;
    border-top: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink);
    text-decoration: none;
}

.match-row:first-child {
    border-top: 0;
}

.match-row:hover {
    background: var(--inset);
    border-radius: 8px;
    border-top-color: transparent;
}

.match-row:hover + .match-row {
    border-top-color: transparent;
}

.match-score {
    min-width: 58px;
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.match-score-sep {
    margin: 0 5px;
    color: var(--ink-3);
    font-size: 1rem;
    font-weight: 600;
}

.match-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.match-opponent {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.match-meta,
.match-scorers {
    color: var(--ink-2);
    font-size: 0.875rem;
}

.match-chevron {
    color: var(--ink-3);
}

/* --- Tabelas ---------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    margin: 0 -6px;
    padding: 0 6px;
}

.data-table,
.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.data-table th,
.data-table td,
.mini-table th,
.mini-table td {
    padding: 10px 10px;
    border-top: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.data-table thead th,
.mini-table thead th {
    padding-top: 4px;
    padding-bottom: 8px;
    border-top: 0;
    color: var(--ink-3);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.data-table tbody th,
.mini-table tbody th,
.data-table tfoot th {
    font-weight: 600;
}

.data-table tfoot th,
.data-table tfoot td {
    border-top: 1px solid var(--line-strong);
    color: var(--ink-2);
}

.data-table .num,
.mini-table td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mini-table {
    margin-top: 14px;
}

.mini-table thead th:not(:first-child) {
    text-align: right;
}

.data-table .strong {
    font-weight: 600;
}

.data-table .is-clickable {
    cursor: pointer;
}

.data-table .is-clickable:hover td,
.data-table .is-clickable:hover th {
    background: var(--inset);
}

.cell-action {
    width: 44px;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    text-align: right !important;
}

/* Larguras fixas mantêm as colunas alinhadas entre os setores. */
.squad-table {
    table-layout: fixed;
}

.squad-table th:nth-child(1) {
    width: 48px;
}

.squad-table th:nth-child(3) {
    width: 72px;
}

.squad-table th:nth-child(4),
.squad-table th:nth-child(6) {
    width: 74px;
}

.squad-table th:nth-child(5) {
    width: 96px;
    padding-right: 40px;
}

.squad-table th:nth-child(7),
.squad-table th:nth-child(8) {
    width: 52px;
}

.squad-table th:nth-child(9) {
    width: 52px;
}

.squad-table .col-shirt {
    color: var(--ink-3);
}

.sector-table {
    table-layout: fixed;
    max-width: 760px;
}

.sector-table th:not(:first-child) {
    width: 18%;
}

.player-name {
    display: block;
    overflow-wrap: break-word;
}

.player-nation {
    display: block;
    color: var(--ink-3);
    font-size: 0.8125rem;
    font-weight: 400;
}

/* --- Rankings --------------------------------------------------------------- */

.rankings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.rankings h3 {
    margin-bottom: 6px;
    color: var(--ink-2);
    font-weight: 500;
}

.ranking li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}

.ranking li:first-child {
    border-top: 0;
}

.ranking-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ranking-value {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
}

.rankings + .panel-note {
    margin-top: 12px;
}

/* --- Pontos de atenção ------------------------------------------------------ */

.alerts {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.alerts h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.alert-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--warn-line);
    border-radius: var(--radius-m);
    background: var(--warn-bg);
    color: var(--warn-ink);
}

.alert-icon {
    margin-top: 2px;
}

.alert-title {
    font-weight: 600;
}

.alert-detail {
    font-size: 0.9375rem;
}

.alert-rule {
    margin-top: 4px;
    font-size: 0.8125rem;
    opacity: 0.85;
}

/* --- Estado vazio ----------------------------------------------------------- */

.empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 34px 30px;
    border: 1.5px dashed var(--line-strong);
    border-radius: 12px;
}

.empty-title {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
}

.empty-text {
    max-width: 58ch;
    color: var(--ink-2);
}

.empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* --- Formulários ------------------------------------------------------------ */

.form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.form-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-intro {
    color: var(--ink-2);
    max-width: 64ch;
}

.form-intro strong {
    color: var(--ink);
    font-weight: 600;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    font-size: 0.9375rem;
    font-weight: 600;
}

.field-optional {
    color: var(--ink-3);
    font-size: 0.8125rem;
    font-weight: 400;
}

.field-hint {
    color: var(--ink-2);
    font-size: 0.875rem;
}

.field-error,
.form-error {
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 500;
}

.form-error {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--danger-bg);
    font-size: 0.9375rem;
}

.input {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
}

.input::placeholder {
    color: var(--ink-3);
    opacity: 1;
}

.input:disabled {
    background: var(--inset);
    color: var(--ink-3);
}

.input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 0;
    border-color: transparent;
}

.field-invalid .input {
    border-color: var(--danger);
}

.input-short {
    max-width: 180px;
}

.textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.45;
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    cursor: pointer;
}

.check input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.form-actions-spacer {
    flex: 1;
}

/* Controle segmentado */

.segmented {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--inset);
}

.segmented-option {
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-2);
    font-weight: 500;
    cursor: pointer;
}

.segmented-option.is-selected {
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--line-strong);
}

/* Contador de gols */

.stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-m);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.stepper-btn:hover:not(:disabled) {
    background: var(--inset);
}

.stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.stepper-value {
    min-width: 60px;
    font-family: var(--font-display);
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

/* Placar do formulário de partida */

.match-form {
    max-width: 760px;
}

.scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.scoreboard-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.scoreboard-team {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    overflow-wrap: anywhere;
}

.scoreboard-opponent {
    width: 100%;
}

.scoreboard-opponent .input {
    font-weight: 600;
    text-align: center;
}

.scoreboard-opponent .field-error {
    margin-top: 6px;
    text-align: center;
}

.scoreboard-x {
    padding-bottom: 12px;
    color: var(--ink-3);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
}

.goals {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 16px 18px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.goals legend {
    padding: 0 6px;
    font-size: 0.9375rem;
    font-weight: 600;
}

.goal-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.goal-number {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink-2);
}

.more {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.more summary {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 18px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
}

.more-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 18px 18px;
}

/* --- Janela (diálogo) ------------------------------------------------------- */

/* Com uma janela aberta, a página ao fundo não rola. */
body:has(.overlay) {
    overflow: hidden;
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 20, 14, 0.58);
    animation: overlay-in 140ms ease-out;
}

.dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: calc(100dvh - 40px);
    border-radius: var(--radius-l);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    animation: dialog-in 160ms ease-out;
}

.dialog:focus {
    outline: none;
}

.dialog-wide {
    max-width: 660px;
}

.dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 14px 8px 22px;
}

.dialog-head h2 {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
}

.dialog-body {
    padding: 8px 22px 22px;
    overflow-y: auto;
}

@keyframes overlay-in {
    from {
        opacity: 0;
    }
}

@keyframes dialog-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* Lista colada de jogadores */

.bulk-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bulk-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.9375rem;
}

.bulk-summary strong {
    font-weight: 600;
}

.bulk-problems {
    color: var(--danger);
    font-weight: 500;
}

.bulk-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.bulk-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    font-size: 0.9375rem;
}

.bulk-list li:first-child {
    border-top: 0;
}

.bulk-list .is-invalid {
    background: var(--danger-bg);
}

.bulk-name {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.bulk-meta,
.bulk-line-number {
    color: var(--ink-2);
    font-size: 0.875rem;
}

.bulk-error {
    flex-basis: 100%;
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 500;
}

/* --- Avisos ----------------------------------------------------------------- */

.toasts {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(420px, calc(100vw - 32px));
    transform: translateX(-50%);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px 10px 14px;
    border-radius: var(--radius-m);
    background: var(--ink);
    color: var(--bg);
    font-size: 0.9375rem;
    font-weight: 500;
    box-shadow: var(--shadow-pop);
    pointer-events: auto;
    animation: toast-in 160ms ease-out;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.toast span {
    flex: 1;
}

.toast .icon-button {
    width: 32px;
    height: 32px;
    color: inherit;
}

.toast .icon-button:hover {
    background: rgba(127, 127, 127, 0.3);
    color: inherit;
}

.toast-error {
    background: var(--danger);
    color: var(--surface);
}

/* --- Carregando -------------------------------------------------------------- */

.loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 28px 4px;
    color: var(--ink-2);
}

.loading-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    animation: pulse 900ms ease-in-out infinite alternate;
}

@keyframes pulse {
    from {
        opacity: 0.25;
        transform: scale(0.8);
    }
}

/* --- Carreiras --------------------------------------------------------------- */

.career-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.career {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.career.is-open {
    border-color: var(--primary);
    box-shadow: inset 4px 0 0 var(--primary);
}

.career-main {
    flex: 1 1 320px;
    min-width: 0;
}

.career-club {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.career-name {
    font-weight: 600;
}

.career-meta,
.career-record {
    color: var(--ink-2);
    font-size: 0.9375rem;
}

.career-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.career-open-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--link);
    font-size: 0.9375rem;
    font-weight: 600;
}

.career-setup {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.career-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 24px 26px;
    border-radius: var(--radius-l);
    background-color: var(--pitch-field);
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 72px, rgba(255, 255, 255, 0) 72px 144px);
    color: var(--chalk);
}

.career-preview-note {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(244, 247, 245, 0.3);
    font-size: 0.9375rem;
    color: rgba(244, 247, 245, 0.9);
}

/* --- Páginas públicas -------------------------------------------------------- */

.public {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.public-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 18px 28px;
}

.public-head a {
    text-decoration: none;
}

.public-nav {
    display: flex;
    gap: 8px;
}

.public-main {
    flex: 1;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 28px 28px 56px;
}

.public-foot {
    padding: 20px 28px 28px;
    color: var(--ink-3);
    font-size: 0.875rem;
    text-align: center;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: center;
    padding: 28px 0 44px;
}

.hero h1 {
    font-size: clamp(2.75rem, 6vw, 4.5rem);
    line-height: 0.98;
    max-width: 13ch;
}

.hero-text {
    margin-top: 18px;
    max-width: 44ch;
    color: var(--ink-2);
    font-size: 1.1875rem;
    line-height: 1.5;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.hero-demo figcaption {
    margin-top: 10px;
    color: var(--ink-3);
    font-size: 0.875rem;
}

.points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.point h2 {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
}

.point p {
    margin-top: 8px;
    color: var(--ink-2);
}

.auth {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 440px;
    margin: 24px auto 0;
}

.auth-sub {
    margin-top: -6px;
    color: var(--ink-2);
}

.auth-alt {
    color: var(--ink-2);
}

.notice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    max-width: 520px;
    margin: 48px auto 0;
}

.notice p {
    color: var(--ink-2);
}

/* --- Reconexão --------------------------------------------------------------- */

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal {
    width: min(360px, calc(100vw - 32px));
    margin: 20vh auto;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-pop);
}

#components-reconnect-modal::backdrop {
    background: rgba(8, 20, 14, 0.5);
}

.reconnect {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* --- Temporada: navegação e troca de temporada ------------------------------ */

.season-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 16px;
    border: 1px solid var(--warn-line);
    border-radius: var(--radius-m);
    background: var(--warn-bg);
    color: var(--warn-ink);
}

.season-banner p {
    flex: 1 1 320px;
    font-size: 0.9375rem;
}

.season-banner strong {
    font-weight: 600;
}

.subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    border-bottom: 1px solid var(--line);
}

.subnav-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: -1px;
}

.subnav-tab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-bottom: 3px solid transparent;
    color: var(--ink-2);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.subnav-tab:hover {
    color: var(--ink);
}

.subnav-tab.active {
    border-bottom-color: var(--primary);
    color: var(--ink);
    font-weight: 600;
}

.season-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
}

.season-switch-label {
    color: var(--ink-2);
    font-size: 0.875rem;
    white-space: nowrap;
}

.season-switch .input {
    width: auto;
    min-width: 200px;
    min-height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.btn-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--link);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.muted {
    color: var(--ink-3);
}

/* --- Objetivos -------------------------------------------------------------- */

.objective-list {
    display: flex;
    flex-direction: column;
}

.objective {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}

.objective:first-child {
    border-top: 0;
}

.objective-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
}

.objective.is-met .objective-mark {
    border-color: var(--win-bg);
    background: var(--win-bg);
    color: var(--win-ink);
}

.objective.is-missed .objective-mark {
    border-color: var(--loss-bg);
    background: var(--loss-bg);
    color: var(--loss-ink);
}

.objective-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.objective.is-missed .objective-text {
    color: var(--ink-2);
}

.objective-status {
    flex: none;
    width: auto;
    min-height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.objective-state {
    flex: none;
    color: var(--ink-2);
    font-size: 0.875rem;
}

.objective.is-met .objective-state {
    color: var(--link);
    font-weight: 600;
}

.objective-list-compact .objective {
    padding: 10px 0;
}

.inline-add {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.inline-add .input {
    flex: 1;
    min-width: 0;
}

/* --- Competições e títulos --------------------------------------------------- */

.competition-table th:nth-child(n + 2):nth-child(-n + 6) {
    width: 58px;
}

.competition-table th:nth-child(8) {
    width: 52px;
}

.title-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border: 1px solid var(--warn-line);
    border-radius: 999px;
    background: var(--warn-bg);
    color: var(--warn-ink);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.title-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.title-list {
    display: flex;
    flex-direction: column;
}

.title-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.title-list li:first-child {
    border-top: 0;
}

.title-list-icon {
    align-self: center;
    color: var(--warn-ink);
}

.title-list-name {
    font-weight: 600;
}

.title-list-meta {
    color: var(--ink-2);
    font-size: 0.9375rem;
}

.pitch-titles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.pitch-titles li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 9px;
    border-radius: 999px;
    background: var(--draw-bg);
    color: var(--draw-ink);
    font-size: 0.875rem;
    font-weight: 600;
}

.career-titles {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

.manage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
}

.manage > div:first-child {
    flex: 1 1 340px;
}

.manage .panel-note {
    margin-top: 4px;
}

.manage .panel-note strong {
    color: var(--ink);
    font-weight: 600;
}

.manage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* --- Nova temporada: quem segue no elenco ------------------------------------ */

.carry {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.carry legend {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.carry-count {
    color: var(--ink-3);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.carry-tools {
    display: flex;
    gap: 18px;
}

.carry-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    max-height: 300px;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow-y: auto;
}

.carry-item {
    display: flex;
    width: 100%;
    min-height: 44px;
    padding: 4px 0;
}

.carry-name {
    flex: 1 0 auto;
    max-width: 60%;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carry-meta {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--ink-3);
    font-size: 0.8125rem;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Transferências ---------------------------------------------------------- */

.money-line {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.money-line > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.money-line dt {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    color: var(--ink-2);
    font-size: 0.875rem;
}

.money-line dd {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.money-line .is-negative dd {
    color: var(--danger);
}

.columns-even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transfer-list {
    display: flex;
    flex-direction: column;
}

.transfer-list li {
    border-top: 1px solid var(--line);
}

.transfer-list li:first-child {
    border-top: 0;
}

.transfer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% + 12px);
    margin: 0 -6px;
    padding: 10px 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.transfer:hover {
    background: var(--inset);
}

.transfer-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.transfer-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.transfer-meta {
    color: var(--ink-2);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.transfer-fee {
    flex: none;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.transfer-fee-none {
    color: var(--ink-3);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
}

.transfer-fixed {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--inset);
}

.transfer-fixed strong {
    font-weight: 600;
}

.transfer-fixed span {
    color: var(--ink-2);
    font-size: 0.9375rem;
}

/* --- Histórico da carreira --------------------------------------------------- */

.season-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.season-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.season-card.is-shown {
    border-color: var(--primary);
    box-shadow: inset 4px 0 0 var(--primary);
}

.season-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.season-card-label {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.05;
}

.season-card-club {
    color: var(--ink-2);
    font-weight: 500;
}

.season-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 34px;
}

.season-stats > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.season-stats dt {
    color: var(--ink-3);
    font-size: 0.8125rem;
}

.season-stats dd {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.season-stats-sep {
    color: var(--ink-3);
    font-weight: 600;
}

.season-card-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    color: var(--ink-2);
    font-size: 0.9375rem;
}

.season-card-notes strong {
    color: var(--ink);
    font-weight: 600;
}

/* --- Elenco: situação, evolução e trajetória ---------------------------------- */

.squad-away .data-table {
    color: var(--ink-2);
}

/* A variação ocupa sempre o mesmo espaço, para as avaliações ficarem alinhadas. */
.ovr {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.ovr-change {
    display: inline-flex;
    align-items: center;
    width: 26px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.ovr-change.is-up {
    color: var(--link);
}

.ovr-change.is-down {
    color: var(--danger);
}

.player-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.player-history .mini-table {
    margin-top: 0;
}

.player-history .player-nation {
    display: inline;
    margin-left: 6px;
}

.player-moves {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9375rem;
}

.player-moves li {
    display: flex;
    gap: 10px;
}

.player-moves-season {
    flex: none;
    min-width: 64px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* --- Conta ------------------------------------------------------------------- */

.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-m);
    background: var(--pitch-tint);
    color: var(--ink);
    font-weight: 500;
}

.flash .icon {
    flex: none;
    color: var(--link);
}

.account-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
}

.account-section .form-actions {
    margin-top: 0;
}

.readonly-value {
    padding: 9px 0 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.account-danger {
    border-color: var(--danger);
}

.account-danger h2 {
    color: var(--danger);
}

.public-main > .flash {
    max-width: 640px;
    margin: 0 auto 8px;
}

/* --- Elenco: posições secundárias e recém-chegados ---------------------------- */

.pos-extra {
    display: block;
    margin-top: 3px;
    color: var(--ink-3);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.bulk-list .pos-extra {
    display: inline;
    margin-top: 0;
}

.tag-new {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--pitch-tint);
    color: var(--link);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: 1px;
    white-space: nowrap;
}

.chips-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.chips-field legend {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink-2);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
}

.chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.chip:hover {
    border-color: var(--ink-3);
    color: var(--ink);
}

.chip.is-on {
    border-color: var(--primary);
    background: var(--pitch-tint);
    color: var(--ink);
}

.chip:has(input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* --- Termos de uso e política de privacidade ----------------------------------- */

.legal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 720px;
    margin: 16px auto 0;
    line-height: 1.6;
}

.legal h2 {
    margin-top: 14px;
    font-size: 1.125rem;
}

.legal ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 22px;
    list-style: disc;
}

.legal strong {
    font-weight: 600;
}

.legal-date {
    margin-top: -6px;
    color: var(--ink-2);
    font-size: 0.9375rem;
}

.legal-pending {
    padding: 10px 14px;
    border: 1px solid var(--warn-line);
    border-radius: var(--radius-m);
    background: var(--warn-bg);
    color: var(--warn-ink);
}

.legal-links {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.public-foot-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    margin-top: 6px;
}

.consent {
    text-align: center;
}

.install-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ink-2);
    font-size: 0.9375rem;
}

.install-steps strong {
    color: var(--ink);
    font-weight: 600;
}

/* --- Telas menores ----------------------------------------------------------- */

@media (max-width: 1020px) {
    .columns,
    .columns-even,
    .career-setup {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding-top: 12px;
    }

    .points {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
}

@media (max-width: 860px) {
    .shell {
        display: block;
    }

    .rail {
        display: none;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 56px;
        padding: 8px 16px;
        border-bottom: 1px solid var(--line);
        background: var(--surface);
    }

    .topbar-brand {
        text-decoration: none;
    }

    .topbar-brand .brand-name {
        display: none;
    }

    .topbar-career {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
        color: var(--ink);
        line-height: 1.15;
        text-decoration: none;
    }

    .topbar-club {
        overflow: hidden;
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-season {
        color: var(--ink-2);
        font-size: 0.8125rem;
    }

    .menu {
        position: relative;
        margin-left: auto;
    }

    .menu summary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--pitch-tint);
        color: var(--ink);
        font-weight: 600;
        list-style: none;
        cursor: pointer;
    }

    .menu summary::-webkit-details-marker {
        display: none;
    }

    .menu-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 50;
        width: 230px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        background: var(--surface);
        box-shadow: var(--shadow-pop);
    }

    .menu-name {
        padding: 6px 10px 8px;
        color: var(--ink-3);
        font-size: 0.875rem;
        overflow-wrap: anywhere;
    }

    .menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        padding: 0 10px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--ink);
        font-weight: 500;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .menu-item:hover {
        background: var(--inset);
    }

    .content {
        gap: 16px;
        padding: 18px 16px calc(var(--tabbar-height) + 36px + env(safe-area-inset-bottom));
    }

    .tabbar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--line);
        background: var(--surface);
    }

    .tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--ink-3);
        font-size: 0.75rem;
        font-weight: 500;
        text-decoration: none;
    }

    .tab.active {
        color: var(--link);
        font-weight: 600;
    }

    .tab-action-circle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        margin-top: -18px;
        border: 4px solid var(--surface);
        border-radius: 50%;
        background: var(--primary);
        color: var(--primary-ink);
        box-sizing: content-box;
    }

    .toasts {
        top: 64px;
        bottom: auto;
    }

    .subnav {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 10px;
    }

    .subnav-tabs {
        overflow-x: auto;
    }

    .subnav-tab {
        flex: 1;
        justify-content: center;
        padding: 0 8px;
    }

    .season-switch {
        padding-bottom: 0;
    }

    .season-switch .input {
        flex: 1;
        width: 0;
        min-width: 0;
    }

    .season-card,
    .money-line {
        padding: 16px;
    }

    h1 {
        font-size: 2rem;
    }

    .panel {
        padding: 16px;
    }

    .pitch {
        padding: 20px 18px;
        background-size: auto 70%, auto;
        background-position: right bottom, left top;
    }

    .scoreline {
        gap: 12px 22px;
    }

    .scoreline-hero {
        flex-basis: 100%;
    }

    .scoreline dd {
        font-size: 2rem;
    }

    .scoreline-hero dd {
        font-size: 3.5rem;
    }

    .public-head,
    .public-main {
        padding-right: 16px;
        padding-left: 16px;
    }

    .overlay {
        align-items: flex-end;
        padding: 0;
    }

    .dialog,
    .dialog-wide {
        max-width: none;
        max-height: 92dvh;
        border-radius: var(--radius-l) var(--radius-l) 0 0;
    }

    .dialog-body {
        padding-bottom: calc(22px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 560px) {
    .only-wide {
        display: none;
    }

    .only-narrow {
        display: inline;
    }

    .page-actions,
    .empty-actions {
        width: 100%;
    }

    .page-actions .btn,
    .empty-actions .btn {
        flex: 1 1 auto;
    }

    .empty {
        padding: 24px 18px;
    }

    .rankings {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-row-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .scoreboard {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 18px 14px;
    }

    .scoreboard-x {
        display: none;
    }

    .scoreboard-side {
        flex-direction: row;
        justify-content: space-between;
        gap: 12px;
    }

    .scoreboard-team {
        text-align: left;
    }

    .scoreboard-opponent .input,
    .scoreboard-opponent .field-error {
        text-align: left;
    }

    .stepper-btn {
        width: 44px;
        height: 44px;
    }

    .stepper-value {
        min-width: 46px;
        font-size: 2.75rem;
    }

    .goal-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding-top: 10px;
        border-top: 1px solid var(--line);
    }

    .goal-row:first-of-type {
        padding-top: 0;
        border-top: 0;
    }

    .competition-table .col-detail {
        display: none;
    }

    .objective {
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .objective-text {
        flex: 1 1 calc(100% - 40px);
    }

    .objective-status {
        flex: 1;
        margin-left: 34px;
    }

    .objective-list-compact .objective-state {
        flex-basis: 100%;
        margin-left: 34px;
    }

    .carry-list {
        grid-template-columns: minmax(0, 1fr);
        max-height: 260px;
    }

    .money-line {
        gap: 12px 26px;
    }

    .money-line dd {
        font-size: 1.625rem;
    }

    .season-stats {
        gap: 12px 22px;
    }

    .season-stats dd {
        font-size: 1.375rem;
    }

    .season-card-head .btn,
    .manage-actions .btn,
    .season-banner .btn {
        flex: 1 1 auto;
    }

    .manage-actions {
        width: 100%;
    }

    .ovr {
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
    }

    .ovr-change {
        width: auto;
        justify-content: flex-end;
    }

    .ovr-change:empty {
        display: none;
    }

    /* No celular ficam nome, posição, geral, gols e assistências; o restante aparece ao editar. */
    .squad-table .col-shirt,
    .squad-table .col-potential,
    .squad-table .col-age {
        display: none;
    }

    .squad-table th:nth-child(3) {
        width: 52px;
    }

    .squad-table th:nth-child(5) {
        width: 48px;
        padding-right: 6px;
    }

    .squad-table th:nth-child(7),
    .squad-table th:nth-child(8) {
        width: 30px;
    }

    .squad-table th:nth-child(9) {
        width: 40px;
    }

    .squad-table .icon-button {
        width: 32px;
        height: 36px;
    }

    .data-table th,
    .data-table td {
        padding-right: 6px;
        padding-left: 6px;
    }

    .form-actions .btn {
        flex: 1 1 auto;
    }

    /* Em formulários longos, salvar fica sempre ao alcance do polegar. */
    .form-actions-sticky {
        position: sticky;
        bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
        z-index: 5;
        margin: 0 -16px;
        padding: 10px 16px;
        border-top: 1px solid var(--line);
        background: var(--bg);
    }

    .form-actions-spacer {
        display: none;
    }

    .hero-actions .btn {
        flex: 1 1 100%;
    }

    .public-nav .btn-quiet {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}