/* --- CORE DESIGN SYSTEM & VARIABLES --- */
:root {
    /* Color Palette */
    --bg-main: #0b0c15;
    --bg-sidebar: #0f1122;
    --bg-card: rgba(22, 25, 48, 0.6);
    --bg-card-highlight: rgba(36, 40, 77, 0.75);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-highlight: rgba(2, 239, 139, 0.3);
    
    /* Brand Accent Colors */
    --color-green-neon: #02ef8b;       /* Official FC Lime Green */
    --color-green-neon-hover: #02d47b;
    --color-purple-cyber: #8c52ff;     /* Creative/Cyber Purple */
    --color-cyan-cool: #00d2ff;        /* Analytical Blue/Cyan */
    --color-yellow-warning: #facc15;   /* Draw / neutral yellow */
    --color-red-danger: #ff4a5a;       /* Loss / Error red */
    --color-orange-warn: #ff9f43;      /* Caution orange */
    
    /* Text Colors */
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    
    /* Fonts */
    --font-primary: 'Inter', sans-serif;
    --font-display: 'Orbitron', sans-serif;
    
    /* Transitions & Shadows */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-premium: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --shadow-neon-green: 0 0 15px rgba(2, 239, 139, 0.4);
    --shadow-neon-purple: 0 0 15px rgba(140, 82, 255, 0.4);
}

/* --- RESET & GLOBAL STYLES --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-main);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* --- APP CONTAINER LAYOUT --- */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* --- SIDEBAR NAV --- */
.sidebar {
    width: 280px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 24px;
    flex-shrink: 0;
    z-index: 10;
}

.sidebar-header {
    margin-bottom: 32px;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
    flex: 0 0 38px;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--text-primary);
}

.logo-text span {
    color: var(--color-green-neon);
}

.logo-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 4px;
    font-weight: 600;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-secondary);
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    transition: var(--transition-smooth);
    width: 100%;
}

.menu-item i {
    width: 18px;
    height: 18px;
}

.menu-item:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

.menu-item.active {
    color: var(--bg-main);
    background-color: var(--color-green-neon);
    font-weight: 600;
    box-shadow: var(--shadow-neon-green);
}

.menu-item.highlight-btn {
    border: 1px dashed var(--color-purple-cyber);
    color: var(--color-purple-cyber);
}

.menu-item.highlight-btn:hover {
    background-color: rgba(140, 82, 255, 0.1);
    color: #b08dff;
}

.menu-item.highlight-btn.active {
    background: linear-gradient(135deg, var(--color-purple-cyber), var(--color-cyan-cool));
    color: var(--text-primary);
    border: none;
    box-shadow: var(--shadow-neon-purple);
}

/* CSV Importer Widget */
.importer-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-top: auto;
    margin-bottom: 20px;
    text-align: center;
    transition: var(--transition-smooth);
}

.importer-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background-color: rgba(22, 25, 48, 0.8);
}

.importer-card h3 {
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.importer-card p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.4;
}

.file-upload-label {
    display: inline-block;
    background: linear-gradient(135deg, #1d2142, #292f5d);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 16px;
    font-size: 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 100%;
}

.file-upload-label:hover {
    border-color: var(--color-cyan-cool);
    background: linear-gradient(135deg, #252b57, #363d7a);
}

.file-upload-label input {
    display: none;
}

.status-message {
    font-size: 0.65rem;
    color: var(--color-green-neon);
    margin-top: 8px;
    font-weight: 500;
    word-break: break-all;
}

.sidebar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    margin-bottom: 16px;
}

.logout-btn {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.85rem;
}

.logout-btn:hover {
    color: var(--color-red-danger);
    background-color: rgba(255, 74, 90, 0.08);
}

.logout-btn i {
    width: 16px;
    height: 16px;
}

.sidebar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.version-tag {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

/* --- MAIN CONTENT & HEADER --- */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-main);
    position: relative;
    overflow: hidden;
}

.content-header {
    min-height: 80px;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(15, 17, 34, 0.4);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 32px;
    flex-shrink: 0;
}

.header-title-wrapper {
    max-width: 340px;
}

.header-title-wrapper h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-description {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 3px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.filters-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.filters-panel {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mobile-filters-toggle {
    display: none;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.filter-group i {
    width: 14px;
    height: 14px;
}

.filter-select {
    background-color: #121424;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.8rem;
    outline: none;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.filter-select option {
    background-color: #121424;
    color: var(--text-primary);
}

.filter-select:hover, .filter-select:focus {
    border-color: var(--color-green-neon);
}

.static-display-value {
    display: inline-block;
    background-color: rgba(2, 239, 139, 0.08);
    border: 1px solid rgba(2, 239, 139, 0.2);
    color: var(--color-green-neon);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

/* --- VIEWPORT PANELS --- */
.content-viewport {
    flex-grow: 1;
    padding: 32px;
    overflow-y: auto;
    position: relative;
}

.tab-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tab-panel.active {
    display: block;
    opacity: 1;
}

.empty-state-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    max-width: 460px;
    margin: 10vh auto 0;
    padding: 48px 36px;
    background: var(--bg-card-highlight);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-premium);
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(2, 239, 139, 0.15), rgba(0, 210, 255, 0.15));
    color: var(--color-green-neon);
}

.empty-state-icon i {
    width: 30px;
    height: 30px;
}

.empty-state-panel h2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--text-primary);
    margin: 0;
}

.empty-state-panel p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.empty-state-panel strong {
    color: var(--color-green-neon);
}

/* --- KPI GRID SYSTEM --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.kpi-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-premium);
    backdrop-filter: blur(12px);
    transition: var(--transition-smooth);
}

.kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
    background-color: rgba(22, 25, 48, 0.8);
}

.kpi-card.win-rate-card {
    border-left: 4px solid var(--color-green-neon);
}

.kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--color-cyan-cool);
    flex-shrink: 0;
}

.kpi-icon i {
    width: 22px;
    height: 22px;
}

.win-rate-card .kpi-icon {
    color: var(--color-green-neon);
    background-color: rgba(2, 239, 139, 0.08);
}

.kpi-details {
    display: flex;
    flex-direction: column;
}

.kpi-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 4px 0;
    color: var(--text-primary);
}

.kpi-subtext {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* --- DASHBOARD ROW & PANEL SYSTEMS --- */
.dashboard-row {
    margin-bottom: 24px;
}

.dashboard-row.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.dashboard-row.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .dashboard-row.grid-3 {
        grid-template-columns: 1fr;
    }
    .span-2 {
        grid-column: span 1 !important;
    }
}

.span-2 {
    grid-column: span 2;
}

.dashboard-panel {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-premium);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.dashboard-panel:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.dashboard-panel.highlight-panel {
    border: 1px solid var(--border-highlight);
    box-shadow: 0 0 20px rgba(2, 239, 139, 0.05);
}

.panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-header h3 i {
    width: 16px;
    height: 16px;
    color: var(--color-green-neon);
}

.panel-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chart-ma-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.chart-ma-toggle i {
    width: 13px;
    height: 13px;
}

.chart-ma-toggle:hover {
    border-color: var(--color-green-neon);
    color: var(--text-primary);
}

.chart-ma-toggle.active {
    background-color: rgba(2, 239, 139, 0.12);
    border-color: var(--color-green-neon);
    color: var(--color-green-neon);
}

.panel-content {
    padding: 20px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.panel-content.flex-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Charts Containers */
.chart-container {
    padding: 20px;
    position: relative;
    height: 300px;
    width: 100%;
}

.chart-container-compact {
    padding: 20px;
    position: relative;
    height: 250px;
    width: 100%;
}

/* Simple text-only stats styles */
.stat-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 8px;
}

.stat-line:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.stat-line strong {
    color: var(--text-primary);
    font-family: var(--font-display);
}

.club-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.club-emblem-frame {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(2, 239, 139, 0.22);
    background: rgba(2, 239, 139, 0.04);
    overflow: hidden;
}

.club-emblem-frame i,
.club-emblem-frame svg {
    width: 28px;
    height: 28px;
    color: var(--color-green-neon);
}

.club-emblem-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    padding: 0;
}

.club-record-inline {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    text-align: right;
}

.club-record-win { color: var(--color-green-neon); }
.club-record-draw { color: var(--color-yellow-warning); }
.club-record-loss { color: var(--color-red-danger); }
.club-record-pct { color: var(--color-cyan-cool); }

.club-profile-main {
    min-width: 0;
}

.club-profile-main h4 {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 0.95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.club-profile-main p {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.4;
    margin-top: 4px;
}

.club-profile-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- ALERTS & NOTIFICATIONS --- */
.alert-info-box {
    background-color: rgba(0, 210, 255, 0.08);
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}

.alert-info-box i {
    color: var(--color-cyan-cool);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-info-box p {
    font-size: 0.825rem;
    color: #cdebf5;
    line-height: 1.5;
}

/* Custom fatigue text coloring */
.text-red {
    color: var(--color-red-danger) !important;
}

.text-green {
    color: var(--color-green-neon) !important;
}

/* --- TÁTICAS & IA COACH STYLE --- */
.coach-hero-banner {
    background: linear-gradient(135deg, rgba(22, 25, 48, 0.8), rgba(15, 17, 34, 0.9));
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.coach-hero-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(140, 82, 255, 0.15) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.coach-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple-cyber), var(--color-cyan-cool));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    box-shadow: var(--shadow-neon-purple);
    z-index: 2;
    flex-shrink: 0;
}

.coach-avatar i {
    width: 30px;
    height: 30px;
}

.coach-intro {
    z-index: 2;
}

.coach-intro h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.coach-intro p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.coach-history-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: -10px 0 20px;
    flex-wrap: wrap;
}

.coach-history-label {
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-align: center;
}

.coach-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    .coach-layout {
        grid-template-columns: 1fr;
    }
}

.coach-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Insight Items inside coach panel */
.insight-item {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    margin-bottom: 16px;
}

