@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
/* ================= tokens — tayidshod palette ================= */
:root{
  --bg:#080808;--card:#18181A;--card2:#111112;--line:#222225;--line2:#2E2E33;
  --text:#FFFFFF;--muted:#A1A1AA;--dim:#8E8E96;
  --lime:#4ADE80;--lime-d:#16A34A;--lime-bg:#0F2A1A;--lime-line:#166534;
  --red:#FF8B8B;--red-bg:#2A1414;--amber:#FF8B8B;--amber-bg:#2A1414;--blue:#FFFFFF;
  --r:22px;--r2:14px;--glass:rgba(18,18,20,.66);
  --ease:cubic-bezier(.32,.72,0,1);
  --rail:76px;--rail-open:272px;
  --glass-side:rgba(30,30,33,.42);--glass-side-open:rgba(30,30,33,.52);--glass-top:rgba(18,18,20,.66);--glass-edge:rgba(255,255,255,.08);--hi:rgba(255,255,255,.07);
  --hover:rgba(255,255,255,.07);--hover2:rgba(255,255,255,.1);--hover-row:rgba(255,255,255,.025);--btn:#1F1F22;--btn-h:#26262A;--line3:#3F3F46;--seg-on:#2A2A2E;
  --sheet:rgba(28,28,31,.95);--toast:rgba(38,38,42,.92);--field:rgba(8,8,8,.45);--nav-t:#D4D4D8;--nb-ring:#1C1C1F;--shadow:rgba(0,0,0,.35);--shadow-l:rgba(0,0,0,.55);
  --qa1:#1C1C1F;--qa2:#151517;--hl:#132317;--busy:#0B1F12;--lime-h:#62E895;--av1:#34343A;--scrim:rgba(0,0,0,.5);--glow1:rgba(74,222,128,.06);--glow2:rgba(255,255,255,.035);
  --on-lime:#06210F;--on-red:#2A0B0B;--red-line:#4A2424;--lime-soft:rgba(74,222,128,.13);
}
html[data-theme="light"]{
  --bg:#F5F5F7;--card:#FFFFFF;--card2:#F4F4F5;--line:#E4E4E7;--line2:#D4D4D8;
  --text:#080808;--muted:#52525B;--dim:#6B6B73;
  --lime:#16A34A;--lime-d:#15803D;--lime-bg:#DCFCE7;--lime-line:#86EFAC;
  --red:#DC2626;--red-bg:#FEE2E2;--amber:#DC2626;--amber-bg:#FEE2E2;--blue:#080808;
  --glass-side:rgba(255,255,255,.55);--glass-side-open:rgba(255,255,255,.74);--glass-top:rgba(255,255,255,.72);--glass-edge:rgba(0,0,0,.08);--hi:rgba(255,255,255,.65);
  --hover:rgba(0,0,0,.05);--hover2:rgba(0,0,0,.08);--hover-row:rgba(0,0,0,.02);--btn:#FFFFFF;--btn-h:#F4F4F5;--line3:#A1A1AA;--seg-on:#FFFFFF;
  --sheet:rgba(255,255,255,.96);--toast:rgba(28,28,30,.92);--field:rgba(255,255,255,.85);--nav-t:#27272A;--nb-ring:#FFFFFF;--shadow:rgba(0,0,0,.08);--shadow-l:rgba(0,0,0,.16);
  --qa1:#FFFFFF;--qa2:#FAFAFA;--hl:#ECFDF3;--busy:#F0FDF4;--lime-h:#15803D;--av1:#E4E4E7;--scrim:rgba(0,0,0,.28);--glow1:rgba(22,163,74,.07);--glow2:rgba(0,0,0,.025);
  --on-lime:#FFFFFF;--on-red:#FFFFFF;--red-line:#FCA5A5;--lime-soft:rgba(22,163,74,.11);
  color-scheme:light;
}
html[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg);scrollbar-color:var(--line2) transparent;transition:background-color .3s ease}
html,body{margin:0;color:var(--text);font-family:"Vazirmatn",Tahoma,sans-serif;font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
body{direction:rtl;min-height:100vh;background:
  radial-gradient(1100px 620px at 100% -12%,var(--glow1),transparent 60%),
  radial-gradient(900px 700px at -10% 112%,var(--glow2),transparent 60%),var(--bg);background-attachment:fixed}
::selection{background:rgba(74,222,128,.28)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:2px solid var(--bg)}::-webkit-scrollbar-track{background:transparent}
a{color:var(--lime);text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:where(a,button,select,[tabindex]):focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
svg[viewBox="0 0 24 24"]{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
kbd{font-family:inherit;font-size:11.5px;line-height:1.6;padding:1px 7px;border-radius:7px;border:1px solid var(--line2);border-bottom-width:2px;background:var(--card);color:var(--muted);direction:ltr;white-space:nowrap}

/* ================= layout ================= */
.app{min-height:100vh;overflow-x:clip}
.main{min-width:0;padding-right:calc(var(--rail) + 36px);transition:padding .46s var(--ease)}
body.pinned .main{padding-right:calc(var(--rail-open) + 36px)}
.page{padding:22px 0 56px 24px;display:flex;flex-direction:column;gap:20px;max-width:1520px;width:100%}
.page.enter{animation:pagein .42s var(--ease)}
.view{display:flex;flex-direction:column;gap:20px;min-width:0}

/* ================= glass side rail (iOS) ================= */
.side{position:fixed;top:12px;bottom:12px;right:12px;width:var(--rail);z-index:45;border-radius:28px;overflow:hidden;
  background:var(--glass-side);-webkit-backdrop-filter:blur(32px) saturate(185%);backdrop-filter:blur(32px) saturate(185%);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--hi),0 10px 40px var(--shadow);
  transition:width .46s var(--ease),background-color .3s ease,box-shadow .46s var(--ease),transform .46s var(--ease)}
.side::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,var(--hi),transparent 26%)}
.side.open{width:var(--rail-open);background:var(--glass-side-open);box-shadow:inset 0 1px 0 var(--hi),0 28px 80px var(--shadow-l)}
.side-in{position:relative;width:100%;height:100%;display:flex;flex-direction:column;padding:12px 0}
.side .ico{position:relative;width:56px;height:40px;display:grid;place-items:center;flex-shrink:0}
.side .ico svg{width:21px;height:21px;stroke-width:1.75}
.side .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;opacity:0;transform:translateX(10px);transition:opacity .16s ease,transform .42s var(--ease)}
.side.open .lbl,.side.mopen .lbl{opacity:1;transform:none;transition-delay:.06s,0s}
.brand{display:flex;align-items:center;height:52px;margin:0 10px 6px;border-radius:16px;flex-shrink:0}
.brand .ico{height:52px}
.brand img.ic{width:36px;height:36px;border-radius:10px;display:block}
.brand img.wm{height:26px;flex:0 0 auto}
.nav{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;display:flex;flex-direction:column;gap:2px;padding:2px 0}
.nav::-webkit-scrollbar{display:none}
.nav a,.nav-btn{position:relative;display:flex;align-items:center;height:40px;margin:0 10px;border-radius:14px;color:var(--nav-t);font-size:14.5px;flex-shrink:0;border:0;background:transparent;cursor:pointer;text-align:right;padding:0;transition:background-color .2s ease,color .2s ease}
.nav a:hover,.nav-btn:hover{background:var(--hover);color:var(--text)}
.nav a:active,.nav-btn:active{background:var(--hover2)}
.nav a.on{background:var(--lime-soft);color:var(--lime)}
.nav a.on .lbl{font-weight:700}
.nav-sec{position:relative;height:22px;flex-shrink:0;margin-top:6px}
.nav-sec .lbl{display:block;padding:3px 26px 0 0;font-size:11.5px;font-weight:600;color:var(--dim);letter-spacing:.2px}
.nav-sec::before{content:"";position:absolute;right:28px;top:11px;width:20px;height:1px;background:var(--line2);transition:opacity .2s ease}
.side.open .nav-sec::before,.side.mopen .nav-sec::before{opacity:0}
.nb{position:absolute;top:2px;left:8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--lime);color:var(--on-lime);font-size:10.5px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--nb-ring)}
.nb.warn{background:var(--red);color:var(--on-red)}
.nav.fb{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent)}
.nav.ft{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18px);mask-image:linear-gradient(to bottom,transparent,#000 18px)}
.nav.ft.fb{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 18px,#000 calc(100% - 34px),transparent)}
.side-foot{padding-top:6px;margin-top:4px;border-top:1px solid var(--glass-edge);flex-shrink:0}
.nav-btn{color:var(--muted);font-size:13.5px}
.nav-btn[aria-pressed="true"]{color:var(--lime)}
.me{display:flex;align-items:center;height:50px;margin:2px 10px 0}
.av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--av1),var(--card));border:1px solid var(--line2);display:grid;place-items:center;font-weight:800;font-size:14px}
.me .lbl b{display:block;font-size:13.5px;line-height:1.4}
.me .lbl small{display:block;color:var(--dim);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.side .me-a{flex:0 0 auto;display:flex;gap:2px;margin-left:4px;overflow:visible}
.mini{width:34px;height:34px;border-radius:11px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background-color .2s,color .2s}
.mini:hover{background:var(--hover2);color:var(--text)}
.mini.on{color:var(--lime);background:var(--lime-soft)}
.mini svg{width:18px;height:18px}
.scrim{position:fixed;inset:0;z-index:44;background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s ease}
body.scrim-on .scrim{opacity:1;pointer-events:auto}

/* ================= top bar ================= */
.top{position:sticky;top:12px;z-index:30;margin:12px 0 0 24px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:22px;
  background:var(--glass-top);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
  border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--hi),0 10px 30px var(--shadow)}
