:root{
  --bg:#f6f8fc; --panel:#ffffff; --text:#0b1221; --muted:#6c7a91; --border:#e3e8f1;
  --primary:#2563eb; --primary-2:#1d4ed8; --accent:#0ea5e9; --success:#16a34a; --danger:#dc2626;
}
html[data-theme="dark"]{
  --bg:#0f1420; --panel:#161c2a; --text:#e6ebff; --muted:#9aa7bd; --border:#253150;
  --primary:#4aa8ff; --primary-2:#2e94ff; --accent:#7cc7ff; --success:#53d769; --danger:#ff6b6b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  display:grid; grid-template-columns:80px 1fr ; gap:20px; padding:20px; min-height:100vh;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Inter,Arial,sans-serif;
}
a{color:inherit; text-decoration:none}
button,input,select{font:inherit; color:inherit}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:16px}

.sidebar{padding:16px 0; display:flex; flex-direction:column; align-items:center; gap:12px}
.sidebar .logo{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--accent)); color:#00122a}
.nav-btn{width:52px;height:52px;border-radius:14px;border:1px solid var(--border); background:transparent;
  color:var(--muted); display:grid;place-items:center; font-size:20px; cursor:pointer; transition:.2s}
.nav-btn:hover,.nav-btn.active{background:color-mix(in oklab, var(--panel) 60%, var(--primary) 40%); color:var(--text)}
.nav-bottom{margin-top:auto}

.header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px}
.header .title{font-weight:800; letter-spacing:.2px}
.badge{background:color-mix(in oklab, var(--panel) 60%, var(--primary) 40%); color:var(--text);
  padding:2px 10px;border-radius:999px; font-size:12px; font-weight:700; margin-left:6px}
.search input{width:100%; max-width:480px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:transparent}
.user{display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px; border-radius:999px; background:color-mix(in oklab, var(--panel) 50%, var(--border) 50%);
  display:grid;place-items:center; font-weight:700}

.tabbar{display:flex; gap:8px; padding:8px 12px}
.tab{padding:8px 12px;border-radius:10px;border:1px solid var(--border); color:var(--muted); cursor:pointer; background:transparent}
.tab.active{color:var(--text); background:color-mix(in oklab, var(--panel) 70%, var(--primary) 30%)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px}
.card{border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--panel); display:flex; flex-direction:column}
.card .img{height:130px; background:color-mix(in oklab, var(--panel) 60%, var(--border) 40%); display:grid; place-items:center}
.card .img img{width:100%;height:100%;object-fit:cover}
.card .body{padding:12px; display:flex; flex-direction:column; gap:6px}
.price{font-weight:800; color:var(--primary)}

.btn{padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:transparent; cursor:pointer; font-weight:600}
.btn.primary{background:var(--primary); border-color:var(--primary-2); color:#fff}
.btn.danger{background:color-mix(in oklab, var(--danger) 80%, #000 20%); border-color:var(--danger); color:#fff}
.btn.ghost{background:transparent}


.qty-controls{display:flex; align-items:center; gap:6px}
.qty-btn{width:28px;height:28px;border-radius:8px;border:1px solid var(--border); background:transparent; font-weight:700}
.totals{border:1px solid var(--border); border-radius:12px; padding:12px; display:grid; gap:8px}
.totals .row{display:flex; justify-content:space-between; align-items:center; gap:10px}
.input{width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:transparent}
.alert{padding:12px;border-radius:10px; font-weight:700}
.alert.success{background:color-mix(in oklab, var(--success) 30%, var(--panel) 70%); color:#062b0c}
.alert.error{background:color-mix(in oklab, var(--danger) 35%, var(--panel) 65%); color:#fff}

.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:9999}
.modal-backdrop.show{display:flex}
.modal{background:var(--panel); border:1px solid var(--border); border-radius:14px; width:95%; max-width:520px; padding:16px}
.modal .row{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0}
.modal .col{flex:1 1 48%}

main.main{overflow:auto; display:flex; flex-direction:column; gap:12px; padding:16px}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.kpi{padding:14px;border:1px solid var(--border);border-radius:12px; background:var(--panel)}
.kpi .v{font-weight:800; font-size:1.3rem}

.table{width:100%; border-collapse:collapse; border-spacing:0; background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left}
.table th{background:color-mix(in oklab, var(--panel) 70%, var(--border) 30%); color:var(--muted); font-weight:700}

.theme-toggle{display:inline-flex; align-items:center; gap:10px; border:1px solid var(--border); padding:6px 10px; border-radius:999px; cursor:pointer}

@media (max-width:1200px){ body{grid-template-columns:80px 1fr} }
@media (max-width:900px){ body{grid-template-columns:1fr; padding:12px} .cart{order:2} .kpis{grid-template-columns:repeat(2,1fr)} .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .grid{grid-template-columns:1fr} .cart-item{grid-template-columns:50px 1fr 120px 70px 36px} }