/* ═══════ Visionika — Neon Dark Theme ═══════ */
input[type="number"]{-moz-appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

:root {
  --bg: #090909;
  --surface: #111111;
  --surface2: #161616;
  --surface3: #1e1e1e;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(200,255,0,0.22);
  --purple: #c8ff00;
  --purple-light: #d4ff33;
  --pink: #c8ff00;
  --cyan: #c8ff00;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --text: #f0f0f0;
  --text2: #8a8a8a;
  --text3: #555555;
  --glow-purple: rgba(200,255,0,0.06);
  --glow-pink: rgba(200,255,0,0.04);
  --accent: #c8ff00;
  --accent-dim: rgba(200,255,0,0.12);
}

* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.6;
}
a { color:inherit; text-decoration:none }
button { font-family:inherit; cursor:pointer; border:none; outline:none }
input,textarea { font-family:inherit; outline:none }
[data-lucide] { display:inline-block; vertical-align:middle; flex-shrink:0 }
.feature-icon [data-lucide] { vertical-align:baseline }
::selection { background:rgba(200,255,0,0.25); color:#000 }
::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:#333; border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--accent) }

/* ═══════ Background ═══════ */
.bg-effects {
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}

/* Aurora bands */
.aurora {
  position:absolute; width:200%; height:70%; top:-15%; left:-50%;
  background:linear-gradient(
    120deg,
    transparent 15%,
    rgba(200,255,0,0.12) 28%,
    rgba(100,255,50,0.18) 36%,
    rgba(200,255,0,0.08) 44%,
    transparent 52%,
    rgba(200,255,0,0.1) 60%,
    rgba(0,200,100,0.14) 68%,
    transparent 80%
  );
  filter:blur(50px);
  animation:auroraMove 18s ease-in-out infinite alternate;
  transform-origin:center center;
}
.aurora-2 {
  top:auto; bottom:-20%; height:55%;
  background:linear-gradient(
    -120deg,
    transparent 20%,
    rgba(200,255,0,0.1) 32%,
    rgba(150,255,0,0.16) 40%,
    rgba(200,255,0,0.06) 48%,
    transparent 56%,
    rgba(100,255,50,0.12) 65%,
    transparent 78%
  );
  filter:blur(60px);
  animation:auroraMove2 22s ease-in-out infinite alternate;
}
@keyframes auroraMove {
  0%   { transform:translateX(0) scaleY(1) rotate(0deg) }
  33%  { transform:translateX(10%) scaleY(1.2) rotate(2deg) }
  66%  { transform:translateX(-8%) scaleY(0.85) rotate(-2deg) }
  100% { transform:translateX(12%) scaleY(1.15) rotate(3deg) }
}
@keyframes auroraMove2 {
  0%   { transform:translateX(0) scaleY(1) rotate(0deg) }
  50%  { transform:translateX(-12%) scaleY(1.3) rotate(-3deg) }
  100% { transform:translateX(8%) scaleY(0.8) rotate(2deg) }
}

/* Glowing spots */
.bg-glow {
  position:absolute; border-radius:50%; filter:blur(80px);
  animation:glowPulse 10s ease-in-out infinite alternate;
}
.bg-glow-1 {
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(200,255,0,0.5), transparent 65%);
  top:-8%; left:-8%;
  animation-duration:12s;
}
.bg-glow-2 {
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(100,255,80,0.4), transparent 65%);
  bottom:0; right:-5%;
  animation-duration:16s; animation-direction:alternate-reverse;
}
.bg-glow-3 {
  width:350px; height:350px;
  background:radial-gradient(circle, rgba(200,255,0,0.35), transparent 65%);
  top:40%; left:35%;
  animation-duration:20s;
}
@keyframes glowPulse {
  0%   { opacity:var(--glow-from, 0.1); transform:scale(1) }
  50%  { opacity:var(--glow-to, 0.22); transform:scale(1.12) }
  100% { opacity:var(--glow-from, 0.1); transform:scale(0.92) }
}
.bg-glow-1 { --glow-from:0.15; --glow-to:0.28 }
.bg-glow-2 { --glow-from:0.1; --glow-to:0.22 }
.bg-glow-3 { --glow-from:0.06; --glow-to:0.15 }

/* Film grain */
.bg-grain {
  position:absolute; inset:0; z-index:2; opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px;
  animation:grainShift 0.5s steps(1) infinite;
}
@keyframes grainShift {
  0%   { transform:translate(0,0) }
  25%  { transform:translate(-2px,3px) }
  50%  { transform:translate(3px,-1px) }
  75%  { transform:translate(-1px,-2px) }
  100% { transform:translate(2px,1px) }
}

/* Vignette */
.bg-vignette {
  position:absolute; inset:0; z-index:3;
  background:radial-gradient(ellipse 75% 65% at 50% 50%, transparent 40%, rgba(0,0,0,0.45) 100%);
}

/* Grid pattern */
.bg-grid {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(200,255,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,255,0,0.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, black 10%, transparent 90%);
  animation:gridFade 10s ease-in-out infinite alternate;
}
@keyframes gridFade {
  0% { opacity:0.4 }
  100% { opacity:0.9 }
}

/* Diagonal accent lines */
.bg-lines {
  position:absolute; inset:0; z-index:1; overflow:hidden;
  opacity:0.06;
  background:
    repeating-linear-gradient(
      -35deg,
      transparent,
      transparent 120px,
      rgba(200,255,0,0.15) 120px,
      rgba(200,255,0,0.15) 121px
    );
  animation:linesDrift 30s linear infinite;
}
@keyframes linesDrift {
  0% { background-position:0 0 }
  100% { background-position:200px 200px }
}

/* ═══════ Header ═══════ */
.header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:0 40px; height:60px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(9,9,9,0.85);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:all 0.4s;
}
.header.scrolled { background:rgba(9,9,9,0.95); box-shadow:0 1px 16px rgba(0,0,0,0.5) }
.header-logo {
  font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:700; letter-spacing:-0.5px;
  color:var(--text); text-decoration:none; cursor:pointer;
}
.header-nav { display:flex; gap:2px }
.header-nav a {
  padding:6px 14px; border-radius:8px; font-size:13px; font-weight:500;
  color:var(--text3); transition:all 0.3s;
}
.header-nav a:hover { color:var(--text2) }
.header-nav a.active { color:var(--text); background:rgba(255,255,255,0.04) }
.header-nav a.active::after {
  content:''; position:absolute; bottom:-1px; left:25%; right:25%; height:2px;
  background:var(--accent); border-radius:2px;
}
.header-actions { display:flex; align-items:center; gap:8px }
.header-balance {
  display:flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:8px;
  background:rgba(200,255,0,0.06); border:1px solid rgba(200,255,0,0.12);
  font-size:13px; font-weight:600; cursor:pointer; transition:all 0.3s;
}
.header-balance:hover { background:rgba(200,255,0,0.1); transform:translateY(-1px) }
.btn-header {
  padding:8px 18px; border-radius:8px; font-size:13px; font-weight:600;
  background:var(--accent); color:#000;
  transition:all 0.3s;
}
.btn-header:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(200,255,0,0.25) }
.lang-toggle {
  padding:6px 10px; border-radius:6px; background:var(--surface2);
  color:var(--text3); font-size:12px; font-weight:500; transition:all 0.3s;
}
.lang-toggle:hover { background:var(--surface3); color:var(--text2) }

