:root {
  --bg:#04080D;
  --bg2:#091018;
  --bg3:#0C1520;
  --green:#00E87A;
  --gdim:rgba(0,232,122,.10);
  --gborder:rgba(0,232,122,.22);
  --b:rgba(255,255,255,.07);
  --b2:rgba(255,255,255,.13);
  --b3:rgba(255,255,255,.03);
  --t:#EDF2FF;
  --t2:#7A8FA6;
  --t3:#3A5068;
  --r:12px;
  --rl:16px;
  --hot:#FF6B35;
  --hot-dim:rgba(255,107,53,.12);
  --hot-border:rgba(255,107,53,.28);
  --vb:#A78BFA;
  --vb-dim:rgba(167,139,250,.10);
  --vb-border:rgba(167,139,250,.25);
}

/* NUMERIC CONSISTENCY */
.oc-odd,.pb-badge,.signal-pill strong,.scc-val,.sl-val,.ps-val,.cap-val,.sv,.bpreset,.bgt-inp,.hero-timer,.match-time,.hp,.hs,.conf-score,.saved-tag,.ps-sub,.cs-sub,.rmeta strong,.hn,.title-num,.price-num,.ti-p,.pprice,.stat-num,.metric-num,.sort-count {
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

.oc-odd,.pb-badge,.signal-pill strong,.scc-val,.sl-val,.ps-val,.cap-val,.sv,.bpreset,.bgt-inp,.hp,.hn,.title-num,.price-num,.ti-p {
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  letter-spacing:-.03em;
}

.hero-timer,.match-time,.conf-score,.saved-tag,.ps-sub,.cs-sub,.hs {
  font-family:'DM Mono',monospace;
}

*,*::before,*::after {
  box-sizing:border-box;
  margin:0;
  padding:0
}

html {
  scroll-behavior:smooth
}

body {
  font-family:'DM Sans',sans-serif;
  background-color:var(--bg);
  background-image:radial-gradient(circle at 18% 12%,rgba(20,92,255,.12),transparent 28%),radial-gradient(circle at 82% 8%,rgba(0,232,122,.08),transparent 24%),radial-gradient(circle at 50% 110%,rgba(255,107,53,.06),transparent 36%),linear-gradient(180deg,#04080D 0%,#06101A 45%,#03070C 100%);
  color:var(--t);
  overflow-x:hidden;
  cursor:none;
  min-height:100vh
}

.cursor {
  position:fixed;
  width:12px;
  height:12px;
  background:radial-gradient(circle at 35% 35%,#7FFFC3 0%,var(--green) 42%,#00B860 100%);
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px rgba(0,232,122,.18),0 0 18px rgba(0,232,122,.26);
  transition:transform .08s ease,opacity .18s ease;
  will-change:transform,left,top
}

.cursor.active {
  transform:translate(-50%,-50%) scale(1.16)
}

.cring {
  display:none
}

@media (pointer:coarse) {
  body {
    cursor:auto
  }
  .cursor,.cring {
    display:none!important
  }
}

::-webkit-scrollbar {
  width:3px
}

::-webkit-scrollbar-track {
  background:var(--bg)
}

::-webkit-scrollbar-thumb {
  background:var(--green);
  border-radius:2px
}

.gbg {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:linear-gradient(rgba(0,232,122,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(0,232,122,.018) 1px,transparent 1px);
  background-size:52px 52px
}

.gbg::before {
  content:'';
  position:absolute;
  inset:-10%;
  background:radial-gradient(circle at 15% 18%,rgba(34,109,255,.14),transparent 24%),radial-gradient(circle at 78% 12%,rgba(0,232,122,.08),transparent 22%),radial-gradient(circle at 50% 78%,rgba(255,107,53,.05),transparent 26%);
  filter:blur(36px);
  opacity:.95
}

.gbg::after {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 45% at 50% 0%,rgba(0,232,122,.045) 0%,transparent 70%)
}

@keyframes pulse {
  0%,100% {
    opacity:1;
    transform:scale(1)
  }
  50% {
    opacity:.4;
    transform:scale(.7)
  }
}

@keyframes fu {
  from {
    opacity:0;
    transform:translateY(18px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}

@keyframes glow {
  0%,100% {
    box-shadow:0 0 12px rgba(0,232,122,.3)
  }
  50% {
    box-shadow:0 0 28px rgba(0,232,122,.6)
  }
}

@keyframes hotGlow {
  0%,100% {
    box-shadow:0 0 12px rgba(255,107,53,.3)
  }
  50% {
    box-shadow:0 0 28px rgba(255,107,53,.6)
  }
}

@keyframes borderPulse {
  0%,100% {
    border-color:rgba(0,232,122,.22)
  }
  50% {
    border-color:rgba(0,232,122,.55)
  }
}

@keyframes countDown {
  from {
    width:100%
  }
  to {
    width:0%
  }
}

@keyframes slideIn {
  from {
    opacity:0;
    transform:translateY(12px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes softPulse {
  0%,100% {
    opacity:.9;
    transform:scale(1)
  }
  50% {
    opacity:1;
    transform:scale(1.03)
  }
}

/* NAV */
nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 3%;
  height:62px;
  background:rgba(4,8,13,.93);
  backdrop-filter:blur(26px);
  border-bottom:1px solid var(--b)
}

.logo {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:1.42rem;
  letter-spacing:-.5px;
  color:var(--t);
  cursor:pointer;
  text-decoration:none
}

.lm {
  width:52px;
  height:52px;
  flex-shrink:0
}

.logo em {
  color:var(--green);
  font-style:normal
}

.logo-mark {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(0,232,122,.18))
}

.logo-word {
  display:inline-flex;
  align-items:center;
  gap:0;
  line-height:1
}

.hero-shell {
  width:min(1280px,100%);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,620px);
  align-items:center;
  gap:28px
}

.hero-copy {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  max-width:760px
}

.hero-copy .hero-sub,.hero-copy .hero-btns,.hero-copy .hero-legal-strip,.hero-copy .sstrip {
  margin-left:0;
  margin-right:0
}

.hero-brandline {
  display:inline-flex;
  align-items:center;
  gap:16px;
  margin:0 0 1rem 0;
  padding:8px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  box-shadow:0 10px 24px rgba(0,0,0,.16)
}

.hero-brandline span {
  font-family:'Syne',sans-serif;
  font-weight:800;
  letter-spacing:.8px;
  font-size:1.72rem;
  line-height:1;
  color:var(--t)
}

.hero-brand-logo {
  width:70px;
  height:70px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(0,232,122,.16))
}

.hero-side {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:100%
}

.hero-screen-frame {
  position:relative;
  width:100%;
  max-width:620px;
  padding:16px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(8,15,24,.92),rgba(4,8,13,.92));
  box-shadow:0 30px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden
}

.hero-screen-frame::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,232,122,.08),transparent 32%,transparent 68%,rgba(124,92,255,.08));
  pointer-events:none
}

.hero-screen-top {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  font-size:.72rem;
  color:var(--t2)
}

.hero-screen-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 18px rgba(0,232,122,.55)
}

.hero-screen-glow {
  position:absolute;
  inset:auto -10% -18% auto;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.22) 0%,transparent 70%);
  filter:blur(10px);
  pointer-events:none
}

.hero-screen-img {
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 50px rgba(0,0,0,.34)
}

.nmid {
  display:flex;
  align-items:center;
  gap:1.5rem;
  list-style:none
}

.nmid a {
  color:var(--t2);
  text-decoration:none;
  font-size:.82rem;
  transition:color .2s;
  cursor:pointer
}

.nmid a:hover {
  color:var(--t)
}

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

.btn-g {
  color:var(--t2);
  font-size:.82rem;
  background:none;
  border:1px solid var(--b);
  padding:6px 14px;
  border-radius:999px;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all .2s
}

.btn-g:hover {
  color:var(--t);
  border-color:var(--b2)
}

.btn-green {
  background:var(--green);
  color:#04080D;
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.82rem;
  border:none;
  padding:7px 17px;
  border-radius:999px;
  cursor:pointer;
  transition:all .2s;
  box-shadow:0 0 14px rgba(0,232,122,.22)
}

.btn-green:hover {
  box-shadow:0 0 26px rgba(0,232,122,.42);
  transform:translateY(-1px)
}

.page {
  display:none;
  position:relative;
  z-index:1;
  min-height:100vh
}

.page.active {
  display:block
}

/* ============ SCANNER ============ */
.sc-page {
  padding-top:62px
}

/* TOP BAR */
.sc-topbar {
  background:rgba(9,16,24,.96);
  border-bottom:1px solid var(--b);
  padding:.75rem 3%;
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  position:sticky;
  top:62px;
  z-index:50;
  backdrop-filter:blur(16px)
}

.pg2 {
  display:flex;
  flex-direction:column;
  gap:3px
}

.plbl {
  font-size:.6rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--t3);
  font-weight:600
}

.psel {
  background:rgba(0,0,0,.4);
  border:1px solid var(--b);
  border-radius:7px;
  padding:6px 10px;
  color:var(--t);
  font-family:'DM Sans',sans-serif;
  font-size:.79rem;
  cursor:pointer;
  outline:none;
  min-width:105px;
  transition:border-color .2s
}

.psel:hover,.psel:focus {
  border-color:var(--b2)
}

.psel option {
  background:#091018
}

.prange {
  -webkit-appearance:none;
  appearance:none;
  width:100px;
  height:3px;
  border-radius:2px;
  background:var(--b2);
  outline:none;
  cursor:pointer
}

.prange::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--green);
  cursor:pointer
}

.rval {
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.79rem;
  color:var(--green);
  min-width:26px
}

.budget-g {
  display:flex;
  align-items:center;
  gap:5px;
  background:rgba(0,232,122,.07);
  border:1px solid var(--gborder);
  border-radius:7px;
  padding:4px 9px
}

.bpreset {
  background:transparent;
  border:none;
  color:var(--green);
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-size:.92rem;
  width:65px;
  outline:none;
  text-align:right
}

.bunit {
  font-size:.75rem;
  color:var(--green);
  font-weight:600
}

.scan-btn {
  display:flex;
  align-items:center;
  gap:7px;
  background:var(--green);
  color:#04080D;
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.83rem;
  border:none;
  padding:8px 20px;
  border-radius:999px;
  cursor:pointer;
  transition:all .22s;
  box-shadow:0 0 16px rgba(0,232,122,.25);
  white-space:nowrap;
  margin-left:auto
}

.scan-btn:hover {
  box-shadow:0 0 28px rgba(0,232,122,.48);
  transform:translateY(-1px)
}

.scan-btn:disabled {
  opacity:.45;
  cursor:not-allowed;
  transform:none
}

.sico {
  transition:transform .1s
}

.scanning .sico {
  animation:spin 1s linear infinite
}

/* SUBBAR */
.sc-sub {
  padding:.6rem 3%;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--b);
  background:rgba(4,8,13,.5)
}

.mode-toggle {
  display:flex;
  background:rgba(0,0,0,.4);
  border:1px solid var(--b);
  border-radius:999px;
  padding:2px;
  gap:2px
}

.mbtn {
  padding:5px 15px;
  border-radius:999px;
  font-family:'Syne',sans-serif;
  font-size:.73rem;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:all .2s;
  color:var(--t2);
  background:transparent;
  letter-spacing:.3px
}

.mbtn.active {
  background:var(--green);
  color:#04080D;
  box-shadow:0 0 10px rgba(0,232,122,.28)
}

.mbtn.active-vb {
  background:var(--vb);
  color:#fff;
  box-shadow:0 0 10px rgba(167,139,250,.3)
}

.live-pill {
  display:none;
  align-items:center;
  gap:5px;
  font-size:.72rem;
  color:var(--green);
  font-family:'Syne',sans-serif;
  font-weight:600;
  background:var(--gdim);
  border:1px solid var(--gborder);
  padding:3px 10px;
  border-radius:999px
}

.live-pill.show {
  display:flex
}

.ldot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  animation:pulse 1.4s infinite
}

.rmeta {
  font-size:.76rem;
  color:var(--t2);
  margin-left:auto
}

.rmeta strong {
  color:var(--green);
  font-family:'Syne',sans-serif
}

/* SORT BAR */
.sort-bar {
  padding:.55rem 3%;
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  border-bottom:1px solid var(--b3)
}

.sort-lbl {
  font-size:.68rem;
  color:var(--t3);
  white-space:nowrap
}

.sort-btn {
  font-size:.7rem;
  font-family:'Syne',sans-serif;
  font-weight:600;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--b);
  background:transparent;
  color:var(--t2);
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap
}

.sort-btn:hover,.sort-btn.active {
  border-color:var(--gborder);
  color:var(--green);
  background:var(--gdim)
}