.insight-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.insight-marker {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.insight-marker.bad {
    background-color: rgba(255, 74, 90, 0.1);
    color: var(--color-red-danger);
}

.insight-marker.good {
    background-color: rgba(2, 239, 139, 0.1);
    color: var(--color-green-neon);
}

.insight-content h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.insight-content p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Tactical & Role cards inside coach */
.tactic-role-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.tactic-role-card:last-child {
    margin-bottom: 0;
}

.tactic-role-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.tactic-role-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-cyan-cool);
}

.tactic-role-badge {
    background-color: rgba(2, 239, 139, 0.1);
    color: var(--color-green-neon);
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.tactic-urgencia-badge {
    font-size: 0.62rem;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.tactic-urgencia-badge.urgencia-alta {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}
.tactic-urgencia-badge.urgencia-media {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}
.tactic-urgencia-badge.urgencia-baixa {
    background: rgba(2, 239, 139, 0.1);
    color: var(--color-green-neon);
}

.tactic-role-card.urgencia-alta {
    border-color: rgba(239, 68, 68, 0.2);
}
.tactic-role-card.urgencia-media {
    border-color: rgba(251, 191, 36, 0.15);
}

.tactic-role-change {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-cyan-cool);
    margin-bottom: 4px;
}

.tactic-stat-line {
    display: flex;
    align-items: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.03);
    border-radius: 5px;
    padding: 4px 8px;
    margin-bottom: 6px;
}

.tactic-role-desc {
    font-size: 0.775rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.bench-footnote {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.bench-footnote i { margin-top: 2px; opacity: 0.6; }
.bench-source-link {
    color: var(--color-cyan-cool);
    text-decoration: none;
    opacity: 0.8;
}
.bench-source-link:hover { opacity: 1; text-decoration: underline; }

.btn-delete-match {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 5px;
    color: rgba(239, 68, 68, 0.5);
    cursor: pointer;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-delete-match:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.5);
}

.btn-edit-match {
    background: transparent;
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 5px;
    color: rgba(253, 224, 71, 0.72);
    cursor: pointer;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-edit-match:hover {
    background: rgba(250, 204, 21, 0.1);
    color: #fde047;
    border-color: rgba(250, 204, 21, 0.5);
}

/* Meta codes card styling */
.meta-code-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(140, 82, 255, 0.05);
    border: 1px solid rgba(140, 82, 255, 0.15);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    transition: var(--transition-smooth);
}

.meta-code-box:hover {
    border-color: rgba(140, 82, 255, 0.3);
    box-shadow: 0 4px 20px rgba(140, 82, 255, 0.05);
}

.meta-code-header h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.meta-code-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.meta-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 8px;
}

.detail-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.detail-value {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.detail-value.highlight-value {
    color: var(--color-green-neon);
}

.meta-code-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.meta-code-reason {
    font-size: 0.8rem;
    line-height: 1.5;
    background: rgba(2, 239, 139, 0.04);
    border-left: 3px solid var(--color-green-neon);
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
    color: var(--text-secondary);
}

.meta-code-reason strong,
.meta-code-intuition strong {
    color: var(--color-green-neon);
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-code-intuition {
    font-size: 0.8rem;
    line-height: 1.5;
    background: rgba(139, 92, 246, 0.07);
    border-left: 3px solid #8b5cf6;
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
    color: var(--text-secondary);
}

.meta-code-intuition strong {
    color: #a78bfa;
}

.meta-section-label {
    display: flex;
    align-items: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.meta-fonte-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.meta-fonte-link:hover { opacity: 1; color: var(--color-green-neon); }

.meta-code-share-widget {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.meta-code-share-widget .share-code-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.meta-code-share-widget .share-code-wrapper {
    display: flex;
    align-items: center;
    background-color: rgba(2, 239, 139, 0.05);
    border: 1px dashed var(--border-highlight);
    border-radius: 8px;
    padding: 4px 4px 4px 12px;
    justify-content: space-between;
}

.meta-code-share-widget code {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--color-green-neon);
    font-weight: bold;
}

.copy-tactic-btn {
    background-color: var(--color-purple-cyber);
    border: none;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 6px;
}

.copy-tactic-btn:hover {
    background-color: #aa7dff;
}

.copy-tactic-btn.copied {
    background-color: var(--color-green-neon);
    color: #0c0e1a;
}

.copy-tactic-btn i {
    width: 12px;
    height: 12px;
}

/* ============================
   CAROUSEL COMPONENT
   ============================ */
.coach-carousel-panel {
    margin-bottom: 24px;
}

.carousel-viewport {
    overflow: hidden;
    border-radius: 8px;
}

.carousel-track {
    display: flex;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    align-items: stretch;
}

.carousel-track > * {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Remove stacked margin inside carousel */
.carousel-track .meta-code-box {
    margin-bottom: 0;
}

.carousel-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.carousel-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.carousel-btn:hover:not(:disabled) {
    border-color: var(--color-green-neon);
    color: var(--color-green-neon);
}

.carousel-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.carousel-btn i {
    width: 16px;
    height: 16px;
}

.carousel-indicator {
    font-size: 0.8rem;
    color: var(--text-muted);
    min-width: 36px;
    text-align: center;
    font-family: var(--font-display);
}

/* Resource card (CSS classes replace inline styles) */
.resource-card {
    background: rgba(22, 25, 48, 0.5);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--color-purple-cyber);
    padding: 24px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.resource-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.resource-card-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.resource-card-creator {
    font-size: 0.7rem;
    background: rgba(0, 210, 255, 0.1);
    color: var(--color-cyan-cool);
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.resource-card-why {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.resource-card-practice {
    font-size: 0.8rem;
    line-height: 1.5;
    background: rgba(2, 239, 139, 0.04);
    border-left: 3px solid var(--color-green-neon);
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
    color: var(--text-secondary);
}

.resource-practice-label {
    display: flex;
    align-items: center;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--color-green-neon);
}

.resource-card-practice p {
    margin: 0;
}

.resource-card-section {
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    font-size: 0.8rem;
}

.resource-card-section.limitation {
    background: rgba(255, 159, 67, 0.04);
    border-left: 2px solid var(--color-orange-warn);
}

.resource-card-section.experiment {
    background: rgba(2, 239, 139, 0.04);
    border-left: 2px solid var(--color-green-neon);
}

.resource-card-section-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 4px;
}

.resource-card-section.limitation .resource-card-section-label {
    color: var(--color-orange-warn);
}

.resource-card-section.experiment .resource-card-section-label {
    color: var(--color-green-neon);
}

.resource-card-section span {
    color: var(--text-secondary);
    line-height: 1.5;
    display: block;
}

.resource-card-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.resource-card-footer .source-tag {
    color: var(--color-green-neon);
}

.resource-card-type-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.resource-card-type-badge.video {
    background: rgba(255, 0, 0, 0.12);
    color: #ff4444;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

.resource-card-type-badge.article {
    background: rgba(139, 92, 246, 0.12);
    color: var(--color-purple-cyber);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.resource-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    align-self: flex-start;
}

.resource-card-link:hover {
    border-color: var(--color-green-neon);
    color: var(--color-green-neon);
    background: rgba(2, 239, 139, 0.05);
}

/* ── Line Break Insight Panels ─────────────────────────────────── */

.lb-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    text-align: center;
    gap: 8px;
    height: 100%;
    min-height: 160px;
}

.lb-no-data-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.lb-no-data-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}

.lb-no-data-cols {
    display: block;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.72rem;
    color: var(--color-cyan-cool);
    line-height: 1.6;
}

.lb-kpi-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.lb-kpi {
    flex: 1;
    min-width: 80px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lb-kpi-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.lb-kpi-value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.lb-zone-meio  { color: var(--color-cyan-cool); }
.lb-zone-lados { color: var(--color-green-neon); }
.lb-zone-cima  { color: var(--color-purple-cyber); }

.lb-benchmark {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.lb-benchmark-icon {
    font-size: 0.7rem;
}

.lb-tier-good { background: rgba(2, 239, 139, 0.08); color: var(--color-green-neon); border: 1px solid rgba(2, 239, 139, 0.2); }
.lb-tier-ok   { background: rgba(0, 210, 255, 0.08); color: var(--color-cyan-cool);  border: 1px solid rgba(0, 210, 255, 0.2); }
.lb-tier-warn { background: rgba(255, 159, 67, 0.08); color: var(--color-orange-warn); border: 1px solid rgba(255, 159, 67, 0.2); }

.lb-insight-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 10px;
}

.lb-benchmark-ref {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Highlight section in dashboard-panel quick highlights */
.highlight-panel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.highlight-panel-item:last-child {
    margin-bottom: 0;
}

.highlight-panel-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-green-neon);
    flex-shrink: 0;
}

.highlight-panel-bullet.warn {
    background-color: var(--color-orange-warn);
}

.highlight-panel-bullet.danger {
    background-color: var(--color-red-danger);
}

/* --- PREMIUM TABLE SYSTEM --- */
.table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.table-responsive {
    overflow-x: auto;
    width: 100%;
}

.premium-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.825rem;
}

.premium-table th {
    padding: 14px 16px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.01);
}

.premium-table td {
    padding: 14px 16px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.premium-table tbody tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.025);
}
.premium-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary);
}

.result-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 900;
    text-align: center;
    min-width: 32px;
}

.result-badge.win {
    background-color: rgba(2, 239, 139, 0.15);
    color: var(--color-green-neon);
}

.result-badge.loss {
    background-color: rgba(255, 74, 90, 0.15);
    color: var(--color-red-danger);
}

.result-badge.draw {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.mode-badge {
    background-color: rgba(0, 210, 255, 0.08);
    border: 1px solid rgba(0, 210, 255, 0.15);
    color: var(--color-cyan-cool);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    display: inline-block;
}

.mode-badge.rivals {
    background-color: rgba(140, 82, 255, 0.08);
    border-color: rgba(140, 82, 255, 0.15);
    color: var(--color-purple-cyber);
}

.mode-badge.friendly {
    background-color: rgba(255, 159, 67, 0.08);
    border-color: rgba(255, 159, 67, 0.15);
    color: var(--color-orange-warn);
}

.type-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--font-display);
    text-transform: uppercase;
}

