/* ═══════════════════════════════════════════════════════════════════
   FLEXBET SPORTS — премиальный дизайн (app / digital bookmaker)
   Плоско, чётко, высокий контраст, без фоновых анимаций и glass-эффектов.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --sp-bg:#0c0e15;
  --sp-panel:#141722;
  --sp-panel-2:#171b28;
  --sp-line:#262a3a;
  --sp-line-2:#31374c;
  --sp-input:#0e1018;
  --sp-txt:#eef1f7;
  --sp-mut:#8b93a7;
  --sp-dim:#5a6274;
  --sp-blue:#0f7bff;
  --sp-blue-d:#0a63cc;
  --sp-cyan:#00b3c6;
  --sp-gold:#ffcc26;
  --sp-gold-d:#e6b800;
  --sp-green:#00d967;
  --sp-red:#ff5d6c;
  --sp-r:12px;
  --sp-r-sm:9px;
}

/* ── верхняя панель ──────────────────────────────────────────── */
.sp-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.sp-head-l{display:flex;flex-direction:column;gap:8px;min-width:0}
.sp-head-r{flex-shrink:0}
.sp-logo{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:900;letter-spacing:-.02em}
.sp-logo .ic{width:36px;height:36px;border-radius:10px;background:var(--sp-blue);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0}
.sp-logo b{color:var(--sp-gold)}
.sp-head-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.sp-hstat{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--sp-mut);background:var(--sp-panel);border:1px solid var(--sp-line);padding:5px 11px;border-radius:999px}
.sp-hstat b{color:#fff;font-weight:800}
.sp-title-badge{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#0f3668;background:var(--sp-gold);padding:6px 13px;border-radius:999px}

/* ── каркас: навигация │ линия │ купон ───────────────────────── */
.sp-shell{display:grid;grid-template-columns:218px minmax(0,1fr) 320px;gap:16px;align-items:start}

/* событие: рынки │ купон */
.sp-event-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.sp-event-shell .sp-rail{min-width:0}
.sp-event-shell .sp-slip{position:sticky;top:86px}

/* ─── левая навигация ─── */
.sp-nav{position:sticky;top:86px;display:flex;flex-direction:column;gap:2px;padding:10px;background:var(--sp-panel);border:1px solid var(--sp-line);border-radius:var(--sp-r)}
.sp-nav-i{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--sp-r-sm);color:var(--sp-mut);text-decoration:none;font-weight:700;font-size:13px;transition:background .12s,color .12s}
.sp-nav-i .n-ic{width:20px;text-align:center;font-size:15px}
.sp-nav-i:hover{color:#fff;background:var(--sp-panel-2)}
.sp-nav-i.active{color:#fff;background:rgba(15,123,255,.16)}
.sp-nav-i.active .n-ic{color:var(--sp-blue)}
.sp-nav-i .n-badge{margin-left:auto;font-size:11px;font-weight:800;color:var(--sp-mut);background:var(--sp-input);border:1px solid var(--sp-line);padding:2px 8px;border-radius:999px;min-width:24px;text-align:center}
.sp-nav-i .n-badge.live{color:#fff;background:var(--sp-red);border-color:var(--sp-red)}
.sp-nav-sep{height:1px;background:var(--sp-line);margin:8px 4px}
.sp-nav-title{font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--sp-dim);padding:8px 12px 4px}
.sp-nav-league{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px;color:var(--sp-mut);text-decoration:none;font-size:12.5px;font-weight:600;transition:background .12s,color .12s}
.sp-nav-league:before{content:'';width:6px;height:6px;border-radius:2px;background:var(--sp-line-2);flex-shrink:0;transition:background .12s}
.sp-nav-league:hover{color:#fff;background:var(--sp-panel-2)}
.sp-nav-league:hover:before{background:var(--sp-green)}

/* ─── центральная колонка ─── */
.sp-main{min-width:0}
.sp-toolbar{background:var(--sp-panel);border:1px solid var(--sp-line);border-radius:var(--sp-r);padding:12px;margin-bottom:10px}
.sp-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sp-search{display:flex;align-items:center;gap:8px;background:var(--sp-input);border:1px solid var(--sp-line);border-radius:var(--sp-r-sm);padding:10px 12px;transition:border-color .12s}
.sp-search:focus-within{border-color:var(--sp-blue)}
.sp-search i{opacity:.5}
.sp-search input{flex:1;background:none;border:none;color:#fff;font-size:14px;outline:none;min-width:0;font-family:inherit}
.sp-search input::placeholder{color:var(--sp-dim)}
.sp-select{background:var(--sp-input);border:1px solid var(--sp-line);border-radius:var(--sp-r-sm);color:#fff;padding:11px 12px;font-size:13px;font-weight:600;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b93a7' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;transition:border-color .12s}
.sp-select:focus{border-color:var(--sp-blue)}
.sp-select option,.sp-select optgroup{background:#161a2e;color:#fff}

.sp-filterbar{margin:2px 0 10px}
.sp-seg{display:inline-flex;gap:3px;background:var(--sp-input);border:1px solid var(--sp-line);padding:4px;border-radius:10px;flex-wrap:wrap}
.sp-seg .sp-chip{padding:8px 15px;border-radius:7px;border:none;background:transparent;color:var(--sp-mut);font-weight:700;font-size:12.5px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}
.sp-seg .sp-chip:hover{color:#fff}
.sp-seg .sp-chip.active{background:var(--sp-blue);color:#fff}

.sp-tabline{display:flex;gap:6px;margin-bottom:12px}
.sp-tab{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--sp-r-sm);border:1px solid var(--sp-line);background:var(--sp-panel);color:var(--sp-mut);font-weight:700;font-size:13px;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.sp-tab:hover{color:#fff;border-color:var(--sp-line-2)}
.sp-tab.active{background:var(--sp-blue);border-color:var(--sp-blue);color:#fff}
.sp-tab .cnt{font-size:11px;font-weight:800;background:rgba(0,0,0,.2);padding:2px 7px;border-radius:999px}
.sp-tab .cnt.live{background:var(--sp-red)}

/* ─── LIVE бейдж (статичный) ─── */
.sp-live-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,93,108,.12);color:var(--sp-red);font-weight:800;font-size:11px;padding:3px 9px;border-radius:6px;border:1px solid rgba(255,93,108,.4)}
.sp-live-dot{width:8px;height:8px;border-radius:2px;background:var(--sp-red)}

/* ─── заголовок лиги ─── */
.sp-league{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:900;color:var(--sp-mut);text-transform:uppercase;letter-spacing:.05em;margin:18px 2px 9px;padding-bottom:7px;border-bottom:1px solid var(--sp-line);scroll-margin-top:96px}
.sp-league .sp-ldate{color:var(--sp-dim);font-weight:700;font-size:11px;text-transform:none;letter-spacing:0}
.sp-league .sp-lline{flex:1;height:1px;background:var(--sp-line)}
.sp-league .sp-go{color:var(--sp-dim);font-size:14px;opacity:.6;text-decoration:none}
.sp-league .sp-go:hover{color:#fff;opacity:1}

/* ─── карточка матча ─── */
.sp-card{background:var(--sp-panel);border:1px solid var(--sp-line);border-radius:var(--sp-r);padding:12px 14px 13px;margin-bottom:9px;transition:border-color .12s;position:relative;cursor:pointer}
.sp-card:hover{border-color:var(--sp-line-2)}
.sp-card.live{border-left:3px solid var(--sp-red)}
/* кнопки-действия на карточке (не активируют переход) */
.sp-card .sp-odd,.sp-card .sp-expand,.sp-card .sp-expadd,.sp-card .sp-allmk,.sp-card .sp-match{pointer-events:auto}

/* плюс «в экспресс» (сверху справа) */
.sp-expadd{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;border:1px solid var(--sp-line-2);background:var(--sp-input);color:var(--sp-gold);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,border-color .12s,transform .12s;z-index:2}
.sp-expadd:hover{background:var(--sp-gold);border-color:var(--sp-gold);color:#2b1d00}
.sp-expadd:active{transform:scale(.92)}

/* кнопка «все исходы» (раскрытие) в ряду 1x2 */
.sp-expand{flex:0 0 38px;width:38px;min-width:38px;border-radius:var(--sp-r-sm);border:1px solid var(--sp-line-2);background:var(--sp-input);color:var(--sp-mut);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.sp-expand:hover{color:#fff;border-color:var(--sp-blue)}
.sp-expand.active{color:#fff;background:rgba(15,123,255,.16);border-color:var(--sp-blue)}
.sp-expand svg{transition:transform .18s}
.sp-expand.active svg{transform:rotate(180deg)}

/* доп. рынки (скрыты до раскрытия) */
.sp-extra{display:block;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .22s ease}
.sp-extra.open{max-height:600px;opacity:1}
.sp-extra .sp-ml:first-child{margin-top:12px}

/* переход в событие по клику на карточку */
.sp-match{position:relative;z-index:1}
.sp-team .name{pointer-events:none}
.sp-match{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.sp-team{display:flex;align-items:center;gap:9px;min-width:0}
.sp-team.right{justify-content:flex-end;flex-direction:row-reverse}
.sp-team img{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.sp-team .name{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-time{text-align:center;font-size:12px;color:var(--sp-mut);white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:3px}
.sp-time .sc{font-weight:900;color:#fff;font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sp-time .tt{font-size:11px;color:var(--sp-dim);font-variant-numeric:tabular-nums}

/* ─── рынки и коэффициенты (янтарный вс на тёмном) ─── */
.sp-mb{margin-top:10px}
.sp-ml{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--sp-dim);font-weight:900;margin:9px 0 5px}
.sp-mb .sp-odds{margin-top:4px}
.sp-allmk{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:12px;font-weight:700;color:var(--sp-blue);text-decoration:none}
.sp-allmk:hover{color:#fff}
.sp-allmk:before{content:'+';font-weight:900}

.sp-express{display:inline-flex;align-items:center;gap:8px;background:var(--sp-gold);border:1px solid var(--sp-gold);color:#2b1d00;border-radius:var(--sp-r-sm);padding:11px 16px;font-weight:900;font-size:13px;cursor:pointer;transition:filter .12s;white-space:nowrap}
.sp-express:hover{filter:brightness(1.06)}
.sp-express:disabled{opacity:.5;cursor:default}
.sp-express .geo{animation:spGeo .8s linear infinite;display:inline-block}
@keyframes spGeo{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.sp-odds{display:flex;gap:7px;margin-top:4px;flex-wrap:nowrap}
.sp-odd{flex:1;min-width:0;position:relative;text-align:center;padding:8px 4px 7px;border-radius:var(--sp-r-sm);border:1px solid rgba(255,204,38,.34);background:rgba(255,204,38,.07);cursor:pointer;transition:background .12s,border-color .12s;color:#fff;font-family:inherit}
.sp-odd:hover{background:rgba(255,204,38,.16);border-color:var(--sp-gold)}
.sp-odd.sel{background:var(--sp-gold);border-color:var(--sp-gold)}
.sp-odd .l{display:block;font-size:9px;opacity:.85;text-transform:uppercase;letter-spacing:.04em;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.sp-odd.sel .l{color:#2b1d00;opacity:.95}
.sp-odd .v{display:block;font-size:15.5px;font-weight:900;margin-top:1px;color:var(--sp-gold);font-variant-numeric:tabular-nums}
.sp-odd.sel .v{color:#2b1d00}
.sp-odd .mv{position:absolute;top:3px;right:6px;font-size:9px;font-weight:900}
.sp-odd .mv.up{color:var(--sp-green)}.sp-odd .mv.dn{color:var(--sp-red)}.sp-odd .mv.fl{color:transparent}
.sp-odd.locked{opacity:.35;pointer-events:none}

/* live-события: коэффициенты недоступны для ставки */
.sp-card.live .sp-odd{opacity:.4;pointer-events:none;cursor:not-allowed;border-color:var(--sp-line)}

/* движение коэффициента — короткая вспышка */
@keyframes spOdUp{0%{background:#0c8a4f}100%{background:rgba(255,204,38,.07)}}
@keyframes spOdDn{0%{background:#b31f31}100%{background:rgba(255,204,38,.07)}}
.sp-odd.flash-up{animation:spOdUp .7s}.sp-odd.flash-dn{animation:spOdDn .7s}

/* ─── правая колонка: купон ─── */
.sp-rail{position:sticky;top:86px}
.sp-slip{background:var(--sp-panel);border:1px solid var(--sp-line);border-radius:var(--sp-r);padding:15px}
.sp-sheet-grip{display:none}
.sp-slip #spSelList{max-height:190px;overflow-y:auto;overscroll-behavior:contain}
.sp-slip-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sp-slip-head h3{margin:0;font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.sp-slip-head h3 i{color:var(--sp-blue)}
.sp-clear{width:30px;height:30px;display:none;align-items:center;justify-content:center;border:1px solid var(--sp-line);background:var(--sp-input);color:var(--sp-red);border-radius:8px;cursor:pointer;font-size:13px;margin-left:auto;transition:background .12s}
.sp-clear:hover{background:var(--sp-panel-2)}
.sp-close{width:30px;height:30px;display:none;align-items:center;justify-content:center;border:1px solid var(--sp-line);background:var(--sp-input);color:#fff;border-radius:8px;cursor:pointer;font-size:13px;margin-left:auto;transition:background .12s}
.sp-close:hover{background:var(--sp-panel-2)}
.sp-slip-empty{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--sp-dim);font-size:12px;text-align:center;padding:18px 8px 10px;border:1px dashed var(--sp-line);border-radius:var(--sp-r-sm);margin-bottom:8px}
.sp-slip-empty i{font-size:20px;opacity:.5}
.sp-loginbox{text-align:center;padding:10px 6px}
.sp-loginbox>i{font-size:30px;color:var(--sp-dim);opacity:.6}
.sp-loginbox p{font-size:12.5px;color:var(--sp-mut);line-height:1.5;margin:10px 0 14px}
.sp-loginbox .sp-cta{display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;margin-bottom:8px}
.sp-sel{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--sp-input);border:1px solid var(--sp-line);border-radius:8px;padding:7px 9px;margin-bottom:7px;font-size:12px}
.sp-sel .xs{color:var(--sp-gold);font-weight:800;font-variant-numeric:tabular-nums}
.sp-sel .x{cursor:pointer;color:var(--sp-red);font-weight:800;padding:0 4px}
.sp-stake{display:flex;gap:8px;margin:11px 0}
.sp-stake input{flex:1;background:var(--sp-input);border:1px solid var(--sp-line-2);border-radius:var(--sp-r-sm);color:#fff;padding:11px 12px;font-size:15px;font-weight:700;outline:none;font-family:inherit}
.sp-stake input:focus{border-color:var(--sp-blue)}
.sp-qb{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.sp-qb button{flex:1;min-width:42px;padding:7px 0;border:1px solid var(--sp-line);background:var(--sp-input);color:var(--sp-mut);border-radius:8px;font-weight:700;font-size:12px;cursor:pointer;transition:border-color .12s,color .12s}
.sp-qb button:hover{color:#fff;border-color:var(--sp-blue)}
.sp-total{display:flex;justify-content:space-between;font-size:13px;margin:6px 0;opacity:.9}
.sp-total b{color:#fff}
.sp-pot-row{display:flex;align-items:center;justify-content:space-between;background:var(--sp-input);border:1px solid var(--sp-line);border-radius:var(--sp-r-sm);padding:10px 12px;margin:10px 0 12px;font-size:13px}
.sp-pot-row span{opacity:.8}
.sp-pot{font-size:14px;font-weight:900;color:var(--sp-gold);font-variant-numeric:tabular-nums}
.sp-cta{width:100%;padding:12px;border:none;border-radius:var(--sp-r-sm);background:var(--sp-gold);color:#2b1d00;font-weight:900;font-size:15px;cursor:pointer;transition:filter .12s;margin-top:0}
.sp-cta:hover{filter:brightness(1.06)}
.sp-cta.ghost{background:var(--sp-panel-2);color:#fff;border:1px solid var(--sp-line)}

/* ─── прочее ─── */
.sp-more{display:block;margin:20px auto;padding:12px 34px;border:1px solid var(--sp-line);border-radius:var(--sp-r-sm);background:var(--sp-panel);color:#fff;font-weight:800;font-size:13px;cursor:pointer;transition:border-color .12s}
.sp-more:hover{border-color:var(--sp-blue)}
.sp-empty{text-align:center;padding:46px 12px;opacity:.6}
.sp-loading{text-align:center;padding:30px;color:var(--sp-dim);font-size:13px}
.sp-spin{display:inline-block;animation:spSpin .9s linear infinite}
@keyframes spSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ─── мои ставки (my_bets.html) ─── */
.sp-headbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.sp-headbar h1{margin:0;font-size:20px;font-weight:900;display:flex;align-items:center;gap:8px}
.sp-headbar h1 i{color:var(--sp-blue)}
.sp-headbar a{opacity:.75;font-size:13px;text-decoration:none;color:inherit;font-weight:700}
.sp-headbar a:hover{opacity:1}
.sp-summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sp-sumcard{flex:1;min-width:118px;background:var(--sp-panel);border:1px solid var(--sp-line);border-radius:11px;padding:12px 16px;text-align:center}
.sp-sumcard .k{font-size:10.5px;opacity:.6;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.sp-sumcard .v{font-size:18px;font-weight:900;margin-top:3px;font-variant-numeric:tabular-nums}
.sp-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.sp-fchip{padding:7px 16px;border-radius:var(--sp-r-sm);border:1px solid var(--sp-line);background:var(--sp-panel);color:var(--sp-mut);font-weight:700;font-size:12px;cursor:pointer;transition:background .12s}
.sp-fchip:hover{color:#fff}
.sp-fchip.active{background:var(--sp-blue);color:#fff;border-color:var(--sp-blue)}
.sp-bet{background:var(--sp-panel);border:1px solid var(--sp-line);border-radius:var(--sp-r);padding:14px 16px;margin-bottom:10px}
.sp-bet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.sp-bid{font-weight:800;font-size:15px}
.sp-created{font-size:12px;opacity:.55}
.sp-leg{display:flex;justify-content:space-between;gap:10px;background:var(--sp-input);border:1px solid var(--sp-line);border-radius:8px;padding:8px 11px;margin-bottom:6px;font-size:13px;flex-wrap:wrap}
.sp-leg .lab{opacity:.9}
.sp-leg .xp{color:var(--sp-gold);font-weight:700;font-variant-numeric:tabular-nums}
.sp-odds-big{display:flex;justify-content:space-between;margin-top:11px;font-size:13px;flex-wrap:wrap;gap:8px}
.sp-odds-big b{color:#fff;font-variant-numeric:tabular-nums}

/* ─── статусы ─── */
.sp-st.status{font-size:11px;font-weight:800;padding:4px 11px;border-radius:6px}
.sp-st.won{background:rgba(0,217,103,.15);color:var(--sp-green)}
.sp-st.lost{background:rgba(255,93,108,.15);color:var(--sp-red)}
.sp-st.open{background:rgba(15,123,255,.15);color:#4da3ff}
.sp-st.void{background:rgba(148,163,184,.15);color:#94a3b8}
.lg-status{font-size:11px;font-weight:800}
.lg-status.win{color:var(--sp-green)}.lg-status.lose{color:var(--sp-red)}.lg-status.void{color:#94a3b8}.lg-status.open{color:#4da3ff}

/* открыть купон (мобильный) */
.sp-open-btn{position:fixed;right:14px;bottom:86px;z-index:89;width:54px;height:54px;border-radius:50%;background:var(--sp-gold);color:#2b1d00;font-size:22px;border:none;box-shadow:0 8px 24px rgba(0,0,0,.4);cursor:pointer;display:none;align-items:center;justify-content:center;font-weight:900}
.sp-open-btn .badge{position:absolute;top:-4px;right:-4px;background:var(--sp-red);color:#fff;font-size:11px;font-weight:900;min-width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center}

/* ─── страница события ─── */
a.sp-back{display:inline-flex;align-items:center;gap:6px;opacity:.75;margin-bottom:14px;text-decoration:none;color:inherit;font-size:13px;font-weight:700}
a.sp-back:hover{opacity:1}
.sp-big{background:var(--sp-panel);border:1px solid var(--sp-line);border-radius:var(--sp-r);padding:20px 18px;text-align:center;margin-bottom:16px}
.sp-big-top{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;position:relative}
.sp-big-back{position:absolute;left:0;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--sp-line);background:var(--sp-input);color:var(--sp-mut);text-decoration:none;transition:background .12s,color .12s}
.sp-big-back:hover{color:#fff;background:var(--sp-panel-2)}
.sp-big-liga{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--sp-cyan);margin-bottom:0}
.sp-side-t{font-size:15px;font-weight:800;line-height:1.2}
.sp-quick{margin-top:16px;border-top:1px dashed var(--sp-line);padding-top:13px}
.sp-quick-h{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--sp-dim);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.sp-quick-h:before{content:'⚡';font-size:12px}
.sp-quick-odds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sp-quick-odds .sp-odd{padding:10px 4px 8px}
.sp-quick-odds .sp-odd .l{font-size:11px}
.sp-quick-odds .sp-odd .v{font-size:16px}
.sp-duel{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.sp-side{display:flex;align-items:center;gap:11px;font-weight:800;font-size:15px;max-width:230px}
.sp-side img{width:40px;height:40px;object-fit:contain}
.sp-core{text-align:center}
.sp-core .sp-vs{font-size:32px;font-weight:900;color:var(--sp-gold);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.sp-core .sp-state{font-size:12px;color:var(--sp-mut);margin-top:6px}
.sp-tabs-m{display:flex;gap:6px;margin-bottom:16px;padding:8px 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sp-tabs-m::-webkit-scrollbar{display:none}
.sp-tabm{padding:9px 16px;border-radius:var(--sp-r-sm);border:1px solid var(--sp-line);background:var(--sp-panel);color:var(--sp-mut);font-weight:700;font-size:12.5px;cursor:pointer;transition:background .12s,border-color .12s}
.sp-tabm:hover{color:#fff;border-color:var(--sp-line-2)}
.sp-tabm.active{background:var(--sp-blue);border-color:var(--sp-blue);color:#fff}
.sp-tt{display:none;border:1px solid var(--sp-line);border-radius:var(--sp-r);padding:15px;margin-bottom:12px;background:var(--sp-panel);overflow-x:auto}
.sp-tt.active{display:block}
.sp-tt-title{font-size:13px;font-weight:800;color:#e6eaf2;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sp-tt-title .g{color:var(--sp-cyan);font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.sp-mtable{width:100%;border-collapse:collapse}
.sp-mtable th{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--sp-dim);font-weight:800;padding:6px 8px;text-align:center;border-bottom:1px solid var(--sp-line)}
.sp-mtable th:first-child{text-align:left;width:34%}
.sp-mtable td{padding:7px 3px;text-align:center}
.sp-linerow{border-bottom:1px solid var(--sp-line)}
.sp-linerow:last-child{border-bottom:none}
.sp-linerow .rl{font-size:11px;color:var(--sp-mut);font-weight:800;text-align:left;padding-left:8px;font-variant-numeric:tabular-nums}
.sp-mtable .sp-odd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:46px}
.sp-mtable .sp-odd .l{font-size:8.5px}
.sp-mtable .sp-odd .v{font-size:14px}

/* ─── адаптивность ─── */
@media(max-width:1100px){
  .sp-shell{grid-template-columns:minmax(0,1fr)}
  .sp-event-shell{grid-template-columns:minmax(0,1fr)}
  .sp-nav{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px;margin-bottom:12px}
  .sp-nav-sep{display:none}
  .sp-nav-title{display:none}
  .sp-nav-league{display:none}
  .sp-nav-i{padding:8px 12px}
  .sp-nav-i .n-badge{margin-left:6px}
  .sp-rail{position:static}
  .sp-slip{display:none}
  .sp-open-btn{display:flex}
  .sp-slip.open{display:flex;flex-direction:column;position:fixed;left:10px;right:10px;bottom:78px;z-index:120;width:auto;max-height:74vh;border-radius:20px;border-bottom:none;box-shadow:0 -10px 40px rgba(0,0,0,.5);padding:14px 16px calc(env(safe-area-inset-bottom,0px) + 12px);overflow-y:auto;overscroll-behavior:contain}
  .sp-sheet-grip{display:flex;justify-content:center;padding:2px 0 12px;flex-shrink:0}
  .sp-sheet-grip i{width:42px;height:4px;border-radius:999px;background:var(--sp-line-2);display:block}
  .sp-slip.open #spSelList{max-height:32vh}
}
@media(max-width:600px){
  /* шапка */
  .sp-head{gap:10px;margin-bottom:12px}
  .sp-logo{font-size:17px}
  .sp-logo .ic{width:32px;height:32px;font-size:16px}
  .sp-hstat{font-size:11px;padding:4px 9px}
  /* статистика шапки: компактнее */
  .sp-title-badge{font-size:10px;padding:5px 10px}
  /* матч-карточка */
  .sp-card{padding:11px 11px 12px}
  .sp-match{grid-template-columns:1fr 56px 1fr;gap:7px}
  .sp-team{gap:6px}
  .sp-team img{width:22px;height:22px}
  .sp-team .name{font-size:12px} 
  .sp-time .sc{font-size:16px}
  .sp-time .tt{font-size:10px}
  /* коэффициенты: основной ряд 1X2 без переноса; расширенные рынки переносятся */
  .sp-odds{flex-wrap:nowrap;gap:5px}
  .sp-extra .sp-odds{flex-wrap:wrap}
  .sp-extra .sp-odd{flex:1 1 calc(50% - 4px);min-width:0}
  .sp-odd .l{font-size:8px}
  .sp-odd .v{font-size:14.5px}
  /* мобильные кнопки карточки */
  .sp-expadd{top:8px;right:8px;width:26px;height:26px}
  .sp-expand{flex:0 0 38px;width:38px;min-width:38px}
  .sp-match{padding-right:6px}
  /* компактнее вспомогательные элементы */
  .sp-ml{font-size:9px}
  .sp-toolbar{padding:10px}
  .sp-search{padding:9px 11px}
  /* событие */
  .sp-big{padding:16px 10px}
  .sp-duel{gap:12px}
  .sp-side{font-size:13px}
  .sp-side img{width:32px;height:32px}
  .sp-core .sp-vs{font-size:26px}
  .sp-mtable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .sp-mtable th,.sp-mtable td{padding:7px 6px}
  .sp-tabm{padding:8px 12px;font-size:12px}
  /* купон — нижний лист на весь экран */
  .sp-slip.open{max-height:70vh;bottom:86px}
  .sp-open-btn{right:14px;bottom:96px;width:52px;height:52px}
  .sp-qb button{min-width:0;flex:1 1 auto}
  .sp-sel{font-size:11.5px}
  /* герой: компактнее */
  .sp-big{padding:14px 10px}
  .sp-big-back{width:30px;height:30px}
  .sp-side-t{font-size:12.5px}
  .sp-side{gap:8px;max-width:32vw}
  .sp-quick-odds .sp-odd .v{font-size:15px}
  .sp-quick-odds .sp-odd{padding:9px 4px 7px}
  .sp-quick-odds .sp-odd .l{font-size:10px}
  /* рынки */
  .sp-tabm{white-space:nowrap;flex-shrink:0}
  .sp-tt-title{font-size:12px}
  /* мои ставки */
  .sp-summary{gap:8px}
  .sp-sumcard{min-width:calc(50% - 8px);padding:11px 8px}
  .sp-bet{padding:12px}
  .sp-head-stats .sp-hstat:nth-child(n+3){display:none}
  /* топ матчи на мобильном */
  .sp-fcard{flex:0 0 46vw;min-width:46vw}
  .sp-feat-hint{display:none}
}
@media(max-width:380px){
  .sp-head{flex-direction:column;align-items:flex-start}
  .sp-match{grid-template-columns:1fr 46px 1fr}
  .sp-team .name{font-size:11px}
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM — книжный вид (улучш. типографика, глубина, интерактив)
   ═══════════════════════════════════════════════════════════════════ */

/* мягкие, насыщенные тени и глубина карточек */
.sp-card,.sp-nav,.sp-slip,.sp-toolbar,.sp-big,.sp-bet,.sp-tt,.sp-sumcard{
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 22px rgba(0,0,0,.22)}
.sp-card{transition:border-color .15s,transform .15s,box-shadow .15s}
.sp-card:hover{border-color:var(--sp-line-2);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 30px rgba(0,0,0,.32)}

/* коэффициент: книжный объём, клик-эффект */
.sp-odd{box-shadow:0 1px 0 rgba(0,0,0,.25),0 1px 0 rgba(255,204,38,.12) inset}
.sp-odd:active{transform:scale(.97)}
.sp-odd.sel{box-shadow:0 2px 0 rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.25) inset}
.sp-odd .v{text-shadow:0 1px 0 rgba(0,0,0,.3)}

/* пульс live-бейджа */
.sp-live-dot{box-shadow:0 0 0 0 rgba(255,93,108,.55);animation:spLivePulse 1.6s ease-out infinite}
@keyframes spLivePulse{0%{box-shadow:0 0 0 0 rgba(255,93,108,.55)}70%{box-shadow:0 0 0 7px rgba(255,93,108,0)}100%{box-shadow:0 0 0 0 rgba(255,93,108,0)}}
.sp-card.live{border-left-color:var(--sp-red)}

/* левая навигация — бейджи и hover */
.sp-nav-i{position:relative}
.sp-nav-i.active{box-shadow:0 1px 0 rgba(15,123,255,.25) inset}
.sp-nav-i .n-badge{box-shadow:0 1px 0 rgba(0,0,0,.25)}

/* купон — стиль кассы */
.sp-slip{background:linear-gradient(180deg,#161a29,#12151f)}
.sp-slip-head h3{letter-spacing:.01em}
.sp-sel{box-shadow:0 1px 0 rgba(0,0,0,.18)}
.sp-sel .xs{text-shadow:0 1px 0 rgba(0,0,0,.3)}
.sp-cta{background:linear-gradient(180deg,#ffd53e,#f7b900);box-shadow:0 2px 0 #c99200,0 6px 16px rgba(255,204,38,.28);letter-spacing:.01em}
.sp-cta:hover{filter:brightness(1.05)}
.sp-cta:active{transform:translateY(1px);box-shadow:0 1px 0 #c99200}
.sp-cta.ghost{background:linear-gradient(180deg,#1c2030,#171b28);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}

/* сумма: большой акцент */
.sp-total{padding-bottom:4px;border-bottom:1px dashed rgba(255,255,255,.06)}
.sp-total b{font-variant-numeric:tabular-nums}
.sp-pot{font-size:16px}

/* ставка-жесты */
.sp-qb button{box-shadow:0 1px 0 rgba(0,0,0,.2)}
.sp-qb button:active{transform:translateY(1px)}
.sp-stake input{box-shadow:0 1px 0 rgba(0,0,0,.2) inset}

/* заголовки секций — фирменная черта */
.sp-league{background:linear-gradient(90deg,rgba(15,123,255,.06),transparent);padding:7px 10px 7px 6px;border-radius:8px;border:none}
.sp-league .sp-ldate{background:var(--sp-input);border:1px solid var(--sp-line);padding:2px 8px;border-radius:999px}
.sp-league .sp-lline{height:0}

/* страница события — герой */
.sp-big{position:relative;overflow:hidden}
.sp-big:before{content:'';position:absolute;inset:auto -20% -60% auto;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(15,123,255,.14),transparent 65%);pointer-events:none}
.sp-side{position:relative}
.sp-side img{filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.sp-core .sp-vs{text-shadow:0 2px 0 rgba(0,0,0,.3)}

/* ─── топ матчи (featured) ─── */
.sp-feat{background:var(--sp-panel);border:1px solid var(--sp-line);border-radius:var(--sp-r);padding:12px;margin-bottom:14px;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.sp-feat-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12px;font-weight:800}
.sp-feat-live{display:inline-flex;align-items:center;gap:6px;color:#fff;background:var(--sp-red);padding:3px 10px;border-radius:6px;font-size:10.5px;letter-spacing:.05em;font-weight:900}
.sp-feat-title{text-transform:uppercase;letter-spacing:.06em;color:var(--sp-dim)}
.sp-feat-hint{margin-left:auto;color:var(--sp-dim);font-size:11px;font-weight:700}
.sp-feat-track{display:flex;gap:9px;overflow-x:auto;padding-bottom:3px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.sp-feat-track::-webkit-scrollbar{height:6px}
.sp-feat-track::-webkit-scrollbar-thumb{background:var(--sp-line-2);border-radius:999px}
.sp-fcard{display:flex;flex-direction:column;gap:7px;flex:0 0 220px;min-width:220px;padding:10px 11px;border:1px solid var(--sp-line);border-radius:10px;background:var(--sp-input);text-decoration:none;color:#fff;transition:border-color .15s,transform .15s}
.sp-fcard:hover{border-color:var(--sp-line-2);transform:translateY(-1px)}
.sp-fcard.live{border-left:3px solid var(--sp-red)}
.sp-fbadge{font-size:10px;font-weight:900;letter-spacing:.03em;color:var(--sp-mut);display:flex;align-items:center;gap:5px}
.sp-fcard.live .sp-fbadge{color:var(--sp-red)}
.sp-fteams{display:flex;flex-direction:column;gap:4px}
.sp-fteam{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden}
.sp-fteam.r{flex-direction:row-reverse;justify-content:flex-start}
.sp-fteam .ic{width:20px;height:20px;border-radius:6px;background:linear-gradient(180deg,#1f2740,#151a2c);border:1px solid var(--sp-line-2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:var(--sp-gold);font-style:normal;flex-shrink:0}
.sp-fmid{text-align:center;font-size:9px;font-weight:900;color:var(--sp-dim);letter-spacing:.2em}
.sp-fodds{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:2px}
.sp-fo{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0;border:1px solid rgba(255,204,38,.3);background:rgba(255,204,38,.06);border-radius:7px;cursor:pointer;color:#fff}
.sp-fo:nth-child(2){border-color:rgba(255,204,38,.18)}
.sp-fo:hover{background:rgba(255,204,38,.16)}
.sp-fo span{font-size:8px;font-weight:800;opacity:.7}
.sp-fo b{font-size:13px;font-weight:900;color:var(--sp-gold);font-variant-numeric:tabular-nums}

/* прокрутка */
.sp-main::-webkit-scrollbar,.sp-slip::-webkit-scrollbar{width:8px;height:8px}
.sp-main::-webkit-scrollbar-thumb,.sp-slip::-webkit-scrollbar-thumb{background:var(--sp-line-2);border-radius:999px}
.sp-main::-webkit-scrollbar-track,.sp-slip::-webkit-scrollbar-track{background:transparent}

/* фокус-кольцо */
.sp-odd:focus-visible,.sp-cta:focus-visible,.sp-select:focus-visible,.sp-search input:focus-visible{outline:2px solid var(--sp-blue);outline-offset:2px}

/* ═══════════════════════════════════════════════════════════════════
   APP-MOBILE — спортивные страницы как мобильное приложение
   (только до 768px; изолированный слой поверх fx.css)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){

  /* нативный верхний бар события — фулл-блд под навбаром (не лезет в шапку) */
  .sp-appbar{display:flex;align-items:center;gap:10px;z-index:60;
    background:rgba(10,10,23,.92);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
    border-bottom:1px solid var(--sp-line);margin:0 calc(-1rem) 12px;padding:10px 12px}
  .sp-appbar-back{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--sp-line);background:var(--sp-input);color:#fff;border-radius:11px;font-size:16px;text-decoration:none}
  .sp-appbar-back:active{transform:scale(.96)}
  .sp-appbar-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .sp-appbar-liga{font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--sp-cyan)}
  .sp-appbar-sub{font-size:12.5px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sp-appbar-bal{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#fff;
    background:rgba(255,204,38,.14);border:1px solid rgba(255,204,38,.35);padding:7px 11px;border-radius:999px;font-variant-numeric:tabular-nums}
  .sp-appbar-bal i{color:var(--sp-gold)}

  /* скрываем навигацию как приложение: вся страница = спорт */
  body > .fx-nav .fx-notif-wrap,
  body > .fx-nav .fx-balance-plus{display:none}

  /* футер-простыню скрываем на мобильных */
  .fx-footer{display:none}

  /* убрать дублирующий бэк в герое и старый бэк-линк (есть нативный бар) */
  .sp-big-back{display:none}
  a.sp-back{display:none}

  /* герой — карточка приложения */
  .sp-big{text-align:center;padding:16px 12px;border-radius:20px}
  .sp-duel{gap:10px}
  .sp-side{font-size:12.5px;max-width:30vw;display:flex;align-items:center}
  .sp-side-t{font-size:12px}
  .sp-side img{width:36px;height:36px}
  .sp-core .sp-vs{font-size:30px}
  .sp-core .sp-state{font-size:11.5px}

  /* быстрая 1X2 ставка — крупные красивые кнопки */
  .sp-quick{margin-top:14px;padding-top:12px}
  .sp-quick-odds{gap:7px}
  .sp-quick-odds .sp-odd{padding:11px 4px 9px;border-radius:13px}
  .sp-quick-odds .sp-odd .l{font-size:11px}
  .sp-quick-odds .sp-odd .v{font-size:16.5px}

  /* вкладки рынков — свайпаются */
  .sp-tabs-m{margin:0 -12px 12px;padding:8px 12px;background:rgba(10,10,23,.55)}
  .sp-tabm{padding:9px 15px;font-size:12.5px;border-radius:999px}
  .sp-tabm.active{background:var(--sp-gold);border-color:var(--sp-gold);color:#2b1d00}

  /* панель рынка — карточка */
  .sp-tt{border-radius:18px;padding:13px 11px}
  .sp-tt-title{font-size:12.5px}
  .sp-mtable .sp-odd{min-height:50px;border-radius:11px}
  .sp-mtable .sp-odd .l{font-size:9px}
  .sp-mtable .sp-odd .v{font-size:15.5px}

  /* нижний лист купона — над таб-баром */
  .sp-slip.open{max-height:66vh}
  .sp-open-btn{width:54px;height:54px;right:14px;bottom:98px;z-index:110;box-shadow:0 10px 30px rgba(0,0,0,.45)}
}

@media (max-width:400px){
  .sp-appbar-sub{font-size:11.5px}
  .sp-appbar-bal i{display:none}
  .sp-appbar-bal{font-size:11px;padding:6px 9px}
  .sp-core .sp-vs{font-size:26px}
  .sp-quick-odds .sp-odd .v{font-size:15px}
  .sp-mtable .sp-odd .v{font-size:14.5px}
}