/* ═══════ Notification Bell ═══════ */
.notif-bell {
  position:relative; background:none; border:none; cursor:pointer;
  color:var(--text3); padding:6px; border-radius:8px; transition:all 0.3s;
  display:flex; align-items:center; justify-content:center;
}
.notif-bell:hover { color:var(--text); background:rgba(255,255,255,0.06) }
.notif-badge {
  position:absolute; top:0; right:0; min-width:16px; height:16px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:700;
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  padding:0 4px; line-height:1; animation:notifPulse 2s ease-in-out infinite;
}
@keyframes notifPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* ═══════ Notification Panel ═══════ */
.notif-overlay { display:none; position:fixed; inset:0; z-index:199; background:rgba(0,0,0,0.4) }
.notif-overlay.active { display:block }
.notif-panel {
  position:fixed; top:60px; right:-400px; width:380px; max-width:calc(100vw - 20px);
  max-height:500px; z-index:200;
  background:var(--surface); border:1px solid var(--border);
  border-radius:0 0 0 16px;
  display:flex; flex-direction:column;
  transition:right 0.35s cubic-bezier(0.16,1,0.3,1);
  box-shadow:-8px 8px 40px rgba(0,0,0,0.5);
}
.notif-panel.active { right:0 }
.notif-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border);
}
.notif-panel-header h3 {
  font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700;
  display:flex; align-items:center; gap:8px; margin:0;
}
.notif-panel-actions { display:flex; align-items:center; gap:6px }
.notif-mark-read {
  background:none; border:none; color:var(--accent); font-size:11px;
  font-weight:600; cursor:pointer; padding:4px 8px; border-radius:6px;
  transition:background 0.2s;
}
.notif-mark-read:hover { background:rgba(200,255,0,0.1) }
.notif-close {
  background:none; border:none; color:var(--text3); font-size:18px;
  cursor:pointer; padding:4px 8px; border-radius:6px; line-height:1;
  transition:all 0.2s;
}
.notif-close:hover { color:var(--text); background:rgba(255,255,255,0.06) }
.notif-list { flex:1; overflow-y:auto; padding:8px }
.notif-list::-webkit-scrollbar { width:6px }
.notif-list::-webkit-scrollbar-track { background:rgba(200,255,0,0.03); border-radius:6px; margin:4px 0 }
.notif-list::-webkit-scrollbar-thumb { background:rgba(200,255,0,0.2); border-radius:6px; border:1px solid rgba(200,255,0,0.08) }
.notif-list::-webkit-scrollbar-thumb:hover { background:rgba(200,255,0,0.45) }
.notif-list { scrollbar-width:thin; scrollbar-color:rgba(200,255,0,0.2) transparent }
.notif-empty {
  display:flex; align-items:center; justify-content:center;
  height:200px; color:var(--text3); font-size:14px;
}
.notif-item {
  display:flex; gap:12px; padding:14px 16px; border-radius:12px;
  margin-bottom:4px; transition:background 0.2s; cursor:default;
  animation:notifSlideIn 0.3s ease-out;
}
.notif-item:hover { background:rgba(255,255,255,0.03) }
.notif-item.unread { background:rgba(200,255,0,0.04); border-left:3px solid var(--accent) }
.notif-icon {
  width:40px; height:40px; border-radius:12px; display:flex;
  align-items:center; justify-content:center; flex-shrink:0;
  font-size:20px;
}
.notif-icon.topup { background:rgba(34,197,94,0.15); color:#22c55e }
.notif-icon.withdraw { background:rgba(59,130,246,0.15); color:#3b82f6 }
.notif-icon.reject { background:rgba(239,68,68,0.15); color:#ef4444 }
.notif-icon.broadcast { background:rgba(168,85,247,0.15); color:#a855f7 }
.notif-content { flex:1; min-width:0 }
.notif-title { font-size:14px; font-weight:600; margin-bottom:2px }
.notif-msg { font-size:13px; color:var(--text2); line-height:1.5 }
.notif-time { font-size:11px; color:var(--text3); margin-top:4px }
.notif-img { width:100%; border-radius:8px; margin-top:8px; max-height:150px; object-fit:cover }
@keyframes notifSlideIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

/* ═══════ Notification Toasts ═══════ */
.notif-toasts {
  position:fixed; top:72px; right:16px; z-index:300;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
  max-width:380px; width:calc(100vw - 32px);
}
.notif-toast {
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:16px 20px; pointer-events:auto;
  display:flex; gap:12px; align-items:flex-start;
  box-shadow:0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,255,0,0.08);
  animation:toastIn 0.5s cubic-bezier(0.16,1,0.3,1);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  cursor:pointer; transition:transform 0.2s, opacity 0.3s;
}
.notif-toast:hover { transform:translateY(-2px) }
.notif-toast.hide { animation:toastOut 0.4s ease-in forwards }
.notif-toast .notif-icon { width:36px; height:36px; border-radius:10px; font-size:18px }
.notif-toast .notif-title { font-size:13px; font-weight:700 }
.notif-toast .notif-msg { font-size:12px; color:var(--text2) }
@keyframes toastIn { from{opacity:0;transform:translateX(100px) scale(0.8)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes toastOut { to{opacity:0;transform:translateX(100px) scale(0.8)} }

/* ═══════ Sections ═══════ */
.section { position:relative; z-index:1; padding:80px 40px; max-width:1400px; margin:0 auto }
.section-title {
  font-family:'Space Grotesk',sans-serif; font-size:42px; font-weight:800; margin-bottom:12px;
  letter-spacing:-1.5px; text-transform:uppercase; line-height:1.0;
}
.section-title span {
  color:var(--accent);
}
.section-subtitle { font-size:15px; color:var(--text2); max-width:520px; margin-bottom:40px; line-height:1.7 }
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 14px; border-radius:20px; font-size:11px; font-weight:700;
  background:var(--accent); color:#000;
  margin-bottom:16px; letter-spacing:1.5px; text-transform:uppercase;
}
.badge::before { content:''; width:5px; height:5px; border-radius:50%; background:#000; animation:pulse 2s ease-in-out infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }

/* ═══════ Reveal ═══════ */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1); animation:revealFallback 0s 2s forwards }
.reveal.visible { opacity:1; transform:translateY(0); animation:none }
.reveal-delay-1 { transition-delay:0.1s }
.reveal-delay-2 { transition-delay:0.2s }
.reveal-delay-3 { transition-delay:0.3s }
.reveal-left { opacity:0; transform:translateX(-40px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1); animation:revealFallback 0s 2s forwards }
.reveal-left.visible { opacity:1; transform:translateX(0); animation:none }
.reveal-right { opacity:0; transform:translateX(40px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1); animation:revealFallback 0s 2s forwards }
.reveal-right.visible { opacity:1; transform:translateX(0); animation:none }
@keyframes revealFallback { to{opacity:1;transform:none} }

/* ═══════ Hero ═══════ */
#hero { min-height:100vh; display:flex; align-items:center; padding-top:60px }
.hero-content { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; width:100% }
.hero-text h1 {
  font-family:'Space Grotesk',sans-serif; font-size:62px; font-weight:900; line-height:0.95;
  letter-spacing:-3px; margin-bottom:24px; text-transform:uppercase;
}
.hero-text h1 .gradient {
  color:var(--accent);
  -webkit-text-fill-color:var(--accent);
  background:none;
}
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.hero-text p { font-size:15px; color:var(--text2); line-height:1.8; margin-bottom:32px; max-width:460px }
.hero-buttons { display:flex; gap:10px; flex-wrap:wrap }
.btn-primary {
  padding:12px 28px; border-radius:10px; font-size:14px; font-weight:700;
  background:var(--accent); color:#000;
  transition:all 0.3s; display:flex; align-items:center; gap:8px;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(200,255,0,0.3) }
.btn-secondary {
  padding:12px 28px; border-radius:10px; font-size:14px; font-weight:600;
  background:transparent; color:var(--text); border:1px solid rgba(255,255,255,0.12);
  transition:all 0.3s; display:flex; align-items:center; gap:8px;
}
.btn-secondary:hover { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.2); transform:translateY(-2px) }
.btn-promo-hero {
  padding:12px 28px; border-radius:10px; font-size:14px; font-weight:600;
  background:rgba(200,255,0,0.06);
  color:var(--accent); border:1px solid rgba(200,255,0,0.2);
  transition:all 0.3s; display:flex; align-items:center; gap:8px; cursor:pointer;
}
.btn-promo-hero:hover { background:rgba(200,255,0,0.12); border-color:rgba(200,255,0,0.35); transform:translateY(-2px); box-shadow:0 4px 20px rgba(200,255,0,0.1) }
.hero-visual { position:relative; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; gap:16px }

/* ═══════ Before/After Video Slider ═══════ */
.ba-slider-wrap { position:relative; width:450px; z-index:1 }
.ba-slider-title {
  text-align:center; font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:900;
  color:var(--text); margin-bottom:12px; text-transform:uppercase; letter-spacing:-1px; line-height:0.95;
  justify-content:center;
  display:flex; align-items:center; gap:8px;
}
.ba-slider-title::before {
  display:none;
}
.ba-frame {
  position:relative; padding:3px; border-radius:24px;
  background:linear-gradient(135deg, rgba(200,255,0,1), rgba(100,255,50,0.5), rgba(200,255,0,0.3), rgba(100,255,50,0.6), rgba(200,255,0,1));
  background-size:300% 300%;
  animation:frameGlow 4s ease-in-out infinite;
}
.ba-frame::before {
  content:''; position:absolute; inset:-4px; border-radius:28px;
  background:linear-gradient(135deg, rgba(200,255,0,0.6), transparent 35%, rgba(200,255,0,0.4), transparent 65%, rgba(200,255,0,0.6));
  background-size:300% 300%;
  animation:frameGlow 4s ease-in-out infinite reverse;
  filter:blur(12px); z-index:-1;
}
@keyframes frameGlow {
  0%   { background-position:0% 0% }
  50%  { background-position:100% 100% }
  100% { background-position:0% 0% }
}
.ba-slider {
  position:relative; width:100%; aspect-ratio:3/4; border-radius:22px; overflow:hidden;
  cursor:col-resize; user-select:none; -webkit-user-select:none;
  box-shadow:0 20px 60px rgba(0,0,0,.6); background:#0a0a0a;
  isolation:isolate;
}
.ba-video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; pointer-events:none }
.ba-video-before { z-index:2; clip-path:inset(0 50% 0 0) }
.ba-divider { position:absolute; top:0; bottom:0; left:50%; width:3px; margin-left:-1.5px; background:var(--accent); z-index:10; pointer-events:none; box-shadow:0 0 10px rgba(200,255,0,.3) }
.ba-handle {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(30,30,30,0.9); border:2px solid rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center; z-index:11; pointer-events:none;
  backdrop-filter:blur(8px); box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.ba-handle svg { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round }
.ba-label { position:absolute; bottom:12px; padding:6px 14px; border-radius:8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; z-index:12; pointer-events:none;
  display:flex; align-items:center; gap:6px;
}
.ba-label-before { left:12px; background:rgba(20,20,20,0.9); color:#fff; backdrop-filter:blur(8px) }
.ba-label-after { right:12px; background:rgba(200,255,0,0.85); color:#000; backdrop-filter:blur(8px) }
.ba-hint {
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin-top:14px; font-size:13px; color:var(--text); letter-spacing:0.2px;
  background:rgba(255,255,255,0.06); padding:8px 16px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
}
.ba-hint-icon { font-size:18px; line-height:1 }
.hero-stats { display:flex; gap:32px; margin-top:36px; padding-top:24px; border-top:1px solid var(--border) }
.hero-stat { flex:1; text-align:center }
.hero-stat-val {
  font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:800;
  color:var(--text);
}
.hero-stat-label { font-size:12px; color:var(--text3); margin-top:2px; text-transform:uppercase; letter-spacing:0.5px }

/* ═══════ Features ═══════ */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.feature-card {
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:28px 22px;
  transition:all 0.35s ease; position:relative; overflow:hidden; text-align:left;
}
.feature-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,255,0,0.15),transparent);
  opacity:0; transition:opacity 0.4s; pointer-events:none;
}
.feature-card:hover { border-color:rgba(200,255,0,0.1); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.3) }
.feature-card:hover::before { opacity:1 }
.feature-icon {
  width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:14px; position:relative;
}
.feature-icon-purple { background:rgba(200,255,0,0.08); border:1px solid rgba(200,255,0,0.1) }
.feature-icon-pink { background:rgba(200,255,0,0.08); border:1px solid rgba(200,255,0,0.1) }
.feature-icon-cyan { background:rgba(200,255,0,0.08); border:1px solid rgba(200,255,0,0.1) }
.feature-icon-green { background:rgba(200,255,0,0.08); border:1px solid rgba(200,255,0,0.1) }
.feature-icon-amber { background:rgba(200,255,0,0.08); border:1px solid rgba(200,255,0,0.1) }
.feature-card h3 { font-size:15px; font-weight:700; margin-bottom:6px; position:relative }
.feature-card p { font-size:13px; color:var(--text2); line-height:1.7; position:relative }