.type-badge.solo {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.type-badge.coop {
    background-color: rgba(0, 162, 255, 0.08);
    border: 1px solid rgba(0, 162, 255, 0.15);
    color: #00a2ff;
}

.table-time-text {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* --- API STATUS BANNER & LOADING SPINNER --- */
.api-status-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.85rem;
    margin-bottom: 24px;
    z-index: 5;
}

.api-status-banner.success {
    background-color: rgba(2, 239, 139, 0.08);
    border: 1px solid rgba(2, 239, 139, 0.2);
    color: #d1fae5;
}

.api-status-banner.success i {
    color: var(--color-green-neon);
}

.api-status-banner.warning {
    background-color: rgba(255, 159, 67, 0.08);
    border: 1px solid rgba(255, 159, 67, 0.2);
    color: #ffedd5;
}

.api-status-banner.warning i {
    color: var(--color-orange-warn);
}

.api-status-banner code {
    background-color: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.8rem;
}

.loading-spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
    width: 100%;
}

.loading-spinner-container p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(140, 82, 255, 0.1);
    border-top: 3px solid var(--color-purple-cyber);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- PREMIUM ACTION BUTTON --- */
.premium-action-btn {
    background: linear-gradient(135deg, var(--color-purple-cyber), var(--color-cyan-cool));
    border: none;
    outline: none;
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-neon-purple);
    transition: var(--transition-smooth);
    margin-left: auto;
    flex-shrink: 0;
}

.premium-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(140, 82, 255, 0.6);
}

.premium-action-btn:disabled,
.premium-action-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.premium-action-btn:disabled:hover,
.premium-action-btn.disabled:hover {
    transform: none;
    box-shadow: none;
}

.premium-action-btn.analyzing {
    opacity: 1;
    background: linear-gradient(90deg,
        rgba(99,102,241,0.88) 0%,
        rgba(59,130,246,0.82) 25%,
        rgba(168,85,247,0.9) 50%,
        rgba(59,130,246,0.82) 75%,
        rgba(99,102,241,0.88) 100%);
    background-size: 300% 100%;
    cursor: not-allowed;
    animation: ai-shimmer 2.4s linear infinite, ai-glow 3s ease-in-out infinite;
}

.premium-action-btn i {
    width: 16px;
    height: 16px;
}

/* --- MODAL SYSTEM --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(6, 8, 20, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
}

/* --- MODAL SYSTEM --- */
.modal-content {
    background-color: #0f1122;
    border: 1px solid var(--border-highlight);
    border-radius: 20px;
    width: 90%;
    max-width: 650px;
    box-shadow: 0 10px 40px rgba(2, 239, 139, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-green-neon);
}

.close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    color: var(--color-red-danger);
}

.modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- FC 26 Tactic Preview Overrides --- */
.tactic-preview-modal {
    max-width: 960px;
    width: 95%;
}

.tactic-preview-body {
    flex-direction: row !important;
    gap: 24px;
    padding: 24px;
}

/* --- Painel Lateral de Informações Táticas --- */
.tactic-info-panel {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tactic-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tactic-info-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.tactic-info-value {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.tactic-info-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    margin: 4px 0;
}

.tactic-info-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Pitch Container & Football Field */
.pitch-container {
    flex: 1;
    aspect-ratio: 1 / 1.15;
    background: linear-gradient(180deg, #183820 0%, #0f2a18 50%, #183820 100%);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
    min-height: 420px;
}

.pitch-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Pitch line markings */
.pitch-line {
    position: absolute;
    border: 1.5px solid rgba(255, 255, 255, 0.10);
    pointer-events: none;
}

.pitch-line.center-line {
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
}

.pitch-line.center-circle {
    top: 38%;
    left: 35%;
    width: 30%;
    height: 24%;
    border-radius: 50%;
}

.pitch-line.penalty-area-top {
    top: 0;
    left: 22%;
    width: 56%;
    height: 18%;
    border-top: none;
}

.pitch-line.penalty-area-bottom {
    bottom: 0;
    left: 22%;
    width: 56%;
    height: 18%;
    border-bottom: none;
}

/* --- Player Nodes FC 26 Style (Card com 3 linhas) --- */
.pitch-player-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    cursor: default;
    transition: transform 0.2s ease;
}

.pitch-player-node:hover {
    transform: translate(-50%, -50%) scale(1.06);
}

.player-card {
    background-color: rgba(10, 14, 28, 0.92);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 72px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.player-card-role {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
}

.player-card-focus {
    font-size: 0.6rem;
    color: var(--color-cyan-cool);
    font-style: italic;
    font-weight: 500;
    white-space: nowrap;
}

.player-card-pos {
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

/* --- Modal details and share code --- */
.modal-share-code-box {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
}

.share-code-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.share-code-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #0c0e1a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 6px 10px;
}

#modal-share-code {
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--color-green-neon);
}

