/* =====================================================
   PHP UNITED — DESIGN SYSTEM
   Preto & roxo · Sora (display) + Inter (corpo)
   ===================================================== */

/* ===========================
   TOKENS
=========================== */
:root {
    /* superfícies */
    --fundo:        #0a0812;
    --fundo-card:   #131020;
    --fundo-input:  #1c1730;
    --fundo-inset:  #0e0b1a;
    --borda:        #292144;
    --borda-forte:  #3d3266;

    /* marca */
    --roxo:         #8b5cf6;
    --roxo-forte:   #7c3aed;
    --roxo-escuro:  #4c1d95;
    --roxo-suave:   #c4b5fd;
    --roxo-brilho:  rgba(139, 92, 246, 0.35);

    /* texto */
    --texto:        #ece8f8;
    --texto-suave:  #9d93bf;

    /* semântico */
    --verde:        #34d399;
    --vermelho:     #f87171;
    --ouro:         #facc15;
    --azul:         #60a5fa;

    /* cards de agenda / proximo compromisso */
    --home-match-bg-start: #0f172a;
    --home-match-bg-mid:   #0d1e18;
    --home-match-bg-end:   #1c1522;
    --home-match-border:   #224237;
    --home-match-surface:  #1f2937;

    /* forma */
    --radius:       12px;
    --radius-sm:    8px;
    --sombra:       0 10px 30px rgba(0, 0, 0, 0.45);
    --sombra-roxa:  0 4px 20px rgba(124, 58, 237, 0.35);

    /* tipografia */
    --fonte-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
    --fonte-corpo:   'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ===========================
   RESET & BASE
=========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

img { max-width: 100%; height: auto; }

html {
    scrollbar-color: var(--borda-forte) var(--fundo);
    background: var(--fundo);
}

body {
    font-family: var(--fonte-corpo);
    background-color: var(--fundo);
    background-image:
        radial-gradient(ellipse 80% 40% at 50% -10%, rgba(124, 58, 237, 0.16), transparent 70%);
    background-repeat: no-repeat;
    color: var(--texto);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

body.app-loading {
    overflow: hidden;
}

body.ajax-loading {
    cursor: progress;
}

body.ajax-loading .container {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

/* Barra de progresso fina no topo, usada nas trocas de pagina via AJAX
   no lugar do overlay de tela cheia (mais fluido, nao bloqueia a leitura). */
.ajax-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 100000;
    background: linear-gradient(90deg, var(--roxo-forte), var(--roxo), var(--roxo-suave));
    box-shadow: 0 0 8px var(--roxo-brilho);
    opacity: 0;
    pointer-events: none;
}

.ajax-progress-bar--ativa {
    opacity: 1;
    width: 78%;
    transition: width 2.2s cubic-bezier(0.15, 0.8, 0.3, 1), opacity 0.15s ease;
}

.ajax-progress-bar--concluir {
    width: 100%;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.25s ease 0.05s;
}

@media (prefers-reduced-motion: reduce) {
    .ajax-progress-bar--ativa,
    .ajax-progress-bar--concluir {
        transition-duration: 0.01ms;
    }
}

/* Transicao suave de conteudo entre paginas (View Transitions API).
   Sem suporte no browser, cai no fade via body.ajax-loading acima. */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: paginaSai 0.16s ease both;
    }

    ::view-transition-new(root) {
        animation: paginaEntra 0.22s ease both;
    }
}

@keyframes paginaSai {
    to { opacity: 0; transform: translateY(-4px); }
}

@keyframes paginaEntra {
    from { opacity: 0; transform: translateY(6px); }
}

.app-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 12% 58%, rgba(34, 211, 238, 0.12), transparent 18%),
        radial-gradient(circle at 86% 16%, rgba(52, 211, 153, 0.1), transparent 20%),
        rgba(2, 2, 7, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

body:not(.app-loading) .app-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-loader-mark {
    position: relative;
    width: 128px;
    height: 128px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.1));
}

.app-loader-mark:not(.app-loader-mark-auth) {
    animation: appLoaderSpin 0.85s linear infinite;
}

.app-loader-line,
.app-loader-ring,
.app-loader-dot {
    position: absolute;
    display: block;
}

.app-loader-line {
    display: none;
}

.app-loader-ring {
    width: 94px;
    height: 94px;
    border: 6px solid rgba(156, 165, 178, 0.86);
    border-radius: 50%;
    background: rgba(9, 16, 32, 0.28);
}

.app-loader-dot {
    top: 20px;
    right: 18px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.6),
        0 8px 24px rgba(255, 255, 255, 0.24);
}

@keyframes appLoaderSpin {
    to { transform: rotate(360deg); }
}

body.tema-verde {
    --fundo:        #06110d;
    --fundo-card:   #0f1f18;
    --fundo-input:  #172b22;
    --fundo-inset:  #091710;
    --borda:        #214838;
    --borda-forte:  #2d6a52;
    --roxo:         #22c55e;
    --roxo-forte:   #16a34a;
    --roxo-escuro:  #14532d;
    --roxo-suave:   #86efac;
    --roxo-brilho:  rgba(34, 197, 94, 0.32);
    --texto:        #edfdf4;
    --texto-suave:  #9fcbb2;
    --verde:        #34d399;
    --home-match-bg-start: #06110d;
    --home-match-bg-mid:   #0d2a1c;
    --home-match-bg-end:   #172b22;
    --home-match-border:   #2d6a52;
    --home-match-surface:  #173a2a;
}

body.tema-claro {
    --fundo:        #f4f1fb;
    --fundo-card:   #ffffff;
    --fundo-input:  #eee8fb;
    --fundo-inset:  #e7def8;
    --borda:        #d8cdf1;
    --borda-forte:  #bca9e5;
    --roxo:         #7c3aed;
    --roxo-forte:   #6d28d9;
    --roxo-escuro:  #4c1d95;
    --roxo-suave:   #6d28d9;
    --roxo-brilho:  rgba(124, 58, 237, 0.22);
    --texto:        #171125;
    --texto-suave:  #63577c;
    --verde:        #059669;
    --vermelho:     #dc2626;
    --ouro:         #b45309;
    --azul:         #2563eb;
    --home-match-bg-start: #ffffff;
    --home-match-bg-mid:   #f6f3fb;
    --home-match-bg-end:   #eefdf7;
    --home-match-border:   #d8cdf1;
    --home-match-surface:  #f0eaff;
}

body.tema-claro .app-topbar,
body.tema-claro .bottom-nav,
body.tema-claro .preferences-menu {
    background: rgba(255, 255, 255, 0.94);
}

body.tema-claro .bottom-nav a.ativo,
body.tema-claro .btn-primary {
    color: #fff;
}

body.tema-custom {
    background-image:
        radial-gradient(ellipse 80% 40% at 50% -10%, color-mix(in srgb, var(--roxo) 18%, transparent), transparent 70%);
}

body.tema-custom .app-topbar,
body.tema-custom .bottom-nav {
    background: color-mix(in srgb, var(--custom-nav-bg, var(--fundo-card)) 94%, transparent);
}

body.tema-custom .bottom-nav {
    background: color-mix(in srgb, var(--custom-bottom-nav-bg, var(--fundo-card)) 94%, transparent);
}

body.tema-custom .preferences-menu {
    background: color-mix(in srgb, var(--custom-dropdown-bg, var(--fundo-card)) 98%, transparent);
}

body.tema-custom .modal-box,
body.tema-custom .avatar-crop-panel {
    background: var(--custom-modal-bg, var(--fundo-card));
}

body.tema-custom h1,
body.tema-custom h2,
body.tema-custom h3,
body.tema-custom .page-header h1 {
    color: var(--custom-header-color, var(--texto));
}

body.tema-custom svg.lucide {
    color: var(--custom-icon-color, currentColor);
}

body.tema-custom .btn-primary,
body.tema-custom .btn-sortear,
body.tema-custom .btn-embaralhar {
    background: linear-gradient(135deg, var(--custom-button-bg, var(--roxo-forte)), var(--roxo));
    color: var(--custom-button-text, #fff);
}

body.tema-custom .navbar-menu a:hover,
body.tema-custom .preferences-menu a:hover,
body.tema-custom .bottom-nav a:hover,
body.tema-custom .preferencias-tabs a:hover {
    background: var(--custom-hover-bg, var(--fundo-input));
}

body.tema-custom .navbar-menu a.ativo,
body.tema-custom .bottom-nav a.ativo,
body.tema-custom .preferencias-tabs a.ativo {
    background: color-mix(in srgb, var(--custom-active-bg, var(--roxo-escuro)) 82%, transparent);
}

body.tema-custom button:disabled,
body.tema-custom input:disabled,
body.tema-custom select:disabled {
    color: var(--custom-disabled-color, var(--texto-suave));
}

body.tema-custom progress,
body.tema-custom .passo-barra span,
body.tema-custom .perfil-avatar-spinner {
    accent-color: var(--custom-progress-bg, var(--roxo));
}

body.tema-custom .preferences-badge,
body.tema-custom .nav-badge,
body.tema-custom .home-shortcut-badge {
    background: var(--custom-badge-bg, var(--verde));
}

a { color: var(--roxo-suave); text-decoration: none; }
a:hover { color: var(--roxo); }

h1, h2, h3,
.stat-valor,
.navbar-brand {
    font-family: var(--fonte-display);
    letter-spacing: -0.01em;
}

:focus-visible {
    outline: 2px solid var(--roxo);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--roxo-forte); color: #fff; }

/* ===========================
   ÍCONES (Lucide)
=========================== */
svg.lucide {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    vertical-align: -0.15em;
    stroke-width: 2;
}

.posicao-glove-icon {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.navbar-menu a svg.lucide { width: 15px; height: 15px; opacity: 0.75; }
.navbar-menu a.ativo svg.lucide { opacity: 1; }
.stat-icon svg.lucide { width: 20px; height: 20px; color: var(--roxo-suave); }
.badge-posicao svg.lucide,
.badge-posicao .posicao-glove-icon { width: 12px; height: 12px; }
.avaliacao-btn svg.lucide { width: 14px; height: 14px; }
.badge-like-stat svg.lucide,
.badge-neutral-stat svg.lucide,
.badge-dislike-stat svg.lucide { width: 12px; height: 12px; fill: currentColor; }
.jogadores-acoes svg.lucide,
.btn-acao svg.lucide { width: 15px; height: 15px; }
.campo-busca-jogadores svg.lucide { width: 16px; height: 16px; opacity: 0.7; }
.jogadores-icon svg.lucide { width: 16px; height: 16px; }
.jc-editar svg.lucide { width: 13px; height: 13px; }
.il-titulo svg.lucide { width: 14px; height: 14px; }

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

/* ===========================
   NAVBAR
=========================== */
.navbar {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 0.75rem 2rem;
    background: rgba(10, 8, 18, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--borda);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--texto);
    white-space: nowrap;
}

.navbar-brand img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.navbar-brand .brand-dot { color: var(--roxo); }

.navbar-menu {
    display: flex;
    gap: 0.2rem;
    list-style: none;
    flex: 1;
    flex-wrap: wrap;
}

.navbar-menu a {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.navbar-menu a:hover {
    background: var(--fundo-input);
    color: var(--texto);
}

.navbar-menu a.ativo {
    background: rgba(139, 92, 246, 0.15);
    color: var(--roxo-suave);
    font-weight: 600;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--texto-suave);
    white-space: nowrap;
    margin-left: auto;
}

.navbar-user .usuario-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    color: var(--texto);
    font-weight: 600;
    font-size: 0.82rem;
}

.navbar-user .usuario-chip .perfil {
    color: var(--roxo-suave);
    font-weight: 500;
    text-transform: capitalize;
}

.moedas-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0.28rem 0.7rem;
    border: 1px solid rgba(250, 204, 21, 0.3);
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.1);
    color: var(--ouro);
    font-weight: 900;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.moedas-chip svg {
    width: 16px;
    height: 16px;
}

.user-preferences {
    position: relative;
    display: inline-flex;
    z-index: 360;
}

.preferences-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--fundo-input);
    color: var(--texto-suave);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}

.preferences-toggle:hover,
.preferences-toggle[aria-expanded="true"] {
    color: #fff;
    border-color: rgba(168, 85, 247, 0.55);
    background: rgba(139, 92, 246, 0.18);
}

.preferences-toggle:hover {
    transform: translateY(-1px);
}

.preferences-toggle svg {
    width: 18px;
    height: 18px;
}

.preferences-menu {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 380;
    display: grid;
    min-width: 190px;
    padding: 0.45rem;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 18px;
    background: rgba(12, 10, 20, 0.98);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.15s, transform 0.15s;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.user-preferences.aberto .preferences-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.preferences-menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 2.35rem 0.7rem 0.75rem;
    border-radius: 13px;
    color: var(--texto-suave);
    font-weight: 800;
    font-size: 0.84rem;
    transition: background 0.15s, color 0.15s;
}

.preferences-menu a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.preferences-menu a svg {
    width: 16px;
    height: 16px;
    color: var(--roxo-suave);
}

.preferences-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(10, 8, 18, 0.9);
    border-radius: 999px;
    background: #a855f7;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(168, 85, 247, 0.35);
    pointer-events: none;
}

.preferences-menu a .preferences-badge {
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
}

.app-topbar {
    position: relative;
    z-index: 340;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    background: rgba(10, 8, 18, 0.9);
    border-bottom: 1px solid var(--borda);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.app-topbar:not(.app-topbar-home) {
    display: none;
}

.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 150;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    gap: 0.25rem;
    width: min(800px, calc(100vw - 24px));
    padding: 0.45rem;
    background: rgba(12, 10, 20, 0.94);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    body {
        min-height: 100svh;
    }

    .app-topbar {
        padding-top: max(0.85rem, env(safe-area-inset-top));
    }

    .bottom-nav {
        bottom: 0;
        width: min(800px, 100vw);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
    }

    .container {
        padding-bottom: calc(112px + env(safe-area-inset-bottom));
    }
}

.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    min-height: 54px;
    padding: 0.4rem 0.25rem;
    border-radius: 14px;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

.bottom-nav a:hover {
    color: var(--texto);
    background: rgba(255, 255, 255, 0.05);
}

.bottom-nav a.ativo {
    color: #fff;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.92), rgba(109, 40, 217, 0.92));
    box-shadow: 0 10px 26px rgba(139, 92, 246, 0.28);
}

.bottom-nav a svg {
    width: 19px;
    height: 19px;
}

.nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
}

.nav-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(10, 8, 18, 0.9);
    border-radius: 999px;
    background: #a855f7;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(168, 85, 247, 0.35);
    pointer-events: none;
}

/* ===========================
   CONTAINER & LAYOUT
=========================== */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem calc(100px + env(safe-area-inset-bottom));
}

.layout-dois-col {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* ===========================
   PAGE HEADER
=========================== */
.page-header { margin-bottom: 1.75rem; }

.page-eyebrow {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--roxo);
}

.page-header h1 {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--texto);
    line-height: 1.25;
}

.page-header p {
    color: var(--texto-suave);
    margin-top: 0.3rem;
    max-width: 60ch;
}

/* ===========================
   HOME PREMIUM
=========================== */
.home-shell {
    display: grid;
    gap: 1.1rem;
}

.home-hero {
    padding: 0.35rem 0.15rem 0.25rem;
}

.home-eyebrow,
.home-card-kicker {
    display: inline-flex;
    align-items: center;
    color: var(--verde);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-hero h1 {
    margin: 0.35rem 0;
    font-family: var(--fonte-display);
    font-size: clamp(2rem, 8vw, 4.4rem);
    line-height: 0.96;
}

.home-hero p {
    max-width: 560px;
    color: var(--texto-suave);
    font-size: 1rem;
}

.home-match-card {
    position: relative;
    overflow: hidden;
    min-height: 310px;
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 70%, transparent);
    background: var(--home-match-bg-end);
    cursor: pointer;
}

.home-match-card:focus-visible {
    outline: 2px solid var(--roxo-suave);
    outline-offset: 3px;
}

.home-match-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--verde) 18%, transparent), transparent 26%),
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--roxo) 24%, transparent), transparent 34%),
        linear-gradient(145deg, var(--home-match-bg-start), var(--home-match-bg-mid) 54%, var(--home-match-bg-end));
}

.home-match-bg::after {
    content: "";
    position: absolute;
    inset: auto -10% -30% 18%;
    height: 180px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 45%, transparent);
    transform: rotate(-8deg);
}

.home-match-content {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 310px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
    padding: 1.25rem;
}

.home-match-content h2 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: clamp(2.1rem, 11vw, 4.8rem);
    line-height: 0.9;
}

.home-match-meta {
    display: grid;
    gap: 0.55rem;
}

.home-match-meta span {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.68rem;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 48%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--home-match-surface) 72%, transparent);
    color: var(--texto-suave);
    font-size: 0.86rem;
    font-weight: 700;
}

.home-match-meta svg {
    width: 16px;
    height: 16px;
    color: var(--verde);
}

.home-primary-action {
    width: fit-content;
    padding-inline: 1.1rem;
}

.home-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.home-feature-card {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(31, 24, 52, 0.9), rgba(17, 13, 28, 0.94));
}

.home-feature-card h3 {
    margin: 0.35rem 0;
    font-family: var(--fonte-display);
    font-size: clamp(1.8rem, 7vw, 3rem);
    line-height: 1;
}

.home-feature-card p {
    color: var(--texto-suave);
    font-size: 0.88rem;
}

.home-metrics-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.65rem;
    border: 1px solid rgba(139, 92, 246, 0.14);
    border-radius: 22px;
    background: rgba(18, 13, 31, 0.58);
}

.home-metrics-row div {
    display: grid;
    gap: 0.18rem;
    min-height: 74px;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.home-metrics-row span {
    font-family: var(--fonte-display);
    font-size: 1.45rem;
    font-weight: 800;
}

.home-metrics-row small {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 700;
}

.home-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.home-section-heading h2 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: 1.1rem;
}

.home-section-heading a {
    color: var(--verde);
    font-size: 0.82rem;
    font-weight: 800;
}

.home-activity-list {
    display: grid;
    gap: 0.55rem;
}

.home-activity-item,
.home-empty-state {
    display: grid;
    gap: 0.2rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    transition: transform 0.15s, background 0.15s;
}

.home-activity-item:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.065);
}

.home-activity-item span,
.home-empty-state span {
    color: var(--verde);
    font-size: 0.72rem;
    font-weight: 800;
}

.home-activity-item small,
.home-empty-state span {
    color: var(--texto-suave);
}

.home-highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.home-last-winner {
    order: 1;
    grid-column: 1 / -1;
}

.home-likes-winners {
    order: 2;
    grid-column: 1 / -1;
}

.home-likes-winners,
.home-last-winner {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid rgba(52, 211, 153, 0.18);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(18, 13, 31, 0.72), rgba(52, 211, 153, 0.08));
    backdrop-filter: blur(12px);
}

.home-likes-winners-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
    font-weight: 900;
}

.home-likes-winners-head span {
    font-size: 0.9rem;
}

.home-likes-winners-head a {
    color: var(--verde);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.home-likes-winners-list {
    display: grid;
    gap: 0.55rem;
}

.home-likes-card-rotator {
    position: relative;
    display: grid;
    min-height: 520px;
    overflow: hidden;
    cursor: pointer;
}

.home-likes-card-rotator:focus-visible {
    outline: 2px solid rgba(52, 211, 153, 0.72);
    outline-offset: 4px;
}

.home-likes-card-slide {
    grid-area: 1 / 1;
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.home-likes-card-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.home-likes-card-slide.is-entering .player-card {
    animation: homeLikesCardSwap 1.35s cubic-bezier(0.18, 0.78, 0.18, 1);
}

@keyframes homeLikesCardSwap {
    0% {
        opacity: 0;
        transform: translateX(54px) rotate(5deg) scale(0.9);
    }

    58% {
        opacity: 1;
        transform: translateX(-12px) rotate(-1.4deg) scale(1.04);
    }

    78% {
        opacity: 1;
        transform: translateX(5px) rotate(0.5deg) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0) scale(1);
    }
}

.home-likes-card-stage {
    display: grid;
    justify-items: center;
    width: 100%;
}

.home-likes-card-stage .player-card {
    width: min(78vw, 260px);
}

.home-likes-card-meta {
    display: grid;
    justify-items: center;
    gap: 0.14rem;
    text-align: center;
}

.home-likes-card-meta strong {
    max-width: min(100%, 280px);
    overflow: hidden;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-likes-card-meta small {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
}

/* ===========================
   REVELACAO DE OVERALL
=========================== */
.overall-reveal-modal {
    position: fixed;
    inset: 0;
    z-index: 9800;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #030208;
}

body.overall-reveal-open {
    overflow: hidden;
}

.overall-reveal-modal.is-closing {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.overall-reveal-arena {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 430px;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 208, 94, 0.2), transparent 28%),
        radial-gradient(circle at 50% 55%, rgba(52, 211, 153, 0.16), transparent 44%),
        radial-gradient(circle at 18% 16%, rgba(139, 92, 246, 0.24), transparent 36%),
        linear-gradient(180deg, #090611, #020106);
}

.overall-reveal-status {
    position: absolute;
    top: calc(max(18px, env(safe-area-inset-top)) + 34px);
    right: 24px;
    left: 24px;
    z-index: 15;
    color: #ded5ff;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.35;
    text-align: center;
}

.overall-reveal-particles,
.overall-reveal-burst,
.overall-reveal-flash {
    position: absolute;
    pointer-events: none;
}

.overall-reveal-particles {
    inset: 0;
    opacity: 0.86;
    background-image:
        radial-gradient(circle, rgba(255, 208, 94, 0.92) 0 2px, transparent 2.5px),
        radial-gradient(circle, rgba(52, 211, 153, 0.78) 0 1.5px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.5px);
    background-position: 10px 20px, 40px 70px, 80px 30px;
    background-size: 90px 90px, 130px 130px, 70px 70px;
    animation: overallRevealParticles 4s linear infinite;
}

.overall-reveal-burst {
    width: 760px;
    height: 760px;
    border-radius: 50%;
    opacity: 0;
    filter: blur(1px);
    background: conic-gradient(
        from 0deg,
        transparent 0deg 6deg,
        rgba(255, 229, 128, 0.5) 7deg 10deg,
        transparent 11deg 22deg,
        rgba(52, 211, 153, 0.28) 23deg 27deg,
        transparent 28deg 42deg,
        rgba(139, 92, 246, 0.34) 43deg 47deg,
        transparent 48deg 60deg
    );
    animation: overallRevealSpin 5s linear infinite;
}

.overall-reveal-modal.is-opening .overall-reveal-burst,
.overall-reveal-modal.is-revealed .overall-reveal-burst {
    opacity: 1;
}

.overall-reveal-flash {
    inset: 0;
    z-index: 8;
    background: #fff;
    opacity: 0;
}

.overall-reveal-modal.is-revealed .overall-reveal-flash {
    animation: overallRevealFlash 0.8s ease-out;
}

.overall-reveal-sealed {
    position: relative;
    z-index: 5;
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.overall-reveal-pack {
    position: relative;
    display: grid;
    width: 178px;
    height: 248px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 23px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 27%),
        linear-gradient(155deg, #6b45b8, #173f37 54%, #10091c);
    box-shadow:
        0 0 48px rgba(139, 92, 246, 0.62),
        0 22px 70px rgba(0, 0, 0, 0.65),
        inset 0 0 36px rgba(255, 255, 255, 0.08);
}

.overall-reveal-pack span {
    position: absolute;
    top: 24px;
    color: #f3edff;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.overall-reveal-pack strong {
    display: grid;
    width: 88px;
    height: 88px;
    place-items: center;
    border-radius: 26px;
    background: linear-gradient(135deg, #ffe48d, #31c48d);
    box-shadow: 0 0 45px rgba(255, 208, 94, 0.68);
    color: #201705;
    clip-path: polygon(50% 0%, 92% 20%, 88% 70%, 50% 100%, 12% 70%, 8% 20%);
    font-family: var(--fonte-display);
    font-size: 1.55rem;
    font-weight: 900;
}

.loja-card-reveal-modal .overall-reveal-pack strong {
    font-size: 1.18rem;
    letter-spacing: 0;
}

.overall-reveal-open,
.overall-reveal-done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 48px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--roxo), var(--verde));
    box-shadow: 0 12px 28px rgba(52, 211, 153, 0.28);
    color: #fff;
    cursor: pointer;
    font-weight: 900;
}

.overall-reveal-open {
    width: min(330px, calc(100vw - 40px));
    padding: 0.95rem 1.2rem;
}

.overall-reveal-done {
    width: min(280px, calc(100vw - 44px));
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
}

.overall-reveal-open svg {
    width: 18px;
    height: 18px;
}

.overall-reveal-modal.is-opening .overall-reveal-pack {
    animation: overallRevealPackOpening 2.2s ease-in-out forwards;
}

.overall-reveal-modal.is-opening .loja-pacote-pack-reveal {
    animation: overallRevealPackOpening 2.2s ease-in-out forwards;
}

.overall-reveal-modal.is-opening .overall-reveal-open,
.overall-reveal-modal.is-revealed .overall-reveal-sealed {
    opacity: 0;
    pointer-events: none;
}

.overall-reveal-card-wrap {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: none;
    align-content: center;
    justify-items: center;
    width: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 86px 18px 24px;
    perspective: 900px;
}

.overall-reveal-modal.is-revealed .overall-reveal-card-wrap {
    display: grid;
}

.overall-reveal-card-head {
    display: grid;
    justify-items: center;
    gap: 0.18rem;
    margin-bottom: 0.35rem;
    color: #fff;
    text-align: center;
}

.overall-reveal-card-head span {
    color: #ffe18a;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.overall-reveal-card-head h2 {
    max-width: 330px;
    margin: 0;
    overflow: hidden;
    font-family: var(--fonte-display);
    font-size: clamp(1.35rem, 7vw, 2.1rem);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overall-reveal-card-stage {
    display: grid;
    justify-items: center;
}

.overall-reveal-card-stage .player-card {
    width: min(315px, 76vw, 37vh);
    width: min(315px, 76vw, 37dvh);
    opacity: 0;
    transform: translateY(80px) rotateY(78deg) scale(0.72);
    animation: overallRevealCardEntrance 1s cubic-bezier(0.16, 1.15, 0.24, 1) 0.16s forwards;
    filter: drop-shadow(0 22px 38px rgba(0, 0, 0, 0.66));
}

.overall-reveal-change {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: -0.15rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(18, 13, 31, 0.78);
    color: #fff;
    font-family: var(--fonte-display);
    font-weight: 900;
    opacity: 0;
    animation: overallRevealFadeUp 0.45s ease 1s forwards;
}

.overall-reveal-change span {
    color: rgba(255, 255, 255, 0.62);
    text-decoration: line-through;
}

.overall-reveal-change strong {
    color: #ffe18a;
    font-size: 1.3rem;
}

.overall-reveal-change svg {
    width: 18px;
    height: 18px;
    color: var(--verde);
}

.loja-card-reveal-change span {
    text-decoration: none;
}

.loja-card-reveal-change strong {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loja-card-reveal-result {
    display: grid;
    gap: 0.08rem;
}

.loja-card-reveal-result > span {
    color: var(--verde);
    font-family: var(--fonte-principal);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.loja-card-reveal-duplicate {
    display: grid;
    max-width: min(330px, calc(100vw - 42px));
    gap: 0.2rem;
    margin-top: 0.7rem;
    padding: 0.72rem 0.85rem;
    border: 1px solid rgba(250, 204, 21, 0.22);
    border-radius: 14px;
    background: rgba(18, 13, 31, 0.78);
    color: #fff;
    text-align: center;
    opacity: 0;
    animation: overallRevealFadeUp 0.45s ease 1.08s forwards;
}

.loja-card-reveal-duplicate strong {
    color: var(--ouro);
    font-family: var(--fonte-display);
}

.loja-card-reveal-duplicate span,
.loja-card-reveal-duplicate small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8rem;
    line-height: 1.3;
}

@keyframes overallRevealSpin {
    to { transform: rotate(360deg); }
}

@keyframes overallRevealParticles {
    from { background-position: 10px 20px, 40px 70px, 80px 30px; }
    to { background-position: 10px -70px, 40px -60px, 80px -40px; }
}

@keyframes overallRevealPackOpening {
    0% { transform: scale(1) rotate(0); filter: brightness(1); }
    10% { transform: scale(1.05) rotate(-8deg); }
    20% { transform: scale(1.07) rotate(9deg); }
    32% { transform: scale(1.1) rotate(-11deg); filter: brightness(1.2); }
    44% { transform: scale(1.14) rotate(12deg); filter: brightness(1.35); }
    56% { transform: scale(1.19) rotate(-14deg); filter: brightness(1.55); }
    68% { transform: scale(1.25) rotate(10deg); filter: brightness(1.9); }
    82% { transform: scale(1.38) rotate(0); filter: brightness(2.35); box-shadow: 0 0 96px rgba(255, 208, 94, 0.9); }
    100% { transform: scale(3.2); opacity: 0; filter: brightness(4); }
}

@keyframes overallRevealFlash {
    0% { opacity: 0; }
    18% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes overallRevealCardEntrance {
    0% {
        opacity: 0;
        transform: translateY(90px) rotateY(78deg) scale(0.72);
        filter: blur(8px) drop-shadow(0 22px 38px rgba(0, 0, 0, 0.66));
    }

    58% {
        opacity: 1;
        transform: translateY(-16px) rotateY(0) scale(1.06);
        filter: blur(0) drop-shadow(0 0 42px rgba(255, 208, 94, 0.58));
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotateY(0) scale(1);
        filter: blur(0) drop-shadow(0 22px 38px rgba(0, 0, 0, 0.66));
    }
}

@keyframes overallRevealFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .overall-reveal-particles,
    .overall-reveal-burst,
    .overall-reveal-modal.is-opening .overall-reveal-pack,
    .overall-reveal-modal.is-opening .loja-pacote-pack-reveal,
    .overall-reveal-card-stage .player-card,
    .overall-reveal-change,
    .loja-card-reveal-duplicate {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 520px) {
    .overall-reveal-arena {
        max-width: none;
    }

    .overall-reveal-status {
        top: calc(max(16px, env(safe-area-inset-top)) + 22px);
        right: 20px;
        left: 20px;
        font-size: 0.92rem;
    }

    .overall-reveal-pack {
        width: min(218px, 62vw);
        height: min(304px, 86vw);
    }

    .overall-reveal-pack strong {
        width: min(96px, 27vw);
        height: min(96px, 27vw);
        font-size: clamp(1.3rem, 7vw, 1.7rem);
    }

    .overall-reveal-open,
    .overall-reveal-done {
        border-radius: 14px;
        font-size: 0.92rem;
        line-height: 1.1;
    }

    .overall-reveal-card-wrap {
        align-content: center;
        padding: 64px 12px max(16px, env(safe-area-inset-bottom));
    }

    .overall-reveal-card-head {
        gap: 0.12rem;
        margin-bottom: 0.2rem;
    }

    .overall-reveal-card-head h2 {
        max-width: calc(100vw - 42px);
        font-size: clamp(1.12rem, 6.2vw, 1.55rem);
    }

    .overall-reveal-card-stage .player-card {
        width: min(292px, 76vw, 36vh);
        width: min(292px, 76vw, 36dvh);
    }

    .overall-reveal-change {
        margin-top: -0.35rem;
        padding: 0.46rem 0.72rem;
    }

    .overall-reveal-done {
        width: min(260px, calc(100vw - 36px));
        min-height: 44px;
        margin-top: 0.55rem;
        padding: 0.75rem 0.9rem;
    }
}

@media (max-width: 700px) and (max-height: 680px) {
    .overall-reveal-card-wrap {
        align-content: start;
        padding-top: 68px;
    }

    .overall-reveal-card-head span {
        font-size: 0.64rem;
    }

    .overall-reveal-card-head h2 {
        font-size: clamp(1rem, 5.7vw, 1.38rem);
    }

    .overall-reveal-card-stage .player-card {
        width: min(260px, 74vw, 35vh);
        width: min(260px, 74vw, 35dvh);
    }

    .overall-reveal-change {
        font-size: 0.9rem;
    }

    .overall-reveal-change strong {
        font-size: 1.12rem;
    }
}

.home-likes-winner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.7rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
}

.home-likes-winner svg {
    width: 18px;
    height: 18px;
    color: var(--verde);
    fill: currentColor;
}

.home-likes-winner div {
    display: grid;
    min-width: 0;
    gap: 0.12rem;
}

.home-likes-winner strong,
.home-likes-winner small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-likes-winner small {
    color: var(--texto-suave);
}

.home-last-winner-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid rgba(250, 204, 21, 0.16);
    border-radius: 16px;
    background: rgba(250, 204, 21, 0.06);
}

.home-last-winner-main > svg {
    width: 22px;
    height: 22px;
    color: var(--ouro);
    fill: currentColor;
}

.home-last-winner-main div {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.home-last-winner-main strong,
.home-last-winner-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-last-winner-main small {
    color: var(--texto-suave);
}

.home-last-winner-rotator {
    position: relative;
    display: grid;
}

.home-last-winner-slide {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.home-last-winner-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.home-last-winner-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.home-last-winner-list span {
    max-width: 100%;
    padding: 0.32rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--texto);
    font-size: 0.78rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-last-winner-mini-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
    align-items: flex-start;
    margin-top: 0.85rem;
}

.home-highlight-empty {
    min-height: 92px;
}

/* ===========================
   CARDS
=========================== */
.card {
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--sombra);
}

.card h2 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--texto);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card-header h2 { margin-bottom: 0; }

.card-acao {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.card-acao h2 { margin-bottom: 0.25rem; }

/* ===========================
   STATS
=========================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: 1.35rem 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--roxo), transparent);
    opacity: 0.7;
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.6rem;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    font-size: 1.25rem;
}

.stat-valor {
    font-size: 2rem;
    font-weight: 800;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-top: 0.25rem;
}

/* ===========================
   DASHBOARD GRID
=========================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

/* ===========================
   BOTÕES
=========================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); color: inherit; }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
}

.btn-primary:hover {
    box-shadow: var(--sombra-roxa);
    color: #fff;
}

.btn-success {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.4);
    color: var(--verde);
}

.btn-success:hover {
    border-color: var(--verde);
    background: rgba(52, 211, 153, 0.18);
    color: var(--verde);
}

.btn-outline {
    background: transparent;
    border-color: var(--borda-forte);
    color: var(--texto);
}

.btn-outline:hover {
    border-color: var(--roxo);
    color: var(--roxo-suave);
}

.btn-danger {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.4);
    color: var(--vermelho);
}

.btn-danger:hover {
    border-color: var(--vermelho);
    background: rgba(248, 113, 113, 0.2);
    color: var(--vermelho);
}

.btn-sm   { padding: 0.35rem 0.8rem; font-size: 0.82rem; }
.btn-full { width: 100%; }

/* Tooltip do botão excluir */
.btn-excluir { position: relative; }

.btn-excluir::after {
    content: "Excluir";
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fundo-inset);
    border: 1px solid var(--borda-forte);
    color: var(--texto);
    padding: 4px 9px;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
}

.btn-excluir:hover::after { opacity: 1; }

/* ===========================
   FORMULÁRIOS
=========================== */
.form-group { margin-bottom: 1rem; }

.form-group label {
    display: block;
    font-size: 0.82rem;
    color: var(--texto-suave);
    margin-bottom: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group textarea {
    min-height: 135px;
    resize: vertical;
    line-height: 1.5;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

.form-group select option {
    background: var(--fundo-input);
    color: var(--texto);
}

.form-group select[multiple] option {
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
}

.form-group select[multiple] option:checked {
    background: rgba(139, 92, 246, 0.28);
    color: var(--texto);
}

.form-busca { display: flex; gap: 0.5rem; }

.form-busca input {
    width: 180px;
    padding: 0.35rem 0.75rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font-size: 0.85rem;
}

/* ===========================
   TABELA
=========================== */
.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tabela th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--texto-suave);
    border-bottom: 1px solid var(--borda);
}

.tabela td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--borda);
    font-variant-numeric: tabular-nums;
}