.sort-btn.active.vb-sort {
  border-color:rgba(167,139,250,.34);
  color:#CDB7FF;
  background:rgba(167,139,250,.14)
}

.summary-pills {
  display:flex;
  gap:.5rem;
  margin-left:auto;
  flex-wrap:wrap
}

.sum-pill {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:.69rem;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--b);
  color:var(--t2);
  white-space:nowrap
}

.sum-pill.g {
  border-color:var(--gborder);
  color:var(--green);
  background:var(--gdim)
}

.sum-pill.h {
  border-color:var(--hot-border);
  color:var(--hot);
  background:var(--hot-dim)
}

/* SCANNER MINI DASHBOARD */
.scanner-mini-dashboard {
  padding: .95rem 3% 0;
}

.scdash-shell {
  border: 1px solid var(--b);
  border-radius: 20px;
  padding: 1rem 1rem 1.05rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(0,232,122,.05), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
  box-shadow: 0 18px 42px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.02);
}

.scdash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: .9rem;
}

.scdash-kicker {
  font-size: .62rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 700;
  margin-bottom: .32rem;
}

.scdash-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--t);
  letter-spacing: -.3px;
}

.scdash-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--b);
  background: rgba(255,255,255,.04);
  font-family: 'Syne', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.scdash-mode.is-sure {
  color: var(--green);
  border-color: var(--gborder);
  background: var(--gdim);
}

.scdash-mode.is-vb {
  color: #E4D5FF;
  border-color: rgba(167,139,250,.34);
  background: rgba(167,139,250,.14);
}

.scdash-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 12px;
}

.scdash-card {
  min-width: 0;
  min-height: 114px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(0,0,0,.14));
  padding: .9rem .9rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .42rem;
  justify-content: flex-start;
}

.scdash-lbl {
  font-size: .6rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--t3);
  font-weight: 700;
}

.scdash-val {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 1.42rem;
  line-height: 1;
  color: var(--t);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1,"lnum" 1;
  letter-spacing: -.03em;
}

.scdash-val.g { color: var(--green); }
.scdash-val.h { color: var(--hot); }
.scdash-val.vb { color: #D3B7FF; }

.scdash-sub {
  font-size: .68rem;
  color: var(--t2);
  line-height: 1.5;
  margin-top: auto;
}

@media(max-width:1400px) {
  .scdash-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media(max-width:840px) {
  .scanner-mini-dashboard {
    padding-top: .8rem;
  }

  .scdash-head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: .8rem;
  }

  .scdash-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media(max-width:560px) {
  .scdash-shell {
    padding: .9rem .85rem .95rem;
    border-radius: 18px;
  }

  .scdash-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .scdash-card {
    min-height: 98px;
    padding: .82rem .82rem .78rem;
  }

  .scdash-val {
    font-size: 1.28rem;
  }
}

/* LOADING */
.sc-loading {
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:65px 20px;
  text-align:center;
  gap:1.2rem
}

.sc-loading.show {
  display:flex
}

.spinner {
  width:42px;
  height:42px;
  border:2px solid var(--b);
  border-top-color:var(--green);
  border-radius:50%;
  animation:spin 1s linear infinite
}

.ld-title {
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.92rem;
  color:var(--t2)
}

.ld-steps {
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  max-width:270px
}

.ld-step {
  font-size:.74rem;
  color:var(--t3);
  display:flex;
  align-items:center;
  gap:6px;
  transition:color .3s
}

.ld-step.done {
  color:var(--green)
}

.si2 {
  width:13px;
  flex-shrink:0;
  font-size:.7rem
}

/* ===== CARDS GRID ===== */
.cards-grid {
  padding:1.1rem 3% 60px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}

@media(max-width:1200px) {
  .cards-grid {
    grid-template-columns:repeat(3,1fr)
  }
}

@media(max-width:880px) {
  .cards-grid {
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:560px) {
  .cards-grid {
    grid-template-columns:1fr
  }
}

.scanner-empty {
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:260px;
  padding:2rem 1.2rem;
  border:1px dashed rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(0,0,0,.18));
  text-align:center
}

.scanner-empty strong {
  font-family:'Syne',sans-serif;
  font-size:1rem;
  font-weight:700;
  color:var(--t)
}

.scanner-empty span {
  max-width:420px;
  font-size:.8rem;
  line-height:1.65;
  color:var(--t2)
}

/* ===== PREMIUM SUREBET CARD ===== */
.sb-card {
  --focus-ring:rgba(0,232,122,.24);
  background:linear-gradient(180deg,rgba(12,21,32,.98) 0%,rgba(7,14,22,.98) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .25s,border-color .25s,box-shadow .25s,background .25s;
  animation:slideIn .35s ease both;
  position:relative;
  box-shadow:0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.02);
}

.sb-card::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 22%,transparent 72%,rgba(0,232,122,.018));
  opacity:.9
}

.sb-card:hover {
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 22px 52px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.02)
}

.sb-card.hot {
  border-color:var(--hot-border);
  animation:borderPulse 2.5s ease-in-out infinite
}

.sb-card.hot:hover {
  box-shadow:0 18px 48px rgba(255,107,53,.17),0 0 0 1px rgba(255,107,53,.09)
}

.sb-card.fav {
  border-color:rgba(252,211,77,.34);
  box-shadow:0 16px 42px rgba(251,191,36,.08)
}

.sb-card.value-card {
  --focus-ring:rgba(167,139,250,.26);
  border-color:var(--vb-border);
  box-shadow:0 0 0 1px rgba(167,139,250,.05),0 16px 38px rgba(80,42,140,.10)
}

.sb-card.value-card:hover {
  box-shadow:0 18px 42px rgba(110,60,180,.18),0 0 0 1px rgba(167,139,250,.08)
}

/* CARD VISUAL HEADER */
.card-hero {
  position:relative;
  height:108px;
  overflow:hidden;
  flex-shrink:0;
  isolation:isolate
}

.card-hero-photo {
  position:absolute;
  inset:0;
  background-image:var(--hero-photo);
  background-size:cover;
  background-position:center center;
  transform:scale(1.05);
  filter:saturate(1.04) contrast(1.04) brightness(.78);
  opacity:.44;
  z-index:0
}

.card-hero-bg {
  position:absolute;
  inset:0;
  background:var(--league-grad,linear-gradient(135deg,#0d1a2e,#1a2d4a));
  z-index:1;
  mix-blend-mode:screen
}

.card-hero-bg::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(4,8,13,.62) 0%,rgba(4,8,13,.20) 35%,rgba(4,8,13,.20) 65%,rgba(4,8,13,.66) 100%)
}

.card-hero-bg::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(4,8,13,.14) 0%,rgba(9,16,24,.16) 26%,rgba(9,16,24,.58) 68%,rgba(9,16,24,.97) 100%)
}

.hero-watermark {
  position:absolute;
  right:-8px;
  top:-6px;
  font-size:5rem;
  opacity:.06;
  line-height:1;
  pointer-events:none;
  filter:grayscale(1);
  z-index:2
}

.hero-league {
  position:absolute;
  top:.68rem;
  left:.85rem;
  display:flex;
  align-items:center;
  gap:6px;
  z-index:3;
  max-width:74%
}

.league-chip {
  font-size:.58rem;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  background:rgba(0,0,0,.44);
  border:1px solid rgba(255,255,255,.12);
  padding:3px 9px;
  border-radius:999px;
  color:rgba(255,255,255,.82);
  backdrop-filter:blur(6px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.hot-badge {
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.9px;
  text-transform:uppercase;
  background:var(--hot);
  color:#fff;
  padding:3px 9px;
  border-radius:999px;
  box-shadow:0 8px 18px rgba(255,107,53,.25)
}

.hot-badge.vb-hot {
  background:linear-gradient(135deg,#7C3AED,#A78BFA);
  box-shadow:0 0 16px rgba(167,139,250,.28)
}

.hero-timer {
  position:absolute;
  top:.68rem;
  right:.8rem;
  display:flex;
  align-items:center;
  gap:5px;
  font-family:'DM Mono',monospace;
  font-size:.66rem;
  color:rgba(255,255,255,.68);
  background:rgba(0,0,0,.42);
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  z-index:3;
  backdrop-filter:blur(5px)
}

.timer-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
  animation:pulse 1.3s infinite;
  flex-shrink:0
}

.timer-dot.hot {
  background:var(--hot)
}

/* TEAMS */
.card-teams {
  position:absolute;
  bottom:.72rem;
  left:0;
  right:0;
  padding:0 .95rem;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  z-index:3
}

.team {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  flex:1;
  min-width:0
}

.team-ball {
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-size:.78rem;
  border:2px solid rgba(255,255,255,.16);
  box-shadow:0 8px 18px rgba(0,0,0,.20);
  flex-shrink:0;
  overflow:hidden;
  position:relative
}

.team-ball.has-logo {
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.18),rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.26);
  padding:5px
}

.team-ball.has-logo img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))
}

.team-ball.fallback-text {
  letter-spacing:.03em
}

.team-name {
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.7rem;
  color:rgba(255,255,255,.92);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:92px;
  text-shadow:0 2px 10px rgba(0,0,0,.35)
}

.vs-center {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  flex-shrink:0;
  transform:translateY(-2px)
}

.vs-txt {
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:.8rem;
  color:rgba(255,255,255,.40)
}

.match-time {
  font-size:.62rem;
  color:rgba(255,255,255,.72);
  font-family:'DM Mono',monospace;
  white-space:nowrap
}

.match-date {
  font-size:.54rem;
  color:rgba(255,255,255,.52);
  font-family:'DM Mono',monospace;
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.04em
}

/* PROFIT BANNER */
.profit-banner {
  padding:.72rem .86rem .66rem;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:.7rem;
  border-bottom:1px solid rgba(255,255,255,.04)
}

.pb-left {
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  min-width:0
}

.pb-badge {
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-size:clamp(.88rem,1vw,1rem);
  color:var(--green);
  background:linear-gradient(135deg,rgba(0,232,122,.12),rgba(0,232,122,.06));
  border:1px solid var(--gborder);
  padding:6px 13px;
  border-radius:999px;
  white-space:nowrap;
  flex-shrink:0;
  max-width:100%;
  animation:glow 3s ease-in-out infinite;
  box-shadow:0 10px 24px rgba(0,232,122,.12)
}

.pb-badge.hot-b {
  color:var(--hot);
  background:linear-gradient(135deg,rgba(255,107,53,.18),rgba(255,107,53,.08));
  border-color:var(--hot-border);
  animation:hotGlow 2.5s ease-in-out infinite;
  box-shadow:0 10px 24px rgba(255,107,53,.13)
}

.pb-badge.vb-b {
  color:#E9DEFF;
  background:linear-gradient(135deg,rgba(124,58,237,.26),rgba(167,139,250,.12));
  border-color:rgba(167,139,250,.38);
  animation:none;
  box-shadow:0 0 18px rgba(124,58,237,.15)
}

.pb-info {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  padding-top:2px
}

.pb-type {
  font-size:.56rem;
  font-weight:800;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:rgba(122,143,166,.96)
}

.pb-arb {
  font-size:.68rem;
  color:#B7C6D8;
  font-family:'DM Sans',sans-serif;
  line-height:1.45;
  white-space:normal
}

/* CONFIDENCE */
.confidence {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  gap:5px;
  min-width:82px;
  flex-shrink:0;
  padding-top:2px
}

.conf-lbl {
  font-size:.55rem;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:1px
}

.conf-bar {
  width:72px;
  height:5px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden
}

.conf-fill {
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),#00FFB3);
  transition:width .6s ease
}

.value-card .conf-fill {
  background:linear-gradient(90deg,#7C3AED,#C084FC)
}

.value-card .confidence .conf-lbl {
  color:rgba(167,139,250,.72)
}

.conf-score {
  font-size:.62rem;
  color:var(--t2);
  font-family:'DM Mono',monospace
}

/* SIGNAL ROW */
.signal-row {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:0 .85rem .74rem;
  border-bottom:1px solid rgba(255,255,255,.04)
}

.signal-pill {
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:.48rem .55rem;
  min-width:0
}

.signal-pill strong {
  display:block;
  font-family:'DM Sans',sans-serif;
  font-size:.84rem;
  line-height:1;
  color:var(--t)
}

.signal-pill span {
  display:block;
  margin-top:5px;
  font-size:.56rem;
  letter-spacing:.85px;
  text-transform:uppercase;
  color:var(--t3)
}

.signal-pill small {
  display:block;
  margin-top:4px;
  font-size:.62rem;
  line-height:1.35;
  color:var(--t2)
}

.signal-pill.signal-profit strong {
  color:var(--green)
}

.signal-pill.signal-expiry strong {
  color:#F6D268
}

.signal-pill.signal-score strong {
  color:#8EE7FF
}

.value-card .signal-pill.signal-profit strong {
  color:#CFA8FF
}

.value-card .signal-pill.signal-score strong {
  color:#D2B6FF
}

/* EXPIRY BAR */
.expiry-bar {
  height:2px;
  background:rgba(255,255,255,.05);
  position:relative;
  overflow:hidden
}

.expiry-fill {
  height:100%;
  border-radius:0;
  transition:width 1s linear
}

.expiry-fill.ok {
  background:var(--green)
}

.expiry-fill.warn {
  background:#F59E0B
}

.expiry-fill.urgent {
  background:#EF4444;
  animation:hotGlow .8s infinite
}

/* ODDS SECTION */
.odds-sec {
  padding:.82rem .82rem .86rem;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.04)
}

