/* SH Studio 1.3.0 — dashboard, settlement and account ledger (see the last section). 1.2.0 — Liquid Glass + full-width layout with a right-hand category sidebar.
   0.6.0 — refreshed look: soft layered surfaces, floating tab bar, icon tiles, calm motion.
   Still follows the site: carbon / paper neutrals, Vazirmatn (+ Inter for Latin). Buttons stay flat (no shadows);
   only floating layers (tab bar, sheets, toasts) carry a soft shadow. */
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-Variable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
/* optional fonts: put the files in assets/fonts/ (see fonts/README-fa.txt). Until then they fall back to Vazirmatn. */
@font-face{font-family:"SHIranSans";src:local("IRANSansX"),local("IRANSans"),local("IRANSans(FaNum)"),url("fonts/IRANSans.woff2") format("woff2"),url("fonts/IRANSans.woff") format("woff");font-weight:100 900;font-display:swap}
@font-face{font-family:"SHYekan";src:local("Yekan"),local("Yekan Bakh"),local("YekanBakh"),local("BYekan"),url("fonts/Yekan.woff2") format("woff2"),url("fonts/Yekan.woff") format("woff");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Variable-latin.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
:root{
  --bg:#f3f3f1;--sf:#fff;--sf2:#ebebe8;--tx:#15171a;--mu:#6b7078;--ln:#e1e1de;--ln2:#ececea;
  --ac:#15171a;--ac-tx:#f5f5f3;--ac-soft:#e8e8e5;
  --deposit:#9a6a0c;--cancelled:#c0443d;--rescheduled:#6556b0;--settled:#2b7a52;
  --deposit-bg:#f7eed9;--cancelled-bg:#f9e4e2;--rescheduled-bg:#ebe8f6;--settled-bg:#ddf0e6;
  --glass:rgba(255,255,255,.78);--shadow:0 10px 40px rgba(20,22,26,.14),0 2px 8px rgba(20,22,26,.06);--scrim:rgba(15,16,18,.42);
  --r1:12px;--r2:18px;--r3:28px;
  --font:"Vazirmatn","Segoe UI",Tahoma,system-ui,sans-serif;
  --font-ltr:"Inter","Vazirmatn","Segoe UI",system-ui,sans-serif;
  --scale:1;
  color-scheme:light;
}
:root[data-font=iransans]{--font:"SHIranSans","Vazirmatn","Segoe UI",Tahoma,system-ui,sans-serif}
:root[data-font=yekan]{--font:"SHYekan","Vazirmatn","Segoe UI",Tahoma,system-ui,sans-serif}
:root[data-font=system]{--font:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif}
:root[data-scale=s]{--scale:.92}
:root[data-scale=l]{--scale:1.12}
:root[data-theme=dark]{
  --bg:#1f1f21;--sf:#2a2a2d;--sf2:#343437;--tx:#f3f3f1;--mu:#a2a3a8;--ln:#3b3b3f;--ln2:#323235;
  --ac:#f3f3f1;--ac-tx:#1f1f21;--ac-soft:#38383c;
  --deposit:#e3a94d;--cancelled:#e7857a;--rescheduled:#a99fe6;--settled:#66c895;
  --deposit-bg:#3a3223;--cancelled-bg:#3d2a28;--rescheduled-bg:#2f2c41;--settled-bg:#243a2f;
  --glass:rgba(42,42,45,.8);--shadow:0 12px 44px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);--scrim:rgba(0,0,0,.6);
  color-scheme:dark;
}
@media(prefers-color-scheme:dark){
  :root[data-theme=auto]{
    --bg:#1f1f21;--sf:#2a2a2d;--sf2:#343437;--tx:#f3f3f1;--mu:#a2a3a8;--ln:#3b3b3f;--ln2:#323235;
    --ac:#f3f3f1;--ac-tx:#1f1f21;--ac-soft:#38383c;
    --deposit:#e3a94d;--cancelled:#e7857a;--rescheduled:#a99fe6;--settled:#66c895;
    --deposit-bg:#3a3223;--cancelled-bg:#3d2a28;--rescheduled-bg:#2f2c41;--settled-bg:#243a2f;
    --glass:rgba(42,42,45,.8);--shadow:0 12px 44px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);--scrim:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
html{font-size:calc(16px*var(--scale));-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:400 .9375rem/1.75 var(--font);-webkit-font-smoothing:antialiased}
b,strong{font-weight:600}
[dir=ltr],input[type=email],input[type=tel],input.ltr{font-family:var(--font-ltr)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body.lock{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.hidden{display:none!important}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
main>*{animation:rise .28s ease-out both}
main>*:nth-child(2){animation-delay:.03s}main>*:nth-child(3){animation-delay:.06s}main>*:nth-child(4){animation-delay:.09s}

/* frame: floating tab bar on phones, side rail on wide screens */
.frame{min-height:100dvh;padding:0 16px calc(110px + env(safe-area-inset-bottom));max-width:720px;margin:0 auto}
main{padding-top:calc(22px + env(safe-area-inset-top))}
.nav{position:fixed;z-index:20;inset:auto 12px calc(10px + env(safe-area-inset-bottom)) 12px;max-width:520px;margin:0 auto;display:flex;justify-content:center;gap:2px;
  padding:6px;background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  border:1px solid var(--ln);border-radius:26px;box-shadow:var(--shadow)}
.brand{display:none}
.nv{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px;border:0;background:none;color:var(--mu);border-radius:20px;transition:background .18s,color .18s}
.nv .nt{font-size:.6875rem}
.nv svg{width:21px;height:21px}
.nv[aria-current=page]{color:var(--ac-tx);background:var(--ac)}
.fab{position:fixed;z-index:21;inset-inline-start:18px;bottom:calc(92px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:20px;
  border:0;background:var(--ac);color:var(--ac-tx);display:grid;place-items:center;transition:transform .15s}
.fab:active{transform:scale(.94)}
.fab svg{width:26px;height:26px;stroke-width:2.2}
body.no-fab .fab{display:none}
/* day header: the one expressive element */
.dayhead{display:flex;align-items:flex-end;gap:16px}
.bignum{font-size:5.75rem;line-height:.88;font-weight:200;letter-spacing:-3px}
.daymeta{padding-bottom:6px}
.wd{font-size:1.375rem;font-weight:600;line-height:1.3;letter-spacing:-.2px}
.mo{color:var(--mu)}
h2.sec{font-size:.8125rem;font-weight:600;color:var(--mu);margin:28px 0 10px;letter-spacing:.2px}
.hint{color:var(--mu);margin:8px 0;font-size:.875rem}
.note{background:var(--ac-soft);border-radius:var(--r1);padding:12px 14px;margin:14px 0;font-size:.875rem;line-height:1.9}
.note .btn{margin-top:8px}

/* rows */
.list{display:flex;flex-direction:column;gap:8px}
.ev{display:flex;align-items:center;gap:14px;width:100%;text-align:start;background:var(--sf);border:1px solid var(--ln2);
  border-inline-start:4px solid var(--ln);border-radius:var(--r2);padding:13px 15px;transition:transform .12s,border-color .15s}
button.ev:active,.task:active{transform:scale(.985)}
.ev.st-deposit{border-inline-start-color:var(--deposit)}
.ev.st-cancelled{border-inline-start-color:var(--cancelled)}
.ev.st-rescheduled{border-inline-start-color:var(--rescheduled)}
.ev.st-settled{border-inline-start-color:var(--settled)}
.ev.st-cancelled .ev-title{text-decoration:line-through;color:var(--mu)}
.ev.brow{border-inline-start-width:1px;border-inline-start-color:var(--ln2)}
.ev-time{min-width:58px;font-weight:600}
.ev-body{flex:1;min-width:0;display:flex;flex-direction:column}
.ev-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-meta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--mu);font-size:.8125rem}
.chip{font-size:.75rem;padding:1px 10px;border-radius:999px;background:var(--sf2);color:var(--mu);white-space:nowrap;border:0}
.chip.st-deposit{color:var(--deposit);background:var(--deposit-bg)}.chip.st-cancelled{color:var(--cancelled);background:var(--cancelled-bg)}
.chip.st-rescheduled{color:var(--rescheduled);background:var(--rescheduled-bg)}.chip.st-settled{color:var(--settled);background:var(--settled-bg)}
.chip.pri1{color:var(--deposit);background:var(--deposit-bg)}.chip.pri2{color:var(--cancelled);background:var(--cancelled-bg)}
.bchips{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.empty{border:1.5px dashed var(--ln);border-radius:var(--r2);padding:26px 20px;text-align:center;color:var(--mu)}
.empty .btn{margin-top:12px}

/* calendar */
.mhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.mhead h1{margin:0;font-size:1.375rem;font-weight:600;letter-spacing:-.2px}
.mhead .nav-b{width:40px;height:40px;border-radius:14px;border:1px solid var(--ln);background:var(--sf);display:grid;place-items:center;flex:none}
.flip svg{transform:scaleX(-1)}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.gh{text-align:center;color:var(--mu);font-size:.75rem;padding:4px 0}
.cell{aspect-ratio:1/1.05;border:0;border-radius:14px;background:var(--sf);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;transition:background .15s}
.cell.void{background:none;pointer-events:none}
.cell.today{outline:1.5px solid var(--ac);outline-offset:-1.5px}
.cell[aria-pressed=true]{background:var(--ac);color:var(--ac-tx)}
.dots{display:flex;gap:3px;height:6px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--mu)}
.dot.st-deposit{background:var(--deposit)}.dot.st-cancelled{background:var(--cancelled)}
.dot.st-rescheduled{background:var(--rescheduled)}.dot.st-settled{background:var(--settled)}
.cell[aria-pressed=true] .dot{box-shadow:0 0 0 1.5px var(--ac)}

/* buttons / fields — flat, no shadows */
.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(--ln);background:var(--sf);text-decoration:none;color:var(--tx);transition:background .15s,transform .12s,border-color .15s}
.btn svg{width:19px;height:19px}
.btn:hover{border-color:var(--mu)}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--ac);border-color:var(--ac);color:var(--ac-tx);font-weight:600}
.btn.danger{color:var(--cancelled)}
.btn:disabled{opacity:.5;transform:none}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.lbl{font-size:.8125rem;color:var(--mu)}
input[type=text],input[type=password],input[type=time],input[type=search],select,textarea{width:100%;min-height:46px;padding:9px 14px;border-radius:14px;
  border:1px solid var(--ln);background:var(--bg);transition:border-color .15s,background .15s}
input[type=text]:focus,input[type=password]:focus,input[type=time]:focus,select:focus,textarea:focus{outline:0;border-color:var(--ac);background:var(--sf)}
select{appearance:none;-webkit-appearance:none;padding-inline-end:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center}
textarea{min-height:88px;resize:vertical;line-height:1.8}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
.chk{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.chk input{width:20px;height:20px;accent-color:var(--ac);flex:none}

/* sheet */
.ov{position:fixed;inset:0;z-index:40;background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:100%;max-width:560px;max-height:92dvh;overflow:auto;background:var(--sf);border-radius:var(--r3) var(--r3) 0 0;box-shadow:var(--shadow);
  padding:10px 18px calc(20px + env(safe-area-inset-bottom));animation:up .26s cubic-bezier(.2,.8,.2,1)}
.sheet::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--ln);margin:0 auto 14px}
@media(min-width:700px){.ov{align-items:center}.sheet{border-radius:var(--r3);padding-top:22px}.sheet::before{display:none}}
@keyframes up{from{transform:translateY(32px);opacity:0}to{transform:none;opacity:1}}
.sheet h3{margin:0 0 16px;font-size:1.125rem;letter-spacing:-.2px}
.sheet h4{margin:18px 0 6px;font-size:.9375rem}
.sheet ol{padding-inline-start:20px;margin:6px 0}
.acts{display:flex;gap:10px;margin-top:8px}.acts .pri{flex:1}
.acts.stick{position:sticky;bottom:calc(92px + env(safe-area-inset-bottom));margin-top:18px;z-index:5}
.acts.stick .btn{width:100%;min-height:52px;border-radius:18px;box-shadow:none}
@media(min-width:768px){.acts.stick{bottom:16px}}

/* settings */
.card{background:var(--sf);border:1px solid var(--ln2);border-radius:var(--r2);padding:4px 16px;margin-bottom:16px}
.card.pad16{padding:16px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--ln2)}
.setrow:last-child{border-bottom:0}
.setrow .sub{color:var(--mu);font-size:.8125rem}
.seg{display:inline-flex;background:var(--sf2);border-radius:14px;padding:3px;gap:2px;max-width:100%;flex-wrap:wrap}
.seg button{border:0;background:none;padding:7px 14px;border-radius:11px;color:var(--mu);transition:background .15s,color .15s}
.seg button[aria-pressed=true]{background:var(--sf);color:var(--tx);font-weight:600}
.setrow select{width:auto;min-width:130px}
.tabs{margin-bottom:16px;overflow-x:auto}
.tabs .seg{display:flex}.tabs .seg button{flex:1;white-space:nowrap}

/* toast + reminder banner */
.toast{position:fixed;z-index:60;inset-inline:16px;bottom:calc(100px + env(safe-area-inset-bottom));margin:auto;max-width:440px;background:var(--tx);color:var(--bg);
  padding:13px 18px;border-radius:16px;text-align:center;box-shadow:var(--shadow);animation:rise .22s ease-out}