.tabela tr:last-child td { border-bottom: none; }
.tabela tr:hover td { background: rgba(139, 92, 246, 0.05); }

.acoes { display: flex; gap: 0.4rem; }

/* ===========================
   BADGES — OVERALL
=========================== */
.badge-overall {
    display: inline-block;
    color: #fff;
    font-family: var(--fonte-display);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    min-width: 34px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.badge-ovr {
    display: inline-block;
    background: rgba(52, 211, 153, 0.14);
    color: var(--verde);
    font-family: var(--fonte-display);
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    padding: 2px 8px;
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
}

/* escala de nível (semáforo de rating) */
.badge-ovr.overall-1, .badge-overall.overall-1 { background: #dc2626; color: #fff; }
.badge-ovr.overall-2, .badge-overall.overall-2 { background: #ea580c; color: #fff; }
.badge-ovr.overall-3, .badge-overall.overall-3 { background: #ca8a04; color: #fff; }
.badge-ovr.overall-4, .badge-overall.overall-4 { background: #65a30d; color: #fff; }
.badge-ovr.overall-5, .badge-overall.overall-5 { background: #16a34a; color: #fff; }
.badge-ovr.overall-6, .badge-overall.overall-6 { background: #059669; color: #fff; }

/* ===========================
   BADGES — POSIÇÃO
=========================== */
.badge-posicao {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    padding: 2px 8px;
    letter-spacing: 0.2px;
    position: relative;
}

.badge-posicao.goleiro,
.badge-posicao.goleiro        { background: rgba(96, 165, 250, 0.14); color: var(--azul); }
.badge-posicao.convidado      { background: rgba(244, 114, 182, 0.14); color: #f9a8d4; }
.badge-posicao.zagueiro,
.badge-posicao.defensivo      { background: rgba(52, 211, 153, 0.12); color: var(--verde); }
.badge-posicao.lateral        { background: rgba(45, 212, 191, 0.14); color: #2dd4bf; }
.badge-posicao.volante        { background: rgba(129, 140, 248, 0.16); color: #818cf8; }
.badge-posicao.meiocampista   { background: rgba(167, 139, 250, 0.16); color: #a78bfa; }
.badge-posicao.meia           { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.badge-posicao.pontadireita   { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.badge-posicao.pontaesquerda  { background: rgba(253, 186, 116, 0.18); color: #fdba74; }
.badge-posicao.centroavante   { background: rgba(251, 113, 133, 0.15); color: #fb7185; }
.badge-posicao.ala            { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
.badge-posicao.pivo,
.badge-posicao.ofensivo       { background: rgba(248, 113, 113, 0.13); color: var(--vermelho); }

.badge-posicao .posicao-tooltip {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    pointer-events: none;
}

.badge-posicao:hover .posicao-tooltip,
.badge-posicao:focus-visible .posicao-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.badge-posicao .posicao-tooltip .caracteristica-range {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    background: var(--fundo-card);
    border-color: var(--borda);
}

.caracteristica-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.caracteristica-control {
    gap: 0.55rem;
}

.caracteristica-control input[type="range"],
.lote-caracteristica input[type="range"] {
    width: 100%;
    accent-color: var(--vermelho);
}

.caracteristica-preview {
    min-height: 30px;
}

.caracteristica-range {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    border-radius: 6px;
    padding: 4px 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.caracteristica-label {
    font-size: 10px;
    line-height: 1;
}

.caracteristica-label.def {
    color: var(--verde);
}

.caracteristica-label.atk {
    color: var(--vermelho);
}

.caracteristica-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.caracteristica-star,
.caracteristica-star svg {
    width: 13px;
    height: 13px;
}

.caracteristica-star.def,
.caracteristica-star.def svg {
    color: var(--verde);
    fill: currentColor;
}

.caracteristica-star.atk,
.caracteristica-star.atk svg {
    color: var(--vermelho);
    fill: currentColor;
}

.lote-caracteristica {
    min-width: 170px;
}

.lote-row .lote-caracteristica {
    display: grid;
    gap: 0.35rem;
}

/* ===========================
   ALERTAS
=========================== */
.alert {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-sucesso {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.45);
    color: var(--verde);
}

.alert-erro {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.45);
    color: var(--vermelho);
}

/* ===========================
   TABS (HISTÓRICO)
=========================== */
.historico-tabs {
    display: inline-flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    padding: 0.3rem;
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: 999px;
}

.historico-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.35rem 1.2rem;
    border-radius: 999px;
    color: var(--texto-suave);
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.15s, color 0.15s;
}

.historico-tabs a:hover { color: var(--texto); }

.historico-tabs a.ativo {
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
}

.sorteio-tabs {
    width: fit-content;
}

.sorteio-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.35rem 1.2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.15s, color 0.15s;
}

.sorteio-tabs button:hover {
    color: var(--texto);
}

.sorteio-tabs button.ativo {
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
}

.sorteio-tab-panel {
    display: none;
}

.sorteio-tab-panel.ativo {
    display: block;
}

.sorteio-resultado-vazio p {
    color: var(--texto-suave);
    text-align: center;
}

.sorteio-status-linha {
    min-height: 18px;
    margin-bottom: 0.75rem;
    color: var(--texto-suave);
    font-size: 13px;
}

/* ===========================
   TIMES — CARDS DE RESULTADO
=========================== */
.times-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.time-card {
    border-radius: var(--radius-sm);
    overflow: visible;
    background: var(--fundo-inset);
    border: 1px solid var(--borda);
}

.time-header {
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    background: var(--fundo-input);
    font-family: var(--fonte-display);
    font-weight: 700;
}

.time-lista {
    list-style: none;
    padding: 10px 14px;
    margin: 0;
}

.time-lista li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--borda);
    font-size: 13px;
    color: var(--texto);
    gap: 6px;
}

.time-lista li:last-child { border-bottom: none; }

.time-lista .li-nome {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===========================
   HISTÓRICO DE JOGOS
=========================== */
.jogo-card { margin-bottom: 1.25rem; }

.jogo-card-accordion {
    overflow: hidden;
}

.inicio-jogo-atual { margin-bottom: 1.5rem; }

.jogo-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--borda);
}

.jogo-card-accordion > summary.jogo-card-header {
    cursor: pointer;
    list-style: none;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.jogo-card-accordion > summary.jogo-card-header::-webkit-details-marker {
    display: none;
}

.jogo-card-accordion[open] > summary.jogo-card-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--borda);
}

.jogo-card-conteudo {
    display: grid;
    gap: 1rem;
}

.jogo-card-oculto {
    display: none;
}

.jogos-carregar-mais {
    width: 100%;
    margin-top: 0.25rem;
}

.jogos-shell,
.jogos-lista {
    display: grid;
    gap: 1rem;
}

.jogos-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.jogos-header h1 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: clamp(1.7rem, 8vw, 2.5rem);
    line-height: 1.05;
}

.jogos-header p {
    color: var(--texto-suave);
    margin-top: 0.25rem;
}

.jogo-resumo-card {
    position: relative;
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.jogo-resumo-top,
.jogo-resumo-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.jogo-resumo-data {
    display: grid;
    gap: 0.18rem;
}

.jogo-resumo-data span {
    color: var(--roxo-suave);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.jogo-resumo-data small {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
}

.jogo-resumo-body {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
}

.jogo-resumo-body h2 {
    margin: 0;
    font-size: 1.02rem;
}

.jogo-resumo-body strong {
    color: var(--texto);
    font-size: 0.9rem;
}

.jogo-resumo-body span,
.jogo-resumo-body small {
    color: var(--texto-suave);
    font-size: 0.84rem;
}

.jogo-resumo-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
    color: var(--texto-suave);
    font-weight: 800;
}

.jogo-resumo-meta span + span::before {
    content: "•";
    margin-right: 0.65rem;
    color: var(--borda-forte);
}

.jogo-resumo-acao {
    width: 100%;
    justify-content: center;
}

.jogo-resumo-acoes {
    display: grid;
    gap: 0.5rem;
}

.jogo-card-menu {
    position: relative;
    z-index: 5;
}

.jogo-card-menu summary {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--texto-suave);
    cursor: pointer;
    list-style: none;
}

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

.jogo-card-menu form {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 170px;
    padding: 0.35rem;
    border: 1px solid rgba(139, 92, 246, 0.24);
    border-radius: 8px;
    background: rgba(12, 10, 20, 0.98);
    box-shadow: var(--sombra);
}

.jogo-card-menu button {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 36px;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--vermelho);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.jogo-card-menu button:hover {
    background: rgba(248, 113, 113, 0.1);
}

.jogo-detalhe-top {
    margin-bottom: 1rem;
}

.jogo-voltar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--texto-suave);
    font-weight: 900;
}

.jogo-detalhe-tabs {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
}

.jogo-detalhe-tabs::-webkit-scrollbar {
    display: none;
}

.jogo-detalhe-tabs a {
    flex: 0 0 auto;
    white-space: nowrap;
}

.jogo-detalhe-tabs.historico-tabs a {
    min-width: 0;
}

.jogo-detalhe-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.jogo-detalhe-hero h1 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: clamp(1.5rem, 7vw, 2.3rem);
}

.jogo-detalhe-hero p,
.jogo-detalhe-hero strong {
    color: var(--texto-suave);
}

.jogo-detalhe-conteudo,
.jogo-resumo-grid,
.avaliacao-lista {
    display: grid;
    gap: 1rem;
}

.jogo-resumo-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 0.7rem;
}

.jogo-resumo-info > div,
.jogo-resumo-classificacao,
.avaliacao-progresso,
.avaliacao-jogador-card {
    display: grid;
    gap: 0.28rem;
    padding: 0.8rem;
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.jogo-resumo-info span,
.avaliacao-jogador-card span,
.avaliacao-jogador-card small,
.avaliacao-progresso span {
    color: var(--texto-suave);
    font-size: 0.82rem;
}

.jogo-resumo-info strong {
    color: var(--texto);
    font-size: 1rem;
}

.jogo-detalhe-section-head,
.jogo-rank-row,
.avaliacao-jogador-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.jogo-detalhe-section-head h2 {
    margin: 0;
    font-size: 1.05rem;
}

.jogo-rank-row {
    padding: 0.5rem 0;
    border-top: 1px solid rgba(139, 92, 246, 0.14);
}

.jogo-rank-row span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.14);
    color: var(--roxo-suave);
    font-weight: 900;
}

.avaliacao-progresso div {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.avaliacao-progresso i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--roxo), var(--verde));
}

.avaliacao-jogador-card > div {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.jogo-times-accordion .time-mini summary {
    cursor: pointer;
    list-style: none;
}

.jogo-times-accordion .time-mini summary::-webkit-details-marker {
    display: none;
}

.jogo-times-accordion .time-mini summary i {
    transition: transform 0.15s ease;
}

.jogo-times-accordion .time-mini[open] summary i {
    transform: rotate(180deg);
}

@media (max-width: 640px) {
    .jogos-header {
        align-items: stretch;
        flex-direction: column;
    }

    .jogos-header .btn {
        width: 100%;
    }

    .jogo-detalhe-hero,
    .jogo-detalhe-section-head,
    .avaliacao-jogador-card {
        align-items: stretch;
        flex-direction: column;
    }

    .jogo-detalhe-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.35rem;
        overflow: visible;
        border-radius: 14px;
    }

    .jogo-detalhe-tabs a {
        min-width: 0;
        padding-inline: 0.55rem;
        white-space: normal;
    }
}

.jogo-info { min-width: 0; }

.jogo-info strong {
    display: block;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
}

.jogo-info span {
    display: block;
    color: var(--texto-suave);
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

.jogo-excluir {
    display: flex;
    align-self: stretch;
    flex-shrink: 0;
    margin: -0.95rem -0.95rem -0.95rem 0;
}

.jogo-excluir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-height: 100%;
    border-left: 1px solid var(--borda);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.jogo-excluir-btn:hover,
.jogo-excluir-btn:focus-visible {
    outline: none;
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.jogo-excluir-btn svg {
    width: 18px;
    height: 18px;
}

.jogos-vazio p {
    margin: 0;
    text-align: center;
    color: var(--texto-suave);
}

.times-historico {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 0.5rem;
}

.time-mini {
    min-width: 0;
    overflow: hidden;
    background: var(--fundo-inset);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.time-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 13px 16px;
    background: var(--fundo-input);
    border-left: 4px solid var(--cor-time, var(--roxo));
}

.time-mini-header strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}

.time-mini > strong {
    display: block;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.1rem;
    padding: 13px 16px;
    background: var(--fundo-input);
    border-left: 4px solid var(--cor-time, var(--roxo));
}

.time-mini ul {
    list-style: none;
    color: var(--texto);
    padding: 14px 16px;
    margin: 0;
}

.time-mini li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--borda);
    font-size: 15px;
    line-height: 1.3;
}

.time-mini li:last-child { border-bottom: none; }

.time-mini li.editar-time-extra {
    border-top: 1px dashed var(--borda-forte);
    border-bottom: none;
    margin-top: 4px;
    padding-top: 10px;
}

.time-mini-nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.time-mini .badge-ovr {
    flex-shrink: 0;
    min-width: 38px;
    text-align: center;
    font-size: 14px;
    padding: 3px 9px;
    border-radius: 7px;
}

.time-mini-header .badge-ovr {
    min-width: 0;
    font-size: 14px;
    padding: 5px 11px;
    border-radius: 7px;
}

.time-mini-badges {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.time-mini-badges .badge-posicao {
    min-width: 68px;
    justify-content: center;
    font-size: 12px;
    padding: 4px 8px;
}

.time-mini-header-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.editar-times-form {
    display: none;
}

.editar-time-select {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 0.42rem 0.55rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--radius-sm);
    background: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    font-size: 0.9rem;
}

.editar-time-select:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.22);
}

.time-mini-jogador {
    border-left: 3px solid var(--presenca-cor, transparent);
    padding-left: 0.45rem;
}

.presenca-status-presente {
    --presenca-cor: var(--verde);
    --presenca-bg: rgba(52, 211, 153, 0.13);
}

.presenca-status-atraso-leve {
    --presenca-cor: #facc15;
    --presenca-bg: rgba(250, 204, 21, 0.14);
}

.presenca-status-atraso-pesado {
    --presenca-cor: #fb923c;
    --presenca-bg: rgba(251, 146, 60, 0.15);
}

.presenca-status-falta {
    --presenca-cor: #f87171;
    --presenca-bg: rgba(248, 113, 113, 0.15);
}

.presenca-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--presenca-cor, var(--verde)) 48%, transparent);
    border-radius: 999px;
    background: var(--presenca-bg, rgba(52, 211, 153, 0.13));
    color: var(--presenca-cor, var(--verde));
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.presenca-status-badge svg {
    width: 15px;
    height: 15px;
}

button.presenca-status-badge {
    cursor: pointer;
}

button.presenca-status-badge:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--presenca-cor, var(--verde)) 32%, transparent);
}

.presenca-status-menu {
    position: fixed;
    z-index: 9800;
    display: grid;
    min-width: 190px;
    gap: 0.25rem;
    padding: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(12, 18, 32, 0.98);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.46);
}

.presenca-status-menu[hidden] {
    display: none !important;
}

.presenca-status-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 36px;
    width: 100%;
    padding: 0.48rem 0.58rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texto);
    cursor: pointer;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    text-align: left;
}

.presenca-status-menu button:hover,
.presenca-status-menu button:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
}

.presenca-status-menu svg {
    width: 16px;
    height: 16px;
    color: var(--verde);
}

.editar-times-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-inset);
}

.editar-times-acoes span {
    color: var(--texto-suave);
    font-size: 0.88rem;
    line-height: 1.35;
}

.time-vencedor {
    border-color: rgba(52, 211, 153, 0.55);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.3);
}

.time-empate {
    border-color: rgba(251, 191, 36, 0.55);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.28);
}

/* Placar / resumo do resultado */
.resultado-resumo {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 1.15rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-inset);
}

.resultado-resumo span,
.badge-placar,
.badge-vencedor {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.resultado-resumo span {
    min-height: 40px;
    padding: 0.45rem 0.9rem;
    background: var(--fundo-input);
    color: var(--texto);
    border: 1px solid var(--borda-forte);
    font-family: var(--fonte-display);
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}

.resultado-resumo .vencedor,
.badge-vencedor {
    background: rgba(52, 211, 153, 0.15);
    color: var(--verde);
    border: 1px solid rgba(52, 211, 153, 0.55);
}

.resultado-resumo .empate,
.badge-empate {
    background: rgba(251, 191, 36, 0.14);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.55);
}

.badge-placar {
    background: var(--fundo-inset);
    color: var(--texto);
    border: 1px solid var(--borda-forte);
    font-family: var(--fonte-display);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.resultado-form-inline {
    display: none;
}

.placar-time-input {
    width: 48px;
    min-height: 32px;
    padding: 0.22rem 0.35rem;
    background: var(--fundo-inset);
    border: 1px solid var(--borda-forte);
    border-radius: 999px;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.placar-time-input:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
}

.resultado-acoes-inline {
    display: flex;
    justify-content: flex-end;
}

.resultado-acoes-inline .btn {
    width: min(100%, 280px);
}

/* Formulário de resultado (diretor) */
.resultado-form {
    padding: 0.9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-inset);
}

.resultado-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.resultado-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 700;
}

.resultado-grid input,
.resultado-grid select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font: inherit;
}

.resultado-grid input:focus,
.resultado-grid select:focus {
    outline: none;
    border-color: var(--roxo);
}

.resultado-grid select option {
    background: var(--fundo-input);
    color: var(--texto);
}

/* ===========================
   AVALIACAO (LIKES/DISLIKES)
=========================== */
.avaliacao-shell {
    display: grid;
    gap: 1rem;
}

.avaliacao-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(15, 23, 42, 0.84));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.avaliacao-hero.concluida { border-color: rgba(52, 211, 153, 0.38); }

.avaliacao-hero-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.18);
    color: var(--roxo-suave);
}

.avaliacao-hero-icon svg { width: 24px; height: 24px; }

.avaliacao-hero-main {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.avaliacao-hero h2 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: 1.45rem;
}

.avaliacao-hero p {
    margin: 0;
    color: var(--texto-suave);
    line-height: 1.45;
}

.avaliacao-progress-wrap {
    display: grid;
    gap: 0.45rem;
}

.avaliacao-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--texto-suave);
    font-size: 0.86rem;
}

.avaliacao-progress-meta strong { color: var(--texto); }

.avaliacao-progress-track,
.home-avaliacao-progress {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
}

.avaliacao-progress-track i,
.home-avaliacao-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--roxo), var(--verde));
}

.avaliacao-grupo {
    display: grid;
    gap: 0.7rem;
}

.avaliacao-grupo-head,
.avaliacao-avaliados summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0.1rem;
}

.avaliacao-grupo-head h3,
.avaliacao-avaliados summary span {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.avaliacao-grupo-head span,
.avaliacao-avaliados summary b {
    min-width: 30px;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.18);
    color: var(--roxo-suave);
    text-align: center;
}

.avaliacao-avaliados summary {
    cursor: pointer;
    list-style: none;
}

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

.avaliacao-completa,
.avaliacao-vazio {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    padding: 1.1rem;
    border: 1px solid rgba(52, 211, 153, 0.26);
    border-radius: 8px;
    background: rgba(52, 211, 153, 0.08);
    text-align: center;
}

.avaliacao-completa svg,
.avaliacao-vazio svg {
    width: 34px;
    height: 34px;
    color: var(--verde);
}

.avaliacao-completa p,
.avaliacao-vazio p {
    margin: 0;
    color: var(--texto-suave);
}

.avaliacao-toast {
    position: fixed;
    left: 50%;
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 80;
    transform: translate(-50%, 12px);
    opacity: 0;
    pointer-events: none;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.96);
    color: var(--texto);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    transition: opacity 0.18s, transform 0.18s;
}

.avaliacao-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.avaliacao-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-inset);
    color: var(--texto-suave);
    font-size: 0.87rem;
}

.avaliacao-status-bar.aberta { border-color: rgba(52, 211, 153, 0.35); }
.avaliacao-status-bar.aguardando { border-color: rgba(96, 165, 250, 0.32); }
.avaliacao-status-bar.encerrada { opacity: 0.8; }
.avaliacao-status-bar span { font-weight: 600; }
.avaliacao-status-bar form { margin: 0; }

.time-mini-nome-com-avaliacao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.avaliacao-voto-form {
    display: block;
    flex-shrink: 0;
    margin: 0;
}

.avaliacao-botoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
}

.avaliacao-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 46px;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--borda-forte);
    border-radius: 6px;
    background: var(--fundo-input);
    color: var(--texto-suave);
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.15s, color 0.15s, transform 0.1s;
}

.avaliacao-btn svg.lucide { width: 17px; height: 17px; }

.avaliacao-btn span {
    color: inherit;
    font-size: 0.88rem;
    font-weight: 800;
}

.avaliacao-btn:hover { transform: translateY(-1px); }
.avaliacao-btn-like:hover { border-color: var(--verde); color: var(--verde); }
.avaliacao-btn-neutro:hover { border-color: rgba(251, 191, 36, 0.85); color: #fbbf24; }
.avaliacao-btn-dislike:hover { border-color: var(--vermelho); color: var(--vermelho); }

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

.avaliacao-btn:disabled:hover {
    transform: none;
}

.avaliacao-btn-like.selecionado {
    border-color: rgba(52, 211, 153, 0.7);
    background: rgba(52, 211, 153, 0.16);
    color: var(--verde);
    opacity: 1;
}

.avaliacao-btn-neutro.selecionado {
    border-color: rgba(251, 191, 36, 0.78);
    background: rgba(251, 191, 36, 0.16);
    color: #fbbf24;
    opacity: 1;
}

.avaliacao-btn-dislike.selecionado {
    border-color: rgba(248, 113, 113, 0.7);
    background: rgba(248, 113, 113, 0.16);
    color: var(--vermelho);
    opacity: 1;
}

.avaliacao-jogador-card {
    align-items: flex-start;
    padding: 0.9rem;
    border-color: rgba(139, 92, 246, 0.22);
    background: rgba(255, 255, 255, 0.055);
}

.avaliacao-jogador-card.avaliado {
    opacity: 0.72;
    background: rgba(255, 255, 255, 0.035);
}

.avaliacao-jogador-card[hidden] {
    display: none;
}

.avaliacao-jogador-card.is-active {
    border-color: rgba(139, 92, 246, 0.42);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.avaliacao-card-registrado {
    animation: avaliacaoRegistrada 0.35s ease;
}

.avaliacao-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(52, 211, 153, 0.18));
    color: var(--texto);
    font-weight: 900;
}

.avaliacao-card-body {
    display: grid;
    gap: 0.7rem;
    flex: 1;
    min-width: 0;
}

.avaliacao-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.avaliacao-card-top > div {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.avaliacao-card-top strong {
    font-size: 1rem;
}

.avaliacao-card-side {
    display: grid;
    justify-items: end;
    gap: 0.4rem;
    min-width: min(100%, 290px);
}

.avaliacao-jogo-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    width: min(100%, 290px);
}

.avaliacao-jogo-stats > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 34px;
    padding: 0.38rem 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.42);
    color: var(--texto);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.avaliacao-jogo-stats svg.lucide {
    width: 13px;
    height: 13px;
    color: var(--roxo-suave);
}

.avaliacao-jogo-stats b {
    color: var(--texto);
    font-size: 0.94rem;
    font-weight: 900;
    line-height: 1;
}

.avaliacao-card-top .avaliacao-jogo-stats small {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--texto-suave);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.avaliacao-jogo-stats .resultado-vencedor {
    border-color: rgba(52, 211, 153, 0.36);
    background: rgba(52, 211, 153, 0.12);
}

.avaliacao-jogo-stats .resultado-vencedor svg.lucide,
.avaliacao-jogo-stats .resultado-vencedor small {
    color: var(--verde);
}

.avaliacao-jogo-stats .resultado-empate {
    border-color: rgba(251, 191, 36, 0.34);
    background: rgba(251, 191, 36, 0.11);
}

.avaliacao-jogo-stats .resultado-empate svg.lucide,
.avaliacao-jogo-stats .resultado-empate small {
    color: #fbbf24;
}

.avaliacao-jogo-stats .resultado-nao-venceu {
    border-color: rgba(248, 113, 113, 0.26);
    background: rgba(248, 113, 113, 0.1);
}

.avaliacao-jogo-stats .resultado-nao-venceu svg.lucide,
.avaliacao-jogo-stats .resultado-nao-venceu small {
    color: var(--vermelho);
}

.avaliacao-card-top small {
    padding: 0.24rem 0.45rem;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.12);
    white-space: nowrap;
}

.avaliacao-card-body p {
    margin: 0;
    color: var(--texto);
    font-size: 0.78rem;
    font-weight: 700;
}

.avaliacao-card-hint {
    color: var(--texto-suave);
    line-height: 1.25;
}

.avaliacao-view-only,
.avaliacao-viewer-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.avaliacao-view-only {
    width: fit-content;
    max-width: 100%;
    padding: 0.58rem 0.7rem;
    border: 1px solid rgba(139, 92, 246, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.42);
    color: var(--texto-suave);
    font-size: 0.84rem;
    font-weight: 800;
}

.avaliacao-view-only svg {
    width: 16px;
    height: 16px;
    color: var(--roxo-suave);
}

.avaliacao-viewer-actions {
    justify-content: space-between;
    width: 100%;
}

.avaliacao-viewer-actions span {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 900;
}

@keyframes avaliacaoRegistrada {
    from { transform: translateY(4px); border-color: rgba(52, 211, 153, 0.7); }
    to { transform: translateY(0); }
}

