/* ── RESET ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
button{cursor:pointer;font-family:inherit}
input,textarea{font-family:inherit}

/* ── VARIABLES ─────────────────────────────────── */
:root{
  --gold:#FFE66D; --teal:#4ECDC4; --orange:#FF6B35;
  --pink:#FF8B94; --purple:#7C3AED; --green:#4CAF50;
  --status-open:#FFE66D; --status-won:#4ECDC4; --status-lost:#FF8B94;
  --bg:#080808; --bg2:#111; --bg3:#181818; --bg4:#202020;
  --border:#222; --border-mid:#333; --border-hi:#444;
  --text:#ffffff; --text-muted:#ddd; --text-dim:#aaa; --text-ghost:#888;
  --font-display:'Bebas Neue',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --sidebar-w:268px;
  --r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:14px;
  --t:150ms ease;
}

/* ── BASE ───────────────────────────────────────── */
body{background:var(--bg);color:var(--text);font-family:var(--font-mono);min-height:100vh}
.hidden{display:none!important}

/* ── AUTH ───────────────────────────────────────── */
.auth-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:20px;
}
.auth-box{
  width:100%;max-width:380px;background:var(--bg2);
  border:1px solid var(--border-mid);border-radius:var(--r-xl);padding:36px 32px;
}
.auth-logo{
  font-family:var(--font-display);font-size:30px;letter-spacing:3px;
  color:var(--gold);text-align:center;margin-bottom:4px;
}
.auth-sub{font-size:9px;color:var(--text-dim);letter-spacing:3px;text-align:center;margin-bottom:32px}
.auth-error{
  background:color-mix(in srgb,var(--pink) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--pink) 40%,transparent);
  color:var(--pink);font-size:11px;letter-spacing:0.5px;
  padding:8px 12px;border-radius:var(--r-md);margin-bottom:12px;
}

/* ── LAYOUT ─────────────────────────────────────── */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.main{flex:1;overflow-y:auto;padding:32px 36px 60px;min-width:0}

/* ── SIDEBAR ────────────────────────────────────── */
.sidebar__logo{padding:22px 22px 18px;border-bottom:1px solid var(--border)}
.sidebar__logo-text{font-family:var(--font-display);font-size:22px;letter-spacing:3px;color:var(--gold);line-height:1}
.sidebar__logo-sub{font-size:8px;color:var(--text-dim);letter-spacing:3px;margin-top:3px}
.sidebar__nav{padding:16px 10px}
.sidebar__crew{padding:12px 10px 20px;border-top:1px solid var(--border);margin-top:auto}
.sidebar__section-label{font-size:8px;letter-spacing:2px;color:var(--text-dim);padding:0 12px;margin-bottom:6px;display:block}
.sidebar__current-user{
  margin:12px 10px 0;padding:10px 12px;border-radius:var(--r-md);
  background:var(--bg3);border:1px solid var(--border);
  display:flex;align-items:center;gap:8px;
}
.sidebar__user-name{font-size:11px;font-weight:700;letter-spacing:1px;flex:1}
.sidebar__user-role{font-size:8px;color:var(--text-dim);letter-spacing:1px}

/* ── NAV ────────────────────────────────────────── */
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:var(--r-md);font-size:11px;letter-spacing:1px;color:var(--text-muted);
  background:none;border:1px solid transparent;width:100%;text-align:left;
  transition:background var(--t),color var(--t);margin-bottom:2px;
}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 28%,transparent)}
.nav-item--dim{opacity:0.35;pointer-events:none}
.nav-icon{font-size:13px;width:18px;text-align:center;flex-shrink:0}

/* ── CREW ───────────────────────────────────────── */
.crew-item{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:var(--r-md);transition:background var(--t);cursor:pointer}
.crew-item:hover{background:var(--bg3)}
.crew-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.crew-name{font-size:11px;color:var(--text-muted);letter-spacing:0.5px;flex:1}
.crew-badge{font-size:8px;font-weight:700;padding:2px 6px;border-radius:10px;color:#0a0a0a}
.crew-delete{background:none;border:none;color:var(--text-ghost);font-size:13px;padding:2px 4px;border-radius:3px;transition:color var(--t);line-height:1}
.crew-delete:hover{color:var(--pink)}

/* ── TOP / STATS ────────────────────────────────── */
.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
.page-title{font-family:var(--font-display);font-size:44px;letter-spacing:4px;line-height:1}
.page-sub{font-size:9px;color:var(--text-dim);letter-spacing:2px;margin-top:5px}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;animation:fadeIn 250ms ease both}
.stat-card:nth-child(2){animation-delay:50ms}.stat-card:nth-child(3){animation-delay:100ms}.stat-card:nth-child(4){animation-delay:150ms}
.stat-card__val{font-family:var(--font-display);font-size:40px;letter-spacing:2px;line-height:1}
.stat-card__label{font-size:8px;color:var(--text-dim);letter-spacing:2px;margin-top:5px}
.stat-card__trend{font-size:9px;margin-top:7px}

