*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
body{background:#0f172a;color:#e5e7eb}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

.hdr{position:sticky;top:0;background:rgba(2,6,23,.7);backdrop-filter:blur(8px);border-bottom:1px solid #1f2937}
.logo{color:#fff;text-decoration:none;font-weight:700;font-size:20px;margin-right:16px}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
nav a,nav span{color:#cbd5e1;margin-left:12px;text-decoration:none}
nav a:hover{color:#fff}

.hero{background:linear-gradient(90deg,#1d4ed8,#06b6d4);color:#fff}
.hero .wrap{padding:28px 16px}

.title{font-size:22px;margin:16px 0}

.row{display:flex;gap:8px;align-items:center}
.col{display:flex;flex-direction:column;gap:8px}
.grow{flex:1}
.mt{margin-top:12px}
.mb{margin-bottom:12px}

.input{background:#0b1220;border:1px solid #334155;color:#e5e7eb;padding:10px;border-radius:10px;outline:none}
.input::placeholder{color:#728db1}
.btn{background:#22d3ee;border:none;color:#0f172a;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border:1px solid #334155;color:#e5e7eb}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{background:#111827;border:1px solid #1f2937;border-radius:18px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.card img{width:100%;height:140px;object-fit:cover;background:#0b1220}
.card .p{padding:12px}
.badge{display:inline-block;background:#1d4ed8;color:#fff;padding:3px 8px;border-radius:999px;font-size:12px}
.price{font-weight:800;margin:6px 0}
.muted{color:#9ca3af}
.bold{font-weight:700}

.cart .cart-row{display:flex;align-items:center;gap:12px;padding:10px;border-bottom:1px solid #1f2937}
.cart .cart-row img{width:80px;height:50px;object-fit:cover;border-radius:8px;background:#0b1220}
.total{margin-top:10px;font-size:18px}

.tbl{width:100%;border-collapse:collapse;margin-top:12px}
.tbl th,.tbl td{border-bottom:1px solid #1f2937;padding:8px;text-align:left}
.tbl th{color:#9ca3af}

.panel{position:fixed;right:16px;bottom:16px;max-width:360px;background:#0b1220;border:1px solid #334155;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);}
.panel__inner{padding:12px}
.panel__close{float:right;background:transparent;border:1px solid #334155;color:#e5e7eb;border-radius:8px;padding:4px 8px;cursor:pointer}

.ftr{border-top:1px solid #1f2937;margin-top:24px; text-align: center;
  padding: 12px 0; }
.ftr .wrap{padding:20px 16px;color:#94a3b8}

.err{background:#7f1d1d;color:#fecaca;border:1px solid #ef4444;padding:10px;border-radius:10px}
.ok{background:#052e16;color:#bbf7d0;border:1px solid #22c55e;padding:10px;border-radius:10px}

.form .input{width:100%}
@media (max-width:640px){ .row{flex-wrap:wrap} }