/* ═══════ Generate ═══════ */
.generate-layout { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start }
.upload-panel {
  background:linear-gradient(145deg,var(--surface),var(--surface2));
  border:1px solid var(--border); border-radius:20px; padding:28px;
  position:relative; overflow:hidden;
}
.upload-panel::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,255,0,0.2),transparent);
}
.upload-panel h3 {
  display:flex; align-items:center; gap:8px;
  font-size:16px; letter-spacing:0.5px;
}
.upload-zone {
  border:2px dashed rgba(200,255,0,0.18); border-radius:16px; padding:48px 24px; text-align:center;
  cursor:pointer; transition:all 0.4s cubic-bezier(0.16,1,0.3,1); position:relative; overflow:hidden;
  background:rgba(200,255,0,0.01);
}
.upload-zone::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(200,255,0,0.04),transparent 65%); pointer-events:none;
  transition:opacity 0.4s; opacity:0;
}
.upload-zone:hover::before { opacity:1 }
.upload-zone:hover { border-color:rgba(200,255,0,0.4); background:rgba(200,255,0,0.03); transform:scale(1.01) }
.upload-zone.dragover { border-color:var(--accent); background:rgba(200,255,0,0.06); transform:scale(1.02); box-shadow:0 0 40px rgba(200,255,0,0.08) inset }
.upload-icon { font-size:52px; margin-bottom:14px; display:block; filter:grayscale(0.3); transition:filter 0.3s }
.upload-zone:hover .upload-icon { filter:grayscale(0) }
.upload-text { font-size:15px; color:var(--text); font-weight:600 }
.upload-hint { font-size:11px; color:var(--text3); margin-top:6px; letter-spacing:0.3px }
.upload-preview { position:relative; border-radius:16px; overflow:hidden; margin-bottom:14px }
.upload-preview img { width:100%; max-height:320px; object-fit:cover; display:block }
.upload-preview-overlay {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.8)); padding:16px; display:flex; justify-content:flex-end;
}
.btn-change {
  padding:8px 16px; border-radius:10px; font-size:12px; font-weight:700;
  background:rgba(255,255,255,0.12); backdrop-filter:blur(12px); color:#fff; transition:all 0.2s;
  border:1px solid rgba(255,255,255,0.08);
}
.btn-change:hover { background:rgba(255,255,255,0.2); transform:scale(1.04) }
.tips-list {
  margin-top:14px; display:flex; flex-direction:row; gap:8px; flex-wrap:wrap;
  justify-content:center;
}
.tip {
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  padding:6px 14px; border-radius:8px; transition:all 0.2s;
}
.tip-icon {
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.tip-text { color:#fff }
.tip-ok {
  background:rgba(16,185,129,0.15); border:1px solid rgba(16,185,129,0.3);
}
.tip-ok .tip-icon { color:#34d399 }
.tip-ok .tip-text { color:#6ee7b7 }
.tip-no {
  background:rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.3);
}
.tip-no .tip-icon { color:#f87171 }
.tip-no .tip-text { color:#fca5a5 }

.options-panel { display:flex; flex-direction:column; gap:0 }
.options-tabs {
  display:flex; gap:2px; background:var(--surface); border-radius:12px; padding:4px; margin-bottom:24px; border:1px solid var(--border);
}
.options-tab {
  flex:1; padding:10px 16px; border-radius:10px; font-size:13px; font-weight:600; text-align:center;
  color:var(--text3); background:transparent; transition:all 0.3s;
}
.options-tab.active {
  background:var(--accent); color:#000; box-shadow:0 2px 12px rgba(200,255,0,0.2);
}
.options-tab:hover:not(.active) { color:var(--text2); background:var(--surface2) }
.tab-content { display:none; animation:tabFade 0.4s cubic-bezier(0.16,1,0.3,1) }
.tab-content.active { display:block }
@keyframes tabFade { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.options-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.action-grid { grid-template-columns:1fr 1fr; gap:16px }
.action-card {
  padding:36px 20px; border-radius:16px !important; position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--surface),var(--surface2)) !important;
  border:1px solid var(--border) !important; transition:all 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}
.action-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 30%,rgba(200,255,0,0.05),transparent 70%);
  opacity:0; transition:opacity 0.4s; pointer-events:none;
}
.action-card:hover { transform:translateY(-6px) !important; border-color:rgba(200,255,0,0.15) !important; box-shadow:0 16px 48px rgba(0,0,0,0.4),0 0 24px rgba(200,255,0,0.04) !important }
.action-card:hover::before { opacity:1 }
.action-card.selected { border-color:var(--accent) !important; box-shadow:0 0 20px rgba(200,255,0,0.1),inset 0 0 30px rgba(200,255,0,0.03) !important }
.action-card.selected::after {
  content:'✓'; position:absolute; top:12px; right:14px;
  width:24px; height:24px; border-radius:50%; background:var(--accent); color:#000;
  font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:center;
  animation:popIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}
.action-icon { font-size:48px; margin-bottom:14px; display:block; transition:transform 0.3s }
.action-card:hover .action-icon { transform:scale(1.12) }
.action-title { font-size:18px; font-weight:800; margin-bottom:6px; letter-spacing:-0.3px }
.action-price {
  font-size:14px; color:var(--accent); font-weight:700;
  background:rgba(200,255,0,0.06); padding:4px 12px; border-radius:8px; display:inline-block;
}
.option-card {
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 12px;
  text-align:center; cursor:pointer; transition:all 0.3s cubic-bezier(0.16,1,0.3,1); font-size:13px; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.option-card:hover { border-color:rgba(200,255,0,0.15); background:var(--surface2); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.2) }
.option-card.selected { border-color:var(--accent); background:rgba(200,255,0,0.06); box-shadow:0 0 18px rgba(200,255,0,0.1) }
.video-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-height:70vh; overflow-y:auto; padding-right:4px }
.video-list::-webkit-scrollbar { width:6px }
.video-list::-webkit-scrollbar-track { background:rgba(200,255,0,0.03); border-radius:6px }
.video-list::-webkit-scrollbar-thumb { background:rgba(200,255,0,0.25); border-radius:6px; border:1px solid rgba(200,255,0,0.1) }
.video-list::-webkit-scrollbar-thumb:hover { background:rgba(200,255,0,0.5) }
.video-list { scrollbar-width:thin; scrollbar-color:rgba(200,255,0,0.25) transparent }
.video-item {
  display:flex; flex-direction:column; background:var(--surface2); border:1px solid var(--border); border-radius:14px;
  cursor:pointer; transition:all 0.2s ease; overflow:hidden; position:relative;
}
.video-item:hover { border-color:rgba(200,255,0,0.3); box-shadow:0 4px 16px rgba(0,0,0,0.4) }
.video-item.selected { border-color:var(--accent); box-shadow:0 0 16px rgba(200,255,0,0.15) }
.vi-media { position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; background:#0a0a0a }
.vi-preview { width:100%; height:100%; object-fit:cover; display:block }
.vi-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%); color:rgba(255,255,255,0.3) }
.vi-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.2) 40%,rgba(0,0,0,0.1) 100%); z-index:1 }
.vi-num { position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); color:#fff; font-size:12px; font-weight:800; padding:4px 10px; border-radius:8px; z-index:3 }
.vi-prev-badge { position:absolute; top:8px; right:8px; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); color:rgba(255,255,255,0.8); font-size:10px; font-weight:500; padding:4px 8px; border-radius:6px; z-index:3; display:flex; align-items:center; gap:4px }
.vi-media-name { position:absolute; bottom:28px; left:10px; right:10px; color:#fff; font-size:13px; font-weight:700; z-index:2; text-shadow:0 1px 4px rgba(0,0,0,0.5); line-height:1.2 }
.vi-media-desc { position:absolute; bottom:10px; left:10px; right:10px; color:rgba(255,255,255,0.5); font-size:10px; z-index:2 }
.vi-body { padding:8px 10px }
.vi-style-badge { display:inline-flex; align-items:center; gap:4px; background:rgba(200,255,0,0.1); color:var(--accent); font-size:9px; font-weight:700; padding:3px 8px; border-radius:5px; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px }
.vi-name { font-size:13px; font-weight:700; line-height:1.3; color:var(--text); margin-bottom:2px }
.vi-info { font-size:10px; color:var(--text3); margin-bottom:8px; display:flex; align-items:center; gap:4px }
.vi-select-btn { width:100%; padding:8px; border:none; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:all 0.2s ease; background:var(--surface3); color:var(--text2) }
.vi-select-btn:hover { background:rgba(200,255,0,0.1); color:var(--accent) }
.video-item.selected .vi-select-btn { background:var(--accent); color:#000 }
.vi-check { position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#000; display:none; align-items:center; justify-content:center; z-index:4 }
.video-item.selected .vi-check { display:flex }
.video-item.selected .vi-prev-badge { display:none }
.btn-generate {
  margin-top:24px; padding:16px 32px; border-radius:14px; font-size:16px; font-weight:800;
  background:var(--accent); color:#000; width:100%; letter-spacing:0.3px;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1); display:flex; align-items:center; justify-content:center; gap:10px;
  position:relative; overflow:hidden;
}
.btn-generate::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
  transition:left 0.5s;
}
.btn-generate:hover::before { left:100% }
.btn-generate:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(200,255,0,0.35) }
.btn-generate:disabled { opacity:0.25; pointer-events:none }
.btn-generate:disabled::before { display:none }

/* ═══════ Processing ═══════ */
.processing-overlay {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(5,5,8,0.97); backdrop-filter:blur(30px);
  align-items:center; justify-content:center;
  animation:overlayIn 0.5s ease;
}
.processing-overlay.active { display:flex }
@keyframes overlayIn { from{opacity:0} to{opacity:1} }
.proc-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none }
.proc-particle {
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--accent); opacity:0; animation:particleFloat 4s ease-in-out infinite;
}
@keyframes particleFloat {
  0% { opacity:0; transform:translateY(0) scale(0) }
  20% { opacity:0.6 }
  80% { opacity:0.3 }
  100% { opacity:0; transform:translateY(-200px) scale(1.5) }
}
.proc-content { text-align:center; max-width:480px; padding:32px; position:relative; z-index:1 }
.proc-visual { position:relative; width:200px; height:200px; margin:0 auto 30px }
.proc-glow {
  position:absolute; inset:30px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,255,0,0.08) 0%, transparent 70%);
  animation:glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{opacity:0.5;transform:scale(0.95)} 50%{opacity:1;transform:scale(1.1)} }
