:root{
  --bg-void:#0a0610;
  --bg-panel:#150c1f;
  --bg-panel-2:#1c1228;
  --pink-1:#ff1da3;
  --pink-2:#ff4fc3;
  --magenta-deep:#7b0d5e;
  --violet:#7c3aed;
  --line:rgba(255,75,195,0.18);
  --text-hi:#fbeefb;
  --text-mid:#c9a8c9;
  --text-low:#7e6a85;
  --gold:#ffcf6b;
  --ok:#34e3a1;
  --err:#ff6b6b;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--bg-void); color:var(--text-hi); font-family:'Space Grotesk', sans-serif;
  min-height:100vh; overflow-x:hidden; position:relative;
}
.mono{font-family:'JetBrains Mono', monospace;}
a{color:inherit; text-decoration:none;}

.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 700px 500px at 15% -5%, rgba(255,29,163,0.20), transparent 60%),
    radial-gradient(ellipse 600px 600px at 100% 30%, rgba(124,58,237,0.16), transparent 60%),
    radial-gradient(ellipse 500px 500px at 0% 90%, rgba(255,29,163,0.10), transparent 60%);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Ambient stars + balloons ---------- */
.ambient-layer{
  position:fixed; inset:0; z-index:15; pointer-events:none; overflow:hidden;
}
.star{
  position:absolute; border-radius:50%;
  background:#fff; box-shadow:0 0 10px 2px rgba(255,255,255,0.9);
  animation:twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:0.25; transform:scale(0.7);}
  50%{ opacity:1; transform:scale(1.3);}
}
.balloon{
  position:absolute; bottom:-120px; opacity:0.95;
  animation-name:balloon-rise; animation-timing-function:ease-in; animation-iteration-count:infinite;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.4));
}
.balloon .b-body{
  width:20px; height:24px; border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;
  position:relative; box-shadow:inset -4px -4px 7px rgba(0,0,0,0.2), 0 3px 10px rgba(0,0,0,0.3);
}
.balloon .b-body::after{
  content:''; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:6px solid inherit;
}
.balloon .b-string{
  width:1px; height:32px; background:rgba(255,255,255,0.3); margin:2px auto 0;
}
.balloon.b1 .b-body{ background:var(--pink-2);}
.balloon.b2 .b-body{ background:var(--violet);}
.balloon.b3 .b-body{ background:var(--gold);}
.balloon.b4 .b-body{ background:var(--pink-1);}
@keyframes balloon-rise{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0;}
  8%{ opacity:0.95;}
  50%{ transform:translateY(-55vh) translateX(22px) rotate(5deg);}
  92%{ opacity:0.95;}
  100%{ transform:translateY(-115vh) translateX(-18px) rotate(-5deg); opacity:0;}
}

/* ---------- Floating heart particles ---------- */
.fheart{
  position:absolute; bottom:-40px; font-size:14px; opacity:0;
  animation-name:fheart-drift; animation-timing-function:ease-out; animation-iteration-count:infinite;
  filter:drop-shadow(0 0 6px rgba(255,79,195,0.6));
}
@keyframes fheart-drift{
  0%{ transform:translateY(0) translateX(0) scale(0.6) rotate(0deg); opacity:0;}
  15%{ opacity:0.8;}
  85%{ opacity:0.6;}
  100%{ transform:translateY(-70vh) translateX(var(--drift, 20px)) scale(1.1) rotate(15deg); opacity:0;}
}

/* ---------- Sparkle particles around hero badge ---------- */
.sparkle-particle{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 8px 2px rgba(255,207,107,0.8);
  animation:sparkle-pop 1.8s ease-in-out infinite;
}
@keyframes sparkle-pop{
  0%,100%{ opacity:0; transform:scale(0) translateY(0);}
  50%{ opacity:1; transform:scale(1) translateY(-6px);}
}

/* ---------- Confetti burst (on order success) ---------- */
.confetti-piece{
  position:fixed; top:40%; width:8px; height:8px; z-index:90; pointer-events:none;
  animation-name:confetti-fall; animation-timing-function:cubic-bezier(.25,.46,.45,.94); animation-fill-mode:forwards;
}
@keyframes confetti-fall{
  0%{ transform:translate(0,0) rotate(0deg); opacity:1;}
  100%{ transform:translate(var(--cx, 0), var(--cy, 500px)) rotate(var(--cr, 360deg)); opacity:0;}
}

/* ---------- Buy button attention ring ---------- */
.buy-btn::before{
  content:''; position:absolute; inset:-4px; border-radius:100px;
  border:1.5px solid var(--pink-2); opacity:0; pointer-events:none;
  animation:ring-pulse 2.8s ease-out infinite;
}
@keyframes ring-pulse{
  0%{ opacity:0.7; transform:scale(1);}
  80%{ opacity:0; transform:scale(1.35);}
  100%{ opacity:0; transform:scale(1.35);}
}