.view-tactic-btn {
    background-color: var(--color-purple-cyber);
    color: var(--text-primary);
    border: none;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-tactic-btn:hover {
    background-color: #aa7dff;
    box-shadow: 0 0 10px rgba(140, 82, 255, 0.4);
}

.view-tactic-btn i {
    width: 12px;
    height: 12px;
}

/* Responsive: stack on small screens */
@media (max-width: 700px) {
    .tactic-preview-body {
        flex-direction: column !important;
    }
    .tactic-info-panel {
        flex: none;
    }
    .pitch-container {
        min-height: 320px;
    }
}

/* ─── Analyze match button ─────────────────────────────────────── */
.actions-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-analyze-match {
    background: transparent;
    border: 1px solid rgba(99, 179, 237, 0.3);
    border-radius: 5px;
    color: rgba(99, 179, 237, 0.7);
    cursor: pointer;
    padding: 4px 7px;
    font-size: 0.68rem;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-analyze-match:hover {
    background: rgba(99, 179, 237, 0.12);
    color: #93c5fd;
    border-color: rgba(99, 179, 237, 0.55);
}
.btn-analyze-match.analyzed {
    border-color: rgba(74, 222, 128, 0.3);
    color: rgba(74, 222, 128, 0.7);
}
.btn-analyze-match.analyzed:hover {
    background: rgba(74, 222, 128, 0.1);
    color: #86efac;
    border-color: rgba(74, 222, 128, 0.55);
}
.btn-analyze-match:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── Match Analysis Modal ─────────────────────────────────────── */
.match-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.match-modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.match-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.match-modal-header > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.match-modal-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.match-modal-verdict {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.match-modal-verdict.win  { background: rgba(74,222,128,0.15); color: #86efac; }
.match-modal-verdict.loss { background: rgba(239,68,68,0.15);  color: #fca5a5; }
.match-modal-verdict.draw { background: rgba(250,204,21,0.15); color: #fde047; }
#match-modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}
#match-modal-close:hover { color: var(--text-primary); }
#match-modal-body {
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.match-analysis-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.match-analysis-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
}
.match-analysis-section-title.success-label { color: #86efac; }
.match-analysis-section-title.danger-label  { color: #fca5a5; }
.match-analysis-section-title.neutral-label { color: var(--text-muted); }
.match-analysis-section-title.accent-label  { color: #c4b5fd; }
.match-analysis-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 10px 13px;
}
.match-analysis-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.match-analysis-item-header strong {
    font-size: 0.82rem;
    color: var(--text-primary);
}
.match-analysis-stat {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.match-analysis-item p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.match-analysis-motive {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
.match-analysis-diff {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.match-analysis-diff li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.match-analysis-conselho {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(196, 181, 253, 0.07);
    border: 1px solid rgba(196, 181, 253, 0.2);
    border-radius: 10px;
    padding: 12px 14px;
    color: #c4b5fd;
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.5;
}

/* ─── Btn ver stats ────────────────────────────────────────────── */
.btn-view-stats {
    background: transparent;
    border: 1px solid rgba(99, 179, 237, 0.3);
    border-radius: 5px;
    color: rgba(99, 179, 237, 0.7);
    cursor: pointer;
    padding: 4px 7px;
    font-size: 0.68rem;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-view-stats:hover {
    background: rgba(99, 179, 237, 0.12);
    color: #93c5fd;
    border-color: rgba(99, 179, 237, 0.55);
}
.btn-view-stats.has-analysis {
    border-color: rgba(74, 222, 128, 0.3);
    color: rgba(74, 222, 128, 0.7);
}
.btn-view-stats.has-analysis:hover {
    background: rgba(74, 222, 128, 0.1);
    color: #86efac;
    border-color: rgba(74, 222, 128, 0.55);
}

/* ─── Stats Modal ──────────────────────────────────────────────── */
.stats-modal-box {
    max-width: 1080px !important;
    width: 96vw !important;
}
.stats-modal-subtitle {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0;
}
.stats-modal-subtitle.win  { color: #86efac; }
.stats-modal-subtitle.loss { color: #fca5a5; }
.stats-modal-subtitle.draw { color: #fde047; }

.stats-modal-content {
    display: flex;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}
.stats-modal-content.stats-only .stats-panel {
    flex: 1;
    min-width: 0;
}
.stats-modal-content.has-analysis .stats-panel {
    flex: 0 0 50%;
    min-width: 0;
    overflow-x: hidden;
    border-right: 1px solid var(--border-subtle);
}
.stats-modal-content.has-analysis .analysis-panel {
    flex: 1;
    min-width: 0;
}
.stats-modal-content.has-analysis .stats-side-panel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.stats-panel,
.analysis-panel,
.stats-side-panel {
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stats-side-panel {
    padding: 18px 20px 0;
}

.stats-side-panel .analysis-panel {
    padding: 0 0 18px;
    overflow: visible;
}

.ht-score-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 8px 14px;
}
.ht-score-badge strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 1px;
}
.evo-score-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 8px;
    padding: 6px 2px 10px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.evo-score-val {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 1px;
}
.ht-analysis-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: 12px;
    margin-top: 4px;
}

/* ── Stats modal tab bar ── */
.stats-tab-bar {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    margin: -18px -20px 0;
    padding: 0 12px;
}
.stats-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 9px 12px;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.stats-tab:hover { color: var(--text-primary); }
.stats-tab.active { color: #c4b5fd; border-bottom-color: #c4b5fd; }

.stats-tab-content { display: none; }
.stats-tab-content.active { display: contents; }

.stats-side-tab-content {
    display: none;
    min-height: 0;
    overflow-y: auto;
}
.stats-side-tab-content.active {
    display: flex;
    flex: 1;
    flex-direction: column;
}

/* Push vsHeader below the tab bar when tabs are shown */
.stats-panel.has-tabs .stat-vs-header { top: 36px; z-index: 2; }

/* ── Evolution panel ── */
.evo-col-header {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 8px 2px 10px;
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 36px;
    background: var(--bg-card);
    z-index: 2;
}
.evo-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 3px 0;
}
.evo-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 6px;
}
.evo-vals {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.76rem;
    flex-wrap: nowrap;
}
.evo-from { color: var(--text-muted); }
.evo-arr  { color: var(--text-muted); font-size: 0.6rem; }
.evo-to   { font-weight: 600; color: var(--text-primary); }
.evo-delta {
    font-size: 0.67rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 2px;
    white-space: nowrap;
}
.evo-delta.good    { color: #86efac; background: rgba(134,239,172,0.12); }
.evo-delta.bad     { color: #fca5a5; background: rgba(252,165,165,0.12); }
.evo-delta.neutral { color: var(--text-muted); }

.stats-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stats-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}

.stat-vs-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 2px 10px;
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
}

.stat-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 10px;
    text-align: center;
}

.stat-vs-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.stat-vs-mine,
.stat-vs-adv {
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
    color: var(--text-primary);
}
.stat-vs-mine.winner,
.stat-vs-adv.winner { color: #86efac; }
.stat-vs-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    background: rgba(255,255,255,0.06);
}
.stat-vs-bar.zero {
    background: rgba(255,255,255,0.06);
}
.stat-vs-bar.zero .stat-vs-bar-mine,
.stat-vs-bar.zero .stat-vs-bar-adv {
    display: none;
}
.stat-vs-bar-mine {
    background: rgba(56, 189, 248, 0.75);
    border-radius: 3px 0 0 3px;
    transition: width 0.3s;
}
.stat-vs-bar-adv {
    background: rgba(248, 113, 113, 0.6);
    border-radius: 0 3px 3px 0;
    transition: width 0.3s;
}

.stat-solo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stat-solo-label {
    font-size: 0.73rem;
    color: var(--text-secondary);
}
.stat-solo-val {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Analysis inside stats modal */
.analysis-verdict-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 6px;
    align-self: flex-start;
}
.analysis-verdict-badge.win  { background: rgba(74,222,128,0.15); color: #86efac; }
.analysis-verdict-badge.loss { background: rgba(239,68,68,0.15);  color: #fca5a5; }
.analysis-verdict-badge.draw { background: rgba(250,204,21,0.15); color: #fde047; }

.no-analysis-panel {
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text-muted);
}
.no-analysis-icon { opacity: 0.35; }
.no-analysis-text {
    font-size: 0.82rem;
    text-align: center;
    max-width: 220px;
}
.btn-start-analysis {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(196,181,253,0.12);
    border: 1px solid rgba(196,181,253,0.3);
    border-radius: 8px;
    color: #c4b5fd;
    padding: 9px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-start-analysis:hover {
    background: rgba(196,181,253,0.2);
    border-color: rgba(196,181,253,0.5);
}
.btn-start-analysis:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-start-analysis.analyzing {
    opacity: 1;
    background: linear-gradient(90deg,
        rgba(99,102,241,0.14) 0%,
        rgba(59,130,246,0.10) 25%,
        rgba(168,85,247,0.16) 50%,
        rgba(59,130,246,0.10) 75%,
        rgba(99,102,241,0.14) 100%);
    background-size: 300% 100%;
    border-color: rgba(196,181,253,0.4);
    cursor: not-allowed;
    animation: ai-shimmer 2.4s linear infinite, ai-glow 3s ease-in-out infinite;
}
@keyframes ai-shimmer {
    from { background-position: 0% 0; }
    to   { background-position: 300% 0; }
}
@keyframes ai-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(196,181,253,0.12); }
    50%       { box-shadow: 0 0 18px rgba(196,181,253,0.3), 0 0 36px rgba(96,165,250,0.1); }
}
.ai-spin-ring {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1.5px solid rgba(196,181,253,0.2);
    border-top-color: #c4b5fd;
    border-left-color: #60a5fa;
    animation: ai-spin 0.85s linear infinite;
    flex-shrink: 0;
}
@keyframes ai-spin {
    to { transform: rotate(360deg); }
}
#ai-stage-label,
#extract-stage-label,
#auth-extract-stage-label {
    transition: opacity 0.25s ease;
}

@media (max-width: 640px) {
    .stats-modal-content.has-analysis {
        flex-direction: column;
    }
    .stats-modal-content.has-analysis .stats-panel,
    .stats-modal-content.has-analysis .analysis-panel,
    .stats-modal-content.has-analysis .stats-side-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }
}

/* Ensure stats modal has sufficient height */
.stats-modal-box {
    height: 85vh;
}

/* Solo sub-group within a vs section */
.stat-vs-solo-group {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    padding: 8px 10px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.stat-vs-solo-group .stat-solo-row {
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stat-vs-solo-group .stat-solo-row:last-child {
    border-bottom: none;
}

/* ─── Match tags (opponent tags + special events) ───────────────── */
.match-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}
.match-tag {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.match-tag-label {
    color: var(--text-muted);
    font-weight: 700;
    margin-right: 4px;
    text-transform: uppercase;
}
.match-tag-opponent {
    background: rgba(140, 82, 255, 0.12);
    color: rgba(196, 181, 253, 0.85);
    border: 1px solid rgba(140, 82, 255, 0.2);
}
.match-tag-event {
    background: rgba(250, 204, 21, 0.1);
    color: rgba(253, 224, 71, 0.85);
    border: 1px solid rgba(250, 204, 21, 0.2);
}
.match-tag-corrected {
    background: rgba(99, 179, 237, 0.1);
    color: rgba(147, 197, 253, 0.9);
    border: 1px solid rgba(99, 179, 237, 0.22);
}

.match-tag-formation-mine {
    background: rgba(2, 239, 139, 0.08);
    color: rgba(2, 239, 139, 0.75);
    border: 1px solid rgba(2, 239, 139, 0.18);
}
.match-tag-formation-adv {
    background: rgba(99, 179, 237, 0.08);
    color: rgba(147, 197, 253, 0.75);
    border: 1px solid rgba(99, 179, 237, 0.18);
}

/* ─── Formation stats ──────────────────────────────────────────── */
.formation-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding: 4px 20px 20px;
    min-width: 0;
}
.formation-table-wrap {
    min-width: 0;
    overflow-x: auto;
}
.formation-table-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.formation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    table-layout: fixed;
}
/* col widths: formation takes remaining space; fixed cols keep totals tight */
.formation-table .col-form { width: auto; }
.formation-table .col-j    { width: 24px; }
.formation-table .col-ved  { width: 26px; }
.formation-table .col-pct  { width: 36px; }
.formation-table .col-bar  { width: 70px; }

.formation-table th {
    text-align: left;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 5px 6px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    overflow: hidden;
}
.formation-table td {
    padding: 6px 6px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
    overflow: hidden;
}
.formation-table tbody tr:hover td {
    background: rgba(255,255,255,0.03);
}
.form-badge {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form-win-bar {
    display: flex;
    width: 100%;
    height: 7px;
    border-radius: 4px;
    overflow: hidden;
    gap: 1px;
}
.form-bar-w { background: rgba(74, 222, 128, 0.65); }
.form-bar-e { background: rgba(250, 204, 21, 0.55); }
.form-bar-d { background: rgba(239, 68, 68, 0.55); }

/* ─── AI Usage Section ──────────────────────────────────────────────────────── */
#ai-usage-section {
    padding: 20px;
}
.usage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}
.usage-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.usage-header h3 i { width: 16px; height: 16px; color: var(--color-accent); }
.usage-scope-panel {
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.025);
}
.usage-scope-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}
.btn-reset-usage {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    padding: 4px 10px;
    background: rgba(239, 68, 68, 0.08);
    color: rgba(252, 165, 165, 0.8);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-reset-usage:hover { background: rgba(239, 68, 68, 0.18); }
.btn-reset-usage i { width: 12px; height: 12px; }
.usage-stat-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(99, 179, 237, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.usage-stat-icon i { width: 15px; height: 15px; color: var(--color-accent); }

/* Hero: total cost */
.usage-total-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(196, 181, 253, 0.07);
    border: 1px solid rgba(196, 181, 253, 0.22);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px;
}
.usage-total-icon i { width: 18px; height: 18px; color: #c4b5fd; }
.usage-total-icon { background: rgba(196, 181, 253, 0.12); }
.usage-total-body { display: flex; flex-direction: column; gap: 2px; }
.usage-total-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #c4b5fd;
    line-height: 1;
}
.usage-total-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 4px;
}
.usage-total-sub {
    font-size: 0.67rem;
    color: var(--text-muted);
}

/* Analysis cards: 2 columns */
.usage-analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.usage-analysis-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.usage-analysis-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.usage-analysis-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.usage-analysis-desc {
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}
.usage-analysis-count {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
.usage-analysis-costs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 8px;
}
.usage-analysis-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.72rem;
}
.usage-analysis-cost-row span { color: var(--text-muted); }
.usage-analysis-cost-row strong { color: var(--text-primary); font-weight: 600; }
.usage-analysis-tokens {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Token stats footer row */
.usage-tokens-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 0;
}
.usage-tokens-row i { width: 12px; height: 12px; color: var(--text-muted); flex-shrink: 0; }
.usage-tokens-sep { opacity: 0.4; }

.usage-disclaimer {
    font-size: 0.67rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ==========================================================================
   Auth Gate (login por e-mail + código de uso único)
   ========================================================================== */
.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    background: var(--bg-main);
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.auth-layout {
    width: 100%;
    max-width: 960px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    justify-content: center;
    margin: auto;
}

.auth-video-box {
    width: 100%;
    max-width: 460px;
    justify-self: center;
    background: var(--bg-card-highlight);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow-premium);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-video-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 0;
    text-align: center;
}

.auth-brand-kicker {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.auth-video-header .logo-text {
    margin: 0;
    font-size: 1.25rem;
}

.auth-video-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--color-green-neon);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.auth-video-copy p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.auth-video-copy .auth-video-copy-accent {
    color: var(--color-green-neon);
    font-weight: 700;
}

.auth-video-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(100dvh - 160px);
    background: #05070a;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
}

.auth-brand-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    justify-self: center;
    background: var(--bg-card-highlight);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: var(--shadow-premium);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

@media (min-width: 900px) {
    .auth-layout {
        grid-template-columns: repeat(2, minmax(360px, 460px));
        gap: 28px;
    }

    .auth-video-box { align-self: start; }
}

.auth-card .auth-brand-block {
    margin-bottom: 4px;
}

.auth-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.auth-step h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-primary);
    text-align: center;
    margin: 0;
}

.auth-step p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
    margin: 0 0 4px;
    line-height: 1.5;
}

.auth-step input,
.auth-step select {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: var(--font-primary);
    outline: none;
    transition: var(--transition-smooth);
}

.auth-step select {
    appearance: none;
    cursor: pointer;
}

.auth-step select option {
    background: #ffffff;
    color: #111827;
}

.auth-step input:focus,
.auth-step select:focus {
    border-color: var(--color-green-neon);
    box-shadow: 0 0 0 3px rgba(2, 239, 139, 0.12);
}

.auth-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.auth-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border: none;
    accent-color: var(--color-green-neon);
    cursor: pointer;
    flex-shrink: 0;
}