/* ── FILTER ─────────────────────────────────────── */
.filter-row{display:flex;gap:8px;margin-bottom:22px}
.filter-btn{
  background:var(--bg2);border:1px solid var(--border);color:var(--text-muted);
  padding:7px 16px;font-size:10px;letter-spacing:1px;border-radius:var(--r-sm);transition:all var(--t);
}
.filter-btn:hover{border-color:var(--border-hi);color:var(--text)}
.filter-btn.active{background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}

/* ── BUTTONS ────────────────────────────────────── */
.new-btn{
  background:var(--gold);color:#0a0a0a;border:none;padding:12px 22px;
  font-weight:700;font-size:12px;letter-spacing:2px;border-radius:var(--r-md);
  transition:transform var(--t),box-shadow var(--t);white-space:nowrap;
}
.new-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px color-mix(in srgb,var(--gold) 25%,transparent)}
.new-btn:active{transform:scale(0.97)}
.admin-btn{
  background:color-mix(in srgb,var(--purple) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--purple) 40%,transparent);
  color:#b89dff;padding:12px 18px;font-size:11px;letter-spacing:2px;border-radius:var(--r-md);
  transition:all var(--t);white-space:nowrap;
}
.admin-btn:hover{background:color-mix(in srgb,var(--purple) 30%,transparent)}
.logout-btn{
  background:none;border:1px solid var(--border);color:var(--text-muted);
  padding:8px 12px;font-size:10px;letter-spacing:1px;border-radius:var(--r-md);
  transition:all var(--t);width:100%;margin-top:10px;
}
.logout-btn:hover{border-color:var(--border-hi);color:var(--text)}
.lock-btn{
  width:100%;background:var(--gold);color:#0a0a0a;border:none;padding:14px;
  font-weight:700;font-size:13px;letter-spacing:3px;border-radius:var(--r-md);
  margin-top:6px;transition:transform var(--t),opacity var(--t),box-shadow var(--t);
}
.lock-btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 20px color-mix(in srgb,var(--gold) 25%,transparent)}
.lock-btn:active{transform:scale(0.98)}
.lock-btn:disabled{opacity:0.3;cursor:not-allowed}
.cancel-btn{
  width:100%;background:none;border:1px solid var(--border-mid);color:var(--text-muted);
  padding:11px;font-size:11px;letter-spacing:2px;border-radius:var(--r-md);
  margin-top:8px;transition:all var(--t);
}
.cancel-btn:hover{border-color:var(--border-hi);color:var(--text)}
.icon-btn{
  background:none;border:1px solid var(--border);color:var(--text-muted);
  padding:5px 9px;font-size:11px;border-radius:var(--r-sm);transition:all var(--t);
}
.icon-btn:hover{border-color:var(--border-hi);color:var(--text)}
.icon-btn--danger:hover{border-color:color-mix(in srgb,var(--pink) 50%,transparent);color:var(--pink)}