.app{ position:relative; z-index:3; max-width:480px; margin:0 auto; min-height:100vh; }

#dashView{ display:block; padding-bottom:90px; }

.topbar{ padding:18px 16px 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.avatar{
  width:50px; height:50px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(145deg, var(--pink-1), var(--magenta-deep));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--bg-void), 0 0 0 3px var(--pink-2);
  overflow:hidden;
}
.avatar.logo-avatar{
  background:#1a0f12;
  box-shadow:0 0 0 2px var(--bg-void), 0 0 0 3px var(--pink-2), 0 0 18px rgba(255,79,195,0.5);
  animation:logo-pulse 3.5s ease-in-out infinite;
}
.avatar.logo-avatar img{ width:100%; height:100%; object-fit:cover; display:block;}
@keyframes logo-pulse{
  0%,100%{ box-shadow:0 0 0 2px var(--bg-void), 0 0 0 3px var(--pink-2), 0 0 14px rgba(255,79,195,0.4);}
  50%{ box-shadow:0 0 0 2px var(--bg-void), 0 0 0 3px var(--pink-2), 0 0 26px rgba(255,79,195,0.75);}
}
.avatar svg{ width:26px; height:26px;}
.topbar .who{ flex:1; min-width:120px;}
.topbar .who .name{ font-weight:700; font-size:17px;}
.topbar .who .sub{ font-size:11.5px; color:var(--text-low); font-family:'JetBrains Mono',monospace; margin-top:1px;}
.pill-btn{
  border:1.5px solid var(--pink-2); border-radius:100px; padding:9px 16px; font-size:12.5px; font-weight:600;
  color:var(--pink-2); display:flex; align-items:center; gap:6px; cursor:pointer; background:rgba(255,29,163,0.06);
  white-space:nowrap;
}
.pill-btn svg{ width:14px; height:14px;}
.pill-btn.admin{ border-color:var(--violet); color:#b89bfc; background:rgba(124,58,237,0.08);}
.topbar-actions{ display:flex; gap:8px; width:100%; margin-top:4px;}
.topbar-actions .pill-btn{ flex:1; justify-content:center;}

.hero{ text-align:center; padding:22px 24px 6px;}
.hero-badge-wrap{ position:relative; display:inline-block;}
.sparkle-container{ position:absolute; inset:-10px; pointer-events:none;}
.hero-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:0.5px;
  color:var(--pink-2); background:rgba(255,29,163,0.10); border:1px solid var(--line);
  padding:7px 14px; border-radius:100px; margin-bottom:16px;
}
.hero h1{ font-size:34px; font-weight:700; letter-spacing:-0.5px; margin-bottom:8px;}
.hero p{ font-size:13.5px; color:var(--text-mid); max-width:300px; margin:0 auto;}

.tabs{ display:flex; gap:8px; padding:22px 16px 18px; overflow-x:auto;}
.tab{
  flex-shrink:0; padding:11px 18px; border-radius:100px; font-size:13.5px; font-weight:600;
  border:1px solid var(--line); color:var(--text-mid); display:flex; align-items:center; gap:7px; cursor:pointer;
}
.tab svg{ width:15px; height:15px;}
.tab.active{
  background:linear-gradient(135deg, var(--pink-1), var(--violet)); color:#fff; border-color:transparent;
  box-shadow:0 8px 20px -8px rgba(255,29,163,0.55);
}

