:root{
  --bg:#090c12;
  --panel:#111722;
  --panel2:#161e2b;
  --line:#263247;
  --text:#f7f9fc;
  --muted:#94a0b3;
  --gold:#ffc83d;
  --gold2:#ff9e19;
  --purple:#7d5cff;
  --green:#31d98b;
  --red:#ff5f67;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(circle at top left,#1c1839 0,transparent 35%),
    radial-gradient(circle at top right,#31200c 0,transparent 30%),
    var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  min-height:100vh
}
a{color:inherit;text-decoration:none}
.header{
  height:78px;
  padding:0 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:rgba(9,12,18,.88);
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:blur(16px)
}
.logo{display:flex;align-items:center;gap:12px}
.logo>span,.admin-logo{
  width:45px;height:45px;border-radius:14px;
  display:grid;place-items:center;
  font-size:25px;font-weight:900;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#161008;
  box-shadow:0 0 28px rgba(255,190,40,.22)
}
.logo div{display:flex;flex-direction:column}
.logo small{color:var(--muted);margin-top:3px}
nav{display:flex;align-items:center;gap:22px}
nav a:hover{color:var(--gold)}
.login,.buy{
  border:0;border-radius:12px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#151009;
  padding:13px 20px;
  font-weight:900;
  cursor:pointer;
  display:inline-block;
  text-align:center
}
.hero{
  max-width:1400px;
  margin:0 auto;
  padding:75px 5vw 50px;
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:50px;
  align-items:center
}
.hero h1{
  margin:10px 0;
  font-size:clamp(40px,6vw,78px);
  line-height:.95;
  max-width:850px
}
.hero p{max-width:720px;color:var(--muted);font-size:19px;line-height:1.6}
.eyebrow{color:var(--gold);font-weight:900;letter-spacing:2px}
.wallet,.account-card{
  border:1px solid #3b321f;
  background:linear-gradient(145deg,#1c1b1a,#111722);
  padding:28px;
  border-radius:22px;
  box-shadow:0 18px 60px rgba(0,0,0,.25)
}
.wallet{display:flex;flex-direction:column;gap:10px}
.wallet strong{font-size:38px;color:var(--gold)}
.wallet small{color:var(--muted)}
.wallet a{color:var(--gold);font-weight:800}
.container{max-width:1400px;margin:0 auto;padding:20px 5vw 80px}
.categories{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.categories a{
  padding:10px 16px;border:1px solid var(--line);
  border-radius:999px;color:var(--muted);background:var(--panel)
}
.categories a.active{background:var(--gold);color:#151009;border-color:var(--gold);font-weight:900}
.products{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(275px,1fr));
  gap:22px
}
.product{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  transition:.2s transform,.2s border
}
.product:hover{transform:translateY(-4px);border-color:#5b6578}
.product-image{height:245px;background:#0c1018;display:grid;place-items:center;overflow:hidden}
.product-image img{width:100%;height:100%;object-fit:cover}
.placeholder{font-size:75px}
.product-body{padding:20px}
.product-body>small{color:var(--purple);font-weight:800}
.product-body h2{margin:8px 0 9px}
.product-body p{color:var(--muted);line-height:1.45;min-height:58px}
.product-meta{display:flex;justify-content:space-between;align-items:center;margin:18px 0}
.product-meta strong{font-size:20px;color:var(--gold)}
.product-meta span{font-size:13px;color:var(--muted)}
.buy{width:100%;font-size:14px}
.buy.disabled{background:#323a47;color:#798395;cursor:not-allowed}
.featured{
  position:absolute;top:12px;left:12px;z-index:3;
  background:var(--gold);color:#151009;
  padding:7px 10px;border-radius:8px;font-size:11px;font-weight:900
}
.alert{padding:14px 18px;border-radius:12px;margin-bottom:20px}
.alert.success{background:rgba(49,217,139,.13);border:1px solid rgba(49,217,139,.35);color:#7cf0b8}
.alert.error{background:rgba(255,95,103,.13);border:1px solid rgba(255,95,103,.35);color:#ff9aa0}
.closed{padding:18px;border:1px solid var(--red);border-radius:12px;margin-bottom:20px;background:rgba(255,95,103,.08)}
.empty{padding:50px;border:1px dashed var(--line);border-radius:18px;color:var(--muted)}
footer{text-align:center;color:var(--muted);padding:40px;border-top:1px solid var(--line)}
.account-page{padding-top:50px}
.account-card{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.account-card h1{margin:6px 0}
.big-balance{text-align:right;display:flex;flex-direction:column}
.big-balance strong{font-size:36px;color:var(--gold)}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px;
  margin-bottom:25px
}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:750px}
th,td{padding:13px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--muted);font-size:12px;text-transform:uppercase}
.status{background:#232e3f;padding:6px 9px;border-radius:8px}
.login-page{display:grid;place-items:center;padding:25px}
.login-card{
  width:min(430px,100%);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  padding:35px;
  text-align:center
}
.admin-logo{margin:0 auto}
input,textarea,select{
  width:100%;
  border:1px solid var(--line);
  background:#0c1119;
  color:var(--text);
  padding:12px;
  border-radius:10px;
  font:inherit
}
textarea{min-height:90px;resize:vertical}
.login-card input{margin:20px 0 12px}
.admin-page{padding-top:35px}
.admin-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-bottom:25px
}
.admin-stats article{
  background:var(--panel);border:1px solid var(--line);
  padding:20px;border-radius:15px;display:flex;flex-direction:column
}
.admin-stats small{color:var(--muted)}
.admin-stats strong{font-size:25px;margin-top:6px}
.product-form{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.product-form textarea,.product-form .check,.product-form .buy{grid-column:span 2}
.check{display:flex;align-items:center;gap:8px;color:var(--muted)}
.check input{width:auto}
.admin-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:15px}
.admin-product{
  border:1px solid var(--line);
  border-radius:15px;padding:15px;background:var(--panel2)
}
.admin-product form{display:grid;gap:8px;margin-top:10px}
.mini-image{height:130px;border-radius:10px;background:#0c1119;display:grid;place-items:center;font-size:40px;overflow:hidden}
.mini-image img{width:100%;height:100%;object-fit:cover}
.inline{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.small-action,.danger-action,.link-button{
  border:0;border-radius:8px;padding:9px 11px;font-weight:800;cursor:pointer
}
.small-action{background:#34405a;color:white}
.danger-action{background:#7f2930;color:#ffdadd}
.link-button{background:transparent;color:white}
.inline-form{display:flex;gap:5px;margin-bottom:6px}
.inline-form select{min-width:120px}
@media(max-width:850px){
  .header{height:auto;padding:15px 5vw;align-items:flex-start;gap:12px}
  nav{gap:12px;flex-wrap:wrap;justify-content:flex-end}
  .hero{grid-template-columns:1fr;padding-top:45px}
  .hero h1{font-size:48px}
  .account-card{flex-direction:column;align-items:flex-start;gap:25px}
  .big-balance{text-align:left}
  .admin-stats{grid-template-columns:1fr 1fr}
  .product-form{grid-template-columns:1fr}
  .product-form textarea,.product-form .check,.product-form .buy{grid-column:span 1}
}
