:root{--bg:#0f1216;--panel:#171b21;--muted:#99a3b3;--text:#f3f5f7;--primary:#5b8cff;--accent:#4cd4a8;--warning:#f9b84a;--shadow:0 10px 30px rgba(0,0,0,.35);--radius:16px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:radial-gradient(1200px 800px at 20% 0%,#131925 0%,var(--bg) 60%);color:var(--text)}a{color:inherit;text-decoration:none}.container{max-width:1200px;margin:0 auto;padding:20px}.header{position:sticky;top:0;z-index:50;display:flex;gap:12px;align-items:center;padding:12px 20px;background:#171b21d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}.brand{display:flex;align-items:center;gap:10px;font-weight:700}.brand-badge{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:var(--shadow)}.nav{margin-left:auto;display:flex;gap:10px;padding:12px 20px}.search{flex:1;max-width:520px;display:flex;gap:10px;align-items:center;background:#0f141b;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:8px 10px;margin:0 20px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:10px 14px;border-radius:12px;cursor:pointer;background:#242a33;color:var(--text);transition:.12s transform,.2s background}.btn:hover{background:#2b323e}.btn.primary{background:var(--primary);color:#fff}.btn.badge{padding:6px 10px;font-size:12px;opacity:.9}.cart-btn{margin-left:auto}.search input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-size:14px}.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:320px}.card .img{aspect-ratio:4/3;background:#0b0f14;display:grid;place-items:center;position:relative}.card .img img{width:100%;height:100%;object-fit:cover}.deal-pill{position:absolute;top:10px;left:10px;background:var(--warning);color:#111;padding:4px 8px;font-size:12px;border-radius:999px;font-weight:700;box-shadow:var(--shadow)}.card .body{padding:12px;display:grid;gap:6px;grid-auto-rows:min-content}.price{display:flex;align-items:baseline;gap:8px}.price .now{font-weight:800;font-size:18px}.price .old{color:var(--muted);text-decoration:line-through;font-size:13px}.stars{color:#f5c451;font-size:14px;letter-spacing:.5px}.row{display:flex;gap:8px;align-items:center}.split{display:flex;gap:16px}.left{flex:1}.right{width:320px;position:sticky;top:76px;height:fit-content}.panel{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.list{display:grid;gap:10px}.item{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center}.item img{width:64px;height:48px;object-fit:cover;background:#0b0f14;border-radius:8px}.subtotal{display:flex;justify-content:space-between;font-weight:700}.toast{position:fixed;right:16px;bottom:16px;background:#0f141b;border:1px solid rgba(255,255,255,.06);color:var(--text);padding:12px 14px;border-radius:12px;box-shadow:var(--shadow);min-width:220px}.drawer{position:fixed;inset:0 0 0 auto;width:360px;background:var(--panel);transform:translate(100%);transition:transform .25s ease;border-left:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}.drawer.open{transform:translate(0)}.drawer .head{display:flex;justify-content:space-between;padding:14px;border-bottom:1px solid rgba(255,255,255,.06)}.skeleton{background:linear-gradient(90deg,#ffffff0f,#ffffff1f,#ffffff0f);background-size:200% 100%;animation:shine 1.2s infinite;border-radius:12px}@keyframes shine{0%{background-position:200% 0}to{background-position:-200% 0}}