@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Rajdhani',sans-serif; background:#040404; color:#f2f2f2; min-height:100vh; overflow-x:hidden; position:relative; }
body::before { content:''; position:fixed; inset:0; background-image:linear-gradient(rgba(212,168,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(212,168,0,.03) 1px,transparent 1px); background-size:50px 50px; pointer-events:none; z-index:0; }

:root {
  --red:#d4a800; --red-l:#ffe033; --red-dim:rgba(212,168,0,.15); --red-b:rgba(212,168,0,.38);
  --bg:#080605; --card:rgba(14,12,8,.97); --text:#f8f4e8; --muted:#c8b87a; --dim:#7a6a3a;
  --success:#00d9a0; --warn:#f0a030; --border:rgba(212,168,0,.12);
  --font-brand:'Orbitron',monospace; --font-body:'Rajdhani',sans-serif; --font-code:'Space Mono',monospace;
  --radius:14px; --radius-sm:10px;
}

/* ── War Background ── */
.war-bg { position:fixed; inset:0; z-index:0; overflow:hidden; background:linear-gradient(180deg,#030508 0%,#060202 55%,#0a0101 100%); }
.war-bg video { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%); object-fit:cover; filter:brightness(0.65) saturate(1.0); z-index:0; }
.w-stars { position:absolute; inset:0; z-index:1; background-image:radial-gradient(1.5px 1.5px at 5% 5%,rgba(255,255,255,.7) 0%,transparent 100%),radial-gradient(1px 1px at 15% 12%,rgba(255,255,255,.5) 0%,transparent 100%),radial-gradient(2px 2px at 25% 3%,rgba(255,255,255,.8) 0%,transparent 100%),radial-gradient(1px 1px at 38% 8%,rgba(255,255,255,.4) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 52% 4%,rgba(255,255,255,.7) 0%,transparent 100%),radial-gradient(1px 1px at 65% 9%,rgba(255,255,255,.5) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 78% 5%,rgba(255,255,255,.6) 0%,transparent 100%),radial-gradient(1px 1px at 91% 7%,rgba(255,255,255,.7) 0%,transparent 100%); animation:twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle{from{opacity:.65}to{opacity:1}}
.w-moon { position:absolute; top:6%; right:10%; width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#e8dfc6,#c8b896,#a08858); box-shadow:0 0 20px rgba(220,196,130,.4),0 0 60px rgba(200,176,110,.15),inset -6px -4px 12px rgba(70,50,20,.45); z-index:2; animation:moonglow 6s ease-in-out infinite alternate; }
@keyframes moonglow{from{box-shadow:0 0 20px rgba(220,196,130,.35),0 0 60px rgba(200,176,110,.12)}to{box-shadow:0 0 30px rgba(220,196,130,.55),0 0 80px rgba(200,176,110,.22)}}
.w-skyline { position:absolute; bottom:21%; left:0; right:0; height:26%; z-index:4; background:linear-gradient(#050101,#050101) 2% 100%/26px 100% no-repeat,linear-gradient(#050101,#050101) 5% 100%/18px 80% no-repeat,linear-gradient(#050101,#050101) 9% 100%/34px 90% no-repeat,linear-gradient(#050101,#050101) 14% 100%/20px 60% no-repeat,linear-gradient(#050101,#050101) 18% 100%/44px 100% no-repeat,linear-gradient(#050101,#050101) 23% 100%/16px 55% no-repeat,linear-gradient(#050101,#050101) 28% 100%/38px 80% no-repeat,linear-gradient(#050101,#050101) 34% 100%/50px 100% no-repeat,linear-gradient(#050101,#050101) 40% 100%/22px 65% no-repeat,linear-gradient(#050101,#050101) 45% 100%/40px 88% no-repeat,linear-gradient(#050101,#050101) 51% 100%/18px 50% no-repeat,linear-gradient(#050101,#050101) 56% 100%/46px 95% no-repeat,linear-gradient(#050101,#050101) 62% 100%/28px 70% no-repeat,linear-gradient(#050101,#050101) 68% 100%/36px 82% no-repeat,linear-gradient(#050101,#050101) 74% 100%/20px 58% no-repeat,linear-gradient(#050101,#050101) 79% 100%/42px 88% no-repeat,linear-gradient(#050101,#050101) 85% 100%/16px 48% no-repeat,linear-gradient(#050101,#050101) 89% 100%/32px 72% no-repeat,linear-gradient(#050101,#050101) 94% 100%/24px 62% no-repeat,linear-gradient(#050101,#050101) 98% 100%/18px 44% no-repeat; }
.w-exp { position:absolute; border-radius:50%; opacity:0; }
.we1{width:16px;height:16px;background:#fff;box-shadow:0 0 0 5px rgba(255,200,80,.9),0 0 0 12px rgba(255,100,0,.7),0 0 50px 25px rgba(200,30,0,.3);bottom:25%;left:18%;animation:flash 5s infinite}
.we1b{width:60px;height:60px;background:radial-gradient(#ffe060,#ff8800,#ff3300,transparent 85%);filter:blur(4px);bottom:23%;left:16%;animation:fireball 5s infinite .05s}
.we2{width:10px;height:10px;background:#fff;box-shadow:0 0 0 4px rgba(255,200,80,.9),0 0 0 9px rgba(255,100,0,.7),0 0 35px 18px rgba(180,20,0,.25);bottom:22%;left:62%;animation:flash 4s infinite 2.2s}
.we2b{width:44px;height:44px;background:radial-gradient(#ffcc40,#ff7700,#ff2200,transparent 85%);filter:blur(3px);bottom:20.5%;left:58.5%;animation:fireball 4s infinite 2.25s}
.we3{width:22px;height:22px;background:#fff;box-shadow:0 0 0 7px rgba(255,220,100,.9),0 0 0 16px rgba(255,130,0,.7),0 0 70px 35px rgba(200,50,0,.3);bottom:28%;right:16%;animation:flash 7s infinite 4s}
.we3b{width:90px;height:90px;background:radial-gradient(#fff060,#ffaa00,#ff4400,#d4a800,transparent 88%);filter:blur(5px);bottom:25%;right:19%;animation:fireball 7s infinite 4.05s}
@keyframes flash{0%,100%{opacity:0;transform:scale(.1)}2%{opacity:1;transform:scale(1)}8%{opacity:.9;transform:scale(1.4)}25%{opacity:.3;transform:scale(2.5)}40%{opacity:0}}
@keyframes fireball{0%,100%{opacity:0;transform:scale(.2) translateY(0)}3%{opacity:1;transform:scale(1) translateY(0)}20%{opacity:.7;transform:scale(1.6) translateY(-12px)}50%{opacity:.25;transform:scale(2.5) translateY(-35px)}70%{opacity:0}}
.w-smoke{position:absolute;border-radius:40% 60%;filter:blur(22px);opacity:0}
.ws1{width:160px;height:200px;background:radial-gradient(ellipse at 40% 60%,rgba(50,18,6,.9) 0%,rgba(25,9,3,.5) 50%,transparent 85%);bottom:22%;left:10%;animation:smoke 12s linear infinite}
.ws2{width:200px;height:250px;background:radial-gradient(ellipse at 50% 65%,rgba(35,14,5,.85) 0%,rgba(18,7,2,.5) 50%,transparent 85%);bottom:20%;left:32%;animation:smoke 15s linear infinite 4s}
.ws3{width:140px;height:180px;background:radial-gradient(ellipse at 45% 60%,rgba(55,20,8,.9) 0%,rgba(28,10,4,.5) 50%,transparent 85%);bottom:18%;right:14%;animation:smoke 11s linear infinite 7s}
.ws4{width:220px;height:280px;background:radial-gradient(ellipse at 55% 60%,rgba(40,16,5,.88) 0%,rgba(20,8,3,.45) 50%,transparent 85%);bottom:16%;left:55%;animation:smoke 14s linear infinite 2s}
@keyframes smoke{0%{opacity:0;transform:translateY(0) scale(.6) rotate(0deg)}8%{opacity:.85}50%{opacity:.6;transform:translateY(-120px) scale(1.5) rotate(6deg)}100%{opacity:0;transform:translateY(-260px) scale(2.8) rotate(12deg)}}
.w-ground{position:absolute;bottom:0;left:0;right:0;height:22%;background:linear-gradient(180deg,transparent 0%,#0a0101 30%,#040000 100%);clip-path:polygon(0% 45%,2% 38%,4% 42%,6% 30%,8% 36%,10% 26%,12% 32%,14% 20%,16% 28%,18% 16%,20% 24%,22% 12%,24% 20%,26% 8%,28% 16%,30% 6%,32% 14%,34% 4%,36% 12%,38% 2%,40% 10%,42% 0%,44% 8%,46% 2%,48% 10%,50% 0%,52% 8%,54% 2%,56% 10%,58% 4%,60% 14%,62% 6%,64% 16%,66% 8%,68% 20%,70% 10%,72% 22%,74% 14%,76% 25%,78% 16%,80% 28%,82% 20%,84% 32%,86% 24%,88% 36%,90% 28%,92% 40%,94% 32%,96% 42%,98% 35%,100% 44%,100% 100%,0% 100%);z-index:5}
.w-horizon{position:absolute;bottom:20%;left:0;right:0;height:100px;background:linear-gradient(180deg,transparent 0%,rgba(140,20,0,.05) 30%,rgba(220,50,0,.18) 65%,rgba(200,40,0,.22) 85%,rgba(160,30,0,.15) 100%);filter:blur(8px);z-index:3;animation:hpulse 3s ease-in-out infinite alternate}
@keyframes hpulse{from{opacity:.7}to{opacity:1}}
.w-haze{position:absolute;bottom:17%;left:0;right:0;height:120px;background:linear-gradient(180deg,transparent 0%,rgba(20,6,2,.3) 50%,rgba(30,8,3,.5) 100%);filter:blur(14px);z-index:6}
.w-chopper{position:absolute;top:14%;left:-80px;z-index:8;animation:chopfly 16s linear infinite}
.w-chbody{width:56px;height:20px;background:linear-gradient(#1a0e06,#0d0702) 8px 4px/36px 12px no-repeat,linear-gradient(#0f0904,#080502) 40px 7px/20px 4px no-repeat;animation:chopbob .25s ease-in-out infinite alternate;position:relative}
.w-rotor{position:absolute;top:-1px;left:12px;width:32px;height:1.5px;background:linear-gradient(90deg,transparent,#1a0e06,#0d0702,#1a0e06,transparent);transform-origin:center;animation:rotor .07s linear infinite}
@keyframes chopfly{0%{left:-80px;top:12%}25%{top:18%}50%{top:10%}75%{top:16%}100%{left:110%;top:13%}}
@keyframes chopbob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes rotor{0%{transform:rotate(0deg) scaleX(1)}25%{transform:rotate(90deg) scaleX(.12)}50%{transform:rotate(180deg) scaleX(1)}75%{transform:rotate(270deg) scaleX(.12)}100%{transform:rotate(360deg) scaleX(1)}}
.w-flash{position:absolute;inset:0;z-index:9;pointer-events:none;animation:scrflash 5s infinite}
@keyframes scrflash{0%,1.9%,3%,100%{background:rgba(255,70,0,0)}2%{background:rgba(255,70,0,.06)}}
.w-overlay{position:absolute;inset:0;z-index:10;background:radial-gradient(ellipse at 50% 40%,rgba(4,4,4,0) 0%,rgba(4,4,4,.3) 60%,rgba(4,4,4,.6) 100%),linear-gradient(180deg,rgba(4,4,4,.55) 0%,rgba(4,4,4,.05) 25%,rgba(4,4,4,.05) 75%,rgba(4,4,4,.7) 100%);pointer-events:none}

/* ── Loading Screen ── */
.loading-screen{position:fixed;inset:0;background:#020202;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .5s,transform .5s}
.loading-screen.hidden{opacity:0;pointer-events:none;transform:scale(1.04);display:none}
.loading-logo{font-family:var(--font-brand);font-size:2.2rem;font-weight:900}
.loading-logo .acc{color:var(--red)}
.loading-bar-wrap{width:200px;height:3px;background:rgba(212,168,0,.12);border-radius:3px;overflow:hidden}
.loading-bar{height:100%;background:linear-gradient(90deg,#d4a800,#ffe033);border-radius:3px;animation:loadbar 1.8s ease-out forwards}
@keyframes loadbar{from{width:0%}to{width:100%}}
.loading-sub{font-size:.68rem;font-family:var(--font-brand);color:#666;text-transform:uppercase;letter-spacing:.15em;animation:gvpulse 1s ease-in-out infinite alternate}
@keyframes gvpulse{from{opacity:.4}to{opacity:1}}

/* ── Announcement ── */
.announcement{position:relative;z-index:20;background:linear-gradient(135deg,rgba(212,168,0,.2),rgba(100,0,0,.15));border-bottom:1px solid rgba(212,168,0,.3);padding:11px 20px;text-align:center;font-family:var(--font-brand);font-size:.75rem;color:#ff8888;letter-spacing:.05em}

/* ── Navbar ── */
.navbar{position:sticky;top:0;z-index:100;background:rgba(4,4,4,.93);backdrop-filter:blur(20px);border-bottom:1.5px solid rgba(212,168,0,.22);padding:0 20px;height:62px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-brand);font-weight:900;font-size:1rem;text-decoration:none;color:var(--text)}
.brand-icon{width:36px;height:36px;background:linear-gradient(135deg,#d4a800,#ffe033);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 0 20px rgba(212,168,0,.5)}
.brand-acc{color:#ffe033}
.lang-tog{display:flex;background:rgba(8,8,8,.9);border:1.5px solid rgba(212,168,0,.12);border-radius:8px;overflow:hidden}
.lang-btn{padding:6px 14px;font-family:var(--font-brand);font-size:.68rem;cursor:pointer;border:none;background:none;color:var(--muted);transition:all .2s;text-decoration:none;display:flex;align-items:center}
.lang-btn.active,.lang-btn:hover{background:rgba(212,168,0,.2);color:#ffdd00}

/* ── Container ── */
.container{max-width:1100px;margin:0 auto;padding:0 20px;position:relative;z-index:5}
.container-sm{max-width:520px;margin:0 auto;padding:0 20px;position:relative;z-index:5}
.page{padding:44px 0 80px}

/* ── Badge ── */
.badge-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(212,168,0,.15);border:1.5px solid rgba(212,168,0,.38);border-radius:100px;padding:7px 18px;font-size:.7rem;font-family:var(--font-brand);color:#ffe033;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px}

/* ── Typography ── */
h1{font-family:var(--font-brand);font-size:clamp(1.7rem,4vw,2.4rem);font-weight:900;line-height:1.15;margin-bottom:12px}
.hero-title{background:linear-gradient(135deg,#f2f2f2 0%,#ffdd00 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none}
.subtitle{font-size:1.05rem;color:var(--muted);margin-bottom:26px;line-height:1.7;text-shadow:0 1px 6px rgba(0,0,0,.8)}
h2{font-family:var(--font-brand);font-size:clamp(1.2rem,3vw,1.6rem);font-weight:700}
h3{font-family:var(--font-brand);font-size:1rem;font-weight:600}

/* ── Cards ── */
.card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:24px;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.6);margin-bottom:18px}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--red-b),transparent)}

/* ── Forms ── */
.form-label{font-family:var(--font-brand);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);display:block;margin-bottom:8px}
.form-input{width:100%;background:rgba(4,4,4,.9);border:2px solid rgba(212,168,0,.14);border-radius:var(--radius-sm);padding:15px 17px;color:var(--text);font-family:var(--font-body);font-size:1.05rem;outline:none;transition:all .2s;margin-bottom:14px}
.form-input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(212,168,0,.1)}
.form-input::placeholder{color:#555}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 22px;border-radius:11px;font-family:var(--font-brand);font-size:.82rem;font-weight:700;letter-spacing:.05em;cursor:pointer;border:none;transition:all .22s;white-space:nowrap;text-decoration:none}
.btn-full{width:100%}
.btn-sm{padding:9px 16px;font-size:.72rem}
.btn-primary{background:linear-gradient(135deg,#c49800,#ffdd22);color:#fff;box-shadow:0 4px 24px rgba(212,168,0,.42)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(212,168,0,.65);color:#fff}
.btn-steam{background:linear-gradient(135deg,#665500,#d4a800);color:#fff;box-shadow:0 4px 18px rgba(140,0,0,.4)}
.btn-steam:hover{transform:translateY(-2px);box-shadow:0 6px 26px rgba(160,130,0,.55)}
.btn-ubisoft{background:linear-gradient(135deg,#aa2200,#ee4400);color:#fff;box-shadow:0 4px 18px rgba(190,50,0,.38)}
.btn-ubisoft:hover{transform:translateY(-2px)}
.btn-microsoft{background:linear-gradient(135deg,#660000,#991111);color:#fff;box-shadow:0 4px 18px rgba(90,0,0,.38)}
.btn-whatsapp{background:linear-gradient(135deg,#1a9e4e,#22cc60);color:#fff;box-shadow:0 4px 18px rgba(37,200,90,.35)}
.btn-whatsapp:hover{transform:translateY(-2px)}
.btn-secondary{background:rgba(255,255,255,.05);color:var(--muted);border:1.5px solid rgba(255,255,255,.12);font-size:.78rem}
.btn-secondary:hover{border-color:var(--red-b);color:#ffe033;background:rgba(212,168,0,.08)}
.btn-outline{background:transparent;color:var(--red);border:1.5px solid var(--red-b)}
.btn-outline:hover{background:var(--red-dim)}
.btn-danger{background:rgba(212,168,0,.1);color:#ffe033;border:1.5px solid rgba(212,168,0,.25)}
.btn-success-wa{background:rgba(37,211,102,.12);color:#25d366;border:1.5px solid rgba(37,211,102,.28)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none !important}

/* ── Nav Tabs ── */
.nav-tabs{display:flex;background:rgba(8,8,8,.9);border:1.5px solid var(--border);border-radius:11px;overflow:hidden;margin-bottom:26px}
.nav-tab{flex:1;padding:13px;text-align:center;font-family:var(--font-brand);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;color:var(--muted);border:none;background:none;transition:all .2s;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px}
.nav-tab.active,.nav-tab:hover{background:rgba(212,168,0,.18);color:#ffdd00;border-bottom:2px solid var(--red)}

/* ── Steps ── */
.steps{display:flex;flex-direction:column;gap:13px}
.step{display:flex;align-items:flex-start;gap:14px}
.step-num{width:30px;height:30px;background:rgba(212,168,0,.2);border:1.5px solid rgba(212,168,0,.42);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-brand);font-size:.68rem;color:#ffe033;flex-shrink:0;margin-top:1px}
.step-text{font-size:1rem;color:var(--muted);padding-top:5px;line-height:1.55;text-shadow:0 1px 6px rgba(0,0,0,.7)}

/* ── Game Grid ── */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:13px;margin-bottom:22px}
.game-card{background:rgba(10,10,10,.95);border:1.5px solid var(--border);border-radius:13px;padding:20px 14px;text-align:center;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;text-decoration:none;display:block;color:inherit}
.game-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#d4a800,transparent);opacity:0;transition:opacity .3s}
.game-card:hover{border-color:rgba(212,168,0,.5);box-shadow:0 0 28px rgba(212,168,0,.2);transform:translateY(-3px)}
.game-card:hover::after{opacity:1}
.game-card.activated{opacity:.45;cursor:default;pointer-events:none}
.game-thumb{width:100%;height:84px;object-fit:cover;border-radius:8px;margin-bottom:11px}
.game-thumb-placeholder{width:100%;height:84px;background:linear-gradient(135deg,rgba(212,168,0,.1),rgba(60,0,0,.04));border-radius:8px;margin-bottom:11px;display:flex;align-items:center;justify-content:center;font-size:2.4rem;border:1px solid var(--border)}
.game-title{font-family:var(--font-brand);font-size:.68rem;font-weight:700;color:var(--text);margin-bottom:6px}
.game-status{font-size:.82rem;color:var(--muted)}
.game-status.done{color:var(--success);font-weight:600}

/* ── Credentials ── */
.creds-box{background:rgba(4,4,4,.97);border:1.5px solid rgba(212,168,0,.38);border-radius:var(--radius);padding:22px;margin-bottom:18px;position:relative}
.creds-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#886600,#ffdd22,#886600)}
.cred-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(212,168,0,.07)}
.cred-row:last-child{border-bottom:none}
.cred-label{font-family:var(--font-brand);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:#999;min-width:85px;flex-shrink:0}
.cred-value{font-family:var(--font-code);font-size:.85rem;color:#ffe033;background:rgba(212,168,0,.1);padding:7px 12px;border-radius:8px;border:1px solid rgba(212,168,0,.24);flex:1;cursor:pointer;transition:all .2s;word-break:break-all}
.cred-value:hover{background:rgba(212,168,0,.2);color:#ff8888}
.copy-btn{background:rgba(212,168,0,.12);border:1.5px solid rgba(212,168,0,.28);color:#ffe033;padding:7px 12px;border-radius:8px;cursor:pointer;font-size:.72rem;font-family:var(--font-brand);transition:all .2s;flex-shrink:0}
.copy-btn:hover,.copy-btn.copied{background:rgba(212,168,0,.25)}
.plat-tag{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:100px;font-family:var(--font-brand);font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:0}
.plat-steam{background:rgba(160,130,0,.2);border:1.5px solid rgba(160,130,0,.42);color:#ffe033}
.plat-ubisoft{background:rgba(200,80,0,.18);border:1.5px solid rgba(200,80,0,.38);color:#ff7744}
.plat-ms{background:rgba(100,0,0,.18);border:1.5px solid rgba(100,0,0,.38);color:#ff6666}
.plat-sep{margin:14px 0 14px;padding-top:14px;border-top:1px solid rgba(212,168,0,.08)}

/* ── Code Box ── */
.code-box{background:rgba(4,4,4,.97);border:2px solid rgba(212,168,0,.42);border-radius:var(--radius);padding:30px;text-align:center;margin:16px 0;animation:reveal .4s ease-out}
@keyframes reveal{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.code-label{font-family:var(--font-brand);font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:#999;display:block;margin-bottom:12px}
.code-value{font-family:var(--font-code);font-size:3.5rem;font-weight:700;color:#ffe033;letter-spacing:.4em;text-shadow:0 0 40px rgba(212,168,0,.8);display:block;margin-bottom:14px}
.success-note{background:rgba(0,217,160,.1);border:1.5px solid rgba(0,217,160,.3);border-radius:9px;padding:11px 16px;color:var(--success);font-size:.92rem;font-weight:600}

/* ── Status ── */
.status-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border)}
.status-row:last-child{border-bottom:none}
.status-game{font-size:1rem;color:var(--text);font-weight:600}
.status-done{background:rgba(0,217,160,.14);color:var(--success);border:1.5px solid rgba(0,217,160,.35);padding:6px 14px;border-radius:100px;font-family:var(--font-brand);font-size:.66rem;font-weight:700}
.status-pend{background:rgba(212,168,0,.14);color:#ffe033;border:1.5px solid rgba(212,168,0,.35);padding:6px 14px;border-radius:100px;font-family:var(--font-brand);font-size:.66rem;font-weight:700}

/* ── Spinner ── */
.spinner{width:46px;height:46px;border:3px solid rgba(212,168,0,.12);border-top-color:#d4a800;border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner-text{font-family:var(--font-brand);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#d4a800;animation:gvpulse 1.5s ease-in-out infinite alternate}

/* ── Alerts ── */
.alert{padding:11px 16px;border-radius:var(--radius-sm);font-size:.9rem;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.alert-error{background:rgba(212,168,0,.08);border:1.5px solid rgba(212,168,0,.22);color:#ff7777}
.alert-success{background:rgba(0,217,160,.08);border:1.5px solid rgba(0,217,160,.22);color:var(--success)}
.alert-warn{background:rgba(240,160,48,.08);border:1.5px solid rgba(240,160,48,.22);color:var(--warn)}
.alert-info{background:var(--red-dim);border:1.5px solid var(--red-b);color:#ff8888}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:100px;font-size:.62rem;font-family:var(--font-brand);white-space:nowrap}
.badge-red{background:rgba(212,168,0,.12);color:#ffe033;border:1px solid rgba(212,168,0,.28)}
.badge-grn{background:rgba(0,217,160,.1);color:var(--success);border:1px solid rgba(0,217,160,.25)}
.badge-yel{background:rgba(240,160,48,.1);color:var(--warn);border:1px solid rgba(240,160,48,.25)}
.badge-blue{background:rgba(80,120,255,.1);color:#8899ff;border:1px solid rgba(80,120,255,.2)}
.badge-gray{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--border)}

/* ── Divider ── */
.divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:#555;font-size:.65rem;font-family:var(--font-brand);text-transform:uppercase;letter-spacing:.1em}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── Floating WhatsApp ── */
.float-wa{position:fixed;bottom:24px;right:24px;z-index:500;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#25d366,#128c7e);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.5);cursor:pointer;transition:all .2s;border:none;text-decoration:none;animation:wapulse 2s ease-in-out infinite}
.float-wa:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.7)}
@keyframes wapulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,.4)}50%{box-shadow:0 4px 20px rgba(37,211,102,.5),0 0 0 12px rgba(37,211,102,0)}}

/* ── Footer ── */
.footer{text-align:center;padding:28px 20px 18px;color:#666;font-size:.8rem;border-top:1px solid var(--border);position:relative;z-index:5}
.social-row{display:flex;align-items:center;justify-content:center;gap:13px;margin-bottom:14px}
.soc-btn{width:48px;height:48px;border-radius:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1.5px solid rgba(212,168,0,.12);background:rgba(212,168,0,.06);transition:all .2s;text-decoration:none;color:var(--muted)}
.soc-btn:hover{transform:translateY(-3px)}
.soc-tiktok:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.25);color:#fff}
.soc-ig:hover{background:rgba(255,80,100,.1);border-color:rgba(255,80,100,.32);color:#ff7090}
.soc-wa:hover{background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.32);color:#25d366}
.heart{color:#ffe033}

/* ── ADMIN LAYOUT ── */
.adm-wrap{display:flex;min-height:calc(100vh - 62px)}
.adm-sidebar{width:220px;background:#050505;border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:62px;height:calc(100vh - 62px);overflow-y:auto;flex-shrink:0}
.adm-brand{padding:16px 14px;border-bottom:1px solid var(--border)}
.adm-brand-inner{display:flex;align-items:center;gap:9px;font-family:var(--font-brand);font-weight:900;font-size:.85rem}
.adm-brand-ico{width:30px;height:30px;background:linear-gradient(135deg,#d4a800,#ffe033);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 0 14px rgba(212,168,0,.4)}
.adm-brand-acc{color:#ffe033}
.adm-sub{font-size:.58rem;color:var(--dim);margin-top:3px;font-family:var(--font-brand);text-transform:uppercase;letter-spacing:.08em}
.adm-sec-lbl{padding:9px 12px 3px;font-size:.54rem;font-family:var(--font-brand);color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.adm-nav-link{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:.85rem;color:var(--muted);cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:all .15s;text-decoration:none;position:relative}
.adm-nav-link:hover,.adm-nav-link.active{background:rgba(212,168,0,.1);color:#ffe033}
.adm-nav-link.active{border-right:2px solid var(--red)}
.adm-nav-badge{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:var(--red);color:#fff;font-size:.52rem;font-family:var(--font-brand);padding:1px 6px;border-radius:100px}
.adm-nav-footer{margin-top:auto;padding:10px 12px;border-top:1px solid var(--border)}
.adm-nav-user{font-size:.75rem;color:var(--dim);margin-bottom:7px}
.adm-logout{width:100%;padding:8px;background:rgba(212,168,0,.07);border:1px solid rgba(212,168,0,.2);color:var(--red);border-radius:7px;font-size:.65rem;font-family:var(--font-brand);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .2s;text-decoration:none}
.adm-logout:hover{background:rgba(212,168,0,.16)}
.adm-main{flex:1;background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
.adm-topbar{height:52px;background:rgba(4,4,4,.98);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0}
.adm-page-title{font-family:var(--font-brand);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.adm-content{flex:1;overflow-y:auto;padding:20px}
.maint-toggle{display:flex;align-items:center;gap:5px;font-size:.65rem;font-family:var(--font-brand);color:var(--muted);cursor:pointer;background:rgba(10,10,10,.9);border:1px solid var(--border);border-radius:7px;padding:6px 10px;text-decoration:none;transition:all .2s}
.maint-toggle:hover{border-color:var(--red-b);color:var(--red)}
.maint-dot{width:8px;height:8px;border-radius:50%;background:var(--success)}
.maint-dot.off{background:var(--red)}

/* ── Admin Stats ── */
.stats-grid{display:grid;gap:10px;margin-bottom:16px}
.sg-5{grid-template-columns:repeat(5,1fr)}
.sg-4{grid-template-columns:repeat(4,1fr)}
.sg-3{grid-template-columns:repeat(3,1fr)}
.stat-card{background:rgba(8,8,8,.97);border:1.5px solid var(--border);border-radius:11px;padding:16px;position:relative;overflow:hidden;cursor:default;transition:all .2s}
.stat-card:hover{border-color:var(--red-b);box-shadow:0 0 20px rgba(212,168,0,.1)}
.stat-icon{position:absolute;top:11px;right:11px;font-size:1.4rem;opacity:.18}
.stat-val{font-family:var(--font-brand);font-size:1.6rem;font-weight:900;color:#ffe033;display:block;line-height:1}
.stat-label{font-size:.72rem;color:var(--muted);margin-top:4px;display:block}
.stat-change{font-size:.65rem;color:var(--success);margin-top:3px}
.stat-change.down{color:var(--red)}

/* ── Admin Tables ── */
.table-wrap{background:rgba(8,8,8,.97);border:1.5px solid var(--border);border-radius:11px;overflow:hidden;margin-bottom:14px}
.table-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.table-title{font-family:var(--font-brand);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
table{width:100%;border-collapse:collapse}
thead th{padding:9px 14px;background:rgba(5,5,5,.95);color:var(--dim);font-family:var(--font-brand);font-size:.55rem;text-transform:uppercase;letter-spacing:.08em;text-align:left;white-space:nowrap}
tbody td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:.85rem;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(212,168,0,.015)}
.td-mono{font-family:var(--font-code);font-size:.78rem}
.td-red{color:#ffe033}
.td-grn{color:var(--success)}
.td-primary{color:var(--text);font-weight:600}

/* ── Admin Cards ── */
.a-card{background:rgba(8,8,8,.97);border:1.5px solid var(--border);border-radius:11px;padding:18px;position:relative;overflow:hidden;margin-bottom:14px}
.a-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--red-b),transparent)}
.a-card-title{font-family:var(--font-brand);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:13px;display:flex;align-items:center;justify-content:space-between}

/* ── Grid ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* ── Charts ── */
.bar-chart{display:flex;flex-direction:column;gap:8px}
.bar-row{display:flex;align-items:center;gap:9px}
.bar-label{font-size:.72rem;color:var(--muted);width:130px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{flex:1;height:6px;background:rgba(212,168,0,.07);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#d4a800,#ffe033)}
.bar-val{font-family:var(--font-code);font-size:.68rem;color:#ffe033;width:38px;text-align:right;flex-shrink:0}
.h-bars{display:flex;align-items:flex-end;gap:2px;height:58px}
.h-bar{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#ffe033,#886600);opacity:.65;transition:opacity .2s;min-height:3px;cursor:pointer}
.h-bar:hover{opacity:1}
.rev-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
.rev-row:last-child{border-bottom:none}
.rev-day{font-size:.72rem;color:var(--muted);width:36px;flex-shrink:0;font-family:var(--font-code)}
.rev-bw{flex:1;height:5px;background:rgba(212,168,0,.05);border-radius:3px;overflow:hidden}
.rev-bf{height:100%;border-radius:3px;background:linear-gradient(90deg,#d4a800,#ffdd00)}
.rev-v{font-size:.72rem;color:#ffe033;font-family:var(--font-code);width:68px;text-align:right;flex-shrink:0}

/* ── Customer cards ── */
.cust-card{background:rgba(6,6,6,.96);border:1.5px solid var(--border);border-radius:10px;padding:13px 15px;margin-bottom:8px;transition:border-color .2s}
.cust-card:hover{border-color:var(--red-b)}
.cust-name{font-size:.95rem;color:var(--text);font-weight:600;margin-bottom:5px}
.cust-meta{font-size:.75rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:9px;margin-bottom:7px}
.cust-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ── Toggle ── */
.toggle{position:relative;width:36px;height:20px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;background:rgba(212,168,0,.08);border:1.5px solid var(--border);border-radius:20px;transition:.2s;cursor:pointer}
.toggle input:checked + .toggle-slider{background:rgba(212,168,0,.4);border-color:var(--red-b)}
.toggle-slider::before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;background:var(--muted);border-radius:50%;transition:.2s}
.toggle input:checked + .toggle-slider::before{transform:translateX(16px);background:#ffe033}

/* ── Settings rows ── */
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border);gap:10px}
.setting-row:last-child{border-bottom:none}
.setting-name{font-size:.9rem;color:var(--text);margin-bottom:2px}
.setting-desc{font-size:.72rem;color:var(--dim)}

/* ── Log rows ── */
.log-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--border);font-size:.75rem}
.log-row:last-child{border-bottom:none}
.log-time{font-family:var(--font-code);color:var(--dim);font-size:.68rem;width:80px;flex-shrink:0}
.log-event{color:var(--muted);flex:1}
.log-ip{font-family:var(--font-code);font-size:.68rem;color:var(--dim)}

/* ── Admin forms ── */
.a-input{width:100%;background:rgba(4,4,4,.92);border:1.5px solid var(--border);border-radius:8px;padding:10px 13px;color:var(--text);font-family:var(--font-body);font-size:.9rem;outline:none;transition:border-color .2s}
.a-input:focus{border-color:var(--red)}
.a-input::placeholder{color:var(--dim)}
.a-textarea{width:100%;background:rgba(4,4,4,.92);border:1.5px solid var(--border);border-radius:8px;padding:10px 13px;color:var(--text);font-family:var(--font-body);font-size:.9rem;outline:none;resize:vertical;min-height:68px}
.a-textarea:focus{border-color:var(--red)}
.a-label{font-family:var(--font-brand);font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:6px}
.a-group{margin-bottom:10px}
.flex-gap{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ── Notif items ── */
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.notif-item:last-child{border-bottom:none}
.notif-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.notif-title{font-size:.85rem;color:var(--text);margin-bottom:2px}
.notif-time{font-size:.7rem;color:var(--dim)}

/* ── Maintenance / Error ── */
.maint-page{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.error-page{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center}
.error-code{font-family:var(--font-brand);font-size:5rem;font-weight:900;color:#ffe033;opacity:.3;display:block}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(212,168,0,.22);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:rgba(212,168,0,.38)}
::selection{background:var(--red-dim);color:#ffe033}

/* ── RTL ── */
[dir="rtl"] .cred-row{flex-direction:row-reverse}
[dir="rtl"] .step{flex-direction:row-reverse;text-align:right}
[dir="rtl"] thead th,[dir="rtl"] tbody td{text-align:right}
[dir="rtl"] .adm-sidebar{border-right:none;border-left:1px solid var(--border)}
[dir="rtl"] .adm-nav-link.active{border-right:none;border-left:2px solid var(--red)}
[dir="rtl"] .float-wa{right:auto;left:24px}

/* ── Animations ── */
.fade-in{animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Responsive ── */
@media(max-width:768px){
  .adm-sidebar{position:fixed;left:-220px;top:0;bottom:0;z-index:200;transition:left .3s}
  .adm-sidebar.open{left:0}
  .adm-content{padding:14px}
  .stats-grid.sg-5{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .three-col{grid-template-columns:1fr}
  [dir="rtl"] .adm-sidebar{left:auto;right:-220px}
  [dir="rtl"] .adm-sidebar.open{right:0}
}

/* ── Text visibility ── */
h1,h2,h3{text-shadow:0 2px 12px rgba(0,0,0,.9)}
.step-text{text-shadow:0 1px 6px rgba(0,0,0,.8)}

/* Social buttons fix */
.soc-btn { background:rgba(255,255,255,.08) !important; border:1.5px solid rgba(255,255,255,.2) !important; color:#ffffff !important; }
.soc-btn svg { fill:#ffffff !important; }
.footer { position:relative; z-index:50 !important; background:rgba(4,4,4,.97) !important; }
.container-sm, .container { position:relative; z-index:10 !important; }