.auth-primary-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-green-neon);
    color: #06110c;
    border: none;
    border-radius: 10px;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.auth-primary-btn:hover:not(:disabled) {
    background: var(--color-green-neon-hover);
    box-shadow: var(--shadow-neon-green);
}

.auth-primary-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-primary-btn.analyzing {
    opacity: 1;
    color: var(--text-primary);
    background: linear-gradient(90deg,
        rgba(99,102,241,0.88) 0%,
        rgba(59,130,246,0.82) 25%,
        rgba(168,85,247,0.9) 50%,
        rgba(59,130,246,0.82) 75%,
        rgba(99,102,241,0.88) 100%);
    background-size: 300% 100%;
    cursor: not-allowed;
    animation: ai-shimmer 2.4s linear infinite, ai-glow 3s ease-in-out infinite;
}

.auth-primary-btn i {
    width: 16px;
    height: 16px;
}

.auth-secondary-btn {
    width: 100%;
    background: rgba(2, 239, 139, 0.1);
    color: var(--color-green-neon);
    border: 1px solid rgba(2, 239, 139, 0.35);
    border-radius: 10px;
    padding: 11px 16px;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.auth-secondary-btn:hover {
    background: rgba(2, 239, 139, 0.16);
    border-color: var(--color-green-neon);
}

.auth-link-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px;
}

.auth-link-btn:hover {
    color: var(--text-primary);
}

.auth-error {
    font-size: 0.78rem;
    color: var(--color-red-danger);
    text-align: center;
    margin: 0;
    min-height: 1em;
}

.auth-invite-notice {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(2, 239, 139, 0.22);
    border-radius: 10px;
    background: rgba(2, 239, 139, 0.06);
}

.auth-invite-notice strong {
    color: var(--color-green-neon);
    font-size: 0.84rem;
    text-align: center;
}

.auth-invite-notice p {
    margin: 0;
    font-size: 0.76rem;
}

.auth-invite-question {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-invite-question p {
    font-weight: 700;
    color: var(--text-primary);
}

.auth-choice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.auth-choice-btn {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    padding: 11px 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.auth-choice-btn:hover,
.auth-choice-btn.active {
    border-color: var(--color-green-neon);
    color: var(--color-green-neon);
    background: rgba(2, 239, 139, 0.1);
}

.auth-conditional-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-invite-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    padding-top: 4px;
}

.auth-form-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.auth-form-divider::before,
.auth-form-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--border-subtle);
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field span {
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
}

.auth-form-message {
    min-height: 1em;
    margin: 0;
    color: var(--color-green-neon);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}

/* Onboarding do perfil: abas "Extrair das fotos (IA)" / "Preencher manualmente" */
.auth-mode-tabs {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 4px;
}

.auth-mode-tab {
    flex: 1;
    background: none;
    border: none;
    border-radius: 7px;
    padding: 8px 6px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.auth-mode-tab.active {
    background: rgba(2, 239, 139, 0.12);
    color: var(--color-green-neon);
}

.auth-profile-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-example-link {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-green-neon);
    font: inherit;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-example-link:hover {
    color: var(--color-green-neon-hover);
}

.auth-example-modal {
    position: fixed;
    inset: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
}

.auth-example-dialog {
    position: relative;
    width: min(860px, 100%);
    max-height: calc(100dvh - 36px);
    overflow: auto;
    background: var(--bg-card-highlight);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow-premium);
}

.auth-example-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    cursor: pointer;
}

.auth-example-close:hover {
    border-color: var(--color-green-neon);
    color: var(--color-green-neon);
}

.auth-example-close svg {
    width: 17px;
    height: 17px;
}

.auth-example-dialog h3 {
    margin: 0 44px 8px 0;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text-primary);
}

.auth-example-dialog p {
    margin: 0 44px 16px 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}

.auth-example-dialog img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 190px);
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: #05070a;
}

/* Seletor de foto (estádio / placar de líderes) estilizado como campo */
.auth-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.auth-file-row:hover {
    border-color: var(--color-green-neon);
}

.auth-file-row.has-file {
    border-style: solid;
    border-color: var(--border-highlight);
    color: var(--color-green-neon);
}

.auth-file-row input[type="file"] {
    display: none;
}

/* Texto de ajuda da seção "Dados do Clube" nas Configurações */
.settings-club-help {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 10px;
}

/* --- SOCIAL: AMIGOS, MURAL, COMENTÁRIOS, NOTIFICAÇÕES, TOASTS --- */

/* Badge numérico no item de menu (solicitações pendentes) */
.menu-badge {
    margin-left: auto;
    background-color: var(--color-green-neon);
    color: #0b0c15;
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Layout social */
.friends-home {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.friends-panel-grid {
    display: grid;
    gap: 20px;
}

.friends-panel-grid-top {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    align-items: start;
}

.friends-main-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
}

.friends-panel-body {
    padding: 18px 20px 20px;
}

.friends-results-list,
#friends-requests-list,
.wall-posts-list,
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Busca de jogadores */
.friends-search-bar {
    display: flex;
    gap: 10px;
}

.friends-search-input {
    flex: 1;
    min-width: 0;
    background-color: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 11px 14px;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 0.85rem;
    outline: none;
    transition: var(--transition-smooth);
}

.friends-search-input:focus {
    border-color: var(--border-highlight);
    box-shadow: 0 0 0 3px rgba(2, 239, 139, 0.1);
}

.friends-hint,
.friends-inline-state {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.friends-hint {
    padding: 8px 2px;
}

.friends-inline-state {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.friends-inline-state i {
    width: 15px;
    height: 15px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.friends-inline-state.danger {
    color: var(--color-red-danger);
    border-color: rgba(255, 74, 90, 0.25);
    background: rgba(255, 74, 90, 0.06);
}

.friends-inline-state.danger i {
    color: var(--color-red-danger);
}

.friends-subheading {
    color: var(--text-secondary);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 2px 0 0;
}

/* Linhas de resultado de busca e solicitações */
.friend-search-row,
.request-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.025);
    transition: var(--transition-smooth);
}

.friend-search-row:first-child {
    margin-top: 12px;
}

.friend-search-row:hover,
.request-row:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.04);
}

.friend-identity,
.friend-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.friend-meta {
    min-width: 0;
}

.friend-meta strong,
.friend-identity strong {
    display: block;
    font-size: 0.88rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-meta small,
.friend-identity small {
    display: block;
    margin-top: 3px;
    font-size: 0.72rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(2, 239, 139, 0.16), rgba(0, 210, 255, 0.12));
    border: 1px solid rgba(2, 239, 139, 0.22);
    color: var(--color-green-neon);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-display);
    box-shadow: inset 0 0 16px rgba(2, 239, 139, 0.05);
}

.friend-avatar.big {
    width: 48px;
    height: 48px;
    font-size: 1.05rem;
}

.friend-row-action {
    flex-shrink: 0;
}

/* Botões de ação social */
.btn-friend-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: transparent;
    border: 1px solid var(--border-highlight);
    color: var(--color-green-neon);
    min-height: 32px;
    padding: 7px 13px;
    border-radius: 7px;
    font-size: 0.76rem;
    font-weight: 700;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.btn-friend-action:hover:not(:disabled) {
    background-color: rgba(2, 239, 139, 0.12);
    box-shadow: 0 0 14px rgba(2, 239, 139, 0.08);
}

.btn-friend-action:disabled {
    opacity: 0.5;
    cursor: default;
}

.btn-friend-action.accept {
    background-color: var(--color-green-neon);
    color: #07110d;
    border-color: transparent;
}

.btn-friend-action.accept:hover:not(:disabled) {
    background-color: var(--color-green-neon-hover);
    box-shadow: var(--shadow-neon-green);
}

.btn-friend-action.reject {
    border-color: rgba(255, 74, 90, 0.35);
    color: var(--color-red-danger);
}

.btn-friend-action.reject:hover:not(:disabled) {
    background-color: rgba(255, 74, 90, 0.12);
    box-shadow: none;
}