.top .sp{flex:1}
.cmdk{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 14px;border-radius:14px;border:1px solid var(--line2);background:var(--field);color:var(--dim);cursor:pointer;width:min(420px,38vw);font-size:14px;transition:border-color .2s,color .2s}
.cmdk:hover{border-color:var(--line3);color:var(--muted)}
.cmdk span{flex:1;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--hover-row);color:var(--text);font-size:13.5px;font-weight:600;white-space:nowrap}
.pill.ok{color:var(--lime);border-color:var(--lime-line);background:var(--lime-soft)}
.pill.bad{color:var(--red);border-color:var(--red-line);background:var(--red-bg)}
.live{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 2.2s infinite}
.pill.sel{cursor:pointer;padding-left:10px}
.pill.sel select{background:transparent;border:0;outline:none;font-weight:600;cursor:pointer;padding:0;color:var(--text)}
.pill.sel:focus-within{border-color:var(--lime-line)}
option{background:var(--card);color:var(--text)}
.date{color:var(--dim);font-size:13px;white-space:nowrap}
.icon-btn{width:42px;height:42px;border-radius:14px;border:1px solid var(--line2);background:var(--card2);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.menu-btn{display:none}

/* ================= page head + quick actions ================= */
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:6px 2px 0}
.phead h1{margin:0;font-size:28px;font-weight:800;line-height:1.3;letter-spacing:-.2px}
.phead p{margin:4px 0 0;color:var(--muted);font-size:14.5px;max-width:760px}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.qa{display:flex;align-items:center;gap:14px;text-align:right;padding:16px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,var(--qa1),var(--qa2));cursor:pointer;color:var(--text);transition:transform .25s var(--ease),border-color .2s ease}
.qa:hover{border-color:var(--lime-line);transform:translateY(-2px)}
.qa:active{transform:scale(.98)}
.qi{width:46px;height:46px;border-radius:14px;background:var(--lime-bg);color:var(--lime);display:grid;place-items:center;flex-shrink:0}
.qi svg{width:22px;height:22px}
.qt b{display:block;font-size:15.5px}
.qt small{display:block;color:var(--muted);font-size:12.5px}