@media (max-width: 640px) {
    .avaliacao-hero {
        grid-template-columns: 1fr;
    }

    .avaliacao-progress-meta,
    .avaliacao-card-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .avaliacao-card-side,
    .avaliacao-jogo-stats {
        justify-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .avaliacao-card-top small {
        white-space: normal;
    }
}

.home-avaliacao-pendente,
.home-notificacao-avaliacao {
    display: grid;
    gap: 0.45rem;
    max-width: 420px;
    padding: 0.72rem;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.5);
}

.home-avaliacao-pendente span,
.home-notificacao-avaliacao {
    color: var(--texto-suave);
}

.home-avaliacao-pendente span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.home-notificacao-avaliacao span {
    display: grid;
    gap: 0.15rem;
}

.home-notificacao-avaliacao em {
    color: var(--verde);
    font-style: normal;
    font-weight: 900;
    margin-top: 0.2rem;
}

.home-avaliacao-pendente svg,
.home-notificacao-avaliacao svg {
    width: 17px;
    height: 17px;
    color: var(--roxo-suave);
}

.home-notificacao-avaliacao {
    grid-template-columns: auto 1fr;
    align-items: center;
    max-width: none;
    margin-bottom: 1rem;
    text-decoration: none;
}

.home-notificacao-avaliacao strong {
    color: var(--texto);
}

/* Home app layout */
.home-legacy-home-block {
    display: none !important;
}

.home-shell {
    gap: 1rem;
}

.home-app-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.1rem 0.05rem 0.15rem;
}

.home-app-head h1 {
    margin: 0.15rem 0 0;
    font-family: var(--fonte-display);
    font-size: 1.85rem;
    line-height: 1;
}

.home-club-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: 48%;
    min-height: 44px;
    padding: 0.38rem 0.58rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}

.home-club-chip img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.home-club-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-alert-stack {
    display: grid;
    gap: 0.65rem;
}

.home-match-card {
    min-height: auto;
    border-color: color-mix(in srgb, var(--home-match-border) 70%, transparent);
    border-radius: 26px;
    background: var(--home-match-bg-end);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.home-match-bg {
    background:
        linear-gradient(140deg, var(--home-match-bg-start), var(--home-match-bg-mid) 54%, var(--home-match-bg-end)),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--home-match-border) 22%, transparent) 0 1px, transparent 1px 46px);
}

.home-match-bg::after {
    inset: auto 10% -72px 10%;
    height: 160px;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 42%, transparent);
    border-radius: 50% 50% 0 0;
    transform: none;
}

.home-match-content {
    min-height: auto;
    gap: 1rem;
    padding: 1rem;
}

.home-match-topline,
.home-match-actions,
.home-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.home-match-type {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    padding: 0.38rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 48%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--home-match-surface) 72%, transparent);
    color: var(--texto);
    font-size: 0.75rem;
    font-weight: 900;
}

.home-match-type svg {
    width: 15px;
    height: 15px;
    color: var(--verde);
}

.home-scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0;
}

.home-team-side {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    min-width: 0;
    text-align: center;
}

.home-team-side strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-shield {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 60%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, var(--home-match-surface) 82%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), 0 14px 28px rgba(0, 0, 0, 0.18);
}

.home-shield img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.home-shield-initials {
    color: var(--verde);
    font-family: var(--fonte-display);
    font-size: 1.5rem;
    font-weight: 900;
}

.home-versus {
    display: grid;
    justify-items: center;
    gap: 0.18rem;
    min-width: 58px;
}

.home-versus b {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--verde) 16%, var(--home-match-surface));
    color: var(--verde);
    font-family: var(--fonte-display);
    font-size: 1.05rem;
}

.home-versus span,
.home-versus small {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
}

.home-match-info h2,
.home-card-head h2 {
    margin: 0;
    font-family: var(--fonte-display);
    line-height: 1.05;
}

.home-match-info h2 {
    font-size: 1.75rem;
}

.home-match-meta {
    grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
    margin-top: 0.75rem;
}

.home-match-meta span {
    max-width: 100%;
    border-radius: 14px;
}

.home-match-actions {
    align-items: stretch;
    flex-wrap: wrap;
}

.home-primary-action,
.home-secondary-action {
    min-height: 44px;
}

.home-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.home-shortcut-card {
    display: grid;
    gap: 0.34rem;
    min-height: 104px;
    padding: 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
    color: var(--texto);
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.home-shortcut-card > span {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(52, 211, 153, 0.13);
    color: var(--verde);
}

.home-shortcut-card svg {
    width: 19px;
    height: 19px;
}

.home-shortcut-badge {
    position: absolute;
    top: -8px;
    right: -9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(10, 8, 18, 0.9);
    border-radius: 999px;
    background: #a855f7;
    color: #fff;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(168, 85, 247, 0.35);
    pointer-events: none;
}

.home-shortcut-card strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-shortcut-card small {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 800;
}

.home-shortcut-card.is-disabled {
    cursor: default;
    opacity: 0.72;
    pointer-events: none;
}

body.presencas-panel-open {
    overflow: hidden;
}

.home-presencas-panel {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: grid;
    place-items: end center;
    padding: 1rem;
}

.home-presencas-panel[hidden] {
    display: none !important;
}

.home-presencas-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, 0.72);
    backdrop-filter: blur(8px);
}

.home-presencas-sheet {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(620px, calc(100vw - 1.5rem));
    max-height: min(720px, calc(100vh - 2rem));
    gap: 1rem;
    overflow: auto;
    padding: 1rem;
    border: 1px solid rgba(45, 212, 191, 0.26);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(12, 18, 32, 0.98), rgba(6, 10, 20, 0.98));
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.58);
}

.home-presencas-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.home-presencas-head h2,
.home-presencas-head p {
    margin: 0;
}

.home-presencas-head h2 {
    margin-top: 0.2rem;
    font-family: var(--fonte-display);
    font-size: 1.6rem;
}

.home-presencas-head p {
    color: var(--texto-suave);
    font-size: 0.88rem;
}

.home-presencas-close {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--texto);
    cursor: pointer;
}

.home-presencas-close svg {
    width: 17px;
    height: 17px;
}

.home-presencas-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.home-presencas-stats span {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 800;
}

.home-presencas-stats strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.35rem;
    line-height: 1;
}

.home-presencas-list {
    display: grid;
    gap: 0.42rem;
}

.home-presencas-rankings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.home-presencas-ranking-card {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.04);
}

.home-presencas-ranking-card summary {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    cursor: pointer;
    list-style: none;
}

.home-presencas-ranking-card summary::-webkit-details-marker {
    display: none;
}

.home-presencas-ranking-card summary span {
    display: grid;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 10px;
    background: rgba(52, 211, 153, 0.12);
    color: var(--verde);
}

.home-presencas-ranking-card summary span svg,
.home-presencas-ranking-card summary > i {
    width: 15px;
    height: 15px;
}

.home-presencas-ranking-card summary > i {
    margin-left: auto;
    color: var(--texto-suave);
    transition: transform 0.15s ease;
}

.home-presencas-ranking-card[open] summary > i {
    transform: rotate(180deg);
}

.home-presencas-ranking-card summary strong {
    min-width: 0;
    overflow: hidden;
    color: var(--texto);
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-presencas-ranking-card ol {
    display: grid;
    gap: 0.34rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-presencas-ranking-card li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.42rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.home-presencas-ranking-card li span {
    min-width: 0;
    overflow: hidden;
    color: var(--texto);
    font-size: 0.8rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-presencas-ranking-card li em,
.home-presencas-ranking-card p {
    flex: 0 0 auto;
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
}

.home-presencas-meses {
    display: grid;
    gap: 0.8rem;
}

.home-presencas-mes {
    display: grid;
    gap: 0.62rem;
    padding: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.home-presencas-mes > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}

.home-presencas-mes > summary::-webkit-details-marker {
    display: none;
}

.home-presencas-mes h3 {
    margin: 0;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.05rem;
}

.home-presencas-mes > summary > span {
    flex: 0 0 auto;
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 900;
}

.home-presencas-mes > summary > i {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--texto-suave);
    transition: transform 0.15s ease;
}

.home-presencas-mes[open] > summary > i {
    transform: rotate(180deg);
}

.home-presencas-mes-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
}

.home-presencas-mes-stats span {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    padding: 0.48rem;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 800;
}

.home-presencas-mes-stats strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1rem;
    line-height: 1;
}

.home-presencas-jogo {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.12);
}

.home-presencas-jogo summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 42px;
    padding: 0.58rem 0.68rem;
    cursor: pointer;
    list-style: none;
}

.home-presencas-jogo summary::-webkit-details-marker {
    display: none;
}

.home-presencas-jogo summary span {
    color: var(--texto);
    font-weight: 900;
}

.home-presencas-jogo summary small {
    margin-left: auto;
    color: var(--texto-suave);
    font-weight: 800;
}

.home-presencas-jogo summary svg {
    width: 16px;
    height: 16px;
    color: var(--texto-suave);
    transition: transform 0.15s ease;
}

.home-presencas-jogo[open] summary svg {
    transform: rotate(180deg);
}

.home-presencas-jogo .home-presencas-list {
    padding: 0 0.5rem 0.5rem;
}

.home-presencas-form {
    display: grid;
    gap: 0.65rem;
    padding: 0 0.5rem 0.6rem;
}

.home-presencas-form .home-presencas-list {
    padding: 0;
}

.home-presencas-edit-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: end;
    padding-top: 0.2rem;
}

.home-presencas-edit-actions label {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.home-presencas-edit-actions label span {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
}

.home-presencas-edit-actions select {
    min-width: 0;
    min-height: 38px;
    width: 100%;
    padding: 0.46rem 0.58rem;
    border: 1px solid var(--borda-forte);
    border-radius: 11px;
    background: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    font-size: 0.86rem;
}

.home-presencas-edit-actions select:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.home-presencas-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 42px;
    padding: 0.62rem 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-left: 4px solid var(--presenca-cor, var(--verde));
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.04);
}

.home-presencas-row span {
    min-width: 0;
    overflow: hidden;
    color: var(--texto);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-presencas-row em {
    flex: 0 0 auto;
    color: var(--presenca-cor, var(--verde));
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 900;
}

.home-presencas-empty {
    margin: 0;
}

@media (max-width: 520px) {
    .home-presencas-rankings {
        grid-template-columns: 1fr;
    }

    .home-presencas-edit-actions {
        grid-template-columns: 1fr;
    }

    .home-presencas-stats,
    .home-presencas-mes-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-card-head > svg {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: var(--verde);
}

.home-card-head h2 {
    margin-top: 0.2rem;
    font-size: 1.35rem;
}

@media (max-width: 640px) {
    .home-app-head {
        align-items: flex-start;
    }

    .home-app-head h1 {
        font-size: 1.55rem;
    }

    .home-club-chip {
        max-width: 52%;
    }

    .home-match-content {
        padding: 0.9rem;
    }

    .home-scoreboard {
        gap: 0.45rem;
    }

    .home-shield {
        width: 62px;
        height: 62px;
        border-radius: 18px;
    }

    .home-shield img {
        width: 48px;
        height: 48px;
    }

    .home-versus b {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .home-match-info h2 {
        font-size: 1.35rem;
    }

    .home-shortcuts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .home-shortcut-card {
        min-height: 96px;
        padding: 0.64rem;
        border-radius: 18px;
    }

    .home-shortcut-card strong {
        white-space: normal;
    }

    .home-performance-stats {
        gap: 0.4rem;
    }
}

@media (max-width: 390px) {
    .home-shortcuts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .home-shortcut-card {
        min-height: 88px;
        padding: 0.5rem 0.38rem;
        border-radius: 15px;
    }

    .home-shortcut-card > span {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

    .home-shortcut-card svg {
        width: 16px;
        height: 16px;
    }

    .home-shortcut-card strong {
        font-size: 0.72rem;
        line-height: 1.1;
    }

    .home-shortcut-card small {
        font-size: 0.63rem;
        line-height: 1.15;
    }

    .home-club-chip span {
        display: none;
    }
}

.push-control-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 680px) {
    .push-control-actions,
    .push-control-actions .btn {
        width: 100%;
    }
}

.avaliacao-meu-voto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
}

.avaliacao-meu-voto svg.lucide { width: 14px; height: 14px; }

.avaliacao-meu-voto.meu-voto-like {
    background: rgba(52, 211, 153, 0.15);
    color: var(--verde);
}

.avaliacao-meu-voto.meu-voto-dislike {
    background: rgba(248, 113, 113, 0.15);
    color: var(--vermelho);
}

.avaliacao-totais {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.avaliacao-total {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--fundo-input);
    color: var(--texto-suave);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.avaliacao-total svg.lucide { width: 11px; height: 11px; }
.avaliacao-total-like { color: var(--verde); }
.avaliacao-total-dislike { color: var(--vermelho); }
.avaliacao-badge { font-size: 12px; line-height: 1; }

.badge-like-stat,
.badge-neutral-stat,
.badge-dislike-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 42px;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.badge-like-stat {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: var(--verde);
}

.badge-neutral-stat {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}

.badge-dislike-stat {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: var(--vermelho);
}

.badge-like-stat svg.lucide,
.badge-neutral-stat svg.lucide,
.badge-dislike-stat svg.lucide { width: 12px; height: 12px; }

.estatisticas-presenca-mini {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.presenca-mini-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 32px;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.presenca-mini-item svg.lucide {
    width: 12px;
    height: 12px;
}

.presenca-mini-item.presente {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: var(--verde);
}

.presenca-mini-item.falta {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: var(--vermelho);
}

.presenca-mini-item.atraso-leve {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}

.presenca-mini-item.atraso-pesado {
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.35);
    color: #fb923c;
}

/* ===========================
   ESTATÍSTICAS
=========================== */
.estatisticas-header {
    gap: 1rem;
    align-items: flex-start;
}

.estatisticas-header p {
    margin: 0.2rem 0 0;
    color: var(--texto-suave);
    font-size: 0.85rem;
}

.form-busca-estatisticas {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.form-busca-estatisticas input {
    width: 220px;
    padding: 0.55rem 0.75rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font: inherit;
}

.form-busca-estatisticas input:focus {
    outline: none;
    border-color: var(--roxo);
}

.tabela-estatisticas-wrap {
    overflow-x: auto;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.tabela-estatisticas th { background: rgba(139, 92, 246, 0.05); }

.tabela-estatisticas th a {
    display: block;
    color: inherit;
    white-space: nowrap;
}

.tabela-estatisticas th.ordenacao-ativa,
.tabela-estatisticas th:hover {
    background: rgba(139, 92, 246, 0.13);
}

.tabela-estatisticas th.ordenacao-ativa a { color: var(--roxo-suave); }

.estatisticas-vazio {
    padding: 2rem 1rem !important;
    text-align: center;
    color: var(--texto-suave);
}

.estatisticas-toolbar {
    margin-bottom: 0.85rem;
}

.estatisticas-ordenacao-form {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(140px, 0.8fr);
    gap: 0.55rem;
    align-items: end;
}

.estatisticas-ordenacao-form label {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.estatisticas-ordenacao-form label span {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.estatisticas-ordenacao-form select {
    width: 100%;
    min-height: 36px;
    padding: 0.48rem 0.65rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font: inherit;
}

.estatisticas-cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
}

.estatisticas-player-card {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.85rem;
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.estatisticas-player-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.estatisticas-player-main {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.estatisticas-player-main > strong {
    overflow-wrap: anywhere;
    font-size: 0.98rem;
    line-height: 1.2;
}

.estatisticas-player-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.estatisticas-aproveitamento {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 0.1rem;
    flex: 0 0 auto;
    min-width: 64px;
}

.estatisticas-aproveitamento span {
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.estatisticas-aproveitamento strong {
    font-family: var(--fonte-display);
    font-size: 1.05rem;
    color: var(--verde);
}

.estatisticas-record-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.estatisticas-record-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 32px;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 700;
}

.estatisticas-record-pill strong {
    color: var(--texto);
    font-size: 0.95rem;
}

.estatisticas-record-pill.vitoria {
    border-color: rgba(52, 211, 153, 0.3);
    background: rgba(52, 211, 153, 0.08);
}

.estatisticas-record-pill.empate {
    border-color: rgba(96, 165, 250, 0.3);
    background: rgba(96, 165, 250, 0.08);
}

.estatisticas-record-pill.derrota {
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.08);
}

.estatisticas-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0;
}

.estatisticas-metric-grid > div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.5rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.estatisticas-metric-grid dt {
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.estatisticas-metric-grid dd {
    margin: 0;
    color: var(--texto);
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.estatisticas-last-game {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.estatisticas-last-game span {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.estatisticas-player-card .overall-progress-card,
.estatisticas-player-card .overall-progress-disabled {
    min-width: 0;
}

.texto-suave { color: var(--texto-suave); }

.aproveitamento {
    display: inline-flex;
    width: 72px;
    height: 7px;
    margin-right: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--fundo-input);
    vertical-align: middle;
}

.aproveitamento span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--roxo-escuro), var(--roxo));
}

.overall-progress-card {
    min-width: 230px;
    display: grid;
    gap: 0.45rem;
}

.overall-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.78rem;
}

.overall-progress-head strong {
    color: var(--texto);
}

.overall-progress-head span {
    color: var(--texto-suave);
    font-weight: 700;
    white-space: nowrap;
}

.overall-progress-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.overall-progress-meta span {
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 0.16rem 0.45rem;
    color: var(--texto-suave);
    font-size: 0.72rem;
    white-space: nowrap;
}

.overall-progress-bar {
    display: block;
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--fundo-input);
}

.overall-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--verde);
}

.overall-progress-estavel .overall-progress-bar span {
    background: var(--azul);
}

.overall-progress-queda .overall-progress-bar span {
    background: var(--vermelho);
}

.overall-progress-disabled {
    min-width: 220px;
    display: grid;
    gap: 0.2rem;
}

.overall-progress-disabled strong {
    font-size: 0.82rem;
    color: var(--texto);
}

.overall-progress-disabled span {
    color: var(--texto-suave);
    font-size: 0.76rem;
}

/* ===========================
   PÁGINA SORTEIO
=========================== */
.sort-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sort-bar .sort-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--texto-suave);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-right: 4px;
}

.sort-bar .btn-sort {
    background: transparent;
    border: 1px solid var(--borda-forte);
    color: var(--texto-suave);
    border-radius: 999px;
    padding: 4px 14px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.sort-bar .btn-sort:hover { border-color: var(--roxo); color: var(--texto); }

.sort-bar .btn-sort.ativo {
    background: rgba(139, 92, 246, 0.15);
    border-color: var(--roxo);
    color: var(--roxo-suave);
    font-weight: 600;
}

.selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.selection-bar .contador {
    font-size: 15px;
    font-weight: 600;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.selection-bar .contador span {
    color: var(--roxo-suave);
    font-family: var(--fonte-display);
    font-weight: 700;
}

.selection-bar .contador small {
    display: block;
    margin-top: 0.15rem;
    color: var(--texto-suave);
    font-size: 0.74rem;
    font-weight: 800;
}

.selection-bar .contador small.salva { color: var(--verde); }
.selection-bar .contador small.suja { color: var(--ouro); }
.selection-bar .contador small.desatualizada { color: var(--vermelho); }

.selection-bar .btn-selecao {
    background: transparent;
    border: 1px solid var(--borda-forte);
    color: var(--texto-suave);
    border-radius: var(--radius-sm);
    padding: 5px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.selection-bar .btn-selecao:hover { border-color: var(--roxo); color: var(--texto); }

/* Grid de jogadores para seleção */
.convidados-panel {
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.convidados-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(15, 23, 42, 0.56));
}

.convidados-head::-webkit-details-marker {
    display: none;
}

.convidados-head strong {
    display: block;
    color: var(--texto);
    font-size: 14px;
}

.convidados-head span {
    color: var(--texto-suave);
    font-size: 12px;
}

.convidados-head-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

#contadorConvidados {
    flex: 0 0 auto;
    color: var(--roxo-suave);
    font-family: var(--fonte-display);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.convidados-head svg {
    width: 16px;
    height: 16px;
    color: var(--texto-suave);
    transition: transform 0.18s ease;
}

.convidados-panel[open] .convidados-head svg {
    transform: rotate(180deg);
}

.convidados-body {
    padding: 12px;
}

.convidado-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
    align-items: center;
}

.convidado-form input {
    width: 100%;
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
    padding: 0.6rem 0.85rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.convidado-form input::placeholder {
    color: var(--texto-suave);
    opacity: 0.78;
}

.convidado-form input:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

.convidado-form .btn {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
    min-height: 38px;
}

.convidado-form .btn svg,
.btn-confirmar-topo svg,
.confirmar-jogadores-acoes .btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    stroke-width: 2.4;
}

.convidados-lista {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
}

.convidados-vazio,
#statusConvidados {
    color: var(--texto-suave);
    font-size: 12px;
}

#statusConvidados {
    display: block;
    margin-top: 8px;
    color: var(--ouro);
}

.convidado-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-content: space-between;
    width: 198px;
    min-height: 34px;
    max-width: 100%;
    border: 1px solid rgba(139, 92, 246, 0.28);
    background: rgba(139, 92, 246, 0.1);
    color: var(--texto);
    border-radius: 8px;
    padding: 5px 7px 5px 10px;
}

.convidado-chip strong {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.convidado-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto-suave);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.convidado-chip button:hover {
    color: var(--vermelho);
    background: rgba(239, 68, 68, 0.14);
}

.jogadores-grid-novo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}

.confirmar-jogadores-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.confirmar-jogadores-acoes .btn {
    width: auto;
}

#statusConfirmarJogadores {
    color: var(--texto-suave);
    font-size: 13px;
}

.jogador-card-novo {
    position: relative;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    user-select: none;
}

.jogador-card-novo:hover {
    border-color: var(--roxo);
    box-shadow: 0 0 0 1px var(--roxo-brilho);
}

.jogador-card-novo.fora-sorteio {
    opacity: 0.58;
}

.jogador-card-novo.selecionado {
    border-color: var(--roxo);
    box-shadow: 0 0 0 2px var(--roxo-brilho);
    background: rgba(139, 92, 246, 0.1);
}

.jogador-card-novo.lista-salva:not(.selecionado) {
    border-color: rgba(250, 204, 21, 0.35);
}

.jogador-card-novo .jc-checkbox {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 16px;
    height: 16px;
    accent-color: var(--roxo);
    cursor: pointer;
}

.jogador-card-novo .jc-remover {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--texto-suave);
    opacity: 0.6;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.15s, opacity 0.15s;
}

.jogador-card-novo .jc-remover:hover { color: var(--vermelho); opacity: 1; }

.jogador-card-novo .jc-nome-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    margin-bottom: 5px;
}

.jogador-card-novo .jc-nome {
    font-size: 14px;
    font-weight: 700;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 22px);
}

.jogador-card-novo .jc-editar {
    color: var(--texto-suave);
    font-size: 13px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.jogador-card-novo .jc-editar:hover { color: var(--roxo-suave); }

.jc-status {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--texto-suave);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.jogador-card-novo.selecionado .jc-status {
    background: rgba(52, 211, 153, 0.14);
    color: var(--verde);
}

.jc-info-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

/* Configuração do sorteio */
.sorteio-config-card { margin-top: 24px; }

.sorteio-config-card,
.sorteio-contra-clube-card {
    border: 1px solid rgba(139, 92, 246, 0.32);
    background:
        linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(15, 23, 42, 0.94)),
        var(--fundo-card);
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.28);
    overflow: hidden;
}

.sorteio-accordion-title,
.sorteio-config-card .config-titulo,
.contra-clube-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 14px 16px;
    font-size: 15px;
    font-family: var(--fonte-display);
    font-weight: 800;
    letter-spacing: 0;
    color: var(--texto);
    text-transform: none;
    margin: -1rem -1rem 18px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.45), rgba(30, 41, 59, 0.2));
}

.sorteio-accordion-title::-webkit-details-marker,
.sorteio-config-card .config-titulo::-webkit-details-marker,
.contra-clube-titulo::-webkit-details-marker {
    display: none;
}

.sorteio-accordion-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sorteio-accordion-icon,
.sorteio-accordion-chevron {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sorteio-accordion-icon svg,
.sorteio-accordion-chevron svg {
    width: 18px;
    height: 18px;
}

.sorteio-accordion-chevron {
    transition: transform 0.18s ease, background 0.18s ease;
}

.sorteio-config-details[open] .sorteio-accordion-chevron,
.sorteio-contra-clube-card[open] .sorteio-accordion-chevron {
    transform: rotate(180deg);
    background: rgba(139, 92, 246, 0.28);
}

.sorteio-config-body {
    padding-top: 2px;
}

.config-fields-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.config-fields-row .form-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.config-fields-row .form-group-full {
    align-items: flex-start;
    flex: 1 1 100%;
}

.config-fields-row .form-group label {
    margin-bottom: 0;
    font-size: 14px;
    color: var(--texto-suave);
    white-space: nowrap;
}

.config-fields-row .form-group input,
.config-fields-row .form-group select,
.config-fields-row .form-group textarea {
    width: 150px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    padding: 6px 8px;
    background: var(--fundo-inset);
    color-scheme: dark;
}

.config-fields-row .form-group textarea {
    width: min(100%, 520px);
    min-height: 76px;
    text-align: left;
    resize: vertical;
}

.form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    color: var(--texto);
    font-weight: 700;
}

.home-match-meta .home-match-note {
    width: min(100%, 680px);
    line-height: 1.35;
    white-space: normal;
}

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

.btn-contra-clube {
    justify-content: center;
    cursor: pointer;
}

.btn-contra-clube input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.install-prompt {
    position: fixed;
    right: 16px;
    bottom: calc(94px + env(safe-area-inset-bottom));
    left: 16px;
    z-index: 520;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    max-width: 560px;
    margin: 0 auto;
    padding: 0.85rem;
    border: 1px solid rgba(139, 92, 246, 0.42);
    border-radius: 16px;
    background: rgba(12, 10, 20, 0.96);
    color: var(--texto);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.install-prompt.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.install-prompt[hidden] {
    display: none;
}

.install-prompt strong,
.install-prompt span {
    display: block;
}

.install-prompt strong {
    font-family: var(--fonte-display);
    font-size: 0.86rem;
    line-height: 1.2;
}

.install-prompt span {
    color: var(--texto-suave);
    font-size: 0.75rem;
    line-height: 1.35;
}

.install-prompt-primary,
.install-prompt-close {
    border: 0;
    cursor: pointer;
    font-family: var(--fonte-corpo);
    font-weight: 800;
}

.install-prompt-primary {
    min-height: 38px;
    padding: 0 0.85rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--roxo), var(--roxo-forte));
    color: #fff;
}

.install-prompt-close {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto-suave);
    font-size: 1.25rem;
    line-height: 1;
}

.btn-contra-clube.ativo {
    border-color: var(--verde);
    color: var(--verde);
    background: rgba(34, 197, 94, 0.12);
}

.clube-adversario-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.clube-adversario-inline label {
    margin: 0;
    color: var(--texto-suave);
    font-size: 13px;
    white-space: nowrap;
}

.clube-adversario-inline input {
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 10px;
    background: var(--fundo-inset);
    color-scheme: dark;
}

.modelo-confronto-group {
    max-width: 180px;
}

.modelo-confronto-select {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alerta-validacao {
    display: none;
    background: rgba(250, 204, 21, 0.09);
    border: 1px solid rgba(202, 138, 4, 0.6);
    color: var(--ouro);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

.alerta-validacao.visivel { display: block; }

.alerta-validacao:not(.aviso) {
    background: rgba(248, 113, 113, 0.11);
    border-color: rgba(248, 113, 113, 0.4);
    color: var(--vermelho);
}

.config-subpanel,
.campeonato-config,
.travas-panel {
    margin-top: 14px;
    padding: 14px;
    border-radius: var(--radius-sm);
}

.config-subpanel {
    border: 1px solid var(--borda);
    background: var(--fundo-inset);
}

.campeonato-config {
    border: 1px solid rgba(139, 92, 246, 0.22);
    background: rgba(139, 92, 246, 0.06);
}

.config-subpanel > summary,
.campeonato-config > summary,
.travas-panel > summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding-right: 28px;
}

.config-subpanel > summary::-webkit-details-marker,
.campeonato-config > summary::-webkit-details-marker,
.travas-panel > summary::-webkit-details-marker {
    display: none;
}

.config-subpanel > summary::marker,
.campeonato-config > summary::marker,
.travas-panel > summary::marker {
    content: "";
}

.config-subpanel-head,
.campeonato-config-head {
    display: block;
}

.config-subpanel-head span,
.campeonato-config-head strong {
    color: var(--texto);
    font-family: var(--fonte-display);
}

.config-subpanel-head i,
.campeonato-config-head i,
.travas-header i {
    position: absolute;
    top: 1px;
    right: 0;
    width: 16px;
    height: 16px;
    color: var(--texto-suave);
    transition: transform 0.15s ease;
}

.config-subpanel[open] .config-subpanel-head i,
.campeonato-config[open] .campeonato-config-head i,
.travas-panel[open] .travas-header i {
    transform: rotate(180deg);
}

.campeonato-config-head span {
    color: var(--texto-suave);
    font-size: 0.8rem;
}

.config-subpanel-body,
.campeonato-config > .config-fields-row {
    margin-top: 0.8rem;
}

.config-subpanel-body .form-group {
    margin-bottom: 0;
}

.evento-times-panel,
.evento-confrontos-panel {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255,255,255,.03);
}

.evento-times-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.evento-times-head div {
    display: grid;
    gap: .15rem;
}

.evento-times-head span,
.evento-time-hint,
.evento-times-actions small {
    color: var(--texto-suave);
    font-size: .85rem;
}

.evento-times-lista,
.evento-confrontos-lista {
    display: grid;
    gap: .75rem;
}

.evento-time-bloco {
    border: 1px solid color-mix(in srgb, var(--cor-time, var(--borda)) 45%, var(--borda));
    border-left: 4px solid var(--cor-time, var(--borda));
    border-radius: 8px;
    padding: .85rem;
    background: rgba(0,0,0,.12);
}

.evento-time-bloco-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.evento-time-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.evento-time-grid label,
.evento-time-jogadores {
    display: grid;
    gap: .35rem;
    color: var(--texto-suave);
    font-size: .85rem;
}

.evento-time-jogadores {
    grid-column: 1 / -1;
}

.evento-time-grid input,
.evento-time-grid select,
.evento-confronto-row input,
.evento-confronto-row select {
    width: 100%;
}

.evento-times-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.evento-confronto-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto minmax(0, 1fr) 120px 150px 40px;
    gap: .5rem;
    align-items: center;
}

.btn-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: transparent;
    color: var(--texto);
    cursor: pointer;
}

.btn-icon:hover {
    border-color: #ef4444;
    color: #ef4444;
}

@media (max-width: 640px) {
    .sorteio-contra-clube-card .contra-clube-body {
        padding-inline: 0;
    }

    .sorteio-contra-clube-card .config-fields-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .sorteio-contra-clube-card .config-fields-row .form-group,
    .sorteio-contra-clube-card .config-fields-row .form-group-full {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 0.35rem;
        width: 100%;
        min-width: 0;
    }

    .sorteio-contra-clube-card .config-fields-row .form-group label {
        white-space: normal;
    }

    .sorteio-contra-clube-card .config-fields-row .form-group input,
    .sorteio-contra-clube-card .config-fields-row .form-group select,
    .sorteio-contra-clube-card .config-fields-row .form-group textarea {
        width: 100%;
        max-width: none;
        text-align: left;
    }

    .evento-times-panel,
    .evento-confrontos-panel {
        padding: 0.75rem;
        margin-inline: 0;
    }

    .evento-times-head {
        align-items: stretch;
        flex-direction: column;
    }

    .evento-times-head .btn,
    .evento-times-actions .btn,
    .sorteio-contra-clube-card .btn-sortear {
        width: 100%;
    }

    .evento-time-bloco {
        padding: 0.75rem;
    }

    .evento-time-bloco-head {
        gap: 0.5rem;
    }

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

    .evento-time-grid input,
    .evento-time-grid select,
    .evento-time-grid select[multiple],
    .evento-confronto-row input,
    .evento-confronto-row select {
        min-width: 0;
        width: 100%;
    }

    .evento-confronto-row {
        padding: 0.75rem;
        border: 1px solid var(--borda);
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.12);
    }

    .evento-confronto-row > span {
        text-align: center;
    }

    .evento-confronto-row .btn-icon {
        width: 100%;
    }
}

/* Travas do sorteio */
.travas-panel {
    background: var(--fundo-inset);
    border: 1px solid var(--borda);
    margin-bottom: 16px;
}

.travas-header {
    display: block;
}

.travas-header strong { color: var(--texto); font-size: 14px; }

.travas-header span {
    display: block;
    color: var(--texto-suave);
    font-size: 12px;
    margin-top: 2px;
}

.btn-trava-add {
    margin-top: 10px;
    background: transparent;
    border: 1px solid rgba(139, 92, 246, 0.5);
    color: var(--roxo-suave);
    border-radius: 7px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.btn-trava-add:hover { border-color: var(--roxo); color: #fff; }

.travas-lista {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trava-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 110px 32px;
    gap: 8px;
    align-items: center;
}

.trava-row select {
    width: 100%;
    min-width: 0;
    height: 36px;
    background: var(--fundo-input);
    border: 1px solid var(--borda-forte);
    border-radius: 7px;
    color: var(--texto);
    padding: 6px 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}

.trava-row select option {
    background: var(--fundo-input);
    color: var(--texto);
}

.trava-remover {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid rgba(248, 113, 113, 0.4);
    background: rgba(248, 113, 113, 0.1);
    color: var(--vermelho);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s;
}

.trava-remover:hover { border-color: var(--vermelho); }

.travas-vazio { color: var(--texto-suave); font-size: 12px; }

/* Botões do sorteio */
.config-botoes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.sorteio-config-acoes {
    margin-top: 12px;
}

.sorteio-contra-clube-card {
    margin-top: 14px;
}

.sorteio-resultado-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.sorteio-resultado-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.sorteio-resultado-acoes .btn-embaralhar {
    padding: 8px 12px;
    font-size: 13px;
}

.contra-clube-body {
    display: grid;
    gap: 12px;
    padding-top: 16px;
}

.btn-sortear {
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px 28px;
    font-family: var(--fonte-display);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.1s, filter 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.25);
}

.btn-sortear:hover { box-shadow: var(--sombra-roxa); filter: brightness(1.08); }
.btn-sortear:active { transform: scale(0.97); }

.btn-sortear:disabled {
    background: var(--borda-forte);
    box-shadow: none;
    filter: none;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-embaralhar {
    background: transparent;
    color: var(--verde);
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: var(--radius-sm);
    padding: 11px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-embaralhar:hover {
    border-color: var(--verde);
    background: rgba(52, 211, 153, 0.08);
}

.btn-limpar {
    background: transparent;
    color: var(--texto-suave);
    border: 1px solid var(--borda-forte);
    border-radius: var(--radius-sm);
    padding: 11px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-limpar:hover { border-color: var(--vermelho); color: var(--vermelho); }

#resultado { margin-top: 24px; }

/* Importar lista do dia */
.importar-lista-panel {
    background: var(--fundo-inset);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 20px;
}

.importar-lista-panel .il-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}

.importar-lista-panel .il-titulo {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--roxo);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.importar-lista-panel .il-chevron {
    color: var(--texto-suave);
    font-size: 12px;
    transition: transform 0.2s;
}

.importar-lista-panel.aberto .il-chevron { transform: rotate(180deg); }

.importar-lista-panel .il-body { display: none; margin-top: 14px; }
.importar-lista-panel.aberto .il-body { display: block; }

.importar-lista-panel .il-hint {
    font-size: 12px;
    color: var(--texto-suave);
    margin-bottom: 10px;
    line-height: 1.5;
}

.importar-lista-panel textarea.il-textarea {
    width: 100%;
    min-height: 100px;
    background: var(--fundo-input);
    border: 1px solid var(--borda-forte);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font-size: 14px;
    padding: 10px 12px;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.15s;
    line-height: 1.5;
}

.importar-lista-panel textarea.il-textarea:focus {
    outline: none;
    border-color: var(--roxo);
}

.importar-lista-panel .il-acoes {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.importar-lista-panel .btn-importar {
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow 0.15s, filter 0.15s;
}

.importar-lista-panel .btn-importar:hover {
    box-shadow: var(--sombra-roxa);
    filter: brightness(1.08);
}

.importar-lista-panel .btn-limpar-lista {
    background: transparent;
    color: var(--texto-suave);
    border: 1px solid var(--borda-forte);
    border-radius: 7px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.importar-lista-panel .btn-limpar-lista:hover {
    border-color: var(--vermelho);
    color: var(--vermelho);
}

.il-resultado { margin-top: 12px; display: none; }
.il-resultado.visivel { display: block; }

.il-resultado .il-res-titulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 8px;
}

.il-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.il-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

.il-chip.encontrado {
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: var(--verde);
}

.il-chip.nao-encontrado {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: var(--vermelho);
}

.il-res-nao-encontrados {
    font-size: 12px;
    color: var(--vermelho);
    margin-top: 4px;
}

.il-add-nao-encontrados { margin-top: 10px; }

.btn-adicionar-nao-encontrados {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    transition: box-shadow 0.15s, transform 0.1s;
}

.btn-adicionar-nao-encontrados:hover {
    box-shadow: var(--sombra-roxa);
    color: #fff;
    transform: translateY(-1px);
}

.aviso-balanceamento {
    font-size: 12px;
    color: var(--ouro);
    background: rgba(250, 204, 21, 0.07);
    border: 1px solid rgba(202, 138, 4, 0.35);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 14px;
    display: none;
}

.aviso-balanceamento.visivel { display: block; }

.campeonato-painel {
    gap: 1rem;
    margin-top: 1rem;
}

.campeonato-historico {
    display: grid;
}

.campeonato-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.85rem;
    flex-wrap: wrap;
}

.campeonato-bloco {
    min-width: 0;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-inset);
    overflow: hidden;
}

.campeonato-accordion > summary {
    cursor: pointer;
    list-style: none;
}

.campeonato-accordion > summary::-webkit-details-marker {
    display: none;
}

.campeonato-accordion:not([open]) > .campeonato-head {
    border-bottom: none;
}

.times-nomes-bloco {
    grid-column: 1 / -1;
    overflow: visible;
}

.campeonato-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: var(--fundo-input);
    border-bottom: 1px solid var(--borda);
}

.campeonato-head strong {
    display: block;
    color: var(--texto);
    font-family: var(--fonte-display);
}

.campeonato-head span {
    display: block;
    color: var(--texto-suave);
    font-size: 0.8rem;
}

.campeonato-head b {
    flex-shrink: 0;
    color: var(--verde);
    font-size: 0.88rem;
}

.campeonato-tabela-wrap {
    overflow-x: auto;
}

.campeonato-tabela {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.campeonato-tabela th,
.campeonato-tabela td {
    padding: 0.58rem 0.7rem;
    border-bottom: 1px solid var(--borda);
    text-align: left;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.campeonato-tabela th {
    color: var(--texto-suave);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.campeonato-tabela tr.campeao td {
    color: var(--verde);
    background: rgba(52, 211, 153, 0.08);
    font-weight: 900;
}

.partidas-lista {
    display: grid;
    gap: 0.55rem;
    padding: 0.85rem;
}

.gols-jogo-form {
    gap: 0.75rem;
}

.gols-placar-row .partida-placar {
    pointer-events: none;
}

.gols-times-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.gols-time-card {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
    padding: 0.7rem;
    border: 1px solid var(--cor-time, var(--borda));
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: inset 3px 0 0 var(--cor-time, transparent);
}

.gols-time-card[hidden] {
    display: none !important;
}

.gols-time-card h3 {
    margin: 0 0 0.2rem;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 0.88rem;
}

.gols-time-vazio {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.82rem;
}

.gols-jogador-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr) minmax(96px, auto);
    align-items: center;
    gap: 0.55rem;
    min-height: 42px;
}

.gols-jogador-header {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr) minmax(96px, auto);
    align-items: end;
    gap: 0.55rem;
    color: var(--texto-suave);
    font-size: 0.66rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.gols-jogador-row > span {
    min-width: 0;
    overflow: hidden;
    color: var(--texto);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gols-stat-control {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 0.22rem;
}

.gols-stat-botoes {
    display: grid;
    grid-template-columns: 32px 28px 32px;
    align-items: center;
    gap: 0.22rem;
}

.gols-jogador-row button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--borda-forte);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.gols-jogador-row button:hover,
.gols-jogador-row button:focus-visible {
    border-color: var(--roxo-suave);
    color: var(--roxo-suave);
}

.gols-jogador-row strong {
    min-width: 0;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 0.98rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.gols-jogador-row-readonly {
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: center;
    min-height: 30px;
}

.gols-jogador-row-readonly > span {
    text-align: left;
}

.times-nomes-editor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.7rem;
    padding: 0.85rem;
}

.times-nomes-editor label {
    display: grid;
    gap: 0.35rem;
}

.times-nomes-editor span {
    color: var(--texto-suave);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.times-nomes-editor input,
.partida-row select {
    width: 100%;
    min-width: 0;
    padding: 0.48rem 0.55rem;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    font-weight: 800;
}

.time-nome-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
}

.time-cor-dropdown {
    position: relative;
}

.time-cor-atual {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 5px;
    background: var(--time-cor);
    box-shadow: 0 0 0 1px var(--borda);
    cursor: pointer;
}

.time-cor-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    display: none;
    grid-template-columns: repeat(2, 18px);
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-inset);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.time-cor-menu.is-open {
    display: grid;
}

.time-cor-opcao {
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    background: var(--time-cor);
    cursor: pointer;
}

.time-cor-opcao.is-active {
    border-color: #fff;
    box-shadow: 0 0 0 1px var(--time-cor);
}

.time-cor-atual:focus-visible,
.time-cor-opcao:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.partida-row select option {
    background: var(--fundo-input);
    color: var(--texto);
}

.partida-row select.partida-time-select {
    border-color: var(--cor-time, var(--borda));
    box-shadow: inset 3px 0 0 var(--cor-time, transparent);
}

.partida-row select.partida-time-select:focus {
    border-color: var(--cor-time, var(--roxo));
    box-shadow: inset 3px 0 0 var(--cor-time, transparent), 0 0 0 2px color-mix(in srgb, var(--cor-time, var(--roxo)) 24%, transparent);
}

.campeonato-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    place-items: center;
    padding: 1rem;
    background: rgba(3, 1, 12, 0.72);
    backdrop-filter: blur(10px);
}

.campeonato-modal.is-open {
    display: grid;
}

.campeonato-modal-card {
    position: relative;
    width: min(420px, 100%);
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: 18px;
    padding: 1.35rem;
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.26), transparent 34%),
        linear-gradient(145deg, #1e1733, #0d0718 68%);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    text-align: center;
    color: var(--texto);
}

.campeonato-modal-close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 32px;
    height: 32px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--texto);
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
}

.campeonato-modal-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 0.85rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(52, 211, 153, 0.82));
    box-shadow: 0 14px 34px rgba(139, 92, 246, 0.32);
    font-size: 2rem;
}

.campeonato-modal h3 {
    margin: 0 0 0.55rem;
    font-family: var(--fonte-display);
    font-size: 1.35rem;
}

.campeonato-modal p {
    margin: 0 auto 1.15rem;
    max-width: 32ch;
    color: var(--texto-suave);
    font-size: 0.92rem;
}

.campeonato-modal-actions {
    display: flex;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.campeonato-modal-card-campeao {
    width: min(520px, 100%);
    padding: 2.1rem 1.6rem;
    border-radius: 22px;
    border-color: rgba(251, 191, 36, 0.55);
    background:
        radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.30), transparent 38%),
        radial-gradient(circle at 0% 20%, rgba(52, 211, 153, 0.22), transparent 32%),
        linear-gradient(145deg, #24183a, #0d0718 70%);
}

.campeonato-modal-trofeu {
    background: linear-gradient(135deg, #fbbf24, #8b5cf6);
    box-shadow: 0 14px 38px rgba(251, 191, 36, 0.28);
}

.campeao-kicker {
    display: inline-flex;
    margin-bottom: 0.75rem;
    color: #fbbf24;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.campeonato-modal-card-campeao .campeonato-modal-icon {
    width: 82px;
    height: 82px;
    margin-bottom: 1.15rem;
    border-radius: 24px;
    font-size: 2.45rem;
}

.campeonato-modal-card-campeao h3 {
    max-width: 15ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.65rem;
    line-height: 1.16;
}

.campeonato-modal-card-campeao p {
    max-width: 34ch;
    margin-top: 0.75rem;
    margin-bottom: 1.45rem;
    line-height: 1.45;
}

.campeonato-confetes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.campeonato-confetes i {
    position: absolute;
    top: -18px;
    left: var(--x);
    width: 8px;
    height: 14px;
    border-radius: 3px;
    background: var(--cor);
    transform: rotate(var(--rot));
    animation: campeonato-confete-fall var(--dur) linear var(--delay) infinite;
}

@keyframes campeonato-confete-fall {
    to {
        top: 110%;
        transform: translateX(26px) rotate(calc(var(--rot) + 520deg));
    }
}

.partida-row {
    display: grid;
    grid-template-columns: 70px minmax(90px, 1fr) 58px 18px 58px minmax(90px, 1fr);
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    position: relative;
}

.confronto-card-menu {
    position: absolute;
    right: 0.65rem;
    bottom: calc(100% - 0.25rem);
    z-index: 8;
    min-width: 132px;
    padding: 0.35rem;
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 12px;
    background: #15101f;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.42);
}

.confronto-card-menu button {
    width: 100%;
    border: 0;
    border-radius: 9px;
    padding: 0.55rem 0.7rem;
    background: rgba(248, 113, 113, 0.14);
    color: #fecaca;
    cursor: pointer;
    font-weight: 800;
}

.confronto-card-menu button:hover {
    background: rgba(248, 113, 113, 0.24);
}

.partida-row-historico {
    grid-template-columns: 64px minmax(0, 1fr) 52px 18px 52px minmax(0, 1fr);
}

.partida-row-com-cronometro {
    grid-template-rows: auto auto;
    row-gap: 0.28rem;
}

.partida-row-com-cronometro > .partida-jogo-label {
    grid-column: 1;
    grid-row: 2;
}

.partida-row-com-cronometro > .partida-cronometro {
    grid-column: 3 / 6;
    grid-row: 1;
    justify-self: center;
}

.partida-row-com-cronometro > .partida-time-fixo:first-of-type,
.partida-row-com-cronometro > .partida-time-select:first-of-type {
    grid-column: 2;
    grid-row: 2;
}

.partida-row-com-cronometro > .partida-time-fixo:last-of-type,
.partida-row-com-cronometro > .partida-time-select:last-of-type {
    grid-column: 6;
    grid-row: 2;
}

.partida-row-com-cronometro > .partida-placar:first-of-type {
    grid-column: 3;
    grid-row: 2;
}

.partida-row-com-cronometro > .partida-placar:last-of-type {
    grid-column: 5;
    grid-row: 2;
}

.partida-row-com-cronometro > b {
    grid-column: 4;
    grid-row: 2;
}

.partida-row span {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
}

.partida-jogo-label {
    min-width: 0;
    display: grid;
    align-items: center;
}

.partida-jogo-label > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partida-cronometro {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 0.2rem;
    padding: 0.18rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.partida-cronometro .partida-cronometro-display {
    min-width: 44px;
    color: var(--texto);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.partida-cronometro button {
    display: inline-grid;
    width: 26px;
    min-width: 26px;
    height: 26px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
}

.partida-cronometro button:hover,
.partida-cronometro button:focus-visible {
    background: rgba(139, 92, 246, 0.16);
    color: var(--roxo-suave);
}

.partida-cronometro button:disabled {
    opacity: 0.38;
    cursor: default;
}

.partida-cronometro button:disabled:hover {
    background: transparent;
    color: var(--texto-suave);
}

.partida-cronometro svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.4;
}

.partida-row strong,
.partida-row button.partida-time-fixo {
    min-width: 0;
    overflow: hidden;
    color: var(--texto);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partida-row strong.partida-time-fixo,
.partida-row button.partida-time-fixo {
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--cor-time, var(--borda));
    border-radius: 7px;
    background: var(--fundo-input);
    box-shadow: inset 3px 0 0 var(--cor-time, transparent);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    text-align: left;
}

.partida-row input {
    width: 58px;
    min-width: 0;
    padding: 0.4rem;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto);
    text-align: center;
    font-weight: 900;
}

.partida-row-historico input[type="number"],
.partida-row-historico .partida-placar {
    width: 52px;
}

.partida-row b {
    color: var(--texto-suave);
    text-align: center;
}

.partida-placar {
    width: 58px;
    padding: 0.4rem;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto);
    text-align: center;
    font-weight: 900;
}

.partida-row-varzea {
    grid-template-columns: 70px minmax(110px, 1fr) 58px 18px 58px minmax(110px, 1fr);
}

.partida-row.partida-invalida {
    border-color: rgba(248, 113, 113, 0.45);
}

.partida-row small {
    grid-column: 2 / -1;
    color: var(--vermelho);
    font-size: 0.74rem;
    font-weight: 800;
}

/* ===========================
   PÁGINA JOGADORES
=========================== */
.jogadores-form-card,
.jogadores-lista-card { overflow: hidden; }

.jogadores-form-title {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 1.15rem;
}

.jogadores-form-toggle {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.jogadores-form-toggle > div {
    flex: 1;
    min-width: 0;
}

.jogadores-form-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: var(--texto-suave);
    transition: transform 0.18s ease, color 0.18s ease;
}

.jogadores-form-toggle:hover .jogadores-form-chevron,
.jogadores-form-toggle:focus-visible .jogadores-form-chevron {
    color: var(--texto);
}

.jogadores-form-toggle:focus-visible {
    outline: 2px solid rgba(139, 92, 246, 0.5);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

.jogadores-form-card.is-open .jogadores-form-chevron {
    transform: rotate(180deg);
}

.jogadores-form-card.is-collapsed .jogadores-form-title {
    margin-bottom: 0;
}

.jogadores-form-card.is-collapsed {
    display: none;
}

.jogadores-form-card.is-collapsed .jogadores-form-content {
    display: none;
}

.jogadores-form-title h2,
.jogadores-lista-header h2 { margin-bottom: 0.15rem; }

.jogadores-form-title p,
.jogadores-lista-header p {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.85rem;
}

.jogadores-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--radius-sm);
    background: rgba(139, 92, 246, 0.13);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: var(--roxo-suave);
    font-weight: 800;
}

.jogadores-lista-header {
    gap: 1rem;
    flex-wrap: wrap;
}

.jogadores-lista-topo-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-left: auto;
}

.jogadores-contador,
.overall-contador {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: 0.82rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.form-busca-jogadores-compacta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.form-busca-jogadores-compacta .campo-busca-jogadores {
    width: clamp(150px, 22vw, 230px);
    min-height: 30px;
    height: 30px;
    padding: 0 0.55rem;
    border-radius: 7px;
}

.form-busca-jogadores-compacta .campo-busca-jogadores input {
    padding: 0;
    font-size: 0.78rem;
}

.form-busca-jogadores-compacta .campo-busca-jogadores svg {
    width: 14px;
    height: 14px;
}

.btn-limpar-busca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto-suave);
}

.btn-limpar-busca:hover {
    border-color: rgba(248, 113, 113, 0.45);
    color: var(--vermelho);
}

.btn-limpar-busca svg {
    width: 14px;
    height: 14px;
}

.jogadores-lista-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.jogadores-lista-rodape .btn-danger {
    width: auto;
    min-height: 32px;
    padding: 0.38rem 0.7rem;
    font-size: 0.74rem;
}

.form-por-pagina-rodape {
    margin: 0;
}

.por-pagina-control-compacto {
    min-height: 32px;
    padding: 0 0.5rem;
    font-size: 0.72rem;
    border-radius: 7px;
}

.por-pagina-control-compacto select {
    min-width: 38px;
    font-size: 0.74rem;
}

.btn-montar-lote { margin-top: 0.65rem; }

.lote-preview {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.lote-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 70px 58px 32px;
    gap: 0.45rem;
    align-items: center;
    padding: 0.45rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-inset);
}

.lote-row input,
.lote-row select {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0.35rem 0.55rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: 6px;
    color: var(--texto);
    font: inherit;
    font-size: 0.84rem;
}

.lote-row input[name="lote_nomes[]"] { font-weight: 600; }

.lote-row select[name="lote_posicoes[]"],
.lote-row select[name="lote_overalls[]"] {
    padding-inline: 0.35rem;
    text-align: center;
    font-weight: 700;
}

.lote-row select option {
    background: var(--fundo-input);
    color: var(--texto);
}

.lote-row input:focus,
.lote-row select:focus {
    outline: none;
    border-color: var(--roxo);
}

.lote-remover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(248, 113, 113, 0.4);
    border-radius: 7px;
    background: rgba(248, 113, 113, 0.1);
    color: var(--vermelho);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: border-color 0.15s;
}

.lote-remover:hover { border-color: var(--vermelho); }

.lote-vazio {
    margin: 0;
    padding: 0.75rem;
    border: 1px dashed var(--borda-forte);
    border-radius: var(--radius-sm);
    color: var(--texto-suave);
    font-size: 0.85rem;
}

/* Busca + paginação */
.form-busca-jogadores {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    background: var(--fundo-inset);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.campo-busca-jogadores {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 240px;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding: 0 0.75rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: 6px;
    color: var(--texto-suave);
    transition: border-color 0.15s;
}

.campo-busca-jogadores:focus-within { border-color: var(--roxo); }

.campo-busca-jogadores input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0.55rem 0;
    background: transparent;
    border: 0;
    color: var(--texto);
    font-size: 0.9rem;
}

.campo-busca-jogadores input:focus { outline: none; }

.por-pagina-control {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.65rem;
    min-height: 40px;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: 6px;
    color: var(--texto-suave);
    font-size: 0.82rem;
    white-space: nowrap;
}

.por-pagina-control select {
    background: transparent;
    border: 0;
    color: var(--texto);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.por-pagina-control select option {
    background: var(--fundo-input);
    color: var(--texto);
}

.por-pagina-control select:focus { outline: none; }

.tabela-jogadores-wrap {
    overflow-x: auto;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.tabela-jogadores th,
.tabela-jogadores td { vertical-align: middle; }

.tabela-jogadores th { background: rgba(139, 92, 246, 0.05); }

.tabela-jogadores tbody tr:hover td { background: rgba(139, 92, 246, 0.06); }

.jogador-card-lista {
    width: 190px;
    min-width: 172px;
    text-align: center;
}

.jogador-card-lista .player-mini-card,
.jogador-card-lista .player-card-medium {
    width: 64px;
    margin-inline: auto;
}

.jogador-card-lista .player-card-medium {
    width: 150px;
}

.jogador-card-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.jogador-card-selecao-wrap {
    position: relative;
    display: inline-block;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.jogador-card-selecao-indicador {
    position: absolute;
    right: -7px;
    top: -7px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--roxo), var(--verde));
    color: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.38);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.55) rotate(-14deg);
    transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jogador-card-selecao-indicador svg {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.jogador-card-selecao-wrap.is-selected .jogador-card-selecao-indicador {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.jogador-card-menu {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 10px);
    z-index: 8;
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.35rem;
    border: 1px solid rgba(139, 92, 246, 0.34);
    border-radius: 999px;
    background: rgba(18, 12, 35, 0.9);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.38);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px) scale(0.84);
    transform-origin: bottom center;
    transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(10px);
}

.jogador-card-menu::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: rgba(18, 12, 35, 0.9);
    border-right: 1px solid rgba(139, 92, 246, 0.34);
    border-bottom: 1px solid rgba(139, 92, 246, 0.34);
    transform: translateX(-50%) rotate(45deg);
}

.jogador-card-selecao-wrap.is-single-selected .jogador-card-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

.jogador-card-menu a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.jogador-card-menu a:hover,
.jogador-card-menu a:focus-visible {
    background: rgba(139, 92, 246, 0.34);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.jogador-card-menu button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.jogador-card-menu button:hover,
.jogador-card-menu button:focus-visible {
    background: rgba(139, 92, 246, 0.34);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.jogador-card-menu a.btn-excluir:hover,
.jogador-card-menu a.btn-excluir:focus-visible {
    background: rgba(248, 113, 113, 0.2);
    color: var(--vermelho);
}

.jogador-card-menu svg {
    width: 15px;
    height: 15px;
}

.jogador-card-menu-form {
    display: inline-flex;
    margin: 0;
}

.jogador-card-selecao-wrap.is-selected .player-mini-card,
.jogador-card-selecao-wrap.is-selected .player-card-medium {
    transform: translateY(-2px) scale(1.04);
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.52)) drop-shadow(0 0 0 rgba(34, 211, 238, 0));
}

.jogador-card-selecao-wrap.is-selected::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(34, 211, 238, 0.5);
    border-radius: 10px;
    opacity: 0.9;
    pointer-events: none;
    animation: cardSelectPulse 0.34s ease;
}

@keyframes cardSelectPulse {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 0.9;
        transform: scale(1);
    }
}

.jogador-card-posicao {
    display: block;
    margin-top: 0.35rem;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.jogador-card-caracteristica {
    display: block;
    margin-top: 0.12rem;
    color: rgba(226, 232, 240, 0.52);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.15;
    white-space: nowrap;
}

.jogadores-lista-header > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
}

.jogadores-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    width: 100%;
}

.jogadores-tabs-com-add {
    grid-template-columns: 38px repeat(3, minmax(0, 1fr));
}

.jogadores-tabs a,
.jogadores-tab-add {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
    min-height: 34px;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto-suave);
    font-size: 0.9rem;
    font-weight: 900;
}

.jogadores-tab-add {
    width: 38px;
    padding-inline: 0;
    cursor: pointer;
}

.jogadores-tab-add svg.lucide {
    width: 16px;
    height: 16px;
}

.jogadores-tabs a:hover,
.jogadores-tabs a.ativo,
.jogadores-tab-add:hover,
.jogadores-tab-add:focus-visible {
    border-color: rgba(139, 92, 246, 0.58);
    background: rgba(139, 92, 246, 0.16);
    color: var(--texto);
}

.jogadores-tab-add:focus-visible {
    outline: 2px solid rgba(139, 92, 246, 0.55);
    outline-offset: 2px;
}

.jogadores-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(10, 8, 18, 0.9);
    border-radius: 999px;
    background: #a855f7;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 18px rgba(168, 85, 247, 0.35);
}

.col-check {
    width: 42px;
    text-align: center;
}

.col-check input,
.overall-checkbox,
.overall-select-all {
    width: 16px;
    height: 16px;
    accent-color: var(--roxo);
    cursor: pointer;
}

.jogador-nome {
    display: inline-block;
    max-width: 260px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--texto);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.jogador-nome:hover,
.jogador-nome:focus-visible {
    color: var(--verde);
    outline: none;
}

.jogadores-acoes { align-items: center; }

.jogadores-acoes a,
.btn-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    color: var(--texto);
    line-height: 1;
    transition: border-color 0.15s, color 0.15s, transform 0.1s;
}

.jogadores-acoes a:hover,
.btn-acao:hover {
    border-color: var(--roxo);
    color: var(--roxo-suave);
    transform: translateY(-1px);
}

.jogadores-acoes .btn-acao-danger:hover {
    border-color: var(--vermelho);
    color: var(--vermelho);
}

.btn-acao:disabled,
.btn-acao[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.form-inline .btn-acao {
    padding: 0;
}

.acoes-em-lote {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.jogadores-vazio {
    padding: 2rem 1rem !important;
    color: var(--texto-suave);
    text-align: center;
}

.paginador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.btn-pag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--fundo-input);
    color: var(--texto);
    border: 1px solid var(--borda);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-variant-numeric: tabular-nums;
}

.btn-pag:hover:not(.disabled):not(.ativo) {
    border-color: var(--roxo);
    color: var(--roxo-suave);
}

.btn-pag.ativo {
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
    border-color: var(--roxo);
    pointer-events: none;
}

.btn-pag.disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

/* ===========================
   PÁGINA EVOLUÇÃO DE OVERALL
=========================== */
.overall-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.overall-card .card-header h2 { margin-bottom: 0.2rem; }

.overall-votos-info {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.overall-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.8rem 0.95rem;
    background: var(--fundo-inset);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.overall-check-col {
    width: 40px;
    text-align: center;
}

.overall-voto-form {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.overall-liberar-form { margin: 0; }

.overall-input {
    min-width: 88px;
    padding: 0.4rem 0.55rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: 6px;
    color: var(--texto);
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.overall-input:focus {
    outline: none;
    border-color: var(--roxo);
}

.overall-btn { width: auto; }

.badge-overall-novo {
    display: inline-flex;
    min-width: 44px;
    justify-content: center;
}

.overall-voto-lista {
    display: grid;
    gap: 0.65rem;
}

.overall-voto-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--borda);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
}

.overall-voto-jogador {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.6rem;
}

.overall-voto-jogador strong {
    overflow: hidden;
    color: var(--texto);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overall-voto-form-compacto {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
}

.overall-voto-form-compacto .overall-input {
    width: 70px;
    min-width: 70px;
    text-align: center;
}

.overall-voto-vazio {
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
}

.jogadores-evolucao-lista {
    gap: 0.85rem;
}

.jogadores-evolucao-card {
    grid-template-columns: 172px minmax(0, 1fr) minmax(180px, auto);
    align-items: center;
    border-radius: var(--radius-sm);
}

.jogadores-evolucao-card-preview {
    position: relative;
    text-align: center;
}

.jogadores-evolucao-card-preview .overall-checkbox {
    position: absolute;
    left: 0.15rem;
    top: 0.15rem;
    z-index: 2;
}

.jogadores-evolucao-card-preview .player-card-medium {
    width: 150px;
    margin-inline: auto;
}

.jogadores-evolucao-card-info {
    min-width: 0;
}

.jogadores-evolucao-card-info strong {
    display: block;
    margin-bottom: 0.65rem;
    overflow: hidden;
    color: var(--texto);
    font-size: 1.05rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jogadores-evolucao-overalls {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    color: var(--texto-suave);
    font-size: 0.82rem;
    font-weight: 800;
}

.jogadores-evolucao-overalls span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.overall-alcancado-chip {
    color: var(--verde);
}

.badge-overall-alcancado {
    border-color: var(--verde);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--verde) 25%, transparent);
}

.overall-alcancado-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--verde) 38%, var(--borda));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--verde) 8%, transparent);
}