.btn-friend-action.back {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.request-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.friend-status-badge {
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Grid de amigos */
.friends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

.friend-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 78px;
    padding: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.friend-card:hover {
    border-color: var(--border-highlight);
    background: rgba(2, 239, 139, 0.045);
    transform: translateY(-2px);
}

.friend-card-cta {
    font-size: 0.7rem;
    color: var(--color-green-neon);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.friends-empty-state {
    grid-column: 1 / -1;
    min-height: 160px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 24px;
}

.friends-empty-state i {
    width: 28px;
    height: 28px;
    color: var(--color-cyan-cool);
}

.friends-empty-state strong {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.friends-empty-state span {
    font-size: 0.78rem;
}

/* Perfil do amigo */
.friend-profile-toolbar {
    margin-bottom: 16px;
}

.friend-profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-subtle);
}

.friend-profile-title {
    min-width: 0;
}

.friend-profile-header h3 {
    font-family: var(--font-display);
    font-size: 1.12rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-profile-header small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.friend-profile-header .btn-friend-action {
    margin-left: auto;
}

.friend-kpi-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.friend-kpi-chip {
    background-color: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.friend-kpi-chip.primary {
    border-left: 3px solid var(--color-green-neon);
}

.friend-kpi-chip span {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.65px;
    color: var(--text-muted);
}

.friend-kpi-chip strong {
    font-family: var(--font-display);
    font-size: 1.12rem;
    color: var(--color-green-neon);
}

.friend-kpi-chip small {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Mural e comentários */
.wall-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.wall-textarea {
    flex: 1;
    min-width: 0;
    background-color: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 0.83rem;
    resize: vertical;
    min-height: 44px;
    outline: none;
}

.wall-textarea:focus {
    border-color: var(--border-highlight);
    box-shadow: 0 0 0 3px rgba(2, 239, 139, 0.08);
}

.wall-post,
.comment-item {
    background-color: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 12px 14px;
}

.wall-post p,
.comment-item p {
    font-size: 0.84rem;
    color: var(--text-primary);
    margin-top: 4px;
    white-space: pre-wrap;
    word-break: break-word;
}

.wall-post-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wall-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 210, 255, 0.08);
    border: 1px solid rgba(0, 210, 255, 0.18);
    color: var(--color-cyan-cool);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 800;
}

.wall-author-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wall-post-header strong {
    font-size: 0.8rem;
    color: var(--color-green-neon);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wall-author-meta span,
.comment-item .wall-post-header > span {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.btn-icon-delete {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: inline-flex;
    transition: var(--transition-smooth);
}

.btn-icon-delete:hover {
    color: var(--color-red-danger);
    background-color: rgba(255, 74, 90, 0.1);
}

@media (max-width: 1100px) {
    .friends-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .friends-panel-body {
        padding: 14px;
    }

    .friends-search-bar,
    .wall-form {
        flex-direction: column;
        align-items: stretch;
    }

    .friend-search-row,
    .request-row,
    .friend-card,
    .friend-profile-header {
        align-items: flex-start;
    }

    .friend-search-row,
    .request-row,
    .friend-card {
        flex-direction: column;
    }

    .friend-row-action,
    .friend-row-action .btn-friend-action,
    .request-actions,
    .request-actions .btn-friend-action,
    .friend-card-cta,
    .friend-profile-header .btn-friend-action {
        width: 100%;
    }

    .request-actions {
        flex-direction: column;
    }

    .friend-profile-header {
        flex-wrap: wrap;
    }

    .friend-profile-header .btn-friend-action {
        margin-left: 0;
    }

    .friend-kpi-chips {
        grid-template-columns: 1fr;
    }
}

/* Comentários dentro do modal de stats */
.match-comments-section {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 18px;
}

/* Sino de notificações */
.notif-area {
    position: relative;
    flex: 0 0 auto;
}

.notif-bell {
    position: relative;
    background-color: var(--bg-card-highlight);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.notif-bell:hover {
    color: var(--color-green-neon);
    border-color: var(--border-highlight);
}

.notif-bell i {
    width: 17px;
    height: 17px;
}

.notif-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: var(--color-red-danger);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-premium);
    z-index: 300;
}

.notif-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover {
    background-color: var(--bg-card-highlight);
}

.notif-item i {
    color: var(--text-muted);
    margin-top: 2px;
    flex-shrink: 0;
}

.notif-item.unread i {
    color: var(--color-green-neon);
}

.notif-item p {
    font-size: 0.8rem;
    color: var(--text-primary);
}

.notif-item.unread p {
    font-weight: 600;
}

.notif-item small {
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* Toasts */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 500;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--color-cyan-cool);
    border-radius: 10px;
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 0.82rem;
    max-width: 340px;
    box-shadow: var(--shadow-premium);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.visible {
    opacity: 1;
    transform: translateX(0);
}

.toast i {
    flex-shrink: 0;
    color: var(--color-cyan-cool);
}

.toast-success {
    border-left-color: var(--color-green-neon);
}

.toast-success i {
    color: var(--color-green-neon);
}

.toast-error {
    border-left-color: var(--color-red-danger);
}

.toast-error i {
    color: var(--color-red-danger);
}

/* ==========================================================================
   Mobile compatibility layer
   ========================================================================== */
@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        min-height: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .app-container {
        width: 100%;
        min-height: 100dvh;
        height: auto;
        flex-direction: column;
        overflow: visible;
    }

    .sidebar {
        position: sticky;
        top: 0;
        width: 100%;
        max-width: 100%;
        padding: 12px 14px 10px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        z-index: 60;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }

    .sidebar-header {
        margin-bottom: 10px;
        min-height: 32px;
        padding-right: 150px;
    }

    .sidebar .logo-area {
        gap: 9px;
        min-width: 0;
    }

    .sidebar .logo-icon {
        width: 32px;
        height: 32px;
        border-radius: 7px;
    }

    .sidebar .logo-icon img {
        width: 100%;
        height: 100%;
    }

    .logo-text {
        font-size: 1rem;
        letter-spacing: 0.5px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .logo-subtitle,
    .sidebar-footer {
        display: none;
    }

    .sidebar-menu {
        flex-direction: row;
        gap: 8px;
        margin-bottom: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .menu-item {
        flex: 0 0 auto;
        width: auto;
        min-width: max-content;
        min-height: 40px;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 0.78rem;
        scroll-snap-align: start;
    }

    .menu-item i {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .sidebar-actions {
        position: absolute;
        top: 12px;
        right: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        z-index: 90;
    }

    .sidebar-actions .header-actions {
        position: static;
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: auto;
    }

    .logout-btn {
        width: 40px;
        min-width: 40px;
        height: 32px;
        min-height: 32px;
        padding: 0;
        justify-content: center;
        margin: 0;
        background: rgba(255, 74, 90, 0.08);
        border: 1px solid rgba(255, 74, 90, 0.18);
    }

    .logout-btn {
        font-size: 0;
        gap: 0;
    }

    .logout-btn i {
        width: 16px;
        height: 16px;
    }

    .main-content {
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .content-header {
        position: relative;
        min-height: unset;
        padding: 14px;
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .header-actions {
        position: static;
        gap: 8px;
    }

    .header-title-wrapper {
        max-width: 100%;
    }

    .header-title-wrapper h2 {
        font-size: 1.05rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .header-description {
        font-size: 0.72rem;
        -webkit-line-clamp: 3;
    }

    .filters-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-filters-toggle {
        width: 100%;
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 6px 8px;
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.025);
        color: var(--text-primary);
        cursor: pointer;
    }

    .mobile-filter-summary {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-filter-summary::-webkit-scrollbar {
        display: none;
    }

    .mobile-filter-chip {
        flex: 0 0 auto;
        max-width: min(42vw, 180px);
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 7px;
        border-radius: 6px;
        background: rgba(2, 239, 139, 0.07);
        color: var(--text-secondary);
        font-size: 0.68rem;
        line-height: 1;
    }

    .mobile-filter-chip i {
        width: 12px;
        height: 12px;
        flex: 0 0 auto;
        color: var(--color-green-neon);
    }

    .mobile-filter-chip span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-filters-chevron {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        color: var(--color-green-neon);
    }

    .filters-panel {
        width: 100%;
        display: none;
        flex-direction: column;
        gap: 8px;
        max-height: min(42dvh, 260px);
        overflow-y: auto;
        padding-right: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .filters-container.filters-open .filters-panel {
        display: flex;
    }

    .filter-group {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 10px;
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.025);
        font-size: 0.76rem;
    }

    .filter-group label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        color: var(--text-muted);
    }

    .filter-select,
    .static-display-value {
        max-width: 58%;
        min-width: 0;
        font-size: 0.74rem;
    }

    .filter-select {
        padding: 6px 8px;
    }

    .static-display-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
    }

    .notif-bell {
        width: 40px;
        height: 32px;
        border-radius: 8px;
    }

    .notif-dropdown {
        position: fixed;
        top: 58px;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: min(70dvh, 440px);
    }

    .content-viewport {
        width: 100%;
        min-height: 0;
        padding: 16px 14px 28px;
        overflow: visible;
    }

    .kpi-grid,
    .dashboard-row.grid-2,
    .dashboard-row.grid-3,
    .coach-layout,
    .formation-stats-grid,
    .usage-analysis-grid {
        grid-template-columns: 1fr;
    }

    .kpi-grid {
        gap: 12px;
        margin-bottom: 16px;
    }

    .kpi-card,
    .coach-hero-banner,
    .usage-total-card {
        padding: 14px;
        border-radius: 12px;
    }

    .coach-hero-banner {
        align-items: flex-start;
    }

    .coach-avatar {
        width: 44px;
        height: 44px;
    }

    .coach-avatar i {
        width: 22px;
        height: 22px;
    }

    .coach-intro h2 {
        font-size: 1rem;
    }

    .dashboard-row {
        margin-bottom: 16px;
    }

    .dashboard-row.grid-2,
    .dashboard-row.grid-3 {
        gap: 16px;
    }

    .dashboard-panel {
        border-radius: 12px;
        min-width: 0;
    }

    .panel-header {
        padding: 13px 14px;
        gap: 10px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .panel-header h3 {
        min-width: 0;
        font-size: 0.86rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .panel-content,
    .chart-container,
    .chart-container-compact,
    #ai-usage-section {
        padding: 14px;
    }

    .chart-container,
    .chart-container-compact {
        height: 240px;
    }

    .table-responsive,
    .formation-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .premium-table {
        min-width: 720px;
    }

    .formation-table {
        min-width: 360px;
    }

    .actions-cell {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .auth-gate {
        align-items: flex-start;
        overflow-y: auto;
    }

    .admin-waitlist-summary,
    .admin-waitlist-breakdown {
        grid-template-columns: 1fr;
    }

    .auth-layout {
        margin: 24px auto;
    }

    .auth-video-box {
        padding: 14px;
        border-radius: 12px;
    }

    .auth-video-header h2 {
        font-size: 0.92rem;
    }

    .auth-card {
        margin: 0 auto;
        padding: 24px 18px;
        border-radius: 12px;
    }

    .modal-overlay {
        align-items: flex-start;
        justify-content: center;
        padding: 12px;
        overflow-y: auto;
        height: 100dvh;
    }

    .modal-content {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 24px);
        border-radius: 14px;
    }

    .modal-header {
        padding: 14px 16px;
        gap: 10px;
    }

    .modal-header h3 {
        min-width: 0;
        font-size: 0.9rem;
        overflow-wrap: anywhere;
    }

    .modal-body {
        padding: 16px;
        overflow-y: auto;
    }

    .tactic-preview-modal {
        width: 100%;
        max-width: none;
    }

    .tactic-preview-body {
        padding: 14px;
        max-height: none;
        overflow-y: auto;
    }

    .pitch-container {
        width: 100%;
        min-height: 300px;
        max-height: 70dvh;
    }

    .player-card {
        min-width: 58px;
        padding: 3px 5px;
    }

    .player-card-role {
        font-size: 0.58rem;
    }

    .player-card-focus,
    .player-card-pos {
        font-size: 0.52rem;
    }

    .match-modal-overlay {
        align-items: flex-start;
        padding: 10px;
        overflow-y: auto;
    }

    .match-modal-box,
    .stats-modal-box {
        width: 100% !important;
        max-width: none !important;
        height: auto;
        max-height: calc(100dvh - 20px);
        border-radius: 12px;
    }

    .match-modal-header {
        align-items: flex-start;
        padding: 14px;
        flex-wrap: wrap;
    }

    .match-modal-header h3 {
        overflow-wrap: anywhere;
    }

    .match-modal-verdict {
        white-space: normal;
    }

    #match-modal-body,
    .stats-panel,
    .analysis-panel,
    .stats-side-panel {
        padding: 14px;
    }

    .stats-modal-content,
    .stats-modal-content.has-analysis {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .stats-modal-content.has-analysis .stats-panel,
    .stats-modal-content.has-analysis .analysis-panel,
    .stats-modal-content.has-analysis .stats-side-panel {
        flex: none;
        width: 100%;
        min-height: 0;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    .stats-side-panel .analysis-panel {
        padding: 0 0 14px;
    }

    .stats-tab-bar {
        overflow-x: auto;
        padding: 0 8px;
        -webkit-overflow-scrolling: touch;
    }

    .stats-tab {
        padding: 9px 10px;
    }

    .evo-col-header,
    .evo-row,
    .evo-score-row {
        grid-template-columns: minmax(92px, 1fr) minmax(72px, auto) minmax(72px, auto);
        overflow-x: auto;
    }

    .stat-vs-row {
        gap: 6px;
    }

    .stat-vs-mine,
    .stat-vs-adv {
        min-width: 32px;
        font-size: 0.72rem;
    }

    .stat-label,
    .stat-solo-label,
    .stat-solo-val {
        overflow-wrap: anywhere;
    }

    .usage-header,
    .usage-total-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .usage-total-value {
        font-size: 1.25rem;
    }

    .btn-reset-usage {
        width: 100%;
        justify-content: center;
    }

    .toast-container {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .toast {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 420px) {
    .content-viewport {
        padding-left: 10px;
        padding-right: 10px;
    }

    .content-header,
    .sidebar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .filter-group {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-select,
    .static-display-value {
        width: 100%;
        max-width: none;
        text-align: left;
    }

    .friend-identity,
    .friend-card-main,
    .wall-post-header,
    .kpi-card,
    .coach-hero-banner {
        align-items: flex-start;
    }

    .kpi-card {
        gap: 12px;
    }

    .kpi-icon {
        width: 40px;
        height: 40px;
    }

    .kpi-value {
        font-size: 1.22rem;
    }

    .premium-table {
        min-width: 640px;
    }

    .friends-grid {
        grid-template-columns: 1fr;
    }
}

/* --- CONFIGURAÇÕES E REGISTRO DE PARTIDAS (WEB) --- */

.header-register-btn {
    margin-left: 0;
    flex: 0 0 auto;
}

.settings-modal-box,
.register-modal-box {
    max-width: 720px;
    width: min(720px, calc(100vw - 24px));
}

.settings-modal-body,
.register-modal-body {
    overflow-y: auto;
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-section-title {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 4px 0 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.settings-field > span {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.settings-field input,
.settings-field select {
    background: #121424;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    outline: none;
    transition: var(--transition-smooth);
    width: 100%;
}

.settings-field select option {
    background-color: #121424;
    color: var(--text-primary);
}

.settings-field input:focus,
.settings-field select:focus {
    border-color: var(--color-green-neon);
}

.settings-check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.settings-check-row input {
    margin-top: 3px;
    accent-color: var(--color-green-neon);
    width: auto;
    flex-shrink: 0;
}

.settings-check-row span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-check-row small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.settings-radio-group {
    display: flex;
    flex-direction: column;
}

.settings-actions {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.settings-actions .premium-action-btn {
    justify-content: center;
    margin-left: 0;
}

/* Dropzone de capturas (também usada como <button>, por isso o reset) */
.register-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 22px 16px;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    color: var(--text-secondary);
    transition: var(--transition-smooth);
}

.register-dropzone:hover,
.register-dropzone.dragging {
    border-color: var(--color-green-neon);
    background: rgba(2, 239, 139, 0.05);
}

.register-dropzone i {
    width: 30px;
    height: 30px;
    color: var(--color-green-neon);
}

.register-dropzone small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.register-camera-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px auto 0;
}

.register-camera-btn i {
    width: 16px;
    height: 16px;
}

/* Câmera embutida (getUserMedia) -- vídeo ao vivo + obturador */
.match-modal-overlay.camera-capture-overlay {
    padding: 16px;
}

.match-modal-box.camera-capture-modal {
    width: min(960px, calc(100vw - 32px));
    max-width: min(960px, calc(100vw - 32px));
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
}

.camera-capture-view {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    min-height: 0;
    background: var(--bg-main);
    border-radius: 14px;
    overflow: hidden;
}

.camera-capture-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.camera-capture-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #000;
}

#camera-capture-video {
    width: 100%;
    height: 100%;
    max-height: none;
    background: #000;
    object-fit: cover;
    display: block;
}

/* Guia de enquadramento -- vermelho em retrato, verde quando o celular está
   em paisagem; a captura sempre usa só a área do retângulo. */
.camera-capture-frame-guide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    pointer-events: none;
}

.camera-capture-frame-rect {
    width: min(88%, 540px);
    max-width: calc(100% - 24px);
    aspect-ratio: 16 / 9;
    border: 3px solid var(--color-red-danger);
    border-radius: 8px;
    box-sizing: border-box;
    transition: var(--transition-smooth);
}

.camera-capture-frame-rect.is-landscape {
    border-color: var(--color-green-neon);
    box-shadow: 0 0 14px rgba(2, 239, 139, 0.35);
}

.camera-capture-frame-hint {
    background: rgba(0, 0, 0, 0.6);
    color: var(--text-primary);
    font-size: 0.78rem;
    padding: 6px 12px;
    border-radius: 999px;
    text-align: center;
}

.camera-capture-toast {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    --camera-toast-rotation: 0deg;
    transform: translate(-50%, -50%) rotate(var(--camera-toast-rotation)) scale(0.96);
    max-width: min(86%, 420px);
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    pointer-events: none;
}

.camera-capture-toast.is-sensor-landscape-portrait {
    --camera-toast-rotation: 90deg;
    max-width: min(72vh, 420px);
}

.camera-capture-toast.show {
    animation: camera-capture-toast-fade 2s ease forwards;
}

@keyframes camera-capture-toast-fade {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--camera-toast-rotation)) scale(0.96);
    }
    12% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--camera-toast-rotation)) scale(1);
    }
    72% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--camera-toast-rotation)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--camera-toast-rotation)) scale(0.98);
    }
}

.camera-capture-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
}

.camera-shutter-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 4px solid var(--color-green-neon);
    background: #fff;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.camera-shutter-btn:hover {
    transform: scale(1.05);
}

