/* Shreemant Apna Bazar — storefront. Blinkit-style shopping flow, built on Apple HIG principles:
   clarity (type hierarchy, whitespace), deference (content first, one accent), depth (translucent bars, sheets that
   push the page back), 44pt touch targets, system colours for light + dark, safe areas, reduced motion. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Inter", system-ui, sans-serif;
  --bg: #F2F2F7; --surface: #FFFFFF; --tile: #FFFFFF;
  --label: #000000; --label-2: rgba(60,60,67,.66); --label-3: rgba(60,60,67,.36);
  --sep: rgba(60,60,67,.14); --fill: rgba(120,120,128,.12); --fill-2: rgba(120,120,128,.2);
  --accent: #1B8A3B; --accent-weak: rgba(27,138,59,.12); --on-accent: #FFFFFF;
  --danger: #D70015; --amber: #9A5B00;
  --bar: rgba(249,249,249,.8); --scrim: rgba(0,0,0,.38);
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --r-card: 18px; --r-ctl: 12px;
  --ease: cubic-bezier(.32,.72,0,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #1C1C1E;
    --label: #FFFFFF; --label-2: rgba(235,235,245,.64); --label-3: rgba(235,235,245,.34);
    --sep: rgba(84,84,88,.55); --fill: rgba(120,120,128,.24); --fill-2: rgba(120,120,128,.36);
    --accent: #30D158; --accent-weak: rgba(48,209,88,.16); --on-accent: #04210D;
    --danger: #FF453A; --amber: #FFB340;
    --bar: rgba(28,28,30,.76); --scrim: rgba(0,0,0,.6); --shadow: 0 0 0 .5px rgba(255,255,255,.07);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #1C1C1E;
  --label: #FFFFFF; --label-2: rgba(235,235,245,.64); --label-3: rgba(235,235,245,.34);
  --sep: rgba(84,84,88,.55); --fill: rgba(120,120,128,.24); --fill-2: rgba(120,120,128,.36);
  --accent: #30D158; --accent-weak: rgba(48,209,88,.16); --on-accent: #04210D;
  --danger: #FF453A; --amber: #FFB340;
  --bar: rgba(28,28,30,.76); --scrim: rgba(0,0,0,.6); --shadow: 0 0 0 .5px rgba(255,255,255,.07);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--label); font: 15px/1.35 var(--font); letter-spacing: -.01em;
       -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* page shell — pushed back (scale + round) while a sheet is open, like an iOS card presentation */
#page { max-width: 600px; margin: 0 auto; min-height: 100vh; padding-bottom: 120px; background: var(--bg);
        transform-origin: 50% 0; transition: transform .5s var(--ease), border-radius .5s var(--ease), filter .5s var(--ease); }
body.sheet-open #page { transform: scale(.955) translateY(6px); border-radius: 14px; overflow: hidden; filter: brightness(.9); }

/* top bar: translucent material */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bar);
       -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
       border-bottom: .5px solid var(--sep); padding: 12px 16px 10px; }
.eta { margin: 0; font-size: 24px; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; }
.where { display: flex; align-items: center; gap: 4px; margin: 3px 0 10px; font-size: 13px; color: var(--label-2); min-height: 20px; }
.where b { color: var(--label); font-weight: 600; }
.search { width: 100%; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r-ctl);
          background: var(--fill); color: var(--label-2); text-align: left; font-size: 16px; }
