/* styles.css — Red Dark Aesthetic + Neon glow */
:root{
  --bg:#0b0b0d;
  --panel:#120707;
  --card:#160909;
  --accent:#ff2a2a;
  --muted:#b7b7b7;
  --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,42,42,0.02), transparent 10%),
              linear-gradient(180deg,#080708 0%, #0f0d0e 100%);
  color:#fff;
  -webkit-font-smoothing:antialiased;
}
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 28px;
  background: linear-gradient(90deg, rgba(255,42,42,0.03), transparent 30%);
  border-bottom: 1px solid rgba(255,42,42,0.04);
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(4px);
}
.brand{
  display:flex;
  gap:14px;
  align-items:center;
}
.logo{
  width:46px;height:46px;border-radius:8px;background:linear-gradient(135deg,#2b0000,#5a0000);
  box-shadow:0 6px 20px rgba(255,42,42,0.06), inset 0 -6px 20px rgba(0,0,0,0.6);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;
}
.site-title{
  font-size:18px;font-weight:700;color:var(--accent);text-shadow:0 0 12px rgba(255,42,42,0.12);
}
.nav{
  display:flex;gap:14px;align-items:center;
}
.nav a{
  color:var(--muted);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:8px;
  transition:0.18s;
}
.nav a:hover{ color:#fff; background: rgba(255,255,255,0.02); box-shadow:0 6px 18px rgba(255,42,42,0.03) }

/* Owner button slot (appears only if owner) */
#ownerButton{
  display:none; /* shown by JS after Alt+X correct code */
  background: linear-gradient(90deg,var(--accent), #ff6b6b);
  color:#000;
  padding:8px 12px;border-radius:10px;font-weight:800;border:none;cursor:pointer;
  box-shadow: 0 6px 20px rgba(255,42,42,0.18);
}

/* page container */
.container{ max-width:1100px;margin:34px auto;padding:0 20px }

/* cards grid */
.grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:20px; }

/* product card */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border-radius:12px; padding:18px; border:1px solid rgba(255,42,42,0.03);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(255,42,42,0.06);
}
.card .thumb{
  height:130px;border-radius:8px;background:#210606;margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;
  box-shadow: inset 0 -6px 20px rgba(0,0,0,0.6);
}
.price{ color:var(--accent); font-weight:800; font-size:18px }

/* action buttons */
.btn{
  display:inline-block;padding:10px 14px;border-radius:10px;background:var(--accent);
  color:#000;font-weight:800;text-decoration:none;border:none;cursor:pointer;margin-top:10px;
  transition: transform .14s, filter .14s;
}
.btn:hover{ transform:translateY(-3px); filter:brightness(1.05) }

/* cart bubble fixed */
#cartBubble{
  position:fixed; right:18px; top:18px; z-index:60;
  background:linear-gradient(90deg,var(--accent),#ff7b7b);
  color:#000; padding:10px 14px;border-radius:12px;font-weight:800; cursor:pointer;
  box-shadow:0 8px 30px rgba(255,42,42,0.12)
}

/* cart panel */
#cartPanel{
  position:fixed; right:18px; top:72px; width:300px; max-height:60vh; overflow:auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius:12px;padding:14px;border:1px solid rgba(255,42,42,0.03); display:none;
  box-shadow:0 20px 40px rgba(0,0,0,0.6);
}

/* owner panel modal */
#scapePanel{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:760px; max-width:94%; background:var(--panel); padding:18px; border-radius:12px;
  border:1px solid rgba(255,42,42,0.06); display:none; z-index:200;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
#scapePanel h3{ margin:6px 0 12px 0; color:var(--accent) }

/* forms and inputs */
.field{ display:block; width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.04);
       background: rgba(255,255,255,0.01); color:#fff; margin-bottom:10px; }

/* small utilities */
.row{ display:flex; gap:10px; align-items:center; }
.kv{ font-weight:700; color:var(--muted); }
.small{ font-size:13px; color:var(--muted) }

/* floating support chat */
#supportToggle{ position:fixed; right:18px; bottom:18px; z-index:60; background:#1b0000; color:#fff;
  padding:10px;border-radius:50%; box-shadow:0 10px 30px rgba(0,0,0,0.6); cursor:pointer; border:1px solid rgba(255,42,42,0.08) }
#supportPanel{ position:fixed; right:18px; bottom:72px; width:320px; max-width:92%; background:#140202; border-radius:12px;
  padding:12px; display:none; box-shadow:0 30px 60px rgba(0,0,0,0.6); }

/* neon effect on headings */
h2 { color:#fff; text-shadow: 0 6px 30px rgba(255,42,42,0.06) }

/* responsiveness */
@media(max-width:720px){
  header{ padding:12px }
  .site-title{ font-size:15px }
  #scapePanel{ width:94%; left:50%; top:50% }
  #cartPanel{ right:12px; width:85vw }
}