/* ABM look: bright and clean. Lapis blue (Badakhshan), turquoise (Mazar tiles) and saffron (Herat) on a clear, light ground.
   Loaded last: it only changes colours, shapes and shadows of the base styles. */
:root{
  --bg:#f2f7ff; --surface:#ffffff; --surface2:#f6f9ff; --fg:#10203d; --muted:#586a88; --line:#dde7f6;
  --lapis:#1d4ed8; --lapis-deep:#0f2f94; --lapis-bright:#3b82f6; --lapis-ink:#ffffff; --lapis-soft:#e6efff;
  --turq:#0d9488; --turq-soft:#dcf7f3;
  --saffron:#d97706; --saffron-soft:#fff2d4; --gold:#f5a524;
  --ok:#0f8a5f; --ok-soft:#dcf6ea; --warn:#a15c00; --warn-soft:#fff1cf; --danger:#d12c3f; --danger-soft:#ffe6e9;
  --shadow:0 1px 2px rgba(20,60,140,.06),0 8px 22px rgba(30,80,180,.09);
  --grad:linear-gradient(135deg,#1d4ed8 0%,#2f6df0 55%,#0ea5b7 130%);
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M36 6l7.4 12.6 14.4-3.4-3.4 14.4L67 36l-12.6 7.4 3.4 14.4-14.4-3.4L36 66l-7.4-12.6-14.4 3.4 3.4-14.4L5 36l12.6-7.4-3.4-14.4 14.4 3.4z'/%3E%3Ccircle cx='36' cy='36' r='9'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c1426; --surface:#142038; --surface2:#1a2a47; --fg:#eaf1ff; --muted:#9db0cf; --line:#26385c;
  --lapis:#6ea1ff; --lapis-deep:#3b6fd8; --lapis-ink:#07122b; --lapis-soft:#1b2d52; --turq:#35d0c0; --turq-soft:#123a3c;
  --saffron:#ffc15a; --saffron-soft:#3b2c0f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35);
  --grad:linear-gradient(135deg,#2349b8 0%,#2f6df0 60%,#0f9fb0 130%)}}
body{background:linear-gradient(180deg,#e9f2ff 0,var(--bg) 260px) no-repeat,var(--bg);font-weight:400}
:focus-visible{outline:3px solid color-mix(in srgb,var(--lapis-bright) 55%,transparent);outline-offset:2px}

/* top bar and tab bar */
.topbar{background:color-mix(in srgb,#fff 82%,transparent);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .topbar{background:color-mix(in srgb,var(--bg) 85%,transparent)}}
.mark{background:var(--grad);border-radius:12px;box-shadow:0 4px 12px rgba(29,78,216,.35);font-size:12.5px}
.brand b{font-weight:800}
.iconbtn{border-radius:14px;border-color:var(--line);box-shadow:0 1px 2px rgba(30,80,180,.08)}
.pill{background:var(--lapis-soft);border-color:transparent;color:var(--lapis);font-weight:700}
.tabbar{background:color-mix(in srgb,#fff 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(30,80,180,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tabbar{background:color-mix(in srgb,var(--surface) 92%,transparent)}}
.tabbar a{border-radius:14px;margin:0 4px;padding:5px 0 3px;transition:background .15s,color .15s}
.tabbar a[aria-current="page"]{background:var(--lapis-soft);color:var(--lapis)}

/* cards, headings */
.card{border-radius:20px;border-color:color-mix(in srgb,var(--line) 80%,transparent);box-shadow:var(--shadow)}
.card.tint{background:linear-gradient(160deg,var(--lapis-soft),color-mix(in srgb,var(--turq-soft) 55%,var(--lapis-soft)))}
.sec{margin:22px 0 12px}
.sec h2{font-size:17px;font-weight:800;position:relative;padding-inline-start:12px}
.sec h2::before{content:"";position:absolute;inset-block:.35em;inset-inline-start:0;width:4px;border-radius:2px;background:linear-gradient(var(--gold),var(--saffron))}
.sec a{font-weight:700;color:var(--lapis)}
.title{font-weight:800}

/* buttons, fields, chips */
.btn{background:var(--grad);border:0;border-radius:14px;box-shadow:0 6px 16px rgba(29,78,216,.28);font-weight:800;transition:transform .12s,box-shadow .12s}
.btn:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(29,78,216,.25)}
.btn.soft{background:var(--lapis-soft);color:var(--lapis);box-shadow:none}
.btn.ghost{background:transparent;border:1.5px solid color-mix(in srgb,var(--lapis) 40%,transparent);color:var(--lapis);box-shadow:none}
.btn.danger{background:var(--danger);box-shadow:0 6px 16px rgba(209,44,63,.25)}
.btn.ok{background:var(--ok)}
.btn.wa{background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 6px 16px rgba(22,163,74,.28)}
.btn.sm{border-radius:11px}
.inp,select.inp,textarea.inp{border-radius:14px;border:1.5px solid var(--line);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.inp:focus{outline:0;border-color:var(--lapis-bright);box-shadow:0 0 0 4px color-mix(in srgb,var(--lapis-bright) 18%,transparent)}
.field>span{font-weight:600}
.chip{border-radius:999px;border-color:var(--line);background:var(--surface);font-weight:600;box-shadow:0 1px 2px rgba(30,80,180,.06);padding:5px 15px}
.chip.on,.chip[aria-pressed="true"]{background:var(--grad);border-color:transparent;box-shadow:0 4px 12px rgba(29,78,216,.28)}
.seg{border-radius:14px;background:var(--lapis-soft);border-color:transparent}
.seg button[aria-pressed="true"]{border-radius:11px}
.switch input:checked{background:var(--turq)}

/* badges */
.badge.p{background:linear-gradient(135deg,#ffe29a,#ffc247);color:#6b3c00}
.badge.e{background:var(--grad);color:#fff}
.badge.v{background:var(--ok-soft);color:var(--ok)}
.notice{border-radius:16px;background:var(--lapis-soft)}
.status{border-radius:999px;padding:1px 11px}

/* home: hero with a khatam-style star lattice */
.hero{position:relative;margin:8px 0 14px;border-radius:26px;padding:18px 16px 16px;color:#fff;overflow:hidden;
  background:var(--star),var(--grad);background-size:72px 72px,cover;box-shadow:0 14px 30px rgba(29,78,216,.32)}
.hero::after{content:"";position:absolute;inset-inline-end:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,120,.55),transparent 65%)}
.hero h1{position:relative;font-size:21px;font-weight:800;line-height:1.5;margin:0 0 2px}
.hero p{position:relative;margin:0 0 14px;font-size:13.5px;opacity:.92}
.hero .searchbar{position:relative;margin:0;background:#fff;border-radius:18px;padding:5px;box-shadow:0 8px 20px rgba(8,30,100,.25)}
.hero .searchbar .inp{border:0;background:transparent;box-shadow:none;min-height:42px;color:#10203d}
.hero .searchbar .inp:focus{box-shadow:none}
.hero .searchbar .btn{min-height:42px;border-radius:14px;padding:0 16px}
.paths{gap:10px;margin-top:0}
.path{border:0;border-radius:20px;padding:14px 6px 12px;box-shadow:var(--shadow);background:var(--surface);gap:5px}
.path svg{width:30px;height:30px;padding:8px;box-sizing:content-box;border-radius:14px;stroke:var(--lapis);background:var(--lapis-soft)}
.path:nth-child(2) svg{stroke:var(--turq);background:var(--turq-soft)}
.path:nth-child(3) svg{stroke:var(--saffron);background:var(--saffron-soft)}
.path.main{background:var(--grad);box-shadow:0 10px 22px rgba(29,78,216,.32)}
.path.main svg{stroke:#fff;background:rgba(255,255,255,.2)}
.path b{font-size:14px;font-weight:800}

/* products: each category has its own light colour */
.pcard{border:0;border-radius:20px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.pcard:active{transform:scale(.985)}
.pcard .n{font-weight:700}
.thumb{--h:215;background:linear-gradient(145deg,hsl(var(--h) 90% 94%),hsl(var(--h) 85% 87%))}
.thumb svg{stroke:hsl(var(--h) 65% 38%);opacity:1;stroke-width:1.4}
.thumb .tag{box-shadow:0 2px 8px rgba(120,70,0,.25)}
.price{font-size:16px;font-weight:800;color:var(--lapis)}
.varprice{color:var(--saffron);font-weight:800}
.logo{border-radius:16px;background:linear-gradient(145deg,var(--lapis-soft),var(--turq-soft));color:var(--lapis)}
.corow{border:0;border-radius:18px;box-shadow:var(--shadow)}

/* dashboard */
.dtabs{background:linear-gradient(var(--bg) 70%,transparent)}
.dtabs a{border:0;box-shadow:0 1px 3px rgba(30,80,180,.12);font-weight:600}
.dtabs a[aria-current="page"]{background:var(--grad);box-shadow:0 5px 14px rgba(29,78,216,.3)}
.stat{border:0;border-radius:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset-inline-end:-18px;top:-18px;width:64px;height:64px;border-radius:50%;background:var(--lapis-soft);opacity:.8}
.stat>*{position:relative}
.stat b{font-weight:800}
.plancard{border-radius:20px;border-width:2px}
.plancard.sel{background:linear-gradient(160deg,var(--lapis-soft),#fff)}
.role,.langs button{border-radius:18px;box-shadow:var(--shadow);border-color:transparent}
.role[aria-checked="true"]{border-color:var(--lapis-bright)}
.sheet{border-radius:26px 26px 0 0}
.copybox{border-radius:14px;background:var(--lapis-soft);border-color:color-mix(in srgb,var(--lapis) 35%,transparent)}
.empty svg{stroke:color-mix(in srgb,var(--lapis) 35%,var(--line))}
.skel{background:linear-gradient(90deg,#e4eefc,#f6faff,#e4eefc);background-size:200% 100%}
.toast{border-radius:16px;box-shadow:0 10px 30px rgba(8,30,100,.3)}

/* category colours (hue of the thumbnail and its icon) */
[data-c="medicine"]{--h:160}[data-c="vehicles"]{--h:215}[data-c="electronics"]{--h:250}[data-c="machinery"]{--h:30}[data-c="home"]{--h:340}
[data-c="office"]{--h:200}[data-c="food"]{--h:25}[data-c="cleaning"]{--h:185}[data-c="realestate"]{--h:120}[data-c="clothing"]{--h:290}
[data-c="cosmetics"]{--h:325}[data-c="electrical"]{--h:48}[data-c="agri"]{--h:95}[data-c="construction"]{--h:15}[data-c="jewelry"]{--h:42}
[data-c="services"]{--h:230}[data-c="other"]{--h:215}
.catlogo{background:linear-gradient(145deg,hsl(var(--h,215) 90% 94%),hsl(var(--h,215) 85% 86%))!important}
.catlogo svg{stroke:hsl(var(--h,215) 65% 36%)}
.chip.cat{display:inline-flex;align-items:center;gap:6px;padding-inline-start:8px}
.chip.cat svg{width:20px;height:20px;padding:3px;box-sizing:content-box;border-radius:50%;stroke:hsl(var(--h,215) 65% 34%);fill:none;stroke-width:1.8;background:hsl(var(--h,215) 90% 92%)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.hero .searchbar .inp{font-size:14px;padding-inline:12px}
.hero .searchbar .btn{padding:0;min-width:46px}
.stat::before{opacity:.5}

.price2{display:flex;flex-direction:column;gap:1px}.price2 .price{font-size:14px}.price2 .price.w{color:var(--turquoise,#0e9488)}
.price small:first-child:not(:last-child){margin-inline-end:2px}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.prices:has(.pbox:only-child){grid-template-columns:1fr}
.pbox{background:var(--surface2,#eef4ff);border-radius:14px;padding:10px 12px}.pbox.w{background:#e6f8f5}.pbox.w .big{color:#0e7a70}