.cards-scroll{ display:flex; flex-direction:column; gap:16px; padding:0 16px 8px;}
.pcard{
  width:100%; position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%);
  border:1px solid var(--line); border-radius:22px; padding:22px;
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  animation:card-rise 0.6s cubic-bezier(.2,.8,.3,1) backwards;
}
.cards-scroll .pcard:nth-child(1){ animation-delay:0.02s;}
.cards-scroll .pcard:nth-child(2){ animation-delay:0.08s;}
.cards-scroll .pcard:nth-child(3){ animation-delay:0.14s;}
.cards-scroll .pcard:nth-child(4){ animation-delay:0.20s;}
.cards-scroll .pcard:nth-child(5){ animation-delay:0.26s;}
.cards-scroll .pcard:nth-child(6){ animation-delay:0.32s;}
@keyframes card-rise{
  from{ opacity:0; transform:translateY(18px) scale(0.98);}
  to{ opacity:1; transform:translateY(0) scale(1);}
}
.pcard::before{
  content:''; position:absolute; top:-30%; right:-15%; width:160px; height:160px;
  background:radial-gradient(circle, rgba(255,29,163,0.18), transparent 70%); pointer-events:none;
  animation:glow-drift 6s ease-in-out infinite;
}
@keyframes glow-drift{
  0%,100%{ transform:translate(0,0) scale(1); opacity:0.9;}
  50%{ transform:translate(-12px,10px) scale(1.15); opacity:1;}
}
.pcard::after{
  content:''; position:absolute; inset:0; border-radius:22px; padding:1px;
  background:linear-gradient(120deg, transparent 30%, rgba(255,79,195,0.55) 50%, transparent 70%);
  background-size:250% 250%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:0; transition:opacity 0.3s ease;
  animation:border-sweep 3.5s linear infinite;
}
@keyframes border-sweep{
  0%{ background-position:0% 0%;}
  100%{ background-position:200% 0%;}
}
.pcard:hover{ transform:translateY(-3px); border-color:rgba(255,79,195,0.4); box-shadow:0 16px 36px -16px rgba(255,29,163,0.45);}
.pcard:hover::after{ opacity:1;}
.pcard:active{ transform:translateY(-1px) scale(0.99);}
.popular-badge{
  position:absolute; top:14px; right:14px; font-size:9.5px; font-weight:700; letter-spacing:0.6px;
  background:linear-gradient(135deg, var(--pink-1), var(--violet)); padding:5px 10px; border-radius:7px; color:#fff;
  box-shadow:0 0 14px rgba(255,29,163,0.55);
  animation:badge-glow 2.2s ease-in-out infinite;
}
@keyframes badge-glow{
  0%,100%{ box-shadow:0 0 10px rgba(255,29,163,0.4);}
  50%{ box-shadow:0 0 18px rgba(255,29,163,0.8);}
}
.pcard .cat-tag{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:0.5px;
  color:var(--pink-2); background:rgba(255,29,163,0.12); padding:5px 11px; border-radius:100px; margin-bottom:14px;
}
.pcard .cat-tag svg{ width:11px; height:11px;}
.pcard-icon{
  width:62px; height:62px; border-radius:18px; background:rgba(255,29,163,0.10); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.pcard-icon svg{ width:28px; height:28px;}
.pcard h3{ font-size:25px; font-weight:700; letter-spacing:-0.3px; margin-bottom:4px;}
.pcard .desc{ font-size:13px; color:var(--text-mid); margin-bottom:14px;}
.pcard .tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px;}
.pcard .tags span{
  font-size:11px; font-family:'JetBrains Mono',monospace; padding:6px 10px; border-radius:100px;
  background:var(--bg-void); border:1px solid var(--line); color:var(--text-mid);
}
.pcard-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line);}
.pcard .price{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:23px;}
.pcard .price span{ font-size:12px; color:var(--text-low); font-weight:500;}
.buy-btn{
  border:none; border-radius:100px; padding:12px 20px; cursor:pointer; position:relative;
  background:linear-gradient(135deg, var(--pink-1), var(--violet)); color:#fff; font-weight:700; font-size:13.5px;
  box-shadow:0 8px 22px -8px rgba(255,29,163,0.55);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.buy-btn:hover{ transform:scale(1.04); box-shadow:0 10px 26px -8px rgba(255,29,163,0.7);}
.buy-btn:active{ transform:scale(0.96);}
.pcard-foot{ display:flex; gap:14px; margin-top:14px; flex-wrap:wrap;}
.pcard-foot .f{ font-size:10.5px; color:var(--text-low);}

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:20;
  background:rgba(10,6,16,0.94); backdrop-filter:blur(16px); border-top:1px solid var(--line);
  display:flex; max-width:480px; margin:0 auto;
}
.nav-item{
  flex:1; padding:11px 4px 9px; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--text-low); cursor:pointer;
}
.nav-item svg{ width:20px; height:20px;}
.nav-item span{ font-size:10px; font-weight:600;}
.nav-item.active{ color:var(--pink-2);}
.nav-item.support{ color:var(--ok);}

/* ---------- Modal / sheet ---------- */
.overlay{
  position:fixed; inset:0; z-index:50; background:rgba(5,2,8,0.78); backdrop-filter:blur(6px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.overlay.show{ opacity:1; pointer-events:auto;}
.sheet{
  width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  background:var(--bg-panel-2); border:1px solid var(--line); border-bottom:none;
  border-radius:24px 24px 0 0; padding:20px 18px 28px;
  transform:translateY(100%); transition:transform 0.3s cubic-bezier(.2,.9,.3,1);
}
.overlay.show .sheet{ transform:translateY(0);}
.sheet-handle{ width:40px; height:4px; background:var(--line); border-radius:10px; margin:0 auto 16px;}
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.sheet-head h3{ font-size:17px; font-weight:700;}
.close-btn{
  width:30px; height:30px; border-radius:50%; background:var(--bg-panel); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-mid); font-size:16px;
}
.order-summary{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:14px; padding:14px;
  display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;
}
.order-summary .left .pname{font-weight:600; font-size:14px;}
.order-summary .left .pdesc{font-size:11px; color:var(--text-low); margin-top:2px; font-family:'JetBrains Mono',monospace;}
.order-summary .right{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:18px; color:var(--pink-2);}

.field{ margin-bottom:16px;}
.field label{ font-size:11px; font-family:'JetBrains Mono',monospace; color:var(--text-low); display:block; margin-bottom:7px; letter-spacing:0.3px;}
.field input[type=text]{
  width:100%; background:var(--bg-panel); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--text-hi); font-family:'JetBrains Mono',monospace; font-size:13.5px; outline:none;
}
.field input:focus{ border-color:var(--pink-2);}
.optional-tag{ color:var(--text-low); font-weight:400; text-transform:none; letter-spacing:0;}
.region-select{
  width:100%; background:var(--bg-panel); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--text-hi); font-family:'Space Grotesk',sans-serif; font-size:13.5px; outline:none;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9a8c9' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.region-select:focus{ border-color:var(--pink-2);}
