/* =====================================================================
   Polish layer: typography, depth, motion  (loaded after styles.css)
   ===================================================================== */
:root{--ease:cubic-bezier(.22,.61,.36,1);--shadow:0 1px 2px rgba(30,15,0,.04),0 8px 26px rgba(30,15,0,.07);--shadow-lg:0 18px 48px rgba(30,15,0,.16)}
body{font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .4s var(--ease),color .3s}
h1,h2,h3,.brand,.kpi b,.grand b,.inv-h h2{font-family:"Playfair Display",Georgia,"Times New Roman",serif;letter-spacing:-.01em}
.rcpt{font-family:"Courier New",Consolas,monospace}
::selection{background:var(--accent);color:var(--onaccent)}
*{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* smooth theme switching */
.site-head,.app-head,.btn,.card,.kpi,.tab,.tag,.tabs,.hero,.bnav,input,select{transition:background-color .35s var(--ease),color .3s,border-color .3s,box-shadow .25s var(--ease),transform .2s var(--ease),filter .2s}

/* headers: frosted glass */
.site-head,.app-head{background:color-mix(in srgb,var(--primary) 94%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);box-shadow:0 2px 14px rgba(0,0,0,.18)}
.brand .logo{box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .4s var(--ease)}
.brand:hover .logo{transform:rotate(-8deg) scale(1.08)}
.dot{transition:transform .2s var(--ease),box-shadow .2s}.dot:hover{transform:scale(1.25)}

/* buttons */
.btn{border-radius:11px;box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 2px 6px rgba(0,0,0,.14);letter-spacing:.005em}
.btn:hover{transform:translateY(-1px);filter:none;box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 8px 18px rgba(0,0,0,.2)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.btn.ghost,.btn.ghost:hover{box-shadow:none}
.btn.ghost:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.hero .btn.ghost:hover,.cta-card .btn.ghost:hover{background:rgba(255,255,255,.14)}

/* cards & surfaces */
.card,.kpi,.tw,.side,.filters{border-radius:16px}
.card,.kpi{box-shadow:var(--shadow)}
.grid3 .card,.grid4 .card,.steps .card,.theme-card,.kpi{transition:translate .28s var(--ease),box-shadow .28s var(--ease),background-color .35s,border-color .3s,opacity .7s var(--ease),transform .7s var(--ease)}
.grid3 .card:hover,.grid4 .card:hover,.steps .card:hover,.theme-card:hover,.kpi:hover{translate:0 -4px;box-shadow:var(--shadow-lg)}
.card .num{transition:transform .4s var(--ease)}
.card:hover .num{transform:scale(1.12) rotate(-6deg)}
.kpi{position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;right:-24px;top:-24px;width:84px;height:84px;border-radius:50%;background:var(--accent);opacity:.12}

/* tabs */
.tabs{background:color-mix(in srgb,var(--soft) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tab{border-radius:10px 10px 0 0}
.tab:hover{color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,transparent)}
.tab.on{background:color-mix(in srgb,var(--primary) 7%,transparent)}
.tab.primary:hover{filter:brightness(1.08);background:var(--accent);color:var(--onaccent)}

/* inputs */
input,select{border-radius:11px;border:1px solid var(--line);background:var(--card)}
input:hover,select:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 28%,transparent)}
.scan input{box-shadow:0 2px 10px rgba(0,0,0,.06)}
table.t tr{transition:background-color .2s}
.tag{letter-spacing:.02em}
.combo-list{animation:pop .18s var(--ease)}

/* bill filters */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 12px;align-items:end;background:var(--card);border:1px solid var(--line);padding:6px 16px 16px;margin-bottom:12px;box-shadow:var(--shadow)}
.filters .f-wide{grid-column:span 2}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.chip{background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:4px 13px;font-weight:600;font-size:13px}
.chip.on{background:var(--accent);color:var(--onaccent);border-color:transparent}

/* keyframes */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-22px,26px) scale(1.08)}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes bar{0%{left:-40%}100%{left:100%}}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(180,35,24,.5)}50%{box-shadow:0 0 0 6px rgba(180,35,24,0)}}