.proc-orbit {
  position:absolute; border-radius:50%; border:1.5px solid transparent;
}
.proc-orbit-1 {
  inset:0; border-color:rgba(200,255,0,0.15);
  animation:orbitSpin 6s linear infinite;
}
.proc-orbit-2 {
  inset:14px; border-color:rgba(200,255,0,0.1);
  animation:orbitSpin 8s linear infinite reverse;
}
.proc-orbit-3 {
  inset:28px; border-color:rgba(200,255,0,0.06);
  animation:orbitSpin 10s linear infinite;
}
.proc-dot {
  position:absolute; top:-3px; left:50%; width:6px; height:6px;
  border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px var(--accent), 0 0 20px rgba(200,255,0,0.3);
}
.proc-orbit-2 .proc-dot { top:auto; bottom:-3px; width:5px; height:5px; background:rgba(200,255,0,0.6) }
.proc-orbit-3 .proc-dot { top:50%; left:-3px; width:4px; height:4px; background:rgba(200,255,0,0.4) }
@keyframes orbitSpin { to { transform:rotate(360deg) } }
.proc-center {
  position:absolute; inset:40px; border-radius:50%;
  background:rgba(200,255,0,0.03); border:1px solid rgba(200,255,0,0.1);
  display:flex; align-items:center; justify-content:center;
  animation:procPulse 3s ease-in-out infinite;
}
@keyframes procPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.proc-title {
  font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; margin-bottom:8px; color:var(--text);
  background:linear-gradient(135deg, var(--text), var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.proc-sub {
  font-size:14px; color:var(--text2); margin-bottom:22px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.proc-bar-wrap { max-width:300px; margin:0 auto 16px }
.proc-bar-bg { height:5px; background:rgba(255,255,255,0.06); border-radius:6px; overflow:hidden }
.proc-bar-fill {
  height:100%; border-radius:6px; width:0%; transition:width 0.5s ease;
  background:linear-gradient(90deg, var(--accent), rgba(200,255,0,0.6));
  box-shadow:0 0 12px rgba(200,255,0,0.3);
}
.proc-pct { font-size:13px; color:var(--text3); font-weight:600; margin-bottom:6px }
.proc-fact {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px;
  padding:12px 18px; max-width:300px; margin:10px auto 0; font-size:13px; color:var(--text2);
  display:flex; align-items:center; justify-content:center; gap:6px;
  backdrop-filter:blur(8px);
}
.proc-timer { font-size:11px; color:var(--text3); margin-top:10px; display:flex; align-items:center; justify-content:center; gap:4px }
.proc-actions {
  display:flex; gap:10px; justify-content:center; margin-top:24px; flex-wrap:wrap;
}
.proc-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px; border-radius:10px; font-size:13px; font-weight:600;
  cursor:pointer; border:none; transition:all 0.2s;
}
.proc-btn-primary {
  background:var(--accent); color:#000;
}
.proc-btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(200,255,0,0.3) }
.proc-btn-secondary {
  background:rgba(255,255,255,0.06); color:var(--text); border:1px solid rgba(255,255,255,0.1);
}
.proc-btn-secondary:hover { background:rgba(255,255,255,0.1) }

/* ═══════ Done Modal ═══════ */
.done-modal {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(5,5,8,0.97); backdrop-filter:blur(30px);
  align-items:center; justify-content:center;
  padding:16px; overflow-y:auto;
}
.done-modal.active { display:flex }
.done-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none }
.done-content {
  text-align:center; padding:28px 24px; background:linear-gradient(145deg, rgba(30,30,35,0.9), rgba(15,15,20,0.95));
  border:1px solid rgba(200,255,0,0.1);
  border-radius:24px; max-width:420px; width:100%;
  animation:doneSlideUp 0.6s cubic-bezier(0.34,1.56,0.64,1);
  position:relative; z-index:1;
  box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(200,255,0,0.04);
}
@keyframes doneSlideUp {
  from { opacity:0; transform:translateY(40px) scale(0.95) }
  to { opacity:1; transform:translateY(0) scale(1) }
}
.done-badge {
  width:64px; height:64px; border-radius:16px; margin:0 auto 16px;
  background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2);
  display:flex; align-items:center; justify-content:center;
  animation:badgePop 0.7s cubic-bezier(0.175,0.885,0.32,1.275) 0.2s both;
}
@keyframes badgePop { from{opacity:0;transform:scale(0.5)} to{opacity:1;transform:scale(1)} }
.done-result-wrap {
  display:none; margin:18px 0; text-align:center; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
}
.done-result-wrap img, .done-result-wrap video {
  display:none; width:100%; height:auto; max-height:50vh; object-fit:contain; border-radius:14px;
}
.done-title {
  font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; margin-bottom:4px;
  background:linear-gradient(135deg, var(--text), #22c55e);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.done-sub { font-size:13px; color:var(--text2); margin-bottom:14px }
.done-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.done-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:12px 22px; border-radius:12px; font-size:14px; font-weight:600;
  cursor:pointer; border:none; text-decoration:none; transition:all 0.2s;
}
.done-btn-primary {
  background:var(--accent); color:#000;
}
.done-btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 20px rgba(200,255,0,0.3) }
.done-btn-secondary {
  background:rgba(255,255,255,0.06); color:var(--text); border:1px solid rgba(255,255,255,0.1);
}
.done-btn-secondary:hover { background:rgba(255,255,255,0.1) }
.done-btn-accent {
  background:linear-gradient(135deg, rgba(200,255,0,0.15), rgba(200,255,0,0.08));
  color:var(--accent); border:1px solid rgba(200,255,0,0.2);
}
.done-btn-accent:hover { background:rgba(200,255,0,0.2) }

