:root {
      --bg: #ffffff;
      --card: #ffffff;
      --text: #111111;
      --muted: #6b7280;
      --border: #e5e7eb;
      --shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: "Manrope", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      overflow-x: hidden;
    }

    .app {
      width: 100%;
      max-width: 420px;
      margin: 0 auto;
      min-height: 100vh;
      background: var(--bg);
      position: relative;
      overflow-x: hidden;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: #18181b;
      border-bottom: 1px solid #27272a;
      color: #ffffff;
      padding-top: env(safe-area-inset-top, 0px);
    }

    .header-title {
      padding: 10px 14px 8px;
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      letter-spacing: 0.2px;
      overflow: hidden;
      max-height: 60px;
      opacity: 1;
      will-change: max-height, opacity;
      transition: max-height .22s ease, padding-top .22s ease, padding-bottom .22s ease, opacity .18s ease;
    }

    header.header-compact .header-title {
      max-height: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      opacity: 0 !important;
    }

    .auth-btn {
      font-size: 12px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 20px;
      border: none;
      cursor: pointer;
      background: #22c55e;
      color: #fff;
      white-space: nowrap;
    }

    .auth-btn:hover {
      background: #16a34a;
    }

    .auth-user {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #111;
    }

    .auth-user img {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      object-fit: cover;
    }

    .auth-user button {
      font-size: 11px;
      background: transparent;
      border: 1px solid rgba(0,0,0,0.2);
      color: rgba(0,0,0,0.5);
      border-radius: 12px;
      padding: 2px 8px;
      cursor: pointer;
    }

    .auth-user button:hover {
      border-color: #ef4444;
      color: #ef4444;
    }

    /* Modal */
    .auth-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      z-index: 9000;
      align-items: center;
      justify-content: center;
    }

    .auth-overlay.open {
      display: flex;
    }

    .auth-modal {
      background: #1f2937;
      border-radius: 16px;
      padding: 28px 24px;
      width: 320px;
      max-width: 92vw;
      color: #f9fafb;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    .auth-modal h2 {
      margin: 0 0 20px;
      font-size: 18px;
      font-weight: 700;
      text-align: center;
    }

    .auth-modal .close-btn {
      position: absolute;
      top: 12px;
      right: 16px;
      background: none;
      border: none;
      font-size: 20px;
      color: #9ca3af;
      cursor: pointer;
    }

    .auth-modal-inner {
      position: relative;
    }

    .auth-provider-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 12px 16px;
      border-radius: 10px;
      border: 1px solid #374151;
      background: #111827;
      color: #f9fafb;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 10px;
      transition: border-color .15s, background .15s;
    }

    .auth-provider-btn:hover {
      border-color: #22c55e;
      background: #1a2e1a;
    }

    .auth-provider-btn svg {
      flex-shrink: 0;
    }


    .auth-divider {
      text-align: center;
      color: #6b7280;
      font-size: 12px;
      margin: 14px 0;
      position: relative;
    }

    .auth-divider::before,
    .auth-divider::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 40%;
      height: 1px;
      background: #374151;
    }

    .auth-divider::before {
      left: 0;
    }

    .auth-divider::after {
      right: 0;
    }

    .auth-input {
      width: 100%;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid #374151;
      background: #111827;
      color: #f9fafb;
      font-size: 14px;
      margin-bottom: 10px;
      box-sizing: border-box;
      outline: none;
    }

    .auth-input:focus {
      border-color: #22c55e;
    }

    .auth-submit-btn {
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      border: none;
      background: #22c55e;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 4px;
    }

    .auth-submit-btn:hover {
      background: #16a34a;
    }

    .auth-submit-btn:disabled {
      background: #374151;
      cursor: not-allowed;
    }

    .auth-error {
      color: #f87171;
      font-size: 12px;
      text-align: center;
      min-height: 18px;
      margin-bottom: 6px;
    }

    .auth-switch {
      display: flex;
      gap: 0;
      margin-bottom: 20px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      overflow: hidden;
    }

    .auth-tab {
      flex: 1;
      text-align: center;
      padding: 9px 0;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      color: #6b7280;
      background: #f9fafb;
      transition: background 0.15s, color 0.15s;
    }

    .auth-tab.active {
      background: #22c55e;
      color: #fff;
    }

    .auth-tab:hover:not(.active) {
      background: #f0fdf4;
      color: #22c55e;
    }

    /* ── TOP BAR  ── */
    .top-bar {
      display: flex;
      align-items: center;
      overflow: visible;
      padding: 7px 8px 7px 10px;
      gap: 8px;
    }

    /* Grup kutusu — Bugün/Yarın ve MBS1/MBS2/MBS3 için ayrı çerçeve */
    .tab-group {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      background: #27272a;
      border: 1px solid #3f3f46;
      border-radius: 8px;
      overflow: hidden;
    }

    /* Tab butonu — grup içindeki butonlar */
    .tab-btn {
      flex: 0 0 auto;
      padding: 5px 13px;
      border: none;
      border-right: 1px solid #3f3f46;
      border-radius: 0;
      background: transparent;
      color: #ffffff;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      line-height: 1.4;
      transition: background .15s, color .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .tab-btn:last-child { border-right: none; }
    .tab-btn:hover { color: #ffffff; background: rgba(255,255,255,0.08); }
    .tab-btn.active {
      background: #22c55e;
      color: #ffffff;
    }
    .tab-btn:disabled { opacity: 0.35; cursor: not-allowed; }

    /* İkon buton — arama vb. */
    .tab-icon-btn {
      flex: 0 0 auto;
      padding: 6px 8px;
      border: none;
      border-radius: 8px;
      background: #27272a;
      border: 1px solid #3f3f46;
      color: #ffffff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s, color .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .tab-icon-btn:hover { color: #ffffff; background: #3f3f46; }
    .tab-icon-btn.active {
      background: #22c55e;
      border-color: #22c55e;
      color: #ffffff;
    }

    .fav-toggle-btn.fav-on {
      background: rgba(234,179,8,0.15) !important;
      color: #eab308 !important;
    }
    .fav-toggle-btn.fav-on svg {
      fill: #eab308;
      stroke: #eab308;
    }

    /* Arama satırı (ikona basınca açılır) */
    .search-row {
      display: none;
      align-items: center;
      background: #27272a;
      border-top: 1px solid #3f3f46;
    }
    .search-row.open { display: flex; }

    .search-input {
      flex: 1;
      padding: 8px 14px;
      border: none;
      background: transparent;
      color: #f4f4f5;
      font-size: 13px;
      outline: none;
    }
    .search-input::placeholder { color: #52525b; }

    .search-close-btn {
      flex: 0 0 auto;
      background: transparent;
      border: none;
      color: #71717a;
      cursor: pointer;
      padding: 8px 14px;
      font-size: 16px;
      line-height: 1;
    }
    .search-close-btn:hover { color: #d4d4d8; }

    .filters { display: none; } /* eski filters satırı artık kullanılmıyor */

    .controls-row {
      display: flex;
      gap: 8px;
      padding: 8px 12px;
      align-items: center;
      flex-wrap: nowrap;
      background: #2a2a2a;
      color: #ffffff;
      font-family: "Manrope", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    .controls-row.fixed-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 420px;
      margin: 0 auto;
      z-index: 130;
      border-top: 1px solid #d1d5db;
      box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08);
      flex-direction: column;
      align-items: stretch;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .controls-top,
    .controls-bottom {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .controls-bottom {
      justify-content: flex-start;
    }

    .select-btn {
      flex: 1 1 auto;
      padding: 6px 10px;
      border-radius: 0;
      border: 1px solid #4b5563;
      background: #3a3a3a;
      font-size: 11px;
      cursor: pointer;
      color: #ffffff;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
    }

    .sort-toggle {
      flex: 0 0 auto;
      padding: 5px 8px;
      border-radius: 6px;
      border: 1px solid #71717a;
      background: transparent;
      font-size: 13px;
      cursor: pointer;
      min-width: 32px;
      color: #ffffff;
      transition: color .15s, background .15s;
    }
    .sort-toggle:hover { color: #ffffff; }
    .sort-toggle:disabled { opacity: 0.35; cursor: not-allowed; }

    .win-filter-toggle {
      flex: 0 0 auto;
      padding: 5px 10px;
      border-radius: 6px;
      border: 1px solid #71717a;
      background: transparent;
      font-size: 12px;
      cursor: pointer;
      min-width: 36px;
      color: #ffffff;
      transition: color .15s, background .15s, border-color .15s;
    }
    .win-filter-toggle:hover { color: #ffffff; }
    .win-filter-toggle:disabled { opacity: 0.35; cursor: not-allowed; }

    .win-filter-toggle.active {
      background: rgba(34,197,94,0.25);
      border-color: #22c55e;
      color: #4ade80;
      font-weight: 700;
    }

    .puan-sort-toggle {
      flex: 0 0 auto;
      padding: 5px 10px;
      border-radius: 6px;
      border: 1px solid #71717a;
      background: transparent;
      font-size: 12px;
      cursor: pointer;
      color: #ffffff;
      transition: color .15s, background .15s, border-color .15s;
    }
    .puan-sort-toggle:hover { color: #ffffff; }
    .puan-sort-toggle:disabled { opacity: 0.35; cursor: not-allowed; }
    .puan-sort-toggle.active {
      background: rgba(249,115,22,0.25);
      border-color: #f97316;
      color: #fb923c;
      font-weight: 700;
    }



    .filter-btn.live {
      background: #0f172a;
    }

    .filter-btn.live.active {
      background: #16a34a;
      color: #ffffff;
    }

    .counts {
      padding: 0;
      font-size: 10px;
      color: #ffffff;
      display: flex;
      gap: 6px;
      flex: 0 0 auto;
      white-space: nowrap;
      line-height: 1.1;
    }

    .counts.inline {
      padding: 0;
    }


    .matches-list {
      padding: 8px 0 80px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* Giriş zorunlu overlay */
    .login-wall {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 8000;
      background: rgba(0, 0, 0, 0.82);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      align-items: center;
      justify-content: center;
    }
    .login-wall.visible { display: flex; }
    .login-wall-card {
      background: #1f2937;
      border-radius: 20px;
      padding: 40px 28px 32px;
      width: 300px;
      max-width: 90vw;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    }
    .login-wall-icon { font-size: 52px; line-height: 1; }
    .login-wall-card h3 {
      margin: 0;
      font-size: 19px;
      font-weight: 800;
      color: #f9fafb;
    }
    .login-wall-card p {
      margin: 0;
      font-size: 13px;
      color: #9ca3af;
      line-height: 1.6;
    }
    .login-wall-btn {
      margin-top: 6px;
      width: 100%;
      padding: 13px;
      background: #22c55e;
      color: #fff;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
    }
    .login-wall-btn:hover { background: #16a34a; }

    .league-group {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .league-header {
      background: #3c4858;
      color: #ffffff;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }

    .league-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .league-flag {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #e5e7eb;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #111111;
      font-size: 10px;
      font-weight: 700;
      flex: 0 0 auto;
    }

    .league-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .league-time {
      font-size: 12px;
      font-weight: 700;
      text-transform: none;
    }

    .match-card {
      background: #e9edf2;
      border: 0;
      border-radius: 0;
      padding: 0 12px 6px;
      box-shadow: none;
      position: relative;
    }

    .match-league {
      background: #3c4858;
      color: #ffffff;
      margin: 0 -12px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.3px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .match-league-name {
      text-transform: uppercase;
    }

    .match-date {
      font-size: 11px;
      font-weight: 600;
      text-transform: none;
      opacity: 0.9;
    }

    .card-match-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 0;
    }

    .card-fav {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #6b7280;
      font-size: 12px;
      flex: 0 0 auto;
    }

    .card-teams {
      font-size: 15px;
      font-weight: 700;
      flex: 1;
      min-width: 0;
      color: inherit;
      text-decoration: none;
    }

    .card-score {
      min-width: 48px;
      text-align: right;
      font-weight: 700;
      font-size: 13px;
      color: var(--text);
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 1px;
    }

    .card-score.empty {
      color: #9ca3af;
      font-weight: 600;
    }

    .score-main {
      font-weight: 700;
      font-size: 13px;
    }

    .score-sub {
      font-weight: 500;
      font-size: 10px;
      opacity: 0.7;
    }

    .odds-row {
      display: flex;
      align-items: stretch;
      gap: 6px;
    }

    .time-mbs {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 3px;
      padding-top: 2px;
    }

    .time-box {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      padding: 2px 6px;
      font-weight: 700;
      font-size: 12px;
      min-width: 50px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.2;
    }
    .time-period {
      font-size: 9px;
      font-weight: 600;
      opacity: 0.85;
      white-space: nowrap;
    }
    .time-minute {
      font-size: 13px;
      font-weight: 700;
    }

    .time-box.live {
      background: #16a34a;
      border-color: #16a34a;
      color: #ffffff;
    }

    .mbs-pill {
      background: #111827;
      color: #ffffff;
      border-radius: 4px;
      padding: 3px 6px;
      font-size: 11px;
      min-width: 28px;
      text-align: center;
    }

    .mbs-pill.mbs-1 {
      background: #f97316;
    }

    .mbs-pill.mbs-2 {
      background: #ef4444;
    }

    .mbs-pill.mbs-3 {
      background: #3b82f6;
    }

    .odds-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      overflow-x: visible;
      flex: 1;
    }

    /* Çok sütunlu oran grid'leri */
    .odds-grid-2col,
    .odds-grid-3col,
    .odds-grid-4col,
    .odds-grid-5col {
      display: grid;
      gap: 4px;
      flex: 1;
    }
    .odds-grid-2col { grid-template-columns: repeat(2, 1fr); }
    .odds-grid-3col { grid-template-columns: repeat(3, 1fr); }
    .odds-grid-4col { grid-template-columns: repeat(4, 1fr); }
    .odds-grid-5col { grid-template-columns: repeat(5, 1fr); }
    .odds-grid-2col .odds-box,
    .odds-grid-3col .odds-box,
    .odds-grid-4col .odds-box,
    .odds-grid-5col .odds-box {
      min-width: 0;
    }

    .odds-box {
      border: 1px solid #d1d5db;
      border-radius: 5px;
      text-align: center;
      background: #f3f4f6;
      flex: 0 0 auto;
      min-width: 54px;
      overflow: hidden;
      line-height: 1;
    }




    .tahmin-strip {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 5px 10px 6px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .ts-header {
      font-size: 10px;
      color: #52525b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-right: 4px;
    }
    .ts-item {
      display: flex;
      align-items: baseline;
      gap: 5px;
    }
    .ts-label { font-size: 11px; color: #71717a; }
    .ts-skor  { font-size: 13px; font-weight: 700; color: #d4d4d8; }

    .odds-box.win {
      background: rgba(22, 163, 74, 0.15);
      border-color: rgba(22, 163, 74, 0.5);
      color: #16a34a;
      font-weight: 700;
    }

    .odds-box.coupon-selected {
      border-color: #22c55e;
      background: rgba(34,197,94,0.18);
      outline: 2px solid #22c55e;
      outline-offset: -1px;
    }
    .odds-box.coupon-selected .odds-label {
      background: #166534;
    }
    .odds-box.coupon-selected .odds-value {
      color: #166534;
      font-weight: 800;
    }

    .odds-label {
      font-size: 11px;
      color: #ffffff;
      margin-bottom: 0;
      background: #2f3a48;
      padding: 2px 4px;
      font-weight: 600;
    }

    .odds-value {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      padding: 4px 4px;
      background: #eef2f7;
    }

    .odds-box.win .odds-value {
      color: #16a34a;
      background: transparent;
    }

    .odds-ilk {
      font-size: 10px;
      font-weight: 500;
      line-height: 1.2;
      padding: 1px 2px 2px;
      opacity: 0.85;
    }
    .odds-ilk.up   { color: #16a34a; }
    .odds-ilk.down { color: #dc2626; }
    .odds-ilk.same { display: none; }

    /* === TAHMİN SKOR WIDGET === */
    .tahmin-grid {
      display: flex;
      gap: 6px;
      align-items: stretch;
      flex: 1;
      min-width: 0;
    }
    .tahmin-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid #d1d5db;
      border-radius: 5px;
      background: #f3f4f6;
      flex: 1;
      min-width: 62px;
      overflow: hidden;
      line-height: 1;
    }
    .tahmin-box.hit {
      background: rgba(22, 163, 74, 0.13);
      border-color: rgba(22, 163, 74, 0.5);
    }
    .tahmin-box.miss {
      background: rgba(220, 38, 38, 0.08);
      border-color: rgba(220, 38, 38, 0.35);
    }
    .tahmin-label {
      font-size: 10px;
      font-weight: 600;
      color: #fff;
      background: #2f3a48;
      width: 100%;
      text-align: center;
      padding: 2px 4px;
    }
    .tahmin-box.hit .tahmin-label  { background: #15803d; }
    .tahmin-box.miss .tahmin-label { background: #b91c1c; }
    .tahmin-skor {
      font-size: 14px;
      font-weight: 800;
      padding: 4px 4px 1px;
      color: var(--text);
    }
    .tahmin-box.hit  .tahmin-skor { color: #16a34a; }
    .tahmin-box.miss .tahmin-skor { color: #dc2626; }
    .tahmin-puan {
      font-size: 10px;
      font-weight: 600;
      color: #6b7280;
      padding: 1px 4px 3px;
    }
    .tahmin-box.hit  .tahmin-puan { color: #16a34a; }
    .tahmin-box.miss .tahmin-puan { color: #dc2626; }
    .tahmin-actual {
      font-size: 10px;
      color: #374151;
      font-weight: 700;
      padding: 0 4px 3px;
      border-top: 1px dashed #d1d5db;
      width: 100%;
      text-align: center;
      margin-top: 1px;
    }
    /* === / TAHMİN SKOR WIDGET === */

    .odds-past {
      display: flex;
      flex-direction: column;
      gap: 1px;
      padding: 2px 3px;
      background: #f9fafb;
      border-top: 1px solid #e5e7eb;
    }

    .odds-past-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2px;
      font-size: 9px;
      line-height: 1.2;
      color: #6b7280;
    }

    .odds-past-label {
      font-weight: 600;
      color: #9ca3af;
      flex-shrink: 0;
    }

    .odds-past-val {
      font-weight: 700;
      color: #374151;
    }

    .odds-past-val.high {
      color: #16a34a;
    }

    .odds-past-val.low {
      color: #dc2626;
    }

    /* ── Kompozit bar grafik ── */
    .odds-bar {
      height: 5px;
      background: #e5e7eb;
      border-radius: 3px;
      margin: 4px 0 2px;
      display: flex;
      overflow: hidden;
    }
    .odds-bar-h2h {
      height: 100%;
      background: #16a34a;
    }
    .odds-bar-son {
      height: 100%;
      background: #f97316;
    }

    .odds-bar-label {
      display: flex;
      gap: 3px;
      margin-top: 3px;
    }
    .odds-bar-label span {
      flex: 1;
      text-align: center;
      font-size: 9px;
      font-weight: 700;
      padding: 1px 0;
      border-radius: 3px;
    }
    .odds-bar-label-h2h {
      background: rgba(22,163,74,0.15);
      color: #16a34a;
    }
    .odds-bar-label-son {
      background: rgba(249,115,22,0.15);
      color: #f97316;
    }
    .odds-bar-label-total {
      background: rgba(161,161,170,0.15);
      color: #a1a1aa;
    }

    /* ── Oran Skor (kutu içi) ── */
    .odds-score {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 3px 4px 2px;
      background: #f0f4f8;
      border-top: 1px solid #e5e7eb;
      gap: 2px;
    }
    .odds-score-val {
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
    }
    .odds-score-val.s-high { color: #16a34a; }
    .odds-score-val.s-mid  { color: #d97706; }
    .odds-score-val.s-low  { color: #dc2626; }
    .odds-score-bar {
      width: 100%;
      height: 3px;
      background: #dde3ea;
      border-radius: 2px;
      overflow: hidden;
    }
    .odds-score-bar-fill {
      height: 100%;
      border-radius: 2px;
    }
    .odds-score-bar-fill.s-high { background: #16a34a; }
    .odds-score-bar-fill.s-mid  { background: #d97706; }
    .odds-score-bar-fill.s-low  { background: #dc2626; }

    .no-data {
      text-align: center;
      color: var(--muted);
      padding: 30px 0;
    }

    /* ── BET TYPE BAR ── */
    .bet-bar {
      background: #18181b;
      border-bottom: 1px solid #27272a;
    }

    /* Scroll wrapper — taşarsa scroll, sığarsa ortala */
    .bet-type-scroll,
    .bet-sub-scroll {
      display: flex;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      border-bottom: 1px solid #27272a;
      padding: 7px 12px;
    }
    .bet-type-scroll::-webkit-scrollbar,
    .bet-sub-scroll::-webkit-scrollbar { display: none; }
    .bet-type-scroll > .tab-group,
    .bet-sub-scroll > .tab-group { margin: 0 auto; }

    .active-bet-name {
      width: 100%;
      display: block;
      text-align: center;
      font-size: 11px;
      color: #7dd3fc;
      padding: 3px 0 0;
      min-height: 16px;
      letter-spacing: 0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;
    }

    /* tab-group içindeki butonlar — bet-type için */
    .bet-type-btn {
      flex: 0 0 auto;
      padding: 5px 13px;
      border: none;
      border-right: 1px solid #3f3f46;
      border-radius: 0;
      background: transparent;
      color: #ffffff;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: color .15s, background .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .bet-type-btn:last-child { border-right: none; }
    .bet-type-btn:hover:not(.active) { color: #ffffff; background: rgba(255,255,255,0.08); }
    .bet-type-btn.active {
      background: rgba(56,189,248,0.25);
      color: #7dd3fc;
    }

    /* bet-sub için */
    .bet-sub-type-btn {
      flex: 0 0 auto;
      padding: 5px 13px;
      border: none;
      border-right: 1px solid #3f3f46;
      border-radius: 0;
      background: transparent;
      color: #ffffff;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s, color .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .bet-sub-type-btn:last-child { border-right: none; }
    .bet-sub-type-btn:hover:not(.active) { color: #ffffff; background: rgba(255,255,255,0.08); }
    .bet-sub-type-btn.active {
      background: rgba(167,139,250,0.25);
      color: #c4b5fd;
    }

    /* ── Sayaç öğeleri ── */
    .counts-grid {
      flex: 1;
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, auto);
      gap: 3px 0;
    }
    .cnt-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2px 4px;
      border-right: 1px solid #52525b;
    }
    .cnt-cell:nth-child(3),
    .cnt-cell:nth-child(6) { border-right: none; }
    .cnt-label {
      font-size: 9px;
      color: #ffffff;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }
    .cnt-val {
      font-size: 12px;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.3;
    }
    .cnt-val-win  { color: #4ade80; }
    .cnt-val-rate { color: #4ade80; }
    .cnt-val-odds { color: #38bdf8; }
    .cnt-cell-win.inactive .cnt-val  { color: #52525b; }
    .cnt-cell-win.inactive .cnt-label { color: #52525b; }
    .cnt-cell-odds.inactive .cnt-val  { color: #52525b; }
    .cnt-cell-odds.inactive .cnt-label { color: #52525b; }

    /* ── Tarih seçici modal ── */
    .date-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 500;
      align-items: flex-end;
      justify-content: center;
    }
    .date-modal-overlay.open { display: flex; }

    .date-modal-sheet {
      background: #18181b;
      border-top: 1px solid #3f3f46;
      border-radius: 16px 16px 0 0;
      padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .date-modal-title {
      font-size: 14px;
      font-weight: 700;
      color: #d4d4d8;
      text-align: center;
    }

    .date-modal-input {
      width: 100%;
      padding: 11px 14px;
      background: #27272a;
      border: 1px solid #3f3f46;
      border-radius: 10px;
      color: #f4f4f5;
      font-size: 15px;
      outline: none;
      box-sizing: border-box;
      color-scheme: dark;
    }
    .date-modal-input:focus { border-color: #71717a; }

    .date-modal-actions {
      display: flex;
      gap: 10px;
    }

    .date-modal-cancel {
      flex: 1;
      padding: 11px;
      border: 1px solid #3f3f46;
      border-radius: 10px;
      background: transparent;
      color: #71717a;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .date-modal-cancel:hover { color: #d4d4d8; border-color: #71717a; }

    .date-modal-confirm {
      flex: 1;
      padding: 11px;
      border: none;
      border-radius: 10px;
      background: #3f3f46;
      color: #f4f4f5;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }
    .date-modal-confirm:hover { background: #52525b; }

    /* ── Aksiyon satırı (sırala / filtrele / sayaçlar) ── */
    .bet-actions-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      overflow: hidden;
    }

    /* ── BOTTOM NAV ── */
    .bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      max-width: 420px;
      margin: 0 auto;
      background: #18181b;
      border-top: 1px solid #27272a;
      overflow: visible;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      padding: 8px 0;
      padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
      z-index: 120;
    }

    .nav-item {
      border: 0;
      border-radius: 0;
      padding: 2px 2px;
      text-align: center;
      font-size: 10px;
      font-weight: 500;
      color: rgba(255,255,255,0.55);
      background: transparent;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      line-height: 1;
      transition: color .15s;
      -webkit-tap-highlight-color: transparent;
      text-decoration: none;
    }
    a.nav-item, a.nav-item:link, a.nav-item:visited { color: rgba(255,255,255,0.55); text-decoration: none; }
    .nav-item svg { display: block; color: rgba(255,255,255,0.55); }
    .nav-item .nav-label { font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.55); }
    .nav-item.active { color: #ffffff !important; }
    .nav-item.active svg { color: #ffffff !important; }
    .nav-item.active .nav-label { color: #ffffff !important; }
    a.nav-item.active, a.nav-item:visited.active { color: #ffffff !important; }
    .nav-item:hover:not(.active) { color: rgba(255,255,255,0.8); }

    /* ── Kupon FAB (sol buton) ── */
    .nav-coupon-fab {
      border: 0;
      background: transparent;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .nav-coupon-fab-inner {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #22c55e;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(34,197,94,0.5);
      transition: transform .15s, box-shadow .15s;
    }
    .nav-coupon-fab:active .nav-coupon-fab-inner {
      transform: scale(0.93);
      box-shadow: 0 1px 6px rgba(34,197,94,0.35);
    }
    .nav-coupon-fab-inner.has-bets {
      background: #16a34a;
    }
    .fab-count {
      font-size: 10px;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
    .fab-odds {
      font-size: 9px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      line-height: 1;
      margin-top: 2px;
    }

    /* ── Kupona ekli maç kartı ── */
    .match-card.coupon-in {
      outline: 2.5px solid #22c55e;
      outline-offset: -2px;
      background: #e6f7ec;
    }

    /* ── Odds kutusu — kupon seçili ── */
    .coupon-odds-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      border-radius: 6px;
      border: 1.5px solid #3f3f46;
      background: #27272a;
      cursor: pointer;
      gap: 2px;
      min-width: 52px;
      transition: border-color .15s, background .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .coupon-odds-btn:active { opacity: 0.75; }
    .coupon-odds-btn.selected {
      border-color: #22c55e;
      background: rgba(34,197,94,0.15);
    }
    .coupon-odds-btn .cob-label {
      font-size: 10px;
      color: #a1a1aa;
      line-height: 1;
    }
    .coupon-odds-btn.selected .cob-label { color: #86efac; }
    .coupon-odds-btn .cob-val {
      font-size: 14px;
      font-weight: 700;
      color: #d4d4d8;
      line-height: 1;
    }
    .coupon-odds-btn.selected .cob-val { color: #22c55e; }
    .popup-odds-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px 0 4px;
    }
    .popup-odds-type-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding-bottom: 8px;
    }
    .popup-odds-tab {
      padding: 4px 10px;
      border-radius: 12px;
      border: 1px solid #3f3f46;
      background: #27272a;
      color: #a1a1aa;
      font-size: 11px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .popup-odds-tab.active {
      border-color: #22c55e;
      background: rgba(34,197,94,0.12);
      color: #22c55e;
    }

    /* ── Kupon Popup ── */
    .kupon-popup {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: none;
    }
    .kupon-popup.open { display: block; }
    .kupon-popup-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.55);
    }
    .kupon-popup-sheet {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      max-width: 420px;
      margin: 0 auto;
      background: #18181b;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .kupon-popup-header {
      padding: 16px 16px 12px;
      border-bottom: 1px solid #27272a;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    .kupon-popup-title {
      font-size: 15px;
      font-weight: 700;
      color: #d4d4d8;
    }
    .kupon-popup-close {
      border: 0;
      background: #27272a;
      color: #a1a1aa;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .kupon-popup-body {
      overflow-y: auto;
      flex: 1;
      padding: 12px 16px;
    }
    .kupon-bet-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid #27272a;
    }
    .kupon-bet-row:last-child { border-bottom: none; }
    .kupon-bet-teams {
      flex: 1;
      font-size: 12px;
      color: #d4d4d8;
      font-weight: 600;
      line-height: 1.4;
    }
    .kupon-bet-type {
      font-size: 10px;
      color: #a1a1aa;
      font-weight: 400;
      display: block;
    }
    .kupon-bet-val {
      font-size: 14px;
      font-weight: 700;
      color: #22c55e;
      white-space: nowrap;
    }
    .kupon-bet-remove {
      border: 0;
      background: transparent;
      color: #52525b;
      cursor: pointer;
      font-size: 18px;
      padding: 0 2px;
      line-height: 1;
    }
    .kupon-bet-remove:hover { color: #ef4444; }
    .kupon-popup-footer {
      padding: 12px 16px;
      border-top: 1px solid #27272a;
      flex-shrink: 0;
    }
    .kupon-total-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .kupon-total-label {
      font-size: 13px;
      color: #a1a1aa;
    }
    .kupon-total-odds {
      font-size: 20px;
      font-weight: 800;
      color: #22c55e;
    }
    .kupon-action-btns {
      display: flex;
      gap: 8px;
    }
    .kupon-clear-btn {
      flex: 1;
      padding: 10px;
      border-radius: 8px;
      border: 1.5px solid #3f3f46;
      background: transparent;
      color: #a1a1aa;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    .kupon-save-btn {
      flex: 2;
      padding: 10px;
      border-radius: 8px;
      border: 0;
      background: #22c55e;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .kupon-save-btn:disabled {
      background: #3f3f46;
      color: #71717a;
      cursor: not-allowed;
    }
    .kupon-empty-msg {
      text-align: center;
      color: #52525b;
      font-size: 13px;
      padding: 32px 0;
    }

    /* ── Kuponlarım Sayfası ── */
    .kuponlarim-page {
      display: none;
      padding: 16px;
      padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
    .kuponlarim-page.active { display: block; }

    /* ── Öneri Sayfası ── */
    .oneriler-page {
      display: none;
      padding: 16px;
      padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
    .oneriler-page.active { display: block; }
    .oneriler-date-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }
    .oneriler-date-bar input[type="date"] {
      flex: 1;
      background: #27272a;
      border: 1px solid #3f3f46;
      border-radius: 8px;
      color: #d4d4d8;
      font-size: 14px;
      padding: 8px 10px;
      outline: none;
      -webkit-appearance: none;
      color-scheme: dark;
    }
    .oneriler-fetch-btn {
      background: #22c55e;
      border: 0;
      border-radius: 8px;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      padding: 8px 14px;
      cursor: pointer;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }
    .oneriler-fetch-btn:active { opacity: 0.8; }

    .oneri-range-bar {
      display: flex;
      gap: 6px;
      padding: 8px 12px 4px;
      flex-wrap: wrap;
    }
    .oneri-range-btn {
      font-size: 12px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 16px;
      border: 1px solid #3f3f46;
      background: #27272a;
      color: #a1a1aa;
      cursor: pointer;
      transition: background .15s, color .15s;
    }
    .oneri-range-btn:hover { background: #3f3f46; color: #e4e4e7; }
    .oneri-range-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }
    .oneri-range-best { color: #10b981; border-color: #10b981; font-weight: 600; }
    .oneri-range-best.active { background: #10b981; border-color: #10b981; color: #000; }
    .oneri-card {
      background: #27272a;
      border-radius: 10px;
      margin-bottom: 10px;
      padding: 11px 13px;
      position: relative;
    }
    .oneri-card-teams {
      font-size: 13px;
      font-weight: 700;
      color: #e4e4e7;
      margin-bottom: 3px;
    }
    .oneri-card-lig {
      font-size: 10px;
      color: #71717a;
      margin-bottom: 7px;
    }
    .oneri-card-body {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .oneri-card-market {
      font-size: 12px;
      font-weight: 700;
      color: #a1a1aa;
      background: #3f3f46;
      border-radius: 5px;
      padding: 3px 7px;
      flex-shrink: 0;
    }
    .oneri-card-ctx {
      font-size: 10px;
      color: #71717a;
      flex: 1;
    }
    .oneri-card-odds {
      font-size: 17px;
      font-weight: 800;
      color: #22c55e;
      flex-shrink: 0;
    }
    .oneri-card-stats {
      margin-top: 6px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .oneri-stat {
      font-size: 10px;
      color: #71717a;
      background: #3f3f46;
      border-radius: 4px;
      padding: 2px 6px;
    }
    .oneri-mbs-bar {
      display: flex;
      gap: 6px;
      padding: 6px 12px 4px;
    }
    .oneri-mbs-btn {
      padding: 4px 12px;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: transparent;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      color: #71717a;
      transition: all .15s;
    }
    .oneri-mbs-btn[data-mbs="1"].active { background: rgba(245,158,11,0.15); border-color: #f59e0b; color: #f59e0b; }
    .oneri-mbs-btn[data-mbs="2"].active { background: rgba(99,102,241,0.15); border-color: #6366f1; color: #818cf8; }
    .oneri-mbs-btn[data-mbs="3"].active { background: rgba(113,113,122,0.15); border-color: #71717a; color: #a1a1aa; }

    .oneri-mbs1 { border-left: 3px solid #f59e0b; }
    .oneri-mbs2 { border-left: 3px solid #6366f1; }
    .oneri-drift-up   { color: #10b981 !important; background: rgba(16,185,129,0.15) !important; }
    .oneri-drift-down { color: #f87171 !important; background: rgba(248,113,113,0.15) !important; }
    .oneri-drift-flat { color: #71717a !important; }
    .oneri-hit  { background: #14532d; border-left-color: #22c55e !important; }
    .oneri-card-score {
      font-size: 12px;
      font-weight: 700;
      color: #d4d4d8;
      padding: 4px 0 2px;
      letter-spacing: 0.02em;
    }
    .oneri-miss { background: #450a0a; border-left-color: #ef4444 !important; }
    .oneri-result-badge {
      position: absolute;
      top: 10px; right: 12px;
      font-size: 16px;
      font-weight: 800;
      line-height: 1;
    }
    .oneri-result-hit  { color: #22c55e; }
    .oneri-result-miss { color: #ef4444; }
    .oneri-result-actual {
      font-size: 10px;
      color: #71717a;
      background: #3f3f46;
      border-radius: 4px;
      padding: 2px 6px;
    }
    .oneri-hit  .oneri-result-actual { background: #166534; color: #bbf7d0; }
    .oneri-miss .oneri-result-actual { background: #7f1d1d; color: #fecaca; }
    .oneri-empty {
      text-align: center;
      color: #52525b;
      font-size: 14px;
      padding: 50px 0;
    }
    .kuponlarim-empty {
      text-align: center;
      color: #52525b;
      font-size: 14px;
      padding: 60px 0;
    }
    .saved-coupon-card.sc-won    { background: #27272a; border: 1px solid #27272a; }
    .saved-coupon-card.sc-lost   { background: #27272a; border: 1px solid #27272a; }
    .saved-coupon-card.sc-live   { background: #27272a; border: 1px solid #f59e0b; }
    .saved-coupon-card.sc-done   { background: #27272a; opacity: 0.75; }
    .sc-won  .saved-coupon-total { color: #e4e4e7; }
    .sc-lost .saved-coupon-total { color: #e4e4e7; }
    .saved-coupon-bet-row.bet-won  { border-left: 3px solid #22c55e; padding-left: 6px; }
    .saved-coupon-bet-row.bet-lost { border-left: 3px solid #ef4444; padding-left: 6px; }
    .saved-coupon-bet-row.bet-won  .saved-coupon-bet-teams { color: #d4d4d8; }
    .saved-coupon-bet-row.bet-lost .saved-coupon-bet-teams { color: #d4d4d8; }
    .sc-live-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 700;
      color: #f59e0b;
      background: rgba(245,158,11,0.12);
      border: 1px solid rgba(245,158,11,0.4);
      border-radius: 4px;
      padding: 2px 6px;
      letter-spacing: 0.04em;
    }
    .sc-live-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #f59e0b;
      animation: sc-pulse 1.2s ease-in-out infinite;
    }
    @keyframes sc-pulse {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:0.4; transform:scale(0.7); }
    }
    .sc-status-badge {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 700;
      border-radius: 4px;
      padding: 2px 6px;
      letter-spacing: 0.04em;
    }
    .sc-status-badge.won  { color: #ffffff; background: #16a34a; border: none; }
    .sc-status-badge.lost { color: #ffffff; background: #dc2626; border: none; }
    .sc-live-row-badge {
      display: inline-block;
      font-size: 9px;
      font-weight: 700;
      color: #f59e0b;
      margin-left: 5px;
      vertical-align: middle;
    }

    .saved-coupon-card {
      background: #27272a;
      border-radius: 10px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .saved-coupon-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .saved-coupon-date {
      font-size: 11px;
      color: #a1a1aa;
    }
    .saved-coupon-meta {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .saved-coupon-count {
      font-size: 11px;
      color: #a1a1aa;
    }
    .saved-coupon-total {
      font-size: 14px;
      font-weight: 800;
      color: #e4e4e7;
    }
    .saved-coupon-del {
      border: 0;
      background: transparent;
      color: #52525b;
      font-size: 18px;
      cursor: pointer;
      padding: 0 4px;
    }
    .saved-coupon-del:hover { color: #ef4444; }
    .saved-coupon-share {
      border: 1px solid #22c55e;
      background: transparent;
      color: #22c55e;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      padding: 3px 10px;
      border-radius: 12px;
      transition: background .15s, color .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .saved-coupon-share:hover  { background: #22c55e; color: #fff; }
    .saved-coupon-share.shared { border-color: #52525b; color: #52525b; cursor: default; }
    .saved-coupon-share.shared:hover { background: transparent; color: #52525b; }
    .saved-coupon-body {
      display: none;
      padding: 0 12px 10px;
      border-top: 1px solid #3f3f46;
    }
    .saved-coupon-body.open { display: block; }
    .saved-coupon-bet-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 7px 0;
      border-bottom: 1px solid #3f3f46;
      gap: 8px;
    }
    .saved-coupon-bet-row:last-child { border-bottom: none; }
    .sc-bet-score {
      display: block;
      margin-top: 4px;
      font-size: 12px;
      font-weight: 700;
      color: #a1a1aa;
      letter-spacing: 0.03em;
    }
    .bet-won .sc-bet-score { color: #4ade80; }
    .bet-lost .sc-bet-score { color: #f87171; }
    .sc-bet-score.live { color: #f97316; }
    .saved-coupon-bet-teams {
      flex: 1;
      font-size: 13px;
      color: #d4d4d8;
      line-height: 1.4;
    }
    .saved-coupon-bet-info {
      font-size: 11px;
      color: #a1a1aa;
    }
    .sc-bet-datetime {
      display: block;
      font-size: 11px;
      color: #71717a;
      margin-top: 2px;
    }
    .saved-coupon-bet-right {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
    }
    .saved-coupon-bet-odds {
      font-size: 13px;
      font-weight: 700;
      color: #e4e4e7;
    }
    .sc-result-icon {
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
    }
    .sc-result-icon.win  { color: #4ade80; }
    .sc-result-icon.loss { color: #f87171; }

    .modal {
      position: fixed;
      inset: 0;
      display: none;
      z-index: 200;
    }

    .modal.active {
      display: block;
    }

    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
    }

    .modal-sheet {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: #ffffff;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      padding: 16px;
      box-shadow: var(--shadow);
    }

    .modal-sheet h4 {
      margin: 0 0 12px;
      font-size: 16px;
    }

    .modal-row {
      margin-bottom: 10px;
    }

    .modal-row label {
      display: block;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .modal-row select {
      width: 100%;
      padding: 10px 12px;
      border: 0;
      border-radius: 0;
      background: #ffffff;
      font-size: 14px;
    }

    .modal-actions {
      display: flex;
      gap: 8px;
      margin-top: 6px;
    }

    .modal-actions button {
      flex: 1;
      padding: 10px 12px;
      border-radius: 0;
      border: 0;
      background: #ffffff;
      font-weight: 600;
      cursor: pointer;
    }

    .modal-actions .primary {
      background: #111111;
      color: #ffffff;
      border-color: #111111;
    }

    .info-list {
      margin: 0 0 12px;
      padding-left: 18px;
      font-size: 12px;
      line-height: 1.45;
      color: #111111;
    }

    .info-list li+li {
      margin-top: 6px;
    }

    .info-note {
      font-size: 12px;
      line-height: 1.45;
      color: #111111;
      margin: 10px 0 0;
    }

    .match-popup {
      position: fixed;
      inset: 0;
      z-index: 300;
      pointer-events: none;
    }

    .match-popup.active {
      pointer-events: all;
    }

    .match-popup-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      opacity: 0;
      transition: opacity 0.28s ease;
    }

    .match-popup.active .match-popup-backdrop {
      opacity: 1;
    }

    .match-popup-card {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: #ffffff;
      color: #111111;
      width: 100%;
      display: flex;
      flex-direction: column;
      max-width: 420px;
      margin: 0 auto;
      border-radius: 0;
      box-shadow: var(--shadow);
      padding: 0 0 16px;
      overflow-y: auto;
      overflow-x: hidden;
      transform: translateX(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    .match-popup.active .match-popup-card {
      transform: translateX(0);
    }

    .popup-toolbar {
      position: sticky;
      top: 0;
      z-index: 10;
      background: #2a2a2a;
      color: #ffffff;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      padding-top: calc(10px + env(safe-area-inset-top, 0px));
    }

    .popup-back-btn {
      background: none;
      border: none;
      color: #ffffff;
      cursor: pointer;
      padding: 4px 6px 4px 0;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }

    .popup-title {
      font-size: 14px;
      font-weight: 700;
      color: #ffffff;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .popup-content {
      padding: 14px 16px 16px;
    }

    .popup-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .popup-section {
      border: 0;
      border-radius: 0;
      background: #ffffff;
      overflow: hidden;
      margin-bottom: 10px;
    }

    .popup-section-title {
      font-size: 12px;
      font-weight: 700;
      text-align: left;
      color: #ffffff;
      background: #2f3640;
      padding: 7px 10px;
      margin: 0;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .recent-filters {
      display: flex;
      gap: 6px;
    }

    .filter-group {
      display: inline-flex;
      border-radius: 4px;
      overflow: hidden;
    }

    .filter-group .recent-filter-btn {
      background: #4b5563;
      color: #ffffff;
      border: 0;
      padding: 3px 8px;
      font-size: 10px;
      cursor: pointer;
      border-radius: 0;
    }

    .filter-group .recent-filter-btn+.recent-filter-btn {
      border-left: 1px solid #5a6778;
    }

    .filter-group .recent-filter-btn.active {
      background: #ffffff;
      color: #111111;
      font-weight: 700;
    }

    .popup-section-body {
      padding: 0;
    }

    .popup-stats td,
    .popup-stats th {
      font-size: 14.3px;
      border: 0;
      border-bottom: 1px solid #e5e7eb;
      padding: 6px;
    }

    .popup-stats th {
      background: #ffffff;
      color: #111111;
    }

    .popup-stats .value-cell {
      font-weight: 700;
      color: #111111;
    }

    .popup-stats .value-cell.win {
      color: #16a34a;
    }

    .popup-side {
      background: #f3f4f6;
      border-radius: 6px;
      padding: 10px;
      text-align: center;
    }

    .popup-label {
      font-size: 11px;
      color: #6b7280;
      margin-bottom: 6px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .popup-value {
      font-size: 18px;
      font-weight: 800;
      color: #111111;
    }

    .popup-value.win {
      color: #16a34a;
    }

    .h2h-list {
      display: flex;
      flex-direction: column;
      border: 0;
      border-radius: 0;
      overflow: hidden;
    }

    .h2h-row {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 122px;
      gap: 8px;
      align-items: center;
      padding: 8px 6px;
      border-bottom: 1px solid #e5e7eb;
      background: #ffffff;
    }

    .h2h-row:last-child {
      border-bottom: 0;
    }

    .h2h-meta {
      font-size: 10px;
      color: #1f7a7a;
      line-height: 1.1;
      border-right: 1px solid #e5e7eb;
      padding-right: 6px;
      min-width: 0;
    }

    .h2h-meta .date {
      font-weight: 700;
      color: #1f7a7a;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .h2h-meta .year {
      font-weight: 600;
      font-size: 9px;
      opacity: 0.85;
    }

    .h2h-meta .league {
      font-size: 9px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .h2h-line {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 6px;
      align-items: center;
      font-size: 12px;
      font-weight: 500;
      color: #111111;
      border-right: 1px solid #e5e7eb;
      padding-right: 6px;
      min-width: 0;
    }

    .h2h-line .team.home {
      text-align: right;
    }

    .h2h-line .team.away {
      text-align: left;
    }

    .h2h-line .team {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .h2h-score {
      font-weight: 800;
      min-width: 46px;
      text-align: center;
      color: #111827;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .h2h-score .iy {
      font-size: 10px;
      font-weight: 600;
      color: #6b7280;
    }

    .h2h-score .ms {
      font-size: 13px;
      font-weight: 800;
      color: #111827;
    }

    .h2h-line .team.win {
      color: #16a34a;
      font-weight: 800;
    }

    .h2h-odds {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 10px;
      align-items: stretch;
      width: 100%;
      min-width: 122px;
    }

    .h2h-odds-row {
      display: grid;
      grid-template-columns: 26px repeat(3, minmax(18px, 1fr));
      gap: 2px;
      align-items: center;
    }

    .h2h-odds-row.au {
      grid-template-columns: 26px repeat(2, minmax(18px, 1fr));
    }

    .h2h-odds-label {
      text-align: center;
      color: #6b7280;
      font-weight: 700;
      border: 1px solid #e5e7eb;
      padding: 2px 2px;
    }

    .h2h-odd {
      text-align: center;
      background: #f3f4f6;
      border: 1px solid #e5e7eb;
      border-radius: 0;
      padding: 2px 2px;
      font-weight: 700;
      color: #111827;
    }

    .h2h-odd.win {
      background: rgba(22, 163, 74, 0.15);
      border-color: rgba(22, 163, 74, 0.5);
      color: #16a34a;
    }

    .common-container {
      margin-top: 12px;
      background: #ffffff;
      border: 0;
      border-radius: 0;
      overflow: hidden;
    }

    .common-container h4 {
      margin: 0;
      font-size: 12px;
      text-align: left;
      color: #ffffff;
      letter-spacing: 0.3px;
      background: #2f3640;
      padding: 7px 10px;
      text-transform: uppercase;
    }

    .common-wrapper {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding: 8px 0 0;
    }

    .common-card {
      border: 0;
      border-radius: 0;
      background: #ffffff;
      min-width: 180px;
    }

    .common-header {
      background: #2c3e50;
      color: #ffffff;
      padding: 8px;
      text-align: center;
      font-weight: 700;
      font-size: 11px;
    }

    .common-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 10px;
    }

    .common-table td,
    .common-table th {
      padding: 6px;
      text-align: center;
      border-bottom: 1px solid #e5e7eb;
    }

    .label-col {
      text-align: left;
      background: #f3f4f6;
      color: #6b7280;
      width: 65px;
      font-weight: 700;
    }

    .popup-stats .info-col {
      width: 22px;
      background: #f3f4f6;
      text-align: center;
    }

    .info-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      margin-left: 0;
      border-radius: 50%;
      border: 1px solid #9ca3af;
      background: #ffffff;
      color: #6b7280;
      font-size: 9px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      position: static;
      transform: none;
    }

    .info-btn:hover {
      border-color: #111827;
      color: #111827;
    }

    .info-popover {
      position: fixed;
      z-index: 350;
      max-width: 240px;
      background: #111827;
      color: #ffffff;
      font-size: 11px;
      line-height: 1.35;
      padding: 8px 10px;
      border-radius: 6px;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
      display: none;
    }

    .info-popover.active {
      display: block;
    }

    .info-popover::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      background: #111827;
      transform: rotate(45deg);
      left: var(--arrow-left, 12px);
      top: var(--arrow-top, 100%);
    }

    /* ── Popup match header ── */
    .pmh { background:#fff; border-bottom:1px solid #e5e7eb; padding:12px 14px; }
    .pmh-lig { font-size:10px; color:#6b7280; margin-bottom:8px; display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
    .pmh-lig-badge { background:#f3f4f6; border:1px solid #e5e7eb; border-radius:3px; padding:1px 5px; font-weight:600; }
    .pmh-teams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
    .pmh-team { font-size:13px; font-weight:700; line-height:1.2; }
    .pmh-team.home { text-align:right; }
    .pmh-team.away { text-align:left; }
    .pmh-score { text-align:center; min-width:64px; }
    .pmh-score-ms { font-size:24px; font-weight:800; color:#111; line-height:1; }
    .pmh-score-iy { font-size:11px; color:#6b7280; margin-top:2px; }
    .pmh-score-time { font-size:18px; font-weight:700; color:#1e90ff; }
    .pmh-badge { display:inline-block; padding:2px 7px; border-radius:10px; font-size:10px; font-weight:700; margin-top:3px; }
    .pmh-badge.finished { background:#f3f4f6; color:#6b7280; }
    .pmh-badge.live { background:#fee2e2; color:#dc2626; animation:pmh-pulse 1.5s infinite; }
    .pmh-badge.upcoming { background:#eff6ff; color:#2563eb; }
    .pmh-live-score { color:#dc2626 !important; }
    .pmh-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; font-size:11px; color:#6b7280; }
    .pmh-meta strong { color:#374151; }
    @keyframes pmh-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
    /* Odds in popup */
    .pop-odds-card { border:1px solid #e5e7eb; border-radius:5px; overflow:hidden; min-width:120px; flex:1; }
    .pop-odds-head { background:#f3f4f6; padding:5px 8px; font-size:10px; font-weight:700; color:#374151; border-bottom:1px solid #e5e7eb; }
    .pop-odds-items { display:flex; }
    .pop-odds-item { flex:1; text-align:center; padding:6px 3px; border-right:1px solid #f0f0f0; }
    .pop-odds-item:last-child { border-right:none; }
    .pop-odds-label { font-size:9px; color:#9ca3af; }
    .pop-odds-val { font-size:14px; font-weight:800; color:#111; }

    .win-text {
      color: #16a34a;
      font-weight: 700;
    }

    .loss-text {
      color: #ef4444;
      font-weight: 700;
    }

    .draw-text {
      color: #f59e0b;
      font-weight: 700;
    }

    .common-empty {
      text-align: center;
      color: #6b7280;
      padding: 10px 0;
      font-size: 11px;
    }

    .heatmap-container {
      padding: 10px 10px 10px 45px;
      background: #ffffff;
    }

    .heatmap-row-container {
      position: relative;
      margin-bottom: 8px;
    }

    .heatmap {
      position: relative;
      height: 20px;
      background-color: #f3f4f6;
      border-radius: 3px;
    }

    .heatmap-stats {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      font-size: 11px;
      font-weight: 700;
      color: #1f2937;
      pointer-events: none;
    }

    .fh-goals,
    .sh-goals {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .fh-goals {
      left: 23.7%;
      /* (47.4 / 2) */
      transform: translate(-50%, -50%);
    }

    .sh-goals {
      left: 73.7%;
      /* 47.4 + (52.6 / 2) */
      transform: translate(-50%, -50%);
    }

    .heatmap-label {
      position: absolute;
      left: -40px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 10px;
      font-weight: 700;
      width: 35px;
      text-align: right;
      color: #374151;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .heatmap-timeline {
      display: flex;
      justify-content: space-between;
      font-size: 9px;
      color: #6b7280;
      padding: 0 2px;
      margin-top: 4px;
    }

    .form-bubbles {
      display: flex;
      gap: 2px;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      padding: 2px 0;
    }

    .form-bubble {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 700;
      color: #ffffff;
    }

    .form-bubble.win {
      background: #16a34a;
    }

    .form-bubble.draw {
      background: #9ca3af;
    }

    .form-bubble.loss {
      background: #ef4444;
    }

    /* ── Responsive küçük ekran ── */

    /* 400px ve altı — çoğu orta segment telefon (360-400px arası) */
    @media (max-width: 400px) {
      .top-bar { padding: 6px 6px 6px 8px; gap: 5px; }
      .tab-btn { padding: 5px 9px; font-size: 11px; }
      .tab-icon-btn { padding: 5px 7px; }
      .card-teams { font-size: 14px; }
      .odds-box { min-width: 50px; }
      .header-title { font-size: 14px; padding: 8px 12px 7px; }
      .bet-type-btn { padding: 5px 10px; font-size: 11px; }
      .bet-sub-type-btn { padding: 5px 10px; font-size: 10px; }
    }

    /* 380px ve altı — küçük telefon (iPhone SE, Galaxy A03s vb.) */
    @media (max-width: 380px) {
      .top-bar { padding: 5px 5px 5px 7px; gap: 4px; }
      .tab-btn { padding: 5px 7px; font-size: 11px; }
      .tab-icon-btn { padding: 5px 6px; }
      .card-teams { font-size: 13px; }
      .odds-box { min-width: 46px; }
      .odds-value { font-size: 12px; }
      .counts { font-size: 9px; }
      .header-title { font-size: 13px; }
      .time-box { min-width: 44px; font-size: 11px; }
      .controls-row { padding: 6px 8px; gap: 5px; }
      .select-btn { font-size: 10px; padding: 5px 8px; }

      /* bet-bar counts küçük ekran */
      .bet-actions-row { padding: 4px 6px; gap: 4px; }
      .cnt-val { font-size: 11px; }
      .cnt-label { font-size: 8px; letter-spacing: 0.2px; }
      .cnt-cell { padding: 2px 2px; }
      .sort-toggle, .puan-sort-toggle, .win-filter-toggle {
        padding: 5px 6px; font-size: 11px; min-width: 0;
      }

      /* alt nav küçük ekran */
      .nav-item { padding: 2px 1px; }
      .nav-item .nav-label { font-size: 9px; }
      .nav-coupon-fab-inner { width: 36px; height: 36px; }
      .fab-count { font-size: 9px; }
      .fab-odds { font-size: 8px; }
    }

    /* 340px ve altı — çok küçük ekran */
    @media (max-width: 340px) {
      .top-bar { flex-wrap: wrap; gap: 4px; }
      .tab-btn { padding: 4px 6px; font-size: 10px; }
      .search-input { flex: 1 1 100%; }
      .odds-box { min-width: 40px; }
      .odds-value { font-size: 11px; }
      .card-teams { font-size: 12px; }
      .time-box { min-width: 38px; padding: 2px 4px; font-size: 10px; }
    }


    /* ── Hamburger Sheet Menü ─────────────────────────────────────────── */
    .menu-sheet-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 200;
    }
    .menu-sheet-backdrop.open { display: block; }

    .menu-sheet {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      width: 100%;
      background: #1c1c1e;
      border-radius: 20px 20px 0 0;
      box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.09);
      z-index: 201;
      transform: translateY(100%);
      transition: transform 0.38s cubic-bezier(0.32,0.72,0,1);
      max-height: 82vh;
      display: flex;
      flex-direction: column;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .menu-sheet.open { transform: translateY(0); }

    .menu-sheet-handle {
      width: 38px; height: 4px;
      background: rgba(255,255,255,0.22);
      border-radius: 2px;
      margin: 10px auto 6px;
      flex-shrink: 0;
    }
    .menu-sheet-inner {
      overflow-y: auto;
      flex: 1;
    }

    .menu-sheet-item {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 13px 20px;
      color: rgba(255,255,255,0.85);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.2px;
      cursor: pointer;
      border: none;
      border-bottom: 0.5px solid rgba(255,255,255,0.09);
      background: none;
      width: 100%;
      text-align: left;
      transition: background .12s;
      -webkit-tap-highlight-color: transparent;
      text-decoration: none;
    }
    .menu-sheet-item:last-child { border-bottom: none; }
    .menu-sheet-item:active { background: rgba(255,255,255,0.06); }
    .menu-sheet-item.active { color: #30d158; }
    .menu-sheet-item svg { flex-shrink: 0; opacity: 0.7; }
    .menu-sheet-item.active svg { opacity: 1; }
    .menu-sheet-divider {
      height: 0;
      border-bottom: 0.5px solid rgba(255,255,255,0.05);
      margin: 0;
    }

    /* ── Topluluk / Leaderboard / Profil sayfa wrapper ──────────────── */
    .community-page-wrap          { display: none; }
    .community-page-wrap.active   { display: block; }

    /* ── Oran Listesi Sayfası ───────────────────────────────────────── */
    .oran-listesi-wrap { padding: 0 0 80px; background: #fff; min-height: 100vh; }
    .oran-listesi-header { padding: 12px 10px 8px; background: #fff; }
    .oran-listesi-header h2 { margin: 0 0 10px; color: #111; font-size: 17px; font-weight: 700; }
    .oran-listesi-date-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
    .oran-listesi-date-bar input[type=date] {
      flex: 1; background: #f4f4f5; border: 1px solid #d1d5db; border-radius: 8px;
      color: #111; padding: 7px 10px; font-size: 13px;
    }
    .oran-listesi-date-bar input[type=date]::-webkit-calendar-picker-indicator { filter: none; }
    .oran-listesi-fetch-btn {
      background: #22c55e; border: none; border-radius: 8px; color: #fff;
      font-size: 13px; font-weight: 600; padding: 7px 14px; cursor: pointer;
    }
    .oran-range-bar {
      display: flex; flex-wrap: wrap; gap: 5px; padding: 0 10px 8px; background: #fff;
    }
    .oran-range-btn {
      background: #f4f4f5; border: 1px solid #d1d5db; border-radius: 14px;
      color: #374151; font-size: 11px; padding: 3px 9px; cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .oran-range-btn.active { background: #22c55e; border-color: #22c55e; color: #fff; font-weight: 600; }
    .oran-listesi-table-wrap { width: 100%; overflow: hidden; }
    .oran-listesi-table {
      width: 100%; border-collapse: collapse; font-size: 11px;
      table-layout: auto; background: #fff;
    }
    .oran-listesi-table td {
      padding: 4px 3px; border-bottom: 1px solid #e5e7eb;
      color: #374151; white-space: nowrap;
    }
    .oran-listesi-table td.ol-teams {
      white-space: normal; word-break: break-word; width: 100%;
    }
    .oran-listesi-table td.ol-odds { font-weight: 700; color: #374151; }
    .oran-listesi-table tr.ol-win  td { color: #16a34a; }
    .oran-listesi-table tr.ol-lose td { color: #dc2626; }
    .oran-listesi-info { padding: 16px 10px; color: #6b7280; font-size: 13px; text-align: center; background: #fff; }
    .oran-listesi-count { padding: 4px 10px 4px; font-size: 11px; color: #6b7280; background: #fff; }
    .oran-mode-bar { display: flex; gap: 6px; padding: 0 10px 8px; background: #fff; }
    .oran-mode-btn {
      background: #f4f4f5; border: 1px solid #d1d5db; border-radius: 14px;
      color: #374151; font-size: 12px; font-weight: 600; padding: 4px 14px; cursor: pointer;
    }
    .oran-mode-btn.active { background: #374151; border-color: #374151; color: #fff; }
    .oran-score-range-bar { display: none; flex-wrap: wrap; gap: 5px; padding: 7px 12px; align-items: center; }
    .oran-score-range-bar.visible { display: flex; }
    .oran-srange-btn {
      background: #f4f4f5; border: 1px solid #d1d5db; border-radius: 14px;
      color: #374151; font-size: 11px; padding: 3px 9px; cursor: pointer;
    }
    .oran-srange-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; font-weight: 600; }
    .oran-score-oran-btn {
      margin-left: auto; background: #f4f4f5; border: 1px solid #d1d5db; border-radius: 14px;
      color: #374151; font-size: 11px; padding: 3px 10px; cursor: pointer;
    }
    .oran-score-oran-btn.active { background: #f59e0b; border-color: #f59e0b; color: #fff; font-weight: 600; }
    .oran-listesi-table td.ol-score { color: #6366f1; font-weight: 600; }
    .oran-listesi-table tr.ol-win  td.ol-score { color: #16a34a; }
    .oran-listesi-table tr.ol-lose td.ol-score { color: #dc2626; }

    /* ── Oran Başarı Sayfası ────────────────────────────────────────── */
    .ob-wrap { padding: 0 0 80px; background: #fff; min-height: 100vh; }
    .ob-header { padding: 12px 10px 8px; background: #fff; }
    .ob-header h2 { margin: 0 0 10px; color: #111; font-size: 17px; font-weight: 700; }
    .ob-sort-bar { display: flex; gap: 6px; padding: 0 10px 8px; background: #fff; }
    .ob-sort-btn {
      background: #f4f4f5; border: 1px solid #d1d5db; border-radius: 14px;
      color: #374151; font-size: 12px; font-weight: 600; padding: 4px 14px; cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .ob-sort-btn.active { background: #374151; border-color: #374151; color: #fff; }
    .ob-count { padding: 4px 10px; font-size: 11px; color: #6b7280; background: #fff; }
    .ob-table-wrap { width: 100%; overflow: hidden; }
    .ob-table {
      width: 100%; border-collapse: collapse; font-size: 13px;
      table-layout: fixed; background: #fff;
    }
    .ob-table thead tr { border-bottom: 1px solid #e5e7eb; }
    .ob-table th {
      padding: 8px 10px; color: #9ca3af; font-size: 11px; font-weight: 600;
      text-align: left; background: #fff;
    }
    .ob-th-c { text-align: center; }
    .ob-th-r { text-align: right; }
    .ob-table td {
      padding: 9px 10px; border-bottom: 1px solid #e5e7eb; color: #374151; white-space: nowrap;
    }
    .ob-td-oran { font-weight: 700; color: #111; font-size: 14px; width: 25%; }
    .ob-td-c { text-align: center; width: 20%; }
    .ob-td-r { text-align: right; width: 25%; }
    .ob-pct { font-weight: 700; font-size: 13px; }
    .ob-pct-high { color: #16a34a; }
    .ob-pct-mid  { color: #d97706; }
    .ob-pct-low  { color: #dc2626; }
    .ob-info { padding: 16px 10px; color: #6b7280; font-size: 13px; text-align: center; background: #fff; }

    /* ── Profil Sayfası ──────────────────────────────────────────────── */
    .profil-hero {
      background: linear-gradient(160deg, #18181b 0%, #1f2937 100%);
      padding: 24px 16px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid #27272a;
    }
    .profil-avatar {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: #374151;
      display: flex; align-items: center; justify-content: center;
      font-size: 26px; font-weight: 700; color: #9ca3af;
      overflow: hidden; flex-shrink: 0;
    }
    .profil-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .profil-name { font-size: 17px; font-weight: 700; color: #f4f4f5; }
    .profil-level-badge {
      font-size: 11px; font-weight: 700;
      padding: 3px 10px; border-radius: 20px;
      background: #1c1917; color: #fbbf24; border: 1px solid #78350f;
    }
    .profil-stats {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 0; border-top: 1px solid #27272a;
    }
    .profil-stat {
      padding: 12px 8px; text-align: center;
      border-right: 1px solid #e5e7eb;
    }
    .profil-stat:last-child { border-right: none; }
    .profil-stat-val { font-size: 16px; font-weight: 700; color: #111111; }
    .profil-stat-lbl { font-size: 10px; color: #6b7280; margin-top: 2px; }
    .profil-points-bar {
      padding: 12px 16px;
      border-bottom: 1px solid #e5e7eb;
    }
    .profil-points-bar-header {
      display: flex; justify-content: space-between;
      font-size: 11px; color: #6b7280; margin-bottom: 6px;
    }
    .profil-bar-track {
      height: 6px; background: #27272a; border-radius: 3px; overflow: hidden;
    }
    .profil-bar-fill {
      height: 100%; background: #fbbf24; border-radius: 3px;
      transition: width .4s ease;
    }
    .profil-section-title {
      font-size: 12px; font-weight: 700; color: #6b7280;
      padding: 12px 16px 6px; letter-spacing: 0.5px; text-transform: uppercase;
    }

    /* ── Topluluk Feed Sayfası ────────────────────────────────────────── */
    .topluluk-page { padding: 12px 12px calc(80px + env(safe-area-inset-bottom, 0px)); }

    .topluluk-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .topluluk-header h2 {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      color: #e4e4e7;
    }

    /* ── Feed Tabs ─────────────────────────────────────────────────────── */
    .feed-tabs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px 4px;
      gap: 6px;
      border-bottom: 1px solid #27272a;
      margin-bottom: 8px;
    }
    .feed-period-tabs, .feed-sort-tabs { display: flex; gap: 4px; }
    .feed-tab, .feed-sort-btn {
      background: none;
      border: 1px solid #3f3f46;
      border-radius: 20px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 600;
      color: #71717a;
      cursor: pointer;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
      transition: border-color .15s, color .15s, background .15s;
    }
    .feed-tab.active, .feed-sort-btn.active {
      border-color: #6366f1;
      color: #6366f1;
      background: rgba(99,102,241,.08);
    }

    /* ── Feed Card ──────────────────────────────────────────────────────── */
    .feed-card {
      background: #1c1c1f;
      border: 1px solid #27272a;
      border-radius: 10px;
      margin-bottom: 10px;
      overflow: hidden;
    }
    .feed-card.fc-won  { background: #1c1c1f; border-color: #27272a; }
    .feed-card.fc-lost { background: #1c1c1f; border-color: #27272a; }

    .feed-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px 0;
    }
    .feed-avatar {
      width: 30px; height: 30px;
      border-radius: 50%;
      background: #374151;
      object-fit: cover;
      flex-shrink: 0;
    }
    .feed-avatar-placeholder {
      width: 30px; height: 30px;
      border-radius: 50%;
      background: #374151;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; color: #9ca3af;
      flex-shrink: 0;
    }
    .feed-user-info { flex: 1; min-width: 0; }
    .feed-user-name {
      font-size: 12px; font-weight: 600; color: #e4e4e7;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .feed-user-meta { font-size: 10px; color: #6b7280; margin-top: 1px; }

    .feed-status-badge {
      font-size: 10px; font-weight: 700;
      padding: 3px 8px; border-radius: 4px; flex-shrink: 0;
    }
    .feed-status-badge.pending { background: #3f3f46; color: #a1a1aa; }
    .feed-status-badge.won     { background: #16a34a; color: #ffffff; }
    .feed-status-badge.lost    { background: #dc2626; color: #ffffff; }

    /* Summary bar — clickable to expand bets */
    .feed-toggle {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 12px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    .feed-toggle-left { font-size: 12px; color: #a1a1aa; font-weight: 600; }
    .feed-toggle-right { display: flex; align-items: center; gap: 8px; }
    .feed-odds-val {
      font-size: 14px; font-weight: 700; color: #e4e4e7;
    }
    .feed-expand-icon {
      font-size: 10px; color: #52525b;
      transition: transform .2s;
      display: inline-block;
    }
    .feed-card.open .feed-expand-icon { transform: rotate(180deg); }

    /* Expandable bet body */
    .feed-body {
      display: none;
      padding: 0 12px 4px;
      border-top: 1px solid #27272a;
    }
    .feed-card.open .feed-body { display: block; }
    .feed-bet-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 6px 0 6px 8px;
      border-bottom: 1px solid #27272a;
      gap: 6px;
      border-left: 3px solid transparent;
    }
    .feed-bet-row:last-child { border-bottom: none; }
    .feed-bet-row.bet-won  { border-left-color: #22c55e; }
    .feed-bet-row.bet-lost { border-left-color: #ef4444; }
    .feed-bet-left { flex: 1; min-width: 0; }
    .feed-bet-teams {
      font-size: 11px; color: #d4d4d8;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .feed-bet-info { font-size: 10px; color: #6b7280; margin-top: 1px; }
    .feed-bet-datetime { font-size: 10px; color: #52525b; margin-top: 2px; display: block; }
    .feed-bet-score { font-size: 10px; font-weight: 600; color: #a1a1aa; margin-left: 4px; }
    .feed-bet-score.live { color: #f97316; }
    .feed-bet-row.bet-won  .feed-bet-score { color: #4ade80; }
    .feed-bet-row.bet-lost .feed-bet-score { color: #f87171; }
    .feed-bet-live-badge { font-size: 9px; color: #f97316; font-weight: 700; margin-left: 4px; }
    .feed-bet-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .feed-bet-pick { font-size: 11px; font-weight: 600; color: #e4e4e7; white-space: nowrap; }
    .feed-bet-odds { font-size: 12px; font-weight: 700; color: #e4e4e7; white-space: nowrap; }
    .feed-bet-icon { font-size: 12px; font-weight: 700; }
    .feed-bet-icon.win  { color: #4ade80; }
    .feed-bet-icon.loss { color: #f87171; }

    /* Footer */
    .feed-card-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 6px 12px 8px;
      gap: 6px;
      border-top: 1px solid #27272a;
    }
    .feed-like-btn {
      display: flex; align-items: center; gap: 5px;
      background: none; border: 1px solid #374151;
      border-radius: 20px; padding: 4px 10px;
      color: #9ca3af; font-size: 12px; cursor: pointer;
      transition: border-color .15s, color .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .feed-like-btn.liked { border-color: #ef4444; color: #ef4444; }
    .feed-like-btn:active { transform: scale(0.95); }
    .feed-follow-btn {
      display: flex; align-items: center; gap: 4px;
      background: none; border: 1px solid #374151;
      border-radius: 20px; padding: 4px 10px;
      color: #9ca3af; font-size: 11px; font-weight: 600; cursor: pointer;
      transition: border-color .15s, color .15s;
      -webkit-tap-highlight-color: transparent; white-space: nowrap;
    }
    .feed-follow-btn:active { transform: scale(0.95); }
    .feed-follow-btn.following { border-color: #22c55e; color: #22c55e; }
    .feed-card-actions { display: flex; align-items: center; gap: 6px; }

    .feed-empty {
      text-align: center; padding: 48px 20px;
      color: #52525b; font-size: 13px;
    }
    .feed-loading {
      text-align: center; padding: 32px;
      color: #52525b; font-size: 13px;
    }

    /* ── Seriler Sayfası ─────────────────────────────────────────────── */
    .seriler-wrap { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

    .seriler-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 400px) { .seriler-grid { grid-template-columns: 1fr; } }

    .seri-section-header {
      font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
      color: #71717a; padding: 14px 2px 8px; margin-top: 4px;
    }
    .seri-section-header:first-child { padding-top: 2px; margin-top: 0; }
    .seri-card {
      background: #18181b;
      border: 1px solid #27272a;
      border-radius: 10px;
      overflow: hidden;
    }
    .seri-card-title {
      padding: 7px 10px 6px;
      background: #1f1f23;
      border-bottom: 1px solid #27272a;
      line-height: 1.3;
      display: flex;
      align-items: baseline;
      gap: 5px;
      flex-wrap: wrap;
    }
    .seri-title-type {
      font-size: 12px;
      font-weight: 700;
      color: #e4e4e7;
    }
    .seri-title-sep {
      font-size: 11px;
      color: #52525b;
      font-weight: 400;
    }
    .seri-title-opt {
      font-size: 11px;
      font-weight: 500;
      color: #a1a1aa;
    }
    .seri-empty {
      padding: 12px 10px;
      color: #3f3f46;
      font-size: 11px;
      text-align: center;
    }
    .seri-row {
      display: flex;
      align-items: center;
      padding: 5px 10px;
      border-bottom: 1px solid #27272a;
      gap: 6px;
    }
    .seri-row:last-child { border-bottom: none; }
    .seri-rank {
      color: #52525b;
      font-size: 10px;
      width: 12px;
      flex-shrink: 0;
    }
    .seri-team-wrap {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .seri-team {
      font-size: 11px;
      font-weight: 500;
      color: #e4e4e7;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .seri-league {
      font-size: 9px;
      color: #52525b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .seri-bülten {
      font-size: 9px;
      font-weight: 700;
      color: #f97316;
      flex-shrink: 0;
    }
    .seri-dots {
      display: flex;
      gap: 2px;
      flex-shrink: 0;
    }
    .seri-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #22c55e;
    }
    .seri-count {
      font-size: 12px;
      font-weight: 700;
      color: #22c55e;
      min-width: 20px;
      text-align: right;
      flex-shrink: 0;
    }

    /* ── Seri Takım Modal ───────────────────────────────────────────── */
    .seri-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.7);
      z-index: 9999; display: flex; align-items: flex-end; justify-content: center;
    }
    .seri-modal-box {
      background: #18181b; border: 1px solid #27272a; border-radius: 12px 12px 0 0;
      width: 100%; max-width: 520px; max-height: 80vh; display: flex; flex-direction: column;
    }
    .seri-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px; border-bottom: 1px solid #27272a; flex-shrink: 0;
      font-size: 14px; font-weight: 700; color: #e4e4e7;
    }
    .seri-modal-close {
      background: none; border: none; color: #71717a; font-size: 16px; cursor: pointer; padding: 0 4px;
    }
    #seri-modal-content { overflow-y: auto; padding: 8px 0; }
    .seri-match-row {
      display: grid; grid-template-columns: 62px 1fr auto; align-items: start;
      gap: 8px; padding: 8px 14px; border-bottom: 1px solid #27272a; font-size: 12px;
    }
    .seri-match-row:last-child { border-bottom: none; }
    .seri-match-date { color: #71717a; font-size: 11px; line-height: 1.5; padding-top: 1px; }
    .seri-match-time { color: #52525b; font-size: 10px; }
    .seri-match-teams { color: #d4d4d8; line-height: 1.4; }
    .seri-match-teams strong { color: #e4e4e7; }
    .seri-match-score {
      font-weight: 700; font-size: 13px; color: #e4e4e7;
      white-space: nowrap; text-align: right;
    }
    .seri-match-score.pending { color: #52525b; font-size: 11px; }
    .seri-team-click { cursor: pointer; text-decoration: underline; text-decoration-color: #3f3f46; }

    /* ── İstatistik Sayfası ──────────────────────────────────────────── */
    .istatistik-wrap { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

    .stat-card {
      background: #18181b;
      border: 1px solid #27272a;
      border-radius: 10px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .stat-card-title {
      padding: 8px 12px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #a1a1aa;
      background: #1f1f23;
      border-bottom: 1px solid #27272a;
    }
    .stat-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .stat-table {
      width: 100%;
      min-width: 420px;
      border-collapse: collapse;
      font-size: 11px;
    }
    .stat-table th, .stat-table td {
      text-align: center;
      padding: 4px 5px;
      border-bottom: 1px solid #27272a;
      white-space: nowrap;
    }
    .stat-table tr:last-child td { border-bottom: none; }
    .stat-table th {
      color: #71717a;
      font-weight: 500;
      font-size: 10px;
      background: #1c1c1f;
      letter-spacing: 0.3px;
    }
    .stat-table td:first-child {
      text-align: left;
      padding-left: 8px;
      font-weight: 600;
      color: #e4e4e7;
      font-size: 10px;
    }
    .stat-table th:first-child { text-align: left; padding-left: 8px; }
    .stat-val { color: #e4e4e7; }
    .stat-val-avg {
      color: #60a5fa;
      font-weight: 600;
    }
    .stat-val-null { color: #3f3f46; }

    .stat-played {
      display: block;
      font-size: 9px;
      color: #52525b;
      font-weight: 400;
      margin-top: 1px;
    }
    .stat-remaining {
      color: #f59e0b;
      margin-left: 2px;
      font-weight: 600;
    }
    .stat-sum-row td {
      border-top: 1px solid #3f3f46;
      font-weight: 700;
      font-size: 11px;
      color: #a1a1aa;
    }
    .stat-sum-row td:first-child { color: #52525b; }
    .stat-sum { }
    .stat-sum-ok   { color: #22c55e !important; }
    .stat-sum-warn { color: #f97316 !important; }

    /* ── HEADER CONTROLS SHARED ── */

    /* Compact date input inside header top-bar */
    .header-date-input {
      flex: 1; min-width: 0;
      background: #27272a; color: #e4e4e7;
      border: 1px solid #3f3f46; border-radius: 6px;
      padding: 5px 8px; font-size: 12px; line-height: 1;
      -webkit-appearance: none; outline: none;
      color-scheme: dark;
    }

    /* Connected button fix — reset individual border-radius when inside tab-group */
    .tab-group .tab-btn.oneri-range-btn,
    .tab-group .tab-btn.oneri-mbs-btn,
    .tab-group .tab-btn.oran-mode-btn,
    .tab-group .tab-btn.oran-range-btn,
    .tab-group .tab-btn.oran-srange-btn,
    .tab-group .tab-btn.oran-score-oran-btn,
    .tab-group .tab-btn.ob-sort-btn {
      border-radius: 0;
      border: none;
      border-right: 1px solid #3f3f46;
      background: transparent;
      color: #a1a1aa;
    }
    .tab-group .tab-btn.oneri-range-btn:last-child,
    .tab-group .tab-btn.oneri-mbs-btn:last-child,
    .tab-group .tab-btn.oran-mode-btn:last-child,
    .tab-group .tab-btn.oran-range-btn:last-child,
    .tab-group .tab-btn.oran-srange-btn:last-child,
    .tab-group .tab-btn.oran-score-oran-btn:last-child,
    .tab-group .tab-btn.ob-sort-btn:last-child { border-right: none; }

    /* Active state colors per type */
    .tab-group .tab-btn.oneri-range-btn.active                { background: #2563eb; color: #fff; }
    .tab-group .tab-btn.oneri-mbs-btn[data-mbs="1"].active   { background: rgba(245,158,11,0.2); color: #f59e0b; }
    .tab-group .tab-btn.oneri-mbs-btn[data-mbs="2"].active   { background: rgba(99,102,241,0.2); color: #818cf8; }
    .tab-group .tab-btn.oneri-mbs-btn[data-mbs="3"].active   { background: rgba(113,113,122,0.15); color: #a1a1aa; }
    .tab-group .tab-btn.oran-mode-btn.active                  { background: #3f3f46; color: #fff; }
    .tab-group .tab-btn.oran-range-btn.active                 { background: #22c55e; color: #fff; }
    .tab-group .tab-btn.oran-srange-btn.active                 { background: #7c3aed; color: #fff; }
    .tab-group .tab-btn.oran-score-oran-btn.active            { background: #3f3f46; color: #fff; }
    .tab-group .tab-btn.ob-sort-btn.active                    { background: #3f3f46; color: #fff; }

    /* Dark theme overrides for oran-listesi and ob page content (old CSS was light/white) */
    .oran-listesi-wrap, .ob-wrap { background: #18181b !important; min-height: 0; }
    .oran-listesi-count, .oran-listesi-info,
    .ob-count, .ob-info { background: #18181b !important; color: #71717a !important; }
    .oran-listesi-table-wrap, .ob-table-wrap { background: #18181b !important; }
    .oran-listesi-table, .ob-table { background: #18181b !important; color: #e4e4e7; }
    .oran-listesi-table th, .ob-table th { background: #1f1f23 !important; color: #a1a1aa !important; border-color: #27272a !important; }
    .oran-listesi-table td, .ob-table td { color: #e4e4e7 !important; border-color: #27272a !important; }
    .oran-listesi-table tr.ol-win td { color: #4ade80 !important; }
    .oran-listesi-table tr.ol-lose td { color: #f87171 !important; }
    .oran-listesi-table .ol-teams { color: #e4e4e7 !important; }
    .oran-listesi-table .ol-odds { color: #60a5fa !important; font-weight: 600; }
    .oran-listesi-table .ol-score { color: #a78bfa !important; }

    /* ── DESKTOP VIEW ── */
    @media (min-width: 600px) {
      /* Popup sağda görünme bug'ı: kapalıyken tamamen gizle */
      .match-popup:not(.active) .match-popup-card { display: none; }

      /* App'i ekran ortasında telefon çerçevesi gibi göster */
      body {
        background: #050508;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .app {
        box-shadow: 0 0 0 1px #2a2a2a, 0 20px 60px rgba(0,0,0,0.6);
        min-height: 100vh;
      }

      /* Bottom nav ekranın tam genişliğini kaplamaması için */
      .bottom-nav {
        box-shadow: 0 -1px 0 #27272a;
      }

      /* Desktop banner */
      .desktop-banner {
        display: flex !important;
      }
    }

    .desktop-banner {
      display: none;
      width: 100%;
      max-width: 420px;
      background: #1a1a2e;
      color: #9ca3af;
      text-align: center;
      padding: 9px 12px;
      font-size: 12px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-bottom: 1px solid #2a2a3e;
      position: sticky;
      top: 0;
      z-index: 9999;
    }

    .desktop-banner-close {
      background: none;
      border: none;
      color: #6b7280;
      cursor: pointer;
      padding: 0;
      font-size: 14px;
      line-height: 1;
      flex-shrink: 0;
    }

    .desktop-banner-close:hover { color: #9ca3af; }