:root{--bg:#F3F6FB;--sf:#fff;--s2:#EBF0F8;--ink:#0F1F3A;--mu:#5B6B85;--ln:#DCE4EF;--br:#1F5FBF;--bs:#DDE8FA;--ac:#F2A93B;--ok:#12844B;--okb:#DDF3E7;--wn:#9A6408;--wnb:#FCEFD3;--bd:#C8323A;--bdb:#FBE3E4;--ob:#fff;--hl:rgba(255,255,255,.8);--sh:0 12px 32px rgba(15,31,58,.09);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0A1220;--sf:#101A2C;--s2:#16233A;--ink:#E8EEF9;--mu:#93A5C0;--ln:#22314A;--br:#6CA2FF;--bs:#14294D;--okb:#0F2F22;--wnb:#33280F;--bdb:#3A1719;--ok:#4CC88A;--wn:#EDB955;--bd:#F27C82;--ob:#06152E;--hl:rgba(255,255,255,.08);--sh:0 12px 32px rgba(0,0,0,.45)}}
:root[data-theme="dark"]{--bg:#0A1220;--sf:#101A2C;--s2:#16233A;--ink:#E8EEF9;--mu:#93A5C0;--ln:#22314A;--br:#6CA2FF;--bs:#14294D;--okb:#0F2F22;--wnb:#33280F;--bdb:#3A1719;--ok:#4CC88A;--wn:#EDB955;--bd:#F27C82;--ob:#06152E;--hl:rgba(255,255,255,.08);--sh:0 12px 32px rgba(0,0,0,.45)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.75 Vazirmatn,Tahoma,"Segoe UI",sans-serif}
h2,h3,p{margin:0}h2{font-size:19px}h3{font-size:16px}
button{font:inherit;color:inherit;cursor:pointer}
input,select{font:inherit;color:inherit}
.w{max-width:1180px;margin:auto;padding:0 16px}
.pg{max-width:1180px;margin:auto;padding:0 16px 30px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--bg);border-bottom:1px solid var(--ln)}
.bar{display:flex;align-items:center;gap:14px;padding:10px 0}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;text-decoration:none;color:var(--ink)}
.logo b{width:28px;height:28px;background:var(--br);border-radius:9px 9px 9px 3px;position:relative;flex:none}.logo b:after{content:"";position:absolute;inset:auto auto 6px 6px;width:8px;height:8px;border-radius:50%;background:var(--ac)}
.tabs{display:flex;gap:4px;overflow-x:auto;flex:1}
.tab{border:0;background:none;color:var(--mu);font-weight:500;padding:7px 14px;border-radius:10px;white-space:nowrap}
.tab[aria-selected=true]{background:var(--ink);color:var(--bg);font-weight:700}
.ic{border:1px solid var(--ln);background:var(--sf);border-radius:10px;padding:6px 12px}
.intro{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;padding:16px 0 14px}
.sw{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--mu)}.sw i{width:18px;height:18px;border-radius:6px;border:1px solid var(--ln)}
.fr{background:var(--sf);border:1px solid var(--ln);border-radius:20px;box-shadow:var(--sh);overflow:hidden;margin:18px 0 30px}
.app{display:grid;grid-template-columns:210px 1fr;min-height:560px}
.side{background:var(--s2);padding:16px 12px;display:flex;flex-direction:column;gap:3px;border-inline-end:1px solid var(--ln)}
.side a{padding:8px 12px;border-radius:9px;color:var(--mu);font-weight:500;font-size:14px;cursor:pointer;text-decoration:none}
.side a.on{background:var(--sf);color:var(--br);font-weight:700;box-shadow:inset -3px 0 0 var(--br)}
.side small{margin:12px 12px 2px;font-size:12px;color:var(--mu)}
.main{padding:22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.g{display:grid;gap:14px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1.7fr 1fr}
.card{border:1px solid var(--ln);border-radius:14px;padding:16px;background:var(--sf)}
.mu{color:var(--mu)}.sm{font-size:13px}
.row{display:flex;align-items:center;gap:10px}.sp{justify-content:space-between}.wr{flex-wrap:wrap}
.btn{border:1px solid var(--ln);background:var(--sf);font-weight:600;padding:8px 15px;border-radius:10px}
.btn.p{background:var(--br);color:var(--ob);border-color:var(--br)}
.btn.a{background:var(--ac);color:#1B1204;border-color:var(--ac);width:100%;padding:13px;font-size:15px;font-weight:800}
.fi{border:1px solid var(--ln);border-radius:10px;padding:9px 12px;background:var(--sf);color:var(--ink);font:inherit}
.fi:focus{outline:none;border-color:var(--br)}
.btn.w{background:#fff;color:#14408F;border-color:#fff}
.pill{display:inline-flex;align-items:center;gap:4px;padding:1px 10px;border-radius:99px;font-size:12px;font-weight:700}
.ok{background:var(--okb);color:var(--ok)}.wn{background:var(--wnb);color:var(--wn)}.bd{background:var(--bdb);color:var(--bd)}.br{background:var(--bs);color:var(--br)}
.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.av{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;background:var(--bs);color:var(--br);flex:none}
.steps{display:flex;gap:8px;align-items:center;overflow-x:auto;padding-bottom:2px}
.st{display:flex;align-items:center;gap:7px;color:var(--mu);font-size:13px;white-space:nowrap}
.st i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:var(--s2);font-weight:700;font-size:12px}
.st.d i{background:var(--br);color:var(--ob)}.st.c{color:var(--ink);font-weight:700}.st.c i{background:var(--ac);color:#1B1204}
.ln{flex:1;min-width:14px;height:2px;background:var(--ln)}
.days{display:flex;gap:8px;overflow-x:auto;margin:14px 0}
.day{min-width:66px;padding:9px 6px;border:1px solid var(--ln);border-radius:12px;background:var(--sf);font-size:13px}.day b{display:block;font-size:19px}
.day[aria-pressed=true]{background:var(--br);color:var(--ob);border-color:var(--br)}.day:disabled{opacity:.4;cursor:not-allowed}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.slot{padding:9px;border:1px solid var(--ln);border-radius:10px;background:var(--sf);font-weight:700}.slot:hover{border-color:var(--br)}
.slot[aria-pressed=true]{background:var(--bs);border-color:var(--br);color:var(--br)}.slot:disabled{text-decoration:line-through;opacity:.4;cursor:not-allowed}
.tkt{position:relative;border:1.5px dashed var(--br);border-radius:16px;padding:18px;background:var(--sf);align-self:start}
.tkt:before,.tkt:after{content:"";position:absolute;top:123px;width:18px;height:18px;border-radius:50%;background:var(--sf);border:1.5px solid var(--br)}
.tkt:before{right:-10px;clip-path:inset(0 50% 0 0)}.tkt:after{left:-10px;clip-path:inset(0 0 0 50%)}
.hr{border:0;border-top:1.5px dashed var(--ln);margin:14px 0}
.tr{display:grid;gap:7px;margin:14px 0 0;padding:0;list-style:none;font-size:13px;color:var(--mu)}.tr .i{color:var(--ok);margin-inline-end:5px}
.hero{background:#14408F;color:#fff;border-radius:18px;padding:22px}
.hero .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}.hero .btn.w{background:#fff;color:#14408F;border-color:#fff}
.stat b{font-size:26px;display:block;line-height:1.3}
.bk{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--ln)}.bk:last-child{border:0}
.bk time{font-weight:800;min-width:46px;color:var(--br)}
.pb{height:7px;border-radius:9px;background:var(--s2)}.pb i{display:block;height:100%;border-radius:9px;background:var(--br)}
.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;background:var(--s2);border-radius:10px;padding:3px}.seg button{border:0;background:none;padding:4px 12px;border-radius:8px;color:var(--mu)}.seg .on{background:var(--sf);color:var(--ink);font-weight:700}
.fs{text-align:start;border:1px solid var(--ln);background:var(--sf);border-radius:14px;padding:12px 14px}.fs b{font-size:24px;display:block}
.fs[aria-pressed=true]{border-color:var(--br);background:var(--bs)}
.tc{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--ln)}
.msg{max-width:82%;padding:10px 14px;border-radius:14px 14px 14px 4px;background:var(--s2);font-size:14px}
.msg.me{margin-inline-start:auto;background:var(--bs);border-radius:14px 14px 4px 14px}
.note{background:var(--wnb);border:1px dashed var(--wn);color:var(--ink)}
textarea{width:100%;box-sizing:border-box;border:1px solid var(--ln);border-radius:10px;padding:10px;background:var(--sf);color:var(--ink);font:inherit;resize:none}
.cal{border:1px solid var(--ln);border-radius:14px;padding:14px}
.gbox{border:1px solid var(--ln);border-radius:14px;padding:14px;align-self:start}
.cg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px;text-align:center}
.cg>span{font-size:12px;color:var(--mu);padding:4px 0}
.cd{aspect-ratio:1;border:0;border-radius:10px;background:none;font-weight:700;font-size:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cd:after{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)}.cd.few:after{background:var(--ac)}
.cd:disabled{color:var(--mu);opacity:.45;cursor:not-allowed}.cd:disabled:after{background:none}
.cd:not(:disabled):hover{background:var(--s2)}.cd.td{box-shadow:inset 0 0 0 1.5px var(--br)}
.cd[aria-pressed=true]{background:var(--br);color:var(--ob)}.cd[aria-pressed=true]:after{background:var(--ob)}
.cs{grid-template-columns:1.25fr 1fr}
.cg-c{grid-template-columns:2fr 1fr;gap:14px;display:grid}
.lg{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--mu);margin-top:12px}.lg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:5px}
.hero{position:relative;overflow:hidden}.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 88% -30%,rgba(255,255,255,.28),transparent);pointer-events:none}
.hero>*{position:relative;z-index:1}
@supports (backdrop-filter:blur(1px)) and (color:color-mix(in srgb,red 50%,blue)){
body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(620px 420px at 88% 6%,color-mix(in srgb,var(--br) 30%,transparent),transparent),radial-gradient(520px 380px at 6% 42%,color-mix(in srgb,var(--ac) 24%,transparent),transparent),radial-gradient(720px 520px at 62% 100%,color-mix(in srgb,var(--br) 22%,transparent),transparent)}
header{background:color-mix(in srgb,var(--bg) 60%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
.fr{background:color-mix(in srgb,var(--sf) 58%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);border-color:color-mix(in srgb,var(--sf) 55%,var(--ln));box-shadow:var(--sh),inset 0 1px 0 var(--hl)}
.side{background:color-mix(in srgb,var(--s2) 40%,transparent)}
.card,.cal,.gbox,.tkt,.fs,.slot,.msg:not(.me):not(.note){background:color-mix(in srgb,var(--sf) 62%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:color-mix(in srgb,var(--sf) 50%,var(--ln));box-shadow:inset 0 1px 0 var(--hl)}
.gbox{box-shadow:var(--sh),inset 0 1px 0 var(--hl)}
.slot[aria-pressed=true],.fs[aria-pressed=true]{background:color-mix(in srgb,var(--bs) 85%,transparent)}
.tkt{border-color:var(--br)}
textarea{background:color-mix(in srgb,var(--sf) 55%,transparent)}
}
.mn.fr{background:var(--sf);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-color:var(--ln)}
.mn .side{background:transparent}.mn .side a,.mn .side a.on{background:none;box-shadow:none;border-radius:8px}.mn .side a.on{color:var(--ink)}
.mn .side a.on:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--br);margin-inline-end:8px}
.mn .main{padding:28px 30px;gap:28px}
.kp{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--ln)}
.kp>div{padding:16px 0 16px 8px;padding-inline-start:18px;border-inline-start:1px solid var(--ln)}.kp>div:first-child{border:0;padding-inline-start:0}
.kp b{display:block;font-size:30px;font-weight:500;line-height:1.35}
.dt{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-end:6px;background:var(--ok)}.dt.w{background:var(--ac)}.dt.x{background:var(--mu)}
.rw{display:grid;grid-template-columns:2fr 1fr 1.3fr 1fr;gap:10px;align-items:center;padding:12px 8px;border-bottom:1px solid var(--ln);cursor:pointer;font-size:14px}
.rw:hover,.rw[aria-current=true]{background:var(--s2)}.rw.h{font-size:12px;color:var(--mu);cursor:default}.rw.h:hover{background:none}
.tg{width:34px;height:20px;border-radius:99px;background:var(--ln);position:relative;border:0;padding:0}
.tg:after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s}
.tg[aria-checked=true]{background:var(--br)}.tg[aria-checked=true]:after{inset-inline-start:17px}
.ll{display:grid;gap:12px;font-size:13px;padding:0;margin:0;list-style:none}.ll time{color:var(--mu);margin-inline-end:8px}
.lk{color:var(--br);font-weight:700;background:none;border:0;padding:0;font-size:13px;cursor:pointer}
@media(min-width:861px){.mn .side{border-inline-end:1px solid var(--ln);padding:24px 16px}}
@media(max-width:860px){.kp{grid-template-columns:1fr 1fr}.kp>div:nth-child(3){border-inline-start:0;padding-inline-start:0}.rw>:nth-child(2){display:none}.rw{grid-template-columns:2fr 1.5fr 1fr}.mn .main{padding:16px}}
:focus-visible{outline:2px solid var(--br);outline-offset:2px}
@media(max-width:860px){.app{grid-template-columns:1fr}.side{flex-direction:row;flex-wrap:wrap;gap:4px;border:0;border-bottom:1px solid var(--ln);padding:10px}.side>.dash-brand{flex-basis:100%}.side small{display:none}.side a{white-space:nowrap}.g4{grid-template-columns:1fr 1fr}.g3,.g2,.cs,.cg-c{grid-template-columns:1fr}.main{padding:14px}.tkt:before,.tkt:after{display:none}}
.tc{cursor:pointer}.tc:hover,.tc.ux-sel{background:var(--s2)}
.ux-toast{position:fixed;bottom:18px;inset-inline-start:50%;transform:translateX(50%);z-index:99;background:var(--ink);color:var(--bg);font-weight:600;font-size:14px;line-height:1.8;padding:10px 18px;border-radius:16px;box-shadow:var(--sh);opacity:0;transition:.2s;width:max-content;max-width:min(560px,calc(100vw - 32px));text-align:center;pointer-events:none}
.ux-toast.err{background:var(--bd);color:#fff}.ux-toast.ok{background:var(--ok);color:#fff}
.ux-toast.show{opacity:1}
.ux-modal{position:fixed;inset:0;z-index:100;background:rgba(10,18,32,.55);display:grid;place-items:center;padding:16px}
.ux-modal .card{animation:uxpop .16s ease}
@keyframes uxpop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ================= dashboard v2 (collapsible cascading nav + states) ================= */
.dash-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.dnav{margin:2px 0 0}
.dnav h6{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 4px 3px;font-size:11.5px;color:var(--mu);font-weight:700;letter-spacing:.2px;cursor:pointer;user-select:none;text-transform:uppercase}
.dnav h6 .caret{transition:transform .18s ease;font-size:10px;opacity:.75}
.dnav.open h6 .caret{transform:rotate(180deg)}
.dnav .links{display:grid;gap:2px;max-height:0;overflow:hidden;transition:max-height .24s ease,opacity .2s}
.dnav.open .links{max-height:520px;opacity:1}
.dnav a{padding:7px 11px;border-radius:9px;color:var(--mu);font-weight:500;font-size:13.5px;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:8px;transition:background .12s,color .12s}
.dnav a:hover{background:var(--bs);color:var(--ink)}
.dnav a.on{background:var(--sf);color:var(--br);font-weight:800;box-shadow:inset -3px 0 0 var(--br)}
.dnav a .ic{opacity:.85;font-size:14px;width:18px;text-align:center}
.dnav a .cnt{margin-inline-start:auto;font-size:11px;background:var(--bd);color:#fff;border-radius:99px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px}
.fab{display:none;position:fixed;bottom:16px;inset-inline-start:16px;z-index:70;width:52px;height:52px;border-radius:50%;border:0;background:var(--br);color:#fff;font-size:22px;box-shadow:var(--sh)}
@media(max-width:860px){.fab{display:grid;place-items:center}}
.drawer{position:fixed;inset-block:0;inset-inline-start:0;width:min(300px,86vw);z-index:80;background:var(--s2);overflow-y:auto;padding:18px 14px;transform:translateX(-110%);transition:transform .22s ease;box-shadow:var(--sh)}
html[dir="rtl"] .drawer{transform:translateX(110%)}
.drawer.show{transform:none}
.mask{position:fixed;inset:0;z-index:75;background:rgba(10,18,32,.4)}
.empty{padding:26px 14px;text-align:center;color:var(--mu);border:1px dashed var(--ln);border-radius:14px;font-size:13px}
.empty .cta{margin-top:12px}
.loader{display:grid;place-items:center;min-height:120px;color:var(--mu);font-size:13px}
.stat{position:relative;overflow:hidden}
.stat .grow{position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--br);border-radius:0 6px 6px 0}
.stat.sw{--s1:var(--ac)}.stat.sw .grow{background:var(--ac)}.stat.er{--s1:var(--bd)}.stat.er .grow{background:var(--bd)}
.chk{display:grid;gap:8px}
.chk .row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--ln);border-radius:12px;font-size:13px}
.chk .row.done{border-color:color-mix(in srgb,var(--ok) 40%,var(--ln));background:var(--okb)}
.chk .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--ln);display:grid;place-items:center;font-size:11px;flex:none}
.chk .row.done .dot{border-color:var(--ok);background:var(--ok);color:#fff}
.statusline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill.open{background:var(--okb);color:var(--ok)}
.pill.closed{background:var(--wnb);color:var(--wn)}
.progrow{margin:8px 0;font-size:12px}
.fbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;border:1px solid var(--ln);background:var(--sf);font-weight:600;font-size:13px;text-decoration:none;color:var(--ink);cursor:pointer}
.fbtn.p{background:var(--br);border-color:var(--br);color:#fff}
.fbtn.ghost{background:transparent}
.fbtn.sm{padding:5px 10px;font-size:12px}
.opt{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:8px 0}
.chip{border:1px solid var(--ln);background:var(--sf);border-radius:99px;padding:6px 14px;font-size:13px;cursor:pointer;font-weight:600}
.chip.on{background:var(--bs);border-color:var(--br);color:var(--br)}
.replybox{border-inline-start:3px solid var(--br);background:var(--s2);padding:10px 12px;border-radius:10px;font-size:13px;margin-top:8px}
.mrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--ln)}
.chat-scroll{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 0}
.msg{max-width:72%;padding:8px 12px;border-radius:14px;font-size:13.5px;background:var(--s2)}
.msg.me{align-self:flex-start;background:var(--bs);color:var(--ink)}
.msg.you{align-self:flex-end;background:var(--sf);border:1px solid var(--ln)}
.msg time{display:block;font-size:10.5px;color:var(--mu);margin-top:3px}
.hours-g{display:grid;gap:10px}
.hours-g .row{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}.hours-g .fi{min-width:0;width:100%;box-sizing:border-box}
@media(max-width:480px){.hours-g .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hours-g .row>:first-child{grid-column:1/-1}}