/* ═══════ Pricing ═══════ */
.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.pricing-grid.cols-1 { grid-template-columns:1fr; max-width:320px; margin:0 auto }
.pricing-grid.cols-2 { grid-template-columns:repeat(2,1fr); max-width:560px; margin:0 auto }
.pricing-grid.cols-3 { grid-template-columns:repeat(3,1fr) }
.pricing-grid.cols-4 { grid-template-columns:repeat(4,1fr) }
.pricing-grid.cols-5 { grid-template-columns:repeat(5,1fr) }
.pricing-grid.cols-6 { grid-template-columns:repeat(3,1fr) }
.pricing-grid.cols-7 { grid-template-columns:repeat(4,1fr) }
.pricing-grid.cols-8 { grid-template-columns:repeat(4,1fr) }
.pricing-grid.cols-9 { grid-template-columns:repeat(3,1fr) }
.pricing-grid.cols-10 { grid-template-columns:repeat(5,1fr) }
.price-card {
  background:linear-gradient(145deg, rgba(30,30,35,0.9), rgba(20,20,25,0.95));
  border:1px solid rgba(255,255,255,0.06); border-radius:18px; padding:28px 24px;
  transition:all 0.4s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden;
  backdrop-filter:blur(10px); display:flex; flex-direction:column; width:100%;
}
.price-card::before {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:radial-gradient(circle at 50% 0%, rgba(200,255,0,0.03), transparent 70%);
  pointer-events:none; transition:opacity 0.4s;
  opacity:0;
}
.price-card:hover::before { opacity:1 }
.price-card:hover {
  border-color:rgba(200,255,0,0.15); transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,0.4), 0 0 30px rgba(200,255,0,0.04);
}
.price-card.popular {
  border-color:rgba(200,255,0,0.3);
  background:linear-gradient(145deg, rgba(40,42,30,0.95), rgba(25,27,20,0.98));
  box-shadow:0 0 40px rgba(200,255,0,0.06);
}
.price-card.popular::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.pop-badge {
  position:absolute; top:12px; right:12px;
  display:inline-flex; align-items:center; gap:4px;
  background:var(--accent); padding:4px 12px; border-radius:20px;
  font-size:11px; font-weight:700; color:#000;
}
.price-icon-wrap {
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
  background:linear-gradient(135deg, rgba(200,255,0,0.12), rgba(200,255,0,0.04));
  border:1px solid rgba(200,255,0,0.1);
  color:var(--accent);
}
.price-card.popular .price-icon-wrap {
  background:linear-gradient(135deg, rgba(200,255,0,0.2), rgba(200,255,0,0.08));
  border-color:rgba(200,255,0,0.2);
}
.price-tokens { font-size:26px; font-weight:800; margin-bottom:4px; letter-spacing:-0.5px }
.price-bonus {
  font-size:12px; color:var(--accent); font-weight:600; margin-bottom:8px;
  display:flex; align-items:center; gap:4px; opacity:0.85;
}
.price-gen-info {
  font-size:12px; font-weight:600; color:var(--accent); margin-bottom:16px;
  padding:6px 12px; border-radius:8px; border:1px solid rgba(200,255,0,0.18);
  background:rgba(200,255,0,0.06);
}
.price-divider {
  height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  margin-bottom:16px;
}
.price-amount {
  font-size:28px; font-weight:800; color:#fff; margin-bottom:20px;
  letter-spacing:-0.5px;
}
.price-amount .price-currency { font-size:18px; font-weight:600; color:var(--text2); margin-left:2px }
.price-old { font-size:16px; font-weight:600; color:var(--text3); text-decoration:line-through; margin-bottom:2px; opacity:0.6 }
.price-discount-badge { display:inline-flex; align-items:center; gap:3px; background:rgba(255,60,60,0.15); color:#ff6b6b; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; margin-bottom:8px }
.btn-buy {
  width:100%; padding:12px; border-radius:12px; font-size:14px; font-weight:700;
  background:rgba(255,255,255,0.04); color:var(--text); border:1px solid rgba(255,255,255,0.1);
  transition:all 0.3s; margin-top:auto; cursor:pointer;
  letter-spacing:0.3px;
}
.btn-buy:hover {
  background:rgba(200,255,0,0.08); border-color:rgba(200,255,0,0.2);
  color:#fff; box-shadow:0 4px 16px rgba(200,255,0,0.06);
}
.price-card.popular .btn-buy {
  background:var(--accent); border:none; color:#000; font-weight:800;
  box-shadow:0 4px 20px rgba(200,255,0,0.2);
}
.price-card.popular .btn-buy:hover {
  box-shadow:0 6px 28px rgba(200,255,0,0.35); transform:translateY(-1px);
}

/* ═══════ Modals ═══════ */
.modal-bg {
  display:none; position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(16px);
  align-items:center; justify-content:center; padding:20px;
}
.modal-bg.active { display:flex }
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(16px);
  align-items:center; justify-content:center; padding:20px;
}
.modal-box {
  background:var(--surface); border:1px solid rgba(200,255,0,0.1); border-radius:18px;
  padding:28px; width:90%; position:relative; animation:modalPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalPop { from{opacity:0;transform:scale(0.92) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal {
  background:var(--surface); border:1px solid rgba(200,255,0,0.1); border-radius:18px;
  padding:28px; width:100%; max-width:460px; animation:modalPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.modal h2 { font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:700; margin-bottom:4px; text-align:center }
.modal .modal-sub { font-size:12px; color:var(--text2); text-align:center; margin-bottom:20px }
.modal-close {
  float:right; width:30px; height:30px; border-radius:8px; background:var(--surface2);
  color:var(--text3); font-size:16px; display:flex; align-items:center; justify-content:center; transition:all 0.2s;
}
.modal-close:hover { background:var(--surface3); color:var(--text) }
.pay-method {
  display:flex; align-items:center; gap:14px;
  background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:14px 16px;
  margin-bottom:8px; cursor:pointer; transition:all 0.25s;
}
.pay-method:hover { border-color:rgba(200,255,0,0.12); background:var(--surface3); transform:translateX(3px) }
.pm-icon { font-size:24px }
.pm-title { font-size:13px; font-weight:600 }
.pm-desc { font-size:11px; color:var(--text2) }

/* ═══════ Manual pay ═══════ */
.mp-hero { text-align:center; margin-bottom:16px }
.mp-hero-label { font-size:13px; color:var(--text3); margin-bottom:2px }
.mp-hero-price {
  font-size:42px; font-weight:900; color:var(--accent);
  font-family:'Space Grotesk',sans-serif; line-height:1.1;
}
.mp-hero-price span { font-size:30px; font-weight:700 }
.mp-hero-tokens {
  display:inline-flex; align-items:center; gap:5px;
  font-size:15px; font-weight:700; color:var(--text1); margin-top:4px;
}
.mp-ico {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
}
.mp-ico-wallet { background:rgba(59,130,246,0.15); color:#60a5fa }
.mp-ico-pkg { background:rgba(16,185,129,0.15); color:#34d399 }
.mp-ico-gem { background:rgba(168,85,247,0.15); color:#c084fc; width:auto; height:auto; padding:2px }
.mp-ico-card { background:rgba(251,191,36,0.15); color:#fbbf24 }
.mp-ico-check { background:rgba(16,185,129,0.15); color:#34d399; width:24px; height:24px; border-radius:6px }
.mp-block {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:14px 16px; margin-bottom:10px;
}
.mp-block-row {
  display:flex; align-items:center; gap:12px;
}
.mp-block-label { flex:1; font-size:14px; color:var(--text2) }
.mp-block-val {
  font-size:15px; font-weight:700; color:var(--text1);
  display:inline-flex; align-items:center;
}
.mp-req-block { padding:16px }
.mp-req-header { display:flex; align-items:center; gap:12px; margin-bottom:14px }
.mp-req-title { font-size:14px; font-weight:700; color:var(--text1) }
.mp-req-sub { font-size:11.5px; color:var(--text3); margin-top:1px }
.mp-card-row {
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.06);
  border-radius:10px; padding:12px 14px; cursor:pointer; transition:all 0.2s;
}
.mp-card-row:hover { background:rgba(0,0,0,0.5); border-color:rgba(255,255,255,0.12) }
.mp-card-row.copied { border-color:rgba(16,185,129,0.25) }
.mp-card-digits {
  font-size:16px; font-weight:600; font-family:'JetBrains Mono','SF Mono',monospace;
  color:var(--text1); letter-spacing:0.5px;
}
.mp-card-row.copied .mp-card-digits { color:var(--green) }
.mp-copy-ico { color:var(--text3); transition:color 0.2s }
.mp-card-row:hover .mp-copy-ico { color:var(--text2) }
.mp-steps-block { padding:16px }
.mp-steps-title {
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--text1); margin-bottom:12px;
}
.mp-step {
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:var(--text2); line-height:1.6; margin-bottom:6px;
}
.mp-step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,0.06); color:var(--text3);
  font-size:11px; font-weight:700;
}
.mp-main-btn {
  width:100%; margin-top:16px; display:flex; align-items:center; justify-content:center; gap:8px;
}
.mp-btn-ico { display:inline-flex }
.mp-cancel-btn {
  width:100%; margin-top:10px; padding:12px; border-radius:12px;
  background:transparent; color:#f87171; font-size:14px; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; border:none; transition:color 0.2s;
}
.mp-cancel-btn:hover { color:#fca5a5 }
.mp-cancel-btn svg { opacity:0.7; color:#f87171 }
.manual-details {
  background:rgba(0,0,0,0.4); border:1px solid var(--border); border-radius:10px; padding:14px;
  margin:14px 0; font-size:12px; line-height:1.7; white-space:pre-wrap;
}
.steps-bar { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:20px }
.step-dot {
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; background:var(--surface2); color:var(--text3);
  border:2px solid var(--border); transition:all 0.4s;
}
.step-dot.active {
  background:var(--accent); color:#000; border-color:transparent;
  transform:scale(1.12); box-shadow:0 0 14px rgba(200,255,0,0.3);
}
.step-dot.done { background:rgba(16,185,129,0.1); color:var(--green); border-color:rgba(16,185,129,0.2) }
.step-line { width:36px; height:2px; background:var(--border); transition:background 0.4s }
.step-line.done { background:var(--accent) }
.receipt-zone {
  border:2px dashed rgba(200,255,0,0.15); border-radius:14px; padding:32px 18px; text-align:center;
  cursor:pointer; transition:all 0.3s;
}
.receipt-zone:hover { border-color:rgba(200,255,0,0.3); background:rgba(200,255,0,0.02) }
.receipt-zone.dragover { border-color:var(--accent); background:rgba(200,255,0,0.04) }
.receipt-preview img { width:100%; max-height:200px; object-fit:cover; display:block; border-radius:14px; margin-bottom:12px }

/* receipt upload screen */
.mr-title {
  text-align:center; font-size:22px; font-weight:800;
  font-family:'Space Grotesk',sans-serif; color:var(--text1); margin-bottom:6px;
}
.mr-sub {
  text-align:center; font-size:13.5px; color:var(--text3); margin-bottom:20px; line-height:1.5;
}
.mr-drop-zone {
  border:2px dashed rgba(200,255,0,0.15); border-radius:16px;
  padding:28px 20px; text-align:center; cursor:pointer; transition:all 0.3s;
}
.mr-drop-zone:hover { border-color:rgba(200,255,0,0.3); background:rgba(200,255,0,0.02) }
.mr-drop-zone.dragover { border-color:var(--accent); background:rgba(200,255,0,0.05) }
.mr-drop-icon { margin-bottom:12px }
.mr-drop-text {
  font-size:13.5px; color:var(--text3); line-height:1.5; margin-bottom:16px;
  max-width:240px; margin-left:auto; margin-right:auto;
}
.mr-file-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 24px; border-radius:10px;
  background:var(--accent); color:#000; font-size:14px; font-weight:700;
  border:none; cursor:pointer; transition:all 0.2s;
}
.mr-file-btn:hover { filter:brightness(1.1); transform:scale(1.02) }
.mr-bottom {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:18px; gap:12px;
}
.mr-back-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; border-radius:10px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
  color:var(--text2); font-size:14px; font-weight:500; cursor:pointer; transition:all 0.2s;
}
.mr-back-btn:hover { background:rgba(255,255,255,0.1); color:var(--text1) }
.mr-send-btn {
  padding:10px 24px; border-radius:10px;
  background:rgba(200,255,0,0.08); border:1px solid rgba(200,255,0,0.15);
  color:var(--text3); font-size:14px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
.mr-send-btn.active {
  background:var(--accent); border-color:transparent;
  color:#000; font-weight:700;
}
.mr-send-btn.active:hover { filter:brightness(1.1) }

/* receipt done screen */
.mr-done-wrap { text-align:center; padding:16px 0 }
.mr-done-title {
  font-size:22px; font-weight:800; color:var(--text1);
  font-family:'Space Grotesk',sans-serif; margin-bottom:6px;
}
.mr-done-sub {
  font-size:14px; color:var(--text3); line-height:1.6; margin-bottom:4px;
  max-width:280px; margin-left:auto; margin-right:auto;
}
.mr-done-check-wrap {
  position:relative; width:120px; height:120px;
  margin:24px auto; display:flex; align-items:center; justify-content:center;
}
.mr-done-glow {
  position:absolute; inset:-20px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,255,0,0.2) 0%, transparent 70%);
  animation:doneGlowPulse 2s ease-in-out infinite;
}
.mr-done-ring {
  position:relative; display:flex; align-items:center; justify-content:center;
}
.mr-ring-anim {
  animation:ringDraw 0.8s 0.3s ease-out forwards;
}
.mr-check-anim {
  position:absolute; opacity:0;
  animation:checkPop 0.4s 0.9s ease-out forwards;
}
.mr-done-btn {
  width:100%; margin-top:20px; font-size:16px; font-weight:700; padding:14px;
  text-align:center; justify-content:center;
}
@keyframes ringDraw {
  to { stroke-dashoffset:0 }
}
@keyframes checkPop {
  0% { opacity:0; transform:scale(0.3) }
  60% { opacity:1; transform:scale(1.15) }
  100% { opacity:1; transform:scale(1) }
}
@keyframes doneGlowPulse {
  0%,100% { opacity:0.5; transform:scale(0.9) }
  50% { opacity:1; transform:scale(1.1) }
}

/* ═══════ Maintenance ═══════ */
#maintenanceOverlay {
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.maint-bg {
  position:absolute; inset:0; overflow:hidden;
}
#maintCanvas {
  position:absolute; inset:0; width:100%; height:100%;
}
.maint-glow {
  position:absolute; border-radius:50%; filter:blur(80px); opacity:0.4;
  animation:maintGlowFloat 8s ease-in-out infinite;
}
.maint-glow-1 {
  width:400px; height:400px; top:-100px; left:-100px;
  background:radial-gradient(circle, rgba(200,255,0,0.3) 0%, transparent 70%);
  animation-delay:0s;
}
.maint-glow-2 {
  width:350px; height:350px; bottom:-50px; right:-80px;
  background:radial-gradient(circle, rgba(168,85,247,0.25) 0%, transparent 70%);
  animation-delay:-3s;
}
.maint-glow-3 {
  width:300px; height:300px; top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(59,130,246,0.2) 0%, transparent 70%);
  animation-delay:-5s;
}
@keyframes maintGlowFloat {
  0%,100% { transform:translate(0,0) scale(1) }
  25% { transform:translate(30px,-20px) scale(1.1) }
  50% { transform:translate(-20px,30px) scale(0.95) }
  75% { transform:translate(20px,20px) scale(1.05) }
}
.maint-content {
  position:relative; z-index:2; text-align:center; padding:40px 24px;
  max-width:440px; width:100%;
}
.maint-icon {
  width:120px; height:120px; margin:0 auto 28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(200,255,0,0.06);
  border:2px solid rgba(200,255,0,0.15);
  animation:maintIconPulse 3s ease-in-out infinite;
}
@keyframes maintIconPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(200,255,0,0.15), 0 0 40px rgba(200,255,0,0.05) }
  50% { box-shadow:0 0 0 16px rgba(200,255,0,0), 0 0 60px rgba(200,255,0,0.12) }
}
.maint-title {
  font-family:'Space Grotesk',sans-serif;
  font-size:32px; font-weight:800; color:var(--text1);
  margin-bottom:12px; letter-spacing:-0.5px;
}
.maint-sub {
  font-size:15px; color:var(--text3); line-height:1.7; margin-bottom:32px;
}
.maint-bar-wrap { max-width:240px; margin:0 auto 32px }
.maint-bar {
  height:4px; border-radius:4px;
  background:rgba(255,255,255,0.06); overflow:hidden;
}
.maint-bar-fill {
  width:40%; height:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--accent), rgba(200,255,0,0.3));
  animation:maintBarSlide 2s ease-in-out infinite;
}
@keyframes maintBarSlide {
  0% { width:10%; margin-left:0 }
  50% { width:50%; margin-left:25% }
  100% { width:10%; margin-left:90% }
}
.maint-logo {
  font-family:'Space Grotesk',sans-serif;
  font-size:18px; font-weight:700; color:var(--accent); opacity:0.5;
  letter-spacing:2px; text-transform:uppercase;
}

