:root{
  --bg-deep:#060915;
  --bg-panel:#0D1430;
  --bg-panel-2:#111B42;
  --line:rgba(255,255,255,0.08);
  --blue:#3B7CFB;
  --blue-glow:#5B93FF;
  --purple:#A855F7;
  --purple-glow:#C084FC;
  --gold:#F5B400;
  --gold-glow:#FFD466;
  --text:#F3F5FC;
  --text-muted:#8A92B8;
  --text-faint:#5C6389;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg-deep);
  color:var(--text);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}

h1,h2,h3,h4,.font-display{
  font-family:'Sora',sans-serif;
  letter-spacing:-0.02em;
}

.mono{font-family:'JetBrains Mono',monospace;}

.text-muted-c{color:var(--text-muted);}
.text-faint{color:var(--text-faint);}

.bg-blue-grad{background:linear-gradient(135deg,var(--blue),#1E4FD6);}
.bg-purple-grad{background:linear-gradient(135deg,var(--purple),#7C25E0);}
.bg-gold-grad{background:linear-gradient(135deg,var(--gold),#D99000);}

.text-blue{color:var(--blue-glow);}
.text-purple{color:var(--purple-glow);}
.text-gold{color:var(--gold-glow);}

/* ---------- Grain / glow backdrop ---------- */
.bg-noise::before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:3px 3px;
  pointer-events:none;
  opacity:0.5;
}

/* ---------- Navbar ---------- */
.navbar-bidnas{
  background:rgba(6,9,21,0.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:0.9rem 0;
}
.navbar-bidnas .nav-link{
  color:var(--text-muted);
  font-weight:600;
  font-size:0.92rem;
  margin:0 0.6rem;
  transition:color .2s;
}
.navbar-bidnas .nav-link:hover{color:var(--text);}
.navbar-bidnas .nav-link.active-nav{color:var(--text);}
.navbar-bidnas .nav-link.active-nav::after{
  content:"";display:block;height:2px;margin-top:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--purple));
}
.brand-logo{height:68px;}
.btn-ghost-nav{
  border:1px solid var(--line);
  color:var(--text);
  border-radius:10px;
  font-weight:600;
  font-size:0.88rem;
  padding:0.5rem 1.1rem;
}
.btn-ghost-nav:hover{border-color:var(--blue);color:#fff;background:rgba(59,124,251,0.1);}
.btn-cta{
  background:var(--gold-grad, linear-gradient(135deg,var(--gold),#D99000));
  color:#1A1300;
  font-weight:700;
  border-radius:10px;
  padding:0.55rem 1.3rem;
  font-size:0.88rem;
  border:none;
  box-shadow:0 8px 24px -8px rgba(245,180,0,0.5);
}
.btn-cta:hover{color:#1A1300;filter:brightness(1.06);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:7.5rem 0 6rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(59,124,251,0.22), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(168,85,247,0.20), transparent 45%),
    var(--bg-deep);
  overflow:hidden;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(245,180,0,0.1);
  border:1px solid rgba(245,180,0,0.35);
  color:var(--gold-glow);
  font-weight:700;font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;
  padding:0.4rem 0.9rem;border-radius:999px;
}
.hero h1{
  font-size:clamp(2.4rem,4.6vw,3.6rem);
  font-weight:800;
  line-height:1.08;
}
.hero p.lead{color:var(--text-muted);font-size:1.08rem;max-width:520px;}

.mode-card{
  position:relative;
  border-radius:20px;
  padding:1.6rem;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-panel-2),var(--bg-panel));
  transition:transform .35s ease, box-shadow .35s ease;
}
.mode-card:hover{transform:translateY(-6px);}
.mode-card.auction{box-shadow:0 20px 50px -20px rgba(59,124,251,0.35);}
.mode-card.lucky{box-shadow:0 20px 50px -20px rgba(168,85,247,0.35);}
.mode-icon{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;color:#fff;margin-bottom:0.9rem;
}
.mode-card .price-now{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:1.35rem;}
.countdown-chip{
  font-family:'JetBrains Mono',monospace;
  background:rgba(255,73,73,0.12);
  color:#FF6B6B;
  border:1px solid rgba(255,73,73,0.35);
  font-size:0.76rem;font-weight:600;
  padding:0.2rem 0.6rem;border-radius:6px;
}
.progress-thin{height:6px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden;}
.progress-thin > div{height:100%;border-radius:999px;}

/* ---------- Stats ---------- */
.stats-bar{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg-panel);
}
.stat-num{font-family:'Sora',sans-serif;font-weight:800;font-size:2.1rem;}

/* ---------- Section headers ---------- */
.section{padding:5.5rem 0;}
.section-eyebrow{
  color:var(--text-faint);font-weight:700;font-size:0.78rem;
  letter-spacing:0.14em;text-transform:uppercase;
}
.section-title{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:800;margin-top:0.4rem;}
.link-arrow{color:var(--blue-glow);font-weight:700;font-size:0.92rem;text-decoration:none;}
.link-arrow i{transition:transform .2s;}
.link-arrow:hover i{transform:translateX(4px);}

/* ---------- Product Card (Auction) ---------- */
.card-bidnas{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  transition:border-color .25s, transform .25s;
  height:100%;
}
.card-bidnas:hover{border-color:rgba(91,147,255,0.45);transform:translateY(-4px);}
.card-media{
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#141C42,#0B1130);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  border-bottom:1px solid var(--line);
}
.card-media i{font-size:3rem;color:rgba(255,255,255,0.14);}
.badge-live{
  position:absolute;top:0.8rem;left:0.8rem;
  background:#FF3B3B;color:#fff;font-size:0.7rem;font-weight:700;
  padding:0.25rem 0.55rem;border-radius:6px;
  display:flex;align-items:center;gap:0.35rem;
}
.badge-live .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
.card-body-c{padding:1.15rem 1.25rem 1.35rem;}
.card-title-c{font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;margin-bottom:0.15rem;}
.card-sub{color:var(--text-faint);font-size:0.8rem;}
.card-price-row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:0.9rem;}
.card-price-row .label{color:var(--text-faint);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;}
.card-price-row .value{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:1.15rem;}

/* ---------- Ticket Stub (Lucky Draw signature element) ---------- */
.ticket{
  position:relative;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:16px;
  display:flex;
  overflow:hidden;
  transition:border-color .25s, transform .25s;
}
.ticket:hover{border-color:rgba(192,132,252,0.45);transform:translateY(-4px);}
.ticket-media{
  width:38%;
  background:linear-gradient(160deg,#241238,#120A26);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.ticket-media i{font-size:2.2rem;color:rgba(255,255,255,0.18);}
.ticket-perf{
  width:0;
  position:relative;
  border-left:2px dashed rgba(255,255,255,0.16);
}
.ticket-perf::before,.ticket-perf::after{
  content:"";position:absolute;left:-9px;
  width:18px;height:18px;border-radius:50%;
  background:var(--bg-deep);
}
.ticket-perf::before{top:-9px;}
.ticket-perf::after{bottom:-9px;}
.ticket-body{flex:1;padding:1.1rem 1.25rem;}
.ticket-num{
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;color:var(--purple-glow);
  letter-spacing:0.03em;
}
.ticket-fee{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--gold-glow);}

/* ---------- Winners strip ---------- */
.winner-card{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:16px;
  padding:1.1rem;text-align:center;
}
.winner-avatar{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),#B87800);
  display:flex;align-items:center;justify-content:center;
  font-family:'Sora',sans-serif;font-weight:800;color:#1A1300;font-size:1.2rem;
  margin:0 auto 0.7rem;
  border:3px solid rgba(245,180,0,0.35);
}

/* ---------- Brands ---------- */
.brand-pill{
  border:1px solid var(--line);border-radius:12px;
  padding:1rem;text-align:center;color:var(--text-muted);
  font-family:'Sora',sans-serif;font-weight:700;font-size:0.95rem;
  background:var(--bg-panel);
}

/* ---------- Testimonials ---------- */
.testi-card{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:16px;
  padding:1.5rem;height:100%;
}
.testi-avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--bg-panel-2);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:0.85rem;color:var(--text);
}

/* ---------- Newsletter ---------- */
.newsletter-band{
  border-radius:24px;
  background:
    radial-gradient(circle at 20% 30%, rgba(59,124,251,0.28), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(168,85,247,0.28), transparent 55%),
    var(--bg-panel-2);
  border:1px solid var(--line);
  padding:3rem;
}
.form-control-dark{
  background:var(--bg-deep);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:0.7rem 1rem;
}
.form-control-dark:focus{background:var(--bg-deep);color:var(--text);border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,124,251,0.2);}
.form-control-dark::placeholder{color:var(--text-faint);}

