:root{
  --bg:#0b1220;
  --card:#121a2b;
  --text:#e8eefc;
  --muted:#a9b6d7;
  --accent:#4da3ff;
  --accent-2:#66e3a9;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  background: linear-gradient(180deg, var(--bg), #0f1730 60%, #0b1220);
  color:var(--text);
}
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(10,16,30,.5);backdrop-filter:saturate(140%) blur(6px);
  position:sticky;top:0;z-index:10;
}
.brand{display:flex;gap:12px;align-items:center}

.brand .logo {
  width: 348px;      /* adjust size as needed was 48px*/
  height: 348px;
  border-radius: 8px;
  object-fit: contain;
}

.brand h1{margin:0;font-size:18px;letter-spacing:.3px}
.nav a{
  color:var(--muted);text-decoration:none;margin-left:16px;padding:8px 12px;border-radius:10px;
}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.06);color:var(--text)}
.container{max-width:960px;margin:0 auto;padding:28px 20px}
.card{
  background:var(--card);border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.hero{display:grid;gap:16px;text-align:center;margin-top:14px}
.hero h2{font-size:28px;margin:0 0 6px}
.hero p{color:var(--muted);margin:0}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.product{
  border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;background:rgba(255,255,255,.03);
}
.product img{width:100%;height:150px;object-fit:cover;border-radius:12px;margin-bottom:10px}
input,select,button,textarea{
  width:100%;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:#0c1426;color:var(--text);outline:none
}
label{display:block;margin:10px 0 6px;color:#c9d6f3}
button{
  background:linear-gradient(90deg,var(--accent),#5de0e6);border:0;cursor:pointer;font-weight:600
}
button:hover{filter:brightness(1.05)}
.footer{color:var(--muted);text-align:center;padding:40px 0}
small.muted{color:var(--muted)}
.success{color:var(--accent-2)}
.error{color:#ff7b7b}
.hidden{display:none}