.search .ph { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* generic bits */
.sec { padding: 22px 0 0; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px 10px; }
.sec-h h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.link { color: var(--accent); font-weight: 600; font-size: 14px; min-height: 32px; padding: 0 2px; }

/* banners */
.banners { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 16px 4px; scrollbar-width: none; }
.banners::-webkit-scrollbar, .rail::-webkit-scrollbar { display: none; }
.banner { flex: 0 0 min(86%, 340px); scroll-snap-align: center; border-radius: 22px; padding: 18px; min-height: 132px; color: #fff;
          display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.banner b { font-size: 21px; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; }
.banner span { font-size: 13px; opacity: .88; }
.b1 { background: linear-gradient(135deg, #249947, #0B5B28); }
.b2 { background: linear-gradient(135deg, #3A3A3C, #1C1C1E); }
.b3 { background: linear-gradient(135deg, #C9791B, #8F4A08); }

/* category tiles */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; padding: 0 16px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.cat .pic { width: 100%; aspect-ratio: 1; border-radius: 18px; background: var(--surface); display: grid; place-items: center; overflow: hidden; box-shadow: var(--shadow); }
.cat .pic img { width: 82%; height: 82%; object-fit: contain; }
.cat span { font-size: 12px; line-height: 1.15; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* product cards */
.rail { display: flex; gap: 10px; overflow-x: auto; padding: 2px 16px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
.rail .card { flex: 0 0 152px; scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px; }
.card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 10px; background: var(--surface);
        border-radius: var(--r-card); box-shadow: var(--shadow); min-width: 0; content-visibility: auto; contain-intrinsic-size: 260px; }
.card .img { position: relative; aspect-ratio: 1; border-radius: 12px; background: var(--tile); display: grid; place-items: center; overflow: hidden; }
.card .img img { width: 100%; height: 100%; object-fit: contain; }
.ph-img { display: grid; place-items: center; gap: 2px; width: 100%; height: 100%; background: var(--fill); color: var(--label-2); text-align: center; padding: 8px; }
.ph-img b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.ph-img small { font-size: 10px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.off { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 8px; background: var(--accent); color: var(--on-accent);
       font-size: 10.5px; font-weight: 800; letter-spacing: 0; }
.inb { position: absolute; right: 6px; top: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--label); color: var(--bg);
       font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.card .nm { margin: 0 2px; font-size: 13px; line-height: 1.22; font-weight: 600; min-height: 3.2em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin: 0 2px; }
.pr { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pr b { font-size: 15px; font-weight: 700; }
.pr s { font-size: 12px; color: var(--label-2); }
.pr small { font-size: 11px; color: var(--label-2); }

/* controls */
.add { height: 34px; min-width: 70px; padding: 0 14px; border-radius: 10px; background: var(--accent-weak); color: var(--accent); font-weight: 700; font-size: 14px; position: relative; flex: none; }
.add::after, .stp button::after { content: ""; position: absolute; inset: -6px; }
.add:active, .stp button:active, .cta:active, .chip:active { transform: scale(.96); }
.add, .stp button, .cta, .chip { transition: transform .18s var(--ease), background .2s; }
.stp { display: inline-flex; align-items: center; height: 34px; border-radius: 10px; background: var(--accent); color: var(--on-accent); flex: none; }
.stp button { position: relative; width: 32px; height: 34px; display: grid; place-items: center; font-size: 18px; font-weight: 700; }
.stp span { min-width: 22px; text-align: center; font-weight: 700; font-size: 14px; }
.stp.lg { height: 36px; } .stp.lg button { height: 36px; }
.cta { width: 100%; height: 52px; border-radius: 16px; background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cta[disabled] { background: var(--fill-2); color: var(--label-3); cursor: not-allowed; }
.chip { height: 36px; padding: 0 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); font-size: 14px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }

/* floating cart bar */
.cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; pointer-events: none;
           padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateY(140%); transition: transform .55s var(--ease); }
.cartbar.on { transform: none; }
.cartbar button { pointer-events: auto; width: 100%; max-width: 568px; height: 56px; padding: 0 8px 0 10px; border-radius: 28px; background: var(--accent); color: var(--on-accent);
                  display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.28); text-align: left; }
.stack { display: flex; padding-left: 6px; }
.stack i { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); margin-left: -8px; overflow: hidden; display: grid; place-items: center; font-style: normal; font-size: 11px; color: #333; font-weight: 700; }
.stack img { width: 100%; height: 100%; object-fit: contain; }
.cartbar .t { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cartbar .t b { font-size: 16px; font-weight: 700; } .cartbar .t small { font-size: 12px; opacity: .85; }
.cartbar .go { display: flex; align-items: center; gap: 2px; font-weight: 700; padding-right: 10px; }

/* category page */
.cathead { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px 8px; }
.cathead h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.025em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icb { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; color: var(--accent); font-size: 18px; }
.split { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: start; }
.sidebar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 58px); height: calc(100vh - 70px); overflow-y: auto; background: var(--surface); border-right: .5px solid var(--sep); scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.sidebar button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 10px 4px; font-size: 11px; line-height: 1.1; text-align: center; color: var(--label-2); border-left: 3px solid transparent; }
.sidebar button .sm { width: 46px; height: 46px; border-radius: 14px; background: var(--fill); display: grid; place-items: center; overflow: hidden; }
.sidebar button .sm img { width: 86%; height: 86%; object-fit: contain; }
.sidebar button[aria-current="true"] { color: var(--label); font-weight: 700; border-left-color: var(--accent); background: var(--accent-weak); }
.split .grid { padding: 10px 12px; }
.count { padding: 12px 14px 0; font-size: 13px; color: var(--label-2); }
.empty { padding: 60px 32px; text-align: center; color: var(--label-2); }
.empty b { display: block; font-size: 18px; color: var(--label); margin-bottom: 4px; }
.sentinel { height: 1px; }

/* search page */
.sbar { display: flex; align-items: center; gap: 4px; padding: 6px 12px 10px 4px; }
.sbar label { flex: 1; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r-ctl); background: var(--fill); }
.sbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 17px; }
.clear { width: 22px; height: 22px; border-radius: 11px; background: var(--label-3); color: var(--bg); display: grid; place-items: center; font-size: 12px; }

/* sheets */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0 auto; width: 100%; max-width: 600px; max-height: calc(100% - 18px); display: flex; flex-direction: column;
         background: var(--bg); border-radius: 22px 22px 0 0; transform: translateY(105%); transition: transform .55s var(--ease); box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
.sheet.on { transform: none; }
.sheet.drag { transition: none; }
.grab { flex: none; padding: 8px 0 4px; display: grid; place-items: center; touch-action: none; cursor: grab; }
.grab::before { content: ""; width: 38px; height: 5px; border-radius: 3px; background: var(--fill-2); }
.sh-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 2px 16px 10px; touch-action: none; }
.sh-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.x { width: 32px; height: 32px; border-radius: 16px; background: var(--fill-2); color: var(--label-2); display: grid; place-items: center; position: relative; }
.x::after { content: ""; position: absolute; inset: -6px; }
.sh-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.sh-foot { flex: none; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bar); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: .5px solid var(--sep); }
.group { background: var(--surface); border-radius: var(--r-card); overflow: hidden; }
.group > * + * { border-top: .5px solid var(--sep); }
.line { display: flex; align-items: center; gap: 12px; padding: 12px; }
.line .th { width: 56px; height: 56px; border-radius: 12px; background: var(--tile); flex: none; overflow: hidden; display: grid; place-items: center; }
.line .th img { width: 100%; height: 100%; object-fit: contain; }
.line .th .ph-img b { font-size: 18px; }
.line .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.line .tx b { font-size: 14px; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line .tx small { color: var(--label-2); font-size: 12px; }
.line .tx .low { color: var(--amber); font-weight: 600; }
.line .pr { align-items: flex-end; }
.hero-img { width: min(62%, 240px); aspect-ratio: 1; margin: 0 auto; border-radius: 18px; background: var(--tile); overflow: hidden; display: grid; place-items: center; }
.hero-img img { width: 100%; height: 100%; object-fit: contain; }
.pname { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; text-align: center; }
.brand { text-align: center; color: var(--label-2); font-size: 13px; margin-top: -8px; }
.bill { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.bill div { display: flex; justify-content: space-between; gap: 12px; }
.bill .tot { font-weight: 800; font-size: 16px; padding-top: 8px; border-top: .5px solid var(--sep); }
.bill .sv { color: var(--accent); font-weight: 600; }
.note { padding: 12px 14px; font-size: 13px; color: var(--label-2); }
.prog { height: 6px; border-radius: 3px; background: var(--fill-2); overflow: hidden; margin-top: 8px; }
.prog i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .5s var(--ease); }
.field { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; }
.field label { font-size: 12px; color: var(--label-2); font-weight: 500; }
.field input, .field textarea { border: 0; outline: 0; background: none; font-size: 17px; padding: 2px 0; resize: none; width: 100%; }
.field .err { font-size: 12px; color: var(--danger); min-height: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 10px; background: var(--fill); margin: 10px 14px; }
.seg button { height: 34px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--label-2); transition: background .25s var(--ease), color .25s; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--label); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.demo { font-size: 12px; text-align: center; color: var(--amber); padding: 0 8px; }
.ok { display: grid; place-items: center; gap: 10px; padding: 18px 8px 4px; text-align: center; }
.ok h3 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.ok p { margin: 0; color: var(--label-2); }
.tick { width: 76px; height: 76px; }
.tick circle { fill: var(--accent); }
.tick path { fill: none; stroke: var(--on-accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .6s .25s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); z-index: 60; transform: translate(-50%, 20px); opacity: 0; padding: 10px 16px; border-radius: 20px;
         background: var(--label); color: var(--bg); font-size: 14px; font-weight: 500; transition: transform .4s var(--ease), opacity .3s; pointer-events: none; max-width: 90%; text-align: center; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.proto { margin: 18px 16px 0; padding: 10px 12px; border-radius: 12px; background: var(--fill); font-size: 12px; color: var(--label-2); text-align: center; }

@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cats { grid-template-columns: repeat(6, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  body.sheet-open #page { transform: none; filter: none; }
}

[hidden] { display: none !important; }
.split .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet:focus { outline: none; }

/* festival effects + store closed strip */
#fx { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
body.is-admin #fx { display: none; }
.grn { color: var(--accent); font-weight: 600; }
.closed { padding: 10px 16px; font-size: 13px; background: rgba(255,159,10,.16); color: var(--amber); }
.lights { position: absolute; left: 0; right: 0; top: 0; height: 10px; display: flex; justify-content: space-around; padding-top: 2px; pointer-events: none; }
.lights i { width: 6px; height: 6px; border-radius: 50%; background: #FFC83D; box-shadow: 0 0 8px 1px currentColor; color: #FFC83D; animation: tw 1.5s ease-in-out infinite alternate; }
.lights i:nth-child(4n+2) { background: #FF9F0A; color: #FF9F0A; animation-delay: .3s; }
.lights i:nth-child(4n+3) { background: #FF453A; color: #FF453A; animation-delay: .6s; }
.lights i:nth-child(4n) { background: #30D158; color: #30D158; animation-delay: .9s; }
body[data-fest="diwali"] .lights i:nth-child(4n+3), body[data-fest="diwali"] .lights i:nth-child(4n) { background: #FFC83D; color: #FFC83D; }
@keyframes tw { from { opacity: .35; transform: scale(.85); } to { opacity: 1; transform: scale(1.15); } }
.f-diwali { background: linear-gradient(135deg, #FF9F0A, #A82E08); }
.f-holi { background: linear-gradient(135deg, #FF2D87, #0A84FF); }
.f-rakhi { background: linear-gradient(135deg, #FF6B8B, #B3135A); }
.f-christmas { background: linear-gradient(135deg, #C62828, #1B5E20); }
.f-newyear { background: linear-gradient(135deg, #2C2C2E, #0A6FD6); }

/* owner settings page */
.adm { padding: 0 16px 80px; }
.gh { margin: 22px 0 8px; padding: 0 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--label-2); }
.foot { margin: 8px 4px 0; font-size: 12.5px; color: var(--label-2); }
.saved { font-size: 13px; color: var(--label-2); padding-right: 8px; white-space: nowrap; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; min-height: 52px; }
.srow.off { opacity: .45; }
.srow label { font-weight: 500; }
.st b { display: block; font-weight: 600; } .st small { display: block; font-size: 12px; color: var(--label-2); }
.tog { position: relative; width: 51px; height: 31px; border-radius: 16px; background: var(--fill-2); flex: none; transition: background .3s var(--ease); }
.tog::after { content: ""; position: absolute; inset: -7px; }
.tog i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: transform .3s var(--ease); }
.tog[aria-checked="true"] { background: var(--accent); }
.tog[aria-checked="true"] i { transform: translateX(20px); }
.inp { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 10px; border-radius: 10px; background: var(--fill); }
.inp input { width: 72px; border: 0; outline: 0; background: none; text-align: right; font-size: 17px; }
.inp.wide input { width: min(46vw, 230px); text-align: left; }
.inp em { font-style: normal; color: var(--label-2); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.chip.lnk { display: inline-flex; align-items: center; text-decoration: none; color: var(--accent); }
.chips .chip { box-shadow: var(--shadow); }
.where b.grn { color: var(--accent); }

/* order tracking, closed strip, pill */
.closed.round { margin: 0; border-radius: var(--r-card); }
.pill { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: calc(100% - 32px); margin: 10px 16px 0; padding: 10px 14px; border-radius: 14px; background: var(--accent-weak); color: var(--accent); font-size: 14px; text-align: left; }
.pill b { font-weight: 700; }
.tracker { display: flex; flex-direction: column; gap: 0; padding: 4px 2px; }
.tk { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0; color: var(--label-3); font-size: 14px; }
.tk i { width: 14px; height: 14px; border-radius: 50%; background: var(--fill-2); flex: none; z-index: 1; }
.tk::before { content: ""; position: absolute; left: 6px; top: -50%; height: 100%; width: 2px; background: var(--fill-2); }
.tk:first-child::before { display: none; }
.tk.done, .tk.now { color: var(--label); } .tk.done i, .tk.now i { background: var(--accent); } .tk.done::before, .tk.now::before { background: var(--accent); }
.tk.now { font-weight: 700; } .tk.now i { box-shadow: 0 0 0 5px var(--accent-weak); }
.tk-hint { margin: 6px 2px 2px; color: var(--label-2); font-size: 13px; }
.cancelled { display: flex; flex-direction: column; gap: 2px; } .cancelled b { color: var(--danger); } .cancelled span { color: var(--label-2); font-size: 13px; }
.cta.ghost { background: var(--fill); color: var(--danger); }
.chip.lnk.wide { display: flex; justify-content: center; height: 44px; border-radius: 14px; }
.err { color: var(--danger); font-size: 13px; min-height: 0; } .err.center { text-align: center; padding-bottom: 6px; } .err.pad { padding: 10px 16px; }
.link.center { display: block; text-align: center; margin-top: 12px; }
.foot-info { margin: 28px 16px 0; padding: 14px; border-radius: var(--r-card); background: var(--surface); color: var(--label-2); font-size: 13px; line-height: 1.5; text-align: center; }
.ord-b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conf { font-weight: 600; flex: 1; min-width: 140px; }

/* staff app */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: 24px; padding: 28px 22px; box-shadow: var(--shadow); text-align: center; }
.login-card .logo { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 18px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 26px; }
.login-card h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.03em; } .login-card p { margin: 4px 0 18px; color: var(--label-2); }
.login-card form { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.login-card label { font-size: 12px; color: var(--label-2); font-weight: 500; margin-top: 8px; }
.login-card input { height: 48px; padding: 0 14px; border-radius: 12px; border: 0; outline: 0; background: var(--fill); font-size: 17px; }
.login-card input:focus-visible { outline: 2px solid var(--accent); }
.login-card .cta { margin-top: 14px; }
.tabs { display: flex; gap: 4px; margin: 8px 0 0; }
.tabs button { flex: 1; height: 40px; border-radius: 10px; font-weight: 600; color: var(--label-2); }
.tabs button[aria-selected="true"] { background: var(--accent-weak); color: var(--accent); }
.alertbar { display: flex; justify-content: center; padding: 10px 16px 0; font-size: 13px; color: var(--label-2); }
.alertbar.on { color: var(--accent); font-weight: 600; }
.seg2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 10px 16px; padding: 3px; border-radius: 12px; background: var(--fill); }
.seg2 button { height: 40px; border-radius: 9px; font-weight: 600; color: var(--label-2); }
.seg2 button[aria-pressed="true"] { background: var(--surface); color: var(--label); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.seg2 i { font-style: normal; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 12px; }
.ord { margin: 10px 16px; padding: 14px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.ord.st-new { outline: 2px solid var(--danger); }
.ord-h { display: flex; justify-content: space-between; align-items: baseline; } .ord-h b { font-size: 17px; } .ord-h small { color: var(--label-2); }
.chip-s { margin-left: 6px; padding: 2px 8px; border-radius: 8px; background: var(--fill); font-size: 12px; font-weight: 600; }
.ord-c { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.call { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--accent-weak); color: var(--accent); font-weight: 600; text-decoration: none; }
.ord-a { color: var(--label-2); font-size: 14px; } .ord-n { padding: 8px 10px; border-radius: 10px; background: rgba(255,159,10,.14); color: var(--amber); font-size: 13px; }
.pick { list-style: none; margin: 0; padding: 0; } .pick li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: .5px solid var(--sep); }
.pick label { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 44px; }
.pick input { width: 24px; height: 24px; accent-color: var(--accent); flex: none; }
.pick span { display: flex; flex-direction: column; min-width: 0; } .pick span small { color: var(--label-2); font-size: 12px; } .pick span.done { text-decoration: line-through; color: var(--label-3); }
.ord-t { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 8px; border-top: .5px solid var(--sep); font-size: 14px; color: var(--label-2); } .ord-t b { color: var(--label); font-size: 17px; }
.btn { min-height: 48px; padding: 0 16px; border-radius: 14px; background: var(--fill); font-weight: 700; font-size: 15px; }
.btn.primary { background: var(--accent); color: var(--on-accent); flex: 1; } .btn.danger { background: var(--danger); color: #fff; }
.settings-saved { padding: 0 16px; }