/* ================= components ================= */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:inset 0 1px 0 var(--hover-row),0 1px 2px var(--shadow)}
.card h2,.card h3{margin:0 0 16px;font-size:16.5px;font-weight:700}
.card h2 small,.card h3 small{font-weight:500;color:var(--muted);font-size:13px;margin-right:6px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.between{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:10px}
.muted{color:var(--muted)}.dim{color:var(--dim)}
.lime{color:var(--lime)}.red{color:var(--red)}.amber{color:var(--amber)}
.kpi .l{display:flex;align-items:center;font-size:13.5px;color:var(--muted)}
.kpi .v{font-size:clamp(20px,1.85vw,26px);font-weight:800;line-height:1.35;margin-top:4px}
.kpi .s{font-size:12.5px;color:var(--dim);margin-top:2px}
.kpi.hl{border-color:var(--lime-line);background:linear-gradient(180deg,var(--hl),var(--card) 70%)}
.tip{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;border:1px solid var(--line2);color:var(--dim);font-size:10.5px;font-weight:800;line-height:1;cursor:help;flex-shrink:0;margin-right:6px;vertical-align:middle;transition:color .2s,border-color .2s}
.tip:hover,.tip:focus{color:var(--text);border-color:var(--muted);outline:none}
.tipbox{position:fixed;top:0;left:0;z-index:95;max-width:260px;padding:10px 13px;border-radius:14px;background:rgba(40,40,44,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:13px;line-height:1.75;box-shadow:0 12px 30px rgba(0,0,0,.45);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .25s var(--ease)}
.tipbox.on{opacity:1;transform:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:14px;border:1px solid var(--line2);background:var(--btn);color:var(--text);font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),background-color .2s ease,border-color .2s ease}
.btn:hover{background:var(--btn-h);border-color:var(--line3)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.pri{background:var(--lime);border-color:var(--lime);color:var(--on-lime);box-shadow:0 6px 22px rgba(74,222,128,.16)}
.btn.pri:hover{background:var(--lime-h);border-color:var(--lime-h)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--hover);color:var(--text)}
.btn.danger{color:var(--red);border-color:var(--red-line)}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px;border-radius:11px}
.btn svg{width:17px;height:17px;stroke-width:2}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--line);color:var(--muted);white-space:nowrap}
.badge svg{width:13px;height:13px}
.badge.lime{background:var(--lime-bg);color:var(--lime)}
.badge.red{background:var(--red-bg);color:var(--red)}
.badge.amber{background:var(--amber-bg);color:var(--amber)}
.badge.blue{background:var(--line2);color:var(--text)}
.tabs{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px;background:var(--card2);border:1px solid var(--line);border-radius:15px;width:fit-content;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex-shrink:0;border:0;background:transparent;color:var(--muted);min-height:38px;padding:0 16px;border-radius:11px;cursor:pointer;font-weight:600;transition:background-color .2s ease,color .2s ease}
.tabs button:hover{color:var(--text)}
.tabs button.on{background:var(--seg-on);color:var(--text);font-weight:700;box-shadow:0 1px 3px var(--shadow-l),inset 0 1px 0 var(--hover)}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-weight:500;color:var(--dim);font-size:12.5px;text-align:right;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:13px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr{transition:background-color .15s ease}
tbody tr:hover td{background:var(--hover-row)}
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
input.i,select.i,textarea.i{width:100%;min-height:44px;border-radius:13px;border:1px solid var(--line2);background:var(--card2);padding:0 13px;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s}
input.i::placeholder,textarea.i::placeholder{color:var(--dim)}
textarea.i{padding:10px 13px;min-height:84px}
input.i:focus,select.i:focus,textarea.i:focus{border-color:var(--lime-line);box-shadow:0 0 0 4px rgba(74,222,128,.13)}
.search{min-width:240px;max-width:360px;flex:1}
.bar{height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--lime);border-radius:6px;transition:width .6s var(--ease)}
.bars{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:10px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars .b i{display:block;width:100%;max-width:38px;border-radius:9px 9px 4px 4px;background:var(--line2)}
.bars .b.on i{background:var(--lime)}
.bars .b span{font-size:11.5px;color:var(--muted)}
.list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}
.empty{padding:34px;text-align:center;color:var(--muted)}
.switch{position:relative;width:50px;height:30px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--line2);border-radius:999px;cursor:pointer;transition:background-color .25s ease}
.switch span:before{content:"";position:absolute;width:26px;height:26px;right:2px;top:2px;background:#FFFFFF;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .35s var(--ease)}
.switch input:checked+span{background:var(--lime)}
.switch input:checked+span:before{transform:translateX(-20px)}
.switch input:focus-visible+span{outline:2px solid var(--lime);outline-offset:2px}

/* ================= POS ================= */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:16px;align-items:start}
.cats{display:flex;gap:8px;flex-wrap:wrap}
.cats button{min-height:42px;padding:0 16px;border-radius:13px;border:1px solid var(--line2);background:var(--card2);cursor:pointer;font-weight:700;color:var(--muted);transition:background-color .2s,color .2s}
.cats button:hover{color:var(--text)}
.cats button.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px}
.item{position:relative;text-align:right;border:1px solid var(--line);background:var(--card);border-radius:20px;padding:16px;cursor:pointer;min-height:124px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;transition:transform .18s var(--ease),border-color .2s}
.item:hover{border-color:var(--lime-line)}
.item:active{transform:scale(.97)}
.item .n{font-weight:700;font-size:15.5px;line-height:1.5}
.item .p{color:var(--muted);font-size:13px}
.item .w{position:absolute;top:10px;left:10px}
.item[aria-disabled="true"]{cursor:not-allowed}
.cart{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px}
.cart-lines{max-height:300px;overflow-y:auto}
.cl{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}
.cl .n{flex:1;min-width:0}
.cl .n b{display:block;font-weight:700;font-size:14px}
.cl .n span{font-size:12px;color:var(--muted)}
.qty{display:flex;align-items:center;gap:4px}
.qty button{width:32px;height:32px;border-radius:10px;border:1px solid var(--line2);background:var(--card2);cursor:pointer;color:var(--text)}
.qty button:active{transform:scale(.92)}
.tot .list-row{padding:6px 0;border:0;font-size:14px}
.tot .grand{font-size:22px;font-weight:800;border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg button{min-height:42px;border-radius:13px;border:1px solid var(--line2);background:var(--card2);cursor:pointer;font-weight:700;color:var(--muted);transition:background-color .2s,color .2s,border-color .2s}
.seg button.on{background:var(--lime-bg);border-color:var(--lime-line);color:var(--lime)}
.pay{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pay .btn{min-width:0;padding:6px 8px;white-space:normal;line-height:1.3;font-size:13.5px;flex-direction:column;gap:0;text-align:center}
.pay .btn small{font-size:10.5px;font-weight:600;opacity:.75}
.ph{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0}

/* ================= tables ================= */
.floor{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.tbl{border-radius:20px;border:1px solid var(--line);background:var(--card);padding:14px;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;text-align:right;transition:transform .18s var(--ease),border-color .2s}
.tbl:hover{border-color:var(--line3)}
.tbl:active{transform:scale(.97)}
.tbl .t{font-size:20px;font-weight:800}
.tbl.busy{border-color:var(--lime-line);background:linear-gradient(180deg,var(--busy),var(--card))}
.tbl.res{border-color:var(--line3);border-style:dashed}
.tbl.bill{border-color:var(--red-line)}

/* ================= sheets, palette, toasts ================= */
.modal-bg{position:fixed;inset:0;background:var(--scrim);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s ease}
.modal{position:relative;background:var(--sheet);-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);border:1px solid var(--glass-edge);border-radius:28px;width:min(640px,100%);max-height:90vh;overflow-y:auto;padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px var(--shadow-l);animation:pop .34s var(--ease);transition:transform .35s var(--ease)}
.modal.wide{width:min(900px,100%)}
.modal h3{margin:0;font-size:19px}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;counter-reset:s}
.steps li{position:relative;padding:13px 54px 13px 14px;background:var(--card2);border:1px solid var(--line);border-radius:16px;counter-increment:s;line-height:1.8}
.steps li::before{content:counter(s,persian);position:absolute;right:13px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--lime-bg);color:var(--lime);display:grid;place-items:center;font-weight:800;font-size:14px}
.hintbox{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--lime-soft);border:1px solid var(--lime-line);font-size:13.5px;color:var(--nav-t)}
.hintbox svg{color:var(--lime)}
.cmd-bg{position:fixed;inset:0;z-index:70;background:var(--scrim);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;animation:fade .15s ease}
.cmd{width:min(620px,100%);border-radius:24px;background:var(--sheet);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);border:1px solid var(--glass-edge);box-shadow:0 30px 90px var(--shadow-l);overflow:hidden;animation:pop .3s var(--ease)}
.cmd-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.cmd-in svg{width:20px;height:20px;color:var(--muted)}
.cmd-in input{flex:1;min-width:0;background:transparent;border:0;outline:none;font-size:17px;color:var(--text)}
.cmd-in input::placeholder{color:var(--dim)}
.cmd-list{max-height:56vh;overflow-y:auto;padding:8px}
.cmd-sec{font-size:12px;color:var(--dim);padding:10px 12px 4px}
.cmd-it{display:flex;align-items:center;gap:12px;width:100%;text-align:right;padding:9px 12px;border-radius:14px;border:0;background:transparent;color:var(--text);cursor:pointer}
.cmd-it.on{background:var(--hover)}
.cmd-it>svg{width:16px;height:16px;color:var(--dim);opacity:0;transition:opacity .15s}
.cmd-it.on>svg{opacity:1}
.ci{width:38px;height:38px;border-radius:12px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0;color:var(--muted);transition:color .15s,background-color .15s,border-color .15s}
.cmd-it.on .ci{color:var(--lime);border-color:var(--lime-line);background:var(--lime-bg)}
.ct{flex:1;min-width:0}
.ct b{display:block;font-size:14.5px;font-weight:700}
.ct small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-foot{display:flex;gap:18px;padding:10px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.cmd-foot kbd{margin-left:3px}
.toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;background:var(--toast);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);color:#fff;border:1px solid rgba(255,255,255,.1);padding:10px 18px 10px 12px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:0 14px 40px rgba(0,0,0,.45);animation:tin .4s var(--ease)}
.toast.out{animation:tout .26s ease forwards}
.ti{width:24px;height:24px;border-radius:50%;background:#4ADE80;color:#06210F;display:grid;place-items:center;flex-shrink:0}
.ti svg{width:14px;height:14px;stroke-width:3}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tin{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

/* ================= misc screens ================= */
.ticket{background:#fff;color:#111;border-radius:6px;padding:16px;font-size:13px;width:280px;font-family:"Vazirmatn",monospace}
.ticket h4{margin:0 0 6px;text-align:center;font-size:15px}
.ticket .dash{border-top:1px dashed #999;margin:8px 0}
.ticket .r{display:flex;justify-content:space-between;gap:8px}
.phone{width:300px;height:600px;border-radius:42px;border:8px solid #2E2E33;background:var(--bg);overflow:hidden;display:flex;flex-direction:column;flex-shrink:0}
.phone .ph-in{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.qr{width:150px;height:150px;background:#fff;border-radius:14px;padding:10px}
.step{display:flex;gap:6px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line2)}
.dot.on{background:var(--lime)}
.call{position:fixed;top:96px;left:24px;z-index:55;width:330px;border-radius:24px;border:1px solid var(--lime-line);background:var(--sheet);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:pop .35s var(--ease)}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:right}

/* ================= responsive ================= */
@media (max-width:1240px){.date{display:none}}
@media (max-width:1100px){.pos{grid-template-columns:1fr}.cart{position:static}}
@media (max-width:860px){
  .main,body.pinned .main{padding-right:0}
  .side{width:var(--rail-open);transform:translateX(calc(100% + 20px))}
  .side.mopen{transform:none;background:var(--glass-side-open)}
  .menu-btn{display:grid}
  .top{margin:10px 10px 0;top:10px}
  .page{padding:16px 12px 48px}
  .cmdk{width:auto;flex:1;min-width:0}
  .cmdk kbd,.hide-s,.pill.sel{display:none}
  .top{gap:8px}
  .top .pill.ok,.top .pill.bad{font-size:0;gap:0;padding:0 14px}
  .top .btn.sm{padding:0 10px}
  #theme{display:none}
  body.titled .top-title{max-width:110px}
  .phead{flex-direction:column;align-items:flex-start}
  .phead h1{font-size:24px}
  .search{min-width:0}
  .call{left:12px;right:12px;width:auto}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ================= v3: roles, setup, numpad, sheets, ctx, tabs, themes ================= */
.wmw{display:flex;align-items:center}
.wm-l{display:none}
html[data-theme="light"] .wm-d{display:none}
html[data-theme="light"] .wm-l{display:block}
.me-b{display:flex;align-items:center;flex:1;min-width:0;background:transparent;border:0;padding:0;margin:0;cursor:pointer;color:inherit;text-align:right;border-radius:14px;transition:background-color .2s}
.me-b:hover{background:var(--hover)}
.role-pill{cursor:pointer;font-family:inherit}
.role-pill:hover{border-color:var(--line3)}
.role-pill svg{width:16px;height:16px}
.icon-btn{color:var(--text)}
.icon-btn:hover{border-color:var(--line3)}
.top-title{font-weight:800;font-size:16px;white-space:nowrap;overflow:hidden;max-width:0;opacity:0;transform:translateY(6px);transition:max-width .4s var(--ease),opacity .25s ease,transform .4s var(--ease)}
body.titled .top-title{max-width:260px;opacity:1;transform:none;margin-left:4px}
.phead h1{transition:opacity .25s ease}
body.titled .phead h1{opacity:.25}
.opt-list{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--card2);cursor:pointer;text-align:right;color:var(--text);transition:border-color .2s,background-color .2s}
.opt:hover{border-color:var(--line3)}
.opt.on{border-color:var(--lime-line);background:var(--lime-soft)}
.opt.on .ci{color:var(--lime);border-color:var(--lime-line);background:var(--lime-bg)}
.opt>svg{color:var(--lime)}
.setup{display:flex;flex-direction:column;gap:14px;border-color:var(--lime-line)}
.setup-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.sstep{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--card2);cursor:pointer;text-align:right;color:var(--text);transition:border-color .2s,transform .2s var(--ease)}
.sstep:hover{border-color:var(--line3)}
.sstep:active{transform:scale(.98)}
.sstep .sc{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line2);font-weight:800;flex-shrink:0;color:var(--muted)}
.sstep .sc svg{width:16px;height:16px;stroke-width:2.6}
.sstep.done .sc{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
.sstep.done b{color:var(--muted);font-weight:600}
.sstep.next{border-color:var(--lime-line);box-shadow:0 0 0 3px var(--lime-soft)}
.sstep.next .sc{border-color:var(--lime);color:var(--lime)}
.sstep .ct small{display:block;color:var(--muted);font-size:12px;line-height:1.5}
/* till */
.adj-row{flex-wrap:nowrap}
.btn.adj{flex:1;justify-content:space-between;font-weight:600;min-height:46px}
.btn.adj b{font-size:16px}
.qn{min-width:34px;height:32px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text);font-weight:800;cursor:pointer;font-family:inherit}
.qn:hover{border-color:var(--line2)}
.pay.pay-main{grid-template-columns:repeat(3,1fr) 64px}
.pay .btn small{display:block}
#morepay{color:var(--muted)}
#morepay.on-more{color:var(--text);border-color:var(--line3)}
.pay-more{animation:pagein .3s var(--ease)}
.kb-strip{display:none}
body.kb .kb-strip{display:block;animation:pagein .3s var(--ease)}
.np{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.np-k{height:62px;border-radius:18px;border:1px solid var(--line);background:var(--card2);font-size:24px;font-weight:700;cursor:pointer;color:var(--text);font-family:inherit;transition:transform .12s var(--ease),background-color .15s}
.np-k:hover{background:var(--btn-h)}
.np-k:active{transform:scale(.94);background:var(--hover2)}
.np-k.fn{font-size:16px;color:var(--muted)}
.np-disp{font-size:46px;font-weight:800;text-align:center;line-height:1.3;padding:6px 0}
.np-disp small{font-size:22px;color:var(--muted);margin-right:4px}
.np-chips{justify-content:center}
.modal:has(.np){width:min(400px,100%)}
/* bottom sheet on tablets / phones */
.grab{display:none}
@media (max-width:900px),(pointer:coarse){
  .modal-bg{align-items:flex-end;padding:0}
  .modal,.modal.wide{width:100%;max-width:760px;border-radius:28px 28px 0 0;max-height:92vh;padding:12px 22px calc(22px + env(safe-area-inset-bottom));animation:sheetup .42s var(--ease);border-bottom:0}
  .modal:has(.np){width:100%;max-width:520px}
  .grab{display:block;width:40px;height:5px;border-radius:3px;background:var(--line3);margin:2px auto 6px;flex-shrink:0;touch-action:none;cursor:grab}
  .modal>.grab+.row{touch-action:none}
}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
/* context menu */
.ctx{position:fixed;z-index:85;min-width:210px;padding:6px;border-radius:16px;background:var(--sheet);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);border:1px solid var(--glass-edge);box-shadow:0 18px 50px var(--shadow-l);animation:pop .22s var(--ease)}
.ctx button{display:flex;align-items:center;gap:10px;width:100%;text-align:right;padding:9px 12px;border:0;border-radius:11px;background:transparent;color:var(--text);cursor:pointer;font-size:14px;font-family:inherit}
.ctx button:hover,.ctx button:focus{background:var(--hover);outline:none}
.ctx button svg{width:16px;height:16px;color:var(--muted)}
/* sliding tab highlight */
.has-ind{position:relative}
.tab-ind{position:absolute;left:0;top:0;border-radius:11px;background:var(--seg-on);box-shadow:0 1px 3px var(--shadow-l),inset 0 1px 0 var(--hover);transition:transform .4s var(--ease),width .4s var(--ease),height .4s var(--ease);pointer-events:none;z-index:0}
.has-ind>button{position:relative;z-index:1}
.tabs.has-ind button.on{background:transparent;box-shadow:none}
.seg .tab-ind{background:var(--lime-bg);border:1px solid var(--lime-line);border-radius:13px;box-shadow:none}
.seg.has-ind button.on{background:transparent;border-color:transparent}
/* undo toast */
.toast.has-undo{padding-left:8px}
.toast .ti svg{width:13px;height:13px}
.undo{display:inline-flex;align-items:center;gap:6px;margin-right:6px;padding:6px 12px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#FFFFFF;font-weight:700;cursor:pointer;font-family:inherit;font-size:13px}
.undo:hover{background:rgba(255,255,255,.22)}
.undo svg{width:14px;height:14px}
/* loading shimmer */
.page{position:relative}
.skel-ov{position:absolute;inset:0;padding:inherit;background:var(--bg);z-index:6;display:flex;flex-direction:column;gap:18px;transition:opacity .3s ease}
.skel-ov.out{opacity:0;pointer-events:none}
.sk{background:linear-gradient(100deg,var(--card) 40%,var(--btn-h) 50%,var(--card) 60%);background-size:220% 100%;animation:shimmer 1.2s linear infinite;border:1px solid var(--line)}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-100% 0}}
/* iOS grouped Settings */
.v-config .card{padding:6px 0;border-radius:20px;overflow:hidden}
.v-config .card>h2{padding:12px 18px 6px;margin:0;font-size:13px;font-weight:600;color:var(--dim)}
.v-config .card>.grid.g2{display:block}
.v-config label.f{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;padding:8px 18px;min-height:54px;border-bottom:1px solid var(--line);color:var(--text);font-size:14.5px}
.v-config label.f .i{width:auto;min-width:160px;max-width:55%;flex:0 1 260px;text-align:left;background:transparent;border-color:transparent;min-height:38px}
.v-config label.f .i:hover{border-color:var(--line2)}
.v-config label.f .i:focus{background:var(--card2);border-color:var(--lime-line)}
.v-config label.f>.dim{flex-basis:100%;font-size:12px}
.v-config .list-row{padding:12px 18px;min-height:54px}
.v-config .card>.btn,.v-config .card>.row{margin:12px 18px}
.v-config .card>.tbl-wrap{padding:0 6px}
.v-config .card.col{padding:6px 0;gap:0}
.v-config .card.col>*{padding-left:18px;padding-right:18px}
/* tables become cards on phones */
@media (max-width:700px){
  .tbl-wrap table:not(.matrix),.tbl-wrap table:not(.matrix) tbody,.tbl-wrap table:not(.matrix) tr,.tbl-wrap table:not(.matrix) td{display:block}
  .tbl-wrap table:not(.matrix) thead{display:none}
  .tbl-wrap table:not(.matrix) tbody tr{border:1px solid var(--line);border-radius:18px;margin-bottom:10px;padding:8px 14px;background:var(--card2);transition:transform .25s var(--ease);touch-action:pan-y;position:relative}
  .tbl-wrap table:not(.matrix) td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:6px 0;white-space:normal;text-align:left}
  .tbl-wrap table:not(.matrix) td::before{content:attr(data-label);color:var(--dim);font-size:12.5px;text-align:right;flex-shrink:0}
  .tbl-wrap table:not(.matrix) td[data-label=""]::before{display:none}
  .tbl-wrap table:not(.matrix) td.empty{justify-content:center}
  .tbl-wrap table:not(.matrix) tr.has-act td.act{display:none;justify-content:flex-start;flex-wrap:wrap;gap:8px;padding-top:10px;margin-top:6px;border-top:1px solid var(--line)}
  .tbl-wrap table:not(.matrix) tr.has-act td.act::before{display:none}
  .tbl-wrap table:not(.matrix) tr.has-act.show-act td.act{display:flex;animation:pagein .25s var(--ease)}
  .tbl-wrap table:not(.matrix) tr.has-act::after{content:"‹";position:absolute;left:12px;top:8px;color:var(--dim);font-size:16px}
  .tbl-wrap table:not(.matrix) tr.has-act.show-act::after{content:"›"}
  .tbl-wrap table:not(.matrix) tr.has-act td:first-child{padding-left:22px}
  tbody tr:hover td{background:transparent}
}
@media (max-width:1240px){.role-pill span{display:none}}

/* ================= v4: sidebar motion (iOS spring) ================= */
/* closing: quick and clean — labels leave first, then the bar folds */
.side{transition:width .34s cubic-bezier(.4,0,.2,1) .05s,background-color .3s ease,box-shadow .34s ease .05s,transform .34s cubic-bezier(.4,0,.2,1)}
/* opening: spring with a tiny overshoot, like iOS */
.side.open{transition:width .62s cubic-bezier(.32,.72,0,1),background-color .3s ease,box-shadow .5s ease,transform .62s cubic-bezier(.32,.72,0,1);
  transition:width .62s linear(0.0000, 0.0181, 0.0656, 0.1332, 0.2134, 0.3002, 0.3890, 0.4761, 0.5590, 0.6359, 0.7057, 0.7677, 0.8219, 0.8683, 0.9074, 0.9397, 0.9657, 0.9863, 1.0021, 1.0137, 1.0219, 1.0272, 1.0303, 1.0315, 1.0313, 1.0301, 1.0281, 1.0257, 1.0230, 1.0202, 1.0174, 1.0148, 1.0123, 1.0100, 1.0079, 1.0062, 1.0046, 1.0033, 1.0022, 1.0013, 1.0006, 1.0001, 0.9997, 0.9994, 0.9992, 0.9991, 0.9990, 0.9990, 1.0000),background-color .3s ease,box-shadow .5s ease,transform .62s linear(0.0000, 0.0181, 0.0656, 0.1332, 0.2134, 0.3002, 0.3890, 0.4761, 0.5590, 0.6359, 0.7057, 0.7677, 0.8219, 0.8683, 0.9074, 0.9397, 0.9657, 0.9863, 1.0021, 1.0137, 1.0219, 1.0272, 1.0303, 1.0315, 1.0313, 1.0301, 1.0281, 1.0257, 1.0230, 1.0202, 1.0174, 1.0148, 1.0123, 1.0100, 1.0079, 1.0062, 1.0046, 1.0033, 1.0022, 1.0013, 1.0006, 1.0001, 0.9997, 0.9994, 0.9992, 0.9991, 0.9990, 0.9990, 1.0000)}
.side .lbl{opacity:0;transform:translateX(12px);filter:blur(3px);transition:opacity .12s ease,transform .2s ease,filter .12s ease;transition-delay:0s}
.side.open .lbl,.side.mopen .lbl{opacity:1;transform:none;filter:none;
  transition:opacity .28s ease,transform .5s cubic-bezier(.32,.72,0,1),filter .28s ease;
  transition:opacity .28s ease,transform .5s linear(0.0000, 0.0171, 0.0613, 0.1238, 0.1976, 0.2772, 0.3584, 0.4382, 0.5144, 0.5854, 0.6505, 0.7090, 0.7610, 0.8065, 0.8459, 0.8794, 0.9077, 0.9312, 0.9506, 0.9662, 0.9787, 0.9884, 0.9959, 1.0014, 1.0054, 1.0081, 1.0098, 1.0108, 1.0111, 1.0110, 1.0105, 1.0099, 1.0091, 1.0082, 1.0073, 1.0064, 1.0055, 1.0047, 1.0040, 1.0033, 1.0027, 1.0022, 1.0018, 1.0014, 1.0011, 1.0008, 1.0006, 1.0004, 1.0000),filter .28s ease;
  transition-delay:calc(70ms + var(--i,0) * 16ms)}
.side .wmw{transform-origin:right center}
.side .wmw .wm{transform:scale(.92);transition:transform .2s ease}
.side.open .wmw .wm,.side.mopen .wmw .wm{transform:none;transition:transform .5s linear(0.0000, 0.0171, 0.0613, 0.1238, 0.1976, 0.2772, 0.3584, 0.4382, 0.5144, 0.5854, 0.6505, 0.7090, 0.7610, 0.8065, 0.8459, 0.8794, 0.9077, 0.9312, 0.9506, 0.9662, 0.9787, 0.9884, 0.9959, 1.0014, 1.0054, 1.0081, 1.0098, 1.0108, 1.0111, 1.0110, 1.0105, 1.0099, 1.0091, 1.0082, 1.0073, 1.0064, 1.0055, 1.0047, 1.0040, 1.0033, 1.0027, 1.0022, 1.0018, 1.0014, 1.0011, 1.0008, 1.0006, 1.0004, 1.0000) .06s}
.nav-sec::before{transition:opacity .25s ease .1s,transform .3s ease .1s}
.side.open .nav-sec::before,.side.mopen .nav-sec::before{opacity:0;transform:scaleX(.3);transition:opacity .12s ease,transform .2s ease}
.side .nb{transition:transform .35s cubic-bezier(.32,.72,0,1)}
.side.open .nb{transform:scale(1.04)}
.nav a.on{transition:background-color .25s ease,color .2s ease}
.nav a .ico svg{transition:transform .25s cubic-bezier(.32,.72,0,1)}
.nav a:hover .ico svg{transform:scale(1.08)}
.nav a:active .ico svg{transform:scale(.92)}
/* page behind dims slightly while the bar is peeking open */
.peek-dim{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;background:linear-gradient(270deg,rgba(0,0,0,.34),rgba(0,0,0,.1) 45%,rgba(0,0,0,0) 80%);transition:opacity .25s ease}
html[data-theme="light"] .peek-dim{background:linear-gradient(270deg,rgba(0,0,0,.12),rgba(0,0,0,.04) 45%,rgba(0,0,0,0) 80%)}
body.side-peek .peek-dim{opacity:1;transition:opacity .45s ease}
@media (max-width:860px){
  .side{transition:transform .32s cubic-bezier(.4,0,.2,1),background-color .3s ease}
  .side.mopen{transition:transform .6s cubic-bezier(.32,.72,0,1),background-color .3s ease;transition:transform .6s linear(0.0000, 0.0181, 0.0656, 0.1332, 0.2134, 0.3002, 0.3890, 0.4761, 0.5590, 0.6359, 0.7057, 0.7677, 0.8219, 0.8683, 0.9074, 0.9397, 0.9657, 0.9863, 1.0021, 1.0137, 1.0219, 1.0272, 1.0303, 1.0315, 1.0313, 1.0301, 1.0281, 1.0257, 1.0230, 1.0202, 1.0174, 1.0148, 1.0123, 1.0100, 1.0079, 1.0062, 1.0046, 1.0033, 1.0022, 1.0013, 1.0006, 1.0001, 0.9997, 0.9994, 0.9992, 0.9991, 0.9990, 0.9990, 1.0000),background-color .3s ease}
  .peek-dim{display:none}
}
@media (prefers-reduced-motion:reduce){.side .lbl,.side.open .lbl{filter:none;transition-delay:0s!important}}

/* ================= v5: liquid sidebar ================= */
.side-in{width:var(--rail-open)}
.nav{position:relative}
.nav a{z-index:1}
.nav a:hover,.nav a:active,.nav a.on{background:transparent}
/* active pill: glides between pages and stretches with the bar, keeping round ends */
.nav-ind,.nav-hov{position:absolute;top:0;right:10px;height:40px;width:56px;border-radius:14px;pointer-events:none;z-index:0}
.nav-ind{background:var(--lime-soft);box-shadow:inset 0 0 0 1px rgba(74,222,128,.16),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .5s cubic-bezier(.32,.72,0,1),width .34s cubic-bezier(.4,0,.2,1) .05s;
  transition:transform .5s linear(0.0000, 0.0178, 0.0645, 0.1315, 0.2113, 0.2982, 0.3873, 0.4752, 0.5591, 0.6371, 0.7082, 0.7715, 0.8269, 0.8744, 0.9144, 0.9474, 0.9740, 0.9949, 1.0108, 1.0224, 1.0303, 1.0353, 1.0378, 1.0384, 1.0376, 1.0356, 1.0330, 1.0299, 1.0265, 1.0231, 1.0197, 1.0165, 1.0136, 1.0109, 1.0085, 1.0064, 1.0046, 1.0031, 1.0019, 1.0009, 1.0001, 0.9995, 0.9991, 0.9988, 0.9986, 0.9985, 0.9985, 0.9986, 1.0000),width .34s cubic-bezier(.4,0,.2,1) .05s}
.nav-ind.moving{animation:liquid .5s cubic-bezier(.32,.72,0,1)}
@keyframes liquid{0%{scale:1 1}35%{scale:.94 1.32}70%{scale:1.02 .94}100%{scale:1 1}}
.nav-hov{background:var(--hover);opacity:0;transition:opacity .18s ease,transform .32s cubic-bezier(.32,.72,0,1),width .34s cubic-bezier(.4,0,.2,1) .05s;
  transition:opacity .18s ease,transform .32s linear(0.0000, 0.0137, 0.0493, 0.1000, 0.1604, 0.2264, 0.2947, 0.3630, 0.4294, 0.4928, 0.5523, 0.6074, 0.6579, 0.7037, 0.7448, 0.7815, 0.8140, 0.8426, 0.8676, 0.8893, 0.9080, 0.9241, 0.9378, 0.9495, 0.9593, 0.9675, 0.9744, 0.9801, 0.9848, 0.9886, 0.9916, 0.9941, 0.9961, 0.9976, 0.9988, 0.9997, 1.0003, 1.0008, 1.0011, 1.0014, 1.0015, 1.0015, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.0011, 1.0000),width .34s cubic-bezier(.4,0,.2,1) .05s}
.nav-hov.on{opacity:1}
.side.open .nav-ind,.side.mopen .nav-ind{width:calc(var(--rail-open) - 20px);transition:transform .5s cubic-bezier(.32,.72,0,1),width .62s cubic-bezier(.32,.72,0,1);transition:transform .5s linear(0.0000, 0.0178, 0.0645, 0.1315, 0.2113, 0.2982, 0.3873, 0.4752, 0.5591, 0.6371, 0.7082, 0.7715, 0.8269, 0.8744, 0.9144, 0.9474, 0.9740, 0.9949, 1.0108, 1.0224, 1.0303, 1.0353, 1.0378, 1.0384, 1.0376, 1.0356, 1.0330, 1.0299, 1.0265, 1.0231, 1.0197, 1.0165, 1.0136, 1.0109, 1.0085, 1.0064, 1.0046, 1.0031, 1.0019, 1.0009, 1.0001, 0.9995, 0.9991, 0.9988, 0.9986, 0.9985, 0.9985, 0.9986, 1.0000),width .62s linear(0.0000, 0.0181, 0.0656, 0.1332, 0.2134, 0.3002, 0.3890, 0.4761, 0.5590, 0.6359, 0.7057, 0.7677, 0.8219, 0.8683, 0.9074, 0.9397, 0.9657, 0.9863, 1.0021, 1.0137, 1.0219, 1.0272, 1.0303, 1.0315, 1.0313, 1.0301, 1.0281, 1.0257, 1.0230, 1.0202, 1.0174, 1.0148, 1.0123, 1.0100, 1.0079, 1.0062, 1.0046, 1.0033, 1.0022, 1.0013, 1.0006, 1.0001, 0.9997, 0.9994, 0.9992, 0.9991, 0.9990, 0.9990, 1.0000)}
.side.open .nav-hov,.side.mopen .nav-hov{width:calc(var(--rail-open) - 20px);transition:opacity .18s ease,transform .32s cubic-bezier(.32,.72,0,1),width .62s cubic-bezier(.32,.72,0,1);transition:opacity .18s ease,transform .32s linear(0.0000, 0.0137, 0.0493, 0.1000, 0.1604, 0.2264, 0.2947, 0.3630, 0.4294, 0.4928, 0.5523, 0.6074, 0.6579, 0.7037, 0.7448, 0.7815, 0.8140, 0.8426, 0.8676, 0.8893, 0.9080, 0.9241, 0.9378, 0.9495, 0.9593, 0.9675, 0.9744, 0.9801, 0.9848, 0.9886, 0.9916, 0.9941, 0.9961, 0.9976, 0.9988, 0.9997, 1.0003, 1.0008, 1.0011, 1.0014, 1.0015, 1.0015, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.0011, 1.0000),width .62s linear(0.0000, 0.0181, 0.0656, 0.1332, 0.2134, 0.3002, 0.3890, 0.4761, 0.5590, 0.6359, 0.7057, 0.7677, 0.8219, 0.8683, 0.9074, 0.9397, 0.9657, 0.9863, 1.0021, 1.0137, 1.0219, 1.0272, 1.0303, 1.0315, 1.0313, 1.0301, 1.0281, 1.0257, 1.0230, 1.0202, 1.0174, 1.0148, 1.0123, 1.0100, 1.0079, 1.0062, 1.0046, 1.0033, 1.0022, 1.0013, 1.0006, 1.0001, 0.9997, 0.9994, 0.9992, 0.9991, 0.9990, 0.9990, 1.0000)}
/* count badges travel from the icon corner to the end of the row */
.side .nb{transition:transform .3s cubic-bezier(.4,0,.2,1)}
.side.open .nb,.side.mopen .nb{transform:translate(-192px,9px);transition:transform .62s cubic-bezier(.32,.72,0,1) calc(40ms + var(--i,0) * 16ms);transition:transform .62s linear(0.0000, 0.0181, 0.0656, 0.1332, 0.2134, 0.3002, 0.3890, 0.4761, 0.5590, 0.6359, 0.7057, 0.7677, 0.8219, 0.8683, 0.9074, 0.9397, 0.9657, 0.9863, 1.0021, 1.0137, 1.0219, 1.0272, 1.0303, 1.0315, 1.0313, 1.0301, 1.0281, 1.0257, 1.0230, 1.0202, 1.0174, 1.0148, 1.0123, 1.0100, 1.0079, 1.0062, 1.0046, 1.0033, 1.0022, 1.0013, 1.0006, 1.0001, 0.9997, 0.9994, 0.9992, 0.9991, 0.9990, 0.9990, 1.0000) calc(40ms + var(--i,0) * 16ms)}
/* closing: labels leave bottom-first, quickly */
.side .lbl{transition-delay:calc((16 - var(--i,0)) * 5ms)}
/* light sheen that follows the cursor on the glass */
.side::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,30%),rgba(255,255,255,.075),transparent 70%)}
html[data-theme="light"] .side::after{background:radial-gradient(240px 240px at var(--mx,50%) var(--my,30%),rgba(255,255,255,.75),transparent 70%)}
.side:hover::after{opacity:1}
/* proximity hint: the bar breathes a little when the cursor comes close */
.side.near:not(.open){width:86px;box-shadow:inset 0 1px 0 var(--hi),0 16px 50px var(--shadow-l);transition:width .5s linear(0.0000, 0.0178, 0.0645, 0.1315, 0.2113, 0.2982, 0.3873, 0.4752, 0.5591, 0.6371, 0.7082, 0.7715, 0.8269, 0.8744, 0.9144, 0.9474, 0.9740, 0.9949, 1.0108, 1.0224, 1.0303, 1.0353, 1.0378, 1.0384, 1.0376, 1.0356, 1.0330, 1.0299, 1.0265, 1.0231, 1.0197, 1.0165, 1.0136, 1.0109, 1.0085, 1.0064, 1.0046, 1.0031, 1.0019, 1.0009, 1.0001, 0.9995, 0.9991, 0.9988, 0.9986, 0.9985, 0.9985, 0.9986, 1.0000),box-shadow .4s ease}
/* footer avatar: no flat-edged hover */
.me-b:hover{background:transparent}
.me-b .av{transition:box-shadow .2s ease,transform .25s cubic-bezier(.32,.72,0,1)}
.me-b:hover .av{box-shadow:0 0 0 3px var(--hover2);transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.nav-ind.moving{animation:none}.side::after{display:none}}
/* sheen sits behind the text, never over it */
.side-in{z-index:1}
.side::after{z-index:0}
html[data-theme="light"] .side::after{background:radial-gradient(240px 240px at var(--mx,50%) var(--my,30%),rgba(255,255,255,.6),transparent 70%)}

