/* The café look. Applies only when the store runs in café mode (html[data-mode="cafe"]); a clothing store keeps its own.
   Warm oat paper, white cards, deep green for the one thing to press, apricot for "send", and colour that MEANS
   something: each menu category has its own tint, and each table its state (free, taking the order, in the kitchen,
   ready, late). Poppins (kept on the device), no web fonts, works offline. */
html[data-mode="cafe"] {
  --bg: #f6f1ea; --card: #fff; --ink: #1f1a16; --muted: #7b7068; --line: #ebe3d8; --soft: #f2ece4;
  --green: #1f5a4c; --green-2: #16443a; --green-soft: #e3efe9;
  --apricot: #e0773a; --apricot-2: #c9632a; --apricot-soft: #fdeee3;
  --ok: #2e8b5e; --warn: #c27013; --bad: #c0392b;
  --accent: var(--green); --accent-ink: #fff; --focus: var(--green); --link: var(--green);
  --radius: 14px; --shadow: 0 1px 2px rgba(70, 45, 20, .05), 0 8px 24px rgba(70, 45, 20, .06);
  /* menu categories */
  --bakery: #fbead7; --bakery-ink: #a3561c; --coffee: #efe3d8; --coffee-ink: #6b4430;
  --kitchen: #e1eee0; --kitchen-ink: #2f6b3f; --drinks: #f9e2ea; --drinks-ink: #a23e63; --other: #e5e9f5; --other-ink: #3f4f8c;
  /* table states */
  --s-free: #b9ada1; --s-new: #e3962b; --s-new-bg: #fff4e2; --s-cook: #4f6bd8; --s-cook-bg: #edf0fd;
  --s-ready: #2e8b5e; --s-ready-bg: #e6f4ec; --s-late: #c0392b; --s-late-bg: #fdebe8;
  background: var(--bg);
}
html[data-mode="cafe"] body { background: var(--bg); color: var(--ink); }

