/* Self-hosted Vazirmatn (no external requests: works without Google Fonts, e.g. inside Iran) */
@font-face{font-family:"Vazirmatn";font-weight:400;font-display:swap;src:url(/assets/fonts/Vazirmatn-Regular.woff2) format("woff2")}
@font-face{font-family:"Vazirmatn";font-weight:500;font-display:swap;src:url(/assets/fonts/Vazirmatn-Medium.woff2) format("woff2")}
@font-face{font-family:"Vazirmatn";font-weight:700;font-display:swap;src:url(/assets/fonts/Vazirmatn-Bold.woff2) format("woff2")}
@font-face{font-family:"Vazirmatn";font-weight:800;font-display:swap;src:url(/assets/fonts/Vazirmatn-ExtraBold.woff2) format("woff2")}
:root{
  --font:"Vazirmatn",Tahoma,"Segoe UI",system-ui,sans-serif;
  --bg:#ECF0F8; --surface:#fff; --ink:#0F1A2E; --muted:#62708A; --line:#DCE3F0;
  --navy:#0B1630; --navy2:#17306B; --blue:#2563EB; --blue2:#1D4ED8; --orange:#FF7A1A; --red:#E5383B; --gold:#F5B301; --green:#12A150;
  --primary:#1D4ED8; --primary-soft:#E3ECFF;
  --ok:#0E9F5A; --ok-soft:#D9F5E7; --part:#B45F06; --part-soft:#FFEFCF; --none:#5B6B85; --none-soft:#E4E9F2; --late:#D62F32; --late-soft:#FFE0E0;
  --shadow:0 1px 2px rgba(15,26,46,.06),0 10px 26px -14px rgba(15,26,46,.28);
  --shadow-lg:0 2px 4px rgba(15,26,46,.08),0 18px 36px -14px rgba(15,26,46,.38);
  --ease:cubic-bezier(.2,.8,.2,1);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
html{direction:rtl;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);line-height:1.8;color:var(--ink);font-size:15px;letter-spacing:0;
  background:radial-gradient(900px 380px at 100% -80px,#D5E2FF 0,transparent 70%),radial-gradient(700px 320px at 0 120px,#FFE6D2 0,transparent 70%),var(--bg);background-attachment:fixed}
h1,h2,h3{line-height:1.5;margin:0;letter-spacing:0}
em,i{font-style:normal;font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #FFB36B;outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
bdi,.ltr{direction:ltr;unicode-bidi:isolate}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.3);opacity:0}65%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,122,26,.65)}70%{box-shadow:0 0 0 9px rgba(255,122,26,0)}100%{box-shadow:0 0 0 0 rgba(255,122,26,0)}}
@keyframes grow{from{width:0}}
@keyframes dot{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes sheen{from{transform:translateX(130%) skewX(-20deg)}to{transform:translateX(-130%) skewX(-20deg)}}
@keyframes floaty{0%,100%{transform:rotate(25deg) translateY(0)}50%{transform:rotate(25deg) translateY(-8px)}}
.page.enter>*{animation:rise .55s var(--ease) both}
.page.enter>*:nth-child(2){animation-delay:.07s}.page.enter>*:nth-child(3){animation-delay:.14s}
.page.enter>*:nth-child(4){animation-delay:.21s}.page.enter>*:nth-child(5){animation-delay:.28s}.page.enter>*:nth-child(n+6){animation-delay:.34s}
.page.enter .stack>*,.page.enter .grid2>*{animation:rise .55s var(--ease) both}
.page.enter .grid2>*:nth-child(2){animation-delay:.08s}.page.enter .grid2>*:nth-child(3){animation-delay:.16s}.page.enter .grid2>*:nth-child(4){animation-delay:.24s}
.page.enter .stack>*:nth-child(2){animation-delay:.07s}.page.enter .stack>*:nth-child(3){animation-delay:.14s}.page.enter .stack>*:nth-child(n+4){animation-delay:.2s}

/* ---------- shell ---------- */
.demo-strip{background:#101828;color:#FFD9B8;font-size:12px;text-align:center;padding:4px 10px;padding-top:calc(4px + var(--safe-t))}
.top{position:sticky;top:0;z-index:20;color:#fff;display:flex;align-items:center;gap:10px;padding:9px 14px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 10px,transparent 10px 22px),linear-gradient(120deg,#0B1630 0%,#17306B 58%,#2563EB 130%);
  box-shadow:0 8px 22px -10px rgba(11,22,48,.65)}
.top::after{content:"";position:absolute;inset-inline:0;bottom:-3px;height:3px;background:linear-gradient(90deg,var(--orange),var(--gold),var(--blue))}
.brand{font-weight:800;font-size:16.5px;flex:1;display:flex;align-items:center;gap:10px}
.brand small{display:block;font-weight:500;opacity:.75;font-size:11.5px;line-height:1.2}
.logo{width:36px;height:36px;flex:none;filter:drop-shadow(0 4px 8px rgba(255,122,26,.45))}
.chip{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:1px 12px;font-size:12.5px;font-weight:700}
.iconbtn{background:rgba(255,255,255,.1);border:0;color:inherit;padding:7px;border-radius:12px;display:grid;place-items:center;transition:background .2s,transform .15s}
.iconbtn:hover{background:rgba(255,255,255,.22)}.iconbtn:active{transform:scale(.92)}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.shell{display:block}
.side{display:none}
.page{padding:16px 14px calc(100px + var(--safe-b));max-width:1000px;margin:0 auto}
.bottom{position:fixed;inset-inline:10px;bottom:calc(10px + var(--safe-b));z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(15,26,46,.07);border-radius:22px;display:flex;padding:6px 4px;box-shadow:var(--shadow-lg);max-width:560px;margin-inline:auto}
.bottom a{flex:1;text-align:center;text-decoration:none;color:var(--muted);font-size:11px;padding:3px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:color .2s}
.bottom a svg{box-sizing:content-box;padding:5px 12px;border-radius:14px;width:22px;height:22px;transition:background .25s,transform .25s var(--ease),color .2s}
.bottom a[aria-current=page]{color:var(--blue2);font-weight:800}
.bottom a[aria-current=page] svg{background:linear-gradient(135deg,var(--orange),var(--red));color:#fff;transform:translateY(-5px);box-shadow:0 8px 16px -6px rgba(229,56,59,.7)}
.bottom a:active svg{transform:scale(.9)}
@media(min-width:960px){
  .shell{display:grid;grid-template-columns:244px 1fr;min-height:calc(100vh - 80px)}
  .side{display:flex;flex-direction:column;gap:4px;padding:16px 12px;background:linear-gradient(180deg,#0B1630,#13244F);box-shadow:inset -1px 0 0 rgba(255,255,255,.05)}
  .side a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;text-decoration:none;color:#BFCCEA;transition:background .2s,color .2s,transform .2s var(--ease)}
  .side a:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(-3px)}
  .side a[aria-current=page]{background:linear-gradient(135deg,var(--orange),var(--red));color:#fff;font-weight:800;box-shadow:0 10px 20px -8px rgba(229,56,59,.7)}
  .bottom{display:none}
  .page{padding-bottom:40px;width:100%}
}

/* ---------- common ---------- */
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 14px;flex-wrap:wrap}
.ph h1{font-size:22px;font-weight:800}
.sub{color:var(--muted);font-size:13px}
.card{background:var(--surface);border:1px solid rgba(15,26,46,.06);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.stack{display:flex;flex-direction:column;gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:560px){.grid3{grid-template-columns:1fr 1fr}}

/* hero */
.hero{position:relative;overflow:hidden;border-radius:20px;padding:18px;color:#fff;margin-bottom:12px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(135deg,#0B1630 0%,#1B3A8C 62%,#2563EB 120%);box-shadow:0 20px 36px -16px rgba(29,78,216,.7)}
.hero::before{content:"";position:absolute;inset-inline-end:-46px;top:-70px;width:210px;height:210px;border-radius:40px;background:linear-gradient(135deg,var(--orange),var(--red));opacity:.92;transform:rotate(25deg);animation:floaty 6s ease-in-out infinite}
.hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 12px,transparent 12px 26px);pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero .hello{font-size:13px;opacity:.85}
.hero .hd{font-size:20px;font-weight:800}
.hero .hn small{display:block;font-size:12px;opacity:.8}
.hero .hn b{font-size:26px;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.hero .btn{margin-inline-start:auto}

/* stat cards */
.stat{position:relative;overflow:hidden;padding:12px 14px 10px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;transition:transform .25s var(--ease),box-shadow .25s}
.stat>.v,.stat>.n{grid-column:1/-1}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:var(--c1)}
.stat .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 8px 16px -6px var(--c1);margin-bottom:6px}
.stat .ic svg{width:19px;height:19px}
.stat .l{color:var(--muted);font-size:12.5px;line-height:1.5;margin-bottom:6px}
.stat .v{font-size:18px;font-weight:800;margin-top:0}
.stat .n{color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.6}
.c-blue{--c1:#2563EB;--c2:#22A6F5}.c-orange{--c1:#FF7A1A;--c2:#FFB020}.c-red{--c1:#E5383B;--c2:#FF7A59}.c-green{--c1:#0E9F5A;--c2:#34D399}.c-purple{--c1:#6D4AE0;--c2:#A78BFA}

/* buttons */
.btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 16px;font-weight:700;box-shadow:0 2px 0 rgba(15,26,46,.05),0 8px 14px -10px rgba(15,26,46,.35);
  transition:transform .15s var(--ease),box-shadow .2s,background .2s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px);box-shadow:0 2px 0 rgba(15,26,46,.05),0 14px 20px -10px rgba(15,26,46,.4)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.pri{background:linear-gradient(135deg,#2D6BFF,#1D3FB8);color:#fff;border-color:transparent;box-shadow:0 10px 20px -8px rgba(37,99,235,.8)}
.btn.pri::after,.btn.hot::after,.btn.danger::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(130%) skewX(-20deg)}
.btn.pri:hover::after,.btn.hot:hover::after,.btn.danger:hover::after{animation:sheen .7s ease}
.btn.hot{background:linear-gradient(135deg,#FF9A3C,#E5383B);color:#fff;border-color:transparent;box-shadow:0 12px 22px -8px rgba(229,56,59,.85)}
.btn.danger{background:linear-gradient(135deg,#F0504F,#B3171B);color:#fff;border-color:transparent;box-shadow:0 10px 20px -8px rgba(214,47,50,.8)}
.btn.sm{padding:4px 12px;font-size:13px;border-radius:10px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:0 10px;font-size:12px;font-weight:800;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-ok{background:var(--ok-soft);color:var(--ok)} .b-part{background:var(--part-soft);color:var(--part)}
.b-none{background:var(--none-soft);color:var(--none)} .b-late{background:var(--late-soft);color:var(--late)}
.b-late::before{animation:dot 1.4s ease-in-out infinite}
.b-pri{background:var(--primary-soft);color:var(--blue2)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chips button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:3px 14px;font-size:13px;font-weight:500;box-shadow:var(--shadow);transition:transform .15s var(--ease),background .2s,color .2s}
.chips button:hover{transform:translateY(-1px)}.chips button:active{transform:scale(.95)}
.chips button[aria-pressed=true]{background:linear-gradient(135deg,#2D6BFF,#1D3FB8);color:#fff;border-color:transparent;font-weight:700;box-shadow:0 8px 16px -8px rgba(37,99,235,.9)}
.row{display:flex;align-items:center;gap:12px;padding:11px 8px;border-bottom:1px solid var(--line);border-radius:10px;transition:background .15s,transform .2s var(--ease)}
.row:last-child{border-bottom:0}
a.row:hover{background:#F1F6FF;transform:translateX(-3px)}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:800}
.row .m{color:var(--muted);font-size:12.5px;line-height:1.6}
.av{width:42px;height:42px;border-radius:14px;color:#fff;display:grid;place-items:center;font-weight:800;flex:none;font-size:17px;
  background:linear-gradient(135deg,hsl(var(--h,220) 80% 52%),hsl(calc(var(--h,220) + 40) 85% 62%));box-shadow:0 8px 14px -6px hsl(var(--h,220) 80% 50%)}
a.lnk{color:inherit;text-decoration:none}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:30px 10px}
.empty b{display:block;color:var(--ink);margin-bottom:4px}
.note{font-size:12.5px;color:#41506B;background:linear-gradient(135deg,#EEF3FF,#F6F8FD);border:1px solid #DCE6FA;border-radius:12px;padding:9px 12px;line-height:1.7}
.note.warn{background:linear-gradient(135deg,#FFF4DA,#FFF9EC);border-color:#F6DFA6;color:#6B4700}
.note.err{background:var(--late-soft);color:#7A1913}
.fld{display:flex;flex-direction:column;gap:3px;margin-bottom:11px}
.fld label{font-weight:800;font-size:13.5px}
.fld .opt{font-weight:400;color:var(--muted)}
.fld input,.fld select,.fld textarea{border:1.5px solid #C5D0E4;border-radius:12px;padding:8px 12px;background:#fff;min-height:44px;width:100%;transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld select:focus,.fld textarea:focus,.searchbox:focus,.sel-row select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.fld input.ltr-f{direction:ltr;text-align:right}
.fld .hint{font-size:12px;color:var(--muted)}
.fld .err{font-size:12.5px;color:var(--late);font-weight:500}
.jdate{display:grid;grid-template-columns:70px 1fr 90px;gap:6px}
.searchbox{width:100%;border:1.5px solid #C5D0E4;border-radius:14px;padding:10px 14px;margin-bottom:12px;background:#fff;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}

/* ---------- belt strip ---------- */
.belt{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin:12px 0 8px}
.belt button{border:0;border-radius:9px;height:46px;font-size:13px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;padding:0;color:#fff;
  transition:transform .2s var(--ease),box-shadow .2s}
.belt button:not([disabled]):hover{transform:translateY(-4px) scale(1.06);box-shadow:0 12px 16px -8px rgba(15,26,46,.55)}
.belt button small{font-weight:500;font-size:9.5px;opacity:.9}
.belt .s-ok{background:linear-gradient(160deg,#34D399,#0E9F5A)}
.belt .s-part{background:linear-gradient(160deg,#FFC04D,#E58A00)}
.belt .s-unpaid{background:linear-gradient(160deg,#8A9AB8,#566784)}
.belt .s-late{background:linear-gradient(160deg,#FF7A59,#D62F32)}
.belt .s-none{background:repeating-linear-gradient(135deg,#E3E9F3 0 5px,#EEF2F9 5px 10px);color:#8794AD;cursor:default}
.page.enter .belt button{animation:pop .5s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms + .15s)}
.belt .cur{outline:2px solid var(--navy);outline-offset:2px;animation:ring 2.2s infinite}
.page.enter .belt .cur{animation:pop .5s var(--ease) both,ring 2.2s 1.2s infinite;animation-delay:calc(var(--i,0) * 40ms + .15s),1.2s}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:4px;margin-inline-end:4px;vertical-align:-1px}

.pcard{position:relative;border:1px solid rgba(15,26,46,.06);border-radius:16px;background:var(--surface);padding:13px 14px 13px 13px;box-shadow:var(--shadow);scroll-margin-top:90px;transition:box-shadow .25s,transform .25s var(--ease)}
.pcard::before{content:"";position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:5px;border-radius:0 6px 6px 0;background:var(--sc,var(--none))}
.pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.pcard.st-settled{--sc:#0E9F5A}.pcard.st-partial{--sc:#F5A300}.pcard.st-unpaid{--sc:#7A8BA8}.pcard.st-overdue{--sc:#E5383B}
.pcard.flash{box-shadow:0 0 0 4px rgba(255,122,26,.45),var(--shadow-lg)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 8px;text-align:center}
.pgrid div{background:linear-gradient(180deg,#F5F8FE,#EDF2FB);border-radius:12px;padding:6px 2px}
.pgrid small{display:block;color:var(--muted);font-size:11.5px}
.pgrid b{font-size:14px}
.bar{height:8px;border-radius:99px;background:#E4EAF5;overflow:hidden;margin:2px 0 8px}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#34D399,#0E9F5A);animation:grow .9s var(--ease) both .2s;position:relative}
.st-partial .bar i,.st-overdue .bar i{background:linear-gradient(90deg,#FFC04D,#FF7A1A)}
.pay{display:flex;gap:8px;align-items:center;font-size:13px;padding:6px 0;border-top:1px dashed var(--line);flex-wrap:wrap}
.pay .grow{flex:1}
.pay.void{opacity:.6;text-decoration:line-through}
.pay.void .badge{text-decoration:none}

/* ---------- dialog / toast ---------- */
dialog{border:0;border-radius:24px 24px 0 0;padding:0;width:100%;max-width:560px;margin:auto auto 0;max-height:92vh;background:var(--surface);color:var(--ink);overflow:auto;box-shadow:0 -20px 50px rgba(11,22,48,.35)}
dialog::backdrop{background:rgba(8,16,36,.58);backdrop-filter:blur(3px)}
@media(min-width:700px){dialog{border-radius:24px;margin:auto}}
.dl{padding:18px 16px calc(16px + var(--safe-b));border-top:6px solid transparent;border-image:linear-gradient(90deg,var(--orange),var(--gold),var(--blue)) 1}
.dl h2{font-size:18px;margin-bottom:12px;font-weight:800}
.dl .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}
.menu a,.menu button{display:block;width:100%;text-align:start;background:none;border:0;border-bottom:1px solid var(--line);padding:13px 6px;text-decoration:none;color:var(--ink);font-weight:700;border-radius:8px;transition:background .15s}
.menu a:hover,.menu button:hover{background:#F1F6FF}
#toast{position:fixed;inset-inline:12px;bottom:calc(92px + var(--safe-b));z-index:100;color:#fff;border-radius:16px;padding:12px 16px;display:none;max-width:480px;margin-inline:auto;
  background:linear-gradient(135deg,#0B1630,#1D3FB8);box-shadow:0 18px 36px -10px rgba(11,22,48,.65);font-weight:500;border-inline-start:6px solid var(--orange)}
#toast.on{display:block;animation:rise .35s var(--ease)}
@media(min-width:960px){#toast{bottom:24px}}
@media(prefers-reduced-motion:no-preference){dialog[open]{animation:rise .3s var(--ease)}}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 12px,transparent 12px 28px),radial-gradient(600px 400px at 85% 10%,rgba(255,122,26,.55),transparent 70%),radial-gradient(700px 500px at 0 100%,rgba(37,99,235,.7),transparent 70%),#0B1630}
.login .card{max-width:430px;width:100%;padding:24px;border-radius:24px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);animation:rise .6s var(--ease) both}
.login .lg{display:flex;align-items:center;gap:12px}
.login .logo{width:54px;height:54px}
.login h1{font-size:23px;font-weight:800}
.rolebtn{display:flex;align-items:center;gap:12px;width:100%;text-align:start;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:11px 14px;box-shadow:var(--shadow);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.rolebtn:hover{transform:translateY(-3px);border-color:var(--c1);box-shadow:0 16px 26px -14px var(--c1)}
.rolebtn:active{transform:scale(.98)}
.rolebtn .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));flex:none;box-shadow:0 8px 16px -6px var(--c1)}
.rolebtn b{font-size:15px;display:block}.rolebtn span.d{font-size:12.5px;color:var(--muted);display:block;line-height:1.5}
table.mx{width:100%;border-collapse:collapse;font-size:13px}
table.mx th,table.mx td{padding:6px 6px;border-bottom:1px solid var(--line);text-align:center}
table.mx th{background:#F1F5FD;font-weight:800}
table.mx th:first-child,table.mx td:first-child{text-align:start}
table.mx td:not(:first-child){color:var(--ok);font-weight:800}
.tabs{display:flex;gap:6px;background:#fff;border-radius:16px;padding:5px;margin-bottom:14px;box-shadow:var(--shadow)}
.tabs button{flex:1;border:0;background:none;padding:8px 14px;border-radius:12px;font-weight:700;color:var(--muted);transition:background .2s,color .2s}
.tabs button[aria-selected=true]{background:linear-gradient(135deg,#2D6BFF,#1D3FB8);color:#fff;box-shadow:0 8px 16px -8px rgba(37,99,235,.9)}
.sel-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.sel-row select{border:1.5px solid #C5D0E4;border-radius:12px;padding:6px 12px;background:#fff;min-height:42px;box-shadow:var(--shadow);font-weight:700}
@media(max-width:560px){.belt{grid-template-columns:repeat(6,1fr)}.belt button{height:50px}.belt button small{font-size:10.5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.boot{padding:40px 10px;text-align:center;color:var(--muted)}
.skel{padding:30px 10px;text-align:center;color:var(--muted)}
.login .err{color:var(--late);font-size:13px;min-height:1.4em}
.login form .fld input{direction:ltr;text-align:right}
.badge.b-pri.sm{font-size:11px}
.cardlist .row .btnrow{display:flex;gap:6px;flex-wrap:wrap}