/* ================= v6: performance pass ================= */
/* 1. lighter glass: smaller blur radius, static shadow (no shadow repaint animation) */
.side{-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 var(--hi),0 16px 44px var(--shadow);
  transition:width .32s cubic-bezier(.4,0,.2,1) .02s,background-color .25s ease,transform .32s cubic-bezier(.4,0,.2,1)}
.side.open{box-shadow:inset 0 1px 0 var(--hi),0 16px 44px var(--shadow-l);
  transition:width .56s cubic-bezier(.32,.72,0,1),background-color .25s ease,transform .56s cubic-bezier(.32,.72,0,1);
  transition:width .56s linear(0.0000, 0.0224, 0.0797, 0.1594, 0.2518, 0.3492, 0.4460, 0.5384, 0.6236, 0.7002, 0.7674, 0.8250, 0.8735, 0.9133, 0.9453, 0.9703, 0.9894, 1.0035, 1.0133, 1.0197, 1.0235, 1.0252, 1.0253, 1.0243, 1.0226, 1.0204, 1.0180, 1.0155, 1.0131, 1.0108, 1.0087, 1.0069, 1.0053, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1.0001, 0.9998, 1.0000),background-color .25s ease,transform .56s linear(0.0000, 0.0224, 0.0797, 0.1594, 0.2518, 0.3492, 0.4460, 0.5384, 0.6236, 0.7002, 0.7674, 0.8250, 0.8735, 0.9133, 0.9453, 0.9703, 0.9894, 1.0035, 1.0133, 1.0197, 1.0235, 1.0252, 1.0253, 1.0243, 1.0226, 1.0204, 1.0180, 1.0155, 1.0131, 1.0108, 1.0087, 1.0069, 1.0053, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1.0001, 0.9998, 1.0000)}
