/* CatBet — layout, grid and colours matched to the reference measurements.
   Tokens first; change a value here and it updates everywhere. */
:root {
  --bg: #001229;            /* page */
  --panel: #0f1729;         /* header, sidebar, footer */
  --card: #1d283a;          /* game-card backing, active rows */
  --line: #344256;          /* borders */
  --line-50: rgba(52, 66, 86, .5);
  --glass: rgba(0, 18, 41, .5);
  --primary: #8c5df9;
  --primary-hi: #9d75fa;
  --secondary: #6382ff;
  --fg: #f8fafc;
  --muted: #94a3b8;
  --muted-60: rgba(148, 163, 184, .6);
  --success: #10b981;
  --warning: #f59e0b;
  --r: 12.75px;             /* .75rem @ 17px root */
  --r-sm: 10.75px;
  --r-lg: 17px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hdr-h: 64px;
  --sb-w: 246px;
  --card-w: 125.7px;
  --gap: 13px;
}
* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ic.sm { width: 15px; height: 15px; } .ic.lg { width: 21px; height: 21px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------- header ---------------- */
.hd { position: sticky; top: 0; z-index: 30; height: var(--hdr-h); background: var(--panel); display: flex; align-items: center; gap: 12px; padding: 0 34px; }
.hd .burger { display: none; color: var(--fg); }
.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img { height: 38px; width: auto; }
.hd .sp { flex: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 47px; padding: 0 17px; border-radius: var(--r-sm); font-weight: 500; font-size: 17px; white-space: nowrap; transition: background .15s, opacity .15s; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hi); }
.btn.ghost:hover { background: rgba(255, 255, 255, .06); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--fg); }
.icon-btn:hover { background: rgba(255, 255, 255, .06); }
.hd .bal { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 14px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.hd .bal .dep { height: 30px; padding: 0 12px; border-radius: 8px; background: var(--primary); font-size: 13px; font-weight: 600; }

/* ---------------- shell ---------------- */
.shell { display: flex; align-items: flex-start; }
.sb { position: sticky; top: var(--hdr-h); width: var(--sb-w); flex: 0 0 var(--sb-w); height: calc(100vh - var(--hdr-h)); overflow-y: auto; background: var(--panel); padding: 12.75px; color: var(--muted); scrollbar-width: thin; scrollbar-color: var(--line) transparent; transition: width .3s, flex-basis .3s; }
.sb .collapse { position: absolute; top: 18px; right: -14px; }
main { flex: 1; min-width: 0; }
.wrap { max-width: 1185px; margin: 0 auto; padding: 24px 76px 64px; display: flex; flex-direction: column; gap: 34px; }

/* sidebar */
.mode { display: flex; padding: 4.25px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); margin: 4px 4px 16px; }
.mode a { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10.6px 0; border-radius: var(--r); font-size: 14.875px; font-weight: 600; color: var(--fg); background: var(--primary); }
.nav-i { display: flex; align-items: center; gap: 12px; width: 100%; height: 51px; padding: 0 25.5px 0 13px; border-radius: var(--r); font-size: 17px; font-weight: 500; color: var(--fg); text-align: left; transition: background .15s, color .15s; }
.nav-i .ic { color: var(--fg); }
.nav-i span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-i:hover { background: var(--card); }
.nav-i.on { background: var(--card); color: var(--primary); }
.nav-i.on .ic { color: var(--primary); }
.nav-i .chev { transition: transform .2s; }
.nav-i.open .chev { transform: rotate(180deg); }
.sub { display: flex; flex-direction: column; padding: 2px 0 6px 30px; }
.sub a { padding: 8px 12px; border-radius: 10px; font-size: 14.875px; color: var(--muted); }
.sub a:hover, .sub a.on { color: var(--fg); background: var(--card); }
.sb-h { padding: 0 12.75px; margin: 22px 0 10px; font-size: 12.75px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-60); }
.gem { display: flex; align-items: center; gap: 12px; padding: 6px 9px; border-radius: var(--r); }
.gem:hover { background: var(--card); }
.gem img { width: 51px; height: 68px; object-fit: cover; border-radius: 8px; }
.gem b { font-size: 14.875px; font-weight: 500; color: var(--fg); }
.dl { display: flex; align-items: center; gap: 10px; width: calc(100% - 8px); margin: 18px 4px 0; padding: 8.5px 12.75px; border-radius: var(--r); background: rgba(0, 18, 41, .7); border: 1px solid var(--line); color: var(--fg); font-size: 14.875px; font-weight: 600; }
.dl .qr { margin-left: auto; width: 32px; height: 32px; border-radius: 6px; background: var(--card); display: grid; place-items: center; color: var(--muted); }
.sup { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: var(--r); font-size: 14.875px; font-weight: 500; color: var(--fg); width: 100%; text-align: left; }
.sup:hover { background: var(--card); }
.flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }

/* ---------------- banners ---------------- */
.banners { position: relative; }
.bn-track { display: flex; gap: 17px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.bn-track::-webkit-scrollbar { display: none; }
.bn { position: relative; flex: 0 0 calc((100% - 17px) / 2); aspect-ratio: 16 / 7; border-radius: var(--r); overflow: hidden; scroll-snap-align: start; isolation: isolate; }
.bn .art { position: absolute; inset: 0; z-index: -1; transition: transform .3s; }
.bn:hover .art { transform: scale(1.02); }
.bn .tag { position: absolute; top: 18px; left: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 99px; background: rgba(140, 93, 249, .9); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bn .tag i { width: 16px; height: 16px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--primary); font-style: normal; font-size: 9px; }
.bn .txt { position: absolute; left: 22px; top: 50%; transform: translateY(-38%); max-width: 48%; }
.bn h3 { margin: 0; font-size: clamp(26px, 3.4vw, 46px); line-height: .95; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.bn p { margin: 8px 0 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: #e8e4ff; }
.arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: rgba(140, 93, 249, .55); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; transition: background .15s, opacity .15s; }
.arrow:hover { background: var(--primary); }
.arrow.l { left: -18px; } .arrow.r { right: -18px; }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .2s, width .2s; }
.dots i.on { background: var(--primary); width: 18px; border-radius: 4px; }

/* ---------------- search card ---------------- */
.search-card { display: flex; align-items: center; gap: 17px; padding: 21.25px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--line-50); }
.field { position: relative; flex: 1; min-width: 0; }
.field .ic { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.field input { width: 100%; height: 51px; padding: 0 12.75px 0 51px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line-50); font-size: 17px; outline: none; }
.field input::placeholder { color: var(--muted); }
.field input:focus { border-color: var(--primary); }
.sel { position: relative; }
.sel select { appearance: none; height: 51px; padding: 0 44px 0 17px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line-50); font-size: 17px; cursor: pointer; outline: none; }
.sel .ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.sel select option { background: var(--panel); }
.sq-btn { width: 51px; height: 51px; flex: 0 0 51px; border-radius: var(--r-sm); background: var(--primary); display: grid; place-items: center; color: #fff; }
.sq-btn:hover { background: var(--primary-hi); }

/* ---------------- sections + game rails ---------------- */
.sec { display: flex; flex-direction: column; gap: 17px; }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sec-h h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 21.25px; line-height: 30px; font-weight: 700; }
.sec-h h2 .ic { width: 21px; height: 21px; }
.sec-h a { font-size: 14.875px; color: var(--fg); }
.sec-h a:hover { text-decoration: underline; }
.rail { position: relative; }
.rail-track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.rail-track::-webkit-scrollbar { display: none; }
.gc { position: relative; flex: 0 0 var(--card-w); aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; background: var(--card); scroll-snap-align: start; transition: transform .3s; }
.gc:hover { transform: translateY(-3px); }
.gc img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gc:hover img { transform: scale(1.05); }
.gc .ov { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 18, 41, .55); opacity: 0; transition: opacity .2s; }
.gc .ov span { width: 46px; height: 46px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; color: #fff; }
.gc:hover .ov { opacity: 1; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr)); gap: var(--gap); }
.grid .gc { flex: none; }

/* payments */
.payments { display: flex; align-items: center; gap: 22px; padding: 18px 22px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--line-50); }
.payments b { font-size: 14.875px; font-weight: 800; letter-spacing: .08em; }
.payments .coins { display: flex; flex: 1; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }
.payments img { width: 26px; height: 26px; border-radius: 50%; }