/* ================= ux core components (ux.js) ================= */
.ux-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ux-head h2{font-size:20px}.ux-head p{margin-top:2px}
.ux-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--ink);text-decoration:none;line-height:1.4;transition:background .12s,border-color .12s,filter .12s}
.btn:hover{border-color:color-mix(in srgb,var(--br) 45%,var(--ln))}
.btn.p:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn.ghost{background:transparent;border-color:transparent}
.btn.danger{background:var(--bd);border-color:var(--bd);color:#fff}
.btn.okb{background:var(--okb);border-color:transparent;color:var(--ok)}
.ux-dialog{position:relative;width:min(560px,94vw);max-height:88vh;display:flex;flex-direction:column;padding:0!important;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.ux-dialog.wide{width:min(860px,96vw)}
.ux-dhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 18px;border-bottom:1px solid var(--ln)}
.ux-dhead h3{font-size:16px}
.ux-x{font-size:20px;padding:2px 10px}
.ux-dbody{padding:16px 18px;overflow:auto;display:grid;gap:12px}
.ux-dfoot{display:flex;gap:8px;align-items:center;padding:12px 18px;border-top:1px solid var(--ln);flex-wrap:wrap}
.sp1{flex:1}
.ux-form{display:grid;gap:12px}
.ux-grid{display:grid;gap:12px}.ux-grid.c2{grid-template-columns:1fr 1fr}.ux-grid.c3{grid-template-columns:repeat(3,1fr)}.ux-grid.c4{grid-template-columns:repeat(4,1fr)}
.ux-f{display:grid;gap:5px;min-width:0}
.ux-l{font-size:12.5px;color:var(--mu);font-weight:600}
.ux-f .fi{width:100%;box-sizing:border-box}
.ux-ck{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.ux-ck input{width:17px;height:17px}
.ux-chips{display:flex;gap:6px;flex-wrap:wrap}
.jdt{display:grid;grid-template-columns:.8fr 1.3fr 1fr 1fr;gap:6px}
.jdt .fi{padding-inline:8px;min-width:0}
.kv{display:grid}.kv-r{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--ln);font-size:14px}.kv-r:last-child{border:0}
.tbl-w{overflow-x:auto;border:1px solid var(--ln);border-radius:var(--r,14px);background:var(--sf)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:start;font-size:12px;color:var(--mu);font-weight:700;padding:10px 12px;background:var(--s2);white-space:nowrap}
.tbl td{padding:10px 12px;border-top:1px solid var(--ln);vertical-align:middle}
.tbl tr:hover td{background:color-mix(in srgb,var(--s2) 55%,transparent)}
@media(max-width:700px){.tbl thead{display:none}.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%;box-sizing:border-box}.tbl tr{border-top:1px solid var(--ln);padding:6px 0}.tbl td{border:0;padding:5px 12px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;min-width:0;overflow-wrap:anywhere}.tbl td>*{min-width:0;max-width:100%}.tbl td .row{flex-wrap:wrap}.tbl td:before{content:attr(data-l);color:var(--mu);font-size:12px}}
.chart-w{display:grid;gap:4px}.chart{width:100%;height:170px;display:block}
.chart .gl{stroke:var(--ln);stroke-width:.3;vector-effect:non-scaling-stroke}
.chart .b{fill:var(--br)}.chart .b2{fill:var(--ac)}.chart .b3{fill:var(--ok)}
.chart-l{display:flex;font-size:10.5px;color:var(--mu)}.chart-l span{flex:1;text-align:center;white-space:nowrap;overflow:hidden}
.loader .spin{width:16px;height:16px;border:2px solid var(--ln);border-top-color:var(--br);border-radius:50%;display:inline-block;animation:uxspin .7s linear infinite;margin-inline-end:8px;vertical-align:-3px}
@keyframes uxspin{to{transform:rotate(360deg)}}
.empty-ic{font-size:30px;margin-bottom:6px}
.empty.err{border-color:color-mix(in srgb,var(--bd) 40%,var(--ln));color:var(--bd)}
.ux-list{display:grid;gap:10px}
.ux-item{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ux-item .grow1{flex:1;min-width:180px}
.ux-item .meta{font-size:12.5px;color:var(--mu)}
.ux-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.ux-toolbar .ux-f{min-width:150px;flex:1}
.ux-tabs{display:flex;flex-wrap:wrap;gap:0 4px;border-bottom:1px solid var(--ln)}
.ux-tabs button{border:0;background:none;padding:9px 14px;color:var(--mu);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}
.ux-tabs button.on{color:var(--br);border-bottom-color:var(--br)}
.swatch{width:14px;height:14px;border-radius:50%;display:inline-block;vertical-align:-2px;margin-inline-end:6px;border:1px solid rgba(0,0,0,.08)}
.dcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dcal-h{color:var(--mu);font-size:12px;text-align:center;font-weight:700;padding:4px 0}
.dcal-c{min-height:64px;border:1px solid var(--ln);border-radius:var(--r-sm,10px);background:var(--sf);color:var(--ink);font:inherit;padding:6px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.dcal-c:hover{border-color:var(--br)}
.dcal-c.on{border-color:var(--br);background:var(--bs)}
.dcal-c.td b{color:var(--br)}
.dcal-c.off{opacity:.45}
.dcal-c small{font-size:10.5px;color:var(--br);font-weight:700}
.dcal-c .dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.dcal-c .dots i{width:6px;height:6px;border-radius:50%;background:var(--br)}
.dcal-c .dots i.wn{background:var(--ac)}.dcal-c .dots i.ok{background:var(--ok)}.dcal-c .dots i.bd{background:var(--bd)}
@media(max-width:600px){.dcal{gap:3px}.dcal-c{min-height:46px;padding:4px 2px}.dcal-c small{display:none}.ux-grid.c2,.ux-grid.c3,.ux-grid.c4{grid-template-columns:1fr}.jdt{grid-template-columns:1fr 1.4fr 1.1fr}.jdt input[type=time]{grid-column:1/-1}}
.bk-card{display:grid;gap:8px}
.bk-card .top{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.bk-card .who{display:flex;gap:10px;align-items:center}
.bk-card .acts{display:flex;gap:6px;flex-wrap:wrap}
.notice{border-radius:var(--r,14px);padding:12px 14px;font-size:13.5px;border:1px solid var(--ln);background:var(--s2)}
.notice.wn{background:var(--wnb);border-color:color-mix(in srgb,var(--wn) 30%,transparent);color:var(--ink)}
.notice.ok{background:var(--okb);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.notice.bd{background:var(--bdb);border-color:color-mix(in srgb,var(--bd) 30%,transparent)}
.av.c1{background:#fde2ea;color:#b4004e}.av.c2{background:#e1f0ff;color:#005b9f}.av.c3{background:#e5f7ee;color:#0f6b3d}.av.c4{background:#fff1dc;color:#a05a00}.av.c5{background:#efe7ff;color:#5b21b6}
:root[data-theme="dark"] .av.c1{background:#3a1726;color:#ff9cbc}:root[data-theme="dark"] .av.c2{background:#10263f;color:#8cc4ff}:root[data-theme="dark"] .av.c3{background:#0f2f22;color:#7fe0ad}:root[data-theme="dark"] .av.c4{background:#33280f;color:#ffcf7a}:root[data-theme="dark"] .av.c5{background:#261c40;color:#c3a8ff}
.bnav-badge{margin-inline-start:auto;font-size:11px;background:var(--bd);color:#fff;border-radius:99px;min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px}
.print-only{display:none}
@media print{header,.side,.drawer,.fab,.mask,.ux-acts,.no-print{display:none!important}.fr{border:0;box-shadow:none}.print-only{display:block}body{background:#fff;color:#000}}
.ux-login{min-height:calc(100vh - 140px);display:grid;place-items:center;padding:24px 0}
.ux-login-card{width:min(420px,100%);padding:28px!important;display:grid;gap:14px}
.ux-login-card .seg{width:100%}.ux-login-card .seg button{flex:1}
.dcal-h .ws{display:none}@media(max-width:600px){.dcal-h .wl{display:none}.dcal-h .ws{display:inline}}
.dash-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 12px;border-bottom:1px solid var(--ln);margin-bottom:6px}
.dash-brand b{display:block;font-size:14px;line-height:1.4}.dash-brand small{font-size:11.5px}
.dash-brand .av{width:36px;height:36px;border-radius:11px}
.mdash{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}.mdash>*{min-width:0}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.media-it{border:1px solid var(--ln);border-radius:var(--r,14px);overflow:hidden;background:var(--sf)}
.media-it img{width:100%;height:120px;object-fit:cover;display:block;background:var(--s2)}
.media-m{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px}
.media-m .fi{padding:4px 8px;font-size:12.5px;flex:1;min-width:80px}
.mrow.unread b{color:var(--br)}
code{background:var(--s2);border-radius:6px;padding:3px 8px;font-size:12.5px;word-break:break-all}
#ux-tabs{justify-content:flex-end;gap:6px}
@media(max-width:860px){.side.dnav-side{display:none}.dash-fr{margin-top:12px}}
.dnav a .nic{width:20px;text-align:center;font-size:14px;flex:none}
.stat.k-ac .grow{background:var(--ac)}.stat.k-bd .grow{background:var(--bd)}.stat.k-ok .grow{background:var(--ok)}
.stat b{font-size:24px;margin:2px 0}
.chk-h{display:flex;justify-content:space-between;align-items:center}
.acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.gcards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media(max-width:400px){.gcards{grid-template-columns:1fr}}
/* employee panel */
.emp-wrap{max-width:760px;margin:14px auto 0;display:grid;gap:14px;padding-bottom:84px}
.emp-head{display:flex;align-items:center;gap:12px}
.emp-head a{position:relative}.emp-head .bnav-badge{position:absolute;top:-6px;inset-inline-end:-6px}
.emp-tabs{position:fixed;bottom:0;inset-inline:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);background:color-mix(in srgb,var(--sf) 92%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--ln);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
.emp-tabs a{display:grid;justify-items:center;gap:1px;padding:7px 2px;color:var(--mu);text-decoration:none;font-size:12px;font-weight:600;border-radius:var(--r-sm,10px)}
.emp-tabs a .i{font-size:19px}
.emp-tabs a.on{color:var(--br);background:var(--bs)}
@media(min-width:900px){.emp-tabs{inset-inline:calc(50% - 380px);bottom:12px;border:1px solid var(--ln);border-radius:var(--r,14px);box-shadow:var(--sh)}}
.emp-wrap .g3{grid-template-columns:repeat(3,1fr)}.emp-wrap .g4{grid-template-columns:1fr 1fr}
.emp-wrap .stat{padding:12px}.emp-wrap .stat b{font-size:20px}
@media(max-width:760px){#cust-side{display:none}}
/* ux map */
.uxmap{position:relative;height:360px;overflow:hidden;border-radius:var(--r,14px);border:1px solid var(--ln);background:#e8ecef;touch-action:none;user-select:none;cursor:grab}
.uxmap:active{cursor:grabbing}
.uxmap-tiles img{position:absolute;left:0;top:0;width:256px;height:256px;max-width:none}
:root[data-theme="dark"] .uxmap{background:#1c2128}
:root[data-theme="dark"] .uxmap-tiles{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9)}
.uxmap-marks{position:absolute;inset:0;pointer-events:none}
.uxmap-mk{position:absolute;left:0;top:0;pointer-events:auto;width:0;height:0}
.uxmap-mk .pin{position:absolute;left:-17px;top:-40px;width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--pin,var(--br));box-shadow:0 4px 12px rgba(0,0,0,.3);display:grid;place-items:center;border:2px solid #fff}
.uxmap-mk .pin>*{transform:rotate(45deg);font-size:15px;line-height:1}
.uxmap-mk .lbl{position:absolute;top:-2px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11.5px;background:var(--sf);color:var(--ink);padding:1px 7px;border-radius:99px;box-shadow:0 2px 6px rgba(0,0,0,.18);direction:rtl}
.uxmap-mk.me .pin{width:18px;height:18px;left:-9px;top:-9px;border-radius:50%;transform:none;background:#2e7dff;box-shadow:0 0 0 6px rgba(46,125,255,.25)}
.uxmap-mk.sel .pin{transform:rotate(-45deg) scale(1.2)}
.uxmap-ctl{position:absolute;top:10px;left:10px;display:grid;gap:4px;z-index:2}
.uxmap-ctl button{width:34px;height:34px;border-radius:9px;border:1px solid var(--ln);background:var(--sf);color:var(--ink);font-size:18px;font-weight:700;box-shadow:var(--sh-sm)}
.uxmap-attr{position:absolute;bottom:2px;left:4px;font-size:10px;color:#555;background:rgba(255,255,255,.75);padding:0 5px;border-radius:4px;z-index:2}
.near-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;align-items:start}
.near-layout .uxmap{height:520px;position:sticky;top:70px}
.near-list{display:grid;gap:10px;max-height:520px;overflow:auto}
.near-item{cursor:pointer}.near-item.on{border-color:var(--br);box-shadow:0 0 0 2px var(--bs)}
@media(max-width:860px){.near-layout{grid-template-columns:1fr}.near-layout .uxmap{height:340px;position:relative;top:0}.near-list{max-height:none}}
.uxnav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.travel-chip{margin-top:8px;font-size:12.5px;color:var(--br);font-weight:600}
.travel-info{margin:10px 0}
.card.flash{box-shadow:0 0 0 3px var(--bs);border-color:var(--br);transition:box-shadow .3s}
.ux-form h4{margin:14px 0 8px;font-size:14px}