:root{--bg:#1c1e22;--band:#2b2f36;--band2:#23262c;--card:#262a30;--line:#363b44;--tx:#dadfe6;--mu:#8d95a3;--ac:#0965e9;--ach:#0754c4;--ac2:#2f8dc7;--logo:#22c7ee}
[data-theme=light]{--bg:#f3f5f8;--band:#fff;--band2:#fff;--card:#fff;--line:#e1e5eb;--tx:#1e1f22;--mu:#6b7280}
*{box-sizing:border-box;margin:0}body{background:var(--bg);color:var(--tx);font:14px/1.4 system-ui,Segoe UI,Roboto,sans-serif}a{color:inherit;text-decoration:none;cursor:pointer}
.wrap{max-width:1320px;margin:auto;padding:0 16px}
.promo{background:linear-gradient(90deg,#0754c4,#0965e9,#2f8dc7);text-align:center;padding:8px;font-size:13px;color:#fff}
.util{background:var(--band2);font-size:12px;color:var(--mu)}.util .wrap{display:flex;justify-content:space-between;padding:6px 16px}.util nav a{margin-left:16px}
.hdr{background:linear-gradient(var(--band),var(--band2));border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.hrow{display:flex;align-items:center;gap:16px;padding:12px 16px}.logo{font-weight:900;font-size:26px;letter-spacing:1px;color:var(--logo)}.logo span{background:var(--logo);color:#1c1e22;border-radius:6px;padding:0 6px;margin-left:2px}
.search{flex:1;display:flex;background:var(--bg);border:1px solid var(--line);border-radius:8px;overflow:hidden}.search input{flex:1;background:none;border:0;color:var(--tx);padding:10px 12px;font-size:16px;outline:0}.search button{background:var(--ac);border:0;color:#fff;padding:0 16px;cursor:pointer}.search button:hover{background:var(--ach)}
.login{display:flex;gap:8px;align-items:center}.login span{display:flex;flex-direction:column}.login small{color:var(--mu)}
.cart{position:relative;font-size:20px}.cart i{position:absolute;top:-6px;right:-10px;background:var(--ac);color:#fff;font:700 10px sans-serif;border-radius:9px;padding:2px 5px}
.theme,.burger{background:none;border:1px solid var(--line);color:var(--tx);border-radius:8px;width:36px;height:36px;cursor:pointer}.burger{display:none}
.cats{display:flex;gap:8px;padding-bottom:10px}.cats a{flex:1;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px;font-weight:600;font-size:13px}.cats a:hover{border-color:var(--ac)}.cats a.hl{background:var(--ac);border-color:var(--ac);color:#fff}.cats a.hl:last-child{background:var(--ac2);border-color:var(--ac2)}
main{padding-top:14px}section{margin-bottom:20px}
.stories{display:flex;gap:14px;justify-content:center;overflow-x:auto;padding:4px}.stories div{flex:0 0 52px;height:52px;border-radius:50%;border:2px solid var(--ac);display:grid;place-items:center;font-weight:800;color:#fff;font-size:13px}
.hero{display:grid;grid-template-columns:2.3fr 1fr;gap:12px;height:380px}.slider{position:relative;border-radius:12px;overflow:hidden}.slide{position:absolute;inset:0;padding:48px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;opacity:0;transition:.6s}.slide.on{opacity:1}.slide h1{font-size:44px;color:#fff;text-shadow:0 2px 12px #0008}.slide p{color:#e6ecf5}.slide a{align-self:flex-start;background:var(--ac);color:#fff;padding:10px 20px;border-radius:8px;font-weight:700}
.dots{position:absolute;bottom:14px;right:20px;display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:5px;background:#fff6;cursor:pointer}.dots i.on{background:#fff;width:24px}
.side{display:grid;gap:12px}.bn{border-radius:12px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}.bn b{font-size:22px}.b1{background:linear-gradient(135deg,#0965e9,#1b2a4a)}.b2{background:linear-gradient(135deg,#2f8dc7,#3a1f5a)}
.box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}.sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.sh h2{font-size:18px;display:flex;flex-direction:column}.sh small{font-size:12px;color:var(--mu);font-weight:400}
.btn{background:var(--ac);color:#fff;padding:6px 16px;border-radius:6px;font-weight:600;font-size:12px}.btn:hover{background:var(--ach)}
.games{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.gt{aspect-ratio:3/4;border-radius:10px;display:flex;align-items:flex-end;padding:10px;font-weight:800;color:#fff;font-size:14px;text-shadow:0 1px 6px #000;transition:.2s}.gt:hover{transform:translateY(-4px)}
.topups{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.tu{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}.tu div{aspect-ratio:1;display:grid;place-items:center;font-size:34px}.tu b{display:block;padding:8px 8px 2px;font-size:12px}.tu small{padding:0 8px 8px;display:block;color:var(--mu);font-size:11px}
.quick{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.qw{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;gap:14px}.qw>b{font-size:22px;color:var(--ac2);width:90px}.qw .f{flex:1;display:grid;gap:8px}.tabs{display:flex;gap:6px;overflow:auto}.tabs span{white-space:nowrap;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:12px;cursor:pointer}.tabs span.on{border-color:var(--ac);color:#fff;background:var(--ac)}
.qw select,.qw input{background:var(--bg);border:1px solid var(--line);color:var(--tx);border-radius:6px;padding:9px;font-size:16px;width:100%}.qw .row{display:flex;gap:8px}.qw .row a{background:var(--ac);color:#fff;border-radius:6px;padding:9px 16px;white-space:nowrap;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.pc{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}.pc .im{aspect-ratio:4/3;display:grid;place-items:center;font-weight:900;color:#fff;font-size:18px}.pc .bd{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1}.pc b{font-size:13px}.pc .pr{display:flex;align-items:baseline;gap:6px;margin-top:auto}.pc del{color:var(--mu);font-size:12px}.pc strong{color:var(--ac2);font-size:16px}.pc a{background:var(--ac);color:#fff;text-align:center;padding:7px;border-radius:6px;font-weight:600;font-size:12px}.pc a:hover{background:var(--ach)}
.tag{position:relative}.tag:after{content:attr(data-d);position:absolute;top:8px;left:8px;background:#e53935;color:#fff;font-size:11px;padding:2px 6px;border-radius:4px}
.strip{background:linear-gradient(90deg,#0754c4,#2f8dc7);color:#fff;border-radius:12px;padding:22px;text-align:center;font-size:18px;font-weight:600}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.trust div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;font-size:26px;align-items:center}.trust b{font-size:14px}.trust span{grid-column:2;font-size:12px;color:var(--mu)}.trust div>:first-child{}
.brands{display:flex;gap:10px;overflow:hidden}.brands span{flex:0 0 130px;height:56px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;color:var(--mu);font-weight:800;background:var(--card)}
.seo{color:var(--mu);font-size:13px}.seo h3{color:var(--tx);margin-bottom:6px}
.ftr{background:var(--band2);border-top:1px solid var(--line);margin-top:30px}.fnews{display:flex;align-items:center;gap:20px;padding:20px 16px;border-bottom:1px solid var(--line)}.fnews .search{max-width:480px}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px;padding:30px 16px}.fcols h4{margin-bottom:10px}.fcols a{display:block;color:var(--mu);margin-bottom:6px}.fcols p{color:var(--mu);margin-top:8px}.copy{border-top:1px solid var(--line);padding:14px 16px;color:var(--mu);font-size:12px;display:flex;justify-content:space-between}
@media(max-width:900px){.util,.login span,.promo{display:none}.burger{display:block}.hrow{flex-wrap:wrap;gap:10px}.search{order:5;flex-basis:100%}.logo{flex:1;font-size:22px}
.cats{overflow-x:auto}.cats a{flex:0 0 auto;white-space:nowrap}.stories{justify-content:flex-start}
.hero{grid-template-columns:1fr;height:auto}.slider{height:200px}.slide{padding:20px}.slide h1{font-size:26px}.side{grid-template-columns:1fr 1fr}.bn{height:100px;padding:12px}.bn b{font-size:15px}.bn span{font-size:11px}
.games{grid-template-columns:repeat(3,1fr)}.topups{grid-template-columns:repeat(3,1fr)}.quick{grid-template-columns:1fr}.qw{flex-direction:column}.qw>b{width:auto}
.grid{grid-template-columns:repeat(2,1fr)}.trust{grid-template-columns:1fr 1fr}.trust div{font-size:20px;padding:12px}.fnews{flex-direction:column;align-items:stretch}.fcols{grid-template-columns:1fr 1fr}.copy{flex-direction:column;gap:6px}.strip{font-size:15px}}
.logo img{display:block;height:44px;width:auto}.ftr .logo img{height:40px}
@media(max-width:900px){.logo img{height:34px}.logo{flex:1;display:flex}}
@media(max-width:900px){.cart{margin-right:8px}.stories{padding:4px 2px}}
.stories div{background-size:cover!important}
.gt{position:relative;overflow:hidden;padding:0}.gt span{position:absolute;inset:auto 0 0;padding:28px 10px 10px;background:linear-gradient(transparent,#000d)}
.brands span{display:flex;gap:8px;align-items:center;font-size:12px}.brands img{width:28px;height:28px;border-radius:6px}
.bnav{display:none}
@media(max-width:768px){.side{display:none}.slider{height:220px}
body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
.bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--band);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--mu);position:relative}
.bnav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.bnav a.on{color:var(--ac)}.bnav a.on svg{stroke:var(--ac)}
.bnav i{position:absolute;top:-4px;left:calc(50% + 6px);background:var(--ac);color:#fff;font:700 10px sans-serif;border-radius:9px;padding:1px 5px}}