.overall-alcancado-panel > div:first-child {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.overall-alcancado-panel strong {
    font-size: 0.82rem;
}

.overall-alcancado-panel span {
    color: var(--texto-suave);
    font-size: 0.76rem;
}

.overall-alcancado-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.overall-alcancado-actions form {
    margin: 0;
}

.jogadores-evolucao-voto {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.overall-batch-action {
    position: sticky;
    top: 0.65rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: var(--radius-sm);
    background: rgba(18, 12, 35, 0.92);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(12px);
}

.overall-batch-action[hidden] {
    display: none !important;
}

.overall-batch-action span {
    color: var(--texto-suave);
    font-size: 0.82rem;
    font-weight: 800;
}

.overall-batch-action b {
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.overall-batch-action .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.overall-batch-action svg {
    width: 15px;
    height: 15px;
}

/* ===========================
   LOJA
=========================== */
.loja-header {
    display: flex;
    flex-direction: column;
}

.loja-resumo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.loja-resumo-pacotes {
    grid-template-columns: 1fr;
}

.loja-saldo-card,
.loja-jogador-card {
    display: grid;
    gap: 0.35rem;
}

.loja-pacotes-atalho {
    position: relative;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.loja-pacotes-atalho::after {
    content: "";
    position: absolute;
    inset: auto -18px -34px auto;
    width: 96px;
    height: 96px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.18);
    pointer-events: none;
}

.loja-pacotes-atalho:hover,
.loja-pacotes-atalho:focus-visible,
.loja-pacotes-atalho.is-active {
    border-color: rgba(139, 92, 246, 0.72);
    background: rgba(139, 92, 246, 0.1);
    transform: translateY(-1px);
    outline: none;
}

.loja-resumo-label,
.loja-card-kicker {
    color: var(--verde);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.loja-saldo-card strong,
.loja-jogador-card strong {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--fonte-display);
    font-size: 1.65rem;
    line-height: 1.1;
}

.loja-saldo-card strong {
    color: var(--ouro);
    font-variant-numeric: tabular-nums;
}

.loja-saldo-card svg {
    width: 23px;
    height: 23px;
}

.loja-saldo-card small,
.loja-jogador-card small {
    color: var(--texto-suave);
}

.loja-carousel {
    position: relative;
    display: grid;
    gap: 0.75rem;
}

.loja-carousel-controls {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.loja-carousel-btn {
    color: var(--texto);
}

.loja-carousel-btn:hover,
.loja-carousel-btn:focus-visible {
    border-color: var(--roxo);
    color: var(--roxo-suave);
    outline: none;
}

.loja-carousel-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.loja-grid {
    display: flex;
    gap: 0.85rem;
    align-items: stretch;
    margin-inline: -0.35rem;
    padding: 0.1rem 0.35rem 0.65rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 0.35rem;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.52) transparent;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

.loja-grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.loja-grid::-webkit-scrollbar {
    height: 8px;
}

.loja-grid::-webkit-scrollbar-track {
    background: transparent;
}

.loja-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.52);
}

@media (hover: hover) and (pointer: fine) {
    .loja-grid {
        cursor: grab;
    }
}

.loja-card {
    display: flex;
    flex: 0 0 clamp(188px, 23vw, 224px);
    min-width: 0;
    flex-direction: column;
    gap: 0.75rem;
    scroll-snap-align: start;
}

.loja-card-preview {
    display: flex;
    justify-content: center;
    min-height: 234px;
}

.loja-card-preview .player-card-medium {
    width: 150px;
    cursor: default;
}

.loja-card-preview .player-card-medium:hover,
.loja-card-preview .player-card-medium:focus-visible {
    transform: none;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.42));
}

.loja-card-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.loja-card-info h2 {
    margin-top: 0.1rem;
    font-size: 1rem;
}

.loja-card-nivel {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 0.28rem;
    padding: 0.18rem 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.loja-card-nivel-raro {
    border-color: rgba(56, 189, 248, 0.36);
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
}

.loja-card-nivel-epico {
    border-color: rgba(168, 85, 247, 0.42);
    background: rgba(168, 85, 247, 0.14);
    color: #d8b4fe;
}

.loja-card-nivel-lendario {
    border-color: rgba(250, 204, 21, 0.42);
    background: rgba(250, 204, 21, 0.14);
    color: #facc15;
}

.loja-preco {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.62rem;
    border: 1px solid rgba(250, 204, 21, 0.26);
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.08);
    color: var(--ouro);
    font-size: 0.78rem;
    white-space: nowrap;
}

.loja-preco svg {
    width: 15px;
    height: 15px;
}

.loja-card-form {
    margin-top: auto;
}

.loja-card-form .btn[disabled] {
    opacity: 0.62;
    cursor: not-allowed;
}

.loja-pacotes-topo {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.75rem;
}

.loja-pacotes-grid {
    gap: 0.9rem;
}

.loja-pacote-card {
    display: flex;
    flex: 0 0 clamp(218px, 28vw, 260px);
    min-width: 0;
    min-height: 444px;
    flex-direction: column;
    gap: 0.85rem;
    scroll-snap-align: start;
}

.loja-pacote-preview {
    display: flex;
    min-height: 244px;
    align-items: center;
    justify-content: center;
}

.loja-pacote-pack {
    position: relative;
    display: grid;
    width: 154px;
    aspect-ratio: 0.72;
    align-content: start;
    justify-items: center;
    padding: 2.85rem 1rem 1.05rem;
    overflow: hidden;
    border: 1px solid rgba(45, 212, 191, 0.48);
    border-radius: 10px 10px 16px 16px;
    color: #fff;
    isolation: isolate;
    background: #06111b;
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.08),
        0 18px 30px rgba(0, 0, 0, 0.48),
        0 0 24px rgba(20, 184, 166, 0.18);
}

.loja-pacote-pack-reveal {
    width: min(198px, 56vw);
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.12),
        0 22px 54px rgba(0, 0, 0, 0.62),
        0 0 46px rgba(20, 184, 166, 0.34);
}

.loja-pacote-pack::before,
.loja-pacote-pack::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.loja-pacote-pack::before {
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0 16%, rgba(45, 212, 191, 0.9) 17%, transparent 19% 100%),
        linear-gradient(240deg, transparent 0 16%, rgba(34, 211, 238, 0.86) 17%, transparent 19% 100%),
        linear-gradient(146deg, rgba(255, 255, 255, 0.12), transparent 30%),
        radial-gradient(circle at 50% 102%, rgba(20, 184, 166, 0.42), transparent 38%),
        linear-gradient(180deg, #0c1627 0%, #07111d 52%, #030812 100%);
}

.loja-pacote-pack::after {
    inset: 20px 14px 18px;
    border: 1px solid rgba(45, 212, 191, 0.34);
    border-radius: 8px 8px 14px 14px;
    background:
        linear-gradient(45deg, transparent 0 49%, rgba(45, 212, 191, 0.45) 50%, transparent 51%),
        linear-gradient(135deg, transparent 0 49%, rgba(34, 211, 238, 0.36) 50%, transparent 51%),
        radial-gradient(circle at 50% 90%, rgba(45, 212, 191, 0.12), transparent 36%);
}

.loja-pacote-serrilhado {
    position: absolute;
    left: -2px;
    right: -2px;
    z-index: 2;
    height: 16px;
    background:
        repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.7) 0 5px, rgba(3, 7, 18, 0.96) 5px 10px),
        linear-gradient(180deg, rgba(148, 163, 184, 0.48), rgba(15, 23, 42, 0.92));
    box-shadow: 0 0 12px rgba(45, 212, 191, 0.28);
}

.loja-pacote-serrilhado-top {
    top: 0;
}

.loja-pacote-serrilhado-bottom {
    bottom: 0;
    transform: rotate(180deg);
}

.loja-pacote-lacre {
    position: relative;
    z-index: 3;
    display: grid;
    width: 42px;
    height: 48px;
    margin-top: -1.65rem;
    place-items: center;
    clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
    border: 1px solid rgba(45, 212, 191, 0.5);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.9));
    color: #2dd4bf;
    box-shadow: 0 0 18px rgba(45, 212, 191, 0.24);
}

.loja-pacote-lacre svg {
    width: 21px;
    height: 21px;
    stroke-width: 2.2;
}

.loja-pacote-logo {
    position: relative;
    z-index: 3;
    margin-top: 2.1rem;
    color: #20e7b7;
    font-family: var(--fonte-display);
    font-size: 2.85rem;
    font-style: italic;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 0;
    text-shadow:
        0 0 14px rgba(32, 231, 183, 0.52),
        0 4px 16px rgba(0, 0, 0, 0.42);
}

.loja-pacote-titulo,
.loja-pacote-subtitulo,
.loja-pacote-raridade {
    position: relative;
    z-index: 3;
    text-align: center;
    text-transform: uppercase;
}

.loja-pacote-titulo {
    margin-top: 0.65rem;
    color: rgba(241, 245, 249, 0.94);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    line-height: 1;
}

.loja-pacote-subtitulo {
    margin-top: 0.28rem;
    color: #20e7b7;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.loja-pacote-raridade {
    margin-top: auto;
    color: rgba(45, 212, 191, 0.9);
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.loja-pacote-prata .loja-pacote-pack {
    border-color: rgba(125, 211, 252, 0.58);
}

.loja-pacote-prata .loja-pacote-pack::before {
    background:
        linear-gradient(120deg, transparent 0 16%, rgba(125, 211, 252, 0.94) 17%, transparent 19% 100%),
        linear-gradient(240deg, transparent 0 16%, rgba(45, 212, 191, 0.72) 17%, transparent 19% 100%),
        linear-gradient(146deg, rgba(255, 255, 255, 0.16), transparent 30%),
        radial-gradient(circle at 50% 102%, rgba(125, 211, 252, 0.32), transparent 38%),
        linear-gradient(180deg, #0f172a 0%, #0a1422 52%, #030812 100%);
}

.loja-pacote-prata .loja-pacote-logo,
.loja-pacote-prata .loja-pacote-subtitulo,
.loja-pacote-prata .loja-pacote-raridade,
.loja-pacote-prata .loja-pacote-lacre {
    color: #7dd3fc;
}

.loja-pacote-ouro .loja-pacote-pack {
    border-color: rgba(250, 204, 21, 0.56);
}

.loja-pacote-ouro .loja-pacote-pack::before {
    background:
        linear-gradient(120deg, transparent 0 16%, rgba(250, 204, 21, 0.9) 17%, transparent 19% 100%),
        linear-gradient(240deg, transparent 0 16%, rgba(45, 212, 191, 0.84) 17%, transparent 19% 100%),
        linear-gradient(146deg, rgba(255, 255, 255, 0.16), transparent 30%),
        radial-gradient(circle at 50% 102%, rgba(250, 204, 21, 0.28), transparent 38%),
        linear-gradient(180deg, #111827 0%, #0b121d 52%, #030812 100%);
}

.loja-pacote-ouro .loja-pacote-logo,
.loja-pacote-ouro .loja-pacote-subtitulo,
.loja-pacote-ouro .loja-pacote-raridade,
.loja-pacote-ouro .loja-pacote-lacre {
    color: #facc15;
}

.loja-pacote-info {
    display: grid;
    grid-template-rows: minmax(92px, 1fr) auto;
    min-height: 138px;
    align-content: stretch;
    gap: 1rem;
}

.loja-pacote-info > div {
    display: grid;
    min-height: 92px;
    align-content: start;
    gap: 0.18rem;
}

.loja-pacote-info h2 {
    min-height: 2.15em;
    line-height: 1.08;
}

.loja-pacote-info small {
    display: block;
    color: var(--texto-suave);
    font-size: 0.78rem;
    line-height: 1.35;
}

.loja-pacote-info .loja-preco {
    width: 100%;
    min-height: 34px;
    align-self: end;
    justify-content: center;
}

.loja-pacote-card > .btn {
    min-height: 40px;
    margin-top: auto;
}

.loja-pacote-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 9700;
    display: none;
    place-items: center;
    padding: 1rem;
}

body.loja-pacote-confirm-open {
    overflow: hidden;
}

.loja-pacote-confirm-modal.is-open {
    display: grid;
}

.loja-pacote-confirm-modal[hidden] {
    display: none !important;
}

.loja-pacote-confirm-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 38%, rgba(45, 212, 191, 0.18), transparent 34%),
        rgba(2, 1, 8, 0.82);
    backdrop-filter: blur(10px);
}

.loja-pacote-confirm-panel {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(380px, calc(100vw - 28px));
    gap: 1rem;
    overflow: hidden;
    padding: 1.1rem;
    border: 1px solid rgba(45, 212, 191, 0.28);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(16, 24, 39, 0.98), rgba(7, 9, 19, 0.98)),
        radial-gradient(circle at 82% 18%, rgba(139, 92, 246, 0.22), transparent 32%);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.62),
        0 0 42px rgba(45, 212, 191, 0.16);
}

.loja-pacote-confirm-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--texto);
    cursor: pointer;
}

.loja-pacote-confirm-close svg {
    width: 16px;
    height: 16px;
}

.loja-pacote-confirm-pack {
    position: relative;
    display: grid;
    width: 92px;
    aspect-ratio: 0.72;
    place-items: center;
    justify-self: center;
    overflow: hidden;
    border: 1px solid rgba(45, 212, 191, 0.44);
    border-radius: 8px 8px 13px 13px;
    background:
        linear-gradient(120deg, transparent 0 16%, rgba(45, 212, 191, 0.9) 17%, transparent 19% 100%),
        linear-gradient(240deg, transparent 0 16%, rgba(34, 211, 238, 0.86) 17%, transparent 19% 100%),
        linear-gradient(180deg, #0c1627, #030812);
    box-shadow: 0 0 28px rgba(45, 212, 191, 0.24);
}

.loja-pacote-confirm-pack span {
    color: #20e7b7;
    font-family: var(--fonte-display);
    font-size: 1.8rem;
    font-style: italic;
    font-weight: 900;
    text-shadow: 0 0 14px rgba(32, 231, 183, 0.5);
}

.loja-pacote-confirm-copy {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    text-align: center;
}

.loja-pacote-confirm-copy > span {
    color: var(--verde);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.loja-pacote-confirm-copy h2 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: 1.65rem;
    line-height: 1;
}

.loja-pacote-confirm-copy p {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.9rem;
    line-height: 1.35;
}

.loja-pacote-confirm-copy strong {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    padding: 0.42rem 0.68rem;
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.1);
    color: var(--ouro);
}

.loja-pacote-confirm-copy strong svg {
    width: 16px;
    height: 16px;
}

.loja-pacote-confirm-probabilidades {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
}

.loja-pacote-confirm-probabilidades > span {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.loja-pacote-confirm-prob-list {
    display: grid;
    gap: 0.42rem;
}

.loja-pacote-confirm-prob {
    display: grid;
    gap: 0.22rem;
}

.loja-pacote-confirm-prob > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--texto);
    font-size: 0.8rem;
    font-weight: 800;
}

.loja-pacote-confirm-prob strong {
    color: var(--ouro);
    font-variant-numeric: tabular-nums;
}

.loja-pacote-confirm-prob i {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.loja-pacote-confirm-prob i::before {
    content: "";
    display: block;
    width: var(--probabilidade, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--verde), var(--roxo-suave));
}

.loja-pacote-confirm-prob-lendario i::before {
    background: linear-gradient(90deg, #facc15, #f97316);
}

.loja-pacote-confirm-prob-epico i::before {
    background: linear-gradient(90deg, #a855f7, #22d3ee);
}

.loja-pacote-confirm-prob-raro i::before {
    background: linear-gradient(90deg, #38bdf8, #2dd4bf);
}

.loja-pacote-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.loja-vinculo-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    max-width: 760px;
}

.loja-vinculo-card h2 {
    margin-bottom: 0.25rem;
}

.loja-vinculo-card p {
    margin-bottom: 0.9rem;
    color: var(--texto-suave);
}

.loja-vinculo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(139, 92, 246, 0.14);
    color: var(--roxo-suave);
}

.loja-vinculo-icon svg {
    width: 25px;
    height: 25px;
}

/* ===========================
   SELEÇÃO DE JOGADORES (LEGADO)
=========================== */
.jogadores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.jogador-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background: var(--fundo-input);
    border: 2px solid var(--borda);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}

.jogador-card:hover {
    border-color: var(--roxo);
    transform: translateY(-2px);
}

.jogador-card input {
    width: 18px;
    height: 18px;
    accent-color: var(--roxo);
}

.jogador-card:has(input:checked),
.jogador-card.checked {
    border-color: var(--roxo);
    background: rgba(139, 92, 246, 0.1);
}

.jogador-card .nome {
    font-size: 15px;
    font-weight: 600;
    color: var(--texto);
}

.jogador-card .overall {
    display: inline-block;
    width: max-content;
    padding: 4px 10px;
    background: var(--roxo-forte);
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
}

/* ===========================
   PREFERENCIAS
=========================== */
.preferencias-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    max-width: 1040px;
    margin-bottom: 1.1rem;
    padding: 0.2rem 0;
}

.preferencias-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(139, 92, 246, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--texto);
}

.preferencias-back-link:hover {
    border-color: rgba(139, 92, 246, 0.46);
    background: rgba(139, 92, 246, 0.12);
    color: #fff;
}

.preferencias-header h1 {
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.preferencias-header p {
    max-width: 48ch;
}

.preferencias-shell {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 1.1rem;
    max-width: 1040px;
    align-items: start;
}

.preferencias-tabs {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem;
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.preferencias-nav-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 34px;
    margin: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(139, 92, 246, 0.14);
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.075);
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.preferencias-nav-title::-webkit-details-marker {
    display: none;
}

.preferencias-nav-title svg {
    width: 14px;
    height: 14px;
    opacity: 0.68;
    transition: transform 0.16s ease;
}

.preferencias-nav-group {
    display: grid;
    gap: 0.35rem;
}

.preferencias-nav-group[open] .preferencias-nav-title {
    color: var(--roxo-suave);
    border-color: rgba(139, 92, 246, 0.28);
    background: rgba(139, 92, 246, 0.12);
}

.preferencias-nav-group[open] .preferencias-nav-title svg {
    transform: rotate(180deg);
}

.preferencias-tabs a {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.7rem 0.75rem;
    border-radius: 12px;
    color: var(--texto-suave);
    font-weight: 900;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

.preferencias-tabs a:hover {
    color: var(--texto);
    background: rgba(255, 255, 255, 0.05);
}

.preferencias-tabs a.ativo {
    color: #fff;
    background: rgba(139, 92, 246, 0.2);
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.34);
}

.preferencias-tabs svg {
    width: 18px;
    height: 18px;
}

.preferencias-tabs a svg:last-child {
    justify-self: end;
    opacity: 0.6;
}

.preferencias-card {
    min-width: 0;
    border-color: rgba(139, 92, 246, 0.18);
    border-radius: 18px;
    background: rgba(19, 16, 32, 0.78);
}

.preferencias-card .card-header p {
    color: var(--texto-suave);
    margin-top: 0.15rem;
}

.preferencias-form {
    display: grid;
    gap: 0.9rem;
}

.preferencias-form .btn {
    justify-self: start;
    margin-top: 0.15rem;
}

.notificacoes-preferencias-card {
    display: grid;
    gap: 1rem;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--roxo) 35%, var(--borda));
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.notificacoes-preferencias-card.is-highlighted {
    border-color: color-mix(in srgb, var(--verde) 70%, var(--borda));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 18%, transparent), var(--sombra-roxa);
    transform: translateY(-2px);
}

.notificacoes-preferencias-head {
    display: flex;
    align-items: center;
    gap: 0.95rem;
}

.notificacoes-preferencias-head h2 {
    margin: 0.15rem 0 0;
}

.notificacoes-preferencias-head p,
.notificacoes-status-box p {
    color: var(--texto-suave);
}

.notificacoes-preferencias-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--roxo) 26%, transparent);
    color: var(--roxo-suave);
    flex-shrink: 0;
}

.notificacoes-preferencias-icon svg {
    width: 24px;
    height: 24px;
}

.notificacoes-status-box {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
}

.notificacoes-status-box strong {
    color: var(--texto);
    font-size: 1.03rem;
}

.notificacoes-status-pill {
    width: max-content;
    max-width: 100%;
    padding: 0.38rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--roxo) 45%, var(--borda));
    border-radius: 999px;
    color: var(--texto);
    background: color-mix(in srgb, var(--roxo) 12%, transparent);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.notificacoes-preferencias-card[data-push-estado="ativo"] .notificacoes-status-pill {
    border-color: color-mix(in srgb, var(--verde) 55%, var(--borda));
    background: color-mix(in srgb, var(--verde) 14%, transparent);
}

.notificacoes-preferencias-card[data-push-estado="erro"] .notificacoes-status-pill,
.notificacoes-preferencias-card[data-push-estado="bloqueado"] .notificacoes-status-pill {
    border-color: color-mix(in srgb, var(--vermelho) 65%, var(--borda));
    background: color-mix(in srgb, var(--vermelho) 14%, transparent);
}

.notificacoes-preferencias-actions {
    flex-wrap: wrap;
}

/* ===========================
   GERENCIAR CLUBE
=========================== */
.clube-shell {
    display: grid;
    gap: 1rem;
    max-width: 1040px;
}

.clube-page-header {
    display: grid;
    gap: 0.35rem;
    align-items: start;
}

.clube-page-header .page-eyebrow,
.clube-page-header h1,
.clube-page-header p {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
}

.clube-char-counter {
    justify-self: end;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.clube-card .card-header p {
    color: var(--texto-suave);
    margin-top: 0.15rem;
}

.clube-accordion {
    padding: 0;
    overflow: hidden;
}

.clube-accordion-header {
    cursor: pointer;
    padding: 1.1rem 1.4rem;
    margin-bottom: 0;
    list-style: none;
    user-select: none;
}

.clube-accordion-header::-webkit-details-marker {
    display: none;
}

.clube-accordion-header > svg {
    color: var(--texto-suave);
    transition: transform 0.15s, color 0.15s;
}

.clube-accordion[open] .clube-accordion-header {
    border-bottom: 1px solid var(--borda);
    margin-bottom: 1rem;
}

.clube-accordion[open] .clube-accordion-header > svg {
    color: var(--roxo-suave);
    transform: rotate(180deg);
}

.clube-accordion > form,
.clube-accordion > .tabela-jogadores-wrap,
.clube-accordion > .clube-usuarios-lista {
    padding: 0 1.4rem 1.4rem;
}

.clube-accordion > form.preferencias-form {
    gap: 1rem;
}

.clube-logo-editor {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(260px, 0.8fr);
    gap: 1rem;
    align-items: start;
}

.clube-logo-editor img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border: 1px solid var(--borda);
    border-radius: 16px;
    padding: 0.45rem;
    background: rgba(255, 255, 255, 0.05);
}

.clube-logo-editor .form-group {
    margin-bottom: 0;
}

.clube-logo-actions {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
}

.overall-dinamico-config {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
}

.overall-dinamico-config strong {
    display: block;
    margin-bottom: 0.2rem;
}

.overall-dinamico-config p {
    margin: 0;
    line-height: 1.45;
}

.overall-dinamico-toggle {
    flex: 0 0 auto;
    cursor: pointer;
}

.overall-dinamico-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.overall-dinamico-toggle span {
    min-width: 112px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 0.48rem 0.8rem;
    color: var(--texto-suave);
    background: var(--fundo-input);
    font-weight: 800;
    font-size: 0.78rem;
}

.overall-dinamico-toggle span::before {
    content: attr(data-off);
}

.overall-dinamico-toggle input:checked + span {
    color: #04130d;
    border-color: var(--verde);
    background: var(--verde);
}

.overall-dinamico-toggle input:checked + span::before {
    content: attr(data-on);
}

@media (max-width: 640px) {
    .overall-dinamico-config {
        align-items: stretch;
        flex-direction: column;
    }

    .overall-dinamico-toggle,
    .overall-dinamico-toggle span {
        width: 100%;
    }
}

.clube-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

.clube-form-actions {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}

.clube-plano-status {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin-bottom: 0.9rem;
    padding: 0.75rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--fundo-input) 72%, transparent);
}

.clube-plano-status strong {
    color: var(--texto);
    font-size: 0.9rem;
    white-space: nowrap;
}

.clube-plano-status span:not(.badge-posicao),
.clube-plano-status small {
    color: var(--texto-suave);
    font-size: 0.82rem;
}

.clube-plano-status small {
    grid-column: 1 / -1;
}

.clube-accordion > form.clube-busca-usuarios {
    padding: 0.75rem 1.4rem;
    border-bottom: 1px solid var(--borda);
}

.clube-busca-usuarios.form-busca-jogadores-compacta .campo-busca-jogadores {
    width: min(100%, 320px);
}

.clube-usuarios-lista {
    display: grid;
    gap: 0.55rem;
}

.clube-usuario-linha {
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) minmax(88px, auto) minmax(140px, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.025);
}

.clube-usuario-identidade {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.clube-usuario-identidade strong,
.clube-usuario-identidade span,
.clube-usuario-jogador {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clube-usuario-identidade span,
.clube-usuario-jogador {
    color: var(--texto-suave);
    font-size: 0.85rem;
}

.clube-usuario-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.form-inline {
    display: inline-flex;
    margin: 0;
}

.perfil-jogador-card {
    width: 100%;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.9rem;
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.09), rgba(139, 92, 246, 0.055));
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.perfil-jogador-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(52, 211, 153, 0.12);
    color: var(--verde);
}

.perfil-jogador-icon svg {
    width: 22px;
    height: 22px;
}

.perfil-jogador-info {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.perfil-jogador-info > span {
    color: var(--verde);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.perfil-jogador-info strong {
    color: var(--texto);
    font-size: 1.05rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.perfil-jogador-badges {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.perfil-jogador-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--texto-suave);
}

.perfil-foto-section {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(139, 92, 246, 0.16);
}

.perfil-foto-accordion {
    padding: 0.85rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
}

.perfil-foto-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.perfil-foto-head::-webkit-details-marker {
    display: none;
}

.perfil-foto-head > span {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.perfil-foto-head > svg {
    flex-shrink: 0;
    color: var(--texto-suave);
    transition: transform 0.16s, color 0.16s;
}

.perfil-foto-accordion[open] .perfil-foto-head > svg {
    color: var(--roxo-suave);
    transform: rotate(180deg);
}

.perfil-foto-head h3 {
    color: var(--texto);
    font-size: 1rem;
}

.perfil-foto-head p {
    color: var(--texto-suave);
    font-size: 0.88rem;
}

.perfil-avatar-form {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.perfil-avatar-form.is-loading {
    pointer-events: none;
}

.perfil-avatar-form.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 20px;
    background: rgba(13, 9, 24, 0.68);
    backdrop-filter: blur(3px);
}

.perfil-avatar-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.32);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(255, 255, 255, 0.05));
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.65rem;
    font-weight: 900;
}

.perfil-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.perfil-avatar-body {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.perfil-avatar-body label {
    color: var(--texto);
    font-weight: 900;
}

.perfil-avatar-body input[type="file"] {
    width: 100%;
    color: var(--texto-suave);
    font: inherit;
    font-size: 0.85rem;
}

.perfil-avatar-opcao {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    color: var(--texto);
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.perfil-avatar-opcao input {
    width: 16px;
    height: 16px;
    accent-color: var(--verde);
}

.perfil-avatar-loading {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 1rem;
    color: var(--texto);
    font-size: 0.92rem;
    font-weight: 900;
    text-align: center;
}

.perfil-avatar-form.is-loading .perfil-avatar-loading {
    display: flex;
}

.perfil-avatar-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--verde);
    border-radius: 50%;
    animation: avatar-spin 0.8s linear infinite;
}

@keyframes avatar-spin {
    to { transform: rotate(360deg); }
}

.perfil-avatar-remover-form {
    margin-top: -0.2rem;
}

.perfil-avatar-remover-form .btn {
    color: var(--texto-suave);
    border-color: rgba(248, 113, 113, 0.18);
    background: transparent;
}

.perfil-avatar-remover-form .btn:hover {
    color: var(--vermelho);
    border-color: rgba(248, 113, 113, 0.38);
}

.perfil-avatar-crop-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.7rem;
}

.avatar-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.avatar-crop-modal.is-open {
    display: flex;
}

.avatar-crop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 2, 8, 0.74);
    backdrop-filter: blur(10px);
}

.avatar-crop-panel {
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(280px, 1fr) auto;
    gap: 0.85rem;
    width: min(760px, 96vw);
    max-height: min(92vh, 820px);
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: 18px;
    background: var(--fundo-card);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.avatar-crop-toolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 0.1rem;
}

.avatar-crop-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
}

.avatar-crop-tool.active {
    background: rgba(255, 255, 255, 0.09);
    color: var(--texto);
}

.avatar-crop-tool:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.avatar-crop-tool svg {
    width: 20px;
    height: 20px;
}

.avatar-crop-head {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
}

.avatar-crop-head h3 {
    margin: 0;
    color: var(--texto);
    font-size: 1rem;
}

.avatar-crop-head p {
    margin: 0.2rem 0 0;
    color: var(--texto-suave);
    font-size: 0.86rem;
}

.avatar-crop-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
        var(--fundo-inset);
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
    touch-action: none;
}

.avatar-crop-stage img {
    display: block;
    max-width: 100%;
    max-height: min(58vh, 520px);
    object-fit: contain;
    user-select: none;
    pointer-events: none;
}

.avatar-crop-box {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    cursor: move;
    touch-action: none;
}

.avatar-crop-box::before,
.avatar-crop-box::after {
    content: "";
    position: absolute;
    inset: 33.333% 0 auto;
    height: 1px;
    background: rgba(255, 255, 255, 0.38);
}

.avatar-crop-box::after {
    inset: 66.666% 0 auto;
}