.toast.err{background:var(--cancelled);color:#fff}
.banner{position:fixed;z-index:50;inset-inline:12px;top:calc(10px + env(safe-area-inset-top));margin:auto;max-width:520px;display:flex;align-items:center;gap:12px;
  background:var(--ac);color:var(--ac-tx);padding:13px 16px;border-radius:18px;box-shadow:var(--shadow);animation:rise .25s ease-out}
.banner b{display:block}.banner span{flex:1}
.banner button{border:0;background:rgba(127,127,127,.28);color:inherit;border-radius:11px;padding:6px 14px}

/* login */
.login{max-width:380px;margin:0 auto;padding:calc(12vh + env(safe-area-inset-top)) 22px 40px}
.login h1{font-size:1.75rem;margin:0 0 4px;font-weight:300;letter-spacing:-.5px}
.login p{color:var(--mu);margin:0 0 26px}
.login .btn{width:100%;margin-top:8px}
.msg{color:var(--cancelled);min-height:24px;margin-top:8px}
.skel{color:var(--mu);padding:44px 0;text-align:center;border-radius:var(--r2);background:linear-gradient(100deg,transparent 30%,var(--ln2) 50%,transparent 70%) 0 0/300% 100%;animation:shimmer 1.6s linear infinite}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* tasks, habits, goals */
.mhead .seg button{padding:6px 12px}
.quick{margin:0 0 8px}
.quick input{width:100%;min-height:50px;padding:8px 16px;border-radius:16px;border:1.5px dashed var(--ln);background:var(--sf)}
.quick input:focus{border-style:solid}
.task{display:flex;align-items:center;gap:12px;background:var(--sf);border:1px solid var(--ln2);border-radius:var(--r2);padding:11px 15px;cursor:pointer;transition:transform .12s}
.task.p2{border-inline-start:4px solid var(--cancelled)}
.task.done .ev-title{text-decoration:line-through;color:var(--mu)}
.wrap{white-space:normal}
.tick{width:28px;height:28px;border-radius:50%;border:2px solid var(--mu);background:none;display:grid;place-items:center;padding:0;flex:none;color:var(--ac-tx);transition:background .15s,border-color .15s}
.tick svg{width:16px;height:16px;stroke-width:3}
.tick.on{background:var(--settled);border-color:var(--settled)}
.late{color:var(--cancelled)}
.bell{display:inline-flex;vertical-align:middle;margin-inline-start:6px;color:var(--mu)}
.bell svg{width:14px;height:14px}
.hchips{display:flex;flex-wrap:wrap;gap:8px}
.hchip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--ln);background:var(--sf);transition:background .15s}
.hchip svg{width:16px;height:16px;stroke-width:3}
.hchip.on{background:var(--settled);border-color:var(--settled);color:#fff}
.hcard{background:var(--sf);border:1px solid var(--ln2);border-radius:var(--r2);padding:13px 15px;margin-bottom:10px}
.hhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.htitle{border:0;background:none;padding:0;font-weight:600;text-align:start}
.sub{color:var(--mu);font-size:.8125rem}
.strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.sd{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:2px 0}
.sw{font-size:.75rem;color:var(--mu)}
.sc{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ln);display:grid;place-items:center;color:#fff}
.sc svg{width:18px;height:18px;stroke-width:3}
.sd.on .sc{background:var(--settled);border-color:var(--settled)}
.sd.off .sc{border-style:dashed;opacity:.5}
.sd.now .sw{color:var(--ac);font-weight:600}
.dchips{display:flex;flex-wrap:wrap;gap:6px}
.dchip{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--ln);background:var(--sf);transition:background .15s}
.dchip[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:var(--ac-tx)}
.gcard{display:flex;align-items:stretch;gap:8px;background:var(--sf);border:1px solid var(--ln2);border-radius:var(--r2);padding:13px 15px}
.gcard.fin{opacity:.7}
.gmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;border:0;background:none;padding:0;text-align:start}
.bar{display:block;height:6px;border-radius:99px;background:var(--sf2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ac);border-radius:99px;transition:width .4s}
.addt{min-height:36px;padding:0 12px;align-self:flex-start;font-size:.8125rem}

/* business */
.ptabs{display:flex;gap:4px;margin:0 0 16px;background:var(--sf2);border-radius:16px;padding:4px}
.ptab{flex:1;min-height:38px;border-radius:12px;border:0;background:none;color:var(--mu);transition:background .15s}
.ptab[aria-pressed=true]{background:var(--sf);color:var(--tx);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stat{background:var(--sf);border:1px solid var(--ln2);border-radius:var(--r2);padding:14px 12px;display:flex;flex-direction:column;gap:2px}
.stat b{font-size:1.125rem;letter-spacing:-.2px}.stat span{font-size:.75rem;color:var(--mu)}
.stat.warn b{color:var(--cancelled)}
.brow{text-align:start}
.flipi svg{transform:scaleX(-1);color:var(--mu)}
.btn.pay{min-height:34px;padding:0 13px;font-size:.8125rem;border-radius:11px}
.addrow{width:100%;margin-top:8px;border-style:dashed;background:none}
.srch{width:100%;margin-bottom:8px}
.lnk{border:0;background:none;padding:0;color:var(--tx);text-decoration:underline;text-underline-offset:3px}
.val{text-align:end;overflow-wrap:anywhere}
textarea.big{min-height:300px}
@media(max-width:380px){.stats{grid-template-columns:1fr}}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:18px;min-height:96px;text-align:start;padding:15px;border-radius:var(--r2);border:1px solid var(--ln2);background:var(--sf);transition:transform .12s,border-color .15s}
.tile:hover{border-color:var(--mu)}.tile:active{transform:scale(.975)}
.tile .ti{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--ac-soft)}
.tile .tt{font-weight:600;font-size:.9375rem;line-height:1.4}
.tile.accent{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;min-height:0;background:var(--ac);color:var(--ac-tx);border-color:var(--ac)}
.tile.accent .ti{background:rgba(127,127,127,.25)}
@media(min-width:600px){.tiles{grid-template-columns:repeat(3,1fr)}}
.toolrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.toolrow .btn{min-height:40px;padding:0 14px;flex:1}
.cnt{font-size:.8125rem;color:var(--mu)}
.toolrow .seg{flex:1;flex-wrap:nowrap}.toolrow .seg button{flex:1;padding:7px 6px;white-space:nowrap}

/* stage 4 */
.rowbtn{width:100%;border:0;background:none;text-align:start;border-bottom:1px solid var(--ln2)}
.inc{color:var(--settled)}
.bars{display:flex;gap:6px;align-items:flex-end;padding:14px 12px 8px}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.bpair{height:110px;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.bpair i{display:block;width:40%;max-width:18px;min-height:2px;border-radius:6px 6px 0 0}
.bi{background:var(--settled)}.bx{background:var(--cancelled)}
.bcol span{font-size:.6875rem;color:var(--mu)}
.catrow{padding:2px 0 8px}.catrow .setrow{border:0;padding-bottom:4px}

/* contacts import + SMS panel */
.srcs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
@media(max-width:520px){.srcs{grid-template-columns:1fr}}
.src{display:flex;flex-direction:column;gap:4px;text-align:start;padding:16px;border-radius:var(--r2);border:1px solid var(--ln);background:var(--bg);transition:border-color .15s}
.src:hover:not(:disabled){border-color:var(--ac)}
.src:disabled{opacity:.55}
.src span{font-size:.8125rem;color:var(--mu);line-height:1.7}
.how{margin:14px 0 0;font-size:.875rem;color:var(--mu)}
.how summary{cursor:pointer}.how ul{margin:8px 0;padding-inline-start:20px;line-height:2}
.imp-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.imp-act{display:inline-flex;gap:14px;flex-wrap:wrap;font-size:.8125rem}
.imp-list{display:flex;flex-direction:column;max-height:340px;overflow:auto;border:1px solid var(--ln2);border-radius:var(--r1);background:var(--bg);margin:8px 0}
.imp-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--ln2);cursor:pointer}
.imp-row:last-child{border-bottom:0}
.imp-row input{width:20px;height:20px;accent-color:var(--ac);flex:none}
.imp-row.dup{opacity:.62}.imp-row.bad{opacity:.5;cursor:default}
.smsmeta{font-size:.8125rem;color:var(--mu);margin:6px 0}
.smsprev{margin:8px 0;padding:12px 14px;border-radius:16px 16px 16px 4px;background:var(--ac-soft);white-space:pre-wrap;font-size:.875rem;line-height:1.9}
.routehead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.dot2{font-size:.75rem;color:var(--mu);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dot2::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ln)}
.dot2.on{color:var(--settled)}.dot2.on::before{background:var(--settled);box-shadow:0 0 0 3px var(--settled-bg)}
.route .acts{margin-top:12px}
.codewrap{display:flex;flex-direction:column;margin:8px 0}
.code{margin:0;padding:12px 14px;border-radius:var(--r1) var(--r1) 0 0;background:var(--bg);border:1px solid var(--ln2);border-bottom:0;font:400 .78rem/1.8 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}
.codewrap .copy{align-self:stretch;min-height:34px;padding:0 10px;font-size:.75rem;border-radius:0 0 var(--r1) var(--r1);background:var(--ac-soft);border-color:var(--ln2)}

/* ---------- stage 5: identity, contracts, invoices, signature ---------- */
.fsec{font-size:.8125rem;font-weight:600;color:var(--mu);margin:18px 0 10px;padding-top:12px;border-top:1px solid var(--ln)}
.fsec:first-child{margin-top:0;border-top:0;padding-top:0}
.sheet.wide{max-width:640px}
.tgrp{font-size:.8125rem;color:var(--mu);margin:16px 0 6px}
.tpl{display:flex;flex-direction:column;gap:2px;width:100%;text-align:start;background:var(--bg);border:1px solid var(--ln);border-radius:var(--r2);padding:12px 14px;margin-bottom:8px}
.tpl b{font-weight:600}.tpl span{color:var(--mu);font-size:.8125rem}
.tpl:hover,.tpl:focus-visible{border-color:var(--ac)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.875rem}
.kv dt{color:var(--mu)}.kv dd{margin:0;overflow-wrap:anywhere}
.cbody{white-space:pre-wrap;line-height:2;background:var(--bg);border:1px solid var(--ln);border-radius:var(--r2);padding:14px;max-height:340px;overflow:auto;font-size:.875rem}
.sigbox{border:1px solid var(--ln);border-radius:var(--r2);background:#fff;display:flex;align-items:center;justify-content:center;min-height:90px;padding:6px}
.sigbox img{max-width:100%;max-height:110px;display:block}
.sigbox.empty{background:var(--bg);color:var(--mu);font-size:.8125rem}
.sigs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px}
.sigs .lbl{margin-bottom:4px;display:block}
.pad{display:block;width:100%;height:170px;background:#fff;border:1.5px dashed var(--ln);border-radius:var(--r2);touch-action:none;cursor:crosshair}
.padbar{display:flex;justify-content:space-between;align-items:center;margin:6px 0 14px;color:var(--mu);font-size:.8125rem}
.acts.wrapx{flex-wrap:wrap}.acts.wrapx .btn{flex:1 1 140px}
.cert{font-size:.8125rem;color:var(--mu);line-height:1.9;overflow-wrap:anywhere}
.cert code{font-family:var(--font-ltr);font-size:.75rem;direction:ltr;unicode-bidi:embed}
.irow{display:grid;grid-template-columns:1fr 64px 110px 34px;gap:6px;margin-bottom:6px;align-items:center}
.irow input{min-height:42px;padding:6px 8px}
.irow .x{border:1px solid var(--ln);background:none;border-radius:10px;min-height:42px}
.itot{display:flex;justify-content:space-between;padding:8px 2px;border-top:1px solid var(--ln);margin-top:8px}
.linkbox{direction:ltr;text-align:left;font-family:var(--font-ltr);font-size:.8125rem;background:var(--bg);border:1px solid var(--ln);border-radius:12px;padding:10px;overflow-wrap:anywhere;margin:8px 0}
.codebig{font-size:2rem;letter-spacing:.25em;text-align:center;font-weight:600;padding:6px 0}
.pill{display:inline-block;font-size:.75rem;padding:1px 10px;border-radius:999px;background:var(--sf2);color:var(--mu)}
.seg.wrapseg{flex-wrap:wrap}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--ln);padding:0}
.swatch[aria-pressed=true]{border-color:var(--tx)}
.signpage{max-width:640px;margin:0 auto;padding:calc(20px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom))}
.signpage h1{font-size:1.375rem;font-weight:600;margin:0 0 4px}
.signpage .btn{width:100%;margin-top:8px}
.signpage .done{text-align:center;padding:40px 0}

/* 0.6.1 — richer surfaces */
.hero{padding:20px 20px 16px;border-radius:var(--r3);border:1px solid var(--ln2);margin-bottom:18px;
  background:radial-gradient(120% 140% at 100% 0,var(--ac-soft),transparent 60%),var(--sf)}
.hero .dayhead{align-items:center}
.hero .daymeta{flex:1;padding:0}
.ring{position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:64px;height:64px;stroke-width:6}
.ring .rbg{stroke:var(--ln)}.ring .rfg{stroke:var(--settled);stroke-linecap:round;transition:stroke-dasharray .6s}
.ring b{font-size:.75rem;font-weight:600}
.hstats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hstats span{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--ln2);font-size:.8125rem;color:var(--mu)}
.hstats b{color:var(--tx);font-weight:600}
.hstats .nx{flex-basis:100%;border-radius:14px;padding:8px 12px}
.ev-time{background:var(--ac-soft);border-radius:12px;padding:5px 8px;min-width:62px;text-align:center;font-size:.875rem}
.av{width:42px;height:42px;border-radius:15px;flex:none;display:grid;place-items:center;font-weight:600;font-size:.9375rem;
  background:hsl(var(--h) 22% 88%);color:hsl(var(--h) 30% 28%)}
:root[data-theme=dark] .av{background:hsl(var(--h) 14% 26%);color:hsl(var(--h) 40% 82%)}
@media(prefers-color-scheme:dark){:root[data-theme=auto] .av{background:hsl(var(--h) 14% 26%);color:hsl(var(--h) 40% 82%)}}
.empty::before{content:"";display:block;width:48px;height:48px;margin:0 auto 12px;border-radius:16px;
  background:var(--ac-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l3-8h12l3 8v6H3z'/%3E%3Cpath d='M3 13h5l1 3h6l1-3h5'/%3E%3C/svg%3E") center/24px no-repeat}
.stat{background:linear-gradient(160deg,var(--sf),var(--bg))}
.tile.accent{background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 78%,var(--mu)))}
.sheet h3{display:flex;align-items:center;gap:10px}
.cell[aria-pressed=true]{transform:scale(1.04)}
.nv[aria-current=page] svg{animation:pop .3s ease-out}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:none}}


/* ======================================================================
   0.7.0 — Liquid Glass + full-width layout
   • < 768px  : phone — floating glass tab bar
   • 768–1199 : tablet — compact glass sidebar (start side = right in RTL, left in LTR)
   • ≥ 1200px : desktop — wide glass sidebar, content fills the whole screen
   Logical properties only, so the same CSS mirrors correctly for English (dir=ltr).
   Buttons keep NO drop shadow (only a sheen gradient); floating layers carry the soft shadow.
   ====================================================================== */
