/* Woofy — Apple HIG look (apple-design skill) + mobile-native fixes.
   Persian glyphs + digits stay IRANSansX (unicode-range); Latin falls to the system SF stack. */
@font-face{font-family:'IRANSansX';src:url('../fonts/IRANSansXFaNum-black.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0030-0039,U+00AB,U+00BB,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF}

/* ═══ TOKENS — light (system colors; text variants are the HIG accessible set) ═══ */
:root{
  color-scheme:light;
  --font-sans:'IRANSansX',-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --sys-blue:#0088FF; --sys-green:#34C759; --sys-orange:#FF8D28; --sys-red:#FF383C; --sys-indigo:#6155F5;
  --a:#1D6FF2; --a2:#3B82F6; --a3:#5AA2FF;
  --a-bg:rgb(29 111 242/.12); --a-glow:rgb(29 111 242/.2);
  --green:#008932; --green-bg:rgb(52 199 89/.16);
  --amber:#C55300; --amber-bg:rgb(255 141 40/.16);
  --red:#D70015; --red-bg:rgb(255 56 60/.13);
  --violet:#1D6FF2; --violet-bg:rgb(29 111 242/.12);
  --bg-2:#F2F2F7;                      /* grouped page background */
  --bg-card:#FFFFFF;                   /* grouped secondary */
  --bg:rgb(118 118 128/.12);           /* fill: fields, segmented controls */
  --bg-3:#E5E5EA;
  --bg-elev:#FFFFFF;
  --bg-glass:rgb(255 255 255/.72);
  --t1:#000; --t2:rgb(60 60 67/.85); --t3:rgb(60 60 67/.75); --t4:rgb(60 60 67/.6);
  --separator:rgb(60 60 67/.29);
  --border:rgb(60 60 67/.13); --border-h:rgb(60 60 67/.3);
  --fill:rgb(120 120 128/.2); --fill-2:rgb(120 120 128/.16); --fill-3:rgb(118 118 128/.12); --fill-4:rgb(116 116 128/.08);
  --glass-border:rgb(255 255 255/.55);
  --glass-blur:saturate(180%) blur(20px);
  --nav-h:52px; --tab-h:62px; --gutter:16px;
  --r:16px; --r-sm:12px; --r-xs:10px; --r-xl:22px;
  --sh:none;
  --sh-md:0 4px 12px rgb(0 0 0/.10);
  --sh-lg:0 12px 40px rgb(0 0 0/.16);
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --spring:cubic-bezier(.34,1.3,.64,1);
  --sheet:cubic-bezier(.32,.72,0,1);
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:350ms;
}
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0,.35 12%,.72 24%,.95 34%,1.04 43%,1.05 55%,1 76%,1)}
}
/* ═══ TOKENS — dark (chosen, not inverted; true black base, elevated surfaces) ═══ */
[data-theme="dark"]{
  color-scheme:dark;
  --sys-blue:#0091FF; --sys-green:#30D158; --sys-orange:#FF9230; --sys-red:#FF4245; --sys-indigo:#6D7CFF;
  --a:#0A84FF; --a2:#409CFF; --a3:#64B0FF;
  --a-bg:rgb(10 132 255/.2); --a-glow:rgb(10 132 255/.3);
  --green:#30D158; --green-bg:rgb(48 209 88/.18);
  --amber:#FF9F0A; --amber-bg:rgb(255 146 48/.18);
  --red:#FF453A; --red-bg:rgb(255 66 69/.18);
  --violet:#0A84FF; --violet-bg:rgb(10 132 255/.2);
  --bg-2:#000; --bg-card:#1C1C1E; --bg:rgb(118 118 128/.24); --bg-3:#2C2C2E; --bg-elev:#1C1C1E;
  --bg-glass:rgb(30 30 32/.72);
  --t1:#fff; --t2:rgb(235 235 245/.85); --t3:rgb(235 235 245/.65); --t4:rgb(235 235 245/.45);
  --separator:rgb(84 84 88/.6);
  --border:rgb(84 84 88/.45); --border-h:rgb(84 84 88/.8);
  --fill:rgb(120 120 128/.36); --fill-2:rgb(120 120 128/.32); --fill-3:rgb(118 118 128/.24); --fill-4:rgb(118 118 128/.18);
  --glass-border:rgb(255 255 255/.12);
  --sh-md:0 4px 12px rgb(0 0 0/.5); --sh-lg:0 12px 40px rgb(0 0 0/.6);
}
@media (prefers-contrast:more){
  :root:not([data-theme="dark"]){--t2:#3C3C43;--t3:rgb(60 60 67/.9);--t4:rgb(60 60 67/.75);--separator:rgb(60 60 67/.5);--border:rgb(60 60 67/.3)}
  [data-theme="dark"]{--t3:rgb(235 235 245/.85);--t4:rgb(235 235 245/.7);--separator:rgb(84 84 88/.85);--border:rgb(84 84 88/.8)}
}

/* ═══ NATIVE BASELINE (mobile-native) ═══ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px;-webkit-text-size-adjust:100%;overscroll-behavior:none;background:var(--bg-2)}
body{
  font:400 17px/1.5 var(--font-sans);letter-spacing:0;
  background:var(--bg-2);color:var(--t1);direction:rtl;
  min-height:100vh;min-height:100dvh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
[data-lang="en"] body{direction:ltr;letter-spacing:-.43px}
button,a,[role="button"],[onclick],label,select,summary{touch-action:manipulation}
button,[role="button"],.nav-tab,.nav-btn,.pill,.p-btn,.qa-btn,.btn-connect,.btn-save,.auth-tab,.lang-btn,.modal-x,.hub-menu-item,.site-menu-item,.nav-store,.sec-action{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:17px !important}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--a);outline-offset:2px}
#hub-menu-drawer,.modal-sheet,.pills,.period-row{overscroll-behavior:contain}
/* press state is mandatory for every custom control */
[onclick]:not(.modal-ov):not([id$="overlay"]){transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),background-color var(--dur-fast)}
[onclick]:not(.modal-ov):not([id$="overlay"]):active{opacity:.6}

