:root {
    --bg: #17202d;
    --panel: #273446;
    --panel-2: #314055;
    --line: rgba(255, 255, 255, .09);
    --text: #eef4fb;
    --muted: #a9b5c5;
    --blue: #3b82f6;
    --green: #22c55e;
    --purple: #a855f7;
    --orange: #f59e0b;
    --red: #ef4444;
}

body {
    background:
        radial-gradient(circle at 10% 0%, rgba(59, 130, 246, .15), transparent 28rem),
        radial-gradient(circle at 90% 20%, rgba(168, 85, 247, .10), transparent 24rem),
        linear-gradient(180deg, #253347 0%, var(--bg) 100%);
    color: var(--text);
    min-height: 100vh;
}

.app-navbar {
    background: rgba(12, 17, 24, .88);
    backdrop-filter: blur(14px);
    border-color: var(--line) !important;
}

.dashboard-card,
.stat-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(49, 64, 85, .96), rgba(34, 46, 62, .96));
    box-shadow: 0 14px 36px rgba(0, 0, 0, .22);
}

.dashboard-card .card-header {
    background: rgba(255, 255, 255, .025);
    border-bottom: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    padding: 15px 18px;
}

.dashboard-card .card-body { background: transparent; }

.summary-card {
    position: relative;
    min-height: 132px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.summary-card::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -28px;
    bottom: -38px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
}

.summary-card small { font-weight: 750; opacity: .82; }
.summary-card strong { font-size: 31px; line-height: 1.1; margin-top: 9px; }
.summary-card > span:last-child { font-size: 12px; margin-top: 4px; opacity: .72; }
.summary-icon { position: absolute; right: 16px; top: 14px; font-size: 20px; opacity: .72; }