:root{
  --lg-blur:26px;--lg-sat:170%;
  --g1:rgba(255,255,255,.70);--g2:rgba(255,255,255,.42);--gs1:rgba(255,255,255,.90);--gs2:rgba(247,247,245,.84);
  --g-bd:rgba(255,255,255,.88);
  --g-hi:inset 0 1px 0 rgba(255,255,255,.92),0 0 0 .5px rgba(20,22,26,.07);
  --g-drop:0 18px 48px rgba(32,40,64,.14),0 3px 12px rgba(32,40,64,.06);
  --g-in:rgba(255,255,255,.55);--g-in-f:rgba(255,255,255,.9);--nv-on:rgba(255,255,255,.85);
  --o1:#aebcff;--o2:#ffd2b0;--o3:#b4ecd4;--o-op:.62;
  --glass-fill:linear-gradient(145deg,var(--g1),var(--g2));
  --sbw:216px;
}
:root[data-theme=dark]{
  --g1:rgba(80,82,94,.52);--g2:rgba(44,45,54,.36);--gs1:rgba(54,55,64,.92);--gs2:rgba(40,41,48,.88);
  --g-bd:rgba(255,255,255,.14);
  --g-hi:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 .5px rgba(0,0,0,.45);
  --g-drop:0 20px 56px rgba(0,0,0,.5),0 3px 12px rgba(0,0,0,.3);
  --g-in:rgba(0,0,0,.24);--g-in-f:rgba(0,0,0,.36);--nv-on:rgba(255,255,255,.17);
  --o1:#34479a;--o2:#7d4b36;--o3:#256b52;--o-op:.5;
}
@media(prefers-color-scheme:dark){
  :root[data-theme=auto]{
    --g1:rgba(80,82,94,.52);--g2:rgba(44,45,54,.36);--gs1:rgba(54,55,64,.92);--gs2:rgba(40,41,48,.88);
    --g-bd:rgba(255,255,255,.14);
    --g-hi:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 .5px rgba(0,0,0,.45);
    --g-drop:0 20px 56px rgba(0,0,0,.5),0 3px 12px rgba(0,0,0,.3);
    --g-in:rgba(0,0,0,.24);--g-in-f:rgba(0,0,0,.36);--nv-on:rgba(255,255,255,.17);
    --o1:#34479a;--o2:#7d4b36;--o3:#256b52;--o-op:.5;
  }
}
/* something colourful behind the glass, otherwise it has nothing to refract */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--o-op);
  background:radial-gradient(42vmax 42vmax at 88% 4%,var(--o1),transparent 62%),radial-gradient(38vmax 38vmax at 6% 42%,var(--o2),transparent 60%),radial-gradient(46vmax 46vmax at 72% 100%,var(--o3),transparent 62%)}

/* big glass surfaces (blurred) */
.nav,.card,.hero,.stat,.tile,.sheet,.ptabs,.seg{background:var(--glass-fill);border:1px solid var(--g-bd);box-shadow:var(--g-hi);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat))}
.hero{background:radial-gradient(120% 140% at 100% 0,var(--ac-soft),transparent 60%),var(--glass-fill)}
.nav,.sheet{box-shadow:var(--g-hi),var(--g-drop)}
.sheet{background:linear-gradient(145deg,var(--gs1),var(--gs2))}
.ptabs,.seg{padding:3px}
.ptab[aria-pressed=true],.seg button[aria-pressed=true]{background:var(--nv-on)}
/* rows / small cards (translucent, no blur — keeps long lists fast) */
.ev,.task,.hcard,.gcard,.cell,.hchip,.dchip,.tpl,.src,.hstats span,.imp-list,.cbody,.linkbox,.mhead .nav-b,.quick input{background:var(--glass-fill);border-color:var(--g-bd)}
.ev,.task,.hcard,.gcard,.cell,.tpl,.src{box-shadow:var(--g-hi)}
.ev.brow{border-inline-start-color:var(--g-bd)}
.empty{background:var(--g-in);border-color:var(--g-bd)}
.tile.accent{border-color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.24),transparent 55%),linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 78%,var(--mu)))}
.stat{background:var(--glass-fill)}
/* buttons: translucent + sheen, never a drop shadow */
.btn{background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 60%),var(--glass-fill);border-color:var(--g-bd)}
.btn.pri{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 60%),var(--ac);border-color:var(--ac)}
.fab{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 60%),var(--ac)}
input[type=text],input[type=password],input[type=time],input[type=search],select,textarea{background-color:var(--g-in);border-color:var(--g-bd)}
input[type=text]:focus,input[type=password]:focus,input[type=time]:focus,select:focus,textarea:focus{background-color:var(--g-in-f)}
.banner{background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 60%),var(--ac);border-radius:22px}
.ov{background:var(--scrim);-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%)}

/* phone: floating glass tab bar, active item = lighter glass pill */
.nav{border-radius:30px;padding:7px}
.nv[aria-current=page]{background:var(--nv-on);color:var(--tx);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.nv svg{transition:transform .2s}
.sn-wrap,.brand{display:none}

/* category links under "استودیو" / "من": only inside the sidebar */
.sn{display:flex;align-items:center;gap:10px;width:100%;padding:7px 12px;border:0;background:none;border-radius:12px;color:var(--mu);font-size:.875rem;text-align:start;transition:background .15s,color .15s}
.sn svg{width:17px;height:17px}
.sn:hover{background:var(--ac-soft);color:var(--tx)}
.sn[aria-current=true]{background:var(--nv-on);color:var(--tx);font-weight:600}

@media(min-width:768px){
  .frame{max-width:none;margin:0;padding:0;display:grid;grid-template-columns:var(--sbw) minmax(0,1fr);align-items:start;gap:0}
  .nav{position:sticky;inset:auto;top:12px;margin:12px;margin-inline-end:0;height:calc(100dvh - 24px);max-width:none;
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:3px;padding:16px 10px;overflow:hidden}
  .nav>.brand,.nav>.nv{flex:none}
  .brand{display:flex;align-items:center;gap:10px;font-size:1.125rem;font-weight:600;padding:2px 12px 16px;letter-spacing:-.2px}
  .brand::before{content:"";width:26px;height:26px;border-radius:9px;flex:none;background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 55%,var(--o1)))}
  .nv{flex:none;max-width:none;flex-direction:row;gap:12px;padding:10px 12px;border-radius:15px}
  .nv .nt{font-size:.9375rem}
  .nv:hover{background:var(--ac-soft)}
  .nv[aria-current=page]{background:var(--nv-on)}
    .sn-wrap{flex-direction:column;gap:1px;margin:0 0 8px;padding-inline-start:10px;flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
  .sn-wrap::-webkit-scrollbar{display:none}
  .sn{padding:6px 12px;padding-inline-start:22px;line-height:1.6}
  .nv{padding-block:8px}
  .nv.last{margin-top:auto}
  main{padding:calc(26px + env(safe-area-inset-top)) clamp(18px,2.6vw,44px) 72px;min-width:0}
  .fab{inset-inline-start:auto;inset-inline-end:28px;bottom:28px}
  .toast{bottom:32px!important}
  /* categories live in the sidebar now */
  .ptabs,.tiles,.tilesec{display:none}
  /* use the room: lists become responsive card grids */
  .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:10px}
  .hchips{gap:10px}
  .stats{gap:14px}.stat{padding:18px}.stat b{font-size:1.375rem}
  .cell{aspect-ratio:auto;min-height:76px}
  .grid{gap:8px}
  main>.card,main>.note,main>.login{max-width:900px}
  .mhead{justify-content:flex-start;gap:12px}
  .mhead h1{flex:1;text-align:start}
}
@media(min-width:1200px){
  :root{--sbw:256px}
  .cell{min-height:104px}
  .list{grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:12px}
  .hero{padding:26px 28px}
  .bignum{font-size:7rem}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1700px){.list{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}}

/* LTR (English) mirror fixes — the grid/sidebar flip on their own */
:root[dir=ltr] .flip svg,:root[dir=ltr] .flipi svg{transform:none}
:root[dir=ltr] .nav-b:not(.flip) svg{transform:scaleX(-1)}
:root[dir=ltr] select{background-position:right 14px center}

/* fallbacks */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root,:root[data-theme]{--g1:var(--sf);--g2:var(--sf);--gs1:var(--sf);--gs2:var(--sf)}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  :root,:root[data-theme]{--g1:var(--sf);--g2:var(--sf);--gs1:var(--sf);--gs2:var(--sf);--lg-blur:0px;--lg-sat:100%}
  body::before{display:none}
}

/* ---- v0.8.0: collapsible sidebar groups, site-home link, fixed search bar ---- */
.nvg{display:contents}
.chev{display:none}
.gs-hide{display:none!important}
.content{min-width:0}
.gsbar{position:sticky;top:0;z-index:15;padding:calc(10px + env(safe-area-inset-top)) 16px 8px}
.gs{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:16px;background:var(--glass-fill,var(--sf));border:1px solid var(--g-bd,var(--ln));
  -webkit-backdrop-filter:blur(var(--lg-blur,18px)) saturate(var(--lg-sat,160%));backdrop-filter:blur(var(--lg-blur,18px)) saturate(var(--lg-sat,160%))}
.gs:focus-within{border-color:var(--ac)}
.gs-ic svg{width:18px;height:18px;color:var(--mu)}
.gs .gs-in{flex:1;min-width:0;height:100%;border:0!important;background:none!important;box-shadow:none!important;padding:0;margin:0;border-radius:0;outline:0;font-size:.9375rem;-webkit-appearance:none;appearance:none}
.gs-in::-webkit-search-cancel-button{display:none}
.gs-key{display:none;font:500 .6875rem/1 var(--font-ltr);color:var(--mu);border:1px solid var(--ln);border-radius:7px;padding:4px 7px;direction:ltr;white-space:nowrap}
.gs-x{display:none;border:0;background:none;padding:2px;color:var(--mu);line-height:0}
.gs-x svg{width:16px;height:16px}
.gsbar.has .gs-x{display:block}.gsbar.has .gs-key{display:none!important}
.gs-note{padding:8px 6px 0;color:var(--mu);font-size:.8125rem}
.frame>.content>main{padding-top:6px}
@media(min-width:768px){
  .gsbar{padding:calc(14px + env(safe-area-inset-top)) clamp(18px,2.6vw,44px) 6px}
  .gs-key{display:inline-block}
  .frame>.content>main{padding-top:14px}
  .nvg{display:flex;align-items:center;gap:2px;flex:none}
  .nvg>.nv{flex:1;min-width:0}
  .chev{display:grid;place-items:center;width:34px;height:34px;flex:none;border:0;background:none;border-radius:11px;color:var(--mu);transition:background .15s,color .15s}
  .chev:hover{background:var(--ac-soft);color:var(--tx)}
  .chev svg{width:16px;height:16px;transition:transform .2s}
  .nvg:not(.open) .chev svg{transform:rotate(90deg)}
  :root[dir=ltr] .nvg:not(.open) .chev svg{transform:rotate(-90deg)}
  .sn-wrap.open{display:flex}
}

/* ======================================================================
   0.9.0 — iOS 26 "Liquid Glass"
   Clear, lightly-tinted glass over a vivid backdrop: thin blur, strong saturation, a bright
   specular rim on the top-start edge, a soft counter-rim on the opposite edge, a diagonal
   highlight streak, and fully round shapes (pills for controls, 50px for big boxes).
   ====================================================================== */
:root{
  --lg-blur:14px;--lg-sat:190%;
  --lg-spec:linear-gradient(135deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.08) 24%,rgba(255,255,255,0) 52%,rgba(255,255,255,.10) 80%,rgba(255,255,255,.34) 100%);
  --glass-fill:var(--lg-spec),rgba(255,255,255,.26);
  --g-bd:rgba(255,255,255,.55);
  --g-hi:inset 2px 2px 1px -1px rgba(255,255,255,.95),inset -1.5px -1.5px 1px -1px rgba(255,255,255,.7),inset 0 0 26px rgba(255,255,255,.30),inset 0 -8px 18px -10px rgba(120,140,255,.18);
  --g-drop:0 14px 40px rgba(50,60,130,.18),0 2px 10px rgba(50,60,130,.07);
  --gs1:rgba(255,255,255,.62);--gs2:rgba(255,255,255,.44);
  --g-in:rgba(255,255,255,.34);--g-in-f:rgba(255,255,255,.62);--nv-on:rgba(255,255,255,.62);
  --o1:#7fa2ff;--o2:#ffa98a;--o3:#7fe0c0;--o4:#e49bff;--o-op:.9;
  --lg-bg:linear-gradient(165deg,#e3ebff 0%,#f3e8ff 48%,#ffeede 100%);
}
:root[data-theme=dark]{
  --lg-spec:linear-gradient(135deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.04) 24%,rgba(255,255,255,0) 52%,rgba(255,255,255,.05) 80%,rgba(255,255,255,.14) 100%);
  --glass-fill:var(--lg-spec),rgba(255,255,255,.075);
  --g-bd:rgba(255,255,255,.2);
  --g-hi:inset 2px 2px 1px -1px rgba(255,255,255,.5),inset -1.5px -1.5px 1px -1px rgba(255,255,255,.22),inset 0 0 26px rgba(255,255,255,.06),inset 0 -8px 18px -10px rgba(140,160,255,.14);
  --g-drop:0 16px 46px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.3);
  --gs1:rgba(70,74,100,.58);--gs2:rgba(40,42,62,.5);
  --g-in:rgba(0,0,0,.22);--g-in-f:rgba(0,0,0,.34);--nv-on:rgba(255,255,255,.16);
  --o1:#3b52e0;--o2:#b04a86;--o3:#1f9a80;--o4:#6a3fc9;--o-op:.62;
  --lg-bg:linear-gradient(165deg,#0a0c1c 0%,#14102a 55%,#0b1a1c 100%);
}
@media(prefers-color-scheme:dark){
  :root[data-theme=auto]{
    --lg-spec:linear-gradient(135deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.04) 24%,rgba(255,255,255,0) 52%,rgba(255,255,255,.05) 80%,rgba(255,255,255,.14) 100%);
    --glass-fill:var(--lg-spec),rgba(255,255,255,.075);
    --g-bd:rgba(255,255,255,.2);
    --g-hi:inset 2px 2px 1px -1px rgba(255,255,255,.5),inset -1.5px -1.5px 1px -1px rgba(255,255,255,.22),inset 0 0 26px rgba(255,255,255,.06),inset 0 -8px 18px -10px rgba(140,160,255,.14);
    --g-drop:0 16px 46px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.3);
    --gs1:rgba(70,74,100,.58);--gs2:rgba(40,42,62,.5);
    --g-in:rgba(0,0,0,.22);--g-in-f:rgba(0,0,0,.34);--nv-on:rgba(255,255,255,.16);
    --o1:#3b52e0;--o2:#b04a86;--o3:#1f9a80;--o4:#6a3fc9;--o-op:.62;
    --lg-bg:linear-gradient(165deg,#0a0c1c 0%,#14102a 55%,#0b1a1c 100%);
  }
}
body{background:var(--lg-bg) fixed}
body::before{background:radial-gradient(46vmax 46vmax at 90% 2%,var(--o1),transparent 62%),radial-gradient(40vmax 40vmax at 4% 38%,var(--o2),transparent 60%),radial-gradient(48vmax 48vmax at 70% 104%,var(--o3),transparent 62%),radial-gradient(34vmax 34vmax at 30% 8%,var(--o4),transparent 64%)}

/* every glass layer: thin blur + saturation, specular rim */
.nav,.card,.hero,.stat,.tile,.sheet,.ptabs,.seg,.gs,.btn:not(.pri),.chip,.hchip,.dchip,.ev,.task,.hcard,.gcard,.hstats span,.mhead .nav-b,.cell,.tpl,.src,.empty,.imp-list,.cbody,.linkbox,.note,.toast,.chev{
  background:var(--glass-fill);border:1px solid var(--g-bd);box-shadow:var(--g-hi);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat))}