/* cashback countdown */
.cashback { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 50px; border-radius: var(--r-lg); border: 1px solid var(--line-50); background: linear-gradient(105deg, #121c3a 0%, #19224a 55%, #241c55 100%); isolation: isolate; }
.cashback::after { content: ""; position: absolute; right: -6%; top: -40%; width: 46%; height: 180%; transform: skewX(-18deg); background: linear-gradient(180deg, rgba(140, 93, 249, .14), rgba(140, 93, 249, .04)); z-index: -1; }
.cashback small { display: block; font-size: 14.875px; color: var(--primary); font-weight: 600; }
.cashback h3 { margin: 4px 0 0; font-size: 34px; line-height: 1.15; font-weight: 800; }
.cd { display: flex; gap: 22px; }
.cd div { text-align: center; }
.cd b { display: block; font-size: 51px; line-height: 1; font-weight: 900; color: var(--primary); font-variant-numeric: tabular-nums; }
.cd span { display: block; margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }

/* recent wins */
.wins { padding: 14px 18px 18px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--line-50); display: flex; flex-direction: column; gap: 12px; }
.wins-h { display: flex; align-items: center; gap: 8px; font-size: 14.875px; font-weight: 700; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(140, 93, 249, .25); }
.wc { flex: 0 0 102px; scroll-snap-align: start; text-align: center; }
.wc .gc { width: 100%; flex: none; }
.wc small { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.wc b { display: block; font-size: 12.75px; color: var(--primary); }
.empty-row { padding: 18px; text-align: center; color: var(--muted); font-size: 14.875px; }

/* tournament */
.tour { border-radius: var(--r-lg); border: 1px solid var(--line-50); background: var(--glass); overflow: hidden; padding: 0 0 14px; }
.tour-hero { position: relative; height: 205px; overflow: hidden; background: linear-gradient(110deg, #3b2a8a 0%, #2a2470 40%, #1b1d4a 100%); isolation: isolate; }
.tour-hero .bgtxt { position: absolute; left: 14px; top: 34px; font-size: 64px; line-height: .9; font-weight: 900; text-transform: uppercase; color: rgba(255, 255, 255, .07); z-index: -1; }
.tour-hero .covers { position: absolute; right: 0; top: 0; bottom: 0; width: 52%; display: flex; z-index: -1; }
.tour-hero .covers img { flex: 1; min-width: 0; height: 100%; object-fit: cover; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); margin-left: -6%; }
.tour-hero .covers::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #2a2470 0%, transparent 30%); z-index: 1; }
.tour-hero .in { position: absolute; left: 18px; top: 14px; }
.tour-hero h4 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.ends { display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.mini-cd { display: flex; gap: 6px; margin-top: 6px; }
.mini-cd div { width: 34px; text-align: center; }
.mini-cd b { display: block; height: 30px; line-height: 30px; border-radius: 6px; background: rgba(0, 18, 41, .7); font-size: 15px; font-weight: 800; }
.mini-cd span { font-size: 8px; color: var(--muted); }
.prize { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; border-radius: 8px; background: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.prize b { font-size: 18px; letter-spacing: 0; }
.tour-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 18px 0; }
.tour-stats div, .tour-part { border-radius: var(--r-sm); background: rgba(52, 66, 86, .35); padding: 8px; text-align: center; }
.tour-stats b { display: block; font-size: 15px; } .tour-stats small { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tour-part { margin: 8px 18px 0; font-size: 12.75px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tour .btn { margin: 12px 18px 0; width: calc(100% - 36px); height: 47px; font-weight: 700; }

/* latest wins table */
.lw h2 { margin: 0; font-size: 25.5px; color: var(--primary); font-weight: 800; }
.lw .subt { font-size: 12.75px; color: var(--muted); margin-top: 2px; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0 4px; margin-top: 12px; }
.tbl th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--muted); padding: 6px 12px; text-transform: uppercase; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl td { padding: 10px 12px; font-size: 14.875px; font-weight: 600; background: rgba(15, 23, 41, .7); }
.tbl tr td:first-child { border-radius: 8px 0 0 8px; } .tbl tr td:last-child { border-radius: 0 8px 8px 0; }
.tbl .g { display: flex; align-items: center; gap: 12px; } .tbl .g img { width: 30px; height: 40px; border-radius: 4px; object-fit: cover; }
.tbl .u { display: flex; align-items: center; gap: 8px; color: var(--muted); } .tbl .u i { width: 20px; height: 20px; border-radius: 50%; background: var(--card); }
.tbl .win { color: var(--success); }

/* providers */
.prov-h { display: flex; align-items: baseline; justify-content: space-between; }
.prov-h h2 { margin: 0; font-size: 25.5px; font-weight: 800; }
.prov-h span { font-size: 12.75px; color: var(--muted); }
.prov-wrap { position: relative; padding: 14px; border-radius: var(--r-lg); background: rgba(52, 66, 86, .25); border: 1px solid var(--line-50); }
.pc { position: relative; flex: 0 0 136px; height: 136px; border-radius: var(--r); background: var(--bg); display: grid; place-items: center; scroll-snap-align: start; padding: 10px; text-align: center; font-weight: 800; font-size: 16px; letter-spacing: -.01em; transition: background .15s; }
.pc:hover { background: #071c38; }
.pc .n { position: absolute; left: 10px; bottom: 10px; padding: 1px 6px; border-radius: 4px; background: var(--primary); font-size: 11px; font-weight: 700; }

/* ---------------- footer ---------------- */
.ft { margin-top: 10px; }
.ft-card { padding: 22px 26px; border-radius: var(--r); background: var(--panel); }
.ft-card .logo { margin-bottom: 20px; } .ft-card .logo img { height: 48px; }
.ft-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ft-cols h5 { margin: 0 0 10px; font-size: 12.75px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ft-cols a { display: block; margin-bottom: 9px; font-size: 12.75px; color: var(--muted); }
.ft-cols a:hover { color: var(--fg); }
.ft-bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; border-bottom: 1px solid var(--line-50); }
.socials { display: flex; gap: 8px; }
.socials a { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.socials a:hover { color: var(--fg); border-color: var(--muted); }
.ft-bar small { font-size: 11px; color: var(--muted); }
.resp { padding: 18px 0 0; }
.resp h5 { margin: 0 0 8px; font-size: 14.875px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.resp p { margin: 0; font-size: 11px; color: var(--muted); }
.resp .age { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 900; color: var(--primary); }

/* ---------------- game page ---------------- */
.gp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 17px; }
.gp-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #000; border: 1px solid var(--line-50); }
.gp-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gp-cover { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.gp-cover .bg { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(26px) brightness(.4); }
.gp-cover .in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px; }
.gp-cover .in img { width: 120px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); }
.gp-cover .acts { display: flex; gap: 10px; }
.gp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 17px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line-50); }
.gp-bar b { font-size: 17px; } .gp-bar small { display: block; color: var(--muted); font-size: 12.75px; }
.note { color: var(--muted); font-size: 12.75px; }
.page-h { display: flex; align-items: center; gap: 12px; }
.page-h h1 { margin: 0; font-size: 25.5px; font-weight: 800; }
.page-h .back { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--line-50); display: grid; place-items: center; }
.info { padding: 26px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--line-50); color: var(--muted); }
.info h3 { margin: 0 0 6px; color: var(--fg); }

/* ---------------- modal / auth ---------------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0, 8, 20, .7); opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.modal { position: fixed; z-index: 61; left: 50%; top: 50%; width: min(420px, calc(100% - 32px)); transform: translate(-50%, -46%); opacity: 0; pointer-events: none; transition: transform .2s, opacity .2s; padding: 26px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.modal.on { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.modal h3 { margin: 0 0 4px; font-size: 25.5px; } .modal p { margin: 0 0 18px; color: var(--muted); font-size: 14.875px; }
.modal .x { position: absolute; top: 14px; right: 14px; }
.modal form { display: flex; flex-direction: column; gap: 12px; }
.modal label { font-size: 12.75px; color: var(--muted); font-weight: 600; }
.modal input[type=text], .modal input[type=password], .modal input[type=email] { width: 100%; height: 47px; margin-top: 6px; padding: 0 14px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); outline: none; font-size: 16px; }
.modal input:focus { border-color: var(--primary); }
.modal .chk { display: flex; gap: 8px; align-items: flex-start; font-size: 12.75px; color: var(--muted); }
.modal .err { color: #f87171; font-size: 12.75px; }
.modal .alt { text-align: center; font-size: 13px; color: var(--muted); } .modal .alt a { color: var(--primary); font-weight: 600; }

/* toast + chat */
.toast { position: fixed; z-index: 80; left: 50%; top: 18px; transform: translate(-50%, -150%); transition: transform .3s; padding: 10px 16px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); font-size: 14.875px; font-weight: 600; }
.toast.on { transform: translate(-50%, 0); }
.chat-tab { position: fixed; z-index: 25; right: 0; top: 46%; writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 8px; border-radius: 0 8px 8px 0; background: var(--primary); font-size: 12.75px; font-weight: 600; }
.chat-fab { display: none; position: fixed; z-index: 25; right: 16px; bottom: 80px; width: 48px; height: 48px; border-radius: 50%; background: var(--primary); place-items: center; color: #fff; }

/* bottom nav (mobile + tablet) */
.bnav { display: none; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: calc(57px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--line); grid-template-columns: repeat(5, 1fr); align-items: center; }
.bnav a, .bnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 50px; font-size: 12.75px; font-weight: 500; color: var(--muted); }
.bnav .on { color: var(--primary); }
.bnav .dep { margin: 0 4px; border-radius: var(--r-sm); background: var(--primary); color: #fff; height: 50px; transform: translateY(-2px); }

/* ---------------- responsive ---------------- */
@media (max-width: 1279px) { .wrap { padding: 24px 40px 64px; } }
@media (max-width: 1023px) {
  :root { --sb-w: 206px; --hdr-h: 56px; }
  .hd { padding: 0 24px; }
  .bnav { display: grid; }
  .wrap { padding: 20px 28px 96px; }
  .chat-tab { display: none; } .chat-fab { display: grid; }
  .cashback { padding: 26px 30px; } .cd b { font-size: 40px; }
}
@media (max-width: 767px) {
  :root { --hdr-h: 49px; --card-w: 100px; --gap: 10.5px; }
  .hd { padding: 0 16px; gap: 8px; }
  .hd .burger { display: grid; }
  .logo img { height: 27px; }
  .hd .btn { height: 36px; padding: 0 12px; font-size: 14.875px; }
  .sb { position: fixed; z-index: 62; top: 0; left: 0; height: 100vh; width: 280px; transform: translateX(-102%); transition: transform .25s; }
  .sb.open { transform: none; }
  .sb .collapse { display: none; }
  .wrap { padding: 16px 28px 96px; gap: 28px; }
  .bn { flex-basis: 100%; }
  .arrow { display: none; }
  .search-card { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .search-card .field { flex-basis: 100%; }
  .search-card .sel.p { flex: 1; min-width: 0; } .search-card .sel select { width: 100%; }
  /* rails become 2-column grids of six, like the reference */
  .rail.gridify .rail-track { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .rail.gridify .gc:nth-child(n+7) { display: none; }
  .rail.gridify .gc { width: auto; }
  .grid { grid-template-columns: 1fr 1fr; }
  .payments { padding: 14px 18px; } .payments .coins { flex-wrap: nowrap; overflow: hidden; justify-content: flex-start; }
  .cashback { flex-direction: column; align-items: flex-start; padding: 22px; } .cashback h3 { font-size: 24px; }
  .cd { gap: 18px; } .cd b { font-size: 34px; } .cd span { font-size: 10px; }
  .tour-hero .covers { width: 44%; }
  .ft-cols { grid-template-columns: 1fr 1fr; }
  .tbl .hide-m { display: none; }
  .gp-frame { aspect-ratio: auto; height: min(78vh, 640px); }
  .sec-h h2 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .sec-h a { flex: 0 0 auto; }
}
@media (min-width: 768px) and (max-width: 1023px) { :root { --card-w: 103px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }