:root {
  --bg: #020409;
  --bg-soft: #060b15;
  --panel: rgba(7, 16, 28, .76);
  --panel-strong: #081322;
  --line: rgba(0, 229, 255, .17);
  --text: #ecffff;
  --muted: #86a7bd;
  --gold: #39ff88;
  --teal: #00e5ff;
  --pink: #a855f7;
  --green: #39ff88;
  --danger: #ff3d86;
  --shadow: 0 26px 80px rgba(0, 0, 0, .58), 0 0 32px rgba(0, 229, 255, .05);
  --radius: 22px;
  --font: "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 300px;
  color: var(--text);
  font-family: var(--font);
  background:
    radial-gradient(circle at 78% 4%, rgba(168, 85, 247, .2), transparent 32%),
    radial-gradient(circle at 12% 14%, rgba(0, 229, 255, .16), transparent 29%),
    radial-gradient(circle at 48% 48%, rgba(57, 255, 136, .05), transparent 44%),
    var(--bg);
}
body:before {
  background-image:
    linear-gradient(rgba(0,229,255,.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.034) 1px, transparent 1px);
  background-size: 52px 52px;
  content: "";
  inset: 0;
  mask-image: radial-gradient(circle at 50% 15%, black, transparent 74%);
  pointer-events: none;
  position: fixed;
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; }
img { display: block; max-width: 100%; }
.wrap { width: min(1200px, calc(100% - 42px)); margin: 0 auto; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.hidden { display: none !important; }

.notice {
  background: linear-gradient(90deg, rgba(57,255,136,.12), rgba(0,229,255,.09), rgba(168,85,247,.12));
  border-bottom: 1px solid var(--line);
  color: #d9e1ef;
  font-size: .84rem;
  padding: 10px 20px;
  text-align: center;
}
.reward-ticker {
  align-items: center;
  background: rgba(2, 4, 9, .95);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  height: 42px;
  overflow: hidden;
  padding: 0 max(calc((100% - 1200px) / 2), 20px);
}
.reward-ticker > strong { color: var(--gold); flex: 0 0 auto; font-size: .68rem; letter-spacing: .12em; }
.ticker-window { mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); overflow: hidden; white-space: nowrap; }
.ticker-track { animation: ticker 34s linear infinite; display: inline-flex; gap: 34px; min-width: max-content; }
.ticker-item { color: var(--muted); font-size: .78rem; }
.ticker-item b { color: var(--text); }
.ticker-item strong { color: var(--green); margin: 0 4px; }
.ticker-item small { background: rgba(57,255,136,.13); border-radius: 30px; color: var(--gold); margin-left: 6px; padding: 3px 6px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.nav {
  align-items: center;
  backdrop-filter: blur(15px);
  background: rgba(2, 4, 9, .7);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 78px;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav .wrap, .nav-links, .nav-actions, .brand { align-items: center; display: flex; }
.nav .wrap { justify-content: space-between; }
.brand { font-size: 1.25rem; font-weight: 800; gap: 11px; letter-spacing: -.04em; }
.brand-mark {
  align-items: center;
  background: linear-gradient(135deg, rgba(57,255,136,.16), rgba(0,229,255,.18));
  border: 1px solid rgba(57,255,136,.62);
  border-radius: 13px;
  box-shadow: 0 0 28px rgba(57,255,136,.32), inset 0 0 18px rgba(0,229,255,.12);
  color: var(--gold);
  display: inline-flex;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}
.brand-mark img, .logo-preview img { border-radius: inherit; height: 100%; object-fit: contain; width: 100%; }
.nav-links { color: var(--muted); gap: 28px; margin-left: 48px; font-size: .92rem; }
.nav-links a:hover { color: var(--text); }
.nav-actions { gap: 12px; margin-left: auto; }
.btn {
  align-items: center;
  background: linear-gradient(105deg, var(--gold), var(--teal));
  border-radius: 13px;
  color: #01140d;
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  min-height: 47px;
  padding: 0 22px;
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { box-shadow: 0 0 30px rgba(57,255,136,.3), 0 15px 35px rgba(0,229,255,.14); transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}
.btn-sm { font-size: .9rem; min-height: 40px; padding: 0 16px; }

.hero { overflow: hidden; padding: 56px 0 58px; position: relative; }
.hero:after {
  background: linear-gradient(90deg, transparent, rgba(57,255,136,.7), rgba(0,229,255,.8), transparent);
  bottom: 0;
  content: "";
  height: 1px;
  left: 6%;
  position: absolute;
  right: 6%;
}
.hero-grid { align-items: center; display: grid; gap: 48px; grid-template-columns: 1.02fr .98fr; }
.eyebrow {
  align-items: center;
  color: var(--gold);
  display: inline-flex;
  font-size: .75rem;
  font-weight: 800;
  gap: 10px;
  letter-spacing: .15em;
  margin-bottom: 20px;
}
.pulse {
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(57,255,136,.14), 0 0 22px var(--gold);
  height: 9px;
  width: 9px;
}
h1 {
  font-size: clamp(2.65rem, 5.3vw, 4.55rem);
  letter-spacing: -.065em;
  line-height: 1.04;
  margin: 0 0 20px;
}
.hero-copy p {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0 0 34px;
  max-width: 530px;
}
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.stat-row {
  border-top: 1px solid var(--line);
  display: flex;
  gap: 42px;
  margin-top: 46px;
  padding-top: 28px;
}
.stat strong { display: block; font-size: 1.55rem; }
.stat small { color: var(--muted); font-size: .8rem; }

.hero-live {
  background: linear-gradient(145deg, rgba(8, 20, 33, .9), rgba(3, 7, 14, .92));
  border: 1px solid rgba(0,229,255,.25);
  border-radius: 28px;
  box-shadow: var(--shadow), 0 0 42px rgba(0,229,255,.09);
  padding: 24px;
  position: relative;
}
.hero-live:after {
  background: var(--teal);
  border-radius: 50%;
  content: "";
  filter: blur(55px);
  height: 120px;
  opacity: .16;
  position: absolute;
  right: 20px;
  top: 70px;
  width: 120px;
}
.live-top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 24px; }
.live-tag {
  background: rgba(57,255,136,.13);
  border: 1px solid rgba(57,255,136,.35);
  border-radius: 999px;
  color: var(--gold);
  font-size: .7rem;
  font-weight: 800;
  padding: 8px 12px;
}
.live-top small { color: var(--muted); }
.versus { display: flex; gap: 12px; justify-content: space-between; margin-bottom: 22px; }
.team {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: .85rem;
  font-weight: 600;
  gap: 12px;
  text-align: center;
}
.jersey {
  align-items: center;
  background: linear-gradient(145deg, rgba(0,229,255,.18), rgba(0,229,255,.54));
  border-radius: 18px;
  display: flex;
  font-size: 1.4rem;
  font-weight: 800;
  height: 68px;
  justify-content: center;
  width: 68px;
}
.team:last-child .jersey { background: linear-gradient(145deg, rgba(168,85,247,.22), rgba(168,85,247,.64)); }
.score { text-align: center; }
.score strong { display: block; font-size: 2.05rem; letter-spacing: -.05em; }
.score span { color: var(--muted); font-size: .84rem; }
.moment {
  background: rgba(57,255,136,.07);
  border: 1px solid rgba(57,255,136,.2);
  border-radius: 15px;
  color: #aaffd0;
  font-size: .88rem;
  margin: 18px 0;
  padding: 14px;
}
.predict-box {
  background: rgba(5, 11, 22, .55);
  border-radius: 18px;
  padding: 16px;
}
.predict-box label { color: var(--muted); display: block; font-size: .75rem; margin-bottom: 12px; }
.choice-row { display: flex; gap: 9px; }
.choice {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  flex: 1;
  font-size: .83rem;
  padding: 12px 8px;
}
.choice.active { background: rgba(20, 216, 196, .16); border-color: var(--teal); color: var(--teal); }

.section { padding: 58px 0; }
.campaign-slider { margin-bottom: 20px; min-height: 136px; position: relative; }
.campaign-slide {
  align-items: center;
  background: linear-gradient(105deg, rgba(57,255,136,.1), rgba(0,229,255,.07), rgba(168,85,247,.1));
  border: 1px solid rgba(57,255,136,.25);
  border-radius: var(--radius);
  display: none;
  gap: 22px;
  justify-content: space-between;
  min-height: 136px;
  padding: 25px 30px;
}
.campaign-slide.active { display: flex; }
.campaign-slide small { color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .15em; }
.campaign-slide h3 { font-size: 1.55rem; margin: 8px 0 6px; }
.campaign-slide p { color: var(--muted); margin: 0; }
.app-slider { margin-bottom: 26px; min-height: 105px; }
.app-slider .campaign-slide { min-height: 105px; padding: 19px 25px; }
.app-slider .campaign-slide h3 { font-size: 1.2rem; }
.ad-slot {
  align-items: center;
  background: rgba(0,229,255,.04);
  border: 1px dashed rgba(0,229,255,.3);
  border-radius: 14px;
  display: flex;
  gap: 16px;
  margin: 0 0 27px;
  padding: 12px 16px;
}
.ad-slot > span { border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: .62rem; padding: 4px; }
.ad-slot strong { display: block; font-size: .86rem; }
.ad-slot p { color: var(--muted); font-size: .76rem; margin: 3px 0 0; }
.ad-slot a { color: var(--teal); font-size: .82rem; margin-left: auto; }
.feed-note { color: var(--gold); display: block; font-size: .74rem; margin-top: 10px; }
.sportsbook { display: grid; gap: 16px; grid-template-columns: 180px minmax(0, 1fr); margin-bottom: 34px; }
.sport-nav {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 10px;
}
.sport-nav strong { color: var(--muted); font-size: .68rem; letter-spacing: .14em; margin: 0 8px 10px; }
.sport-nav button {
  background: transparent;
  border-radius: 9px;
  color: var(--muted);
  padding: 12px 10px;
  text-align: left;
}
.sport-nav button.active, .sport-nav button:hover { background: rgba(57,255,136,.1); color: var(--gold); box-shadow: inset 0 0 18px rgba(57,255,136,.07); }
.sport-nav small { color: var(--muted); font-size: .7rem; margin: auto 8px 0; padding-top: 14px; }
.market-board { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.market-preview {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 13px;
}
.market-meta { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; }
.market-meta span { color: var(--gold); font-size: .66rem; font-weight: 700; }
.market-meta small { color: var(--muted); font-size: .65rem; }
.market-preview > strong { display: block; font-size: .88rem; }
.market-preview p { color: var(--muted); font-size: .72rem; margin: 4px 0 10px; }
.market-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.market-choices a {
  background: rgba(5,11,21,.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex: 1 1 84px;
  font-size: .7rem;
  gap: 5px;
  justify-content: space-between;
  padding: 8px;
}
.market-choices b { color: var(--teal); }
.subsection-head { align-items: center; display: flex; justify-content: space-between; margin: 30px 0 17px; }
.subsection-head h3 { margin: 0; }
.subsection-head span { color: var(--muted); font-size: .76rem; }
.tournament-strip { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
.tour-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 10px;
  padding: 15px;
}
.tour-card strong { font-size: .9rem; }
.tour-card p, .tour-card small { color: var(--muted); font-size: .73rem; margin: 0; }
.section-title {
  align-items: end;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 28px;
}
.section-title h2 { font-size: clamp(1.7rem, 3vw, 2.25rem); letter-spacing: -.045em; margin: 0 0 8px; }
.section-title p { color: var(--muted); margin: 0; }
.cards { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.match-card, .game-card, .feature, .panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(15px);
}
.match-card { padding: 20px; }
.match-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 17px; }
.match-header small { color: var(--muted); text-transform: uppercase; }
.badge {
  background: rgba(20, 216, 196, .12);
  border-radius: 999px;
  color: var(--teal);
  font-size: .68rem;
  font-weight: 700;
  padding: 7px 10px;
}
.badge.live { background: rgba(237, 53, 101, .14); color: #ff708d; }
.match-card h3 { font-size: 1rem; margin: 0 0 10px; }
.match-card .match-score { color: var(--gold); font-size: 1.35rem; font-weight: 750; margin-bottom: 11px; }
.match-card p { color: var(--muted); font-size: .86rem; margin: 0; }

.lobby { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
.game-card {
  contain: layout paint style;
  overflow: hidden;
  padding: 13px;
  transition: transform .2s, border-color .2s;
}
.game-card:hover { border-color: rgba(57,255,136,.5); box-shadow: 0 0 27px rgba(57,255,136,.09); transform: translateY(-4px); }
.game-art {
  align-items: center;
  background: radial-gradient(circle at 50% 5%, rgba(57,255,136,.3), transparent 52%), #07111c;
  border-radius: 15px;
  color: var(--gold);
  display: flex;
  font-size: 3rem;
  font-weight: 900;
  height: 148px;
  justify-content: center;
  margin-bottom: 14px;
}
.game-art img, .home-game-art img { height: 100%; object-fit: cover; width: 100%; }
.game-card:nth-child(2n) .game-art { background: radial-gradient(circle at 50% 5%, rgba(0,229,255,.3), transparent 52%), #06111a; color: var(--teal); }
.game-card h3 { font-size: 1rem; margin: 11px 4px 7px; }
.game-card p { color: var(--muted); font-size: .79rem; line-height: 1.45; margin: 0 4px 15px; min-height: 35px; }
.catalog-tools {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(170px, 290px) minmax(140px, 210px) auto 1fr;
  margin: 0 0 22px;
}
.catalog-tools .input { min-height: 42px; }
.catalog-summary { color: var(--muted); font-size: .84rem; justify-self: end; }
.catalog-more { display: flex; justify-content: center; margin-top: 25px; }
.home-games-panel { margin-bottom: 22px; }
.home-games-panel .panel-head h2 { margin-bottom: 6px; }
.home-games-panel .panel-head p { margin: 0; }
.dashboard-games { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.home-game-card {
  background: rgba(5,11,21,.42);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding: 9px;
}
.home-game-art {
  align-items: center;
  background: radial-gradient(circle at 50% 5%, rgba(57,255,136,.3), transparent 52%), #07111c;
  border-radius: 11px;
  color: var(--gold);
  display: flex;
  font-size: 1.65rem;
  font-weight: 900;
  height: 84px;
  justify-content: center;
  overflow: hidden;
}
.home-game-copy .badge { display: inline-block; margin-bottom: 7px; }
.home-game-copy h3 { font-size: .86rem; line-height: 1.3; margin: 0 0 6px; }
.home-game-copy p { color: var(--muted); font-size: .7rem; margin: 0; }
.home-game-card .btn { font-size: .78rem; min-height: 34px; padding: 0 10px; }
.empty-state {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  grid-column: 1 / -1;
  padding: 34px;
  text-align: center;
}

.experience { display: grid; gap: 22px; grid-template-columns: .92fr 1.08fr; }
.promo {
  background: linear-gradient(150deg, rgba(57,255,136,.1), rgba(0,229,255,.04), rgba(168,85,247,.09));
  border: 1px solid rgba(57,255,136,.22);
  border-radius: var(--radius);
  padding: 32px;
}
.promo h2 { font-size: 2rem; letter-spacing: -.04em; margin: 12px 0 14px; }
.promo p { color: var(--muted); line-height: 1.65; }
.features { display: grid; gap: 15px; grid-template-columns: repeat(2, 1fr); }
.feature { padding: 21px; }
.feature strong { display: block; margin: 12px 0 8px; }
.feature p { color: var(--muted); font-size: .85rem; line-height: 1.5; margin: 0; }
.feature-icon { color: var(--teal); font-size: 1.3rem; }
.promo-block {
  background: rgba(57,255,136,.07);
  border: 1px dashed rgba(57,255,136,.34);
  border-radius: 15px;
  color: #dce7fb;
  margin-top: 28px;
  padding: 18px;
}
.promo-block span {
  background: var(--gold);
  border-radius: 5px;
  color: #05131a;
  font-size: .66rem;
  font-weight: 800;
  margin-right: 9px;
  padding: 5px 7px;
}
.custom-embed iframe { border: 0; border-radius: 14px; margin-top: 18px; max-width: 100%; min-height: 220px; width: 100%; }
.footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .84rem;
  margin-top: 36px;
  padding: 32px 0 86px;
}
.footer-grid { display: flex; gap: 24px; justify-content: space-between; }
.legal-line { color: #c9d4e8; margin: 18px 0 0; max-width: 700px; }
.owner-details { color: var(--muted); display: flex; flex-wrap: wrap; font-size: .8rem; gap: 14px; margin-top: 17px; }
.footer-pages { display: flex; gap: 18px; margin-top: 15px; }
.footer-pages a { color: var(--teal); font-size: .8rem; }
.floating-actions {
  align-items: flex-end;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: fixed;
  right: 20px;
  z-index: 25;
}
.float-contact {
  background: rgba(57,255,136,.16);
  border: 1px solid rgba(57,255,136,.46);
  border-radius: 999px;
  box-shadow: var(--shadow);
  color: var(--gold);
  font-size: .84rem;
  font-weight: 700;
  padding: 13px 19px;
}
.float-contact:last-child { background: rgba(0,229,255,.15); border-color: rgba(0,229,255,.46); color: var(--teal); }
.float-feedback {
  background: linear-gradient(135deg, var(--gold), var(--teal));
  border-radius: 999px;
  box-shadow: var(--shadow);
  color: #15120c;
  font-size: .84rem;
  font-weight: 700;
  padding: 13px 19px;
}
.float-download {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
  padding: 12px;
}
.float-download strong { color: var(--gold); font-size: .76rem; }
.float-download a { color: var(--text); font-size: .76rem; }
.content-page { max-width: 980px; }
.content-page h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.content-page > p { font-size: 1rem; line-height: 1.75; margin: 0 0 32px; max-width: 760px; }
.install-cards { margin: 25px 0 30px; }
.install-cards .panel p { color: var(--muted); line-height: 1.6; }
.ios-install-steps {
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  display: grid;
  font-size: .8rem;
  gap: 7px;
  margin-top: 16px;
  padding: 14px;
}
.ios-install-steps strong { color: var(--text); margin-bottom: 3px; }
.page-body { padding: clamp(24px, 5vw, 48px); }
.page-body h1 { margin: 0 0 22px; }
.page-body #pageBody { color: var(--muted); line-height: 1.8; white-space: pre-wrap; }
.network-section { padding-top: 10px; }
.network-grid { display: grid; gap: 18px; grid-template-columns: .85fr 1fr .95fr; }
.network-grid .panel { padding: 27px; }
.network-grid h2 { font-size: 1.55rem; margin: 0 0 10px; }
.creator-panel > strong { color: var(--gold); display: block; margin-bottom: 11px; }
.creator-panel p { color: var(--text); font-size: .86rem; line-height: 1.6; margin: 0 0 12px; }
.creator-panel small { color: var(--teal); }
.official-links { display: grid; gap: 8px; }
.official-links a {
  align-items: center;
  background: rgba(0,229,255,.04);
  border: 1px solid rgba(0,229,255,.13);
  border-radius: 10px;
  color: var(--text);
  display: flex;
  font-size: .78rem;
  justify-content: space-between;
  padding: 10px 12px;
}
.official-links b { color: var(--teal); font-size: .66rem; letter-spacing: .12em; }
.app-project { background: linear-gradient(145deg, rgba(168,85,247,.1), rgba(0,229,255,.04)); }
.app-project p { color: var(--muted); font-size: .85rem; line-height: 1.55; margin: 0 0 12px; }
.neon-line { color: var(--gold); display: block; margin: 0 0 17px; text-shadow: 0 0 13px rgba(57,255,136,.35); }
.app-meta { display: grid; gap: 6px; margin-bottom: 18px; }
.app-meta span { color: var(--muted); font-size: .75rem; }
.app-specs {
  background: rgba(0,229,255,.04);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 9px;
  margin: 0 0 30px;
  padding: 19px;
}
.app-specs span { color: var(--teal); font-size: .86rem; }
.app-specs small { color: var(--muted); line-height: 1.65; }
.feedback-page { min-height: calc(100vh - 78px); }
.feedback-grid {
  align-items: start;
  display: grid;
  gap: clamp(28px, 6vw, 72px);
  grid-template-columns: .9fr 1fr;
}
.feedback-grid article > p { font-size: 1rem; line-height: 1.7; margin: 0 0 26px; }
.feedback-message { min-height: 180px !important; }
.form-result { font-size: .86rem; grid-column: 1 / -1; margin: 0; }

/* Shared application screens */
.app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sidebar {
  background: rgba(2, 6, 12, .9);
  border-right: 1px solid var(--line);
  padding: 25px 16px;
  position: sticky;
  height: 100vh;
  top: 0;
}
.sidebar .brand { margin: 0 10px 37px; }
.side-link {
  align-items: center;
  border-radius: 12px;
  color: var(--muted);
  display: flex;
  gap: 13px;
  margin-bottom: 5px;
  padding: 13px 14px;
}
.side-link.active, .side-link:hover { background: rgba(57,255,136,.09); color: var(--gold); box-shadow: inset 2px 0 var(--gold); }
.sidebar-bottom { bottom: 22px; left: 16px; position: absolute; right: 16px; }
.app-main { padding: 27px 30px; }
.app-top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 28px; }
.app-top h1 { font-size: 1.75rem; margin: 0 0 5px; }
.user-chip { align-items: center; display: flex; gap: 12px; }
.avatar {
  align-items: center;
  background: linear-gradient(135deg, var(--gold), var(--teal));
  border-radius: 50%;
  color: #01140d;
  display: flex;
  font-weight: 800;
  height: 43px;
  justify-content: center;
  width: 43px;
}
.dashboard-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); margin-bottom: 22px; }
.metric { padding: 19px; }
.metric small { color: var(--muted); display: block; margin-bottom: 10px; }
.metric strong { font-size: 1.7rem; letter-spacing: -.04em; }
.two-col { display: grid; gap: 20px; grid-template-columns: 1.18fr .82fr; margin-bottom: 22px; }
.panel { padding: 22px; }
.panel h2, .panel h3 { letter-spacing: -.035em; margin: 0 0 18px; }
.panel-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 18px; }
.list-item {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 13px;
  justify-content: space-between;
  padding: 15px 0;
}
.list-item:first-child { border-top: 0; padding-top: 0; }
.list-item p { color: var(--muted); font-size: .8rem; margin: 5px 0 0; }
.positive { color: var(--green); }
.negative { color: var(--danger); }
.status { border-radius: 999px; font-size: .68rem; font-weight: 700; padding: 7px 10px; }
.status.open, .status.APPROVED, .status.LIVE { background: rgba(39,223,147,.14); color: var(--green); }
.status.PENDING, .status.STAGING { background: rgba(57,255,136,.13); color: var(--gold); }
.status.REJECTED, .status.DISABLED { background: rgba(255,98,124,.14); color: var(--danger); }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--muted); font-size: .78rem; }
.input {
  background: rgba(5, 11, 21, .55);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  min-height: 45px;
  padding: 11px 13px;
  width: 100%;
}
textarea.input { min-height: 94px; resize: vertical; }
.input:focus { border-color: var(--teal); outline: none; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tab {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  padding: 10px 16px;
}
.tab.active { background: rgba(20,216,196,.13); border-color: rgba(20,216,196,.4); color: var(--teal); }
.toast {
  background: #17243c;
  border: 1px solid rgba(20,216,196,.35);
  border-radius: 13px;
  bottom: 28px;
  box-shadow: var(--shadow);
  color: var(--text);
  padding: 15px 20px;
  position: fixed;
  right: 28px;
  z-index: 99;
}
.modal-backdrop {
  align-items: center;
  background: rgba(0,0,0,.65);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 50;
}
.modal { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 22px; max-width: 470px; padding: 27px; width: calc(100% - 32px); }
.modal h2 { margin: 0 0 7px; }
.modal p { color: var(--muted); margin: 0 0 20px; }
.qr-box {
  align-items: center;
  background: #fff;
  border-radius: 13px;
  color: #101522;
  display: flex;
  height: 150px;
  justify-content: center;
  margin-bottom: 15px;
  overflow: hidden;
  text-align: center;
}
.qr-box img { height: 100%; object-fit: contain; width: 100%; }
.telegram-state {
  background: rgba(5,11,21,.45);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
  padding: 12px;
}
.telegram-state .status { margin-right: 8px; }
.kyc-gate { margin-bottom: 22px; }
.kyc-privacy { margin-top: 22px; }
.kyc-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 18px;
}
.kyc-fields div {
  background: rgba(5,11,21,.45);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px;
}
.kyc-fields small { color: var(--muted); display: block; margin-bottom: 6px; }
.kyc-fields strong { font-size: .86rem; word-break: break-all; }
.kyc-docs { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin: 18px 0; }
.kyc-docs figure { margin: 0; }
.kyc-docs img { background: #fff; border-radius: 10px; height: 120px; object-fit: contain; width: 100%; }
.kyc-docs figcaption { color: var(--muted); font-size: .75rem; margin-top: 5px; }
.review-actions { display: flex; gap: 9px; margin-top: 15px; }
.referral-link { display: flex; gap: 10px; margin: 20px 0; }
.referral-link .input { flex: 1; }
.referral-metrics { grid-template-columns: repeat(2, 1fr); margin: 18px 0 0; }
.admin-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; }
.editor {
  background: #07101d;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #add8ff;
  font-family: Consolas, "Courier New", monospace;
  font-size: .85rem;
  line-height: 1.55;
  min-height: 145px;
  padding: 13px;
  width: 100%;
}
.builder-block {
  align-items: center;
  background: rgba(5,11,21,.45);
  border: 1px dashed var(--line);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
  padding: 12px 13px;
}
.builder-block.dragging { border-color: var(--teal); opacity: .55; }
.identity-editor { align-items: center; display: flex; gap: 10px; }
.identity-editor .input { flex: 1; }
.logo-preview {
  align-items: center;
  background: linear-gradient(135deg, rgba(57,255,136,.16), rgba(0,229,255,.18));
  border: 1px solid rgba(57,255,136,.62);
  border-radius: 12px;
  color: var(--gold);
  display: inline-flex;
  flex: 0 0 50px;
  font-size: 1.2rem;
  font-weight: 900;
  height: 50px;
  justify-content: center;
  overflow: hidden;
}
.preview-panel { margin-bottom: 22px; }
.live-preview {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  height: min(720px, 72vh);
  width: 100%;
}
.rules-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.rules-fields label { color: var(--muted); font-size: .68rem; }
.rules-fields .input { font-size: .8rem; min-height: 37px; padding: 7px; width: 76px; }
.rules-note { color: var(--muted); display: block; font-size: .72rem; margin-bottom: 7px; }
.link-cell { display: flex; gap: 7px; margin-top: 8px; }
.link-cell .input { font-size: .77rem; min-height: 37px; }
.block-actions { display: flex; gap: 5px; }
.icon-btn {
  background: var(--panel-strong);
  border-radius: 7px;
  color: var(--text);
  height: 32px;
  width: 34px;
}
.table-scroll { overflow-x: auto; }
.data-table { border-collapse: collapse; font-size: .85rem; min-width: 600px; width: 100%; }
.data-table th { color: var(--muted); font-size: .72rem; text-align: left; text-transform: uppercase; }
.data-table td, .data-table th { border-bottom: 1px solid var(--line); padding: 13px 10px; }
.game-control-table { min-width: 1220px; }
.game-control-table td { vertical-align: top; }
.game-control-table td:first-child { min-width: 340px; }
.game-admin-editor { display: grid; gap: 8px; }
.admin-game-cover {
  align-items: center;
  background: radial-gradient(circle at 50% 5%, rgba(57,255,136,.3), transparent 52%), #07111c;
  border-radius: 11px;
  color: var(--gold);
  display: flex;
  font-size: 1.65rem;
  font-weight: 900;
  height: 108px;
  justify-content: center;
  overflow: hidden;
}
.admin-game-cover img { height: 100%; object-fit: cover; width: 100%; }
.inline-fields, .inline-actions { display: flex; gap: 7px; }
.inline-fields .input { min-width: 0; }
.game-admin-editor textarea.input { min-height: 64px; }
.home-check { align-items: center; display: flex; flex-direction: row; gap: 7px; font-size: .78rem; }
.code-note { color: var(--muted); font-size: .78rem; margin: 8px 0 14px; }
.security-note {
  background: rgba(57,255,136,.065);
  border: 1px solid rgba(57,255,136,.24);
  border-radius: 13px;
  color: #b7ffd4;
  font-size: .86rem;
  line-height: 1.55;
  padding: 14px;
}
.adult-notice { margin-bottom: 18px; }
.report-tools {
  display: grid;
  gap: 12px;
  grid-template-columns: 180px 180px auto auto;
  margin-top: 24px;
}
.btn:disabled { cursor: not-allowed; filter: grayscale(.5); opacity: .58; transform: none; }
.user-tournaments { grid-template-columns: repeat(3, 1fr); }
.live-admin-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(190px, 1.1fr) 130px 105px minmax(180px, 1fr) auto;
  padding: 13px 0;
}
.live-admin-row:first-child { border-top: 0; padding-top: 0; }
.live-admin-row p { font-size: .76rem; margin: 5px 0 0; }
.live-admin-row .input { font-size: .8rem; min-height: 39px; }
.suggestion-card {
  background: rgba(5,11,21,.4);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 13px;
  padding: 17px;
}
.suggestion-card .panel-head { margin-bottom: 12px; }
.suggestion-card .panel-head strong { display: inline-block; margin: 0 0 0 9px; }
.suggestion-card > p { color: var(--text); line-height: 1.6; margin: 0 0 14px; }

@media (max-width: 1020px) {
  .nav-links { display: none; }
  .hero-grid, .experience, .two-col { grid-template-columns: 1fr; }
  .network-grid { grid-template-columns: 1fr; }
  .feedback-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-copy p { margin-left: auto; margin-right: auto; }
  .hero-buttons, .stat-row { justify-content: center; }
  .cards, .lobby { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: 1fr; }
  .app-shell { display: block; }
  .sidebar { bottom: 0; height: 68px; left: 0; padding: 8px; position: fixed; right: 0; top: auto; z-index: 30; }
  .sidebar .brand, .sidebar-bottom { display: none; }
  .side-menu { display: flex; gap: 5px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .side-menu::-webkit-scrollbar { display: none; }
  .side-link { flex: 0 0 auto; flex-direction: column; font-size: .68rem; gap: 3px; margin: 0; padding: 7px 11px; }
  .app-main { padding-bottom: 90px; }
  .catalog-tools { grid-template-columns: 1fr 1fr auto; }
  .catalog-summary { grid-column: 1 / -1; justify-self: start; }
  .live-preview { height: 580px; }
  .tournament-strip { grid-template-columns: repeat(2, 1fr); }
  .report-tools { grid-template-columns: repeat(2, 1fr); }
  .live-admin-row { grid-template-columns: 1fr 1fr; }
  .live-admin-row > div, .live-admin-row .match-pulse-edit { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .wrap { width: min(100% - 28px, 1200px); }
  .nav { height: 66px; }
  .nav-actions .btn-outline { display: none; }
  .brand { font-size: 1.08rem; }
  .brand-mark { height: 36px; width: 36px; }
  .hero { padding: 34px 0 38px; }
  .stat-row { gap: 23px; }
  .cards, .lobby, .features, .dashboard-grid, .form-grid { grid-template-columns: 1fr; }
  .dashboard-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-games-panel .panel-head { align-items: stretch; flex-direction: column; gap: 13px; }
  .section { padding: 40px 0; }
  .section-title { align-items: start; flex-direction: column; }
  .app-main { padding: 18px 14px 82px; }
  .app-top { align-items: start; gap: 17px; flex-direction: column; }
  .catalog-tools { grid-template-columns: 1fr; }
  .catalog-tools .btn { width: 100%; }
  .identity-editor, .referral-link, .review-actions { align-items: stretch; flex-direction: column; }
  .kyc-fields, .kyc-docs { grid-template-columns: 1fr; }
  .reward-ticker { padding: 0 12px; }
  .reward-ticker > strong { display: none; }
  .campaign-slide { align-items: start; flex-direction: column; padding: 20px; }
  .sportsbook { grid-template-columns: 1fr; }
  .sport-nav { flex-direction: row; overflow-x: auto; }
  .sport-nav strong, .sport-nav small { display: none; }
  .sport-nav button { flex: 0 0 auto; }
  .market-board, .tournament-strip { grid-template-columns: 1fr; }
  .subsection-head { align-items: start; flex-direction: column; gap: 7px; }
  .floating-actions { bottom: 78px; right: 11px; }
  .float-download { display: none; }
  .report-tools { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}