/* ═══ SPLASH ═══ */
#splash{position:fixed;inset:0;z-index:9999;background:var(--bg-2);display:flex;flex-direction:column;align-items:center;justify-content:center}
.sp-ring,.auth-ring{width:96px;height:96px;border-radius:22%;background:var(--bg-card);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px;box-shadow:var(--sh-md);margin-bottom:22px}
.auth-ring{width:72px;height:72px;margin:0 auto 14px}
.auth-ring img{width:100%;height:100%;object-fit:contain}
.sp-ring svg{width:52px;height:52px}
.sp-title{font-size:34px;line-height:41px;font-weight:700;color:var(--t1);margin-bottom:4px;letter-spacing:.4px}
.sp-title span{color:var(--a)}
.sp-sub{font-size:15px;color:var(--t3);margin-bottom:30px}
.sp-brand{font-size:12px;color:var(--t4)}
.sp-dots{display:flex;gap:7px;margin-top:26px}
.sp-dots i{display:block;width:7px;height:7px;border-radius:50%;background:var(--t4);animation:sp-fade 1.2s ease-in-out infinite}
.sp-dots i:nth-child(2){animation-delay:.2s} .sp-dots i:nth-child(3){animation-delay:.4s}
@keyframes sp-fade{0%,100%{opacity:.25}50%{opacity:1}}

