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

:root {
    --bg-primary: #0f1118;
    --bg-secondary: #1a1d2e;
    --bg-card: #222640;
    --bg-input: #2a2e45;
    --text-primary: #e8e9ed;
    --text-secondary: #9ca3b4;
    --text-muted: #6b7280;
    --accent: #c9943a;
    --accent-hover: #b8832e;
    --green: #22c55e;
    --red: #ef4444;
    --yellow: #eab308;
    --orange: #f97316;
    --border: #2d3148;
    --nav-height: 60px;
    --header-height: 52px;
    --radius: 12px;
    --radius-sm: 8px;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

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

/* ========== Header ========== */
.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 100;
    border-bottom: 1px solid var(--border);
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-decoration: none;
}
.logo-img {
    height: 36px;
    width: 36px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}
.logo-text {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent);
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.logo:hover .logo-text {
    color: var(--accent);
}

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

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    background: var(--bg-card);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    min-width: 44px;
    min-height: 44px;
    overflow: hidden;
}
.icon-btn:hover {
    background: var(--bg-input);
    border-color: var(--accent);
}

/* Header & nav profile picture avatars */
.header-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.nav-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}
.icon-btn svg {
    width: 22px;
    height: 22px;
}

/* ========== Top Nav (2026-05-03) ==========
   Persistent text-only bar between the header and main content. Distinct
   from the bottom nav (icon-driven sport switcher) so the user reads:
       Top: Bet → Analyze            (the workflow)
       Bottom: which sport           (the entry point)
   The bar sits flush under the fixed header — main-content's top offset
   absorbs both header + nav so we don't double-fixed-position. */
.top-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 99;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 4px;
    padding: 6px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.top-nav__item {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.12s, color 0.12s;
}
.top-nav__item:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}
.top-nav__item--active {
    background: var(--bg-card);
    color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);
}
.top-nav__icon {
    display: inline-block;
    margin-right: 2px;
    font-size: 0.85em;
    opacity: 0.85;
    line-height: 1;
}

/* ========== Main Content ==========
   Top offset = header + top-nav. The 40px constant matches the rendered
   height of .top-nav at default font-size + 6+6 vertical padding +
   1px border. Conservative — if the nav grows we just bump this. */
.main-content {
    margin-top: calc(var(--header-height) + 40px);
    padding: 16px;
    padding-bottom: calc(var(--nav-height) + 80px);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ========== Messages ========== */
.messages {
    margin-top: calc(var(--header-height) + 40px);
    padding: 8px 16px;
}
.message {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    font-size: 0.9rem;
}
.message-success { background: rgba(34,197,94,0.15); color: var(--green); }
.message-error { background: rgba(239,68,68,0.15); color: var(--red); }
.message-warning { background: rgba(234,179,8,0.15); color: var(--yellow); }
.message-info { background: rgba(201,148,58,0.15); color: var(--accent); }

/* ========== Bottom Nav ========== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid var(--border);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 500;
    text-decoration: none;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 4px;
}
.nav-item.active {
    color: var(--accent);
}
.nav-item:hover {
    color: var(--text-primary);
}
.nav-item svg {
    width: 22px;
    height: 22px;
}

/* ========== Footer ========== */
.site-footer {
    text-align: center;
    padding: 20px 16px;
    padding-bottom: calc(var(--nav-height) + 20px);
}
.disclaimer {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

/* ========== Cards ========== */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
}
/* Status-tinted cards — used for the Market Movement panel and any future
   "card with a strong signal" surface. Subtle so they read as accents,
   not warning blocks. */
.card-success { border-color: rgba(34,197,94,0.45); background: linear-gradient(0deg, rgba(34,197,94,0.05), rgba(34,197,94,0.05)), var(--bg-card); }
.card-warning { border-color: rgba(239,68,68,0.45); background: linear-gradient(0deg, rgba(239,68,68,0.06), rgba(239,68,68,0.06)), var(--bg-card); }
.card-muted   { opacity: 0.85; }
.card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.card-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* ========== Badges ========== */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-green { background: rgba(34,197,94,0.2); color: var(--green); }
.badge-red { background: rgba(239,68,68,0.2); color: var(--red); }
.badge-yellow { background: rgba(234,179,8,0.2); color: var(--yellow); }
.badge-blue { background: rgba(201,148,58,0.2); color: var(--accent); }
.badge-gray { background: rgba(156,163,180,0.2); color: var(--text-secondary); }
/* 2026-05-06 — pending-status badges on Mock Bets surfaces. The detail
   property MockBet.pending_status_detail returns one of these color
   tokens; the template maps token → badge class. */
.badge-orange { background: rgba(249,115,22,0.2); color: var(--orange); }
.badge-muted { background: rgba(156,163,180,0.12); color: var(--text-muted); }
.badge-fav {
    background: rgba(234,179,8,0.15);
    color: var(--yellow);
    font-size: 0.7rem;
}
.badge-live {
    background: rgba(239,68,68,0.2);
    color: #ef4444;
    font-size: 0.7rem;
    animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.game-card-live {
    border-left: 3px solid #ef4444;
}
.section-title-live {
    color: #ef4444;
    display: flex;
    align-items: center;
    gap: 6px;
}
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: live-pulse 2s ease-in-out infinite;
}
.section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

/* ========== Stat Tiles ========== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.stat-tile {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 14px;
    text-align: center;
    border: 1px solid var(--border);
}
.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}
.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ========== Edge Values ========== */
.edge-positive { color: var(--green); }
.edge-negative { color: var(--red); }
.edge-neutral { color: var(--text-secondary); }

/* ========== Buttons ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    min-height: 44px;
    text-decoration: none;
    transition: background 0.15s;
}
.btn-primary {
    background: var(--accent);
    color: #fff;
}
.btn-primary:hover {
    background: var(--accent-hover);
    color: #fff;
}
.btn-secondary {
    background: var(--bg-input);
    color: var(--text-primary);
}
.btn-secondary:hover {
    background: var(--border);
}
.btn-sm {
    padding: 8px 14px;
    font-size: 0.8rem;
    min-height: 36px;
}
.btn-block {
    width: 100%;
}

/* ========== Forms ========== */
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.form-control {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 16px; /* prevents iOS zoom */
    outline: none;
    transition: border-color 0.15s;
}
.form-control:focus {
    border-color: var(--accent);
}
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%239ca3b4' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.form-error {
    color: var(--red);
    font-size: 0.8rem;
    margin-top: 4px;
}
.form-help {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 4px;
}