.camera-shutter-btn:disabled {
    border-color: var(--color-red-danger);
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.camera-shutter-btn:disabled:hover {
    transform: none;
}

@media (orientation: landscape) and (max-height: 560px) {
    .match-modal-overlay.camera-capture-overlay {
        padding: 6px;
    }

    .match-modal-box.camera-capture-modal {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        height: calc(100vh - 12px);
        height: calc(100dvh - 12px);
        max-height: calc(100vh - 12px);
        max-height: calc(100dvh - 12px);
    }

    .camera-capture-header {
        padding: 6px 12px;
    }

    /* Controles na faixa preta lateral direita (sobra do object-fit contain):
       não roubam altura do vídeo e o retângulo pode usar quase toda a tela. */
    .camera-capture-actions {
        position: absolute;
        left: auto;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        justify-content: center;
        gap: 10px;
        padding: 8px 10px;
        background: linear-gradient(to left, rgba(5, 5, 14, 0.85), rgba(5, 5, 14, 0));
    }

    /* Em telas baixas o palco fica muito mais largo que 16:9; "cover"
       ampliava e cortava o feed (efeito de zoom). "contain" mostra o quadro
       inteiro e o recorte da captura segue o object-fit computado. */
    #camera-capture-video {
        object-fit: contain;
    }

    .camera-shutter-btn {
        width: 54px;
        height: 54px;
        border-width: 3px;
    }

    /* Hint sobreposto ao topo do vídeo para liberar altura vertical para o
       retângulo (o JS detecta position:absolute e não reserva espaço). */
    .camera-capture-frame-hint {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100% - 24px);
        font-size: 0.72rem;
        padding: 5px 10px;
    }
}

.register-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
}