/* ---------------------------------------------------------------- header */
html[data-mode="cafe"] .top { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 12px 22px; }
html[data-mode="cafe"] .brand .store { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
html[data-mode="cafe"] .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--green); color: #fff; display: inline-grid; place-items: center; flex: none; }
html[data-mode="cafe"] .mark svg { width: 18px; height: 18px; }
html[data-mode="cafe"] .brand .credit { margin: 3px 0 0 39px; font-family: Inter, "Poppins", sans-serif; font-weight: 800; letter-spacing: -.04em; color: #a59a90; }
html[data-mode="cafe"] .top nav { gap: 4px; }
html[data-mode="cafe"] .nav { padding: 8px 14px; border-radius: 99px; border: 0; color: var(--muted); font-weight: 500; }
html[data-mode="cafe"] .nav:hover { background: var(--soft); color: var(--ink); }
html[data-mode="cafe"] .nav.on { background: var(--green); color: #fff; font-weight: 600; border: 0; }
html[data-mode="cafe"] .pill { border-color: var(--line); background: #fff; }

/* ---------------------------------------------------------------- controls */
html[data-mode="cafe"] input, html[data-mode="cafe"] select, html[data-mode="cafe"] textarea { border-color: #e1d8cc; border-radius: 10px; background: #fff; }
html[data-mode="cafe"] input:focus, html[data-mode="cafe"] select:focus, html[data-mode="cafe"] textarea:focus, html[data-mode="cafe"] button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
html[data-mode="cafe"] .btn { border-radius: 11px; border-color: var(--line); background: #fff; }
html[data-mode="cafe"] .btn:hover:not(:disabled) { border-color: #cfc3b5; }
html[data-mode="cafe"] .btn.primary { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(31, 90, 76, .22); }
html[data-mode="cafe"] .btn.primary:hover:not(:disabled) { background: var(--green-2); border-color: var(--green-2); }
html[data-mode="cafe"] .btn.send { background: var(--apricot); border-color: var(--apricot); box-shadow: 0 6px 16px rgba(224, 119, 58, .28); }
html[data-mode="cafe"] .btn.send:hover:not(:disabled) { background: var(--apricot-2); border-color: var(--apricot-2); }
html[data-mode="cafe"] .btn.send small { font-weight: 500; opacity: .85; font-size: 13px; margin-left: 6px; }
html[data-mode="cafe"] .link { color: var(--green); }
html[data-mode="cafe"] .card, html[data-mode="cafe"] .left, html[data-mode="cafe"] .right-pane { border-color: var(--line); border-radius: 18px; box-shadow: var(--shadow); }
html[data-mode="cafe"] .card.narrow { padding: 28px; }
html[data-mode="cafe"] .sheet { border-radius: 18px; }
html[data-mode="cafe"] .modal { background: rgba(40, 28, 18, .32); }
html[data-mode="cafe"] .toast { background: var(--ink); border-radius: 12px; }
html[data-mode="cafe"] .note { color: var(--ink); background: var(--apricot-soft); border: 1px solid #f3cfb5; border-radius: 12px; padding: 10px 14px; }
html[data-mode="cafe"] .chip2 { border-color: var(--line); border-radius: 99px; background: #fff; }
html[data-mode="cafe"] .chip2.on { border-color: var(--green); background: var(--green); color: #fff; box-shadow: none; }
html[data-mode="cafe"] #whoList .chip2 { padding: 12px 18px; font-size: 14px; }
html[data-mode="cafe"] .tab.on { background: var(--green); border-color: var(--green); }
html[data-mode="cafe"] .tour-on { outline: 2.5px solid var(--apricot) !important; outline-offset: 3px; }
html[data-mode="cafe"] #tourCard .t-primary { background: var(--green); border-color: var(--green); }

/* ---------------------------------------------------------------- the floor */
html[data-mode="cafe"] .floor { max-width: 1240px; }
.fl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 6px 0 14px; }
.fl-head h1 { margin: 0 0 2px; font-size: 28px; letter-spacing: -.03em; }
.fl-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.fk { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 9px 16px; min-width: 128px; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; box-shadow: var(--shadow); }
.fk span { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.fk b { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .fk small { color: var(--muted); font-size: 12px; }
.fk.bad b { color: var(--s-late); }
.legend { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; }
.lg b { color: var(--ink); }
.lg i, .tc-st i, .spill i, .tchips .chip2 i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--s-free); flex: none; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tcard { position: relative; text-align: left; cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px 15px; min-height: 150px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s; overflow: hidden; font: inherit; color: inherit; }
.tcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--s-free); opacity: .5; }
.tcard:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(70, 45, 20, .06), 0 14px 30px rgba(70, 45, 20, .1); }
.tcard:active { transform: scale(.985); }
.tc-top { display: flex; justify-content: space-between; align-items: baseline; }
.tc-top b { font-size: 24px; letter-spacing: -.03em; }
.tcard.take .tc-top b { font-size: 19px; }
.tc-min { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--soft); border-radius: 99px; padding: 2px 9px; }
.tc-st { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.tc-amt { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-top: auto; font-variant-numeric: tabular-nums; }
.tc-sub { font-size: 12.5px; color: var(--muted); }
.tcard.st-free { background: repeating-linear-gradient(135deg, #fff, #fff 10px, #fcfaf7 10px, #fcfaf7 20px); }
.tcard.st-free .tc-st { color: var(--muted); font-weight: 500; }
.tcard.take { border-style: dashed; }
.st-new { --s: var(--s-new); --sb: var(--s-new-bg); } .st-cooking { --s: var(--s-cook); --sb: var(--s-cook-bg); }
.st-ready { --s: var(--s-ready); --sb: var(--s-ready-bg); } .st-late { --s: var(--s-late); --sb: var(--s-late-bg); }
.tcard.st-new, .tcard.st-cooking, .tcard.st-ready, .tcard.st-late { background: linear-gradient(180deg, var(--sb), #fff 70%); border-color: color-mix(in srgb, var(--s) 25%, var(--line)); }
.tcard.st-new::before, .tcard.st-cooking::before, .tcard.st-ready::before, .tcard.st-late::before { background: var(--s); opacity: 1; }
.st-new i, .st-cooking i, .st-ready i, .st-late i { background: var(--s) !important; }
.tcard[class*="st-"]:not(.st-free) .tc-st { color: var(--s); }
.tcard.st-late .tc-min { background: var(--s-late); color: #fff; animation: latePulse 1.6s ease-in-out infinite; }
.lg.st-new i { background: var(--s-new); } .lg.st-cooking i { background: var(--s-cook); } .lg.st-ready i { background: var(--s-ready); } .lg.st-late i { background: var(--s-late); }
@keyframes latePulse { 50% { opacity: .55; } }

/* ---------------------------------------------------------------- the order screen */
html[data-mode="cafe"] .sell.cafe { grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; }
html[data-mode="cafe"] .cafe .left { padding: 16px 18px 22px; }
.catbar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; margin-bottom: 4px; position: sticky; top: var(--top-h, 62px); z-index: 5; background: linear-gradient(#fff 82%, rgba(255, 255, 255, 0)); scrollbar-width: none; }
.catbar::-webkit-scrollbar { display: none; }
.cb { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 8px 15px 8px 12px; min-height: 40px; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; color: var(--ink); }
.cb svg { width: 18px; height: 18px; }
.cb:first-child { padding-left: 16px; }
.cb.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.k-bakery { --t: var(--bakery); --ti: var(--bakery-ink); } .k-coffee { --t: var(--coffee); --ti: var(--coffee-ink); } .k-kitchen { --t: var(--kitchen); --ti: var(--kitchen-ink); }
.k-drinks { --t: var(--drinks); --ti: var(--drinks-ink); } .k-other { --t: var(--other); --ti: var(--other-ink); }
.cb[class*="k-"] svg { color: var(--ti); } .cb.on[class*="k-"] { background: var(--ti); border-color: var(--ti); } .cb.on svg { color: #fff; }
html[data-mode="cafe"] .cafe .left h3.cat { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; font-size: 12px; font-weight: 600; color: var(--ti, var(--muted)); letter-spacing: .08em; }
html[data-mode="cafe"] .cafe .left h3.cat::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--ti); }
html[data-mode="cafe"] .cafe .left h3.cat:first-of-type { margin-top: 2px; }
html[data-mode="cafe"] .tiles.menu { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
html[data-mode="cafe"] .cafe .tile { background: var(--t, #fff); border: 1px solid transparent; border-radius: 16px; padding: 12px 13px 12px; min-height: 112px; gap: 2px; font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--ink); transition: transform .1s, box-shadow .12s; }
html[data-mode="cafe"] .cafe .tile:hover:not(:disabled) { box-shadow: 0 6px 16px rgba(70, 45, 20, .1); transform: translateY(-1px); }
html[data-mode="cafe"] .cafe .tile:active:not(:disabled) { transform: scale(.97); }
html[data-mode="cafe"] .cafe .tile .ti-ic { width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, .7); color: var(--ti); display: grid; place-items: center; margin-bottom: 6px; }
html[data-mode="cafe"] .cafe .tile .ti-ic svg { width: 19px; height: 19px; }
html[data-mode="cafe"] .cafe .tile .ti-n { color: var(--ink); font-weight: 600; }
html[data-mode="cafe"] .cafe .tile .ti-p { color: var(--ti); font-weight: 700; margin-top: auto; font-size: 14.5px; }
html[data-mode="cafe"] .cafe .tile em.cnt-left { font-size: 11.5px; color: var(--muted); font-weight: 500; }
html[data-mode="cafe"] .cafe .tile em.cnt-left.low { color: var(--bad); font-weight: 600; }
html[data-mode="cafe"] .cafe .tile.out { opacity: .5; text-decoration: none; filter: grayscale(.7); }
html[data-mode="cafe"] .cafe .tile.out .ti-n { text-decoration: line-through; }
html[data-mode="cafe"] .cafe .tile.has { border-color: var(--ti); box-shadow: inset 0 0 0 1px var(--ti); }
html[data-mode="cafe"] .cafe .tile .ti-q { position: absolute; top: 10px; right: 10px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 99px; background: var(--ti); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.tile.pop { animation: tilePop .28s ease-out; }
@keyframes tilePop { 40% { transform: scale(1.05); } }

html[data-mode="cafe"] .cafe .right-pane { padding: 18px; gap: 12px; top: 74px; }
.tp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tp-l { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tp-t { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.spill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 99px; background: var(--soft); color: var(--muted); text-align: right; }
.spill.st-new, .spill.st-cooking, .spill.st-ready, .spill.st-late { background: var(--sb); color: var(--s); }
html[data-mode="cafe"] .tchips { gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
html[data-mode="cafe"] .tchips .chip2 { min-height: 34px; padding: 5px 12px; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; flex-direction: row-reverse; }
html[data-mode="cafe"] .tchips .chip2 i { position: static; width: 7px; height: 7px; }
html[data-mode="cafe"] .tchips .chip2.on i { box-shadow: 0 0 0 2px #fff; }
html[data-mode="cafe"] .olist { min-height: 150px; }
html[data-mode="cafe"] .olist li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
html[data-mode="cafe"] .olist li.og { border: 0; padding: 4px 0 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
html[data-mode="cafe"] .olist li.og-new { color: var(--apricot-2); }
html[data-mode="cafe"] .olist li.og + li { border-top: 0; }
html[data-mode="cafe"] .olist li.new { background: var(--apricot-soft); margin: 2px -10px; padding: 9px 10px; border-radius: 12px; border-bottom: 0; }
html[data-mode="cafe"] .olist li.new + li.og { margin-top: 10px; }
html[data-mode="cafe"] .olist .q { width: 30px; height: 30px; border-radius: 99px; border-color: #ecc8ad; background: #fff; }
html[data-mode="cafe"] .olist .st { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--s-cook-bg); color: var(--s-cook); }
html[data-mode="cafe"] .olist .st.ok { background: var(--s-ready-bg); color: var(--s-ready); }
html[data-mode="cafe"] .olist .st.late { background: var(--s-late-bg); color: var(--s-late); }
html[data-mode="cafe"] .olist small.hh { color: var(--apricot-2); font-weight: 600; }
.o-empty { flex-direction: column; justify-content: center; text-align: center; gap: 4px !important; border: 0 !important; padding: 26px 0 !important; }
.oe-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; margin-bottom: 6px; }
.oe-ic svg { width: 28px; height: 28px; }
html[data-mode="cafe"] .cafe .grand { border-top: 1px dashed #d9cdbf; font-size: 26px; padding-top: 12px; }
html[data-mode="cafe"] .cafe .pay { min-height: 60px; font-size: 18px; border-radius: 14px; }
html[data-mode="cafe"] .tools { justify-content: center; gap: 18px; }

/* ---------------------------------------------------------------- the kitchen screen: dark, big, readable from a step away */
html[data-mode="cafe"] body[data-screen="kitchen"] { background: #17140f; min-height: 100vh; }
html[data-mode="cafe"]:has(body[data-screen="kitchen"]) { background: #17140f; }
html[data-mode="cafe"] body[data-screen="kitchen"] .top { background: #201c16; border-bottom-color: #2e2820; color: #f3ece2; }
html[data-mode="cafe"] body[data-screen="kitchen"] .nav { color: #a99d8f; } html[data-mode="cafe"] body[data-screen="kitchen"] .nav:hover { background: #2c261e; color: #fff; }
html[data-mode="cafe"] body[data-screen="kitchen"] .pill, html[data-mode="cafe"] body[data-screen="kitchen"] .top .btn { background: #2a241c; border-color: #3a3228; color: #e9e1d6; }
html[data-mode="cafe"] body[data-screen="kitchen"] .who { color: #a99d8f; }
html[data-mode="cafe"] .kitchen { max-width: 1500px; color: #f3ece2; }
html[data-mode="cafe"] body[data-screen="kitchen"] .note { background: #3a2a12; color: #ffd9a8; border-color: #8a5a1c; }
.k-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
.k-head h1 { margin: 0; font-size: 28px; color: #fff; letter-spacing: -.03em; }
.k-sum { color: #a99d8f; } .k-sum b { color: #fff; } .k-sum b.bad { color: #ff7a66; }
html[data-mode="cafe"] .kitchen .chip2 { background: #2a241c; border-color: #3a3228; color: #e9e1d6; }
html[data-mode="cafe"] .kitchen .chip2.on { background: var(--apricot); border-color: var(--apricot); color: #fff; }
html[data-mode="cafe"] .kitchen .cnt { background: #221d17; border-color: #3a3228; color: #d8cfc3; padding: 6px 13px; }
html[data-mode="cafe"] .kitchen .cnt b { color: #fff; }
html[data-mode="cafe"] .kitchen .cnt.low { border-color: #8a5a1c; color: #ffc27a; } html[data-mode="cafe"] .kitchen .cnt.out { border-color: #7a2f26; color: #ff8f80; }
html[data-mode="cafe"] .tickets { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
html[data-mode="cafe"] .ticket { display: flex; flex-direction: column; background: #fffaf3; color: var(--ink); border: 0; border-radius: 16px; padding: 0 0 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
html[data-mode="cafe"] .ticket .t-h { padding: 12px 16px; margin: 0 0 8px; font-size: 22px; color: #fff; background: var(--s-cook); }
html[data-mode="cafe"] .ticket .t-h span { color: #fff; font-size: 14px; font-weight: 700; background: rgba(0, 0, 0, .18); border-radius: 99px; padding: 2px 10px; }
html[data-mode="cafe"] .ticket.mid .t-h { background: #c98a1a; }
html[data-mode="cafe"] .ticket.slow { box-shadow: 0 0 0 3px var(--s-late), 0 10px 30px rgba(0, 0, 0, .35); }
html[data-mode="cafe"] .ticket.slow .t-h { background: var(--s-late); }
html[data-mode="cafe"] .ticket.slow .t-h span { animation: latePulse 1.6s ease-in-out infinite; color: #fff; }
html[data-mode="cafe"] .ticket ul { padding: 0 16px; font-size: 17px; }
html[data-mode="cafe"] .ticket li { padding: 6px 0; border-bottom: 1px dashed #e7dccd; } html[data-mode="cafe"] .ticket li:last-child { border-bottom: 0; }
html[data-mode="cafe"] .ticket li small { display: inline-block; color: #8a3f12; background: #fde3cf; border-radius: 6px; padding: 1px 7px; font-weight: 700; font-size: 15px; }
html[data-mode="cafe"] .ticket .btn { width: calc(100% - 32px); margin: auto 16px 0; min-height: 52px; font-size: 16px; }
.k-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 70px 16px; color: #a99d8f; text-align: center; }
.k-empty svg { width: 54px; height: 54px; color: #5f8f7f; } .k-empty b { color: #fff; font-size: 18px; }

/* ---------------------------------------------------------------- back office: a side menu in groups */
html[data-mode="cafe"] .top nav.side { position: fixed; top: 64px; left: 0; bottom: 0; width: 228px; flex-direction: column; flex-wrap: nowrap; gap: 1px; padding: 16px 12px 40px; background: #fbf8f4; border-right: 1px solid var(--line); overflow-y: auto; }
html[data-mode="cafe"] nav.side .grp { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #a59a90; font-weight: 600; padding: 14px 12px 6px; }
html[data-mode="cafe"] nav.side .grp:first-child { padding-top: 2px; }
html[data-mode="cafe"] nav.side .nav { border-radius: 10px; padding: 8px 12px; font-size: 13.5px; display: flex; align-items: center; gap: 9px; }
html[data-mode="cafe"] nav.side .nav::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #d8cdc0; flex: none; }
html[data-mode="cafe"] nav.side .nav.on::before { background: #fff; }
html[data-mode="cafe"] body.side-on #main { margin-left: 228px; padding: 24px 28px 60px; }
html[data-mode="cafe"] body.side-on .top { position: sticky; height: 64px; flex-wrap: nowrap; backdrop-filter: none; background: #fff; } /* a backdrop filter would trap the fixed side menu inside the header */
html[data-mode="cafe"] .kpi { border-radius: 16px; border-color: var(--line); position: relative; overflow: hidden; }
html[data-mode="cafe"] .kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--green); }
html[data-mode="cafe"] .kpi .k { letter-spacing: .06em; font-size: 11px; }
html[data-mode="cafe"] .bars .fill { background: #cfe3da; border-radius: 6px 6px 2px 2px; }
html[data-mode="cafe"] .bars .b.today .fill { background: var(--green); }
html[data-mode="cafe"] .tabs2 button.on, html[data-mode="cafe"] .anq button.on { background: var(--green); border-color: var(--green); }
html[data-mode="cafe"] .abar span { background: var(--green); }
html[data-mode="cafe"] .tag.ok { background: var(--green-soft); color: var(--green); border-color: transparent; }
html[data-mode="cafe"] th { color: #9a8f85; }
html[data-mode="cafe"] tr.click:hover td { background: #fbf7f2; }
html[data-mode="cafe"] .page > .head h1, html[data-mode="cafe"] .page > h1 { font-size: 26px; letter-spacing: -.03em; }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 1100px) { html[data-mode="cafe"] .sell.cafe { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 900px) {
  html[data-mode="cafe"] .top nav.side { position: static; width: auto; flex-direction: row; overflow-x: auto; padding: 4px 0; background: none; border: 0; order: 3; flex-basis: 100%; }
  html[data-mode="cafe"] nav.side .grp { display: none; } html[data-mode="cafe"] nav.side .nav::before { display: none; }
  html[data-mode="cafe"] body.side-on #main { margin-left: 0; padding: 16px; }
  html[data-mode="cafe"] body.side-on .top { height: auto; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  html[data-mode="cafe"] .sell.cafe { grid-template-columns: 1fr; }
  html[data-mode="cafe"] .cafe .right-pane { position: static; }
  html[data-mode="cafe"] .tiles.menu { grid-template-columns: repeat(2, 1fr); }
  .tgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .tcard { min-height: 132px; padding: 13px 14px; }
  .tc-top b { font-size: 20px; } .tc-amt { font-size: 18px; }
  .fl-kpis { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .fk { min-width: 0; padding: 8px 10px; } .fk b { font-size: 17px; } .fk span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .catbar { top: 0; }
  html[data-mode="cafe"] .top, html[data-mode="cafe"] body.side-on .top { position: static; }
  .fk small { display: inline; font-size: 12px; margin-left: 3px; } .fk small.help { display: none; }
  html[data-mode="cafe"] .top nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  html[data-mode="cafe"] .sell.cafe { padding-bottom: 76px; }
  html[data-mode="cafe"] .brand .credit { margin-left: 39px; }
}
@media (prefers-reduced-motion: reduce) { .tile.pop, .tcard.st-late .tc-min, html[data-mode="cafe"] .ticket.slow .t-h span { animation: none; } .tcard, html[data-mode="cafe"] .cafe .tile { transition: none; } }

/* ---------------------------------------------------------------- the welcome page */
html[data-mode="cafe"] .l-store { display: flex !important; align-items: center; gap: 10px; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.02em; }
html[data-mode="cafe"] .wrap h1 { font-size: 38px !important; letter-spacing: -.04em; line-height: 1.1; }
html[data-mode="cafe"] .choice { border-radius: 20px; padding: 28px; box-shadow: var(--shadow); border-color: var(--line); transition: transform .12s, box-shadow .12s; position: relative; overflow: hidden; }
html[data-mode="cafe"] .choice::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--green); }
html[data-mode="cafe"] .choice + .choice::before { background: var(--apricot); }
html[data-mode="cafe"] .choice:hover { transform: translateY(-2px); border-color: var(--line); box-shadow: 0 14px 34px rgba(70, 45, 20, .12); }
html[data-mode="cafe"] .choice b { font-size: 20px; letter-spacing: -.02em; }

/* phone: what is on the table, always in reach at the bottom of the order screen */
.ph-bar { display: none; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 30; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); border: 0; font: inherit; text-align: left; cursor: pointer; }
.ph-bar b { font-size: 15px; } .ph-bar small { display: block; color: #cfc6bb; font-size: 12px; }
.ph-bar .go { background: var(--apricot); color: #fff; border-radius: 11px; padding: 10px 14px; font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) { html[data-mode="cafe"] .ph-bar { display: flex; } }