.odd-cell {
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.018) 0%,rgba(12,21,32,.98) 56%,rgba(0,0,0,.18) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:.72rem .55rem .68rem;
  text-align:center;
  transition:all .22s;
  overflow:hidden;
  cursor:default
}

.odd-cell::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.035) 0%,transparent 58%);
  pointer-events:none
}

.odd-cell::after {
  content:'';
  position:absolute;
  left:10px;
  right:10px;
  top:0;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.06)
}

.odd-cell:hover {
  border-color:rgba(255,255,255,.16);
  transform:translateY(-1px)
}

.odd-cell.colored {
  background:linear-gradient(180deg,var(--accent-top) 0%,rgba(12,21,32,.98) 54%,rgba(4,8,13,.98) 100%);
  border-color:var(--accent-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 10px 22px var(--accent-glow)
}

.odd-cell.colored::after {
  content:'';
  position:absolute;
  left:10px;
  right:10px;
  top:0;
  height:2px;
  border-radius:999px;
  background:var(--accent)
}

.odd-cell.colored .oc-lbl {
  color:var(--accent);
  text-shadow:0 0 10px var(--accent-glow)
}

.odd-cell.colored .oc-out {
  color:rgba(237,242,255,.86)
}

.odd-cell.colored .oc-odd {
  text-shadow:0 0 18px var(--accent-glow)
}

.odd-cell.colored .oc-impl {
  color:rgba(237,242,255,.44)
}

.odd-cell.colored:hover {
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 30px var(--accent-glow)
}

.oc-lbl {
  font-size:.58rem;
  font-weight:800;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--t3);
  margin-bottom:.28rem
}

.oc-out {
  font-size:.63rem;
  color:var(--t2);
  margin-bottom:.42rem;
  line-height:1.28;
  min-height:2.05em;
  display:flex;
  align-items:center;
  justify-content:center
}

.oc-odd {
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-size:1.5rem;
  color:var(--t);
  line-height:1;
  margin-bottom:.34rem;
  letter-spacing:-.03em
}

.oc-odd.na {
  font-size:.92rem;
  color:var(--t3)
}

/* BOOKIE TAG */
.oc-bookie {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-size:.58rem;
  font-weight:700;
  padding:0;
  border-radius:12px;
  margin-bottom:.3rem;
  min-height:46px;
  overflow:hidden;
  width:100%;
}

.oc-bookie.has-logo {
  width:100%;
  padding:0;
  min-height:46px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 10px 20px rgba(0,0,0,.16)
}

.oc-bookie.bookie-link {
  cursor:pointer;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}

.oc-bookie.bookie-link:hover {
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 22px rgba(0,0,0,.22)
}

.bookie-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding:0;
}

.bookie-logo svg {
  display:block;
  width:112%;
  height:46px;
  max-width:none;
  overflow:visible;
}

.bookie-logo .wordmark {
  font-family:Arial,Helvetica,sans-serif;
  font-weight:900;
  letter-spacing:0
}

.odd-cell.vb-focus {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 16px 32px rgba(167,139,250,.16);
  border-color:rgba(167,139,250,.42)!important;
  background:linear-gradient(180deg,rgba(124,58,237,.18) 0%,rgba(12,21,32,.98) 54%,rgba(4,8,13,.98) 100%)!important
}

.odd-cell.vb-focus::after {
  background:#C084FC!important
}

.odd-cell.vb-focus .oc-lbl {
  color:#D8C0FF!important;
  text-shadow:0 0 12px rgba(167,139,250,.22)
}

.oc-vb-tag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.34rem;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(167,139,250,.32);
  background:rgba(167,139,250,.14);
  font-size:.5rem;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#DFC9FF
}

.played-meta {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:4px
}

.played-state {
  font-size:.62rem;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  color:var(--t2)
}

.played-state.expired {
  border-color:rgba(255,107,107,.24);
  background:rgba(255,107,107,.08);
  color:#FF8E8E
}

.played-state.active {
  border-color:rgba(0,232,122,.22);
  background:rgba(0,232,122,.08);
  color:var(--green)
}

.cap-source,.budget-source-tag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 11px;
  border-radius:999px;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.95px;
  text-transform:uppercase;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--t2);
  min-height:32px
}

.cap-source.global,.budget-source-tag.global {
  border-color:rgba(0,232,122,.22);
  background:rgba(0,232,122,.08);
  color:var(--green)
}

.cap-source.override,.budget-source-tag.override {
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--t)
}

.cap-source.locked,.budget-source-tag.locked {
  border-color:rgba(246,210,104,.24);
  background:rgba(246,210,104,.10);
  color:#F6D268
}

.budget-source-tag {
  margin-left:auto;
  font-size:.62rem;
  padding:6px 11px;
  min-height:32px;
  border-radius:999px;
  letter-spacing:.95px
}

.budget-reset {
  display:none
}

.budget-reset.show {
  display:inline-flex
}

.calc-button-ic {
  font-size:.86rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center
}

.oc-impl {
  font-size:.58rem;
  color:var(--t3);
  font-family:'DM Mono',monospace
}

/* TREND */
.oc-trend {
  font-size:.62rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  margin-top:.25rem
}

.trend-up {
  color:#10B981
}

.trend-dn {
  color:#EF4444
}

.trend-st {
  color:var(--t3)
}

/* CAPITAL REQUIRED */
.cap-row {
  padding:.58rem .88rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.04);
  background:rgba(0,0,0,.16)
}

.cap-lbl {
  font-size:.64rem;
  color:var(--t3)
}

.cap-val {
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-size:.86rem;
  color:var(--t)
}

.cap-bookies {
  display:flex;
  gap:4px;
  flex-wrap:wrap
}

.bk-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  box-shadow:0 0 12px currentColor
}

/* TUTORIAL QUICK LINKS */
.tutorial-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none
}

.hero-tutorial-link {
  padding-inline:18px
}

.sc-tutorial-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--t2);
  font-family:'Syne',sans-serif;
  font-size:.7rem;
  font-weight:700;
  text-decoration:none;
  transition:all .2s
}

.sc-tutorial-link:hover {
  border-color:var(--gborder);
  color:var(--green);
  background:rgba(0,232,122,.05)
}

/* CALCULATOR */
.card-calc {
}

.calc-toggle {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.92rem 1rem;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.08));
  border:none;
  cursor:pointer;
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.78rem;
  color:#DCE7F5;
  transition:all .2s;
  border-top:1px solid rgba(255,255,255,.04)
}

.calc-toggle:hover {
  color:var(--green);
  background:rgba(0,232,122,.05)
}

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

.calc-icon-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0
}

.calc-icon-box {
  width:34px;
  height:34px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(0,232,122,.16),rgba(0,232,122,.05));
  border:1px solid rgba(0,232,122,.26);
  box-shadow:0 10px 26px rgba(0,232,122,.10)
}

.calc-icon-box.vb {
  background:linear-gradient(135deg,rgba(167,139,250,.18),rgba(167,139,250,.05));
  border-color:rgba(167,139,250,.30);
  box-shadow:0 10px 26px rgba(167,139,250,.10)
}

.calc-icon {
  width:16px;
  height:16px;
  display:block;
  color:var(--green)
}

.calc-icon-box.vb .calc-icon {
  color:#D5B7FF
}

.ct-copy {
  display:flex;
  flex-direction:column;
  min-width:0
}

.ct-title {
  font-size:.82rem;
  line-height:1.1;
  color:#F4F8FF;
  letter-spacing:.01em
}

.ct-sub {
  font-size:.62rem;
  color:var(--t3);
  font-family:'DM Sans',sans-serif;
  font-weight:500;
  line-height:1.35;
  letter-spacing:.01em
}

.ct-arr {
  font-size:.9rem;
  color:var(--t3);
  transition:transform .22s,color .2s
}

.calc-open .ct-arr {
  transform:rotate(180deg);
  color:var(--green)
}

.calc-body {
  display:none;
  padding:.92rem 1rem 1rem;
  border-top:1px solid rgba(255,255,255,.04);
  background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.24))
}

.calc-open .calc-body {
  display:block
}

.calc-inp-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:.9rem;
  flex-wrap:wrap
}

.ci-lbl {
  font-size:.68rem;
  color:var(--t2);
  white-space:nowrap
}

.bgt-inp {
  background:rgba(0,0,0,.48);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 12px;
  color:var(--green);
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-size:1rem;
  width:112px;
  outline:none;
  transition:border-color .2s,box-shadow .2s,opacity .2s,background .2s
}

.bgt-inp:focus {
  border-color:var(--gborder);
  box-shadow:0 0 0 3px rgba(0,232,122,.10)
}

.bgt-inp.locked {
  background:rgba(0,232,122,.08);
  border-color:var(--gborder);
  color:#B7FFD8;
  opacity:1
}

.bgt-inp.local-override {
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  color:var(--t)
}

.calc-go {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--green);
  color:#04080D;
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.02em;
  border:none;
  padding:10px 18px;
  border-radius:999px;
  cursor:pointer;
  transition:all .2s;
  margin-left:auto;
  white-space:nowrap;
  min-height:42px;
  box-shadow:0 8px 20px rgba(0,232,122,.16)
}

.calc-go:hover {
  box-shadow:0 0 16px rgba(0,232,122,.34);
  transform:translateY(-1px)
}

.calc-copy {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:transparent;
  border:1px solid rgba(255,255,255,.10);
  color:var(--t2);
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.68rem;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:all .2s;
  min-height:42px
}

.calc-copy:hover {
  border-color:var(--gborder);
  color:var(--green);
  background:rgba(0,232,122,.04)
}

.calc-status {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  padding:.82rem .88rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.18))
}

.calc-status.on {
  border-color:var(--gborder);
  background:linear-gradient(135deg,rgba(0,232,122,.14),rgba(0,232,122,.05))
}

.calc-status.vb-on {
  border-color:rgba(167,139,250,.34);
  background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(167,139,250,.07))
}

.cs-copy {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0
}

.cs-title {
  font-size:.72rem;
  font-weight:700;
  color:var(--t)
}

.cs-sub {
  font-size:.6rem;
  color:var(--t2);
  line-height:1.5;
  font-family:'DM Mono',monospace
}

.cs-on .cs-title {
  color:var(--green)
}

.cs-on.vb .cs-title {
  color:#D5B7FF
}

.calc-stakes {
  display:none;
  flex-direction:column;
  gap:7px
}

.calc-stakes.show {
  display:flex
}

.stake-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.20));
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:.62rem .72rem;
  transition:border-color .2s,transform .2s;
  gap:10px
}

.stake-line:hover {
  border-color:rgba(255,255,255,.16);
  transform:translateY(-1px)
}

.sl-info {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0
}

.sl-lbl {
  font-size:.63rem;
  color:var(--t2);
  line-height:1.35
}

.sl-bookie {
  font-size:.58rem;
  padding:2px 7px;
  border-radius:999px;
  display:inline-block;
  font-weight:700;
  margin-top:2px;
  width:max-content
}

.sl-val {
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-size:1rem;
  color:var(--t);
  white-space:nowrap
}

.profit-summary {
  background:linear-gradient(135deg,rgba(0,232,122,.14),rgba(0,232,122,.06));
  border:1px solid var(--gborder);
  border-radius:12px;
  padding:.75rem .82rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
  box-shadow:0 12px 24px rgba(0,232,122,.08)
}

.profit-summary.vb-s {
  background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(167,139,250,.08));
  border-color:rgba(167,139,250,.34);
  box-shadow:0 12px 24px rgba(124,58,237,.08)
}

.ps-left {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0
}

.ps-lbl {
  font-size:.7rem;
  color:var(--green);
  font-weight:700
}

.ps-sub {
  font-size:.58rem;
  color:rgba(0,232,122,.58);
  font-family:'DM Mono',monospace;
  line-height:1.45
}

.ps-val {
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-size:1.12rem;
  color:var(--green);
  white-space:nowrap
}

.vb-why-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:2px
}

.vb-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:.68rem .76rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.18))
}