.register-preview {
    position: relative;
    width: 96px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.register-preview-open {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
}

.register-preview-open img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.register-preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-red-danger);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

/* Capsulas de seleção (modo de jogo, período, tags) */
.register-capsules {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.register-capsule {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    padding: 7px 14px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.register-capsule.small {
    font-size: 0.7rem;
    padding: 5px 10px;
}

.register-capsule:hover {
    border-color: var(--color-green-neon);
}

.register-capsule.active {
    background: rgba(2, 239, 139, 0.14);
    border-color: var(--color-green-neon);
    color: var(--color-green-neon);
    font-weight: 600;
}

/* Banner de detecção de lado */
.register-side-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(2, 239, 139, 0.35);
    background: rgba(2, 239, 139, 0.06);
}

.register-side-banner.ambiguous {
    border-color: rgba(255, 159, 67, 0.5);
    background: rgba(255, 159, 67, 0.08);
}

.register-side-banner strong {
    display: block;
    font-size: 0.82rem;
    color: var(--text-primary);
}

.register-side-banner small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

/* Placar geral */
.register-score-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.register-score-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.register-score-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Tabela de estatísticas Esquerda vs Direita */
.register-stats-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: -2px;
}

.register-stat-row {
    display: grid;
    grid-template-columns: 86px 1fr 86px;
    align-items: center;
    gap: 10px;
}

.register-stat-row input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 7px 8px;
    color: var(--text-primary);
    font-size: 0.82rem;
    text-align: center;
    outline: none;
    width: 100%;
}

.register-stat-row input:focus {
    border-color: var(--color-green-neon);
}

.register-stat-label {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.register-stats-subheader {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-green-neon);
    margin: 10px 0 4px;
}

@media (max-width: 768px) {
    .header-register-btn {
        width: 100%;
        justify-content: center;
        min-height: 40px;
    }

    .header-register-btn span {
        display: inline;
    }

    .register-score-grid {
        grid-template-columns: 1fr;
    }

    .register-modal-box {
        width: calc(100vw - 18px);
        max-height: calc(100dvh - 18px);
    }

    .register-modal-body {
        padding: 14px;
        gap: 12px;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .register-stat-row {
        grid-template-columns: 64px 1fr 64px;
    }
}

/* --- BANNER DE PARTIDA DE 1º TEMPO EM ABERTO --- */

.halftime-banner-container:empty {
    display: none;
}

.halftime-banner-container {
    padding: 20px 32px 0;
}

.halftime-banner {
    background: var(--bg-card);
    border: 1.5px solid rgba(250, 204, 21, 0.55);
    border-radius: 12px;
    padding: 18px 20px;
}

@media (max-width: 768px) {
    .halftime-banner-container {
        padding: 14px 14px 0;
    }
}

.halftime-banner-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-yellow-warning);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.halftime-banner-header i {
    width: 18px;
    height: 18px;
}

.halftime-banner-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.halftime-banner-score {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 10px;
}

.halftime-banner-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 16px;
}

.halftime-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.halftime-btn-primary {
    background: linear-gradient(135deg, var(--color-yellow-warning), var(--color-orange-warn));
    box-shadow: none;
    justify-content: center;
    margin-left: 0;
    width: 100%;
}

.halftime-banner-secondary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.halftime-discard-btn {
    color: var(--color-red-danger);
}

/* --- TREINOS (SKILL GAMES) --- */

.skillgames-step-label {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 16px 0 8px;
}

.skillgames-register-panel .panel-content {
    padding-top: 0;
}

.skillgames-band-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.skillgames-band-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    padding: 10px 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: center;
}

.skillgames-band-btn:hover {
    border-color: var(--color-green-neon);
    color: var(--color-green-neon);
    background: rgba(2, 239, 139, 0.08);
}

.skillgames-band-btn.registering {
    border-color: var(--color-green-neon);
    background: rgba(2, 239, 139, 0.18);
    color: var(--color-green-neon);
}

.skillgames-kpis {
    margin-top: 20px;
}

.skillgames-kpi-small {
    font-size: 0.95rem !important;
    line-height: 1.3;
}

.skillgames-evolution-select {
    max-width: 220px;
}

.skillgames-evolution-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 18px 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.skillgames-evolution-summary strong {
    color: var(--text-primary);
}

.skillgames-trend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}

.skillgames-trend i {
    width: 14px;
    height: 14px;
}

.skillgames-trend.up { color: var(--color-green-neon); }
.skillgames-trend.down { color: var(--color-red-danger); }
.skillgames-trend.flat { color: var(--color-yellow-warning); }

.skillgames-recent {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 330px;
    overflow-y: auto;
}

.skillgames-recent-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.skillgames-recent-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.skillgames-recent-info strong {
    font-size: 0.82rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skillgames-recent-info small {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.skillgames-band-chip {
    flex-shrink: 0;
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid rgba(0, 210, 255, 0.35);
    color: var(--color-cyan-cool);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.skillgames-band-chip.best {
    background: rgba(2, 239, 139, 0.1);
    border-color: rgba(2, 239, 139, 0.35);
    color: var(--color-green-neon);
}

.skillgames-delete-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: var(--transition-smooth);
}

.skillgames-delete-btn:hover {
    color: var(--color-red-danger);
    background: rgba(255, 74, 90, 0.08);
}

.skillgames-delete-btn i {
    width: 15px;
    height: 15px;
    display: block;
}

.skillgames-empty-cell {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
    padding: 14px 6px;
    text-align: center;
}

@media (max-width: 768px) {
    .skillgames-band-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .skillgames-evolution-select {
        max-width: 160px;
    }
}

/* --- ABA DE FOTOS (VER STATS) --- */

.match-images-section {
    padding-top: 4px;
}

.match-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.match-image-cell {
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.match-image-cell:hover {
    border-color: var(--color-green-neon);
}

.match-image-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.match-image-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-top-color: var(--color-green-neon);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.match-image-error {
    color: var(--text-muted);
}

.match-image-error i {
    width: 22px;
    height: 22px;
}

.image-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.image-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.image-lightbox-close {
    position: fixed;
    top: 18px;
    right: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.image-lightbox-close:hover {
    background: rgba(255, 74, 90, 0.15);
    color: var(--color-red-danger);
}

.image-lightbox-close i {
    width: 18px;
    height: 18px;
}

@media (max-width: 640px) {
    .match-images-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

    .image-lightbox-overlay {
        padding: 12px;
    }
}

/* ==========================================================================
   Painel de Administração (aba Admin, visível só para o super usuário)
   ========================================================================== */

.admin-muted {
    color: var(--text-muted, #8b95a3);
    font-size: 0.82rem;
}

.admin-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.admin-detail-title {
    flex: 1;
    min-width: 220px;
}

.admin-detail-title h3 {
    margin: 0;
    font-size: 1.05rem;
}

.admin-detail-title p {
    margin: 2px 0 0;
}

.admin-view-user-btn {
    white-space: nowrap;
}

#admin-section .dashboard-panel > .chart-container {
    width: auto;
    margin: 16px;
    padding: 0;
}

#admin-section .dashboard-panel > .table-responsive {
    margin: 0 16px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}

#admin-section .dashboard-panel.text-panel .panel-content {
    padding: 16px 18px;
}

#admin-section .dashboard-panel > .panel-header + .panel-content {
    padding-top: 16px;
}

/* ─── Convites de acesso (admin + aba Amigos) ───────────────────────────── */

.admin-invites-body {
    padding: 16px 18px 0;
}

.admin-waitlist-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 16px 0;
}

.admin-waitlist-summary > div,
.admin-waitlist-breakdown > div {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
    min-width: 0;
}

.admin-waitlist-summary span,
.admin-waitlist-summary small,
.admin-waitlist-breakdown span {
    display: block;
    color: var(--text-muted, #8b95a3);
    font-size: 0.76rem;
    line-height: 1.45;
}

.admin-waitlist-summary strong {
    display: block;
    color: var(--text-primary);
    font-size: 1.1rem;
    margin: 2px 0;
}

.admin-waitlist-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 16px 0;
}

.admin-waitlist-breakdown strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    margin-bottom: 5px;
}

.admin-waitlist-breakdown i {
    width: 14px;
    height: 14px;
    color: var(--color-green-neon);
}

.admin-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.admin-toggle-row input {
    display: none;
}

.admin-toggle-track {
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    transition: background 0.2s ease;
    margin-top: 2px;
}

.admin-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #9ca3af;
    transition: transform 0.2s ease, background 0.2s ease;
}

.admin-toggle-row input:checked + .admin-toggle-track {
    background: rgba(2, 239, 139, 0.25);
    border-color: rgba(2, 239, 139, 0.5);
}

.admin-toggle-row input:checked + .admin-toggle-track .admin-toggle-thumb {
    transform: translateX(20px);
    background: var(--color-green-neon, #02ef8b);
}

.admin-toggle-label {
    font-size: 0.85rem;
    line-height: 1.45;
}

.invite-hint {
    font-size: 0.82rem;
    color: var(--text-muted, #8b95a3);
    line-height: 1.5;
    margin: 0 0 12px;
}

.invite-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.invite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.invite-item-email {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invite-badge-accepted {
    background: rgba(2, 239, 139, 0.15);
    color: #86efac;
}

@media (max-width: 640px) {
    .admin-waitlist-summary,
    .admin-waitlist-breakdown {
        grid-template-columns: 1fr;
    }
}

/* ─── Seletor de idioma (i18n) ─────────────────────────────────────────── */
.lang-switcher {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.auth-lang-switcher {
    margin-top: 18px;
}

.settings-lang-switcher {
    margin-bottom: 6px;
}

.settings-lang-switcher .lang-switcher {
    justify-content: flex-start;
}

.lang-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: var(--text-secondary, #9ca3af);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lang-switcher-flag {
    font-size: 0.95rem;
    line-height: 1;
}

.lang-switcher-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary, #f3f4f6);
}

.lang-switcher-btn.active {
    background: rgba(2, 239, 139, 0.12);
    border-color: var(--color-green-neon, #02ef8b);
    color: var(--color-green-neon, #02ef8b);
    font-weight: 600;
}