/* Quick Bill — modern UI layer. Loads after shell.css; logic files are untouched. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
--sh1:0 1px 2px rgba(16,24,40,.06),0 1px 1px rgba(16,24,40,.04);
--sh2:0 4px 12px -2px rgba(16,24,40,.08),0 2px 4px -2px rgba(16,24,40,.05);
--sh3:0 18px 40px -12px rgba(16,24,40,.22),0 6px 14px -6px rgba(16,24,40,.1);
--glass:color-mix(in srgb,var(--surface) 72%,transparent)}
html[data-theme=dark]{--sh1:0 1px 2px rgba(0,0,0,.4);--sh2:0 6px 16px -4px rgba(0,0,0,.5);--sh3:0 22px 48px -12px rgba(0,0,0,.7)}
html{scroll-behavior:smooth;accent-color:var(--primary)}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI Variable","Segoe UI",Roboto,sans-serif;letter-spacing:-.011em;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
background:radial-gradient(900px 480px at 85% -10%,color-mix(in srgb,var(--primary) 11%,transparent),transparent 70%),radial-gradient(700px 400px at -5% 105%,color-mix(in srgb,var(--primary) 7%,transparent),transparent 70%),var(--background);background-attachment:fixed}
::selection{background:color-mix(in srgb,var(--primary) 28%,transparent)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 22%,transparent) transparent}
/* surfaces */
.card,.kpi{border-color:color-mix(in srgb,var(--border) 80%,transparent);box-shadow:var(--sh1);transition:box-shadow .3s var(--ease-out),transform .3s var(--ease-out),border-color .2s}
.kpi:hover{box-shadow:var(--sh3);transform:translateY(-4px) scale(1.01)}
.kpi b{font-size:28px;font-weight:750;letter-spacing:-.03em}
/* buttons: springy press, soft depth */
.btn{position:relative;overflow:hidden;transition:transform .35s var(--spring),box-shadow .25s,background .2s,border-color .2s;box-shadow:var(--sh1)}
.btn:hover{box-shadow:var(--sh2)}
.btn:active{transform:scale(.96)}
.btn.solid:not(.danger){background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 88%,#fff),var(--primary));border-color:var(--primary);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -6px color-mix(in srgb,var(--primary) 70%,transparent)}
.btn.solid:not(.danger):hover{filter:brightness(1.07);transform:translateY(-1px)}
.rip{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:rip .6s var(--ease-out) forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}
/* inputs */
input,select,textarea{transition:border-color .2s,box-shadow .25s var(--ease-out),background .2s;border-color:var(--border)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent)}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 60%,transparent);outline-offset:2px}
/* sidebar + topbar: glass, sliding active pill */
#sb{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
#tb{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 var(--border)}
.sbi{transition:background .2s,color .2s,transform .3s var(--spring)}
.sbi:hover{transform:translateX(3px)}
.sbi svg{transition:transform .35s var(--spring)}
.sbi:hover svg{transform:scale(1.14) rotate(-4deg)}
.sbi.on,.sbi.active,.sbi[aria-current]{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);box-shadow:inset 3px 0 0 var(--primary)}
.sbl{box-shadow:0 6px 16px -4px color-mix(in srgb,var(--primary) 60%,transparent);transition:transform .5s var(--spring)}
.sbl:hover{transform:rotate(-8deg) scale(1.08)}
/* the one orchestrated moment: pages arrive, children settle in */
main:not([hidden]){animation:pgIn .45s var(--ease-out) both}
@keyframes pgIn{from{opacity:0;transform:translateY(14px) scale(.995);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.dg>*,.dg2>*,.kpi{animation:pop .5s var(--ease-out) both}
.kpi:nth-child(2){animation-delay:.05s}.kpi:nth-child(3){animation-delay:.1s}.kpi:nth-child(4){animation-delay:.15s}.kpi:nth-child(5){animation-delay:.2s}.kpi:nth-child(6){animation-delay:.25s}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
/* dialogs + toast react to actions */
dialog[open]{animation:dlgIn .4s var(--spring) both;box-shadow:var(--sh3);border:1px solid var(--border)}
dialog::backdrop{background:rgba(10,14,24,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .3s both}
@keyframes dlgIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}}
.toast{background:color-mix(in srgb,#10131a 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-left:4px solid var(--primary);box-shadow:var(--sh3)}
.toast:not([hidden]){animation:toastIn .5s var(--spring) both}
/* lists */
.items li,.bl,.ir,.sr{transition:background .2s,transform .25s var(--ease-out)}
.items li:hover{transform:translateX(2px)}
.items li:not(.empty){animation:pop .35s var(--ease-out) both}
.skel{border-radius:10px;background:linear-gradient(100deg,var(--surface-secondary) 30%,color-mix(in srgb,var(--text) 8%,var(--surface-secondary)) 50%,var(--surface-secondary) 70%);background-size:200% 100%;animation:shim 1.3s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
/* app-launch splash */
#qbSplash{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:var(--background);transition:opacity .5s .1s,visibility .5s .1s}
#qbSplash.out{opacity:0;visibility:hidden}
#qbSplash i{width:72px;height:72px;border-radius:20px;background:var(--primary) url(icon-192.png) center/cover;box-shadow:0 18px 40px -10px color-mix(in srgb,var(--primary) 70%,transparent);animation:sp 1s var(--spring) both}
@keyframes sp{from{opacity:0;transform:scale(.5) rotate(-12deg)}}
@media print{#qbSplash,.rip{display:none!important}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* WhatsApp */
.btn.wa{background:linear-gradient(180deg,#2fd36f,#1ebe5d);border-color:#1ebe5d;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px -8px rgba(30,190,93,.8)}
.btn.wa:disabled{opacity:.6}
#waDlg .wrap{display:flex;flex-direction:column;gap:12px;min-width:min(420px,88vw)}
.walist{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto}
.war{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-secondary);animation:pop .35s var(--ease-out) both}
.wai{display:flex;flex-direction:column;min-width:0}.wai b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wai small{color:var(--text-secondary)}
.wam{font-size:18px;letter-spacing:-.02em}.war .btn{grid-column:1/-1;min-height:44px;margin-top:6px}
.waempty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px 10px;text-align:center}.waempty small{color:var(--text-secondary)}