/* ========== Tables (card style on mobile) ========== */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    text-align: left;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
.data-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.data-table tr:last-child td {
    border-bottom: none;
}

/* ========== Confidence Indicators ========== */
.confidence-high { color: var(--green); }
.confidence-med { color: var(--yellow); }
.confidence-low { color: var(--red); }

/* ========== Line Movement ========== */
.line-up { color: var(--green); }
.line-up::before { content: "▲ "; }
.line-down { color: var(--red); }
.line-down::before { content: "▼ "; }

/* ========== Help Modal ========== */
.help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.help-sheet {
    background: var(--bg-secondary);
    border-radius: var(--radius) var(--radius) 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
    animation: slideUp 0.2s ease-out;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.help-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
}
.help-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.help-body h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--accent);
}
.help-body ul {
    list-style: none;
    padding: 0;
}
.help-body li {
    padding: 6px 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    border-bottom: 1px solid var(--border);
}
.help-body li:last-child {
    border-bottom: none;
}
.help-body li strong {
    color: var(--text-primary);
}

/* ========== Utility ========== */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }

/* Phase 2 lean pill — used on the Performance panel's spread/total
   table to match the yellow Lean badge family on the MLB hub. */
.lean-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(250,204,21,0.18);
    border: 1px solid rgba(250,204,21,0.55);
    color: #fde047;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.text-sm { font-size: 0.8rem; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.gap-row { display: flex; gap: 8px; flex-wrap: wrap; }

.page-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
}
.section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* ========== Offseason Banner ========== */
.offseason-banner {
    background: rgba(234,179,8,0.12);
    border: 1px solid rgba(234,179,8,0.3);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--yellow);
    line-height: 1.5;
}

/* ========== Empty State ========== */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}
.empty-state p {
    font-size: 0.9rem;
    margin-bottom: 16px;
}

/* ========== Login Gate ========== */
.login-gate {
    text-align: center;
    padding: 24px 16px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-top: 12px;
}
.login-gate p {
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-size: 0.9rem;
}

/* ========== Filter Bar ========== */
.filter-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}
.filter-chip {
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
    min-height: 36px;
    text-decoration: none;
}
.filter-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ========== Game Card ========== */
.game-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    display: block;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.15s;
}
.game-card:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.game-card .teams {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.game-card .team-name {
    font-weight: 600;
    font-size: 0.9rem;
}
.game-card .vs {
    color: var(--text-muted);
    font-size: 0.75rem;
}
.game-score {
    font-weight: 700;
    margin-left: 6px;
    padding: 2px 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    font-size: 0.95em;
}
.spread-tag {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--yellow);
    margin-left: 4px;
    white-space: nowrap;
}
.game-card .game-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.game-card .edge-row {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.8rem;
}