.side.near:not(.open){box-shadow:inset 0 1px 0 var(--hi),0 16px 44px var(--shadow-l);transition:width .4s cubic-bezier(.32,.72,0,1)}
/* 2. the inside never re-lays out while the bar moves */
.side-in{contain:layout paint style}
/* 3. labels: opacity + transform only (blur filters were the most expensive part) */
.side .lbl{filter:none!important;transform:translateX(10px);transition:opacity .1s ease,transform .16s ease;transition-delay:0s;will-change:opacity,transform}
.side.open .lbl,.side.mopen .lbl{transform:none;transition:opacity .22s ease,transform .45s cubic-bezier(.32,.72,0,1);transition:opacity .22s ease,transform .45s linear(0.0000, 0.0202, 0.0717, 0.1429, 0.2251, 0.3119, 0.3984, 0.4816, 0.5592, 0.6300, 0.6933, 0.7491, 0.7974, 0.8387, 0.8736, 0.9027, 0.9267, 0.9461, 0.9617, 0.9740, 0.9835, 0.9908, 0.9962, 1.0001, 1.0028, 1.0046, 1.0056, 1.0062, 1.0063, 1.0061, 1.0058, 1.0053, 1.0048, 1.0043, 1.0037, 1.0032, 1.0027, 1.0023, 1.0019, 1.0015, 1.0000);
  transition-delay:calc(30ms + var(--i,0) * 9ms)}