.vb-row span {
  font-size:.63rem;
  color:var(--t2);
  line-height:1.4
}

.vb-row strong {
  font-family:'DM Sans',sans-serif;
  font-size:.9rem;
  color:var(--t);
  font-weight:800;
  text-align:right
}

.vb-row strong.purple {
  color:#D5B7FF
}

.vb-row strong.green {
  color:var(--green)
}

.vb-row strong.yellow {
  color:#F6D268
}

.vb-note {
  margin-top:10px;
  padding:.72rem .82rem;
  border-radius:12px;
  border:1px solid rgba(167,139,250,.22);
  background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(167,139,250,.06));
  font-size:.67rem;
  line-height:1.55;
  color:#D7C8F5
}

.vb-note strong {
  color:#F0E7FF
}

.vb-mini {
  font-size:.58rem;
  color:rgba(213,183,255,.72);
  font-family:'DM Mono',monospace;
  line-height:1.45
}

/* CARD ACTIONS */
.card-actions {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  gap:0;
  border-top:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.015)
}

.ca-btn {
  flex:1;
  background:none;
  border:none;
  border-right:1px solid rgba(255,255,255,.04);
  padding:.7rem .45rem;
  cursor:pointer;
  font-size:.72rem;
  color:#93A6BB;
  transition:all .2s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-family:'DM Sans',sans-serif;
  font-weight:500
}

.ca-btn:last-child {
  border-right:none
}

.ca-btn:hover {
  color:var(--t);
  background:rgba(255,255,255,.035)
}

.ca-btn.fav-on {
  color:#FBBF24
}

.ca-btn.fav-on:hover {
  color:#F59E0B;
  background:rgba(251,191,36,.06)
}

.ca-btn.alert-on {
  color:#F6D268
}

.ca-btn.alert-on:hover {
  color:#F6D268;
  background:rgba(246,210,104,.08)
}

.ca-btn.played-on {
  color:var(--green);
  background:rgba(0,232,122,.06)
}

.ca-btn.played-on:hover {
  color:var(--green);
  background:rgba(0,232,122,.10)
}

.plan.current-plan {
  border-color:var(--gborder);
  box-shadow:0 0 0 1px rgba(0,232,122,.08),0 18px 38px rgba(0,232,122,.08)
}

.plan.current-plan .pname,.plan.current-plan .pprice {
  color:var(--green)
}

.pbtn:disabled {
  opacity:.58;
  cursor:not-allowed;
  box-shadow:none
}

.saved-item {
  padding:.88rem 1.05rem;
  border-bottom:1px solid var(--b);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.9rem
}

.saved-item:last-child {
  border-bottom:none
}

.saved-main {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0
}

.saved-title {
  font-size:.8rem;
  font-weight:600;
  color:var(--t)
}

.saved-sub {
  font-size:.68rem;
  color:var(--t2);
  line-height:1.45
}

.saved-tags {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:2px
}

.saved-tag {
  font-size:.62rem;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--b);
  color:var(--t2)
}

.saved-tag.g {
  border-color:var(--gborder);
  color:var(--green);
  background:var(--gdim)
}

.saved-tag.w {
  border-color:rgba(246,210,104,.28);
  color:#F6D268;
  background:rgba(246,210,104,.08)
}

.saved-actions {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end
}

.saved-actions .btn-g {
  padding:5px 10px;
  font-size:.72rem
}

.profile-empty {
  padding:1rem 1.05rem;
  font-size:.78rem;
  color:var(--t3);
  line-height:1.55
}

.plan-switch-list {
  display:flex;
  flex-direction:column;
  gap:8px
}

.sidebar-note {
  font-size:.72rem;
  color:var(--t2);
  line-height:1.55
}

@media(max-width:720px) {
  .profit-banner {
    grid-template-columns:1fr;
    gap:.55rem
  }
  .confidence {
    align-items:flex-start;
    min-width:0
  }
  .signal-row {
    grid-template-columns:1fr 1fr
  }
  .signal-pill:last-child {
    grid-column:1 / -1
  }
  .calc-go {
    margin-left:0
  }
}

@media(max-width:560px) {
  .card-hero {
    height:112px
  }
  .hero-league {
    max-width:68%
  }
  .profit-banner {
    padding:.74rem .78rem .62rem
  }
  .pb-left {
    flex-direction:column;
    gap:.48rem
  }
  .signal-row {
    padding:0 .78rem .7rem
  }
  .odds-sec {
    padding:.76rem .78rem .82rem;
    gap:8px
  }
  .oc-out {
    font-size:.61rem
  }
  .oc-odd {
    font-size:1.34rem
  }
  .calc-inp-row {
    align-items:stretch
  }
  .bgt-inp {
    width:84px
  }
  .calc-copy,.calc-go {
    flex:1;
    justify-content:center
  }
  .budget-source-tag {
    margin-left:0
  }
  .sc-tutorial-link {
    width:100%;
    justify-content:center
  }
  .card-actions {
    grid-template-columns:repeat(2,1fr)
  }
  .ca-btn:nth-child(2) {
    border-right:none
  }
  .ca-btn:nth-child(-n+2) {
    border-bottom:1px solid rgba(255,255,255,.04)
  }
}

.hero-legal-strip {
  margin-top:.85rem;
  font-size:.72rem;
  color:var(--t2);
  background:rgba(255,255,255,.03);
  border:1px solid var(--b);
  border-radius:999px;
  padding:7px 14px;
  max-width:760px;
  animation:fu .7s .45s ease both
}

.region-note {
  padding:.58rem 3%;
  border-bottom:1px solid var(--b3);
  background:rgba(255,255,255,.015);
  font-size:.73rem;
  color:var(--t2)
}

.region-note strong {
  color:var(--t);
  font-weight:700
}

.region-note.clean {
  background:rgba(246,210,104,.07);
  color:#E8D8A5;
  border-bottom-color:rgba(246,210,104,.12)
}

.region-note.clean strong {
  color:#F6D268
}

/* ============ LANDING ============ */
.hero {
  min-height:calc(100vh - 62px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:84px 4% 54px;
  text-align:left
}

.hbadge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--gdim);
  border:1px solid var(--gborder);
  padding:5px 14px;
  border-radius:999px;
  font-size:.76rem;
  color:var(--green);
  margin-bottom:1.7rem;
  animation:fu .7s ease both
}

.bdot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  animation:pulse 1.6s ease-in-out infinite
}

.hero h1 {
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:-1px;
  color:var(--t);
  line-height:1.1;
  max-width:980px;
  text-wrap:balance;
  animation:fu .7s .1s ease both
}

.hero h1 em {
  font-style:normal;
  background:linear-gradient(130deg,var(--green),#00FFB3);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}

.hero-sub {
  margin:1.12rem auto 0;
  max-width:760px;
  color:var(--t2);
  font-size:.98rem;
  line-height:1.68;
  font-weight:300;
  animation:fu .7s .2s ease both
}

.hero-btns {
  display:flex;
  gap:11px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:1.55rem;
  animation:fu .7s .3s ease both
}

.btn-hero {
  background:var(--green);
  color:#04080D;
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.92rem;
  border:none;
  padding:13px 30px;
  border-radius:999px;
  cursor:pointer;
  transition:all .25s;
  box-shadow:0 0 24px rgba(0,232,122,.32)
}

.btn-hero:hover {
  transform:translateY(-2px);
  box-shadow:0 0 42px rgba(0,232,122,.52)
}

.btn-ol {
  background:transparent;
  color:var(--t);
  font-family:'DM Sans',sans-serif;
  font-size:.92rem;
  border:1px solid var(--b);
  padding:12px 25px;
  border-radius:999px;
  cursor:pointer;
  transition:all .25s
}

.btn-ol:hover {
  border-color:var(--b2);
  background:rgba(255,255,255,.04)
}

.sstrip {
  display:flex;
  max-width:760px;
  width:100%;
  border:1px solid var(--b);
  border-radius:14px;
  overflow:hidden;
  background:rgba(9,16,24,.78);
  backdrop-filter:blur(20px);
  margin-top:1.8rem;
  animation:fu .7s .4s ease both
}

.si {
  flex:1;
  padding:1.1rem .85rem;
  text-align:center;
  border-right:1px solid var(--b)
}

.si:last-child {
  border-right:none
}

.sv {
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:.02em;
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-size:1.7rem;
  color:var(--t);
  line-height:1;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:-.03em
}

.sv em {
  color:var(--green);
  font-style:normal
}

.sl {
  font-size:.68rem;
  color:var(--t2);
  margin-top:4px
}

.ticker-wrap {
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(90deg,rgba(7,15,24,.94),rgba(4,10,18,.94)),
    var(--bg2);
  padding:14px 0;
  isolation:isolate;
}

.ticker-wrap::before,
.ticker-wrap::after {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:88px;
  z-index:2;
  pointer-events:none;
}

.ticker-wrap::before {
  left:0;
  background:linear-gradient(90deg,rgba(4,8,13,1) 0%,rgba(4,8,13,.78) 34%,rgba(4,8,13,0) 100%);
}

.ticker-wrap::after {
  right:0;
  background:linear-gradient(270deg,rgba(4,8,13,1) 0%,rgba(4,8,13,.78) 34%,rgba(4,8,13,0) 100%);
}

.ticker-track {
  display:flex;
  align-items:center;
  animation:tick 38s linear infinite;
  width:max-content;
  will-change:transform;
}

.ticker-wrap:hover .ticker-track {
  animation-play-state:paused;
}

@keyframes tick {
  from {
    transform:translateX(0);
  }
  to {
    transform:translateX(-50%);
  }
}

.ti {
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:0 2rem;
  color:var(--t2);
  white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.06);
  position:relative;
  font-size:.8rem;
}

.ti strong {
  color:var(--t);
  font-weight:700;
  letter-spacing:-.015em;
}

.ti-main,
.ti-meta {
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.ti-main {
  min-width:max-content;
}

.ti-angle {
  color:#B8C5D6;
}

.ti-meta {
  gap:8px;
}

.ti-scope,
.ti-fresh {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
  font-size:.68rem;
  color:var(--t3);
}

.ti-fresh {
  color:#A7B8CC;
  background:rgba(255,255,255,.045);
}

.ti-sep {
  color:rgba(255,255,255,.12);
  font-size:.72rem;
}

.ti-p {
  color:var(--green);
  font-weight:800;
  font-family:'DM Sans',sans-serif;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:-.02em;
  font-size:.94rem;
  text-shadow:0 0 16px rgba(0,232,122,.18);
}

.tdot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  flex-shrink:0;
  box-shadow:0 0 12px rgba(0,232,122,.42);
}

.ti-kind {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  font-size:.68rem;
  font-family:'Syne',sans-serif;
  font-weight:700;
  letter-spacing:.25px;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.ti-kind-value {
  color:#E8D6FF;
  background:linear-gradient(135deg,rgba(167,139,250,.18),rgba(124,92,255,.12));
  border-color:rgba(167,139,250,.28);
}

.ti-kind-sure {
  color:var(--green);
  background:linear-gradient(135deg,rgba(0,232,122,.12),rgba(0,232,122,.06));
  border-color:rgba(0,232,122,.22);
}

body[data-theme="light"] .ticker-wrap {
  border-top-color:rgba(19,37,59,.08);
  border-bottom-color:rgba(19,37,59,.08);
  background:
    linear-gradient(90deg,rgba(255,255,255,.88),rgba(245,249,253,.88)),
    var(--bg2);
}

body[data-theme="light"] .ticker-wrap::before {
  background:linear-gradient(90deg,rgba(244,248,252,1) 0%,rgba(244,248,252,.84) 34%,rgba(244,248,252,0) 100%);
}

body[data-theme="light"] .ticker-wrap::after {
  background:linear-gradient(270deg,rgba(244,248,252,1) 0%,rgba(244,248,252,.84) 34%,rgba(244,248,252,0) 100%);
}

body[data-theme="light"] .ti {
  border-right-color:rgba(19,37,59,.08);
}

body[data-theme="light"] .ti-scope,
body[data-theme="light"] .ti-fresh {
  background:rgba(255,255,255,.78);
  border-color:rgba(19,37,59,.08);
}

@media(max-width:900px) {
  .ticker-wrap::before,
  .ticker-wrap::after {
    width:54px;
  }

  .ti {
    gap:10px;
    padding:0 1.35rem;
    min-height:40px;
    font-size:.74rem;
  }

  .ti-kind {
    min-height:24px;
    padding:0 10px;
    font-size:.62rem;
  }

  .ti-scope,
  .ti-fresh {
    min-height:22px;
    padding:0 8px;
    font-size:.62rem;
  }

  .ti-p {
    font-size:.84rem;
  }
}

@media(max-width:640px) {
  .ticker-wrap {
    padding:12px 0;
  }

  .ticker-wrap::before,
  .ticker-wrap::after {
    width:26px;
  }

  .ti {
    gap:9px;
    padding:0 1rem;
    min-height:36px;
    font-size:.7rem;
  }

  .ti-kind {
    min-height:22px;
    padding:0 9px;
    font-size:.58rem;
  }

  .ti-scope,
  .ti-fresh {
    display:none;
  }

  .ti-sep {
    display:none;
  }

  .ti-p {
    font-size:.8rem;
  }
}

.ti-kind {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 9px;
  border-radius:999px;
  font-size:.62rem;
  font-family:'Syne',sans-serif;
  font-weight:700;
  letter-spacing:.3px;
  border:1px solid var(--b);
  white-space:nowrap
}

.ti-kind-value {
  color:#E8D6FF;
  background:rgba(167,139,250,.14);
  border-color:rgba(167,139,250,.28)
}

.ti-kind-sure {
  color:var(--green);
  background:rgba(0,232,122,.10);
  border-color:rgba(0,232,122,.22)
}

.home-upcoming-wrap {
  padding:22px 0 10px;
  border-bottom:1px solid var(--b);
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.01))
}

