/* =========================================================
   Mockup boards: production-fidelity screens for "هيل", a concept
   roastery the studio designed to show what a real delivery looks
   like. Everything is HTML/CSS/SVG, drawn from scratch.

   Scale: 1em on a board = board width / 48, so each board scales as
   one picture. Screens use their own scale roots so type and spacing
   follow real-world proportions:
     .scr   phone screens, 1em = a 17pt body line
     .web   websites,      1em = a 16px body line
     .app   desktop apps,  1em = a 14px UI line
   The finished state is the default; mockups.js rewinds and plays it.
   ========================================================= */

.board {
  --hel-d: #1f3d33;
  --hel: #3e6e52;
  --hel-m: #86a991;
  --hel-l: #e9f0ea;
  --saf: #e2a93b;
  --saf-d: #b9822a;
  --saf-l: #f8edd5;
  --milk: #f6f3ec;
  --u-ink: #15232b;
  --u-mut: #687883;
  --u-faint: #95a3ab;
  --u-line: #e6ebee;
  --u-bg: #f4f6f7;
  --ok: #2f8a55;
  --ok-l: #e3f3e8;
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='white' fill-opacity='.1'%3E%3Cpath d='M5 21c3-8 13-12 21-8-3 8-13 12-21 8z'/%3E%3Cpath d='M25 43c3-8 13-12 21-8-3 8-13 12-21 8z'/%3E%3C/g%3E%3C/svg%3E");
  --pat-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%231f3d33' fill-opacity='.08'%3E%3Cpath d='M5 21c3-8 13-12 21-8-3 8-13 12-21 8z'/%3E%3Cpath d='M25 43c3-8 13-12 21-8-3 8-13 12-21 8z'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-stage);
  background: radial-gradient(120% 95% at 85% 0%, #f7faf7 0%, #e8efe9 52%, #dbe5dd 100%);
}
.board__in {
  position: relative;
  width: 100%;
  aspect-ratio: 48 / 40;
  font-size: calc(100cqw / 48);
  line-height: 1.4;
  color: var(--u-ink);
}
.board--hero .board__in { aspect-ratio: 48 / 42; }
.board p { color: inherit; }
.board i { font-style: normal; }
.board .icon { stroke-width: 2; }
.mk { position: absolute; inset: 0; }
.board .at {
  position: absolute;
  left: calc(var(--x) * 1em);
  top: calc(var(--y) * 1em);
  width: calc(var(--w) * 1em);
  height: calc(var(--h) * 1em);
  rotate: calc(var(--r, 0) * 1deg);
}
.sh { box-shadow: 0 .1em .3em rgb(21 35 43 / .07), 0 1.6em 3em -1.4em rgb(21 35 43 / .38); }
.sh-sm { box-shadow: 0 .08em .2em rgb(21 35 43 / .08), 0 .9em 1.8em -.9em rgb(21 35 43 / .32); }
.card { border-radius: .8em; background: #fff; }
.tap {
  position: absolute;
  z-index: 40;
  width: 2.4em;
  height: 2.4em;
  margin: -1.2em 0 0 -1.2em;
  border-radius: 50%;
  background: rgb(21 35 43 / .2);
  box-shadow: 0 0 0 .22em rgb(255 255 255 / .65);
  opacity: 0;
  pointer-events: none;
}

/* ---------- scale roots ---------- */
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: .54em; line-height: 1.35; }
.web { position: absolute; top: 0; left: 0; right: 0; font-size: .56em; line-height: 1.5; }
.app { position: absolute; inset: 0; font-size: .5em; line-height: 1.45; }

/* ---------- brand ---------- */
.logo { display: inline-flex; align-items: center; gap: .2em; color: var(--hel-d); font-weight: 800; line-height: 1; white-space: nowrap; }
.logo svg { width: 1.3em; height: 1.3em; fill: currentColor; color: var(--logo-mark, var(--hel)); --seam: var(--logo-seam, #fff); }
.logo b { font-size: 1em; font-weight: 800; letter-spacing: -.01em; }
.logo--inv { color: var(--milk); --logo-mark: var(--saf); --logo-seam: var(--hel-d); }
.mark-tile { display: grid; place-items: center; border-radius: 22%; background: var(--hel-d); }
.mark-tile svg { width: 62%; height: 62%; fill: currentColor; color: var(--saf); --seam: var(--hel-d); }
.pat { background-image: var(--pat); background-size: 2.4em 2.4em; }
.pat-dark { background-image: var(--pat-dark); background-size: 2.4em 2.4em; }

/* ---------- devices ---------- */
.phone {
  position: relative;
  width: 100%;
  height: 100%;
  padding: .34em;
  border-radius: 2.3em;
  background: linear-gradient(155deg, #3c4b56, #121c23 55%);
  box-shadow: inset 0 0 0 .07em rgb(255 255 255 / .16), 0 .2em .4em rgb(18 28 35 / .18), 0 2em 3.2em -1.5em rgb(18 28 35 / .55);
}
.phone__screen { position: relative; height: 100%; overflow: hidden; isolation: isolate; border-radius: 1.98em; background: #fff; }
.phone__screen::before { content: ""; position: absolute; top: .46em; left: 50%; z-index: 30; width: 3.3em; height: .96em; translate: -50% 0; border-radius: 1em; background: #0b1117; }
.sb { position: relative; z-index: 29; flex: none; display: flex; align-items: center; justify-content: space-between; height: 3.3em; padding: 0 2.1em; color: var(--u-ink); }
.sb__t { font-size: .92em; font-weight: 700; }
.sb__i { display: flex; align-items: center; gap: .4em; }
.sb__sig { display: flex; align-items: flex-end; gap: .1em; height: .8em; }
.sb__sig i { width: .2em; border-radius: .06em; background: currentColor; }
.sb__sig i:nth-child(1) { height: 35%; }
.sb__sig i:nth-child(2) { height: 55%; }
.sb__sig i:nth-child(3) { height: 78%; }
.sb__sig i:nth-child(4) { height: 100%; }
.sb .icon { width: 1em; height: 1em; stroke-width: 2.6; }
.sb__bat { position: relative; width: 1.6em; height: .78em; border: .11em solid currentColor; border-radius: .26em; opacity: .92; }
.sb__bat::after { content: ""; position: absolute; top: .1em; bottom: .1em; left: .1em; width: 64%; border-radius: .08em; background: currentColor; }
.sb--light { color: #fff; }
.sb--abs { position: absolute; top: 0; left: 0; right: 0; }
.hi { position: absolute; bottom: .55em; left: 50%; z-index: 29; width: 36%; height: .32em; translate: -50% 0; border-radius: 1em; background: var(--u-ink); opacity: .9; }
.hi--light { background: #fff; }

.win { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border-radius: .7em; background: #fff; }
.win__bar { position: relative; flex: none; display: flex; align-items: center; height: 2.1em; padding: 0 .8em; border-bottom: .06em solid #e1e6e9; background: linear-gradient(#f8f9fa, #eef1f3); direction: ltr; }
.win__dots { display: flex; gap: .34em; }
.win__dots i { width: .54em; height: .54em; border-radius: 50%; background: #ff5f57; }
.win__dots i:nth-child(2) { background: #febc2e; }
.win__dots i:nth-child(3) { background: #28c840; }
.win__url { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; gap: .28em; width: 36%; height: 1.32em; translate: -50% -50%; border-radius: .4em; background: #e3e7ea; color: #56636c; }
.win__url .icon { width: .55em; height: .55em; stroke-width: 2.6; }
.win__url span { font-size: .54em; font-weight: 500; letter-spacing: .01em; }
.win__title { position: absolute; left: 50%; translate: -50% 0; color: #4b5861; font-size: .56em; font-weight: 700; white-space: nowrap; direction: rtl; }
.win__body { position: relative; flex: 1; overflow: hidden; direction: rtl; }

/* ---------- product drawings ---------- */
.bag {
  position: relative;
  display: block;
  width: 6em;
  height: 8.6em;
  border-radius: .3em .3em .55em .55em;
  background: linear-gradient(90deg, rgb(0 0 0 / .24), rgb(255 255 255 / .1) 20%, rgb(255 255 255 / .03) 48%, rgb(0 0 0 / .06) 76%, rgb(0 0 0 / .3)), var(--bag, #335f48);
  filter: drop-shadow(0 .55em .45em rgb(0 0 0 / .22));
}
.bag::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .95em; border-radius: .3em .3em 0 0; background: repeating-linear-gradient(90deg, rgb(0 0 0 / .14) 0 .1em, transparent .1em .26em), rgb(0 0 0 / .1); }
.bag::after { content: ""; position: absolute; top: 1.4em; left: 50%; width: .8em; height: .8em; margin-left: -.4em; border-radius: 50%; background: radial-gradient(circle, rgb(0 0 0 / .32) 0 28%, rgb(255 255 255 / .2) 30% 58%, rgb(0 0 0 / .14) 60%); }
.bag__l { position: absolute; left: 11%; right: 11%; top: 32%; bottom: 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12em; padding: .3em; border-radius: .2em; background: var(--milk); color: var(--hel-d); line-height: 1.2; text-align: center; }
.bag__l svg { width: 1.2em; height: 1.2em; margin-bottom: .1em; fill: currentColor; color: var(--hel); --seam: var(--milk); }
.bag__l b { font-size: .7em; font-weight: 800; }
.bag__l small { color: #857762; font-size: .4em; font-weight: 600; }
.bag--green { --bag: #335f48; }
.bag--deep { --bag: #1f3d33; }
.bag--saf { --bag: #d89c33; }
.bag--sand { --bag: #cbb189; }
.bag--ink { --bag: #2b3741; }

.pcup { position: relative; display: block; width: 4.4em; height: 6em; filter: drop-shadow(0 .5em .45em rgb(0 0 0 / .22)); }
.pcup__body { position: absolute; left: 0; right: 0; top: .55em; bottom: 0; clip-path: polygon(3% 0, 97% 0, 85% 100%, 15% 100%); background: linear-gradient(90deg, #d6d2c8, #fbfaf6 32%, #f1eee7 62%, #c9c4b9); }
.pcup__sleeve { position: absolute; left: 9%; right: 9%; top: 2.2em; height: 2.1em; display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, 95.5% 100%, 4.5% 100%); background: linear-gradient(90deg, rgb(0 0 0 / .2), transparent 30%, transparent 70%, rgb(0 0 0 / .22)), var(--hel); }
.pcup__sleeve svg { width: 1.25em; height: 1.25em; fill: currentColor; color: var(--saf); --seam: var(--hel); }
.pcup__lid { position: absolute; left: -5%; right: -5%; top: 0; height: .78em; border-radius: .3em .3em .12em .12em; background: linear-gradient(90deg, #15302a, #2e5a48 40%, #193630); }
.pcup__lid::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -.18em; height: .22em; border-radius: 0 0 .2em .2em; background: #11271f; }

.latte { position: relative; display: block; width: 7em; height: 7em; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fdfdfb 0 58%, #ebe9e4 72%, #d9d6cf 100%); box-shadow: 0 .55em 1em -.2em rgb(0 0 0 / .38); }
.latte::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle at 45% 38%, #fff, #edebe6 72%); box-shadow: 0 .14em .34em rgb(0 0 0 / .22); }
.latte > i { position: absolute; inset: 21%; border-radius: 50%; background: radial-gradient(circle at 50% 52%, #d9a873 0 26%, #a86e3f 52%, #6d4022 82%); }
.latte > svg { position: absolute; inset: 28%; width: 44%; height: 44%; fill: #f7ecdc; }
.latte > b { position: absolute; top: 43%; right: 1.5%; width: 16%; height: 13%; border-radius: .4em; background: linear-gradient(#fdfdfb, #ebe9e4); box-shadow: 0 .1em .2em rgb(0 0 0 / .18); }

.bean { position: absolute; width: 1em; height: .72em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8d5c37, #4a2c17 75%); rotate: var(--br, 0deg); box-shadow: 0 .08em .14em rgb(0 0 0 / .3); }
.bean::after { content: ""; position: absolute; left: 47%; top: 12%; bottom: 12%; width: .08em; border-radius: 1em; background: #2b180b; rotate: 10deg; }
.pod { position: absolute; width: 1.4em; height: .7em; border-radius: 50%; background: linear-gradient(160deg, #abca8c, #5e8b45); rotate: var(--br, 0deg); box-shadow: 0 .08em .16em rgb(0 0 0 / .22); }
.pod::after { content: ""; position: absolute; left: 14%; right: 14%; top: 46%; height: .07em; border-radius: 1em; background: rgb(255 255 255 / .5); }

/* still-life tiles: a small styled "shot" of the products */
.shot { position: relative; overflow: hidden; display: block; }
.shot--slate { background: radial-gradient(110% 90% at 55% 40%, #5c6c75, #2a353d 78%); }
.shot--saf { background: radial-gradient(110% 90% at 50% 30%, #f0c264, #d79a31 80%); }
.shot--green { background: radial-gradient(110% 90% at 50% 30%, #4d8264, #284c3c 80%); }
.shot--milk { background: radial-gradient(110% 90% at 50% 30%, #fbfaf6, #e8e3d8 85%); }
.shot--sage { background: radial-gradient(110% 90% at 50% 30%, #eef3ee, #cfdccf 85%); }
.shot > * { position: absolute; }
.shot .floor { left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(rgb(0 0 0 / .06), rgb(0 0 0 / .14)); }

/* ---------- small UI kit ---------- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35em; height: 2.6em; padding: 0 1.1em; border-radius: .7em; font-size: .86em; font-weight: 700; white-space: nowrap; }
.ui-btn .icon { width: 1.1em; height: 1.1em; }
.ui-btn--brand { background: var(--hel); color: #fff; }
.ui-btn--dark { background: var(--hel-d); color: #fff; }
.ui-btn--saf { background: var(--saf); color: var(--hel-d); }
.ui-btn--ghost { box-shadow: inset 0 0 0 .1em #cdd8d0; color: var(--hel-d); }
.ui-btn--ink { background: var(--u-ink); color: #fff; }
.ui-chip { display: inline-flex; align-items: center; gap: .3em; padding: .2em .65em; border-radius: 1em; background: var(--u-bg); color: var(--u-ink); font-size: .74em; font-weight: 700; white-space: nowrap; }
.ui-chip--ok { background: var(--ok-l); color: var(--ok); }
.ui-chip--saf { background: var(--saf-l); color: #8a5d12; }
.ui-chip--green { background: var(--hel-l); color: var(--hel-d); }
.ui-chip--dark { background: var(--hel-d); color: #fff; }
.ui-chip .icon { width: 1em; height: 1em; stroke-width: 2.6; }
.dot { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.stars { display: inline-block; width: 5em; height: .92em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e2a93b' d='M12 2.6l2.9 6 6.5.9-4.7 4.6 1.1 6.5L12 17.5l-5.8 3.1 1.1-6.5L2.6 9.5l6.5-.9z'/%3E%3C/svg%3E") 0 0 / 1em .92em repeat-x; }
.av { display: inline-grid; flex: none; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--hel-l); color: var(--hel-d); font-size: 1em; font-weight: 800; }
.av--saf { background: var(--saf-l); color: #8a5d12; }
.av--blue { background: #e3edf5; color: #2f5267; }
.av--rose { background: #f6e6e6; color: #8c3f3f; }

/* ---------- hero desk ---------- */
.hb { z-index: 1; display: block; transition: translate .35s var(--ease-out); }
.hb:hover, .hb:focus-visible { z-index: 6; translate: 0 -.3em; }
.hb:focus-visible { outline: .16em solid #587c9a; outline-offset: .3em; border-radius: 1em; }
.hb--menu { z-index: 3; }
.lbl {
  position: absolute;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3em .75em .32em;
  border-radius: 1em;
  background: #fff;
  color: var(--u-ink);
  box-shadow: 0 .3em .8em -.25em rgb(21 35 43 / .35);
  white-space: nowrap;
}
.lbl i { width: .5em; height: .5em; border-radius: 50%; background: var(--saf); }
.lbl b { font-size: .66em; font-weight: 700; }
.pack { position: absolute; inset: 0; }
.pack > * { position: absolute; }
.pack .floor-shadow { left: 6%; right: 6%; bottom: 4%; height: 12%; border-radius: 50%; background: rgb(31 61 51 / .16); filter: blur(.4em); }

/* ---------- website (hel.coffee) ---------- */
.web__nav { display: flex; align-items: center; justify-content: space-between; height: 3.8em; padding: 0 2.4em; border-bottom: .07em solid #eef1ef; }
.web__nav .logo { font-size: 1.35em; }
.web__links { display: flex; gap: 1.7em; color: #5c6b64; font-size: .84em; font-weight: 500; }
.web__links .on { color: var(--hel-d); font-weight: 700; }
.web__act { display: flex; align-items: center; gap: .9em; }
.web__cart { position: relative; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--hel-l); color: var(--hel-d); }
.web__cart .icon { width: 1.05em; height: 1.05em; }
.web__cart b { position: absolute; top: -.2em; right: -.25em; display: grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--saf); color: var(--hel-d); font-size: .64em; font-weight: 800; }
.web__nav .ui-btn { height: 2.5em; font-size: .78em; }
.web__hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.2em; align-items: center; padding: 2.2em 2.4em 1.8em; }
.web__tag { display: inline-flex; align-items: center; gap: .45em; padding: .3em .85em; border-radius: 1em; background: var(--hel-l); color: var(--hel-d); font-size: .74em; font-weight: 700; }
.web__tag .dot { color: var(--saf); }
.web__h { display: block; margin-top: .55em; color: var(--hel-d); font-size: 2.55em; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.web__p { margin-top: .8em; color: #5f6d66; font-size: .9em; line-height: 1.85; }
.web__btns { display: flex; gap: .7em; margin-top: 1.3em; }
.web__trust { display: flex; gap: 1.4em; margin-top: 1.2em; color: #5f6d66; font-size: .74em; font-weight: 600; }
.web__trust span { display: inline-flex; align-items: center; gap: .35em; }
.web__trust .icon { width: 1.15em; height: 1.15em; color: var(--hel); }
.web__trust .stars { width: 4.6em; height: .86em; background-size: .92em .86em; }
.web__art { position: relative; height: 21em; overflow: hidden; border-radius: 1.4em; background-color: #d99b32; }
.web__art .bag { position: absolute; }
.web__sec { padding: 1.2em 2.4em 1.6em; }
.web__sechead { display: flex; align-items: baseline; justify-content: space-between; }
.web__sechead b { color: var(--hel-d); font-size: 1.35em; font-weight: 800; }
.web__sechead span { color: var(--hel); font-size: .8em; font-weight: 700; }
.web__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; margin-top: 1em; }
.pcard { display: flex; flex-direction: column; gap: .2em; }
.pcard__img { position: relative; display: grid; place-items: center; height: 11em; overflow: hidden; border-radius: 1em; }
.pcard__img .bag { font-size: .95em; }
.pcard b { margin-top: .5em; color: var(--hel-d); font-size: .92em; font-weight: 800; }
.pcard small { color: #77857e; font-size: .74em; }
.pcard__row { display: flex; align-items: center; justify-content: space-between; margin-top: .3em; }
.pcard__row strong { color: var(--hel-d); font-size: .9em; font-weight: 800; }
.pcard__row i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--hel); color: #fff; }
.pcard__row .icon { width: 1em; height: 1em; stroke-width: 2.6; }
.web__feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin: 0 2.4em; padding: 1.1em 0 1.6em; border-top: .07em solid #eef1ef; }
.web__feats span { display: flex; align-items: center; gap: .55em; color: var(--hel-d); font-size: .8em; font-weight: 700; }
.web__feats i { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .7em; background: var(--hel-l); }
.web__feats .icon { width: 1.15em; height: 1.15em; color: var(--hel); }

/* mobile site */
.msite { flex: 1; display: flex; flex-direction: column; padding: 0 1.1em 1em; }
.msite__nav { display: flex; align-items: center; justify-content: space-between; height: 3em; }
.msite__nav .logo { font-size: 1.25em; }
.msite__nav span:last-child { display: flex; gap: .7em; color: var(--hel-d); }
.msite__nav .icon { width: 1.3em; height: 1.3em; }
.msite__art { position: relative; height: 12em; margin-top: .4em; overflow: hidden; border-radius: 1.2em; background-color: #d99b32; }
.msite__h { margin-top: .9em; color: var(--hel-d); font-size: 1.62em; font-weight: 800; line-height: 1.3; }
.msite__p { margin-top: .4em; color: #5f6d66; font-size: .84em; line-height: 1.65; }
.msite .ui-btn { width: 100%; height: 2.9em; margin-top: .9em; font-size: .9em; }
.msite__trust { display: flex; justify-content: center; gap: 1em; margin-top: .7em; color: #5f6d66; font-size: .7em; font-weight: 600; }
.wa-fab { position: absolute; left: 1em; bottom: 2.6em; z-index: 5; display: grid; place-items: center; width: 3.3em; height: 3.3em; border-radius: 50%; background: #25a35a; color: #fff; box-shadow: 0 .5em 1em -.3em rgb(0 0 0 / .45); }
.wa-fab .icon { width: 1.55em; height: 1.55em; stroke-width: 2.2; }

/* chat that lands with the business */
.wachat { display: flex; flex-direction: column; overflow: hidden; border-radius: .9em; background: #efeae2; font-size: .54em; }
.wachat__head { display: flex; align-items: center; gap: .6em; padding: .7em 1em; background: #1f5c46; color: #fff; }
.wachat__head .av { width: 2.2em; height: 2.2em; background: #fff; }
.wachat__head b { display: block; font-size: .95em; }
.wachat__head small { color: #cfe3d9; font-size: .74em; }
.wachat__body { display: flex; flex-direction: column; gap: .45em; padding: .9em 1em 1em; }
.wachat__msg { align-self: flex-start; max-width: 88%; padding: .55em .8em .45em; border-radius: .7em; border-top-left-radius: .15em; background: #fff; color: var(--u-ink); font-size: .9em; line-height: 1.5; box-shadow: 0 .06em .1em rgb(0 0 0 / .1); }
.wachat__msg small { display: block; margin-top: .15em; color: #8a958f; font-size: .72em; text-align: left; }
.wachat__src { align-self: center; padding: .2em .7em; border-radius: .6em; background: #dde9f1; color: #4b6476; font-size: .72em; font-weight: 600; }

/* ---------- 01 identity ---------- */
.id-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; overflow: hidden; border-radius: .9em; background-color: var(--hel-d); }
.id-main .logo { font-size: 4.6em; }
.id-main small { color: rgb(246 243 236 / .78); font-size: .72em; font-weight: 500; word-spacing: .2em; }
.id-tag { position: absolute; top: .8em; right: 1em; color: rgb(246 243 236 / .62); font-size: .5em; font-weight: 600; }
.id-tag--dark { color: rgb(31 61 51 / .55); }
.id-alt { display: grid; place-items: center; overflow: hidden; border-radius: .9em; }
.id-alt--milk { background: var(--milk); }
.id-alt--milk .logo { font-size: 2em; }
.id-alt--saf { background: var(--saf); }
.id-alt--saf .mark-tile { width: 3.4em; height: 3.4em; box-shadow: 0 .4em .8em -.3em rgb(0 0 0 / .35); }
.palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3em; padding: .3em; border-radius: .9em; background: #fff; }
.sw { display: flex; flex-direction: column; justify-content: flex-end; gap: .1em; padding: .45em .5em; border-radius: .6em; background: var(--c); color: #fff; line-height: 1.25; }
.sw b { font-size: .5em; font-weight: 700; }
.sw code { font: 600 .44em/1.2 ui-monospace, "SF Mono", Menlo, monospace; opacity: .82; direction: ltr; text-align: right; }
.sw--light { color: var(--hel-d); box-shadow: inset 0 0 0 .06em #e4ded2; }
.typecard { display: flex; flex-direction: column; padding: .9em 1em; border-radius: .9em; background: #fff; }
.typecard small { color: var(--u-mut); font: 600 .5em/1.2 ui-monospace, "SF Mono", Menlo, monospace; direction: ltr; text-align: right; }
.typecard b { margin-top: .25em; color: var(--hel-d); font-size: 2.4em; font-weight: 800; line-height: 1.25; }
.typecard span { display: flex; justify-content: space-between; padding-top: .35em; border-top: .06em solid var(--u-line); color: var(--u-mut); font-size: .5em; font-weight: 600; }
.typecard span + span { margin-top: .3em; }
.apply { position: relative; overflow: hidden; border-radius: .9em; background: radial-gradient(120% 100% at 30% 0%, #f3f6f2, #d9e4da 90%); }
.apply > * { position: absolute; }
.bcard2 { display: flex; flex-direction: column; justify-content: space-between; padding: .8em .9em; border-radius: .35em; background: #fff; box-shadow: 0 .5em .9em -.4em rgb(0 0 0 / .35); }
.bcard2 .logo { font-size: 1.15em; }
.bcard2 small { color: var(--u-mut); font: 500 .42em/1.5 ui-monospace, "SF Mono", Menlo, monospace; direction: ltr; text-align: right; }
.bcard2--back { align-items: center; justify-content: center; background-color: var(--hel-d); }
.bcard2--back svg { width: 2em; height: 2em; fill: currentColor; color: var(--saf); --seam: var(--hel-d); }
.files2 { display: flex; flex-direction: column; gap: .45em; padding: .85em .95em; border-radius: .9em; background: #fff; }
.files2 > b { font-size: .66em; font-weight: 800; }
.frow { display: flex; align-items: center; gap: .5em; }
.frow i { display: grid; flex: none; place-items: center; width: 1.7em; height: 1.7em; border-radius: .4em; background: var(--c, #eef3ef); }
.frow span { flex: 1; font-size: .54em; font-weight: 600; }
.frow small { color: var(--u-faint); font: 500 .46em/1 ui-monospace, Menlo, monospace; direction: ltr; }

/* latte variants (small menu thumbnails) */
.latte--black > i { background: radial-gradient(circle at 45% 40%, #6e4224, #2d190c 80%); }
.latte--small::before { inset: 19%; }
.latte--small > i { inset: 25%; background: radial-gradient(circle at 50% 50%, #e6c39c 0 35%, #b07a4a 70%); }
.latte--gold > i { background: radial-gradient(circle at 50% 45%, #efd08a, #c99a43 80%); }

/* ---------- digital menu screen ---------- */
.dm__cover { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; height: 8.6em; padding-top: 2.2em; background-color: var(--hel-d); color: var(--milk); }
.dm__cover .logo { font-size: 1.9em; }
.dm__cover small { color: rgb(246 243 236 / .75); font-size: .8em; font-weight: 600; }
.dm__info { display: flex; align-items: center; justify-content: space-between; padding: .8em 1.2em .1em; }
.dm__info small { color: var(--u-mut); font-size: .76em; }
.dm__tabs { display: flex; gap: .4em; padding: .7em 1.2em .45em; overflow: hidden; }
.dm__tabs i { padding: .35em .9em; border-radius: 1em; background: var(--u-bg); color: var(--u-mut); font-size: .76em; font-weight: 700; white-space: nowrap; }
.dm__tabs i.on { background: var(--hel-d); color: #fff; }
.dm__list { display: flex; flex-direction: column; padding: 0 1.2em; }
.dm__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75em; padding: .6em 0; border-bottom: .06em solid var(--u-line); }
.dm__item .latte { font-size: .43em; }
.dm__txt b { display: block; font-size: .92em; font-weight: 800; }
.dm__txt small { display: block; overflow: hidden; color: var(--u-mut); font-size: .72em; white-space: nowrap; text-overflow: ellipsis; }
.dm__price { color: var(--hel-d); font-size: .95em; font-weight: 800; white-space: nowrap; }
.dm__price::after { content: " ر.س"; color: var(--u-mut); font-size: .72em; font-weight: 600; }
.dm__promo { display: flex; align-items: center; justify-content: space-between; margin: auto 1.2em 2.3em; padding: .8em 1em; border-radius: 1em; background: var(--saf-l); }
.dm__promo small { display: block; color: #8a5d12; font-size: .7em; font-weight: 700; }
.dm__promo b { color: var(--hel-d); font-size: .9em; font-weight: 800; }
.dm__promo strong { color: var(--hel-d); font-size: .95em; font-weight: 800; }

/* ---------- map card (hero) ---------- */
.mapc { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border-radius: .8em; background: #fff; }
.mapc__map { position: relative; flex: 1; overflow: hidden; background: #e7ece9; }
.mapc__roads { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.mapc__roads .minor { stroke-width: 2.4; }
.mapc__park { position: absolute; left: 6%; top: 12%; width: 26%; height: 34%; border-radius: .5em; background: #cfe3c9; }
.mpin { position: absolute; display: grid; place-items: center; width: 2em; height: 2em; margin: -2.1em 0 0 -1em; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--hel-d); box-shadow: -.1em .2em .4em rgb(0 0 0 / .3); }
.mpin svg { width: 1.15em; height: 1.15em; rotate: 45deg; fill: currentColor; color: var(--saf); --seam: var(--hel-d); }
.mapc__info { display: flex; align-items: center; justify-content: space-between; padding: .55em .75em .6em; line-height: 1.35; }
.mapc__info b { display: block; font-size: .74em; font-weight: 800; }
.mapc__info small { color: var(--u-mut); font-size: .5em; }
.mapc__rate { display: flex; align-items: center; gap: .25em; }
.mapc__rate b { font-size: .62em; }
.mapc__rate .stars { width: 3.4em; height: .62em; background-size: .68em .62em; }

/* ---------- 02 website board ---------- */
.mk-web .web__art .bag, .msite__art .bag, .msite__art .pcup { position: absolute; }
.wachat__head .av svg { width: 1.4em; height: 1.4em; fill: currentColor; color: var(--hel); --seam: #fff; }
.typecard em { font-style: normal; }
.frow i b { color: #fff; font: 800 .36em/1 ui-monospace, "SF Mono", Menlo, monospace; }

/* ---------- 03 photography: client delivery gallery ---------- */
.ph { display: grid; grid-template-columns: 27em minmax(0, 1fr); height: 100%; }
.ph__side { display: flex; flex-direction: column; gap: 1.1em; padding: 1.5em 1.4em; border-inline-end: .1em solid var(--u-line); background: #fafbfb; }
.ph__head { display: flex; align-items: center; justify-content: space-between; gap: .8em; line-height: 1.35; }
.ph__head b { display: block; font-size: 1.25em; font-weight: 800; }
.ph__head small { color: var(--u-mut); font-size: .86em; }
.ph__head .ui-btn { height: 2.5em; font-size: .86em; }
.ph__folders { display: flex; gap: .45em; }
.ph__folders i { padding: .35em .85em; border-radius: 1em; background: #edf1f2; color: var(--u-mut); font-size: .84em; font-weight: 700; white-space: nowrap; }
.ph__folders i.on { background: var(--hel-d); color: #fff; }
.ph__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.ph__t { aspect-ratio: 4 / 5; border-radius: .7em; }
.ph__t.is-sel { box-shadow: 0 0 0 .22em #fff, 0 0 0 .44em var(--saf); }
.ph__main { display: flex; flex-direction: column; gap: 1em; min-width: 0; padding: 1.5em 1.6em; background: #eceff1; }
.ph__bar { display: flex; align-items: center; justify-content: space-between; }
.ph__file { font: 700 .95em/1 ui-monospace, "SF Mono", Menlo, monospace; direction: ltr; }
.ph__meta { color: var(--u-mut); font-size: .86em; }
.ph__view { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; }
.ph__frame { position: relative; height: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: .4em; box-shadow: 0 1em 2em -1em rgb(0 0 0 / .45); }
.ph__img { position: absolute; inset: 0; }
.ph__img--raw { filter: saturate(.3) brightness(.7) contrast(.9) sepia(.22); transform: rotate(-4deg) scale(1.24) translate(3%, 2%); }
.ph__img--pro { clip-path: inset(0 0 0 50%); }
.ph__split { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3; width: .2em; margin-left: -.1em; background: #fff; box-shadow: 0 0 .5em rgb(0 0 0 / .4); }
.ph__split i { position: absolute; top: 50%; left: 50%; width: 3em; height: 3em; translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 .3em .7em rgb(0 0 0 / .35); }
.ph__split i::before, .ph__split i::after { content: ""; position: absolute; top: 50%; width: .62em; height: .62em; margin-top: -.31em; border-top: .2em solid var(--u-ink); border-left: .2em solid var(--u-ink); }
.ph__split i::before { left: .75em; rotate: -45deg; }
.ph__split i::after { right: .75em; rotate: 135deg; }
.ph__tag { position: absolute; top: .9em; z-index: 4; padding: .25em .8em; border-radius: 1em; background: rgb(255 255 255 / .93); font-size: .86em; font-weight: 800; }
.ph__tag--l { left: .9em; }
.ph__tag--r { right: .9em; }
.ph__crop { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 5; width: 100%; translate: -50% 0; border: .2em solid #fff; box-shadow: 0 0 0 999em rgb(10 18 24 / .55); opacity: 0; visibility: hidden; pointer-events: none; }
.ph__tools { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.ph__ratio, .ph__toggle { display: flex; gap: .3em; padding: .3em; border-radius: .8em; background: #fff; }
.ph__ratio i, .ph__toggle i { padding: .4em .75em; border-radius: .55em; color: var(--u-mut); font-size: .84em; font-weight: 700; white-space: nowrap; }
.ph__ratio i.on, .ph__toggle i.on { background: var(--hel-d); color: #fff; }

/* ---------- 04 social: profile, approval, report ---------- */
.ig__top { display: flex; align-items: center; justify-content: space-between; height: 2.6em; padding: 0 1.2em; }
.ig__top b { font-size: 1em; font-weight: 800; direction: ltr; }
.ig__top .icon { width: 1.25em; height: 1.25em; }
.ig__top .icon:first-child { rotate: 90deg; }
.ig__prof { display: flex; align-items: center; gap: 1.1em; padding: .5em 1.2em 0; }
.ig__av { display: grid; flex: none; place-items: center; width: 5em; height: 5em; border-radius: 50%; background: conic-gradient(var(--saf), #f3cf7c, var(--hel-m), var(--saf)); }
.ig__av .mark-tile { width: 4.4em; height: 4.4em; border-radius: 50%; box-shadow: 0 0 0 .25em #fff; }
.ig__stats { flex: 1; display: flex; justify-content: space-around; text-align: center; }
.ig__stats span { display: flex; flex-direction: column; line-height: 1.25; }
.ig__stats b { font-size: 1.02em; font-weight: 800; }
.ig__stats small { color: var(--u-mut); font-size: .76em; }
.ig__bio { display: flex; flex-direction: column; gap: .05em; padding: .75em 1.2em 0; line-height: 1.45; }
.ig__bio b { font-size: .9em; font-weight: 800; }
.ig__bio span { font-size: .82em; }
.ig__link { color: #2f5d9a; font-weight: 700; }
.ig__btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; padding: .75em 1.2em 0; }
.ig__btns .ui-btn { height: 2.3em; font-size: .82em; }
.ig__hl { display: flex; justify-content: space-between; padding: .95em 1.4em .35em; }
.ig__hl span { display: flex; flex-direction: column; align-items: center; gap: .3em; font-size: .72em; font-weight: 600; }
.ig__hl i { display: grid; place-items: center; width: 4em; height: 4em; border-radius: 50%; background: var(--hel-l); box-shadow: inset 0 0 0 .3em #fff, 0 0 0 .14em #d5e1d7; color: var(--hel-d); }
.ig__hl .icon { width: 1.6em; height: 1.6em; }
.ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .14em; margin-top: .7em; }
.post { position: relative; display: grid; place-items: center; align-content: center; aspect-ratio: 1; overflow: hidden; text-align: center; line-height: 1.25; }
.post > .bag, .post > .latte, .post > .pcup, .post > .floor { position: absolute; }
.post .floor { left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(rgb(0 0 0 / .05), rgb(0 0 0 / .14)); }
.post--1 { background-color: var(--hel-d); color: var(--milk); }
.post--1 b { font-size: 1.05em; font-weight: 800; }
.post--1 svg { position: absolute; bottom: .6em; left: .6em; width: 1.1em; height: 1.1em; fill: currentColor; color: var(--saf); --seam: var(--hel-d); }
.post--2 { background: radial-gradient(110% 90% at 55% 40%, #5c6c75, #2a353d 78%); }
.post--3 { background: radial-gradient(110% 90% at 50% 30%, #f0c264, #d79a31 80%); }
.post--4 { background: #2b3741; color: #fff; }
.post--4 small { color: var(--saf); font-size: .62em; font-weight: 700; }
.post--4 b { font-size: .92em; font-weight: 800; }
.post--5 { background: radial-gradient(110% 90% at 50% 30%, #eef3ee, #cfdccf 85%); }
.post--6 { background: radial-gradient(110% 90% at 50% 30%, #4d8264, #284c3c 80%); }
.post--7 { gap: .15em; background: var(--saf); color: var(--hel-d); }
.post--7 small { font-size: .6em; font-weight: 700; }
.post--7 b { font-size: .86em; font-weight: 800; }
.post--7 i { justify-self: center; padding: .1em .55em; border-radius: 1em; background: var(--hel-d); color: #fff; font-size: .7em; font-weight: 800; }
.post--8 { background-color: var(--hel); }
.post--8 .mark-tile { width: 2.6em; height: 2.6em; background: transparent; }
.post--8 .mark-tile svg { width: 100%; height: 100%; --seam: var(--hel); }
.post--9 { background: var(--milk); color: var(--hel-d); }
.post--9 b { font-size: .8em; font-weight: 800; line-height: 1.35; }
.cal2 { display: flex; flex-direction: column; gap: 1em; height: 100%; padding: 1.3em 1.4em; background: #fff; }
.cal2__top { display: flex; align-items: center; justify-content: space-between; gap: 1em; line-height: 1.35; }
.cal2__top b { display: block; font-size: 1.2em; font-weight: 800; }
.cal2__top small { color: var(--u-mut); font-size: .86em; }
.cal2__seg { display: flex; padding: .25em; border-radius: .7em; background: var(--u-bg); }
.cal2__seg i { padding: .35em .9em; border-radius: .5em; color: var(--u-mut); font-size: .86em; font-weight: 700; }
.cal2__seg .on { background: #fff; color: var(--u-ink); box-shadow: 0 .1em .3em rgb(0 0 0 / .1); }
.cal2__ok { position: relative; width: 9.6em; height: 2.6em; }
.cal2__ok > * { position: absolute; inset: 0; justify-content: center; }
.cal2__ok .ui-btn { height: 100%; }
.cal2__ok .bad { opacity: 0; visibility: hidden; }
.cal2__ok .ui-chip { font-size: .92em; border-radius: .7em; }
.cal2__days { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5em; min-height: 0; }
.cal2__day { display: flex; flex-direction: column; gap: .5em; padding: .6em .45em; border-radius: .7em; background: #f6f8f9; }
.cal2__day > small { color: var(--u-mut); font-size: .74em; font-weight: 700; text-align: center; white-space: nowrap; }
.cal2__add { display: grid; place-items: center; height: 5em; border: .1em dashed #d3dbe0; border-radius: .6em; color: #b4c0c7; }
.cpost { display: flex; flex-direction: column; gap: .35em; padding: .35em; border-radius: .6em; background: #fff; box-shadow: 0 .2em .5em -.2em rgb(0 0 0 / .18); }
.cpost__img { width: 100%; border-radius: .4em; font-size: .8em; }
.cpost__txt { line-height: 1.3; }
.cpost__txt b { display: block; font-size: .72em; font-weight: 800; }
.cpost__txt small { color: var(--u-mut); font-size: .66em; }
.cpost__st { position: relative; height: 1.5em; }
.cpost__st i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 1em; font-size: .66em; font-weight: 800; }
.cpost__st .bad { background: #eef1f3; color: var(--u-mut); opacity: 0; visibility: hidden; }
.cpost__st .ok { background: var(--ok-l); color: var(--ok); }
.rep { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .7em; padding: 1.3em 1.5em; border-radius: 1.6em; background: #fff; font-size: .5em; }
.rep__head { display: flex; align-items: baseline; justify-content: space-between; }
.rep__head b { font-size: 1.2em; font-weight: 800; }
.rep__head small { color: var(--u-mut); font-size: .86em; }
.rep__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.rep__kpis span { display: flex; flex-direction: column; line-height: 1.35; }
.rep__kpis small { color: var(--u-mut); font-size: .84em; }
.rep__kpis b { font-size: 1.45em; font-weight: 800; }
.rep__kpis i { color: var(--ok); font-size: .82em; font-weight: 800; }
.rep__chart { flex: 1; width: 100%; min-height: 0; overflow: visible; }
.rep__area { fill: rgb(62 110 82 / .12); }
.rep__line { fill: none; stroke: var(--hel); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1 1; }

/* ---------- 05 maps: listing + profile manager + reviews ---------- */
.gm__map { position: absolute; inset: 0; overflow: hidden; background: #e8ece9; }
.gm__roads { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.gm__roads .major { stroke: #f7e2b0; stroke-width: 9; }
.gm__park { position: absolute; border-radius: 1em; background: #cfe3c9; }
.gm__blk { position: absolute; border-radius: .5em; background: #dde3e0; }
.gm__lbl { position: absolute; color: #7d8a84; font-size: .62em; font-weight: 600; white-space: nowrap; }
.gm__lbl--v { writing-mode: vertical-rl; }
.gpin { position: absolute; width: 1.4em; height: 1.4em; margin: -1.5em 0 0 -.7em; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #8fa0aa; box-shadow: 0 0 0 .18em #fff; }
.mpin--big { width: 3.2em; height: 3.2em; margin: -3.4em 0 0 -1.6em; box-shadow: 0 0 0 .2em #fff, -.15em .3em .6em rgb(0 0 0 / .3); }
.mpin--big svg { width: 1.9em; height: 1.9em; }
.gm__search { position: absolute; top: 3.5em; left: 1em; right: 1em; z-index: 6; display: flex; align-items: center; gap: .6em; height: 2.9em; padding: 0 .9em; border-radius: 1.5em; background: #fff; box-shadow: 0 .3em .8em rgb(0 0 0 / .14); font-size: .92em; font-weight: 600; }
.gm__search .icon { width: 1.15em; height: 1.15em; color: var(--u-mut); }
.gm__search span:nth-child(2) { flex: 1; }
.gm__search .av { width: 1.9em; height: 1.9em; font-size: .8em; }
.gm__chips { position: absolute; top: 7.4em; left: 1em; right: 1em; z-index: 6; display: flex; gap: .4em; }
.gm__chips i { padding: .35em .8em; border-radius: 1em; background: #fff; box-shadow: 0 .15em .4em rgb(0 0 0 / .12); font-size: .74em; font-weight: 700; white-space: nowrap; }
.gm__chips i.on { background: var(--hel-d); color: #fff; }
.gm__sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; flex-direction: column; gap: .5em; height: 56%; padding: .6em 1.2em 2.2em; border-radius: 1.6em 1.6em 0 0; background: #fff; box-shadow: 0 -.5em 1.4em rgb(0 0 0 / .14); }
.gm__grab { align-self: center; width: 3em; height: .3em; border-radius: 1em; background: #d5dde2; }
.gm__title { display: flex; align-items: center; justify-content: space-between; line-height: 1.3; }
.gm__title b { display: block; font-size: 1.35em; font-weight: 800; }
.gm__title small { color: var(--u-mut); font-size: .8em; }
.gm__title .mark-tile { width: 2.6em; height: 2.6em; }
.gm__rate { display: flex; align-items: center; gap: .35em; }
.gm__rate b { font-size: .86em; }
.gm__rate .stars { width: 4.4em; height: .82em; background-size: .88em .82em; }
.gm__rate small { color: var(--u-mut); font-size: .74em; }
.gm__slot { position: relative; height: 1.9em; }
.gm__slot > span { position: absolute; inset: 0; display: flex; align-items: center; font-size: .84em; }
.gm__slot .bad { justify-content: center; border: .1em dashed var(--u-faint); border-radius: .6em; color: var(--u-mut); opacity: 0; visibility: hidden; }
.gm__slot .ok b { margin-inline-end: .25em; color: var(--ok); }
.gm__acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; margin-top: .1em; }
.gm__acts span { display: flex; flex-direction: column; align-items: center; gap: .3em; color: var(--hel-d); font-size: .7em; font-weight: 700; }
.gm__acts i { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: var(--hel-l); }
.gm__acts .on i { background: var(--hel-d); color: #fff; }
.gm__acts .icon { width: 1.4em; height: 1.4em; }
.gm__photos { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; min-height: 0; }
.gm__photos .shot { border-radius: .7em; }
.gp { display: flex; flex-direction: column; gap: 1.1em; height: 100%; padding: 1.6em 1.8em; background: #fff; }
.gp__top { display: flex; align-items: center; gap: 1.2em; line-height: 1.35; }
.gp__top > span:last-child b { display: block; font-size: 1.25em; font-weight: 800; }
.gp__top small { color: var(--u-mut); font-size: .86em; }
.gp__ring { position: relative; flex: none; width: 5.4em; height: 5.4em; }
.gp__ring svg { width: 100%; height: 100%; rotate: -90deg; }
.gp__track { fill: none; stroke: var(--u-line); stroke-width: 4.4; }
.gp__arc { fill: none; stroke: var(--ok); stroke-width: 4.4; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.gp__ring > b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.02em; font-weight: 800; }
.gp__ring > b > span { grid-area: 1 / 1; }
.gp__ring .bad { opacity: 0; visibility: hidden; }
.gp__list { display: flex; flex-direction: column; }
.gp__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8em; padding: .7em 0; border-top: .08em solid var(--u-line); }
.gp__row b { font-size: .98em; font-weight: 700; }
.gp__row small { color: var(--u-mut); font-size: .86em; }
.gp__chk { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--ok); color: #fff; }
.gp__chk .icon { width: 1em; height: 1em; stroke-width: 3; }
.revs { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .85em; padding: 1.4em 1.6em; border-radius: 1.6em; background: #fff; font-size: .5em; }
.revs__title { font-size: 1.15em; font-weight: 800; }
.rev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .8em; }
.rev .av { width: 2.4em; height: 2.4em; }
.rev__txt { display: flex; flex-wrap: wrap; align-items: center; gap: .1em .5em; line-height: 1.5; }
.rev__txt b { font-size: .95em; }
.rev__txt .stars { width: 4.6em; height: .86em; background-size: .92em .86em; }
.rev__txt small { flex-basis: 100%; color: var(--u-mut); font-size: .86em; }

/* ---------- 06 search: results page + monthly report ---------- */
.app.serp { font-size: .56em; }
.serp { display: flex; flex-direction: column; gap: 1.1em; height: 100%; padding: 1.4em 1.8em; background: #fff; }
.serp__bar { display: flex; align-items: center; gap: .7em; width: 78%; height: 3em; padding: 0 1.1em; border: .1em solid #dfe5e9; border-radius: 1.5em; box-shadow: 0 .2em .6em rgb(21 35 43 / .08); font-size: 1.05em; font-weight: 600; }
.serp__bar .icon { width: 1.2em; height: 1.2em; color: var(--u-mut); }
.serp__bar span { flex: 1; }
.serp__x { color: var(--u-faint); font-size: 1.3em; }
.serp__tabs { display: flex; align-items: center; gap: 1.5em; padding-bottom: .6em; border-bottom: .08em solid var(--u-line); color: var(--u-mut); font-size: .9em; font-weight: 600; }
.serp__tabs .on { color: var(--u-ink); box-shadow: 0 .55em 0 -.35em var(--u-ink); }
.serp__tabs small { margin-inline-start: auto; color: var(--u-faint); font-size: .9em; }
.res { position: relative; display: flex; flex-direction: column; gap: .3em; width: 84%; }
.res__src { display: flex; align-items: center; gap: .6em; line-height: 1.3; }
.res__src b { display: block; font-size: .9em; font-weight: 700; }
.res__src small { color: var(--u-mut); font-size: .8em; }
.res__fav { display: grid; flex: none; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--hel-l); color: var(--hel); font-size: .9em; font-weight: 800; }
.res__fav svg { width: 1.2em; height: 1.2em; fill: currentColor; --seam: var(--hel-l); }
.res__fav--g { background: #fdf0d8; color: #9a6b12; }
.res__fav--b { background: #e4edf6; color: #2f5d9a; }
.res__t { color: #23508e; font-size: 1.22em; font-weight: 700; line-height: 1.45; }
.res__d { color: var(--u-mut); font-size: .95em; line-height: 1.6; }
.res--hel { width: calc(84% + 2.4em); margin-inline: -1.2em; padding: 1em 1.2em; border-radius: 1em; background: #f7faf8; box-shadow: inset 0 0 0 .1em #dfe9e1; }
.res__slot { position: relative; display: block; }
.res__slot > span { display: block; }
.res__slot .bad { position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; }
.res__slot--t { color: #23508e; font-size: 1.22em; font-weight: 700; line-height: 1.45; }
.res__slot--d { color: var(--u-mut); font-size: .95em; line-height: 1.6; }
.res__rich { display: flex; align-items: center; gap: .4em; overflow: hidden; font-size: .86em; }
.res__rich .stars { width: 4.6em; height: .86em; background-size: .92em .86em; }
.res__rich small { color: var(--u-mut); }
.res__links { display: flex; flex-wrap: wrap; gap: .4em; overflow: hidden; }
.res__links i { padding: .3em .9em; border: .1em solid #d9e3ec; border-radius: 1.2em; color: #23508e; font-size: .84em; font-weight: 700; }
.serp__toggle { position: absolute; top: 1.4em; left: 1.8em; display: flex; padding: .25em; border-radius: .8em; background: var(--u-bg); }
.serp__toggle i { padding: .35em .8em; border-radius: .55em; color: var(--u-mut); font-size: .84em; font-weight: 800; }
.serp__toggle .on { background: var(--hel-d); color: #fff; }
.seo-rep { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .7em; padding: 1.3em 1.4em; border-radius: 1.6em; background: #fff; font-size: .5em; }
.seo-rep__head { line-height: 1.35; }
.seo-rep__head b { display: block; font-size: 1.15em; font-weight: 800; }
.seo-rep__head small { color: var(--u-mut); font-size: .84em; }
.seo-rep__kpi { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .6em; }
.seo-rep__kpi small { flex-basis: 100%; color: var(--u-mut); font-size: .84em; }
.seo-rep__kpi b { font-size: 1.8em; font-weight: 800; line-height: 1.2; }
.seo-rep__chart { flex: 1; width: 100%; min-height: 0; overflow: visible; }
.seo-rep__area { fill: rgb(62 110 82 / .12); }
.seo-rep__line { fill: none; stroke: var(--hel); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1 1; }
.seo-rep__done { display: flex; align-items: center; gap: .4em; color: var(--ok); font-size: .82em; font-weight: 700; }
.seo-rep__done .icon { width: 1.2em; height: 1.2em; }
.kw2 { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.3em 1.4em; border-radius: 1.6em; background: #fff; font-size: .5em; }
.kw2__title { margin-bottom: .5em; font-size: 1.1em; font-weight: 800; }
.kw2__row { display: flex; align-items: center; justify-content: space-between; padding: .6em 0; border-top: .08em solid var(--u-line); font-size: .9em; }
.kw2__row--head { border-top: 0; color: var(--u-faint); font-size: .78em; font-weight: 700; }
.kw2__row b { font-weight: 800; }
.kw2__row i { margin-inline-start: .5em; color: var(--ok); font-size: .82em; font-weight: 800; }

/* ---------- 07 ads: story ad + ads manager + audience ---------- */
.story { background-color: #22473a; color: #fff; }
.story__bars { display: flex; gap: .3em; padding: 3.4em 1.1em 0; }
.story__bars i { flex: 1; height: .22em; border-radius: 1em; background: rgb(255 255 255 / .35); }
.story__bars i:first-child { background: #fff; transform-origin: right center; }
.story__head { display: flex; align-items: center; gap: .5em; padding: .7em 1.1em 0; }
.story__head .av { width: 2.2em; height: 2.2em; background: #fff; }
.story__head .av svg { width: 1.4em; height: 1.4em; fill: currentColor; color: var(--hel); --seam: #fff; }
.story__head b { font-size: .9em; }
.story__head small { padding: .1em .55em; border-radius: 1em; background: rgb(255 255 255 / .18); font-size: .7em; }
.story__art { position: relative; flex: 1; margin: .6em 1.1em 0; }
.story__art > * { position: absolute; }
.story__h { padding: 0 1.1em; font-size: 1.75em; font-weight: 800; line-height: 1.25; }
.story__sub { display: block; padding: .3em 1.1em 0; color: #cfe3d4; font-size: .8em; }
.story__cta { display: flex; align-items: center; justify-content: center; gap: .4em; height: 2.9em; margin: 1em 1.1em 2.6em; border-radius: 1.5em; background: #fff; color: var(--hel-d); font-size: .92em; font-weight: 800; }
.story__cta .icon { width: 1.1em; height: 1.1em; }
.adm { display: flex; flex-direction: column; gap: 1em; height: 100%; padding: 1.3em 1.5em; background: #fff; }
.adm__top { display: flex; align-items: center; gap: .7em; }
.adm__top b { flex: 1; font-size: 1.25em; font-weight: 800; }
.adm__top .ui-btn { height: 2.4em; font-size: .86em; }
.adm__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; }
.adm__kpis span { display: flex; flex-direction: column; padding: .7em .8em; border-radius: .8em; background: var(--u-bg); line-height: 1.35; }
.adm__kpis small { color: var(--u-mut); font-size: .8em; }
.adm__kpis b { font-size: 1.1em; font-weight: 800; white-space: nowrap; }
.adm__table { display: flex; flex-direction: column; }
.adm__row { display: grid; grid-template-columns: 2.6em minmax(0, 1.5fr) 1fr .9fr .9fr; align-items: center; gap: .7em; padding: .65em .2em; border-top: .08em solid var(--u-line); font-size: .9em; }
.adm__row--head { border-top: 0; color: var(--u-faint); font-size: .76em; font-weight: 700; }
.adm__row b { font-weight: 800; }
.adm__row small { display: block; color: var(--u-mut); font-size: .82em; }
.adm__row > span:nth-child(2) { line-height: 1.35; }
.adm__row .ui-chip { justify-self: start; font-size: .8em; }
.tog { position: relative; display: block; width: 2.3em; height: 1.3em; border-radius: 1em; background: #cfd8de; }
.tog b { position: absolute; top: .15em; right: .15em; width: 1em; height: 1em; border-radius: 50%; background: #fff; box-shadow: 0 .1em .2em rgb(0 0 0 / .2); }
.tog.on { background: var(--ok); }
.tog.on b { right: 1.15em; }
.adm__st { position: relative; height: 1.7em; }
.adm__st > * { position: absolute; top: 50%; right: 0; translate: 0 -50%; }
.adm__st .bad { opacity: 0; visibility: hidden; }
.aud2 { position: absolute; inset: 0; display: grid; grid-template-columns: 20em minmax(0, 1fr); gap: 1.6em; padding: 1.4em; border-radius: 1.6em; background: #fff; font-size: .5em; }
.aud2__map { position: relative; overflow: hidden; border-radius: 1.1em; background: #e7ece9; }
.aud2__map .mapc__roads { stroke-width: 5; }
.aud2__radius { position: absolute; left: 50%; top: 50%; width: 15em; height: 15em; margin: -7.5em 0 0 -7.5em; border: .2em solid rgb(62 110 82 / .55); border-radius: 50%; background: rgb(62 110 82 / .16); }
.aud2__map .mpin { width: 3.4em; height: 3.4em; margin: -3.6em 0 0 -1.7em; }
.aud2__map .mpin svg { width: 2em; height: 2em; }
.aud2__map small { position: absolute; left: .8em; bottom: .7em; padding: .15em .7em; border-radius: 1em; background: #fff; color: var(--hel-d); font-size: .82em; font-weight: 800; }
.aud2__body { display: flex; flex-direction: column; gap: .8em; padding-top: .3em; }
.aud2__body > b { font-size: 1.15em; font-weight: 800; }
.aud2__chips { display: flex; flex-wrap: wrap; gap: .4em; }
.aud2__chips i { padding: .35em .9em; border-radius: 1.2em; background: var(--hel-l); color: var(--hel-d); font-size: .84em; font-weight: 700; }
.aud2__size { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .6em; margin-top: auto; }
.aud2__size small { color: var(--u-mut); font-size: .84em; }
.aud2__size b { font-size: 1.05em; font-weight: 800; }
.aud2__bar { display: block; flex-basis: 100%; height: .7em; overflow: hidden; border-radius: 1em; background: var(--u-bg); }
.aud2__bar i { display: block; width: 62%; height: 100%; border-radius: 1em; background: linear-gradient(90deg, var(--saf), var(--hel)); transform-origin: right center; }

/* ---------- 08 field marketing: booth, flyer, plan, report ---------- */
.booth2 { position: absolute; inset: 0; overflow: hidden; border-radius: .9em; background: #eef1ee; }
.booth2__wall { position: absolute; left: 0; right: 0; top: 0; height: 66%; background: repeating-linear-gradient(90deg, transparent 0 4.8em, rgb(0 0 0 / .035) 4.8em 4.9em), linear-gradient(#f1f4f1, #e6ebe6); }
.booth2__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: repeating-linear-gradient(90deg, rgb(0 0 0 / .05) 0 .06em, transparent .06em 3.2em), linear-gradient(#dbe1db, #cdd5cd); }
.stand { position: absolute; left: 30%; top: 15%; width: 46%; height: 72%; filter: drop-shadow(0 .6em .6em rgb(0 0 0 / .18)); }
.stand__awn { position: absolute; left: -4%; right: -4%; top: 0; height: 11%; border-radius: .35em .35em .1em .1em; background: repeating-linear-gradient(90deg, var(--saf) 0 1.1em, #fff7e6 1.1em 2.2em); box-shadow: 0 .3em .4em -.2em rgb(0 0 0 / .3); }
.stand__back { position: absolute; left: 3%; right: 3%; top: 11%; height: 45%; display: grid; place-items: center; background-color: var(--hel-d); }
.stand__back .logo { font-size: 1.7em; }
.stand__top { position: absolute; left: -3%; right: -3%; top: 56%; height: 5%; border-radius: .15em; background: linear-gradient(#d9b678, #b8935a); }
.stand__top > * { position: absolute; bottom: 100%; }
.stand__front { position: absolute; left: 0; right: 0; top: 61%; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; border-bottom: .5em solid var(--saf); background: linear-gradient(#fff, #f0ede6); }
.stand__front .logo { font-size: 1.25em; }
.stand__front small { color: var(--hel); font-size: .55em; font-weight: 700; }
.roll { position: absolute; left: 6%; top: 9%; width: 17%; height: 79%; display: flex; flex-direction: column; align-items: center; gap: 1em; padding: 1.2em .4em; background-color: var(--hel); color: var(--milk); text-align: center; box-shadow: 0 .4em .6em -.3em rgb(0 0 0 / .35); }
.roll::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: -.5em; height: .5em; border-radius: .2em; background: #8f9a9e; }
.roll .logo { font-size: 1.05em; }
.roll > b { font-size: .6em; font-weight: 800; line-height: 1.45; }
.aframe { position: absolute; left: 80%; top: 54%; width: 15%; height: 36%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25em; padding: .4em; border: .25em solid #b98c4f; border-radius: .2em; background: #2d3a36; color: #fff; text-align: center; line-height: 1.3; }
.aframe b { font-size: .5em; font-weight: 800; }
.aframe small { color: var(--saf); font-size: .42em; font-weight: 700; }
.aframe i { color: #cfd8d4; font-size: .38em; }
.flyer { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: .25em; background: #fff; }
.flyer__art { position: relative; height: 50%; background: radial-gradient(110% 90% at 50% 30%, #f0c264, #d79a31 80%); }
.flyer__art > * { position: absolute; }
.flyer__body { position: relative; flex: 1; display: flex; flex-direction: column; gap: .3em; padding: .8em .9em; }
.flyer__body .logo { font-size: .9em; }
.flyer__body > b { color: var(--hel-d); font-size: 1.05em; font-weight: 800; line-height: 1.3; }
.flyer__body small { max-width: 70%; color: var(--u-mut); font-size: .46em; line-height: 1.5; }
.flyer__qr { position: absolute; left: .9em; bottom: .9em; width: 2.3em; height: 2.3em; background: repeating-conic-gradient(#14261f 0 25%, #fff 0 50%) 0 0 / .46em .46em; box-shadow: 0 0 0 .2em #fff, 0 0 0 .3em #e3e7e4; }
.fplan { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.3em 1.5em; border-radius: 1.6em; background: #fff; font-size: .5em; }
.fplan__title { margin-bottom: .5em; font-size: 1.15em; font-weight: 800; }
.fplan__row { display: grid; grid-template-columns: auto 5em minmax(0, 1fr); align-items: center; gap: .8em; padding: .55em 0; border-top: .08em solid var(--u-line); }
.fplan__row i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .7em; background: var(--hel-l); color: var(--hel); }
.fplan__row .icon { width: 1.2em; height: 1.2em; }
.fplan__row small { color: var(--u-mut); font-size: .86em; }
.fplan__row b { font-size: .95em; font-weight: 700; }
.frep { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1em; padding: 1.3em 1.5em; border-radius: 1.6em; background: #fff; font-size: .5em; }
.frep__head { display: flex; align-items: center; justify-content: space-between; }
.frep__head b { font-size: 1.15em; font-weight: 800; }
.frep__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.frep__grid span { display: flex; flex-direction: column; padding: .8em .9em; border-radius: .9em; background: var(--u-bg); line-height: 1.35; }
.frep__grid small { color: var(--u-mut); font-size: .84em; }
.frep__grid b { color: var(--hel-d); font-size: 1.7em; font-weight: 800; }
.frep__note { margin-top: auto; color: var(--u-mut); font-size: .82em; line-height: 1.5; }

.adm__chart { display: flex; flex: 1; flex-direction: column; gap: .5em; min-height: 0; padding-top: .7em; border-top: .08em solid var(--u-line); }
.adm__chart-head { display: flex; align-items: baseline; justify-content: space-between; }
.adm__chart-head b { font-size: .95em; font-weight: 800; }
.adm__chart-head small { color: var(--u-mut); font-size: .8em; }
.adm__bars { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: .9em; min-height: 0; padding-bottom: 1.3em; }
.adm__bars i { position: relative; display: block; height: calc(var(--v) * 100%); border-radius: .4em .4em .15em .15em; background: linear-gradient(var(--hel-m), var(--hel)); transform-origin: bottom; }
.adm__bars small { position: absolute; top: 100%; left: 0; right: 0; margin-top: .25em; color: var(--u-faint); font-size: .76em; text-align: center; }
.frep__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.frep__shots .shot { aspect-ratio: 1; border-radius: .7em; }

/* ---------- 09 digital menu: table tent, live menu, admin ---------- */
.tent2 { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: .55em; overflow: hidden; padding-bottom: 1.4em; border-radius: .7em .7em .3em .3em; background: #fff; }
.tent2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .7em; background: var(--hel-d); }
.tent2__top { align-self: stretch; display: grid; place-items: center; height: 4.2em; background-color: var(--hel-d); }
.tent2__top .logo { font-size: 1.6em; }
.tent2__h { margin-top: .3em; color: var(--hel-d); font-size: 1.05em; font-weight: 800; }
.tent2__qr { display: block; width: 9em; height: 9em; padding: .3em; border-radius: .6em; background: #fff; box-shadow: 0 0 0 .14em var(--hel), 0 .4em .8em -.4em rgb(0 0 0 / .3); }
.tent2__qr .qr { display: block; width: 100%; height: 100%; }
.tent2__nfc { display: inline-flex; align-items: center; gap: .3em; color: var(--u-mut); font-size: .62em; font-weight: 700; }
.tent2__nfc .icon { width: 1.2em; height: 1.2em; rotate: 90deg; }
.tent2__url { color: var(--u-faint); font: 600 .5em/1 ui-monospace, "SF Mono", Menlo, monospace; direction: ltr; }
.dm__price--slot { display: inline-grid; }
.dm__price--slot > span { grid-area: 1 / 1; padding: 0 .2em; border-radius: .3em; }
.dm__price--slot::after { grid-area: 1 / 2; }
.dm__price--slot .bad { opacity: 0; visibility: hidden; }
.dm__price--slot .ok { background: var(--yellow); }
.cam { position: absolute; inset: 0; z-index: 25; background: #1b252c; opacity: 0; visibility: hidden; }
.cam__card { position: absolute; left: 50%; top: 47%; width: 12em; height: 15em; margin: -7.5em 0 0 -6em; rotate: -4deg; border-radius: .6em; background: #eef1ec; filter: blur(.05em); }
.cam__card i { position: absolute; left: 50%; top: 58%; width: 8em; height: 8em; margin: -4em 0 0 -4em; background: repeating-conic-gradient(#14261f 0 25%, #fff 0 50%) 0 0 / 1.3em 1.3em; opacity: .85; }
.cam__frame { position: absolute; left: 50%; top: 52%; width: 10em; height: 10em; margin: -5em 0 0 -5em; border: .25em solid rgb(255 255 255 / .9); border-radius: 1em; }
.cam__line { position: absolute; left: 50%; top: 52%; width: 9em; height: .22em; margin-left: -4.5em; border-radius: 1em; background: var(--saf); box-shadow: 0 0 .8em var(--saf); }
.cam__hint { position: absolute; left: 0; right: 0; bottom: 4em; color: #fff; font-size: .82em; font-weight: 600; text-align: center; }
.madm { display: flex; flex-direction: column; height: 100%; padding: 1.3em 1.3em 1.4em; background: #fff; }
.madm__title { font-size: 1.2em; font-weight: 800; }
.madm__sub { margin-bottom: .7em; color: var(--u-mut); font-size: .82em; }
.madm__row { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .7em 0; border-top: .08em solid var(--u-line); line-height: 1.35; }
.madm__row b { display: block; font-size: .92em; font-weight: 700; }
.madm__row small { color: var(--ok); font-size: .74em; font-weight: 700; }
.madm__row--off b { color: var(--u-mut); }
.madm__row--off small { color: #b0503c; }
.madm__in { display: grid; place-items: center; width: 3.4em; height: 2.1em; border: .1em solid #d5dde2; border-radius: .5em; font-size: .92em; font-weight: 800; }
.madm__in > span { grid-area: 1 / 1; }
.madm__in .bad { opacity: 0; visibility: hidden; }
.madm__row--edit .madm__in { border-color: var(--hel); box-shadow: 0 0 0 .2em rgb(62 110 82 / .18); }
.madm__save { margin-top: auto; height: 2.7em; }
.madm__done { display: flex; align-items: center; gap: .35em; margin-top: .6em; color: var(--ok); font-size: .76em; font-weight: 700; }
.madm__done .icon { width: 1.2em; height: 1.2em; stroke-width: 2.6; }

/* ---------- 10 store: storefront, checkout, order desk ---------- */
.st2__head { display: flex; align-items: center; justify-content: space-between; height: 2.8em; padding: 0 1.2em; }
.st2__head .logo { font-size: 1.25em; }
.st2__icons { display: flex; align-items: center; gap: .9em; color: var(--hel-d); }
.st2__icons .icon { width: 1.35em; height: 1.35em; }
.st2__cart { position: relative; display: grid; place-items: center; }
.st2__badge { position: absolute; top: -.45em; right: -.55em; display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--saf); color: var(--hel-d); font-size: .7em; font-weight: 800; }
.st2__badge > span { grid-area: 1 / 1; }
.st2__badge .bad { opacity: 0; visibility: hidden; }
.st2__banner { position: relative; display: flex; align-items: flex-start; justify-content: space-between; height: 5.6em; margin: .4em 1.2em 0; padding: .9em 1.1em 0; overflow: hidden; border-radius: 1em; background-color: var(--hel-d); color: var(--milk); line-height: 1.35; }
.st2__banner small { display: block; color: var(--saf); font-size: .72em; font-weight: 700; }
.st2__banner b { display: block; max-width: 9em; font-size: .9em; font-weight: 800; }
.st2__banner .bag { margin-top: .4em; }
.st2__chips { display: flex; gap: .4em; padding: .8em 1.2em .2em; }
.st2__chips i { padding: .35em .85em; border-radius: 1em; background: var(--u-bg); color: var(--u-mut); font-size: .74em; font-weight: 700; white-space: nowrap; }
.st2__chips .on { background: var(--hel-d); color: #fff; }
.st2__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8em .7em; padding: .6em 1.2em; }
.sp { display: flex; flex-direction: column; gap: .05em; line-height: 1.3; }
.sp__img { position: relative; display: grid; place-items: center; height: 8.4em; overflow: hidden; border-radius: .9em; }
.sp__img .bag { font-size: .66em; }
.sp > b { margin-top: .45em; font-size: .78em; font-weight: 800; }
.sp > small { color: var(--u-mut); font-size: .66em; }
.sp__row { display: flex; align-items: center; justify-content: space-between; margin-top: .25em; }
.sp__row strong { color: var(--hel-d); font-size: .8em; font-weight: 800; }
.sp__row i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--hel-d); color: #fff; }
.sp__row .icon { width: 1em; height: 1em; stroke-width: 2.6; }
.fly { position: absolute; z-index: 20; width: 1.6em; height: 1.6em; margin: -.8em 0 0 -.8em; border-radius: 50%; background: var(--saf); box-shadow: 0 0 0 .2em #fff, 0 .3em .6em rgb(0 0 0 / .25); opacity: 0; visibility: hidden; }
.st2__sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; flex-direction: column; gap: .55em; height: 58%; padding: .6em 1.3em 2.4em; border-radius: 1.6em 1.6em 0 0; background: #fff; box-shadow: 0 -.6em 1.6em rgb(0 0 0 / .2); opacity: 0; visibility: hidden; }
.st2__st { font-size: 1.15em; font-weight: 800; }
.st2__line { display: flex; justify-content: space-between; font-size: .84em; font-weight: 600; }
.st2__line--mut { color: var(--u-mut); }
.st2__line--tot { padding-top: .5em; border-top: .08em dashed #d9e2e7; color: var(--hel-d); font-size: .95em; font-weight: 800; }
.st2__pay { display: flex; gap: .4em; }
.st2__pay i { padding: .35em .8em; border: .1em solid #d6e0e6; border-radius: .6em; font-size: .72em; font-weight: 800; }
.st2__pay .on { border-color: var(--hel-d); }
.st2__btn { margin-top: auto; height: 2.9em; }
.st2__done { position: absolute; top: 3.4em; left: 1em; right: 1em; z-index: 16; display: flex; align-items: center; gap: .6em; padding: .7em .9em; border-radius: 1.1em; background: #e3f3e8; box-shadow: 0 .5em 1.2em -.3em rgb(0 0 0 / .3); line-height: 1.35; }
.st2__done > .icon { width: 2.1em; height: 2.1em; padding: .42em; border-radius: 50%; background: var(--ok); color: #fff; stroke-width: 3; }
.st2__done b { display: block; color: var(--hel-d); font-size: .92em; font-weight: 800; }
.st2__done small { color: var(--ok); font-size: .72em; font-weight: 600; }
.notif { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1em; padding: 0 1.3em; border-radius: 1.4em; background: rgb(255 255 255 / .95); font-size: .5em; }
.notif .mark-tile { width: 3.2em; height: 3.2em; }
.notif__txt { line-height: 1.4; }
.notif__txt b { display: block; font-size: 1.05em; font-weight: 800; }
.notif__txt small { color: var(--u-mut); font-size: .86em; }
.notif__t { align-self: start; margin-top: 1.1em; color: var(--u-faint); font-size: .8em; }
.ord { display: flex; flex-direction: column; gap: 1.1em; height: 100%; padding: 1.4em 1.6em; background: #fff; }
.ord__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
.ord__kpis span { display: flex; flex-direction: column; padding: .8em .9em; border-radius: .9em; background: var(--u-bg); line-height: 1.35; }
.ord__kpis small { color: var(--u-mut); font-size: .82em; }
.ord__kpis b { font-size: 1.35em; font-weight: 800; }
.ord__table { display: flex; flex-direction: column; }
.ord__row { display: grid; grid-template-columns: 4.4em minmax(0, 1.4fr) 1fr auto; align-items: center; gap: .8em; padding: .7em .6em; overflow: hidden; border-top: .08em solid var(--u-line); font-size: .92em; }
.ord__row--head { border-top: 0; color: var(--u-faint); font-size: .78em; font-weight: 700; }
.ord__row b { font-weight: 800; }
.ord__row > span:nth-child(2) { display: flex; align-items: center; gap: .5em; font-weight: 600; }
.ord__row .av { width: 2em; height: 2em; font-size: .8em; }
.ord__row .ui-chip { font-size: .78em; }
.ord__row--new { border-radius: .7em; background: #fbf6df; }

/* ---------- 11 self ordering: phone, kitchen screen, printer, pickup screen ---------- */
.so2__item, .so2__status { position: absolute; top: 3.3em; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 0 1.2em 2.4em; }
.so2__item { opacity: 0; visibility: hidden; }
.so2__img { position: relative; flex: none; height: 10.5em; border-radius: 1.1em; }
.so2__img > .latte { position: absolute; }
.so2__img small { position: absolute; top: .7em; right: .7em; padding: .15em .6em; border-radius: 1em; background: #fff; font-size: .7em; font-weight: 800; }
.so2__title { display: flex; align-items: center; justify-content: space-between; margin-top: .9em; }
.so2__title b { font-size: 1.15em; font-weight: 800; }
.so2__price { display: inline-grid; color: var(--hel-d); font-size: .95em; font-weight: 800; }
.so2__price > span { grid-area: 1 / 1; }
.so2__price .bad { opacity: 0; visibility: hidden; }
.so2__desc { margin-top: .15em; color: var(--u-mut); font-size: .76em; }
.so2__seg { display: grid; grid-template-columns: 1fr 1fr; gap: .3em; margin-top: .8em; padding: .3em; border-radius: .8em; background: var(--u-bg); }
.so2__seg i { display: flex; align-items: center; justify-content: center; gap: .3em; height: 2.2em; border-radius: .6em; color: var(--u-mut); font-size: .8em; font-weight: 700; }
.so2__seg .on { background: #fff; color: var(--hel-d); box-shadow: 0 .1em .3em rgb(0 0 0 / .1); }
.so2__seg .icon { width: 1.1em; height: 1.1em; }
.so2__lbl { margin-top: .9em; color: var(--u-mut); font-size: .72em; font-weight: 800; }
.so2__ex { display: flex; align-items: center; justify-content: space-between; padding: .7em 0; border-bottom: .08em solid var(--u-line); font-size: .86em; font-weight: 600; }
.so2__ex small { color: var(--u-mut); }
.so2__chk { display: grid; place-items: center; width: 1.5em; height: 1.5em; border: .12em solid #b7c7d1; border-radius: .4em; background: #fff; color: #fff; }
.so2__ex:not(.so2__ex--off) .so2__chk { border-color: var(--hel); background: var(--hel); }
.so2__chk .icon { width: 1em; height: 1em; stroke-width: 3; }
.so2__btn { margin-top: auto; height: 2.9em; }
.so2__pay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; display: flex; flex-direction: column; gap: .5em; height: 44%; padding: .6em 1.3em 2.4em; border-radius: 1.6em 1.6em 0 0; background: #fff; box-shadow: 0 -.6em 1.6em rgb(0 0 0 / .22); opacity: 0; visibility: hidden; }
.so2__pay > b { font-size: 1em; font-weight: 800; }
.so2__amt { color: var(--hel-d); font-size: 2em; font-weight: 800; line-height: 1.2; }
.so2__card { display: inline-flex; align-items: center; gap: .4em; color: var(--u-mut); font-size: .8em; font-weight: 600; }
.so2__card .icon { width: 1.2em; height: 1.2em; }
.so2__status { align-items: center; text-align: center; }
.so2__status > small:first-child { margin-top: 1.2em; color: var(--u-mut); font-size: .84em; }
.so2__no { color: var(--hel-d); font-size: 4.6em; font-weight: 800; line-height: 1.1; }
.so2__steps { display: flex; flex-direction: column; gap: .5em; width: 100%; margin-top: 1em; }
.so2__step { display: flex; align-items: center; gap: .6em; padding: .65em .8em; border-radius: .8em; background: var(--u-bg); color: var(--u-mut); font-size: .84em; font-weight: 700; }
.so2__step i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #dfe6ea; color: #fff; }
.so2__step .icon { width: 1em; height: 1em; stroke-width: 3; }
.so2__step.is-on { background: var(--hel-l); color: var(--hel-d); }
.so2__step.is-on i { background: var(--hel); }
.so2__step.is-ready { background: var(--ok-l); color: var(--ok); }
.so2__step.is-ready i { background: var(--ok); }
.so2__sum { display: flex; align-items: center; gap: .6em; width: 100%; margin-top: .9em; padding: .6em .8em; border-radius: .8em; background: #f7f9fa; text-align: start; line-height: 1.35; }
.so2__sum .latte { flex: none; font-size: .4em; }
.so2__sum b { display: block; font-size: .8em; font-weight: 800; }
.so2__sum small { color: var(--u-mut); font-size: .7em; }
.so2__note { margin-top: auto; color: var(--u-mut); font-size: .76em; }
.so2__status .so2__btn2 { margin-top: .6em; }
.kds { position: absolute; inset: 0; padding: .45em; border-radius: 1.1em; background: linear-gradient(155deg, #3a4752, #11191f 60%); box-shadow: 0 1.6em 3em -1.4em rgb(17 25 31 / .6); }
.kds__screen { display: flex; flex-direction: column; gap: 1.2em; height: 100%; padding: 1.5em 1.7em; border-radius: 1.4em; background: #131c22; color: #e8eef1; font-size: .5em; }
.kds__head { display: flex; align-items: center; gap: 1em; }
.kds__head b { flex: 1; font-size: 1.2em; font-weight: 800; }
.kds__head span { display: inline-flex; align-items: center; gap: .4em; color: #5fd28f; font-size: .86em; font-weight: 700; }
.kds__head small { color: #8fa0aa; font-size: .86em; }
.kds__cols { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1em; }
.kds__col { display: flex; flex-direction: column; gap: .8em; }
.kds__lbl { padding: .4em .8em; border-radius: .6em; font-size: .86em; font-weight: 800; }
.kds__lbl--new { background: rgb(226 169 59 / .18); color: #f0c264; }
.kds__lbl--prep { background: rgb(134 169 145 / .18); color: #a9cdb4; }
.kds__lbl--ready { background: rgb(95 210 143 / .16); color: #6fdc9c; }
.tk { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .3em; padding: .8em .9em; border-inline-start: .3em solid #4b5b65; border-radius: .8em; background: #1e2a31; line-height: 1.35; }
.tk__h { display: flex; align-items: baseline; justify-content: space-between; }
.tk__h b { font-size: 1.5em; font-weight: 800; }
.tk__h small { color: #8fa0aa; font-size: .82em; font-weight: 700; }
.tk__i { font-size: .9em; }
.tk__i--x { color: #f0c264; }
.tk--mine { z-index: 2; border-color: #5fd28f; background: #20352b; }
.tk--late { border-color: var(--saf); }
.tk--done { opacity: .55; }
.k-printer { z-index: 3; }
.printer2 { position: absolute; inset: 0; border-radius: .8em .8em .4em .4em; background: linear-gradient(#eef2f4, #cfd8dd); box-shadow: 0 .8em 1.2em -.6em rgb(0 0 0 / .45); }
.printer2 i { position: absolute; left: 18%; right: 18%; bottom: .9em; height: .36em; border-radius: 1em; background: #26333b; }
.rcpt { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .12em; padding: .9em .8em 1.4em; background: #fff; line-height: 1.35; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / .8em 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / .8em 100%; }
.rcpt .logo { margin-bottom: .2em; font-size: .8em; }
.rcpt > b { font-size: .9em; font-weight: 800; }
.rcpt span { color: var(--u-mut); font-size: .56em; font-weight: 600; }
.rcpt i { margin: .25em 0; border-top: .08em dashed #c9d4da; }
.rcpt small { color: var(--ok); font-size: .52em; font-weight: 800; }
.pickup { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em; border-radius: .9em; background: var(--hel-d); color: var(--milk); text-align: center; }
.pickup small { color: rgb(246 243 236 / .72); font-size: .6em; font-weight: 700; }
.pickup b { color: var(--saf); font-size: 3.6em; font-weight: 800; line-height: 1.05; }
.pickup span { color: rgb(246 243 236 / .6); font-size: .66em; font-weight: 700; }

/* ---------- 12 app: loyalty home, order tracking, store listing ---------- */
.ap__hi { display: flex; align-items: center; justify-content: space-between; padding: .3em 1.2em 0; line-height: 1.3; }
.ap__hi small { display: block; color: var(--u-mut); font-size: .76em; }
.ap__hi b { font-size: 1.3em; font-weight: 800; }
.ap__hi .mark-tile { width: 2.5em; height: 2.5em; border-radius: 50%; }
.ap__loyal { display: flex; flex-direction: column; gap: .7em; margin: .9em 1.2em 0; padding: 1em 1.1em; border-radius: 1.2em; background-color: var(--hel-d); color: var(--milk); }
.ap__lh { display: flex; align-items: baseline; justify-content: space-between; }
.ap__lh b { font-size: .95em; font-weight: 800; }
.ap__lh small { display: inline-grid; color: var(--saf); font-size: .78em; font-weight: 800; }
.ap__lh small > span { grid-area: 1 / 1; }
.ap__lh .bad { opacity: 0; visibility: hidden; }
.ap__stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45em; }
.ap__stamps i { aspect-ratio: 1; border: .12em dashed rgb(246 243 236 / .4); border-radius: 50%; }
.ap__stamps i.on { border: 0; background: radial-gradient(circle, var(--hel-d) 0 24%, transparent 25%), var(--saf); }
.ap__ln { color: rgb(246 243 236 / .8); font-size: .74em; }
.ap__acts { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .45em; padding: .9em 1.2em 0; }
.ap__act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; height: 4.4em; border-radius: 1em; background: var(--u-bg); color: var(--hel-d); font-size: .74em; font-weight: 800; }
.ap__act .icon { width: 1.5em; height: 1.5em; }
.ap__act--main { background: var(--saf); }
.ap__sec { padding: 1em 1.2em .3em; font-size: .9em; font-weight: 800; }
.ap__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7em; margin: 0 1.2em; padding: .55em 0; border-bottom: .08em solid var(--u-line); line-height: 1.35; }
.ap__row .latte { font-size: .4em; }
.ap__row b { display: block; font-size: .84em; font-weight: 800; }
.ap__row small { color: var(--u-mut); font-size: .7em; }
.ap__row > i { padding: .25em .6em; border-radius: 1em; background: var(--hel-l); color: var(--hel-d); font-size: .7em; font-weight: 800; }
.ap__tabs { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); height: 4.8em; padding: .55em .6em 1.5em; border-top: .08em solid var(--u-line); background: rgb(255 255 255 / .96); }
.ap__tabs span { display: flex; flex-direction: column; align-items: center; gap: .15em; color: var(--u-faint); font-size: .6em; font-weight: 700; }
.ap__tabs .icon { width: 1.9em; height: 1.9em; }
.ap__tabs .on { color: var(--hel-d); }
.ap__bar { display: flex; align-items: center; justify-content: space-between; padding: .2em 1.2em .6em; }
.ap__bar b { font-size: 1.05em; font-weight: 800; }
.ap__bar .icon { width: 1.3em; height: 1.3em; color: var(--u-mut); }
.ap__map { position: relative; height: 9em; margin: 0 1.2em; overflow: hidden; border-radius: 1.1em; background: #e7ece9; }
.ap__map .mapc__roads { stroke-width: 6; }
.ap__map .mpin { width: 2.8em; height: 2.8em; margin: -3em 0 0 -1.4em; }
.ap__map .mpin svg { width: 1.6em; height: 1.6em; }
.ap__me { position: absolute; left: 24%; top: 70%; width: 1.1em; height: 1.1em; border-radius: 50%; background: #2f7ae5; box-shadow: 0 0 0 .25em #fff, 0 0 0 .8em rgb(47 122 229 / .2); }
.ap__status { display: flex; flex-direction: column; gap: .35em; margin: .9em 1.2em 0; padding: 1em 1.1em; border-radius: 1.1em; background: #f7f9fa; }
.ap__slot { display: grid; color: var(--hel-d); font-size: 1.25em; font-weight: 800; }
.ap__slot > span { grid-area: 1 / 1; }
.ap__slot .bad { opacity: 0; visibility: hidden; }
.ap__slot .ok { color: var(--ok); }
.ap__status small { color: var(--u-mut); font-size: .74em; }
.ap__trk { position: relative; height: .45em; margin-top: .5em; overflow: hidden; border-radius: 1em; background: #e2e8e4; }
.ap__trk i { position: absolute; inset: 0; border-radius: 1em; background: var(--ok); transform-origin: right center; }
.ap__steps { display: flex; justify-content: space-between; color: var(--u-mut); font-size: .66em; font-weight: 700; }
.ap__code { display: flex; align-items: center; justify-content: space-between; margin: .8em 1.2em 0; padding: .8em 1.1em; border-radius: 1.1em; background: var(--saf-l); }
.ap__code small { color: #8a5d12; font-size: .78em; font-weight: 700; }
.ap__code b { color: var(--hel-d); font-size: 1.8em; font-weight: 800; line-height: 1; }
.ap__go { margin: auto 1.2em 2.4em; height: 2.9em; }
.push2 { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8em; padding: 0 1em; border-radius: 1.4em; background: rgb(250 251 251 / .97); box-shadow: 0 1em 2em -.8em rgb(0 0 0 / .45); font-size: .5em; line-height: 1.35; }
.push2 .mark-tile { width: 2.9em; height: 2.9em; }
.push2 b { display: block; font-size: 1em; font-weight: 800; }
.push2 small { color: var(--u-mut); font-size: .86em; }
.push2__t { align-self: start; margin-top: .9em; color: var(--u-faint); }
.listing { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: .6em; padding: 1.8em 1.4em; border-radius: 1.6em; background: #fff; font-size: .5em; text-align: center; }
.listing__icon { width: 6em; height: 6em; box-shadow: 0 .6em 1.2em -.5em rgb(0 0 0 / .4); }
.listing__name { font-size: 1.5em; font-weight: 800; }
.listing__sub { color: var(--u-mut); font-size: .86em; line-height: 1.5; }
.listing__meta { display: flex; gap: 1.6em; }
.listing__meta > span { display: flex; flex-direction: column; align-items: center; gap: .2em; }
.listing__meta b { font-size: 1.05em; font-weight: 800; }
.listing__meta small { color: var(--u-mut); font-size: .76em; }
.listing__meta .stars { width: 5em; height: .9em; background-size: 1em .9em; }
.listing__get { width: 100%; height: 2.6em; }
.listing__shots { display: grid; flex: 1; grid-template-columns: 1fr 1fr; gap: .6em; width: 100%; }
.listing__shots i { border-radius: 1em; background-color: var(--hel-d); box-shadow: inset 0 0 0 .35em #f0f3f1; }
.listing__shots i + i { background: linear-gradient(#f7f9fa 0 30%, var(--saf-l) 30% 52%, #f7f9fa 52%); }
.listing__os { display: flex; gap: .4em; }
.listing__os i { padding: .3em .8em; border-radius: 1em; background: var(--u-bg); font-size: .78em; font-weight: 700; }

/* ---------- 13 customer management ---------- */
.crm2 { display: grid; grid-template-columns: 12em minmax(0, 1fr) 18.5em; height: 100%; background: #f6f8f9; }
.crm2__side { display: flex; flex-direction: column; gap: 1.4em; padding: 1.5em 1.1em; background: var(--hel-d); color: var(--milk); }
.crm2__side .logo { color: var(--milk); font-size: 1.3em; --logo-mark: var(--saf); --logo-seam: var(--hel-d); }
.crm2__nav { display: flex; flex-direction: column; gap: .3em; }
.crm2__nav i { display: flex; align-items: center; gap: .6em; padding: .6em .7em; border-radius: .7em; color: rgb(246 243 236 / .7); font-size: .88em; font-weight: 600; }
.crm2__nav i.on { background: rgb(246 243 236 / .12); color: #fff; }
.crm2__nav .icon { width: 1.25em; height: 1.25em; }
.crm2__me { display: flex; align-items: center; gap: .6em; margin-top: auto; line-height: 1.3; }
.crm2__me .av { width: 2.4em; height: 2.4em; }
.crm2__me b { display: block; font-size: .82em; }
.crm2__me small { color: rgb(246 243 236 / .6); font-size: .72em; }
.crm2__main { display: flex; flex-direction: column; gap: 1em; min-width: 0; padding: 1.5em 1.6em; }
.crm2__top { display: flex; align-items: center; gap: .9em; }
.crm2__top > span:first-child { line-height: 1.3; }
.crm2__top b { display: block; font-size: 1.35em; font-weight: 800; }
.crm2__top small { color: var(--u-mut); font-size: .84em; }
.crm2__search { flex: 1; display: flex; align-items: center; gap: .5em; height: 2.6em; padding: 0 .9em; border: .08em solid #dfe5e9; border-radius: .8em; background: #fff; color: var(--u-faint); font-size: .86em; }
.crm2__search .icon { width: 1.2em; height: 1.2em; }
.crm2__top .ui-btn { height: 2.6em; font-size: .86em; }
.crm2__chips { display: flex; gap: .45em; }
.crm2__chips i { padding: .35em .95em; border: .08em solid #dfe5e9; border-radius: 1.2em; background: #fff; color: var(--u-mut); font-size: .82em; font-weight: 700; }
.crm2__chips .on { border-color: var(--hel-d); background: var(--hel-d); color: #fff; }
.crm2__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
.crm2__kpis > span { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: .8em 1em; border-radius: .9em; background: #fff; line-height: 1.35; }
.crm2__kpis small { color: var(--u-mut); font-size: .82em; }
.crm2__kpis b { color: var(--hel-d); font-size: 1.4em; font-weight: 800; }
.spark { position: absolute; left: .9em; bottom: .9em; width: 5em; height: 1.8em; overflow: visible; fill: none; stroke: var(--hel); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1 1; }
.crm2__table { display: flex; flex-direction: column; overflow: hidden; border-radius: .9em; background: #fff; }
.crm2__row { display: grid; grid-template-columns: minmax(0, 1.7fr) .7fr .9fr 1fr; align-items: center; gap: .6em; height: 3.2em; padding: 0 1em; overflow: hidden; border-top: .08em solid #eef2f4; font-size: .88em; }
.crm2__row--head { height: 2.4em; border-top: 0; background: #f7f9fa; color: var(--u-faint); font-size: .76em; font-weight: 700; }
.crm2__row.is-sel { border-inline-start: .3em solid var(--hel); background: #f3f8f4; }
.crm2__who { display: flex; align-items: center; gap: .6em; line-height: 1.3; }
.crm2__who .av { width: 2.2em; height: 2.2em; font-size: .86em; }
.crm2__who b { display: block; font-weight: 800; }
.crm2__who small { color: var(--u-faint); font-size: .8em; direction: ltr; }
.crm2__row .ui-chip { justify-self: start; font-size: .78em; }
.crm2__row--out { height: 0; border-top-width: 0; opacity: 0; visibility: hidden; }
.crm2__panel { display: flex; flex-direction: column; gap: 1em; padding: 1.6em 1.4em; border-inline-start: .08em solid var(--u-line); background: #fff; }
.crm2__pav { display: flex; flex-direction: column; align-items: center; gap: .3em; line-height: 1.35; text-align: center; }
.crm2__pav .av { width: 4.4em; height: 4.4em; font-size: 1.2em; }
.crm2__pav b { font-size: 1.15em; font-weight: 800; }
.crm2__pav small { color: var(--u-mut); font-size: .8em; }
.crm2__pst { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; text-align: center; }
.crm2__pst span { display: flex; flex-direction: column; padding: .6em .2em; border-radius: .7em; background: var(--u-bg); line-height: 1.3; }
.crm2__pst b { font-size: 1.05em; font-weight: 800; }
.crm2__pst small { color: var(--u-mut); font-size: .7em; }
.crm2__fav { display: flex; flex-direction: column; padding: .7em .9em; border-radius: .8em; background: var(--saf-l); line-height: 1.4; }
.crm2__fav small { color: #8a5d12; font-size: .76em; font-weight: 700; }
.crm2__fav b { color: var(--hel-d); font-size: .9em; font-weight: 800; }
.crm2__chart { flex: 1; display: flex; flex-direction: column; gap: .5em; min-height: 0; }
.crm2__chart small { color: var(--u-mut); font-size: .78em; }
.crm2__bars { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: .5em; min-height: 0; }
.crm2__bars i { display: block; height: calc(var(--v) * 100%); border-radius: .35em .35em .1em .1em; background: linear-gradient(var(--hel-m), var(--hel)); transform-origin: bottom; }
.crm2__send { height: 2.7em; }
.toast2 { position: absolute; inset: 0; display: flex; align-items: center; gap: .6em; padding: 0 1em; border-radius: .9em; background: var(--u-ink); color: #fff; font-size: .5em; box-shadow: 0 1em 2em -.8em rgb(0 0 0 / .5); }
.toast2 .icon { width: 1.4em; height: 1.4em; color: #5fd28f; }
.toast2 span { flex: 1; font-weight: 700; }
.toast2 small { color: #9fb0ba; font: 600 .86em/1 ui-monospace, "SF Mono", Menlo, monospace; direction: ltr; }

.st2 .ap__tabs { z-index: 10; }
.so2__eta { display: flex; align-items: center; gap: .6em; width: 100%; margin-top: .5em; padding: .6em .8em; border-radius: .8em; background: var(--saf-l); text-align: start; line-height: 1.3; }
.so2__eta > .icon { width: 1.5em; height: 1.5em; color: #8a5d12; }
.so2__eta > span { flex: 1; }
.so2__eta small { display: block; color: #8a5d12; font-size: .7em; font-weight: 700; }
.so2__eta b { color: var(--hel-d); font-size: .95em; font-weight: 800; }
.so2__eta i { padding: .2em .6em; border-radius: 1em; background: #fff; color: var(--hel-d); font-size: .7em; font-weight: 800; }
.so2__btn2 { width: 100%; height: 2.7em; margin-top: .6em; }
.ap__promo { display: flex; align-items: center; justify-content: space-between; margin: .9em 1.2em 0; padding: .9em 1em; border-radius: 1.1em; background-color: var(--saf); color: var(--hel-d); line-height: 1.35; }
.ap__promo small { display: block; font-size: .7em; font-weight: 700; }
.ap__promo b { font-size: .88em; font-weight: 800; }
.ap__promo .icon { width: 1.8em; height: 1.8em; }
.ap__order { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7em; margin: .8em 1.2em 0; padding: .6em .8em; border-radius: 1em; background: #f7f9fa; line-height: 1.35; }
.ap__order .latte { font-size: .42em; }
.ap__order b { display: block; font-size: .84em; font-weight: 800; }
.ap__order small { color: var(--u-mut); font-size: .7em; }
.ap__order > i { color: var(--hel-d); font-size: .8em; font-weight: 800; }
.listing__shots i { position: relative; overflow: hidden; }
.listing__shots .ls1 b { position: absolute; top: 14%; left: 12%; right: 12%; height: 22%; border-radius: .5em; background: var(--saf); }
.listing__shots .ls1 em { position: absolute; top: 46%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--saf); }
.listing__shots .ls1 em:nth-of-type(1) { left: 12%; }
.listing__shots .ls1 em:nth-of-type(2) { left: 28%; }
.listing__shots .ls1 em:nth-of-type(3) { left: 44%; }
.listing__shots .ls1 em:nth-of-type(4) { left: 60%; }
.listing__shots .ls1 em:nth-of-type(5) { left: 76%; opacity: .35; }
.listing__shots .ls2 { display: grid; place-items: center; background: #f7f9fa; box-shadow: inset 0 0 0 .35em #f0f3f1; }
.listing__shots .ls2 b { color: var(--hel-d); font-size: 2.4em; font-weight: 800; }
.listing__shots .ls2 em { position: absolute; left: 14%; right: 14%; bottom: 22%; height: .45em; border-radius: 1em; background: linear-gradient(90deg, var(--ok) 70%, #e2e8e4 70%); }
.listing__shots i + i { background: #f7f9fa; }
.crm2__chart { flex: none; }
.crm2__bars { flex: none; height: 9em; }
.crm2__send { margin-top: auto; }
.crm2__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: .8em 1em; border-top: .08em solid #eef2f4; color: var(--u-mut); font-size: .8em; }
.crm2__table { flex: 1; }
.crm2__pg { display: flex; gap: .3em; }
.crm2__pg i { display: grid; place-items: center; width: 2em; height: 2em; border-radius: .5em; font-weight: 700; }
.crm2__pg .on { background: var(--hel-d); color: #fff; }

.ord .adm__chart { flex: none; height: 12em; }