/* ---------- Footer ---------- */
.footer-bidnas{
  border-top:1px solid var(--line);
  background:#050810;
  padding:3.5rem 0 1.5rem;
}
.footer-bidnas h6{
  font-family:'Sora',sans-serif;font-weight:700;font-size:0.85rem;
  color:var(--text);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:1rem;
}
.footer-bidnas a{
  color:var(--text-muted);text-decoration:none;font-size:0.9rem;
  display:block;margin-bottom:0.55rem;
}
.footer-bidnas a:hover{color:var(--blue-glow);}
.social-icon{
  width:36px;height:36px;border-radius:9px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);
}
.social-icon:hover{color:#fff;border-color:var(--blue);}

@media (max-width:991px){
  .section{padding:3.5rem 0;}
  .hero{padding:5rem 0 3.5rem;}
}

:focus-visible{outline:2px solid var(--blue-glow);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* ---------- Shared simple table + status badge (used on seller dashboard, admin panel) ---------- */
.admin-table{width:100%;border-collapse:collapse;}
.admin-table th{
  text-align:left;color:var(--text-faint);font-size:0.72rem;text-transform:uppercase;
  letter-spacing:0.05em;font-weight:700;padding:0.7rem 0.8rem;border-bottom:1px solid var(--line);
}
.admin-table td{padding:0.8rem;border-bottom:1px solid var(--line);font-size:0.88rem;vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.badge-status{
  font-size:0.72rem;font-weight:700;padding:0.25rem 0.6rem;border-radius:999px;
  display:inline-block;
}

/* ---------- Notification list icon badge ---------- */
.notif-icon{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-panel-2);font-size:0.9rem;
}