/* ── BET CARDS ──────────────────────────────────── */
.bets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.empty-state{grid-column:1/-1;text-align:center;padding:80px 0;color:var(--text-ghost);font-size:12px;letter-spacing:3px}
.bet-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:12px 14px;cursor:pointer;transition:border-color var(--t),transform var(--t);
  position:relative;overflow:hidden;animation:fadeIn 200ms ease both;
}
.bet-card:nth-child(2){animation-delay:40ms}.bet-card:nth-child(3){animation-delay:80ms}.bet-card:nth-child(4){animation-delay:120ms}
.bet-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.bet-card.open::before{background:var(--status-open)}
.bet-card.won::before{background:var(--status-won)}
.bet-card.lost::before{background:var(--status-lost)}
.bet-card:hover{border-color:var(--border-hi);transform:translateY(-2px)}
.bet-card__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.bet-card__left{flex:1;min-width:0}
.bet-card__meta{display:flex;gap:8px;align-items:center;margin-bottom:5px}
.bet-card__title{font-family:var(--font-display);font-size:20px;letter-spacing:2px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bet-card__desc{font-size:10px;color:var(--text-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bet-card__actions{display:flex;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.pool-chip{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-md);padding:6px 12px;text-align:right;flex-shrink:0;margin-left:12px}
.pool-chip__label{font-size:7px;color:var(--text-dim);letter-spacing:1.5px}
.pool-chip__val{font-family:var(--font-display);font-size:22px;color:var(--gold);letter-spacing:1px;line-height:1.1}

/* ── PILLS / TAGS ───────────────────────────────── */
.status-pill{font-size:8px;font-weight:700;padding:3px 8px;border-radius:var(--r-sm);color:#0a0a0a;letter-spacing:1px;flex-shrink:0}
.status-pill.open{background:var(--status-open)}
.status-pill.won{background:var(--status-won)}
.status-pill.lost{background:var(--status-lost)}
.date-label{font-size:9px;color:var(--text-dim);letter-spacing:1px}
.owner-label{font-size:8px;color:var(--text-dim);letter-spacing:0.5px;margin-left:auto}
.p-tags{display:flex;flex-wrap:wrap;gap:8px}
.p-tag{display:flex;align-items:center;gap:4px}
.p-tag__dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.p-tag__name{font-size:9px;color:var(--text-dim)}
.p-tag__odds{font-size:9px;font-weight:700}

/* ── SPLIT BAR ──────────────────────────────────── */
.split-bar{height:6px;border-radius:3px;overflow:hidden;background:var(--bg3);display:flex;margin:8px 0 7px}
.split-bar__seg{transition:width 0.5s ease}

/* ── OVERLAY / PANEL ────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;backdrop-filter:blur(2px);animation:overlayIn 150ms ease}
.panel{background:var(--bg2);border:1px solid var(--border-mid);border-radius:var(--r-xl);width:100%;max-width:500px;max-height:90vh;overflow-y:auto;padding:28px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;animation:slideUp 200ms ease}
.panel--wide{max-width:560px}
.panel--sm{max-width:380px}
.panel::-webkit-scrollbar{width:4px}
.panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ── DETAIL PANEL ───────────────────────────────── */
.detail__topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.detail__title{font-family:var(--font-display);font-size:30px;letter-spacing:3px;margin:10px 0 6px;line-height:1.1}
.detail__desc{font-size:11px;color:var(--text-muted);margin-bottom:16px}
.pool-card{background:var(--bg3);border:1px solid color-mix(in srgb,var(--gold) 25%,transparent);border-radius:var(--r-lg);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;margin:16px 0}
.pool-card__label{font-size:8px;letter-spacing:2px;color:var(--text-dim)}
.pool-card__val{font-family:var(--font-display);font-size:38px;color:var(--gold);letter-spacing:2px;line-height:1}
.p-detail-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:10px;border-left-width:4px}
.p-detail-card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.p-detail-card__left{display:flex;align-items:center;gap:12px}
.p-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#0a0a0a;flex-shrink:0}
.p-detail-card__name{font-weight:700;font-size:13px;letter-spacing:1px}
.p-detail-card__odds{font-size:10px;color:var(--text-muted);margin-top:2px}
.p-detail-card__amt{font-family:var(--font-display);font-size:22px;letter-spacing:1px;line-height:1}
.p-detail-card__payout{font-size:10px;color:var(--teal);margin-top:2px}
.p-detail-card__share-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.5px;color:var(--text-ghost);margin-bottom:3px}
.share-bar-bg{background:var(--bg2);height:5px;border-radius:3px;overflow:hidden}
.share-bar-fill{height:100%;border-radius:3px;transition:width 0.5s ease}
.mark-row{display:flex;gap:10px;margin-top:22px}
.mark-btn{flex:1;border:none;padding:13px;font-weight:700;font-size:11px;letter-spacing:2px;border-radius:var(--r-md);transition:transform var(--t)}
.mark-btn:hover{transform:translateY(-1px)}
.detail__action-row{display:flex;gap:8px;margin-top:12px}
.close-btn{background:var(--bg4);border:1px solid var(--border-mid);color:var(--text-muted);font-size:10px;letter-spacing:1px;padding:6px 12px;border-radius:var(--r-sm);transition:all var(--t)}
.close-btn:hover{color:var(--text);border-color:var(--border-hi)}

/* ── FORMS ──────────────────────────────────────── */
.modal-title{font-family:var(--font-display);font-size:28px;letter-spacing:4px;color:var(--gold);margin-bottom:22px}
.form-group{margin-bottom:16px}
.form-group--inline{display:flex;gap:10px}
.form-group--inline .form-group{flex:1;margin-bottom:0}
.form-label{display:block;font-size:8px;letter-spacing:2px;color:var(--text-dim);margin-bottom:7px;font-weight:700}
.form-input{width:100%;background:var(--bg3);border:1px solid var(--border-mid);color:var(--text);padding:11px 12px;font-size:12px;border-radius:var(--r-md);outline:none;transition:border-color var(--t)}
.form-input:focus{border-color:#555}
.form-input::placeholder{color:var(--text-ghost)}
.form-select{width:100%;background:var(--bg3);border:1px solid var(--border-mid);color:var(--text);padding:11px 12px;font-size:12px;border-radius:var(--r-md);outline:none;appearance:none}
.odds-hint{font-size:10px;color:var(--purple);margin-top:5px;letter-spacing:0.5px}
.section-divider{height:1px;background:var(--border);margin:18px 0}

/* ── FRIEND CHIPS ───────────────────────────────── */
.friend-chips{display:flex;flex-wrap:wrap;gap:8px}
.f-chip{display:flex;align-items:center;gap:6px;background:var(--bg3);border:2px solid var(--border);border-radius:20px;padding:5px 12px 5px 6px;font-size:11px;color:var(--text-muted);transition:all var(--t)}
.f-chip:hover{border-color:var(--border-hi);color:var(--text)}
.f-chip.selected{color:inherit}
.f-chip__av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#0a0a0a;flex-shrink:0}
.friend-input-block{margin-bottom:14px}
.friend-input-block__header{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.friend-input-block__name{font-size:11px;font-weight:700;letter-spacing:1px}

/* ── PREVIEW BAR ────────────────────────────────── */
.preview-bar{height:12px;border-radius:6px;overflow:hidden;background:var(--bg3);display:flex;margin-top:8px}
.preview-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
.preview-legend__item{font-size:10px;font-weight:700}

/* ── ADMIN PANEL ────────────────────────────────── */
.admin-title{font-family:var(--font-display);font-size:28px;letter-spacing:4px;color:#b89dff;margin-bottom:6px}
.admin-sub{font-size:9px;color:var(--text-dim);letter-spacing:2px;margin-bottom:24px}
.admin-section{margin-bottom:28px}
.admin-section__title{font-size:9px;letter-spacing:2px;color:var(--text-dim);border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:14px}
.admin-code-display{
  background:var(--bg3);border:1px solid color-mix(in srgb,var(--purple) 40%,transparent);
  border-radius:var(--r-md);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;
}
.admin-code-val{font-family:var(--font-display);font-size:28px;letter-spacing:4px;color:#b89dff}
.user-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:8px}
.user-row__name{font-size:12px;font-weight:700;letter-spacing:1px;flex:1}
.user-row__role{font-size:9px;padding:2px 8px;border-radius:3px;letter-spacing:1px;font-weight:700}
.user-row__role.admin{background:color-mix(in srgb,var(--purple) 25%,transparent);color:#b89dff}
.user-row__role.user{background:var(--bg4);color:var(--text-muted)}
.color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ── CONFIRM ────────────────────────────────────── */
.confirm-title{font-family:var(--font-display);font-size:22px;letter-spacing:2px;margin-bottom:8px}
.confirm-msg{font-size:12px;color:var(--text-muted);margin-bottom:20px;line-height:1.6}
.confirm-row{display:flex;gap:10px}
.confirm-row .cancel-btn,.confirm-row .mark-btn{margin:0;flex:1}

/* ── ANIMATIONS ─────────────────────────────────── */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}

/* ── RESPONSIVE ─────────────────────────────────── */
@media(max-width:900px){.sidebar{width:220px}.stats-row{grid-template-columns:repeat(2,1fr)}.main{padding:24px 20px 40px}}
@media(max-width:640px){.sidebar{display:none}.main{padding:20px 16px 40px}.page-title{font-size:32px}.stats-row{grid-template-columns:repeat(2,1fr)}.topbar{flex-wrap:wrap;gap:12px}}

/* ── SPORT ADD ROW ───────────────────────────────── */
#f-sport-add-row { display:none; align-items:center; }
.bet-card__meta { flex-wrap: wrap; row-gap: 4px; }
.sidebar__current-user:hover { border-color: var(--border-hi); background: var(--bg4); }
.icon-btn--won  { border-color: color-mix(in srgb,var(--teal) 50%,transparent); color: var(--teal); }
.icon-btn--won:hover  { background: color-mix(in srgb,var(--teal) 15%,transparent); border-color: var(--teal); }
.icon-btn--lost { border-color: color-mix(in srgb,var(--pink) 50%,transparent); color: var(--pink); }
.icon-btn--lost:hover { background: color-mix(in srgb,var(--pink) 15%,transparent); border-color: var(--pink); }
.bet-card__actions { flex-wrap: wrap; gap: 6px; }

/* ── SPORT TABS ──────────────────────────────────── */
.sport-tabs-wrap {
  position: relative;
  margin-bottom: 20px;
  /* fade edges to hint scrollability */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
}
.sport-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 20px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sport-tabs::-webkit-scrollbar { display: none; }

.sport-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
  transition: all 150ms ease;
  cursor: pointer;
}

/* Sports with no bets — dim */
.sport-tab--empty {
  background: transparent;
  border-color: var(--border);
  color: var(--text-ghost);
}
.sport-tab--empty:hover {
  border-color: var(--border-mid);
  color: var(--text-dim);
}

/* Sports with bets — visible */
.sport-tab--has-bets {
  background: var(--bg2);
  border-color: var(--border-mid);
  color: var(--text-muted);
}
.sport-tab--has-bets:hover {
  border-color: var(--border-hi);
  color: var(--text);
  background: var(--bg3);
}

/* Active tab */
.sport-tab--active {
  background: color-mix(in srgb, var(--gold) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--gold) 55%, transparent) !important;
  color: var(--gold) !important;
}

/* Open-bet count badge on tab */
.sport-tab__badge {
  background: var(--gold);
  color: #0a0a0a;
  font-size: 8px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 8px;
  line-height: 1.4;
}
.sport-tab--active .sport-tab__badge {
  background: var(--gold);
  color: #0a0a0a;
}

/* ── WON CARD GLOW ───────────────────────────────── */
.bet-card.won {
  background: color-mix(in srgb, var(--teal) 8%, var(--bg2));
  border-color: color-mix(in srgb, var(--teal) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--teal) 20%, transparent),
              inset 0 0 40px color-mix(in srgb, var(--teal) 6%, transparent);
}
.bet-card.won .bet-card__title { color: var(--teal); }
.bet-card.won .pool-chip__val  { color: var(--teal); }
.bet-card.won .pool-chip       { border-color: color-mix(in srgb, var(--teal) 35%, transparent); }
.bet-card.won::before          { background: var(--teal); height: 4px; }

/* ── LOST CARD TINT ──────────────────────────────── */
.bet-card.lost {
  background: color-mix(in srgb, var(--pink) 5%, var(--bg2));
  border-color: color-mix(in srgb, var(--pink) 25%, transparent);
}
.bet-card.lost .bet-card__title { color: color-mix(in srgb, var(--pink) 70%, #fff); }
.bet-card.lost::before           { background: var(--pink); height: 4px; }

/* ── REOPEN BUTTON ───────────────────────────────── */
.icon-btn--reopen {
  border-color: color-mix(in srgb, var(--text-dim) 60%, transparent);
  color: var(--text-dim);
}
.icon-btn--reopen:hover {
  border-color: var(--border-hi);
  color: var(--text-muted);
}

/* ── MOBILE TOPBAR ───────────────────────────────── */
.mobile-topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  z-index: 200;
}
.mobile-logo {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--gold);
}

/* Hamburger button */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  width: 32px;
}
.hamburger span {
  display: block;
  height: 2px;
  background: var(--text-muted);
  border-radius: 2px;
  transition: all 200ms ease;
}
.hamburger:hover span { background: var(--text); }

/* Sidebar backdrop */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 299;
  display: none;
}
.sidebar-backdrop.hidden { display: none !important; }