.side.open .nb,.side.mopen .nb{transition-delay:calc(20ms + var(--i,0) * 9ms)}
/* 4. cursor sheen moves on the GPU (transform), never restyles the bar */
.side::after{display:none}
.sheen{position:absolute;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent);transition:opacity .35s ease;will-change:transform}
html[data-theme="light"] .sheen{background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent)}
.side:hover .sheen{opacity:1}
/* 5. page dim runs on the compositor */
.peek-dim{will-change:opacity}
.nav-ind,.nav-hov{will-change:transform}
@media (prefers-reduced-motion:reduce){.sheen{display:none}}

/* sheen anchored to the right edge so moving it never needs the bar's width */
.sheen{left:auto;right:0;margin:-210px -210px 0 0}

/* glass lives in its own fixed-size layer: the blur never has to resize while the bar opens */
.side,.side.open,.side.mopen{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.gl{position:absolute;top:0;right:0;bottom:0;width:var(--rail-open);border-radius:inherit;pointer-events:none;z-index:0;
  background:var(--glass-side);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);transition:background-color .25s ease}
.side.open .gl,.side.mopen .gl{background:var(--glass-side-open)}
.side::before{z-index:1}
/* fewer GPU layers: only the moving pieces get one */
.side .lbl{will-change:auto}
.nav-ind,.nav-hov{will-change:auto}
.peek-dim{will-change:auto}