.nav,.sheet,.toast{box-shadow:var(--g-hi),var(--g-drop)}
.sheet{background:var(--lg-spec),linear-gradient(145deg,var(--gs1),var(--gs2));-webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%)}
.hero{background:radial-gradient(120% 140% at 100% 0,var(--ac-soft),transparent 62%),var(--glass-fill)}
.empty{border-style:solid;border-width:1px}
.chev{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.chev:hover{background:var(--g-in)}
.nv[aria-current=page],.sn[aria-current=true],.ptab[aria-pressed=true],.seg button[aria-pressed=true]{
  background:var(--lg-spec),var(--nv-on);box-shadow:var(--g-hi);border:1px solid var(--g-bd)}
.nv,.sn,.ptab,.seg button{border:1px solid transparent}
/* tinted (primary) glass */
.btn.pri,.fab,.banner,.tile.accent{
  background:var(--lg-spec),color-mix(in srgb,var(--ac) 88%,transparent);border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 2px 2px 1px -1px rgba(255,255,255,.7),inset -1.5px -1.5px 1px -1px rgba(255,255,255,.3),inset 0 0 18px rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat))}
.fab{box-shadow:inset 2px 2px 1px -1px rgba(255,255,255,.7),inset -1.5px -1.5px 1px -1px rgba(255,255,255,.3),0 10px 28px rgba(30,40,100,.28)}
/* inputs: sunken clear glass */
input[type=text],input[type=password],input[type=time],input[type=search],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=url],select,textarea,.quick input{
  background-color:var(--g-in);background-image:none;border:1px solid var(--g-bd);
  box-shadow:inset 0 2px 5px rgba(20,30,70,.10),inset 0 -1px 0 rgba(255,255,255,.5)}
.quick input{border-style:solid}
input:focus,select:focus,textarea:focus{background-color:var(--g-in-f);border-color:var(--ac)}

/* shapes: pills for every control, 50px for big boxes */
.btn,.btn.pay,.acts.stick .btn,.nv,.sn,.chev,.fab,.ptabs,.ptab,.seg,.seg button,.chip,.pill,.hchip,.dchip,.hstats span,.hstats .nx,.ev-time,
input[type=text],input[type=password],input[type=time],input[type=search],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=url],select,.quick input,
.mhead .nav-b,.tile .ti,.av,.banner button,.toast,.gs,.gs-key,.codewrap .copy,.irow .x,.ev,.task,.cell,.tick,.swatch,.skel,.lnk{border-radius:999px}
.card,.hero,.stat,.tile,.gcard,.hcard,.tpl,.src,.empty,.note,.banner,.imp-list,.nav{border-radius:50px}
.sheet{border-radius:50px 50px 0 0}
.cbody,.linkbox,.smsprev,.code,.sigbox,.pad,textarea{border-radius:34px}
.codewrap .copy{border-radius:999px}
.brand::before,.empty::before{border-radius:50%}
.btn:active,.nv:active,.sn:active,.chev:active,.fab:active,.tile:active,.ptab:active,.seg button:active,.hchip:active,.dchip:active{transform:scale(.95)}
.btn,.nv,.sn,.fab,.tile,.ptab,.seg button,.hchip,.dchip,.ev,.task{transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s,border-color .2s}
.ev{border-inline-start-width:1px}

/* breathing room so content clears the rounder corners */
.card{padding:8px 28px}
.hero{padding:28px 34px 22px}
.stat{padding:18px 22px}
.tile{padding:20px 24px;min-height:104px}
.gcard,.hcard{padding:16px 28px}
.tpl,.src{padding:16px 28px}
.empty{padding:32px 28px}
.note{padding:14px 26px}
.banner{padding:13px 24px}
.ev{padding:12px 24px}
.task{padding:11px 22px}
.btn{padding:0 22px}.btn.pay{padding:0 16px}
.sheet{padding:14px 26px calc(24px + env(safe-area-inset-bottom))}
.nav{padding:8px}
.cbody,.linkbox{padding:16px 24px}
@media(max-width:699px){
  .sheet{width:calc(100% - 16px);margin:0 8px calc(8px + env(safe-area-inset-bottom));border-radius:50px;padding-bottom:24px}
}
@media(min-width:700px){.sheet{border-radius:50px}}
@media(min-width:768px){
  .nav{padding:24px 14px}
  .nv,.sn{border-radius:999px}
  .hero{padding:30px 40px 24px}
}

/* compact search box */
.gsbar{padding:calc(8px + env(safe-area-inset-top)) 16px 4px}
.gs{height:36px;padding:0 14px;gap:6px}
.gs .gs-in{font-size:.8125rem}
.gs-ic svg{width:15px;height:15px}
.gs-key{font-size:.625rem;padding:3px 7px}
@media(min-width:768px){.gsbar{padding:calc(12px + env(safe-area-inset-top)) clamp(18px,2.6vw,44px) 2px}.gs{width:min(100%,300px)}}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root,:root[data-theme]{--glass-fill:var(--sf);--gs1:var(--sf);--gs2:var(--sf);--lg-spec:none}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  :root,:root[data-theme]{--glass-fill:var(--sf);--gs1:var(--sf);--gs2:var(--sf);--lg-spec:none;--lg-blur:0px;--lg-sat:100%}
  body{background:var(--bg)}
}
input[type=checkbox]{border-radius:50%}

/* ======================================================================
   0.9.1 — standard proportions (replaces the all-50px rounding of 0.9.0)
   capsule: buttons, tabs, chips, search · 16px: inputs · 20–26px: rows, cards, tiles, sheets
   ====================================================================== */
.card,.hero,.stat,.tile,.gcard,.hcard,.tpl,.src,.empty,.note,.imp-list{border-radius:24px}
.hero{border-radius:28px}
.nav{border-radius:28px}
.banner{border-radius:22px}
.ev,.task{border-radius:20px}
.cell{border-radius:16px}
.sheet{border-radius:28px 28px 0 0}
.cbody,.linkbox,.smsprev,.code,.sigbox,.pad{border-radius:18px}
textarea,input[type=text],input[type=password],input[type=time],input[type=search],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=url],select,.quick input{border-radius:16px}
.mhead .nav-b,.tile .ti,.av,.ev-time{border-radius:14px}
.skel{border-radius:20px}
input[type=checkbox]{border-radius:7px}
.irow .x{border-radius:12px}
.nv,.sn{border-radius:16px}
.chev{border-radius:12px}
.hstats .nx{border-radius:16px}
/* padding back to normal proportions */
.card{padding:4px 18px}
.hero{padding:22px 22px 18px}
.stat{padding:14px 14px}
.tile{padding:16px;min-height:96px}
.gcard,.hcard{padding:13px 16px}
.tpl,.src{padding:14px 16px}
.empty{padding:26px 20px}
.note{padding:12px 16px}
.banner{padding:13px 16px}
.ev{padding:13px 16px}
.task{padding:11px 16px}
.btn{padding:0 18px}.btn.pay{padding:0 13px}
.sheet{padding:12px 20px calc(20px + env(safe-area-inset-bottom))}
.nav{padding:7px}
.cbody,.linkbox{padding:14px}
@media(max-width:699px){.sheet{width:calc(100% - 16px);margin:0 8px calc(8px + env(safe-area-inset-bottom));border-radius:28px;padding-bottom:20px}}
@media(min-width:700px){.sheet{border-radius:28px}}
@media(min-width:768px){
  .nav{padding:18px 10px;border-radius:28px}
  .nv,.sn{border-radius:14px}
  .hero{padding:26px 28px 20px}
}
@media(max-width:767px){.nav{border-radius:30px}.nv{border-radius:22px}}

/* ---- 0.9.2: search = quick finder with a results panel ---- */
.gsbar{z-index:30}
.gswrap{position:relative;width:100%}
@media(min-width:768px){.gswrap{width:min(100%,340px)}.gs{width:100%}}
.gsres{position:absolute;inset-inline:0;top:calc(100% + 8px);max-height:min(60vh,440px);overflow:auto;padding:8px;border-radius:24px;
  background:var(--lg-spec),linear-gradient(145deg,var(--gs1),var(--gs2));border:1px solid var(--g-bd);box-shadow:var(--g-hi),var(--g-drop);
  -webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%)}
@media(min-width:768px){.gsres{inset-inline-end:auto;width:min(92vw,400px)}}
.gs-h{padding:8px 14px;color:var(--mu);font-size:.75rem}
.gs-r{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;background:none;text-align:start;padding:9px 14px;border-radius:16px;font-size:.875rem}
.gs-r.on,.gs-r:hover{background:var(--nv-on)}
.gs-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-c{flex:none;font-size:.6875rem;color:var(--mu);border:1px solid var(--g-bd);border-radius:999px;padding:0 9px}
.gsres{background:var(--lg-spec),var(--sf);background-blend-mode:soft-light}
.gsres{background:var(--lg-spec),color-mix(in srgb,var(--sf) 88%,transparent)}

/* ======================================================================
   1.0.0 — CRM look (replaces Liquid Glass)
   Solid surfaces · dark navy sidebar vs light page · one strong accent · unmistakable "selected" state
   ====================================================================== */
:root{
  --bg:#f1f4f9;--sf:#ffffff;--sf2:#e8edf5;--tx:#111827;--mu:#5b6578;--ln:#cfd6e3;--ln2:#e0e5ee;
  --ac:#2457d6;--ac-tx:#ffffff;--ac-soft:#e3ebfc;
  --deposit:#a35f00;--cancelled:#c62828;--rescheduled:#6d3fd1;--settled:#16794a;
  --deposit-bg:#fdefd0;--cancelled-bg:#fde3e3;--rescheduled-bg:#ece4fb;--settled-bg:#d9f3e4;
  --shadow:0 8px 28px rgba(17,24,39,.14),0 1px 3px rgba(17,24,39,.08);--scrim:rgba(10,15,28,.55);
  --card-sh:0 1px 2px rgba(17,24,39,.06),0 1px 1px rgba(17,24,39,.04);
  --side:#0f1b33;--side-hi:rgba(255,255,255,.07);--side-tx:#eef2fb;--side-mu:#9fadc9;--side-ln:rgba(255,255,255,.10);
  --r1:10px;--r2:14px;--r3:18px;
  --glass-fill:var(--sf);--lg-spec:none;--g-bd:var(--ln2);--g-hi:none;--g-drop:var(--shadow);
  --g-in:var(--sf);--g-in-f:var(--sf);--nv-on:var(--ac-soft);--gs1:var(--sf);--gs2:var(--sf);
  --lg-blur:0px;--lg-sat:100%;--lg-bg:var(--bg);
}
:root[data-theme=dark]{
  --bg:#0d121d;--sf:#161d2c;--sf2:#202a3d;--tx:#eef2fa;--mu:#9aa6bd;--ln:#33405a;--ln2:#26314a;
  --ac:#5b8cff;--ac-tx:#06122e;--ac-soft:#1c2a4d;
  --deposit:#f2b04a;--cancelled:#ff8a80;--rescheduled:#b9a6ff;--settled:#4ade9a;
  --deposit-bg:#3b2f14;--cancelled-bg:#40201f;--rescheduled-bg:#2c2550;--settled-bg:#123a28;
  --shadow:0 10px 32px rgba(0,0,0,.55);--scrim:rgba(0,0,0,.68);--card-sh:0 1px 2px rgba(0,0,0,.4);
  --side:#131d33;--side-hi:rgba(255,255,255,.08);--side-ln:rgba(255,255,255,.10);
}
@media(prefers-color-scheme:dark){
  :root[data-theme=auto]{
    --bg:#0d121d;--sf:#161d2c;--sf2:#202a3d;--tx:#eef2fa;--mu:#9aa6bd;--ln:#33405a;--ln2:#26314a;
    --ac:#5b8cff;--ac-tx:#06122e;--ac-soft:#1c2a4d;
    --deposit:#f2b04a;--cancelled:#ff8a80;--rescheduled:#b9a6ff;--settled:#4ade9a;
    --deposit-bg:#3b2f14;--cancelled-bg:#40201f;--rescheduled-bg:#2c2550;--settled-bg:#123a28;
    --shadow:0 10px 32px rgba(0,0,0,.55);--scrim:rgba(0,0,0,.68);--card-sh:0 1px 2px rgba(0,0,0,.4);
    --side:#131d33;--side-hi:rgba(255,255,255,.08);--side-ln:rgba(255,255,255,.10);
  }
}
body{background:var(--bg)}
body::before{display:none!important}

/* kill every glass effect */
.nav,.card,.hero,.stat,.tile,.sheet,.ptabs,.seg,.gs,.btn,.chip,.hchip,.dchip,.ev,.task,.hcard,.gcard,.hstats span,.mhead .nav-b,.cell,.tpl,.src,.empty,.imp-list,.cbody,.linkbox,.note,.toast,.chev,.gsres,.banner,.fab,.tile.accent{
  -webkit-backdrop-filter:none;backdrop-filter:none}
.ov{-webkit-backdrop-filter:none;backdrop-filter:none}

/* surfaces: white cards on a tinted page, clear 1px border */
.card,.hero,.stat,.tile,.gcard,.hcard,.tpl,.src,.ev,.task,.cell,.hchip,.dchip,.mhead .nav-b,.imp-list,.cbody,.linkbox,.gsres{
  background:var(--sf);border:1px solid var(--ln2);box-shadow:var(--card-sh)}
.hero{background:var(--sf);border-inline-start:4px solid var(--ac)}
.stat{background:var(--sf);border-top:3px solid var(--ac)}
.stat.warn{border-top-color:var(--cancelled)}
.sheet{background:var(--sf);border:1px solid var(--ln);box-shadow:var(--shadow)}
.note{background:var(--ac-soft);border:1px solid transparent;box-shadow:none;border-inline-start:4px solid var(--ac)}
.empty{background:var(--sf);border:1.5px dashed var(--ln);box-shadow:none}
.toast{background:var(--tx);color:var(--bg);border:0;box-shadow:var(--shadow)}
.toast.err{background:var(--cancelled);color:#fff}
.gsres{box-shadow:var(--shadow)}
.gs{background:var(--sf);border:1px solid var(--ln);box-shadow:none}
.gs:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
.gs-r.on,.gs-r:hover{background:var(--ac-soft)}
.gs-c{border-color:var(--ln)}

/* proportions: CRM-standard, tighter */
.card,.hero,.stat,.tile,.gcard,.hcard,.tpl,.src,.note,.imp-list,.gsres{border-radius:var(--r2)}
.hero{border-radius:var(--r3)}
.ev,.task,.banner{border-radius:var(--r2)}
.cell{border-radius:12px}
.btn,.seg,.ptabs,.gs,.hchip,.dchip,.chip,.pill{border-radius:12px}
.chip,.pill{border-radius:999px}
.seg button,.ptab{border-radius:9px}
.nv,.sn{border-radius:11px}
.sheet{border-radius:var(--r3) var(--r3) 0 0}
@media(max-width:699px){.sheet{width:100%;margin:0;border-radius:var(--r3) var(--r3) 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}}
@media(min-width:700px){.sheet{border-radius:var(--r3)}}
.card{padding:4px 18px}.hero{padding:20px 22px}.tile{padding:16px}.ev{padding:12px 16px}.task{padding:10px 16px}
.btn{padding:0 16px}.btn.pay{padding:0 12px}
.hstats .nx{border-radius:12px}
.hstats span{background:var(--bg);border:1px solid var(--ln2);box-shadow:none}

/* inputs: white, visible border, strong focus ring */
input[type=text],input[type=password],input[type=time],input[type=search],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=url],select,textarea,.quick input{
  background-color:var(--sf);border:1px solid var(--ln);box-shadow:none;border-radius:12px}