/* ═══ SETUP / AUTH ═══ */
#setup{display:none;min-height:100vh;min-height:100dvh;flex-direction:column;align-items:center;justify-content:center;padding:max(24px,env(safe-area-inset-top)) var(--gutter) max(24px,env(safe-area-inset-bottom));background:var(--bg-2)}
.setup-card{width:100%;max-width:420px;background:var(--bg-card);border-radius:var(--r-xl);padding:28px 20px;animation:card-in var(--dur-slow) var(--ease-out)}
@keyframes card-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.setup-logo{text-align:center;margin-bottom:24px}
.setup-logo .lgo{width:64px;height:64px;border-radius:22%;background:var(--bg-2);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.setup-logo .lgo svg{width:32px;height:32px}
.setup-logo h2{font-size:22px;line-height:28px;font-weight:700;color:var(--t1)}
.setup-logo p{font-size:15px;line-height:22px;color:var(--t3);margin-top:6px}
.fg{margin-bottom:14px}
.fg label{display:block;font-size:13px;line-height:18px;font-weight:600;color:var(--t3);margin:0 4px 6px}
.fg input{width:100%;min-height:48px;padding:0 14px;background:var(--bg);border:none;border-radius:var(--r-xs);color:var(--t1);font-family:inherit;direction:ltr;transition:box-shadow var(--dur-fast)}
.fg input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--a)}
.fg input::placeholder{color:var(--t4)}
.btn-connect,.btn-save{width:100%;min-height:50px;padding:0 20px;margin-top:6px;background:var(--a);border:none;border-radius:999px;color:#fff;font-family:inherit;font-size:17px;font-weight:600;cursor:pointer;transition:opacity var(--dur-fast),transform var(--dur-fast) var(--ease)}
.btn-connect:active,.btn-save:active{opacity:.6;transform:scale(.97)}
.btn-connect:disabled,.btn-save:disabled{background:var(--fill-2);color:var(--t4);cursor:default;transform:none;opacity:1}
.setup-hint{font-size:13px;line-height:20px;color:var(--t3);text-align:center;margin-top:14px}
.wmark{text-align:center;margin-top:18px;font-size:12px;color:var(--t4)}
.wmark span{color:var(--a);font-weight:600}
#auth-tabs{min-height:36px;border-radius:9px !important}
.auth-tab{transition:background .2s var(--ease),color .2s;min-height:32px}
.auth-tab.active{background:var(--bg-elev) !important;color:var(--t1) !important;box-shadow:0 3px 8px rgb(0 0 0/.12),0 3px 1px rgb(0 0 0/.04)}

/* ═══ SHELL — glass only on the navigation layer (top bar + tab bar) ═══ */
#app{display:none;flex-direction:column;min-height:100vh;min-height:100dvh}
.top-nav{min-height:var(--nav-h);padding:env(safe-area-inset-top) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));background:var(--bg-glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:.5px solid var(--separator);display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:200}
@supports not (backdrop-filter:blur(1px)){.top-nav,.bottom-nav{background:var(--bg-elev)}}
.nav-logo{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.nav-logo-icon{width:32px;height:32px;border-radius:22%;flex-shrink:0;background:var(--bg-card);display:flex;align-items:center;justify-content:center;overflow:hidden}
.nav-logo-icon svg{width:18px;height:18px}
.nav-logo-text{min-width:0;overflow:hidden}
.nav-logo-name{font-size:17px;line-height:22px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-logo-brand{color:var(--a)}
.nav-logo-by{font-size:12px;line-height:14px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-logo-by b{color:var(--a);font-weight:600}
.nav-store{display:flex;align-items:center;gap:6px;min-height:34px;background:var(--fill-3);border-radius:999px;padding:0 12px;cursor:pointer;max-width:140px;flex-shrink:0;position:relative}
.nav-store::after{content:'';position:absolute;inset:-5px 0}
.nav-store:active{opacity:.6}
.nav-dot{width:8px;height:8px;border-radius:50%;background:var(--sys-green);flex-shrink:0}
.nav-store-nm{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-btn{width:36px;height:36px;border-radius:50%;background:var(--fill-3);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;position:relative}
.nav-btn::after{content:'';position:absolute;inset:-4px}
.nav-btn:active{opacity:.6;transform:scale(.94)}
.nav-btn svg{width:18px;height:18px;stroke:var(--a)}

.main-content{flex:1;padding:12px max(var(--gutter),env(safe-area-inset-right,0px)) calc(var(--tab-h) + max(10px,env(safe-area-inset-bottom,0px)) + 28px) max(var(--gutter),env(safe-area-inset-left,0px));overflow-y:auto;-webkit-overflow-scrolling:touch}

/* TAB BAR — floating Liquid Glass capsule, content scrolls beneath */
.bottom-nav{position:fixed;bottom:max(10px,env(safe-area-inset-bottom,0px));left:0;right:0;margin-inline:auto;width:calc(100% - 2*var(--gutter));max-width:520px;height:var(--tab-h);padding:4px;background:var(--bg-glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:.5px solid var(--glass-border);border-radius:999px;box-shadow:var(--sh-md);display:flex;align-items:stretch;z-index:200}
.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;position:relative;color:var(--t2);border-radius:999px;transition:color var(--dur-fast) var(--ease)}
.nav-tab::before{content:'';position:absolute;inset:0;border-radius:999px;background:transparent;z-index:-1;transition:background var(--dur-base) var(--ease)}
.nav-tab.active{color:var(--a)}
.nav-tab.active::before{background:var(--fill-3)}
.nav-tab-pip{display:none}
.nav-tab svg{width:25px;height:25px;stroke:currentColor;transition:transform var(--dur-fast) var(--ease)}
.nav-tab:active{opacity:.6}
.nav-tab:active svg{transform:scale(.9)}
.nav-tab span{font-size:11px;line-height:13px;font-weight:600}

/* PAGES */
.page{display:none}
.page.active{display:block;animation:pg-in var(--dur-base) var(--ease-out)}
@keyframes pg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* HEADERS — first header on a page is the Large Title */
.sec-hd{display:flex;align-items:center;justify-content:space-between;margin:4px 4px 12px;min-height:32px}
.sec-title{font-size:20px;line-height:25px;font-weight:600;color:var(--t1)}
.page > .sec-hd:first-child,.main-content > .sec-hd:first-child{margin-top:8px;margin-bottom:14px}
.page > .sec-hd:first-child .sec-title,.main-content > .sec-hd:first-child .sec-title{font-size:34px;line-height:41px;font-weight:700}
[data-lang="en"] .page > .sec-hd:first-child .sec-title{letter-spacing:.4px}
.sec-action{font-size:17px;color:var(--a);font-weight:400;cursor:pointer;display:flex;align-items:center;gap:3px;min-height:44px;padding:0 4px}

/* STATS — Settings-style solid icon squircles */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}
.stat-card{background:var(--bg-card);border-radius:var(--r);padding:14px;position:relative;overflow:hidden;cursor:pointer;transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast)}
.stat-card:active{opacity:.6;transform:scale(.97)}
.stat-card::after,.sc-accent{display:none}
.stat-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.stat-ico svg{width:18px;height:18px;stroke:#fff !important}
.sc-green .stat-ico{background:var(--sys-green)} .sc-amber .stat-ico{background:var(--sys-orange)} .sc-blue .stat-ico{background:var(--sys-blue)} .sc-violet .stat-ico{background:var(--sys-indigo)} .sc-red .stat-ico{background:var(--sys-red)}
.stat-lbl{font-size:13px;line-height:18px;font-weight:600;color:var(--t3);margin-bottom:2px}
.stat-val{font-size:clamp(20px,6.4vw,28px);line-height:1.2;font-weight:700;color:var(--t1)}
.stat-chg{font-size:12px;line-height:16px;color:var(--t3);margin-top:4px;font-weight:500}
.chg-up{color:var(--green)} .chg-down,.chg-dn{color:var(--red)}

/* QUICK ACTIONS */
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}
.qa-btn{background:var(--bg-card);border-radius:var(--r);padding:12px 4px;min-height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast)}
.qa-btn:active{opacity:.6;transform:scale(.97)}
.qa-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.qa-ico svg{width:20px;height:20px}
.qa-green svg{stroke:var(--green)} .qa-violet svg{stroke:var(--violet)} .qa-amber svg{stroke:var(--amber)}
.qa-lbl{font-size:12px;line-height:16px;font-weight:500;color:var(--t2);text-align:center}

/* LISTS — grouped inset list: one rounded container, hairline separators inset past the avatar */
.list-wrap{display:flex;flex-direction:column;background:var(--bg-card);border-radius:var(--r);overflow:hidden}
.list-item{position:relative;background:transparent;padding:12px var(--gutter);min-height:64px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background-color var(--dur-fast)}
.list-item + .list-item::before{content:'';position:absolute;top:0;inset-inline-start:72px;inset-inline-end:0;height:.5px;background:var(--separator)}
.list-item:active{background:var(--fill-3);opacity:1}
.ord-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;color:var(--a);background:var(--a-bg)}
.ord-info,.prod-info{flex:1;min-width:0}
.ord-name{font-size:17px;line-height:22px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ord-meta{font-size:13px;line-height:18px;color:var(--t3);margin-top:1px}
.ord-right{text-align:end;flex-shrink:0}
.ord-price{font-size:17px;line-height:22px;font-weight:600;color:var(--t1)}
.status-badge{display:inline-block;font-size:12px;line-height:16px;font-weight:600;padding:2px 9px;border-radius:999px;margin-top:4px}
.st-completed{background:var(--green-bg);color:var(--green)}
.st-processing{background:var(--a-bg);color:var(--a)}
.st-pending,.st-on-hold{background:var(--amber-bg);color:var(--amber)}
.st-cancelled,.st-failed{background:var(--red-bg);color:var(--red)}
.st-refunded{background:var(--fill-3);color:var(--t2)}
.prod-thumb{width:52px;height:52px;border-radius:10px;flex-shrink:0;background:var(--fill-3);display:flex;align-items:center;justify-content:center;overflow:hidden}
.prod-thumb img{width:100%;height:100%;object-fit:cover}
.prod-thumb svg{width:24px;height:24px;stroke:var(--t4)}
.prod-name{font-size:16px;line-height:21px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-sku{font-size:13px;line-height:18px;color:var(--t3);direction:ltr;text-align:right;font-weight:400}
.prod-cat{font-size:13px;line-height:18px;color:var(--t3);margin-top:2px}
.prod-right{text-align:end;flex-shrink:0}
.prod-price{font-size:16px;line-height:21px;font-weight:600;color:var(--t1)}
.stock-in,.stock-out,.stock-low{font-size:12px;line-height:16px;font-weight:600;margin-top:4px;display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:999px}
.stock-in{color:var(--green);background:var(--green-bg)}
.stock-out{color:var(--red);background:var(--red-bg)}
.stock-low{color:var(--amber);background:var(--amber-bg)}

/* SEARCH & FILTERS */
.search-wrap{display:flex;align-items:center;gap:8px;background:var(--fill-3);border-radius:999px;min-height:44px;padding:0 14px;margin-bottom:12px;transition:box-shadow var(--dur-fast)}
.search-wrap:focus-within{box-shadow:inset 0 0 0 2px var(--a)}
.search-wrap svg{width:18px;height:18px;stroke:var(--t3);flex-shrink:0}
.search-wrap input{flex:1;min-width:0;border:none;background:none;color:var(--t1);font-family:inherit;height:44px}
.search-wrap input:focus{outline:none}
.search-wrap input::placeholder{color:var(--t3)}
.pills,.period-row{display:flex;gap:8px;overflow-x:auto;margin-bottom:12px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter)}
.pills::-webkit-scrollbar,.period-row::-webkit-scrollbar{display:none}
.pill,.p-btn{min-height:34px;padding:0 14px;display:inline-flex;align-items:center;border-radius:999px;font-size:15px;font-weight:500;background:var(--bg-card);border:none;color:var(--t1);cursor:pointer;white-space:nowrap;font-family:inherit;scroll-snap-align:start;position:relative;transition:background-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast) var(--ease)}
.pill::after,.p-btn::after{content:'';position:absolute;inset:-5px -2px}
.pill:active,.p-btn:active{opacity:.6;transform:scale(.97)}
.pill.active,.p-btn.active{background:var(--a);color:#fff;font-weight:600}

/* CARDS */
.chart-card{background:var(--bg-card);border-radius:var(--r);padding:16px;margin-bottom:16px}
.chart-hd{font-size:17px;line-height:22px;font-weight:600;color:var(--t1);margin-bottom:12px}
.chart-canvas-wrap{height:156px;position:relative}
.card{background:var(--bg-card);border-radius:var(--r);overflow:hidden}
.card-body{padding:var(--gutter)}

/* GATEWAY / TOGGLE */
.gw-item{display:flex;align-items:center;gap:12px;padding:12px var(--gutter);min-height:56px;position:relative}
.gw-item + .gw-item::before{content:'';position:absolute;top:0;inset-inline-start:70px;inset-inline-end:0;height:.5px;background:var(--separator)}
.gw-ico{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--fill-3)}
.gw-ico svg{width:22px;height:22px;stroke:var(--t2)}
.gw-info{flex:1;min-width:0}
.gw-name{font-size:17px;line-height:22px;font-weight:400;color:var(--t1)}
.gw-desc{font-size:13px;line-height:18px;color:var(--t3);margin-top:1px}
.tgl{position:relative;width:51px;height:31px;flex-shrink:0}
.tgl input{opacity:0;width:0;height:0}
.tgl-sl{position:absolute;inset:0;border-radius:999px;background:var(--fill-2);cursor:pointer;transition:background-color var(--dur-base) var(--ease)}
.tgl-sl::before{content:'';position:absolute;width:27px;height:27px;border-radius:50%;background:#fff;top:2px;inset-inline-start:2px;box-shadow:0 3px 8px rgb(0 0 0/.15),0 3px 1px rgb(0 0 0/.06);transition:transform var(--dur-base) var(--spring)}
.tgl-sl:active::before{width:33px}
.tgl input:checked + .tgl-sl{background:var(--sys-green)}
[dir="rtl"] .tgl input:checked + .tgl-sl::before{transform:translateX(-20px)}
[dir="ltr"] .tgl input:checked + .tgl-sl::before{transform:translateX(20px)}
.tgl input:focus-visible + .tgl-sl{outline:3px solid var(--a);outline-offset:2px}

/* SETTINGS — grouped lists; first/last row of a run gets the container radius */
.set-section{margin-bottom:24px}
.set-section-lbl{font-size:13px;line-height:18px;font-weight:400;color:var(--t3);margin:0 var(--gutter) 6px;text-transform:none}
.set-item,.settings-item,.setting-row{background:var(--bg-card);margin:0;display:flex;align-items:center;gap:12px;padding:10px var(--gutter);min-height:52px;cursor:pointer;position:relative;transition:background-color var(--dur-fast)}
.set-item:not(.set-item + .set-item),.setting-row:not(.setting-row + .setting-row){border-start-start-radius:var(--r);border-start-end-radius:var(--r)}
.set-item:not(:has(+ .set-item)),.setting-row:not(:has(+ .setting-row)){border-end-start-radius:var(--r);border-end-end-radius:var(--r)}
.set-item + .set-item::before,.setting-row + .setting-row::before{content:'';position:absolute;top:0;inset-inline-start:60px;inset-inline-end:0;height:.5px;background:var(--separator)}
.set-item:active{background:var(--fill-3);opacity:1}
.setting-row{justify-content:space-between;cursor:default}
.setting-row-left{display:flex;align-items:center;gap:12px}
.set-ico,.setting-row-ico{width:32px;height:32px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.set-ico svg,.setting-row-ico svg{width:18px;height:18px}
.set-lbl{flex:1;min-width:0}
.set-lbl strong,.setting-row-label strong{display:block;font-size:17px;line-height:22px;font-weight:400;color:var(--t1)}
.set-lbl small,.setting-row-label small{font-size:13px;line-height:18px;color:var(--t3)}
.set-arr{color:var(--t4)}
.set-arr svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.5}
[dir="ltr"] .set-arr svg{transform:scaleX(-1)}
.set-val{font-size:17px;color:var(--t3)}
.lang-toggle{display:flex;background:var(--fill-3);border-radius:9px;padding:2px;gap:2px}
.lang-btn{min-height:30px;padding:0 14px;border-radius:7px;font-size:13px;font-weight:500;border:none;cursor:pointer;font-family:inherit;background:none;color:var(--t1);transition:background-color var(--dur-fast)}
.lang-btn.active{background:var(--bg-elev);font-weight:600;box-shadow:0 3px 8px rgb(0 0 0/.12),0 3px 1px rgb(0 0 0/.04)}

/* IMAGE UPLOAD */
.img-zone{border:1.5px dashed var(--separator);border-radius:var(--r-sm);padding:22px;text-align:center;cursor:pointer;background:var(--fill-4);position:relative;overflow:hidden;transition:background-color var(--dur-fast)}
.img-zone.drag,.img-zone:active{background:var(--a-bg);border-color:var(--a)}
.img-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.img-zone-ico{margin-bottom:6px}
.img-zone-ico svg{width:32px;height:32px;stroke:var(--a)}
.img-zone-txt{font-size:15px;line-height:20px;color:var(--t1);font-weight:600}
.img-zone-sub{font-size:13px;color:var(--t3);margin-top:2px}
.img-prev{position:relative;display:block;border-radius:var(--r-sm);overflow:hidden}
.img-prev img{width:100%;height:140px;object-fit:cover;display:block}
.img-prev-actions{position:absolute;top:8px;inset-inline-end:8px;display:flex;gap:10px}
.img-prev-btn{width:34px;height:34px;border-radius:50%;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative}
.img-prev-btn::after{content:'';position:absolute;inset:-5px}
.img-prev-btn:active{opacity:.6;transform:scale(.94)}
.img-prev-btn svg{width:15px;height:15px;stroke:#fff;stroke-width:2.5}
.img-prev-edit{background:rgb(0 0 0/.45)}
.img-prev-rm{background:rgb(215 0 21/.85)}
.img-url-row{margin-top:10px}
.img-url-row label{display:block;font-size:13px;color:var(--t3);margin:0 4px 6px}
.img-url-row input{width:100%;min-height:44px;padding:0 12px;direction:ltr;background:var(--bg);border:none;border-radius:var(--r-xs);color:var(--t1);font-family:inherit}
.img-url-row input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--a)}