/* page entrance: only when navigating, never while typing */
.enter>*{animation:fadeUp .55s var(--ease) both}
.enter>*:nth-child(2){animation-delay:.06s}.enter>*:nth-child(3){animation-delay:.12s}.enter>*:nth-child(4){animation-delay:.18s}.enter>*:nth-child(5){animation-delay:.24s}.enter>*:nth-child(n+6){animation-delay:.3s}
.enter .kpis .kpi{animation:fadeUp .55s var(--ease) both}
.enter .kpis .kpi:nth-child(2){animation-delay:.08s}.enter .kpis .kpi:nth-child(3){animation-delay:.16s}.enter .kpis .kpi:nth-child(4){animation-delay:.24s}
.enter .chart .col i{transform-origin:bottom;animation:grow .9s var(--ease) both}
.enter .chart .col:nth-child(2) i{animation-delay:.05s}.enter .chart .col:nth-child(3) i{animation-delay:.1s}.enter .chart .col:nth-child(4) i{animation-delay:.15s}.enter .chart .col:nth-child(5) i{animation-delay:.2s}.enter .chart .col:nth-child(6) i{animation-delay:.25s}.enter .chart .col:nth-child(7) i{animation-delay:.3s}
.enter .top li{animation:slideIn .5s var(--ease) both}
.enter .top li:nth-child(2){animation-delay:.07s}.enter .top li:nth-child(3){animation-delay:.14s}.enter .top li:nth-child(4){animation-delay:.21s}.enter .top li:nth-child(5){animation-delay:.28s}
.enter table.t tr{animation:fadeUp .45s var(--ease) both}
.enter table.t tr:nth-child(2){animation-delay:.04s}.enter table.t tr:nth-child(3){animation-delay:.08s}.enter table.t tr:nth-child(4){animation-delay:.12s}.enter table.t tr:nth-child(5){animation-delay:.16s}.enter table.t tr:nth-child(6){animation-delay:.2s}.enter table.t tr:nth-child(n+7){animation-delay:.24s}
.badge{animation:badgePulse 2s infinite}

/* modal / toast */
.modal-bg{animation:fade .22s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal{animation:pop .3s var(--ease);border-radius:18px}
#toast-root .toast{animation:toastIn .3s var(--ease);border-radius:12px}
#toast-root .toast.out{animation:toastOut .26s ease forwards}

/* top progress bar while saving / loading */
body.busy::before{content:"";position:fixed;top:0;left:0;height:3px;width:40%;z-index:200;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:bar 1s var(--ease) infinite}

/* skeleton loading */
.skel-page{min-height:100vh}
.skel-bar{height:60px;background:var(--primary)}
.skel-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0 18px}
.skel{display:block;height:84px;border-radius:16px;background:linear-gradient(90deg,var(--soft) 25%,color-mix(in srgb,var(--soft) 40%,#fff) 50%,var(--soft) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skel.big{height:190px;margin-bottom:16px}

/* landing page */
.hero{background:radial-gradient(1200px 500px at 85% -10%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 60%),linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 62%,#000))}
.hero::before{content:"";position:absolute;left:-140px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--accent),transparent 68%);opacity:.22;animation:float 11s ease-in-out infinite}
.hero::after{animation:float 14s ease-in-out infinite reverse}
.hero.intro .wrap>div:first-child>*{animation:fadeUp .8s var(--ease) both}
.hero.intro .wrap>div:first-child>*:nth-child(2){animation-delay:.1s}.hero.intro .wrap>div:first-child>*:nth-child(3){animation-delay:.2s}.hero.intro .wrap>div:first-child>*:nth-child(4){animation-delay:.3s}
.hero.intro .mock{animation:pop .9s var(--ease) .25s both}
.hero .mock{transform:perspective(1100px) rotateY(-6deg) rotateX(2deg);transition:transform .6s var(--ease)}
.hero .mock:hover{transform:perspective(1100px) rotateY(0) rotateX(0) translateY(-4px)}
.hero h1{text-shadow:0 2px 24px rgba(0,0,0,.25)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease),translate .28s var(--ease),box-shadow .28s var(--ease);transition-delay:calc(var(--i,0)*85ms)}
.reveal.in{opacity:1;transform:none}
.reveal.in:hover{transition-delay:0s}
section.alt{background:linear-gradient(180deg,var(--soft),color-mix(in srgb,var(--soft) 55%,var(--bg)))}
.sec-title h2{font-size:clamp(26px,4vw,38px)}

/* mobile */
@media (max-width:700px){
  .modal{animation:sheet .34s var(--ease)}
  .filters{grid-template-columns:1fr 1fr;padding:6px 12px 14px}
  .filters .f-wide{grid-column:1/-1}
  .skel-row{grid-template-columns:1fr 1fr}
  .hero .mock{transform:none}
  .bnav button{transition:color .2s,transform .2s var(--ease)}
  .bnav button:active{transform:scale(.9)}
  .bnav button.primary i{transition:transform .3s var(--ease),box-shadow .3s}
  .bnav button.primary:active i{transform:scale(.92)}
  table.t tr{border-radius:14px;box-shadow:var(--shadow)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media print{.enter,.enter *{animation:none!important}}

.kpi b,.grand b,h1,h2,h3,.inv-h h2,.cta-card h3{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.kpi b{font-family:Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
.grand b{font-family:Inter,system-ui,sans-serif;font-weight:800}

/* compact camera scanner */
.modal:has(#cam){width:min(360px,100%)}
#cam{width:100%;height:170px;object-fit:cover;border-radius:12px;display:block}
.modal:has(#cam) h3{font-size:18px;margin-bottom:8px}
.modal:has(#cam) .hint{margin:8px 0 0;font-size:12px;padding:6px 10px}
@media (max-width:700px){.modal:has(#cam){width:100%;padding-top:14px}#cam{height:150px}}