.support-textarea{
  width:100%; background:var(--bg-panel); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--text-hi); font-family:'Space Grotesk',sans-serif; font-size:13.5px; outline:none;
  resize:vertical; min-height:90px;
}
.support-textarea:focus{ border-color:var(--pink-2);}
.uid-input-row{ display:flex; gap:10px;}
.uid-input-row input{ flex:1; }

.pay-tabs{ display:flex; gap:8px; margin-bottom:16px;}
.pay-tab{
  flex:1; padding:11px; text-align:center; border-radius:12px; border:1px solid var(--line); cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--text-mid); display:flex; align-items:center; justify-content:center; gap:6px;
}
.pay-tab svg{ width:15px; height:15px;}
.pay-tab.active{ background:rgba(255,29,163,0.10); border-color:var(--pink-2); color:var(--pink-2);}
.pay-pane{}
.pay-note{ font-size:12px; color:var(--text-mid); line-height:1.6; margin-bottom:14px;}

.qr-wrap{ display:flex; flex-direction:column; align-items:center; padding:4px 0 6px;}
.upi-id{
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text-hi);
  background:var(--bg-panel); border:1px dashed var(--line); padding:8px 14px; border-radius:10px;
  display:flex; align-items:center; gap:8px; width:100%; justify-content:space-between;
}
.upi-id button{
  background:rgba(255,29,163,0.12); border:1px solid var(--line); color:var(--pink-2);
  font-size:10px; padding:4px 8px; border-radius:6px; cursor:pointer; font-family:'JetBrains Mono',monospace;
}
.upload-zone{
  border:1.5px dashed var(--line); border-radius:12px; padding:18px; text-align:center;
  cursor:pointer; transition:border-color 0.2s ease; background:var(--bg-panel);
}
.upload-zone:hover{ border-color:var(--pink-2);}
.upload-zone svg{ width:22px; height:22px; color:var(--text-low); margin-bottom:6px;}
.upload-zone .ut{ font-size:12px; color:var(--text-mid);}
.upload-zone.has-file{ border-color:var(--ok); border-style:solid;}
.preview-thumb{ max-width:100%; max-height:120px; border-radius:8px; margin-top:8px;}
.submit-btn{
  width:100%; padding:15px; border:none; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg, var(--pink-1), var(--violet)); color:#fff; font-weight:700; font-size:15px;
}
.submit-btn:disabled{ opacity:0.35; cursor:not-allowed;}
.note-line{ font-size:11.5px; color:var(--text-low); text-align:center; margin-top:12px; line-height:1.5;}

.success-wrap{ text-align:center; padding:30px 10px 10px;}
.success-icon{
  width:70px; height:70px; border-radius:50%; margin:0 auto 18px;
  background:rgba(52,227,161,0.12); border:1px solid rgba(52,227,161,0.4);
  display:flex; align-items:center; justify-content:center;
}
.success-icon svg{ width:32px; height:32px; color:var(--ok);}
.success-wrap h3{ font-size:17px; margin-bottom:8px;}
.success-wrap p{ font-size:12.5px; color:var(--text-mid); line-height:1.6; max-width:300px; margin:0 auto;}
.success-wrap .order-id{ margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-low);}

.history-item{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px;
}
.hi-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.hi-title{ font-size:13px; font-weight:600;}
.hi-status{ font-size:10px; font-weight:700; padding:3px 9px; border-radius:100px; text-transform:capitalize;}
.status-pending{ background:rgba(255,207,107,0.15); color:var(--gold);}
.status-approved{ background:rgba(52,227,161,0.15); color:var(--ok);}
.status-rejected{ background:rgba(255,107,107,0.15); color:var(--err);}
.hi-bottom{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-low); font-family:'JetBrains Mono',monospace;}

::-webkit-scrollbar{ width:0; height:0;}