:root {
    /* Pitch Precision — Material Design 3 Dark Theme */
    --md-sys-color-primary: #00e476;
    --md-sys-color-on-primary: #002912;
    --md-sys-color-primary-container: #00ff85;
    --md-sys-color-on-primary-container: #007137;
    --md-sys-color-secondary: #b8dfd0;
    --md-sys-color-on-secondary: #0a2a1d;
    --md-sys-color-secondary-container: #2b5041;
    --md-sys-color-on-secondary-container: #aadcc9;
    --md-sys-color-surface: #0f1412;
    --md-sys-color-surface-dim: #0f1412;
    --md-sys-color-surface-bright: #353a38;
    --md-sys-color-surface-container-lowest: #0a0f0d;
    --md-sys-color-surface-container-low: #181d1a;
    --md-sys-color-surface-container: #1c211e;
    --md-sys-color-surface-container-high: #262b29;
    --md-sys-color-surface-container-highest: #313633;
    --md-sys-color-on-surface: #e8ece9;
    --md-sys-color-on-surface-variant: #c5d9c5;
    --md-sys-color-inverse-surface: #e8ece9;
    --md-sys-color-inverse-on-surface: #1a2420;
    --md-sys-color-outline: #9ab09a;
    --md-sys-color-outline-variant: #3b4b3d;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-background: #0f1412;
    --md-sys-color-on-background: #e8ece9;
    --md-sys-color-surface-tint: #00e476;

    /* FPL Specific Colors */
    --fpl-accent: #00ff85;
    --fpl-accent-dim: rgba(0, 255, 133, 0.12);
    --fpl-accent-hover: rgba(0, 255, 133, 0.08);
    --fpl-blue: #00D1FF;
    --fpl-blue-dim: rgba(0, 209, 255, 0.12);
    --fpl-pink: #FF005A;
    --fpl-pink-dim: rgba(255, 0, 90, 0.12);

    /* FPL Dark Palette (used across dashboard, fixtures, cards) */
    --fpl-surface-dark: #0a0f0d;
    --fpl-border: #1A2E28;
    --fpl-text-muted: #9ab09a;
    --fpl-surface-mid: #1c211e;
    --fpl-surface-manager: #b8dfd0;
    --fpl-manager-text: #0a2a1d;
    --fpl-manager-value: #0a0f0d;
    --fpl-green-dark: #007137;
    --fpl-fixture-nav: #181d1a;
    --fpl-fixture-controls: #202722;
    --fpl-fixture-border: #3b4b3d;

    /* FDR Colors — Pitch Precision */
    --fdr-1: #00FF85;
    --fdr-2: #37DB59;
    --fdr-3: #E1E1E1;
    --fdr-4: #FFA600;
    --fdr-5: #FF005A;

    /* Data Accents */
    --data-blue: #00D1FF;

    /* Pitch Colors */
    --pitch-green: #148839;
    --pitch-line: #1A2E28;
    --pitch-outer: #0E6326;
    --pitch-highlight: rgba(0, 255, 133, 0.2);

    /* Spacing Scale */
    --space-xxs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* Typography */
    --font-display: 'Hanken Grotesk Variable', sans-serif;
    --font-body: 'Inter Variable', sans-serif;
    --font-mono: 'JetBrains Mono Variable', monospace;
    --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* Elevation */
    --elevation-1: 0 1px 3px rgba(0,0,0,0.3);
    --elevation-2: 0 2px 6px rgba(0,0,0,0.4);
    --elevation-3: 0 4px 12px rgba(0,0,0,0.5);
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-surface);
    line-height: 1.5;
    min-height: 100vh;
}

.material-symbols-outlined {
    display: inline-block;
    width: 1em;
    flex: 0 0 1em;
    overflow: hidden;
    line-height: 1;
    white-space: nowrap;
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--md-sys-color-surface); }
::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--md-sys-color-on-surface-variant); }

/* Typography */
h1, h2, h3, h4, h5, h6, .heading { font-family: var(--font-display); font-weight: 700; }
h1, .h1 { font-size: 2rem; letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1rem; }

.mono, [data-number] { font-family: var(--font-mono); }

.text-primary { color: var(--md-sys-color-primary); }
.text-secondary { color: var(--md-sys-color-secondary); }
.text-muted { color: var(--md-sys-color-on-surface-variant); }
.text-error { color: var(--md-sys-color-error); }

/* Layout */
.layout { display: flex; min-height: 100vh; }
.layout-sidebar { width: 240px; flex-shrink: 0; }
.layout-main { flex: 1; min-width: 0; }
.layout-content { padding: var(--space-lg); max-width: 1400px; margin: 0 auto; }

/* Top Bar */
.topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    height: 64px; padding: 0 var(--space-lg);
    background: rgba(13, 13, 13, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.topbar-left { display: flex; align-items: center; gap: var(--space-md); }
.topbar-center { flex: 1; display: flex; justify-content: center; }
.topbar-right { display: flex; align-items: center; gap: var(--space-md); }

.topbar-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.topbar-title .material-symbols-outlined { font-size: 28px; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: none; border-radius: var(--radius-pill);
    font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
    cursor: pointer; transition: all var(--transition-fast);
    text-decoration: none; white-space: nowrap;
    height: 40px;
}

.btn-primary {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.btn-primary:hover { box-shadow: 0 0 20px rgba(0, 255, 133, 0.4); transform: translateY(-1px); }

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--md-sys-color-outline);
    color: var(--md-sys-color-on-surface);
}
.btn-outline:hover { border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }

.btn-ghost {
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
}
.btn-ghost:hover { background: var(--md-sys-color-surface-container); }

.btn-danger {
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
}
.btn-danger:hover { box-shadow: 0 0 20px rgba(255, 87, 87, 0.35); transform: translateY(-1px); }

.btn-sm { height: 32px; padding: var(--space-xs) var(--space-sm); font-size: 0.75rem; }
.btn-lg { height: 48px; padding: var(--space-md) var(--space-xl); font-size: 1rem; }

.btn-icon {
    width: 40px; height: 40px; padding: 0;
    border-radius: var(--radius-pill);
    display: flex; align-items: center; justify-content: center;
}

/* Cards */
.card {
    background: var(--md-sys-color-surface-container);
    border-radius: var(--radius-lg);
    border: 1px solid var(--md-sys-color-outline-variant);
    overflow: hidden;
    transition: all var(--transition-normal);
}
.card:hover { border-color: var(--md-sys-color-outline); }

.card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.card-header h3 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.card-body { padding: var(--space-md); }
.card-footer {
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Stat Cards */
.stat-card {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.stat-label {
    font-size: 0.8125rem;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    line-height: 1;
}

.stat-change {
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.stat-change.positive { color: #1A9F39; }
.stat-change.negative { color: #E21C3D; }

/* Grid Layouts */
.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* Tables */
.table-container {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--md-sys-color-outline-variant);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

thead {
    position: sticky; top: 0;
    background: var(--md-sys-color-surface-container-high);
    z-index: 1;
}

th {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--md-sys-color-outline-variant);
    cursor: pointer;
    white-space: nowrap;
}

th:hover { color: var(--md-sys-color-primary); }
th.sort-active { color: var(--md-sys-color-primary); }
th.sort-active::after { content: ' ▼'; font-size: 0.625rem; }
th.sort-active.asc::after { content: ' ▲'; }

td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    white-space: nowrap;
}

tbody tr { transition: background var(--transition-fast); }
tbody tr:hover { background: var(--md-sys-color-surface-container); }

/* Chips */
.chip {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-pill);
    font-size: 0.75rem; font-weight: 500;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.chip-primary {
    background: var(--fpl-accent-dim);
    color: var(--md-sys-color-primary);
    border-color: rgba(0, 255, 133, 0.3);
}

/* FDR */
.fdr-1 { background: var(--fdr-1); color: white; }
.fdr-2 { background: var(--fdr-2); color: white; }
.fdr-3 { background: var(--fdr-3); color: #1a1a1a; }
.fdr-4 { background: var(--fdr-4); color: white; }
.fdr-5 { background: var(--fdr-5); color: white; }

.fdr-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem; font-weight: 700;
}

/* Tabs */
.tabs {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
    padding: var(--space-md) var(--space-lg);
    font-size: 0.875rem; font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    border-bottom: 2px solid transparent;
    cursor: pointer; white-space: nowrap;
    transition: all var(--transition-fast);
    display: flex; align-items: center; gap: var(--space-sm);
}

.tab:hover { color: var(--md-sys-color-on-surface); }
.tab.active {
    color: var(--md-sys-color-primary);
    border-bottom-color: var(--md-sys-color-primary);
}

/* Pitch / Football Field */
.pitch {
    background: var(--pitch-green);
    background-image:
        linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    aspect-ratio: 68/105;
}

.pitch-3-5-2 { aspect-ratio: 68/105; }
.pitch-4-4-2 { aspect-ratio: 68/105; }

/* Pitch Zone */
.pitch-zone {
    position: absolute;
    border: 1px dashed rgba(255,255,255,0.2);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: var(--space-xxs);
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.pitch-zone:hover {
    background: var(--pitch-highlight);
    border-color: var(--md-sys-color-primary);
}

.pitch-zone .zone-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pitch-zone .zone-value {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
}

.pitch-zone .zone-sub {
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.6);
}

/* Player Badge on Pitch */
.pitch-player {
    position: absolute;
    display: flex; flex-direction: column;
    align-items: center; gap: 2px;
    cursor: pointer;
    transition: transform var(--transition-fast);
    z-index: 2;
}

.pitch-player:hover { transform: scale(1.1); }

.pitch-player .player-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--md-sys-color-surface-container);
    border: 2px solid var(--md-sys-color-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6875rem; font-weight: 700;
    color: var(--md-sys-color-primary);
}

.pitch-player .player-name {
    font-size: 0.625rem;
    color: white;
    background: rgba(0,0,0,0.7);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* Dialog */
.dialog-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition-normal);
}
.dialog-overlay.active { opacity: 1; pointer-events: all; }

.dialog {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--radius-xl);
    width: 90%; max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--elevation-3);
    transform: translateY(20px);
    transition: transform var(--transition-normal);
}
.dialog-overlay.active .dialog { transform: translateY(0); }

.dialog-wide { max-width: 720px; }
.dialog-narrow { max-width: 400px; }

.confirm-plan-moves { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.confirm-plan-moves span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--md-sys-color-on-surface); }
.confirm-plan-moves del { color: var(--md-sys-color-error); opacity: .85; }
.confirm-plan-moves i { font-size: 16px; color: var(--md-sys-color-on-surface-variant); }
.confirm-plan-moves b { color: var(--md-sys-color-primary); }
.confirm-plan-net { margin: 0; font: 700 15px var(--font-mono); color: var(--md-sys-color-primary); }
.confirm-plan-net + p { margin-top: 6px; }

.dashboard-decision-cta {
    width: 100%;
    min-height: 88px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid #294138;
    border-radius: var(--radius-lg);
    background: #141916;
    color: var(--md-sys-color-on-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.dashboard-decision-cta > .material-symbols-outlined:first-child {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(0,255,133,.3);
    border-radius: 50%;
    background: rgba(0,255,133,.1);
    color: var(--md-sys-color-primary);
    font-size: 25px;
}
.dashboard-decision-cta strong,
.dashboard-decision-cta small { display: block; }
.dashboard-decision-cta strong { margin-bottom: 3px; font: 700 15px var(--font-display); }
.dashboard-decision-cta small { color: #8ba396; font-size: 11px; }
.dashboard-decision-cta > .material-symbols-outlined:last-child { color: var(--md-sys-color-primary); }
.dashboard-decision-cta:hover { border-color: rgba(0,255,133,.55); background: #17201b; transform: translateY(-1px); }

.dialog-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.dialog-body { padding: var(--space-lg); }
.dialog-footer {
    display: flex; justify-content: flex-end; gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Input */
.input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--radius-md);
    color: var(--md-sys-color-on-surface);
    font-family: var(--font-body);
    font-size: 0.875rem;
    outline: none;
    transition: border-color var(--transition-fast);
}
.input:focus { border-color: var(--md-sys-color-primary); }
.input::placeholder { color: var(--md-sys-color-on-surface-variant); }

.input-group {
    display: flex; flex-direction: column; gap: var(--space-xs);
}
.input-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
}

/* Select */
select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23B0B0B0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 32px;
}

/* Toggle */
.toggle {
    width: 44px; height: 24px;
    border-radius: var(--radius-pill);
    background: var(--md-sys-color-surface-container-highest);
    border: 2px solid var(--md-sys-color-outline);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
}
.toggle.active {
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}
.toggle::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--md-sys-color-on-surface);
    top: 2px; left: 2px;
    transition: transform var(--transition-fast);
}
.toggle.active::after { transform: translateX(20px); background: #000; }

/* Progress Bar */
.progress {
    height: 6px;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: var(--md-sys-color-primary);
    border-radius: var(--radius-pill);
    transition: width var(--transition-slow);
}

/* Divider */
.divider {
    height: 1px;
    background: var(--md-sys-color-outline-variant);
    margin: var(--space-md) 0;
}

/* Badges */
.badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px;
    padding: 0 var(--space-xs);
    border-radius: var(--radius-pill);
    font-size: 0.625rem; font-weight: 700;
}
.badge-primary { background: var(--md-sys-color-primary); color: #000; }
.badge-error { background: var(--md-sys-color-error); color: #000; }

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg,
        var(--md-sys-color-surface-container) 25%,
        var(--md-sys-color-surface-container-high) 50%,
        var(--md-sys-color-surface-container) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Tooltip */
.tooltip {
    position: relative;
}
.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-xs) var(--space-sm);
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition-fast);
    z-index: 100;
}
.tooltip:hover::after { opacity: 1; }

/* Mobile Bottom Nav */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(72px + env(safe-area-inset-bottom, 0px));
    background: rgba(13, 13, 13, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    z-index: 100;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    padding: 0 4px env(safe-area-inset-bottom, 0px);
}

.bottom-nav-item {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    min-height: 72px;
    padding: 0 2px;
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    font-size: 0.6875rem;
    transition: color var(--transition-fast);
    cursor: pointer;
    min-width: 48px;
}

.bottom-nav-item:hover,
.bottom-nav-item.active { color: var(--md-sys-color-primary); }
.bottom-nav-item .material-symbols-outlined { font-size: 24px; }
.sidebar-nav-item:focus-visible,
.bottom-nav-item:focus-visible,
.mobile-menu-btn:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    width: 40px; height: 40px;
    background: none; border: none;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    border-radius: var(--radius-pill);
    align-items: center; justify-content: center;
}
.mobile-menu-btn:hover { background: var(--md-sys-color-surface-container); }

/* Sidebar Mobile Overlay */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
}

/* Page Title */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.page-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
}

.page-subtitle {
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xxl);
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
}

.empty-state .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: var(--space-md);
    color: var(--md-sys-color-outline);
}

/* Fixtures Section */
.fixture-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    transition: background var(--transition-fast);
    align-items: center;
}
.fixture-row:hover { background: var(--md-sys-color-surface-container); }

.fixture-team {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.fixture-team.home { justify-content: flex-end; }
.fixture-team.away { justify-content: flex-start; }

.fixture-score {
    font-family: var(--font-mono);
    font-weight: 700;
    min-width: 60px;
    text-align: center;
}

/* Utility Classes */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.relative { position: relative; }

.player-photo-shell {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    background: #17211c;
}

.player-photo-fallback {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #17211c;
    color: #fff;
    font-family: var(--font-mono);
    line-height: 1;
    text-align: center;
}

.player-photo-fallback:first-child { display: flex; }
.player-current-shirt { position: relative; width: 80%; height: 80%; object-fit: contain; opacity: 0.85; z-index: 1; }
.player-photo-fallback strong { display: none; }
.player-photo-fallback small { display: none; }

.captaincy-player-photo,
.captaincy-table-photo,
.tactics-player-photo,
#pos-gkp-img,
#pos-def-img,
#pos-mid-img,
#pos-fwd-img {
    position: relative;
}

/* ==================== CAPTAINCY MODEL ==================== */
.captaincy-header {
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
}