.avatar-crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #111;
    border-radius: 50%;
    background: #fff;
}

.avatar-crop-handle.nw { top: -8px; left: -8px; cursor: nwse-resize; }
.avatar-crop-handle.n { top: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.avatar-crop-handle.ne { top: -8px; right: -8px; cursor: nesw-resize; }
.avatar-crop-handle.e { top: 50%; right: -8px; transform: translateY(-50%); cursor: ew-resize; }
.avatar-crop-handle.se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.avatar-crop-handle.s { bottom: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.avatar-crop-handle.sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
.avatar-crop-handle.w { top: 50%; left: -8px; transform: translateY(-50%); cursor: ew-resize; }

.avatar-crop-form {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.player-card-photo.player-card-photo-has-image {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    z-index: 2;
}

.player-mini-card-photo.player-mini-card-photo-has-image {
    background: transparent;
    border-radius: 0;
}

.player-card-photo.player-card-photo-has-image img {
    position: relative;
    z-index: 2;
    object-fit: contain;
}

.player-mini-card-photo.player-mini-card-photo-has-image img {
    object-fit: contain;
}

.player-card-photo.player-card-photo-has-image img {
    transform: translate(var(--avatar-x, 0), var(--avatar-y, 0)) rotate(var(--avatar-rotate, 0deg)) scaleX(var(--avatar-flip, 1)) scale(var(--avatar-zoom, 1));
    transform-origin: center;
}

.player-card:has(.player-card-photo-has-image) .player-card-name {
    z-index: 4;
}

.player-card:has(.player-card-photo-has-image) .player-card-overall,
.player-card:has(.player-card-photo-has-image) .player-card-position,
.player-card:has(.player-card-photo-has-image) .player-card-stats,
.player-card:has(.player-card-photo-has-image) .player-card-traits {
    z-index: 4;
}

.perfil-avatar-ajuste {
    margin-top: 0;
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 16px;
    background: rgba(139, 92, 246, 0.045);
    overflow: hidden;
}

.perfil-avatar-ajuste-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    min-height: 54px;
    padding: 0.9rem;
    color: var(--texto);
    cursor: pointer;
    font-weight: 900;
    list-style: none;
}

.perfil-avatar-ajuste-toggle::-webkit-details-marker {
    display: none;
}

.perfil-avatar-ajuste-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.perfil-avatar-ajuste-toggle svg {
    width: 17px;
    height: 17px;
    color: var(--roxo-suave);
}

.perfil-avatar-ajuste-toggle > svg:last-child {
    transition: transform 0.16s ease;
}

.perfil-avatar-ajuste[open] .perfil-avatar-ajuste-toggle > svg:last-child {
    transform: rotate(180deg);
}

.perfil-avatar-ajuste-form {
    display: grid;
    gap: 0.9rem;
    padding: 0.9rem;
    border-top: 1px solid var(--borda);
}

.perfil-avatar-ajuste-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.perfil-avatar-ajuste-head div {
    display: grid;
    gap: 0.15rem;
}

.perfil-avatar-ajuste-head strong {
    color: var(--texto);
}

.perfil-avatar-ajuste-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.perfil-avatar-ajuste-workspace {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.9rem;
}

.perfil-avatar-card-preview {
    display: grid;
    justify-items: center;
    min-width: 0;
    width: 100%;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(5, 3, 12, 0.28);
}

.perfil-avatar-card-preview .player-card {
    width: min(100%, 230px);
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.38));
}

.perfil-avatar-card-preview .player-card-stats span {
    font-size: clamp(0.37rem, 1.15vw, 0.46rem);
}

.perfil-avatar-controles {
    display: grid;
    gap: 0.75rem;
    align-content: center;
    min-width: 0;
    width: 100%;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.perfil-avatar-controles label {
    display: grid;
    gap: 0.35rem;
    color: var(--texto-suave);
    font-size: 0.84rem;
    font-weight: 800;
}

.perfil-avatar-controles input[type="range"] {
    width: 100%;
    accent-color: var(--roxo);
}

.perfil-avatar-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-height: 42px;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.perfil-avatar-controles .perfil-avatar-toggle {
    display: flex;
}

.perfil-avatar-toggle input {
    order: 2;
    width: 18px;
    height: 18px;
    accent-color: var(--roxo);
}

.perfil-avatar-crop-inline {
    width: 100%;
    justify-content: center;
}

.tema-opcoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.tema-opcao {
    position: relative;
    display: grid;
    gap: 0.45rem;
    min-height: 178px;
    padding: 0.8rem;
    border: 1px solid var(--borda);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}

.tema-opcao:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 85, 247, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

.tema-opcao input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tema-opcao:has(input:checked) {
    border-color: var(--verde);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.22);
}

.tema-preview {
    display: grid;
    gap: 0.45rem;
    min-height: 80px;
    padding: 0.6rem;
    border-radius: 15px;
    background: #0a0812;
}

.tema-preview span {
    display: block;
    border-radius: 999px;
}

.tema-preview span:nth-child(1) {
    width: 52%;
    height: 12px;
    background: #8b5cf6;
}

.tema-preview span:nth-child(2) {
    width: 78%;
    height: 22px;
    background: #1c1730;
}

.tema-preview span:nth-child(3) {
    width: 42%;
    height: 12px;
    background: #34d399;
}

.tema-opcao-verde .tema-preview {
    background: #06110d;
}

.tema-opcao-verde .tema-preview span:nth-child(1) {
    background: #22c55e;
}

.tema-opcao-verde .tema-preview span:nth-child(2) {
    background: #172b22;
}

.tema-opcao-claro .tema-preview {
    background: #f4f1fb;
}

.tema-opcao-claro .tema-preview span:nth-child(1) {
    background: #7c3aed;
}

.tema-opcao-claro .tema-preview span:nth-child(2) {
    background: #ffffff;
}

.tema-opcao-custom .tema-preview {
    background: linear-gradient(135deg, #0a0812, #172b22);
}

.tema-opcao-custom .tema-preview span:nth-child(1) {
    background: linear-gradient(90deg, #8b5cf6, #34d399);
}

.tema-opcao-custom .tema-preview span:nth-child(2) {
    background: #1c1730;
}

.tema-opcao-custom .tema-preview span:nth-child(3) {
    background: #f87171;
}

.tema-opcao strong {
    color: var(--texto);
}

.tema-opcao small {
    color: var(--texto-suave);
    line-height: 1.4;
}

.tema-opcoes-colapsaveis[data-theme-collapsed="1"] .tema-opcao:nth-of-type(n + 3):not(.tema-opcao-ativa-forcada) {
    display: none;
}

.tema-ativo-label {
    justify-self: start;
    padding: 0.22rem 0.48rem;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.14);
    color: var(--verde);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tema-ver-mais {
    justify-self: start;
    margin: 0 0 0.8rem;
}

.custom-theme-editor {
    display: none;
    gap: 1.05rem;
    margin: 0.7rem 0 1rem;
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--fundo-card) 88%, transparent), var(--fundo-inset));
}

.preferencias-form:has(input[name="tema"][value="custom"]:checked) .custom-theme-editor {
    display: grid;
}

.custom-theme-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

.custom-theme-head h3 {
    margin: 0;
    font-size: 1rem;
}

.custom-theme-head p {
    color: var(--texto-suave);
    font-size: 0.88rem;
    max-width: 56ch;
}

.custom-theme-live {
    display: grid;
    grid-template-rows: 12px 1fr 16px;
    gap: 0.42rem;
    min-width: 150px;
    width: 150px;
    height: 92px;
    padding: 0.55rem;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo);
}

.custom-theme-live span {
    display: block;
}

.custom-live-nav {
    border-radius: 999px;
    background: var(--custom-nav-bg, var(--fundo-card));
}

.custom-live-card {
    display: grid;
    align-content: center;
    gap: 0.3rem;
    padding: 0.42rem;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-card);
}

.custom-live-card span {
    height: 6px;
    border-radius: 999px;
}

.custom-live-card span:nth-child(1) {
    width: 70%;
    background: var(--custom-header-color, var(--texto));
}

.custom-live-card span:nth-child(2) {
    width: 92%;
    background: var(--texto-suave);
}

.custom-live-card span:nth-child(3) {
    width: 46%;
    background: var(--roxo);
}

.custom-live-button {
    border-radius: 999px;
    background: var(--custom-button-bg, var(--roxo));
}

.custom-theme-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--borda) 82%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--fundo-card) 72%, transparent);
}

.custom-theme-presets > span {
    color: var(--texto-suave);
    font-size: 0.86rem;
    font-weight: 700;
}

.custom-theme-preset {
    display: inline-flex;
    align-items: center;
    gap: 0.46rem;
    min-height: 36px;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--fundo-input);
    color: var(--texto);
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}

.custom-theme-preset:hover {
    transform: translateY(-1px);
    border-color: var(--roxo);
}

.custom-theme-preset span {
    display: inline-flex;
    overflow: hidden;
    width: 36px;
    height: 18px;
    border: 1px solid var(--borda-forte);
    border-radius: 999px;
}

.custom-theme-preset i {
    display: block;
    flex: 1;
}

.custom-theme-groups {
    display: grid;
    gap: 0.75rem;
}

.custom-theme-group {
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: color-mix(in srgb, var(--fundo-card) 72%, transparent);
}

.custom-theme-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    cursor: pointer;
    list-style: none;
}

.custom-theme-group summary::-webkit-details-marker {
    display: none;
}

.custom-theme-group summary span {
    display: grid;
    gap: 0.2rem;
}

.custom-theme-group summary strong {
    color: var(--texto);
}

.custom-theme-group summary small {
    color: var(--texto-suave);
}

.custom-theme-group summary svg {
    width: 18px;
    height: 18px;
    color: var(--texto-suave);
    transition: transform 0.15s ease;
}

.custom-theme-group[open] summary svg {
    transform: rotate(180deg);
}

.custom-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    padding: 0 0.9rem 0.9rem;
}

.custom-color-control {
    display: grid;
    grid-template-columns: 42px 26px minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-height: 84px;
    padding: 0.75rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo-card);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.custom-color-control:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--roxo) 55%, var(--borda));
}

.custom-color-swatch {
    width: 26px;
    height: 26px;
    border: 1px solid var(--borda-forte);
    border-radius: 50%;
    flex-shrink: 0;
}

.custom-color-control input[type="color"] {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.custom-color-text {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.custom-color-text strong {
    color: var(--texto);
    font-size: 0.88rem;
    line-height: 1.2;
}

.custom-color-text small {
    color: var(--texto-suave);
    font-size: 0.76rem;
    line-height: 1.25;
}

.custom-color-text em {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

/* ===========================
   MODAL
=========================== */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(5, 3, 10, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.modal.show { display: flex; }

.modal-box {
    background: var(--fundo-card);
    border: 1px solid var(--borda-forte);
    padding: 1.5rem;
    border-radius: var(--radius);
    width: 340px;
    max-width: 92vw;
    text-align: center;
    box-shadow: var(--sombra);
}

.modal-box h3 {
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
}

.modal-box p { color: var(--texto-suave); }

.modal-acoes {
    display: flex;
    justify-content: space-between;
    margin-top: 1.15rem;
    gap: 10px;
}

.modal-acoes .btn { flex: 1; }

/* ===========================
   LOGIN / REGISTRO
=========================== */
body.page-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    --sombra-roxa: 0 4px 20px rgba(34, 197, 94, 0.35);
    background-image:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(34, 197, 94, 0.22), transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 100%, rgba(20, 83, 45, 0.18), transparent 70%);
}

body.page-login-intro {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}

body.page-login-auth-bg {
    background:
        radial-gradient(ellipse 44% 38% at 95% 8%, rgba(34, 197, 94, 0.9), transparent 62%),
        radial-gradient(ellipse 36% 30% at 8% 62%, rgba(34, 197, 94, 0.68), transparent 62%),
        radial-gradient(ellipse 34% 28% at 90% 80%, rgba(20, 184, 166, 0.46), transparent 66%),
        radial-gradient(ellipse 80% 58% at 50% 54%, rgba(15, 23, 42, 0.82), transparent 72%),
        #080812;
}

body.page-login-auth-bg.page-login-intro {
    background:
        linear-gradient(180deg, rgba(19, 19, 28, 0.98) 0 56px, transparent 56px),
        radial-gradient(ellipse 44% 38% at 95% 8%, rgba(34, 197, 94, 0.9), transparent 62%),
        radial-gradient(ellipse 36% 30% at 8% 62%, rgba(34, 197, 94, 0.68), transparent 62%),
        radial-gradient(ellipse 34% 28% at 90% 80%, rgba(20, 184, 166, 0.46), transparent 66%),
        radial-gradient(ellipse 80% 58% at 50% 54%, rgba(15, 23, 42, 0.82), transparent 72%),
        #080812;
}

.page-login-auth-bg .login-box {
    z-index: 1;
}

.page-login-auth-bg:not(.page-login-intro)::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        repeating-radial-gradient(ellipse at 10% 62%, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 5px),
        repeating-radial-gradient(ellipse at 92% 12%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 5px);
    opacity: 0.5;
    mix-blend-mode: screen;
}

.login-intro {
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: 56px 1fr;
}

.login-intro::before {
    content: "";
    position: absolute;
    inset: 56px 0 0;
    pointer-events: none;
    background:
        repeating-radial-gradient(ellipse at 10% 62%, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 5px),
        repeating-radial-gradient(ellipse at 92% 12%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 5px);
    opacity: 0.5;
    mix-blend-mode: screen;
}

.login-intro[hidden],
.login-box[hidden] {
    display: none !important;
}

.login-intro-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 74px;
    padding: 1rem 1.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.82);
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--fonte-display);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.login-intro-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    color: #fff;
    font-size: 1.18rem;
}

.login-intro-brand .auth-logo-icone {
    width: 36px;
    height: 36px;
}

.login-intro-top > span {
    flex-shrink: 0;
    text-align: right;
}

.login-intro-copy {
    position: relative;
    z-index: 1;
    width: min(780px, calc(100vw - 32px));
    margin: auto;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.login-intro-copy h1 {
    font-family: var(--fonte-display);
    font-size: clamp(2rem, 5vw, 4.3rem);
    line-height: 1.02;
    color: #fff;
}

.login-intro-copy p {
    max-width: 680px;
    color: rgba(229, 231, 235, 0.82);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.55;
}

.login-intro-copy .btn {
    margin-top: 0.4rem;
    min-width: 190px;
}

.login-box {
    width: 100%;
    max-width: 400px;
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: var(--sombra), 0 0 60px rgba(34, 197, 94, 0.12);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.login-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--roxo), transparent);
}

.login-logo {
    width: 110px;
    height: 110px;
    margin: 0 auto 1rem;
}

.login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 16px rgba(34, 197, 94, 0.35));
}

.app-loader-mark-auth {
    width: 84px;
    height: 84px;
}

.app-loader-mark-auth .auth-logo-icone {
    width: 100%;
    height: 100%;
}

.login-box h1 {
    font-size: 1.45rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.login-eyebrow {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--roxo);
}

.login-sub {
    color: var(--texto-suave);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.login-box .form-group { text-align: left; }

.registro-step label:not(:first-child) {
    margin-top: 0.75rem;
}

.registro-step input + label,
.registro-step select + label,
.registro-clube-preview + label,
.texto-suave + label {
    display: block;
}

.registro-progressivo {
    display: grid;
    gap: 0.95rem;
}

.registro-progressivo .form-group {
    margin-bottom: 0;
}

.registro-step {
    animation: registroStepIn 0.22s ease both;
}

.registro-step[hidden],
.registro-clube-preview[hidden] {
    display: none !important;
}

.registro-clube-preview {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.78rem;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 14px;
    background: rgba(139, 92, 246, 0.09);
    text-align: left;
    animation: registroStepIn 0.22s ease both;
}

.registro-clube-preview img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(124, 58, 237, 0.28));
}

.registro-clube-preview div {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.registro-clube-preview span {
    color: var(--roxo-suave);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.registro-clube-preview strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1rem;
}

.registro-clube-preview small {
    color: var(--texto-suave);
    line-height: 1.35;
}

.registro-erro-campo {
    display: block;
    margin-top: 0.45rem;
    color: var(--vermelho);
    font-size: 0.82rem;
    font-weight: 600;
}

.registro-clube-preview svg.lucide {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--roxo-suave);
}

.registro-progresso {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.registro-progresso-barra {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--roxo), var(--roxo-suave));
    transition: width 0.25s ease;
}

.registro-progresso-texto {
    margin: 0 0 0.9rem;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.registro-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.registro-step-nav .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.registro-step-nav .btn svg.lucide {
    width: 16px;
    height: 16px;
}

@keyframes registroStepIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-register {
    margin-top: 1.25rem;
    font-size: 0.88rem;
    color: var(--texto-suave);
}

.recuperacao-ajuda {
    color: var(--texto-suave);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

.recuperacao-entrega-card,
.recuperacao-entrega-dica {
    margin: 0 0 1rem;
    text-align: left;
    border: 1px solid rgba(34, 197, 94, 0.28);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(34, 197, 94, 0.13), rgba(139, 92, 246, 0.08)),
        rgba(8, 13, 20, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.recuperacao-entrega-card {
    padding: 1rem;
}

.recuperacao-entrega-head {
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.8rem;
}

.recuperacao-entrega-head span {
    color: var(--roxo-suave);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.recuperacao-entrega-head strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1rem;
    line-height: 1.25;
}

.recuperacao-entrega-passos {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: entrega;
}

.recuperacao-entrega-passos li {
    position: relative;
    min-height: 1.7rem;
    padding-left: 2.1rem;
    color: var(--texto-suave);
    font-size: 0.84rem;
    line-height: 1.45;
}

.recuperacao-entrega-passos li::before {
    counter-increment: entrega;
    content: counter(entrega);
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.16);
    color: #86efac;
    font-size: 0.72rem;
    font-weight: 900;
}

.recuperacao-entrega-passos b {
    color: var(--texto);
    font-weight: 800;
}

.recuperacao-remetente {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.9rem;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
}

.recuperacao-remetente span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #d7fbe2;
    font-size: 0.78rem;
    font-weight: 700;
}

.recuperacao-remetente button {
    border: 0;
    border-radius: 8px;
    padding: 0.48rem 0.68rem;
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    font-size: 0.74rem;
    font-weight: 900;
    cursor: pointer;
}

.recuperacao-remetente button:hover,
.recuperacao-remetente button:focus-visible {
    background: rgba(34, 197, 94, 0.28);
    outline: none;
}

.recuperacao-entrega-dica {
    padding: 0.75rem 0.85rem;
}

.recuperacao-entrega-dica summary {
    color: var(--texto);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 800;
}

.recuperacao-entrega-dica p {
    margin: 0.65rem 0 0;
    color: var(--texto-suave);
    font-size: 0.82rem;
    line-height: 1.5;
}

.recuperacao-entrega-dica b {
    color: var(--texto);
}

.senha-visivel-campo {
    position: relative;
}

.senha-visivel-campo input {
    padding-right: 3rem;
}

.senha-visivel-campo button {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
}

.senha-visivel-campo button:hover,
.senha-visivel-campo button:focus-visible {
    color: var(--roxo-suave);
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.senha-visivel-campo svg.lucide {
    width: 18px;
    height: 18px;
}

/* ===========================
   FOOTER
=========================== */
.footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--texto-suave);
    font-size: 0.8rem;
    border-top: 1px solid var(--borda);
    margin-top: 3rem;
}

.footer strong {
    color: var(--roxo-suave);
    font-family: var(--fonte-display);
    font-weight: 700;
}

/* ===========================
   RESPONSIVO
=========================== */
@media (max-width: 768px) {
    .layout-dois-col { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; gap: 1rem; }
    .home-feature-grid { grid-template-columns: 1fr; }
    .home-highlights-grid { grid-template-columns: 1fr; }
    .home-match-card,
    .home-match-content { min-height: 290px; }

    .navbar {
        padding: 0.7rem 0.85rem;
        gap: 0.45rem;
    }

    .navbar-menu {
        width: 100%;
        justify-content: space-between;
        order: 3;
        gap: 0.2rem;
    }

    .navbar-menu a {
        padding: 0.3rem 0.55rem;
        font-size: 0.78rem;
    }

    .navbar-user {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
        padding-top: 0.2rem;
        font-size: 0.78rem;
        gap: 0.45rem;
        flex-wrap: wrap;
    }

    .navbar-user .btn {
        width: auto;
        padding: 0.35rem 0.65rem;
        font-size: 0.78rem;
    }

    .app-topbar {
        padding: 0.75rem 0.9rem;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .app-topbar .navbar-user {
        width: auto;
        margin-left: auto;
        padding-top: 0;
    }

    .bottom-nav {
        width: min(640px, calc(100vw - 16px));
        bottom: max(8px, env(safe-area-inset-bottom));
        border-radius: 16px;
    }

    .loja-card-preview {
        min-height: 222px;
    }

    .preferencias-shell {
        grid-template-columns: 1fr;
        max-width: 720px;
    }

    .preferencias-tabs {
        position: static;
        grid-template-columns: 1fr;
    }

    .preferencias-tabs a {
        min-height: 48px;
        padding: 0.72rem 0.75rem;
        font-size: 0.86rem;
    }

    .tema-opcoes {
        grid-template-columns: 1fr;
    }

    .login-intro-top {
        width: 100%;
        margin-inline: 0;
        padding: 0.85rem 0.95rem;
        border-radius: 0;
        gap: 0.65rem;
    }

    .login-intro-brand {
        gap: 0.55rem;
        font-size: 0.98rem;
    }

    .login-intro-brand .auth-logo-icone {
        width: 32px;
        height: 32px;
    }

    .login-intro-top > span {
        max-width: 42%;
        font-size: 0.76rem;
        line-height: 1.2;
        white-space: normal;
    }

    .custom-theme-head {
        align-items: stretch;
    }

    .custom-theme-head {
        flex-direction: column;
    }

    .custom-theme-live {
        width: 100%;
    }

    .custom-theme-grid {
        grid-template-columns: 1fr;
    }

    .custom-color-control {
        grid-template-columns: 40px 24px minmax(0, 1fr);
        min-height: 78px;
    }

    .preferencias-form .btn {
        justify-self: stretch;
    }

    .clube-logo-editor,
    .clube-form-grid {
        grid-template-columns: 1fr;
    }

    .clube-plano-status {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .clube-plano-status strong {
        white-space: normal;
    }

    .clube-page-header {
        gap: 0.42rem;
    }

    .clube-usuario-linha {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem 0.65rem;
    }

    .clube-usuario-linha .badge-posicao,
    .clube-usuario-jogador {
        grid-column: 1;
    }

    .clube-usuario-acoes {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        flex-direction: column;
    }

    .clube-logo-editor img {
        width: 64px;
        height: 64px;
    }

    .clube-logo-actions {
        grid-column: auto;
    }

    .clube-form-actions .btn,
    .form-inline,
    .form-inline .btn {
        width: 100%;
    }

    .container { padding: 0.9rem 0.9rem 7rem; }

    .page-header { margin-bottom: 1rem; }
    .page-header h1 { font-size: 1.3rem; }
    .page-header p { font-size: 0.9rem; }

    .card { padding: 0.95rem; }

    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .stat-card { padding: 0.85rem 0.5rem; }
    .stat-icon { width: 34px; height: 34px; font-size: 1rem; }
    .stat-valor { font-size: 1.4rem; }
    .stat-label { font-size: 0.66rem; }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 0.95rem;
        padding: 0.5rem 0.7rem;
    }

    .form-busca { flex-direction: column; }
    .form-busca input { width: 100%; }

    .btn {
        width: 100%;
        padding: 0.55rem 0.8rem;
        font-size: 0.85rem;
    }

    .btn-sm { width: auto; }

    .tabela {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 0.82rem;
    }

    .time-card .time-header,
    .time-lista li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .login-box { padding: 1.6rem 1.2rem; }

    .modal-box {
        width: min(92vw, 340px);
        padding: 1.15rem;
    }
}

@media (max-width: 700px) {
    .times-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .time-card .time-header {
        padding: 9px 10px;
    }

    .time-card .time-header strong {
        font-size: 0.95rem;
        line-height: 1.15;
    }

    .time-card .time-header .badge-ovr {
        font-size: 0.72rem;
        padding: 0.25rem 0.45rem;
    }

    .time-card .time-lista {
        padding: 8px 10px;
    }

    .time-card .time-lista li {
        font-size: 0.78rem;
    }

    .time-card .time-lista .badge-posicao {
        font-size: 0.68rem;
        padding: 0.2rem 0.35rem;
    }

    .time-card .time-lista .badge-ovr {
        font-size: 0.72rem;
        min-width: 34px;
        padding: 0.24rem 0.38rem;
    }

    .estatisticas-header,
    .form-busca-estatisticas,
    .form-busca-estatisticas input,
    .form-busca-estatisticas .btn {
        width: 100%;
    }

    .estatisticas-header { flex-direction: column; }

    .historico-tabs {
        display: flex;
        width: 100%;
    }

    .historico-tabs a,
    .sorteio-tabs button { flex: 1; }

    .jogo-detalhe-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.02rem;
        padding: 0.08rem;
    }

    .jogo-detalhe-tabs a {
        flex: none;
        min-height: 30px;
        padding: 0.25rem 0.04rem;
        font-size: 0.82rem;
        line-height: 1;
    }

    .resultado-grid { grid-template-columns: 1fr; }

    .resultado-resumo {
        flex-direction: column;
        align-items: stretch;
    }

    .avaliacao-status-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .avaliacao-status-bar form,
    .avaliacao-status-bar .btn { width: 100%; }
}