/* ================= v7: composited sidebar — the glass slides, nothing resizes ================= */
@media (min-width:861px){
  .side,.side.open,.side.near:not(.open){width:var(--rail-open);background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:none;pointer-events:none}
  .side::before{display:none}
  /* glass panel: fixed size, moved with transform only (GPU) */
  .gl{right:-24px;width:calc(var(--rail-open) + 24px);border-radius:28px;border:1px solid var(--glass-edge);overflow:hidden;pointer-events:auto;
    background:var(--glass-side-open);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
    box-shadow:inset 0 1px 0 var(--hi);transform:translate3d(calc(var(--rail-open) - var(--rail)),0,0);
    transition:transform .32s cubic-bezier(.4,0,.2,1) .02s}
  .gl::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--hi),transparent 26%)}
  .side.near:not(.open) .gl{transform:translate3d(calc(var(--rail-open) - var(--rail) - 10px),0,0);transition:transform .45s cubic-bezier(.32,.72,0,1);transition:transform .45s linear(0.0000, 0.0184, 0.0660, 0.1330, 0.2117, 0.2962, 0.3818, 0.4653, 0.5444, 0.6175, 0.6837, 0.7427, 0.7943, 0.8388, 0.8766, 0.9082, 0.9343, 0.9555, 0.9724, 0.9855, 0.9956, 1.0030, 1.0082, 1.0117, 1.0139, 1.0149, 1.0152, 1.0148, 1.0140, 1.0130, 1.0118, 1.0105, 1.0092, 1.0079, 1.0067, 1.0056, 1.0047, 1.0038, 1.0030, 1.0024, 1.0000)}
  .side.open .gl{transform:translate3d(0,0,0);transition:transform .56s cubic-bezier(.32,.72,0,1);transition:transform .56s linear(0.0000, 0.0224, 0.0797, 0.1594, 0.2518, 0.3492, 0.4460, 0.5384, 0.6236, 0.7002, 0.7674, 0.8250, 0.8735, 0.9133, 0.9453, 0.9703, 0.9894, 1.0035, 1.0133, 1.0197, 1.0235, 1.0252, 1.0253, 1.0243, 1.0226, 1.0204, 1.0180, 1.0155, 1.0131, 1.0108, 1.0087, 1.0069, 1.0053, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1.0001, 0.9998, 1.0000)}
  /* right edge of the rail keeps its border */
  .side::after{display:block;content:"";position:absolute;top:0;right:0;bottom:0;width:30px;border:1px solid var(--glass-edge);border-left:0;border-radius:0 28px 28px 0;background:none;opacity:1;z-index:2;pointer-events:none;transition:none}
  /* shadow follows the panel (outside the clip) */
  .side-sh{position:fixed;top:12px;bottom:12px;right:-12px;width:calc(var(--rail-open) + 24px);border-radius:28px;z-index:44;pointer-events:none;
    box-shadow:0 16px 44px var(--shadow);transform:translate3d(calc(var(--rail-open) - var(--rail)),0,0);transition:transform .32s cubic-bezier(.4,0,.2,1) .02s,box-shadow .3s ease}
  .side.near:not(.open)+.side-sh{transform:translate3d(calc(var(--rail-open) - var(--rail) - 10px),0,0);transition:transform .45s cubic-bezier(.32,.72,0,1);transition:transform .45s linear(0.0000, 0.0184, 0.0660, 0.1330, 0.2117, 0.2962, 0.3818, 0.4653, 0.5444, 0.6175, 0.6837, 0.7427, 0.7943, 0.8388, 0.8766, 0.9082, 0.9343, 0.9555, 0.9724, 0.9855, 0.9956, 1.0030, 1.0082, 1.0117, 1.0139, 1.0149, 1.0152, 1.0148, 1.0140, 1.0130, 1.0118, 1.0105, 1.0092, 1.0079, 1.0067, 1.0056, 1.0047, 1.0038, 1.0030, 1.0024, 1.0000)}
  .side.open+.side-sh{transform:translate3d(0,0,0);box-shadow:0 20px 56px var(--shadow-l);transition:transform .56s cubic-bezier(.32,.72,0,1),box-shadow .3s ease;transition:transform .56s linear(0.0000, 0.0224, 0.0797, 0.1594, 0.2518, 0.3492, 0.4460, 0.5384, 0.6236, 0.7002, 0.7674, 0.8250, 0.8735, 0.9133, 0.9453, 0.9703, 0.9894, 1.0035, 1.0133, 1.0197, 1.0235, 1.0252, 1.0253, 1.0243, 1.0226, 1.0204, 1.0180, 1.0155, 1.0131, 1.0108, 1.0087, 1.0069, 1.0053, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1.0001, 0.9998, 1.0000),box-shadow .3s ease}
  /* collapsed: only the visible icons take clicks; the hidden part never blocks the page */
  .side-in,.side-in *{pointer-events:none}
  .side.open .side-in a,.side.open .side-in button,.side.open .side-in .nav{pointer-events:auto}
  .side-in .ico{pointer-events:auto}
  .side:not(.open) .side-in .me-a *{pointer-events:none}
  /* sheen lives inside the panel */
  .sheen{right:0;left:auto;margin:-210px -210px 0 0}
  .side:not(.open) .sheen{opacity:0}
  .side.open:hover .sheen{opacity:1}
}
@media (max-width:860px){
  .side .gl,.side.open .gl{transform:none;width:100%;right:0}
  .side-sh{display:none}
}

/* highlight pills: fixed size, revealed by clip (no layout per frame) */
@media (min-width:861px){
  .nav-ind,.nav-hov,.side.open .nav-ind,.side.open .nav-hov{width:calc(var(--rail-open) - 20px)}
  .nav-ind,.nav-hov{clip-path:inset(0 0 0 calc(100% - 56px) round 14px)}
  .nav-ind{transition:transform .5s cubic-bezier(.32,.72,0,1),clip-path .32s cubic-bezier(.4,0,.2,1) .02s;transition:transform .5s linear(0.0000, 0.0251, 0.0893, 0.1782, 0.2805, 0.3873, 0.4923, 0.5911, 0.6806, 0.7595, 0.8269, 0.8830, 0.9285, 0.9641, 0.9912, 1.0108, 1.0242, 1.0326, 1.0370, 1.0384, 1.0376, 1.0352, 1.0318, 1.0279, 1.0238, 1.0197, 1.0159, 1.0125, 1.0094, 1.0068, 1.0046, 1.0028, 1.0015, 1.0004, 0.9996, 0.9991, 0.9988, 0.9986, 0.9985, 0.9986, 1.0000),clip-path .32s cubic-bezier(.4,0,.2,1) .02s}
  .nav-hov{transition:opacity .18s ease,transform .32s cubic-bezier(.32,.72,0,1),clip-path .32s cubic-bezier(.4,0,.2,1) .02s;transition:opacity .18s ease,transform .32s linear(0.0000, 0.0193, 0.0681, 0.1354, 0.2129, 0.2947, 0.3765, 0.4552, 0.5290, 0.5967, 0.6579, 0.7123, 0.7600, 0.8015, 0.8372, 0.8676, 0.8933, 0.9148, 0.9326, 0.9473, 0.9593, 0.9690, 0.9768, 0.9830, 0.9879, 0.9916, 0.9945, 0.9967, 0.9984, 0.9995, 1.0003, 1.0009, 1.0012, 1.0014, 1.0015, 1.0015, 1.0015, 1.0014, 1.0013, 1.0011, 1.0000),clip-path .32s cubic-bezier(.4,0,.2,1) .02s}
  .side.open .nav-ind,.side.open .nav-hov{clip-path:inset(0 0 0 0 round 14px)}
  .side.open .nav-ind{transition:transform .5s cubic-bezier(.32,.72,0,1),clip-path .56s cubic-bezier(.32,.72,0,1);transition:transform .5s linear(0.0000, 0.0251, 0.0893, 0.1782, 0.2805, 0.3873, 0.4923, 0.5911, 0.6806, 0.7595, 0.8269, 0.8830, 0.9285, 0.9641, 0.9912, 1.0108, 1.0242, 1.0326, 1.0370, 1.0384, 1.0376, 1.0352, 1.0318, 1.0279, 1.0238, 1.0197, 1.0159, 1.0125, 1.0094, 1.0068, 1.0046, 1.0028, 1.0015, 1.0004, 0.9996, 0.9991, 0.9988, 0.9986, 0.9985, 0.9986, 1.0000),clip-path .56s linear(0.0000, 0.0224, 0.0797, 0.1594, 0.2518, 0.3492, 0.4460, 0.5384, 0.6236, 0.7002, 0.7674, 0.8250, 0.8735, 0.9133, 0.9453, 0.9703, 0.9894, 1.0035, 1.0133, 1.0197, 1.0235, 1.0252, 1.0253, 1.0243, 1.0226, 1.0204, 1.0180, 1.0155, 1.0131, 1.0108, 1.0087, 1.0069, 1.0053, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1.0001, 0.9998, 1.0000)}
  .side.open .nav-hov{transition:opacity .18s ease,transform .32s cubic-bezier(.32,.72,0,1),clip-path .56s cubic-bezier(.32,.72,0,1);transition:opacity .18s ease,transform .32s linear(0.0000, 0.0193, 0.0681, 0.1354, 0.2129, 0.2947, 0.3765, 0.4552, 0.5290, 0.5967, 0.6579, 0.7123, 0.7600, 0.8015, 0.8372, 0.8676, 0.8933, 0.9148, 0.9326, 0.9473, 0.9593, 0.9690, 0.9768, 0.9830, 0.9879, 0.9916, 0.9945, 0.9967, 0.9984, 0.9995, 1.0003, 1.0009, 1.0012, 1.0014, 1.0015, 1.0015, 1.0015, 1.0014, 1.0013, 1.0011, 1.0000),clip-path .56s linear(0.0000, 0.0224, 0.0797, 0.1594, 0.2518, 0.3492, 0.4460, 0.5384, 0.6236, 0.7002, 0.7674, 0.8250, 0.8735, 0.9133, 0.9453, 0.9703, 0.9894, 1.0035, 1.0133, 1.0197, 1.0235, 1.0252, 1.0253, 1.0243, 1.0226, 1.0204, 1.0180, 1.0155, 1.0131, 1.0108, 1.0087, 1.0069, 1.0053, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1.0001, 0.9998, 1.0000)}
  .nav-ind{box-shadow:none;border-radius:14px;background:var(--lime-soft)}
}