/* ==================== DECISION LAB ==================== */
.decision-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.decision-kicker { margin-bottom:5px; color:#8ba396; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; }
.decision-header .page-title { margin:0; letter-spacing:0; }
.decision-header .page-title span { color:var(--fpl-accent); }
.decision-header .page-subtitle { margin-top:4px; }
.decision-controls { display:flex; align-items:flex-end; justify-content:center; gap:12px; flex-wrap:wrap; padding:12px 16px; }
.decision-controls label { display:grid; gap:6px; color:#8ba396; font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; text-align:center; }
.decision-controls input,.decision-controls select,.decision-rival-input input,.decision-compare-controls select { min-height:42px; border:1px solid #294138; border-radius:8px; background-color:#141916; color:#fff; padding:8px 12px; font:700 13px var(--font-mono); text-align:center; }
.decision-controls input { width:70px; }
.decision-subnav { display:flex; gap:2px; overflow-x:auto; margin-bottom:18px; border-bottom:1px solid #1a2e28; scrollbar-width:none; }
.decision-subnav button { min-height:40px; border:0; border-bottom:2px solid transparent; background:transparent; color:#8ba396; padding:0 14px; cursor:pointer; font:700 11px var(--font-mono); white-space:nowrap; }
.decision-subnav button.active { border-color:var(--fpl-accent); color:#fff; }
.decision-subnav button:hover { color:#fff; background:rgba(255,255,255,.035); }
.decision-empty { display:flex; align-items:center; justify-content:center; gap:16px; min-height:220px; border:1px dashed #294138; border-radius:6px; background:#111613; color:#8ba396; padding:24px; }
.decision-empty>.material-symbols-outlined { color:var(--fpl-accent); font-size:34px; }
.decision-empty b { color:#fff; }
.decision-empty p { margin:3px 0 0; font-size:12px; }
.decision-spin { animation:decision-spin 1s linear infinite; }
@keyframes decision-spin { to { transform:rotate(360deg); } }
.decision-view { display:none; }
.decision-view.active { display:block; }
.decision-stats { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:16px; border:1px solid #294138; border-radius:6px; overflow:hidden; background:#9ecfb7; }
.decision-stats>div { min-width:0; padding:17px 18px; border-right:1px solid rgba(12,26,18,.2); color:#0c1a12; }
.decision-stats>div:last-child { border:0; }
.decision-stats span,.decision-stats small { display:block; font:700 11px var(--font-mono); }
.decision-stats strong { display:block; overflow:hidden; margin:5px 0 2px; font:800 28px var(--font-display); text-overflow:ellipsis; }
.decision-stats small { color:#345244; }
.decision-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:16px; }
.decision-panel { border:1px solid #1a2e28; border-radius:6px; background:#141916; overflow:hidden; }
.decision-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; border-bottom:1px solid #1a2e28; padding:0 16px; }
.decision-panel-head h2,.decision-section-head h2 { margin:0; font-size:17px; }
.decision-panel-head span { color:#8ba396; font:700 11px var(--font-mono); }
.decision-action { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:12px; align-items:start; padding:15px 16px; border-bottom:1px solid #1a2e28; }
.decision-action:last-child { border:0; }
.decision-action>span { display:grid; place-items:center; width:26px; height:26px; border-radius:4px; background:#24382f; color:var(--fpl-accent); font:800 11px var(--font-mono); }
.decision-action small { color:#8ba396; font:700 11px var(--font-mono); }
.decision-action h3 { margin:3px 0; font-size:15px; }
.decision-action p,.decision-transfer-card p,.decision-chip-recs p,.decision-model-score+p { margin:0; color:#8ba396; font-size:12px; line-height:1.5; }
.decision-action>strong { color:var(--fpl-accent); font:800 18px var(--font-mono); }
.decision-alert { display:flex; align-items:flex-start; gap:9px; padding:13px 15px; border-bottom:1px solid #1a2e28; }
.decision-alert span { color:#f5b942; font-size:18px; }
.decision-alert.critical span { color:#ff5c72; }
.decision-alert.opportunity span { color:var(--fpl-accent); }
.decision-alert p,.decision-assumption p { margin:0; color:#c5d3cc; font-size:12px; line-height:1.45; }
.decision-live-panel { margin-top:16px; }
.decision-live-stats { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #1a2e28; }
.decision-live-stats>div { padding:16px; border-right:1px solid #1a2e28; }
.decision-live-stats>div:last-child { border:0; }
.decision-live-stats strong,.decision-live-stats small { display:block; }
.decision-live-stats strong { color:var(--fpl-accent); font:800 22px var(--font-mono); }
.decision-live-stats small { color:#8ba396; font-size:11px; }
.decision-live-panel .decision-rival-lists { padding:14px 16px; }
.decision-live-wait { margin-top:16px; border:1px dashed #294138; border-radius:6px; }
.decision-quiet { padding:26px; color:#8ba396; text-align:center; font-size:12px; }
.decision-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.decision-section-head p { margin:3px 0 0; color:#8ba396; font-size:12px; }
.decision-section-head>strong { color:var(--fpl-accent); font:800 22px var(--font-mono); }
.decision-transfer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.decision-transfer-card { position:relative; display:grid; gap:11px; border:1px solid #1a2e28; border-radius:6px; background:#141916; padding:15px; }
.decision-plan-rank { position:absolute; top:10px; right:10px; color:#50675c; font:800 20px var(--font-mono); }
.decision-transfer-moves { padding-right:28px; }
.decision-transfer-moves>div { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; }
.decision-transfer-moves .material-symbols-outlined { color:#60786c; font-size:16px; }
.decision-transfer-moves .sell { color:#ff8a9b; }
.decision-transfer-moves .buy { color:var(--fpl-accent); }
.decision-plan-metrics { display:flex; flex-wrap:wrap; gap:6px; }
.decision-plan-metrics span { border:1px solid #294138; border-radius:3px; padding:4px 7px; color:#a9bbb2; font:700 10px var(--font-mono); }
.decision-plan-metrics b { color:var(--fpl-accent); }
.decision-optimal { margin-top:18px; }
.decision-player-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.decision-player-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:9px; min-width:0; padding:11px 13px; border-right:1px solid #1a2e28; border-bottom:1px solid #1a2e28; }
.decision-player-pos { color:#8ba396; font:800 11px var(--font-mono); }
.decision-player-row b,.decision-player-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.decision-player-row b { font-size:13px; }
.decision-player-row small { margin-top:2px; color:#8ba396; font-size:11px; }
.decision-player-numbers { text-align:right; }
.decision-player-numbers strong { color:var(--fpl-accent); font:800 14px var(--font-mono); }
.decision-pitch { position:relative; display:grid; gap:27px; min-height:520px; border:1px solid #315443; border-radius:6px; padding:45px 28px 30px; background:linear-gradient(rgba(11,45,28,.93),rgba(8,35,23,.96)),repeating-linear-gradient(0deg,transparent 0 68px,rgba(255,255,255,.05) 69px 70px); overflow:hidden; }
.decision-pitch:before { content:""; position:absolute; inset:16px; border:1px solid rgba(255,255,255,.25); pointer-events:none; }
.decision-pitch-label { position:absolute; top:8px; left:50%; transform:translateX(-50%); color:#83a995; font:700 9px var(--font-mono); }
.decision-pitch-line { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-evenly; gap:10px; }
.decision-pitch-player { display:grid; justify-items:center; min-width:80px; text-align:center; }
.decision-pitch-player>span { display:grid; place-items:center; width:25px; height:25px; margin-bottom:5px; border:1px solid #b9e0cc; border-radius:50%; background:#101b15; color:var(--fpl-accent); font:800 8px var(--font-mono); }
.decision-pitch-player b { font-size:12px; }
.decision-pitch-player small { color:#b8cdc2; font:700 11px var(--font-mono); }
.decision-bench { margin-top:12px; border:1px solid #1a2e28; border-radius:6px; background:#141916; overflow:hidden; }
.decision-bench h3 { margin:0; padding:12px 14px; border-bottom:1px solid #1a2e28; font-size:14px; }
.decision-compare-controls,.decision-rival-input { display:flex; gap:7px; }
.decision-compare-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.decision-compare-card { border:1px solid #1a2e28; border-radius:6px; background:#141916; padding:18px; }
.decision-compare-name { display:flex; align-items:center; gap:11px; }
.decision-compare-name>span { display:grid; place-items:center; width:38px; height:38px; border-radius:4px; background:#24382f; color:var(--fpl-accent); font:800 9px var(--font-mono); }
.decision-compare-name h3 { margin:0; font-size:16px; }
.decision-compare-name small { color:#8ba396; }
.decision-range { position:relative; height:8px; margin:22px 0; border-radius:2px; background:#26352e; }
.decision-range span { position:absolute; top:0; height:8px; border-radius:2px; background:#4f8570; }
.decision-range i { position:absolute; top:-4px; width:2px; height:16px; background:var(--fpl-accent); }
.decision-compare-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#1a2e28; }
.decision-compare-metrics span { display:flex; justify-content:space-between; gap:8px; background:#141916; padding:9px; color:#8ba396; font-size:11px; }
.decision-compare-metrics b { color:#fff; font-family:var(--font-mono); }
.decision-verdict { display:flex; gap:10px; margin-top:14px; border-left:2px solid var(--fpl-accent); background:#17221c; padding:13px; }
.decision-verdict span { color:var(--fpl-accent); }
.decision-verdict p { margin:0; color:#b7c7bf; font-size:12px; }
.decision-rival { margin-bottom:12px; border:1px solid #1a2e28; border-radius:6px; background:#141916; padding:16px; }
.decision-rival-head { display:flex; justify-content:space-between; align-items:start; }
.decision-rival-head small { color:#8ba396; font:700 9px var(--font-mono); }
.decision-rival-head h3 { margin:2px 0 0; font-size:15px; }
.decision-rival-head>div:last-child { text-align:right; }
.decision-rival-head strong { display:block; color:var(--fpl-accent); font:800 18px var(--font-mono); }
.decision-rival-stats { display:flex; gap:7px; margin:12px 0; }
.decision-rival-stats span { border:1px solid #294138; border-radius:3px; padding:4px 7px; color:#a9bbb2; font:700 9px var(--font-mono); }
.decision-rival-lists { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.decision-rival-lists>div { display:flex; flex-wrap:wrap; gap:5px; }
.decision-rival-lists b { width:100%; color:#8ba396; font-size:11px; }
.decision-rival-lists span { background:#202e27; padding:4px 6px; color:#d8e4de; font-size:11px; }
.decision-chip-recs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.decision-chip-recs article { border:1px solid #1a2e28; border-radius:6px; background:#141916; padding:14px; }
.decision-chip-recs article>span { color:#8ba396; font:700 9px var(--font-mono); }
.decision-chip-recs h3 { margin:5px 0; font-size:13px; }
.decision-chip-recs strong { color:var(--fpl-accent); font:800 20px var(--font-mono); }
.decision-table { width:100%; min-width:700px; border-collapse:collapse; background:#141916; font-size:12px; }
.decision-table th,.decision-table td { border-bottom:1px solid #1a2e28; padding:10px 12px; text-align:center; }
.decision-table th:first-child,.decision-table td:first-child { text-align:left; }
.decision-table td:last-child,.decision-table th:last-child { text-align:center; }
.decision-table th { color:#8ba396; font:700 9px var(--font-mono); }
.decision-model-score { display:flex; align-items:baseline; gap:9px; padding:20px 16px 5px; }
.decision-model-score strong { color:var(--fpl-accent); font:800 34px var(--font-mono); }
.decision-model-score span { color:#8ba396; font:700 10px var(--font-mono); }
.decision-model-score+p,.decision-model-score~small { display:block; padding:5px 16px 16px; }
.decision-model-score~small { color:#64796f; }
.decision-assumption { display:flex; gap:10px; padding:15px 16px; border-bottom:1px solid #1a2e28; }
.decision-assumption span { color:#8ba396; font-size:18px; }

@media (max-width:1024px) {
    .decision-header { align-items:flex-start; flex-direction:column; }
    .decision-controls { justify-content:center; }
    .decision-player-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .decision-chip-recs { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
    .decision-stats { grid-template-columns:repeat(2,1fr); }
    .decision-stats>div:nth-child(2) { border-right:0; }
    .decision-stats>div { border-bottom:1px solid rgba(12,26,18,.2); }
    .decision-grid,.decision-transfer-grid,.decision-compare-grid { grid-template-columns:1fr; }
    .decision-section-head { align-items:flex-start; flex-direction:column; }
    .decision-player-grid { grid-template-columns:1fr; }
    .decision-pitch { min-height:470px; padding-inline:8px; }
    .decision-pitch-line { gap:2px; }
    .decision-pitch-player { min-width:54px; }
    .decision-pitch-player b { max-width:68px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .decision-chip-recs { grid-template-columns:1fr; }
    .decision-empty { align-items:flex-start; flex-direction:column; }
    .decision-controls { gap:10px; padding:10px 12px; }
    .decision-controls label { font-size:10px; }
    .decision-controls input,.decision-controls select { min-height:38px; font-size:12px; padding:6px 10px; }
}
@media (max-width:420px) {
    .decision-controls { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px; padding:8px; }
    .decision-controls label { flex:1 1 70px; text-align:center; }
    .decision-controls input,.decision-controls select { width:100%; min-height:36px; }
    .decision-controls .btn { width:100%; }
    .decision-action { grid-template-columns:26px minmax(0,1fr); }
    .decision-action>strong { grid-column:2; }
    .decision-compare-controls,.decision-rival-input { width:100%; flex-direction:column; }
    .decision-rival-lists { grid-template-columns:1fr; }
}

.captaincy-kicker {
    margin-bottom: 5px;
    color: #8ba396;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.captaincy-header .page-title { margin: 0; letter-spacing: 0; }
.captaincy-header .page-title span { color: var(--fpl-accent); }
.captaincy-header .page-subtitle { max-width: 720px; margin-top: 4px; }

.captaincy-controls {
    display: grid;
    grid-template-columns: auto minmax(88px, auto);
    align-items: center;
    gap: 5px 10px;
    margin-left: auto;
}

.captaincy-controls label {
    color: #8ba396;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.captaincy-controls select {
    min-height: 38px;
    padding: 0 30px 0 11px;
    border: 1px solid #355044;
    border-radius: 6px;
    background-color: #141916;
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 700;
    cursor: pointer;
}

.captaincy-model-status {
    grid-column: 1 / -1;
    color: #8ba396;
    font-family: var(--font-mono);
    font-size: 11px;
    text-align: right;
}

.captaincy-spotlights {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.captaincy-spotlight {
    min-width: 0;
    padding: 20px;
    border: 1px solid #2c3d35;
    border-radius: 8px;
    background: #171c19;
}

.captaincy-spotlight-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    margin-bottom: 16px;
}

.captaincy-pick-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fpl-accent);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.captaincy-spotlight-differential .captaincy-pick-label { color: #f9d243; }
.captaincy-pick-label .material-symbols-outlined { font-size: 17px; }
.captaincy-overall-rank { color: #aebdb5; font-family: var(--font-mono); font-size: 11px; }

.captaincy-player-lead {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.captaincy-player-photo,
.captaincy-table-photo {
    overflow: hidden;
    border: 1px solid #355044;
    background: #101411;
}

.captaincy-player-photo { width: 64px; height: 72px; border-radius: 6px; }
.captaincy-table-photo { width: 38px; height: 42px; border-radius: 4px; flex: 0 0 auto; }
.captaincy-player-photo img,
.captaincy-table-photo img { width: 100%; height: 100%; object-fit: cover; }
.captaincy-player-heading { min-width: 0; }
.captaincy-player-heading h2 { margin: 1px 0 5px; overflow-wrap: anywhere; color: #fff; font-size: 24px; letter-spacing: 0; }

.captaincy-player-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #8ba396;
    font-family: var(--font-mono);
    font-size: 11px;
}

.captaincy-xpts-block { min-width: 70px; padding-left: 14px; border-left: 1px solid #2c3d35; text-align: right; }
.captaincy-xpts-block strong { display: block; color: var(--fpl-accent); font-family: var(--font-mono); font-size: 28px; line-height: 1; }
.captaincy-spotlight-differential .captaincy-xpts-block strong { color: #f9d243; }
.captaincy-xpts-block span { color: #8ba396; font-family: var(--font-mono); font-size: 11px; }

.captaincy-fixtures { display: flex; flex-wrap: wrap; gap: 5px; }
.captaincy-fixture-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 7px; border: 1px solid #30433a; border-radius: 4px; background: #111613; color: #dfe4e0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; white-space: nowrap; }
.captaincy-fdr { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 2px; color: #07100b; font-size: 10px; font-weight: 900; }
.captaincy-fdr-1 { background: var(--fdr-1); }
.captaincy-fdr-2 { background: var(--fdr-2); }
.captaincy-fdr-3 { background: var(--fdr-3); }
.captaincy-fdr-4 { background: var(--fdr-4); }
.captaincy-fdr-5 { background: var(--fdr-5); color: #fff; }

.captaincy-explanation { min-height: 62px; margin: 16px 0; color: #b9cbb9; font-size: 13px; line-height: 1.55; }
.captaincy-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid #2c3d35; }
.captaincy-metrics > div { min-width: 0; padding: 12px 10px 0 0; text-align: center; }
.captaincy-metrics span { display: block; overflow: hidden; color: #789083; font-family: var(--font-mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.captaincy-metrics strong { display: block; margin-top: 2px; overflow: hidden; color: #fff; font-family: var(--font-mono); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.captaincy-rankings { overflow: hidden; border: 1px solid #2c3d35; border-radius: 8px; background: #171c19; }
.captaincy-rankings-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid #2c3d35; }
.captaincy-rankings-header h2 { margin: 0; color: #fff; font-size: 18px; letter-spacing: 0; }
.captaincy-rankings-header .captaincy-kicker { margin: 0; }
.captaincy-model-inputs { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.captaincy-model-inputs span { padding: 2px 6px; border: 1px solid #30433a; border-radius: 3px; color: #8ba396; font-family: var(--font-mono); font-size: 10px; }

.captaincy-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.captaincy-table th { height: 34px; padding: 0 8px; border-bottom: 1px solid #2c3d35; background: #111613; color: #789083; font-family: var(--font-mono); font-size: 11px; line-height: 1; text-align: center; vertical-align: middle; }
.captaincy-table th:nth-child(2), .captaincy-table th:nth-child(3) { text-align: left; }
.captaincy-table th:first-child, .captaincy-table td:first-child { width: 48px; }
.captaincy-table th:nth-child(2), .captaincy-table td:nth-child(2) { width: 220px; }
.captaincy-table th:nth-child(3), .captaincy-table td:nth-child(3) { width: 150px; }
.captaincy-table td { height: 56px; padding: 6px 8px; border-bottom: 1px solid #25332c; color: #cfd8d2; line-height: 1.2; text-align: center; vertical-align: middle; }
.captaincy-table td:nth-child(3) { text-align: left; }
.captaincy-table tbody tr:last-child td { border-bottom: 0; }
.captaincy-rank { display: inline-flex; width: 25px; height: 25px; align-items: center; justify-content: center; border: 1px solid #355044; border-radius: 4px; color: #b9cbb9; font-family: var(--font-mono); font-weight: 800; }
.captaincy-table-player { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; text-align: left; }
.captaincy-table-player-info { min-width: 0; }
.captaincy-table-player strong { display: flex; align-items: center; gap: 4px; min-height: 16px; overflow: hidden; color: #fff; font-size: 12px; line-height: 1.2; text-overflow: ellipsis; }
.captaincy-table-player-info > span { display: block; margin-top: 2px; color: #789083; font-family: var(--font-mono); font-size: 10px; line-height: 1.2; }
.captaincy-row-label { display: inline-flex !important; padding: 1px 4px; border-radius: 2px; font-size: 8px !important; font-weight: 800; }
.captaincy-row-label-best { background: rgba(0, 255, 133, 0.14); color: var(--fpl-accent) !important; }
.captaincy-row-label-diff { background: rgba(249, 210, 67, 0.13); color: #f9d243 !important; }
.captaincy-table-xpts { color: var(--fpl-accent) !important; font-size: 15px; font-weight: 800; }
.captaincy-loading, .captaincy-empty, .captaincy-error { padding: 28px !important; color: #8ba396; text-align: center; }
.captaincy-error { color: var(--md-sys-color-error); }
.captaincy-disclaimer { padding: 10px 18px; border-top: 1px solid #2c3d35; color: #789083; font-size: 11px; }

/* ==================== RESPONSIVE - MOBILE ==================== */

/* Tablet and below - hide sidebar, show bottom nav */
@media (max-width: 1024px) {
    .layout-sidebar { display: none; }
    .layout-sidebar.mobile-open {
        display: block;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 280px;
        z-index: 110;
        background: var(--md-sys-color-surface);
        box-shadow: var(--elevation-3);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 105; }
    .sidebar-overlay.active { display: block; }
    #sidebar-mobile-close-btn { display: inline-flex; }
    .mobile-menu-btn { display: flex !important; }
    .mobile-menu-btn { width: 44px; height: 44px; }
    .mobile-menu-btn .material-symbols-outlined { font-size: 30px; }
    .layout-sidebar .sidebar-nav-item { min-height: 48px; padding: 10px 14px; font-size: 15px; }
    .layout-sidebar .sidebar-nav-item .material-symbols-outlined { font-size: 26px; }
    .bottom-nav { display: grid !important; }
    .layout-content { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
    .topbar-title { display: none; }

    /* Dashboard grids stack */
    .dash-main-grid { grid-template-columns: 1fr !important; }
    .dash-main-grid > div { grid-column: span 1 !important; }
    .fixtures-flex-layout { flex-direction: column !important; }
    .fixtures-flex-layout > aside { width: 100% !important; }
    .captain-bento-grid { grid-template-columns: 1fr !important; }
    .captain-bento-grid > div { grid-column: span 1 !important; }
    .captaincy-spotlights { grid-template-columns: 1fr; }
    .ownership-bento-grid { grid-template-columns: 1fr !important; }
    .tactical-layout { grid-template-columns: 1fr !important; }
    .tactical-layout > section { grid-column: span 1 !important; min-height: auto !important; }
    .team-bento-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .team-bento-2 { grid-template-columns: 1fr !important; }
    .league-bento-3 { grid-template-columns: 1fr !important; }
}

/* Mobile */
@media (max-width: 768px) {
    /* Keep controls below the phone status area in standalone and full-screen modes. */
    .topbar { box-sizing: border-box; height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0; }
    .topbar-left { gap: 8px; }
    .topbar-title { font-size: 1rem; }
    .topbar-title .material-symbols-outlined { font-size: 24px; }
    .topbar-right .btn { min-height: 40px; padding: 0 14px; font-size: 13px; }

    /* Content area - prevent page-level overflow but allow inner scroll */
    .layout-content { min-width: 0; padding: 10px; padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

    /* Dialog */
    .dialog { width: 95%; margin: 12px; }

    /* Stats and cards */
    .stat-value { font-size: 1.125rem; }
    .stat-card { padding: 8px; }

    /* Tabs */
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 8px; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { padding: 6px 10px; font-size: 0.75rem; white-space: nowrap; }

    /* Card headers */
    .card-header { padding: 8px 10px; }
    .card-body { padding: 6px 8px; }

    /* ==================== TABLE COMPACTNESS ==================== */
    /* Table font sizes on mobile */
    table { font-size: 12px !important; box-sizing: border-box; }
    th { padding: 8px 10px !important; font-size: 10px !important; white-space: nowrap; box-sizing: border-box; text-transform: uppercase; letter-spacing: 0.03em; }
    td { padding: 6px 10px !important; white-space: nowrap; box-sizing: border-box; }

    /* Wide data surfaces scroll within their own bounds. */
    .table-container,
    .players-table-wrap,
    .league-table-wrap,
    .table-scroll-mobile {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        position: relative !important;
    }

    /* Tables inside scroll wrappers use separate borders so sticky cells work. */
    .table-container table,
    .players-table-wrap table,
    .league-table-wrap table,
    .table-scroll-mobile table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    .sticky-first-column th:first-child,
    .sticky-first-column td:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 2 !important;
        box-shadow: 2px 0 rgba(255,255,255,0.1);
    }

    .sticky-first-column th:first-child { z-index: 3 !important; }
    .players-table-wrap th:first-child { background: #333333 !important; }
    .players-table-wrap td:first-child { background: #1E1E1E !important; }
    .fixture-table-wrap th:first-child { background: #202722 !important; color: #dfe4e0 !important; }
    .fixture-table-wrap td:first-child { background: #141916; }
    .setpieces-data-table th:first-child { background: #1c211e !important; }
    .setpieces-data-table td:first-child { background: #141916 !important; }
    .squad-performance-table th:first-child { background: #1c211e !important; }
    .squad-performance-table td:first-child { background: #141916 !important; }

    .sticky-rank-player th:nth-child(1),
    .sticky-rank-player td:nth-child(1) {
        position: sticky !important;
        z-index: 2 !important;
        left: 0 !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }
    .sticky-rank-player th:nth-child(1) { z-index: 4 !important; }
    .sticky-rank-player th:nth-child(2),
    .sticky-rank-player td:nth-child(2) {
        position: sticky !important;
        left: 44px !important;
        z-index: 2 !important;
        max-width: 150px !important;
        min-width: 120px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-shadow: 2px 0 rgba(255,255,255,0.08);
    }
    .sticky-rank-player th:nth-child(2) { z-index: 3 !important; }
    .league-table-wrap th:first-child, .league-table-wrap td:first-child { background: #022B1E !important; }
    .league-table-wrap th:nth-child(2) { background: #07372A !important; }
    .league-table-wrap td:nth-child(2) { background: #022B1E !important; }
    .captaincy-table th:first-child { background: #111613 !important; }
    .captaincy-table td:first-child { background: #171c19 !important; }
    .captaincy-table th:nth-child(2) { background: #1d221f !important; }
    .captaincy-table td:nth-child(2) { background: #171c19 !important; }
    .ownership-data-table th:first-child { background: #2A2A2A !important; }
    .ownership-data-table td:first-child { background: #1E1E1E !important; }
    .ownership-data-table th:nth-child(2) { background: #333333 !important; }
    .ownership-data-table td:nth-child(2) { background: #1E1E1E !important; }

    .table-compact table,
    .dashboard-selection-table {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Dashboard grid full width */
    .dash-stat-banner { padding: 14px 10px !important; }
    .dash-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 10px !important; }
    .dash-stat-item { min-width: 0; padding: 8px 4px !important; }
    .dash-stat-item:nth-child(2) { border-right: 0 !important; }
    .dash-stat-item:nth-child(-n+2) { border-bottom: 1px solid #1A2E28; }
    #dash-countdown { font-size: 15px !important; white-space: nowrap; }

    .players-table-wrap td:first-child { max-width: 150px !important; }
    .players-table-player-meta { flex-wrap: wrap; white-space: normal !important; line-height: 1.2; }
    .players-table-price-separator { display: none; }
    .players-table-price { flex-basis: 100%; padding-top: 1px; }

    .dash-main-grid > div {
        min-width: 0 !important;
    }

    section {
        min-width: 0 !important;
    }

    /* Bottom nav - bigger touch targets */
    .bottom-nav-item { min-width: 0; padding: 0 2px; }
    .bottom-nav-item .material-symbols-outlined { font-size: 26px; }
    .bottom-nav-item span:last-child { font-size: 11px; font-weight: 600; }

    /* Pitch */
    .pitch { min-height: 300px; }

    /* ==================== DASHBOARD STATS BANNER ==================== */
    .dash-stat-banner { padding: 14px 10px !important; }
    .dash-stat-title { margin-bottom: 10px !important; }
    .dash-stat-title h1 { font-size: 18px !important; }
    .dash-stat-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
    }
    .dash-stat-item {
        padding: 8px 4px !important;
        border-right: none !important;
    }
    .dash-stat-item:nth-child(1),
    .dash-stat-item:nth-child(2) {
        border-bottom: 1px solid #1A2E28 !important;
    }
    .dash-stat-item:nth-child(odd) {
        border-right: 1px solid #1A2E28 !important;
    }
    .dash-stat-item div[style*="font-size:20px"],
    .dash-stat-item div[style*="font-size:18px"] {
        font-size: 16px !important;
    }

    /* Player filter bar */
    .player-filter-bar { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
    .player-filter-bar > div { min-width: 0; max-width: 100%; justify-content: center !important; flex-wrap: wrap !important; }

    /* Position summary grid */
    .team-bento-4 { grid-template-columns: 1fr !important; }
    .team-bento-2 { grid-template-columns: 1fr !important; }
    .league-bento-3 { grid-template-columns: 1fr !important; }

    /* Section spacing */
    section { margin-bottom: 16px !important; }

    /* Buttons and interactive elements - bigger touch targets */
    button, select, input { min-height: 40px; }

    .captaincy-header { align-items: center !important; text-align: center; }
    .captaincy-header > div:first-child { width: 100%; }
    .captaincy-header .page-subtitle { margin-inline: auto; }
    .captaincy-controls { width: min(100%, 260px); margin: 0 auto; grid-template-columns: 1fr; justify-items: center; }
    .captaincy-controls label { text-align: center; }
    .captaincy-controls select { width: 100%; }
    .captaincy-controls select { text-align: center; text-align-last: center; }
    .captaincy-model-status { grid-column: 1; width: 100%; text-align: center; }
    .captaincy-spotlights { gap: 10px; }
    .captaincy-spotlight { padding: 14px; }
    .captaincy-player-lead { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; }
    .captaincy-player-photo { width: 52px; height: 60px; }
    .captaincy-player-heading { text-align: center; }
    .captaincy-player-heading h2 { font-size: 19px; text-align: center; }
    .captaincy-player-meta, .captaincy-player-heading .captaincy-fixtures { justify-content: center; }
    .captaincy-xpts-block { min-width: 58px; padding-left: 8px; }
    .captaincy-xpts-block strong { font-size: 23px; }
    .captaincy-explanation { min-height: 0; font-size: 12px; }
    .captaincy-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .captaincy-rankings-header { align-items: center; flex-direction: column; text-align: center; }
    .captaincy-model-inputs { justify-content: center; }
    .captaincy-table { min-width: 760px !important; }
    .captaincy-table th:first-child, .captaincy-table td:first-child { width: 44px !important; min-width: 44px !important; max-width: 44px !important; }
    .squad-performance-table { min-width: 680px !important; }
    .players-data-table { min-width: 880px !important; }
    .ownership-data-table { min-width: 840px !important; }
}

/* Tactics desk */
#content-zones {
    max-width: 1500px;
    margin: 0 auto;
    padding-bottom: 48px;
}

.tactics-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 0 24px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.tactics-page-header h1,
.tactics-section-heading h2,
.tactics-team-heading h2,
.tactics-center-heading h2,
.tactics-target-heading h2 {
    color: var(--md-sys-color-on-surface);
    font-family: var(--font-display);
    letter-spacing: 0;
}

.tactics-page-header h1 {
    margin: 4px 0 6px;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.05;
}

.tactics-page-header p {
    max-width: 680px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 14px;
    line-height: 1.55;
}

.tactics-kicker {
    color: var(--md-sys-color-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tactics-gw-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 148px;
    padding: 10px 12px;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--radius-md);
}

.tactics-gw-control span {
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.tactics-gw-control select {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: transparent;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 800;
}

.tactics-gw-control select:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

.tactics-fixture-section,
.tactics-target-section {
    margin-top: 24px;
    padding: 20px 0 22px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.tactics-section-heading,
.tactics-team-heading,
.tactics-target-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.tactics-section-heading h2,
.tactics-team-heading h2,
.tactics-center-heading h2,
.tactics-target-heading h2 {
    margin: 3px 0 0;
    font-size: 21px;
    line-height: 1.1;
}

.tactics-muted-label {
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tactics-fixture-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.tactics-fixture-card {
    display: flex;
    min-width: 0;
    min-height: 92px;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--radius-md);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.tactics-fixture-card:hover,
.tactics-fixture-card.is-selected {
    border-color: var(--md-sys-color-primary);
    background: var(--fpl-accent-dim);
}

.tactics-fixture-card:hover { transform: translateY(-1px); }

.tactics-fixture-card:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.tactics-fixture-time,
.tactics-fixture-meta {
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
}

.tactics-fixture-teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
}

.tactics-fixture-teams strong { color: var(--md-sys-color-primary); font-family: var(--font-mono); font-size: 11px; }
.tactics-fixture-team { display: flex; min-width: 0; align-items: center; gap: 6px; }
.tactics-fixture-team b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tactics-fixture-team.is-away { flex-direction: row-reverse; text-align: right; }

.tactics-fdr-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 31px;
    padding: 3px 5px;
    border-radius: var(--radius-sm);
    color: #07100b;
    font-size: 10px;
    font-weight: 800;
}

.tactics-status {
    min-height: 20px;
    padding-top: 12px;
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--font-mono);
    font-size: 11px;
}

.tactics-status.is-loading { color: var(--md-sys-color-primary); }
.tactics-status.is-error { color: var(--md-sys-color-error); }
.tactics-inline-empty { padding: 18px 0; color: var(--md-sys-color-on-surface-variant); font-size: 13px; }

.tactics-analysis { padding-top: 8px; }

.tactics-match-hero {
    margin: 14px 0 20px;
    padding: 20px 24px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--radius-lg);
    background: linear-gradient(105deg, rgba(0,255,133,0.08), rgba(41,86,231,0.08));
}

.tactics-match-kicker {
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.tactics-match-teams {
    display: grid;
    grid-template-columns: 1fr 160px 1fr;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
}

.tactics-match-team {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
}

.tactics-match-team img { width: 34px; height: 34px; object-fit: contain; }
.tactics-match-team span { color: var(--md-sys-color-on-surface-variant); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; }
.tactics-match-away { justify-content: flex-end; text-align: right; }

.tactics-match-score { text-align: center; }
.tactics-match-score b { display: block; color: var(--md-sys-color-primary); font-family: var(--font-mono); font-size: 24px; }
.tactics-match-score span { color: var(--md-sys-color-on-surface-variant); font-size: 11px; }

.tactical-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.8fr) minmax(0, 1.1fr);
    gap: 16px;
    align-items: start;
}

.tactics-team-panel,
.tactics-center-panel,
.tactics-target-team {
    min-width: 0;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--md-sys-color-surface-container);
}

.tactics-team-panel,
.tactics-center-panel { padding: 18px; }

.tactics-team-heading { align-items: center; }
.tactics-defcon-pill {
    padding: 5px 7px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.tactics-defcon-pill.strong { background: rgba(0,255,133,0.14); color: var(--md-sys-color-primary); }
.tactics-defcon-pill.average { background: rgba(249,210,67,0.14); color: #F9D243; }
.tactics-defcon-pill.weak { background: rgba(226,28,61,0.14); color: #FF6B7D; }

.tactics-pitch {
    display: flex;
    min-height: 360px;
    flex-direction: column;
    justify-content: space-around;
    gap: 20px;
    padding: 24px 16px;
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--radius-md);
    background-color: var(--pitch-green);
    background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 48px 48px;
}

.tactics-pitch-row { display: flex; min-width: 100%; justify-content: center; gap: 16px; }

.tactics-player-card {
    display: flex;
    width: 88px;
    min-width: 88px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px 6px;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 6px;
    background: rgba(7, 24, 13, 0.9);
    color: #fff;
    text-align: center;
}

.tactics-player-card.home { border-color: rgba(0,255,133,0.7); }
.tactics-player-card.away { border-color: rgba(237,17,128,0.75); }
.tactics-player-shirt { width: 42px; height: 48px; overflow: hidden; }
.tactics-player-shirt img { width: 100%; height: 100%; object-fit: contain; }
.tactics-player-copy { width: 100%; min-width: 0; text-align: center; }
.tactics-player-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tactics-player-copy b { font-size: 11px; line-height: 1.2; }

.tactics-team-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 12px;
}

.tactics-team-stats div { padding: 8px 4px; border-top: 1px solid var(--md-sys-color-outline-variant); text-align: center; }
.tactics-team-stats span { display: block; color: var(--md-sys-color-on-surface-variant); font-family: var(--font-mono); font-size: 9px; line-height: 1.2; }
.tactics-team-stats b { display: block; margin-top: 3px; color: var(--md-sys-color-on-surface); font-family: var(--font-mono); font-size: 14px; }

.tactics-edge-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.tactics-edge { padding: 8px; border-left: 2px solid; background: var(--md-sys-color-surface-container-high); }
.tactics-edge.is-positive { border-color: var(--md-sys-color-primary); }
.tactics-edge.is-negative { border-color: #F0613D; }
.tactics-edge span, .tactics-edge b { display: block; }
.tactics-edge span { color: var(--md-sys-color-on-surface-variant); font-family: var(--font-mono); font-size: 9px; font-weight: 700; }
.tactics-edge b { margin-top: 3px; color: var(--md-sys-color-on-surface); font-size: 12px; }

.tactics-center-panel { display: flex; min-height: 100%; flex-direction: column; gap: 12px; }
.tactics-center-heading { margin-bottom: 2px; }
.tactics-read-block { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 12px; border-left: 2px solid; background: var(--md-sys-color-surface-container-high); }
.tactics-read-block.is-danger { border-color: #FF005A; }
.tactics-read-block.is-warning { border-color: #F9D243; }
.tactics-read-block > .material-symbols-outlined { font-size: 20px; }
.tactics-read-block.is-danger > .material-symbols-outlined { color: #FF668C; }
.tactics-read-block.is-warning > .material-symbols-outlined { color: #F9D243; }
.tactics-read-label { display: block; color: var(--md-sys-color-on-surface-variant); font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.tactics-read-block b { display: block; margin-top: 4px; color: var(--md-sys-color-on-surface); font-size: 13px; }
.tactics-read-block p, .tactics-verdict p { margin-top: 5px; color: var(--md-sys-color-on-surface-variant); font-size: 12px; line-height: 1.45; }

.tactics-defcon-compare { padding: 12px; border-top: 1px solid var(--md-sys-color-outline-variant); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.tactics-compare-label { display: flex; justify-content: space-between; gap: 8px; color: var(--md-sys-color-on-surface-variant); font-family: var(--font-mono); font-size: 10px; }
.tactics-compare-label b { color: var(--md-sys-color-on-surface); font-size: 15px; }
.tactics-compare-bar { display: flex; height: 6px; margin: 9px 0 7px; overflow: hidden; border-radius: 3px; background: var(--md-sys-color-surface); }
.tactics-compare-bar i:first-child { background: var(--md-sys-color-primary); }
.tactics-compare-bar i:last-child { background: var(--fpl-pink); }
.tactics-defcon-compare small { color: var(--md-sys-color-on-surface-variant); font-size: 11px; line-height: 1.4; }
.tactics-verdict { margin-top: auto; padding: 12px; border: 1px solid rgba(0,255,133,0.22); background: var(--fpl-accent-dim); }
.tactics-verdict b { display: block; margin-top: 5px; color: var(--md-sys-color-on-surface); font-size: 16px; }

.tactics-target-section { margin-top: 20px; border-bottom: 0; }
.tactics-target-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tactics-target-team { padding: 16px; }
.tactics-target-heading { align-items: center; }
.tactics-target-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tactics-target-group { min-width: 0; padding-top: 10px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.tactics-group-heading { display: flex; align-items: center; gap: 6px; color: var(--md-sys-color-on-surface); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
.tactics-group-heading .material-symbols-outlined { color: var(--md-sys-color-primary); font-size: 17px; }
.tactics-target-player { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.tactics-target-player:last-child { border-bottom: 0; }
.tactics-target-main { display: flex; align-items: center; gap: 8px; }
.tactics-target-main .tactics-player-card { display: grid; width: auto; min-width: 0; flex: 1; grid-template-columns: 32px minmax(0, 1fr); align-items: center; justify-items: start; gap: 7px; padding: 0; border: 0; background: transparent; text-align: left; }
.tactics-target-main .tactics-player-shirt { width: 32px; height: 35px; }
.tactics-target-main .tactics-player-copy b { font-size: 12px; }
.tactics-target-main > strong { color: var(--md-sys-color-primary); font-family: var(--font-mono); font-size: 15px; }
.tactics-target-player p { margin: 7px 0; color: var(--md-sys-color-on-surface-variant); font-size: 11px; line-height: 1.4; }
.tactics-target-metrics { display: flex; flex-wrap: wrap; gap: 5px 9px; color: var(--md-sys-color-on-surface-variant); font-family: var(--font-mono); font-size: 11px; }
.tactics-target-metrics .is-primary { color: var(--md-sys-color-primary); font-weight: 800; }

.tactics-empty-state { padding: 70px 20px; color: var(--md-sys-color-on-surface-variant); text-align: center; }
.tactics-empty-state .material-symbols-outlined { color: var(--md-sys-color-outline-variant); font-size: 52px; }
.tactics-empty-state p { margin-top: 12px; font-size: 13px; }

@media (max-width: 1100px) {
    .tactical-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr); }
    .tactics-center-panel { grid-column: 1 / -1; grid-row: 2; }
    .tactics-target-groups { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    #content-zones { padding-bottom: 28px; }
    .tactics-page-header { align-items: stretch; flex-direction: column; gap: 16px; }
    .tactics-gw-control { width: 100%; }
    .tactics-fixture-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tactics-fixture-card { min-height: 86px; padding: 10px; }
    .tactics-fixture-teams { font-size: 12px; }
    .tactics-fixture-team > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tactics-match-hero { padding: 16px 12px; }
    .tactics-match-teams { grid-template-columns: 1fr; gap: 10px; }
    .tactics-match-team, .tactics-match-away { justify-content: center; text-align: center; }
    .tactics-match-home { order: 1; }
    .tactics-match-score { order: 2; }
    .tactics-match-away { order: 3; }
    .tactical-layout { grid-template-columns: 1fr; }
    .tactics-center-panel { grid-column: auto; grid-row: auto; }
    .tactics-target-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .tactics-fixture-list { grid-template-columns: 1fr; }
    .tactics-team-panel { padding: 12px; }
    .tactics-pitch { padding-inline: 8px; gap: 14px; }
    .tactics-pitch-row { gap: 10px; }
    .tactics-pitch .tactics-player-card { width: 76px; min-width: 76px; }
    .tactics-pitch .tactics-player-shirt { width: 36px; height: 40px; }
    .tactics-team-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tactics-edge-list { grid-template-columns: 1fr; }
}

/* Small mobile */
@media (max-width: 480px) {
    .stat-value { font-size: 1rem; }
    .page-title { font-size: 1.125rem; }
    .captaincy-player-meta { font-size: 9px; }
    .captaincy-player-heading h2 { font-size: 17px; }
    .captaincy-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bottom-nav-item .material-symbols-outlined { font-size: 24px; }
    .bottom-nav-item span:last-child { font-size: 11px; font-weight: 600; }
    .bottom-nav-item { padding: 0 1px; }
    .layout-content { padding: 8px; padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

    /* Even more compact tables on small screens */
    table { font-size: 11px !important; }
    th { padding: 6px 8px !important; font-size: 9px !important; }
    td { padding: 5px 8px !important; }

    /* Position summary cards - compact on small screens */
    .team-bento-4 > div { padding: 12px !important; }

    /* Dashboard title */
    .dash-stat-banner h1 { font-size: 18px !important; }
}

/* ==================== PAGE-SPECIFIC MOBILE FIXES ==================== */

/* League page - filter bar stacking */
@media (max-width: 768px) {
    #content-league > div:first-child {
        gap: 12px !important;
    }
    #content-league > div:first-child > div:last-child {
        flex-direction: column !important;
        width: 100% !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    #content-league select,
    #content-league input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    #content-league .league-bento-3 {
        grid-template-columns: 1fr !important;
    }
    /* League stats bento cards */
    #content-league .league-bento-3 > div {
        padding: 16px !important;
    }
    #content-league .league-bento-3 > div > div:first-child > div:first-child {
        font-size: 10px !important;
    }
    #content-league .league-bento-3 > div > div > div:first-child + div {
        font-size: 1.75rem !important;
    }
    /* League table */
    #content-league .league-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #content-league table {
        min-width: 600px !important;
    }
    /* Pagination */
    #content-league > div:last-child > div:last-child {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
}

/* Fixtures page - sidebar stacking */
@media (max-width: 1024px) {
    .fixtures-flex-layout {
        flex-direction: column !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: clip;
    }
    .fixtures-flex-layout > div {
        width: 100% !important;
        min-width: 0 !important;
    }
    .fixtures-flex-layout > aside {
        width: 100% !important;
        max-width: 100% !important;
        order: 2;
    }
    .fixtures-flex-layout > aside > div {
        max-height: none !important;
    }
    .fixtures-controls {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    .fixtures-control-groups {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .fixtures-start-control,
    .fixtures-lookahead-control {
        width: 100% !important;
    }
    .fixtures-lookahead-control {
        flex-wrap: wrap;
    }
    .fixtures-lookahead-buttons {
        width: 100% !important;
        justify-content: stretch !important;
    }
    .fixtures-lookahead-buttons > button {
        flex: 1 !important;
        min-height: 40px;
        padding: 8px !important;
        font-size: 12px !important;
    }
    .fixtures-fdr-legend {
        width: 100% !important;
        justify-content: center !important;
    }
    /* Fixture table mobile */
    .fixtures-flex-layout .table-scroll-mobile {
        margin: 0 !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
    }
    .fixtures-flex-layout .table-scroll-mobile table {
        width: calc(62px + (var(--fixture-columns, 5) * 76px)) !important;
        min-width: calc(62px + (var(--fixture-columns, 5) * 76px)) !important;
        table-layout: fixed;
    }
    .fixtures-flex-layout .table-scroll-mobile th,
    .fixtures-flex-layout .table-scroll-mobile td {
        padding: 4px 5px !important;
        font-size: 10px !important;
    }
    .fixtures-flex-layout .table-scroll-mobile th:first-child,
    .fixtures-flex-layout .table-scroll-mobile td:first-child {
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
        position: sticky !important;
        left: 0 !important;
        z-index: 3 !important;
    }
    .fixture-grid-table th:not(:first-child),
    .fixture-grid-table td:not(:first-child) {
        width: 76px !important;
        min-width: 76px !important;
    }
}

/* Tactics/Zones - header controls stacking */
@media (max-width: 768px) {
    #content-zones > div:first-child > div:last-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    #content-zones > div:first-child > div:last-child > div {
        width: 100% !important;
    }
    #content-zones > div:first-child > div:last-child > span {
        display: none !important;
    }
    /* Tactical layout grid */
    .tactical-layout {
        grid-template-columns: 1fr !important;
    }
    .tactical-layout > section {
        min-height: auto !important;
    }
    /* Best picks row */
    #match-analysis-content > div:last-child {
        grid-template-columns: 1fr !important;
    }
}

/* Captaincy - hero card responsive */
@media (max-width: 768px) {
    .captain-bento-grid {
        grid-template-columns: 1fr !important;
    }
    .captain-bento-grid > div:first-child {
        grid-column: span 1 !important;
    }
    .captain-bento-grid > div:last-child {
        grid-column: span 1 !important;
        flex-direction: column !important;
    }
    /* Hero card layout */
    .captain-bento-grid > div:first-child > div {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 16px !important;
    }
    .captain-bento-grid > div:first-child > div > div:last-child {
        min-width: 100% !important;
    }
    .captain-bento-grid > div:first-child > div > div:last-child > div:first-child {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    /* Hero player name */
    .captain-bento-grid > div:first-child > div > div:last-child > h2 {
        font-size: 1.25rem !important;
        text-align: center !important;
    }
    /* Hero description */
    .captain-bento-grid > div:first-child > div > div:last-child > p {
        text-align: center !important;
    }
    /* Hero metrics grid */
    .captain-bento-grid > div:first-child > div > div:last-child > div:last-child {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        text-align: center !important;
    }
    /* Secondary cards */
    .captain-bento-grid > div:last-child > div {
        flex-direction: column !important;
        flex: none !important;
        padding: 12px !important;
    }
    /* Captain table header */
    #content-captain > div:last-child > div:first-child {
        padding: 12px 16px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
}

/* Ownership - filter/search toolbar */
@media (max-width: 768px) {
    #content-ownership > div:first-child > div:last-child {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    #content-ownership .ownership-bento-grid {
        grid-template-columns: 1fr !important;
    }
    #content-ownership .ownership-bento-grid > div {
        min-width: 100% !important;
    }
    /* Search and sort inputs */
    #content-ownership input[type="text"],
    #content-ownership select {
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    /* Position filter buttons */
    .ownership-position-filter {
        flex-wrap: wrap !important;
        width: 100%;
    }
    .ownership-position-filter > button {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .ownership-search-row {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .ownership-search-row > input,
    .ownership-search-row > select {
        width: 100% !important;
        max-width: 100% !important;
        height: 40px !important;
    }
}

/* Player Stats - filter bar */
@media (max-width: 768px) {
    .tab-content,
    .player-filter-bar,
    .player-filter-bar > div {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .player-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .player-filter-bar > h1 {
        font-size: 24px !important;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .player-filter-bar > div {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    .player-filter-bar > div > div {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    /* Position filter buttons */
    .player-position-filter {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
    }
    .player-position-filter > button {
        flex: 0 0 auto !important;
        min-width: 56px !important;
        min-height: 40px;
    }
}

/* Page header - general responsive */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .page-title {
        font-size: 1.5rem !important;
    }
    .page-subtitle {
        font-size: 0.8125rem !important;
    }
}

/* Set Pieces table */
@media (max-width: 768px) {
    #setpieces-table-container > div {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #setpieces-table-container table {
        min-width: 920px !important;
    }
}

/* Dashboard - responsive grid */
@media (max-width: 768px) {
    .dash-main-grid {
        grid-template-columns: 1fr !important;
    }
    .dash-main-grid > div {
        grid-column: span 1 !important;
    }
    /* Dashboard stat banner */
    .dash-stat-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    /* Section spacing */
    #content-general > div {
        margin-bottom: 16px !important;
    }
    #content-general > div:last-child {
        margin-bottom: 0 !important;
    }
}

/* Team Analysis - responsive bento grids */
@media (max-width: 768px) {
    .team-bento-4 {
        grid-template-columns: 1fr !important;
    }
    .team-bento-4 > div {
        min-height: auto !important;
        padding: 16px !important;
    }
    .team-bento-2 {
        grid-template-columns: 1fr !important;
    }
    /* Position summary cards */
    .team-bento-4 > div > div:last-child > div:first-child {
        font-size: 22px !important;
    }
}

/* Small mobile - even more compact */
@media (max-width: 480px) {
    /* League */
    #content-league .league-bento-3 > div > div > div:first-child + div {
        font-size: 1.5rem !important;
    }
    #content-league .league-bento-3 > div > div > div:first-child {
        font-size: 9px !important;
    }
    /* Captaincy */
    .captain-bento-grid > div:first-child > div > div:last-child > div:last-child {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .captain-bento-grid > div:first-child > div > div:last-child > h2 {
        font-size: 1.1rem !important;
    }
    /* Player stats */
    .player-filter-bar > div > div:last-child > button {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    .player-filter-bar > h1 {
        font-size: 20px !important;
    }
    /* Team bento */
    .team-bento-4 {
        grid-template-columns: 1fr !important;
    }
    .team-bento-4 > div {
        padding: 12px !important;
    }
    .team-bento-4 > div > div:last-child > div:first-child {
        font-size: 18px !important;
    }
    /* Dashboard stat items */
    .dash-stat-item > div:first-child {
        font-size: 8px !important;
    }
    .dash-stat-item > div:last-child {
        font-size: 14px !important;
    }
    .fixtures-lookahead-buttons > button {
        padding: 8px 6px !important;
        font-size: 11px !important;
    }
    /* Ownership */
    .ownership-search-row > input,
    .ownership-search-row > select {
        height: 38px !important;
        font-size: 12px !important;
    }
}

/* ==================== END RESPONSIVE ==================== */

@media (max-width: 768px) {
    .dialog-footer { flex-wrap: wrap; }
    .settings-save-row { flex-direction: column; }
    .settings-save-row > * { width: 100%; }
    .pixel-loader-container { max-width: calc(100vw - 24px); }
    .pixel-loader-label { min-width: 0; white-space: normal !important; }
}

@media (max-width: 360px) {
    .dialog-footer .btn { width: 100%; }
    .bottom-nav-item span:last-child { font-size: 10px; }
}

/* Animate In */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-in {
    animation: fadeIn 0.3s ease forwards;
}

.animate-in-delay-1 { animation-delay: 0.05s; opacity: 0; }
.animate-in-delay-2 { animation-delay: 0.1s; opacity: 0; }
.animate-in-delay-3 { animation-delay: 0.15s; opacity: 0; }
.animate-in-delay-4 { animation-delay: 0.2s; opacity: 0; }

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

/* Pulse for live data */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.pulse { animation: pulse 2s infinite; }

/* Connect button special style */
.connect-btn {
    background: var(--md-sys-color-primary);
    color: #000;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.connect-btn:hover { box-shadow: 0 0 24px rgba(0, 255, 133, 0.4); }

/* History Section */
.history-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--fpl-accent-dim);
    color: var(--md-sys-color-primary);
    border: 1px solid rgba(0, 255, 133, 0.3);
}

/* Number formatting */
[data-number] {
    font-variant-numeric: tabular-nums;
}

/* Link style */
a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Ownership colors */
.own-high { color: var(--md-sys-color-primary); }
.own-mid { color: var(--fdr-3); }
.own-low { color: var(--fdr-4); }
.own-none { color: var(--md-sys-color-on-surface-variant); }

/* Differential colors */
.diff-green { color: var(--fdr-1); }
.diff-yellow { color: var(--fdr-3); }
.diff-orange { color: var(--fdr-4); }
.diff-red { color: var(--fdr-5); }

/* League rank */
.rank-1 { color: #FFD700; }
.rank-2 { color: #C0C0C0; }
.rank-3 { color: #CD7F32; }

/* Number column center alignment */
td.num-col, th.num-col {
    text-align: center;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Select/dropdown visibility on dark background */
select.input,
select {
    appearance: none;
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23B0B0B0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}
select.input:focus,
select:focus {
    border-color: var(--md-sys-color-primary);
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 1px;
}
select.input option,
select option {
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}




/* ==================== PIXEL GRID LOADER ==================== */
@keyframes pixel-on {
    0%, 100% { opacity: 0.15; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.15); background-color: #00FF85; box-shadow: 0 0 10px rgba(0, 255, 133, 0.8); }
}

@keyframes shimmer-text {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.pixel-loader-container {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: rgba(20, 29, 24, 0.85);
    border: 1px solid rgba(0, 255, 133, 0.25);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.pixel-grid {
    display: grid;
    grid-template-columns: repeat(3, 5px);
    gap: 3px;
}

.pixel-dot {
    width: 5px;
    height: 5px;
    background-color: #00FF85;
    border-radius: 1px;
    opacity: 0.15;
    animation: pixel-on 650ms ease-in-out infinite;
}

/* Chevron wavefront delay timing for 3x3 grid */
.pixel-dot:nth-child(1) { animation-delay: 90ms; }
.pixel-dot:nth-child(2) { animation-delay: 180ms; }
.pixel-dot:nth-child(3) { animation-delay: 270ms; }
.pixel-dot:nth-child(4) { animation-delay: 0ms; }
.pixel-dot:nth-child(5) { animation-delay: 90ms; }
.pixel-dot:nth-child(6) { animation-delay: 180ms; }
.pixel-dot:nth-child(7) { animation-delay: 90ms; }
.pixel-dot:nth-child(8) { animation-delay: 180ms; }
.pixel-dot:nth-child(9) { animation-delay: 270ms; }

.pixel-loader-label {
    background: linear-gradient(90deg, #6c8577 35%, #00FF85 50%, #6c8577 65%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer-text 1.4s linear infinite;
    font-weight: 600;
    font-size: 13.5px;
    font-family: var(--font-body);
    white-space: nowrap;
}

.pixel-loader-timer {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #8ba396;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Install Prompt Bottom Sheet */
.install-prompt-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.install-prompt-sheet {
    background: #1a1a1a;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 420px;
    padding: 16px 24px 32px;
    text-align: center;
    animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.install-prompt-handle {
    width: 36px;
    height: 4px;
    background: #444;
    border-radius: 999px;
    margin: 0 auto 20px;
}

.install-prompt-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 255, 133, 0.15);
}

.install-prompt-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.install-prompt-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.install-prompt-tagline {
    font-size: 0.875rem;
    color: var(--fpl-accent);
    font-weight: 600;
    margin-bottom: 12px;
}

.install-prompt-desc {
    font-size: 0.8125rem;
    color: #999;
    line-height: 1.5;
    margin-bottom: 24px;
    padding: 0 8px;
}

.install-prompt-desc strong {
    color: #ccc;
}

.install-prompt-actions {
    display: flex;
    gap: 12px;
}

.install-prompt-btn {
    flex: 1;
    padding: 14px 16px;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.install-prompt-btn-secondary {
    background: transparent;
    color: #999;
    border: 1.5px solid #333;
}

.install-prompt-btn-secondary:hover {
    border-color: #555;
    color: #ccc;
}

.install-prompt-btn-primary {
    background: var(--fpl-accent);
    color: #000;
}

.install-prompt-btn-primary:hover {
    background: #33ff9e;
    transform: scale(1.02);
}

.install-prompt-btn-primary:active {
    transform: scale(0.98);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (min-width: 768px) {
    .install-prompt-sheet {
        border-radius: 20px;
        margin-bottom: 24px;
    }
}

/* ==================== AI TEAM PAGE ==================== */
.aiteam-page { max-width: 1180px; margin: 0 auto; }
    .aiteam-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 20px; border-bottom: 1px solid #1A2E28; flex-wrap: wrap; }
.aiteam-hero-title { margin: 0; color: #fff; font: 800 30px var(--font-display); letter-spacing: 0; }
.aiteam-hero-sub { max-width: 680px; margin: 7px 0 0; color: #9ab2a5; font-size: 13px; line-height: 1.55; }
.aiteam-engine-state { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; color: var(--fpl-accent); font: 700 11px var(--font-mono); text-transform: uppercase; }
.aiteam-engine-state .material-symbols-outlined { font-size: 19px; }
.aiteam-controls { display: flex; align-items: center; gap: 14px; min-height: 58px; margin-bottom: 22px; border-bottom: 1px solid #1A2E28; }
.aiteam-advanced-toggle { color: #8ba396; font-size: 12px; }
.aiteam-advanced-toggle summary { min-height: 40px; padding: 11px 0; cursor: pointer; font-weight: 700; }
.aiteam-advanced-options { display: flex; gap: 12px; padding: 0 0 14px; }
.aiteam-control-group {
    display: grid;
    gap: 6px;
    text-align: center;
}
.aiteam-control-group label {
    color: #8ba396;
    font: 700 10px var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.aiteam-control-group input,
.aiteam-control-group select {
    min-height: 40px;
    border: 1px solid #294138;
    border-radius: 8px;
    background-color: #0E1A14;
    color: #fff;
    padding: 8px 12px;
    font: 700 13px var(--font-mono);
    text-align: center;
    min-width: 100px;
}
.aiteam-control-group input { width: 80px; }
.aiteam-refresh-btn, .aiteam-secondary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(0,255,133,.45); border-radius: 6px; background: rgba(0,255,133,.1); color: var(--fpl-accent); font: 700 12px var(--font-body); cursor: pointer; }
.aiteam-refresh-btn:hover, .aiteam-secondary-btn:hover { background: rgba(0,255,133,.17); }
.aiteam-refresh-btn:focus-visible, .aiteam-secondary-btn:focus-visible, .aiteam-status-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.aiteam-refresh-btn .material-symbols-outlined { font-size: 18px; }

.aiteam-loading {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.aiteam-loading.hidden { display: none; }
.aiteam-results.hidden { display: none; }
.aiteam-error.hidden { display: none; }
.aiteam-error { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 12px; padding: 18px; margin-bottom: 22px; border: 1px solid rgba(255,77,77,.35); background: rgba(255,77,77,.08); color: #ffaaaa; }
.aiteam-error strong { color: #fff; }
.aiteam-error p { margin: 4px 0 12px; }

/* Summary Cards */
.aiteam-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom: 30px; border-block: 1px solid #1A2E28; }
.aiteam-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 17px 18px;
    border: 0;
    border-right: 1px solid #1A2E28;
    background: transparent;
    text-align: left;
    justify-content: center;
}
.aiteam-card:last-child { border-right: 0; }
.aiteam-status-card { width: 100%; color: inherit; font-family: inherit; cursor: pointer; }
.aiteam-status-card:hover { background: rgba(255,255,255,.025); }
.aiteam-card-icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 10px;
    flex-shrink: 0;
}
.aiteam-card-icon .material-symbols-outlined { font-size: 22px; }
.aiteam-card-data { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; text-align: left; }
.aiteam-card-value {
    font: 800 20px var(--font-mono);
    color: #fff;
    line-height: 1.1;
}
.aiteam-card-label {
    margin-top: 3px;
    font: 600 10px var(--font-mono);
    color: #8ba396;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
}

/* Section Headers */
.aiteam-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.aiteam-section-header h2 { margin: 0; font-size: 18px; color: #fff; }
.aiteam-section-header h2 span { margin-left: 7px; color: var(--fpl-accent); font: 700 12px var(--font-mono); }
.aiteam-pitch-tools { display: flex; align-items: center; gap: 12px; }
.aiteam-kicker { display: none; }

/* Pitch Section */
.aiteam-pitch-section {
    margin-bottom: 28px;
}
.aiteam-pitch-wrapper { overflow: hidden; border: 1px solid #315443; background: #0b2d1c; border-radius: 10px; }
.aiteam-pitch { width: 100%; min-width: 0; }
.aiteam-pitch .tactics-pitch { min-height: 520px; padding: 28px 20px; border: 0; border-radius: 0; overflow: visible; }
.aiteam-pitch .tactics-pitch-row { width: 100%; min-width: 0; margin-inline: auto; gap: clamp(8px, 1.5vw, 20px); padding-inline: 2px; }
.aiteam-pitch .tactics-player-card { width: min(92px, calc((100% - ((var(--players) - 1) * clamp(8px, 1.5vw, 20px))) / var(--players))); min-width: 0; max-width: 92px; min-height: 114px; justify-content: flex-start; padding: 7px 5px; overflow: hidden; }
.aiteam-pitch .tactics-player-shirt { position: relative; width: 42px; height: 46px; }

/* Pitch card internal layout */
.aiteam-pitch-card { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.aiteam-pitch-name { font-size: 11px; color: #fff; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.aiteam-pitch-name.is-captain { color: #FFD700; }
.aiteam-pitch-cost { font: 700 10px var(--font-mono); color: #B0B0B0; }
.aiteam-pitch-xpts { font: 700 11px var(--font-mono); color: #00FF85; margin: 1px 0; }
.aiteam-fixture-block { display: flex; flex-direction: column; gap: 1px; width: 100%; }
.aiteam-fixture-row { display: flex; align-items: center; justify-content: center; gap: 4px; }
.aiteam-fixture-opp { font: 700 8px var(--font-mono); letter-spacing: -0.02em; }
.aiteam-fixture-xpts { font: 700 8px var(--font-mono); color: #00FF85; }

.aiteam-shirt-fallback { display: none; color: #91a99b; font: 800 11px var(--font-mono); }
.tactics-player-shirt.is-missing .aiteam-shirt-fallback, .aiteam-bench-shirt-img.is-missing .aiteam-shirt-fallback, .tactics-player-shirt:not(:has(img)) .aiteam-shirt-fallback, .aiteam-bench-shirt-img:not(:has(img)) .aiteam-shirt-fallback { display: block; }

/* Bench */
.aiteam-bench { padding: 14px 16px 16px; border-top: 1px solid #315443; background: #101b15; border-radius: 0 0 10px 10px; }
.aiteam-bench-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: #8ba396;
    font: 700 11px var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.aiteam-bench-label .material-symbols-outlined { font-size: 16px; }
.aiteam-bench-players {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.aiteam-bench-slot { display: grid; min-height: 112px; grid-template-columns: 22px 40px minmax(0,1fr); align-items: start; gap: 9px; min-width: 0; padding: 10px; border: 1px solid #223a2e; background: #0E1A14; border-radius: 6px; }
.aiteam-bench-order { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #315443; border-radius: 50%; color: #9ab2a5; font: 700 10px var(--font-mono); }
.aiteam-bench-shirt-img { display: grid; width: 40px; height: 44px; place-items: center; overflow: hidden; flex-shrink: 0; background: rgba(0,0,0,0.15); border-radius: 4px; }
.aiteam-bench-info { display: flex; min-width: 0; height: 100%; flex-direction: column; }
.aiteam-bench-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; }
.aiteam-bench-name {
    font: 600 12px var(--font-body);
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aiteam-bench-position { color: #8ba396; font: 700 8px var(--font-mono); }
.aiteam-bench-club {
    font: 500 9px var(--font-mono);
    color: #8ba396;
}
.aiteam-bench-metrics { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 5px; color: #9ab2a5; font: 600 9px var(--font-mono); }
.aiteam-bench-metrics strong { color: #00FF85; font-size: 10px; }
.aiteam-bench .aiteam-fixture-block { display: flex; flex-direction: column; gap: 1px; }
.aiteam-bench .aiteam-fixture-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.aiteam-bench .aiteam-fixture-opp { font: 700 8px var(--font-mono); letter-spacing: -0.02em; }
.aiteam-bench .aiteam-fixture-xpts { font: 700 8px var(--font-mono); color: #00FF85; }

    /* --- AI Team Tab Bar --- */
    .aiteam-tab-bar { display: flex; gap: 2px; border-bottom: 1px solid #1A2E28; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
    .aiteam-tab-bar::-webkit-scrollbar { display: none; }
    .aiteam-tab { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border: none; border-bottom: 2px solid transparent; background: transparent; color: #8ba396; font: 600 12px var(--font-mono); cursor: pointer; white-space: nowrap; transition: all var(--transition-fast); }
    .aiteam-tab:hover { color: #fff; background: rgba(255,255,255,0.03); }
    .aiteam-tab.active { color: var(--fpl-accent); border-bottom-color: var(--fpl-accent); }
    .aiteam-tab .material-symbols-outlined { font-size: 16px; }
    .aiteam-view { display: none; }
    .aiteam-view.active { display: block; }

    /* --- Compact Summary --- */
    .aiteam-summary { display: flex; gap: 1px; margin-bottom: 0; background: #1A2E28; border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
    .aiteam-summary .aiteam-card { flex: 1; min-width: 0; background: #141916; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border: none; border-radius: 0; }
    .aiteam-summary .aiteam-card-icon { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; }
    .aiteam-summary .aiteam-card-icon .material-symbols-outlined { font-size: 18px; }
    .aiteam-summary .aiteam-card-data { min-width: 0; }
    .aiteam-summary .aiteam-card-value { font: 700 16px var(--font-mono); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .aiteam-summary .aiteam-card-label { font-size: 10px; color: #8ba396; white-space: nowrap; }
    .aiteam-summary .aiteam-status-card { cursor: pointer; transition: background var(--transition-fast); }
    .aiteam-summary .aiteam-status-card:hover { background: rgba(255,255,255,0.03); }

    /* --- Formation & Captain inline --- */
    .aiteam-formation-badge { padding: 4px 10px; border: 1px solid rgba(0,255,133,.4); border-radius: 20px; background: rgba(0,255,133,.1); color: #00ff85; font: 800 13px var(--font-mono); }
    .aiteam-captain-inline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8ba396; }
    .aiteam-captain-inline strong { color: #FFD700; font-size: 13px; }
    .aiteam-captain-inline .material-symbols-outlined { font-size: 14px; color: #FFD700; }

    /* --- GW Selector Pills --- */
    .aiteam-gw-selector { display: flex; gap: 4px; flex-wrap: wrap; }
    .aiteam-gw-pill { padding: 5px 10px; border: 1px solid #294138; border-radius: 4px; background: #101b15; color: #8ba396; cursor: pointer; font: 700 11px var(--font-mono); transition: all var(--transition-fast); }
    .aiteam-gw-pill:hover { border-color: #00ff85; color: #fff; }
    .aiteam-gw-pill.active { border-color: #00ff85; background: rgba(0,255,133,.13); color: #00ff85; }

    /* --- Transfer Suggestions --- */
    .aiteam-transfer-suggest { background: #141916; border: 1px solid #1A2E28; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
    .aiteam-transfer-suggest-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #1A2E28; background: rgba(255,255,255,0.02); }
    .aiteam-transfer-suggest-header h3 { margin: 0; font-size: 14px; color: #fff; display: flex; align-items: center; gap: 6px; }
    .aiteam-transfer-suggest-header .reason { font-size: 11px; color: #8ba396; font-weight: 400; }
    .aiteam-transfer-option { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background var(--transition-fast); }
    .aiteam-transfer-option:last-child { border-bottom: 0; }
    .aiteam-transfer-option:hover { background: rgba(255,255,255,0.02); }
    .aiteam-transfer-player { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .aiteam-transfer-player .out { color: #ff4d4d; }
    .aiteam-transfer-player .in { color: #00FF85; }
    .aiteam-transfer-player-name { font-size: 12px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aiteam-transfer-player-meta { font-size: 10px; color: #8ba396; }
    .aiteam-transfer-gain { font: 700 12px var(--font-mono); white-space: nowrap; }
    .aiteam-transfer-gain.positive { color: #00FF85; }
    .aiteam-transfer-gain.negative { color: #ff4d4d; }
    .aiteam-transfer-apply { padding: 6px 12px; border: 1px solid rgba(0,255,133,.4); border-radius: 4px; background: rgba(0,255,133,.1); color: #00FF85; font: 600 10px var(--font-body); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; }
    .aiteam-transfer-apply:hover { background: rgba(0,255,133,.2); }
    .aiteam-empty-state { text-align: center; padding: 40px 20px; color: #8ba396; }
    .aiteam-empty-state .material-symbols-outlined { font-size: 40px; opacity: 0.4; display: block; margin-bottom: 8px; }

    /* --- Bench inline --- */
    .aiteam-bench { padding: 14px 16px 16px; border-top: 1px solid #315443; background: #101b15; border-radius: 0 0 10px 10px; margin-top: -1px; }

/* Captain Pick */
.aiteam-captain-pick { display: grid; justify-items: end; gap: 2px; text-align: right; }
.aiteam-captain-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(255,215,0,0.12);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 6px;
    color: #FFD700;
    font: 700 10px var(--font-mono);
    letter-spacing: 0.06em;
}
.aiteam-captain-badge .material-symbols-outlined { font-size: 14px; }

/* Squad Table */
.aiteam-squad-section { margin-bottom: 28px; }
.aiteam-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    white-space: nowrap;
    background: #141916;
    border: 1px solid #1A2E28;
    border-radius: 10px;
    overflow: hidden;
}
.aiteam-table thead tr {
    background: #1c211e;
    border-bottom: 1px solid #1A2E28;
}
.aiteam-table th {
    padding: 12px;
    color: #8ba396;
    font: 700 10px var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
}
.aiteam-table td {
    padding: 10px 12px;
    text-align: center;
    color: #E0E0E0;
    vertical-align: middle;
}
.aiteam-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.06); }
.aiteam-table tbody tr:last-child td { border-bottom: 0; }
.aiteam-rank-cell { color: #8ba396; font: 500 12px var(--font-mono); text-align: center; }
.aiteam-player-cell { text-align: left !important; }
.aiteam-table-player { display: flex; min-width: 0; align-items: center; gap: 10px; }
.aiteam-table-player-name { color: #fff; font-size: 13px; font-weight: 600; }
.aiteam-table-player-club { color: #8ba396; font-size: 11px; }
.aiteam-gw-player { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 7px; }
.aiteam-gw-position { font: 700 9px var(--font-mono); }
.aiteam-gw-player-copy { display: grid; min-width: 0; gap: 1px; }
.aiteam-gw-player-copy strong { overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; }
.aiteam-gw-player-copy small { overflow: hidden; color: #8ba396; font-size: 9px; text-overflow: ellipsis; }
.aiteam-gw-cell { min-width: 92px; padding: 7px 8px !important; text-align: center; font: 600 12px var(--font-mono); }
.aiteam-gw-cell strong, .aiteam-gw-fixture { display: block; }
.aiteam-gw-fixture { min-height: 13px; margin-bottom: 2px; font-size: 9px; }
.aiteam-total-cell { min-width: 74px; background: rgba(0,255,133,0.06) !important; color: #00FF85 !important; font: 700 12px var(--font-mono) !important; text-align: center !important; }

/* GW Breakdown */
.aiteam-gw-section { margin-bottom: 28px; }

/* Chip Strategy */
.aiteam-chips-section { margin-bottom: 28px; }
.aiteam-chips-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.aiteam-chip-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 18px 14px;
    background: #141916;
    border: 1px solid #1A2E28;
    border-radius: 6px;
    transition: border-color 0.2s;
}
.aiteam-chip-card:hover { border-color: #315443; }
.aiteam-chip-icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(0,255,133,0.08);
    color: var(--fpl-accent);
}
.aiteam-chip-icon .material-symbols-outlined { font-size: 22px; }
.aiteam-transfer-move { display: grid; width: 100%; grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr); align-items: center; gap: 5px; padding: 7px 0; border-top: 1px solid #22352c; color: #ffaaaa; font-size: 11px; }
.aiteam-transfer-move strong { color: var(--fpl-accent); font-weight: 700; }
.aiteam-transfer-move small { display: block; margin-top: 2px; color: #8ba396; font-size: 9px; }
.aiteam-transfer-move .material-symbols-outlined { color: #8ba396; font-size: 15px; }
.aiteam-chip-confidence {
    margin-top: 4px;
    font: 600 10px var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* GW View Toggle */
.aiteam-gw-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border: 1px solid #294138;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
}
.aiteam-gw-toggle-btn {
    min-height: 40px;
    padding: 0 20px;
    border: 0;
    background: transparent;
    color: #8ba396;
    font: 700 12px var(--font-body);
    cursor: pointer;
    transition: all 0.2s;
}
.aiteam-gw-toggle-btn:hover {
    background: rgba(255,255,255,0.04);
}
.aiteam-gw-toggle-btn.active {
    background: #00FF85;
    color: #0a0f0d;
}

/* Position Legend */
.aiteam-position-legend {
    display: flex;
    gap: 12px;
}

/* Responsive */
@media (max-width: 900px) {
    .aiteam-summary { grid-template-columns: repeat(2, 1fr); }
    .aiteam-card:nth-child(2) { border-right: 0; }
    .aiteam-card:nth-child(-n+2) { border-bottom: 1px solid #1A2E28; }
    .aiteam-chips-grid { grid-template-columns: repeat(2, 1fr); }
    .aiteam-bench-players { grid-template-columns: repeat(2, 1fr); }
    .aiteam-roster-scroll,
    .aiteam-gw-scroll {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #1A2E28;
        border-radius: 8px;
        scrollbar-color: #315443 #141916;
        scrollbar-width: thin;
    }
    .aiteam-roster-table,
    .aiteam-gw-table {
        width: max-content !important;
        min-width: 100% !important;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    .aiteam-table thead { position: static; }
    .aiteam-table thead th { position: sticky; top: 0; z-index: 4; background: #1c211e; }
    .aiteam-roster-table .aiteam-player-cell,
    .aiteam-gw-table .aiteam-player-cell {
        position: sticky !important;
        left: 0 !important;
        z-index: 3 !important;
        width: 164px !important;
        min-width: 164px !important;
        max-width: 164px !important;
        background: #141916 !important;
        box-shadow: 2px 0 6px rgba(0,0,0,0.35);
    }
    .aiteam-roster-table thead .aiteam-player-cell,
    .aiteam-gw-table thead .aiteam-player-cell { z-index: 6 !important; background: #1c211e !important; }
}
@media (max-width: 600px) {
    .aiteam-hero { align-items: flex-start; flex-direction: column; gap: 12px; }
    .aiteam-hero-title { font-size: 25px; }
    .aiteam-hero-sub { font-size: 12px; }
    .aiteam-summary { flex-direction: column; }
    .aiteam-summary .aiteam-card { padding: 10px 12px; }
    .aiteam-transfer-option { grid-template-columns: 1fr; gap: 8px; }
    .aiteam-tab { padding: 8px 10px; font-size: 11px; }
    .aiteam-tab .material-symbols-outlined { font-size: 14px; }
    .aiteam-gw-selector { gap: 3px; }
    .aiteam-gw-pill { padding: 4px 8px; font-size: 10px; }
    .aiteam-section-header { align-items: stretch; flex-direction: column; text-align: center; }
    .aiteam-section-header h2 { text-align: center; }
    .aiteam-pitch-tools { display: grid; width: 100%; gap: 10px; }
    .aiteam-captain-pick { justify-items: center; text-align: center; }
    .aiteam-chips-grid { grid-template-columns: 1fr; }
    .aiteam-bench { padding: 12px 8px 14px; }
    .aiteam-bench-players { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .aiteam-bench-slot { min-height: 126px; grid-template-columns: 20px 32px minmax(0,1fr); gap: 6px; padding: 8px; }
    .aiteam-bench-order { width: 20px; height: 20px; }
    .aiteam-bench-shirt-img { display: grid; width: 32px; height: 36px; }
    .aiteam-bench-shirt-img img, .tactics-player-shirt img { display: block; width: 100%; height: 100%; object-fit: contain; }
    .aiteam-bench-name { font-size: 11px; }
    .aiteam-bench-club { min-height: 22px; white-space: normal; line-height: 1.2; }
    .aiteam-bench-metrics { align-items: flex-start; flex-direction: column; gap: 1px; margin-top: 4px; }
    .aiteam-bench .aiteam-fixture-block { margin-top: auto; padding-top: 5px; }
    .aiteam-control-group input,
    .aiteam-control-group select { min-width: auto; width: 100%; }
    .aiteam-gw-toggle { width: 100%; }
    .aiteam-gw-toggle-btn { flex: 1; min-height: 44px; font-size: 13px; }
    .aiteam-hero-sub { max-width: 100%; overflow-wrap: anywhere; }
    .aiteam-pitch .tactics-player-card { width: calc((100% - ((var(--players) - 1) * 3px)) / var(--players)); min-width: 0; max-width: none; min-height: 96px; padding: 4px 2px; border-radius: 5px; }
    .aiteam-pitch .tactics-player-shirt { width: 28px; height: 31px; }
    .aiteam-pitch .tactics-pitch { min-height: 380px; padding: 12px 5px; }
    .aiteam-pitch .tactics-pitch-row { gap: 3px; padding-inline: 0; }
    .aiteam-pitch .aiteam-pitch-name { font-size: 8px; min-height: 20px; overflow: hidden; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .aiteam-pitch .aiteam-pitch-cost { font-size: 8px; }
    .aiteam-pitch .aiteam-pitch-xpts { font-size: 9px; margin: 0; }
    .aiteam-pitch .aiteam-fixture-opp { font-size: 7px; }
    .aiteam-pitch .aiteam-fixture-xpts { font-size: 7px; }

    /* === AI TEAM TABLES: MOBILE SCROLL + STICKY PLAYER NAME === */
    .aiteam-roster-scroll,
    .aiteam-gw-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin;
        border-radius: 10px;
    }
    .aiteam-roster-scroll::-webkit-scrollbar,
    .aiteam-gw-scroll::-webkit-scrollbar { height: 4px; }
    .aiteam-roster-scroll::-webkit-scrollbar-track,
    .aiteam-gw-scroll::-webkit-scrollbar-track { background: #141916; }
    .aiteam-roster-scroll::-webkit-scrollbar-thumb,
    .aiteam-gw-scroll::-webkit-scrollbar-thumb { background: #294138; border-radius: 2px; }

    .aiteam-roster-table { min-width: 600px !important; }
    .aiteam-gw-table { min-width: max-content !important; }

    /* Hide less important columns on mobile */
    .aiteam-roster-table th:nth-child(1), .aiteam-roster-table td:nth-child(1),
    .aiteam-roster-table th:nth-child(5), .aiteam-roster-table td:nth-child(5),
    .aiteam-roster-table th:nth-child(7), .aiteam-roster-table td:nth-child(7),
    .aiteam-roster-table th:nth-child(9), .aiteam-roster-table td:nth-child(9),
    .aiteam-roster-table th:nth-child(10), .aiteam-roster-table td:nth-child(10) { display: none; }

    /* Player cell text wrapping */
    .aiteam-roster-table td:nth-child(2) > div { gap: 6px !important; }
    .aiteam-roster-table td:nth-child(2) > div > div { min-width: 0; }
    .aiteam-gw-table td:first-child span { display: grid !important; grid-template-columns: auto minmax(0,1fr); gap: 2px 5px !important; white-space: normal; line-height: 1.2; }
    .aiteam-position-legend { justify-content: center; flex-wrap: wrap; }
}

/* ==================== TEAM BUILDER ==================== */
.tb-page { max-width: 1280px; margin: 0 auto; color: #e8f0eb; }
.tb-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 14px 0 20px; border-bottom: 1px solid #1a2e28; }
.tb-heading h1 { margin: 0; color: #fff; font: 800 30px var(--font-display); letter-spacing: 0; }
.tb-heading p, .tb-horizon p { margin: 6px 0 0; color: #9ab2a5; font-size: 13px; }
.tb-heading-actions { display: flex; align-items: center; gap: 8px; }
.tb-tab-bar { display: flex; gap: 2px; border-bottom: 1px solid #1A2E28; margin-bottom: 0; overflow-x: auto; scrollbar-width: none; background: #0f1a14; padding: 0 4px; }
.tb-tab-bar::-webkit-scrollbar { display: none; }
.tb-tab { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 18px; border: none; border-bottom: 2px solid transparent; background: transparent; color: #6e8d7b; font: 600 12px var(--font-mono); cursor: pointer; white-space: nowrap; transition: all var(--transition-fast); flex: 1; min-width: 0; }
.tb-tab:hover { color: #fff; background: rgba(255,255,255,0.04); }
.tb-tab.active { color: var(--fpl-accent); border-bottom-color: var(--fpl-accent); background: rgba(0,255,133,0.04); }
.tb-tab .material-symbols-outlined { font-size: 17px; }
.tb-view { display: none; }
.tb-view.active { display: block; }
.tb-tab-summary { display: flex; gap: 1px; margin-bottom: 16px; background: #1A2E28; border-radius: 8px; overflow: hidden; }
.tb-tab-summary .tb-summary-card { flex: 1; min-width: 0; background: #141916; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.tb-tab-summary .tb-summary-icon { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; }
.tb-tab-summary .tb-summary-icon .material-symbols-outlined { font-size: 17px; }
.tb-tab-summary .tb-summary-data { min-width: 0; }
.tb-tab-summary .tb-summary-value { font: 700 15px var(--font-mono); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-tab-summary .tb-summary-label { font-size: 10px; color: #8ba396; white-space: nowrap; }
.tb-workspace-squad { display: block; }
.tb-workspace-squad .tb-squad-panel { position: static; width: 100%; }
.tb-import-zone { padding: 40px 20px; text-align: center; }
.tb-upload-zone-lg { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px; border: 2px dashed #294138; border-radius: 10px; cursor: pointer; transition: all 0.2s; color: #8ba396; }
.tb-upload-zone-lg:hover, .tb-upload-zone-lg.drag-over { border-color: #00FF85; color: #00FF85; background: rgba(0,255,133,0.03); }
.tb-upload-zone-lg strong { color: #fff; font-size: 16px; }
.tb-import-note { display: flex; gap: 12px; padding: 16px; margin-top: 16px; border: 1px solid #294138; border-radius: 8px; background: rgba(255,255,255,0.02); }
.tb-import-note .material-symbols-outlined { color: #4FC3F7; flex-shrink: 0; }
.tb-import-note strong { color: #fff; font-size: 13px; }
.tb-import-note p { color: #8ba396; font-size: 12px; margin: 4px 0 0; }
.tb-btn, .tb-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border-radius: 6px; cursor: pointer; font: 700 12px var(--font-body); }
.tb-btn { padding: 0 14px; }
.tb-btn-secondary, .tb-icon-btn { border: 1px solid #294138; background: #101b15; color: #d9e8de; }
.tb-btn-secondary:hover, .tb-icon-btn:hover { border-color: #00ff85; color: #00ff85; }
.tb-icon-btn { width: 40px; padding: 0; }
.tb-horizon { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid #1a2e28; margin-bottom: 8px; }
.tb-horizon h2, .tb-panel-heading h2 { margin: 0; color: #fff; font-size: 16px; }
.tb-horizon h2 { font-size: 14px; }
.tb-gw-selector { display: flex; gap: 5px; flex-wrap: wrap; justify-content: end; }
.tb-gw-btn { display: grid; place-items: center; width: 48px; height: 44px; border: 1px solid #294138; border-radius: 5px; background: #101b15; color: #8ba396; cursor: pointer; font: 800 14px var(--font-mono); line-height: 1; }
.tb-gw-btn span { color: #5c7868; font-size: 8px; letter-spacing: .08em; }
.tb-gw-btn:hover { border-color: #00ff85; color: #fff; }
.tb-gw-btn.active { border-color: #00ff85; background: rgba(0,255,133,.13); color: #00ff85; }
.tb-preferences { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 18px; border-bottom: 1px solid #1a2e28; }
.tb-preferences-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.tb-preferences-head h2 { margin: 0; color: #fff; font-size: 14px; }
.tb-preferences-head p { margin: 4px 0 0; color: #8ba396; font-size: 12px; line-height: 1.5; max-width: 560px; }
.tb-preferences-samples { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: #5c7868; }
.tb-pref-sample { padding: 5px 9px; border: 1px dashed #2a4438; border-radius: 20px; background: #0f1a14; color: #7fd4a6; cursor: pointer; font: 600 10px var(--font-body); }
.tb-pref-sample:hover { border-color: #00ff85; color: #00ff85; }
.tb-preferences-row { display: flex; align-items: stretch; gap: 10px; }
.tb-preferences-input { flex: 1; resize: vertical; min-height: 48px; padding: 12px 14px; border: 1px solid #294138; border-radius: 6px; background: #0e1a14; color: #e8f0eb; font: 500 12.5px var(--font-body); line-height: 1.5; }
.tb-preferences-input:focus { outline: 0; border-color: #00ff85; box-shadow: 0 0 0 3px rgba(0,255,133,.12); }
.tb-preferences-input::placeholder { color: #557261; }
.tb-preferences-feedback { font-size: 12px; line-height: 1.55; color: #b9cfc2; min-height: 18px; }
.tb-pref-ok { color: #7fd4a6; font-weight: 600; }
.tb-pref-warn { color: #e8c37b; font-weight: 600; }
.tb-loading { padding: 70px 0; text-align: center; color: #8ba396; font: 600 12px var(--font-mono); }
.tb-message-error { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 20px 0; border: 1px solid rgba(255,77,77,.4); background: rgba(255,77,77,.08); color: #ffb5b5; padding: 14px; }
.tb-workspace { display: grid; grid-template-columns: minmax(330px, .88fr) minmax(0, 1.45fr); gap: 18px; padding-top: 18px; align-items: start; }
.tb-squad-panel, .tb-market-panel, .tb-breakdown { background: #141916; border: 1px solid #1a2e28; border-radius: 8px; }
.tb-squad-actions { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #1a2e28; }
.tb-btn-autofill { flex: 1; border: 1px solid #7c4dff; background: rgba(124,77,255,0.14); color: #cbb6ff; }
.tb-btn-autofill:hover { border-color: #9d7bff; background: rgba(124,77,255,0.24); color: #e3d7ff; }
.tb-squad-actions .tb-btn-secondary { flex: 1; }
.tb-squad-pitch { padding: 0; }
.tb-squad-pitch .tactics-pitch { min-height: 420px; padding: 24px 16px; border: 0; border-radius: 0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 48px 48px; }
.tb-squad-pitch .tactics-pitch-row { width: 100%; min-width: 0; margin-inline: auto; gap: clamp(8px, 2vw, 18px); padding-inline: 2px; justify-content: center; }
.tb-squad-pitch .tactics-player-card { width: min(100px, calc((100% - ((var(--players) - 1) * clamp(8px, 2vw, 18px))) / var(--players))); min-width: 0; max-width: 100px; min-height: 120px; justify-content: flex-start; padding: 10px 6px; overflow: hidden; position: relative; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; }
.tb-squad-pitch .tactics-player-card:hover { border-color: rgba(255,255,255,0.2); }
.tb-squad-pitch .tactics-player-card.is-pinned { border-color: rgba(0,255,133,0.5); box-shadow: 0 0 12px rgba(0,255,133,0.12); }
.tb-squad-pitch .tactics-player-card.is-captain-card { border-color: rgba(255,215,0,0.5); box-shadow: 0 0 12px rgba(255,215,0,0.1); }
.tb-squad-pitch .tactics-player-card.is-swap-selected { border-color: #00FF85; box-shadow: 0 0 20px rgba(0,255,133,0.4); animation: pulse-swap 1.5s infinite; }
.tb-squad-pitch .tactics-player-card.is-swap-eligible { border-color: rgba(0,255,133,0.5); box-shadow: 0 0 16px rgba(0,255,133,0.25); cursor: pointer; }
.tb-squad-pitch .tactics-player-card.is-swap-eligible:hover { transform: scale(1.05); border-color: #00FF85; box-shadow: 0 0 24px rgba(0,255,133,0.45); }
.tb-squad-pitch .tactics-player-card.is-bench { opacity: 0.85; min-height: 100px; max-width: 88px; }
.tb-squad-pitch .tactics-player-shirt { width: 42px; height: 46px; }
.tb-squad-pitch .aiteam-pitch-name { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tb-squad-pitch .aiteam-pitch-cost { font: 700 10px var(--font-mono); color: #B0B0B0; }
.tb-squad-pitch .aiteam-pitch-xpts { font: 700 10px var(--font-mono); color: #00FF85; }
.tb-pitch-captain-badge { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,215,0,0.2); border: 1px solid rgba(255,215,0,0.5); display: grid; place-items: center; color: #ffd700; font: 800 9px var(--font-mono); z-index: 2; }
.tb-pitch-pin-badge { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,255,133,0.15); border: 1px solid rgba(0,255,133,0.4); display: grid; place-items: center; color: #00FF85; z-index: 2; }
.tb-pitch-pin-badge .material-symbols-outlined { font-size: 11px; }
.tb-pitch-card-actions { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; padding: 3px 2px; opacity: 0; transition: opacity 0.2s; z-index: 3; background: linear-gradient(180deg, rgba(10,18,14,0.95) 0%, rgba(10,18,14,0.6) 80%, transparent 100%); border-radius: 6px 6px 0 0; }
.tb-squad-pitch .tactics-player-card:hover .tb-pitch-card-actions { opacity: 1; }
.tb-pitch-action-btn { width: 22px; height: 22px; border: none; background: rgba(255,255,255,0.08); color: #8ba396; border-radius: 4px; cursor: pointer; display: grid; place-items: center; transition: all 0.15s; padding: 0; }
.tb-pitch-action-btn .material-symbols-outlined { font-size: 13px; }
.tb-pitch-action-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.tb-pitch-action-btn.active { color: #00FF85; background: rgba(0,255,133,0.15); }
.tb-pitch-action-btn.active.captain { color: #ffd700; background: rgba(255,215,0,0.15); }
.tb-pitch-action-btn.swap-btn:hover { color: #4FC3F7; background: rgba(79,195,247,0.15); }
.tb-pitch-action-btn.replace-btn:hover { color: #c084fc; background: rgba(192,132,252,0.15); }
.tb-pitch-action-btn.danger:hover { color: #ff5252; background: rgba(255,82,82,0.15); }
.tb-pitch-swap-hint { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font: 700 8px var(--font-mono); color: #00FF85; background: rgba(0,255,133,0.1); padding: 2px 0; border-radius: 0 0 4px 4px; }
.tb-empty-pitch-card { opacity: 0.35; }
.tb-empty-pitch-card .aiteam-pitch-name { color: #557261; }
.tb-squad-pitch .tb-empty-slot { opacity: 0.5; border-style: dashed; border-color: rgba(255,255,255,0.1); cursor: pointer; transition: opacity 0.15s, border-color 0.15s; }
.tb-squad-pitch .tb-empty-slot:hover { opacity: 0.8; border-color: rgba(0,255,133,0.3); }
@keyframes pulse-swap { 0%, 100% { box-shadow: 0 0 16px rgba(0,255,133,0.3); } 50% { box-shadow: 0 0 28px rgba(0,255,133,0.6); } }
.tb-pitch-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px 0; }
.tb-formation-badge { padding: 5px 12px; border: 1px solid rgba(0,255,133,.4); border-radius: 20px; background: rgba(0,255,133,.1); color: #00ff85; font: 800 13px var(--font-mono); }
.tb-pitch-sub { color: #5c7868; font: 600 11px var(--font-body); }
.tb-bench-strip { margin: 0; border-top: 1px solid #1a2e28; padding: 14px 16px 18px; }
.tb-bench-strip .tb-pitch-sub { margin-bottom: 12px; display: block; }
.tb-bench-position-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tb-bench-position-row:last-child { margin-bottom: 0; }
.tb-bench-pos-label { color: #5c7868; font: 700 9px var(--font-mono); min-width: 30px; text-transform: uppercase; }
.tb-bench-players-row { display: flex; gap: 10px; flex-wrap: wrap; --players: 1; }
.tb-bench-players-row .tactics-player-card { width: min(88px, calc((100% - ((var(--players) - 1) * 10px)) / var(--players))); min-width: 0; max-width: 88px; min-height: 100px; }
.tb-squad-list-grouped { display: flex; flex-direction: column; gap: 0; }
.tb-squad-position-group { border-bottom: 1px solid #1a2e28; padding: 0; }
.tb-squad-position-group:last-child { border-bottom: 0; }
.tb-squad-position-label { padding: 10px 16px 6px; color: #5c7868; font: 700 10px var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
.tb-squad-bench-label { color: #8ba396; }
.tb-squad-position-items { display: flex; flex-direction: column; gap: 6px; padding: 4px 16px 12px; }
.tb-squad-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #121824; border: 1px solid #1a2233; border-radius: 6px; padding: 10px 14px; transition: border-color 0.15s, box-shadow 0.15s; }
.tb-squad-item:hover { border-color: #294138; }
.tb-squad-item.pinned { border-color: rgba(0,255,133,0.4); box-shadow: 0 0 8px rgba(0,255,133,0.1); }
.tb-squad-item.is-bench { opacity: 0.7; }
.tb-squad-item-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.tb-squad-item-text { min-width: 0; }
.tb-squad-item-name-row { display: flex; align-items: center; gap: 5px; }
.tb-squad-item-name { font-weight: 700; color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-squad-pin-icon { font-size: 14px; color: #00FF85; }
.tb-squad-item-meta-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.tb-squad-item-cost { font-size: 11px; color: #64748b; }
.tb-squad-item-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tb-squad-item-xpts { color: #00FF85; font-weight: 700; font-size: 11px; font-family: var(--font-mono); }
.tb-squad-item-actions .tb-btn-icon { background: none; border: none; color: #5c7868; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; }
.tb-squad-item-actions .tb-btn-icon:hover { background: rgba(255,255,255,0.06); color: #fff; }
.tb-squad-item-actions .tb-btn-icon.active { color: #00FF85; }
.tb-squad-item-actions .tb-btn-icon.danger:hover { color: #ff5252; background: rgba(255,82,82,0.1); }
.tb-squad-item-actions .tb-btn-icon .material-symbols-outlined { font-size: 16px; }
@media (max-width: 600px) { .tb-squad-pitch .tactics-player-card { width: calc((100% - ((var(--players) - 1) * 3px)) / var(--players)); min-width: 0; max-width: none; min-height: 88px; padding: 5px 3px; border-radius: 5px; } .tb-squad-pitch .tactics-player-shirt { width: 30px; height: 34px; } .tb-squad-pitch .tactics-pitch { min-height: 320px; padding: 14px 8px; } .tb-squad-pitch .tactics-pitch-row { gap: 3px; padding-inline: 0; } .tb-squad-pitch .aiteam-pitch-name { font-size: 8px; min-height: 16px; overflow: hidden; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .tb-squad-pitch .aiteam-pitch-cost { font-size: 7px; } .tb-squad-pitch .aiteam-pitch-xpts { font-size: 8px; } }
.tb-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid #1a2e28; }
.tb-panel-heading span { display: block; margin-top: 4px; color: #8ba396; font-size: 11px; }
.tb-panel-heading > div:not(.tb-squad-tools):not(.tb-import-tools) { flex: 1; min-width: 0; }
.tb-squad-tools { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: auto; }
.tb-squad-tools > strong { color: #00ff85; font: 800 18px var(--font-mono); white-space: nowrap; }
.tb-budget-meter { padding: 14px 18px; border-bottom: 1px solid #1a2e28; }
.tb-budget-meter > div:first-child { display: flex; justify-content: space-between; align-items: baseline; color: #8ba396; font: 700 10px var(--font-mono); text-transform: uppercase; }
.tb-budget-meter strong { color: #fff; font-size: 14px; }
.tb-budget-meter small { display: block; margin-top: 5px; color: #6e8d7b; font: 600 10px var(--font-mono); }
.tb-budget-track { height: 5px; margin-top: 9px; overflow: hidden; background: #25372d; border-radius: 3px; }
.tb-budget-track span { display: block; height: 100%; background: #00ff85; border-radius: inherit; }
.tb-rule-strip { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid #1a2e28; justify-content: center; }
.tb-rule-strip span { padding: 4px 6px; border: 1px solid #294138; color: #9ab2a5; font: 700 9px var(--font-mono); }
.tb-rule-strip span.complete { border-color: rgba(0,255,133,.35); color: #00ff85; }
.tb-position-group { border-bottom: 1px solid #1a2e28; }
.tb-position-group:last-child { border-bottom: 0; }
.tb-position-title { display: flex; justify-content: space-between; padding: 9px 16px 5px; color: #a9c2b3; font: 800 10px var(--font-mono); letter-spacing: .06em; }
.tb-position-title small { color: #617e6d; font-weight: 600; }
.tb-squad-player, .tb-empty-slot { display: grid; grid-template-columns: 28px minmax(0,1fr) auto 28px; gap: 8px; align-items: center; min-height: 49px; padding: 5px 12px 5px 16px; }
.tb-empty-slot { grid-template-columns: 28px 1fr; color: #547260; font-size: 11px; }
.tb-empty-slot .material-symbols-outlined { font-size: 18px; }
.tb-captain-btn, .tb-remove-btn { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px; padding: 0; border: 0; background: transparent; color: #526f5e; cursor: pointer; }
.tb-captain-btn:hover, .tb-captain-btn.active { color: #ffd700; }
.tb-remove-btn { color: #637d6c; }
.tb-remove-btn:hover { color: #ff8e8e; }
.tb-captain-btn .material-symbols-outlined, .tb-remove-btn .material-symbols-outlined { font-size: 17px; }
.tb-player-identity { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-player-identity img { flex: 0 0 auto; }
.tb-player-identity > span { display: grid; min-width: 0; gap: 2px; }
.tb-player-identity b { overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tb-player-identity small { overflow: hidden; color: #7e9b89; font: 600 9px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.tb-starter-badge { display: inline-block; justify-self: start; margin-top: 2px; padding: 1px 5px; border-radius: 7px; font: 700 8px var(--font-mono); letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; }
.tb-starter-badge.is-nailed { color: #00ff85; background: rgba(0,255,133,0.12); border: 1px solid rgba(0,255,133,0.4); }
.tb-starter-badge.is-likely { color: #ffd700; background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.35); }
.tb-starter-badge.is-rotation { color: #ffa94d; background: rgba(255,169,77,0.1); border: 1px solid rgba(255,169,77,0.35); }
.tb-starter-badge.is-unknown { color: #ff6b6b; background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.35); }

.tb-player-output { display: grid; justify-items: end; gap: 1px; }
.tb-player-output strong { color: #00ff85; font: 800 12px var(--font-mono); }
.tb-player-output small { color: #6d8c7a; font: 700 8px var(--font-mono); }
.tb-save-status { min-height: 30px; padding: 8px 16px; color: #64816f; font: 600 9px var(--font-mono); }
.tb-market-controls { display: flex; align-items: center; gap: 7px; padding: 12px; border-bottom: 1px solid #1a2e28; }
.tb-search { display: flex; align-items: center; gap: 7px; flex: 1 1 auto; min-width: 140px; padding: 0 10px; border: 1px solid #294138; border-radius: 5px; background: #0e1a14; color: #6e8d7b; }
.tb-market-controls select { flex: 0 0 auto; }
.tb-search input, .tb-market-controls select { min-width: 0; height: 36px; border: 0; outline: 0; background-color: transparent; color: #e8f0eb; font: 600 11px var(--font-body); text-align: center; }
.tb-search input { width: 100%; }
.tb-market-controls select { padding: 0 8px; border: 1px solid #294138; border-radius: 5px; background-color: #0e1a14; }
.tb-market-message { min-height: 25px; padding: 7px 12px 0; color: #ffbc69; font: 600 10px var(--font-mono); }
.tb-player-list { max-height: 600px; overflow: auto; }
.tb-market-player { border-bottom: 1px solid rgba(255,255,255,.045); }
.tb-market-main { display: grid; grid-template-columns: 25px minmax(160px,1.1fr) minmax(150px,1fr) 48px; gap: 8px; align-items: center; width: 100%; min-height: 57px; padding: 6px 12px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.tb-market-main:hover, .tb-market-player.selected .tb-market-main { background: rgba(0,255,133,.07); }
.tb-market-player.blocked .tb-market-main { opacity: .45; }
.tb-add-state { color: #779987; font-size: 19px; }
.tb-market-player.selected .tb-add-state { color: #00ff85; }
.tb-fixture-run { display: flex; gap: 3px; overflow: hidden; }
.tb-fixture-run i { display: grid; place-items: center; min-width: 31px; height: 22px; padding: 0 3px; border-radius: 3px; color: #101b15; font: 800 8px var(--font-mono); font-style: normal; }
.tb-fixture-run i.blank { background: #33463b; color: #8ba396; }
.tb-market-main .tb-player-output { justify-items: end; }
.tb-breakdown { margin-top: 18px; overflow: hidden; }
.tb-breakdown-scroll { overflow-x: auto; }
.tb-breakdown table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 11px; }
.tb-breakdown th { padding: 11px 12px; color: #769383; background: #1c211e; font: 700 9px var(--font-mono); text-transform: uppercase; text-align: left; position: sticky; top: 0; z-index: 1; }
.tb-breakdown th:first-child { position: sticky; left: 0; z-index: 2; background: #1c211e; }
.tb-breakdown th:nth-child(4), .tb-breakdown th:nth-child(5) { text-align: center; }
.tb-breakdown td { padding: 11px 12px; border-top: 1px solid #1a2e28; color: #a9c2b3; vertical-align: top; white-space: nowrap; }
.tb-breakdown td:first-child { position: sticky; left: 0; background: inherit; z-index: 1; }
.tb-breakdown td:nth-child(4), .tb-breakdown td:nth-child(5) { text-align: center; }
.tb-breakdown td:nth-child(4) { font: 700 12px var(--font-mono); color: #c5d8cb; }
.tb-breakdown td small { display: block; margin-top: 3px; color: #6f8f7d; font-size: 9px; }
.tb-lineup-names { display: block; max-width: 550px; overflow: hidden; color: #c5d8cb; text-overflow: ellipsis; white-space: nowrap; }
.tb-total-cell { color: #00ff85 !important; font: 800 13px var(--font-mono); }
.tb-no-results { padding: 30px; color: #789586; text-align: center; font-size: 12px; }
.tb-hidden, .hidden { display: none !important; }
.tb-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font: 600 12px var(--font-body); color: #e8f0eb; z-index: 9999; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); white-space: nowrap; }
.tb-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.tb-toast .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.tb-toast-ok { background: rgba(0,255,133,0.15); border: 1px solid rgba(0,255,133,0.3); }
.tb-toast-ok .material-symbols-outlined { color: #00FF85; }
.tb-toast-warn { background: rgba(255,167,38,0.15); border: 1px solid rgba(255,167,38,0.3); }
.tb-toast-warn .material-symbols-outlined { color: #FFA726; }
.tb-toast-info { background: rgba(79,195,247,0.15); border: 1px solid rgba(79,195,247,0.3); }
.tb-toast-info .material-symbols-outlined { color: #4FC3F7; }
.tb-replace-suggestions { margin: 0; border-top: 1px solid #1a2e28; padding: 16px 18px; background: #111c16; }
.tb-replace-suggestions.hidden { display: none; }
.tb-replace-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tb-replace-header .material-symbols-outlined { color: #4FC3F7; font-size: 22px; flex-shrink: 0; }
.tb-replace-header div { flex: 1; min-width: 0; }
.tb-replace-header strong { display: block; color: #fff; font-size: 13px; }
.tb-replace-header span { display: block; color: #6e8d7b; font-size: 11px; margin-top: 2px; }
.tb-replace-close { background: none; border: none; color: #5c7868; cursor: pointer; padding: 4px; border-radius: 4px; display: grid; place-items: center; transition: color 0.15s; flex-shrink: 0; }
.tb-replace-close:hover { color: #fff; background: rgba(255,255,255,0.06); }
.tb-replace-close .material-symbols-outlined { font-size: 18px; }
.tb-replace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tb-replace-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: #121824; border: 1px solid #1a2233; border-radius: 6px; cursor: pointer; transition: all 0.15s; text-align: left; color: inherit; font: inherit; }
.tb-replace-card:hover { border-color: #00FF85; background: rgba(0,255,133,0.04); transform: translateY(-1px); }
.tb-replace-card-top { display: flex; align-items: center; gap: 6px; }
.tb-replace-cost { margin-left: auto; color: #64748b; font: 600 11px var(--font-mono); }
.tb-replace-name { color: #fff; font: 700 12px var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-replace-card-bottom { display: flex; justify-content: space-between; align-items: center; }
.tb-replace-xpts { color: #00FF85; font: 700 11px var(--font-mono); }
.tb-replace-value { color: #8ba396; font: 600 10px var(--font-mono); }
.tb-swap-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin: 0 16px 8px; border: 1px solid rgba(0,255,133,0.3); border-radius: 8px; background: rgba(0,255,133,0.06); color: #a9c2b3; font-size: 12px; line-height: 1.4; }
.tb-swap-banner .material-symbols-outlined { color: #00FF85; font-size: 20px; flex-shrink: 0; }
.tb-swap-banner strong { color: #fff; }
.tb-swap-cancel { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #e8f0eb; cursor: pointer; padding: 4px 10px; border-radius: 4px; font: 600 11px var(--font-body); margin-left: 8px; transition: all 0.15s; }
.tb-swap-cancel:hover { background: rgba(255,82,82,0.15); border-color: rgba(255,82,82,0.3); color: #ff5252; }
@media (max-width: 950px) { .tb-workspace { grid-template-columns: 1fr; } .tb-squad-panel { position: static; } .tb-player-list { max-height: 480px; } .tb-advisor-lineup { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 768px) { .tb-preferences-row { flex-direction: column; } .tb-rule-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tb-heading, .tb-horizon { align-items: stretch; flex-direction: column; } .tb-heading h1 { font-size: 25px; } .tb-heading-actions { justify-content: stretch; flex-wrap: wrap; } .tb-heading-actions .tb-btn { flex: 1; } .tb-heading-actions .tb-upload-zone { width: 100%; min-height: 64px; } .tb-gw-selector { justify-content: start; } .tb-market-controls { flex-wrap: wrap; } .tb-market-controls .tb-search { flex: 1 1 100%; } .tb-market-main { grid-template-columns: 23px minmax(145px,1fr) 45px; } .tb-fixture-run { display: none; } .tb-tab-bar { justify-content: center; padding: 0 2px; } .tb-tab { flex: none; min-width: 0; padding: 10px 12px; font-size: 11px; gap: 5px; } .tb-tab .material-symbols-outlined { font-size: 15px; } .tb-squad-tools { width: 100%; justify-content: space-between; } .tb-squad-tools .tb-import-view-toggle { flex: 1; } .tb-squad-tools .tb-import-view-btn { flex: 1; justify-content: center; padding: 9px 6px; } .tb-panel-heading { flex-wrap: wrap; gap: 8px; } .tb-squad-actions { flex-direction: column; } .tb-squad-actions .tb-btn { width: 100%; } .tb-import-view-toggle { width: 100%; } .tb-import-view-btn { flex: 1; justify-content: center; } .tb-squad-pitch .tactics-player-card { width: calc((100% - ((var(--players) - 1) * 4px)) / var(--players)); min-width: 0; max-width: none; min-height: 90px; padding: 6px 3px; } .tb-squad-pitch .tactics-player-shirt { width: 32px; height: 36px; } .tb-squad-pitch .tactics-pitch { min-height: 320px; padding: 14px 6px; } .tb-squad-pitch .tactics-pitch-row { gap: 4px; padding-inline: 0; } .tb-squad-pitch .aiteam-pitch-name { font-size: 8px; min-height: 16px; overflow: hidden; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .tb-squad-pitch .aiteam-pitch-cost { font-size: 8px; } .tb-squad-pitch .aiteam-pitch-xpts { font-size: 8px; } .tb-squad-pitch .is-bench { max-width: none; min-height: 80px; } .tb-squad-pitch .tb-pitch-card-actions { opacity: 1; position: static; display: flex; gap: 3px; padding: 4px 0 0; background: none; justify-content: center; } .tb-squad-pitch .tactics-player-card:hover { transform: none; } .tb-bench-position-row { gap: 6px; } .tb-bench-players-row { gap: 6px; } .tb-bench-players-row .tactics-player-card { width: calc((100% - 3 * 6px) / 4); min-width: 0; max-width: none; min-height: 80px; } .tb-squad-item { padding: 8px 10px; gap: 8px; } .tb-squad-item-name { font-size: 12px; } .tb-squad-item-xpts { font-size: 10px; } .tb-squad-item-actions .tb-btn-icon .material-symbols-outlined { font-size: 14px; } .tb-squad-position-items { padding: 4px 12px 10px; } .tb-squad-position-label { padding: 8px 12px 4px; } .tb-breakdown td:first-child { white-space: normal; min-width: 100px; max-width: 140px; } .tb-replace-grid { grid-template-columns: repeat(2, 1fr); } .tb-replace-header { flex-wrap: wrap; } }

/* Screenshot import */
.tb-btn-primary { border: 1px solid #00ff85; background: #00ff85; color: #07110c; }
.tb-btn-primary:hover { background: #38ff9f; }
.tb-btn:disabled { opacity: .42; cursor: not-allowed; }
.tb-import-panel { margin-top: 18px; border: 1px solid #315443; border-radius: 8px; background: #101b15; }
.tb-import-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #1a2e28; }
.tb-import-match { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(150px, 1.2fr) auto; align-items: center; gap: 10px; min-height: 62px; padding: 8px 12px; background: #141916; }
.tb-import-match > span { display: grid; min-width: 0; gap: 2px; }
.tb-import-match small { color: #6f8f7d; font: 600 8px var(--font-mono); text-transform: uppercase; }
.tb-import-match b { overflow: hidden; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tb-import-match em { overflow: hidden; color: #7fd4a6; font: 500 9px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.tb-import-match select { min-width: 0; height: 36px; border: 1px solid #294138; border-radius: 5px; background-color: #0e1a14; color: #e8f0eb; padding: 0 8px; font-size: 11px; }
.tb-import-match i { color: #ffbc69; font: 700 8px var(--font-mono); font-style: normal; text-transform: uppercase; }
.tb-import-match i.high, .tb-import-match i.confirmed { color: #00ff85; }
.tb-import-working { display: grid; grid-column: 1 / -1; justify-items: center; gap: 5px; padding: 36px; color: #8ba396; text-align: center; }
.tb-import-working .material-symbols-outlined { color: #00ff85; font-size: 28px; }
.tb-import-working b { color: #fff; font-size: 13px; }
.tb-import-working small { font-size: 11px; }
.tb-import-working.is-error .material-symbols-outlined { color: #ff8e8e; }
.tb-import-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 58px; padding: 9px 12px; color: #8ba396; font: 600 10px var(--font-mono); }

/* Import pitch view */
.tb-import-pitch { display: block; padding: 12px; border: 1px solid #1a2e28; border-radius: 8px; background: #0b2d1c; margin-top: 0; }
.tb-import-pitch .tactics-pitch { min-height: 320px; padding: 16px 12px; border: 0; border-radius: 0; }
.tb-import-pitch .tactics-pitch-row { width: 100%; min-width: 0; margin-inline: auto; gap: clamp(6px, 1.2vw, 16px); padding-inline: 2px; }
.tb-import-pitch .tactics-player-card { width: min(82px, calc((100% - ((var(--players) - 1) * clamp(6px, 1.2vw, 16px))) / var(--players))); min-width: 0; max-width: 82px; min-height: 100px; justify-content: flex-start; padding: 6px 4px; overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.tb-import-pitch .tactics-player-card:hover { border-color: #00ff85; transform: translateY(-2px); }
.tb-import-pitch .tactics-player-shirt { position: relative; width: 36px; height: 40px; }
.tb-import-pitch .tactics-player-copy { width: 100%; min-width: 0; }
.tb-import-pitch-card { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.tb-import-pitch-card.is-high { border-color: rgba(0,255,133,0.6); }
.tb-import-pitch-card.is-medium { border-color: rgba(255,167,38,0.5); }
.tb-import-pitch-card.is-low { border-color: rgba(255,142,142,0.4); }
.tb-import-pitch-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
.tb-import-pitch-gw { font: 700 11px var(--font-mono); color: #8ba396; text-transform: uppercase; }
.tb-import-pitch-total { font: 700 14px var(--font-mono); color: #00ff85; }
.tb-import-pitch-info { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; color: #8ba396; font-size: 11px; text-align: center; }
.tb-import-pitch-info .material-symbols-outlined { font-size: 14px; color: #FFA726; }
.tb-import-legend { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 0; color: #6f8f7d; font: 600 9px var(--font-mono); text-transform: uppercase; }
.tb-import-legend span { display: inline-flex; align-items: center; gap: 4px; }
.tb-import-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }

/* Import tools (view toggle + GW selector) */
.tb-import-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.tb-import-view-toggle { display: flex; border: 1px solid #294138; border-radius: 5px; overflow: hidden; }
.tb-import-view-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 0; background: #0e1a14; color: #8ba396; font: 700 10px var(--font-mono); cursor: pointer; transition: all 0.15s; }
.tb-import-view-btn .material-symbols-outlined { font-size: 15px; }
.tb-import-view-btn:hover { background: #1a2e28; color: #e8f0eb; }
.tb-import-view-btn.active { background: #00ff85; color: #07110c; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2); }
.tb-import-gw-toggle { display: flex; gap: 3px; }

/* Squad advisor */
.tb-advisor { margin: 18px 0; border-block: 1px solid #315443; }
.tb-advisor-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0 15px; }
.tb-advisor-heading h2 { margin: 0; color: #fff; font-size: 21px; }
.tb-advisor-heading p { margin: 5px 0 0; color: #8ba396; font-size: 12px; }
.tb-advisor-settings { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid #1a2e28; border-radius: 7px; background: #141916; }
.tb-advisor-settings > label { display: grid; justify-items: center; gap: 5px; text-align: center; color: #7e9b89; font: 700 9px var(--font-mono); text-transform: uppercase; }
.tb-advisor-settings select, .tb-advisor-settings input[type="number"] { width: 145px; height: 36px; border: 1px solid #294138; border-radius: 5px; background-color: #0e1a14; color: #fff; padding: 0 8px; text-align: center; }
.tb-advisor-settings input[type="number"] { width: 100px; }
.tb-advisor-settings fieldset { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; min-height: 36px; padding: 6px 10px; border: 1px solid #294138; border-radius: 5px; }
.tb-advisor-settings legend { padding: 0 4px; text-align: center; color: #7e9b89; font: 700 8px var(--font-mono); text-transform: uppercase; }
.tb-advisor-settings fieldset label { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 7px 12px; border: 1px solid #355044; border-radius: 5px; background: #0e1a14; color: #b6cabe; font: 700 11px var(--font-body); text-align: center; cursor: pointer; user-select: none; transition: border-color .15s, background .15s, color .15s; }
.tb-advisor-settings fieldset label:hover { border-color: #4a6355; background: #14241b; }
.tb-advisor-settings fieldset label::before { content: ''; width: 16px; height: 16px; flex: 0 0 auto; border: 1px solid #5d7768; border-radius: 4px; background: #0d1310; transition: border-color .15s, background .15s, box-shadow .15s; }
.tb-advisor-settings fieldset input[type="checkbox"] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.tb-advisor-settings fieldset label:has(input:focus-visible) { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
.tb-advisor-settings fieldset label:has(input:checked) { border-color: rgba(0,255,133,.55); background: rgba(0,255,133,.10); color: #00ff85; }
.tb-advisor-settings fieldset label:has(input:checked)::before { border-color: #00ff85; background: #00ff85; box-shadow: inset 0 0 0 4px #0e1a14; }
.tb-advisor-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center; margin-top: 14px; padding: 18px; border: 1px solid #315443; background: #0e1a14; }
.tb-advisor-summary > div > span { color: #00ff85; font: 700 9px var(--font-mono); text-transform: uppercase; }
.tb-advisor-summary.is-incomplete > div > span { color: #ffbc69; }
.tb-advisor-summary h3 { margin: 5px 0; color: #fff; font-size: 16px; }
.tb-advisor-summary p { margin: 0; color: #8ba396; font-size: 11px; }
.tb-advisor-summary > strong { display: grid; justify-items: center; color: #fff; font: 800 25px var(--font-mono); }
.tb-advisor-summary > strong small { color: #7e9b89; font-size: 8px; text-transform: uppercase; }
.tb-advisor-lineup { display: grid; grid-template-columns: .8fr .8fr 1fr 2fr; border: 1px solid #1a2e28; border-top: 0; }
.tb-advisor-lineup > div { display: grid; gap: 3px; padding: 13px 15px; border-right: 1px solid #1a2e28; }
.tb-advisor-lineup > div:last-child { border-right: 0; }
.tb-advisor-lineup span { color: #6f8f7d; font: 700 8px var(--font-mono); text-transform: uppercase; }
.tb-advisor-lineup b { color: #fff; font-size: 12px; }
.tb-advisor-lineup small { color: #00ff85; font-size: 9px; }
.tb-advice-section { margin-top: 22px; }
.tb-advice-section > h3, .tb-advice-grid h3 { margin: 0 0 10px; color: #fff; font-size: 15px; }
.tb-critique-list { border: 1px solid #1a2e28; border-radius: 7px; overflow: hidden; }
.tb-critique-row { display: grid; grid-template-columns: 180px minmax(240px,1fr) minmax(180px,.8fr); gap: 14px; align-items: center; min-height: 80px; padding: 11px 14px; border-bottom: 1px solid #1a2e28; background: #141916; }
.tb-critique-row:last-child { border-bottom: 0; }
.tb-critique-verdict { display: grid; gap: 2px; }
.tb-critique-verdict span { width: fit-content; color: #00ff85; font: 700 8px var(--font-mono); text-transform: uppercase; }
.tb-critique-row.high .tb-critique-verdict span { color: #ff8e8e; }
.tb-critique-row.medium .tb-critique-verdict span, .tb-critique-row.watch .tb-critique-verdict span { color: #ffbc69; }
.tb-critique-verdict strong { color: #fff; font-size: 13px; }
.tb-critique-verdict small { color: #718f7e; font-size: 9px; }
.tb-critique-evidence { display: grid; gap: 3px; color: #a7bbae; font-size: 10px; }
.tb-critique-evidence span::before { content: '·'; margin-right: 5px; color: #557261; }
.tb-replacement { display: flex; align-items: center; gap: 9px; color: #00ff85; }
.tb-replacement > div { display: grid; gap: 1px; }
.tb-replacement small { color: #718f7e; font: 700 8px var(--font-mono); text-transform: uppercase; }
.tb-replacement b { color: #fff; font-size: 12px; }
.tb-replacement span { font-size: 9px; }
.tb-replacement.is-hold { color: #718f7e; font-size: 10px; }
.tb-advice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.tb-advice-plan, .tb-chip-advice { padding: 13px; border: 1px solid #1a2e28; border-radius: 6px; background: #141916; }
.tb-advice-plan + .tb-advice-plan, .tb-chip-advice + .tb-chip-advice { margin-top: 7px; }
.tb-advice-plan > div span { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.tb-advice-plan del { color: #ff9c9c; }
.tb-advice-plan b { color: #00ff85; }
.tb-advice-plan > strong { display: block; margin-top: 7px; color: #fff; font: 800 14px var(--font-mono); }
.tb-advice-plan small, .tb-advice-plan p { color: #7e9b89; font-size: 9px; }
.tb-advice-plan p { margin: 6px 0 0; line-height: 1.45; }
.tb-advice-plan { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.tb-advice-plan:hover { border-color: #315443; background: #1a2e28; }
.tb-apply-hint { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: #557261; font: 600 9px var(--font-mono); text-transform: uppercase; opacity: 0; transition: opacity 0.15s; }
.tb-advice-plan:hover .tb-apply-hint { opacity: 1; color: #00ff85; }
.tb-apply-hint .material-symbols-outlined { font-size: 12px; }
.tb-import-view-switch { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border: 1px solid #315443; border-radius: 6px; background: #141916; color: #8ba396; font: 600 11px var(--font-mono); cursor: pointer; transition: all 0.15s; }
.tb-import-view-switch .material-symbols-outlined { font-size: 16px; }
.tb-import-view-switch:hover { border-color: #00ff85; color: #00ff85; background: rgba(0,255,133,0.06); }

/* File upload zone */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tb-upload-zone { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 20px; border: 1px dashed #315443; border-radius: 8px; background: #101b15; color: #8ba396; cursor: pointer; transition: all 0.2s; user-select: none; }
.tb-upload-zone .material-symbols-outlined { font-size: 22px; color: #557261; transition: color 0.2s; }
.tb-upload-zone:hover, .tb-upload-zone.drag-over { border-color: #00ff85; background: rgba(0,255,133,0.04); }
.tb-upload-zone:hover .material-symbols-outlined, .tb-upload-zone.drag-over .material-symbols-outlined { color: #00ff85; }
.tb-upload-zone:hover .tb-upload-label, .tb-upload-zone.drag-over .tb-upload-label { color: #00ff85; }
.tb-upload-label { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.5px; }
.tb-upload-hint { font: 400 9px var(--font-mono); color: #557261; }
.tb-chip-advice { display: grid; grid-template-columns: 48px minmax(100px,1fr) 40px; gap: 8px; align-items: center; }
.tb-chip-advice > span { color: #ffbc69; font: 700 8px var(--font-mono); text-transform: uppercase; }
.tb-chip-advice.hold > span { color: #8ba396; }
.tb-chip-advice > div { display: grid; }
.tb-chip-advice b { color: #fff; font-size: 11px; }
.tb-chip-advice small { color: #718f7e; font-size: 8px; }
.tb-chip-advice > strong { color: #00ff85; font: 800 12px var(--font-mono); text-align: right; }
.tb-chip-advice p { grid-column: 2 / -1; margin: 0; color: #8ba396; font-size: 9px; }
.tb-advice-empty { padding: 20px; border: 1px solid #1a2e28; color: #8ba396; text-align: center; font-size: 11px; }
.tb-advisor-notes { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 0 4px; color: #718f7e; font-size: 9px; }
.tb-advisor-notes span { display: flex; align-items: center; gap: 4px; }
.tb-advisor-notes .material-symbols-outlined { font-size: 14px; }
@media (max-width: 900px) { .tb-import-preview { grid-template-columns: 1fr; } .tb-advisor-settings { flex-wrap: wrap; } .tb-advisor-settings fieldset { width: 100%; margin-left: 0; } .tb-critique-row { grid-template-columns: 150px 1fr; } .tb-replacement { grid-column: 2; } .tb-advice-grid { grid-template-columns: 1fr; } .tb-import-tools { flex-wrap: wrap; gap: 6px; } }
@media (max-width: 600px) { .tb-heading-actions { flex-wrap: wrap; } .tb-import-match { grid-template-columns: 1fr auto; } .tb-import-match select { grid-column: 1 / -1; grid-row: 2; } .tb-import-actions, .tb-advisor-heading { align-items: stretch; flex-direction: column; } .tb-advisor-settings > label { width: calc(50% - 4px); } .tb-advisor-settings select, .tb-advisor-settings input[type="number"] { width: 100%; } .tb-advisor-lineup { grid-template-columns: 1fr 1fr; } .tb-advisor-lineup > div { border-bottom: 1px solid #1a2e28; } .tb-critique-row { grid-template-columns: 1fr; } .tb-replacement { grid-column: 1; } .tb-import-pitch .tactics-player-card { width: calc((100% - ((var(--players) - 1) * 3px)) / var(--players)); min-width: 0; max-width: none; min-height: 84px; padding: 4px 2px; border-radius: 5px; } .tb-import-pitch .tactics-player-shirt { width: 24px; height: 28px; } .tb-import-pitch .tactics-pitch { min-height: 260px; padding: 10px 4px; } .tb-import-pitch .tactics-pitch-row { gap: 3px; padding-inline: 0; } .tb-import-pitch .aiteam-pitch-name { font-size: 8px; min-height: 16px; overflow: hidden; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .tb-import-pitch .aiteam-pitch-cost { font-size: 7px; } .tb-import-pitch .aiteam-pitch-xpts { font-size: 8px; margin: 0; } .tb-import-tools { width: 100%; justify-content: space-between; flex-wrap: wrap; } .tb-import-tools .tb-import-view-toggle { flex: 1; } .tb-import-tools .tb-import-view-btn { flex: 1; justify-content: center; } }

/* Team builder phone composition */
@media (max-width: 600px) {
    .tb-page { width: 100%; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    .tb-heading { gap: 18px; padding: 4px 0 18px; }
    .tb-heading h1 { font-size: 26px; line-height: 1.08; }
    .tb-heading p, .tb-horizon p { font-size: 13px; line-height: 1.5; }
    .tb-heading-actions { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; }
    .tb-heading-actions .tb-upload-zone { grid-column: 1 / -1; min-height: 82px; padding: 13px 16px; }
    .tb-heading-actions .tb-btn { min-width: 0; min-height: 48px; }
    .tb-heading-actions .tb-icon-btn { width: 48px; min-height: 48px; }
    .tb-tab { padding: 8px 10px; font-size: 11px; }
    .tb-tab .material-symbols-outlined { font-size: 14px; }
    .tb-tab-summary { flex-direction: column; gap: 0; border-radius: 6px; }
    .tb-tab-summary .tb-summary-card { padding: 8px 12px; }
    .tb-upload-zone-lg { padding: 24px 16px; }
    .tb-upload-zone-lg .material-symbols-outlined { font-size: 36px !important; }

    .tb-horizon { gap: 14px; padding: 18px 0; }
    .tb-horizon h2, .tb-preferences-head h2 { font-size: 16px; }
    .tb-gw-selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; width: 100%; }
    .tb-gw-btn { width: 100%; height: 48px; }

    .tb-preferences { gap: 14px; padding: 20px 0; }
    .tb-preferences-head { gap: 14px; }
    .tb-preferences-head p { margin-top: 6px; font-size: 13px; line-height: 1.55; }
    .tb-preferences-samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; width: 100%; }
    .tb-preferences-samples > span { grid-column: 1 / -1; font-size: 11px; text-transform: uppercase; }
    .tb-pref-sample { min-height: 44px; padding: 8px 10px; border-style: solid; border-radius: 5px; font-size: 11px; line-height: 1.3; text-align: left; }
    .tb-preferences-row { flex-direction: column; gap: 8px; }
    .tb-preferences-input { width: 100%; min-height: 120px; padding: 14px; resize: none; font-size: 16px; line-height: 1.5; }
    .tb-preferences-row .tb-btn { width: 100%; min-height: 50px; font-size: 13px; }
    .tb-preferences-feedback { min-height: 0; font-size: 12px; }

    .tb-workspace { gap: 14px; padding-top: 14px; }
    .tb-squad-panel, .tb-market-panel, .tb-breakdown { border-radius: 6px; }
    .tb-panel-heading { padding: 14px 12px; }
    .tb-panel-heading h2 { font-size: 15px; }
    .tb-squad-tools { gap: 8px; }
    .tb-squad-tools > strong { font-size: 16px; }
    .tb-import-view-btn { min-height: 42px; }
    .tb-squad-actions { gap: 7px; padding: 10px 12px; }
    .tb-squad-actions .tb-btn { min-height: 46px; }
    .tb-budget-meter, .tb-rule-strip { padding-inline: 12px; }
    .tb-rule-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
    .tb-rule-strip span { display: grid; min-width: 0; place-items: center; padding: 6px 2px; text-align: center; }
    .tb-squad-player, .tb-empty-slot { min-height: 56px; }

    .tb-market-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
    .tb-market-controls .tb-search { grid-column: 1 / -1; min-height: 46px; }
    .tb-search input, .tb-market-controls select { width: 100%; height: 44px; font-size: 13px; }
    .tb-market-controls select { padding-inline: 10px; text-align: left; }
    .tb-market-message { padding-inline: 12px; line-height: 1.4; }
    .tb-player-list { max-height: none; }
    .tb-market-main { grid-template-columns: 28px minmax(0, 1fr) 50px; gap: 8px; min-height: 66px; padding: 7px 12px; }
    .tb-market-main .tb-player-identity b { font-size: 13px; }
    .tb-market-main .tb-player-identity small { white-space: normal; line-height: 1.25; }

    .tb-breakdown { margin-top: 14px; }
    .tb-breakdown table { min-width: 700px; }
    .tb-breakdown-scroll { scrollbar-color: #557261 #141916; }

    .tb-import-panel { margin-top: 14px; }
    .tb-import-actions { gap: 10px; padding: 12px; }
    .tb-import-actions .tb-btn { width: 100%; min-height: 46px; }
    .tb-import-match { gap: 8px; padding: 10px 12px; }
    .tb-import-match select { height: 44px; font-size: 13px; }

    .tb-advisor { margin-block: 14px; }
    .tb-advisor-heading { gap: 14px; padding: 20px 0 14px; }
    .tb-advisor-heading h2 { font-size: 20px; }
    .tb-advisor-heading p { font-size: 13px; line-height: 1.45; }
    .tb-advisor-heading .tb-btn { width: 100%; min-height: 48px; }
    .tb-advisor-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
    .tb-advisor-settings > label { width: 100%; gap: 7px; font-size: 10px; }
    .tb-advisor-settings select, .tb-advisor-settings input[type="number"] { height: 44px; font-size: 16px; }
    .tb-advisor-settings fieldset { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; width: 100%; padding: 10px; }
    .tb-advisor-settings fieldset label { justify-content: flex-start; min-width: 0; min-height: 46px; padding: 9px 10px; font-size: 12px; }
    .tb-advisor-settings fieldset label span { min-width: 0; overflow-wrap: anywhere; }
    .tb-advisor-summary { grid-template-columns: minmax(0, 1fr) 58px; gap: 12px; padding: 14px 12px; }
    .tb-advisor-summary h3 { font-size: 15px; line-height: 1.3; }
    .tb-advisor-summary p { line-height: 1.45; }
    .tb-advisor-lineup > div { min-width: 0; padding: 12px; }
    .tb-advisor-lineup b { overflow-wrap: anywhere; }
    .tb-critique-row { gap: 12px; padding: 14px 12px; }
    .tb-critique-evidence { font-size: 11px; line-height: 1.45; }
    .tb-advice-plan, .tb-chip-advice { padding: 12px; }
    .tb-apply-hint { opacity: 1; }
    .tb-advisor-notes { line-height: 1.4; }
}

@media (max-width: 360px) {
    .tb-gw-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tb-preferences-samples, .tb-market-controls, .tb-advisor-settings { grid-template-columns: 1fr; }
    .tb-advisor-settings fieldset, .tb-market-controls .tb-search, .tb-preferences-samples > span { grid-column: 1; }
    .tb-rule-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tb-advisor-lineup { grid-template-columns: 1fr; }
}

/* ==================== SIDEBAR COLLAPSE ==================== */
.layout-sidebar { transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.layout-sidebar.collapsed { width: 68px; }
.layout-sidebar.collapsed .sidebar-label,
.layout-sidebar.collapsed #manager-id-display,
.layout-sidebar.collapsed nav > div > div:first-child,
.layout-sidebar.collapsed .topbar-title { display: none !important; }
.layout-sidebar.collapsed .sidebar-nav-item { justify-content: center; padding: var(--space-sm); gap: 0; font-size: 0 !important; overflow: hidden; white-space: nowrap; border-left-color: transparent; }
.layout-sidebar.collapsed .sidebar-nav-item .material-symbols-outlined { margin: 0; font-size: 22px !important; }
.layout-sidebar.collapsed nav { padding: var(--space-sm) 4px; }
.layout-sidebar.collapsed nav > div { display: flex; flex-direction: column; gap: 4px; }
.layout-sidebar.collapsed nav .divider { display: none; }
.layout-sidebar.collapsed > div:first-child { padding: var(--space-md) var(--space-xs); justify-content: center; }
#sidebar-collapse-btn span { transition: transform var(--transition-fast); }
.layout-sidebar.collapsed #sidebar-collapse-btn span { transform: rotate(180deg); }
@media (max-width: 1024px) {
    .layout-sidebar { width: 280px !important; }
    .layout-sidebar.collapsed { width: 280px !important; }
    #sidebar-collapse-btn { display: none; }
}
#sidebar-mobile-close-btn { display: none; }
@media (max-width: 1024px) { #sidebar-mobile-close-btn { display: inline-flex; } }

/* ==================== PLAYER DETAIL DIALOG ==================== */
.player-detail-header { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); background: var(--md-sys-color-surface-container-high); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.player-detail-photo { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--md-sys-color-outline); overflow: hidden; flex-shrink: 0; }
.player-detail-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.player-detail-info { flex: 1; min-width: 0; }
.player-detail-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--md-sys-color-on-surface); margin: 0; }
.player-detail-meta { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }
.player-detail-pos { padding: 2px 8px; border-radius: var(--radius-pill); font-size: 0.6875rem; font-weight: 700; }
.player-detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--md-sys-color-outline-variant); }
.player-detail-stat { background: var(--md-sys-color-surface-container); padding: var(--space-md); text-align: center; }
.player-detail-stat-label { font-size: 0.6875rem; color: var(--md-sys-color-on-surface-variant); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); }
.player-detail-stat-value { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; color: var(--md-sys-color-primary); margin-top: 2px; }
.player-detail-section { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--md-sys-color-outline-variant); }
.player-detail-section-title { font-size: 0.75rem; font-weight: 700; color: var(--md-sys-color-on-surface-variant); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); margin-bottom: var(--space-sm); }
.player-detail-fixtures { display: flex; gap: var(--space-sm); overflow-x: auto; padding-bottom: var(--space-xs); }
.player-detail-fixture { flex-shrink: 0; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); text-align: center; font-size: 0.75rem; font-family: var(--font-mono); min-width: 60px; }
.player-detail-xg-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.player-detail-xg-item { text-align: center; }
.player-detail-xg-item .val { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 700; color: var(--md-sys-color-on-surface); }
.player-detail-xg-item .lbl { font-size: 0.6875rem; color: var(--md-sys-color-on-surface-variant); margin-top: 2px; }
.player-detail-clickable { cursor: pointer; transition: background var(--transition-fast); }
.player-detail-clickable:hover { background: var(--md-sys-color-surface-container); }
@media (max-width: 768px) { .player-detail-stats { grid-template-columns: repeat(2, 1fr); } .player-detail-xg-breakdown { grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); } .player-detail-header { flex-direction: column; text-align: center; } .player-detail-meta { justify-content: center; flex-wrap: wrap; } }

/* ==================== BOTTOM NAV OVERFLOW ==================== */
.bottom-nav { --nav-items: 6; }
.bottom-nav-overflow { display: none; position: fixed; bottom: 0; right: 0; z-index: 101; }
.bottom-nav-overflow-btn { width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--md-sys-color-surface-container-high); border: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--elevation-2); transition: all var(--transition-fast); }
.bottom-nav-overflow-btn.active { border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); box-shadow: 0 0 12px rgba(0, 255, 133, 0.3); }
.bottom-nav-overflow-menu { position: absolute; bottom: 56px; right: 8px; background: var(--md-sys-color-surface-container-high); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--radius-lg); padding: var(--space-sm); min-width: 180px; box-shadow: var(--elevation-3); display: none; }
.bottom-nav-overflow-menu.open { display: block; }
.bottom-nav-overflow-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); color: var(--md-sys-color-on-surface-variant); text-decoration: none; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); border: none; background: none; width: 100%; text-align: left; }
.bottom-nav-overflow-item:hover { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); }
.bottom-nav-overflow-item.active { color: var(--md-sys-color-primary); }
.bottom-nav-overflow-item .material-symbols-outlined { font-size: 20px; }
@media (max-width: 1024px) {
    .layout-content { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
    .bottom-nav-overflow { display: none !important; }
    .bottom-nav { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; padding-right: 0 !important; }
}

/* ==================== TEAM BUILDER INTERACTIVITY & CARDS ==================== */
.tactics-player-card { position: relative; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.tactics-player-card:hover { transform: translateY(-2px); }
.tactics-player-card.is-swap-selected { border: 2px solid #00FF85 !important; box-shadow: 0 0 16px rgba(0, 255, 133, 0.6) !important; animation: pulse-swap 1.5s infinite; }
@keyframes pulse-swap {
    0% { box-shadow: 0 0 8px rgba(0, 255, 133, 0.4); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 133, 0.85); }
    100% { box-shadow: 0 0 8px rgba(0, 255, 133, 0.4); }
}
.tb-card-actions { position: absolute; top: 2px; right: 2px; display: flex; gap: 2px; z-index: 3; }
.tb-card-action-btn { width: 22px; height: 22px; border-radius: 50%; background: rgba(13, 19, 16, 0.85); border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: all 0.15s ease; }
.tb-card-action-btn:hover { background: #00FF85; color: #0A0F0D; border-color: #00FF85; }
.tb-card-action-btn .material-symbols-outlined { font-size: 14px; }
.tb-breakdown-row { transition: background 0.15s ease; }
.tb-breakdown-row:hover { background: rgba(255, 255, 255, 0.04) !important; }
.tb-breakdown-row.selected-gw { background: rgba(0, 255, 133, 0.12) !important; border-left: 3px solid #00FF85; }
.tb-gw-pitch-pill { transition: all 0.2s ease; }
.tb-gw-pitch-pill:hover { border-color: #00FF85 !important; }

/* ==================== RESIZABLE PANELS ==================== */
.resizer { position: relative; flex-shrink: 0; z-index: 5; }
.resizer::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 32px; border-radius: 2px; background: var(--md-sys-color-outline); opacity: 0; transition: opacity var(--transition-fast); }
.resizer:hover::after, .resizer.dragging::after { opacity: 1; background: var(--md-sys-color-primary); }
.resizer-col { width: 8px; cursor: col-resize; }
.resizer-row { height: 8px; cursor: row-resize; }
.fixtures-flex-layout { position: relative; }
.tb-workspace { position: relative; }

/* ==================== EMPTY STATES ==================== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-xxl) var(--space-lg); text-align: center; color: var(--md-sys-color-on-surface-variant); }
.empty-state .material-symbols-outlined { font-size: 48px; opacity: 0.4; }
.empty-state p { max-width: 320px; font-size: 0.875rem; line-height: 1.5; }
.empty-state .btn { margin-top: var(--space-sm); }

/* ==================== FIXTURE GOALS & CLEAN SHEET ODDS (SOLIO MODEL) ==================== */

/* Fixture Subview Navigation */
.fixtures-nav-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 6px;
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.fixtures-nav-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--radius-md);
}

.fixture-view-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.fixture-view-btn .material-symbols-outlined {
    font-size: 16px;
    transition: color 0.2s ease;
}

.fixture-view-btn:hover {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.fixture-view-btn.active {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-surface-container-lowest);
    box-shadow: 0 0 12px rgba(0, 228, 118, 0.25);
}

.fixture-view-btn.active .material-symbols-outlined {
    color: var(--md-sys-color-surface-container-lowest);
}

.fixtures-nav-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fixtures-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--md-sys-color-surface-container);
    padding: 4px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.fixtures-selector-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface-variant);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.fixtures-selector-label .material-symbols-outlined {
    font-size: 14px;
    color: var(--md-sys-color-primary);
}

.fixtures-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.fixtures-select-wrap select {
    background-color: var(--md-sys-color-surface-container-lowest);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--radius-sm);
    padding: 4px 24px 4px 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    min-width: 80px;
}

.fixtures-select-wrap .material-symbols-outlined {
    position: absolute;
    right: 4px;
    pointer-events: none;
    font-size: 14px;
    color: var(--md-sys-color-primary);
}

@media (max-width: 768px) {
    .fixtures-nav-bar {
        flex-direction: column;
        gap: 8px;
    }
    .fixtures-nav-tabs {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }
    .fixture-view-btn {
        padding: 6px 10px;
        font-size: 10px;
    }
    .fixture-view-btn .material-symbols-outlined {
        font-size: 14px;
    }
}

/* News Subview Styles */
.news-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--radius-lg);
}

.news-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-header-title .material-symbols-outlined {
    font-size: 22px;
    color: var(--md-sys-color-primary);
}

.news-header-title h2 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    margin: 0;
}

.news-refresh-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    background: var(--md-sys-color-surface-container-high);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.news-refresh-badge .material-symbols-outlined {
    font-size: 14px;
    color: var(--md-sys-color-primary);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}

@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

.news-card {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.2s, transform 0.15s;
    cursor: pointer;
}

.news-card:hover {
    border-color: var(--md-sys-color-outline);
    transform: translateY(-1px);
}

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

.news-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.news-card-tag.injury {
    background: rgba(255, 180, 171, 0.12);
    color: var(--md-sys-color-error);
}

.news-card-tag.suspension {
    background: rgba(255, 166, 0, 0.12);
    color: var(--fdr-4);
}

.news-card-tag.transfer {
    background: var(--fpl-accent-dim);
    color: var(--md-sys-color-primary);
}

.news-card-tag.return {
    background: rgba(0, 209, 255, 0.12);
    color: var(--data-blue);
}

.news-card-tag.fitness {
    background: rgba(167, 207, 188, 0.12);
    color: var(--md-sys-color-secondary);
}

.news-card-tag.general {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
}

.news-card-time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--md-sys-color-outline);
    white-space: nowrap;
}

.news-card-body {
    flex: 1;
}

.news-card-title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    line-height: 1.4;
    margin: 0 0 4px 0;
}

.news-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.news-card-player {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--md-sys-color-primary);
}

.news-card-team {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
}

.news-card-source {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--md-sys-color-outline);
    margin-top: 4px;
}

.news-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
}

.news-empty .material-symbols-outlined {
    font-size: 48px;
    opacity: 0.3;
}

.news-empty p {
    font-size: 14px;
    max-width: 300px;
}

.fixture-view-btn { transition: all 0.2s ease-in-out; }
.fixture-view-btn:hover { filter: brightness(1.1); }

.solio-container {
    background: var(--md-sys-color-surface-container-lowest);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    color: var(--md-sys-color-on-surface);
    font-family: var(--font-sans);
}

.solio-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding-bottom: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.solio-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.solio-title {
    font-family: var(--font-display), sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--md-sys-color-on-surface);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.5px;
}

.solio-gw-badge {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-surface-container-lowest);
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 6px;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 228, 118, 0.3);
}

.solio-subtitle {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--md-sys-color-outline);
    margin: 0;
}

.solio-brand-mark {
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 4px;
    color: #ffffff;
    text-transform: uppercase;
    user-select: none;
}

/* Main Split Grid */
.solio-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

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

/* Match Grid Section */
.solio-matches-section {
    display: flex;
    flex-direction: column;
}

.solio-matches-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 10px;
    padding: 0 4px;
}

.solio-matches-header-col {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.5px;
}

.solio-matches-header-col span {
    width: 52px;
    text-align: center;
}

.solio-matches-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (max-width: 580px) {
    .solio-matches-header {
        display: none;
    }
    .solio-matches-grid {
        grid-template-columns: 1fr;
    }
}

.solio-match-card {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.2s, transform 0.2s;
}

.solio-match-card:hover {
    border-color: var(--md-sys-color-outline);
    transform: translateY(-1px);
}

.solio-match-time {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--md-sys-color-outline);
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding-bottom: 6px;
    margin-bottom: 2px;
    text-align: center;
}

.solio-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.solio-team-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.solio-team-code {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 15px;
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0.5px;
}

.solio-metrics-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.solio-badge {
    min-width: 52px;
    text-align: center;
    padding: 5px 8px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 13px;
}

/* Goals Badges (Data Blue) */
.solio-goals-high { background: var(--data-blue); color: #ffffff; box-shadow: 0 0 8px rgba(0, 209, 255, 0.3); }
.solio-goals-mid { background: rgba(0, 209, 255, 0.2); color: #7dd9f5; }
.solio-goals-low { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }

/* CS Badges (FPL Primary Green) */
.solio-cs-high { background: var(--md-sys-color-primary); color: #002912; box-shadow: 0 0 8px rgba(0, 228, 118, 0.3); font-weight: 800; }
.solio-cs-mid { background: rgba(0, 228, 118, 0.15); color: #66e8a8; }
.solio-cs-low { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }

/* Leaderboards Section */
.solio-leaderboards-section {
    display: flex;
    flex-direction: column;
}

.solio-leaderboards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 580px) {
    .solio-leaderboards-grid {
        grid-template-columns: 1fr;
    }
}

.solio-leaderboard-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.solio-leaderboard-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

.solio-rank-row {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--font-mono);
}

.solio-rank-team-info {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100px;
    flex-shrink: 0;
}

.solio-rank-code {
    font-weight: 800;
    font-size: 13px;
    color: var(--md-sys-color-on-surface);
}

.solio-rank-opp {
    font-size: 11px;
    color: var(--md-sys-color-outline);
    white-space: nowrap;
}

/* Dynamic Flexible Progress Fill Bar */
.solio-bar-wrap {
    position: relative;
    flex: 1;
    min-width: 80px;
    height: 24px;
    background: var(--md-sys-color-surface-container-high);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
}

.solio-bar-fill-goals {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(0, 209, 255, 0.4), var(--data-blue));
    border-radius: 4px;
}

.solio-bar-fill-cs {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(0, 228, 118, 0.3), var(--md-sys-color-primary));
    border-radius: 4px;
}

.solio-bar-text {
    position: relative;
    z-index: 1;
    font-weight: 800;
    font-size: 11px;
    color: var(--md-sys-color-on-surface);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Footer */
.solio-footer {
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin-top: 24px;
    padding-top: 16px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--md-sys-color-outline);
}

@media (max-width: 640px) {
    .solio-container {
        padding: 14px;
        border-radius: 12px;
    }
    .solio-title {
        font-size: 18px;
        flex-wrap: wrap;
    }
    .solio-gw-badge {
        font-size: 16px;
        padding: 1px 8px;
    }
    .solio-subtitle {
        font-size: 11px;
    }
    .solio-rank-row {
        padding: 5px 8px;
    }
    .solio-bar-wrap {
        height: 22px;
    }
    .solio-bar-text {
        font-size: 10px;
    }
}