.home-upcoming-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px
}

.home-upcoming-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--gborder);
  background:var(--gdim);
  color:var(--green);
  font-family:'Syne',sans-serif;
  font-size:.74rem;
  font-weight:700;
  white-space:nowrap
}

.home-upcoming-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}

.hu-card {
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.12));
  border:1px solid var(--b);
  border-radius:14px;
  padding:14px 14px 12px;
  min-width:0;
  box-shadow:0 12px 28px rgba(0,0,0,.16)
}

.hu-top {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  min-width:0
}

.hu-sport {
  font-size:1rem;
  line-height:1;
  flex-shrink:0
}

.hu-league {
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--t3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.hu-match {
  font-family:'Syne',sans-serif;
  font-size:.88rem;
  font-weight:700;
  line-height:1.35;
  color:var(--t);
  min-height:2.4em
}

.hu-foot {
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}

.hu-time {
  color:var(--green);
  font-family:'DM Mono',monospace;
  font-size:.72rem
}

.hu-note {
  color:var(--t3);
  font-size:.66rem;
  text-align:right
}

@media(max-width:980px) {
  .home-upcoming-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:700px) {
  .home-upcoming-head {
    flex-direction:column;
    align-items:flex-start
  }
  .home-upcoming-grid {
    grid-template-columns:1fr
  }
}

body[data-theme="light"] .home-upcoming-wrap {
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.42))
}

body[data-theme="light"] .hu-card {
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,248,252,.92));
  border-color:rgba(19,37,59,.09);
  box-shadow:0 14px 30px rgba(18,37,59,.05)
}

body[data-theme="light"] .hu-league,
body[data-theme="light"] .hu-note {
  color:#7a8ea5
}


.cnt {
  max-width:1060px;
  margin:0 auto;
  padding:0 4%
}

.pad {
  padding:80px 0
}

.sl2 {
  font-size:.65rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--green);
  font-weight:600;
  margin-bottom:.6rem
}

.stitle {
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:-1px;
  color:var(--t);
  line-height:1.1;
  text-wrap:balance
}

.title-num {
  display:inline-block;
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:-.03em;
  line-height:1;
  vertical-align:baseline;
  transform:translateY(.02em);
  margin-right:.06em
}

.ssub {
  color:var(--t2);
  font-size:.92rem;
  line-height:1.75;
  font-weight:300;
  margin-top:.6rem;
  max-width:410px
}

.how-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;
  margin-top:2.5rem
}

.hc {
  background:var(--bg2);
  border:1px solid var(--b);
  border-radius:14px;
  padding:1.6rem 1.4rem;
  transition:all .3s;
  position:relative;
  overflow:hidden
}

.hc::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  opacity:0;
  transition:opacity .3s
}

.hc:hover {
  border-color:var(--gborder);
  transform:translateY(-3px)
}

.hc:hover::before {
  opacity:1
}

.hn {
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-size:3rem;
  color:rgba(0,232,122,.08);
  line-height:.92;
  margin-bottom:.8rem;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:-.04em
}

.hi {
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.95rem;
  border-radius:14px;
  border:1px solid rgba(0,232,122,.22);
  background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.12),transparent 34%), linear-gradient(180deg,rgba(0,232,122,.14),rgba(0,232,122,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 24px rgba(0,0,0,.18);
  color:var(--green);
}

.hi svg {
  width:24px;
  height:24px;
  stroke:currentColor;
  stroke-width:1.9;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(0,232,122,.16))
}

.hc h3 {
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:1rem;
  letter-spacing:-.2px;
  color:var(--t);
  margin-bottom:.42rem
}

.hc p {
  font-size:.81rem;
  color:var(--t2);
  line-height:1.65
}

.why-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:2.5rem
}

@media(max-width:660px) {
  .why-grid {
    grid-template-columns:1fr
  }
}

.wc {
  background:var(--bg2);
  border:1px solid var(--b);
  border-radius:14px;
  padding:1.5rem;
  transition:border-color .3s
}

.wc:hover {
  border-color:var(--gborder)
}

.wi {
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.9rem;
  border-radius:16px;
  border:1px solid rgba(0,232,122,.18);
  background: radial-gradient(circle at 28% 22%,rgba(255,255,255,.11),transparent 34%), linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,232,122,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 28px rgba(0,0,0,.20);
  color:var(--green);
}

.wi svg {
  width:26px;
  height:26px;
  stroke:currentColor;
  stroke-width:1.9;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(0,232,122,.14))
}

.wc p {
  font-size:.8rem;
  color:var(--t2);
  line-height:1.65
}

.ctbl {
  width:100%;
  border-collapse:collapse;
  margin-top:.75rem
}

.ctbl td {
  padding:.5rem 0;
  font-size:.77rem;
  border-bottom:1px solid var(--b)
}

.ctbl td:first-child {
  color:var(--t2)
}

.ctbl td:last-child {
  text-align:right
}

.ck {
  color:var(--green)
}

.pg {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  gap:14px;
  margin-top:2.5rem
}

.plan {
  background:var(--bg2);
  border:1px solid var(--b);
  border-radius:14px;
  padding:1.75rem;
  position:relative;
  transition:all .3s
}

.plan:hover {
  transform:translateY(-2px)
}

.plan.feat {
  border-color:var(--gborder);
  background:linear-gradient(145deg,rgba(0,232,122,.07),var(--bg2) 60%)
}

.pchip {
  position:absolute;
  top:-11px;
  left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:#04080D;
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.68rem;
  padding:3px 14px;
  border-radius:999px;
  white-space:nowrap
}

.pname {
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:1rem;
  letter-spacing:-.25px;
  color:var(--t);
  margin-bottom:.35rem
}

.pprice {
  display:inline-flex;
  align-items:flex-end;
  gap:.04em;
  font-size:2.3rem;
  line-height:1;
  color:var(--t)
}

.price-num {
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:-.04em;
  line-height:.92
}

.price-eur {
  font-family:'Syne',sans-serif;
  font-weight:800;
  line-height:.9;
  display:inline-block;
  transform:translateY(-.01em)
}

.pprice sub {
  font-size:.85rem;
  font-weight:400;
  color:var(--t2)
}

.pdesc {
  font-size:.78rem;
  color:var(--t2);
  margin:.5rem 0 1.2rem;
  line-height:1.5
}

.pfeats {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:1.5rem
}

.pfeats li {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.79rem;
  color:var(--t2)
}

.fck {
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--gdim);
  border:1px solid var(--gborder);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:.55rem;
  color:var(--green)
}

.fck.off {
  background:var(--b3);
  border-color:var(--b);
  color:transparent
}

.pbtn {
  width:100%;
  padding:10px;
  border-radius:999px;
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.81rem;
  cursor:pointer;
  transition:all .2s;
  border:none
}

.pbtn.ol {
  background:transparent;
  border:1px solid var(--b);
  color:var(--t)
}

.pbtn.ol:hover {
  border-color:var(--b2);
  background:rgba(255,255,255,.05)
}

.pbtn.fl {
  background:var(--green);
  color:#04080D
}

.pbtn.fl:hover {
  box-shadow:0 0 24px rgba(0,232,122,.38)
}

.faq-wrap {
  max-width:620px;
  margin:2.5rem auto 0
}

.faq-item {
  border-bottom:1px solid var(--b)
}

.faq-q {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.05rem 0;
  background:none;
  border:none;
  cursor:pointer;
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:.9rem;
  letter-spacing:-.2px;
  color:var(--t);
  text-align:left;
  gap:1rem;
  transition:color .2s
}

.faq-q:hover {
  color:var(--green)
}

.faq-ic {
  width:20px;
  height:20px;
  border:1px solid var(--b);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  color:var(--t2);
  flex-shrink:0;
  transition:all .22s
}

.faq-item.open .faq-ic {
  background:var(--gdim);
  border-color:var(--gborder);
  color:var(--green);
  transform:rotate(45deg)
}

.faq-a {
  font-size:.82rem;
  color:var(--t2);
  line-height:1.75;
  padding:0 0 1.05rem;
  display:none
}

.faq-item.open .faq-a {
  display:block
}

.cta-banner {
  margin:0 4% 70px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(0,232,122,.09),rgba(0,232,122,.03));
  border:1px solid var(--gborder);
  padding:3.5rem 2rem;
  text-align:center;
  position:relative;
  overflow:hidden
}

.cta-banner::before {
  content:'';
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,232,122,.1),transparent 70%);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none
}

.cta-banner h2 {
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:-1px;
  color:var(--t);
  line-height:1.1;
  margin-bottom:.7rem;
  text-wrap:balance
}

.cta-banner p {
  color:var(--t2);
  margin-bottom:1.7rem;
  max-width:360px;
  margin-left:auto;
  margin-right:auto
}

.cta-btns {
  display:flex;
  gap:11px;
  justify-content:center;
  flex-wrap:wrap
}

.social-hub {
  margin:0 4% 70px;
  padding:1.2rem;
  border:1px solid var(--b);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1.2rem;
  align-items:center
}

@media(max-width:860px) {
  .social-hub {
    grid-template-columns:1fr
  }
}

.social-hub-copy p {
  max-width:680px;
  color:var(--t2);
  font-size:.82rem;
  line-height:1.65;
  margin-top:.45rem
}

.social-hub-links,.footer-socials {
  display:flex;
  gap:.7rem;
  flex-wrap:wrap
}

.social-hub-links {
  justify-content:flex-end
}

@media(max-width:860px) {
  .social-hub-links {
    justify-content:flex-start
  }
}

footer {
  border-top:1px solid var(--b);
  padding:2.5rem 4%;
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:start;
  position:relative;
  z-index:1
}

@media(max-width:540px) {
  footer {
    grid-template-columns:1fr
  }
}

.fb p {
  font-size:.77rem;
  color:var(--t2);
  margin-top:.5rem;
  max-width:265px;
  line-height:1.6
}

.fside {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.95rem
}

@media(max-width:540px) {
  .fside {
    align-items:flex-start
  }
}

.flinks {
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  justify-content:flex-end
}

@media(max-width:540px) {
  .flinks {
    justify-content:flex-start
  }
}

.flinks a {
  font-size:.77rem;
  color:var(--t2);
  text-decoration:none;
  transition:color .2s;
  cursor:pointer
}

.flinks a:hover {
  color:var(--green)
}

.footer-socials {
  justify-content:flex-end
}

@media(max-width:540px) {
  .footer-socials {
    justify-content:flex-start
  }
}

.social-link {
  display:inline-flex;
  align-items:center;
  gap:.68rem;
  padding:.78rem .92rem;
  border-radius:14px;
  border:1px solid var(--b);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  text-decoration:none;
  color:var(--t);
  transition:transform .2s,border-color .2s,box-shadow .2s,background .2s,opacity .2s;
  min-width:168px
}

.social-link:hover {
  transform:translateY(-1px);
  border-color:var(--gborder);
  box-shadow:0 14px 30px rgba(0,232,122,.08);
  background:linear-gradient(180deg,rgba(0,232,122,.08),rgba(255,255,255,.015))
}

.social-link svg {
  width:18px;
  height:18px;
  flex-shrink:0;
  color:var(--green)
}

.social-link.is-placeholder {
  opacity:.88;
  border-style:dashed;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
  cursor:default
}

.social-link.is-placeholder:hover {
  transform:none;
  border-color:var(--b);
  box-shadow:none;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01))
}

.social-copy {
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1
}

.social-copy strong {
  font-size:.74rem;
  font-weight:700;
  color:var(--t)
}

.social-copy small {
  font-size:.64rem;
  color:var(--t3)
}