/* ═══════ Profile ═══════ */
/* ═══════ Profile Section ═══════ */
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px }

.profile-card {
  position:relative;
  background:linear-gradient(165deg, rgba(30,32,38,0.95) 0%, rgba(20,22,28,0.98) 100%);
  border:1px solid rgba(200,255,0,0.08);
  border-radius:20px; padding:0; overflow:hidden;
  backdrop-filter:blur(12px);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.profile-card::before {
  content:''; position:absolute; inset:-1px; border-radius:20px; padding:1px;
  background:linear-gradient(160deg, rgba(200,255,0,0.15) 0%, transparent 40%, transparent 60%, rgba(200,255,0,0.05) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.profile-card:hover {
  border-color:rgba(200,255,0,0.15);
  box-shadow:0 8px 40px rgba(0,0,0,0.3), 0 0 30px rgba(200,255,0,0.04);
  transform:translateY(-2px);
}

.profile-card-header {
  padding:24px 28px 20px;
  background:linear-gradient(135deg, rgba(200,255,0,0.06) 0%, transparent 60%);
  border-bottom:1px solid rgba(200,255,0,0.06);
}
.profile-card-header h3 {
  font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700;
  display:flex; align-items:center; gap:10px; margin:0;
}
.profile-card-header p {
  font-size:13px; color:var(--text2); margin:8px 0 0; line-height:1.5;
}

.profile-icon-wrap {
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg, rgba(200,255,0,0.2), rgba(200,255,0,0.05));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.profile-icon-wrap i { color:var(--accent) }

.profile-card-body { padding:20px 28px 28px }

.stat-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; margin-bottom:6px;
  background:rgba(255,255,255,0.02); border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
  transition:all 0.3s;
}
.stat-row:hover { background:rgba(200,255,0,0.03); border-color:rgba(200,255,0,0.06) }
.stat-row:last-child { margin-bottom:0 }
.stat-label { font-size:13px; color:var(--text2); display:flex; align-items:center; gap:6px }
.stat-icon, .stat-label svg { flex-shrink:0; display:block; width:14px; height:14px; color:var(--accent); opacity:0.7 }
.stat-value { font-size:14px; font-weight:700; color:var(--text); letter-spacing:-0.01em; white-space:nowrap }

.ref-link-box {
  background:rgba(200,255,0,0.04); border:1px solid rgba(200,255,0,0.12); border-radius:12px; padding:14px 16px;
  font-size:12px; color:var(--accent); word-break:break-all; margin-bottom:12px; font-weight:500;
  font-family:'Space Grotesk',monospace; letter-spacing:0.02em;
  position:relative; overflow:hidden;
}
.ref-link-box::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(200,255,0,0.03), transparent);
  animation:refShimmer 3s ease-in-out infinite;
}
@keyframes refShimmer {
  0%,100% { transform:translateX(-100%) }
  50% { transform:translateX(100%) }
}

/* User results gallery */
.my-results-section { margin-top:24px }
.my-results-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:14px }
.my-res-item {
  position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.05);
  background:var(--surface2); cursor:pointer; transition:all 0.3s; aspect-ratio:1;
}
.my-res-item:hover { border-color:rgba(200,255,0,0.15); transform:scale(1.03); box-shadow:0 8px 24px rgba(0,0,0,0.4) }
.my-res-item img,.my-res-item video { width:100%; height:100%; object-fit:cover }
.my-res-badge { position:absolute; top:8px; right:8px; padding:3px 8px; border-radius:6px; font-size:9px; font-weight:700; backdrop-filter:blur(12px) }
.my-res-badge.img { background:rgba(200,255,0,0.6); color:#000 }
.my-res-badge.vid { background:rgba(255,255,255,0.2); color:#fff }
.my-res-time { position:absolute; bottom:0; left:0; right:0; padding:6px 10px; background:linear-gradient(transparent,rgba(0,0,0,0.8)); font-size:9px; color:rgba(255,255,255,0.5) }
.my-res-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:48px 24px; color:var(--text3); font-size:13px; line-height:1.6;
  text-align:center; width:100%; grid-column:1/-1;
}
.my-res-empty i {
  width:36px; height:36px; color:var(--text3); opacity:0.5;
}

.btn-copy {
  width:100%; padding:12px; border-radius:12px; font-size:13px; font-weight:700;
  background:linear-gradient(135deg, var(--accent), #b8e600); color:#000; transition:all 0.3s;
  display:flex; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 2px 12px rgba(200,255,0,0.15);
}
.btn-copy:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(200,255,0,0.25) }

.promo-form { display:flex; gap:10px; margin-top:0; flex-wrap:wrap }
.promo-form .inp { min-width:0 }
.inp {
  flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:12px;
  padding:12px 16px; font-size:14px; color:var(--text); transition:all 0.3s;
}
.inp:focus { border-color:rgba(200,255,0,0.3); box-shadow:0 0 16px rgba(200,255,0,0.08); background:rgba(255,255,255,0.06) }
.inp::placeholder { color:var(--text3) }
.btn-promo {
  padding:12px 24px; border-radius:12px; font-size:13px; font-weight:700;
  background:linear-gradient(135deg, var(--accent), #b8e600); color:#000; transition:all 0.3s; white-space:nowrap;
  box-shadow:0 2px 12px rgba(200,255,0,0.15);
}
.btn-promo:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(200,255,0,0.25) }

.profile-divider {
  height:1px; margin:24px 0;
  background:linear-gradient(90deg, transparent, rgba(200,255,0,0.12), transparent);
}

.withdraw-form { display:flex; gap:8px; margin-top:14px }
.withdraw-form input {
  flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:12px;
  padding:12px 14px; font-size:14px; color:var(--text); transition:all 0.3s;
  -moz-appearance:textfield;
}
.withdraw-form input::-webkit-outer-spin-button,
.withdraw-form input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0 }
.withdraw-form input:focus { border-color:rgba(200,255,0,0.3); box-shadow:0 0 16px rgba(200,255,0,0.08) }
.withdraw-form input::placeholder { color:var(--text3) }
.btn-withdraw {
  padding:12px 22px; border-radius:12px; font-size:13px; font-weight:600;
  background:rgba(255,255,255,0.04); color:var(--text); border:1px solid rgba(255,255,255,0.08); transition:all 0.3s; white-space:nowrap;
}
.btn-withdraw:hover { background:rgba(200,255,0,0.08); border-color:rgba(200,255,0,0.15); transform:translateY(-1px) }

/* Withdrawal modal */
.wd-modal-bg {
  display:none; position:fixed; inset:0; z-index:400;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(16px);
  align-items:center; justify-content:center; padding:20px;
}
.wd-modal-bg.active { display:flex }
.wd-modal {
  background:var(--surface); border:1px solid rgba(200,255,0,0.1); border-radius:18px; padding:28px;
  width:100%; max-width:400px; animation:modalPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.wd-modal h3 { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700; text-align:center; margin-bottom:4px }
.wd-sub { font-size:12px; color:var(--text2); text-align:center; margin-bottom:16px }
.wd-amount { text-align:center; font-size:24px; font-weight:900; color:var(--accent); margin-bottom:16px }
.wd-modal textarea {
  width:100%; min-height:80px; background:var(--surface2); border:1px solid var(--border); border-radius:10px;
  color:var(--text); padding:12px; font-size:14px; resize:vertical;
}
.wd-modal textarea:focus { border-color:rgba(200,255,0,0.3) }
.wd-modal textarea::placeholder { color:var(--text3) }
.wd-btns { display:flex; gap:10px; margin-top:16px }
.wd-btns button { flex:1; padding:11px; border-radius:10px; font-size:13px; font-weight:600; transition:all 0.2s }
.wd-btns button:active { transform:scale(0.97) }
.wd-send { background:var(--accent); color:#000; font-weight:700 }
.wd-cancel { background:var(--surface2); color:var(--text2) }

/* ═══════ Footer ═══════ */
.footer {
  position:relative; z-index:1; border-top:1px solid var(--border); padding:40px 40px; text-align:center;
}
.footer-logo {
  font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700;
  color:var(--text); margin-bottom:8px;
}
.footer-text { font-size:12px; color:var(--text3) }
.footer-links { display:flex; justify-content:center; gap:12px; margin-top:14px }
.footer-links a {
  font-size:12px; color:var(--text3); text-decoration:none; transition:all 0.2s;
  padding:6px 14px; border-radius:8px; border:1px solid var(--border); background:var(--surface);
}
.footer-links a:hover { color:var(--accent); border-color:rgba(200,255,0,0.12) }

/* ═══════ Toast ═══════ */
.toast {
  position:fixed; top:76px; left:50%; transform:translateX(-50%) translateY(-16px);
  background:var(--surface); border:1px solid rgba(200,255,0,0.12); color:var(--text);
  padding:12px 24px; border-radius:10px; font-size:13px; font-weight:600; z-index:500;
  opacity:0; transition:all 0.4s; pointer-events:none;
  backdrop-filter:blur(20px); box-shadow:0 6px 24px rgba(0,0,0,0.4);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0) }
.confetti-c { position:fixed; inset:0; pointer-events:none; z-index:600; overflow:hidden }
.confetti-p { position:absolute; top:-12px; animation:cFall 3s ease-in forwards }
@keyframes cFall { 0%{transform:translateY(0) rotate(0deg);opacity:1} 100%{transform:translateY(100vh) rotate(720deg);opacity:0} }
.alert-success {
  background:rgba(16,185,129,0.06); border:1px solid rgba(16,185,129,0.12); color:var(--green);
  border-radius:10px; padding:12px 16px; font-size:13px; margin-top:10px; text-align:center;
}
.alert-error {
  background:rgba(239,68,68,0.06); border:1px solid rgba(239,68,68,0.12); color:var(--red);
  border-radius:10px; padding:10px 14px; font-size:12px; margin-top:8px; animation:shake 0.4s ease;
}
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* ═══════ Mobile hamburger ═══════ */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px }
.hamburger span { width:22px; height:2px; background:var(--text); border-radius:2px; transition:all 0.3s }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }
.mobile-menu {
  display:none; position:fixed; top:60px; left:0; right:0; z-index:99;
  background:rgba(9,9,9,0.97); backdrop-filter:blur(20px);
  padding:16px; border-bottom:1px solid var(--border);
  animation:slideDown 0.3s ease;
}
.mobile-menu.open { display:block }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.mobile-menu a {
  display:block; padding:12px 18px; border-radius:10px; font-size:15px; font-weight:500;
  color:var(--text2); transition:all 0.2s;
}
.mobile-menu a:hover,.mobile-menu a.active { color:var(--text); background:rgba(200,255,0,0.04) }

/* ═══════ Scroll lock ═══════ */
body.modal-open { overflow:hidden; position:fixed; width:100%; height:100% }