@media (max-width: 640px) {
    .jogadores-lista-header,
    .overall-card .card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-busca-jogadores {
        flex-direction: column;
        align-items: stretch;
        padding: 0.6rem;
        gap: 0.5rem;
    }

    .form-busca-jogadores .btn,
    .por-pagina-control { width: 100%; }

    .jogadores-lista-topo-acoes {
        width: 100%;
        justify-content: space-between;
        gap: 0.45rem;
    }

    .form-busca-jogadores-compacta {
        flex: 1;
        flex-direction: row;
        align-items: center;
        padding: 0;
        gap: 0.3rem;
    }

    .form-busca-jogadores-compacta .campo-busca-jogadores {
        width: 100%;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
    }

    .form-busca-jogadores-compacta .campo-busca-jogadores input {
        font-size: 0.74rem;
    }

    .jogadores-lista-rodape {
        align-items: center;
        flex-direction: row;
    }

    .jogadores-lista-rodape .btn-danger {
        width: auto;
        flex: 0 1 auto;
        padding-inline: 0.55rem;
        white-space: nowrap;
    }

    .form-por-pagina-rodape {
        flex: 0 0 auto;
    }

    .por-pagina-control-compacto {
        width: auto;
    }

    .por-pagina-control {
        justify-content: space-between;
        min-height: 38px;
    }

    .por-pagina-control-compacto {
        width: auto;
        min-height: 32px;
    }

    .campo-busca-jogadores {
        flex: 0 0 auto;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
    }

    .campo-busca-jogadores input {
        height: 100%;
        min-height: 0;
    }

    .lote-row { grid-template-columns: 1fr; }
    .lote-remover { width: 100%; }

    .jogadores-form-card,
    .jogadores-lista-card { padding: 0.85rem; }

    .tabela-jogadores-wrap {
        overflow: visible;
    }

    .tabela-jogadores {
        display: block;
        overflow: visible;
        white-space: normal;
        width: 100%;
    }

    .tabela-jogadores thead {
        display: none;
    }

    .tabela-jogadores tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(104px, 1fr));
        gap: 1rem 0.5rem;
        padding: 0.75rem 0.35rem 1rem;
    }

    .tabela-jogadores tr,
    .tabela-jogadores td {
        display: block;
    }

    .tabela-jogadores tr {
        min-width: 0;
        justify-self: center;
        width: 100%;
    }

    .tabela-jogadores td {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .tabela-jogadores tbody tr:hover td {
        background: transparent;
    }

    .jogador-card-lista {
        width: 100%;
        min-width: 0;
    }

    .jogador-card-selecao-wrap {
        width: clamp(104px, 38vw, 128px);
    }

    .jogador-card-lista .player-card-medium {
        width: 100%;
    }

    .jogador-card-posicao {
        margin-top: 0.28rem;
        font-size: 0.66rem;
    }

    .jogador-card-caracteristica {
        font-size: 0.61rem;
    }

    .jogador-nome { max-width: 140px; }

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

    .estatisticas-cards-list {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .estatisticas-player-card {
        padding: 0.75rem;
    }

    .estatisticas-player-head {
        align-items: flex-start;
    }

    .estatisticas-aproveitamento {
        min-width: 58px;
    }

    .overall-acoes,
    .overall-voto-form {
        flex-direction: column;
        align-items: stretch;
    }

    .overall-input,
    .overall-btn { width: 100%; }

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

    .jogadores-tabs {
        width: 100%;
    }

    .jogadores-tabs a {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }

    .jogadores-evolucao-card {
        justify-items: center;
        text-align: center;
    }

    .jogadores-evolucao-card-info {
        width: 100%;
    }

    .jogadores-evolucao-card-info strong,
    .jogadores-evolucao-overalls,
    .jogadores-evolucao-voto {
        justify-content: center;
    }

    .jogadores-evolucao-voto {
        width: 100%;
    }

    .overall-alcancado-panel {
        align-items: stretch;
        flex-direction: column;
        text-align: left;
    }

    .overall-alcancado-actions {
        width: 100%;
    }

    .overall-alcancado-actions form,
    .overall-alcancado-actions .btn {
        flex: 1;
        width: 100%;
    }

    .overall-batch-action {
        position: sticky;
        top: 0.5rem;
        z-index: 6;
        justify-content: stretch;
        flex-wrap: wrap;
        gap: 0.45rem;
        width: 100%;
        margin-bottom: 0.85rem;
    }

    .overall-batch-action .btn {
        flex: 1 1 calc(50% - 0.45rem);
        min-width: 0;
        white-space: normal;
        line-height: 1.15;
    }

    .overall-batch-action [data-overall-select-page] {
        flex: 0 0 100%;
    }

    .overall-batch-action [data-overall-batch-submit] {
        flex: 1 1 0;
        width: 0;
    }

    .overall-voto-form-compacto {
        flex-direction: row;
        align-items: center;
    }

    .overall-voto-form-compacto .overall-input {
        width: 72px;
        min-width: 72px;
    }

    .overall-voto-form-compacto .overall-btn {
        flex: 1;
        width: auto;
    }

    .loja-resumo {
        grid-template-columns: 1fr;
    }

    .loja-card-info {
        flex-direction: column;
    }

    .loja-vinculo-card {
        grid-template-columns: 1fr;
    }

    .perfil-avatar-form {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 0.75rem;
    }

    .perfil-avatar-preview {
        justify-self: start;
    }

    .perfil-jogador-card {
        grid-template-columns: 46px minmax(0, 1fr) 30px;
        padding: 0.8rem;
        border-radius: 14px;
    }

    .perfil-jogador-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .perfil-avatar-body input[type="file"] {
        min-height: 44px;
    }

    .perfil-avatar-form .btn,
    .perfil-dados-jogador-form .btn,
    .perfil-avatar-remover-form .btn {
        width: 100%;
        justify-content: center;
    }

    .avatar-crop-panel {
        width: 96vw;
        padding: 0.75rem;
        border-radius: 14px;
    }

    .avatar-crop-stage {
        min-height: 280px;
    }

    .avatar-crop-form {
        flex-direction: column;
    }

    .avatar-crop-form .btn {
        width: 100%;
    }

    .perfil-avatar-ajuste-head {
        align-items: stretch;
        flex-direction: column;
    }

    .perfil-avatar-ajuste-head .btn {
        width: 100%;
    }

    .perfil-avatar-ajuste-actions {
        width: 100%;
    }

    .perfil-avatar-card-preview .player-card {
        width: min(74vw, 230px);
    }
}

@media (max-width: 600px) {
    body:has(.preferencias-shell) .app-topbar {
        align-items: center;
        flex-wrap: nowrap;
        padding: 0.65rem 0.8rem;
    }

    body:has(.preferencias-shell) .app-topbar .navbar-brand span,
    body:has(.preferencias-shell) .moedas-chip,
    body:has(.preferencias-shell) .usuario-chip {
        display: none;
    }

    body:has(.preferencias-shell) .navbar-brand img {
        width: 28px;
        height: 28px;
    }

    body:has(.preferencias-shell) .container {
        padding-bottom: calc(132px + env(safe-area-inset-bottom));
    }

    .preferencias-header {
        align-items: flex-start;
        margin-bottom: 0.9rem;
    }

    .preferencias-header h1 {
        font-size: 1.45rem;
    }

    .preferencias-header p {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .preferencias-back-link {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .preferencias-card {
        border-radius: 16px;
    }

    .preferencias-card .card-header {
        margin-bottom: 0.85rem;
    }

    .preferencias-card .card-header h2 {
        font-size: 1.08rem;
    }

    .preferencias-form {
        gap: 0.85rem;
    }

    .preferencias-form .form-group {
        gap: 0.4rem;
    }

    .preferencias-form input,
    .preferencias-form select,
    .preferencias-form textarea {
        min-height: 46px;
        width: 100%;
    }

    .preferencias-form .btn {
        width: 100%;
        justify-content: center;
    }

    .jogadores-grid-novo {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
    }

    .config-fields-row { flex-direction: column; gap: 10px; }

    .config-fields-row .form-group,
    .config-fields-row .form-group-full {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .config-fields-row .form-group label {
        white-space: normal;
    }

    .config-fields-row .form-group input,
    .config-fields-row .form-group select,
    .config-fields-row .form-group textarea {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .config-fields-row .form-group textarea {
        display: block;
        min-height: 92px;
    }

    .selection-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .selection-bar > div:last-child {
        width: 100%;
        flex-wrap: wrap;
    }
    .selection-bar .btn-selecao,
    .selection-bar .btn-confirmar-topo {
        flex: 1 1 140px;
        width: auto;
        justify-content: center;
        padding: 0.45rem 0.7rem;
    }

    .convidado-form {
        grid-template-columns: 1fr 88px;
    }

    .convidado-form .btn {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }

    .sort-bar { gap: 6px; }

    .sort-bar .btn-sort {
        flex: 1 1 calc(50% - 6px);
        padding: 0.35rem 0.6rem;
        font-size: 0.78rem;
    }

    .travas-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .trava-row { grid-template-columns: 1fr; }
    .trava-remover { width: 100%; }

    .config-botoes {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }

    .config-botoes button,
    .config-botoes .btn-sortear,
    .config-botoes .btn-embaralhar,
    .config-botoes .btn-limpar,
    .config-botoes .btn-contra-clube {
        width: 100%;
        justify-content: center;
        padding: 0.6rem 0.7rem;
    }

    .sorteio-resultado-header {
        align-items: stretch;
        flex-direction: column;
    }

    .sorteio-resultado-acoes {
        width: 100%;
    }

    .sorteio-resultado-acoes .btn,
    .sorteio-resultado-acoes .btn-embaralhar {
        flex: 1 1 140px;
        justify-content: center;
    }

    .clube-adversario-inline {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .jogo-card-header {
        align-items: stretch;
        flex-direction: row;
        gap: 0.65rem;
    }

    .campeonato-config-head,
    .campeonato-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .partida-row {
        grid-template-columns: 1fr 48px 18px 48px 1fr;
    }

    .partida-row span {
        grid-column: 1 / -1;
    }

    .partida-jogo-label {
        grid-column: 1 / -1;
        justify-content: start;
    }

    .partida-jogo-label > span {
        grid-column: auto;
    }

    .partida-row-historico {
        grid-template-columns: minmax(0, 1fr) 44px 14px 44px minmax(0, 1fr);
        gap: 0.38rem;
        padding: 0.55rem;
    }

    .partida-row-com-cronometro {
        grid-template-rows: auto auto auto;
    }

    .partida-row-com-cronometro > .partida-jogo-label {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .partida-row-com-cronometro > .partida-cronometro {
        grid-column: 2 / 5;
        grid-row: 2;
    }

    .partida-row-com-cronometro > .partida-time-fixo:first-of-type,
    .partida-row-com-cronometro > .partida-time-select:first-of-type {
        grid-column: 1;
        grid-row: 3;
    }

    .partida-row-com-cronometro > .partida-time-fixo:last-of-type,
    .partida-row-com-cronometro > .partida-time-select:last-of-type {
        grid-column: 5;
        grid-row: 3;
    }

    .partida-row-com-cronometro > .partida-placar:first-of-type {
        grid-column: 2;
        grid-row: 3;
    }

    .partida-row-com-cronometro > .partida-placar:last-of-type {
        grid-column: 4;
        grid-row: 3;
    }

    .partida-row-com-cronometro > b {
        grid-column: 3;
        grid-row: 3;
    }

    .partida-row input {
        width: 48px;
    }

    .partida-row-historico input[type="number"],
    .partida-row-historico .partida-placar {
        width: 44px;
        padding-inline: 0.2rem;
    }

    .partida-row .partida-placar {
        grid-column: auto;
        width: 48px;
    }

    .partida-row-historico .partida-placar {
        width: 44px;
    }

    .partida-row-historico strong,
    .partida-row-historico button.partida-time-fixo,
    .partida-row-historico select.partida-time-select {
        min-width: 0;
        font-size: 0.78rem;
    }

    .partida-row-historico select.partida-time-select {
        padding-inline: 0.35rem;
    }

    .gols-times-grid {
        grid-template-columns: 1fr;
    }

    .gols-jogador-row {
        grid-template-columns: 84px minmax(0, 1fr) 84px;
        gap: 0.35rem;
    }

    .gols-jogador-header {
        grid-template-columns: 84px minmax(0, 1fr) 84px;
        gap: 0.35rem;
        font-size: 0.6rem;
    }

    .gols-jogador-row button {
        width: 28px;
        min-width: 28px;
        height: 30px;
    }

    .gols-stat-botoes {
        grid-template-columns: 28px 24px 28px;
        gap: 0.15rem;
    }

    .gols-jogador-row-readonly {
        grid-template-columns: minmax(0, 1fr) 36px;
    }

    .jogo-excluir {
        margin: -0.95rem -0.95rem -0.95rem 0;
    }

    .jogo-excluir-btn {
        width: 42px;
    }

    .acoes-em-lote .btn-danger { width: 100%; }
}

@media (max-width: 480px) {
    .navbar-brand { font-size: 0.9rem; }
    .home-shell { gap: 0.9rem; }
    .home-match-content { padding: 1rem; }
    .home-metrics-row {
        gap: 0.45rem;
        padding: 0.45rem;
    }
    .home-metrics-row div { min-height: 66px; }
    .home-metrics-row span { font-size: 1.2rem; }
    .home-metrics-row small { font-size: 0.64rem; }

    .navbar-menu a {
        padding: 0.28rem 0.45rem;
        font-size: 0.74rem;
    }

    .bottom-nav {
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
        padding: 0.35rem;
    }

    .bottom-nav a {
        min-height: 50px;
        font-size: 0.6rem;
        border-radius: 12px;
    }

    .bottom-nav a svg {
        width: 17px;
        height: 17px;
    }

    .install-prompt {
        grid-template-columns: minmax(0, 1fr) auto;
        bottom: calc(82px + env(safe-area-inset-bottom));
        gap: 0.55rem;
        padding: 0.72rem;
    }

    .install-prompt-close {
        grid-column: 2;
        grid-row: 1;
    }

    .install-prompt-primary {
        grid-column: 1 / -1;
    }

    .moedas-chip,
    .navbar-user .usuario-chip {
        font-size: 0.74rem;
        padding-inline: 0.58rem;
    }

    .loja-card-preview {
        min-height: 212px;
    }

    .container { padding: 0.7rem 0.7rem 6.75rem; }
    .card { padding: 0.8rem; }

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

    .page-header p { font-size: 0.85rem; }
}

.agenda-header {
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 62%, transparent);
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--roxo) 18%, transparent), transparent 32%),
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--verde) 14%, transparent), transparent 28%),
        linear-gradient(145deg, var(--home-match-bg-start), var(--home-match-bg-end));
    box-shadow: var(--sombra);
}

.agenda-header::after {
    content: "";
    position: absolute;
    inset: auto -10% -65% 25%;
    height: 170px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 38%, transparent);
    transform: rotate(-8deg);
    pointer-events: none;
}

.agenda-header h1,
.agenda-header p,
.agenda-header .page-eyebrow {
    position: relative;
    z-index: 1;
}

.agenda-header h1 {
    font-size: clamp(2rem, 8vw, 3.6rem);
    line-height: 0.95;
}

.agenda-header p {
    max-width: 620px;
}

/* RESUMO */

/* FORMULÁRIO */

.agenda-form-card {
    margin-bottom: 1.35rem;
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.16), transparent 34%),
        var(--fundo-card);
}

.agenda-form-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 0.8rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.agenda-form-toggle > div {
    flex: 1;
    min-width: 0;
}

.agenda-form-toggle h2 {
    margin-bottom: 0.15rem;
    font-size: 1.15rem;
}

.agenda-form-toggle p {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.88rem;
}

.agenda-form-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: var(--texto-suave);
    transition: transform 0.18s ease, color 0.18s ease;
}

.agenda-form-toggle:hover .agenda-form-chevron,
.agenda-form-toggle:focus-visible .agenda-form-chevron {
    color: var(--texto);
}

.agenda-form-toggle:focus-visible {
    outline: 2px solid rgba(139, 92, 246, 0.5);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

.agenda-form-card.is-open .agenda-form-chevron {
    transform: rotate(180deg);
}

.agenda-form {
    display: none;
    gap: 1rem;
    margin-top: 1.15rem;
}

.agenda-form-card.is-open .agenda-form {
    display: grid;
}

.agenda-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.agenda-form-title {
    grid-column: span 2;
}

.agenda-form-description {
    grid-column: 1 / -1;
}

.agenda-form-description textarea {
    min-height: 110px;
}

.agenda-form .btn {
    width: fit-content;
}

/* PRÓXIMOS COMPROMISSOS */

.agenda-proximos {
    margin-bottom: 1.5rem;
}

.agenda-proximos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.agenda-evento-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    min-height: 190px;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 54%, transparent);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--roxo) 14%, transparent), transparent 30%),
        linear-gradient(180deg, var(--home-match-bg-start), var(--home-match-bg-end));
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.agenda-evento-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--roxo) 42%, var(--home-match-border));
}

.agenda-evento-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--roxo);
    opacity: 0.9;
}

.agenda-evento-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--roxo) 28%, var(--home-match-border));
    background: color-mix(in srgb, var(--roxo) 12%, var(--home-match-surface));
    color: var(--roxo-suave);
}

.agenda-evento-icon svg {
    width: 21px;
    height: 21px;
}

.agenda-evento-main {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.45rem;
}

.agenda-evento-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.agenda-evento-top span {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.22rem 0.58rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--roxo) 14%, var(--home-match-surface));
    color: var(--roxo-suave);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.agenda-evento-top small {
    color: var(--texto-suave);
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.agenda-evento-main h3 {
    margin: 0;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.15;
}

.agenda-evento-main p {
    display: flex;
    align-items: flex-start;
    gap: 0.38rem;
    color: var(--texto-suave);
    font-size: 0.88rem;
    line-height: 1.45;
}

.agenda-evento-main p svg {
    width: 15px;
    height: 15px;
    margin-top: 0.18rem;
    color: var(--verde);
}

.agenda-evento-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--home-match-border) 42%, transparent);
}

.agenda-resposta-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.agenda-evento-botoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.agenda-linha-acoes .agenda-cancelar-form {
    margin-top: 0.25rem;
}

/* STATUS */

.agenda-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    width: fit-content;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: color-mix(in srgb, var(--home-match-surface) 64%, transparent);
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.agenda-status.aceito {
    border-color: rgba(52, 211, 153, 0.38);
    background: rgba(52, 211, 153, 0.12);
    color: var(--verde);
}

.agenda-status.recusado {
    border-color: rgba(248, 113, 113, 0.42);
    background: rgba(248, 113, 113, 0.12);
    color: var(--vermelho);
}

.agenda-status.pendente {
    border-color: rgba(250, 204, 21, 0.34);
    background: rgba(250, 204, 21, 0.09);
    color: var(--ouro);
}

/* CALENDÁRIO / TIMELINE */

.agenda-meses {
    display: grid;
    gap: 1.2rem;
}

.agenda-mes-bloco {
    display: grid;
    gap: 0.8rem;
}

.agenda-mes-bloco > h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    color: var(--texto);
    font-size: 1.05rem;
    font-weight: 900;
}

.agenda-mes-bloco > h2::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--roxo);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--roxo) 12%, transparent);
}

.agenda-timeline {
    position: relative;
    display: grid;
    gap: 0.75rem;
}

.agenda-timeline::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 38px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--borda-forte), transparent);
    opacity: 0.8;
}

.agenda-linha {
    position: relative;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: stretch;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 45%, transparent);
    border-radius: 22px;
    background:
        linear-gradient(180deg, var(--home-match-bg-start), var(--home-match-bg-end));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.agenda-linha::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 50%;
    z-index: 1;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--roxo);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--roxo) 14%, transparent);
    transform: translateY(-50%);
}

.agenda-data {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.2rem;
    min-height: 78px;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 48%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--home-match-surface) 70%, transparent);
    text-align: center;
}

.agenda-data strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.agenda-data span {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
}

.agenda-linha-corpo {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 0.45rem;
}

.agenda-linha-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.agenda-linha-head span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    color: var(--roxo-suave);
    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.agenda-linha-head span svg {
    width: 15px;
    height: 15px;
}

.agenda-linha-corpo h3 {
    margin: 0;
    color: var(--texto);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.2;
}

.agenda-linha-corpo p {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    max-width: 72ch;
    color: var(--texto-suave);
    font-size: 0.88rem;
}

.agenda-linha-corpo p svg {
    width: 15px;
    height: 15px;
    margin-top: 0.17rem;
    color: var(--verde);
}

.agenda-origem {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--verde) 34%, transparent);
    background: color-mix(in srgb, var(--verde) 10%, var(--home-match-surface));
    color: var(--verde);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.agenda-visibilidade {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 24px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.agenda-visibilidade svg.lucide {
    width: 12px;
    height: 12px;
}

.agenda-visibilidade-diretores {
    border: 1px solid rgba(250, 204, 21, 0.38);
    background: rgba(250, 204, 21, 0.1);
    color: #fbbf24;
}

.agenda-visibilidade-ninguem {
    border: 1px solid rgba(248, 113, 113, 0.42);
    background: rgba(248, 113, 113, 0.12);
    color: var(--vermelho);
}

/* ===========================
   QUADRO TATICO
=========================== */
body.tactical-open {
    overflow: hidden;
}

body.tactical-open .bottom-nav {
    display: none;
}

.tactical-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(52, 211, 153, 0.26);
    background:
        radial-gradient(circle at 88% 12%, rgba(52, 211, 153, 0.18), transparent 34%),
        linear-gradient(160deg, rgba(31, 24, 52, 0.94), rgba(11, 28, 22, 0.94));
    cursor: pointer;
}

.tactical-card::after {
    content: "";
    position: absolute;
    right: -18%;
    bottom: -36%;
    width: 72%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.tactical-card h3 {
    font-size: clamp(1.65rem, 6vw, 2.5rem);
}

.tactical-card-badges {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.tactical-card-badges span {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-height: 28px;
    padding: 0.22rem 0.55rem;
    border: 1px solid rgba(52, 211, 153, 0.24);
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.09);
    color: var(--verde);
    font-size: 0.72rem;
    font-weight: 900;
}

.tactical-card-badges svg {
    width: 13px;
    height: 13px;
}

.tactical-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    visibility: hidden;
    pointer-events: none;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background:
        radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.18), transparent 32%),
        linear-gradient(180deg, #090713, #05090a);
    color: var(--texto);
}

.tactical-screen.is-open {
    display: grid;
    visibility: visible;
    pointer-events: auto;
}

.tactical-topbar,
.tactical-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: max(0.7rem, env(safe-area-inset-top)) 0.85rem 0.7rem;
    background: rgba(8, 7, 14, 0.82);
    border-bottom: 1px solid rgba(139, 92, 246, 0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.tactical-topbar strong {
    font-family: var(--fonte-display);
    font-size: 1rem;
}

.tactical-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.tactical-history-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.18rem;
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 10px;
    background: rgba(250, 204, 21, 0.1);
}

.tactical-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--texto);
    cursor: pointer;
}

.tactical-stage {
    min-height: 0;
    padding: 0.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    align-items: center;
    gap: 0.75rem;
}

.tactical-screen:not(.is-editing-activity):not(.is-board-hidden) .tactical-stage {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    overflow-y: auto;
}

.tactical-screen:not(.is-editing-activity):not(.is-board-hidden) .tactical-field,
.tactical-screen:not(.is-editing-activity):not(.is-board-hidden) .tactical-reserves {
    display: none;
}

.tactical-screen:not(.is-editing-activity):not(.is-board-hidden) .tactical-activities-panel {
    max-height: none;
}

.tactical-screen.is-editing-activity .tactical-stage {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding-top: 0.35rem;
}

.tactical-screen.is-editing-activity .tactical-field {
    width: min(100%, 980px);
    min-height: 0;
    height: calc(100dvh - 154px);
    max-height: calc(100dvh - 154px);
    margin-inline: auto;
}

.tactical-screen.is-editing-activity .tactical-activities-panel {
    display: none;
}

.tactical-toast {
    position: absolute;
    left: 50%;
    top: calc(max(0.7rem, env(safe-area-inset-top)) + 54px);
    z-index: 1200;
    max-width: calc(100vw - 2rem);
    transform: translate(-50%, -8px);
    padding: 0.5rem 1rem;
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: 999px;
    background: rgba(12, 10, 20, 0.94);
    color: var(--verde);
    font-size: 0.82rem;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tactical-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.tactical-screen:not(.is-editing-activity) .tactical-toolbar {
    display: none;
}

.tactical-screen.is-board-hidden {
    grid-template-rows: auto minmax(0, 1fr);
}

.tactical-screen.is-board-hidden .tactical-stage {
    grid-template-columns: 1fr;
    align-items: stretch;
    overflow-y: auto;
}

.tactical-screen.is-board-hidden .tactical-field,
.tactical-screen.is-board-hidden .tactical-reserves,
.tactical-screen.is-board-hidden .tactical-toolbar,
.tactical-screen.is-board-hidden .tactical-assets-panel,
.tactical-screen.is-board-hidden .tactical-save-menu,
.tactical-screen.is-board-hidden .tactical-agenda-menu {
    display: none;
}

.tactical-screen.is-board-hidden .tactical-activities-panel {
    display: grid;
    max-height: none;
    min-height: 0;
}

.tactical-field {
    position: relative;
    width: min(100%, 560px);
    height: 100%;
    min-height: 420px;
    max-height: calc(100dvh - 150px);
    overflow: hidden;
    border: 2px solid rgba(236, 232, 248, 0.76);
    border-radius: 18px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 12.5%, rgba(255, 255, 255, 0.01) 12.5% 25%),
        linear-gradient(180deg, #176d43, #0f5535);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    touch-action: none;
}

.tactical-field.is-half {
    height: min(56dvh, 520px);
    max-height: calc(100dvh - 190px);
}

.tactical-field.is-half .tactical-midfield-line {
    top: auto;
    bottom: 0;
}

.tactical-field.is-half .tactical-center-circle {
    top: 100%;
}

.tactical-field.is-half .tactical-box-bottom,
.tactical-field.is-half .tactical-goal-bottom {
    display: none;
}

.tactical-drawing,
.tactical-connections,
.tactical-field-lines,
.tactical-assets-layer,
.tactical-zones-layer,
.tactical-team {
    position: absolute;
    inset: 0;
}

.tactical-drawing {
    z-index: 4;
    pointer-events: none;
}

.tactical-connections {
    z-index: 5;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.tactical-zones-layer {
    z-index: 3;
    pointer-events: auto;
}

.tactical-field.is-drawing .tactical-connections {
    pointer-events: none;
}

.tactical-connection-hit {
    stroke: transparent;
    stroke-width: 18;
    stroke-linecap: round;
    pointer-events: stroke;
    cursor: pointer;
}

.tactical-connection-line {
    stroke: rgba(236, 253, 245, 0.82);
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.32));
    pointer-events: none;
}

.tactical-connection.is-selected .tactical-connection-line {
    stroke: #fbbf24;
    stroke-width: 5;
}

.tactical-arrow-hit {
    stroke: transparent;
    stroke-width: 22;
    stroke-linecap: round;
    pointer-events: stroke;
    cursor: pointer;
}

.tactical-arrow-line {
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.32));
    pointer-events: none;
}

.tactical-arrow-head {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.32));
    pointer-events: none;
}

.tactical-arrow.is-dashed .tactical-arrow-line {
    stroke-dasharray: 1 10;
}

.tactical-field.is-drawing .tactical-drawing {
    pointer-events: auto;
}

.tactical-field.is-drawing .tactical-player,
.tactical-field.is-drawing .tactical-ball,
.tactical-field.is-drawing .tactical-asset,
.tactical-field.is-drawing .tactical-zone {
    pointer-events: none;
}

.tactical-zone {
    position: absolute;
    z-index: 3;
    min-width: 26px;
    min-height: 26px;
    border: 2px solid rgba(52, 211, 153, 0.76);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 24px rgba(0, 0, 0, 0.18);
    cursor: grab;
    touch-action: none;
}

.tactical-zone-remove,
.tactical-zone-resize {
    position: absolute;
    z-index: 1;
}

.tactical-zone-remove {
    top: -12px;
    right: -12px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(248, 113, 113, 0.62);
    border-radius: 50%;
    background: rgba(127, 29, 29, 0.92);
    color: #fee2e2;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.tactical-zone-resize {
    right: -6px;
    bottom: -6px;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 6px;
    background: rgba(12, 10, 20, 0.82);
    cursor: nwse-resize;
}

.tactical-midfield-line {
    position: absolute;
    inset: 50% 0 auto;
    z-index: 1;
    border-top: 2px solid rgba(255, 255, 255, 0.72);
}

.tactical-center-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 34%;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.tactical-box {
    position: absolute;
    left: 18%;
    z-index: 1;
    width: 64%;
    height: 18%;
    border: 2px solid rgba(255, 255, 255, 0.72);
}

.tactical-box-top {
    top: -2px;
    border-top: 0;
}

.tactical-box-bottom {
    bottom: -2px;
    border-bottom: 0;
}

.tactical-goal {
    position: absolute;
    left: 38%;
    z-index: 1;
    width: 24%;
    height: 5%;
    border: 2px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.08);
}

.tactical-goal-top {
    top: 0;
    border-top: 0;
}

.tactical-goal-bottom {
    bottom: 0;
    border-bottom: 0;
}

.tactical-player,
.tactical-ball,
.tactical-asset {
    position: absolute;
    z-index: 6;
    display: inline-grid;
    place-items: center;
    border: 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.tactical-player {
    width: 34px;
    height: 34px;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    background: linear-gradient(180deg, #7c3aed, #4c1d95);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.35);
}

.tactical-team-away .tactical-player {
    background: linear-gradient(180deg, #111827, #020617);
}

.tactical-player.is-connection-start {
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.42), 0 7px 18px rgba(0, 0, 0, 0.35);
}

.tactical-ball {
    left: 50%;
    top: 50%;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%) scale(var(--tactical-item-scale, 1));
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.32));
}

.tactical-ball svg,
.tactical-ball-icon {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tactical-ball-icon {
    display: inline-grid;
    place-items: center;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 20px;
    line-height: 1;
    transform: translateY(-1px);
}

.tactical-asset {
    width: 30px;
    height: 30px;
    border-radius: 0;
    background: transparent;
    color: #111827;
    font-size: 1rem;
    font-weight: 900;
    transform: translate(-50%, -50%) scale(var(--tactical-item-scale, 1));
}

.tactical-asset[data-kind="dot"],
.tactical-asset[data-kind="ball"],
.tactical-asset[data-kind="mini-goal"],
.tactical-asset[data-kind="flag"],
.tactical-asset[data-kind="mark"] {
    width: 42px;
    height: 42px;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 1.75rem;
    line-height: 1;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.32));
}

.tactical-asset[data-kind="player-blue"],
.tactical-asset[data-kind="player-red"],
.tactical-asset[data-kind="goalkeeper"],
.tactical-asset[data-kind="referee"],
.tactical-asset[data-kind="cone"] {
    width: 42px;
    height: 50px;
    border-radius: 0;
    background: transparent;
    color: inherit;
    filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.32));
}

.tactical-asset[data-kind="cone"] {
    width: 42px;
    height: 50px;
}

.tactical-asset[data-kind="mini-goal"] {
    width: 68px;
    height: 44px;
}

.tactical-asset[data-kind="flag"] {
    width: 30px;
    height: 58px;
}

.tactical-asset[data-kind="mark"] {
    width: 46px;
    height: 46px;
}

.tactical-asset[data-kind="dot"] {
    width: 48px;
    height: 32px;
}

.tactical-asset[data-kind="referee"] {
    width: 40px;
    height: 56px;
}