.summary-blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.summary-black { background: linear-gradient(135deg, #252b35, #0d1117); }
.summary-white { background: linear-gradient(135deg, #ffffff, #dce6f1); color: #172033; }
.summary-green { background: linear-gradient(135deg, #16a34a, #047857); }
.summary-purple { background: linear-gradient(135deg, #9333ea, #6d28d9); }
.summary-orange { background: linear-gradient(135deg, #f59e0b, #d97706); color: #211506; }

.leader-card {
    width: 100%;
    min-height: 112px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(39, 52, 70, .86);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.leader-card:not(:disabled):hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.23);
    background: rgba(49, 64, 85, .98);
}

.leader-avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 18px;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.leader-copy { min-width: 0; display: flex; flex-direction: column; }
.leader-copy small { color: var(--muted); font-weight: 700; font-size: 12px; }
.leader-copy strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; margin-top: 3px; }
.leader-copy > span { font-size: 13px; color: var(--muted); }
.leader-gold .leader-avatar { background: linear-gradient(135deg, #fbbf24, #d97706); }
.leader-purple .leader-avatar { background: linear-gradient(135deg, #c084fc, #7c3aed); }
.leader-cyan .leader-avatar { background: linear-gradient(135deg, #22d3ee, #0284c7); }
.leader-green .leader-avatar { background: linear-gradient(135deg, #4ade80, #15803d); }

.stat-card { padding: 18px; }
.chart-wrap { height: 360px; }
.chart-wrap-sm { height: 280px; }

.match-list .list-group-item {
    padding: 16px 18px;
    background: transparent;
    color: var(--text);
    border-color: var(--line);
}
.match-list .list-group-item:hover { background: rgba(255,255,255,.055); }

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--line);
}
.table thead th {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.table tbody td { white-space: nowrap; }

.stat-badge {
    min-width: 30px;
    display: inline-flex;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 12px;
}
.badge-win { color: #86efac; background: rgba(34,197,94,.15); }
.badge-loss { color: #fca5a5; background: rgba(239,68,68,.15); }
.badge-draw { color: #cbd5e1; background: rgba(148,163,184,.15); }

.metric-value {
    display: inline-flex;
    min-width: 30px;
    justify-content: center;
    font-weight: 850;
}
.metric-goal { color: #60a5fa; }
.metric-assist { color: #c084fc; }
.metric-contribution { color: #fbbf24; }

.mini-progress,
.effect-meter {
    width: 70px;
    height: 6px;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255,255,255,.10);
}
.mini-progress span,
.effect-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
}
.mini-progress span { background: linear-gradient(90deg, #f59e0b, #22c55e); }
.effect-meter span { background: linear-gradient(90deg, #ef4444 0%, #f59e0b 48%, #22c55e 100%); }
.progress-label,
.effect-value { display: inline-block; min-width: 58px; margin-left: 7px; color: var(--text); font-size: 12px; }

.performance-tabs {
    padding: 4px;
    border-radius: 12px;
    background: rgba(0,0,0,.18);
}
.performance-tabs .nav-link {
    color: var(--muted);
    border: 0;
    border-radius: 9px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 750;
}
.performance-tabs .nav-link.active {
    color: #fff;
    background: #2563eb;
}
.performance-card .tab-pane:not(.active) { display: none; }

.team-label { display:inline-flex; align-items:center; border-radius:999px; padding:2px 8px; margin-right:5px; font-size:11px; font-weight:800; }
.team-label.black { background:#111827; color:#fff; border:1px solid #3b3b3b; }
.team-label.white { background:#fff; color:#111; border:1px solid #d1d5db; }
.score-badge { display:inline-flex; align-items:center; border-radius:999px; overflow:hidden; background:#303844; border:1px solid var(--line); font-weight:800; }
.score-black { background:#111827; color:#fff; padding:4px 9px; }
.score-white { background:#fff; color:#111; padding:4px 9px; }
canvas { max-width: 100%; }
.modal-content { background:#202a38; color:var(--text); border:1px solid var(--line); }
.btn-close { filter: invert(1); }

.team-black-card { background:linear-gradient(180deg,#2b2f36,#1f2329); color:#fff; }
.team-white-card,
.team-white { background:linear-gradient(180deg,#e8eef6,#d8e1ec); color:#111827; border:1px solid rgba(255,255,255,.35); }
.team-white .card-header { color:#111827; border-bottom:1px solid rgba(0,0,0,.08); }
.team-white .table { --bs-table-bg:transparent; --bs-table-color:#111827; --bs-table-border-color:rgba(0,0,0,.08); color:#111827; }
.team-white .table thead th { color:#475569; }
.team-white .table tbody td,
.team-white .badge { color:#111827; }

.mini-board { height:100%; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:rgba(39,52,70,.94); box-shadow:0 14px 34px rgba(0,0,0,.18); }
.mini-board-header { min-height:58px; padding:15px 17px; display:flex; align-items:center; justify-content:space-between; color:#fff; font-weight:850; }
.mini-board-header small { padding:3px 8px; border-radius:99px; background:rgba(255,255,255,.17); }
.board-blue .mini-board-header { background:linear-gradient(135deg,#2563eb,#06b6d4); }
.board-purple .mini-board-header { background:linear-gradient(135deg,#7c3aed,#d946ef); }
.board-green .mini-board-header { background:linear-gradient(135deg,#059669,#22c55e); }
.board-orange .mini-board-header { background:linear-gradient(135deg,#ea580c,#f59e0b); }
.mini-board-body { padding:7px 10px 10px; }
.mini-board-row { width:100%; min-height:50px; padding:7px 5px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--text); display:flex; align-items:center; gap:8px; text-align:left; transition:background .16s ease,transform .16s ease; }
.mini-board-row:last-child { border-bottom:0; }
.mini-board-row:hover { background:rgba(255,255,255,.055); transform:translateX(2px); }
.mini-board-row strong { margin-left:auto; color:#fff; font-size:14px; }
.mini-board-row strong small { color:var(--muted); font-weight:650; }
.mini-player-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:720; }
.mini-rank { width:23px; height:23px; flex:0 0 23px; display:grid; place-items:center; border-radius:7px; background:rgba(148,163,184,.14); color:var(--muted); font-size:11px; font-weight:900; }
.rank-1 { color:#241600; background:linear-gradient(135deg,#fde68a,#f59e0b); }
.rank-2 { color:#263241; background:linear-gradient(135deg,#f8fafc,#94a3b8); }
.rank-3 { color:#fff; background:linear-gradient(135deg,#d97706,#92400e); }
.player-mini-avatar,.player-table-avatar { display:inline-grid; place-items:center; color:#fff; font-weight:900; background:linear-gradient(135deg,hsl(var(--avatar-hue) 78% 58%),hsl(var(--avatar-hue) 68% 40%)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.player-mini-avatar { width:31px; height:31px; flex:0 0 31px; border-radius:10px; font-size:10px; }
.player-table-avatar { width:34px; height:34px; flex:0 0 34px; border-radius:11px; font-size:11px; }
.player-cell { display:flex; align-items:center; gap:10px; min-width:175px; color:#fff; font-weight:700; text-decoration:none; }
.player-cell:hover { color:#7dd3fc; }
.player-cell-name { display:inline-flex; align-items:center; }
.table-rank { width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; border-radius:8px; background:rgba(148,163,184,.13); color:var(--muted); font-size:11px; font-weight:900; }
.table-rank-1 { color:#241600; background:linear-gradient(135deg,#fde68a,#f59e0b); }
.table-rank-2 { color:#263241; background:linear-gradient(135deg,#f8fafc,#94a3b8); }
.table-rank-3 { color:#fff; background:linear-gradient(135deg,#d97706,#92400e); }
.form-dots { display:inline-flex; gap:4px; align-items:center; }
.form-dot { width:24px; height:24px; display:grid; place-items:center; border-radius:8px; color:#fff; font-size:10px; font-weight:900; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.form-w { background:linear-gradient(135deg,#4ade80,#16a34a); }
.form-d { background:linear-gradient(135deg,#fbbf24,#d97706); color:#2a1900; }
.form-l { background:linear-gradient(135deg,#fb7185,#dc2626); }
.form-dots.compact { gap:2px; margin-left:auto; }
.form-dots.compact .form-dot { width:18px; height:18px; border-radius:6px; font-size:8px; }
.form-dots.compact + strong { margin-left:2px; }
#playerStatsTable_wrapper .dt-search input,#playerStatsTable_wrapper .dt-length select { color:#fff; border:1px solid rgba(96,165,250,.35); background:#1d2938; }
#playerStatsTable thead th { background:rgba(37,99,235,.13); color:#dbeafe; }
#playerStatsTable tbody tr { transition:background .15s ease; }
#playerStatsTable tbody tr:hover { --bs-table-hover-bg:rgba(56,189,248,.08); }
#playerStatsTable th:first-child,#playerStatsTable td:first-child { padding-left:16px; }

.match-prediction-card { overflow:hidden; border:1px solid rgba(56,189,248,.24); border-radius:22px; background:radial-gradient(circle at 50% 0,rgba(37,99,235,.18),transparent 42%),#273446; box-shadow:0 18px 44px rgba(0,0,0,.22); }
.prediction-heading { padding:22px 24px; display:flex; justify-content:space-between; gap:20px; align-items:flex-start; border-bottom:1px solid var(--line); }
.prediction-kicker { display:block; margin-bottom:5px; color:#67e8f9; font-size:12px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.prediction-heading h4 { margin:0 0 6px; font-weight:900; }
.prediction-heading p { max-width:760px; margin:0; color:var(--muted); }
.prediction-reset { color:#cbd5e1; border:1px solid rgba(255,255,255,.14); white-space:nowrap; }
.prediction-reset:hover { color:#fff; background:rgba(255,255,255,.07); }
.prediction-layout { padding:20px; display:grid; grid-template-columns:1fr minmax(300px,1.15fr) 1fr; gap:16px; }
.prediction-team,.prediction-pool { min-height:330px; border:1px solid var(--line); border-radius:18px; background:rgba(15,23,42,.34); }
.prediction-team-title { height:58px; padding:0 16px; display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--line); }
.prediction-team-title > span:last-child { margin-left:auto; color:var(--muted); font-size:12px; }
.team-dot { width:13px; height:13px; border-radius:50%; }
.prediction-team-black .team-dot { background:#070b12; border:2px solid #64748b; }
.prediction-team-white .team-dot { background:#f8fafc; border:2px solid #cbd5e1; }
.prediction-roster { padding:11px; display:flex; flex-direction:column; gap:7px; }
.roster-empty { padding:48px 12px; color:#64748b; text-align:center; font-size:13px; }
.roster-player { min-height:39px; padding:7px 9px 7px 12px; display:flex; align-items:center; gap:8px; border-radius:11px; background:rgba(255,255,255,.055); font-weight:700; }
.roster-player small { margin-left:auto; color:#94a3b8; }
.roster-player button { width:26px; height:26px; padding:0; border:0; border-radius:8px; color:#fda4af; background:rgba(244,63,94,.12); }
.prediction-pool { padding:15px; }
.prediction-pool > label { margin-bottom:8px; font-weight:850; }
.prediction-search { height:42px; padding:0 12px; display:flex; align-items:center; gap:9px; border:1px solid rgba(96,165,250,.3); border-radius:12px; background:#1d2938; }
.prediction-search input { width:100%; border:0; outline:0; color:#fff; background:transparent; }
.prediction-player-list { max-height:230px; margin:10px 0; overflow:auto; display:flex; flex-direction:column; gap:6px; }
.prediction-pool > small { color:#94a3b8; }
.pool-player { min-height:42px; padding:6px 7px 6px 11px; display:flex; align-items:center; gap:7px; border-radius:11px; background:rgba(255,255,255,.045); }
.pool-player > span { min-width:0; margin-right:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.pool-player button { width:30px; height:30px; padding:0; border-radius:9px; }
.assign-black { background:#080c13; border:1px solid #64748b; }
.assign-white { background:#f8fafc; border:1px solid #fff; }
.pool-player.assigned { opacity:.38; }
.prediction-actions { padding:0 20px 20px; display:flex; align-items:center; justify-content:center; gap:14px; }
.prediction-button { padding:11px 22px; color:#fff; font-weight:850; background:linear-gradient(135deg,#2563eb,#06b6d4); box-shadow:0 10px 24px rgba(14,165,233,.22); }
.prediction-button:hover { color:#fff; transform:translateY(-1px); }
#predictionMessage { color:#94a3b8; font-size:13px; }
.prediction-result { margin:0 20px 20px; padding:22px; border:1px solid rgba(34,211,238,.25); border-radius:18px; background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(139,92,246,.12)); }
.prediction-scoreboard { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; text-align:center; }
.prediction-scoreboard strong { display:block; font-size:18px; }
.predicted-score { font-size:38px; font-weight:950; letter-spacing:.04em; }
.prediction-probability { height:10px; margin:18px 0 8px; display:flex; overflow:hidden; border-radius:99px; background:#fff; }
.prediction-probability .black-prob { background:#080c13; }
.prediction-probability .draw-prob { background:#f59e0b; }
.prediction-probability .white-prob { background:#f8fafc; }
.probability-labels { display:flex; justify-content:space-between; gap:8px; color:#cbd5e1; font-size:12px; }
.prediction-reasons { margin:18px 0 0; padding:15px 18px 15px 34px; border-radius:13px; background:rgba(15,23,42,.35); color:#dbeafe; }
.prediction-reasons li + li { margin-top:7px; }
.prediction-advantages { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }
.prediction-advantage { padding:17px 18px; border:1px solid var(--line); border-radius:15px; background:rgba(15,23,42,.42); }
.prediction-advantage h5 { margin:0 0 12px; font-size:16px; font-weight:900; }
.prediction-advantage ul { margin:0; padding-left:20px; color:#e2e8f0; }
.prediction-advantage li { line-height:1.55; }
.prediction-advantage li + li { margin-top:9px; }
.prediction-advantage strong { color:#fff; }
.black-advantages { border-left:4px solid #64748b; }
.white-advantages { border-left:4px solid #f8fafc; }
.match-row-card { position:relative; overflow:hidden; margin:8px 10px 0; width:calc(100% - 20px); border:1px solid var(--line) !important; border-radius:14px !important; }
.match-row-card:last-child { margin-bottom:10px; }
.match-row-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(#38bdf8,#8b5cf6); }
.match-number { color:#60a5fa; font-weight:850; letter-spacing:.04em; }
.match-tone { display:inline-flex; margin-top:10px; padding:3px 8px; border-radius:99px; font-size:10px; font-weight:850; }
.tone-close { color:#86efac; background:rgba(34,197,94,.14); }
.tone-balanced { color:#7dd3fc; background:rgba(14,165,233,.14); }
.tone-wide { color:#fda4af; background:rgba(244,63,94,.14); }
.tone-draw { color:#fde68a; background:rgba(245,158,11,.14); }

@media (max-width: 767.98px) {
    main.container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
    .navbar-brand { font-size: 14px; }
    .summary-card { min-height: 118px; padding: 15px; }
    .summary-card strong { font-size: 26px; }
    .chart-wrap { height: 310px; }
    .performance-tabs { width: 100%; display: flex; }
    .performance-tabs .nav-item { flex: 1; }
    .performance-tabs .nav-link { width: 100%; padding: 7px 5px; }
    .form-dots.compact { display:none; }
    .player-table-avatar { display:none; }
    .prediction-heading { padding:18px; flex-direction:column; }
    .prediction-layout { padding:14px; grid-template-columns:1fr; }
    .prediction-pool { grid-row:1; }
    .prediction-team { min-height:160px; }
    .prediction-actions { flex-direction:column; text-align:center; }
    .prediction-scoreboard { gap:8px; }
    .prediction-advantages { grid-template-columns:1fr; }
    .predicted-score { font-size:29px; }
}