/* ===== v8 — data migration (انتقال اطلاعات) ===== */
.mig-steps{list-style:none;margin:0 0 16px;padding:6px;display:flex;gap:4px;background:var(--card2);border:1px solid var(--line);border-radius:18px;overflow-x:auto;scrollbar-width:none}
.mig-steps::-webkit-scrollbar{display:none}
.mig-steps li{flex:1 0 auto;display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:13px;color:var(--muted);font-weight:600;font-size:13.5px;white-space:nowrap;transition:background-color .3s,color .3s}
.mig-steps .sn{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line2);font-weight:800;font-size:12.5px;flex-shrink:0;transition:background-color .3s,border-color .3s,color .3s}
.mig-steps .sn svg{width:14px;height:14px;stroke-width:2.8}
.mig-steps li.done .sn{background:var(--lime);border-color:var(--lime);color:var(--on-lime,#080808)}
.mig-steps li.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px var(--shadow-l,rgba(0,0,0,.2))}
.mig-steps li.on .sn{border-color:var(--lime);color:var(--lime)}
.mig-steps small{font-size:11px;color:var(--lime);font-weight:700}
.mig-body{animation:migIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes migIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mig-hero{display:flex;gap:16px;align-items:center;border-color:var(--lime-line)}
.mh-ic,.md-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--lime-bg);color:var(--lime);flex-shrink:0}
.mh-ic svg{width:26px;height:26px}
.mig-q{margin:20px 2px 10px;font-size:15px}
.src-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.src-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:right;padding:18px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,var(--qa1,var(--card)),var(--qa2,var(--card2)));color:var(--text);cursor:pointer;transition:border-color .2s,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.src-card:hover{border-color:var(--lime-line);transform:translateY(-2px);box-shadow:0 10px 30px -14px var(--shadow-l,rgba(0,0,0,.5))}
.src-card:active{transform:scale(.98)}
.src-card:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.src-card .ct b{display:block;font-size:17px}
.src-card .ct small{color:var(--muted);font-size:13px}
.src-card .go{position:absolute;left:16px;top:18px;color:var(--dim);transition:transform .25s,color .2s}
.src-card:hover .go{transform:translateX(-3px);color:var(--lime)}
.src-card .go svg{width:18px;height:18px}
.src-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:20px;border:1px solid var(--line2);background:var(--card2);color:var(--text);flex-shrink:0}
.src-mark svg{width:22px;height:22px}
.src-mark.m-zaferan,.src-mark.m-sepidar{background:var(--text);color:var(--bg);border-color:transparent}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:30px 16px;border-radius:20px;border:1.5px dashed var(--line2);background:var(--card2);cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s}
.drop:hover,.drop.over{border-color:var(--lime);background:var(--lime-soft,var(--lime-bg))}
.drop.over{transform:scale(1.01)}
.drop:focus-within{outline:2px solid var(--lime);outline-offset:2px}
.drop .di{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--lime-bg);color:var(--lime);margin-bottom:4px}
.drop .di svg{width:24px;height:24px}
.drop small{color:var(--muted);font-size:12.5px}
.drop .btn{margin-top:8px;pointer-events:none}
.drop.sm{padding:20px 12px;margin-top:12px}
.mig-alt{gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.mig-way{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:20px;border:1px solid var(--line);background:var(--card2)}
.mig-way h3{margin:0;font-size:16px}
.mig-way .steps li{background:var(--card)}
.mig-nav{margin-top:16px;gap:10px}
.mig-nav [data-m="back"] svg{transform:scaleX(-1)}
.mig-read{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;background:var(--card2);border:1px solid var(--line)}
.mig-read b{display:inline-flex;align-items:center;gap:8px}
.mig-read b svg{width:18px;height:18px;color:var(--lime)}
.mig-read .bar i{display:block;height:100%;background:var(--lime);border-radius:6px;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.mig-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
.mig-log li{display:flex;align-items:center;gap:8px;animation:migIn .3s ease}
.mig-log svg{width:15px;height:15px;color:var(--lime);stroke-width:2.6}
.mig-found b svg{width:16px;height:16px;color:var(--lime);vertical-align:-3px}
.mig-tb{cursor:pointer}
.mig-tb svg{width:18px;height:18px;color:var(--muted)}
.mig-map{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.mm-row{display:grid;grid-template-columns:minmax(150px,1fr) 22px minmax(170px,1.3fr) minmax(120px,1fr);align-items:center;gap:10px;padding:8px 12px;border-radius:15px;border:1px solid var(--line);background:var(--card2)}
.mm-row.ok{border-color:var(--lime-line)}
.mm-row.bad{border-color:var(--red-line,var(--red));background:var(--red-bg)}
.mm-t{display:flex;flex-direction:column}
.mm-t small{font-size:11.5px}
.mm-arr{color:var(--dim)}.mm-arr svg{width:18px;height:18px}
.mm-ex{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hintbox.warn{background:var(--red-bg);border-color:var(--red-line,var(--red))}
.hintbox.warn svg{color:var(--red)}
.hintbox.ok svg{color:var(--lime)}
.hintbox svg{width:18px;height:18px;flex-shrink:0}
.mig-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:16px}
.mig-opts .mo{display:flex;flex-direction:column;gap:8px}
.mig-opts .seg{grid-template-columns:repeat(2,1fr);max-width:320px}
.mig-opts small{font-size:12.5px}
.mig-iss{display:flex;flex-direction:column;gap:8px}
.mig-iss h2 svg{width:20px;height:20px;vertical-align:-4px;color:var(--muted)}
.iss{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--card2);border:1px solid var(--line);font-size:13.5px;line-height:1.8}
.iss .ii{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--line);color:var(--muted)}
.iss .ii svg{width:15px;height:15px;stroke-width:2.4}
.iss .it{flex:1;min-width:0}
.iss.ok .ii{background:var(--lime-bg);color:var(--lime)}
.iss.warn{border-color:var(--red-line,var(--line2))}
.iss.warn .ii,.iss.bad .ii{background:var(--red-bg);color:var(--red)}
.iss.bad{border-color:var(--red-line,var(--red));background:var(--red-bg)}
.iss.dim{color:var(--muted)}
.iss-x{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.chip{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line2);font-size:12px;color:var(--muted)}
.iss-fix{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.fix{display:grid;grid-template-columns:1fr 150px;gap:8px;align-items:center}
.fix input.i{min-height:38px}
.chk{display:flex;flex-direction:column;gap:8px}
.chk-r{display:grid;grid-template-columns:1.3fr 1fr 1fr 30px;align-items:center;gap:8px;padding:10px 12px;border-radius:15px;border:1px solid var(--line);background:var(--card2)}
.chk-r .cl{font-weight:700;font-size:13.5px}
.chk-r .cv{display:flex;flex-direction:column;font-size:13.5px}
.chk-r .cv small{color:var(--dim);font-size:11px;font-weight:600}
.chk-r .cs{width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.chk-r .cs svg{width:15px;height:15px;stroke-width:2.8}
.chk-r.eq .cs{background:var(--lime);color:var(--on-lime,#080808)}
.chk-r.ne{border-color:var(--red-line,var(--red));background:var(--red-bg)}
.chk-r.ne .cs{background:var(--red);color:#fff}
.chk-r .cw{grid-column:1/-1;font-size:12.5px;color:var(--red)}
.mig-cut{font-size:22px;font-weight:900;text-align:center;padding:14px 0 6px}
.mig-s4 .seg{grid-template-columns:repeat(3,1fr)}
.mig-go{width:100%;margin-top:14px;min-height:52px;font-size:16px}
.mig-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 20px}
.md-ic{width:72px;height:72px;border-radius:50%;background:var(--lime);color:var(--on-lime,#080808);animation:migPop .5s cubic-bezier(.3,1.6,.5,1)}
.md-ic svg{width:36px;height:36px;stroke-width:2.6}
@keyframes migPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.mig-done h2{margin:16px 0 4px}
.md-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;width:100%;max-width:760px;margin-top:16px}
.md-k{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;border-radius:18px;background:var(--card2);border:1px solid var(--line)}
.md-k svg{width:20px;height:20px;color:var(--muted)}
.md-k b{font-size:24px}
.md-k span{font-size:13px}
.mig-h.undone{opacity:.55}
.mig-hint{display:flex;align-items:center;gap:14px;width:100%;text-align:right;margin:0 0 16px;padding:14px 16px;border-radius:20px;border:1px dashed var(--lime-line);background:var(--lime-soft,var(--lime-bg));color:var(--text);cursor:pointer;transition:transform .2s,border-color .2s}
.mig-hint:hover{border-style:solid;transform:translateY(-1px)}
.mig-hint:active{transform:scale(.99)}
.mig-hint .mh-i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--lime-bg);color:var(--lime);flex-shrink:0}
.mig-hint .mh-i svg{width:20px;height:20px}
.mig-hint .ct{flex:1}.mig-hint .ct b{display:block}.mig-hint .ct small{color:var(--muted);font-size:12.5px}
.mig-hint .go{color:var(--lime)}.mig-hint .go svg{width:18px;height:18px}
@media (max-width:700px){
  .mm-row{grid-template-columns:1fr;gap:6px}.mm-arr{display:none}
  .chk-r{grid-template-columns:1fr 1fr 30px}.chk-r .cl{grid-column:1/-1}
  .fix{grid-template-columns:1fr}
  .mig-steps .st{display:none}.mig-steps li.on .st{display:inline}
  .mig-hero{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.mig-body,.mig-log li,.md-ic{animation:none}}