.fbot {
  border-top:1px solid var(--b);
  padding:1rem 4%;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.4rem;
  font-size:.69rem;
  color:var(--t3);
  position:relative;
  z-index:1
}

.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:all .6s ease
}

.reveal.visible {
  opacity:1;
  transform:translateY(0)
}

/* ============ AUTH ============ */
.auth-page {
  padding-top:62px;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:100px 4% 60px
}

.auth-box {
  width:100%;
  max-width:410px;
  background:var(--bg2);
  border:1px solid var(--b);
  border-radius:var(--rl);
  padding:2.3rem 1.9rem
}

.auth-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:1.1rem;
  color:var(--t);
  margin-bottom:1.7rem
}

.auth-logo em {
  color:var(--green);
  font-style:normal
}

.auth-tabs {
  display:flex;
  background:rgba(0,0,0,.35);
  border:1px solid var(--b);
  border-radius:999px;
  padding:2px;
  margin-bottom:1.7rem
}

.auth-tab {
  flex:1;
  text-align:center;
  padding:7px;
  border-radius:999px;
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.8rem;
  cursor:pointer;
  transition:all .2s;
  color:var(--t2);
  background:transparent;
  border:none
}

.auth-tab.active {
  background:var(--green);
  color:#04080D
}

.auth-form {
  display:flex;
  flex-direction:column;
  gap:.9rem
}

.fg {
  display:flex;
  flex-direction:column;
  gap:.38rem
}

.fl {
  font-size:.73rem;
  font-weight:500;
  color:var(--t2)
}

.fi {
  background:rgba(0,0,0,.38);
  border:1px solid var(--b);
  border-radius:8px;
  padding:9px 13px;
  color:var(--t);
  font-family:'DM Sans',sans-serif;
  font-size:.85rem;
  outline:none;
  transition:border-color .2s;
  width:100%
}

.fi:focus {
  border-color:var(--gborder)
}

.fi::placeholder {
  color:var(--t3)
}

.form-btn {
  background:var(--green);
  color:#04080D;
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.88rem;
  border:none;
  padding:11px;
  border-radius:999px;
  cursor:pointer;
  transition:all .25s;
  box-shadow:0 0 16px rgba(0,232,122,.22);
  margin-top:.4rem
}

.form-btn:hover {
  box-shadow:0 0 28px rgba(0,232,122,.38)
}

.fsep {
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:.25rem 0
}

.fsep::before,.fsep::after {
  content:'';
  flex:1;
  height:1px;
  background:var(--b)
}

.fsep span {
  font-size:.7rem;
  color:var(--t3)
}

.fsocial {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.fsoc {
  flex:1 1 150px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--b);
  border-radius:10px;
  padding:10px 12px;
  font-size:.77rem;
  color:var(--t2);
  cursor:pointer;
  transition:all .2s;
  text-align:center;
  font-family:'DM Sans',sans-serif
}

.fsoc:hover {
  border-color:var(--gborder);
  color:var(--t);
  background:rgba(0,232,122,.06)
}

.aswitch {
  text-align:center;
  font-size:.76rem;
  color:var(--t2);
  margin-top:.9rem
}

.aswitch span {
  color:var(--green);
  cursor:pointer;
  font-weight:500
}

.forgot {
  font-size:.71rem;
  color:var(--t3);
  cursor:pointer;
  text-align:right;
  margin-top:-.25rem
}

.forgot:hover {
  color:var(--green)
}

/* ============ PROFILE ============ */
.profile-page {
  padding-top:62px;
  min-height:100vh
}

.prof-head {
  background:linear-gradient(135deg,rgba(0,232,122,.07),transparent 60%);
  border-bottom:1px solid var(--b);
  padding:2.3rem 3%;
  display:flex;
  align-items:center;
  gap:1.8rem;
  flex-wrap:wrap
}

.av {
  width:68px;
  height:68px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--green),#00B860);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:1.5rem;
  color:#04080D;
  flex-shrink:0;
  position:relative
}

.av-badge {
  position:absolute;
  bottom:1px;
  right:1px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--green);
  border:2px solid var(--bg2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.5rem;
  color:#04080D;
  font-weight:800
}

.pi h2 {
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:1.3rem;
  color:var(--t);
  letter-spacing:-.3px
}

.pi p {
  font-size:.79rem;
  color:var(--t2);
  margin-top:.22rem
}

.pi-plan {
  background:var(--gdim);
  border:1px solid var(--gborder);
  color:var(--green);
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.69rem;
  padding:2px 11px;
  border-radius:999px;
  display:inline-block;
  margin-top:.45rem
}

.pa {
  margin-left:auto;
  display:flex;
  gap:7px;
  flex-wrap:wrap
}

.prof-layout {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:18px;
  padding:1.4rem 3% 60px;
  max-width:1060px;
  margin:0 auto
}

@media(max-width:820px) {
  .prof-layout {
    grid-template-columns:1fr
  }
}

.sc-cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:1.2rem
}

@media(max-width:680px) {
  .sc-cards {
    grid-template-columns:repeat(2,1fr)
  }
}

.scc {
  background:var(--bg2);
  border:1px solid var(--b);
  border-radius:var(--r);
  padding:.9rem
}

.scc-lbl {
  font-size:.62rem;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--t3);
  margin-bottom:.35rem
}

.scc-val {
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-size:1.5rem;
  color:var(--t);
  line-height:1
}

.scc-val.g {
  color:var(--green)
}

.scc-sub {
  font-size:.67rem;
  color:var(--t2);
  margin-top:.22rem
}

.sec-card {
  background:var(--bg2);
  border:1px solid var(--b);
  border-radius:var(--rl);
  overflow:hidden
}

.prof-panel .sec-card {
  background:var(--bg2);
  border:1px solid var(--b)
}

.prof-panel .sec-body {
  padding:1rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.85rem
}

.prof-panel .sch {
  padding:.9rem 1.1rem;
  border-bottom:1px solid var(--b);
  display:flex;
  align-items:center;
  justify-content:space-between
}

.prof-panel .sch h3 {
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:.92rem;
  letter-spacing:-.25px;
  color:var(--t)
}

.prof-panel .srow {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem
}

.prof-panel .slbl {
  font-size:.78rem;
  color:var(--t2)
}

.sch {
  padding:.9rem 1.1rem;
  border-bottom:1px solid var(--b);
  display:flex;
  align-items:center;
  justify-content:space-between
}

.sch h3 {
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:.92rem;
  letter-spacing:-.25px;
  color:var(--t)
}

.sall {
  font-size:.72rem;
  color:var(--green);
  cursor:pointer
}

.hit {
  padding:.8rem 1.1rem;
  border-bottom:1px solid var(--b);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  transition:background .2s
}

.hit:last-child {
  border-bottom:none
}

.hit:hover {
  background:rgba(255,255,255,.02)
}

.hl {
  display:flex;
  flex-direction:column;
  gap:2px
}

.hm {
  font-size:.79rem;
  font-weight:500;
  color:var(--t)
}

.hmt {
  font-size:.68rem;
  color:var(--t2)
}

.hr {
  text-align:right;
  flex-shrink:0
}

.hp {
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  font-size:.88rem;
  color:var(--green)
}

.hs {
  font-size:.67rem;
  color:var(--t3);
  margin-top:2px
}

.sidebar {
  display:flex;
  flex-direction:column;
  gap:13px
}

.psc {
  background:var(--bg2);
  border:1px solid var(--b);
  border-radius:var(--rl);
  overflow:hidden
}

.psch {
  padding:.85rem 1.05rem;
  border-bottom:1px solid var(--b);
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:.9rem;
  letter-spacing:-.2px;
  color:var(--t)
}

.pscb {
  padding:.95rem 1.05rem;
  display:flex;
  flex-direction:column;
  gap:.85rem
}

.srow {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem
}

.slbl {
  font-size:.78rem;
  color:var(--t2)
}

.tsw {
  position:relative;
  width:34px;
  height:19px;
  flex-shrink:0
}

.tsw input {
  opacity:0;
  width:0;
  height:0;
  position:absolute
}

.swt {
  position:absolute;
  inset:0;
  background:var(--b2);
  border-radius:999px;
  cursor:pointer;
  transition:all .25s
}

.swt::before {
  content:'';
  position:absolute;
  width:13px;
  height:13px;
  border-radius:50%;
  background:white;
  left:3px;
  top:3px;
  transition:transform .25s
}

.tsw input:checked+.swt {
  background:var(--green)
}

.tsw input:checked+.swt::before {
  transform:translateX(15px)
}

.ssel {
  background:rgba(0,0,0,.38);
  border:1px solid var(--b);
  border-radius:7px;
  padding:5px 9px;
  color:var(--t);
  font-family:'DM Sans',sans-serif;
  font-size:.76rem;
  cursor:pointer;
  outline:none;
  width:100%;
  margin-top:.15rem
}

.ssel:focus {
  border-color:var(--gborder)
}

.ssel option {
  background:#091018
}

.bk-grid {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:.3rem
}

.bk-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin-top:.35rem
}

.bk-action-buttons {
  display:flex;
  gap:6px;
  flex-wrap:wrap
}

.bk-mini-btn {
  font-size:.63rem;
  background:rgba(255,255,255,.05);
  border:1px solid var(--b);
  padding:4px 9px;
  border-radius:999px;
  color:var(--t2);
  cursor:pointer;
  transition:all .2s;
  font-family:'Syne',sans-serif;
  font-weight:700
}

.bk-mini-btn:hover {
  border-color:var(--gborder);
  color:var(--green);
  background:rgba(0,232,122,.05)
}

.bk-mini-note {
  font-size:.64rem;
  color:var(--t3);
  line-height:1.45
}

.bk-t {
  font-size:.65rem;
  background:rgba(255,255,255,.05);
  border:1px solid var(--b);
  padding:2px 8px;
  border-radius:5px;
  color:var(--t2);
  cursor:pointer;
  transition:all .2s
}

.bk-t.on {
  background:var(--gdim);
  border-color:var(--gborder);
  color:var(--green)
}

.bk-t.disabled {
  opacity:.42;
  cursor:not-allowed;
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.05);
  color:var(--t3)
}

.pscd {
  padding:.9rem 1.05rem;
  border-top:1px solid var(--b)
}

.dbtn {
  width:100%;
  padding:7px;
  background:rgba(255,77,77,.07);
  border:1px solid rgba(255,77,77,.18);
  border-radius:999px;
  color:#FF6B6B;
  font-family:'Syne',sans-serif;
  font-weight:600;
  font-size:.76rem;
  cursor:pointer;
  transition:all .2s
}

.dbtn:hover {
  background:rgba(255,77,77,.13)
}

.toast {
  position:fixed;
  bottom:22px;
  left:50%;
  transform:translateX(-50%) translateY(18px);
  background:var(--bg2);
  border:1px solid var(--gborder);
  border-radius:999px;
  padding:9px 20px;
  font-family:'Syne',sans-serif;
  font-weight:600;
  font-size:.79rem;
  color:var(--green);
  z-index:9900;
  opacity:0;
  transition:all .3s;
  pointer-events:none;
  white-space:nowrap
}

.toast.show {
  opacity:1;
  transform:translateX(-50%) translateY(0)
}

@media(max-width:900px) {
  .hero {
    padding:80px 4% 34px
  }
  .hero h1 {
    max-width:760px;
    font-size:clamp(1.6rem,4.4vw,2.2rem);
    line-height:1.1
  }
  .hero-sub {
    max-width:620px;
    font-size:.94rem
  }
  .sstrip {
    max-width:680px
  }
}

@media(max-width:640px) {
  .hero {
    padding:74px 5% 30px
  }
  .hero h1 {
    font-size:clamp(1.45rem,7.4vw,1.95rem);
    line-height:1.12;
    max-width:96%;
    letter-spacing:-.7px
  }
  .hero-sub {
    max-width:96%;
    font-size:.92rem;
    line-height:1.6
  }
  .hero-btns {
    margin-top:1.35rem
  }
  .sstrip {
    max-width:100%;
    margin-top:1.45rem
  }
}

@media(max-width:700px) {
  .nmid {
    display:none
  }
}

/* ============ THEMES ============ */
.theme-toggle {
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--b);
  background:rgba(255,255,255,.03);
  color:var(--t);
  cursor:pointer;
  font-family:'Syne',sans-serif;
  font-size:.76rem;
  font-weight:700;
  transition:all .22s;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.theme-toggle:hover {
  transform:translateY(-1px);
  border-color:var(--gborder);
  box-shadow:0 12px 24px rgba(0,232,122,.14);
}

.theme-toggle .theme-ic {
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  font-size:.78rem;
  line-height:1;
}

