/* Cinematic retail command center — visual-only layer; existing workflows preserved. */
:root{--bg:#080f13;--surface:#121d23;--sunk:#0c171c;--raise:#17252b;--ink:#f1f6f4;--muted:#9db0ad;--line:#26383b;--line-2:#385154;--accent:#55e3b0;--accent-2:#83f3c9;--accent-ink:#052018;--accent-soft:#183e36;--gold:#f5c96c;--gold-soft:#3c3020;--gold-ink:#ffe9b1;--side:#071317;--side-ink:#d6e9e5;--side-muted:#829d9b;--side-hi:#1b3b38;--good:#68e0ab;--good-soft:#183c2c;--bad:#ff8583;--bad-soft:#3c2024;--warn:#f5c96c;--warn-soft:#3d3020;--r:22px;--r-sm:13px;--shadow:0 16px 45px rgba(0,0,0,.2);color-scheme:dark}
@media(prefers-color-scheme:dark){:root{--bg:#080f13;--surface:#121d23;--sunk:#0c171c;--raise:#17252b;--ink:#f1f6f4;--muted:#9db0ad;--line:#26383b;--line-2:#385154;--accent:#55e3b0;--accent-2:#83f3c9;--accent-ink:#052018;--accent-soft:#183e36;--gold:#f5c96c;--gold-soft:#3c3020;--gold-ink:#ffe9b1;--side:#071317;--side-ink:#d6e9e5;--side-muted:#829d9b;--side-hi:#1b3b38;--good:#68e0ab;--good-soft:#183c2c;--bad:#ff8583;--bad-soft:#3c2024;--warn:#f5c96c;--warn-soft:#3d3020;--shadow:0 16px 45px rgba(0,0,0,.2);color-scheme:dark}}
html{background:#080f13}body{background:radial-gradient(ellipse 70% 45% at 85% -10%,rgba(36,113,100,.18),transparent 75%),radial-gradient(ellipse 40% 35% at 12% 105%,rgba(164,118,51,.07),transparent 80%),var(--bg);min-height:100vh}
.side{background:linear-gradient(165deg,#102b2b 0%,#091b20 45%,#071015 100%);box-shadow:15px 0 50px rgba(0,0,0,.16)}
.side-brand{padding-top:32px;padding-bottom:29px}.logo{background:linear-gradient(135deg,#fff0bd,#e7b451);box-shadow:0 0 32px rgba(245,201,108,.22);border:1px solid rgba(255,255,255,.3)}.side .brand{letter-spacing:.035em}.side-sub{text-transform:uppercase;letter-spacing:.18em;font-size:10px;margin-top:6px}
.navbtn{border:1px solid transparent}.navbtn:hover{border-color:rgba(127,231,193,.14);background:rgba(105,215,179,.08)}.navbtn[aria-current="page"]{background:linear-gradient(95deg,rgba(85,227,176,.2),rgba(85,227,176,.035));border-color:rgba(85,227,176,.25);box-shadow:inset 3px 0 var(--accent),0 8px 24px rgba(0,0,0,.1)}
.topbar{background:rgba(10,22,27,.78);border-bottom:1px solid rgba(159,220,204,.12);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.content{max-width:1440px;gap:24px;padding-top:34px}.crumb{letter-spacing:.025em}.pagehead{position:relative;padding:12px 0 20px;border-bottom:1px solid rgba(125,173,165,.15)}.pagehead:before{content:'OPERATIONS  /  LIVE WORKSPACE';display:block;font:700 10px var(--f-mono);letter-spacing:.19em;color:var(--accent);margin-bottom:9px}.pagehead h1{font-size:clamp(38px,4vw,56px);line-height:1.03;letter-spacing:-.025em;color:#f6f8f5}.lead{color:#9fb3ae}
.panel{background:linear-gradient(145deg,rgba(27,44,49,.95),rgba(14,26,31,.97));border:1px solid rgba(137,186,178,.18);box-shadow:0 18px 48px rgba(0,0,0,.17),inset 0 1px rgba(255,255,255,.035);border-radius:22px}.panel:hover{border-color:rgba(85,227,176,.3);box-shadow:0 20px 55px rgba(0,0,0,.22)}.panel.inset{background:#0d1b20}.panel.warnbox{background:linear-gradient(125deg,#3d3020,#211e1a)}
.tiles{gap:17px}.tile{background:linear-gradient(145deg,#1c3135,#122127 80%);border:1px solid rgba(133,195,178,.2);box-shadow:0 15px 35px rgba(0,0,0,.14);border-radius:19px;padding:20px 21px;min-height:122px}.tile:after{content:'';position:absolute;right:-27px;top:-45px;width:120px;height:120px;border-radius:50%;border:1px solid rgba(101,232,183,.1);box-shadow:0 0 0 23px rgba(101,232,183,.025);pointer-events:none}.tile .k{color:#aac2ba;font-size:11px;letter-spacing:.12em}.tile .v{font-size:clamp(33px,3vw,44px);color:#fff;margin-top:12px}.tile:nth-child(3n+2) .v{color:var(--gold)}.tile:nth-child(3n+3) .v{color:var(--accent)}.tile .n{color:#91aaa4}
h2{color:#eaf5ef;font-size:27px}th{background:#14252a;color:#a4bdb6}td{border-color:#293d40}tbody tr:hover td{background:rgba(85,227,176,.07)}.tscroll{border-color:#34484b}
.btn{border-radius:12px;min-height:39px}.btn.primary{background:linear-gradient(120deg,#58e5b1,#35b991);border-color:#58e5b1;box-shadow:0 8px 25px rgba(50,212,156,.14)}.btn.gold{background:linear-gradient(110deg,#ffe0a0,#eebc56);border-color:#eebc56}.btn:hover{transform:translateY(-1px)}.chip{background:#20302f;color:#e2f1ea;border-color:#36504b}.chip.none{background:#142228;border-color:#2b4243;color:#b2c5bd}
input,select,textarea{background:#101f24;color:#f4faf7;border-color:#385054}input:focus,select:focus,textarea:focus{background:#14282b}input::placeholder{color:#839b95}.subtabs{background:#122329;border-color:#314548}.subtabs button{color:#b2c4bd}.alert{background:#17292d;border-color:#2e4646}.login-hero{background:radial-gradient(circle at 75% 12%,rgba(245,201,108,.22),transparent 38%),radial-gradient(circle at 20% 85%,rgba(64,233,179,.16),transparent 48%),linear-gradient(150deg,#153e3a,#07191d 72%)}.login-hero .brand{letter-spacing:-.02em}.userbtn{background:#14262a;border:1px solid #33504d}.pinpad button{background:#1b3034;color:#fff;border:1px solid #36524e}.pinpad button:hover{background:#25453f}.bottomnav{background:rgba(12,27,32,.97);border-color:#2a4542;backdrop-filter:blur(22px)}.bottomnav button[aria-current="page"]{color:var(--accent)}
@media(max-width:980px){.content{padding-top:19px}.side{box-shadow:20px 0 60px rgba(0,0,0,.45)}}
@media(max-width:640px){.pagehead{padding-top:4px}.pagehead h1{font-size:36px}.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{min-height:110px;padding:14px}.tile .v{font-size:29px}.panel{border-radius:18px}.bar-right .chip{font-size:10px}.content{gap:15px}}
@media(max-width:360px){.tiles{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){.panel,.tile{animation:cinematic-rise .45s ease both}@keyframes cinematic-rise{from{opacity:.65;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}

/* EZ Market Signature: storefront-inspired cinematic burgundy */
:root{--bg:#100c10;--surface:#21151d;--sunk:#170f16;--raise:#33202b;--ink:#fff5f6;--muted:#c8aeba;--line:#533343;--line-2:#76485b;--accent:#e7a2bb;--accent-2:#ffd0df;--accent-ink:#2b0b1a;--accent-soft:#4b2536;--gold:#f3d3ac;--gold-soft:#463126;--gold-ink:#fff1d9;--side:#160e15;--side-ink:#fff1f5;--side-muted:#bc9baa;--side-hi:#4a2537;--good:#8ce1bd;--good-soft:#1b3a30;--bad:#ff8d9c;--bad-soft:#4b2432;--warn:#f3c58b;--warn-soft:#443022;color-scheme:dark}
@media(prefers-color-scheme:dark){:root{--bg:#100c10;--surface:#21151d;--sunk:#170f16;--raise:#33202b;--ink:#fff5f6;--muted:#c8aeba;--line:#533343;--line-2:#76485b;--accent:#e7a2bb;--accent-2:#ffd0df;--accent-ink:#2b0b1a;--accent-soft:#4b2536;--gold:#f3d3ac;--gold-soft:#463126;--gold-ink:#fff1d9;--side:#160e15;--side-ink:#fff1f5;--side-muted:#bc9baa;--side-hi:#4a2537;--good:#8ce1bd;--good-soft:#1b3a30;--bad:#ff8d9c;--bad-soft:#4b2432;--warn:#f3c58b;--warn-soft:#443022;color-scheme:dark}}
html{background:#100c10}body{background:radial-gradient(ellipse at 90% 0%,#45233355,transparent 56%),radial-gradient(ellipse at 10% 90%,#5a304044,transparent 65%),var(--bg)}
.side{background:linear-gradient(180deg,#27131f,#170f16 58%,#1f111b)}.side-brand{align-items:center}.logo-photo{background:linear-gradient(#170b1680,#170b1680),url('storefront.jpg') center 56%/cover;border:2px solid #e1adc2;box-shadow:0 0 0 4px #5d293e,0 10px 28px #0007;color:transparent}.side .brand span{color:#f5bfd1}.side-sub{color:#c4a4b0}
.navbtn:hover{background:#6e33483a;border-color:#c06b8a55}.navbtn[aria-current="page"]{background:linear-gradient(100deg,#7c344eaa,#45203055);border-color:#bd6c8a66;box-shadow:inset 3px 0 #e9aac0,0 9px 28px #0003}.topbar{background:#190e17d9;border-color:#80516a44}.panel{background:linear-gradient(145deg,#30202b,#1d141c 85%);border-color:#80536b66}.panel:hover{border-color:#b87996aa}.tile{background:linear-gradient(130deg,#4b2738,#241720 78%);border-color:#9a617a55}.tile:after{border-color:#e8aac02c;box-shadow:0 0 0 23px #e8aac00a}.tile .k,.tile .n{color:#d6b4c3}.tile:nth-child(3n+3) .v{color:#f3c1d3}h2{color:#fff3f7}th{background:#30202b;color:#dfb7c9}td{border-color:#563748}tbody tr:hover td{background:#c8769630}.tscroll{border-color:#704559}.btn.primary{background:linear-gradient(115deg,#e9b3c7,#c77c9a);border-color:#f0b4cc;color:#27101a;box-shadow:0 8px 25px #b654792a}.btn.gold{background:linear-gradient(110deg,#fbe2c6,#dcb18a)}.chip{background:#3a2431;border-color:#69465a;color:#ffe6f0}.chip.none{background:#271923;border-color:#55384a;color:#e0bccc}input,select,textarea{background:#231721;border-color:#704c60;color:#fff7fa}input:focus,select:focus,textarea:focus{background:#32212c}.subtabs{background:#2d1b28;border-color:#644357}.alert{background:#33212c;border-color:#765067}.bottomnav{background:#1d111bfa;border-color:#6a3b52}.bottomnav button[aria-current="page"]{color:#f1aec7}
.login-hero{background:linear-gradient(100deg,#190d19e8,#321622b5),url('storefront.jpg') center/cover;position:relative}.login-hero:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 40%,#170c18b3)}.login-hero>*{position:relative}.login-brandmark{font:700 clamp(42px,5vw,76px) Georgia,serif;letter-spacing:-.05em;color:#fff0f5;text-shadow:0 6px 28px #0009}.login-brandmark em{display:block;font:italic 400 clamp(20px,2.6vw,34px) Georgia,serif;letter-spacing:.24em;color:#f7c7d7}.login-hero .brand{font-family:Georgia,serif}.userbtn,.pinpad button{background:#33202c;border-color:#78485f}.pinpad button:hover{background:#533044}
.pagehead{border-color:#a4678255}.pagehead:before{content:'EZ MARKET  /  STORE OPERATIONS';color:#f0adc5}.pagehead h1{font-family:Georgia,'Times New Roman',serif;color:#fff3f7;letter-spacing:-.04em}.lead{color:#d5b9c5}
@media(min-width:981px){.content:has(.pagehead)>.pagehead:first-child{background:linear-gradient(90deg,#1b0d19e8 0%,#301724cf 58%,#1b0d1933),url('storefront.jpg') center 52%/cover;border:1px solid #905b74;border-radius:22px;padding:38px 34px;min-height:170px;box-shadow:0 22px 45px #0005}.content>.pagehead:first-child .lead{color:#fff0f4;text-shadow:0 1px 4px #000}.content>.pagehead:first-child h1{text-shadow:0 3px 12px #000}}
@media(max-width:980px){.content>.pagehead:first-child{background:linear-gradient(90deg,#1b0d19e8,#2b1320aa),url('storefront.jpg') center/cover;padding:24px 20px;border:1px solid #78465e;border-radius:18px}.content>.pagehead:first-child .lead{color:#f4dbe5}}
/* fixes: header label on pages with a side button; menu shadow only while the phone menu is open */
.pagehead.row{flex-wrap:wrap;align-items:flex-end}.pagehead.row:before{flex-basis:100%;margin-bottom:0}
@media(max-width:980px){.side{box-shadow:none}body.navopen .side{box-shadow:20px 0 60px rgba(0,0,0,.45)}}
/* two-step sign-in */
.steps{display:flex;gap:8px;flex-wrap:wrap}.steps span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.steps span.on{border-color:var(--accent);color:var(--accent)}.steps span.done{color:var(--good);border-color:var(--good)}.steps b{font-family:var(--f-mono);color:var(--ink)}
.pinpad button:disabled{opacity:.4;cursor:not-allowed}
/* sign-in: one brand title (the storefront mark), keypad higher on phones */
.login-hero .login-brandmark + .brand{display:none}
@media(max-width:980px){.login-hero .hero-list{display:none}.login-hero{padding-bottom:20px}}

/* ===== EZ Market brand layer: colours taken from the storefront sign =====
   Sign: rosewood burgundy disc, twin coral stripes on the band, cream serif lettering, black frame. */
:root{--brand:#8f4f63;--brand-deep:#4f2534;--stripe:#e8858e;--cream:#f8eee4;
  --bg:#120c10;--surface:#22161c;--sunk:#180f14;--raise:#2e1d25;--ink:#f8eee4;--muted:#d4b9bb;--line:#4d2f3b;--line-2:#6e4352;
  --accent:#e8858e;--accent-2:#f5aab0;--accent-ink:#2a0c12;--accent-soft:#4b2430;--gold:#f3e2c9;--gold-soft:#3e2a26;--gold-ink:#fff4e4;
  --side:#1a0f15;--side-ink:#f8eee4;--side-muted:#c9a9b0;--side-hi:#5a2d3d;
  --good:#93dcb8;--good-soft:#1c3a2e;--bad:#ff9aa2;--bad-soft:#4b2430;--warn:#f3cf96;--warn-soft:#43301f;color-scheme:dark}
@media(prefers-color-scheme:dark){:root{--bg:#120c10;--surface:#22161c;--sunk:#180f14;--raise:#2e1d25;--ink:#f8eee4;--muted:#d4b9bb;--line:#4d2f3b;--line-2:#6e4352;--accent:#e8858e;--accent-2:#f5aab0;--accent-ink:#2a0c12;--accent-soft:#4b2430;--gold:#f3e2c9;--gold-soft:#3e2a26;--side:#1a0f15;--side-hi:#5a2d3d;color-scheme:dark}}
html{background:#120c10}
body{background:radial-gradient(ellipse 60% 40% at 92% -5%,#8f4f6333,transparent 70%),radial-gradient(ellipse 45% 35% at 5% 100%,#e8858e14,transparent 75%),var(--bg)}
/* sidebar: the round sign as the logo, serif "EZ market" like the sign */
.side{background:linear-gradient(180deg,#2a1520 0%,#1a0f15 55%,#140b10 100%);border-right:1px solid #4d2f3b}
.logo.logo-photo{width:54px;height:54px;border-radius:50%;background:url('logo-icon.png') center/cover;border:2px solid var(--cream);box-shadow:0 0 0 3px #121218,0 0 0 5px var(--stripe),0 10px 26px #0008}
.side .brand.brand-sign{font:700 30px Georgia,'Times New Roman',serif;color:var(--cream);letter-spacing:.01em;line-height:.95}
.side .brand.brand-sign em{display:block;font:italic 400 15px Georgia,serif;letter-spacing:.32em;color:var(--stripe);margin-top:2px}
.side-sub{color:var(--side-muted)}
.navgroup{color:#c9a9b0}
.navbtn:hover{background:#8f4f6326;border-color:#e8858e33}
.navbtn[aria-current="page"]{background:linear-gradient(100deg,#8f4f63aa,#4f253455);border-color:#e8858e66;box-shadow:inset 3px 0 var(--stripe),0 9px 28px #0004;color:#fff}
.navbtn .badge,.bottomnav .badge{background:var(--stripe);color:#2a0c12}
/* the sign's twin coral stripes as the page's signature line */
.topbar{background:#1a0f15e6;border-bottom:0;box-shadow:0 1px 0 #e8858e55,0 4px 0 -2px #1a0f15,0 5px 0 -2px #e8858e33}
.pagehead:before{content:'EZ MARKET  ·  155 UNIVERSITY AVE  ·  NEWARK';color:var(--stripe)}
.pagehead:after{content:'';display:block;width:min(260px,60%);height:6px;margin-top:10px;border-top:2px solid var(--stripe);border-bottom:2px solid var(--stripe);opacity:.85}
.pagehead.row:after{flex-basis:100%}
.pagehead h1{font-family:Georgia,'Times New Roman',serif;color:var(--cream)}
h2{color:var(--cream)}
.lead{color:#e3cfcc}
/* cards in burgundy, frame-black edges */
.panel{background:linear-gradient(150deg,#2b1a22,#1d1318 85%);border-color:#6e435266}
.panel:hover{border-color:#e8858e66}
.tile{background:linear-gradient(135deg,#5a2d3d,#2a1820 80%);border-color:#8f4f6366}
.tile:after{border-color:#e8858e26;box-shadow:0 0 0 23px #e8858e08}
.tile .v,.tile:nth-child(3n+2) .v,.tile:nth-child(3n+3) .v{color:var(--cream)}
.tile .k,.tile .n{color:#e0c4c4}
th{background:#331f28;color:#e9cfcf}td{border-color:#4d2f3b}tbody tr:hover td{background:#e8858e14}.tscroll{border-color:#6e4352}
.btn.primary{background:linear-gradient(115deg,#f2a0a6,#d9707c);border-color:#f2a0a6;color:#2a0c12;box-shadow:0 8px 24px #d9707c33}
.btn.gold{background:linear-gradient(110deg,#fbefdc,#e8cfae);border-color:#e8cfae;color:#2a1810}
.chip{background:#3a2430;border-color:#6e4352;color:var(--cream)}.chip.none{background:#26171e;border-color:#4d2f3b;color:#e3cfcc}
input,select,textarea{background:#26171e;border-color:#6e4352;color:var(--cream)}input:focus,select:focus,textarea:focus{background:#30202a;border-color:var(--stripe)}
.subtabs{background:#2b1a22;border-color:#6e4352}.subtabs button[aria-current="page"]{background:linear-gradient(115deg,#f2a0a6,#d9707c);color:#2a0c12}
.bin.on{background:linear-gradient(180deg,#5a2d3d,#2a1820 85%);border-color:#e8858e88}.bin .stub{border-top-color:#e8858e88}.meter b{background:var(--stripe)}
.bottomnav{background:#1a0f15fa;border-color:#6e4352}.bottomnav button[aria-current="page"]{color:var(--stripe)}.bottomnav button[aria-current="page"]::before{background:var(--stripe)}
/* sign-in: the storefront sign, graded */
.login-hero{background:linear-gradient(100deg,#120c10e6,#2a152099 60%,#12090e66),url('storefront.jpg') center 55%/cover}
.login-brandmark{color:var(--cream)}.login-brandmark em{color:var(--stripe)}
.ticket{border-color:#e8858e99;background:#12090e99}
.userbtn,.pinpad button{background:#2e1d25;border-color:#6e4352;color:var(--cream)}.pinpad button:hover{background:#5a2d3d}
.pindots i{border-color:var(--stripe)}.pindots i.f{background:var(--stripe)}
@media(min-width:981px){.content:has(.pagehead)>.pagehead:first-child{background:linear-gradient(90deg,#120c10f0 0%,#2a1520d9 55%,#12090e55),url('storefront.jpg') center 58%/cover;border-color:#8f4f6399}}
@media(max-width:980px){.content>.pagehead:first-child{background:linear-gradient(90deg,#120c10ee,#2a1520bb),url('storefront.jpg') center 58%/cover;border-color:#6e4352}}
/* sync status chip and full-screen progress */
.chip.sync{cursor:pointer;font:inherit;font-size:12.5px;font-weight:600}
.chip.sync::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;opacity:.85}
.chip.sync.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 50%,transparent);background:var(--good-soft)}
.chip.sync.busy{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.chip.sync.off{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 55%,transparent);background:var(--warn-soft)}
.chip.sync.none{color:var(--muted)}
.meter.big{height:10px;border-radius:6px;margin-top:8px}
.login.setup{max-width:520px}
.login.setup .field input:not(.small){width:100%}
@media(max-width:640px){#syncchip{font-size:10.5px;padding:4px 8px}}