/* ── RESPONSIVE: MOBILE ─────────────────────────── */
@media (max-width: 768px) {
  /* Hide the desktop sidebar — mobile uses the drawer instead */
  .sidebar { display: none !important; }
  .main { padding: 68px 14px 40px !important; width: 100%; }
  .stats-row { grid-template-columns: repeat(2,1fr); }
  .page-title { font-size: 26px; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .bets-grid { grid-template-columns: 1fr; }
  .sport-tabs-wrap { margin-left: -14px; margin-right: -14px; }
  .sport-tabs { padding-left: 14px; padding-right: 14px; }
}

/* ── ACTIVITY VIEW ───────────────────────────────── */
.activity-hero {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px 28px;
  margin-bottom: 20px;
  text-align: center;
}
.activity-hero__label {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.activity-hero__val {
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 6px;
}
.activity-hero__sign {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
}

.activity-row {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color var(--t), transform var(--t);
}
.activity-row:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
}

/* ── VISIBILITY BOOST ─────────────────────────────── */
/* Base font size up */
body { font-size: 15px; }

/* Bet card title bigger and brighter */
.bet-card__title { font-size: 22px; color: #fff; }
.bet-card__desc  { font-size: 12px; color: #bbb; }

/* Participant tags brighter */
.p-tag__name  { font-size: 11px; color: #bbb; }
.p-tag__odds  { font-size: 11px; }

/* Date labels brighter */
.date-label   { font-size: 10px; color: #aaa; }

/* Pool chip bigger */
.pool-chip__val   { font-size: 24px; }
.pool-chip__label { font-size: 9px; color: #aaa; }

/* Stat cards */
.stat-card__label { font-size: 11px; color: #aaa; letter-spacing: 1px; }
.stat-card__trend { font-size: 11px; }

/* Nav items */
.nav-item { font-size: 13px; color: #ccc; }
.nav-item:hover { color: #fff; }

/* Crew names */
.crew-name { font-size: 13px; color: #ccc; }

/* Section labels */
.sidebar__section-label { font-size: 10px; color: #888; letter-spacing: 2px; }

/* Filter buttons */
.filter-btn { font-size: 12px; color: #ccc; }
.filter-btn.active { color: var(--gold); }

/* Sport tabs */
.sport-tab { font-size: 11px; }
.sport-tab--has-bets { color: #ccc; }

/* Page subtitle */
.page-sub { font-size: 11px; color: #aaa; letter-spacing: 1px; }

/* Form labels */
.form-label { font-size: 10px; color: #aaa; letter-spacing: 1.5px; }

/* Form inputs bigger text */
.form-input  { font-size: 14px; color: #fff; }
.form-select { font-size: 14px; color: #fff; }

/* Detail panel */
.p-detail-card__name { font-size: 14px; }
.p-detail-card__odds { font-size: 11px; color: #bbb; }
.p-detail-card__payout { font-size: 11px; }

/* Admin panel */
.user-row__name { font-size: 13px; }
.admin-section__title { font-size: 10px; color: #aaa; letter-spacing: 1.5px; }

/* Action buttons on cards */
.icon-btn { font-size: 11px; color: #ccc; }

/* Owner label */
.owner-label { font-size: 10px; color: #aaa; }

/* Odds hint */
.odds-hint { font-size: 11px; }

/* Activity view */
.activity-hero__label { font-size: 11px; color: #aaa; }
.activity-hero__sign  { font-size: 13px; }
.activity-row { font-size: 13px; }

/* Modal titles */
.modal-title { font-size: 30px; }

/* Status pills slightly bigger */
.status-pill { font-size: 9px; padding: 3px 9px; }

/* Sidebar user info */
.sidebar__user-name { font-size: 13px; }
.sidebar__user-role { font-size: 10px; color: #aaa; }

/* Close button */
.close-btn { font-size: 11px; color: #bbb; }
.close-btn:hover { color: #fff; }

/* Split bar labels */
.p-detail-card__share-label span { font-size: 10px; color: #999; }

/* Preview legend */
.preview-legend__item { font-size: 11px; }

/* Confirm dialog */
.confirm-msg { font-size: 13px; color: #ccc; line-height: 1.6; }

/* ── LEADERBOARD ─────────────────────────────────── */
.lb-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 32px;
  padding: 0 20px;
}
.lb-podium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 140px;
}
.lb-podium-item--first { order: 0; }
.lb-podium-item:nth-child(2) { order: -1; }
.lb-podium-item:nth-child(3) { order: 1; }

.lb-podium-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #0a0a0a;
}
.lb-podium-item--first .lb-podium-avatar {
  width: 64px; height: 64px; font-size: 22px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--gold) 40%, transparent);
}
.lb-podium-name {
  font-family: var(--font-display);
  font-size: 16px; letter-spacing: 2px; color: #fff;
}
.lb-podium-pl { font-size: 13px; font-weight: 700; }
.lb-podium-base {
  width: 100%; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.lb-podium-item--first .lb-podium-base {
  background: color-mix(in srgb, var(--gold) 12%, var(--bg3));
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
}

.lb-list { display: flex; flex-direction: column; gap: 10px; }

.leaderboard-row {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.leaderboard-row--first {
  background: color-mix(in srgb, var(--gold) 6%, var(--bg2));
  border-color: color-mix(in srgb, var(--gold) 30%, transparent);
}
.lb-rank { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.lb-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #0a0a0a; flex-shrink: 0;
}
.lb-name-block { flex: 1; min-width: 100px; }
.lb-username { font-family: var(--font-display); font-size: 18px; letter-spacing: 2px; color: #fff; }
.lb-sub { font-size: 10px; color: #aaa; margin-top: 2px; letter-spacing: 0.5px; }
.lb-stats { text-align: right; }
.lb-stats--secondary { display: none; }
.lb-pl { font-family: var(--font-display); font-size: 22px; letter-spacing: 1px; line-height: 1; }
.lb-pl-label { font-size: 8px; color: #777; letter-spacing: 1.5px; margin-top: 2px; }
.lb-stat-val { font-size: 14px; font-weight: 700; line-height: 1; }

@media (min-width: 600px) {
  .lb-stats--secondary { display: block; }
}

/* ── BRIGHTNESS FINAL PUSH ───────────────────────── */
.bet-card__title        { font-size: 18px; color: #fff; }
.bet-card__desc         { font-size: 11px; color: #ccc; }
.p-tag__name            { font-size: 11px; color: #ccc; }
.pool-chip__val         { font-size: 20px; }
.pool-chip              { padding: 4px 10px; }
.stat-card__val         { font-size: 36px; }
.filter-btn             { font-size: 12px; color: #ddd; }
.nav-item               { color: #ddd; }
.crew-name              { color: #ddd; }
.date-label             { color: #bbb; }
.owner-label            { color: #bbb; }
.form-label             { color: #ccc; font-size: 10px; }
.section-divider        { background: #333; }
.bet-card__actions      { padding-top: 8px; margin-top: 8px; }
.icon-btn               { color: #ddd; border-color: #444; }
.close-btn              { color: #ccc; }

/* ── USER VS USER BET ────────────────────────────── */
.uvsu-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color var(--t), transform var(--t);
  position: relative;
  overflow: hidden;
  animation: fadeIn 200ms ease both;
}
.uvsu-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--orange));
}
.uvsu-card:hover { border-color: var(--border-hi); transform: translateY(-2px); }
.uvsu-vs-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 8px;
}
.uvsu-side {
  flex: 1;
  background: var(--bg3);
  border-radius: var(--r-md);
  padding: 10px 12px;
  text-align: center;
}
.uvsu-side__name  { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 1px; }
.uvsu-side__amt   { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; margin-top: 2px; }
.uvsu-side__odds  { font-size: 10px; color: #aaa; margin-top: 2px; }
.uvsu-vs          { font-family: var(--font-display); font-size: 22px; color: #555; letter-spacing: 2px; flex-shrink: 0; }
.uvsu-badge       { font-size: 8px; font-weight: 700; padding: 2px 7px; border-radius: 3px; color: #0a0a0a; letter-spacing: 1px; background: var(--purple); color: #fff; }

/* U-vs-U form */
.uvsu-form-sides { display: flex; gap: 12px; }
.uvsu-form-side  { flex: 1; background: var(--bg3); border-radius: var(--r-lg); padding: 14px; }
.uvsu-form-side__title { font-size: 10px; letter-spacing: 2px; color: #aaa; margin-bottom: 10px; font-weight: 700; }