/* ═══════ Touch effects ═══════ */
@media(hover:none) and (pointer:coarse) {
  .feature-card:hover { border-color:var(--border); transform:none; box-shadow:none }
  .feature-card:hover::before { opacity:0 }
  .feature-card:active { border-color:rgba(200,255,0,0.1); transform:scale(0.98); background:var(--surface2) }
  .price-card:hover { border-color:var(--border); transform:none; box-shadow:none }
  .price-card:active { border-color:rgba(200,255,0,0.1); transform:scale(0.98) }
  .option-card:hover { border-color:var(--border); transform:none; background:var(--surface) }
  .option-card:active { border-color:rgba(200,255,0,0.1); background:var(--surface2); transform:scale(0.97) }
  .video-item:hover { border-color:var(--border); transform:none; box-shadow:none }
  .video-item:active { border-color:rgba(200,255,0,0.15); transform:scale(0.98) }
  .vi-select-btn:hover { background:var(--surface3); color:var(--text2) }
  .video-item.selected .vi-select-btn { background:var(--accent); color:#000 }
  .pay-method:hover { border-color:var(--border); transform:none; background:var(--surface2) }
  .pay-method:active { border-color:rgba(200,255,0,0.1); background:var(--surface3); transform:scale(0.98) }
  .btn-primary:hover,.btn-secondary:hover,.btn-generate:hover,.btn-buy:hover,.btn-promo:hover,.btn-copy:hover,.auth-submit:hover,.btn-header:hover { transform:none; box-shadow:none }
  .btn-primary:active,.btn-secondary:active,.btn-generate:active,.btn-buy:active,.btn-promo:active,.btn-copy:active,.auth-submit:active,.btn-header:active { transform:scale(0.97); opacity:0.9 }
  .header-balance:hover { transform:none }
  .header-balance:active { transform:scale(0.97) }
  .footer-links a:hover { color:var(--text3); border-color:var(--border) }
  .footer-links a:active { color:var(--accent); border-color:rgba(200,255,0,0.12) }
  .my-res-item:hover { border-color:var(--border); transform:none; box-shadow:none }
  .my-res-item:active { border-color:rgba(200,255,0,0.1); transform:scale(0.97) }
  a,button,input,select,textarea,.option-card,.video-item,.pay-method,.feature-card,.price-card { touch-action:manipulation }
  .option-card,.video-item,.pay-method,.ba-dot { -webkit-user-select:none; user-select:none }
  .my-res-item video { pointer-events:none }
}

/* ═══════ Reduced motion ═══════ */
@media(prefers-reduced-motion:reduce) {
  * { animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important }
}

/* ═══════ Tablet: 1024px ═══════ */
@media(max-width:1024px) {
  .hero-content { grid-template-columns:1fr; text-align:left; gap:36px }
  .hero-text h1 { font-size:48px }
  .hero-text p { max-width:100% }
  .hero-buttons { justify-content:flex-start }
  .hero-stats { justify-content:flex-start }
  .hero-visual { order:1; align-items:center; width:100% }
  .ba-slider-wrap { width:100%; max-width:340px }
  .generate-layout { grid-template-columns:1fr; gap:20px }
  .upload-panel { position:static }
  .features-grid { grid-template-columns:1fr 1fr }
  .profile-grid { grid-template-columns:1fr }
  .pricing-grid[class*="cols-"] { grid-template-columns:repeat(3,1fr); max-width:none }
}

/* ═══════ Mobile: 768px ═══════ */
@media(max-width:768px) {
  .section { padding:80px 18px 52px }
  .section-title { font-size:32px }
  .section-subtitle { font-size:14px; margin-bottom:28px }
  #hero { padding-top:80px }
  .hero-text h1 { font-size:40px }
  .hero-stats { gap:18px; flex-wrap:wrap }
  .hero-stat-val { font-size:22px }
  .hero-stat-label { font-size:11px }
  .features-grid { grid-template-columns:1fr }
  .feature-card { padding:22px 18px }
  .ba-slider-wrap { width:100%; max-width:300px }
  .hero-visual { align-items:center }
  .options-grid { grid-template-columns:repeat(2,1fr); gap:8px }
  .video-list { grid-template-columns:repeat(2,1fr); gap:8px; max-height:60vh }
  .vi-media { aspect-ratio:4/3 }
  .vi-body { padding:6px 8px }
  .vi-name { font-size:12px }
  .vi-style-badge { font-size:8px; padding:2px 6px; margin-bottom:4px }
  .vi-info { font-size:9px; margin-bottom:6px }
  .vi-select-btn { padding:7px; font-size:11px }
  .vi-media-name { font-size:11px; bottom:20px; left:8px; right:8px }
  .vi-media-desc { font-size:9px; bottom:6px; left:8px }
  .vi-num { font-size:10px; padding:3px 7px; top:6px; left:6px }
  .vi-prev-badge { font-size:9px; padding:3px 6px; top:6px; right:6px }
  .upload-panel { padding:20px; border-radius:16px }
  .upload-zone { padding:32px 16px }
  .upload-preview img { max-height:250px }
  .tips-list { gap:6px }
  .tip { font-size:12px; padding:5px 10px }
  .footer { padding:28px 18px }
  .footer-links { flex-wrap:wrap; gap:8px; justify-content:center }
  .footer-links a { font-size:11px; padding:5px 12px; min-height:40px; display:flex; align-items:center; justify-content:center }
  .withdraw-form { flex-direction:column }
  .withdraw-form input,.withdraw-form button { width:100%; min-height:44px }
  .wd-btns { flex-wrap:wrap }
  .wd-btns button { min-height:44px }
  .steps-bar { gap:4px }
  .modal-bg,.modal-overlay,.auth-modal-bg,.wd-modal-bg { padding:12px; align-items:flex-end }
  .modal,.auth-modal,.wd-modal,.modal-box { width:100%; max-width:100%; border-radius:18px 18px 0 0; max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch }
  .done-modal { padding:12px }
  .done-content { max-width:100%; max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch }
  .auth-field input { font-size:16px; padding:12px 14px; min-height:44px }
  .auth-submit { min-height:48px; font-size:15px }
  .auth-tabs { gap:2px }
  .auth-tab { padding:10px; font-size:13px; min-height:40px }
  .promo-form { flex-direction:column }
  .promo-form .inp,.promo-form .btn-promo { width:100%; min-height:44px }
  .inp { font-size:16px; min-height:44px }
  .pay-method { padding:16px 18px; min-height:56px }
  .pm-title { font-size:15px }
  .manual-card-num { font-size:15px; padding:14px; min-height:48px }
  .receipt-zone { padding:36px 18px; min-height:120px }
  .btn-generate { min-height:52px; font-size:15px; border-radius:14px }
  .profile-card-header { padding:20px 22px 16px }
  .profile-card-body { padding:16px 22px 22px }
  .stat-row { padding:12px 14px }
  .stat-label,.stat-value { font-size:14px }
  .ref-link-box { font-size:12px; padding:12px; word-break:break-all; overflow-wrap:anywhere }
  .btn-copy { min-height:44px; font-size:14px }
  .header { padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)) }
  .section { padding-left:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right)) }
  .footer { padding-left:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right)); padding-bottom:max(28px,env(safe-area-inset-bottom)) }
  .proc-fact { max-width:100%; margin:12px 10px 0 }
  .aurora { filter:blur(80px) }
  .bg-glow-3 { display:none }
}

/* ═══════ Mobile: 640px ═══════ */
@media(max-width:640px) {
  .notif-panel { top:66px; max-height:400px; width:100%; max-width:100%; border-radius:0 0 16px 16px; right:-100% }
  .notif-panel.active { right:0 }
  .section { padding:80px 14px 40px }
  .header { padding:14px 10px 0; height:66px; align-items:center }
  .header-nav { display:none }
  .hamburger { display:flex }
  .header-logo { font-size:17px }
  .header-actions { gap:6px }
  .header-balance { padding:5px 10px; font-size:12px; gap:3px; min-height:32px }
  .lang-toggle { padding:5px 8px; font-size:11px; min-height:32px }
  .auth-btn-header { padding:5px 12px; font-size:12px; min-height:32px }
  #hero { padding-top:80px; min-height:auto; align-items:flex-start }
  .hero-text h1 { font-size:32px; line-height:0.95; letter-spacing:-2px }
  .hero-text p { font-size:14px; line-height:1.7 }
  .hero-buttons { flex-direction:column; gap:8px }
  .hero-buttons .btn-primary,.hero-buttons .btn-secondary,.hero-buttons .btn-promo-hero { width:100%; justify-content:center; min-height:48px; font-size:15px }
  .hero-stats { gap:14px; margin-top:22px; padding-top:18px; flex-direction:row; justify-content:center }
  .hero-stat { flex:1; text-align:center }
  .hero-stat-val { font-size:18px }
  .ba-slider-wrap { width:100%; max-width:280px }
  .ba-slider-title { font-size:22px }
  .ba-hint { font-size:11px }
  .ba-label { font-size:10px; padding:5px 10px; bottom:8px }
  .hero-visual { align-items:center }
  .section-title { font-size:26px }
  .section-subtitle { font-size:13px; margin-bottom:22px }
  .options-grid { grid-template-columns:repeat(2,1fr); gap:6px }
  .option-card { padding:12px 10px; font-size:12px; border-radius:10px; min-height:44px; display:flex; align-items:center; justify-content:center }
  .option-card img { width:40px; height:40px; border-radius:8px }
  .upload-panel { padding:16px; border-radius:14px }
  .upload-zone { padding:28px 14px; min-height:140px }
  .upload-text { font-size:13px }
  .upload-hint { font-size:11px }
  .upload-preview img { max-height:200px }
  .btn-generate { font-size:14px; padding:12px; min-height:50px }
  .action-card { padding:22px 12px; min-height:100px; gap:6px; display:flex; flex-direction:column; align-items:center }
  .action-icon { font-size:32px; margin-bottom:2px }
  .action-icon [data-lucide] { width:32px!important; height:32px!important }
  .action-title { font-size:14px; margin-bottom:2px }
  .action-price { font-size:12px }
  .action-grid { grid-template-columns:1fr 1fr; gap:8px }
  .video-list { grid-template-columns:repeat(2,1fr); gap:6px; max-height:55vh }
  .vi-media { aspect-ratio:4/3 }
  .vi-body { padding:5px 7px }
  .vi-name { font-size:11px; margin-bottom:1px }
  .vi-style-badge { font-size:8px; padding:2px 5px; margin-bottom:3px }
  .vi-info { font-size:9px; margin-bottom:5px }
  .vi-select-btn { padding:6px; font-size:10px; border-radius:6px; gap:4px }
  .vi-media-name { font-size:10px; bottom:18px; left:6px; right:6px }
  .vi-media-desc { font-size:8px; bottom:5px; left:6px }
  .vi-num { font-size:9px; padding:2px 6px; top:5px; left:5px; border-radius:5px }
  .vi-prev-badge { font-size:8px; padding:2px 5px; top:5px; right:5px }
  .vi-check { width:18px; height:18px; top:5px; right:5px }
  .vi-overlay { background:linear-gradient(0deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.15) 45%,rgba(0,0,0,0.05) 100%) }
  .tips-list { gap:4px; margin-top:10px }
  .tip { font-size:11px; padding:4px 8px; border-radius:6px }
  .tip-icon { width:18px; height:18px }
  .pricing-grid { gap:12px }
  .pricing-grid[class*="cols-"] { grid-template-columns:repeat(2,1fr); max-width:none }
  .price-card { padding:24px 20px }
  .price-tokens { font-size:24px }
  .price-amount { font-size:18px }
  .btn-buy { min-height:44px; font-size:13px }
  .profile-card-header { padding:18px 18px 14px }
  .profile-card-body { padding:14px 18px 18px }
  .promo-form { gap:6px }
  .promo-form input { font-size:16px }
  .ref-link-box { font-size:11px; padding:8px 10px }
  .toast { max-width:88vw; font-size:12px; padding:10px 18px; left:50%; right:auto }
  .auth-modal { padding:24px 18px; border-radius:18px 18px 0 0; max-height:92vh; width:100% }
  .auth-title { font-size:18px }
  .modal-box { border-radius:18px 18px 0 0; padding:22px 14px }
  .modal { border-radius:18px 18px 0 0; padding:24px 18px }
  .done-content { padding:20px 14px; border-radius:16px; max-height:85vh; overflow-y:auto }
  .done-title { font-size:18px }
  .done-result-wrap img, .done-result-wrap video { max-height:40vh }
  .done-btn { min-height:44px; font-size:13px; padding:10px 16px }
  .done-actions { gap:8px }
  .done-badge { width:52px; height:52px; border-radius:14px }
  .proc-visual { width:150px; height:150px }
  .proc-center { inset:30px }
  .proc-center [data-lucide] { width:32px!important; height:32px!important }
  .proc-orbit-2 { inset:10px }
  .proc-orbit-3 { inset:20px }
  .proc-content { padding:20px 14px }
  .proc-title { font-size:18px }
  .proc-sub { font-size:12px }
  .proc-fact { font-size:11px; padding:12px 14px }
  .proc-actions { gap:8px }
  .proc-btn { padding:9px 16px; font-size:12px }
  .mobile-menu { top:52px; padding-bottom:env(safe-area-inset-bottom) }
  .mobile-menu a { min-height:44px; display:flex; align-items:center; font-size:15px }
  .user-dropdown { right:-40px; min-width:150px }
  .user-dropdown a,.user-dropdown button { min-height:40px; display:flex; align-items:center }
  .footer-text { font-size:11px }
  .badge { font-size:10px; padding:5px 12px }
  .options-tabs { flex-wrap:wrap; gap:2px }
  .options-tab { padding:8px 12px; font-size:11px; flex:1 1 auto; min-height:40px }
  .wd-modal { padding:24px 18px; border-radius:18px 18px 0 0 }
  .wd-modal textarea { font-size:16px; min-height:90px }
  .wd-btns button { min-height:44px; font-size:14px }
  img,video { max-width:100%; height:auto }
  .my-results-grid { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:6px }
}

