:root{
  --bg:#FAFAFC; --bg-raised:#FFFFFF; --bg-raised-2:#F1F1F6; --line:#E7E7EF;
  --text:#18181B; --text-dim:#6B6B76; --amber:#8F00FF; --amber-dim:#EDE6FF;
  --primary:#2200FF; --secondary:#5B00FF; --accent2:#8F00FF; --highlight:#C72DFF;
  --green-led:#16A34A; --red:#DC2626;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--text); font-family:'Vazirmatn',sans-serif; line-height:1.8;}
.mono{font-family:'JetBrains Mono','Vazirmatn',monospace;}
a{color:inherit; text-decoration:none;}
button,input,select{font-family:inherit;}

/* topbar + mega menu */
.topbar{display:flex; align-items:center; gap:24px; padding:16px 5vw; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); z-index:100;}
.brand{display:flex; align-items:center; gap:9px; font-weight:900; font-size:18px;}
.brand .dot{width:8px; height:8px; border-radius:50%; background:var(--green-led); box-shadow:0 0 8px var(--green-led); animation:blink 2.4s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
.cat-trigger{position:relative;}
.cat-trigger > span{display:flex; align-items:center; gap:6px; font-size:14px; padding:9px 14px; border:1px solid var(--line); border-radius:8px; cursor:pointer;}
.cat-trigger:hover > span{border-color:var(--amber); color:var(--amber);}
.mega{position:absolute; top:calc(100% + 10px); right:0; width:780px; background:var(--bg-raised); border:1px solid var(--line); border-radius:14px; padding:26px; display:none; grid-template-columns:repeat(4,1fr); gap:22px; box-shadow:0 20px 50px -12px rgba(18,24,31,.16);}
.cat-trigger:hover .mega{display:grid;}
.mega-col h5{font-size:12px; color:var(--amber); font-weight:700; margin-bottom:12px;}
.mega-col a{display:block; font-size:13px; color:var(--text-dim); padding:6px 0;}
.mega-col a:hover{color:var(--text);}
.search-bar{flex:1; max-width:360px; background:var(--bg-raised-2); border:1px solid var(--line); border-radius:8px; padding:9px 14px; font-size:13px; color:var(--text-dim);}
.top-actions{display:flex; align-items:center; gap:14px; font-size:13px; margin-right:auto;}
.cart-btn{background:linear-gradient(120deg, var(--primary), var(--highlight)); color:#FFFFFF; padding:8px 16px; border-radius:6px; font-weight:700; border:none; cursor:pointer;}

.crumb{font-size:12.5px; color:var(--text-dim); margin:26px 5vw 0;}
.crumb span{color:var(--amber);}

/* buttons (shared) */
.btn-primary{background:linear-gradient(120deg, var(--primary), var(--highlight)); color:#FFFFFF; padding:14px 28px; border-radius:8px; font-weight:700; font-size:15px; border:none; cursor:pointer;}
.btn-ghost{border:1px solid var(--line); padding:14px 28px; border-radius:8px; font-weight:600; font-size:15px; color:var(--text); background:transparent; cursor:pointer;}
.btn-ghost:hover{border-color:var(--amber); color:var(--amber);}

/* product cards (shared across landing / shop / related) */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.prod-card{background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, box-shadow .2s, transform .2s; box-shadow:0 1px 2px rgba(18,24,31,.04);}
.prod-card:hover{border-color:var(--amber-dim); box-shadow:0 12px 24px -8px rgba(18,24,31,.1); transform:translateY(-3px);}
.prod-visual{height:130px; background:var(--bg-raised-2); display:flex; align-items:center; justify-content:center; position:relative; border-bottom:1px solid var(--line);}
.prod-visual img{width:100%; height:100%; object-fit:contain; background:#FFFFFF; padding:10px; border-radius:0;}
.prod-visual .chip{width:78%; height:42px; background:var(--bg-raised); border:1px solid var(--line); border-radius:6px; display:flex; align-items:center; gap:7px; padding:0 12px;}
.prod-visual .port{width:5px; height:12px; background:#CBD2D9; border-radius:1px;}
.prod-visual .port.on{background:var(--green-led); box-shadow:0 0 5px var(--green-led);}
.prod-badge{position:absolute; top:9px; left:9px; background:var(--amber); color:#FFFFFF; font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:4px;}
.prod-badge.out{background:var(--bg-raised); color:var(--text-dim); border:1px solid var(--line);}
.prod-body{padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.prod-brand{font-family:'JetBrains Mono','Vazirmatn',monospace; font-size:10px; color:var(--amber); letter-spacing:1px;}
.prod-title{font-size:13.5px; font-weight:700; line-height:1.5; min-height:40px;}
.wholesale-note{font-family:'JetBrains Mono','Vazirmatn',monospace; font-size:10px; color:var(--text-dim); border-top:1px dashed var(--line); padding-top:6px;}
.wholesale-note b{color:var(--amber);}
.prod-footer{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px;}
.price{font-weight:800; font-size:14.5px;}
.price small{font-size:10.5px; color:var(--text-dim); font-weight:400;}
.add-btn{background:var(--bg-raised-2); border:1px solid var(--line); border-radius:6px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:var(--amber); font-size:17px; cursor:pointer;}
.add-btn:hover{border-color:var(--amber);}

/* forms (auth, checkout) */
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:7px;}
.field input{width:100%; background:var(--bg-raised-2); border:1px solid var(--line); border-radius:8px; padding:12px 14px; color:var(--text); font-size:14px;}
.field input:focus{outline:none; border-color:var(--amber);}
.btn-full{width:100%; background:linear-gradient(120deg, var(--primary), var(--highlight)); color:#FFFFFF; border:none; padding:13px; border-radius:8px; font-weight:800; font-size:14.5px; margin-top:6px; cursor:pointer;}

/* tables (account / admin) */
table.data-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.data-table th{text-align:right; color:var(--text-dim); font-size:11.5px; font-family:'JetBrains Mono','Vazirmatn',monospace; font-weight:500; padding:10px 8px; border-bottom:1px solid var(--line);}
table.data-table td{padding:14px 8px; border-bottom:1px solid var(--line);}
.pill{font-family:'JetBrains Mono','Vazirmatn',monospace; font-size:10.5px; padding:3px 9px; border-radius:20px;}
.pill.ok{background:rgba(22,163,74,.1); color:var(--green-led);}
.pill.warn{background:rgba(193,117,26,.1); color:var(--amber);}
.pill.bad{background:rgba(220,38,38,.1); color:var(--red);}

footer.site-footer{border-top:1px solid var(--line); padding:40px 5vw; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer.site-footer .f-links{display:flex; gap:24px; font-size:13px; color:var(--text-dim);}
footer.site-footer .f-copy{font-family:'JetBrains Mono','Vazirmatn',monospace; font-size:11px; color:var(--text-dim);}

/* admin shell */
.shell{display:grid; grid-template-columns:250px 1fr; min-height:100vh;}
.sidebar{background:var(--bg-raised); border-left:1px solid var(--line); padding:22px 16px; display:flex; flex-direction:column;}
.side-brand{display:flex; align-items:center; gap:9px; font-weight:900; font-size:16px; padding:0 8px 22px; border-bottom:1px solid var(--line); margin-bottom:18px;}
.side-nav{display:flex; flex-direction:column; gap:3px;}
.side-nav a{display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:8px; font-size:13.5px; color:var(--text-dim);}
.side-nav a:hover{background:var(--bg-raised-2);}
.side-nav a.active{background:var(--bg-raised-2); color:var(--amber); font-weight:700;}
.side-nav a .badge{margin-right:auto; background:var(--amber); color:#FFFFFF; font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px; font-family:'JetBrains Mono','Vazirmatn',monospace;}
.main{padding:26px 30px;}
.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px;}
.kpi-card{background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:18px;}
.kpi-card .lbl{font-size:12px; color:var(--text-dim); margin-bottom:10px;}
.kpi-card .val{font-size:22px; font-weight:800; margin-bottom:8px;}
.kpi-card .delta{font-size:11.5px; font-family:'JetBrains Mono','Vazirmatn',monospace;}
.delta.up{color:var(--green-led);} .delta.down{color:var(--red);}
.panel{background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:16px;}
.panel h4{font-size:13.5px; margin-bottom:16px; color:var(--text);}

/* ===== reference-style admin components ===== */
.page-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.page-head h2{font-size:19px; font-weight:900;}
.page-crumb{font-size:12.5px; color:var(--text-dim);}
.page-crumb a{color:var(--amber);}

/* stat card row (coloured rail + icon tile) */
.stat-row{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:18px;}
.stat{background:var(--bg-raised); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; align-items:center; gap:12px; position:relative; overflow:hidden;}
.stat::before{content:''; position:absolute; top:0; bottom:0; right:0; width:4px; background:var(--primary);}
.stat.s2::before{background:#C72DFF;} .stat.s3::before{background:#F5A623;}
.stat.s4::before{background:#16A34A;} .stat.s5::before{background:#00B8D9;}
.stat .tile{width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; background:rgba(34,0,255,.08);}
.stat.s2 .tile{background:rgba(199,45,255,.10);} .stat.s3 .tile{background:rgba(245,166,35,.13);}
.stat.s4 .tile{background:rgba(22,163,74,.10);} .stat.s5 .tile{background:rgba(0,184,217,.10);}
.stat .k{font-size:11.5px; color:var(--text-dim); margin-bottom:4px;}
.stat .v{font-size:18px; font-weight:900; line-height:1.4;}
.stat .d{font-size:11px; margin-top:2px;}
.d.up{color:var(--green-led);} .d.down{color:var(--red);} .d.flat{color:var(--text-dim);}

/* filter toolbar */
.toolbar{background:var(--bg-raised); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.toolbar .search{flex:1; min-width:200px; background:var(--bg-raised-2); border:1px solid var(--line); border-radius:9px; padding:10px 14px; font-size:13px; color:var(--text); font-family:'Vazirmatn';}
.toolbar select, .toolbar .tb-btn{background:var(--bg-raised-2); border:1px solid var(--line); border-radius:9px; padding:10px 14px; font-size:12.5px; color:var(--text); font-family:'Vazirmatn'; cursor:pointer;}
.toolbar .tb-primary{background:linear-gradient(120deg,var(--primary),var(--highlight)); color:#fff; border:none; font-weight:700;}

/* rich table */
.rtable-wrap{background:var(--bg-raised); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.rtable{width:100%; border-collapse:collapse; font-size:13px;}
.rtable th{text-align:right; font-size:11.5px; font-weight:700; color:var(--text-dim); padding:14px 16px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--bg-raised-2);}
.rtable td{padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle;}
.rtable tr:last-child td{border-bottom:none;}
.rtable tbody tr:hover{background:var(--bg-raised-2);}
.cell-media{display:flex; align-items:center; gap:11px; min-width:200px;}
.cell-media .ph{width:46px; height:46px; border-radius:12px; background:var(--bg-raised-2); display:flex; align-items:center; justify-content:center; font-size:19px; overflow:hidden; flex-shrink:0;}
.cell-media .ph img{width:100%; height:100%; object-fit:contain;}
.cell-media .tt{font-size:13px; font-weight:700; line-height:1.6;}
.cell-media .ss{font-size:11.5px; color:var(--text-dim);}
.avatar{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--highlight)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0;}
.tag{display:inline-block; font-size:11px; font-weight:700; padding:4px 11px; border-radius:20px; white-space:nowrap;}
.tag.green{background:rgba(22,163,74,.10); color:var(--green-led);}
.tag.red{background:rgba(220,38,38,.09); color:var(--red);}
.tag.amber{background:rgba(245,166,35,.14); color:#A96D12;}
.tag.violet{background:rgba(34,0,255,.08); color:var(--primary);}
.tag.grey{background:var(--bg-raised-2); color:var(--text-dim);}
.dot-status{display:inline-flex; align-items:center; gap:6px; font-size:12px;}
.dot-status i{width:7px; height:7px; border-radius:50%; background:currentColor; font-style:normal;}

/* kebab menu */
.kebab{position:relative;}
.kebab > button{background:var(--bg-raised-2); border:1px solid var(--line); border-radius:9px; width:34px; height:34px; cursor:pointer; color:var(--text-dim); font-size:15px;}
.kebab > button:hover{color:var(--amber); border-color:var(--amber);}
.kebab .menu{position:absolute; left:0; top:calc(100% + 6px); background:var(--bg-raised); border:1px solid var(--line); border-radius:11px; box-shadow:0 14px 34px -10px rgba(18,24,31,.18); min-width:150px; padding:6px; display:none; z-index:60;}
.kebab.open .menu{display:block;}
.kebab .menu a, .kebab .menu button{display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px; font-size:12.5px; color:var(--text); background:none; border:none; border-radius:8px; cursor:pointer; font-family:'Vazirmatn'; text-align:right;}
.kebab .menu a:hover, .kebab .menu button:hover{background:var(--bg-raised-2);}
.kebab .menu .danger{color:var(--red);}

.empty-state{text-align:center; padding:44px 16px; color:var(--text-dim); font-size:13px; line-height:2.2;}

@media(max-width:1200px){ .stat-row{grid-template-columns:repeat(3,1fr);} }
@media(max-width:820px){
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .rtable-wrap{overflow-x:auto;}
  .rtable{min-width:760px;}
}
@media(max-width:520px){ .stat-row{grid-template-columns:1fr;} }

@media(max-width:980px){
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .shell{grid-template-columns:1fr;}
  .sidebar{position:sticky; top:0; z-index:90; flex-direction:row; align-items:center; overflow-x:auto; padding:12px 16px; border-left:none; border-bottom:1px solid var(--line);}
  .side-brand{display:none;}
  .side-nav{flex-direction:row; gap:6px;}
  .side-nav a{white-space:nowrap; padding:8px 12px; font-size:12.5px;}
  .side-nav a .badge{margin-right:4px;}
  .sidebar > div:last-child{display:none;}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .main{padding:18px;}
  table.data-table{display:block; overflow-x:auto; white-space:nowrap;}
}

@media(max-width:768px){
  .topbar{flex-wrap:wrap; gap:10px; padding:12px 4vw; row-gap:10px;}
  .brand{font-size:16px; order:1;}
  .top-actions{order:2; margin-right:auto; gap:10px; font-size:12px;}
  .cat-trigger{order:3;}
  .search-bar{order:4; max-width:100%; width:100%;}
  .cart-btn{padding:7px 12px; font-size:12.5px;}
  .crumb{margin:16px 4vw 0; font-size:11.5px;}
  footer.site-footer{flex-direction:column; align-items:flex-start; padding:28px 4vw;}
  footer.site-footer .f-links{flex-wrap:wrap; gap:14px;}
}

@media(max-width:640px){
  .prod-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .prod-visual{height:110px;}
  .prod-title{font-size:12.5px; min-height:36px;}
  .price{font-size:13px;}
  .kpi-row{grid-template-columns:1fr;}
  .btn-primary, .btn-ghost{padding:12px 20px; font-size:14px;}
  .field input{font-size:16px;} /* 16px stops iOS Safari zooming on focus */
}

@media(max-width:420px){
  .prod-grid{grid-template-columns:1fr;}
  .top-actions a:not(:last-child){font-size:11.5px;}
}