/* Kuro — P&L Tracker */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#07080c;--bg2:#0c0e14;--bg3:#10131a;--cd:#13161e;--cd2:#181c26;--cdh:#1c2030;--b:#1a1e2a;--b2:#242938;--t:#eff0f4;--t2:#8990a8;--t3:#4d536e;--t4:#353b52;--g:#2dd4a8;--gd:rgba(45,212,168,.07);--gm:rgba(45,212,168,.15);--r:#ef6b6b;--rd:rgba(239,107,107,.07);--rm:rgba(239,107,107,.14);--a:#7c6cf0;--ad:rgba(124,108,240,.07);--am:rgba(124,108,240,.14);--o:#f59e42;--od:rgba(245,158,66,.07);--y:#eab308;--yd:rgba(234,179,8,.07);--bl:#5b9cf5;--bld:rgba(91,156,245,.07);--pk:#ec6fa0;--pkd:rgba(236,111,160,.07);--tl:#2dd4bf;--r16:16px;--r14:14px;--r12:12px;--r10:10px;--r8:8px}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;background:var(--bg);color:var(--t);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.4}
body.login-active{overflow:hidden}
/* scrollbar styles moved to improvements section below */
.hidden{display:none !important}
.app{max-width:430px;margin:0 auto;min-height:100dvh;background:var(--bg);position:relative}
.scr{overflow-y:auto;padding-bottom:80px;-webkit-overflow-scrolling:touch;min-height:100dvh}
.pad{padding:0 16px}.mono{font-variant-numeric:tabular-nums}
.cd{background:var(--cd);border:1px solid var(--b);border-radius:var(--r16);overflow:hidden}
.cd3{background:var(--bg2);border-radius:var(--r10);padding:12px}
.rw{display:flex;align-items:center;padding:12px 16px;gap:12px;border-bottom:1px solid var(--b);cursor:pointer;transition:background .1s}.rw:last-child{border-bottom:0}.rw:hover{background:var(--bg3)}.rw:active{background:var(--cdh)}
.ic{width:32px;height:32px;border-radius:var(--r8);display:grid;place-items:center;flex-shrink:0}
.ic2{width:36px;height:36px;border-radius:var(--r10);display:grid;place-items:center;font:700 14px/1 inherit;color:#fff;flex-shrink:0}
.btn{padding:14px;border:0;border-radius:var(--r14);font:700 14px/1 inherit;cursor:pointer;width:100%;transition:.12s;text-align:center}.btn:hover{opacity:.85}.btn:active{transform:scale(.98);opacity:.9}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font:600 10px/1.3 inherit;white-space:nowrap}
.tag2{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:8px;font:700 11px/1.3 inherit;white-space:nowrap}
.pill{padding:8px 16px;border-radius:100px;background:var(--bg3);border:1.5px solid var(--b);color:var(--t2);font:600 12px/1 inherit;cursor:pointer;display:flex;align-items:center;gap:8px;transition:.12s}.pill:hover{background:var(--bg2)}.pill:active{transform:scale(.96)}.pill.sel{background:var(--ad);border-color:var(--a);color:var(--a)}
.dvd{height:1px;background:var(--b);margin:8px 0}
.bar{height:4px;background:var(--b);border-radius:2px;overflow:hidden}.bar>div{height:100%;border-radius:2px}
.top{padding:44px 16px 8px;display:flex;align-items:center;justify-content:space-between}
.logo{width:28px;height:28px;border-radius:8px;background:var(--a);display:grid;place-items:center;font:900 13px/1 inherit;color:#fff}
.ibtn{width:32px;height:32px;border-radius:8px;background:var(--cd);border:1px solid var(--b);display:grid;place-items:center;cursor:pointer;color:var(--t2);font-size:13px;transition:.1s;position:relative}.ibtn:hover{background:var(--bg3)}.ibtn:active{transform:scale(.92)}
.bdg{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--r);color:#fff;font:700 10px/16px inherit;text-align:center;padding:0 4px;border:2px solid var(--bg)}
.av{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:700 11px/1 inherit;color:#fff;cursor:pointer}
.nav{padding:44px 16px 4px;display:flex;align-items:center;gap:8px}
.nbk{width:32px;height:32px;border-radius:8px;background:var(--cd);border:1px solid var(--b);display:grid;place-items:center;cursor:pointer;color:var(--t2);font-size:15px;transition:.1s}.nbk:hover{background:var(--bg3)}.nbk:active{transform:scale(.92)}
.toast{position:fixed;top:48px;left:50%;transform:translateX(-50%) translateY(-12px);padding:8px 16px;border-radius:var(--r10);font:700 12px/1 inherit;z-index:310;opacity:0;pointer-events:none;transition:.2s cubic-bezier(.16,1,.3,1);box-shadow:0 6px 20px rgba(0,0,0,.35);background:var(--g);color:var(--bg)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:250;display:none;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.modal-bg.show{display:grid}
.modal{background:var(--cd);border:1px solid var(--b2);border-radius:20px;padding:24px;width:calc(100% - 44px);max-width:370px}
.sec{margin:0 16px 12px}.sec-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.sec-t{font:700 13px/1 inherit}.sec-l{font:600 11px/1 inherit;color:var(--a);cursor:pointer}
.sbtn2{padding:8px 12px;border-radius:100px;font:700 11px/1 inherit;border:0;cursor:pointer;transition:.12s}.sbtn2:active{transform:scale(.95)}
.staff-bar{margin:0 16px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}.staff-bar::-webkit-scrollbar{display:none}
.staff-chip{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;background:var(--cd);border:1px solid var(--b);border-radius:100px;flex-shrink:0;cursor:pointer;transition:.12s}.staff-chip:hover{background:var(--bg3)}.staff-chip:active{background:var(--cdh)}
.staff-av{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font:700 10px/1 inherit;color:#fff;position:relative}
.staff-dot{position:absolute;bottom:-1px;right:-1px;width:8px;height:8px;border-radius:50%;border:2px solid var(--cd)}
.batch-row{display:flex;align-items:center;padding:12px 16px;gap:12px;border-bottom:1px solid var(--b)}.batch-row:last-child{border-bottom:0}
.batch-av{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font:700 12px/1 inherit;color:#fff;flex-shrink:0}
.batch-inp{width:92px;background:var(--bg2);border:1px solid var(--b);border-radius:var(--r8);padding:8px 12px;color:var(--t);font:700 14px/1 inherit;text-align:right;outline:0;font-variant-numeric:tabular-nums;transition:border .12s}.batch-inp:focus{border-color:var(--a)}.batch-inp::placeholder{color:var(--t4)}
@keyframes pd{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(45,212,168,.2)}50%{box-shadow:0 0 0 8px rgba(45,212,168,0)}}
@keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.ai{animation:fi .2s ease-out}

/* Balance card */
.bal-card{padding:16px;text-align:center}
.bal-amount{font:800 32px/1 inherit;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.bal-label{font:600 10px/1 inherit;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.bal-sub{font:500 11px/1 inherit;color:var(--t3);margin-top:4px}
.bal-positive{color:var(--r)}
.bal-negative{color:var(--g)}
.bal-zero{color:var(--t3)}

/* Ledger */
.ledger-row{display:flex;align-items:center;padding:12px 16px;gap:12px;border-bottom:1px solid var(--b);font-size:12px}
.ledger-row:last-child{border-bottom:0}
.ledger-icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:12px;flex-shrink:0}
.ledger-info{flex:1;min-width:0}
.ledger-desc{font:600 12px/1 inherit}
.ledger-date{font:500 10px/1 inherit;color:var(--t3);margin-top:4px}
.ledger-amt{font:700 12px/1 inherit;font-variant-numeric:tabular-nums;text-align:right}
.ledger-bal{font:500 10px/1 inherit;color:var(--t3);text-align:right;margin-top:4px}

/* Pay button */
.pay-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:var(--bg2);border:1px solid var(--b2);border-radius:var(--r10);cursor:pointer;transition:.12s;margin:12px 16px}
.pay-btn:hover{background:var(--bg3)}.pay-btn:active{background:var(--cdh);transform:scale(.98)}

/* Login */
.login-screen{position:fixed;inset:0;background:var(--bg);z-index:400;display:grid;place-items:center}
.login-card{width:calc(100% - 48px);max-width:360px;text-align:center}
.login-logo{width:56px;height:56px;border-radius:16px;background:var(--a);display:grid;place-items:center;font:900 24px/1 inherit;color:#fff;margin:0 auto 16px}
.login-title{font:800 28px/1 inherit;letter-spacing:-.8px;margin-bottom:4px}
.login-sub{font:500 13px/1 inherit;color:var(--t3);margin-bottom:24px}
.login-input{width:100%;background:var(--cd);border:1px solid var(--b);border-radius:var(--r12);padding:14px 16px;color:var(--t);font:500 14px/1 inherit;outline:0;margin-bottom:12px;transition:border .15s}
.login-input:focus{border-color:var(--a)}
.login-input::placeholder{color:var(--t4)}
.login-btn{width:100%;padding:14px;border:0;border-radius:var(--r14);background:var(--a);color:#fff;font:700 14px/1 inherit;cursor:pointer;transition:.12s;margin-top:4px}
.login-btn:hover{opacity:.85}.login-btn:active{transform:scale(.98);opacity:.9}
.login-error{font:600 12px/1 inherit;color:var(--r);margin-top:12px;min-height:16px}

/* ===== IMPROVEMENTS ===== */

/* #26 — Shadow & transition CSS variables */
:root{--shadow-sm:0 1px 3px rgba(0,0,0,.25);--shadow-md:0 4px 12px rgba(0,0,0,.35);--shadow-lg:0 8px 28px rgba(0,0,0,.5);--transition-fast:.1s ease;--transition-normal:.2s ease}

/* #28 — Selection highlight */
::selection{background:var(--am);color:var(--t)}
::-moz-selection{background:var(--am);color:var(--t)}

/* #29 — Scrollbar styling */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--t4);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--t3)}

/* #1 — Focus-visible outlines for interactive elements */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--a);outline-offset:2px}

/* #2 — Screen reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* #3 — Pill focus */
.pill:focus-visible{outline:2px solid var(--a);outline-offset:2px}

/* #4 — Row focus */
.rw:focus-visible{outline:2px solid var(--a);outline-offset:-2px;border-radius:var(--r8)}

/* #5 — Icon button focus */
.ibtn:focus-visible{outline:2px solid var(--a);outline-offset:2px}

/* #6 — Reduced motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}

/* #7 — Minimum 44x44 touch targets */
.btn{min-height:44px}
.ibtn,.nbk{min-width:44px;min-height:44px}
.pill{min-height:44px}
.rw{min-height:44px}
.pay-btn{min-height:44px}

/* #8 — Safe area inset for notched phones */
.scr{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
.app{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

/* #9 — Prevent pull-to-refresh */
.scr{overscroll-behavior:contain}

/* #10 — Prevent double-tap zoom on buttons */
.btn,.ibtn,.nbk,.pill,.pay-btn,.rw,.staff-chip,.sbtn2{touch-action:manipulation}

/* #11 — Disable callout on interactive elements */
.btn,.ibtn,.nbk,.pill,.pay-btn,.rw,.staff-chip,.sbtn2,.av{-webkit-touch-callout:none}

/* #12 — Loading pulse animation */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.loading{animation:pulse 1.5s ease-in-out infinite}

/* #13 — Skeleton placeholder */
.skeleton{background:linear-gradient(90deg,var(--cd) 25%,var(--cd2) 50%,var(--cd) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r8);color:transparent !important}

/* #14 — Disabled state */
.disabled{opacity:.4;pointer-events:none;cursor:default;user-select:none}

/* #15 — Fade in animation */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-in{animation:fadeIn var(--transition-normal) ease-out}

/* #16 — Tabular numbers */
.text-mono{font-variant-numeric:tabular-nums}

/* #17 — Text truncate */
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* #18 — Text alignment utilities */
.text-center{text-align:center}
.text-right{text-align:right}

/* #19 — Gap utilities (4px grid) */
.gap-4{gap:4px}
.gap-8{gap:8px}
.gap-12{gap:12px}

/* #20 — Margin utilities (4px grid) */
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}

/* #21 — Modal box-shadow depth */
.modal{box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.03)}

/* #22 — Improved toast shadow */
.toast{box-shadow:var(--shadow-lg)}

/* #23 — Badge class (reusable) */
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:10px;background:var(--r);color:#fff;font:700 10px/1 inherit;padding:0 4px;white-space:nowrap}

/* #24 — Divider class */
.divider{height:1px;background:var(--b);margin:8px 0;border:0;width:100%}

/* #25 — Card hover for clickable cards */
.card-hover{cursor:pointer;transition:background var(--transition-fast)}.card-hover:active{background:var(--cdh)}

/* #30 — Shimmer keyframes for skeleton */
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.timer-pulse{animation:pulse 2s ease-in-out infinite}
.scr-in{animation:fadeIn .15s ease-out}

/* #31 — Responsive: center app on larger screens with visual treatment */
@media(min-width:768px){
  body{display:flex;justify-content:center;align-items:flex-start;min-height:100vh}
  .app{border-left:1px solid var(--b);border-right:1px solid var(--b);box-shadow:0 0 60px rgba(0,0,0,.4)}
  .login-screen{display:flex;align-items:center;justify-content:center}
}
@media(min-width:1280px){
  .app{max-width:430px}
}