.quick input{border-style:dashed}
input:focus,select:focus,textarea:focus{background-color:var(--sf);border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft);outline:0}
:root[data-theme=dark] input,:root[data-theme=dark] select,:root[data-theme=dark] textarea{background-color:var(--bg)}
@media(prefers-color-scheme:dark){:root[data-theme=auto] input,:root[data-theme=auto] select,:root[data-theme=auto] textarea{background-color:var(--bg)}}
textarea,.cbody,.linkbox,.smsprev,.code,.sigbox,.pad{border-radius:12px}

/* buttons: neutral = white+border, primary = solid accent, danger = red outline */
.btn{background:var(--sf);border:1px solid var(--ln);box-shadow:none;color:var(--tx)}
.btn:hover{border-color:var(--ac);color:var(--ac)}
.btn.pri,.fab,.banner,.tile.accent{background:var(--ac);color:var(--ac-tx);border:1px solid var(--ac);box-shadow:none}
.btn.pri:hover{background:color-mix(in srgb,var(--ac) 88%,#000);color:var(--ac-tx)}
.fab{box-shadow:0 6px 18px color-mix(in srgb,var(--ac) 45%,transparent)}
.btn.danger{color:var(--cancelled);border-color:color-mix(in srgb,var(--cancelled) 45%,var(--ln))}
.btn.danger:hover{background:var(--cancelled-bg);color:var(--cancelled);border-color:var(--cancelled)}

/* ---------- SELECTED STATES: solid accent fill + contrasting text ---------- */
.seg,.ptabs{background:var(--sf2);border:1px solid var(--ln2);padding:3px}
.seg button,.ptab{background:none;border:1px solid transparent;color:var(--mu);box-shadow:none}
.seg button:hover,.ptab:hover{color:var(--tx)}
.seg button[aria-pressed=true],.ptab[aria-pressed=true]{background:var(--ac);color:var(--ac-tx);font-weight:600;border-color:var(--ac);box-shadow:0 1px 2px rgba(17,24,39,.2)}
.dchip[aria-pressed=true],.cell[aria-pressed=true]{background:var(--ac);color:var(--ac-tx);border-color:var(--ac)}
.cell[aria-pressed=true]{transform:none;box-shadow:0 2px 8px color-mix(in srgb,var(--ac) 40%,transparent)}
.cell.today:not([aria-pressed=true]){border:1.5px solid var(--ac);background:var(--ac-soft)}
.hchip.on{background:var(--settled);border-color:var(--settled);color:#fff}
.tpl:hover,.tpl:focus-visible,.src:hover:not(:disabled){border-color:var(--ac);background:var(--ac-soft)}
.swatch{width:30px;height:30px;border:2px solid var(--sf);box-shadow:0 0 0 1px var(--ln);position:relative;transition:box-shadow .15s,transform .15s}
.swatch:hover{transform:scale(1.08)}
.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--sf),0 0 0 4.5px var(--tx)}
.swatch[aria-pressed=true]::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}
input[type=checkbox],input[type=radio]{accent-color:var(--ac)}

/* ---------- Sidebar / tab bar: dark navy, always contrasting with the page ---------- */
.nav{background:var(--side);border:1px solid var(--side-ln);box-shadow:0 10px 30px rgba(8,14,30,.28);
  --tx:var(--side-tx);--mu:var(--side-mu);--ln:var(--side-ln);--ln2:var(--side-ln);--ac-soft:var(--side-hi);color:var(--side-tx)}
.nav .brand{color:var(--side-tx)}
.brand::before{background:var(--ac);border-radius:9px}
.nv,.sn{color:var(--side-mu);background:none;border:1px solid transparent;box-shadow:none}
.nv:hover,.sn:hover{background:var(--side-hi);color:var(--side-tx)}
.nv[aria-current=page],.sn[aria-current=true]{background:var(--ac);color:var(--ac-tx);border-color:var(--ac);box-shadow:none;font-weight:600}
.nv[aria-current=page] svg,.sn[aria-current=true] svg{color:var(--ac-tx)}
.chev{color:var(--side-mu);background:none;box-shadow:none;border-color:transparent}
.chev:hover{background:var(--side-hi);color:var(--side-tx)}
@media(min-width:768px){
  .nav{border-radius:var(--r3);padding:18px 10px}
  .nv,.sn{border-radius:10px}
  .sn[aria-current=true]{background:color-mix(in srgb,var(--ac) 22%,transparent);color:var(--side-tx);border-color:transparent;box-shadow:inset 3px 0 0 var(--ac)}
  :root[dir=rtl] .sn[aria-current=true]{box-shadow:inset -3px 0 0 var(--ac)}
  .sn[aria-current=true] svg{color:var(--ac)}
}
@media(max-width:767px){.nav{border-radius:22px}.nv{border-radius:16px}}

/* ---------- status colors: bold, readable ---------- */
.ev{border-inline-start:4px solid var(--ln)}
.ev.st-deposit{border-inline-start-color:var(--deposit)}.ev.st-cancelled{border-inline-start-color:var(--cancelled)}
.ev.st-rescheduled{border-inline-start-color:var(--rescheduled)}.ev.st-settled{border-inline-start-color:var(--settled)}
.ev.brow{border-inline-start-width:1px}
.chip{border:0;box-shadow:none;background:var(--sf2);color:var(--mu);font-weight:500}
.chip.st-deposit,.chip.pri1{color:var(--deposit);background:var(--deposit-bg)}
.chip.st-cancelled,.chip.pri2{color:var(--cancelled);background:var(--cancelled-bg)}
.chip.st-rescheduled{color:var(--rescheduled);background:var(--rescheduled-bg)}
.chip.st-settled{color:var(--settled);background:var(--settled-bg)}
.ev-time{background:var(--ac-soft);color:var(--ac);font-weight:600;border-radius:10px}
.tile .ti{background:var(--ac-soft);color:var(--ac);border-radius:10px}
.stat b{color:var(--tx)}
.inc{color:var(--settled)}.late{color:var(--cancelled)}
h2.sec{color:var(--tx);font-weight:700;font-size:.875rem}
.mhead .nav-b{border-radius:10px}
.av{border-radius:12px}
.skel{border-radius:var(--r2)}
.bar{background:var(--sf2)}

/* ======================================================================
   1.1.0 — palettes + independent panel / button / background colours
   ====================================================================== */