/* SHEET — standard iOS modal sheet, elevated surface in dark */
.modal-ov{position:fixed;inset:0;z-index:500;background:rgb(0 0 0/.4);display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease)}
.modal-ov.open{opacity:1;pointer-events:all}
.modal-sheet{width:100%;max-width:640px;margin-inline:auto;background:var(--bg-elev);border-radius:var(--r-xl) var(--r-xl) 0 0;transform:translateY(100%);transition:transform var(--dur-slow) var(--sheet);max-height:92vh;max-height:92dvh;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,0px);-webkit-overflow-scrolling:touch}
.modal-ov.open .modal-sheet{transform:translateY(0)}
.modal-handle{width:36px;height:5px;background:var(--fill);border-radius:3px;margin:6px auto 4px}
.modal-hd{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:52px;padding:0 var(--gutter);border-bottom:.5px solid var(--separator)}
.modal-title{position:absolute;inset:0 64px;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:22px;font-weight:600;color:var(--t1);text-align:center;pointer-events:none}
.modal-x{width:30px;height:30px;border-radius:50%;background:var(--fill-2);border:none;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}
.modal-x::after{content:'';position:absolute;inset:-7px}
.modal-x:active{opacity:.6;transform:scale(.94)}
.modal-x svg{width:13px;height:13px;stroke:currentColor;stroke-width:3}
.modal-body{padding:var(--gutter)}