/* ========== Game Card Data Grid ========== */
.gc-grid {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    font-size: 0.75rem;
}
.gc-grid-header,
.gc-grid-row {
    display: grid;
    grid-template-columns: 56px repeat(auto-fit, minmax(0, 1fr));
    gap: 4px;
    align-items: center;
}
.gc-grid-header {
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.gc-grid-header span,
.gc-grid-row span {
    text-align: right;
}
.gc-grid-header span:first-child,
.gc-grid-row span:first-child {
    text-align: left;
}
.gc-row-label {
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.gc-grid-row {
    padding: 2px 0;
    font-weight: 500;
}

/* ===== System Verdict Panel ===== */
.cc-verdict {
    border-left-width: 4px;
    border-left-style: solid;
}
.cc-verdict-strong { border-left-color: #16a34a; background: rgba(34, 197, 94, 0.05); }
.cc-verdict-neutral { border-left-color: #facc15; background: rgba(250, 204, 21, 0.04); }
.cc-verdict-weak { border-left-color: #dc2626; background: rgba(220, 38, 38, 0.05); }
.cc-verdict-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}
.cc-verdict-eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 700;
}
.cc-verdict-headline {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
}
.cc-verdict-strong .cc-verdict-headline { color: #16a34a; }
.cc-verdict-neutral .cc-verdict-headline { color: #ca8a04; }
.cc-verdict-weak .cc-verdict-headline { color: #dc2626; }
.cc-verdict-confidence {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}
.cc-verdict-reasons {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cc-verdict-reasons li {
    padding: 3px 0;
    font-size: 0.88rem;
}
.cc-verdict-reasons .cc-verdict-warning { color: #ca8a04; }

/* 2026-04-30: TLDR line + Action items block. Sit between the
   verdict headline and the bullet evidence. The TLDR is the
   plain-English answer to "wait, why is the verdict WEAK if I'm up
   $430?" — it's what a friend would say to make sense of the
   apparent contradiction. Actions translate that diagnosis into
   1-3 next steps. */
.cc-verdict-tldr {
    margin: 10px 0 0 0;
    padding: 10px 12px;
    background: rgba(148, 163, 184, 0.08);
    border-left: 3px solid var(--text-secondary);
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
}
.cc-verdict-actions {
    margin: 10px 0 6px 0;
    padding: 8px 12px;
    background: rgba(201, 148, 58, 0.06);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
}
.cc-verdict-actions-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-bottom: 4px;
}
.cc-verdict-actions-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-primary);
}
.cc-verdict-actions-list li { padding: 2px 0; }

/* 2026-04-30: ROI by Sport — single-sport stat tile.
   Renders instead of a single-bar Chart.js when only one sport has
   settled bets. A bar chart with one bar fills the whole y-axis,
   reading as "GIANT VALUE!" regardless of the actual number — the
   stat tile is the honest treatment for n=1 sport. */
.cc-roi-by-sport-single {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
}
.cc-roi-by-sport-single-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.cc-roi-by-sport-single-value {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
}
.cc-roi-by-sport-single-sub {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* 2026-04-30: Small-sample badge.
   Applied next to a row's bet count when n < cc-low-n threshold (10).
   The whole row is also muted (~70% opacity) so the eye treats the
   row as informational, not actionable. Tooltip lives on the badge.

   Why a separate badge instead of just hiding low-n rows: the user
   still wants to SEE the row exists ("Strong tier had 1 bet"), they
   just need the framing that says "don't draw conclusions from this
   point yet." Hiding would make the page feel like data is missing. */
.cc-low-n-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(234, 179, 8, 0.16);
    color: #ca8a04;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(234, 179, 8, 0.4);
    cursor: help;
    vertical-align: middle;
}
.cc-low-n-row td {
    opacity: 0.72;
}
.cc-low-n-row td:first-child {
    /* Don't dim the label cell — keep the row identifiable. */
    opacity: 1;
}

/* 2026-04-30: clickable hero tiles. Anchored to the Bet Ledger and
   set a URL hash that the filter JS reads. Visual cue: subtle hover
   raise + cursor pointer so users know it's interactive. */
.cc-tile-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 100ms ease-out, box-shadow 100ms ease-out;
}
.cc-tile-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.cc-tile-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Filter banner above the Bet Ledger when a tile-click filter is
   active. Accent-colored so it reads as a state, not a warning. */
.cc-ledger-filter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 12px;
    padding: 8px 12px;
    background: rgba(201, 148, 58, 0.10);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
    font-size: 0.85rem;
    color: var(--text-primary);
}
.cc-ledger-filter-banner a {
    color: var(--accent);
    font-weight: 600;
}

/* 2026-04-30: House vs User model gap callout — fires when the
   user's custom model is meaningfully underperforming the house
   (ROI gap ≥ 5pp over 10+ bets each side). High-visibility but not
   alarming — soft red border + warning glyph. The point is "look
   here", not "panic". */
.cc-model-gap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-color: rgba(239, 68, 68, 0.45);
    background: linear-gradient(0deg, rgba(239,68,68,0.05), rgba(239,68,68,0.05)), var(--bg-card);
}
.cc-model-gap-icon {
    font-size: 1.6rem;
    line-height: 1;
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 2px;
}
.cc-model-gap-body { flex: 1; }
.cc-model-gap-headline {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.cc-model-gap-action {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.cc-model-gap-action a {
    color: var(--accent);
    font-weight: 600;
}

/* ===== Decision Quality pills ===== */
.dq-pill {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid currentColor;
}
.dq-perfect { color: #16a34a; background: rgba(34, 197, 94, 0.12); }
.dq-lucky { color: #ca8a04; background: rgba(250, 204, 21, 0.14); }
.dq-unlucky { color: #2563eb; background: rgba(59, 130, 246, 0.12); }
.dq-bad { color: #dc2626; background: rgba(220, 38, 38, 0.10); }
.dq-neutral { color: var(--text-muted); background: rgba(148, 163, 184, 0.10); }

/* ===== Edge bucket table ===== */
.cc-edge-bucket-table th,
.cc-edge-bucket-table td {
    padding: 8px 10px;
}

/* ===== Top Play reasons (elite banner) ===== */
.model-pick-why {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(250, 204, 21, 0.25);
}
.model-pick-why-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #facc15;
    font-weight: 700;
    margin-bottom: 4px;
}
.model-pick-why-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
}
.model-pick-why-list li {
    padding: 2px 0;
}
.model-pick-why-list li::before {
    content: "✓ ";
    color: #facc15;
    font-weight: 700;
    margin-right: 4px;
}

/* ===== Mock Bet Analytics Command Center ===== */

/* Quick time-filter chips above the filter form */
.cc-quick-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cc-quick-filters .filter-chip { font-size: 0.78rem; }

/* Hero summary — large top tiles. 5-up on wide, wraps cleanly. */
.cc-hero {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
@media (max-width: 1024px) {
    .cc-hero { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .cc-hero { grid-template-columns: repeat(2, 1fr); }
}
.cc-hero-tile {
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cc-hero-tile-primary {
    border-color: rgba(79, 140, 255, 0.55);
    background: rgba(79, 140, 255, 0.05);
}
.cc-hero-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
}
.cc-hero-value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
}
.cc-hero-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* AI summary panel — same shimmer treatment as game-detail AI insights */
.cc-ai-summary { padding: 14px 16px; }
.cc-ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.cc-ai-body p { margin: 0 0 8px 0; line-height: 1.5; }
.cc-ai-source-tag {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.12);
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Result drivers — six-column grid of small lists */
.cc-drivers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 1024px) {
    .cc-drivers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .cc-drivers-grid { grid-template-columns: 1fr; }
}
.cc-drivers-col {
    border-left: 2px solid var(--border);
    padding: 4px 0 4px 12px;
}
.cc-drivers-h {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 700;
    margin: 0 0 6px 0;
}
.cc-drivers-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cc-drivers-list li {
    padding: 4px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
.cc-drivers-list li:last-child { border-bottom: none; }
.cc-drivers-list a {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}
.cc-drivers-list a:hover { color: var(--accent); }
.cc-drivers-meta { display: block; font-size: 0.72rem; }

/* Market validation (CLV) — 4-up summary */
.cc-clv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 768px) {
    .cc-clv-grid { grid-template-columns: repeat(2, 1fr); }
}
.cc-clv-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
}
.cc-clv-value {
    font-size: 1.4rem;
    font-weight: 800;
}

/* Bet ledger table — horizontal scroll on narrow screens */
.cc-ledger-wrap { overflow-x: auto; }
.cc-ledger-table {
    width: 100%;
    font-size: 0.82rem;
}
.cc-ledger-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 700;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.cc-ledger-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    white-space: nowrap;
}
.cc-ledger-table tr:hover td { background: rgba(79, 140, 255, 0.04); }
.cc-ledger-table a { color: inherit; text-decoration: none; }
.cc-ledger-table a:hover { color: var(--accent); }

/* Bankroll summary — /mockbets/ page header */
.bankroll-summary {
    padding: 14px;
}
.bankroll-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
}
@media (min-width: 640px) {
    .bankroll-grid { grid-template-columns: repeat(5, 1fr); }
}
.bankroll-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bankroll-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bankroll-value {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Loss analysis — the "why this lost" badge + detail card.
   Color-codes the reason so the user can eye-scan their history: variance
   (blue, it was fine), model_error (orange, model was wrong), bad_edge
   (grey, shouldn't have bet), market_movement (yellow, market was right). */
.bet-loss-reason {
    padding: 6px 10px;
    border-radius: 4px;
    border-left: 3px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}
.bet-loss-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bet-loss-metrics { font-size: 0.75rem; }
.bet-loss-card { padding: 14px; }
.bet-loss-badge-lg {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.bet-loss-reason-variance {
    border-left-color: var(--accent);
    background: rgba(79, 140, 255, 0.08);
}
.bet-loss-reason-variance .bet-loss-badge,
.bet-loss-reason-variance .bet-loss-badge-lg { color: var(--accent); }
.bet-loss-reason-model_error {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}
.bet-loss-reason-model_error .bet-loss-badge,
.bet-loss-reason-model_error .bet-loss-badge-lg { color: #f59e0b; }
.bet-loss-reason-bad_edge {
    border-left-color: var(--text-muted);
    background: rgba(148, 163, 184, 0.08);
}
.bet-loss-reason-bad_edge .bet-loss-badge,
.bet-loss-reason-bad_edge .bet-loss-badge-lg { color: var(--text-muted); }
.bet-loss-reason-market_movement {
    border-left-color: #eab308;
    background: rgba(234, 179, 8, 0.08);
}
.bet-loss-reason-market_movement .bet-loss-badge,
.bet-loss-reason-market_movement .bet-loss-badge-lg { color: #eab308; }
.bet-loss-reason-unknown { border-left-color: var(--border); }

/* Per-bet cards — visual win/loss state */
.bet-card { border-left-width: 3px; border-left-style: solid; border-left-color: var(--border); }
.bet-card-win { border-left-color: var(--green); background: rgba(34, 197, 94, 0.04); }
.bet-card-loss { border-left-color: var(--red); background: rgba(239, 68, 68, 0.04); }
.bet-card-push { border-left-color: var(--text-muted); }
.bet-card-pending { border-left-color: var(--accent); }
.bet-result-badge { font-weight: 700; letter-spacing: 0.05em; }
.bet-money-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}
.bet-money-cell { display: flex; flex-direction: column; gap: 1px; min-width: 60px; }
.bet-money-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.bet-money-value { font-size: 0.95rem; font-weight: 600; }

/* CLV presentation — sign-colored so the eye lands on "Beat Market" vs
   "Market Beat You" before reading the number. Colors are explicit
   (not var-based) so they stay consistent regardless of theme drift. */
.clv-positive { color: #16a34a; }
.clv-negative { color: #dc2626; }
.clv-neutral { color: #6b7280; }
.clv-positive .bet-money-value,
.clv-negative .bet-money-value,
.clv-neutral  .bet-money-value { color: inherit; }
.bet-clv-cell { min-width: 160px; }
.bet-clv-line-move { display: block; font-size: 0.7rem; margin-top: 2px; }

/* Decision-layer model pick — banner on detail + inline on tiles */
.model-pick-banner {
    border-left: 3px solid var(--accent);
    background: rgba(79, 140, 255, 0.06);
}
.model-pick-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.model-pick-tier { letter-spacing: 0.06em; }
.model-pick-headline { line-height: 1.3; }
.model-pick-icon { margin-right: 4px; }
.gc-pick {
    padding-top: 6px;
    border-top: 1px solid var(--border);
    color: var(--text);
}
.gc-pick-tier {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.gc-pick-icon { margin-right: 4px; }
.gc-pick-line { color: var(--text-muted); margin-left: 2px; }
.gc-pick-edge { margin-left: 6px; font-weight: 600; }

/* Elite Plays featured section — sits above the main lobby board */
.elite-plays-section {
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid rgba(250, 204, 21, 0.35);
    background: linear-gradient(160deg, rgba(250, 204, 21, 0.08), rgba(250, 204, 21, 0.02) 55%, var(--bg-card));
    box-shadow: 0 0 22px rgba(250, 204, 21, 0.15);
}
.elite-plays-header { margin-bottom: 10px; }
.elite-plays-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.elite-plays-subtitle { margin: 2px 0 0; }
/* Elite section uses the shared .tiles-container grid — the strict 3-column
   cap applies here too. MAX_ELITE_PER_SLATE=2 means at most 2 cards fill
   the row; wider viewports leave one empty cell, which stays aligned with
   the main board grid below and keeps the visual rhythm consistent. */

.elite-play-card {
    background: var(--bg-card);
    border: 1px solid #facc15;
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.elite-play-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.elite-play-sport-badge {
    background: rgba(250, 204, 21, 0.2);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.5);
}
.elite-play-matchup {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.elite-play-tier {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #facc15;
}
.elite-play-pick {
    font-size: 1.08rem;
    line-height: 1.3;
}
.elite-play-icon { margin-right: 4px; }
.elite-play-line { color: var(--text-muted); margin-left: 2px; }
.elite-play-explanation {
    list-style: none;
    padding: 8px 0 2px;
    margin: 0;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 8px;
}
.elite-play-explanation li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.elite-play-row-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.elite-play-row-value {
    font-size: 0.95rem;
    font-weight: 700;
}
.elite-play-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}
@media (max-width: 480px) {
    .elite-play-explanation { grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .elite-play-row-value { font-size: 0.85rem; }
}

/* Confidence tiers — elite gets glow + gold accent, strong gets a subtle
   accent ring, standard is the default card. No size/layout changes so
   the 3-up grid stays aligned. */
/* Stronger visual hierarchy per the Phase 2 spec — elite POPS, strong is
   a clear step above standard, standard is quiet, not_recommended is
   clearly de-emphasized (but never hidden). */
.game-card-tier-elite {
    border: 2px solid #facc15;                       /* gold */
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    background: linear-gradient(180deg, rgba(250, 204, 21, 0.06), transparent 60%), var(--bg-card);
}
.game-card-tier-strong {
    border: 2px solid rgba(0, 200, 255, 0.6);
}
.game-card-tier-standard {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gc-pick-elite .gc-pick-tier { color: #facc15; }
.gc-pick-strong .gc-pick-tier { color: var(--accent); }

.model-pick-banner-elite {
    border-left-color: #facc15;
    background: linear-gradient(90deg, rgba(250, 204, 21, 0.12), rgba(250, 204, 21, 0.04) 60%, transparent);
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.2);
}
.model-pick-banner-elite .model-pick-tier { color: #facc15; }
.model-pick-banner-strong {
    border-left-color: var(--accent);
    background: rgba(79, 140, 255, 0.1);
}

/* Recommendation status — chip + not-recommended treatment.
   Not-recommended tiles stay fully readable (still visible) but are
   visually de-emphasized so the eye lands on recommended picks first. */
.gc-pick-header {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2px;
}
.gc-pick-status,
.model-pick-status {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 3px;
}
.gc-pick-status-recommended,
.model-pick-status-recommended {
    background: #16a34a;
    color: #fff;
    border: 1px solid #16a34a;
}
.gc-pick-status-not_recommended,
.model-pick-status-not_recommended {
    background: #6b7280;
    color: #fff;
    border: 1px solid #6b7280;
}
/* New action-CTA accent — "Recommended Bet:" / "Model Lean:" prefix on
   the pick line. Keeps contrast vs the rest of the inline pick text. */
.gc-pick-action,
.model-pick-action {
    font-weight: 700;
    color: var(--accent);
    margin-right: 2px;
}
.gc-pick-not_recommended .gc-pick-action,
.model-pick-banner-not_recommended .model-pick-action {
    color: var(--text-muted);
}
.gc-pick-reason,
.model-pick-reason {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Not-recommended cards stay visible but step back — softer border,
   reduced opacity so the eye skips them faster. NEVER display:none. */
.game-card-not_recommended {
    opacity: 0.7;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    box-shadow: none;
}
.game-card-not_recommended:hover {
    opacity: 1;
}
.model-pick-banner-not_recommended {
    opacity: 0.85;
    border-left-color: var(--text-muted);
    background: rgba(148, 163, 184, 0.05);
    box-shadow: none;
}

/* Recommendation performance widget on the mock-bet analytics page. */
.rec-perf-system {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.rec-perf-score-tile {
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: rgba(79, 140, 255, 0.06);
    flex: 1;
    min-width: 220px;
}
.rec-perf-score-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.rec-perf-score-value {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--accent);
}
.rec-perf-table { margin-top: 4px; }
.rec-perf-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rec-perf-chip-recommended {
    background: rgba(34, 197, 94, 0.15); color: #22c55e;
}
.rec-perf-chip-not_recommended {
    background: rgba(148, 163, 184, 0.15); color: var(--text-muted);
}
.rec-perf-chip-tier-elite {
    background: rgba(250, 204, 21, 0.15); color: #facc15;
}
.rec-perf-chip-tier-strong {
    background: rgba(79, 140, 255, 0.15); color: var(--accent);
}
.rec-perf-chip-tier-standard {
    background: rgba(148, 163, 184, 0.12); color: var(--text-muted);
}

/* Sort label */
.filter-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    align-self: center;
    white-space: nowrap;
}

/* ========== Slider ========== */
input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-input);
    border-radius: 3px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
}

/* ========== Tabs ========== */
.tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.tab-item {
    padding: 10px 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.tab-item.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ========== Profile Dropdown ========== */
.profile-dropdown-wrap {
    position: relative;
}
.profile-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 150;
    overflow: hidden;
}
.profile-dropdown.open {
    display: block;
}
.profile-dropdown-item {
    display: block;
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.1s;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.profile-dropdown-item:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

/* System status indicator — superuser-only dot in the header.
   Reads from the ops_status context processor; hidden entirely when not
   present. The wrapper is a real <a> tag (no JS needed for click) and
   has a 44×44 hit target so it lines up with the other header icon
   buttons and meets the project's tap-target rule. */
.system-status-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    text-decoration: none;
    border-radius: 999px;
    transition: background 0.15s ease;
}
.system-status-indicator:hover,
.system-status-indicator:focus-visible {
    background: rgba(255,255,255,0.05);
    outline: none;
}
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* Subtle inner highlight + outer halo gives the dot a "pilot light"
       feel — reads as a live indicator, not a static glyph. */
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.18),
        0 0 6px currentColor;
}
.status-dot--green   { background: var(--green);  color: var(--green); }
.status-dot--yellow  { background: var(--yellow); color: var(--yellow); }
.status-dot--red     { background: var(--red);    color: var(--red); }
.status-dot--unknown { background: #6b7280;        color: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
/* Active state for the dropdown — used by the Ops Command Center link
   when the user is on /ops/. Subtle accent so it reads as "you are here"
   rather than a hover state. */
.profile-dropdown-item--active {
    background: rgba(201,148,58,0.12);
    color: var(--accent);
    font-weight: 600;
}
.profile-dropdown-item--active:hover {
    background: rgba(201,148,58,0.22);
    color: var(--accent);
}
.profile-dropdown-divider {
    height: 1px;
    background: var(--border);
}
.profile-dropdown-logout {
    color: var(--red);
}
.profile-dropdown-logout:hover {
    color: var(--red);
}

/* ========== Profile Avatar ========== */
.profile-avatar-section {
    display: flex;
    align-items: center;
    gap: 16px;
}
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.profile-avatar-placeholder {
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.file-input {
    padding: 10px;
}

/* ========== Responsive ========== */

/* Tablet */
@media (min-width: 481px) and (max-width: 768px) {
    .stat-grid { grid-template-columns: repeat(3, 1fr); }
    .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Desktop */
@media (min-width: 769px) {
    .logo-text {
        font-size: 1.15rem;
    }
    .logo-img {
        height: 40px;
        width: 40px;
    }
    .main-content {
        padding: 24px 32px;
        padding-bottom: calc(var(--nav-height) + 80px);
    }
    .stat-grid { grid-template-columns: repeat(3, 1fr); }
    .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

    .help-sheet {
        border-radius: var(--radius);
        margin-bottom: 10vh;
    }
    .help-sheet.is-dragging {
        transition: none;
    }
    .help-overlay {
        align-items: center;
    }
    .help-draggable {
        cursor: grab;
    }
    .help-draggable:active {
        cursor: grabbing;
    }
}

/* ========== Sport Tabs ========== */
.sport-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sport-tab {
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s, border-color 0.15s;
}
.sport-tab:hover {
    color: var(--text-primary);
}
.sport-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.sport-tab-count {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(201,148,58,0.15);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 10px;
}
.sport-tab.active .sport-tab-count {
    background: rgba(201,148,58,0.3);
}

/* Sport tab icons */
.sport-tab-icon {
    flex-shrink: 0;
    opacity: 0.7;
}
.sport-tab.active .sport-tab-icon {
    opacity: 1;
}

/* ========== Value Board Accordion Sections ========== */
.vb-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
}
.vb-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    min-height: 48px;
    transition: background 0.15s;
}
.vb-section-header:hover {
    background: rgba(201, 148, 58, 0.05);
}
.vb-section-icon {
    flex-shrink: 0;
    color: var(--yellow);
}
.vb-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}
.vb-section-count {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(201, 148, 58, 0.15);
    color: var(--accent);
    padding: 1px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}
.vb-section-chevron {
    color: var(--text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    width: 20px;
    text-align: center;
}
.vb-section.open .vb-section-chevron {
    transform: rotate(180deg);
}
.vb-section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 12px;
}
.vb-section.open .vb-section-body {
    max-height: 5000px;
    padding: 0 12px 12px;
}
.vb-section.open .vb-section-body > .game-card {
    /* Grid `gap` controls spacing — reset the per-card margin so the
       existing .game-card style doesn't double up on vertical rhythm. */
    margin-bottom: 0;
}

/* Shared tile grid — strict 3-column max, used by every tile board in
   the app (lobby value board, elite plays section, any future grid).
   Enforcing the cap in one place means no template can accidentally
   render a 4-up board. */
.tiles-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 1024px) {
    .tiles-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .tiles-container { grid-template-columns: 1fr; }
}
.tiles-container > .game-card {
    /* Same margin reset as .vb-section-body — tiles-container owns vertical
       rhythm via `gap`, individual cards shouldn't add their own. */
    margin-bottom: 0;
}

/* Favorite team card accent — uses --team-color CSS variable from inline style */
.game-card-favorite {
    position: relative;
    overflow: hidden;
    border-top-color: var(--team-color, var(--border)) !important;
    border-top-width: 4px !important;
}
.game-card-favorite::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--team-color);
    z-index: 1;
}
.game-card-favorite:hover {
    border-top-color: var(--team-color, var(--accent)) !important;
}

/* ========== AI Insight ========== */
.ai-insight-card {
    border-left: 3px solid var(--accent);
}
.ai-insight-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.ai-insight-body {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-primary);
}
.ai-insight-body h4 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 8px 0 2px;
    color: var(--accent);
}
.ai-insight-body ul {
    margin: 2px 0 6px 16px;
    padding: 0;
}
.ai-insight-body li {
    margin-bottom: 2px;
}
.ai-insight-body p {
    margin-bottom: 4px;
}
.ai-insight-error {
    background: rgba(239,68,68,0.15);
    color: var(--red);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}
.badge-ai {
    background: rgba(201,148,58,0.2);
    color: var(--accent);
}
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-left: 6px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.ai-insight-loading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shimmer-line {
    height: 12px;
    width: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--border) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ai-loading-msg {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    animation: pulse-fade 2s ease-in-out infinite;
}
@keyframes pulse-fade {
    0%, 100% { opacity: .4; }
    50% { opacity: 1; }
}

/* ========== Feedback Quick Status ========== */
.fb-quick-status {
    appearance: none;
    -webkit-appearance: none;
    padding: 4px 28px 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    min-height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239ca3b4' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.qs-blue { background: rgba(201,148,58,0.2); color: var(--accent); }
.qs-yellow { background: rgba(234,179,8,0.2); color: var(--yellow); }
.qs-green { background: rgba(34,197,94,0.2); color: var(--green); }
.qs-gray { background: rgba(156,163,180,0.2); color: var(--text-secondary); }
.fb-trash-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    transition: color 0.15s, background 0.15s;
}
.fb-trash-btn:hover {
    color: var(--red);
    background: rgba(239,68,68,0.12);
}

/* ========== Golf Event Detail ========== */
.golf-odds-table-wrap { overflow-x: auto; }
.golf-odds-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.golf-odds-table td { vertical-align: middle; }
.golf-odds-cards { display: none; }

.golf-golfer-card { padding: 10px 14px; }
.golf-golfer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.golf-golfer-info { display: flex; flex-direction: column; min-width: 0; }
.golf-golfer-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }

/* Golfer search autocomplete */
.golfer-search-wrap { position: relative; }
.golfer-search-results {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); max-height: 200px; overflow-y: auto;
    z-index: 400; display: none;
}
.golfer-search-results.active { display: block; }
.golfer-search-item {
    padding: 8px 12px; cursor: pointer; font-size: 0.9rem;
    color: var(--text-primary); border-bottom: 1px solid var(--border);
}
.golfer-search-item:last-child { border-bottom: none; }
.golfer-search-item:hover { background: rgba(201,148,58,0.12); }

@media (max-width: 600px) {
    .golf-odds-table-wrap { display: none; }
    .golf-odds-cards { display: block; }
}