:root{--bg:#f4f6fb;--card:#fff;--muted:#6b7280;--accent:linear-gradient(90deg,#6366f1,#06b6d4);--primary:#4f46e5;--accent2:#06b6d4;--glass:#fff9}.appRoot.dark{--bg:#0b1220;--card:#0f1724;--muted:#99a3b3;--primary:#8b5cf6;color:#dbeafe}*{box-sizing:border-box}body,html,#root{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}.appRoot{background:var(--bg);min-height:100vh;padding:18px}.layout{grid-template-columns:240px 1fr 380px;align-items:start;gap:18px;max-width:1300px;margin:0 auto;display:grid}.sidebar{background:var(--card);border-radius:12px;flex-direction:column;justify-content:space-between;height:calc(100vh - 36px);padding:18px;display:flex;box-shadow:0 6px 24px #0f172a0f}.brand .logo{font-size:20px;font-weight:800}.brand .logo span{color:var(--accent2);margin-left:6px}.subtitle{color:var(--muted);margin-top:4px;font-size:12px}.nav{flex-direction:column;gap:8px;margin-top:18px;display:flex}.navItem{text-align:left;cursor:pointer;color:var(--muted);background:0 0;border:none;border-radius:8px;padding:10px 12px;font-weight:600}.navItem.active,.navItem:hover{color:var(--primary);background:linear-gradient(90deg,#eef2ff,#f0fdff)}.sideFooter{margin-top:16px}.switch{width:46px;height:26px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background:#ccc;border-radius:34px;transition:all .3s;position:absolute;inset:0}.slider:before{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:all .3s;position:absolute;top:4px;left:4px}.switch input:checked+.slider{background:var(--primary)}.switch input:checked+.slider:before{transform:translate(20px)}.main{background:0 0;padding:0}.topbar{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.searchWrap input{border:1px solid #0f172a0f;border-radius:10px;width:520px;padding:10px 12px}.topActions{align-items:center;gap:12px;display:flex}.chip{color:var(--primary);background:#6366f11f;border-radius:999px;padding:8px 12px;font-weight:600}.user{align-items:center;gap:8px;display:flex}.avatar{color:#fff;background:linear-gradient(90deg,#7c3aed,#4f46e5);border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-weight:700;display:flex}.uname{color:var(--muted);font-weight:600}.content{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 6px 18px #0f172a0a}.controls{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.filters{gap:8px;display:flex}.tag{cursor:pointer;color:var(--muted);background:0 0;border:1px solid #0f172a0a;border-radius:999px;padding:8px 12px}.tag.active{color:var(--primary);background:linear-gradient(90deg,#eef2ff,#f0fdff);border:none;font-weight:700}.grid{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.productCard{background:var(--card);border:1px solid #0f172a08;border-radius:12px;align-items:center;gap:14px;padding:14px;display:flex;box-shadow:0 8px 30px #0206170a}.thumb{cursor:pointer;border-radius:10px;flex-shrink:0;width:86px;height:86px}.pinfo{flex:1}.pname{font-weight:700}.ptag{color:var(--muted);margin-top:6px;font-size:12px}.pprice{color:var(--primary);margin-top:8px;font-weight:700}.paction{flex-direction:column;gap:8px;display:flex}.btnPrimary{color:#fff;cursor:pointer;background:linear-gradient(90deg,#4f46e5,#06b6d4);border:none;border-radius:10px;padding:8px 12px;font-weight:700}.btnSecondary{cursor:pointer;background:0 0;border:1px solid #0f172a0f;border-radius:10px;padding:8px 12px}.cartCard{background:var(--card);border-radius:12px;padding:14px;position:sticky;top:18px;box-shadow:0 10px 30px #0206170f}.cartHeader{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.muted{color:var(--muted)}.cartList{max-height:52vh;margin-bottom:12px;overflow:auto}.empty{color:var(--muted);text-align:center;padding:12px}.cartItem{background:#0f172a05;border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px;display:flex}.cLeft .cName{font-weight:700}.cPrice{color:var(--muted);font-size:13px}.qty button{cursor:pointer;background:0 0;border:1px solid #0f172a0f;border-radius:8px;width:28px;height:28px}.qnum{padding:0 8px}.cartFooter{border-top:1px dashed #0f172a0a;padding-top:12px}.totRow{justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:800;display:flex}.cartBtns{gap:8px;display:flex}.btnGhost{cursor:pointer;background:0 0;border:1px solid #0f172a0f;border-radius:10px;padding:10px}.btnAccent{color:#fff;cursor:pointer;background:linear-gradient(90deg,#06b6d4,#4f46e5);border:none;border-radius:10px;padding:10px}.modalBackdrop{z-index:60;background:#02061773;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modalCard{background:var(--card);border-radius:12px;width:720px;max-width:94%;padding:18px;box-shadow:0 18px 40px #02061780}.modalHead{align-items:center;gap:16px;display:flex}.thumbLarge{border-radius:12px;width:120px;height:120px}.priceLarge{color:var(--primary);margin-top:8px;font-weight:800}.desc{color:var(--muted);margin-top:12px}.modalActions{justify-content:flex-end;gap:8px;margin-top:14px;display:flex}.toast{color:#fff;background:linear-gradient(90deg,#161616,#2b2b2b);border-radius:10px;padding:10px 14px;position:fixed;bottom:28px;right:28px;box-shadow:0 12px 36px #02061799}@media (max-width:1000px){.layout{grid-template-columns:1fr;padding:12px}.cartBar{order:3}.sidebar{display:none}.grid{grid-template-columns:repeat(1,1fr)}.searchWrap input{width:100%}}