/* FORM */
.fr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:13px;line-height:18px;font-weight:600;color:var(--t3);margin:0 4px 6px}
.fld input,.fld select,.fld textarea{width:100%;min-height:46px;padding:0 14px;background:var(--bg);border:none;border-radius:var(--r-xs);color:var(--t1);font-family:inherit;transition:box-shadow var(--dur-fast)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--a)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--t4)}
.fld input:disabled{color:var(--t4);cursor:default}
.fld select option{background:var(--bg-elev);color:var(--t1)}
.fld textarea{resize:vertical;min-height:88px;padding:12px 14px;line-height:1.6}
.fld input[style*="ltr"],.fld select[style*="ltr"],.fld input[type="number"]{direction:ltr}

/* TOAST */
.toast{position:fixed;bottom:calc(var(--tab-h) + max(10px,env(safe-area-inset-bottom,0px)) + 16px);left:var(--gutter);right:var(--gutter);margin-inline:auto;max-width:480px;z-index:9999;background:var(--bg-elev);border-radius:var(--r);padding:12px 14px;font-size:15px;line-height:20px;font-weight:600;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:10px;transform:translateY(24px) scale(.96);opacity:0;pointer-events:none;transition:transform var(--dur-slow) var(--spring),opacity var(--dur-base) var(--ease)}
.toast.show{transform:none;opacity:1}
.toast-ico{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.toast-ico svg{width:15px;height:15px;stroke:#fff}
.toast.success .toast-ico{background:var(--sys-green)} .toast.error .toast-ico{background:var(--sys-red)} .toast.info .toast-ico{background:var(--sys-blue)} .toast.warning .toast-ico{background:var(--sys-orange)}

/* SKELETON / SPINNER / EMPTY */
.skel{background:linear-gradient(90deg,var(--fill-4) 25%,var(--fill-2) 50%,var(--fill-4) 75%);background-size:200% 100%;animation:skel-sh 1.4s ease infinite;border-radius:var(--r-xs)}
@keyframes skel-sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--fill-2);border-top-color:var(--t3);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin-wrap{display:flex;align-items:center;justify-content:center;padding:56px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 24px;text-align:center;gap:6px}
.empty-ico{opacity:.45}
.empty-ico svg{width:48px;height:48px;stroke:var(--t3)}
.empty-title{font-size:20px;line-height:25px;font-weight:600;color:var(--t1)}
.empty-desc{font-size:15px;line-height:22px;color:var(--t3)}

/* MENUS / DRAWER */
.site-menu-item{padding:0 var(--gutter);min-height:44px;display:flex;align-items:center;font-size:17px;color:var(--t1);cursor:pointer;white-space:nowrap}
.site-menu-item:active{background:var(--fill-3);opacity:1}
.site-menu-item.danger{color:var(--red)}
.site-menu-item + .site-menu-item{border-top:.5px solid var(--separator)}
#hub-menu-drawer{background:var(--bg-elev) !important;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
#hub-menu-drawer > div:first-child{background:var(--a) !important}
.hub-menu-item{display:flex;align-items:center;gap:12px;padding:0 12px;min-height:48px;border-radius:var(--r-xs);font-size:17px;font-weight:400;color:var(--t1);cursor:pointer}
.hub-menu-item:active{background:var(--fill-3);opacity:1}
.hub-menu-item svg{flex-shrink:0;color:var(--a)}
.hub-menu-item .hub-menu-arrow{margin-inline-start:auto;color:var(--t4)}
[dir="ltr"] .hub-menu-arrow svg{transform:scaleX(-1)}
#impersonation-banner{background:var(--sys-orange) !important;color:#000 !important;padding-top:calc(9px + env(safe-area-inset-top,0px)) !important}
.footer-brand{text-align:center;padding:16px;font-size:12px;color:var(--t3);margin-top:6px}
.footer-brand b{color:var(--a);font-weight:600}

/* ═══ HOVER — only where a real pointer exists ═══ */
@media (hover:hover) and (pointer:fine){
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--fill);border-radius:4px}
  .btn-connect:hover,.btn-save:hover{opacity:.9}
  .nav-btn:hover,.nav-store:hover{background:var(--fill-2)}
  .list-item:hover,.set-item:hover,.site-menu-item:hover,.hub-menu-item:hover{background:var(--fill-4)}
  .stat-card:hover,.qa-btn:hover{opacity:.85}
  .pill:not(.active):hover,.p-btn:not(.active):hover{background:var(--fill-3)}
  .nav-tab:not(.active):hover{color:var(--t1)}
  .sec-action:hover{opacity:.7}
}