body[data-theme="light"] {
  --bg:#F4F8FC;
  --bg2:#FFFFFF;
  --bg3:#EEF4FA;
  --green:#00B86B;
  --gdim:rgba(0,184,107,.10);
  --gborder:rgba(0,184,107,.20);
  --b:rgba(18,37,59,.10);
  --b2:rgba(18,37,59,.16);
  --b3:rgba(18,37,59,.05);
  --t:#13253B;
  --t2:#587089;
  --t3:#8CA0B5;
  --hot:#F97316;
  --hot-dim:rgba(249,115,22,.10);
  --hot-border:rgba(249,115,22,.22);
  --vb:#7C5CFF;
  --vb-dim:rgba(124,92,255,.08);
  --vb-border:rgba(124,92,255,.20);
  background-color:var(--bg);
  background-image: radial-gradient(circle at 12% 10%,rgba(44,132,255,.10),transparent 30%), radial-gradient(circle at 86% 8%,rgba(0,184,107,.10),transparent 24%), radial-gradient(circle at 50% 115%,rgba(124,92,255,.08),transparent 34%), linear-gradient(180deg,#F7FBFF 0%,#F1F7FC 40%,#ECF4FB 100%);
}

body[data-theme="light"] .cursor {
  background:radial-gradient(circle at 35% 35%,#D9FFF0 0%,var(--green) 46%,#00985A 100%);
  border-color:rgba(19,37,59,.18);
  box-shadow:0 0 0 1px rgba(0,184,107,.14),0 0 18px rgba(0,184,107,.18);
}

body[data-theme="light"] .gbg {
  background-image: linear-gradient(rgba(19,37,59,.030) 1px,transparent 1px), linear-gradient(90deg,rgba(19,37,59,.030) 1px,transparent 1px);
}

body[data-theme="light"] .gbg::before {
  background: radial-gradient(circle at 15% 18%,rgba(44,132,255,.11),transparent 24%), radial-gradient(circle at 78% 12%,rgba(0,184,107,.08),transparent 22%), radial-gradient(circle at 50% 78%,rgba(124,92,255,.05),transparent 26%);
  opacity:.9;
}

body[data-theme="light"] .gbg::after {
  background:radial-gradient(ellipse 60% 45% at 50% 0%,rgba(0,184,107,.05) 0%,transparent 70%);
}

body[data-theme="light"] nav {
  background:rgba(255,255,255,.82);
  border-bottom-color:rgba(19,37,59,.08);
  box-shadow:0 12px 30px rgba(23,41,64,.06);
}

body[data-theme="light"] .sc-topbar, body[data-theme="light"] .sc-sub {
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 30px rgba(18,37,59,.05);
}

body[data-theme="light"] .sort-bar, body[data-theme="light"] .region-note, body[data-theme="light"] .ticker-wrap {
  background:rgba(255,255,255,.46);
}

body[data-theme="light"] .region-note.clean {
  background:rgba(246,210,104,.18);
}

body[data-theme="light"] .sstrip, body[data-theme="light"] .hc, body[data-theme="light"] .wc, body[data-theme="light"] .plan, body[data-theme="light"] .sec-card, body[data-theme="light"] .psc, body[data-theme="light"] .auth-box, body[data-theme="light"] .scanner-empty, body[data-theme="light"] .sb-card {
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,248,252,.92));
  border-color:rgba(19,37,59,.09);
  box-shadow:0 18px 40px rgba(18,37,59,.06);
}

body[data-theme="light"] .plan.feat, body[data-theme="light"] .current-plan {
  background:linear-gradient(145deg,rgba(0,184,107,.08),rgba(255,255,255,.96) 62%);
}

body[data-theme="light"] .cta-banner {
  background:linear-gradient(135deg,rgba(0,184,107,.08),rgba(44,132,255,.04));
  box-shadow:0 20px 45px rgba(18,37,59,.06);
}

body[data-theme="light"] .btn-g, body[data-theme="light"] .btn-ol, body[data-theme="light"] .sort-btn, body[data-theme="light"] .psel, body[data-theme="light"] .fi, body[data-theme="light"] .ssel, body[data-theme="light"] .bk-mini-btn, body[data-theme="light"] .bk-t, body[data-theme="light"] .saved-actions .btn-g, body[data-theme="light"] .calc-copy {
  background:rgba(255,255,255,.78);
  border-color:rgba(19,37,59,.10);
  color:var(--t2);
}

body[data-theme="light"] .btn-g:hover, body[data-theme="light"] .btn-ol:hover, body[data-theme="light"] .sort-btn:hover, body[data-theme="light"] .calc-copy:hover, body[data-theme="light"] .bk-mini-btn:hover, body[data-theme="light"] .bk-t:hover {
  background:rgba(255,255,255,.96);
}

body[data-theme="light"] .budget-g {
  background:rgba(0,184,107,.08);
}

body[data-theme="light"] .scan-btn, body[data-theme="light"] .btn-green, body[data-theme="light"] .btn-hero, body[data-theme="light"] .pbtn.fl, body[data-theme="light"] .form-btn, body[data-theme="light"] .calc-go {
  box-shadow:0 14px 28px rgba(0,184,107,.18);
}

body[data-theme="light"] .sc-loading, body[data-theme="light"] .calc-body {
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(236,244,251,.78));
}

body[data-theme="light"] .signal-pill, body[data-theme="light"] .odd-cell, body[data-theme="light"] .stake-line, body[data-theme="light"] .vb-row, body[data-theme="light"] .saved-item, body[data-theme="light"] .hit {
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(242,247,252,.88));
  border-color:rgba(19,37,59,.08);
}

body[data-theme="light"] .cap-row, body[data-theme="light"] .calc-toggle, body[data-theme="light"] .card-actions {
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(240,246,251,.88));
}

body[data-theme="light"] .hero-watermark {
  opacity:.045
}

body[data-theme="light"] .card-hero-photo {
  filter:saturate(1.02) contrast(1.02) brightness(1.02);
  opacity:.28;
}

body[data-theme="light"] .card-hero-bg::before {
  background:linear-gradient(90deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 35%,rgba(255,255,255,.08) 65%,rgba(255,255,255,.46) 100%);
}

body[data-theme="light"] .card-hero-bg::after {
  background:linear-gradient(to bottom,rgba(255,255,255,.06) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.42) 70%,rgba(255,255,255,.92) 100%);
}

body[data-theme="light"] .league-chip, body[data-theme="light"] .hero-timer {
  background:rgba(255,255,255,.68);
  border-color:rgba(19,37,59,.08);
  color:rgba(19,37,59,.72);
}

body[data-theme="light"] .team-name, body[data-theme="light"] .match-time, body[data-theme="light"] .match-date, body[data-theme="light"] .vs-txt {
  text-shadow:none;
}

body[data-theme="light"] .team-name {
  color:#24384F
}

body[data-theme="light"] .match-time {
  color:#56708B
}

body[data-theme="light"] .vs-txt {
  color:rgba(19,37,59,.35)
}

body[data-theme="light"] .hero-legal-strip {
  background:rgba(255,255,255,.72);
  border-color:rgba(19,37,59,.08);
}

body[data-theme="light"] .faq-item {
  border-bottom-color:rgba(19,37,59,.08)
}

body[data-theme="light"] .faq-ic {
  border-color:rgba(19,37,59,.12);
  background:rgba(255,255,255,.7);
}

body[data-theme="light"] .oc-bookie.has-logo {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 20px rgba(18,37,59,.08);
}

body[data-theme="light"] .theme-toggle {
  background:rgba(255,255,255,.72);
  border-color:rgba(19,37,59,.09);
}

body[data-theme="light"] .theme-toggle .theme-ic {
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(240,246,251,.9));
}

body[data-theme="light"] .scdash-shell {
  background:
    radial-gradient(circle at 0% 0%, rgba(0,184,107,.05), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,248,252,.94));
  border-color: rgba(19,37,59,.09);
  box-shadow: 0 18px 40px rgba(18,37,59,.06);
}

body[data-theme="light"] .scdash-card {
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(242,247,252,.9));
  border-color: rgba(19,37,59,.08);
}

body[data-theme="light"] .scdash-mode {
  background: rgba(255,255,255,.82);
  border-color: rgba(19,37,59,.08);
}

body[data-theme="light"] .scdash-lbl {
  color: #7f95aa;
}

body[data-theme="light"] .scdash-sub {
  color: #587089;
}

@media(max-width:1100px) {
  .hero-shell {
    grid-template-columns:1fr;
    gap:22px
  }
  .hero-side {
    justify-content:center
  }
  .hero-copy {
    max-width:860px
  }
  .hero-screen-frame {
    max-width:760px
  }
  .hero-copy .sstrip {
    max-width:100%
  }
}

@media(max-width:900px) {
  .hero {
    padding:84px 4% 40px
  }
  .hero-copy {
    align-items:center;
    text-align:center
  }
  .hero-copy .hero-sub,.hero-copy .hero-btns,.hero-copy .hero-legal-strip,.hero-copy .sstrip {
    margin-left:auto;
    margin-right:auto
  }
  .hero-brandline {
    margin-left:auto;
    margin-right:auto
  }
  .hero-side {
    justify-content:center
  }
}

@media(max-width:640px) {
  .hero {
    padding:74px 5% 32px
  }
  .hero-shell {
    gap:18px
  }
  .hero-screen-frame {
    padding:12px;
    border-radius:22px
  }
  .hero-screen-img {
    border-radius:16px
  }
  .logo {
    gap:8px;
    font-size:1.18rem
  }
  .lm {
    width:42px;
    height:42px
  }
  .hero-brandline {
    gap:12px;
    padding:7px 14px
  }
  .hero-brandline span {
    font-size:1.18rem;
    letter-spacing:.4px
  }
  .hero-brand-logo {
    width:40px;
    height:40px
  }
}

body[data-theme="light"] .hero-brandline {
  background:rgba(255,255,255,.72);
  border-color:rgba(19,37,59,.08);
  box-shadow:0 14px 30px rgba(18,37,59,.08)
}

body[data-theme="light"] .hero-screen-frame {
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(241,247,252,.94));
  border-color:rgba(19,37,59,.10);
  box-shadow:0 28px 60px rgba(18,37,59,.10)
}

body[data-theme="light"] .hero-screen-img {
  border-color:rgba(19,37,59,.08);
  box-shadow:0 20px 40px rgba(18,37,59,.12)
}

body[data-theme="light"] .hero-screen-top {
  color:var(--t2)
}

body[data-theme="light"] .logo-mark, body[data-theme="light"] .hero-brand-logo {
  filter:drop-shadow(0 0 10px rgba(0,184,107,.18))
}

body.legal-open {
  overflow:hidden
}

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

.legal-modal.show {
  display:block
}

.legal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(3,6,10,.76);
  backdrop-filter:blur(8px)
}

.legal-panel {
  position:relative;
  z-index:1;
  width:min(760px,calc(100% - 28px));
  max-height:calc(100vh - 40px);
  overflow:auto;
  margin:20px auto;
  background:var(--bg2);
  border:1px solid var(--b);
  border-radius:22px;
  padding:1.2rem 1.2rem 1.35rem;
  box-shadow:0 30px 80px rgba(0,0,0,.45)
}

.legal-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--b)
}

.legal-kicker {
  font-size:.72rem;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:.28rem
}

.legal-head h3 {
  font-family:'Syne',sans-serif;
  font-size:1.25rem;
  line-height:1.08;
  color:var(--t)
}

.legal-close {
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--b);
  background:rgba(255,255,255,.03);
  color:var(--t);
  cursor:pointer;
  font-size:1rem;
  transition:all .2s
}

.legal-close:hover {
  border-color:var(--gborder);
  color:var(--green)
}

.legal-meta {
  font-size:.73rem;
  color:var(--t3);
  padding:.8rem 0 .2rem
}

.legal-body {
  font-size:.83rem;
  color:var(--t2);
  line-height:1.72
}

.legal-body h4 {
  font-family:'Syne',sans-serif;
  font-size:.92rem;
  color:var(--t);
  margin:1rem 0 .35rem
}

.legal-body p+p {
  margin-top:.7rem
}

/* ── Bouton déconnexion ── */
#nav-btn-logout {
  transition:color .2s,border-color .2s,background .2s
}

#nav-btn-logout:hover {
  background:rgba(255,95,95,.08)
}

/* ── Session logs ── */
#session-logs-list .profile-empty {
  font-size:.78rem;
  color:var(--t3);
  padding:.3rem 0
}

/* ── Avatar cliquable ───────────────────────────────────────────────────── */
.av-wrap {
  position:relative;
  cursor:pointer;
  width:68px;
  height:68px;
  flex-shrink:0
}

.av-wrap .av {
  width:100%;
  height:100%
}