:root{--btn:var(--ac);--btn-tx:var(--ac-tx);--nav-on:var(--ac);--nav-on-tx:var(--ac-tx)}
:root[data-palette=mono]{--bg:#f4f4f4;--sf:#ffffff;--sf2:#e9e9e9;--tx:#0a0a0a;--mu:#5c5c5c;--ln:#c8c8c8;--ln2:#e0e0e0;--ac:#0a0a0a;--ac-tx:#ffffff;--ac-soft:#e8e8e8;--side:#0a0a0a;--nav-on:#ffffff;--nav-on-tx:#0a0a0a}
:root[data-palette=mono][data-theme=dark]{--bg:#0a0a0a;--sf:#151515;--sf2:#212121;--tx:#fafafa;--mu:#a3a3a3;--ln:#3d3d3d;--ln2:#292929;--ac:#fafafa;--ac-tx:#0a0a0a;--ac-soft:#2a2a2a;--side:#161616;--nav-on:#fafafa;--nav-on-tx:#0a0a0a}
@media(prefers-color-scheme:dark){:root[data-palette=mono][data-theme=auto]{--bg:#0a0a0a;--sf:#151515;--sf2:#212121;--tx:#fafafa;--mu:#a3a3a3;--ln:#3d3d3d;--ln2:#292929;--ac:#fafafa;--ac-tx:#0a0a0a;--ac-soft:#2a2a2a;--side:#161616;--nav-on:#fafafa;--nav-on-tx:#0a0a0a}}
:root[data-palette=forest]{--bg:#eef3ef;--sf:#ffffff;--sf2:#e2eae4;--tx:#10201a;--mu:#566a60;--ln:#c4d3c9;--ln2:#dbe6de;--ac:#1f7a4d;--ac-tx:#ffffff;--ac-soft:#dcefe3;--side:#12301f}
:root[data-palette=forest][data-theme=dark]{--bg:#0b140f;--sf:#13201a;--sf2:#1c2d24;--tx:#ecf5ef;--mu:#8fa89a;--ln:#2f4a3b;--ln2:#213629;--ac:#3ddc97;--ac-tx:#04180e;--ac-soft:#16382a;--side:#10261b}
@media(prefers-color-scheme:dark){:root[data-palette=forest][data-theme=auto]{--bg:#0b140f;--sf:#13201a;--sf2:#1c2d24;--tx:#ecf5ef;--mu:#8fa89a;--ln:#2f4a3b;--ln2:#213629;--ac:#3ddc97;--ac-tx:#04180e;--ac-soft:#16382a;--side:#10261b}}
:root[data-palette=sand]{--bg:#f5f0e8;--sf:#fffdf9;--sf2:#ece5d8;--tx:#231c14;--mu:#6e6454;--ln:#d3c7b2;--ln2:#e6dccb;--ac:#b4531a;--ac-tx:#ffffff;--ac-soft:#f6e3d3;--side:#2b2118}
:root[data-palette=sand][data-theme=dark]{--bg:#17130e;--sf:#211b14;--sf2:#2e261c;--tx:#f4ede2;--mu:#a89c88;--ln:#483c2c;--ln2:#332b20;--ac:#f59e5b;--ac-tx:#2b1200;--ac-soft:#402d1a;--side:#2a2218}
@media(prefers-color-scheme:dark){:root[data-palette=sand][data-theme=auto]{--bg:#17130e;--sf:#211b14;--sf2:#2e261c;--tx:#f4ede2;--mu:#a89c88;--ln:#483c2c;--ln2:#332b20;--ac:#f59e5b;--ac-tx:#2b1200;--ac-soft:#402d1a;--side:#2a2218}}
:root[data-palette=plum]{--bg:#f4f1f8;--sf:#ffffff;--sf2:#ebe6f2;--tx:#1a1424;--mu:#675f78;--ln:#d0c7e0;--ln2:#e3ddee;--ac:#6d3fd1;--ac-tx:#ffffff;--ac-soft:#ece4fb;--side:#231640}
:root[data-palette=plum][data-theme=dark]{--bg:#110d1a;--sf:#1b1527;--sf2:#272036;--tx:#f0ecf8;--mu:#a59cbb;--ln:#3d3355;--ln2:#2b2340;--ac:#a78bfa;--ac-tx:#150a35;--ac-soft:#2e2250;--side:#1c1432}
@media(prefers-color-scheme:dark){:root[data-palette=plum][data-theme=auto]{--bg:#110d1a;--sf:#1b1527;--sf2:#272036;--tx:#f0ecf8;--mu:#a59cbb;--ln:#3d3355;--ln2:#2b2340;--ac:#a78bfa;--ac-tx:#150a35;--ac-soft:#2e2250;--side:#1c1432}}
:root[data-palette=slate]{--bg:#eef0f2;--sf:#ffffff;--sf2:#e3e6e9;--tx:#14181c;--mu:#5d6670;--ln:#c9cfd5;--ln2:#dde1e5;--ac:#0f766e;--ac-tx:#ffffff;--ac-soft:#d8efec;--side:#1f2933}
:root[data-palette=slate][data-theme=dark]{--bg:#101316;--sf:#181c21;--sf2:#232930;--tx:#eef1f4;--mu:#98a2ad;--ln:#38414a;--ln2:#272e35;--ac:#2dd4bf;--ac-tx:#04201c;--ac-soft:#123a36;--side:#1a2027}
@media(prefers-color-scheme:dark){:root[data-palette=slate][data-theme=auto]{--bg:#101316;--sf:#181c21;--sf2:#232930;--tx:#eef1f4;--mu:#98a2ad;--ln:#38414a;--ln2:#272e35;--ac:#2dd4bf;--ac-tx:#04201c;--ac-soft:#123a36;--side:#1a2027}}

/* buttons use their own colour (defaults to the accent) */
.btn.pri,.fab,.banner,.tile.accent{background:var(--btn);color:var(--btn-tx);border-color:var(--btn)}
.btn.pri:hover{background:color-mix(in srgb,var(--btn) 88%,#000);color:var(--btn-tx)}
.fab{box-shadow:0 6px 18px color-mix(in srgb,var(--btn) 45%,transparent)}
/* selected item in the panel */
.nv[aria-current=page]{background:var(--nav-on);color:var(--nav-on-tx);border-color:var(--nav-on)}
.nv[aria-current=page] svg{color:var(--nav-on-tx)}
@media(min-width:768px){
  .sn[aria-current=true]{background:color-mix(in srgb,var(--nav-on) 24%,transparent);color:var(--side-tx);box-shadow:inset 3px 0 0 var(--nav-on)}
  :root[dir=rtl] .sn[aria-current=true]{box-shadow:inset -3px 0 0 var(--nav-on)}
  .sn[aria-current=true] svg{color:var(--nav-on)}
}
.brand::before{background:var(--nav-on)}
/* settings: colour pickers */
.pal{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.palc{display:flex;flex-direction:column;gap:6px;align-items:center;min-width:76px;padding:8px;border-radius:12px;border:2px solid var(--ln2);background:var(--sf);color:var(--tx);font-size:.75rem}
.palc[aria-pressed=true]{border-color:var(--tx);box-shadow:0 0 0 1px var(--tx)}
.palc .pv{display:flex;width:56px;height:34px;border-radius:8px;overflow:hidden;border:1px solid var(--ln)}
.palc .pv i{flex:1}.palc .pv i:first-child{flex:.7}
.swrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;flex:none}
.swatch.none{background:repeating-linear-gradient(45deg,var(--sf2) 0 5px,var(--sf) 5px 10px)}
.swatch.cust{overflow:hidden;padding:0;cursor:pointer;display:inline-block}
.swatch.cust input{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);opacity:0;cursor:pointer;border:0;padding:0}
.swatch.cust{background:conic-gradient(#e11d48,#f59e0b,#16a34a,#0ea5e9,#7c3aed,#e11d48)}
.setrow.col{flex-direction:column;align-items:stretch}
.setrow.col .swrow,.setrow.col .pal{justify-content:flex-start}

/* ===== 1.3.0 — dashboard, settlement, account ledger ===== */
.dash{margin-bottom:8px}
.dtop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.kpi{background:var(--sf);border:1px solid var(--ln2);border-radius:var(--r2);padding:14px 14px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.kpi .kl{font-size:.78rem;color:var(--mu)}
.kpi .kv{font-size:1.28rem;letter-spacing:-.2px;overflow-wrap:anywhere}
.kpi .ks{font-size:.74rem;color:var(--mu)}
.kpi .kd{font-size:.76rem;font-weight:600;color:var(--mu)}
.kpi .kd.up{color:var(--settled)}.kpi .kd.dn{color:var(--cancelled)}
.kpi.warn .kv{color:var(--cancelled)}
.dgrid{display:grid;grid-template-columns:1fr;gap:12px}
.dp{background:var(--sf);border:1px solid var(--ln2);border-radius:var(--r2);padding:14px 16px;min-width:0}
.dp h3{font-size:.9rem;margin:0 0 12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.dp h3 small{font-weight:400;color:var(--mu);font-size:.76rem}
.dp h4{font-size:.78rem;color:var(--mu);margin:16px 0 4px;font-weight:600}
.dempty,.dnote{color:var(--mu);font-size:.84rem;padding:6px 0}
.dempty{text-align:center;padding:18px 0}
.dnote{margin:8px 0 0}
.dbars{display:flex;gap:4px;align-items:flex-end;height:150px;padding:4px 0;background:repeating-linear-gradient(to top,transparent 0,transparent 36px,var(--ln2) 36px,var(--ln2) 37px)}
.dbars.short{height:70px;background:none}
.dcol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.dcol .dpair{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.dcol span{font-size:.62rem;color:var(--mu);white-space:nowrap}
.dcol .cn{font-size:.62rem}
.di,.dx,.dc{display:block;width:42%;max-width:14px;min-height:2px;border-radius:5px 5px 2px 2px}
.dc{width:70%;max-width:18px;background:#8b5cf6}
.dbars .di,.dkey .di{background:var(--ac)}.dbars .dx,.dkey .dx{background:#e5546b}
.dkey{display:flex;gap:16px;font-size:.76rem;color:var(--mu);margin-top:6px}
.dkey span{display:inline-flex;align-items:center;gap:6px}.dkey i{width:10px;height:10px;border-radius:3px;display:inline-block}
.hbars{display:flex;flex-direction:column;gap:9px}
.hb{display:grid;grid-template-columns:minmax(70px,32%) 1fr auto;gap:10px;align-items:center;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:start;width:100%}
.hb.clk{cursor:pointer}.hb.clk:hover .hl{color:var(--ac)}
.hl{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ht{height:10px;background:var(--sf2);border-radius:99px;overflow:hidden;display:block}
.ht i{display:block;height:100%;border-radius:99px;transition:width .4s}
.hv{font-size:.78rem;white-space:nowrap}
.dsplit{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.donut{position:relative;width:128px;height:128px;flex:none}
.dsvg svg{width:100%;height:100%;display:block}
.dctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px}
.dctr b{font-size:.92rem;overflow-wrap:anywhere;line-height:1.2}.dctr span{font-size:.68rem;color:var(--mu)}
.dleg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;flex:1;min-width:150px}
.dleg li{display:flex;align-items:center;gap:8px;font-size:.8rem}
.dleg li i{width:10px;height:10px;border-radius:3px;flex:none}
.dleg .ln{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stack{display:flex;height:16px;border-radius:99px;overflow:hidden;background:var(--sf2);margin:2px 0 12px;gap:2px}
.stack i{display:block;min-width:4px}
.dchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.list.tight{margin-top:12px}
.edot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--mu);display:inline-block;margin-inline-end:2px}
.edot.pay{background:#12a37f}.edot.chq{background:#2f6df0}.edot.chqo{background:#e8772e}.edot.shoot{background:#8b5cf6}
.acsub{display:block;font-size:.74rem;margin-top:2px}
.amt2{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.amt2 .sub{font-size:.72rem}
.setl .pbar,.pbar{height:9px;background:var(--sf2);border-radius:99px;overflow:hidden;margin:6px 0 14px}
.pbar i{display:block;height:100%;background:var(--settled);border-radius:99px;transition:width .4s}
.planrows{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.prow{display:grid;grid-template-columns:22px minmax(90px,1fr) 2fr;gap:8px;align-items:center}
.prow .pn{color:var(--mu);font-size:.8rem;text-align:center}
.prow .fld{margin:0}.prow .fld .lbl{display:none}
@media (min-width:768px){.kpis{grid-template-columns:repeat(3,1fr)}.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.dp.wide{grid-column:1/-1}.dbars{height:190px}}
@media (min-width:1200px){.kpis{grid-template-columns:repeat(6,1fr)}.dgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.dp.wide{grid-column:span 2}}

/* ===== 1.4.0 — logo, call sheets, tariff picker, workflow ===== */
.logo-big{width:84px;height:84px;margin:0 0 14px;background:linear-gradient(180deg,var(--lg1,#454545),var(--lg2,#0a0a0a));-webkit-mask:url(logo.svg) center/contain no-repeat;mask:url(logo.svg) center/contain no-repeat}
.nav .brand::before{content:"";width:30px;height:30px;border-radius:0;flex:none;background:linear-gradient(180deg,var(--bl1,#f1f1f1),var(--bl2,#b8b8b8));-webkit-mask:url(logo.svg) center/contain no-repeat;mask:url(logo.svg) center/contain no-repeat}
.ipick{display:grid;grid-template-columns:1fr 64px auto;gap:8px;margin-bottom:8px;align-items:center}
.ipick select,.ipick .qty{min-width:0}
.tpl.rec{outline:2px solid var(--ac);outline-offset:-2px}
.tpl.rec b::after{content:" ★ پیشنهادی برای این پروژه";font-weight:400;font-size:.74rem;color:var(--ac)}
.cs .cslines{padding:8px 0;border-top:1px solid var(--ln2);border-bottom:1px solid var(--ln2);margin:6px 0;line-height:2;font-size:.9rem}

/* ===== 1.5.0 — minimal look: redesigned calendars, no coloured edge bars, icon-only phone dock, separate text sizes ===== */
:root:root:root{--card-sh:none;--r1:8px;--r2:12px;--r3:16px}

/* text size: phone and desktop/tablet are chosen separately (the plain data-scale applies everywhere,
   data-scale-m takes over below 768px) */
@media(max-width:767px){
  :root[data-scale-m]{--scale:1}
  :root[data-scale-m=s]{--scale:.92}
  :root[data-scale-m=l]{--scale:1.12}
}

/* coloured edge bars at the start of blocks are gone: they never matched the rounded corners.
   Status is shown by a small dot instead. */
.ev.ev,.task.task.p2{border-inline-start:1px solid var(--ln2)}
.hero.hero{border-inline-start:1px solid var(--ln2);background:var(--sf)}
.stat.stat{border-top:1px solid var(--ln2);background:var(--sf)}
.stat.warn.warn b{color:var(--cancelled)}
.note.note{border-inline-start:1px solid transparent}
.tpl.rec{outline:0;border-color:var(--ac)}
:root:root .sn.sn[aria-current=true]{box-shadow:none}

/* spacing rhythm: 8 / 12 / 16 / 24 */
.list{gap:8px}
h2.sec{color:var(--mu);font-weight:600;font-size:.8125rem;margin:24px 0 10px;letter-spacing:0}
.ev.ev{padding:12px 14px;gap:12px}
.ev .sdot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ln)}
.ev.st-planned .sdot{background:var(--ac)}
.ev.st-deposit .sdot{background:var(--deposit)}.ev.st-cancelled .sdot{background:var(--cancelled)}
.ev.st-rescheduled .sdot{background:var(--rescheduled)}.ev.st-settled .sdot{background:var(--settled)}
.ev .ev-time{background:none;border-radius:0;padding:0;min-width:46px;text-align:start;color:var(--mu);font-weight:500;font-size:.8125rem;font-variant-numeric:tabular-nums}

/* home header: flat, quiet */
.hero.hero{padding:20px 22px;margin-bottom:16px}
.hero .bignum{font-size:3.25rem;font-weight:300;letter-spacing:-1.5px;line-height:1}
.hero .dayhead{align-items:center;gap:18px}
.hstats{gap:0;margin-top:16px;padding-top:14px;border-top:1px solid var(--ln2)}
.hstats>span{background:none;border:0;border-radius:0;padding:0 16px;font-size:.8125rem}
.hstats>span:first-child{padding-inline-start:0}
.hstats>span+span{border-inline-start:1px solid var(--ln2)}
.hstats>span.nx{flex-basis:100%;border:0;padding:10px 0 0}
@media(min-width:1200px){.hero.hero{padding:24px 28px}.hero .bignum{font-size:4.25rem}}

/* shared bits */
.d2{display:block;width:5px;height:5px;border-radius:50%;background:var(--ac);flex:none}
.d2.st-deposit{background:var(--deposit)}.d2.st-cancelled{background:var(--cancelled)}
.d2.st-rescheduled{background:var(--rescheduled)}.d2.st-settled{background:var(--settled)}
.dots{display:flex;gap:3px;height:6px;align-items:center;justify-content:center}
.tbtn,.nb2{height:36px;border-radius:10px;border:1px solid var(--ln);background:var(--sf);color:var(--tx);box-shadow:none}
.tbtn{padding:0 14px;font-size:.8125rem}
.nb2{width:36px;display:grid;place-items:center;padding:0}
.nb2 svg{width:18px;height:18px}
.tbtn:hover,.nb2:hover{background:var(--sf2)}
:root[dir=ltr] .nb2:not(.flip) svg{transform:scaleX(-1)}

/* month calendar: one bordered sheet with hairlines, no gaps between rounded boxes */
.calwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.mhead2{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.mhead2 h1{margin:0;font-size:1.375rem;font-weight:600;letter-spacing:-.2px}
.mnav{display:flex;align-items:center;gap:6px;flex:none}
.cal2{border:1px solid var(--ln2);border-radius:var(--r2);background:var(--sf);overflow:hidden}
.c2h,.c2g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.c2h{border-bottom:1px solid var(--ln2)}
.c2h div{padding:10px 0;text-align:center;font-size:.75rem;font-weight:500;color:var(--mu)}
.c2h div:last-child{color:var(--cancelled)}
.c2g{gap:1px;background:var(--ln2)}
.dy{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;min-width:0;min-height:56px;padding:8px 2px 6px;
  border:0;border-radius:0;background:var(--sf);color:var(--tx);text-align:center;box-shadow:none;transition:background .12s}
.dy.void{background:color-mix(in srgb,var(--sf) 55%,var(--bg));pointer-events:none}
.dy:hover{background:var(--sf2)}
.dy .dn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:.875rem;font-weight:500;font-variant-numeric:tabular-nums}
.dy.fri .dn{color:var(--cancelled)}
.dy.today .dn{background:var(--ac);color:var(--ac-tx)}
.dy[aria-pressed=true]{background:var(--ac-soft);box-shadow:inset 0 0 0 1.5px var(--ac)}
.cevs{display:none}
.calside{background:var(--sf);border:1px solid var(--ln2);border-radius:var(--r2);padding:16px}
.calside h2.sec{margin:0 0 8px;color:var(--tx);font-size:.9375rem;font-weight:600}
.calside .list{display:flex;flex-direction:column;gap:0}
.calside .ev.ev{border:0;border-bottom:1px solid var(--ln2);border-radius:0;background:transparent;padding:12px 0}
.calside .ev.ev:last-child{border-bottom:0}
.calside .ev-title{white-space:normal}
.calside .empty{border:0;background:transparent;padding:18px 8px}
.calside .empty::before{display:none}
@media(min-width:768px){
  .dy{align-items:stretch;min-height:96px;padding:8px 8px 6px;text-align:start}
  .dy .dn{align-self:flex-start}
  .dy .dots{display:none}
  .cevs{display:flex;flex-direction:column;gap:3px;min-width:0}
  .cev{display:flex;align-items:center;gap:5px;min-width:0;padding:2px 7px;border-radius:6px;background:var(--sf2);font-size:.72rem;line-height:1.6}
  .cev .d2{width:6px;height:6px}
  .cev .ct{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cev.st-cancelled .ct{text-decoration:line-through;color:var(--mu)}
  .cevs .more{font-size:.6875rem;color:var(--mu);padding:0 7px}
}
@media(min-width:1100px){
  .calwrap{grid-template-columns:minmax(0,1fr) 340px}
  .calside{position:sticky;top:16px}
}
@media(min-width:1200px){.dy{min-height:112px}}

/* home: week strip on phone and tablet, small month calendar beside the day on wide screens */
.wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:16px}
.wkd{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;border:1px solid var(--ln2);border-radius:var(--r2);
  background:var(--sf);color:var(--tx);box-shadow:none}
.wkd .wn{font-size:.6875rem;color:var(--mu)}
.wkd .dn{font-size:1rem;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.5}
.wkd .dots{height:5px}
.wkd.fri .dn{color:var(--cancelled)}
.wkd.today{background:var(--ac);border-color:var(--ac);color:var(--ac-tx)}
.wkd.today .wn,.wkd.today.fri .dn{color:var(--ac-tx)}
.wkd.today .d2{background:var(--ac-tx)}
.cal2.mini{border:0;border-radius:0;background:transparent;overflow:visible}
.cal2.mini .c2h{border-bottom:0}
.cal2.mini .c2g{gap:0;background:transparent}
.cal2.mini .dy,.cal2.mini .dy.void{background:transparent;border-radius:10px;align-items:center;min-height:42px;padding:4px 0;gap:2px;text-align:center}
.cal2.mini .dy:hover{background:var(--sf2)}
.cal2.mini .dy[aria-pressed=true]{box-shadow:none;background:transparent}
.cal2.mini .dn{align-self:center;width:26px;height:26px;font-size:.8125rem}
.cal2.mini .dots{display:flex}
.cal2.mini .cevs{display:none}

/* phone: icon-only dock with large icons */
@media(max-width:767px){
  .frame{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .nav{inset:auto 0 0 0;max-width:none;margin:0;gap:0;justify-content:space-around;border-radius:0;border:0;border-top:1px solid var(--side-ln);
    box-shadow:none;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .nv{height:52px;max-width:84px;padding:0;justify-content:center;border-radius:14px}
  .nv .nt{display:none}
  .nv svg{width:30px;height:30px;stroke-width:1.6}
  .fab{bottom:calc(76px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .acts.stick{bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* =====================================================================
   1.6.0 — plain pill search, bulk select, liquid-glass phone dock
   (last in the file on purpose: it wins over the older glass layers)
   ===================================================================== */
:root{
  --lq-ink:#15171c;--lq-mu:rgba(21,23,28,.56);
  --lq-f1:rgba(255,255,255,.60);--lq-f2:rgba(255,255,255,.28);--lq-edge:rgba(255,255,255,.78);
  --lq-lens1:rgba(255,255,255,.80);--lq-lens2:rgba(255,255,255,.46);--lq-gloss:.55;
  --lq-sh:0 14px 34px rgba(20,28,60,.20),0 2px 8px rgba(20,28,60,.10);
  --lq-hi:rgba(255,255,255,.9);
}
:root[data-theme=dark]{
  --lq-ink:#f4f5f8;--lq-mu:rgba(244,245,248,.58);
  --lq-f1:rgba(78,80,94,.58);--lq-f2:rgba(38,40,50,.34);--lq-edge:rgba(255,255,255,.20);
  --lq-lens1:rgba(255,255,255,.26);--lq-lens2:rgba(255,255,255,.12);--lq-gloss:.14;
  --lq-sh:0 16px 38px rgba(0,0,0,.52),0 2px 8px rgba(0,0,0,.34);--lq-hi:rgba(255,255,255,.30);
}
@media(prefers-color-scheme:dark){
  :root[data-theme=auto]{
    --lq-ink:#f4f5f8;--lq-mu:rgba(244,245,248,.58);
    --lq-f1:rgba(78,80,94,.58);--lq-f2:rgba(38,40,50,.34);--lq-edge:rgba(255,255,255,.20);
    --lq-lens1:rgba(255,255,255,.26);--lq-lens2:rgba(255,255,255,.12);--lq-gloss:.14;
    --lq-sh:0 16px 38px rgba(0,0,0,.52),0 2px 8px rgba(0,0,0,.34);--lq-hi:rgba(255,255,255,.30);
  }
}

/* search: just a rounded box with a magnifier — no hint text, no shortcut label */
.gs{border-radius:50px;padding:0 16px;gap:10px}
.gs-key{display:none!important}
.gs-in::placeholder{color:transparent}

/* bulk select on the contacts list */
.toolrow .btn.on{background:var(--ac-soft);border-color:var(--ac);color:var(--ac)}
.toolrow .btn svg{stroke-width:2.4}
.ev.brow .pk{width:24px;height:24px;border-radius:50%;border:2px solid var(--ln);display:grid;place-items:center;flex:none;color:transparent;transition:background .15s,border-color .15s,color .15s}
.ev.brow .pk svg{width:14px;height:14px;stroke-width:3.4}
.ev.brow .pk.on{background:var(--ac);border-color:var(--ac);color:var(--ac-tx)}
.ev.brow.picked{background:var(--ac-soft);border-color:var(--ac)}
.bulkwrap{display:contents}
.bulkbar{position:sticky;bottom:calc(104px + env(safe-area-inset-bottom));z-index:6;margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 16px;
  border-radius:26px;background:var(--glass-fill,var(--sf));border:1px solid var(--g-bd,var(--ln));box-shadow:var(--g-hi),var(--g-drop);
  -webkit-backdrop-filter:blur(var(--lg-blur,24px)) saturate(var(--lg-sat,170%));backdrop-filter:blur(var(--lg-blur,24px)) saturate(var(--lg-sat,170%))}
.bulkbar .cnt{font-weight:600;font-size:.875rem}
.bulkbar .btn{min-height:42px;padding:0 18px}
.bk-act{display:inline-flex;gap:16px;flex-wrap:wrap;font-size:.8125rem}
.imp-row input{width:22px;height:22px}
@media(min-width:768px){.bulkbar{bottom:16px}}

/* phone dock: liquid glass pill, solid icons, a glass lens that slides to the current tab */
.nav .ic-f{display:none}
.nav .nav-ind{display:none}
@media(max-width:767px){
  .frame{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  .nav{inset:auto 16px calc(12px + env(safe-area-inset-bottom)) 16px;max-width:430px;margin:0 auto;height:66px;padding:5px;gap:0;
    justify-content:space-between;align-items:stretch;border-radius:999px;
    background:linear-gradient(160deg,var(--lq-f1),var(--lq-f2));border:1px solid var(--lq-edge);
    -webkit-backdrop-filter:blur(20px) saturate(2.1) brightness(1.05);backdrop-filter:blur(20px) saturate(2.1) brightness(1.05);
    box-shadow:inset 0 1.5px 1px var(--lq-hi),inset 0 -1px 1px rgba(255,255,255,.18),inset 0 0 22px rgba(255,255,255,.12),var(--lq-sh);
    color:var(--lq-ink);--tx:var(--lq-ink);--mu:var(--lq-mu)}
  .nav::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,var(--lq-gloss)),rgba(255,255,255,0) 46%)}
  .nav .nav-ind{display:block;position:absolute;left:0;top:0;z-index:0;border-radius:999px;pointer-events:none;opacity:0;
    background:linear-gradient(180deg,var(--lq-lens1),var(--lq-lens2));border:1px solid var(--lq-edge);
    box-shadow:inset 0 1px 1px var(--lq-hi),inset 0 -3px 8px rgba(255,255,255,.14),0 4px 14px rgba(20,28,60,.16);
    transition:transform .55s cubic-bezier(.3,1.35,.4,1),width .55s cubic-bezier(.3,1.35,.4,1),opacity .2s}
  .nav .nv{position:relative;z-index:1;flex:1 1 0;max-width:none;height:auto;padding:0;justify-content:center;border-radius:999px;
    background:none;border:0;box-shadow:none;color:var(--lq-mu);-webkit-tap-highlight-color:transparent}
  .nav .nv:hover{background:none;color:var(--lq-ink)}
  .nav .nv[aria-current=page]{background:none;border:0;box-shadow:none;color:var(--ac);font-weight:400}
  .nav .nv[aria-current=page] svg{color:inherit}
  .nav .nt{display:none}
  .nav .ic-o{display:none}
  .nav .ic-f{display:grid;place-items:center}
  .nav .ic-f svg{width:27px;height:27px;fill:currentColor;stroke:currentColor;stroke-width:0;transition:transform .2s}
  .nav .nv:active .ic-f svg{transform:scale(.86)}
  .fab{bottom:calc(98px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(104px + env(safe-area-inset-bottom))}
  .acts.stick{bottom:calc(98px + env(safe-area-inset-bottom))}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media(max-width:767px){.nav{background:var(--sf)}.nav .nav-ind{background:var(--ac-soft)}}
}
@media(prefers-reduced-motion:reduce){.nav .nav-ind{transition:none}}

/* =====================================================================
   1.6.1 — weight scale. Every font here is (or is declared as) a variable
   font, so weights are real. Five steps, mapped per role; each font
   shifts the scale to suit its own colour (Yekan is already heavy).
   ===================================================================== */
:root{--w-light:300;--w-reg:400;--w-med:500;--w-semi:600;--w-bold:700}
:root[data-font=yekan]{--w-light:300;--w-reg:400;--w-med:400;--w-semi:500;--w-bold:600}
html{font-synthesis:none}
body{font-weight:var(--w-reg)}
b,strong{font-weight:var(--w-semi)}
/* secondary text */
.hint,.sub,.lbl,.cnt,.stat span,.kv dt,.kpi .kl,.kpi .ks,.val,.tpl span,.gs-in,.dp h3 small{font-weight:var(--w-reg)}
/* labels, times, chips, day numbers */
.ev-time,.ev .ev-time,.chip,.c2h div,.dy .dn,.wkd .dn,.kpi .kd,.toast,.nv .nt,.sn,.btn,.seg button,.ptab{font-weight:var(--w-med)}
/* row and card titles */
.ev-title,.tile .tt,.htitle,.tpl b,.tpl.rec b,.av,.codebig,.bulkbar .cnt,.sw{font-weight:var(--w-semi)}
/* section headings */
h2.sec,.fsec,.dp h4,.calside h2.sec{font-weight:var(--w-semi)}
/* page and sheet titles */
.mhead h1,.mhead2 h1,.signpage h1,.login h1,.sheet h3,.brand,.wd{font-weight:var(--w-bold);letter-spacing:0}
/* chosen / active states step up one weight */
.btn.pri,.seg button[aria-pressed=true],.ptab[aria-pressed=true],.nv[aria-current=page],.sn[aria-current=true],.sd.now .sw{font-weight:var(--w-semi)}
/* numbers: light for the huge day number, bold + even digits for figures */
.bignum,.hero .bignum{font-weight:var(--w-light)}
.stat b,.kpi .kv,.dctr b,.hstats b,.ring b,.hv,.cn{font-weight:var(--w-bold);font-variant-numeric:tabular-nums}
.ev-time,.amt2,.val,.dy .dn,.wkd .dn{font-variant-numeric:tabular-nums}
/* Persian is cursive: letter-spacing would break the joins */
:root[dir=rtl] .tile .tt,:root[dir=rtl] .ev-title,:root[dir=rtl] .stat b{letter-spacing:0}
@media(max-width:767px){.nav .nv[aria-current=page]{font-weight:var(--w-reg)}}

/* ===== 1.8.0 — searchable picker, installment table, phone numbers, readable dropdowns, name converter ===== */
[hidden]{display:none!important}
option,optgroup{background:var(--sf);color:var(--tx)}
input.ltr,.ltr{direction:ltr;text-align:left}
.ph{direction:ltr;unicode-bidi:isolate;text-align:left;display:inline-block;font-variant-numeric:tabular-nums;color:var(--mu);font-size:.8125rem}
.setrow .ph,.val .ph{color:inherit;font-size:inherit}
.pick-btn{width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;border-radius:14px;border:1px solid var(--ln);background:var(--bg);color:var(--tx);cursor:pointer;text-align:start}
.pick-btn .pick-v.none{color:var(--mu)}
.pick-panel{border:1px solid var(--ln);border-radius:14px;background:var(--sf);color:var(--tx);margin-top:4px;padding:8px;box-shadow:var(--shadow)}
.pick-q{margin-bottom:6px}
.pick-list{max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.pick-o{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:10px;background:none;color:var(--tx);cursor:pointer;text-align:start}
.pick-o:hover,.pick-o:focus-visible{background:var(--ac-soft)}
.pick-o.on{background:var(--ac);color:var(--ac-tx)}.pick-o.on .pick-s{color:inherit;opacity:.8}
.pick-o.none{color:var(--mu)}
.pick-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-s{font-size:.8125rem;color:var(--mu);flex:none}
.pick-m{padding:10px 12px;color:var(--mu);font-size:.875rem}
.pick-add{margin-top:6px;width:100%}.pick-sc{align-self:flex-start;padding:6px 12px}
.prow{display:grid;grid-template-columns:22px 1.6fr 1fr 1fr 34px;gap:6px;align-items:start;margin-bottom:8px}
.prow .fld{margin:0}.prow .fld .lbl:empty{display:none}.prow .row{display:flex;gap:4px}.prow .row select{min-width:0;padding-inline:6px}
.prow input{min-height:42px;padding:6px 8px}.prow .pn{padding-top:10px;color:var(--mu);font-size:.8125rem}
.prow .x{border:1px solid var(--ln);background:none;border-radius:10px;min-height:42px;color:var(--tx)}
@media(max-width:560px){.prow{grid-template-columns:22px 1fr 34px}.prow .fld{grid-column:2/4}.prow input{grid-column:2/3}.prow .x{grid-column:3;grid-row:1}}
.trlist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.trrow{display:grid;grid-template-columns:22px minmax(80px,1fr) minmax(110px,1.3fr) auto;gap:8px;align-items:center}
.trrow .tro{font-size:.8125rem;color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.trrow input[type=text]{min-height:40px;padding:6px 10px}
@media(max-width:560px){.trrow{grid-template-columns:22px 1fr auto}.trrow .tro{grid-column:2/4;grid-row:1}.trrow input[type=text]{grid-column:2/3}}
.pick-c svg{width:12px;height:8px;display:block}.pick-c{display:inline-flex;color:var(--mu)}

/* 1.9.0: customer rename line under the customer picker */
.namebar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:-2px 0 12px;font-size:.875rem}.namebar[hidden]{display:none}

/* 1.10.0: public document page */
.viewframe{width:100%;min-height:70vh;border:1px solid var(--bd,#d7dbe3);border-radius:8px;background:#fff}.viewpage{max-width:900px;margin:0 auto;padding:16px}
.lkbox{border:1px solid var(--bd,#d7dbe3);border-radius:8px;padding:10px 12px;margin:8px 0 12px}.lkurl{font-size:.8125rem;overflow-wrap:anywhere;margin:4px 0}

/* 1.12.0: scrolling sidebar, notification bell */
.gsrow{display:flex;align-items:center;gap:8px}.gsrow .gswrap{flex:1;min-width:0}
.nfwrap{position:relative;flex:none}
.nf-b{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--g-bd,var(--ln));background:var(--glass-fill,var(--sf));color:var(--tx);padding:0}
.nf-b svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nf-n{position:absolute;top:-4px;inset-inline-end:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5484d;color:#fff;font:600 .6875rem/18px inherit;text-align:center}
.nf-n[hidden]{display:none}
.nf-p{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:min(92vw,360px);max-height:min(70vh,460px);overflow:auto;padding:8px;border-radius:20px;z-index:40;
  background:var(--lg-spec),linear-gradient(145deg,var(--gs1),var(--gs2));border:1px solid var(--g-bd);box-shadow:var(--g-hi),var(--g-drop);-webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%)}
.nf-p[hidden]{display:none}
.nf-h{display:flex;justify-content:space-between;align-items:center;padding:4px 8px 8px}
.nf-i{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:start;padding:8px;border:0;border-radius:12px;background:none;color:inherit}
.nf-i:hover{background:var(--ac-soft)}.nf-d{width:8px;height:8px;border-radius:50%;margin-top:7px;background:transparent;flex:none}.nf-i.new .nf-d{background:var(--ac)}
.nf-t{display:flex;flex-direction:column;min-width:0;font-size:.875rem;line-height:1.6}.nf-t b{font-weight:600}
.nf-e{padding:18px 8px;text-align:center;color:var(--mu);font-size:.875rem}
@media(min-width:768px){
  .nav{overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin}
  .nav .sn-wrap{overflow:visible!important;flex:none!important;min-height:auto!important}
  .gsrow{width:min(100%,396px)}
}

/* =====================================================================
   1.13.0 — home page composition
   One grid, one rhythm (16px). Reading order: the day (slim card) → studio overview (KPIs) →
   reminders side by side (tasks | today | coming up | month) → charts.
   Every panel shares the same header, radius, padding and hairline rows.
   ===================================================================== */
.home{--hg:16px;display:flex;flex-direction:column;gap:var(--hg)}
/* reading order (the overview's own pieces are lifted into this flow with display:contents) */
.home>.hstrip{order:1}
.home>.wk{order:2;margin:0}
.home .dtop{order:3;margin:8px 0 -4px}
.home .kpis,.home .homeov>.skel,.home .homeov>.hint.late{order:4;margin:0}
.home>.board{order:5}
.home .dgrid{order:6;gap:var(--hg)}
.home .homeov>.hint:not(.late){order:7;margin:0}
.homeov,.homeov>.dash{display:contents}
.home .homeov>.skel{padding:28px 0}

/* the day: one slim card instead of a tall hero */
.home .hero.hstrip{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:16px 20px;margin:0;border-radius:var(--r2)}
.hstrip .hstats>span{border-radius:0}
.hstrip .dayhead{display:flex;align-items:center;gap:14px;flex:none}
.hstrip .bignum{font-size:2.75rem;line-height:1;letter-spacing:0}
.hstrip .daymeta{padding:0}
.hstrip .daymeta .wd{font-size:1rem}
.hstrip .daymeta .mo{font-size:.8125rem;color:var(--mu)}
.hstrip .ring,.hstrip .ring svg{width:48px;height:48px}
.hstrip .ring svg{stroke-width:6}
.hstrip .ring b{font-size:.6875rem}
.hstrip .hstats{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;border:0;flex:none}
.hstrip .hstats>span.nx{flex-basis:auto;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;border-inline-start:1px solid var(--ln2);padding:0 16px;margin-inline-start:0}
.hstrip .hstats>span.nx b{margin-inline-end:6px}
.hstrip .quick{flex:1 1 240px;min-width:0;margin:0}
.hstrip .quick input{min-height:42px;border-radius:12px}
.hstrip .hrow{flex:1 0 100%;display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--ln2);min-width:0}
.hstrip .hlabel{flex:none;font-size:.75rem;color:var(--mu)}
.hstrip .hchips{flex-wrap:wrap;gap:8px;min-width:0}
.hstrip .hchip{min-height:32px;padding:0 12px;gap:5px;font-size:.8125rem}
.hstrip .hchip svg{width:14px;height:14px}

/* reminders: a board of equal panels */
.board{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--hg);align-items:stretch}
.bp{display:flex;flex-direction:column;min-width:0;min-height:0;max-height:320px;overflow:hidden;background:var(--sf);border:1px solid var(--ln2);border-radius:var(--r2)}
.bph{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:0 16px;border-bottom:1px solid var(--ln2);flex:none}
.bpt{margin:0;font-size:.9375rem;font-weight:var(--w-semi);color:var(--tx);letter-spacing:0}
.bpc{display:grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--sf2);color:var(--mu);font-size:.75rem;font-weight:var(--w-med);font-variant-numeric:tabular-nums}
.bph .tbtn{height:30px;padding:0 10px;font-size:.75rem}
.bpb{flex:1;min-height:0;overflow-y:auto;padding:0 16px 8px;scrollbar-width:thin;overscroll-behavior:contain}
.bpe{padding:32px 8px;text-align:center;color:var(--mu);font-size:.875rem}
.bpe .btn{margin-top:12px}
.bsub{position:sticky;top:0;z-index:1;padding:10px 0 4px;background:var(--sf);font-size:.75rem;font-weight:var(--w-semi);color:var(--mu)}
.blist{display:flex;flex-direction:column;gap:0}
.bp-cal{display:none}
.bp-cal .bpb{padding-top:8px}

/* rows inside a panel: flat, hairline separated (same pattern as the calendar side list) */
.home .bp .ev.ev,.home .bp .task.task{display:grid;align-items:start;width:100%;min-height:0;padding:10px 0;border:0;border-bottom:1px solid var(--ln2);border-radius:0;background:transparent;box-shadow:none;transform:none}
.home .bp .blist>:last-child{border-bottom:0}
.home .bp .ev.ev{grid-template-columns:8px 46px minmax(0,1fr);column-gap:10px;row-gap:4px}
.home .bp .ev .sdot{margin-top:9px}
.home .bp .ev .ev-time{margin-top:2px;min-width:0;font-size:.75rem}
.home .bp .ev>.chip{grid-column:3;justify-self:start}
.home .bp .task.task{grid-template-columns:22px minmax(0,1fr) auto;column-gap:10px}
.home .bp .tick{width:22px;height:22px;margin-top:1px}
.home .bp .ev-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.875rem;line-height:1.55}
.home .bp .ev-meta{font-size:.75rem;gap:0 10px}
.home .bp .chip{font-size:.6875rem;padding:1px 8px}
.home .bp .ev:hover,.home .bp .task:hover{background:var(--sf2)}

/* overview cards share the board's rhythm. The KPI value is a <b class=kv>, which also matched the global .kv definition-list grid (that centred the number) */
.home .kpi,.home .dp{border-radius:var(--r2)}
.home .kpi{padding:14px 16px 12px;gap:4px}
.home .kpi .kv{display:block;grid-template-columns:none;gap:0;text-align:start;font-size:1.375rem;line-height:1.35}

/* overview panels: the same header band as the board panels, flat rows (no card inside a card), donut centre that fits */
.home .dp{padding:0 0 16px;overflow:hidden}
.home .dp>h3{margin:0;min-height:48px;padding:0 16px;border-bottom:1px solid var(--ln2);align-items:center;flex-wrap:nowrap;font-size:.9375rem;font-weight:var(--w-semi)}
.home .dp>h3 small{white-space:nowrap}
.home .dp>h3+*{margin-top:14px}
.home .dp>:not(h3){margin-inline:16px}
.home .dp .list.tight{display:flex;flex-direction:column;gap:0;margin-top:12px}
.home .dp .ev.brow{padding:9px 0;border:0;border-bottom:1px solid var(--ln2);border-radius:0;background:transparent;box-shadow:none;transform:none}
.home .dp .list.tight>:last-child{border-bottom:0}
.home .dp .ev-title{font-size:.875rem}
.home .dp .ev-meta{font-size:.75rem}
.home .dp .dctr{padding:20px 12px}
.home .dp .dctr b{font-size:.75rem;overflow-wrap:normal;white-space:nowrap}

/* tablet: two panels side by side, "coming up" full width under them */
@media(min-width:768px){
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bp-c{grid-column:1/-1}
}
/* laptop: three panels in one row, equal height */
@media(min-width:1100px){
  .board{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bp-c{grid-column:auto}
  .bp{height:344px;max-height:none}
}
/* wide: the month joins the row, the week strip is no longer needed */
@media(min-width:1400px){
  .board{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bp-cal{display:flex}
  .home>.wk{display:none}
}

/* phone: KPIs become one swipeable row so the board starts within the first screen; the + button moves to the end side so it never covers text */
@media(max-width:767px){
  .home{--hg:12px}
  .home .hero.hstrip{padding:14px 16px;gap:10px 16px}
  .hstrip .bignum{font-size:2.5rem}
  .hstrip .hstats{flex:1 1 auto}
  .hstrip .hstats>span.nx{flex-basis:100%;max-width:none;border:0;padding:6px 0 0}
  .hstrip .hrow{flex-wrap:nowrap}
  .hstrip .hchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .hstrip .hchips::-webkit-scrollbar{display:none}
  .hstrip .hchip{flex:none}
  .home .kpis{display:flex;overflow-x:auto;gap:10px;margin-inline:-16px;padding:0 16px 4px;scroll-snap-type:x proximity;scrollbar-width:none}
  .home .kpis::-webkit-scrollbar{display:none}
  .home .kpi{flex:0 0 152px;scroll-snap-align:start}
  .fab{inset-inline-start:auto;inset-inline-end:18px}
}

/* =====================================================================
   1.13.0 — shared page system (every page is built from .mhead / h2.sec / .list / .card / .stats / .toolrow)
   ===================================================================== */
#main .mhead,#main .mhead2{min-height:44px;margin-bottom:16px}
#main .mhead h1,#main .mhead2 h1{font-size:1.375rem;line-height:1.3}
#main h2.sec{margin:24px 0 8px;font-size:.8125rem}
#main h2.sec:first-child,#main .mhead+h2.sec{margin-top:8px}
#main .toolrow{justify-content:flex-start;gap:8px;margin-bottom:12px}
#main .toolrow .btn,#main .toolrow .seg{flex:0 1 auto}
#main .stats{margin-bottom:16px}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px;align-items:start}
.hgrid .hcard{margin:0}
.card .setrow .acts.wrapx{flex:none}
.card .setrow .acts.wrapx .btn{flex:0 1 auto;min-height:40px;padding:0 14px}

/* 1.14.0: one-time login code on the login screen */
.login .lcode{margin-top:16px;border-top:1px solid var(--ln2);padding-top:12px}
.login .lcode summary{cursor:pointer;color:var(--mu);font-size:.875rem;padding:6px 0}
.login .lcode p{margin:8px 0}
.login .lcode input{margin-bottom:10px;text-align:center;letter-spacing:2px}

/* 1.14.0: detail pages (client, project, finance…) keep one content width, so cards and the buttons under them line up */
main:has(>.card)>*{max-width:900px}
.tline .setrow>span:first-child{min-width:0}

/* 1.15.0: follow-up rows with a ready-message button, clickable timeline rows */
.fuprow{display:flex;gap:6px;align-items:stretch;border-bottom:1px solid var(--line,rgba(128,128,128,.18))}
.fuprow:last-child{border-bottom:0}
.fuprow>.brow{flex:1;min-width:0;border-bottom:0}
.fuprow>.fumsg{flex:none;align-self:center;padding:6px 12px;min-height:0;font-size:.85em}
.tline .setrow.clk{cursor:pointer}

/* 1.16.0: «✓ done» button on follow-up rows */
.fuprow>.fudone{padding:6px 9px}
.fuprow>.fudone svg{width:16px;height:16px;display:block}

/* 1.30.1 — mobile: home panels must not trap the page scroll (nested vertical scrollers + overscroll-behavior:contain made the page hard to scroll by touch) */
@media(max-width:767px){
  .bp{max-height:none;overflow:visible}
  .bpb{overflow:visible;overscroll-behavior:auto;max-height:none}
  .bsub{position:static}
  .home .kpis,.hstrip .hchips{overscroll-behavior-x:contain;touch-action:pan-x pan-y}
  .home .kpis{scroll-snap-type:none}
}

/* 1.64.0 — layout audit fixes */
.toolrow select.srch{flex:1 1 140px;width:auto;min-width:0;margin:0}
.toolrow input.srch{flex:1 1 100%;margin:0}
.card>.brow{border:0;background:transparent;box-shadow:none;padding-inline:0}
.card>.brow+.hint{margin-top:2px}
@media (max-width:767px){
  .home .kpi{flex:0 0 172px}
  .home .kpi .kv{font-size:1.15rem;white-space:nowrap;overflow-wrap:normal}
}
.rl-card .hint{overflow-wrap:anywhere}
.dcol span{max-width:100%;overflow:hidden;text-overflow:clip}
.rlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.rlgrid .fld{margin:0}.rlgrid input,.rlgrid select{width:100%}

.lsw{display:inline-flex;align-items:center;gap:8px}
.lsc{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.72rem;font-weight:var(--w-med,600);background:var(--ln2);color:var(--mu)}
.lsc.hot{background:#fde8e4;color:#b42318}.lsc.warm{background:#fef3d7;color:#8a5a00}.lsc.cold{background:#e7edf7;color:#41567a}
:root[data-theme="dark"] .lsc.hot{background:#4a1f1a;color:#ffb4a8}:root[data-theme="dark"] .lsc.warm{background:#4a3a12;color:#ffd98a}:root[data-theme="dark"] .lsc.cold{background:#22304a;color:#a9bde0}
.nxt{border-inline-start:4px solid var(--ac);margin-bottom:12px}
.nxt-h{font-size:.78rem;color:var(--ac);font-weight:var(--w-bold,700);margin-bottom:2px}
.nxt-t{font-size:1.05rem;font-weight:var(--w-bold,700);margin-bottom:2px}
.nxt-more{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:8px}
.cfl{display:flex;flex-direction:column;gap:8px;margin:6px 0 8px}
.cfr{display:grid;grid-template-columns:84px 1fr auto;gap:8px;align-items:center;font-size:.8rem}
.cfl-b{display:block;height:10px;border-radius:99px;background:var(--ln2);overflow:hidden}.cfl-b i{display:block;height:100%;background:var(--ac);border-radius:99px}
.cfr.late .cfl-b i{background:var(--cancelled)}.cfr.late .cfl-v{color:var(--cancelled)}
.cfl-v{min-width:5.5rem;text-align:end;font-variant-numeric:tabular-nums}

/* 1.72.0: in-app push banner (same message as the phone's own notification) */
.nbstack{position:fixed;z-index:70;inset-inline:10px;top:calc(8px + env(safe-area-inset-top));margin:auto;max-width:520px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.nbanner{pointer-events:auto;display:flex;align-items:center;gap:12px;cursor:pointer;
  background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--tx);border:1px solid var(--ln);padding:11px 14px;border-radius:20px;box-shadow:var(--shadow);animation:nbin .28s ease-out}
.nbanner.out{opacity:0;transform:translateY(-14px);transition:.2s}
.nbanner img{border-radius:9px;flex:none}
.nbanner .nb-t{flex:1;min-width:0;line-height:1.6}
.nbanner .nb-t b{display:block;font-size:.95em}
.nbanner .nb-t span{display:block;font-size:.88em;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nbanner .nb-x{border:0;background:rgba(127,127,127,.25);color:inherit;border-radius:50%;width:28px;height:28px;flex:none;font-size:1.1rem;line-height:1}
@keyframes nbin{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}

/* 1.75.3 upload progress card */
.upbar{position:fixed;z-index:70;inset-inline:16px;bottom:calc(100px + env(safe-area-inset-bottom));margin:auto;max-width:440px;background:var(--tx);color:var(--bg);padding:12px 16px;border-radius:16px;box-shadow:var(--shadow);animation:rise .22s ease-out;display:flex;flex-direction:column;gap:8px}
.upbar b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upbar-t{height:8px;border-radius:99px;background:rgba(127,127,127,.35);overflow:hidden}
.upbar-t i{display:block;height:100%;width:0;border-radius:99px;background:var(--ac);transition:width .25s ease}
.upbar-x{font-size:.82rem;opacity:.9}
.upbar.ok .upbar-t i{background:#34d399}
.upbar.err{background:var(--cancelled);color:#fff}
.upbar.err .upbar-t i{background:#fff}

/* 1.75.4 install bar */
.instbar{position:fixed;z-index:65;inset-inline:12px;bottom:calc(84px + env(safe-area-inset-bottom));margin:auto;max-width:460px;display:flex;align-items:center;gap:10px;background:var(--tx);color:var(--bg);padding:10px 14px;border-radius:16px;box-shadow:var(--shadow);font-size:.86rem;animation:rise .22s ease-out}
.instbar span{flex:1}
.instbar .lnk{color:inherit;opacity:.8;padding:4px 8px}