/* Base */
:root{
  --bg:#070a12; --bg2:#0b1220; --panel:#0f1626;
  --accent:#0a66ff; --bright:#2aa3ff; --muted:#9fb3c8;
  --line:rgba(255,255,255,.08); --shadow:0 20px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial}
body{background:linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);color:#eaf2ff;min-height:100vh}
a{color:#9fd0ff}

/* Nav */
.nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;background:linear-gradient(90deg,var(--accent),#003a8c);box-shadow:var(--shadow)}
.brand-logo{height:28px}
.nav-right{display:flex;gap:.6rem;align-items:center}
.nav-link{color:#fff;text-decoration:none;padding:.35rem .55rem;border-radius:8px}
.nav-link:hover{background:rgba(255,255,255,.1)}
.cart-btn{background:#0e1524;border:1px solid var(--line);color:#fff;border-radius:10px;padding:.45rem .6rem;cursor:pointer}
#cartCount{background:#152f5e;border:1px solid #274f9a;border-radius:8px;padding:.06rem .35rem;margin-left:.35rem}

/* Hero */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:42vh;border-bottom:1px solid var(--line)}
.hero .container{position:relative;z-index:2;text-align:center;padding:1.2rem}
.hero h1{font-size:2.2rem;margin-bottom:.4rem}
.lead{color:var(--muted);margin:.4rem 0 1rem}
.bg-layers .glow{position:absolute;filter:blur(70px);opacity:.35;mix-blend:screen}
.bg-layers .g1{width:44vw;height:44vw;background:radial-gradient(circle at 30% 40%, rgba(35,140,255,.9), transparent 60%);top:-20%;left:-10%}
.bg-layers .g2{width:44vw;height:44vw;background:radial-gradient(circle at 70% 60%, rgba(0,207,255,.8), transparent 60%);bottom:-20%;right:-10%}
.bg-layers .grid{position:absolute;inset:auto 0 0 0;height:45%;background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);background-size:40px 40px;transform:perspective(700px) rotateX(55deg);transform-origin:bottom;box-shadow:inset 0 30px 60px rgba(0,0,0,.5)}
.btn{background:transparent;border:1px solid var(--line);padding:.65rem 1rem;border-radius:12px;color:#fff;text-decoration:none;cursor:pointer;font-weight:700}
.btn-primary{background:linear-gradient(90deg,#0a66ff,#00a0ff);border:none;box-shadow:0 12px 42px rgba(10,102,255,.28)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* Toolbar */
.container{max-width:1200px;margin:0 auto;padding:1.2rem}
.toolbar{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:1rem}
.search-wrap{flex:1;min-width:240px}
.search-wrap input{width:100%;padding:.8rem 1rem;border-radius:12px;border:1px solid var(--line);background:#0b1322;color:#eaf2ff}

/* Products */
.grid-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:.8rem}
.card{background:linear-gradient(180deg,#0f182b,#0b1220);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:1rem;display:flex;flex-direction:column;gap:.75rem;position:relative}
.card .thumb{border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:#0a1020}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:1.1rem}
.muted{color:var(--muted)}
.price{color:#88c4ff;font-weight:800}
.card-actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* Modal */
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog{border:none}
.modal{background:#0f1526;color:#eaf2ff;max-width:920px;width:92vw;border-radius:16px;padding:1rem;display:grid;grid-template-columns:340px 1fr;gap:1rem}
.modal-media img{border-radius:12px}
.modal-actions{margin-top:1rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.modal-close{position:absolute;top:.6rem;right:.6rem;border:none;background:#0d1117;border:1px solid var(--line);color:#d7e3ff;border-radius:10px;padding:.35rem .55rem;cursor:pointer}

/* Cart Panel */
.cart-panel{position:fixed;top:0;right:-420px;width:380px;max-width:92vw;height:100%;background:#0f1626;color:#eaf2ff;border-left:1px solid var(--line);box-shadow:var(--shadow);transition:right .25s ease-in-out;display:flex;flex-direction:column;z-index:80}
.cart-panel.open{right:0}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--line)}
.cart-items{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem}
.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:.6rem;align-items:center;background:#0c1422;border:1px solid var(--line);border-radius:12px;padding:.5rem}
.cart-item img{width:64px;height:48px;object-fit:cover;border-radius:8px}
.cart-item .title{font-weight:700}
.cart-item .row{display:flex;gap:.5rem;align-items:center}
.cart-foot{border-top:1px solid var(--line);padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.cart-summary{display:flex;justify-content:space-between;align-items:center;margin-top:.3rem}
.icon{background:#0e1524;border:1px solid var(--line);color:#fff;border-radius:10px;padding:.35rem .6rem;cursor:pointer}
.terms{font-size:.9rem}
.terms a{color:#9fd0ff;text-decoration:underline}
.input{width:100%;padding:.6rem .8rem;border:1px solid var(--line);background:#0b1322;color:#eaf2ff;border-radius:10px}

/* Paybox */
.paybox{background:#0f1526;color:#eaf2ff;max-width:440px;width:92vw;border-radius:16px;padding:1rem;text-align:center;position:relative}
.paybox .qr{width:280px;height:auto;margin:1rem auto;border-radius:12px;border:1px solid var(--line)}

/* Legal pages */
.legal{max-width:900px}
.legal h1{margin-bottom:.6rem}
.legal h2{margin-top:1.2rem;margin-bottom:.4rem}
.legal p,.legal li{color:#cfe3ff}
.footer{padding:2rem;text-align:center;color:#9fb3c8;border-top:1px solid var(--line);margin-top:2rem}