/* ═══ RESPONSIVE ═══ */
@media(min-width:600px){
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .qa-grid{grid-template-columns:repeat(6,1fr)}
  .main-content{padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}
}
@media(min-width:860px){
  #hub-view .main-content{max-width:960px;margin:0 auto;width:100%;padding-top:28px;padding-bottom:40px}
  #hub-view .top-nav{padding-inline:calc((100% - 960px)/2 + 16px)}
  #hub-sites{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
  #hub-sites .card{margin-bottom:0}
  #hub-sites .footer-brand{grid-column:1/-1}
}
@media(min-width:1180px){
  #hub-view .main-content{max-width:1160px}
  #hub-view .top-nav{padding-inline:calc((100% - 1160px)/2 + 16px)}
  #hub-sites{grid-template-columns:repeat(3,1fr)}
}
[data-lang="en"] .ord-price,[data-lang="en"] .prod-price{direction:ltr}

/* ═══ SYSTEM SETTINGS ARE REQUIREMENTS ═══ */
@media (prefers-reduced-transparency:reduce){
  :root{--bg-glass:var(--bg-card);--glass-blur:none}
}
:root[data-reduce-transparency="true"]{--bg-glass:var(--bg-card);--glass-blur:none}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:1ms;--dur-base:1ms;--dur-slow:1ms;--spring:linear}
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;scroll-behavior:auto !important}
  .page.active{animation:none}
}