/* ═══════ Mobile: 400px ═══════ */
@media(max-width:400px) {
  .ba-slider-wrap { max-width:220px }
  .ba-hint { font-size:10px }
  .ba-label { font-size:9px; padding:4px 8px }
  .pricing-grid { grid-template-columns:1fr }
  .pricing-grid[class*="cols-"] { grid-template-columns:1fr; max-width:none }
  .action-grid { grid-template-columns:1fr }
  .action-card { padding:18px 14px; flex-direction:row; gap:10px; justify-content:center }
  .action-icon { font-size:28px; margin-bottom:0 }
  .action-title { font-size:15px; margin-bottom:0 }
  .action-price { font-size:13px }
  .hero-text h1 { font-size:26px }
  .hero-text p { font-size:13px }
  .section-title { font-size:22px }
  .hero-stats { flex-direction:row; gap:10px; align-items:stretch; justify-content:center }
  .hero-stat { flex:1; text-align:center }
  .options-tabs { gap:2px }
  .options-tab { padding:7px 8px; font-size:10px }
  .options-grid { grid-template-columns:1fr 1fr; gap:5px }
  .option-card { padding:10px 6px; font-size:10px }
  .option-card img { width:34px; height:34px }
  .video-list { grid-template-columns:repeat(2,1fr); gap:5px; max-height:50vh }
  .vi-media { aspect-ratio:1/1 }
  .vi-body { padding:4px 6px }
  .vi-name { font-size:10px }
  .vi-style-badge { display:none }
  .vi-info { font-size:8px; margin-bottom:4px }
  .vi-select-btn { padding:5px; font-size:9px; gap:3px }
  .vi-media-name { font-size:9px; bottom:14px; left:5px }
  .vi-media-desc { font-size:7px; bottom:4px; left:5px }
  .vi-num { font-size:8px; padding:2px 5px; top:4px; left:4px }
  .vi-prev-badge { display:none }
  .vi-check { width:16px; height:16px; top:4px; right:4px }
  .upload-panel { padding:12px; border-radius:12px }
  .upload-zone { padding:24px 10px; min-height:120px }
  .upload-preview img { max-height:180px }
  .tips-list { gap:3px; margin-top:8px }
  .tip { font-size:10px; padding:3px 6px }
  .header-actions { gap:4px }
  .header-balance { font-size:11px; padding:4px 8px }
  .auth-btn-header { padding:4px 10px; font-size:11px }
  .lang-toggle { padding:4px 6px; font-size:10px }
  .btn-primary,.btn-secondary { font-size:13px; padding:10px 18px }
  .section { padding:80px 10px 32px }
  .feature-card { padding:18px 14px }
  .feature-card h3 { font-size:15px }
  .feature-card p { font-size:12px }
  .profile-card-header { padding:14px 14px 12px }
  .profile-card-body { padding:12px 14px 14px }
  .stat-row { padding:10px 10px }
  .auth-modal { padding:22px 14px }
  .auth-field input { padding:10px 12px }
  .btn-generate { font-size:13px; padding:10px; min-height:46px; margin-top:16px }
}

/* ═══════ Landscape ═══════ */
@media(max-width:900px) and (orientation:landscape) {
  #hero { min-height:auto; padding-top:70px; padding-bottom:36px }
  .hero-content { gap:20px }
  .ba-slider-wrap { max-width:180px }
  .ba-slider { aspect-ratio:3/4 }
  .proc-visual { width:110px; height:110px }
  .proc-center { inset:18px }
  .proc-center [data-lucide] { width:24px!important; height:24px!important }
  .mobile-menu { max-height:calc(100vh - 52px); overflow-y:auto }
  .done-content { max-height:80vh }
  .done-result-wrap img, .done-result-wrap video { max-height:35vh }
  .modal,.auth-modal,.wd-modal { max-height:85vh }
}

/* ═══════ Auth ═══════ */
.auth-btn-header { padding:7px 18px; border-radius:8px; background:var(--accent); color:#000; font-weight:700; font-size:13px; border:none; cursor:pointer; transition:.3s }
.auth-btn-header:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(200,255,0,.25) }
.header-user-info { display:flex; align-items:center; gap:8px; cursor:pointer; position:relative }
.header-user-name { color:var(--text); font-weight:600; font-size:13px }
.header-user-id { color:var(--text3); font-size:11px }
.header-user-avatar { width:32px; height:32px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#000 }
.user-dropdown { position:absolute; top:calc(100% + 8px); right:0; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:6px; min-width:170px; box-shadow:0 16px 36px rgba(0,0,0,.6); display:none; z-index:1001; backdrop-filter:blur(20px) }
.user-dropdown.show { display:block }
.user-dropdown a,.user-dropdown button { display:block; width:100%; padding:8px 14px; border-radius:8px; font-size:13px; font-weight:500; color:var(--text2); text-decoration:none; text-align:left; background:none; border:none; cursor:pointer; transition:.2s }
.user-dropdown a:hover,.user-dropdown button:hover { background:rgba(200,255,0,.04); color:var(--text) }
.user-dropdown .divider { height:1px; background:var(--border); margin:4px 6px }
.user-dropdown .logout-btn { color:#ef4444 }

.auth-modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(12px); z-index:2000; display:none; align-items:center; justify-content:center }
.auth-modal-bg.active { display:flex }
.auth-modal { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:32px; max-width:400px; width:90%; position:relative; animation:modalIn .35s ease }
@keyframes modalIn { from{opacity:0;transform:scale(.92) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
.auth-close { position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); color:var(--text3); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s }
.auth-close:hover { background:rgba(239,68,68,.1); color:#ef4444 }
.auth-title { font-family:'Space Grotesk'; font-size:22px; font-weight:800; text-align:center; margin-bottom:4px; text-transform:uppercase; letter-spacing:-0.5px }
.auth-subtitle { color:var(--text3); font-size:13px; text-align:center; margin-bottom:20px }
.auth-tabs { display:flex; gap:2px; background:var(--surface2); border-radius:10px; padding:3px; margin-bottom:20px }
.auth-tab { flex:1; padding:9px; border-radius:8px; text-align:center; font-weight:600; font-size:13px; color:var(--text3); background:none; border:none; cursor:pointer; transition:.3s }
.auth-tab.active { background:var(--accent); color:#000; font-weight:700 }
.auth-form { display:none; flex-direction:column; gap:12px }
.auth-form.active { display:flex }
.auth-field label { display:block; font-size:12px; font-weight:600; color:var(--text2); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.5px }
.auth-field input { width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:14px; outline:none; transition:.2s; box-sizing:border-box }
.auth-field input:focus { border-color:rgba(200,255,0,0.3); box-shadow:0 0 0 3px rgba(200,255,0,.05) }
.auth-submit { width:100%; padding:12px; border-radius:10px; border:none; background:var(--accent); color:#000; font-size:15px; font-weight:800; cursor:pointer; transition:.3s; margin-top:4px; text-transform:uppercase; letter-spacing:0.5px }
.auth-submit:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(200,255,0,.25) }
.auth-error { color:#ef4444; font-size:12px; text-align:center; min-height:18px; margin-top:4px }
.auth-ref-badge { text-align:center; margin-bottom:14px; padding:7px 14px; border-radius:8px; background:rgba(200,255,0,.04); border:1px solid rgba(200,255,0,.1); color:var(--accent); font-size:12px; font-weight:600 }

@keyframes popIn { from{opacity:0;transform:scale(0.5)} to{opacity:1;transform:scale(1)} }