.tactical-asset svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.tactical-trash {
    position: absolute;
    right: 0.65rem;
    top: 0.65rem;
    z-index: 9;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(248, 113, 113, 0.42);
    border-radius: 14px;
    background: rgba(12, 10, 20, 0.66);
    color: #fecaca;
    cursor: default;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.tactical-trash svg {
    width: 19px;
    height: 19px;
}

.tactical-trash.is-hot {
    transform: scale(1.08);
    border-color: rgba(248, 113, 113, 0.82);
    background: rgba(127, 29, 29, 0.9);
}

.tactical-field-save {
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    z-index: 9;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.tactical-connection-menu {
    position: absolute;
    z-index: 8;
    display: none;
    transform: translate(-50%, -100%);
    padding: 0.22rem;
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 10px;
    background: rgba(12, 10, 20, 0.96);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.38);
}

.tactical-connection-menu.is-open {
    display: block;
}

.tactical-connection-menu button {
    min-height: 30px;
    border: 0;
    border-radius: 8px;
    padding: 0 0.58rem;
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.tactical-reserves {
    position: fixed;
    left: 0.7rem;
    top: calc(max(0.7rem, env(safe-area-inset-top)) + 66px);
    z-index: 1008;
    display: grid;
    gap: 0.5rem;
    width: 86px;
    max-height: calc(100dvh - 160px);
    padding: 0.55rem;
    border: 1px solid rgba(236, 232, 248, 0.22);
    border-radius: 16px;
    background: rgba(12, 10, 20, 0.88);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.tactical-reserves.is-collapsed {
    width: 46px;
    padding: 0.35rem;
}

.tactical-reserves.is-collapsed strong,
.tactical-reserves.is-collapsed .tactical-reserves-list,
.tactical-reserves.is-collapsed .tactical-reserves-pager {
    display: none;
}

.tactical-reserves strong {
    font-size: 0.68rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.tactical-reserves-toggle {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 auto;
    border: 1px solid rgba(52, 211, 153, 0.28);
    border-radius: 11px;
    background: rgba(52, 211, 153, 0.1);
    color: var(--verde);
    cursor: pointer;
}

.tactical-reserves-list {
    display: grid;
    gap: 0.42rem;
    min-height: 90px;
    max-height: 204px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tactical-reserves-list .tactical-player {
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto;
}

.tactical-reserves-pager {
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    align-items: center;
    gap: 0.25rem;
}

.tactical-reserves-pager[hidden] {
    display: none;
}

.tactical-reserves-pager button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(52, 211, 153, 0.26);
    border-radius: 8px;
    background: rgba(52, 211, 153, 0.09);
    color: var(--verde);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.tactical-reserves-pager button:disabled {
    opacity: 0.42;
    cursor: default;
}

.tactical-reserves-pager span {
    color: var(--texto-suave);
    font-size: 0.66rem;
    font-weight: 900;
    text-align: center;
}

.tactical-activities-panel {
    align-self: stretch;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.65rem;
    min-height: 0;
    max-height: calc(100dvh - 150px);
    padding: 0.7rem;
    border: 1px solid rgba(236, 232, 248, 0.18);
    border-radius: 16px;
    background: rgba(12, 10, 20, 0.72);
    overflow: hidden;
}

.tactical-activities-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.tactical-activities-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.tactical-activities-head strong {
    font-family: var(--fonte-display);
    font-size: 0.92rem;
}

.tactical-activities-list {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    min-height: 0;
    overflow-y: auto;
}

.tactical-activity-card {
    display: grid;
    gap: 0.55rem;
    padding: 0.55rem;
    border: 1px solid rgba(139, 92, 246, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.tactical-activity-card.is-active {
    border-color: rgba(52, 211, 153, 0.58);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.14);
}

.tactical-unsaved {
    color: var(--ouro);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tactical-activity-preview {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: linear-gradient(180deg, #176d43, #0f5535);
    cursor: pointer;
}

.preview-field {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 12.5%, rgba(255, 255, 255, 0.01) 12.5% 25%);
}

.preview-field img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.preview-arrows {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.preview-arrows line {
    stroke-width: 1.8;
    stroke-linecap: round;
}

.preview-zone,
.preview-player,
.preview-asset {
    position: absolute;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
}

.preview-zone {
    transform: none;
    border: 1px solid rgba(52, 211, 153, 0.76);
    border-radius: 4px;
}

.preview-player {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    font-size: 0.48rem;
    font-style: normal;
    font-weight: 900;
}

.preview-player.is-away {
    background: #111827;
}

.preview-asset {
    width: 16px;
    height: 16px;
    color: #f97316;
    font-size: 0.75rem;
    font-style: normal;
}

.preview-asset svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tactical-activity-body {
    display: grid;
    gap: 0.16rem;
}

.tactical-activity-body strong {
    text-transform: uppercase;
    font-size: 0.84rem;
}

.tactical-activity-body span,
.tactical-activity-body p {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.76rem;
}

.tactical-activity-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.3rem;
}

.tactical-activity-actions button {
    min-height: 30px;
    padding: 0 0.28rem;
    border: 1px solid rgba(139, 92, 246, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--texto);
    font: inherit;
    font-size: 0.64rem;
    font-weight: 800;
    cursor: pointer;
}

.tactical-assets-panel {
    position: fixed;
    top: calc(max(0.7rem, env(safe-area-inset-top)) + 58px);
    right: 0.75rem;
    z-index: 1010;
    display: none;
    width: min(330px, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 150px);
    overflow: auto;
    padding: 0.8rem;
    border: 1px solid rgba(139, 92, 246, 0.32);
    border-radius: 20px;
    background: rgba(12, 10, 20, 0.96);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.tactical-assets-panel.is-open {
    display: grid;
    gap: 0.75rem;
}

.tactical-panel-head,
.tactical-color-picker,
.tactical-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.tactical-tool-grid,
.tactical-asset-buttons,
.tactical-zone-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.tactical-tool-grid button,
.tactical-asset-buttons button,
.tactical-zone-buttons button,
.tactical-toolbar button,
.tactical-toolbar select,
.tactical-save-menu button {
    position: relative;
    overflow: hidden;
    min-height: 38px;
    border: 1px solid rgba(139, 92, 246, 0.26);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--texto);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.tactical-click-feedback {
    position: fixed;
    left: var(--tactical-feedback-x, 50%);
    top: var(--tactical-feedback-y, 50%);
    z-index: 1300;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.4);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 18%, rgba(52, 211, 153, 0.78) 19% 42%, rgba(52, 211, 153, 0) 72%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.34), 0 0 18px rgba(52, 211, 153, 0.46);
    animation: tacticalClickFeedback 0.72s ease-out forwards;
}

@keyframes tacticalClickFeedback {
    0% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(0.45);
    }
    55% {
        opacity: 0.55;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(7.8);
    }
}

.tactical-asset-buttons button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 0.3rem;
    text-align: center;
    line-height: 1.15;
}

.tactical-asset-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
}

.tactical-asset-icon svg,
.tactical-asset-icon .tactical-ball-icon {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tactical-asset-label {
    font-size: 0.66rem;
}

.tactical-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.tactical-toolbar .tactical-clear-btn,
.tactical-toolbar .tactical-animate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.9rem;
}

.tactical-toolbar .tactical-clear-btn svg,
.tactical-toolbar .tactical-animate-btn svg {
    width: 16px;
    height: 16px;
}

.tactical-toolbar .tactical-clear-btn {
    color: var(--vermelho);
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.4);
}

.tactical-toolbar .tactical-clear-btn:hover {
    background: rgba(248, 113, 113, 0.18);
    border-color: var(--vermelho);
}

.tactical-toolbar .tactical-animate-btn {
    color: var(--verde);
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.4);
}

.tactical-toolbar .tactical-animate-btn:hover {
    background: rgba(52, 211, 153, 0.18);
    border-color: var(--verde);
}

.tactical-history-actions button {
    display: inline-grid;
    place-items: center;
    width: 38px;
    min-width: 38px;
    padding: 0;
    color: #dc2626;
    background: rgba(250, 204, 21, 0.22);
    border-color: rgba(250, 204, 21, 0.34);
}

.tactical-history-actions button:disabled {
    color: rgba(248, 250, 252, 0.34);
    cursor: not-allowed;
    opacity: 0.48;
}

.tactical-history-actions svg {
    width: 21px;
    height: 21px;
    stroke-width: 3;
}

.tactical-panel-section {
    display: grid;
    gap: 0.6rem;
    padding: 0.6rem;
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
}

.tactical-panel-section summary {
    cursor: pointer;
    color: var(--texto);
    font-size: 0.82rem;
    font-weight: 900;
}

.tactical-info-grid {
    display: grid;
    gap: 0.52rem;
    margin-top: 0.6rem;
}

.tactical-info-grid label {
    display: grid;
    gap: 0.25rem;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
}

.tactical-info-grid input,
.tactical-info-grid select,
.tactical-info-grid textarea {
    width: 100%;
    min-height: 36px;
    padding: 0.48rem 0.58rem;
    border: 1px solid rgba(139, 92, 246, 0.26);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--texto);
    font: inherit;
    font-size: 0.8rem;
}

.tactical-info-grid textarea {
    resize: vertical;
}

.tactical-tool-grid button {
    display: grid;
    place-items: center;
    gap: 0.18rem;
}

.tactical-tool-grid button.is-active {
    border-color: rgba(52, 211, 153, 0.5);
    background: rgba(52, 211, 153, 0.13);
    color: var(--verde);
}

.tactical-color-picker input {
    width: 52px;
    height: 34px;
    border: 0;
    background: transparent;
}

.tactical-toolbar {
    position: relative;
    z-index: 1005;
    grid-template-columns: 1.1fr repeat(2, 1fr);
    gap: 0.55rem;
    padding: 0.72rem 0.8rem calc(0.72rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(139, 92, 246, 0.22);
    border-bottom: 0;
}

.tactical-toolbar button,
.tactical-toolbar select {
    min-height: 46px;
    padding: 0 0.78rem;
    border-radius: 14px;
    font-size: 0.86rem;
    line-height: 1.1;
}

.tactical-toolbar select {
    background-color: rgba(255, 255, 255, 0.08);
}

.tactical-save-menu,
.tactical-agenda-menu {
    position: fixed;
    right: 0.8rem;
    bottom: calc(66px + env(safe-area-inset-bottom));
    z-index: 1012;
    display: none;
    min-width: 210px;
    padding: 0.4rem;
    border: 1px solid rgba(52, 211, 153, 0.28);
    border-radius: 16px;
    background: rgba(12, 10, 20, 0.96);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.5);
}

.tactical-save-menu.is-open,
.tactical-agenda-menu.is-open {
    display: grid;
    gap: 0.35rem;
}

.tactical-save-menu button {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    justify-content: flex-start;
    padding: 0 0.75rem;
    text-align: left;
}

.tactical-save-menu button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tactical-agenda-menu {
    width: min(360px, calc(100vw - 1.6rem));
    gap: 0.6rem;
    border-color: rgba(139, 92, 246, 0.34);
}

.tactical-agenda-menu.is-open {
    gap: 0.65rem;
}

.tactical-agenda-menu-head,
.tactical-agenda-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.tactical-agenda-menu-head strong {
    font-family: var(--fonte-display);
    font-size: 0.95rem;
}

.tactical-agenda-menu .tactical-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 11px;
}

.tactical-agenda-menu label {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 0.25rem;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
}

.tactical-agenda-menu input,
.tactical-agenda-menu select,
.tactical-agenda-menu textarea {
    width: 100%;
    min-height: 38px;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(139, 92, 246, 0.26);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--texto);
    font: inherit;
    font-size: 0.82rem;
}

.tactical-agenda-menu textarea {
    resize: vertical;
}

.tactical-agenda-menu .btn {
    width: 100%;
}

.agenda-quadro-link,
.tactical-view-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    min-height: 34px;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.1);
    color: var(--verde);
    font-size: 0.78rem;
    font-weight: 900;
}

.agenda-quadro-link:hover,
.tactical-view-back:hover {
    border-color: rgba(52, 211, 153, 0.55);
    color: var(--verde);
}

.tactical-view-shell {
    display: grid;
    gap: 1rem;
}

.tactical-view-head {
    display: grid;
    gap: 0.8rem;
}

.tactical-view-head h1 {
    margin: 0.25rem 0;
    font-size: clamp(2rem, 8vw, 3.6rem);
    line-height: 0.98;
}

.tactical-view-head p {
    color: var(--texto-suave);
}

.tactical-view-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.7rem;
}

.tactical-view-info-item {
    display: grid;
    gap: 0.24rem;
    padding: 0.7rem;
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.tactical-view-info-item strong {
    color: var(--texto);
    font-size: 0.76rem;
}

.tactical-view-info-item span {
    color: var(--texto-suave);
    font-size: 0.84rem;
    white-space: pre-wrap;
}

.tactical-plan-view-list {
    display: grid;
    gap: 1rem;
}

.tactical-plan-view-card {
    display: grid;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.tactical-plan-view-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tactical-plan-view-card-head > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.13);
    color: var(--verde);
    font-weight: 900;
}

.tactical-plan-view-card-head h2 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: clamp(1.25rem, 4vw, 2rem);
}

.tactical-plan-view-card-head p {
    margin: 0.12rem 0 0;
    color: var(--texto-suave);
    font-weight: 800;
}

.tactical-view-stage {
    display: grid;
    place-items: center;
    min-height: min(720px, calc(100dvh - 220px));
}

.tactical-view-field {
    height: min(720px, calc(100dvh - 220px));
    min-height: 520px;
    touch-action: pan-y;
}

.tactical-view-field .tactical-player,
.tactical-view-field .tactical-ball,
.tactical-view-field .tactical-asset {
    pointer-events: none;
}

.tactical-drawing-image {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.tactical-view-away-player {
    background: linear-gradient(180deg, #111827, #020617);
}

.tactical-view-ball {
    z-index: 7;
}

.tactical-player.is-animated {
    animation: tacticalPulse 0.75s ease-in-out 2;
}

@keyframes tacticalPulse {
    50% { transform: translate(-50%, -50%) scale(1.18); }
}

@media (max-width: 640px) {
    .tactical-stage {
        padding: 0.45rem;
        grid-template-columns: 1fr;
        align-content: start;
        overflow-y: auto;
    }

    .tactical-field {
        width: 100%;
        border-radius: 16px;
        min-height: 0;
        height: min(52dvh, 420px);
    }

    .tactical-screen.is-editing-activity .tactical-field {
        width: 100%;
        height: calc(100dvh - 160px);
        max-height: calc(100dvh - 160px);
    }

    .tactical-screen.is-editing-activity .tactical-field.is-half {
        height: min(54dvh, 430px);
    }

    .tactical-reserves {
        top: calc(max(0.7rem, env(safe-area-inset-top)) + 58px);
    }

    .tactical-reserves-list {
        max-height: 196px;
    }

    .tactical-activities-panel {
        width: 100%;
        max-height: none;
        min-height: 260px;
    }

    .tactical-toolbar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
        padding-inline: 0.5rem;
    }

    .tactical-toolbar button,
    .tactical-toolbar select {
        min-height: 44px;
        padding: 0 0.42rem;
        font-size: 0.74rem;
    }

    .tactical-toolbar select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tactical-toolbar .tactical-clear-btn,
    .tactical-toolbar .tactical-animate-btn {
        padding: 0 0.55rem;
        gap: 0.25rem;
    }

    .tactical-actions-group {
        gap: 0.3rem;
    }

    .tactical-history-actions button {
        width: 34px;
        min-width: 34px;
    }

    .tactical-agenda-row {
        align-items: stretch;
        flex-direction: column;
        gap: 0.55rem;
    }

    .tactical-view-stage {
        min-height: calc(100dvh - 190px);
    }

    .tactical-view-field {
        min-height: 0;
        height: calc(100dvh - 190px);
    }
}

.agenda-contagem {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.15rem;
}

.agenda-contagem span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--texto-suave);
    font-size: 0.74rem;
    font-weight: 800;
}

.agenda-contagem svg {
    width: 14px;
    height: 14px;
}

.agenda-contagem span:first-child svg {
    color: var(--verde);
}

.agenda-contagem span:last-child svg {
    color: var(--vermelho);
}

.agenda-linha-acoes {
    display: flex;
    flex-direction: column;
    align-content: center;
    gap: 0.5rem;
    min-width: 220px;
}

.agenda-linha-acoes .agenda-resposta-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
}

.agenda-linha-acoes form:not(.agenda-resposta-form),
.agenda-linha-acoes .btn {
    width: 100%;
}

/* CORES POR TIPO */

.tipo-treino::before {
    background: var(--verde);
    box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.12);
}

.agenda-evento-card.tipo-treino::before {
    background: var(--verde);
}

.tipo-treino .agenda-evento-icon,
.tipo-treino .agenda-data {
    border-color: rgba(52, 211, 153, 0.24);
    background: rgba(52, 211, 153, 0.08);
    color: var(--verde);
}

.tipo-treino .agenda-evento-top span,
.tipo-treino .agenda-linha-head span {
    color: var(--verde);
}

.tipo-jogo::before {
    background: var(--ouro);
    box-shadow: 0 0 0 6px rgba(250, 204, 21, 0.12);
}

.agenda-evento-card.tipo-jogo::before {
    background: var(--ouro);
}

.tipo-jogo .agenda-evento-icon,
.tipo-jogo .agenda-data {
    border-color: rgba(250, 204, 21, 0.26);
    background: rgba(250, 204, 21, 0.08);
    color: var(--ouro);
}

.tipo-jogo .agenda-evento-top span,
.tipo-jogo .agenda-linha-head span {
    color: var(--ouro);
}

.tipo-reuniao::before {
    background: var(--azul);
    box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.12);
}

.agenda-evento-card.tipo-reuniao::before {
    background: var(--azul);
}

.tipo-reuniao .agenda-evento-icon,
.tipo-reuniao .agenda-data {
    border-color: rgba(96, 165, 250, 0.26);
    background: rgba(96, 165, 250, 0.08);
    color: var(--azul);
}

.tipo-reuniao .agenda-evento-top span,
.tipo-reuniao .agenda-linha-head span {
    color: var(--azul);
}

.tipo-aviso::before {
    background: var(--vermelho);
    box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.12);
}

.agenda-evento-card.tipo-aviso::before {
    background: var(--vermelho);
}

.tipo-aviso .agenda-evento-icon,
.tipo-aviso .agenda-data {
    border-color: rgba(248, 113, 113, 0.26);
    background: rgba(248, 113, 113, 0.08);
    color: var(--vermelho);
}

.tipo-aviso .agenda-evento-top span,
.tipo-aviso .agenda-linha-head span {
    color: var(--vermelho);
}

/* TOGGLE EVENTO */

.agenda-linha {
    display: grid;
    grid-template-columns: 1fr;
}

.agenda-linha-head-toggle {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto auto;
    gap: 0.9rem;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.agenda-linha-head-toggle:hover {
    opacity: 0.9;
}

.agenda-linha-head-toggle .agenda-data {
    min-height: auto;
}

.agenda-linha-head-toggle .agenda-linha-head-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-width: 0;
}

.agenda-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--texto-suave);
    transition: transform 0.25s ease;
}

.agenda-linha.is-open .agenda-chevron {
    transform: rotate(180deg);
}

.agenda-linha-corpo,
.agenda-linha-acoes {
    display: none;
}

.agenda-linha.is-open .agenda-linha-corpo,
.agenda-linha.is-open .agenda-linha-acoes {
    display: block;
}

.agenda-linha.is-open .agenda-linha-corpo {
    grid-column: 1 / -1;
    padding: 0.85rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(139, 92, 246, 0.16);
    margin-top: 0.45rem;
}

.agenda-linha.is-open .agenda-linha-acoes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    grid-column: 1 / -1;
    padding: 0.85rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(139, 92, 246, 0.16);
}

/* ESTADOS VAZIOS */

.agenda-proximos .home-empty-state,
.agenda-meses .jogos-vazio {
    border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
}

.agenda-meses .jogos-vazio p {
    color: var(--texto-suave);
    text-align: center;
}

/* RESPONSIVO */

@media (max-width: 900px) {
    .agenda-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agenda-form-title {
        grid-column: 1 / -1;
    }

    .agenda-proximos-grid {
        grid-template-columns: 1fr;
    }

    .agenda-linha {
        grid-template-columns: 1fr;
    }

    .agenda-linha-head-toggle {
        grid-template-columns: 70px minmax(0, 1fr) auto auto;
    }

    .agenda-linha.is-open .agenda-linha-acoes {
        min-width: auto;
        padding-left: 80px;
    }
}

@media (max-width: 640px) {
    .agenda-header {
        padding: 1rem;
        border-radius: 22px;
    }

    .agenda-form-card {
        padding: 1rem;
        border-radius: 22px;
    }

    .agenda-form-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .agenda-form .btn {
        width: 100%;
    }

    .agenda-evento-card {
        grid-template-columns: 1fr;
        min-height: auto;
        border-radius: 22px;
    }

    .agenda-evento-icon {
        width: 42px;
        height: 42px;
    }

    .agenda-evento-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .agenda-evento-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .agenda-resposta-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .agenda-resposta-form .btn {
        width: 100%;
    }

    .agenda-timeline::before {
        left: 25px;
    }

    .agenda-linha {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0.9rem;
    }

    .agenda-linha::before {
        display: none;
    }

    .agenda-data {
        display: flex;
        justify-content: space-between;
        min-height: auto;
        padding: 0.65rem 0.75rem;
    }

    .agenda-data strong {
        font-size: 1.45rem;
    }

    .agenda-linha-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }

    .agenda-linha-acoes {
        padding-left: 0;
    }

    .agenda-linha-acoes .agenda-status {
        width: 100%;
    }
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    .bottom-nav {
        bottom: 0;
        width: min(800px, 100vw);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
    }

    .container {
        padding-bottom: calc(112px + env(safe-area-inset-bottom));
    }
}

/* ===========================
   REFINO MOBILE (alvos de toque e legibilidade)
   Normalizacoes finais aplicadas por cima dos breakpoints existentes,
   sem alterar o layout em telas maiores.
=========================== */
@media (max-width: 640px) {
    /* iOS aplica zoom automatico ao focar campo com font-size < 16px;
       forcar 16px aqui evita esse "pulo" ao abrir o teclado. */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
        min-height: 44px;
    }

    .form-group textarea {
        min-height: 110px;
    }

    /* Alvo minimo de toque recomendado (44x44px) para botoes de acao. */
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 38px;
    }
}

/* Ajuste final: card principal da Home 20% menor. */
.home-match-card {
    border-radius: 21px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.22);
}

.home-match-card,
.home-match-card .home-match-content {
    min-height: auto;
}

.home-match-bg::after {
    height: 128px;
}

.home-match-content {
    gap: 0.8rem;
    padding: 0.8rem;
}

.home-match-topline,
.home-match-actions {
    gap: 0.64rem;
}

.home-match-type {
    gap: 0.3rem;
    padding: 0.3rem 0.48rem;
    font-size: 0.6rem;
}

.home-match-type svg {
    width: 12px;
    height: 12px;
}

.home-scoreboard {
    gap: 0.6rem;
    padding: 0.36rem 0;
}

.home-team-side {
    gap: 0.4rem;
}

.home-team-side strong {
    font-size: 0.69rem;
}

.home-shield {
    width: 58px;
    height: 58px;
    border-radius: 18px;
}

.home-shield img {
    width: 45px;
    height: 45px;
}

.home-shield-initials {
    font-size: 1.2rem;
}

.home-versus {
    gap: 0.14rem;
    min-width: 46px;
}

.home-versus b {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: 0.84rem;
}

.home-versus span,
.home-versus small {
    font-size: 0.58rem;
}

.home-match-info h2 {
    font-size: 1.4rem;
}

.home-match-meta {
    gap: 0.44rem;
    grid-template-columns: repeat(auto-fit, minmax(104px, max-content));
    margin-top: 0.6rem;
}

.home-match-meta span {
    gap: 0.36rem;
    padding: 0.34rem 0.54rem;
    border-radius: 11px;
    font-size: 0.69rem;
}

.home-match-meta svg {
    width: 13px;
    height: 13px;
}

.home-match-card .home-avaliacao-pendente {
    gap: 0.36rem;
    max-width: 336px;
    padding: 0.58rem;
    font-size: 0.8rem;
}

.home-match-card .home-avaliacao-pendente strong {
    font-size: 0.8rem;
}

.home-match-card .home-avaliacao-progress {
    height: 7px;
}

.home-match-card .btn {
    min-height: 35px;
    padding: 0.48rem 0.88rem;
    font-size: 0.8rem;
}

@media (max-width: 640px) {
    .home-match-content {
        gap: 0.72rem;
        padding: 0.72rem;
    }

    .home-scoreboard {
        gap: 0.36rem;
    }

    .home-shield {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .home-shield img {
        width: 38px;
        height: 38px;
    }

    .home-versus {
        min-width: 42px;
    }

    .home-versus b {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 0.76rem;
    }

    .home-match-info h2 {
        font-size: 1.08rem;
    }

    .home-match-card .btn {
        min-height: 35px;
    }
}

/* Home: dados do header integrados ao topo do clube. */
.app-topbar-home {
    display: none;
}

.home-club-panel {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.66rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(52, 211, 153, 0.07));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
}

.home-club-identity {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-width: 0;
    color: var(--texto);
    text-decoration: none;
}

.home-club-identity img {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
}

.home-club-identity span {
    display: flex;
    align-items: baseline;
    gap: 0.36rem;
    min-width: 0;
}

.home-club-identity small {
    color: var(--verde);
    flex: 0 0 auto;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-club-identity strong {
    overflow: hidden;
    font-family: var(--fonte-display);
    font-size: 0.95rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-club-user {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.38rem;
    flex: 0 0 auto;
    min-width: 0;
}

.home-club-user .moedas-chip {
    min-height: 32px;
    padding: 0.24rem 0.58rem;
    font-size: 0.76rem;
}

.home-club-user .usuario-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    max-width: 150px;
    min-height: 32px;
    overflow: hidden;
    padding: 0.24rem 0.58rem;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--fundo-input);
    color: var(--texto);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.home-club-user .usuario-chip > :first-child {
    min-width: 0;
}

.home-club-user .usuario-chip .perfil {
    color: var(--roxo-suave);
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: capitalize;
}

.home-club-user .preferences-toggle {
    width: 32px;
    height: 32px;
}

.home-preferences .preferences-menu {
    right: 0;
    left: auto;
}

@media (max-width: 720px) {
    .home-club-panel {
        flex-direction: row;
        align-items: center;
        gap: 0.45rem;
        padding: 0.6rem;
    }

    .home-club-user {
        justify-content: flex-end;
        width: auto;
    }

    .home-club-user .usuario-chip {
        flex: 0 1 auto;
        justify-content: center;
        max-width: 132px;
    }
}

@media (max-width: 420px) {
    .estatisticas-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .estatisticas-player-head {
        flex-direction: column;
    }

    .estatisticas-aproveitamento {
        grid-auto-flow: column;
        justify-content: space-between;
        justify-items: start;
        width: 100%;
    }

    .home-club-identity img {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .home-club-user {
        gap: 0.3rem;
    }

    .home-club-user .moedas-chip {
        padding-inline: 0.48rem;
        font-size: 0.7rem;
    }

    .home-club-user .usuario-chip {
        max-width: 112px;
        padding-inline: 0.5rem;
        font-size: 0.68rem;
    }

    .home-club-user .usuario-chip .perfil {
        font-size: 0.6rem;
    }
}

/* Painel do Desenvolvedor */
.dev-shell {
    display: grid;
    gap: 1rem;
    padding-bottom: 2rem;
}

.dev-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(96, 165, 250, 0.08));
}

.dev-topbar h1 {
    margin: 0;
    font-size: 1.55rem;
}

.dev-topbar-actions,
.dev-tabs,
.dev-search,
.dev-toggle,
.dev-row,
.dev-color-grid label {
    display: flex;
    align-items: center;
}

.dev-topbar-actions {
    gap: 0.6rem;
}

.dev-tabs {
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0.25rem 0;
}

.dev-tabs a {
    flex: 0 0 auto;
    padding: 0.62rem 0.9rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo-card);
    color: var(--texto-suave);
    font-weight: 800;
    text-decoration: none;
}

.dev-tabs a.ativo,
.dev-tabs a:hover {
    border-color: rgba(52, 211, 153, 0.48);
    color: var(--texto);
    background: rgba(52, 211, 153, 0.12);
}

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

.dev-panel {
    border-radius: 8px;
}

.dev-shell input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.dev-shell select,
.dev-shell textarea {
    width: 100%;
    min-height: 42px;
    padding: 0.58rem 0.78rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background-color: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.25;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dev-shell textarea {
    min-height: 110px;
    resize: vertical;
}

.dev-shell input:not([type="checkbox"]):not([type="radio"]):not([type="color"])::placeholder,
.dev-shell textarea::placeholder {
    color: color-mix(in srgb, var(--texto-suave) 72%, transparent);
}

.dev-shell input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
.dev-shell select:focus,
.dev-shell textarea:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--roxo) 22%, transparent);
}

.dev-shell input:disabled,
.dev-shell select:disabled,
.dev-shell textarea:disabled {
    border-color: color-mix(in srgb, var(--borda) 72%, transparent);
    background-color: color-mix(in srgb, var(--fundo-input) 78%, #000 22%);
    color: var(--texto-suave);
    cursor: not-allowed;
    opacity: 1;
}

.dev-shell select option {
    background-color: var(--fundo-input);
    color: var(--texto);
}

.dev-shell input:-webkit-autofill,
.dev-shell input:-webkit-autofill:hover,
.dev-shell input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--texto);
    box-shadow: 0 0 0 1000px var(--fundo-input) inset;
    caret-color: var(--texto);
}

.dev-search {
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.dev-search input,
.dev-search select {
    min-width: 0;
}

.dev-list {
    display: grid;
    gap: 0.55rem;
}

.dev-row {
    gap: 0.7rem;
    min-width: 0;
    padding: 0.72rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.dev-row > img,
.dev-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--fundo-input);
}

.dev-avatar {
    display: inline-grid;
    place-items: center;
    color: var(--verde);
    font-weight: 900;
}

.dev-avatar svg {
    width: 18px;
    height: 18px;
}

.dev-row > div {
    min-width: 0;
    flex: 1 1 auto;
}

.dev-row strong,
.dev-row span,
.dev-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev-row span,
.dev-row small {
    color: var(--texto-suave);
    font-size: 0.78rem;
}

.dev-row .badge-alerta {
    border-color: rgba(248, 113, 113, 0.42);
    background: rgba(248, 113, 113, 0.12);
    color: var(--vermelho);
}

.dev-toggle {
    gap: 0.5rem;
    margin: 0.35rem 0 0.85rem;
    color: var(--texto);
    font-weight: 800;
}

.dev-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.dev-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin: 0.85rem 0;
}

.dev-color-grid label {
    align-items: stretch;
    gap: 0.45rem;
    flex-direction: column;
    min-width: 0;
}

.dev-color-grid label > span {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
}

.dev-color-grid input[type="color"] {
    width: 100%;
    min-height: 36px;
    padding: 0.18rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo-input);
}

.dev-current-image {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.55rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
}

.dev-current-image img {
    width: 34px;
    height: 46px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--fundo-input);
}

.dev-color-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22px, 1fr));
    gap: 0.3rem;
    padding: 0.38rem;
    border: 1px solid color-mix(in srgb, var(--borda) 78%, transparent);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.dev-color-swatch {
    aspect-ratio: 1;
    min-width: 0;
    min-height: 22px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 42%),
        var(--swatch-color);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.dev-color-swatch:hover,
.dev-color-swatch:focus-visible {
    border-color: var(--texto);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--swatch-color) 50%, transparent);
    transform: translateY(-1px);
}

.dev-color-swatch-empty {
    position: relative;
    background:
        linear-gradient(135deg, transparent calc(50% - 1px), rgba(248, 113, 113, 0.95) calc(50% - 1px), rgba(248, 113, 113, 0.95) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.12) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.12) 75%),
        var(--fundo-input);
    background-position: 0 0, 0 0, 6px 6px, 0 0;
    background-size: auto, 12px 12px, 12px 12px, auto;
}

.dev-layout-editor {
    margin: 0.9rem 0;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.dev-layout-editor summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem;
    cursor: pointer;
}

.dev-layout-editor summary span {
    color: var(--texto);
    font-weight: 900;
}

.dev-layout-editor summary small {
    color: var(--texto-suave);
    font-size: 0.75rem;
}

.dev-layout-grid {
    display: grid;
    gap: 0.7rem;
    padding: 0 0.75rem 0.75rem;
}

.dev-layout-fieldset {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--borda) 76%, transparent);
    border-radius: 8px;
}

.dev-layout-fieldset summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0;
    cursor: pointer;
    color: var(--verde);
    font-size: 0.78rem;
    font-weight: 900;
    list-style: none;
}

.dev-layout-fieldset summary::-webkit-details-marker {
    display: none;
}

.dev-layout-fieldset summary::after {
    content: '+';
    color: var(--texto-suave);
    font-size: 0.9rem;
}

.dev-layout-fieldset[open] summary::after {
    content: '-';
}

.dev-layout-fieldset-body {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.55rem;
}

.dev-layout-control {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 68px;
    align-items: center;
    gap: 0.5rem;
}

.dev-layout-control span {
    color: var(--texto-suave);
    font-size: 0.74rem;
    font-weight: 800;
}

.dev-layout-control input[type="range"] {
    width: 100%;
    accent-color: var(--verde);
}

.dev-layout-control input[type="number"] {
    min-height: 34px;
    padding: 0.35rem 0.45rem;
    text-align: center;
}

.dev-layout-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    padding: 0 0.75rem 0.75rem;
}

.dev-preview-panel {
    display: grid;
    justify-items: stretch;
}

.dev-preview-photo-form {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding: 0.7rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.dev-preview-photo-form .form-group {
    margin-bottom: 0;
}

.dev-preview-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dev-preview-photo-adjust-card {
    margin-bottom: 1rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
}

.dev-preview-photo-adjust-card summary {
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    color: var(--texto);
    font-weight: 900;
}

.dev-preview-photo-adjust-card summary small {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 700;
}

.dev-preview-photo-adjust-form {
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid var(--borda);
    border-radius: 0;
    background: transparent;
}

.dev-preview-photo-adjust-form .btn {
    justify-content: center;
}

.dev-preview-panel [data-card-style-preview] {
    display: grid;
    justify-items: center;
    margin-bottom: 1rem;
}

.dev-template-list {
    max-height: 460px;
    overflow: auto;
}

.dev-log-row {
    align-items: flex-start;
}

.dev-log-row small {
    white-space: normal;
}

@media (max-width: 880px) {
    .dev-grid {
        grid-template-columns: 1fr;
    }

    .dev-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .dev-topbar-actions {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 560px) {
    .dev-color-grid,
    .dev-search {
        grid-template-columns: 1fr;
    }

    .dev-search {
        display: grid;
    }

    .dev-row {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        flex-wrap: wrap;
    }

    .dev-row .badge-posicao {
        max-width: 96px;
    }

    .dev-layout-control {
        grid-template-columns: 1fr 68px;
    }

    .dev-layout-control span {
        grid-column: 1 / -1;
    }
}