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


:root {
  --black: #000;
  --white: #fff;
  --gray-100: #f7f7f7;
  --gray-200: #efefef;
  --gray-300: #dbdbdb;
  --gray-400: #c7c7c7;
  --gray-500: #8e8e8e;
  --gray-700: #262626;
  --blue: #0095f6;
  --blue-dark: #0074cc;
  --green: #00b074;
  --green-bg: #e6f9f3;
  --red: #ed4956;
  --red-bg: #fdecea;
  --orange: #f97316;
  --orange-bg: #fff3e8;
  --brand: #2bc6b3;
  --brand-light: #e6faf7;
  --nav-h: 60px;
  --top-h: 52px;
  --max-w: 480px;
  --radius: 14px;
}

@media (max-width: 0px) {

  /* ── Remap all design tokens ── */
  :root {
    --black:       #f2f2f7;
    --white:       #1c1c1e;
    --gray-50:     #1c1c1e;
    --gray-100:    #000000;
    --gray-200:    #2c2c2e;
    --gray-300:    #3a3a3c;
    --gray-400:    #636366;
    --gray-500:    #8e8e93;
    --gray-600:    #ebebf5;
    --gray-700:    #f2f2f7;
    --gray-800:    #f2f2f7;
    --gray-900:    #ffffff;
    --green-bg:    #0a2a1e;
    --red-bg:      #2d0a0e;
    --orange-bg:   #2d1800;
    --brand-light: #0a2928;
  }

  html { color-scheme: dark; }

  .slip-tray { background: #1e1e20; }

  input:not([type=submit]):not([type=button]):not([type=range]),
  textarea, select {
    background: #2c2c2e;
    color: #f2f2f7;
    border-color: #3a3a3c;
  }
  input::placeholder, textarea::placeholder { color: #636366; }

  .search-input, .search-bar, .search-wrap input {
    background: #2c2c2e;
    color: #f2f2f7;
  }

  .chat-input {
    color: #f2f2f7;
  }

  .bubble.theirs {
    background: #2c2c2e;
    color: #f2f2f7;
    box-shadow: none;
  }

  .modal-overlay, .modal-backdrop, .sheet-backdrop {
    background: rgba(0,0,0,0.75);
  }

  .story-quote-bubble {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #ebebf5;
  }

  .pick-select { background-color: #2c2c2e; color: #f2f2f7; border-color: #3a3a3c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }

  .slip-toast { background: #2c2c2e; color: #f2f2f7; }

  .admin-btn-dismiss { background: #3a3a3c; color: #f2f2f7; }

  .avatar { box-shadow: 0 0 0 1px #3a3a3c; }

  * { scrollbar-color: #3a3a3c transparent; }

  .pn-panel { background: #000; }
  .pn-card { background: #1c1c1e; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
  .pn-card.unread { background: #1e2430; box-shadow: 0 1px 8px rgba(0,0,0,0.5); }
  .pn-message { color: #f2f2f7; }
  .pn-section-header { color: #8e8e93; }
  .pn-badge { border-color: #1c1c1e; }
  .pn-avatar { border-color: #1c1c1e; }
  .pn-stack-avatar { border-color: #1c1c1e; }
  .pn-avatar-extra { background: #3a3a3c; color: #ebebf5; border-color: #1c1c1e; }

  .user-search-inner { background: #2c2c2e; border-color: #3a3a3c; }
  .user-search-inner:focus-within { background: #2c2c2e; border-color: var(--brand); }
  .user-search-input { color: #f2f2f7; }
  .user-search-results { background: #1c1c1e; border-color: #3a3a3c; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
  .user-search-row { border-bottom-color: #2c2c2e; }
  .user-search-row:hover { background: #2c2c2e; }
  .user-search-name { color: #f2f2f7; }
  .user-search-sub { color: #8e8e93; }
  .user-search-empty { color: #8e8e93; }

  .slip-count-badge { color: #fff; }

  .my-slip-card { border-color: #3a3a3c; box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
  .my-slip-collapse-btn { background: #2c2c2e; color: #ebebf5; }
  .my-slip-collapse-btn:hover { background: #3a3a3c; }
  .slip-add-pill-btn { background: #2c2c2e; color: #f2f2f7; }
  .slip-add-pill-btn:hover { background: #3a3a3c; }
  .my-slip-add-row { border-top-color: #2c2c2e; }
  .slip-add-row { border-top-color: #2c2c2e; }
  .my-slip-empty-label { color: #636366; }
  .my-slip-max-note { color: #8e8e93; }
  .empty-slip-card { background: #1c1c1e; border-color: #2c2c2e; box-shadow: none; }
  .empty-slip-top { border-bottom-color: #3a3a3c; }
  .empty-slip-dot, .empty-slip-line, .empty-slip-odds-ph { background: #2c2c2e; }
  .empty-slip-divider { background: #2c2c2e; }
  .empty-slip-tear { border-top-color: #3a3a3c; }
  .empty-slip-msg { color: #ebebf5; }
  .empty-slip-sub { color: #636366; }

  .game-card { border-color: #2c2c2e; }
  .game-card:hover, .game-card.active { background: #1c1c1e; }
  .props-panel { background: #000; border-color: #2c2c2e; }
  .props-group { border-color: #2c2c2e; }

  .book-lines-team { border-bottom-color: #2c2c2e; }
  .book-lines-team-name { color: #f2f2f7; }
  .book-lines-line { color: #8e8e93; }
  .odds-pick-big { background: #1c1c1e; }
  .odds-pick-big:hover { background: #2c2c2e; }
  .odds-pick-big:first-child { border-right-color: #2c2c2e; }
  .game-pick-result .odds-pick-big { border-color: #3a3a3c; }
  .game-pick-result .odds-pick-big:first-child { border-right-color: #3a3a3c; }
  .odds-result-na { color: #636366; }

  .props-section { border-bottom-color: #2c2c2e; }
  .prop-row { border-bottom-color: #2c2c2e; }
  .prop-player { color: #f2f2f7; }
  .prop-market { color: #8e8e93; }
  .lines-section-label { color: #8e8e93; border-bottom-color: #2c2c2e; }

  .bet-block { border-color: #3a3a3c; }
  .bet-matchup-bar { background: #2c2c2e; color: #f2f2f7; }
  .bet-matchup-bar.secondary { background: #1c1c1e; }
  .leg-divider { background: #2c2c2e; }

  .sport-tabs { background: #1c1c1e; }
  .sport-tab { color: #636366; }
  .sport-tab:hover { color: #ebebf5; }
  .sport-tab.active { background: #2c2c2e; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }

  .section-label { color: #8e8e93; }

  .gamble-responsibly-bar { background: transparent; color: #636366; border-color: transparent; }

  .score-card { background: #1c1c1e; border-color: #2c2c2e; }
  .scores-section { background: transparent; border-bottom: none; }
  .scores-header { color: #8e8e93; }

  .rec-tabs { background: #2c2c2e; border-bottom: none; }
  .rec-tab { color: #8e8e93; }
  .rec-tab.active { color: #f2f2f7; background: #3a3a3c; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
  .rec-tab-hint { color: #8e8e93; }

  .fav-leg-row { background: #1c1c1e; border-bottom-color: #2c2c2e; }
  .fav-leg-row:hover { background: #2c2c2e; }
  .fav-leg-player { color: #f2f2f7; }
  .fav-leg-sub { color: #8e8e93; }

  .auth-card { background: #1c1c1e; border-color: #2c2c2e; }
  .auth-title { color: #f2f2f7; }
  .auth-sub { color: #8e8e93; }
  .form-label { color: #8e8e93; }
  .form-hint { color: #636366; }
  .tos-text { color: #8e8e93; }
  .tos-text a { color: var(--brand); }

  .bottom-nav { background: #000; border-top: none; }
  .nav-item { color: #636366; }
  .nav-item:hover { color: #ebebf5; }
  .nav-item.active { color: #f2f2f7; }
  .nav-item.active::after { background: var(--brand); }

  .play-card {
    border: 1px solid #2c2c2e;
    box-shadow: 0 1px 6px rgba(0,0,0,0.45);
  }

  .action-btn.fade-btn { color: #ebebf5; }
  .action-btn.bookmark-btn.bookmarked { color: #f2f2f7; }

  .users-modal { background: #1c1c1e; }
  .users-modal-handle { background: #3a3a3c; }
  .users-modal-header { border-bottom-color: #2c2c2e; }
  .users-modal-item:active { background: #2c2c2e; }

  .profile-play-row { border-bottom-color: #2c2c2e; }
  .profile-play-row:hover { background: #1c1c1e; }
  .profile-stat-val { color: #f2f2f7; }
  .profile-stat-label { color: #8e8e93; }
  .profile-username { color: #f2f2f7; }
  .profile-handle { color: #8e8e93; }
  .profile-bio { color: #ebebf5; }
  .profile-tabs { border-bottom-color: #2c2c2e; }
  .profile-tab { color: #636366; }
  .profile-tab.active { color: #f2f2f7; border-bottom-color: #f2f2f7; }

  .espn-news-section { border: 1px solid #2c2c2e; box-shadow: 0 1px 6px rgba(0,0,0,0.45); }
  .espn-news-card { background: #2c2c2e; border-color: #3a3a3c; }
  .espn-news-card:hover { background: #3a3a3c; }

  .foryou-stat { color: #8e8e93; }
  .hot-rate-badge.fire { background: #3a1500; color: #ff9500; }
  .hot-rate-badge.cool { background: #2c2c2e; color: #8e8e93; }

  .suggest-card { border-color: #2c2c2e; }

  .pn-card { background: #1c1c1e; }

  .comment-form { border-top-color: #2c2c2e; background: #1c1c1e; }
  .comment-input { background: #2c2c2e; color: #f2f2f7; }
  .comment-input::placeholder { color: #636366; }
  .comment-post-btn { color: #fff; }
  .comment-gif-btn { border-color: #3a3a3c; color: #8e8e93; }
  .gif-picker { background: #1c1c1e; }
  .gif-picker-header { border-bottom-color: #2c2c2e; }
  .gif-search-input { background: #2c2c2e; border-color: #3a3a3c; color: #f2f2f7; }
  .gif-picker-close { background: #3a3a3c; color: #aeaeb2; }

  .feed-divider::before, .feed-divider::after { background: #2c2c2e; }

  .play-likes { color: #f2f2f7; }
  .play-comments-link { color: #8e8e93; }
  .play-time { color: #636366; }

  .pick-badge-sm { background: #2c2c2e; color: #8e8e93; }
  .pick-badge.over, .pick-badge.under, .pick-badge.home, .pick-badge.away { background: #2c2c2e; color: #8e8e93; }
  .bet-odds { background: #2c2c2e; color: #8e8e93; }

  .result-badge.push { background: #2c2c2e; color: #8e8e93; }

  .bet-leg-sep { background: #2c2c2e; }

  .existing-play-card { background: #1c1c1e; border-color: #3a3a3c; }

  .btn-primary { color: #fff; }

  .btn-add-to { color: #fff; }

  .btn-post-slip-main { background: #3a3a3c; color: #f2f2f7; }
  .btn-post-slip-main:hover { color: #f2f2f7; }

  .more-dropdown { background: #2c2c2e; border-color: #3a3a3c; box-shadow: 0 4px 20px rgba(0,0,0,0.6); }

  .follow-sheet { background: #1c1c1e; }
  .follow-sheet-header { border-bottom-color: #2c2c2e; color: #f2f2f7; }
  .follow-sheet-empty { color: #8e8e93; }

  .add-to-pick-row { background: #1c1c1e; border-top-color: #2c2c2e; }

  .note-bubble-mine { background: #0a2928; border-color: #2bc6b3; color: #2bc6b3; }
  .note-bubble-mine::after { border-top-color: #2bc6b3; }
  .note-bubble-mine::before { border-top-color: #0a2928; }

  .panel-tab-bar { background: #1c1c1e; }
  .panel-tab-btn.active { background: #2c2c2e; box-shadow: none; }

  .slip-remove-preview:hover { color: #f2f2f7; }

  .leg-result-sm.void { background: #2c2c2e; color: #8e8e93; }

  .story-modal-close { background: #3a3a3c; color: #f2f2f7; }

  .report-modal { background: #1c1c1e; }
  .report-modal-handle { background: #3a3a3c; }
  .report-reason-btn { border-bottom-color: #2c2c2e; color: #f2f2f7; }
  .report-reason-btn:hover { background: #2c2c2e; }

  .slip-tray { color: #f2f2f7; }
  .slip-remove-btn:hover { color: #f2f2f7; }
  .btn-post-slip, .btn-post-slip:hover { color: #fff; }

  .btn-follow { color: #fff; }
  .btn-follow-sm { color: #fff; }

  .bubble.mine { color: #fff; }

  .game-live-badge { color: #fff; }

  .pick-preview-header { background: #2c2c2e; color: #f2f2f7; }

  .settings-save-btn { color: #fff; }

  .admin-count { color: #fff; }
  .admin-btn-delete { color: #fff; }
  .admin-btn-suspend { color: #fff; }
  .admin-report-card { background: #1c1c1e; border-color: #3a3a3c; }

  .hot-rate-badge.fire { background: #3a1500; color: #ff9500; }

  .dm-page-title { background: transparent; border-bottom: none; }
  .dm-row { background: transparent; border-bottom: none; }
  .dm-row:hover { background: #2c2c2e; }
  .chat-header { background: #1c1c1e; border-bottom-color: #2c2c2e; }
  .chat-messages { background: #111111; }
  .chat-input-row { background: #1c1c1e; border-top-color: #2c2c2e; }
}

html, body { height: 100%; background: var(--gray-100); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--gray-700); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Top Bar ── */
.top-bar {
  position: relative;
  height: calc(var(--top-h) + max(env(safe-area-inset-top, 44px), 54px));
  padding-top: max(env(safe-area-inset-top, 44px), 54px);
  background: var(--gray-100);
  border-bottom: none;
}
.top-bar-inner {
  max-width: var(--max-w); margin: 0 auto;
  height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 0 16px; position: relative;
}
.logo { font-size: 22px; font-weight: 800; letter-spacing: -1px; display: flex; align-items: center; gap: 0; background: linear-gradient(to right, #2bc6b3 0%, #00c48c 50%, #00b074 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.logo span { background: linear-gradient(to right, #2bc6b3 0%, #00c48c 50%, #00b074 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.logo-img { width: 22px; height: 22px; object-fit: contain; margin-right: -1px; vertical-align: middle; }
.logo-full { height: 140px; width: auto; object-fit: contain; display: block; }
.top-bar-actions { display: flex; gap: 4px; align-items: center; }
.top-bar-actions--left  { position: absolute; left: 24px; }
.top-bar-actions--right { position: absolute; right: 24px; }
.topbar-settings-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: #4a4a4a; font-size: 18px;
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.topbar-settings-btn:hover { background: var(--gray-200); color: #4a4a4a; }
.topbar-outline { color: transparent; -webkit-text-stroke: 1.5px #4a4a4a; }
.icon-btn { font-size: 21px; color: var(--gray-700); padding: 6px; line-height: 1; border-radius: 50%; }
.icon-btn:hover { background: var(--gray-200); }

/* ── Page Content ── */
.page-content {
  max-width: var(--max-w); margin: 0 auto;
  padding-top: 8px;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
  min-height: 100vh;
}
.page-content.no-nav { padding-top: 0; padding-bottom: 0; }
body.has-slip .page-content { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px + 56px); }
.page-content.chat-page { padding-bottom: 0; overflow: hidden; height: calc(100vh - var(--top-h)); }
.page-content.chat-page .chat-view { height: calc(100vh - var(--top-h) - 8px); }
.chat-input-row.comment-form {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
  left: 0; right: 0;
  z-index: 50;
  background: var(--gray-100);
}

/* ── Bottom Nav ── */
.bottom-nav.bottom-nav-hidden { display: none; }
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: calc(var(--nav-h) + max(env(safe-area-inset-bottom, 0px), 20px));
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
  background: var(--gray-100);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -1px 0 var(--gray-200);
  display: flex; align-items: stretch;
}
.nav-item {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 23px; color: var(--gray-500);
  transition: color 0.15s;
  position: relative;
}
.nav-item:hover { color: var(--gray-700); }
.nav-item.active { color: #4a4a4a; }
.nav-home:not(.active) .fa-house { color: transparent; -webkit-text-stroke: 2px var(--gray-500); }
.nav-home.active .fa-house { color: #4a4a4a; -webkit-text-stroke: 0; }

/* ── Flash ── */
.flash-container { padding: 8px 16px; }
.flash { padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 8px; }
.flash-error { background: var(--red-bg); color: #c0392b; }
.flash-success { background: var(--green-bg); color: #0a6640; }

/* ── Auth ── */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--gray-100); padding: 16px; }
.auth-card { width: 100%; max-width: 380px; background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 40px 32px 24px; overflow: hidden; position: relative; }
.auth-logo { text-align: center; margin-bottom: -62px; }
.auth-logo-img { height: 190px; width: auto; object-fit: contain; display: inline-block; margin-top: -68px; }
.auth-tagline { text-align: center; font-size: 13px; color: var(--gray-500); margin-bottom: 24px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form input { width: 100%; padding: 11px 14px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 14px; background: var(--gray-100); outline: none; }
.auth-form input:focus { border-color: var(--gray-500); background: var(--white); }
.btn-primary { width: 100%; padding: 11px; background: var(--brand); color: var(--white); border-radius: 8px; font-size: 15px; font-weight: 700; border: none; cursor: pointer; letter-spacing: 0.2px; }
.btn-primary:hover { filter: brightness(0.92); }
.auth-switch { text-align: center; font-size: 14px; border-top: 1px solid var(--gray-300); padding-top: 16px; margin-top: 16px; }
.auth-switch a { color: var(--brand); font-weight: 600; }
.auth-dob-group { display: flex; flex-direction: column; gap: 4px; }
.auth-dob-label { font-size: 12px; font-weight: 600; color: var(--gray-500); padding-left: 2px; }
.auth-dob-label span { font-weight: 400; color: var(--gray-400); }
.auth-dob-group input[type="date"],
.auth-dob-group select { width: 100%; padding: 11px 14px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 14px; background: var(--gray-100); outline: none; appearance: none; -webkit-appearance: none; }
.auth-dob-group input[type="date"]:focus,
.auth-dob-group select:focus { border-color: var(--gray-500); background: var(--white); }
.auth-agree-group { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 2px; }
.auth-agree-label { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--gray-600); line-height: 1.5; cursor: pointer; }
.auth-agree-label input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; min-width: 18px;
  border: 2px solid var(--gray-400);
  border-radius: 4px;
  background: transparent;
  cursor: pointer; flex-shrink: 0; margin-top: 1px;
  transition: background 0.15s, border-color 0.15s;
}
.auth-agree-label input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4l3 3.5L10 1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.auth-agree-label input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.auth-agree-label a { color: var(--black); font-weight: 600; text-decoration: underline; }

/* ── Legal pages ── */
.legal-page { max-width: 680px; margin: 0 auto; padding: 0 20px 60px; font-family: inherit; }
.legal-header { display: flex; align-items: center; justify-content: center; position: relative; padding: 18px 0 12px; border-bottom: 1px solid var(--gray-200); margin-bottom: 32px; }
.legal-back { position: absolute; left: 0; font-size: 14px; color: var(--black); text-decoration: none; font-weight: 500; }
.legal-back:hover { text-decoration: underline; }
.legal-logo { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; }
.legal-body h1 { font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.legal-body h2 { font-size: 15px; font-weight: 700; margin: 28px 0 6px; }
.legal-body p, .legal-body li { font-size: 14px; line-height: 1.7; color: #222; margin: 0 0 10px; }
.legal-body ul { padding-left: 20px; margin: 0 0 10px; }
.legal-body a { color: var(--black); font-weight: 600; }
.legal-date { font-size: 12px; color: var(--gray-400); margin-bottom: 24px !important; }
.disclaimer-callout { background: var(--gray-100); border-left: 3px solid var(--black); border-radius: 6px; padding: 14px 16px; font-size: 14px; line-height: 1.6; margin-bottom: 24px; }

/* ── Avatar ── */
.avatar { border-radius: 50%; object-fit: cover; background: var(--gray-300); flex-shrink: 0; }
.avatar-xs  { width: 28px; height: 28px; }
.avatar-sm  { width: 36px; height: 36px; }
.avatar-md  { width: 52px; height: 52px; }
.avatar-lg  { width: 76px; height: 76px; }
.avatar-xl  { width: 100px; height: 100px; }

/* ─────────── PLAY CARD ─────────── */
@property --gold-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes goldSpin {
  to { --gold-angle: 360deg; }
}
.exclusive-shimmer-ring {
  --gold-angle: 0deg;
  margin: 10px 12px;
  padding: 2.5px;
  border-radius: calc(var(--radius) + 3px);
  background: conic-gradient(from var(--gold-angle), #2bc6b3, #6edfd2, #c2f5ef, #6edfd2, #2bc6b3, #6edfd2, #c2f5ef, #6edfd2, #2bc6b3);
  animation: goldSpin 4.5s linear infinite;
}
.play-card {
  background: var(--white);
  border-radius: var(--radius);
  margin: 10px 12px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.95);
  overflow: hidden;
  position: relative;
}
.sub-only-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2bc6b3;
  padding: 6px 0 4px;
}
.exclusive-shimmer-inner {
  margin: 0;
  border-radius: calc(var(--radius) - 1px);
}

.play-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 10px;
}
.play-card-header-info { flex: 1; }
.play-card-header-info .username { font-weight: 700; font-size: 14px; }
.username-badge-row { display: flex; align-items: center; gap: 3px; }
.play-card-header-info .time { font-size: 12px; color: var(--gray-500); }

/* Bet block inside card */
.bet-block {
  margin: 0 14px 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
}


/* ── Compact leg rows ── */
.bet-leg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px;
  gap: 8px;
}
a.bet-leg-row-live {
  display: flex;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0,0,0,0.06);
}
.bet-leg-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.bet-leg-sport { font-size: 14px; flex-shrink: 0; line-height: 1; }
.bet-leg-left .pslip-logo { width: 20px; height: 20px; }
.bet-leg-left .pslip-icon { font-size: 14px; }
.bet-leg-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bet-leg-live-link { color: var(--brand); text-decoration: none; }
.bet-leg-player {
  font-size: 13px; font-weight: 700; color: var(--gray-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bet-leg-sub {
  font-size: 11px; color: var(--gray-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bet-leg-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.pick-badge-sm {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 800;
}
.pick-badge-sm.over,
.pick-badge-sm.under,
.pick-badge-sm.home,
.pick-badge-sm.away,
.pick-badge-sm.ml,
.pick-badge-sm.cover  { background: var(--gray-200); color: var(--gray-500); }
.bet-pick-label { font-size: 12px; font-weight: 700; color: var(--gray-600); }
.bet-odds-sm { font-size: 11px; font-weight: 700; color: var(--gray-400); }
.bet-book-label { font-size: 9px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.3px; margin-left: 3px; opacity: 0.8; }
.bet-leg-sep { height: 1px; background: var(--gray-200); }
.parlay-combined-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px; border-top: 1px solid var(--gray-200); margin-top: 4px; }
.parlay-combined-label { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.4px; }
.parlay-combined-odds { font-size: 15px; font-weight: 800; color: var(--brand); }
.leg-result-sm {
  font-size: 11px; font-weight: 900;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.leg-result-sm.win  { background: var(--green-bg); color: var(--green); }
.leg-result-sm.loss { background: var(--red-bg);   color: var(--red); }
.leg-result-sm.void { background: #f0f0f0; color: #999; font-size: 13px; }

.ss-badge-img {
  width: 18px; height: 18px; object-fit: contain;
  vertical-align: middle; margin-left: 3px; flex-shrink: 0;
}

/* legacy — kept for profile page usage */
.bet-matchup-bar {
  background: var(--gray-700); color: var(--white);
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; font-size: 12px; font-weight: 600;
}
.bet-matchup-bar .sport-badge {
  background: rgba(255,255,255,0.15); padding: 2px 8px; border-radius: 20px; font-size: 11px;
}
.bet-body { padding: 12px 14px; }
.bet-player { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 2px; }
.bet-market { font-size: 13px; color: var(--gray-500); margin-bottom: 10px; }
.bet-pick-row { display: flex; align-items: center; gap: 10px; }
.pick-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px;
  font-size: 15px; font-weight: 800; letter-spacing: -0.2px;
}
.pick-badge.over,
.pick-badge.under,
.pick-badge.home,
.pick-badge.away  { background: var(--gray-200); color: var(--gray-500); }
.bet-odds { font-size: 13px; font-weight: 700; color: var(--gray-500); background: var(--gray-200); padding: 4px 10px; border-radius: 6px; }
.bet-book { font-size: 11px; color: var(--gray-400); margin-top: 6px; text-transform: capitalize; }

/* Caption */
.play-caption { padding: 2px 14px 8px; font-size: 14px; line-height: 1.45; }
.play-caption .username { font-weight: 700; margin-right: 4px; }
.play-sportsbook { padding: 8px 14px 2px; font-size: 12px; color: var(--gray-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }

/* Sportsbook picker (new play page) */
.sportsbook-section { margin-top: 22px; padding: 0 4px 24px; }
.sportsbook-question { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.6px; text-align: center; margin-bottom: 14px; }
.sportsbook-options { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sb-pill { padding: 7px 15px; border-radius: 20px; border: 1.5px solid var(--gray-300); background: var(--white); color: var(--black); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; -webkit-tap-highlight-color: rgba(0,0,0,0); }
.sb-pill.active { background: #007AFF; border-color: #007AFF; color: #fff; }

/* Actions */
.play-actions { display: flex; align-items: center; gap: 4px; padding: 4px 10px 6px; }
.action-btn { padding: 6px; font-size: 21px; color: var(--gray-700); background: none; border: none; cursor: pointer; border-radius: 50%; transition: background 0.15s; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-appearance: none; appearance: none; outline: none; }
.action-btn:focus,
.action-btn:focus-visible,
.action-btn:active { outline: none !important; background: none !important; box-shadow: none !important; }
@media (hover: hover) { .action-btn:hover { background: var(--gray-200); } }
.action-btn.liked { color: var(--red); }
.action-btn.fade-btn { color: #000; }
.action-btn.fade-btn.faded { color: var(--red); }
.action-btn.bookmark-btn { color: var(--gray-700); }
.action-btn.bookmark-btn.bookmarked { color: #000; }
.action-spacer { flex: 1; }
.play-likes { padding: 0 14px 2px; font-size: 13px; font-weight: 700; display: flex; gap: 10px; }
.count-clickable { cursor: pointer; }
.bookmark-count { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--gray-700); }

/* Users bottom-sheet modal */
.users-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 2000; display: none; align-items: flex-end; justify-content: center; }
.users-modal-overlay.open { display: flex; }
.users-modal { background: #fff; width: 100%; max-width: 480px; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom, 16px); max-height: 72vh; display: flex; flex-direction: column; }
.users-modal-handle { width: 36px; height: 4px; background: var(--gray-300); border-radius: 2px; margin: 10px auto 0; flex-shrink: 0; }
.users-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.users-modal-title { font-size: 15px; font-weight: 700; }
.users-modal-close { font-size: 22px; line-height: 1; background: none; border: none; cursor: pointer; color: var(--gray-500); padding: 0 2px; }
.users-modal-list { overflow-y: auto; padding: 6px 0; }
.users-modal-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none; color: inherit; }
.users-modal-item:active { background: var(--gray-100); }
.users-modal-item .username { font-size: 14px; font-weight: 600; }
.users-modal-empty { padding: 28px 16px; text-align: center; color: var(--gray-400); font-size: 14px; }
.play-comments-link { padding: 0 14px 2px; font-size: 13px; color: var(--gray-500); }
.play-time { padding: 0 14px 10px; font-size: 11px; color: var(--gray-400); letter-spacing: 0.3px; }

.comment-form { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--gray-200); background: var(--white); }
body:has(.comment-form-docked) .page-content { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); }
.comment-input-wrap { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.comment-input-pill { display: flex; align-items: center; background: var(--gray-200); border-radius: 20px; min-width: 0; overflow: hidden; }
.comment-input { flex: 1; border: none; outline: none; font-size: 14px; background: none; padding: 7px 10px; box-sizing: border-box; min-width: 0; }
.comment-post-btn { width: 30px; height: 30px; background: #007AFF; color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 0.15s; margin: 3px; }
.comment-gif-btn { background: none; border: 1.5px solid var(--gray-300); border-radius: 6px; color: var(--gray-500); font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 4px 7px; cursor: pointer; flex-shrink: 0; line-height: 1.2; }
.comment-gif-btn:hover { border-color: #007AFF; color: #007AFF; }
.comment-img-preview { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.comment-img-thumb { height: 60px; width: auto; max-width: 100px; border-radius: 6px; object-fit: cover; }
.dm-gif { max-width: 200px; max-height: 160px; border-radius: 10px; display: block; }
.dm-gif-row { display: flex; margin-bottom: 2px; }
.dm-gif-row.mine { justify-content: flex-end; }
.dm-gif-row.theirs { justify-content: flex-start; padding-left: 36px; }

.comment-img-clear { background: rgba(0,0,0,.5); color: #fff; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 13px; line-height: 18px; text-align: center; cursor: pointer; padding: 0; flex-shrink: 0; }
.comment-img { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; margin-top: 6px; object-fit: contain; }
.gif-picker { display: none; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--white); border-radius: 18px 18px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,0.14); max-height: 60vh; }
.gif-picker-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.gif-search-input { flex: 1; border: 1px solid var(--gray-200); border-radius: 20px; padding: 7px 14px; font-size: 14px; outline: none; background: var(--gray-100); }
.gif-search-btn { background: #007AFF; color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.gif-picker-close { background: var(--gray-200); border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 18px; cursor: pointer; color: var(--gray-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 8px; overflow-y: auto; flex: 1; }
.gif-item { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; cursor: pointer; display: block; }
.gif-item:hover { opacity: .85; }
.gif-loading, .gif-empty { grid-column: 1/-1; text-align: center; padding: 24px; color: var(--gray-400); font-size: 14px; }
.gif-picker-attr { text-align: center; font-size: 10px; color: var(--gray-400); padding: 6px; flex-shrink: 0; }
.gif-picker-overlay { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.4); }
.mention-dropdown { position: absolute; left: 0; right: 0; bottom: 100%; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); overflow: hidden; z-index: 300; max-height: 220px; overflow-y: auto; }
.mention-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; font-size: 14px; font-weight: 600; }
.mention-dropdown-item:hover, .mention-dropdown-item.active { background: var(--gray-100); }
.mention-dropdown-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mention-wrap { position: relative; flex: 1; display: flex; }

/* ── Result badge ── */
.result-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.result-badge.win { background: var(--green-bg); color: var(--green); }
.result-badge.loss { background: var(--red-bg); color: var(--red); }
.result-badge.pending { background: var(--orange-bg); color: var(--orange); }
.result-badge.push { background: var(--gray-200); color: var(--gray-500); }
.result-badge.void { background: var(--gray-200); color: var(--gray-500); }

/* ── Suggestion row (home) ── */
.espn-news-section { background: var(--white); margin: 10px 12px; border-radius: var(--radius); padding: 12px 0 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
.espn-news-header { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; }
.espn-logo { background: #cc0000; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; line-height: 1.4; }
.espn-news-label { font-size: 13px; font-weight: 700; color: var(--gray-500); }
.espn-news-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.espn-news-scroll::-webkit-scrollbar { display: none; }
.espn-news-card { flex: 0 0 200px; background: var(--gray-50); border-radius: 10px; padding: 11px 13px; text-decoration: none; display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--gray-200); transition: background 0.15s; }
.espn-news-card:hover { background: var(--gray-100); }
.espn-news-title { font-size: 13px; font-weight: 700; color: var(--gray-900); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.espn-news-desc { font-size: 11.5px; color: var(--gray-500); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-divider { display: flex; align-items: center; gap: 10px; margin: 2px 16px 4px; }
.feed-divider::before, .feed-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
.feed-divider-label { font-size: 12px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; }

/* ── Stories / Notes ── */
.stories-strip {
  display: flex; flex-direction: row; gap: 0;
  overflow-x: auto; scrollbar-width: none;
  background: transparent;
  border-bottom: none;
  padding: 0px 10px 4px;
  position: relative;
}
.stories-strip::-webkit-scrollbar { display: none; }

.story-note {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 98px; flex-shrink: 0; cursor: pointer; padding: 0 4px;
}

/* Speech bubble above avatar */
.note-bubble {
  background: var(--gray-100); border: 1px solid var(--gray-200);
  border-radius: 12px 12px 12px 2px;
  padding: 6px 8px; font-size: 11px; line-height: 1.3;
  color: var(--gray-700); width: 88px; height: 62px;
  overflow: hidden; word-break: break-word;
  position: relative;
}
.note-text {
  display: inline;
}
@keyframes scrollNote {
  0%,15%   { transform: translateY(0); }
  75%,85%  { transform: translateY(var(--scroll-dist,0px)); }
  100%     { transform: translateY(0); }
}
.note-bubble::after {
  content: ''; position: absolute; bottom: -7px; left: 10px;
  border-width: 7px 6px 0 0;
  border-style: solid;
  border-color: var(--gray-200) transparent transparent transparent;
}
.note-bubble::before {
  content: ''; position: absolute; bottom: -6px; left: 11px;
  border-width: 6px 5px 0 0;
  border-style: solid;
  border-color: var(--gray-100) transparent transparent transparent;
  z-index: 1;
}
.note-bubble-mine {
  background: #e0f9f9; border-color: #a0e4e4; color: #0e6b6b;
}
.note-bubble-mine::after { border-color: #a0e4e4 transparent transparent transparent; }
.note-bubble-mine::before { border-color: #e0f9f9 transparent transparent transparent; }
.story-note-empty .note-bubble {
  color: var(--gray-400); font-style: italic;
}

/* Instagram-style pill bubble overlapping top of avatar */
.note-bubble-pill {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--gray-200); color: var(--gray-800);
  border-radius: 100px;
  padding: 3px 8px; font-size: 10px; line-height: 1.4;
  white-space: nowrap; max-width: 80px;
  overflow: hidden; text-overflow: ellipsis;
  z-index: 3; pointer-events: none;
}

/* Avatar ring + image */
.note-avatar-wrap {
  position: relative; width: 80px; height: 80px;
  border-radius: 50%; padding: 3px; background: var(--gray-100); flex-shrink: 0;
  margin-top: 18px;
}
.story-ring { background: linear-gradient(to bottom right, #3dd4d4 0%, #2abbc4 50%, #1898a8 100%); }
.story-ring-viewed { background: var(--gray-300); }
.profile-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.lb-wreath-spacer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2px;
  margin-bottom: 3px;
}
.profile-avatar-wrap {
  border-radius: 50%;
  padding: 3px;
  background: transparent;
  display: inline-flex;
  flex-shrink: 0;
}
.profile-avatar-wrap.story-ring {
  background: linear-gradient(to bottom right, #3dd4d4 0%, #2abbc4 50%, #1898a8 100%);
}
.profile-avatar-wrap.story-ring .avatar-xl {
  border: 3px solid var(--white);
}
.note-avatar {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gray-100); display: block;
}
.note-avatar-wrap.story-ring .note-avatar { border-color: var(--white); }
.story-add-btn {
  position: absolute; bottom: 1px; right: 1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--gray-100);
}
.note-name {
  font-size: 11px; color: var(--gray-600); text-align: center;
  max-width: 94px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Note title in reply modal */
.sc-note-title {
  font-size: 17px; font-weight: 700; color: var(--black);
  padding: 0 2px 2px;
}

/* Shared bubble in modal view */
.sc-bubble-view {
  background: var(--gray-100); border-radius: 12px;
  padding: 12px 14px; font-size: 15px; line-height: 1.5;
  color: var(--gray-700); white-space: pre-wrap; display: block;
}

/* Title input in post editor */
.story-title-input {
  width: 100%; border: 1.5px solid var(--gray-300); border-radius: 10px;
  padding: 10px 12px; font-size: 16px; font-weight: 600;
  font-family: inherit; outline: none; color: var(--black);
  box-sizing: border-box;
}
.story-title-input:focus { border-color: #2bc6b3; }

/* Story modals */
.story-modal-bg {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.story-modal {
  background: var(--white); border-radius: 20px 20px 0 0;
  width: 100%; max-width: var(--max-w); padding: 20px 20px 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.story-modal-header {
  display: flex; align-items: center; gap: 10px;
}
.story-modal-header .sc-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.story-modal-header .sc-username { flex: 1; font-size: 15px; }
.story-modal-close {
  background: var(--gray-200); border: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; font-size: 15px;
  display: flex; align-items: center; justify-content: center; color: var(--gray-700);
}
.story-input {
  width: 100%; border: 1.5px solid var(--gray-300); border-radius: 12px;
  padding: 12px; font-size: 15px; font-family: inherit; resize: none;
  min-height: 90px; outline: none; color: var(--gray-700);
}
.story-input:focus { border-color: #3dd4d4; }
.story-char-count { font-size: 12px; color: var(--gray-400); text-align: right; margin-top: -6px; }
.story-modal-actions { display: flex; gap: 10px; }
.story-post-btn {
  flex: 1; background: #007AFF; color: #fff; border: none; border-radius: 10px;
  padding: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.story-del-btn {
  background: var(--red-bg); color: var(--red); border: none; border-radius: 10px;
  padding: 12px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.story-reply-row { display: flex; gap: 8px; align-items: center; }
.story-reply-input {
  flex: 1; border: 1.5px solid var(--gray-300); border-radius: 22px;
  padding: 10px 16px; font-size: 15px; font-family: inherit; outline: none;
}
.story-reply-input:focus { border-color: #3dd4d4; }
.story-reply-send {
  width: 40px; height: 40px; border-radius: 50%;
  background: #3dd4d4; color: #fff; border: none; cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.story-reply-sent { color: var(--green); font-weight: 700; text-align: center; font-size: 15px; }
.suggest-card { flex-shrink: 0; width: 110px; border: 1px solid var(--gray-300); border-radius: 12px; padding: 14px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--white); }
.suggest-card .username { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.suggest-card .subtext { font-size: 11px; color: var(--gray-500); }
.btn-follow-sm { margin-top: 4px; padding: 5px 14px; background: #007AFF; color: var(--white); border-radius: 6px; font-size: 12px; font-weight: 700; border: none; cursor: pointer; }
.btn-follow-sm:hover { filter: brightness(0.92); }
.btn-follow-sm.following { background: var(--gray-200); color: var(--gray-700); }
.btn-follow-sm.blocked-badge { background: #ffecec; color: #c0392b; cursor: default; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 60px 24px; color: var(--gray-500); }
.empty-state i { font-size: 48px; margin-bottom: 16px; color: var(--gray-300); display: block; }
.empty-state h3 { font-size: 18px; color: var(--gray-700); margin-bottom: 8px; }
.empty-state p { font-size: 14px; line-height: 1.5; }
.empty-state a { color: var(--green); font-weight: 600; }

/* ── Profile ── */
.profile-header { padding: 20px 16px 0; background: transparent; margin-bottom: 0; border-bottom: none; position: relative; }
.profile-top { display: flex; align-items: flex-start; gap: 20px; }
.profile-right { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.profile-header-username { font-size: 15px; font-weight: 700; color: var(--black); letter-spacing: -0.2px; }
.profile-stats { display: flex; justify-content: space-between; padding-right: 12px; }
.stat { text-align: left; }
.stat-num { font-size: 17px; font-weight: 800; }
.stat-label { font-size: 12px; color: var(--gray-500); margin-top: 1px; }
.profile-info { padding: 10px 16px 14px; background: transparent; border-bottom: none; }
.profile-name { font-weight: 700; font-size: 15px; margin-bottom: 3px; }
.profile-bio { font-size: 14px; line-height: 1.4; color: var(--gray-700); white-space: pre-wrap; }
.profile-bio-inline { font-size: 12px; line-height: 1.35; color: var(--gray-600); margin-top: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.win-rate-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; background: var(--green-bg); color: var(--green); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.profile-actions { display: flex; gap: 8px; margin-top: 12px; }
.btn-outline { flex: 1; padding: 8px 6px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; border: 1.5px solid var(--gray-300); border-radius: 8px; font-size: 14px; font-weight: 600; background: var(--white); cursor: pointer; color: var(--gray-700); }
.btn-outline:hover { background: var(--gray-100); }
.btn-follow { flex: 1; padding: 8px; text-align: center; background: #007AFF; color: var(--white); border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-follow:hover { filter: brightness(0.92); }
.btn-follow.following, .btn-follow.requested { background: var(--gray-200); color: var(--gray-700); }
.btn-follow.following:hover, .btn-follow.requested:hover { filter: none; background: var(--gray-300); }
.pn-follow-req-actions { display: flex; gap: 8px; margin-top: 6px; }
.pn-req-btn { padding: 5px 14px; border-radius: 6px; font-size: 13px; font-weight: 700; border: none; cursor: pointer; }
.pn-req-accept { background: var(--brand); color: #fff; }
.pn-req-decline { background: var(--gray-200); color: var(--gray-700); }

.profile-plays { padding: 8px 0; }
.profile-play-row { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--gray-200); background: var(--white); cursor: pointer; align-items: center; }
.profile-play-row:hover { background: var(--gray-100); }

/* ── Profile grid (Instagram-style) ── */
.profile-slips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 5px;
  background: var(--bg);
}
.pslip-cell {
  position: relative;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  aspect-ratio: 1;
  padding: 22px 8px 22px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.95);
}
.pslip-cell::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.pslip-win::after    { background: var(--green); }
.pslip-loss::after   { background: var(--red); }
.pslip-live::after   { background: var(--brand); }
.pslip-partial::after { background: var(--orange); }
.pslip-pending::after { background: var(--gray-300); }
.pslip-void::after   { background: var(--gray-300); }
.pslip-leglist {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.pslip-legline {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 0;
  border-bottom: 1px solid var(--gray-200);
}
.pslip-logo { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.pslip-icon { font-size: 12px; flex-shrink: 0; line-height: 1; }
.pslip-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pslip-more {
  font-size: 10px;
  color: var(--gray-400);
  margin-top: 1px;
}
.pgrid-icons { font-size: 24px; line-height: 1.1; letter-spacing: 1px; }
.pgrid-main  { width: 100%; text-align: center; }
.pgrid-player {
  font-size: 10px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%; line-height: 1.3;
}
.pgrid-pick {
  font-size: 9px; color: var(--gray-500); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.pgrid-meta { display: flex; gap: 7px; font-size: 9px; color: var(--gray-400); margin-top: 1px; }
.pgrid-meta i { font-size: 8px; }
.pgrid-rbadge  { flex-shrink: 0; display: inline-block; padding: 1px 5px; border-radius: 5px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.pgrid-rbadge-win     { background: var(--green-bg);  color: var(--green); }
.pgrid-rbadge-loss    { background: var(--red-bg);    color: var(--red); }
.pgrid-rbadge-partial { background: var(--orange-bg); color: var(--orange); }
.pgrid-rbadge-pending { background: var(--gray-200);  color: var(--gray-500); }
.pgrid-rbadge-void    { background: var(--gray-200);  color: var(--gray-500); }
.pgrid-cell::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.pgrid-win::after    { background: var(--green); }
.pgrid-loss::after   { background: var(--red); }
.pgrid-live::after   { background: var(--gray-300); }
.pgrid-partial::after { background: var(--orange); }
.pgrid-pending::after { background: var(--gray-300); }
.pgrid-void::after   { background: var(--gray-300); }
.pslip-badge-row {
  position: absolute;
  top: 7px; right: 7px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.pslip-badge-row .pgrid-badge {
  position: relative;
  top: auto; right: auto;
}
.pslip-parlay-badge {
  font-size: 11px;
  line-height: 1;
}
.pgrid-badge {
  position: absolute;
  top: 7px; right: 7px;
  font-size: 9px; font-weight: 800;
  padding: 2px 6px;
  border-radius: 20px;
  letter-spacing: 0.4px;
  line-height: 1.4;
}
.pgrid-badge.win  { background: var(--green);    color: #fff; }
.pgrid-badge.loss { background: var(--red);      color: #fff; }
.pgrid-badge.live { background: var(--gray-200); color: var(--gray-500); }
.pgrid-badge.partial { background: var(--orange-bg); color: var(--orange); }
.pgrid-badge.pending { background: var(--gray-200); color: var(--gray-500); }
.pgrid-badge.void    { background: var(--gray-200); color: var(--gray-500); }
.pgrid-leglist  { display: flex; flex-direction: column; gap: 5px; flex: 1; margin-bottom: 7px; }
.pgrid-legline  { display: flex; align-items: baseline; gap: 3px; min-width: 0; overflow: hidden; }
.pgrid-leg-main { flex: 1; min-width: 0; font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgrid-leg-mkt  { font-size: 10px; color: var(--gray-400); }
.pgrid-legr     { flex-shrink: 0; font-size: 9px; font-weight: 800; }
.pgrid-legr.win  { color: var(--green); }
.pgrid-legr.loss { color: var(--red); }
.pgrid-more { font-size: 9px; color: var(--gray-400); }
.pgrid-foot { font-size: 9px; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play-row-pick { flex-shrink: 0; }
.play-row-pick .pick-badge { font-size: 13px; padding: 5px 10px; }
.play-row-info { flex: 1; min-width: 0; }
.play-row-info .player { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play-row-info .market-line { font-size: 12px; color: var(--gray-500); margin-top: 1px; }
.play-row-info .matchup { font-size: 11px; color: var(--gray-400); margin-top: 2px; }
.play-row-meta { text-align: right; flex-shrink: 0; }
.play-row-meta .time { font-size: 11px; color: var(--gray-400); }
.play-row-meta .likes { font-size: 12px; color: var(--gray-500); margin-top: 2px; }

/* ── Edit Profile ── */
.edit-profile-page { padding: 16px; }
.edit-profile-page h2 { font-size: 18px; font-weight: 800; margin-bottom: 20px; }
.avatar-preview-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 700; color: var(--gray-500); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.form-group input, .form-group textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--gray-300); border-radius: 10px; font-size: 14px; outline: none; background: var(--white); font-family: inherit; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--green); }
.form-group textarea { resize: vertical; min-height: 80px; }

/* ── New Play form ── */
.new-play-page { padding: 16px; }
.new-play-page h2 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.new-play-page .subtitle { font-size: 13px; color: var(--gray-500); margin-bottom: 20px; }

.pick-preview {
  background: var(--white); border: 1.5px solid var(--gray-300); border-radius: 12px;
  overflow: hidden; margin-bottom: 20px;
}
.pick-preview-header {
  background: var(--gray-700); color: var(--white);
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.pick-preview-body { padding: 14px; }
.pick-preview-player { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.pick-preview-market { font-size: 13px; color: var(--gray-500); margin-bottom: 10px; }
.pick-preview-row { display: flex; align-items: center; gap: 10px; }

.pick-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.pick-btn { flex: 1; padding: 10px; border: 2px solid var(--gray-300); border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.15s; background: var(--white); }
.pick-btn.over.selected  { border-color: var(--green); background: var(--green-bg); color: var(--green); }
.pick-btn.under.selected { border-color: var(--red); background: var(--red-bg); color: var(--red); }

.textarea-caption { width: 100%; padding: 12px 14px; border: 1.5px solid var(--gray-300); border-radius: 10px; font-size: 14px; font-family: inherit; outline: none; resize: vertical; min-height: 80px; }
.textarea-caption:focus { border-color: var(--green); }

/* ── Explore ── */
.explore-search { padding: 10px 12px; background: transparent; }
.search-bar { display: flex; align-items: center; gap: 8px; background: var(--gray-200); border-radius: 10px; padding: 9px 12px; }
.search-bar i { color: var(--gray-500); font-size: 14px; }
.search-bar input { border: none; background: none; outline: none; font-size: 14px; flex: 1; }

.games-list { padding: 8px 16px; }
.section-label { padding: 12px 16px 6px; font-size: 12px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.6px; }

.game-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--white); padding: 14px 16px;
  border: 1px solid var(--gray-200); border-radius: 12px;
  margin-bottom: 8px; cursor: pointer;
  transition: background 0.1s;
}
.game-card:hover { background: var(--gray-100); }
.game-card.active {
  background: var(--gray-100);
  border-radius: 12px 12px 0 0;
  border-bottom-color: transparent;
  margin-bottom: 0;
}
.game-teams { font-size: 15px; font-weight: 700; }
.game-time { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.game-arrow { color: var(--gray-400); font-size: 14px; }
.game-card.active .game-arrow { color: var(--green); transform: rotate(90deg); }

.props-panel { background: var(--gray-100); border: 1px solid var(--gray-200); border-top: none; border-radius: 0 0 12px 12px; margin-bottom: 8px; overflow: hidden; }
.props-loading { text-align: center; padding: 20px; color: var(--gray-500); font-size: 14px; }
.lines-closed-banner { display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--gray-200); font-size: 12px; font-weight: 600; color: var(--gray-500); }
.lines-closed-empty { justify-content: center; padding: 14px; }
.props-group { margin: 8px; border-radius: 12px; overflow: hidden; border: 1px solid var(--gray-200); }
.props-group-label { padding: 10px 16px 4px; font-size: 11px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.6px; background: var(--gray-100); }

.prop-row {
  display: flex; align-items: center; background: var(--white);
  padding: 12px 16px; border-bottom: 1px solid var(--gray-100);
  gap: 12px;
}
.prop-player-info { flex: 1; min-width: 0; }
.prop-player-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-market-line { font-size: 12px; color: var(--gray-500); margin-top: 1px; }
.prop-odds-col { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.prop-pick-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px; border: none;
  font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.prop-pick-btn.over  { background: var(--green-bg); color: var(--green); }
.prop-pick-btn.under { background: var(--red-bg); color: var(--red); }
.prop-pick-btn:hover { filter: brightness(0.92); }

.search-results-users { padding: 4px 0; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--white); border-bottom: 1px solid var(--gray-200); }
.user-row-info .username { font-weight: 700; font-size: 14px; }
.user-row-info .full-name { font-size: 13px; color: var(--gray-500); }

/* ── Recommendations ── */
.rec-page { padding: 14px 12px; }
.rec-page h2 { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.rec-list { display: flex; flex-direction: column; gap: 1px; background: var(--gray-200); border-radius: 12px; overflow: hidden; }
.rec-item { display: flex; align-items: center; gap: 12px; background: var(--white); padding: 12px 14px; }
.rec-item-info { flex: 1; min-width: 0; }
.rec-item-info .username { font-weight: 700; font-size: 14px; }
.rec-item-info .subtext { font-size: 12px; color: var(--gray-500); margin-top: 1px; }
.rec-item-info .bio-snippet { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── User Search Bar (Recommendations page) ── */
.user-search-wrap { padding: 10px 12px 4px; position: relative; padding-top: max(env(safe-area-inset-top, 10px), 54px); }
.user-search-inner { display: flex; align-items: center; background: var(--gray-100); border: 1.5px solid var(--gray-200); border-radius: 12px; padding: 0 12px; gap: 8px; transition: border-color 0.15s; }
.user-search-inner:focus-within { border-color: var(--brand); background: var(--white); }
.user-search-icon { font-size: 13px; color: var(--gray-400); flex-shrink: 0; }
.user-search-input { flex: 1; border: none; background: transparent; font-size: 14px; padding: 10px 0; outline: none; color: var(--gray-900); }
.user-search-input::placeholder { color: var(--gray-400); }
.user-search-clear { background: none; border: none; padding: 4px; cursor: pointer; color: var(--gray-400); font-size: 13px; line-height: 1; }
.user-search-results { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 12px; margin-top: 6px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.user-search-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--gray-100); cursor: pointer; text-decoration: none; color: inherit; }
.user-search-row:last-child { border-bottom: none; }
.user-search-row:hover { background: var(--gray-50); }
.user-search-info { flex: 1; min-width: 0; }
.user-search-name { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.user-search-sub { font-size: 12px; color: var(--gray-500); margin-top: 1px; }
.user-search-empty { padding: 20px 14px; text-align: center; font-size: 13px; color: var(--gray-500); }

/* ── Messages ── */
.messages-page { display: flex; flex-direction: column; }
.dm-page-title { padding: 14px 16px 10px; font-size: 18px; font-weight: 800; background: var(--white); border-bottom: 1px solid var(--gray-200); }
.dm-list { }
.dm-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: none; background: transparent; text-decoration: none; color: inherit; }
.dm-row:hover { background: var(--gray-200); }
.dm-row-unread .last-msg { color: var(--gray-800) !important; font-weight: 600; }
.dm-row-unread .username { color: var(--gray-900); }
.dm-info { flex: 1; min-width: 0; }
.dm-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.dm-info .username { font-weight: 700; font-size: 14px; }
.dm-info .last-msg { font-size: 13px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.dm-time { font-size: 11px; color: var(--gray-400); white-space: nowrap; flex-shrink: 0; }

.chat-view { display: flex; flex-direction: column; height: calc(100vh - var(--top-h) - var(--nav-h)); }
.chat-header { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--gray-200); background: var(--white); flex-shrink: 0; }
.chat-header a.back { font-size: 19px; color: var(--gray-700); padding: 4px; }
.chat-header .username { font-weight: 700; font-size: 15px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 14px 14px 80px; display: flex; flex-direction: column; gap: 8px; background: var(--gray-100); }
.story-quote-wrap { display: flex; justify-content: center; margin: 4px 0 2px; }
.story-quote-bubble { background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; padding: 8px 14px; font-size: 12px; color: var(--gray-600); max-width: 80%; text-align: center; line-height: 1.4; }
.story-quote-label { display: block; font-size: 10px; font-weight: 700; color: #2bc6b3; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.msg-block { display: flex; flex-direction: column; margin-bottom: 4px; }
.msg-block.mine { align-items: flex-end; }
.msg-block.theirs { align-items: flex-start; }
.msg-ts { font-size: 10px; color: var(--gray-400); margin-top: 3px; padding: 0 6px; }
.msg-ts.theirs { padding-left: 38px; }
.bubble-wrap { display: flex; align-items: flex-end; gap: 6px; }
.bubble-wrap.mine { flex-direction: row-reverse; }
.bubble-wrap img.avatar { flex-shrink: 0; }
.bubble { max-width: 62vw; padding: 6px 10px; border-radius: 16px; font-size: 14px; line-height: 1.3; word-break: break-word; overflow-wrap: break-word; }
.bubble.theirs { background: var(--white); border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); max-width: calc(62vw - 30px); }
.bubble.mine { background: #3b82f6; color: var(--white); border-bottom-right-radius: 4px; }
.slip-preview-card { display: block; text-decoration: none; background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.10); border: 1px solid var(--gray-200); margin-top: 6px; width: 82vw; max-width: 360px; }
.slip-preview-card .play-card-header { padding: 10px 12px 4px; }
.slip-preview-card .bet-block { margin: 0; border-radius: 0; border-left: none; border-right: none; }
.slip-preview-card .play-sportsbook { padding: 4px 12px; font-size: 11px; color: var(--gray-500); }
.slip-preview-card .play-caption { padding: 4px 12px 10px; font-size: 13px; color: var(--gray-700); }
.chat-input-row { display: flex; align-items: center; gap: 8px; padding: 9px 14px; padding-bottom: max(env(safe-area-inset-bottom, 9px), 20px); border-top: 1px solid var(--gray-200); flex-shrink: 0; flex-wrap: wrap; }
.chat-input { flex: 1; padding: 7px 10px; border: none; background: none; border-radius: 0; font-size: 14px; outline: none; min-width: 0; }

.dm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh; color: var(--gray-500); gap: 12px; font-size: 14px; text-align: center; padding: 24px; }
.dm-empty i { font-size: 44px; color: var(--gray-300); }
.dm-empty a { color: var(--green); font-weight: 700; }

/* ── Comment detail ── */
.comments-list { background: var(--white); }
.comment-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--gray-100); }
.comment-item:last-child { border-bottom: none; }
.comment-main-row { display: flex; gap: 10px; align-items: flex-start; }
.comment-more-menu { margin-left: auto; flex-shrink: 0; align-self: center; }
.comment-more-menu .more-btn { font-size: 14px; color: var(--gray-400); padding: 2px 6px; background: none; border: none; cursor: pointer; }
.comment-more-menu .more-dropdown { right: 0; left: auto; min-width: 120px; }
.comment-body { flex: 1; font-size: 14px; line-height: 1.4; }
.comment-body .username { font-weight: 700; margin-right: 4px; }
.comment-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.comment-time { font-size: 11px; color: var(--gray-400); }
.comment-like-btn { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--gray-400); background: none; border: none; cursor: pointer; padding: 0; line-height: 1; }
.comment-like-btn.liked { color: var(--red); }
.comment-like-btn .clc { font-size: 12px; }
.comment-reply-btn { font-size: 12px; color: var(--gray-400); font-weight: 600; background: none; border: none; cursor: pointer; padding: 0; }
.comment-reply-btn:hover { color: var(--gray-700); }
.comment-pin-btn { font-size: 12px; color: var(--gray-300); background: none; border: none; cursor: pointer; padding: 0; transition: color 0.15s; }
.comment-pin-btn:hover, .comment-pin-btn.pinned { color: var(--green); }
.pin-label { font-size: 11px; color: var(--gray-400); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.pinned-comment { background: rgba(0,0,0,0.025); }
.reply-form-wrap { margin: 4px -2px -10px; }
.reply-form { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--gray-200); }
.replies-list { padding-left: 34px; margin-top: 4px; }
.replies-list .replies-list { padding-left: 0; }
.reply-item { padding: 6px 0 0 0; border-bottom: none; }

.no-results { text-align: center; padding: 32px 16px; color: var(--gray-500); font-size: 14px; }

/* ── Sport Tabs ── */
.sport-tabs { display: flex; background: var(--gray-100); border-radius: 20px; padding: 3px; margin: 8px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sport-tabs::-webkit-scrollbar { display: none; }
.sport-tab { flex: 0 0 auto; text-align: center; padding: 8px 14px; border-radius: 16px; font-size: 11px; font-weight: 700; color: var(--gray-500); transition: all 0.15s; white-space: nowrap; }
.sport-tab:hover { color: var(--gray-700); }
.sport-tab.active { background: var(--white); color: var(--brand); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.gamble-responsibly-bar { background: var(--gray-100); border-bottom: 1px solid var(--gray-200); padding: 6px 16px; font-size: 11px; color: var(--gray-400); text-align: center; }
.gamble-responsibly-bar a { color: var(--gray-400); text-decoration: underline; }

/* ── Multi-leg bet block ── */
.leg-divider { height: 1px; background: var(--gray-200); margin: 0 14px; }
.bet-matchup-bar.secondary { background: #3d3d3d; }
.game-live-badge { background: var(--red); color: var(--white); font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }

/* ── Header meta badges ── */
.header-meta { display: flex; align-items: center; gap: 6px; margin-top: 1px; flex-wrap: wrap; }
.updated-badge { font-size: 10px; font-weight: 700; color: var(--green); background: var(--green-bg); padding: 1px 6px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.leg-count-badge { font-size: 10px; font-weight: 800; color: var(--orange); background: var(--orange-bg); padding: 1px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
.parlay-badge { font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(90deg,#7c3aed,#a855f7); padding: 2px 8px; border-radius: 10px; letter-spacing: 0.3px; }
.parlay-toggle-card { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 14px; margin-bottom: 14px; overflow: hidden; }
.parlay-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
.parlay-toggle-info { display: flex; flex-direction: column; gap: 2px; }
.parlay-toggle-title { font-size: 15px; font-weight: 700; color: var(--gray-900); }
.parlay-toggle-sub { font-size: 12px; color: var(--gray-400); }
.parlay-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.parlay-switch input { opacity: 0; width: 0; height: 0; }
.parlay-switch-track { position: absolute; cursor: pointer; inset: 0; background: var(--gray-200); border-radius: 26px; transition: background 0.2s; }
.parlay-switch-track::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.parlay-switch input:checked + .parlay-switch-track { background: #7c3aed; }
.parlay-switch input:checked + .parlay-switch-track::before { transform: translateX(20px); }
.parlay-odds-display { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: linear-gradient(90deg,rgba(124,58,237,0.07),rgba(168,85,247,0.07)); border-top: 1px solid rgba(124,58,237,0.15); }
.parlay-preview-new-odds { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: linear-gradient(90deg,rgba(124,58,237,0.06),rgba(168,85,247,0.06)); border-top: 1px solid rgba(124,58,237,0.12); }
.parlay-preview-label { font-size: 11px; font-weight: 600; color: #7c3aed; }
.parlay-preview-odds-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.parlay-preview-old { font-size: 13px; font-weight: 600; color: var(--gray-400); text-decoration: line-through; }
.parlay-preview-value { font-size: 18px; font-weight: 800; color: #7c3aed; }
.parlay-odds-label { font-size: 12px; font-weight: 600; color: #7c3aed; }
.parlay-odds-value { font-size: 22px; font-weight: 800; color: #7c3aed; }

/* ── Locked / hint notices ── */
.locked-notice { display: flex; align-items: center; gap: 8px; margin: 0 14px 10px; padding: 10px 12px; background: var(--red-bg); color: var(--red); border-radius: 10px; font-size: 13px; font-weight: 600; }
.add-leg-hint { display: flex; align-items: center; gap: 8px; margin: 0 14px 10px; padding: 10px 12px; background: var(--green-bg); color: var(--green); border-radius: 10px; font-size: 13px; font-weight: 600; }
.add-leg-hint a { color: var(--green); text-decoration: underline; }

/* ── Add to existing play (new_play page) ── */
.add-to-section { margin-top: 24px; }
.add-to-label { font-size: 14px; font-weight: 800; color: var(--gray-700); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.add-to-label i { color: var(--brand); }
.add-to-hint { font-size: 12px; color: var(--gray-500); margin-bottom: 12px; line-height: 1.4; }

.existing-play-card { background: var(--white); border: 1.5px solid var(--gray-300); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.existing-play-legs { padding: 12px 14px 8px; }
.existing-leg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.existing-leg-info { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.existing-leg-match { font-size: 11px; color: var(--gray-500); margin-left: auto; }
.existing-play-caption { font-size: 12px; color: var(--gray-500); font-style: italic; margin-top: 4px; }
.add-to-pick-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--gray-200); background: var(--gray-100); flex-wrap: wrap; }
.pick-btn-mini { padding: 6px 12px; border: 1.5px solid var(--gray-300); border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; background: var(--white); transition: all 0.15s; }
.pick-btn-mini.over.selected  { border-color: var(--green); background: var(--green-bg); color: var(--green); }
.pick-btn-mini.under.selected { border-color: var(--red); background: var(--red-bg); color: var(--red); }
.btn-add-to { margin-left: auto; padding: 7px 16px; background: var(--brand); color: var(--white); border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.btn-add-to:hover { filter: brightness(0.92); }

/* ── Profile multi-leg rows ── */
.play-row-legs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.play-row-leg-item { display: flex; align-items: center; gap: 8px; }
.play-row-leg-item .play-row-info { flex: 1; min-width: 0; }


/* ── Prop odds value ── */
.prop-odds-val { opacity: 0.75; margin-left: 3px; }
.game-card .vs { color: var(--gray-400); font-weight: 400; }

/* ── Slip tray (floating) ── */
/* ── My Slip page ── */
.my-slip-page { padding: 20px 16px 100px; max-width: 480px; margin: 0 auto; padding-top: calc(20px + max(env(safe-area-inset-top, 0px), 54px)); }
.my-slip-header { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 16px; }
.my-slip-title { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.my-slip-collapse-btn { font-size: 20px; font-weight: 400; line-height: 1; color: var(--gray-500); background: var(--gray-100); border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; position: absolute; right: 0; }
.my-slip-collapse-btn:hover { background: var(--gray-200); color: var(--black); }
.my-slip-card { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.my-slip-legs { padding: 4px 0; }
.my-slip-leg-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 10px; }
.my-slip-leg-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.my-slip-leg-info { display: flex; flex-direction: column; min-width: 0; }
.my-slip-leg-player { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-slip-leg-sub { font-size: 12px; color: var(--gray-500); }
.my-slip-leg-sep { height: 1px; background: var(--gray-100); margin: 0 16px; }
.my-slip-add-row { display: flex; justify-content: center; padding: 14px 16px; border-top: 1px solid var(--gray-100); }
.my-slip-add-btn-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--gray-100); color: var(--black); font-size: 15px; font-weight: 700; padding: 10px 28px; border-radius: 999px; text-decoration: none; transition: background 0.15s; }
.my-slip-add-btn-pill:hover { background: var(--gray-200); }
.my-slip-max-note { font-size: 13px; color: var(--gray-500); font-style: italic; }
.my-slip-footer { padding: 12px 16px 16px; border-top: 1px solid var(--gray-100); }
.btn-post-slip-main { display: block; text-align: center; background: var(--black); color: var(--white); font-size: 15px; font-weight: 800; padding: 14px; border-radius: 12px; text-decoration: none; transition: opacity 0.15s; }
.btn-post-slip-main:hover { opacity: 0.85; color: var(--white); }
.my-slip-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 24px; }
.my-slip-empty-label { font-size: 15px; color: var(--gray-400); margin: 0; }

/* ── Empty slip visual ── */
.empty-slip-visual { display: flex; flex-direction: column; align-items: center; padding: 20px 16px; }
.empty-slip-card { width: 100%; max-width: 360px; background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.empty-slip-top { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1.5px dashed var(--gray-200); }
.empty-slip-icon { font-size: 22px; }
.empty-slip-sport-label { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--gray-400); text-transform: uppercase; }
.empty-slip-legs { padding: 8px 0; }
.empty-slip-leg { display: flex; align-items: center; gap: 10px; padding: 12px 16px; opacity: 1; }
.empty-slip-leg.faded { opacity: 0.35; }
.empty-slip-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--gray-200); flex-shrink: 0; }
.empty-slip-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.empty-slip-line { height: 9px; border-radius: 6px; background: var(--gray-200); }
.empty-slip-line.wide { width: 70%; }
.empty-slip-line.narrow { width: 45%; }
.empty-slip-odds-ph { width: 36px; height: 20px; border-radius: 6px; background: var(--gray-200); flex-shrink: 0; }
.empty-slip-divider { height: 1px; background: var(--gray-100); margin: 0 16px; }
.empty-slip-tear { height: 1px; border-top: 2px dashed var(--gray-200); margin: 0 16px; }
.empty-slip-footer { padding: 14px 16px 18px; text-align: center; }
.empty-slip-msg { font-size: 14px; font-weight: 700; color: var(--gray-700); margin: 0 0 4px; }
.empty-slip-sub { font-size: 12px; color: var(--gray-400); margin: 0; }

/* ── Slip pick pills (new design) ── */
.slip-picks-list { padding: 8px 0; }
.slip-pick-pill { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 12px; border-bottom: 1px solid var(--gray-100); }
.slip-pick-pill:last-child { border-bottom: none; }
.slip-pick-pill-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.slip-pick-sport { font-size: 20px; flex-shrink: 0; }
.slip-pick-info { display: flex; flex-direction: column; min-width: 0; }
.slip-pick-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slip-pick-detail { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.slip-pick-pill-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.slip-pick-odds { font-size: 12px; font-weight: 700; color: var(--brand); background: rgba(43,198,179,0.1); padding: 3px 8px; border-radius: 6px; }
.slip-pill-remove { background: none; border: none; color: var(--gray-400); font-size: 15px; cursor: pointer; padding: 0 0 0 4px; line-height: 1; }
.slip-pill-remove:hover { color: var(--gray-700); }
.slip-add-row { display: flex; justify-content: center; padding: 14px 16px; border-top: 1px solid var(--gray-100); }
.slip-add-pill-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--gray-100); color: var(--black); font-size: 14px; font-weight: 700; padding: 10px 28px; border-radius: 999px; text-decoration: none; transition: background 0.15s; }
.slip-add-pill-btn:hover { background: var(--gray-200); }

/* ── New play two-step ── */
.post-step-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--gray-500); padding: 0 0 16px; }

/* ── Favorites tab ── */
.fav-legs-list { padding: 8px 0 100px; }
.fav-leg-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 16px; background: var(--white); border: none; border-bottom: 1px solid var(--gray-100); cursor: pointer; text-align: left; gap: 10px; transition: background 0.12s; }
.fav-leg-row:hover { background: var(--gray-50, #fafafa); }
.fav-leg-row.in-slip { opacity: 0.45; }
.fav-leg-row.pick-conflict { opacity: 0.4; pointer-events: none; }
.fav-leg-row.pick-conflict .fav-leg-add-icon { display: none; }
.fav-leg-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.fav-leg-sport { font-size: 20px; flex-shrink: 0; }
.fav-leg-info { display: flex; flex-direction: column; min-width: 0; }
.fav-leg-player { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-leg-sub { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-leg-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fav-leg-odds { font-size: 12px; font-weight: 700; color: var(--gray-600); }
.fav-leg-add-icon { font-size: 14px; color: var(--gray-400); }
.fav-leg-row.in-slip .fav-leg-add-icon { display: none; }

/* ── Explore back bar ── */
.explore-back-bar { padding: 10px 16px 2px; padding-top: max(env(safe-area-inset-top, 10px), 54px); }
.explore-back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--black); text-decoration: none; }
.explore-back-btn i { font-size: 13px; }

.slip-tray {
  position: fixed;
  bottom: 68px; /* above bottom nav */
  left: 50%;
  transform: translateX(-50%);
  width: min(430px, 96vw);
  background: var(--gray-700);
  color: var(--white);
  border-radius: 16px 16px 12px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow: hidden;
  max-height: 56vh;
}
.slip-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.slip-tray-title {
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 7px;
}
.slip-count-badge {
  background: var(--brand);
  color: var(--white);
  font-size: 11px;
  font-weight: 900;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.slip-collapse-btn {
  background: rgba(255,255,255,0.12);
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.slip-collapse-btn:hover { background: rgba(255,255,255,0.22); }
.slip-tray-legs {
  overflow-y: auto;
  padding: 6px 10px;
  flex: 1;
}
.slip-leg-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.slip-leg-row:last-child { border-bottom: none; }
.slip-leg-info {
  flex: 1;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slip-remove-btn {
  background: none;
  border: none;
  color: var(--gray-400);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
}
.slip-remove-btn:hover { color: var(--gray-700); }
.slip-tray-footer {
  padding: 8px 10px 10px;
  flex-shrink: 0;
}
.btn-post-slip {
  display: block;
  width: 100%;
  background: var(--brand);
  color: var(--white);
  text-align: center;
  padding: 11px 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  transition: filter 0.15s;
}
.btn-post-slip:hover { filter: brightness(0.9); color: var(--white); }

/* ── Prop button — "in slip" state ── */
.prop-pick-btn.in-slip {
  opacity: 0.55;
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ── Slip toast ── */
.slip-toast {
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--gray-700);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 300;
  white-space: nowrap;
  max-width: 90vw;
}
.slip-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.slip-toast.error { background: var(--red); }

/* ── new_play page: remove button inside bet block ── */
.slip-remove-preview {
  background: none;
  border: none;
  color: var(--gray-400);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  margin-left: auto;
}
.slip-remove-preview:hover { color: var(--gray-700); }
.new-play-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.new-play-header h2 { margin: 0; font-size: 20px; }

/* ── Accuracy stat cards ── */
.accuracy-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 14px;
}
.accuracy-row.accuracy-row-single {
  grid-template-columns: 1fr;
}
.slipscore-bar-wrap {
  height: 5px;
  background: var(--gray-200);
  border-radius: 99px;
  overflow: hidden;
  margin: 6px 0 2px;
}
.slipscore-bar {
  height: 100%;
  border-radius: 99px;
  background: var(--brand);
  transition: width 0.4s ease;
}
.slipscore-bar.hot    { background: var(--green); }
.slipscore-bar.cold   { background: var(--red); }
.slipscore-num.hot    { color: var(--green); }
.slipscore-num.cold   { color: var(--red); }
.slipscore-num.neutral { color: var(--brand); }
.stat-tappable { cursor: pointer; }
.stat-tappable:active { opacity: 0.7; }

.follow-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 900;
}
.follow-sheet-backdrop.open { display: block; }
.follow-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 901;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.follow-sheet.open { transform: translateY(0); }
.follow-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--gray-100);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.follow-sheet-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0;
}
.follow-sheet-list {
  overflow-y: auto;
  padding: 8px 0 20px;
  flex: 1;
}
.follow-sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  text-decoration: none;
  color: inherit;
}
.follow-sheet-row:active { background: var(--gray-100); }
.follow-sheet-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.follow-sheet-username {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
}
.follow-sheet-empty {
  text-align: center;
  color: var(--gray-400);
  font-size: 14px;
  padding: 32px 18px;
}
.slipscore-card { position: relative; }
.slipscore-info-link {
  display: inline-flex;
  align-items: center;
  color: var(--gray-400);
  font-size: 12px;
  margin-left: 4px;
  vertical-align: middle;
  text-decoration: none;
}
.slipscore-info-link:hover { color: var(--brand); }

/* ── Slipscore info page ── */
.slipscore-info-page {
  padding: 0 0 40px;
}
.slipscore-info-hero {
  text-align: center;
  padding: 32px 20px 24px;
  background: linear-gradient(160deg, var(--brand) 0%, #1aa898 100%);
  color: #fff;
}
.slipscore-info-score-demo {
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -2px;
}
.slipscore-info-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
}
.slipscore-info-sub {
  font-size: 13px;
  opacity: 0.85;
}
.slipscore-info-section {
  padding: 20px 18px 4px;
}
.slipscore-info-section p {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0 0 12px;
}
.slipscore-info-section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-400);
  margin-bottom: 10px;
}
.slipscore-info-formula {
  background: var(--gray-100);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.slipscore-formula-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}
.slipscore-formula-label {
  font-weight: 800;
  color: var(--brand);
  min-width: 48px;
}
.slipscore-formula-eq {
  color: var(--gray-600);
  font-family: monospace;
  font-size: 12px;
}
.slipscore-formula-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 8px 0;
}
.slipscore-info-tiers {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.slipscore-tier-row {
  display: flex;
  gap: 14px;
  align-items: center;
}
.slipscore-tier-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
  background: var(--brand);
}
.slipscore-tier-dot.hot    { background: var(--green); }
.slipscore-tier-dot.cold   { background: var(--red); }
.slipscore-tier-dot.mid    { background: var(--orange); }
.slipscore-tier-range {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 2px;
}
.slipscore-tier-desc {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.45;
}
.slipscore-tier-rank {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-400);
  background: var(--gray-100);
  border-radius: 6px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.slipscore-rank-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 4px;
}
.slipscore-rank-label.hot     { color: var(--green); }
.slipscore-rank-label.neutral { color: var(--brand); }
.slipscore-rank-label.cold    { color: var(--red); }
.slipscore-badge-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin: 4px auto 0;
  display: block;
}
.slipscore-tier-badge {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  align-self: center;
}
.accuracy-card {
  border-radius: 14px;
  padding: 14px 12px 12px;
  text-align: center;
  background: var(--gray-100);
  border: 1.5px solid var(--gray-200);
  transition: border-color 0.2s;
}
.accuracy-card.hot    { border-color: var(--green); background: var(--green-bg); }
.accuracy-card.cold   { border-color: var(--red);   background: var(--red-bg); }
.accuracy-card.neutral{ border-color: var(--orange); background: var(--orange-bg); }
.accuracy-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.accuracy-pct {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  color: var(--gray-700);
  margin-bottom: 4px;
}
.accuracy-card.hot  .accuracy-pct  { color: var(--green); }
.accuracy-card.cold .accuracy-pct  { color: var(--red); }
.accuracy-card.neutral .accuracy-pct { color: var(--orange); }
.accuracy-record {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
}
.accuracy-card.hot  .accuracy-record { color: var(--green); }
.accuracy-card.cold .accuracy-record { color: var(--red); }

/* ── Refresh Stats button ── */
.refresh-stats-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}
.refresh-stats-btn.loading i { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Per-leg result badges ── */
.leg-result-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.leg-result-badge.win  { background: var(--green-bg); color: var(--green); }
.leg-result-badge.loss { background: var(--red-bg);   color: var(--red); }
.leg-result-inline { font-weight: 900; margin-left: 4px; }
.leg-result-inline.win  { color: var(--green); }
.leg-result-inline.loss { color: var(--red); }

/* ── Partial result badge ── */
.result-badge.partial {
  background: var(--orange-bg);
  color: var(--orange);
  border: 1px solid var(--orange);
}

/* ── Slip accuracy bar (play detail) ── */
.slip-accuracy-bar {
  margin: 4px 14px 10px;
  padding: 10px 12px;
  background: var(--gray-100);
  border-radius: 10px;
}
.slip-accuracy-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  margin-bottom: 6px;
}
.slip-accuracy-track {
  height: 6px;
  background: var(--gray-300);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}
.slip-accuracy-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.slip-accuracy-fill.hot     { background: var(--green); }
.slip-accuracy-fill.neutral { background: var(--orange); }
.slip-accuracy-fill.cold    { background: var(--red); }
.slip-accuracy-pct {
  font-size: 12px;
  font-weight: 700;
}
.slip-accuracy-pct.hot     { color: var(--green); }
.slip-accuracy-pct.neutral { color: var(--orange); }
.slip-accuracy-pct.cold    { color: var(--red); }

/* ── Accuracy card sub-label ── */
.accuracy-sub {
  font-size: 10px;
  color: var(--gray-400);
  margin-top: 2px;
}

/* ── Game Lines section on Explore ── */
.lines-section-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-500);
  padding: 10px 14px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.team-lines-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 10px;
}

.team-lines-header {
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-600);
  padding: 4px 0 2px;
}

.team-line-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  transition: all 0.15s;
  min-width: 90px;
}
.team-line-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light, #f0f4ff);
}
.team-line-btn.in-slip {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}
.team-line-btn.in-slip .team-line-type,
.team-line-btn.in-slip .team-line-num,
.team-line-btn.in-slip .team-line-odds { color: white; }

.team-line-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-500);
}
.team-line-num {
  font-size: 15px;
  font-weight: 800;
  color: var(--gray-800);
}
.team-line-odds {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

/* ml / cover pick badges in feed */
.pick-badge.ml,
.pick-badge.cover  { background: var(--gray-200); color: var(--gray-500); border: none; }

/* ── Notification bell ── */
.notif-bell { position: relative; }
.notif-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  border: 1.5px solid var(--white);
}

/* ── Notifications page ── */
.notif-page-header {
  padding: 16px 16px 8px;
  border-bottom: 1px solid var(--gray-100);
}
.notif-page-header h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}

/* ── Phone-style notification cards ── */
.pn-panel { background: #f2f2f7; min-height: 200px; }
.pn-section-header {
  font-size: 13px;
  font-weight: 700;
  color: #6e6e73;
  padding: 14px 16px 6px;
  letter-spacing: -0.1px;
}
.pn-card {
  background: #fff;
  border-radius: 16px;
  margin: 0 12px 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  transition: opacity 0.15s;
}
.pn-card.unread { box-shadow: 0 1px 8px rgba(0,0,0,0.11); }
.pn-card:active { opacity: 0.75; }

/* Notification card layout: avatar+badge | message | time */
.pn-card {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
}
.pn-actor-wrap { position: relative; flex-shrink: 0; width: 54px; height: 44px; }
.pn-single-wrap { position: relative; width: 44px; height: 44px; }
.pn-actor-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  display: block; background: var(--gray-200);
}
.pn-actor-placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); font-size: 18px;
}
.pn-avatar-stack { position: relative; width: 54px; height: 44px; }
.pn-stack-avatar {
  position: absolute; top: 0;
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--white); background: var(--gray-200);
}
.pn-badge {
  position: absolute; bottom: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #fff;
  border: 2px solid #fff;
}
.pn-icon-like    { background: #ff3b30; }
.pn-icon-fade    { background: #636366; }
.pn-icon-comment { background: #34c759; }
.pn-icon-message { background: #32ade6; }
.pn-icon-follow  { background: #007aff; font-size: 8px; padding-left: 1px; }
.pn-icon-lock    { background: #ff9500; }
.pn-icon-result  { background: #34c759; }
.pn-icon-default { background: #8e8e93; }
.pn-body { flex: 1; min-width: 0; }
.pn-message { font-size: 14px; line-height: 1.4; color: #1c1c1e; }
.pn-card.unread .pn-message { font-weight: 600; }
.pn-extra-count { font-size: 12px; color: var(--gray-400); margin-left: 4px; }
.pn-time { font-size: 12px; color: #8e8e93; white-space: nowrap; flex-shrink: 0; }
.pn-avatars { display: none; }
.pn-avatar-link { display: flex; }
.pn-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
}
.pn-avatar-overlap {
  margin-left: -12px;
}
.pn-avatar-extra {
  margin-left: -4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e5e5ea;
  color: #636366;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  align-self: center;
}

/* legacy notif styles kept for standalone /notifications page */
.notif-list { padding: 0; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.1s;
}
.notif-item.unread { background: var(--primary-light, #f5f8ff); }
.notif-item:last-child { border-bottom: none; }
.notif-body { flex: 1; min-width: 0; }
.notif-message {
  font-size: 14px;
  line-height: 1.4;
  color: var(--gray-800);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.notif-icon.deleted { color: var(--red); font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.notif-time { font-size: 12px; color: var(--gray-400); margin-top: 4px; }

/* ── Recommendations tabs ── */
.rec-page { padding-bottom: 80px; }

.rec-tabs {
  display: flex;
  background: var(--gray-200);
  border-radius: 12px;
  padding: 3px;
  margin: 12px 16px 8px;
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: none;
}
.rec-tab {
  flex: 1;
  padding: 9px 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-500);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.15s;
}
.rec-tab.active {
  color: var(--gray-900);
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.rec-tab-panel { display: none; }
.rec-tab-panel.active { display: block; }

.rec-tab-hint {
  padding: 10px 16px 6px;
  font-size: 12px;
  color: var(--gray-500);
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}

/* ── Hot account badge ── */
.rec-stats-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.hot-rate-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
}
.hot-rate-badge.fire   { background: #fff3e0; color: #e65100; }
.hot-rate-badge.warm   { background: var(--green-bg); color: var(--green); }
.hot-rate-badge.cool   { background: var(--gray-200); color: var(--gray-600); }

/* ── For You cards ── */
.foryou-list { display: flex; flex-direction: column; padding: 0 16px; }

.foryou-sport-bar { margin: 0 0 4px; }
.foryou-sport-bar .sport-tab { cursor: pointer; border: none; background: none; }

.foryou-play-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.foryou-play-link .play-card {
  margin-bottom: 10px;
}
.foryou-play-link:active .play-card {
  opacity: 0.85;
}


/* ── Player search results (explore) ── */
.player-results-list { padding: 0 12px 4px; }
.player-results-label { font-size: 12px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.6px; padding: 10px 4px 6px; }
.player-result-card { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 13px 14px; margin-bottom: 8px; text-decoration: none; }
.player-result-name { font-size: 15px; font-weight: 700; color: var(--gray-900); flex: 1; }
.player-result-game { font-size: 12px; color: var(--gray-500); }
.player-result-arrow { color: var(--gray-300); font-size: 12px; }
.btn-check-results { background: none; border: 1px solid var(--brand); color: var(--brand); border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.btn-check-results:disabled { opacity: 0.5; cursor: default; }
.player-result-odds { font-size: 13px; font-weight: 700; color: var(--brand); margin-right: 4px; white-space: nowrap; }
.team-future-badge { font-size: 11px; font-weight: 600; color: var(--brand); background: rgba(43,198,179,.12); border-radius: 4px; padding: 1px 5px; margin-left: 5px; vertical-align: middle; }
.player-search-loading { padding: 14px 4px; font-size: 13px; color: var(--gray-400); }

/* ── Player stat type page ── */
.player-stats-page { padding: 0 0 100px; }
.prop-page-back { padding: 12px 16px 0; }
.back-link { font-size: 14px; font-weight: 600; color: var(--brand); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.prop-page-header { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 2px; }
.prop-page-team-logo { width: 40px; height: 40px; object-fit: contain; margin-bottom: 6px; }
.prop-page-player { font-size: 22px; font-weight: 800; color: var(--gray-900); }
.prop-page-market { font-size: 16px; font-weight: 700; color: var(--green); }
.prop-page-game { font-size: 13px; color: var(--gray-500); margin-top: 2px; }
.prop-page-label { font-size: 12px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.6px; padding: 6px 16px 10px; }
.stat-type-grid { display: flex; flex-direction: column; gap: 10px; padding: 0 12px; }
.stat-type-card { display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 16px; text-decoration: none; transition: background 0.15s; }
.stat-type-card:hover { background: var(--gray-50); }
.stat-type-label { font-size: 16px; font-weight: 700; color: var(--gray-900); flex: 1; }
.stat-type-sub { font-size: 12px; color: var(--gray-400); }
.stat-type-arrow { color: var(--gray-300); font-size: 13px; }

/* ── Book odds comparison page ── */
.player-odds-page { padding: 0 0 100px; }
.book-odds-list { display: flex; flex-direction: column; gap: 10px; padding: 0 12px; }
.book-odds-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 16px; }
.book-odds-card.unavailable { opacity: 0.45; }
.book-odds-name { font-size: 15px; font-weight: 800; color: var(--gray-900); margin-bottom: 4px; }
.book-odds-line { font-size: 12px; color: var(--gray-500); margin-bottom: 10px; }
.book-odds-na { font-size: 13px; color: var(--gray-400); margin-top: 4px; }
.book-odds-btns { display: flex; gap: 8px; }
.book-pick-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 10px; border: none; cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
.book-pick-btn.over { background: var(--green-bg); }
.book-pick-btn.under { background: #eff6ff; }
.book-pick-btn.selected { outline: 2px solid var(--green); }
.book-pick-dir { font-size: 13px; font-weight: 700; color: var(--gray-700); }
.book-pick-odds { font-size: 15px; font-weight: 800; color: var(--gray-900); }
.book-pick-btn.over .book-pick-dir { color: var(--green); }
.book-pick-btn.under .book-pick-dir { color: #1d4ed8; }

/* ── Book-by-book game lines (moneyline / spread) ── */
.book-lines-market-label { font-size: 12px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 14px 4px; }
.book-lines-team { padding: 6px 14px 10px; border-bottom: 1px solid var(--gray-100); }
.book-lines-team:last-child { border-bottom: none; }
.book-lines-team-name { font-size: 13px; font-weight: 700; color: var(--gray-800); margin-bottom: 8px; }

/* ── Game pick card (book + line picker inside explore panel) ── */
.game-pick-card { padding: 12px 14px 14px; border-bottom: 1px solid var(--gray-100); display: flex; flex-direction: column; gap: 8px; }
.game-pick-card:last-child { border-bottom: none; }
.game-pick-team { font-size: 14px; font-weight: 800; color: var(--gray-900); margin-bottom: 2px; }
.game-pick-result { margin-top: 4px; }
.game-pick-result .odds-pick-big { width: 100%; border-radius: 12px; border: 1.5px solid var(--gray-200); flex-direction: row; justify-content: space-between; padding: 12px 16px; gap: 12px; }
.game-pick-result .odds-pick-big:first-child { border-right: 1.5px solid var(--gray-200); }
.game-pick-result .opb-dir { font-size: 13px; font-weight: 800; color: var(--brand); }
.game-pick-result .odds-pick-big.over .opb-dir,
.game-pick-result .odds-pick-big.under .opb-dir { color: var(--brand); }
.game-pick-result .opb-odds { font-size: 22px; font-weight: 900; }
.game-pick-result .opb-add { font-size: 11px; margin-top: 0; }
.book-lines-line { font-size: 12px; font-weight: 600; color: var(--gray-500); margin-left: 4px; }
.book-lines-books { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.book-lines-books::-webkit-scrollbar { display: none; }
.book-line-btn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 12px; border-radius: 9px; border: 1.5px solid var(--gray-200); background: var(--white); cursor: pointer; font-family: inherit; transition: background 0.12s, border-color 0.12s; min-width: 76px; }
.book-line-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
.book-line-btn.selected { border-color: var(--green); background: var(--green-bg); }
.book-line-bk { font-size: 10px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.3px; }
.book-line-odds { font-size: 15px; font-weight: 800; color: var(--gray-900); }

/* ── All-lines player props page (standard + alternate) ── */
/* ── Odds Picker (player_odds.html) ── */
.odds-picker { display: flex; flex-direction: column; gap: 20px; padding: 16px 16px 32px; }
/* ── Dropdown line + book pickers ── */
.pick-selector-row { display: flex; gap: 8px; padding: 12px 14px 6px; align-items: center; }
.pick-select { appearance: none; -webkit-appearance: none; border: 1.5px solid var(--gray-200); border-radius: 12px; background: var(--white); color: var(--gray-900); font-family: inherit; font-size: 14px; font-weight: 700; padding: 11px 32px 11px 13px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; transition: border-color 0.15s; }
.pick-select:focus { outline: none; border-color: var(--brand); }
.pick-select:active { border-color: var(--brand); }
.pick-select-wide { flex: 1; }
.pick-select-narrow { flex: 0 0 auto; min-width: 116px; }
.odds-picker-section { display: flex; flex-direction: column; gap: 8px; }
.odds-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--gray-400); }
.odds-pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.odds-pill { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--gray-200); background: var(--white); font-size: 13px; font-weight: 700; color: var(--gray-700); cursor: pointer; font-family: inherit; transition: border-color 0.15s, background 0.15s, color 0.15s; white-space: nowrap; }
.odds-pill:hover:not(:disabled) { border-color: var(--gray-400); background: var(--gray-50); }
.odds-pill.active { border-color: var(--brand); background: rgba(43,198,179,0.1); color: var(--brand); }
.odds-pill:disabled { opacity: 0.4; cursor: default; }
.odds-result-card { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 16px; overflow: hidden; }
.consensus-bar-tag { color: var(--brand); font-weight: 700; white-space: nowrap; }
.consensus-info-link { color: var(--brand); margin-left: 2px; font-size: 13px; text-decoration: none; }
.consensus-info-link:hover { opacity: 0.75; }
.consensus-example-table { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; margin: 12px 0; }
.consensus-example-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--gray-100); font-size: 14px; }
.consensus-example-row:last-child { border-bottom: none; }
.consensus-example-result { background: rgba(43,198,179,0.07); font-weight: 700; }
.consensus-example-book { color: var(--gray-700); }
.consensus-example-odds { font-weight: 700; color: var(--gray-900); }
.odds-result-meta { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); }
.odds-result-line-tag { font-size: 12px; font-weight: 700; color: var(--gray-700); }
.odds-result-book-tag { font-size: 12px; font-weight: 600; color: var(--gray-400); margin-left: auto; }
.odds-result-picks { display: flex; gap: 0; }
.odds-pick-big { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 20px 12px 16px; border: none; background: var(--white); cursor: pointer; font-family: inherit; transition: background 0.12s; position: relative; }
.odds-pick-big:first-child { border-right: 1px solid var(--gray-100); }
.odds-pick-big:hover { background: var(--gray-50); }
.odds-pick-big.added { background: rgba(43,198,179,0.07); }
.odds-pick-big.pick-conflict { opacity: 0.4; pointer-events: none; }
.odds-pick-big.pick-conflict .opb-dir { color: var(--gray-400); }
.opb-dir { font-size: 13px; font-weight: 800; }
.odds-pick-big.over .opb-dir { color: var(--green); }
.odds-pick-big.under .opb-dir { color: var(--red); }
.opb-odds { font-size: 28px; font-weight: 900; color: var(--gray-900); letter-spacing: -0.5px; }
.opb-add { font-size: 11px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }
.odds-result-na { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; font-size: 14px; color: var(--gray-400); font-weight: 600; }

/* keep legacy alt-pick classes for any other usage */
.alt-pick-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 9px; border: 1.5px solid var(--gray-200); background: var(--white); cursor: pointer; font-family: inherit; transition: background 0.12s, border-color 0.12s; }
.alt-pick-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
.alt-pick-btn.selected { border-color: var(--green); background: var(--green-bg); }
.alt-pick-btn.over .alt-pick-dir { color: var(--green); }
.alt-pick-btn.under .alt-pick-dir { color: var(--red); }
.alt-pick-dir { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.alt-pick-odds { font-size: 15px; font-weight: 800; color: var(--gray-900); }

/* ── Alternate spread rows inside game panel ── */
.spread-alt-row { display: flex; align-items: center; gap: 8px; padding: 5px 14px; border-bottom: 1px solid var(--gray-100); }
.spread-alt-row:last-child { border-bottom: none; }
.spread-alt-line { font-size: 12px; font-weight: 800; color: var(--gray-600); min-width: 38px; }

/* ── Inbox (Messages + Notifications combined) ── */
.inbox-page { display: flex; flex-direction: column; height: 100%; }
.inbox-tabs { display: flex; border-bottom: none; background: transparent; position: sticky; top: 0; z-index: 10; }
.inbox-tab { flex: 1; background: none; border: none; padding: 14px 0 12px; font-size: 15px; font-weight: 700; color: var(--gray-400); cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; transition: color .15s; }
.inbox-tab.active { color: var(--brand); }
.inbox-tab-badge { background: var(--red); color: #fff; font-size: 11px; font-weight: 800; border-radius: 99px; padding: 1px 6px; min-width: 18px; text-align: center; }
.inbox-panel { display: none; }
.inbox-panel.active { display: block; }

/* ── Explore nav + badge ── */
.pn-caught-up {
  display: none; align-items: center; justify-content: center;
  gap: 7px; padding: 16px 0 8px;
  font-size: 13px; font-weight: 600; color: #ff3b30;
}
.pn-caught-up i { font-size: 15px; }

.nav-msg-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.nav-unread-dot {
  position: absolute; top: -6px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #ff3b30; color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; box-sizing: border-box;
}
.nav-explore-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.nav-explore-emoji { font-size: 24px; filter: grayscale(1) contrast(1.2); line-height: 1; }
.nav-slip-svg { width: 24px; height: 24px; }
.nav-explore.active .nav-slip-svg { color: #4a4a4a; }

/* ── Live Scores strip ── */
.scores-section { background: transparent; border-bottom: none; padding-bottom: 12px; }
.scores-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px 6px; }
.scores-label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); }
.scores-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
.scores-scroll::-webkit-scrollbar { display: none; }
.score-card { flex: 0 0 calc((100vw - 52px) / 3); width: calc((100vw - 52px) / 3); background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 7px 8px; display: flex; flex-direction: column; gap: 5px; }
.score-state-in { border-color: var(--green); }
.score-sport-badge { font-size: 10px; font-weight: 800; color: var(--gray-400); text-transform: uppercase; letter-spacing: .04em; }
.score-matchup { display: flex; flex-direction: column; gap: 4px; }
.score-row { display: flex; align-items: center; gap: 6px; }
.score-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.score-abbr { font-size: 12px; font-weight: 800; color: var(--black); flex: 1; }
.score-num { font-size: 13px; font-weight: 900; color: var(--black); min-width: 20px; text-align: right; }
.score-winner { color: var(--green); }
.score-vs { display: none; }
.score-status { font-size: 11px; color: var(--gray-500); display: flex; align-items: center; gap: 5px; }
.score-live { color: var(--green); font-weight: 700; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 1.2s infinite; flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Settings page ── */
.settings-page { padding: 0 0 100px; }

/* Tabs */
.settings-tabs {
  display: flex; border-bottom: 1px solid var(--gray-200);
  background: var(--white);
}
.settings-tab {
  flex: 1; background: none; border: none; padding: 13px 0;
  font-size: 14px; font-weight: 600; color: var(--gray-500);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.settings-tab.active { color: var(--black); border-bottom-color: var(--black); }

/* Tab panels */
.settings-tab-panel { display: none; padding-top: 4px; }
.settings-tab-panel.active { display: block; }

/* Toggle switch */
.settings-row-toggle { align-items: center; }
.toggle-switch { position: relative; display: inline-flex; cursor: pointer; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  width: 46px; height: 26px; background: var(--gray-300); border-radius: 13px;
  transition: background 0.2s; display: flex; align-items: center; padding: 3px;
}
.toggle-thumb {
  width: 20px; height: 20px; background: var(--white); border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--brand); }
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }
.settings-section-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--gray-500);
  padding: 18px 18px 6px;
}
.settings-card {
  background: var(--white); border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200); margin-bottom: 0;
}
.settings-card + .settings-section-label { padding-top: 28px; }
.settings-divider { height: 1px; background: var(--gray-100); margin: 0 16px; }
.settings-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: default;
}
.settings-field-label { padding: 14px 16px 6px; font-size: 15px; font-weight: 600; color: var(--black); }
.settings-row-photo { cursor: pointer; align-items: center; }
.settings-row-link { text-decoration: none; cursor: pointer; align-items: center; }
.settings-row-link:hover { background: var(--gray-100); }
.settings-row-tall { align-items: flex-start; }
.settings-avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.settings-row-body { flex: 1; min-width: 0; }
.settings-row-title { font-size: 15px; font-weight: 600; color: var(--black); margin-bottom: 3px; }
.settings-row-sub { font-size: 12px; color: var(--gray-500); }
.settings-chevron { font-size: 13px; color: var(--gray-400); flex-shrink: 0; }
.settings-inline-input {
  width: 100%; border: 1px solid var(--gray-300); border-radius: 8px;
  padding: 9px 11px; font-size: 14px; color: var(--black);
  background: var(--gray-100); outline: none;
}
.settings-inline-input:focus { border-color: var(--green); background: var(--white); }
.settings-inline-textarea {
  width: 100%; border: 1px solid var(--gray-300); border-radius: 8px;
  padding: 9px 11px; font-size: 14px; color: var(--black);
  background: var(--gray-100); outline: none; resize: none;
  min-height: 72px; font-family: inherit;
}
.settings-inline-textarea:focus { border-color: var(--green); background: var(--white); }
.settings-save-btn {
  background: var(--brand); color: var(--white); border: none;
  border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.settings-save-btn:hover { opacity: 0.88; }
.settings-card-danger { border-color: #fecaca; }
.settings-danger-title { color: var(--red); }
.settings-danger-input { border-color: #fecaca; }
.settings-danger-input:focus { border-color: var(--red); }
.settings-delete-btn {
  width: 100%; background: var(--red); color: var(--white); border: none;
  border-radius: 8px; padding: 11px; font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.settings-delete-btn:hover { opacity: 0.88; }

/* ── More menu (⋯) ── */
.more-menu { position: relative; }
.more-btn {
  background: none; border: none; cursor: pointer; padding: 4px 7px;
  color: #4a4a4a; font-size: 16px; border-radius: 6px;
  line-height: 1; transition: color 0.15s, background 0.15s;
  display: flex; align-items: center;
}
.more-btn:hover { color: var(--black); background: var(--gray-100); }
.more-dropdown {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 140px; z-index: 500;
  opacity: 0; pointer-events: none; transform: scale(0.95) translateY(-4px);
  transform-origin: top right; transition: opacity 0.14s, transform 0.14s;
}
.more-menu.open .more-dropdown { opacity: 1; pointer-events: all; transform: scale(1) translateY(0); }
.more-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 11px 14px; font-size: 14px; color: var(--black);
  text-align: left; border-radius: 10px; transition: background 0.12s;
}
.more-dropdown-item:hover { background: var(--gray-100); }
.more-dropdown-item i { color: var(--gray-500); font-size: 13px; }

/* ── Report modal ── */
.report-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 1200; display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none; transition: opacity 0.22s;
}
.report-modal-overlay.open { opacity: 1; pointer-events: all; }
.report-modal {
  width: 100%; background: var(--white); border-radius: 18px 18px 0 0;
  padding: 0 0 40px; transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.report-modal-overlay.open .report-modal { transform: translateY(0); }
.report-modal-handle {
  width: 36px; height: 4px; background: var(--gray-300); border-radius: 2px;
  margin: 12px auto 0;
}
.report-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 4px;
}
.report-modal-title { font-size: 16px; font-weight: 700; color: var(--black); }
.report-modal-close {
  background: none; border: none; font-size: 22px; color: var(--gray-500);
  cursor: pointer; line-height: 1; padding: 4px;
}
.report-modal-sub { font-size: 13px; color: var(--gray-500); padding: 2px 16px 12px; }
.report-reasons { display: flex; flex-direction: column; }
.report-reason-btn {
  background: none; border: none; border-top: 1px solid var(--gray-200);
  padding: 14px 16px; font-size: 15px; color: var(--black); cursor: pointer;
  text-align: left; transition: background 0.12s;
}
.report-reason-btn:hover { background: var(--gray-100); }
.report-reason-btn:disabled { opacity: 0.5; cursor: default; }
.report-modal-done {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 16px 8px; text-align: center;
}
.report-modal-done p { font-size: 14px; color: var(--gray-600); }

/* ── Block modal ── */
.block-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 1200; display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none; transition: opacity 0.22s;
}
.block-modal-overlay.open { opacity: 1; pointer-events: all; }
.block-modal {
  width: 100%; background: var(--white); border-radius: 18px 18px 0 0;
  padding: 0 0 44px; transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.block-modal-overlay.open .block-modal { transform: translateY(0); }
.block-modal-handle {
  width: 36px; height: 4px; background: var(--gray-300); border-radius: 2px; margin: 12px auto 0;
}
.block-modal-header {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 4px;
}
.block-modal-title { font-size: 16px; font-weight: 700; color: var(--black); }
.block-modal-close {
  background: none; border: none; font-size: 22px; color: var(--gray-500); cursor: pointer; line-height: 1; padding: 4px;
}
.block-modal-sub { font-size: 13px; color: var(--gray-500); padding: 4px 16px 10px; }
.block-modal-body { padding: 0 16px 4px; display: flex; flex-direction: column; gap: 10px; }
.block-modal-input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--gray-200); border-radius: 10px;
  font-size: 15px; color: var(--black); background: var(--white); box-sizing: border-box;
  outline: none; transition: border-color 0.15s;
}
.block-modal-input:focus { border-color: var(--brand); }
.block-confirm-btn, .unblock-confirm-btn {
  width: 100%; padding: 13px; border: none; border-radius: 10px;
  background: #ff3b30; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.unblock-confirm-btn { background: var(--brand); }
.block-confirm-btn:disabled, .unblock-confirm-btn:disabled { opacity: 0.5; cursor: default; }
.unblock-confirm-wrap { padding: 0 16px; }
.block-modal-done {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 16px 8px; text-align: center;
}
.block-modal-done p { font-size: 14px; color: var(--gray-600); }
.blocked-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff3f3; border: 1px solid #ffcdd2; border-radius: 10px;
  margin: 12px 14px; padding: 12px 14px; font-size: 14px; color: #c0392b;
}
.blocked-banner i { font-size: 16px; }
.blocked-banner strong { color: #c0392b; }
.unblock-btn {
  margin-left: auto; padding: 7px 14px; border: 1.5px solid #c0392b; border-radius: 8px;
  background: none; color: #c0392b; font-size: 13px; font-weight: 700; cursor: pointer;
}
/* note viewer more-menu */
.note-more-menu { position: relative; }
.note-more-menu .more-dropdown { top: 100%; right: 0; left: auto; min-width: 140px; }

/* ── Admin panel ── */
.admin-page { padding: 16px 14px 90px; max-width: 640px; margin: 0 auto; }
.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.admin-header h1 { font-size: 22px; font-weight: 800; }
.admin-back { font-size: 14px; color: var(--gray-500); text-decoration: none; }
.admin-section { margin-bottom: 28px; }
.admin-section h2 {
  font-size: 16px; font-weight: 700; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.admin-count {
  font-size: 12px; background: var(--red); color: var(--white);
  border-radius: 10px; padding: 1px 7px; font-weight: 700;
}
.admin-empty { font-size: 14px; color: var(--gray-400); padding: 12px 0; }
.admin-report-card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 14px; padding: 14px; margin-bottom: 14px;
}
.admin-report-meta {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  font-size: 13px;
}
.admin-author {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; color: var(--black); font-weight: 700;
}
.admin-report-count { font-size: 12px; color: var(--red); font-weight: 700; }
.admin-report-time { margin-left: auto; font-size: 12px; color: var(--gray-400); }
.admin-report-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.admin-reason-tag {
  font-size: 11px; background: var(--gray-100); border-radius: 8px;
  padding: 3px 8px; color: var(--gray-600);
}
.admin-post-preview { padding: 10px 0; border-top: 1px solid var(--gray-100); margin-bottom: 10px; }
.admin-leg-row { font-size: 13px; color: var(--black); padding: 3px 0; }
.admin-leg-detail { color: var(--gray-500); margin-left: 4px; }
.admin-caption { font-size: 12px; color: var(--gray-500); font-style: italic; margin-top: 6px; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-btn {
  font-size: 13px; font-weight: 600; border: none; border-radius: 8px;
  padding: 7px 14px; cursor: pointer; transition: opacity 0.15s;
}
.admin-btn:hover { opacity: 0.82; }
.admin-btn-delete { background: var(--red); color: var(--white); }
.admin-btn-dismiss { background: var(--gray-200); color: var(--black); }
.admin-btn-suspend { background: #f97316; color: var(--white); }
.admin-btn-deactivate { background: #7c3aed; color: var(--white); }
.admin-suspended-row {
  display: flex; align-items: center; gap: 10px; font-size: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--gray-100);
}
.avatar-xs { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

/* ══════════════════════════════════════════════
   DARK MODE — respects iOS / system setting
   ══════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {

  /* ── Remap all design tokens ── */
  :root {
    --black:       #f2f2f7;   /* primary text  */
    --white:       #1c1c1e;   /* surfaces       */
    --gray-50:     #1c1c1e;   /* subtle surface  */
    --gray-100:    #111111;   /* page bg        */
    --gray-200:    #2c2c2e;   /* borders/dividers */
    --gray-300:    #3a3a3c;   /* stronger separators */
    --gray-400:    #636366;   /* muted icons    */
    --gray-500:    #8e8e93;   /* secondary text */
    --gray-600:    #ebebf5;   /* body text mid  */
    --gray-700:    #f2f2f7;   /* body text (maps to "black" role) */
    --gray-800:    #f2f2f7;   /* strong text    */
    --gray-900:    #ffffff;   /* strongest text */
    --green-bg:    #0a2a1e;
    --red-bg:      #2d0a0e;
    --orange-bg:   #2d1800;
    --brand-light: #0a2928;
  }

  /* ── Slip tray stays intentionally dark in both modes ──
     It uses --gray-700 as bg in light mode; that var now maps to light text,
     so we pin it to a fixed dark surface. */
  .slip-tray { background: #1e1e20; }

  /* ── Inputs & textareas ── */
  input:not([type=submit]):not([type=button]):not([type=range]):not([type=checkbox]),
  textarea, select {
    background: #2c2c2e;
    color: #f2f2f7;
    border-color: #3a3a3c;
  }
  input::placeholder, textarea::placeholder { color: #636366; }

  /* ── Agreement checkboxes — custom, override global input rule ── */
  .auth-agree-label input[type="checkbox"] {
    background: transparent !important;
    border-color: #636366;
  }
  .auth-agree-label input[type="checkbox"]:checked {
    background: var(--brand) !important;
    border-color: var(--brand);
  }
  .auth-agree-label { color: #ebebf5; }

  /* ── Search bar ── */
  .search-input, .search-bar, .search-wrap input {
    background: #2c2c2e;
    color: #f2f2f7;
  }

  /* ── Chat input ── */
  .chat-input {
    color: #f2f2f7;
  }

  /* ── "Theirs" message bubble — needs visible contrast on dark bg ── */
  .bubble.theirs {
    background: #2c2c2e;
    color: #f2f2f7;
    box-shadow: none;
  }

  /* ── Modal / overlay backdrops ── */
  .modal-overlay, .modal-backdrop, .sheet-backdrop {
    background: rgba(0,0,0,0.75);
  }

  /* ── Story quote in DMs ── */
  .story-quote-bubble {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #ebebf5;
  }

  /* ── Pick select dropdowns on explore ── */
  .pick-select { background-color: #2c2c2e; color: #f2f2f7; border-color: #3a3a3c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }

  /* ── Toasts ── */
  .slip-toast { background: #2c2c2e; color: #f2f2f7; }

  /* ── Admin dismiss button readable in dark ── */
  .admin-btn-dismiss { background: #3a3a3c; color: #f2f2f7; }

  /* ── Avatar border so it pops on dark bg ── */
  .avatar { box-shadow: 0 0 0 1px #3a3a3c; }

  /* ── Scrollbars ── */
  * { scrollbar-color: #3a3a3c transparent; }

  /* ── Notification cards (hardcoded colors) ── */
  .pn-panel { background: #111111; }
  .pn-card { background: #1c1c1e; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
  .pn-card.unread { background: #1e2430; box-shadow: 0 1px 8px rgba(0,0,0,0.5); }
  .pn-message { color: #f2f2f7; }
  .pn-section-header { color: #8e8e93; }
  .pn-badge { border-color: #1c1c1e; }
  .pn-avatar { border-color: #1c1c1e; }
  .pn-stack-avatar { border-color: #1c1c1e; }
  .pn-avatar-extra { background: #3a3a3c; color: #ebebf5; border-color: #1c1c1e; }

  /* ── User search bar (recommendations page) ── */
  .user-search-inner { background: #2c2c2e; border-color: #3a3a3c; }
  .user-search-inner:focus-within { background: #2c2c2e; border-color: var(--brand); }
  .user-search-input { color: #f2f2f7; }
  .user-search-results { background: #1c1c1e; border-color: #3a3a3c; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
  .user-search-row { border-bottom-color: #2c2c2e; }
  .user-search-row:hover { background: #2c2c2e; }
  .user-search-name { color: #f2f2f7; }
  .user-search-sub { color: #8e8e93; }
  .user-search-empty { color: #8e8e93; }

  /* ── Slip count badge — always white text on green ── */
  .slip-count-badge { color: #fff; }

  /* ── My Slip page ── */
  .my-slip-card { border-color: #3a3a3c; box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
  .my-slip-collapse-btn { background: #2c2c2e; color: #ebebf5; }
  .my-slip-collapse-btn:hover { background: #3a3a3c; }
  .slip-add-pill-btn { background: #2c2c2e; color: #f2f2f7; }
  .slip-add-pill-btn:hover { background: #3a3a3c; }
  .my-slip-add-row { border-top-color: #2c2c2e; }
  .slip-add-row { border-top-color: #2c2c2e; }
  .my-slip-empty-label { color: #636366; }
  .my-slip-max-note { color: #8e8e93; }
  .empty-slip-card { background: #1c1c1e; border-color: #2c2c2e; box-shadow: none; }
  .empty-slip-top { border-bottom-color: #3a3a3c; }
  .empty-slip-dot, .empty-slip-line, .empty-slip-odds-ph { background: #2c2c2e; }
  .empty-slip-divider { background: #2c2c2e; }
  .empty-slip-tear { border-top-color: #3a3a3c; }
  .empty-slip-msg { color: #ebebf5; }
  .empty-slip-sub { color: #636366; }

  /* ── Game card (explore) ── */
  .game-card { border-color: #2c2c2e; }
  .game-card:hover, .game-card.active { background: #1c1c1e; }
  .props-panel { border-color: #2c2c2e; }

  /* ── Book lines / game lines section ── */
  .book-lines-team { border-bottom-color: #2c2c2e; }
  .book-lines-team-name { color: #f2f2f7; }
  .book-lines-line { color: #8e8e93; }
  .odds-pick-big { background: #1c1c1e; }
  .odds-pick-big:hover { background: #2c2c2e; }
  .odds-pick-big:first-child { border-right-color: #2c2c2e; }
  .game-pick-result .odds-pick-big { border-color: #3a3a3c; }
  .game-pick-result .odds-pick-big:first-child { border-right-color: #3a3a3c; }
  .odds-result-na { color: #636366; }

  /* ── Props panel / player props ── */
  .props-section { border-bottom-color: #2c2c2e; }
  .prop-row { border-bottom-color: #2c2c2e; }
  .prop-player { color: #f2f2f7; }
  .prop-market { color: #8e8e93; }
  .lines-section-label { color: #8e8e93; border-bottom-color: #2c2c2e; }

  /* ── Bet block / bet matchup bar ── */
  .bet-block { border-color: #3a3a3c; }
  .comments-list { background: #1c1c1e; }
  .comment-item { border-bottom-color: #2c2c2e; }
  .bet-matchup-bar { background: #2c2c2e; color: #f2f2f7; }
  .bet-matchup-bar.secondary { background: #1c1c1e; }
  .leg-divider { background: #2c2c2e; }

  /* ── Sport tabs (explore) ── */
  .sport-tabs { background: #1c1c1e; }
  .sport-tab { color: #636366; }
  .sport-tab:hover { color: #ebebf5; }
  .sport-tab.active { background: #2c2c2e; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }

  /* ── Section label ── */
  .section-label { color: #8e8e93; }

  /* ── Gamble responsibly bar ── */
  .gamble-responsibly-bar { background: transparent; color: #636366; border-color: transparent; }

  /* ── Score cards ── */
  .score-card { background: #1c1c1e; border-color: #2c2c2e; }
  .scores-section { background: transparent; border-bottom: none; }
  .scores-header { color: #8e8e93; }

  /* ── Rec page tabs ── */
  .rec-tabs { background: #2c2c2e; border-bottom: none; }
  .rec-tab { color: #8e8e93; }
  .rec-tab.active { color: #f2f2f7; background: #3a3a3c; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
  .rec-tab-hint { color: #8e8e93; }

  /* ── Fav leg rows ── */
  .fav-leg-row { background: #1c1c1e; border-bottom-color: #2c2c2e; }
  .fav-leg-row:hover { background: #2c2c2e; }
  .fav-leg-player { color: #f2f2f7; }
  .fav-leg-sub { color: #8e8e93; }

  /* ── Auth page form elements ── */
  .auth-card { background: #1c1c1e; border-color: #2c2c2e; }
  .auth-title { color: #f2f2f7; }
  .auth-sub { color: #8e8e93; }
  .form-label { color: #8e8e93; }
  .form-hint { color: #636366; }
  .tos-text { color: #8e8e93; }
  .tos-text a { color: var(--brand); }

  /* ── Topbar icon buttons ── */
  .topbar-settings-btn { color: #8e8e93; }
  .topbar-settings-btn:hover { color: #ebebf5; background: #2c2c2e; }
  .topbar-outline { -webkit-text-stroke-color: #8e8e93; }
  .more-btn { color: #8e8e93; }
  .more-btn:hover { color: #ebebf5; background: #2c2c2e; }

  /* ── Bottom nav ── */
  .bottom-nav { background: #111111; border-top: none; }
  .nav-item { color: #636366; }
  .nav-item:hover { color: #ebebf5; }
  .nav-item.active { color: #f2f2f7; }
  .nav-home:not(.active) .fa-house { color: transparent; -webkit-text-stroke: 2px #636366; }
  .nav-home.active .fa-house { color: #f2f2f7; -webkit-text-stroke: 0; }
  /* ── Play card — give it a visible border on black bg ── */
  .play-card {
    border: 1px solid #2c2c2e;
    box-shadow: 0 1px 6px rgba(0,0,0,0.45);
  }

  /* ── Hardcoded #000 action buttons ── */
  .action-btn.fade-btn { color: #ebebf5; }
  .action-btn.bookmark-btn.bookmarked { color: #f2f2f7; }

  /* ── Users bottom-sheet modal ── */
  .users-modal { background: #1c1c1e; }
  .users-modal-handle { background: #3a3a3c; }
  .users-modal-header { border-bottom-color: #2c2c2e; }
  .users-modal-item:active { background: #2c2c2e; }

  /* ── Profile page ── */
  .profile-play-row { border-bottom-color: #2c2c2e; }
  .profile-play-row:hover { background: #1c1c1e; }
  .profile-stat-val { color: #f2f2f7; }
  .profile-stat-label { color: #8e8e93; }
  .profile-username { color: #f2f2f7; }
  .profile-handle { color: #8e8e93; }
  .profile-bio { color: #ebebf5; }
  .profile-tabs { border-bottom-color: #2c2c2e; }
  .profile-tab { color: #636366; }
  .profile-tab.active { color: #f2f2f7; border-bottom-color: #f2f2f7; }

  /* ── Feed: ESPN news section ── */
  .espn-news-section { border: 1px solid #2c2c2e; box-shadow: 0 1px 6px rgba(0,0,0,0.45); }
  .espn-news-card { background: #2c2c2e; border-color: #3a3a3c; }
  .espn-news-card:hover { background: #3a3a3c; }

  /* ── Hot accounts / For You cards ── */
  .foryou-stat { color: #8e8e93; }
  .hot-rate-badge.fire { background: #3a1500; color: #ff9500; }
  .hot-rate-badge.cool { background: #2c2c2e; color: #8e8e93; }

  /* ── Suggest cards (follow suggestions carousel) ── */
  .suggest-card { border-color: #2c2c2e; }

  /* ── Notification card — hardcoded #fff override ── */
  .pn-card { background: #1c1c1e; }

  /* ── Comment form ── */
  .comment-form { border-top-color: #2c2c2e; background: #1c1c1e; }
  .comment-input-pill { background: #2c2c2e; }
  .comment-input { color: #f2f2f7; }
  .comment-input::placeholder { color: #636366; }
  .comment-post-btn { color: #fff; }
  .comment-gif-btn { border-color: #3a3a3c; color: #8e8e93; }
  .mention-dropdown { background: #1c1c1e; border-color: #3a3a3c; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
  .mention-dropdown-item:hover, .mention-dropdown-item.active { background: #2c2c2e; }

  /* ── Feed divider ── */
  .feed-divider::before, .feed-divider::after { background: #2c2c2e; }

  /* ── Play likes / counts ── */
  .play-likes { color: #f2f2f7; }
  .play-comments-link { color: #8e8e93; }
  .play-time { color: #636366; }

  /* ── Pick badges ── */
  .pick-badge-sm { background: #2c2c2e; color: #8e8e93; }
  .pick-badge.over, .pick-badge.under, .pick-badge.home, .pick-badge.away { background: #2c2c2e; color: #8e8e93; }
  .bet-odds { background: #2c2c2e; color: #8e8e93; }

  /* ── Result badge push state ── */
  .result-badge.push { background: #2c2c2e; color: #8e8e93; }

  /* ── Bet leg separator ── */
  .bet-leg-sep { background: #2c2c2e; }

  /* ── Existing play card (new play page) ── */
  .existing-play-card { background: #1c1c1e; border-color: #3a3a3c; }

  /* ── Primary button — keep text white on teal ── */
  .btn-primary { color: #fff; }

  /* ── "Add to this play" button — keep text white on green ── */
  .btn-add-to { color: #fff; }

  /* ── Post Slip main button — pin so it doesn't go light ── */
  .btn-post-slip-main { background: #3a3a3c; color: #f2f2f7; }
  .btn-post-slip-main:hover { color: #f2f2f7; }

  /* ── Three-dot more dropdown ── */
  .more-dropdown { background: #2c2c2e; border-color: #3a3a3c; box-shadow: 0 4px 20px rgba(0,0,0,0.6); }

  /* ── Follow / Followers bottom sheet — hardcoded #fff ── */
  .follow-sheet { background: #1c1c1e; }
  .follow-sheet-header { border-bottom-color: #2c2c2e; color: #f2f2f7; }
  .follow-sheet-empty { color: #8e8e93; }

  /* ── "Add to existing play" pick row ── */
  .add-to-pick-row { background: #1c1c1e; border-top-color: #2c2c2e; }

  /* ── My-story note bubble (mine) — hardcoded light green ── */
  .note-bubble-mine { background: #072828; border-color: #3dd4d4; color: #3dd4d4; }
  .note-bubble-mine::after { border-top-color: #3dd4d4; }
  .note-bubble-mine::before { border-top-color: #072828; }

  /* ── Explore game-panel tab bar ── */
  .panel-tab-bar { background: #1c1c1e; }
  .panel-tab-btn.active { background: #2c2c2e; box-shadow: none; }

  /* ── Remove-from-preview btn hover ── */
  .slip-remove-preview:hover { color: #f2f2f7; }

  /* ── Void result badge — hardcoded light ── */
  .leg-result-sm.void { background: #2c2c2e; color: #8e8e93; }


  /* ── Story modal close button ── */
  .story-modal-close { background: #3a3a3c; color: #f2f2f7; }

  /* ── Report modal ── */
  .report-modal { background: #1c1c1e; }
  .report-modal-handle { background: #3a3a3c; }
  .report-reason-btn { border-bottom-color: #2c2c2e; color: #f2f2f7; }
  .report-reason-btn:hover { background: #2c2c2e; }

  /* ── Slip tray — bg is pinned dark so text must be light ── */
  .slip-tray { color: #f2f2f7; }
  .slip-remove-btn:hover { color: #f2f2f7; }
  .btn-post-slip, .btn-post-slip:hover { color: #fff; }

  /* ── Follow buttons (green bg) — keep text white ── */
  .btn-follow { color: #fff; }
  .btn-follow-sm { color: #fff; }

  /* ── Outgoing chat bubble — keep text white on green ── */
  .bubble.mine { color: #fff; }

  /* ── Live game badge (red bg) — keep text white ── */
  .game-live-badge { color: #fff; }

  /* ── Pick preview header — gray-700 remaps to near-white; pin it ── */
  .pick-preview-header { background: #2c2c2e; color: #f2f2f7; }

  /* ── Settings save button (green bg) — keep text white ── */
  .settings-save-btn { color: #fff; }

  /* ── Admin elements ── */
  .admin-count { color: #fff; }
  .admin-btn-delete { color: #fff; }
  .admin-btn-suspend { color: #fff; }
  .admin-report-card { background: #1c1c1e; border-color: #3a3a3c; }

  /* ── Hot-rate fire badge — hardcoded light orange ── */
  .hot-rate-badge.fire { background: #3a1500; color: #ff9500; }

  /* ── DM / chat page ── */
  .dm-page-title { background: transparent; border-bottom: none; }
  .dm-row { background: transparent; border-bottom: none; }
  .dm-row:hover { background: #2c2c2e; }
  .chat-header { background: #1c1c1e; border-bottom-color: #2c2c2e; }
  .chat-messages { background: #111111; }
  .chat-input-row { background: #1c1c1e; border-top-color: #2c2c2e; }
  .chat-input-row.comment-form { background: #1c1c1e; }

  /* ── Tell iOS to use dark chrome (status bar, inputs, etc.) ── */
  html { color-scheme: dark; }

  /* ── Outline buttons (Edit Profile, Post a Pick, Refresh, Message) ── */
  .btn-outline { background: #2c2c2e; color: #f2f2f7; border-color: #3a3a3c; }
  .btn-outline:hover { background: #3a3a3c; }

  /* ── Note speech bubble (others' notes + "Add note" state) ── */
  .note-bubble { background: #2c2c2e; border-color: #3a3a3c; color: #ebebf5; }
  .note-bubble::after { border-color: #3a3a3c transparent transparent transparent; }
  .note-bubble::before { border-color: #2c2c2e transparent transparent transparent; }
  .story-note-empty .note-bubble { color: #636366; }
  .note-bubble-pill { background: rgba(28, 28, 30, 0.85); backdrop-filter: blur(6px); color: #fff; }

  /* ── Messages / Notifications inbox tabs ── */
  .inbox-tabs { background: transparent; border-bottom: none; }
  .inbox-tab { color: #8e8e93; }
  .inbox-tab.active { color: var(--brand); }

  /* ── Active nav dot / underline indicator ── */
  .nav-item.active::after { background: var(--brand); }

  /* ── Notification message text (hardcoded #1c1c1e in light mode) ── */
  .pn-message { color: #f2f2f7; }
  .pn-time { color: #8e8e93; }

  /* ── Play card + profile slip cells: remove inset white gloss shadow ── */
  .play-card { box-shadow: 0 1px 6px rgba(0,0,0,0.5); }
  .pslip-cell { box-shadow: 0 2px 8px rgba(0,0,0,0.4); border-color: #2c2c2e; }

  /* ── Profile slipscore / stats cards ── */
  .slipscore-card { background: #1c1c1e; border-color: #3a3a3c; }
  .monthly-card { background: #1c1c1e; border-color: #3a3a3c; }

  /* ── Story ring avatar wrap (home feed) ── */
  .note-avatar-wrap { background: transparent; }
  .note-avatar-wrap.story-ring { background: linear-gradient(to bottom right, #3dd4d4 0%, #2abbc4 50%, #1898a8 100%); }
  .note-avatar-wrap.story-ring-viewed { background: var(--gray-300); }

  /* ── Slip mini-cards on profile ── */
  .slip-mini-card { background: #1c1c1e; border-color: #2c2c2e; }
  .slip-mini-leg { color: #ebebf5; }
  .slip-mini-sub { color: #8e8e93; }
}

/* ─────────────────────────────────────────────────────────────
   Game Panel Tabs (explore page — Game Lines / Player Props)
   ───────────────────────────────────────────────────────────── */
.panel-tabs {
  display: flex;
  flex-direction: column;
}

/* ── Tab bar — segmented control ── */
.panel-tab-bar {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: var(--gray-100);
  flex-shrink: 0;
}

.panel-tab-btn {
  flex: 1;
  padding: 9px 8px;
  border: none;
  background: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.panel-tab-btn.active {
  background: var(--white);
  color: var(--brand);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* ── Tab content pane ── */
.panel-tab-content {
  overflow: hidden;
  flex: 1;
}
.panel-tab-content::-webkit-scrollbar { display: none; }

/* ── Empty state ── */
.tab-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 16px;
  color: var(--gray-400);
  font-size: 13px;
  text-align: center;
}
.tab-empty i { font-size: 28px; }

/* ── Player roster card (each row) ── */
.player-roster-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 8px 8px 0;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
}
.player-roster-card:last-child { margin-bottom: 8px; }
.player-roster-card:active,
.player-roster-card:hover { background: var(--gray-50); }

.player-roster-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.player-roster-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.player-roster-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, rgba(43,198,179,0.12), rgba(0,176,116,0.12));
}

.player-roster-info {
  flex: 1;
  min-width: 0;
}

.player-roster-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-roster-props {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 1px;
}

.player-roster-arrow {
  color: var(--gray-300);
  font-size: 11px;
  flex-shrink: 0;
}

/* ── Send-to sheet ── */
.send-to-overlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.45);
}
.send-to-overlay.open { display: block; }
.send-to-sheet {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--white); border-radius: 18px 18px 0 0;
  padding: 0 0 env(safe-area-inset-bottom,16px);
  transform: translateY(100%); transition: transform .28s cubic-bezier(.32,1,.23,1);
  max-height: 55vh; display: flex; flex-direction: column;
}
.send-to-overlay.open .send-to-sheet { transform: translateY(0); }
.send-to-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px; border-bottom: 1px solid var(--gray-200);
}
.send-to-header h3 { font-size: 15px; font-weight: 700; color: var(--black); margin: 0; }
.send-to-close {
  background: none; border: none; font-size: 20px; color: var(--gray-500);
  cursor: pointer; line-height: 1; padding: 0;
}
.send-to-search-wrap {
  padding: 10px 16px 6px; border-bottom: 1px solid var(--gray-200);
}
.send-to-search {
  width: 100%; padding: 8px 14px; border-radius: 20px;
  border: none; background: var(--gray-100); font-size: 14px;
  outline: none; color: var(--black);
}
.send-to-users {
  display: flex; gap: 16px; overflow-x: auto; padding: 14px 16px 16px;
  scrollbar-width: none; flex: 1;
}
.send-to-users::-webkit-scrollbar { display: none; }
.send-to-user {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; flex-shrink: 0; width: 64px;
}
.send-to-avatar-wrap { position: relative; }
.send-to-avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gray-200);
}
.send-to-sent-badge {
  display: none; position: absolute; inset: 0; border-radius: 50%;
  background: var(--brand); align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
}
.send-to-user.sent .send-to-avatar { opacity: 0.4; }
.send-to-user.sent .send-to-sent-badge { display: flex; }
.send-to-name {
  font-size: 11px; color: var(--gray-600); text-align: center;
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.send-to-empty {
  padding: 20px 16px; font-size: 14px; color: var(--gray-500); text-align: center;
}
.send-to-user.selected .send-to-avatar { opacity: 0.4; }
.send-to-user.selected .send-to-sent-badge { display: flex; }
.send-to-footer {
  padding: 10px 16px 4px; border-top: 1px solid var(--gray-200);
}
.send-to-btn {
  width: 100%; padding: 13px; border-radius: 12px;
  background: var(--brand); color: #fff; border: none;
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.send-to-btn:disabled { opacity: 0.6; }

/* ── Futures Tab ── */
.gl-market {
  margin: 8px 8px 0;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
}
.gl-market:last-child { margin-bottom: 8px; }
.gl-market-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  background: var(--gray-50);
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.gl-market[data-open="true"] .gl-market-header { border-bottom: 1px solid var(--gray-200); }
.gl-market-icon { font-size: 17px; line-height: 1; flex-shrink: 0; }
.gl-market-label { font-weight: 700; font-size: 14px; color: var(--gray-800); flex: 1; }
.gl-chevron { font-size: 11px; color: var(--gray-400); flex-shrink: 0; transition: transform 0.2s; }
.gl-market[data-open="true"] .gl-chevron { transform: rotate(180deg); }
.gl-outcomes { display: none; flex-direction: column; }
.gl-market[data-open="true"] .gl-outcomes { display: flex; }
.gl-outcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
}
.gl-outcome:last-child { border-bottom: none; }
.gl-outcome.gl-addable:active { background: var(--gray-50); }
.gl-outcome.gl-locked { pointer-events: none; opacity: 0.5; cursor: default; }
.gl-outcome.added { background: rgba(43,198,179,0.07); }
.gl-outcome.pick-conflict { opacity: 0.4; pointer-events: none; }
.gl-outcome-left { flex: 1; min-width: 0; }
.gl-outcome-name { font-size: 14px; font-weight: 600; color: var(--gray-800); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-outcome-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.gl-outcome-odds { font-size: 17px; font-weight: 800; color: var(--brand); }
.gl-add-icon { font-size: 13px; color: var(--gray-400); width: 20px; text-align: center; }
.gl-outcome.added .gl-add-icon { color: var(--brand); }

.futures-list { padding: 0 0 80px; }
.futures-market {
  margin: 12px 16px;
  background: var(--card-bg);
  border-radius: 14px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
}
.futures-market-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  background: var(--gray-50);
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.futures-market[data-open="true"] .futures-market-header {
  border-bottom: 1px solid var(--gray-200);
}
.futures-market-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.futures-market-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--gray-800);
  flex: 1;
}
.futures-market-count {
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 500;
  flex-shrink: 0;
}
.futures-chevron {
  font-size: 11px;
  color: var(--gray-400);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.futures-market[data-open="true"] .futures-chevron {
  transform: rotate(180deg);
}
.futures-outcomes {
  display: none;
  flex-direction: column;
}
.futures-market[data-open="true"] .futures-outcomes {
  display: flex;
}
.futures-outcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
}
.futures-outcome:last-child { border-bottom: none; }
.futures-outcome:active { background: var(--gray-100); }
.futures-outcome-left { flex: 1; min-width: 0; }
.futures-outcome-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-800);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.futures-outcome-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: 10px;
}
.futures-outcome-odds {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  min-width: 44px;
  text-align: right;
}
.futures-add-icon {
  font-size: 13px;
  color: var(--gray-400);
  width: 20px;
  text-align: center;
}

/* ── Leaderboard ── */
.topbar-lb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--gray-600);
  font-size: 18px;
  text-decoration: none;
  transition: color 0.15s;
}
.topbar-lb-btn:hover { color: var(--brand); }

.lb-page {
  padding: 0 0 80px;
}
.lb-hero {
  padding: 20px 18px 12px;
  text-align: center;
}
.lb-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--gray-900);
}
.lb-hero-sub {
  font-size: 13px;
  color: var(--gray-400);
  margin-top: 2px;
}
.lb-hero-qualify {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 4px;
}
.lb-tabs {
  display: flex;
  border-bottom: 2px solid var(--gray-100);
  margin: 0 0 4px;
}
.lb-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-400);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.lb-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.lb-panel { display: block; }
.lb-panel-hidden { display: none; }

.lb-list {
  display: flex;
  flex-direction: column;
}
.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--gray-100);
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
}
.lb-row:active { background: var(--gray-50); }
.lb-row.lb-me {
  background: rgba(43,198,179,0.15);
  border-left: 3px solid var(--brand);
}
.lb-rank {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-400);
  min-width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.lb-rank.lb-gold   { color: #f5a623; font-size: 20px; }
.lb-rank.lb-silver { color: #a0aab4; font-size: 20px; }
.lb-rank.lb-bronze { color: #c07a3e; font-size: 20px; }

.lb-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.lb-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.lb-username {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-you {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: rgba(43,198,179,0.12);
  border-radius: 6px;
  padding: 1px 6px;
  vertical-align: middle;
}
.lb-badge {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.lb-score {
  font-size: 16px;
  font-weight: 800;
  color: var(--gray-700);
  flex-shrink: 0;
}
.lb-score.hot     { color: var(--green); }
.lb-score.neutral { color: var(--brand); }
.lb-score.cold    { color: var(--red); }

.lb-my-rank-note {
  text-align: center;
  font-size: 13px;
  color: var(--gray-400);
  padding: 16px 24px;
  border-top: 1px solid var(--gray-100);
}

/* ─────────────────── ACHIEVEMENTS ─────────────────── */

.ach-page {
  padding: 0 18px 80px;
}
.ach-hero {
  padding: 24px 0 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ach-hero-username {
  font-size: 17px;
  font-weight: 800;
  color: var(--black);
  margin-top: 4px;
}
.ach-hero-sub {
  font-size: 12px;
  color: var(--gray-400);
}
.ach-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ach-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 14px 16px;
}
.ach-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  color: #fff;
}
.ach-icon-slipscore   { background: linear-gradient(135deg, var(--brand), #1aa89a); }
.ach-icon-accuracy    { background: linear-gradient(135deg, #f5a623, #e08e00); }
.ach-icon-streak      { background: linear-gradient(135deg, #ff5a5f, #d9363e); }
.ach-icon-leaderboard { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.ach-info {
  flex: 1;
  min-width: 0;
}
.ach-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
}
.ach-sub {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}
.ach-date {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}
.ach-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--black);
  flex-shrink: 0;
}
.ach-value-empty {
  color: var(--gray-400);
  font-size: 18px;
}
.lb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  color: var(--gray-400);
}
.lb-empty i { font-size: 36px; }
.lb-empty p { text-align: center; font-size: 14px; line-height: 1.5; margin: 0; }

/* ─────────────────── CREATOR / SUBSCRIPTION STYLES ─────────────────── */

.creator-badge-inline {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--brand), #1aa89a);
  color: #fff;
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.lb-wreath-badge {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 37px;
  overflow: hidden;
  cursor: default;
}
.lb-wreath-img {
  width: 52px;
  height: 52px;
  display: block;
  margin-top: -5px;
}
.lb-rank-text {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  color: #5a3800;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(255,220,80,.6);
  pointer-events: none;
}
.lb-rank-1d { font-size: 14px; }
.lb-rank-2d { font-size: 10px; }
.lb-rank-3d { font-size: 8px; }
.lb-wreath-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
  white-space: nowrap;
}

.creator-tagline {
  font-size: 13px;
  color: var(--gray-500);
  margin: 4px 0 8px;
  font-style: italic;
}

.btn-creator-subscribe {
  background: linear-gradient(135deg, var(--brand), #1aa89a);
  color: #fff;
  border: none;
  border-radius: 22px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.btn-creator-subscribe:active { opacity: .82; }

.creator-settings-btn, .creator-become-btn {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* ── Profile swipeable tabs ── */
.profile-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--gray-100);
  background: var(--bg);
}
.ptab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-400);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.ptab-btn.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 700;
}

.profile-tabs-wrap {
  overflow: hidden;
  width: 100%;
}
.profile-tabs-container {
  display: flex;
  width: 100%;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.profile-tab-panel {
  width: 100%;
  flex-shrink: 0;
  min-height: 200px;
}

/* ── Creator gate (non-subscriber view) ── */
.creator-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 24px 40px;
  text-align: center;
}
.creator-gate-lock { font-size: 48px; margin-bottom: 12px; }
.creator-gate-msg {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.creator-gate-tagline {
  font-size: 14px;
  color: var(--gray-500);
  font-style: italic;
  max-width: 260px;
}

/* ── Creator dashboard (own exclusive tab) ── */
.creator-dashboard {
  padding: 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--gray-100);
}
.creator-dash-header {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray-400);
  margin-bottom: 12px;
}
.creator-dash-stats {
  display: flex;
  gap: 0;
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}
.creator-dash-stat {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  border-right: 1px solid var(--gray-100);
}
.creator-dash-stat:last-child { border-right: none; }
.creator-dash-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 4px;
}
.creator-dash-label {
  font-size: 11px;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.creator-dash-breakdown {
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 4px;
}
.cdb-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--gray-500);
  padding: 4px 0;
}
.cdb-row.deduct { color: var(--red); }
.cdb-row.net {
  font-weight: 700;
  color: var(--text);
  border-top: 1px solid var(--gray-100);
  margin-top: 4px;
  padding-top: 8px;
}

/* ── Creator setup page ── */
.creator-setup-page {
  padding: 0 0 80px;
}
.creator-setup-hero {
  text-align: center;
  padding: 32px 24px 20px;
}
.creator-setup-icon { font-size: 48px; margin-bottom: 8px; }
.creator-setup-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.creator-setup-sub { font-size: 14px; color: var(--gray-500); margin: 0; }

.creator-setup-form { padding: 0 16px; }

.price-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 6px;
}
.price-dollar, .price-mo {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-400);
}
.price-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  outline: none;
  width: 80px;
}

.price-breakdown {
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
}
.price-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--gray-500);
  padding: 3px 0;
}
.price-row.deduct { color: var(--red); }
.price-row.net {
  font-weight: 700;
  color: var(--brand);
  border-top: 1px solid var(--gray-100);
  margin-top: 6px;
  padding-top: 8px;
}

.creator-fee-note {
  font-size: 12px;
  color: var(--gray-400);
  background: var(--surface);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 12px 0 16px;
  line-height: 1.5;
}
.creator-fee-note i { margin-right: 4px; color: var(--brand); }

/* ── Exclusive toggle on new_play ── */
.exclusive-toggle-row {
  margin-bottom: 14px;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
}
.exclusive-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  gap: 12px;
}
.exclusive-toggle-text {
  display: flex;
  align-items: center;
  gap: 10px;
}
.exclusive-toggle-icon { font-size: 20px; }
.exclusive-switch { position: relative; flex-shrink: 0; }
.exclusive-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.exclusive-switch-track {
  display: block;
  width: 44px;
  height: 26px;
  background: var(--gray-200);
  border-radius: 13px;
  transition: background .2s;
  cursor: pointer;
  position: relative;
}
.exclusive-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.exclusive-switch input:checked ~ .exclusive-switch-track { background: var(--brand); }
.exclusive-switch input:checked ~ .exclusive-switch-track::after { transform: translateX(18px); }

/* ── Exclusive lock dot on play grid ── */
.pslip-exclusive-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 12px;
  line-height: 1;
}
.pslip-cell { position: relative; }

/* ── Creator setup step indicator ── */
.creator-setup-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px 32px 8px;
}
.creator-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.creator-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--gray-100);
  color: var(--gray-400);
}
.creator-step.done .creator-step-num {
  background: var(--brand);
  color: #fff;
}
.creator-step.active .creator-step-num {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(43,198,179,.25);
}
.creator-step-label {
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 500;
}
.creator-step.done .creator-step-label,
.creator-step.active .creator-step-label { color: var(--brand); }
.creator-step-divider {
  flex: 1;
  height: 2px;
  background: var(--brand);
  margin: 0 8px;
  margin-bottom: 20px;
  min-width: 40px;
}

/* ── Slipscore Info Page ── */
.slipscore-info-page {
  padding: 0 16px 32px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.slipscore-info-hero {
  text-align: center;
  padding: 28px 16px 24px;
  background: var(--brand);
  margin: 0 -16px 24px;
}
.slipscore-info-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
}
.slipscore-info-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin-top: 4px;
}
.slipscore-info-section {
  margin-bottom: 28px;
}
.slipscore-info-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
}
.slipscore-info-section p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--gray-700);
  margin-bottom: 10px;
}
.slipscore-info-tiers {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.slipscore-tier-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.slipscore-tier-badge {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  object-fit: contain;
  margin-top: 1px;
}
.slipscore-tier-content {
  flex: 1;
  min-width: 0;
}
.slipscore-tier-range {
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.slipscore-tier-rank {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.slipscore-tier-desc {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
  margin-top: 4px;
}

.error-page-body {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
}
.error-page-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: 20px;
  opacity: 0.9;
}
.error-page-body h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 8px;
}
.error-page-body p {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 320px;
}
.error-page-home {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 24px;
  text-decoration: none;
}