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

/* Skjul Blazor WASM loading-progress badge */
.loading-progress, .loading-progress-text, #blazor-loading-indicator,
[class*="loading-progress"],
div[style*="--blazor-load-percentage"],
div[style*="blazor"] { display: none !important; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0f1117;
    color: #e8eaf0;
    min-height: 100vh;
}

/* ===== Layout ===== */
.app-wrapper { display: flex; flex-direction: column; min-height: 100vh; }

.navbar {
    background: #1a1d2e;
    padding: 1rem 2rem;
    border-bottom: 2px solid #2ecc71;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand { font-size: 1.4rem; font-weight: 700; color: #2ecc71; letter-spacing: 1px; }
.nav-links { display: flex; gap: 1.5rem; align-items: center; }
.nav-link { color: #aaa; text-decoration: none; font-size: 0.95rem; transition: color 0.2s; }
.nav-link:hover { color: #2ecc71; }

.content { flex: 1; padding: 2rem; max-width: 1200px; margin: 0 auto; width: 100%; }

.footer {
    text-align: center;
    padding: 1rem;
    color: #555;
    font-size: 0.8rem;
    border-top: 1px solid #1e2130;
}

/* ===== Page header ===== */
.page-header { margin-bottom: 2rem; }
.page-header h1 { font-size: 1.8rem; color: #2ecc71; margin-bottom: 0.3rem; }
.subtitle { color: #888; font-size: 0.95rem; }

/* ===== Filter bar ===== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    align-content: flex-start;
    min-height: 5.5rem;
    background: #1a1d2e;
    padding: 1.2rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    border: 1px solid #2a2d3e;
}

.filter-group { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-group label { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }

input[type="date"],
input[type="number"],
select {
    background: #0f1117;
    border: 1px solid #2a2d3e;
    color: #e8eaf0;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    color-scheme: dark;
}
input:focus, select:focus { border-color: #2ecc71; }
input[type="number"] { width: 90px; }

.btn-search {
    background: #2ecc71;
    color: #0f1117;
    border: none;
    padding: 0.55rem 1.5rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
    align-self: flex-end;
}
.btn-search:hover { background: #27ae60; }

.btn-advanced {
    background: transparent;
    color: #888;
    border: 1px solid #2a2d3e;
    padding: 0 1rem;
    height: 36px;
    line-height: 34px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
    align-self: flex-end;
}
.btn-advanced:hover { color: #ccc; border-color: #555; }

.btn-import {
    background: #2ecc71;
    color: #0f1117;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 148px;
    height: 36px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-end;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
    transition: background 0.2s, opacity 0.2s;
}
.btn-import:hover { background: #27ae60; }
.btn-import:disabled, .btn-import.loading { opacity: 0.6; cursor: not-allowed; }

.btn-stats {
    background: transparent;
    color: #5b9bd5;
    border: 1px solid #5b9bd5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 36px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-end;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.btn-stats:hover    { background: #1a2a3a; }
.btn-stats:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-matchstat {
    background: transparent;
    color: #2ecc71;
    border: 1px solid #2ecc71;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-end;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.btn-matchstat:hover    { background: #0a2a18; }
.btn-matchstat:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-odds {
    background: transparent;
    color: #f39c12;
    border: 1px solid #f39c12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-end;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.btn-odds:hover    { background: #2a1a00; }
.btn-odds:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Action bar (Opdater data / Opdater statistik) ===== */
.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 12px;
    gap: 12px;
}
.action-bar-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #7f8c8d;
    min-height: 22px;
}
.action-bar-right {
    display: flex;
    gap: 8px;
}
.btn-action-primary {
    background: #1a6fdb;
    color: #fff;
    border: none;
    height: 34px;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.btn-action-primary:hover    { background: #1558b0; }
.btn-action-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-action-secondary {
    background: transparent;
    color: #95a5a6;
    border: 1px solid #2a2d3e;
    height: 34px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.btn-action-secondary:hover    { color: #ecf0f1; border-color: #7f8c8d; }
.btn-action-secondary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-sync:hover { color: #f39c12; border-color: #f39c12; }
.btn-sync:disabled { opacity: 0.4; }

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot.ok { background: #2ecc71; }
.status-dot.spinning {
    background: transparent;
    border: 2px solid #3498db;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}
.status-text { line-height: 1; font-size: 0.75rem; color: #7f8c8d; }

/* ===== Inline loading state (erstatter initial-loading splash) ===== */
.loading-state {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 60px 0;
    justify-content: center;
    color: #7f8c8d;
    font-size: 0.9rem;
}
.loading-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid #2a2d3e;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Diskret opdateringsbanner øverst på pick-listen */
.refresh-banner {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px 12px;
    background: #1a1e2e;
    border: 1px solid #2a2d3e;
    border-radius: 6px;
    color: #7f8c8d;
    font-size: 0.8rem;
    margin-bottom: 12px;
}
.refresh-banner-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.refresh-pct {
    margin-left: auto;
    font-weight: 600;
    color: #3498db;
    font-size: 0.78rem;
}
.refresh-progress-bar {
    width: 100%;
    height: 3px;
    background: #2a2d3e;
    border-radius: 2px;
    overflow: hidden;
}
.refresh-progress-fill {
    height: 100%;
    background: #3498db;
    border-radius: 2px;
    transition: width 0.4s ease;
}
.refresh-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #2a2d3e;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    flex-shrink: 0;
}

.import-message.error { color: #e74c3c; }
.import-message.success { color: #2ecc71; }

/* ===== Import progress bar ===== */
.stats-progress-wrap {
    margin: 0.5rem 0 1rem;
    position: relative;
    background: #1a1d2e;
    border: 1px solid #2a2d3e;
    border-radius: 8px;
    height: 28px;
    overflow: hidden;
}
.stats-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #1a6bff, #00c9a7);
    transition: width 0.4s ease;
    min-width: 2px;
}
.stats-progress-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.78rem;
    color: #dde;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

/* ===== Anbefalinger (value betting) ===== */
.recommendations-section {
    margin: 1.5rem 0 2rem;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(135deg, #0d1f0d 0%, #111 100%);
    border: 1px solid #2a4a2a;
    border-radius: 12px;
}
.recommendations-section.empty {
    background: #111;
    border-color: #222;
}
.rec-header {
    font-size: 1.15rem;
    font-weight: 700;
    color: #7fff7f;
    margin: 0 0 0.2rem;
}
.rec-subtitle {
    font-size: 0.8rem;
    color: #666;
    margin: 0 0 1rem;
}
.rec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.rec-card {
    background: #161f16;
    border: 1px solid #2a3a2a;
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.rec-card.edge-strong { border-color: #3a7a3a; box-shadow: 0 0 8px #2a5a2a44; }
.rec-card.edge-medium { border-color: #4a6a2a; }
.rec-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.rec-player {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}
.rec-odds {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f0c040;
}
.rec-match {
    font-size: 0.75rem;
    color: #888;
}
.rec-bars {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.3rem 0;
    padding: 0.6rem 0.7rem;
    background: #0a140a;
    border-radius: 8px;
    border: 1px solid #1e3a1e;
}
.rec-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.rec-bar-label {
    font-size: 0.7rem;
    color: #888;
    width: 72px;
    flex-shrink: 0;
}
.rec-bar-bg {
    flex: 1;
    height: 7px;
    background: #222;
    border-radius: 4px;
    overflow: hidden;
}
.rec-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.rec-bar-fill.model   { background: #4caf50; }
.rec-bar-fill.implied { background: #555; }
.rec-bar-pct {
    font-size: 0.72rem;
    color: #aaa;
    width: 32px;
    text-align: right;
}
.rec-edge {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    display: inline-block;
    align-self: flex-start;
}
.rec-edge.edge-strong { background: #1a3a1a; color: #7fff7f; }
.rec-edge.edge-medium { background: #1a2a10; color: #bfef80; }
.rec-edge.edge-weak   { background: #1a1a10; color: #cfcf80; }
.rec-reasoning {
    font-size: 0.72rem;
    color: #666;
    line-height: 1.4;
}

/* ===== Turneringsmomentum badge ===== */
.momentum-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-left: 0.4rem;
    vertical-align: middle;
    line-height: 1.4;
}
.momentum-qf {
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.4);
}
.momentum-sf {
    background: rgba(231, 76, 60, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(231, 76, 60, 0.5);
    animation: pulse-border 2s ease-in-out infinite;
}
@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
    50%       { box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2); }
}

.import-message {
    display: inline-block;
    margin: 0.4rem 0 0.8rem;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    font-size: 0.82rem;
}
.import-message.success { background: #1a3a2a; color: #2ecc71; border: 1px solid #2ecc71; }
.import-message.error   { background: #3a1a1a; color: #e74c3c; border: 1px solid #e74c3c; }

/* ===== Win-rate bar ===== */
.winrate-bar {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: #151722;
    border: 1px solid #2a2d3e;
    border-radius: 8px;
    padding: 0.7rem 1.2rem;
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
}
.winrate-label  { color: #888; }
.winrate-wins   { color: #2ecc71; }
.winrate-losses { color: #e74c3c; }
.winrate-pct         { font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 20px; }
.winrate-pct.good    { background: #1a3a2a; color: #2ecc71; }
.winrate-pct.neutral { background: #2a2d1a; color: #f1c40f; }
.winrate-pct.bad     { background: #3a1a1a; color: #e74c3c; }

/* ===== Result badges on cards ===== */
.result-badge {
    position: absolute;
    top: 0.7rem;
    right: 3rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}
.result-1 { background: #1a3a2a; color: #2ecc71; }
.result-2 { background: #3a1a1a; color: #e74c3c; }
.result-3 { background: #2a2a1a; color: #f1c40f; }

.card-win  { border-left: 3px solid #2ecc71 !important; }
.card-loss { border-left: 3px solid #e74c3c !important; }
.card-push { border-left: 3px solid #f1c40f !important; }

/* ===== Result action buttons ===== */
.pick-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.8rem;
    border-top: 1px solid #2a2d3e;
    padding-top: 0.8rem;
}
.btn-result {
    flex: 1;
    background: transparent;
    border: 1px solid #2a2d3e;
    color: #888;
    padding: 0.35rem 0;
    border-radius: 5px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-result.win:hover  { background: #1a3a2a; color: #2ecc71; border-color: #2ecc71; }
.btn-result.loss:hover { background: #3a1a1a; color: #e74c3c; border-color: #e74c3c; }
.btn-result.push:hover { background: #2a2a1a; color: #f1c40f; border-color: #f1c40f; }
.btn-result.win.active  { background: #1a3a2a; color: #2ecc71; border-color: #2ecc71; }
.btn-result.loss.active { background: #3a1a1a; color: #e74c3c; border-color: #e74c3c; }
.btn-result.push.active { background: #2a2a1a; color: #f1c40f; border-color: #f1c40f; }

.pick-result-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #2a2d3e;
}
.result-label { font-size: 0.72rem; color: #666; white-space: nowrap; }

/* ===== Performance side ===== */
.perf-kpis {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.perf-kpi {
    flex: 1;
    background: #1a1d2e;
    border: 1px solid #2a2d3e;
    border-radius: 10px;
    padding: 1.2rem 1rem;
    text-align: center;
}
.kpi-value { font-size: 2rem; font-weight: 700; margin-bottom: 4px; }
.kpi-label { font-size: 0.8rem; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }
.kpi-sub   { font-size: 0.75rem; color: #666; margin-top: 4px; }
.kpi-good    { border-color: #2ecc71; }
.kpi-good .kpi-value { color: #2ecc71; }
.kpi-bad     { border-color: #e74c3c; }
.kpi-bad .kpi-value  { color: #e74c3c; }
.kpi-neutral { border-color: #2a2d3e; }
.kpi-neutral .kpi-value { color: #e8eaf0; }

.perf-period {
    display: flex;
    gap: 8px;
    margin-bottom: 1.5rem;
}
.btn-period {
    background: #1a1d2e;
    border: 1px solid #2a2d3e;
    color: #888;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-period:hover { border-color: #1a6fdb; color: #ccc; }
.btn-period.active { background: #1a3560; color: #5ba3f5; border-color: #1a6fdb; }

.perf-breakdowns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.perf-breakdown-section {
    background: #1a1d2e;
    border: 1px solid #2a2d3e;
    border-radius: 10px;
    padding: 1rem;
}
.breakdown-title { font-size: 0.8rem; color: #aaa; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 0.8rem; }
.breakdown-row {
    display: grid;
    grid-template-columns: 110px 1fr 44px 44px;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.breakdown-label { font-size: 0.8rem; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breakdown-bar-wrap { background: #12141f; border-radius: 4px; height: 6px; }
.breakdown-bar { height: 6px; border-radius: 4px; background: #1a6fdb; transition: width 0.4s; }
.breakdown-pct { font-size: 0.8rem; font-weight: 600; text-align: right; }
.breakdown-pct.good    { color: #2ecc71; }
.breakdown-pct.neutral { color: #f1c40f; }
.breakdown-pct.bad     { color: #e74c3c; }
.breakdown-count { font-size: 0.75rem; color: #666; text-align: right; }

.perf-history { background: #1a1d2e; border: 1px solid #2a2d3e; border-radius: 10px; padding: 1rem; }

/* ===== Engine Proof (Performance side) ===== */
.perf-engine-proof { background: #1a1d2e; border: 1px solid #2a2d3e; border-radius: 10px; padding: 1.2rem; margin-bottom: 1.5rem; }
.engine-proof-grid { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.8rem 0; }
.proof-card { background: #12141f; border: 1px solid #2a2d3e; border-radius: 8px; padding: 0.8rem 1.2rem; min-width: 120px; text-align: center; }
.proof-val { font-size: 1.6rem; font-weight: 700; }
.proof-val.proof-good    { color: #2ecc71; }
.proof-val.proof-bad     { color: #e74c3c; }
.proof-val.proof-neutral { color: #f39c12; }
.proof-label { font-size: 0.8rem; color: #ccc; margin-top: 0.3rem; font-weight: 600; }
.proof-sublabel { font-size: 0.7rem; color: #666; margin-top: 0.15rem; }
.proof-insight { font-size: 0.85rem; color: #2ecc71; margin-top: 0.5rem; }
.proof-verdict-banner { display: flex; flex-direction: column; gap: 0.25rem; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 0.8rem; }
.proof-verdict-good { background: #0d2e1a; border: 1px solid #2ecc71; }
.proof-verdict-warn { background: #2e1a0d; border: 1px solid #f39c12; }
.proof-verdict-wait { background: #1a1d2e; border: 1px solid #4a5568; }
.proof-verdict-label { font-size: 1rem; font-weight: 700; color: #fff; }
.proof-verdict-note { font-size: 0.8rem; color: #aaa; }
.proof-explanation { font-size: 0.78rem; color: #777; margin-top: 0.6rem; line-height: 1.5; border-top: 1px solid #2a2d3e; padding-top: 0.6rem; }

/* Model Bevis — 4-panel grid */
.proof-panels-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 0.8rem 0; }
@media (max-width: 600px) { .proof-panels-grid { grid-template-columns: 1fr; } }
.proof-panel { background: #12141f; border: 1px solid #2a2d3e; border-radius: 8px; padding: 0.9rem 1rem; }
.proof-panel-q { font-size: 0.72rem; color: #888; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; }
.proof-panel-big { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.proof-panel-sub { font-size: 0.78rem; color: #aaa; margin-top: 0.25rem; }
.proof-panel-bench { font-size: 0.68rem; color: #555; margin-top: 0.4rem; font-style: italic; }
.proof-panel-verd { font-size: 0.76rem; font-weight: 600; margin-top: 0.45rem; border-radius: 4px; padding: 3px 8px; display: inline-block; }
.proof-panel-verd.pv-pos { background: #0d2e1a; color: #2ecc71; }
.proof-panel-verd.pv-neg { background: #2e0d0d; color: #e74c3c; }
/* Comparison bars */
.proof-compare { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.45rem 0; }
.pcr { display: flex; align-items: center; gap: 0.5rem; }
.pcr-lbl { font-size: 0.7rem; font-weight: 700; min-width: 42px; }
.pcr-win { color: #2ecc71; }
.pcr-loss { color: #e74c3c; }
.pcr-track { flex: 1; background: #1a1d2e; border-radius: 3px; height: 7px; overflow: hidden; }
.pcr-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.pcr-win-fill { background: linear-gradient(90deg, #1a5c3a, #2ecc71); }
.pcr-loss-fill { background: linear-gradient(90deg, #5c1a1a, #e74c3c); }
.pcr-num { font-size: 0.76rem; font-weight: 700; color: #ccc; min-width: 48px; text-align: right; }
/* CLV panel */
.proof-clv { border-radius: 8px; padding: 0.85rem 1rem; margin-top: 0.8rem; }
.clv-pos { background: #0a2318; border: 1px solid #2ecc71; }
.clv-neg { background: #231210; border: 1px solid #e74c3c; }
.clv-pending { background: #12141f; border: 1px solid #2a2d3e; font-size: 0.78rem; color: #666; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.clv-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.3rem; }
.clv-head { font-size: 0.85rem; font-weight: 700; color: #fff; }
.clv-count { font-size: 0.7rem; color: #888; }
.clv-nums { display: flex; gap: 2rem; margin: 0.4rem 0; }
.clv-num { display: flex; flex-direction: column; gap: 0.1rem; }
.clv-val { font-size: 1.5rem; font-weight: 800; }
.clv-lbl { font-size: 0.67rem; color: #888; }
.clv-desc { font-size: 0.77rem; color: #aaa; margin-top: 0.35rem; line-height: 1.5; }
.perf-history-list { display: flex; flex-direction: column; gap: 4px; margin-top: 0.8rem; }
.perf-history-row {
    display: grid;
    grid-template-columns: 70px 1fr 1fr 90px auto 50px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    background: #12141f;
    cursor: pointer;
    transition: background 0.15s;
}
.perf-history-row:hover { background: #1e2235; }
.ph-win  { border-left: 3px solid #2ecc71; }
.ph-loss { border-left: 3px solid #e74c3c; }
.ph-nearmiss { border-left: 3px solid #f39c12; }
.result-nearmiss { color: #f39c12; font-weight: 700; }
.ph-push { border-left: 3px solid #f1c40f; }
.ph-result { font-weight: 700; text-align: center; border-radius: 4px; padding: 2px 8px; font-size: 0.72rem; display: flex; align-items: center; gap: 4px; white-space: nowrap; min-width: 60px; }
.ph-result-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.5px; }
.pcr-unit { font-size: 0.62rem; color: #666; margin-left: 1px; }
.ph-pick-label { font-size: 0.68rem; color: #666; margin-right: 3px; }
.ph-vs { font-size: 0.72rem; color: #666; margin-left: 5px; }
.ph-player   { color: #e8eaf0; font-weight: 500; }
.result-win  { background: #1a3a2a; color: #2ecc71; }
.result-loss { background: #3a1a1a; color: #e74c3c; }
.result-push { background: #2a2a1a; color: #f1c40f; }
.ph-rank     { color: #666; font-size: 0.72rem; margin-left: 4px; }
.ph-curator  { font-size: 0.7rem; margin-left: 3px; }
.ph-meta     { display: flex; align-items: center; gap: 5px; }
.ph-round    { background: #1a3560; color: #5ba3f5; border-radius: 4px; padding: 1px 5px; font-size: 0.7rem; font-weight: 600; }
.ph-surface  { color: #888; font-size: 0.75rem; }
.ph-wintype  { font-size: 0.68rem; white-space: nowrap; border-radius: 4px; padding: 1px 5px; margin-left: 5px; vertical-align: middle; }
.ph-lowdata  { font-size: 0.7rem; margin-left: 3px; opacity: 0.8; cursor: help; }
.ph-score    { color: #f6ad55; font-size: 0.75rem; font-weight: 600; white-space: nowrap; text-align: right; }
.ph-score.learning-high { color: #e74c3c; }
.ph-score.learning-nearmiss { color: #f39c12; }
.ph-odds     { color: #5ba3f5; font-weight: 600; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ph-date     { color: #666; font-size: 0.68rem; font-weight: 400; }
.ph-score-detail { grid-column: 1/-1; font-size: 0.72rem; color: #888; padding: 2px 0 4px 30px; }
.ph-setpattern { background: #1a2a3a; color: #5ba3f5; border-radius: 3px; padding: 1px 5px; font-size: 0.7rem; font-weight: 700; margin-left: 6px; letter-spacing: 1px; }
.ph-sets-won { font-size: 0.7rem; color: #888; margin-left: 6px; }
.ph-sets-won.near-miss { color: #f39c12; font-weight: 600; }
.panel-sets-won { display: inline-block; font-size: 0.8rem; color: #888; margin-top: 4px; margin-left: 6px; }
.panel-sets-won.near-miss { color: #f39c12; font-weight: 600; }
.ph-posthoc  { grid-column: 1/-1; font-size: 0.72rem; color: #a78bfa; padding: 2px 0 6px 30px; font-style: italic; }

/* WinType farver — deles af admin + performance */
.wt-dominant  { background: #1a3a2a; color: #2ecc71; }
.wt-normal    { background: #1a2a3a; color: #5ba3f5; }
.wt-tight     { background: #3a2a10; color: #f6ad55; }
.wt-comeback  { background: #2a1a3a; color: #a78bfa; }

/* Learning Engine — sektion */
.perf-learning { background: #1a1013; border: 1px solid #3a1a1a; border-radius: 10px; padding: 1.2rem 1.5rem; margin-top: 1rem; }
.perf-learning-nearmiss { background: #1a1508; border: 1px solid #3a2a0a; border-radius: 10px; padding: 1.2rem 1.5rem; margin-top: 1rem; }
.perf-learning-desc { color: #aaa; font-size: 0.8rem; margin: 0.3rem 0 0.8rem; }
.panel-dq { color: #888; font-size: 0.75rem; }

/* ── Performance kamp-detaljer panel ── */
.perf-panel-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300;
}
.perf-panel {
    position: fixed; right: 0; top: 0; height: 100vh; width: 400px;
    background: #1a1d2e; border-left: 1px solid #2a2d3e;
    z-index: 301; overflow-y: auto; padding: 1.5rem;
    display: flex; flex-direction: column; gap: 1.2rem;
}
.perf-panel-close {
    position: absolute; top: 1rem; right: 1rem;
    background: none; border: none; color: #888; font-size: 1.2rem;
    cursor: pointer; padding: 4px 8px;
}
.perf-panel-close:hover { color: #fff; }
.perf-panel-header { padding-top: 0.5rem; }
.perf-panel-result { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.4rem; }
.perf-panel-player { font-size: 1.3rem; font-weight: 700; color: #e8eaf0; }
.perf-panel-vs     { font-size: 0.88rem; color: #888; margin-top: 0.2rem; }
.perf-panel-opp-odds { color: #5ba3f5; margin-left: 4px; font-size: 0.82rem; }
.perf-panel-meta   { font-size: 0.82rem; color: #888; margin-top: 0.2rem; }
.perf-panel-score  { font-size: 1rem; color: #f6ad55; font-weight: 600; margin-top: 0.4rem; }
.perf-panel-section { border-top: 1px solid #2a2d3e; padding-top: 1rem; }
.perf-panel-section-title { font-size: 0.78rem; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.7rem; }
.perf-panel-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.panel-tag { border-radius: 6px; padding: 4px 10px; font-size: 0.8rem; background: #12141f; color: #b0b8c1; }
.perf-score-row { display: grid; grid-template-columns: 90px 1fr 36px; align-items: center; gap: 8px; margin-bottom: 6px; }
.perf-score-label { font-size: 0.78rem; color: #aaa; }
.perf-score-bar-wrap { background: #12141f; border-radius: 4px; height: 6px; overflow: hidden; }
.perf-score-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.bar-good    { background: #2ecc71; }
.bar-neutral { background: #f6ad55; }
.bar-bad     { background: #e74c3c; }
.perf-score-val { font-size: 0.78rem; color: #e8eaf0; text-align: right; }
.perf-panel-note { font-size: 0.85rem; color: #b0b8c1; background: #12141f; border-radius: 6px; padding: 0.7rem; margin: 0; }
.perf-panel-footer { border-top: 1px solid #2a2d3e; padding-top: 0.8rem; display: flex; justify-content: space-between; font-size: 0.8rem; color: #666; margin-top: auto; }
@media (max-width: 768px) {
    .perf-panel { width: 100%; height: 85vh; top: auto; bottom: 0; border-left: none; border-top: 1px solid #2a2d3e; border-radius: 16px 16px 0 0; }
    .perf-history-row { grid-template-columns: 70px 1fr auto 50px; }
    .ph-tournament, .ph-score { display: none; }
}

/* Equity curve */
.equity-wrap {
    background: #1a1d2e;
    border: 1px solid #2a2d3e;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.equity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}
.equity-final { font-size: 1rem; font-weight: 700; }
.equity-pos   { color: #2ecc71; }
.equity-neg   { color: #e74c3c; }
.equity-svg   { width: 100%; height: 120px; display: block; }
.equity-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #555;
    margin-top: 4px;
}

.perf-empty { text-align: center; padding: 4rem 2rem; color: #888; }
.perf-empty-hint { font-size: 0.85rem; color: #555; margin-top: 0.5rem; }

.filter-advanced {
    margin-top: -0.8rem;
    margin-bottom: 1rem;
    border-top: 1px dashed #2a2d3e;
    background: #151722;
}

.filter-group-toggle {
    flex-shrink: 0;
    margin-left: auto;
}
.filter-spacer {
    font-size: 0.75rem;
    visibility: hidden;
    user-select: none;
}
.btn-advanced {
    align-self: flex-end;
}
.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #c0b8e8;
    font-size: 0.85rem;
    user-select: none;
}
.toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #6c3fc5;
    cursor: pointer;
}

.filter-group-full {
    flex: 1 1 100%;
}

.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.cat-chip {
    background: #1a1d2e;
    color: #7f8c8d;
    border: 1px solid #2a2d3e;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.cat-chip:hover {
    border-color: #1a6fdb;
    color: #ccc;
}
.cat-chip.active {
    background: #1a3560;
    color: #5ba3f5;
    border-color: #1a6fdb;
}

/* ===== States ===== */
.loading, .empty, .error {
    text-align: center;
    padding: 3rem;
    color: #888;
    background: #1a1d2e;
    border-radius: 10px;
    border: 1px solid #2a2d3e;
}
.error { color: #e74c3c; border-color: #e74c3c; }

/* ===== Date shortcuts ===== */
.date-shortcuts {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}
.btn-shortcut {
    background: transparent;
    border: 1px solid #2a2d3e;
    color: #888;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-shortcut:hover  { border-color: #2ecc71; color: #2ecc71; }
.btn-shortcut.active { background: #2ecc71; border-color: #2ecc71; color: #0f1117; font-weight: 700; }

/* ===== Fold-ud detaljer ===== */
.btn-details {
    background: transparent;
    border: none;
    color: #555;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.3rem 0;
    display: block;
    width: 100%;
    text-align: left;
    margin-top: 0.3rem;
}
.btn-details:hover { color: #888; }

.pick-details {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid #2a2d3e;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #888;
}
.detail-row span:first-child { width: 80px; flex-shrink: 0; }
.detail-row span:last-child  { width: 28px; text-align: right; color: #ccc; }
.detail-row .detail-bar {
    flex: 1;
    height: 5px;
    background: #2a2d3e;
    border-radius: 3px;
    overflow: hidden;
}
.detail-row .detail-bar div { height: 100%; background: #2ecc71; border-radius: 3px; }
.detail-row.injury .detail-bar div { background: #e74c3c; }

/* Serve/retur sub-statistik */
.serve-stats {
    margin: 0.8rem 0 0.5rem 0.5rem;
    padding: 0.55rem 0.7rem;
    background: #0b0b0b;
    border-radius: 6px;
    border: 1px solid #1a1a1a;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}
.serve-stat-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
}
.serve-stat-row span:first-child {
    width: 110px;
    flex-shrink: 0;
    color: #888;
}
.serve-stat-row span:last-child {
    width: 36px;
    text-align: right;
    color: #bbb;
    font-size: 0.70rem;
}
.serve-stat-bar-bg {
    flex: 1;
    height: 5px;
    background: #222;
    border-radius: 3px;
    overflow: hidden;
}
.serve-stat-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Medical Timeout banner */
.mt-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border-left: 3px solid;
}
.mt-critical { background: rgba(231,76,60,0.12); border-color: #e74c3c; }
.mt-warning  { background: rgba(230,126,34,0.12); border-color: #e67e22; }
.mt-notice   { background: rgba(241,196,15,0.10); border-color: #f1c40f; }
.mt-icon { font-size: 1.1rem; margin-top: 1px; }
.mt-content { display: flex; flex-direction: column; gap: 0.15rem; }
.mt-title { font-size: 0.8rem; font-weight: 600; color: #e8eaf0; }
.mt-detail { font-size: 0.75rem; color: #888; }

/* Serve/retur sub-statistik */
.serve-stats {
    margin: 0.8rem 0 0.5rem 0.5rem;
    padding: 0.55rem 0.7rem;
    background: #0b0b0b;
    border-radius: 6px;
    border: 1px solid #1a1a1a;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}
.serve-stat-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
}
.serve-stat-row span:first-child {
    width: 110px;
    flex-shrink: 0;
    color: #888;
}
.serve-stat-row span:last-child {
    width: 36px;
    text-align: right;
    color: #bbb;
    font-size: 0.70rem;
}
.serve-stat-bar-bg {
    flex: 1;
    height: 5px;
    background: #222;
    border-radius: 3px;
    overflow: hidden;
}
.serve-stat-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.no-data {
    flex: 1;
    font-size: 0.72rem;
    color: #444;
    font-style: italic;
    letter-spacing: 0.02em;
}

/* ===== Navbar links ===== */
.nav-links { display: flex; gap: 1.5rem; }
.nav-link {
    color: #888;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.nav-link:hover { color: #e8eaf0; }
.nav-link.active { color: #2ecc71; border-bottom-color: #2ecc71; }

/* ===== Navbar user / login ===== */
.nav-user { display: flex; align-items: center; gap: 0.75rem; }
.nav-username { color: #aaa; font-size: 0.85rem; }
.nav-konto { color: #aaa !important; font-size: 0.85rem; text-decoration: none; transition: color 0.2s; }
.nav-konto:hover, .nav-konto.active { color: #2ecc71 !important; }
.nav-logout {
    background: none; border: 1px solid #444; color: #aaa;
    padding: 3px 10px; border-radius: 4px; font-size: 0.8rem;
    cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.nav-logout:hover { border-color: #e74c3c; color: #e74c3c; }
.nav-login { border: 1px solid #2ecc71 !important; color: #2ecc71 !important;
    padding: 3px 12px; border-radius: 4px; }
.nav-login:hover { background: #2ecc7118; }

/* ===== Favorit-knapper (❤️ og ⭐) ===== */
.btn-fav-heart, .btn-fav-star {
    background: none; border: none; cursor: pointer;
    font-size: 1.05rem; padding: 0 4px; opacity: 0.35;
    transition: opacity 0.15s, transform 0.15s, filter 0.15s;
    vertical-align: middle; line-height: 1;
}
.btn-fav-heart:hover, .btn-fav-star:hover { opacity: 0.85; transform: scale(1.2); }
.btn-fav-heart.fav-active { opacity: 1; }
.btn-fav-star:not(.fav-active) { filter: grayscale(1); }
.btn-fav-star.fav-active  { opacity: 1; filter: drop-shadow(0 0 4px #f1c40f); }
.hero-header-right, .pick-header-right { display: flex; align-items: center; gap: 0.4rem; }

/* ===== Min Konto side ===== */
.konto-section {
    background: #1a1d2e; border: 1px solid #2a2d3e;
    border-radius: 10px; padding: 1.5rem; margin-bottom: 1.5rem;
}
.konto-section-title { font-size: 1.1rem; color: #2ecc71; margin-bottom: 1rem; }
.konto-empty { color: #666; font-size: 0.9rem; font-style: italic; }
.konto-success { background: #1a3a25; border: 1px solid #2ecc71; color: #2ecc71;
    padding: 0.5rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
.konto-error   { background: #3a1a1a; border: 1px solid #e74c3c; color: #e74c3c;
    padding: 0.5rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }

/* Favorit-spillere liste */
.fav-players-list { display: flex; flex-direction: column; gap: 0.5rem; }
.fav-player-item {
    display: flex; align-items: center; gap: 1rem;
    background: #0f1117; border-radius: 6px; padding: 0.6rem 1rem;
}
.fav-player-name { font-weight: 600; flex: 1; }
.fav-player-date { color: #666; font-size: 0.8rem; }
.btn-remove-fav {
    background: none; border: none; color: #555; cursor: pointer;
    font-size: 0.85rem; padding: 2px 6px; border-radius: 4px; transition: color 0.2s;
}
.btn-remove-fav:hover { color: #e74c3c; }

/* Gemte kampe */
.saved-matches-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.saved-match-item {
    display: flex; align-items: center; gap: 1rem;
    background: #0f1117; border-radius: 6px; padding: 0.6rem 1rem;
    border-left: 3px solid #444;
}
.saved-match-item.match-won  { border-left-color: #2ecc71; }
.saved-match-item.match-lost { border-left-color: #e74c3c; }
.saved-match-item.match-pending { border-left-color: #f39c12; }
/* Konto gemte kampe: badges er inline, ikke absolute */
.saved-match-result .result-badge { position: static; display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.result-win     { background: #1a3a25; color: #2ecc71; }
.result-loss    { background: #3a1a1a; color: #e74c3c; }
.result-pending { background: #3a2d10; color: #f39c12; }
.saved-match-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.saved-match-players { font-weight: 600; font-size: 0.9rem; }
.saved-match-meta { color: #666; font-size: 0.78rem; }
.saved-match-odds { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 50px; }
.saved-stats {
    display: flex; gap: 1.5rem; background: #0f1117;
    border-radius: 8px; padding: 1rem 1.5rem; flex-wrap: wrap;
}
.saved-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.saved-stat-val { font-size: 1.4rem; font-weight: 700; }
.saved-stat-label { font-size: 0.75rem; color: #666; }
.stat-good { color: #2ecc71; }
.stat-neutral { color: #f39c12; }
.stat-bad { color: #e74c3c; }

/* Konto-formular */
.konto-form { display: flex; flex-direction: column; gap: 1rem; max-width: 500px; }
.konto-field { display: flex; flex-direction: column; gap: 0.4rem; }
.konto-field label { font-size: 0.85rem; color: #aaa; }
.konto-field input {
    background: #0f1117; border: 1px solid #2a2d3e; color: #e8eaf0;
    padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.95rem;
}
.konto-field input:focus { outline: none; border-color: #2ecc71; }
.konto-field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.konto-field-row .konto-field { flex: 1; min-width: 100px; }


/* ===== Login-side ===== */
.login-page {
    min-height: 80vh; display: flex; align-items: center; justify-content: center;
}
.login-card {
    background: #1a1d2e; border: 1px solid #2a2d3e; border-radius: 12px;
    padding: 2.5rem 2rem; width: 100%; max-width: 380px;
    display: flex; flex-direction: column; gap: 1.5rem;
}
.login-logo { font-size: 1.6rem; text-align: center; color: #e8eaf0; }
.login-tabs { display: flex; gap: 0; border-bottom: 1px solid #2a2d3e; }
.login-tab {
    flex: 1; background: none; border: none; color: #888;
    padding: 0.6rem; font-size: 0.9rem; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}
.login-tab.active { color: #2ecc71; border-bottom-color: #2ecc71; }
.login-form { display: flex; flex-direction: column; gap: 0.75rem; }
.login-input {
    background: #12141e; border: 1px solid #2a2d3e; border-radius: 6px;
    color: #e8eaf0; padding: 0.7rem 1rem; font-size: 0.95rem;
    outline: none; transition: border-color 0.2s;
}
.login-input:focus { border-color: #2ecc71; }
.login-btn {
    background: #2ecc71; color: #000; border: none; border-radius: 6px;
    padding: 0.75rem; font-size: 1rem; font-weight: 600;
    cursor: pointer; margin-top: 0.5rem; transition: opacity 0.2s;
}
.login-btn:hover { opacity: 0.85; }
.login-btn:disabled { opacity: 0.5; cursor: default; }
.login-error {
    background: #2d1a1a; border: 1px solid #e74c3c66;
    color: #e74c3c; border-radius: 6px; padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
}

/* ===== Turneringskort ===== */
.tournament-card {
    background: #1a1d2e;
    border: 1px solid #2a2d3e;
    border-radius: 10px;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
}
.tournament-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.tournament-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tournament-name  { font-weight: 700; font-size: 1rem; color: #e8eaf0; }
.match-count      { font-size: 0.8rem; color: #555; }
.match-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.match-table th { color: #555; font-weight: 500; text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid #2a2d3e; }
.match-table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid #1a1d2e; }
.match-table tr:last-child td { border-bottom: none; }
.match-time   { color: #2ecc71; font-size: 0.82rem; width: 50px; }
.match-round  { color: #7f8c8d; font-size: 0.78rem; width: 40px; }
.player-name  { color: #e8eaf0; }
.player-name.winner { color: #2ecc71; font-weight: 600; }
.player-name.loser  { color: #555; }
.vs           { color: #444; text-align: center; width: 30px; }
.odds-col     { width: 55px; }
.odds-cell    { color: #f39c12; font-size: 0.82rem; font-weight: 600; text-align: center; }
.player-col   { min-width: 120px; }
.match-past   { opacity: 0.45; }
.match-finished { opacity: 0.75; }
.result-cell  { white-space: nowrap; }
.result-badge { font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; }
.result-badge.win { background: rgba(46,204,113,0.15); color: #2ecc71; }
.result-badge.pending { background: rgba(127,140,141,0.1); color: #7f8c8d; font-style: italic; }
.match-table .result-badge { position: static; display: inline-block; }
.result-score { font-size: 0.72rem; color: #8899bb; margin-left: 0.4rem; letter-spacing: 0.02em; }
.result-score-main { font-size: 0.82rem; color: #a0c4ff; font-weight: 500; letter-spacing: 0.03em; }

/* ===== Circuit sections ===== */
.circuit-section { margin-bottom: 2.5rem; }

.circuit-header {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0.4rem 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid;
    display: inline-block;
    padding-right: 1.5rem;
}
.circuit-header.atp { color: #5b9bd5; border-color: #5b9bd5; }
.circuit-header.wta { color: #d55b9b; border-color: #d55b9b; }

/* ===== Pick cards grid ===== */
.picks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.2rem;
}

.pick-card {
    background: #1a1d2e;
    border: 1px solid #2a2d3e;
    border-radius: 12px;
    padding: 1.2rem;
    position: relative;
    transition: border-color 0.2s, transform 0.2s;
}
.pick-card:hover { border-color: #2ecc71; transform: translateY(-2px); }
.pick-card--insider {
    background: #150f2a;
    border-color: #6c3fc5;
    box-shadow: 0 0 14px #6c3fc522;
}
.pick-card--insider:hover { border-color: #9d6fff; transform: translateY(-2px); }
.pick-card--today {
    background: #0d1f12;
    border: 2px solid #2ecc71;
    box-shadow: 0 0 14px #2ecc7122;
}
.pick-card--today:hover { border-color: #4ade80; transform: translateY(-2px); }
.pick-card-today-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: #2ecc71;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
}
.pick-card.pick-clash { border-color: #92400e; }
.pick-card.pick-clash:hover { border-color: #f59e0b; }
.hero-pick-card.pick-clash { border-color: #92400e !important; }

/* Clash-badges */
.clash-badge {
    display: inline-block;
    font-size: 0.73rem;
    background: #451a03;
    color: #fb923c;
    border: 1px solid #92400e;
    border-radius: 5px;
    padding: 0.18rem 0.55rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.clash-banner {
    font-size: 0.78rem;
    background: #451a03;
    color: #fb923c;
    border: 1px solid #92400e;
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
}


.pick-rank {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    background: #2a2d3e;
    color: #888;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.pick-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

.pick-player {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
}

.pick-ranking {
    font-size: 0.72rem;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.01em;
}

.pick-circuit {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}
.pick-circuit.atp { background: #1a4a8a; color: #5b9bd5; }
.pick-circuit.wta { background: #6b1a4a; color: #d55b9b; }

.pick-opponent {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.5rem;
}
.pick-opponent::before { content: ""; }

.pick-match {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

.tournament { font-size: 0.85rem; color: #aaa; }

.surface {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}
/* ===== Tags (category, surface, venue) ===== */
.pick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

.tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tag-category { background: #2a2d3e; color: #bbb; }
.tag-venue    { background: #1e2130; color: #888; }

.surface-hard        { background: #1a3a5c; color: #5b9bd5; }
.surface-hard-indoor { background: #1a2a4a; color: #7aaee8; }
.surface-clay        { background: #5c2e1a; color: #d5855b; }
.surface-grass       { background: #1a4a1a; color: #5bd55b; }
.surface-indoor      { background: #2a2d3e; color: #aaa; }

.pick-time {
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 0.8rem;
}

/* ===== Score bar ===== */
.pick-scores { margin-bottom: 0.8rem; }

.score-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: #888;
}

.bar-bg {
    flex: 1;
    background: #0f1117;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background 0.5s ease;
}

.score-value { font-weight: 700; min-width: 28px; text-align: right; }

/* ===== Odds ===== */
.pick-odds {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}
.odds-label { font-size: 0.8rem; color: #888; }
.odds-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f39c12;
}

/* ===== Reasoning ===== */
.pick-reasoning {
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
    line-height: 1.4;
}

/* ===== Win% sammenligning på pick-kort ===== */
.pick-winpct {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.7rem 0 0.5rem;
    padding: 0.6rem 0.7rem;
    background: #0e0e0e;
    border-radius: 8px;
    border: 1px solid #1e1e1e;
}
.winpct-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.winpct-label {
    font-size: 0.68rem;
    color: #666;
    width: 72px;
    flex-shrink: 0;
}
.winpct-bar-bg {
    flex: 1;
    height: 6px;
    background: #1e1e1e;
    border-radius: 3px;
    overflow: hidden;
}
.winpct-bar {
    height: 100%;
    border-radius: 3px;
}
.winpct-bar.model   { background: #4caf50; }
.winpct-bar.implied { background: #444; }
.winpct-num {
    font-size: 0.7rem;
    color: #aaa;
    width: 30px;
    text-align: right;
}
.winpct-edge {
    font-size: 0.72rem;
    font-weight: 700;
    align-self: flex-start;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-top: 0.1rem;
}
.winpct-edge.positive { background: #1a3a1a; color: #7fff7f; }
.winpct-edge.negative { background: #3a1a1a; color: #ff8080; }

/* ===== Hero pick card (Dagens Top Pick) ===== */
.hero-pick-card {
    background: linear-gradient(135deg, #0d1f12 0%, #111827 100%);
    border: 2px solid #2ecc71;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    box-shadow: 0 0 24px #2ecc7122;
}
.hero-pick-card--insider {
    background: linear-gradient(135deg, #0f0a20 0%, #1a1030 100%);
    border-color: #7c3aed;
    box-shadow: 0 0 28px #7c3aed33;
}
.hero-pick-card--insider .hero-label {
    color: #a98eff;
}

.hero-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #2ecc71;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.8rem;
}
/* Kurator-badge — vises på hero-label og pick-spillernavn */
.curator-badge {
    background: linear-gradient(135deg, #4a2fa0, #7c3aed);
    color: #e0d8ff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    margin-right: 0.3rem;
    vertical-align: middle;
}
/* Kurator-note — vises under reasoning på pick-kort */
.curator-note {
    font-size: 0.8rem;
    color: #a98eff;
    background: #1a1530;
    border-left: 3px solid #6c3fc5;
    padding: 0.4rem 0.7rem;
    border-radius: 0 6px 6px 0;
    margin: 0.4rem 0 0.2rem;
    font-style: italic;
}

.hero-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}

.hero-player {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hero-ranking {
    font-size: 0.85rem;
    font-weight: 600;
    color: #7f8c8d;
}

.hero-vs {
    font-size: 0.95rem;
    color: #888;
    margin-bottom: 0.6rem;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    font-size: 0.82rem;
    color: #aaa;
    margin-bottom: 1.2rem;
}

.hero-meta-sep { color: #555; }

.hero-bars {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}

.hero-bar-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.hero-bar-label {
    font-size: 0.72rem;
    color: #888;
    width: 72px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.hero-bar-bg {
    flex: 1;
    height: 12px;
    background: #1a1d2e;
    border-radius: 6px;
    overflow: hidden;
}

.hero-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
}

.hero-bar-model   { background: linear-gradient(90deg, #27ae60, #2ecc71); }
.hero-bar-implied { background: #3a3d4e; }
.hero-bar-edge    { background: linear-gradient(90deg, #e67e22, #f39c12); }

.hero-bar-pct {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ddd;
    width: 40px;
    text-align: right;
    flex-shrink: 0;
}

.hero-edge-pct { color: #f39c12; }

.hero-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hero-odds {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.hero-odds-label {
    font-size: 0.8rem;
    color: #888;
}

.hero-odds-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: #f39c12;
    line-height: 1;
}

.hero-reasoning {
    font-size: 0.82rem;
    color: #888;
    font-style: italic;
    line-height: 1.4;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
    .content       { padding: 0.8rem; }
    .filter-bar    { flex-direction: column; align-items: stretch; }
    .btn-advanced,
    .btn-import    { width: 100%; }
    .btn-import    { text-align: center; }
    .date-shortcuts { flex-wrap: wrap; }
    .btn-shortcut  { flex: 1; text-align: center; }
    .picks-grid    { grid-template-columns: 1fr; }
    .navbar        { flex-wrap: wrap; gap: 0.5rem; padding: 0.8rem 1rem; }
    .nav-links     { gap: 1rem; }
    .page-header h1 { font-size: 1.5rem; }
    .tournament-header { flex-direction: column; align-items: flex-start; }
    .match-table   { font-size: 0.8rem; }
}

/* ===== Betty AI ===== */

/* Floating tab — sidder fast i bunden til højre */
.betty-tab {
    position: fixed;
    bottom: 2rem;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #6c3fc5, #9b59b6);
    color: #fff;
    padding: 0.7rem 1.2rem 0.7rem 1rem;
    border-radius: 12px 0 0 12px;
    cursor: pointer;
    box-shadow: -3px 3px 16px rgba(108,63,197,0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    user-select: none;
}
.betty-tab:hover {
    transform: translateX(-4px);
    box-shadow: -5px 4px 20px rgba(108,63,197,0.65);
}
.betty-tab-open {
    background: linear-gradient(135deg, #4a2a8a, #7d3fa8);
}
.betty-tab-icon { font-size: 1.1rem; }
.betty-tab-label { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.5px; }

/* Overlay */
.betty-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1001;
    backdrop-filter: blur(2px);
}

/* Slide-in panel */
.betty-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100vw;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    background: #1a1d2e;
    border-left: 1px solid #2a2d3e;
    box-shadow: -8px 0 32px rgba(0,0,0,0.5);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.betty-panel-open {
    transform: translateX(0);
}

/* Header */
.betty-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    background: linear-gradient(135deg, #6c3fc5, #9b59b6);
    flex-shrink: 0;
}
.betty-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}
.betty-panel-icon { font-size: 1.2rem; }
.betty-pick-label {
    font-size: 0.75rem;
    font-weight: 400;
    background: rgba(255,255,255,0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.betty-panel-actions {
    display: flex;
    gap: 0.4rem;
}
.btn-betty-reset, .btn-betty-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.btn-betty-reset:hover, .btn-betty-close:hover {
    background: rgba(255,255,255,0.3);
}

/* Chat area */
.betty-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: #2a2d3e transparent;
}
.betty-msg {
    display: flex;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN — Insider Viden Panel
   ═══════════════════════════════════════════════════════════════ */

.admin-denied {
    text-align: center;
    padding: 3rem;
    color: #e74c3c;
    font-size: 1.1rem;
}

/* ── Toolbar ── */
.admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: #1a1d2e;
    border-radius: 10px;
    border: 1px solid #2a2d3e;
}
.admin-date-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-date-nav {
    background: #2a2d3e;
    border: none;
    color: #a0aec0;
    width: 32px; height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.btn-date-nav:hover { background: #3a3d50; color: #fff; }
.admin-date-nav input[type="date"] {
    background: #2a2d3e;
    border: 1px solid #3a3d50;
    color: #e2e8f0;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
}
.admin-actions { display: flex; align-items: center; gap: 0.75rem; }
.btn-settle {
    background: #2d6a4f;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.45rem 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s;
}
.btn-settle:hover:not(:disabled) { background: #40916c; }
.btn-settle:disabled { opacity: 0.5; cursor: not-allowed; }
.settle-msg { font-size: 0.82rem; color: #68d391; }

/* Diagnostics banner */
.diag-banner { border-radius: 8px; padding: 0.8rem 1rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: 6px; }
.diag-ok      { background: #0d2a1a; border: 1px solid #2ecc71; }
.diag-warning { background: #2a1f0d; border: 1px solid #f6ad55; }
.diag-fail    { background: #2a0d0d; border: 1px solid #e74c3c; }
.diag-overall { font-weight: 700; font-size: 0.9rem; }
.diag-meta    { font-size: 0.75rem; color: #888; }
.diag-checks  { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.diag-check   { font-size: 0.8rem; display: flex; flex-direction: column; gap: 1px; padding: 4px 8px; border-radius: 4px; }
.diag-check-fail    { background: #3a1515; }
.diag-check-warning { background: #2a2010; }
.diag-detail  { color: #aaa; font-size: 0.75rem; }

/* ── Stats bar ── */
.admin-stats-bar {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: #718096;
    margin-bottom: 1rem;
    padding: 0 0.25rem;
}
.admin-stats-bar span { white-space: nowrap; }
/* ── Admin sektioner (ny Admin.razor) ─────────────────────────────────── */
.admin-section { margin-bottom: 2rem; }

/* Backtest */
.backtest-summary { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: 0.9rem; color: #aab; margin-bottom: 0.75rem; padding: 0.75rem; background: #1a1d2e; border-radius: 8px; }
.backtest-breakdown { display: flex; gap: 1.5rem; font-size: 0.85rem; color: #7ecfa0; margin-bottom: 0.75rem; }
.backtest-table { display: grid; gap: 0.2rem; }
.backtest-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; padding: 0.4rem 0.6rem; border-radius: 4px; font-size: 0.82rem; align-items: center; }
.backtest-header { background: #1a1d2e; color: #888; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; }
.backtest-positive { background: #0d1f12; border: 1px solid #2ecc7133; }
.backtest-negative { background: #1f0d0d; border: 1px solid #e74c3c33; }

/* Tier locks */
.tier-lock { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; background: #1a1a2e; border: 1px dashed #444; border-radius: 8px; color: #888; font-size: 0.82rem; margin: 0.5rem 0; }
.tier-lock-icon { font-size: 1.1rem; }
.tier-lock strong { color: #a98eff; }
.tier-lock-small { display: inline-block; font-size: 0.75rem; color: #666; padding: 0.2rem 0.5rem; border: 1px dashed #333; border-radius: 4px; cursor: help; }
.success-msg { color: #2ecc71; font-size: 0.85rem; }
.bias-warnings-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.75rem 1rem; background: #1a1020; border: 1px solid #6c3fc555; border-radius: 8px; margin-bottom: 1rem; }
.bias-title { font-size: 0.78rem; font-weight: 700; color: #a98eff; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.5rem; }
.bias-warning { font-size: 0.82rem; padding: 0.25rem 0.7rem; border-radius: 20px; cursor: help; }
.bias-high   { background: #3a0d0d; color: #ff6b6b; border: 1px solid #c0392b55; }
.bias-medium { background: #2a1a0d; color: #f39c12; border: 1px solid #e67e2255; }
.delta-pos { color: #2ecc71; font-weight: 700; }
.delta-neg { color: #e74c3c; }
.admin-section-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.admin-section-header h2 { font-size: 1rem; font-weight: 600; color: #e2e8f0; margin: 0; }
.admin-section-actions { margin-left: auto; }

/* Pipeline Run Log */
.pipeline-log-table { font-size: 0.8rem; }
.pipeline-log-header { display: grid; grid-template-columns: 24px 80px 60px 50px 50px 50px 55px 40px; gap: 8px; padding: 4px 8px; color: #666; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #1e2235; }
.pipeline-log-row    { display: grid; grid-template-columns: 24px 80px 60px 50px 50px 50px 55px 40px; gap: 8px; padding: 6px 8px; border-radius: 4px; align-items: center; }
.pipeline-log-row:hover { background: #1a1d2e; }
.log-ok    { border-left: 3px solid #2ecc71; }
.log-error { border-left: 3px solid #e74c3c; background: #1a0a0a; }
.log-icon  { font-size: 0.9rem; }
.log-time  { color: #b0b4c8; }
.log-type  { color: #7c8db0; }
.log-num   { color: #e2e8f0; text-align: right; }
.log-dur   { color: #666; text-align: right; }
.log-error-detail { font-size: 0.75rem; color: #e74c3c; padding: 2px 8px 6px 40px; }
.admin-action-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.admin-action-msg { font-size: 0.82rem; padding: 0.4rem 0.75rem; border-radius: 6px; margin-top: 0.4rem; }
.msg-ok    { background: #14532d; color: #4ade80; }
.msg-error { background: #450a0a; color: #f87171; }
.match-elapsed { opacity: 0.6; }
.admin-winner-status { font-size: 0.78rem; }
.status-ok      { color: #4ade80; }
.status-warn    { color: #fbbf24; }
.status-pending { color: #718096; }
.pick-badge { font-size: 0.75rem; background: #1e3a5f; color: #63b3ed; border-radius: 4px; padding: 0.1rem 0.4rem; }

    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    cursor: pointer;
    color: #4a9eff;
    font-weight: 500;
    white-space: nowrap;
}
.admin-filter-toggle input { accent-color: #4a9eff; cursor: pointer; }
.btn-toggle-list {
    margin-left: auto;
    background: #1e2235;
    border: 1px solid #2a2d3e;
    color: #aab;
    font-size: 0.78rem;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
}
.btn-toggle-list:hover { border-color: #4a9eff; color: #fff; }

/* ── Match card ── */
.admin-match-card {
    background: #1a1d2e;
    border: 1px solid #2a2d3e;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.15s;
}
.admin-match-card:hover { border-color: #4a4d60; }
.match-decided { border-left: 3px solid #40916c; }

.admin-match-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.admin-match-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.admin-tournament { font-weight: 600; color: #e2e8f0; font-size: 0.9rem; }
.admin-surface {
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}
.surface-clay  { background: #c0392b22; color: #e07060; }
.surface-grass { background: #27ae6022; color: #6bcb77; }
.surface-hard  { background: #2980b922; color: #74b9ff; }
.admin-round {
    font-size: 0.75rem;
    background: #2a2d3e;
    color: #a0aec0;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
}
.admin-time { font-size: 0.78rem; color: #718096; }

.admin-wintype {
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-weight: 600;
}
.wt-dominant { background: #1a4731; color: #6bcb77; }
.wt-normal   { background: #1a3a4a; color: #74b9ff; }
.wt-tight    { background: #3a2d1a; color: #f6ad55; }
.wt-comeback { background: #3a1a3a; color: #d6bcfa; }

/* ── Players row ── */
.admin-players {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 0.5rem;
}
.admin-player { display: flex; flex-direction: column; gap: 0.4rem; }
.admin-player-right { align-items: flex-end; }
.player-won  { }
.player-lost { opacity: 0.5; }

.admin-player-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.admin-player-right .admin-player-info { flex-direction: row-reverse; }
.admin-player-name { font-weight: 600; color: #e2e8f0; font-size: 0.9rem; }
.admin-player-odds { font-size: 0.8rem; color: #a0aec0; }

.admin-pick-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.admin-pick-row-right { flex-direction: row-reverse; }

.admin-score-bar {
    position: relative;
    width: 80px; height: 8px;
    background: #2a2d3e;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}
.admin-score-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a9eff, #7c3aed);
    border-radius: 4px;
    transition: width 0.3s;
}
.admin-score-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #e2e8f0;
    min-width: 24px;
}

.admin-pick-badges {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.badge-curator {
    font-size: 0.7rem;
    background: #3d2c00;
    color: #f6ad55;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
}
.badge-override {
    font-size: 0.7rem;
    background: #1a2a3a;
    color: #74b9ff;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}
.badge-note { font-size: 0.85rem; cursor: help; }

.btn-edit-pick {
    background: #2a2d3e;
    border: 1px solid #3a3d50;
    color: #a0aec0;
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-edit-pick:hover { background: #3a3d50; color: #e2e8f0; border-color: #4a9eff; }

.no-pick { font-size: 0.75rem; color: #4a4d60; font-style: italic; }

.admin-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a4d60;
    font-size: 0.8rem;
    font-weight: 700;
    padding-top: 0.2rem;
}
.admin-score-detail { color: #a0aec0; font-size: 0.78rem; white-space: nowrap; }

/* ── Resultat-sætning ── */
.admin-result-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid #2a2d3e;
}
.admin-result-label { font-size: 0.8rem; color: #718096; }
.btn-set-winner {
    background: #2a2d3e;
    border: 1px solid #3a3d50;
    color: #a0aec0;
    border-radius: 6px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-set-winner:hover { background: #1a4731; color: #6bcb77; border-color: #40916c; }
.btn-set-winner.active { background: #1a4731; color: #6bcb77; border-color: #40916c; font-weight: 700; }
.btn-set-winner.winner-set { background: #14532d; color: #4ade80; border-color: #16a34a; font-weight: 600; }
.btn-set-winner.winner-set:hover { background: #166534; color: #86efac; border-color: #22c55e; }
.admin-score-input {
    background: #2a2d3e;
    border: 1px solid #3a3d50;
    color: #e2e8f0;
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    width: 140px;
}
.admin-score-input::placeholder { color: #4a4d60; }

/* ── Overlay ── */
.admin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 300;
    backdrop-filter: blur(2px);
}

/* ── Slide-in panel (desktop) / Bottom-sheet (mobil) ── */
.admin-panel {
    position: fixed;
    right: 0; top: 0;
    width: 400px;
    height: 100vh;
    background: #13151f;
    border-left: 1px solid #2a2d3e;
    z-index: 400;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-panel-open { transform: translateX(0); }

.admin-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.1rem 1.25rem 0.9rem;
    border-bottom: 1px solid #2a2d3e;
    flex-shrink: 0;
}
.admin-panel-title { font-size: 1.05rem; font-weight: 700; color: #e2e8f0; }
.admin-panel-subtitle { font-size: 0.78rem; color: #718096; margin-top: 0.2rem; }
.btn-panel-close {
    background: none;
    border: none;
    color: #718096;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: color 0.15s;
    flex-shrink: 0;
}
.btn-panel-close:hover { color: #e2e8f0; }

.admin-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    scrollbar-width: thin;
    scrollbar-color: #2a2d3e transparent;
}

.admin-panel-section { display: flex; flex-direction: column; gap: 0.6rem; }
.admin-panel-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #718096;
}
.override-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #4a4d60; margin-left: 0.4rem; }

/* Insider pick-historik */
.insider-history-list { display: flex; flex-direction: column; gap: 4px; }
.insider-history-row {
    display: grid; grid-template-columns: 22px 1fr auto auto auto;
    align-items: center; gap: 6px; font-size: 0.75rem; color: #aaa;
    padding: 4px 0; border-bottom: 1px solid #1e2135;
}
.insider-h-tournament { color: #ccc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insider-h-round { background: #1a3560; color: #5ba3f5; border-radius: 3px; padding: 1px 4px; font-size: 0.68rem; margin-left: 4px; }
.insider-h-score { color: #888; font-size: 0.72rem; white-space: nowrap; }
.insider-h-odds  { color: #5ba3f5; font-weight: 600; white-space: nowrap; }
.insider-h-date  { color: #555; font-size: 0.68rem; white-space: nowrap; }

/* Score grid */
.admin-score-grid { display: flex; flex-direction: column; gap: 0.45rem; }
.score-row {
    display: grid;
    grid-template-columns: 80px 1fr 50px;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.83rem;
}
.score-row > span:first-child { color: #a0aec0; }
.score-bar-mini {
    height: 6px;
    background: #2a2d3e;
    border-radius: 3px;
    overflow: hidden;
}
.score-bar-mini > div {
    height: 100%;
    background: linear-gradient(90deg, #4a9eff, #7c3aed);
    border-radius: 3px;
}
.score-num { font-weight: 700; color: #e2e8f0; text-align: right; }
.score-num.overridden { color: #f6ad55; }

.admin-reasoning {
    font-size: 0.8rem;
    color: #718096;
    font-style: italic;
    line-height: 1.5;
    padding: 0.5rem 0.7rem;
    background: #1a1d2e;
    border-radius: 6px;
    border-left: 2px solid #3a3d50;
}

/* Override grid */
.override-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.override-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #a0aec0;
}
.override-grid input[type="number"] {
    background: #2a2d3e;
    border: 1px solid #3a3d50;
    color: #e2e8f0;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    width: 100%;
    transition: border-color 0.15s;
}
.override-grid input[type="number"]:focus {
    outline: none;
    border-color: #4a9eff;
}
.btn-clear-overrides {
    background: none;
    border: 1px solid #4a2a2a;
    color: #e07060;
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
    align-self: flex-start;
    transition: all 0.15s;
}
.btn-clear-overrides:hover { background: #3a1a1a; }

/* Note input */
.admin-note-input {
    background: #2a2d3e;
    border: 1px solid #3a3d50;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    width: 100%;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.15s;
}
.admin-note-input::placeholder { color: #4a4d60; }
.admin-note-input:focus { outline: none; border-color: #4a9eff; }

/* Kurator */
.curator-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.curator-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #e2e8f0;
    cursor: pointer;
}
.curator-toggle input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #f6ad55;
    cursor: pointer;
}
.curator-rank-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #a0aec0;
}
.curator-rank-label input[type="number"] {
    background: #2a2d3e;
    border: 1px solid #3a3d50;
    color: #e2e8f0;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
}

/* Panel footer */
.admin-panel-footer {
    flex-shrink: 0;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid #2a2d3e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.save-error { font-size: 0.78rem; color: #e07060; }
.btn-save-pick {
    background: linear-gradient(135deg, #4a9eff, #7c3aed);
    border: none;
    color: #fff;
    border-radius: 8px;
    padding: 0.6rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-left: auto;
}
.btn-save-pick:hover:not(:disabled) { opacity: 0.88; }
.btn-save-pick:disabled { opacity: 0.4; cursor: not-allowed; }

/* Navbar admin link */
.nav-admin {
    color: #f6ad55 !important;
    font-weight: 700;
}
.nav-admin.active { color: #f6ad55 !important; }

/* ── Mobil: Bottom-sheet ── */
@media (max-width: 768px) {
    .admin-panel {
        right: 0; left: 0; top: auto; bottom: 0;
        width: 100%;
        height: 85vh;
        border-left: none;
        border-top: 1px solid #2a2d3e;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    .admin-panel-open { transform: translateY(0); }

    .admin-players {
        grid-template-columns: 1fr;
    }
    .admin-player-right { align-items: flex-start; }
    .admin-pick-row-right { flex-direction: row; }

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

    .admin-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

.betty-user {
    justify-content: flex-end;
}
.betty-assistant {
    justify-content: flex-start;
}
.betty-bubble {
    max-width: 85%;
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.5;
}
.betty-user .betty-bubble {
    background: #6c3fc5;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.betty-assistant .betty-bubble {
    background: #252840;
    color: #e0e0e0;
    border-bottom-left-radius: 4px;
    border: 1px solid #2a2d3e;
}

/* Typing animation */
.betty-thinking {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.7rem 1rem;
}
.betty-thinking span {
    width: 7px;
    height: 7px;
    background: #9b59b6;
    border-radius: 50%;
    animation: betty-bounce 1.2s infinite;
}
.betty-thinking span:nth-child(2) { animation-delay: 0.2s; }
.betty-thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes betty-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
    30%            { transform: translateY(-6px); opacity: 1; }
}

/* Input footer */
.betty-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.6rem 1rem 0.2rem;
    background: #141622;
}
/* Betty V2 — fri kamp-analyse bar */
.betty-analyze-bar {
    padding: 0.7rem 1rem 0.5rem;
    background: #141622;
    border-bottom: 1px solid #2a2d3e;
}
.betty-analyze-label {
    font-size: 0.72rem;
    color: #7a6da8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}
.betty-analyze-inputs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.betty-analyze-input {
    flex: 1;
    background: #1e2035;
    border: 1px solid #3a3d5a;
    border-radius: 6px;
    color: #e0e0f0;
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
    outline: none;
}
.betty-analyze-input:focus { border-color: #6c3fc5; }
.betty-analyze-vs { color: #5a5a7a; font-size: 0.8rem; }
.betty-analyze-btn {
    background: #4a2fa0;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.betty-analyze-btn:hover { background: #6c3fc5; }
.betty-analyze-btn:disabled { opacity: 0.4; cursor: default; }
/* Engine Warnings badges */
.engine-warnings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.4rem 0 0.2rem;
}
.engine-warning {
    background: #1e2035;
    border: 1px solid #3a3d5a;
    border-radius: 20px;
    color: #c0b8e8;
    font-size: 0.74rem;
    padding: 0.2rem 0.6rem;
    cursor: help;
    white-space: nowrap;
}
.betty-chip {
    background: transparent;
    border: 1px solid #4a3d8a;
    border-radius: 20px;
    color: #a98eff;
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.betty-chip:hover {
    background: #2a1f5a;
    border-color: #6c3fc5;
    color: #fff;
}
.betty-footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border-top: 1px solid #2a2d3e;
    background: #141622;
    flex-shrink: 0;
}
.betty-input {
    flex: 1;
    background: #252840;
    border: 1px solid #3a3d5c;
    border-radius: 10px;
    color: #e0e0e0;
    padding: 0.6rem 0.9rem;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s;
}
.betty-input:focus {
    border-color: #6c3fc5;
}
.betty-input::placeholder { color: #555; }
.betty-send {
    background: #6c3fc5;
    border: none;
    border-radius: 10px;
    color: #fff;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.1s;
}
.betty-send:hover { background: #7d4fd6; }
.betty-send:active { transform: scale(0.95); }
.betty-send:disabled { background: #333; cursor: not-allowed; opacity: 0.5; }

@media (max-width: 600px) {
    .betty-panel { width: 100vw; }
    .betty-tab { bottom: 1rem; }
}