.av-overlay {
  position:absolute;
  inset:0;
  border-radius:50%;
  background:rgba(0,0,0,.52);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  opacity:0;
  transition:opacity .2s
}

.av-wrap:hover .av-overlay {
  opacity:1
}

.av-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%
}

/* ── Modales profil ─────────────────────────────────────────────────────── */
.pf-modal {
  position:fixed;
  inset:0;
  z-index:55;
  display:none
}

.pf-modal.show {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px
}

.pf-backdrop {
  position:absolute;
  inset:0;
  background:rgba(3,6,10,.78);
  backdrop-filter:blur(8px)
}

.pf-panel {
  position:relative;
  z-index:1;
  width:100%;
  background:var(--bg2);
  border:1px solid var(--b);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  max-height:90vh;
  display:flex;
  flex-direction:column
}

.pf-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 1.15rem;
  border-bottom:1px solid var(--b);
  font-family:'Syne',sans-serif;
  font-weight:600;
  font-size:.95rem;
  color:var(--t)
}

.pf-close {
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid var(--b);
  background:rgba(255,255,255,.03);
  color:var(--t2);
  cursor:pointer;
  font-size:.9rem;
  transition:all .2s
}

.pf-close:hover {
  color:var(--t);
  border-color:var(--gborder)
}

.pf-body {
  padding:1.1rem 1.15rem 1.2rem;
  overflow-y:auto
}

/* ── Device log card ────────────────────────────────────────────────────── */
.device-card {
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:.65rem .75rem;
  background:var(--gdim);
  border:1px solid var(--b);
  border-radius:10px
}

.device-card.current {
  border-color:rgba(0,232,122,.22);
  background:rgba(0,232,122,.05)
}

.device-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}

.device-name {
  font-size:.83rem;
  font-weight:600;
  color:var(--t)
}

.device-badge {
  font-size:.65rem;
  color:var(--green);
  font-weight:700;
  letter-spacing:.3px
}

.device-date {
  font-size:.72rem;
  color:var(--t2)
}

.device-ip {
  font-size:.71rem;
  color:var(--t3);
  font-family:'DM Mono',monospace;
  letter-spacing:.4px
}

.device-del {
  margin-top:6px;
  padding:4px 12px;
  font-size:.72rem;
  background:rgba(255,77,77,.07);
  border:1px solid rgba(255,77,77,.18);
  border-radius:999px;
  color:#FF6B6B;
  cursor:pointer;
  transition:all .2s;
  font-family:'DM Sans',sans-serif
}

.device-del:hover {
  background:rgba(255,77,77,.15)
}

/* ── Password strength ──────────────────────────────────────────────────── */
.pwd-weak {
  background:#ff5f5f
}

.pwd-medium {
  background:#f0a500
}

.pwd-strong {
  background:#00e87a
}

/* ── Subscription modal ─────────────────────────────────────────────────── */
.sub-plan-card {
  border:1px solid var(--b);
  border-radius:12px;
  padding:.9rem;
  cursor:pointer;
  transition:all .2s;
  background:var(--gdim)
}

.sub-plan-card:hover,.sub-plan-card.selected {
  border-color:var(--gborder);
  background:rgba(0,232,122,.06)
}

.sub-plan-card .sp-name {
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.95rem;
  color:var(--green)
}

.sub-plan-card .sp-price {
  font-size:.78rem;
  color:var(--t2);
  margin-top:2px
}

.sub-plan-card .sp-feat {
  font-size:.72rem;
  color:var(--t3);
  margin-top:5px;
  line-height:1.5
}

body[data-theme="light"] .pf-panel,.pf-body {
  scrollbar-width:thin
}

body[data-theme="light"] .device-card {
  background:rgba(0,0,0,.03)
}

/* ── Profile tabs ─────────────────────────────────────────────────────────── */
.prof-stats-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  padding:.9rem 3%;
  max-width:1100px;
  margin:0 auto
}

@media(max-width:680px) {
  .prof-stats-row {
    grid-template-columns:repeat(2,1fr)
  }
}

.prof-tabs-wrap {
  border-bottom:1px solid var(--b);
  padding:0 3%;
  max-width:1100px;
  margin:0 auto
}

.prof-tabs {
  display:flex;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none
}

.prof-tabs::-webkit-scrollbar {
  display:none
}

.prof-tab {
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  padding:.75rem 1.1rem;
  font-family:'Syne',sans-serif;
  font-size:.82rem;
  font-weight:600;
  color:var(--t3);
  cursor:pointer;
  white-space:nowrap;
  transition:all .2s;
  margin-bottom:-1px
}

.prof-tab:hover {
  color:var(--t2)
}

.prof-tab.active {
  color:var(--green);
  border-bottom-color:var(--green)
}

.prof-tab-content {
  padding:1.4rem 3% 60px;
  max-width:1100px;
  margin:0 auto
}

.prof-panel {
  display:none
}

.prof-panel.active {
  display:block
}

.prof-two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

@media(max-width:780px) {
  .prof-two-col {
    grid-template-columns:1fr
  }
}

.sec-body {
  padding:1rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.85rem
}

.form-row2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

@media(max-width:500px) {
  .form-row2 {
    grid-template-columns:1fr
  }
}

/* ── Payment ──────────────────────────────────────────────────────────────── */
.payment-card-empty {
  text-align:center;
  padding:1.5rem 0
}

.payment-badge {
  font-size:.68rem;
  font-weight:700;
  padding:3px 9px;
  border:1px solid var(--b);
  border-radius:6px;
  color:var(--t2);
  letter-spacing:.5px
}

.payment-method-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:.7rem .9rem;
  background:var(--gdim);
  border:1px solid var(--b);
  border-radius:10px
}

.payment-method-icon {
  font-size:1.4rem;
  width:32px;
  text-align:center
}

.payment-method-info {
  flex:1
}

.payment-method-name {
  font-size:.83rem;
  font-weight:600;
  color:var(--t)
}

.payment-method-sub {
  font-size:.72rem;
  color:var(--t3);
  margin-top:1px
}

.payment-method-del {
  font-size:.72rem;
  color:#ff5f5f;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px 8px;
  border-radius:6px;
  transition:background .2s
}

.payment-method-del:hover {
  background:rgba(255,95,95,.1)
}

.invoice-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.6rem 0;
  border-bottom:1px solid var(--b);
  font-size:.8rem
}

.invoice-row:last-child {
  border-bottom:none
}

.invoice-date {
  color:var(--t3)
}

.invoice-amount {
  font-weight:700;
  color:var(--green);
  font-family:'Syne',sans-serif
}

.invoice-dl {
  color:var(--t2);
  text-decoration:none;
  font-size:.72rem;
  border:1px solid var(--b);
  padding:2px 8px;
  border-radius:6px;
  transition:all .2s
}

.invoice-dl:hover {
  border-color:var(--gborder);
  color:var(--t)
}

/* ── Add card modal ───────────────────────────────────────────────────────── */
.stripe-field {
  background:rgba(0,0,0,.38);
  border:1px solid var(--b);
  border-radius:8px;
  padding:11px 13px;
  color:var(--t);
  font-family:'DM Sans',sans-serif;
  font-size:.85rem;
  transition:border-color .2s
}

.stripe-field:focus-within {
  border-color:var(--gborder)
}

#card-element {
  min-height:22px
}

body[data-theme="light"] .prof-tab {
  color:#6b7c8f
}

body[data-theme="light"] .prof-tab.active {
  color:var(--green)
}

body[data-theme="light"] .payment-badge {
  color:#4a5568;
  border-color:#d0d9e3
}

/* Appareils pleine largeur dans Mon compte */
#panel-infos .prof-two-col > .sec-card[style*="grid-column"] {
  grid-column:1/-1
}

.scc-sub {
  font-size:.67rem;
  color:var(--t2);
  margin-top:.22rem
}

/* ── Field hints / validation ─────────────────────────────────────────────── */
.field-hint {
  font-size:.68rem;
  margin-top:3px;
  min-height:14px;
  transition:color .2s
}

.field-hint.ok {
  color:var(--green)
}

.field-hint.err {
  color:#ff5f5f
}


/* ===== VALUE BET CLARITY BOOST ===== */
.value-card .pb-info {
  gap:8px;
}

.value-card .pb-type {
  color:#D7C6FF;
}

.value-card .pb-arb {
  position:relative;
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 12px 10px 46px;
  border-radius:12px;
  border:1px solid rgba(167,139,250,.34);
  background:linear-gradient(135deg,rgba(124,58,237,.20),rgba(167,139,250,.08));
  color:#F2ECFF;
  font-weight:700;
  box-shadow:0 10px 24px rgba(124,58,237,.10);
}

.value-card .pb-arb::before {
  content:'◈';
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,#7C3AED,#C084FC);
  color:#fff;
  font-size:.78rem;
  box-shadow:0 8px 18px rgba(124,58,237,.28);
}

.value-card .pb-arb strong,
.value-card .pb-arb b {
  color:#FFFFFF;
}

.value-card .odds-sec {
  position:relative;
  padding-top:.76rem;
}

.value-card .odds-sec::before {
  content:'Repère rapide : la case violette met en avant la value bet';
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(167,139,250,.28);
  background:rgba(167,139,250,.10);
  color:#E8DCFF;
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
}

.value-card .odd-cell:not(.vb-focus) {
  opacity:.72;
  filter:saturate(.82);
}

.value-card .odd-cell:not(.vb-focus):hover {
  opacity:.88;
  filter:saturate(.92);
}

.value-card .odd-cell.vb-focus {
  position:relative;
  overflow:visible;
  transform:translateY(-2px) scale(1.015);
  border-color:rgba(200,132,252,.78)!important;
  background:linear-gradient(180deg,rgba(124,58,237,.24) 0%,rgba(18,14,38,.98) 54%,rgba(8,8,18,.98) 100%)!important;
  box-shadow:
    0 0 0 2px rgba(167,139,250,.18),
    0 18px 40px rgba(110,60,180,.26),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  z-index:2;
}

.value-card .odd-cell.vb-focus::before {
  content:'VALUE';
  position:absolute;
  inset:auto;
  top:-12px;
  left:50%;
  right:auto;
  bottom:auto;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  min-height:0;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(233,222,255,.55);
  background:linear-gradient(135deg,#7C3AED,#C084FC);
  color:#FFFFFF;
  font-size:.5rem;
  font-weight:900;
  letter-spacing:1.1px;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(124,58,237,.32);
  z-index:4;
  white-space:nowrap;
}

.value-card .odd-cell.vb-focus::after {
  height:3px;
  background:linear-gradient(90deg,#F2E8FF,#C084FC)!important;
  box-shadow:0 0 16px rgba(167,139,250,.30);
}

.value-card .odd-cell.vb-focus .oc-lbl {
  color:#F2E8FF!important;
  text-shadow:0 0 14px rgba(167,139,250,.24);
}

.value-card .odd-cell.vb-focus .oc-odd {
  color:#FFFFFF;
  font-size:1.7rem;
  text-shadow:0 0 22px rgba(167,139,250,.20);
}

.value-card .odd-cell.vb-focus .oc-out {
  color:#E8DCFF;
}

.value-card .odd-cell.vb-focus .oc-bookie.has-logo {
  border:1px solid rgba(200,132,252,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 24px rgba(124,58,237,.20);
}

.value-card .oc-vb-tag {
  padding:4px 10px;
  border-color:rgba(224,204,255,.40);
  background:linear-gradient(135deg,rgba(124,58,237,.28),rgba(167,139,250,.18));
  color:#FFF6FF;
  box-shadow:0 8px 18px rgba(124,58,237,.14);
}

.value-card .cap-row {
  position:relative;
}

.value-card .cap-row::after {
  content:'Repère visuel : case violette = value bet';
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(167,139,250,.22);
  background:rgba(167,139,250,.08);
  color:#D9C8FF;
  font-size:.55rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

@media(max-width:720px) {
  .value-card .cap-row {
    flex-wrap:wrap;
  }

  .value-card .cap-row::after {
    width:100%;
    margin-left:0;
    margin-top:8px;
  }
}

@media(max-width:560px) {
  .value-card .pb-arb {
    padding:9px 10px 9px 42px;
    font-size:.64rem;
    line-height:1.4;
  }

  .value-card .pb-arb::before {
    left:10px;
    width:22px;
    height:22px;
    font-size:.72rem;
  }

  .value-card .odds-sec::before {
    font-size:.5rem;
    padding:7px 8px;
    letter-spacing:.06em;
  }

  .value-card .odd-cell.vb-focus::before {
    inset:auto;
    top:-10px;
    left:50%;
    right:auto;
    bottom:auto;
    padding:4px 8px;
    font-size:.46rem;
  }

  .value-card .odd-cell.vb-focus .oc-odd {
    font-size:1.52rem;
  }
}