/* Fioreva Tech · mobile app module
   A CSS phone with iOS and Android chrome around one app. Sizes inside the phone are in
   screen pixels of a 188 × 392 display, on a 4 px rhythm. */

[data-module="app"] { container: app-mod / inline-size; }

.app-stage {
  --ph-w: 200px;
  --ph-h: 404px;
  --app-scr: #0a0a0a;
  --app-card: #121212;
  --app-hair: #232323;
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 208px) var(--ph-w) minmax(0, 208px);
  grid-template-areas: "ctl dev log";
  justify-content: center;
  align-content: center;
  column-gap: 32px;
  padding: 14px 20px;
}

/* ---------- side rails ---------- */
.app-ctl, .app-log {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  padding: 4px 0 2px;
}
.app-ctl { grid-area: ctl; }
.app-log { grid-area: log; }
.app-ctl-top { display: grid; gap: 24px; }
.app-label {
  margin-bottom: 10px;
  font: 500 .6875rem/1 var(--mono);
  letter-spacing: .01em;
  color: var(--fg-3);
}
.app-hint { margin-top: 10px; padding-left: 11px; font: 400 .6875rem/1.5 var(--mono); color: var(--fg-3); }
.app-note {
  display: grid;
  gap: 4px;
  font: 400 .8125rem/1.45 var(--sans);
  color: var(--fg-2);
}
.app-note span { font: 500 .6875rem/1.4 var(--mono); color: var(--fg-3); }

/* platform switch */
.app-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  background: #000;
}
.app-seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 2);
  border: 1px solid var(--line-3);
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, .06);
  transition: transform .45s var(--ease);
}
.app-stage[data-platform="android"] .app-seg-thumb { transform: translateX(100%); }
.app-seg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--fg-3);
  font: 600 .8125rem/1 var(--mono);
  transition: color .2s;
}
.app-seg-btn::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--line-3);
  transition: background-color .25s;
}
.app-seg-btn:hover, .app-seg-btn[aria-pressed="true"] { color: var(--fg); }
.app-seg-btn:active, .app-dot:active { background: rgba(255, 255, 255, .08); }
.app-seg-btn[aria-pressed="true"]::before { background: var(--red); }

/* screen buttons */
.app-dots { display: grid; gap: 2px; }
.app-dot {
  position: relative;
  display: grid;
  grid-template-columns: 8px auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 36px;
  padding: 0 10px 0 11px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--fg-2);
  font: 500 .8125rem/1 var(--mono);
  text-align: left;
  transition: background-color .2s, color .2s;
}
.app-dot:hover { color: var(--fg); background: rgba(255, 255, 255, .04); }
.app-dot[aria-current="true"] { color: var(--fg); background: rgba(255, 255, 255, .06); }
.app-dot-mark {
  width: 8px;
  height: 8px;
  border: 1px solid var(--line-3);
  transition: background-color .25s, border-color .25s;
}
.app-dot[aria-current="true"] .app-dot-mark { background: var(--red); border-color: var(--red); }
.app-dot-num { font-size: .6875rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.app-dot-badge {
  padding: 3px 5px;
  border-radius: 2px;
  background: var(--mint);
  color: #000;
  font: 600 .6875rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

/* push log; the platform word changes with the switch */
.app-chan { color: var(--fg-2); }
.app-log-list li {
  display: grid;
  gap: 4px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  animation: app-rise .5s var(--ease) backwards;
}
.app-log-list li:first-child { border-top-color: var(--line-2); }
.app-log-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: 500 .6875rem/1 var(--mono);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.app-log-meta time { display: inline-flex; align-items: center; gap: 8px; }
.app-log-meta time::before { content: ""; width: 6px; height: 6px; background: var(--line-3); }
.app-log-list li:first-child .app-log-meta time::before { background: var(--red); }
.app-log-t { font: 500 .8125rem/1.35 var(--sans); color: var(--fg); }
.app-log-b { font: 400 .75rem/1.4 var(--sans); color: var(--fg-2); }
.app-log-empty {
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  font: 400 .8125rem/1.5 var(--sans);
  color: var(--fg-3);
}

/* ---------- the phone ---------- */
.app-dev { grid-area: dev; display: grid; place-items: center; min-width: 0; }
.app-phone {
  position: relative;
  flex: none;
  width: var(--ph-w);
  height: var(--ph-h);
  padding: 5px;
  border: 1px solid var(--line-3);
  border-radius: 34px;
  background: #000;
  transition: border-radius .55s var(--ease), border-color .7s, box-shadow .9s var(--ease);
}
.app-stage[data-platform="android"] .app-phone { border-radius: 22px; }
.app-phone.is-ping {
  border-color: rgba(255, 0, 37, .75);
  box-shadow: 0 0 56px -12px rgba(255, 0, 37, .6);
  transition-duration: .55s, .15s, .25s;
}
.app-phone:has(.app-view:focus-visible) { border-color: var(--mint); }

/* hardware keys: iOS has action and volume on the left, side button on the right;
   the Pixel-style Android has power and a volume rocker on the right */
.app-key {
  position: absolute;
  width: 3px;
  border-radius: 1px;
  background: var(--line-3);
  opacity: 0;
  transition: opacity .2s;
}
.app-key-a { left: -4px; top: 64px; height: 14px; }
.app-key-b { left: -4px; top: 92px; height: 26px; }
.app-key-c { left: -4px; top: 124px; height: 26px; }
.app-key-d { right: -4px; top: 104px; height: 40px; }
.app-key-e { right: -4px; top: 84px; height: 18px; }
.app-key-f { right: -4px; top: 114px; height: 44px; }
.app-stage[data-platform="ios"] .app-key-a,
.app-stage[data-platform="ios"] .app-key-b,
.app-stage[data-platform="ios"] .app-key-c,
.app-stage[data-platform="ios"] .app-key-d,
.app-stage[data-platform="android"] .app-key-e,
.app-stage[data-platform="android"] .app-key-f { opacity: 1; transition: opacity .3s .3s; }

.app-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
  background: var(--app-scr);
  color: var(--fg);
  font-family: var(--sans);
  transition: border-radius .55s var(--ease);
}
.app-stage[data-platform="android"] .app-screen { border-radius: 16px; }

.app-px { display: block; flex: none; }
.app-px .p-r { fill: var(--red); }
.app-px .p-d { fill: var(--red-deep); }
.app-px .p-w { fill: var(--pure); }
.app-px .p-c { fill: var(--cream); }
.app-px .p-g { fill: var(--gray); }
.app-px .p-m { fill: var(--mint); }
.app-px .p-k { fill: var(--line-3); }

/* status bar */
.app-status { position: absolute; inset: 0 0 auto; z-index: 4; height: 26px; pointer-events: none; }
.app-time {
  position: absolute;
  top: 9px;
  left: 23px;
  font: 600 10px/10px var(--sans);
  font-variant-numeric: tabular-nums;
  transition: transform .5s var(--ease);
}
.app-stage[data-platform="android"] .app-time { transform: translateX(-9px); font-weight: 500; }
.app-ongoing {
  position: absolute;
  top: 10px;
  left: 42px;
  color: var(--red);
  opacity: 0;
  transition: opacity .3s;
}
.app-stage[data-platform="android"] .app-screen.has-ongoing .app-ongoing { opacity: 1; }
.app-sys {
  position: absolute;
  top: 10px;
  right: 11px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  color: var(--fg);
  opacity: 0;
  transition: opacity .15s;
}
.app-sys-and { top: 9px; right: 12px; gap: 4px; }
.app-stage[data-platform="ios"] .app-sys-ios,
.app-stage[data-platform="android"] .app-sys-and { opacity: 1; transition: opacity .25s .25s; }
.app-bat {
  position: relative;
  display: flex;
  width: 17px;
  height: 8px;
  margin-left: 2px;
  padding: 1px;
  border: 1px solid rgba(244, 244, 242, .5);
  border-radius: 3px;
}
.app-bat::after {
  content: "";
  position: absolute;
  top: 2px;
  right: -3px;
  width: 2px;
  height: 2px;
  background: rgba(244, 244, 242, .5);
}
.app-bat i { width: 72%; border-radius: 1px; background: var(--fg); }
.app-bat-v { width: 7px; height: 11px; margin-left: 0; align-items: flex-end; border-radius: 2px; }
.app-bat-v::after { top: -3px; right: auto; left: 1px; width: 3px; }
.app-bat-v i { width: 100%; height: 72%; }

/* dynamic island on iOS morphs into the punch-hole camera on Android */
.app-island {
  position: absolute;
  z-index: 5;
  top: 6px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 56px;
  height: 16px;
  padding: 0 7px;
  border: 1px solid #1e1e1e;
  border-radius: 9px;
  background: #000;
  transform: translateX(-50%);
  transition: width .5s var(--ease), height .5s var(--ease), top .5s var(--ease), border-radius .5s var(--ease), padding .5s var(--ease);
}
.app-island::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: #23232b;
  opacity: 0;
  transition: opacity .3s;
}
.app-stage[data-platform="android"] .app-island { top: 8px; width: 10px; height: 10px; padding: 0; border-radius: 50%; }
.app-stage[data-platform="android"] .app-island::after { opacity: 1; transition-delay: .25s; }
.app-stage[data-platform="ios"] .app-island.is-act { width: 66px; padding: 0 6px; }
.app-island-l, .app-island-t { opacity: 0; transition: opacity .2s; }
.app-stage[data-platform="ios"] .app-island.is-act .app-island-l,
.app-stage[data-platform="ios"] .app-island.is-act .app-island-t { opacity: 1; transition-delay: .3s; }
.app-island-l { display: grid; place-items: center; width: 7px; height: 7px; }
.app-island-dot { width: 6px; height: 6px; background: var(--red); }
.app-stage.is-live .app-island[data-kind="eta"] .app-island-dot { animation: app-blink 1.2s steps(1) infinite; }
.app-island-ok { display: none; color: var(--mint); }
.app-island[data-kind="done"] .app-island-dot { display: none; }
.app-island[data-kind="done"] .app-island-ok { display: block; }
.app-island-t {
  font: 600 7.5px/1 var(--mono);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fg);
}
.app-island[data-kind="done"] .app-island-t { color: var(--mint); }

/* ---------- screens ---------- */
.app-view:focus-visible { border-radius: 10px; outline-offset: -4px; }
.app-view {
  position: absolute;
  top: 26px;
  right: 0;
  bottom: 58px;
  left: 0;
  z-index: 1;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  outline-offset: -3px;
  transition: opacity .17s;
}
.app-view.is-grabbing { cursor: grabbing; }
.app-track { display: flex; height: 100%; transition: transform .5s var(--ease); }
.app-track.is-drag { transition: none; }
.app-pg {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 12px;
}
.app-screen.is-swap .app-view,
.app-screen.is-swap .app-tabbar { opacity: 0; }

/* header: large title on iOS, top app bar on Android */
.app-hd {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "sub" "title";
  align-content: end;
  row-gap: 5px;
  height: 52px;
  padding-bottom: 10px;
}
.app-hd-title {
  grid-area: title;
  font: 700 20px/1 var(--mono);
  letter-spacing: -.04em;
  white-space: nowrap;
  color: var(--fg);
}
.app-hd-title[data-brand-title] {
  overflow: hidden;
  text-overflow: ellipsis;
  /* long company names step the large title down so they still fit one line */
  font-size: clamp(11px, calc(164px / (var(--len, 10) * .56)), 20px);
}
.app-hd-sub { grid-area: sub; font: 500 8.5px/1 var(--mono); letter-spacing: .02em; color: var(--fg-3); }
.app-hd-ico { display: none; color: var(--fg-2); }
.app-stage[data-platform="android"] .app-hd {
  grid-template-columns: 14px minmax(0, 1fr) 14px;
  grid-template-areas: "menu title bell" "sub sub sub";
  align-content: start;
  align-items: center;
  column-gap: 12px;
  row-gap: 12px;
  padding: 9px 0 0;
}
.app-stage[data-platform="android"] .app-hd-ico { display: block; }
.app-stage[data-platform="android"] .app-hd-menu { grid-area: menu; }
.app-stage[data-platform="android"] .app-hd-bell { grid-area: bell; }
.app-stage[data-platform="android"] .app-hd-title { font: 600 13px/14px var(--mono); letter-spacing: -.02em; }
.app-stage[data-platform="android"] .app-hd-sub { font: 400 9.5px/1 var(--sans); letter-spacing: 0; color: var(--fg-2); }

.app-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.app-sec { font: 600 8.5px/1 var(--mono); letter-spacing: .02em; color: var(--fg-3); }

/* home */
.app-feat {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--app-hair);
  border-radius: 12px;
  background: var(--app-card);
}
.app-feat-art {
  display: grid;
  place-items: center;
  width: 44px;
  height: 54px;
  border: 1px solid #1b1b1b;
  border-radius: 8px;
  background: #000;
}
.app-feat-info { display: grid; align-content: center; gap: 4px; min-width: 0; }
.app-feat-tag { font: 500 8px/1 var(--mono); color: var(--fg-3); }
.app-feat-tag.is-low { color: var(--cream); }
.app-feat-tag.is-out { color: var(--red); }
.app-feat-name { font: 500 10.5px/1.2 var(--sans); white-space: nowrap; }
.app-feat-price { font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.app-buy {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--pure);
  color: #000;
  font: 600 10.5px/1 var(--sans);
  transition: background-color .2s, color .2s, border-radius .5s var(--ease), transform .12s;
}
.app-buy::before { content: ""; position: absolute; inset: -4px -2px; }
.app-buy:hover { background: var(--gray); }
.app-buy:active:not(.is-busy):not(.is-out), .app-ghost:active { transform: scale(.97); }
.app-stage button, .app-tab, .app-ntf { -webkit-tap-highlight-color: transparent; }
.app-buy:focus-visible { outline-offset: 2px; }
.app-stage[data-platform="android"] .app-buy { border-radius: 16px; }
.app-buy.is-busy { background: #1d1d1d; color: var(--fg-2); cursor: progress; }
.app-buy.is-out { background: #1d1d1d; color: var(--fg-2); cursor: not-allowed; }
.app-spin { display: none; gap: 2px; }
.app-buy.is-busy .app-spin { display: inline-flex; }
.app-spin i { width: 3px; height: 3px; background: var(--fg-2); }
.app-stage.is-live .app-spin i { animation: app-blink .9s steps(1) infinite; }
.app-stage.is-live .app-spin i:nth-child(2) { animation-delay: .3s; }
.app-stage.is-live .app-spin i:nth-child(3) { animation-delay: .6s; }

.app-chips { display: flex; gap: 6px; margin-right: -12px; overflow: hidden; }
.app-chip {
  flex: none;
  height: 22px;
  padding: 0 10px;
  border: 1px solid var(--app-hair);
  border-radius: 11px;
  font: 500 9px/20px var(--mono);
  color: var(--fg-2);
  transition: border-radius .5s var(--ease);
}
.app-chip.is-on { border-color: rgba(255, 0, 37, .65); background: rgba(255, 0, 37, .12); color: var(--fg); }
.app-stage[data-platform="android"] .app-chip { border-radius: 6px; }

.app-again, .app-recent { display: grid; gap: 7px; }
.app-again-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
  padding: 7px 10px 7px 7px;
  border: 1px solid var(--app-hair);
  border-radius: 10px;
  background: var(--app-card);
}
.app-again-art { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: #000; }
.app-again-txt { display: grid; gap: 4px; min-width: 0; }
.app-again-name { font: 500 9.5px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-again-meta { font: 400 8.5px/1 var(--mono); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.app-again-meta b { font-weight: 600; color: var(--fg-2); }

/* orders */
.app-empty {
  flex: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding-bottom: 20px;
  text-align: center;
}
.app-empty-art { margin-bottom: 8px; color: var(--line-3); }
.app-empty-t { font: 600 11px/1.2 var(--mono); }
.app-empty-b { max-width: 19ch; font: 400 9.5px/1.45 var(--sans); color: var(--fg-3); }
.app-ghost {
  position: relative;
  margin-top: 10px;
  height: 28px;
  padding: 0 14px;
  border: 1px solid var(--line-3);
  border-radius: 14px;
  background: transparent;
  color: var(--fg);
  font: 500 9.5px/1 var(--sans);
  transition: border-color .2s, border-radius .5s var(--ease), transform .12s;
}
.app-ghost::before { content: ""; position: absolute; inset: -6px -2px; }
.app-ghost:hover { border-color: var(--fg); }
.app-stage[data-platform="android"] .app-ghost { border-radius: 8px; }

.app-oc {
  padding: 10px;
  border: 1px solid var(--app-hair);
  border-radius: 12px;
  background: var(--app-card);
}
.app-oc.is-new { animation: app-rise .5s var(--ease) backwards; }
.app-oc-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font: 600 10.5px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
/* product, then how it was paid on its own line: "Debit card (NAPS)" and "Cash on delivery" stay whole */
.app-oc-sub {
  display: grid;
  gap: 3px;
  margin-top: 5px;
  font: 400 9px/1.2 var(--sans);
  color: var(--fg-3);
}
.app-oc-sub span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-oc-sub span:first-child { color: var(--fg-2); }
.app-steps { margin-top: 9px; padding-top: 5px; border-top: 1px solid var(--app-hair); }
.app-step {
  position: relative;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  height: 22px;
  font: 400 9.5px/1 var(--sans);
  color: var(--fg-3);
  transition: color .3s;
}
.app-step + .app-step::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 4px;
  width: 2px;
  height: 12px;
  background: var(--app-hair);
  transition: background-color .4s;
}
.app-step[data-state="done"] + .app-step::before { background: rgba(0, 255, 194, .4); }
.app-step-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  border: 1px solid var(--line-3);
  border-radius: 2px;
  color: #000;
  transition: background-color .3s, border-color .3s;
}
.app-step-mark .app-px { opacity: 0; }
.app-step[data-state="done"], .app-step[data-state="on"], .app-step[data-state="busy"] { color: var(--fg); }
.app-step[data-state="done"] .app-step-mark { border-color: var(--mint); background: var(--mint); }
.app-step[data-state="done"] .app-step-mark .app-px { opacity: 1; animation: app-pop .4s var(--ease) backwards; }
.app-step[data-state="on"] .app-step-mark { border-color: var(--red); background: var(--red); }
.app-stage.is-live .app-step[data-state="on"] .app-step-mark { animation: app-glow 1.8s var(--ease) infinite; }
.app-step[data-state="busy"] .app-step-mark { border-color: var(--fg-2); }
.app-step[data-state="busy"] .app-step-mark::after { content: ""; position: absolute; inset: 2px; background: var(--fg); }
.app-stage.is-live .app-step[data-state="busy"] .app-step-mark::after { animation: app-blink .8s steps(1) infinite; }
.app-step-val { font: 500 8.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--fg-3); white-space: nowrap; }
.app-step[data-state="on"] .app-step-val { color: var(--fg); }

.app-route { margin-top: 7px; padding-top: 9px; border-top: 1px solid var(--app-hair); }
.app-route-map .rt-b { fill: #171717; }
.app-route-map .rt-p { fill: #333; }
.app-route-map .rt-p.is-on { fill: var(--red); }
.app-route-map .rt-s { fill: var(--fg); }
.app-route-map .rt-e { fill: var(--fg-3); }
.app-route-map .rt-e.is-on { fill: var(--red); }
.app-stage.is-live .app-route-map .rt-e.is-on { animation: app-pin 1s steps(1) infinite; }
.app-route-map .rt-d { opacity: 0; transition: opacity .3s; }
.app-route-map .rt-d.is-on { opacity: 1; }
.app-route-map .rt-d-o { fill: var(--red); }
.app-route-map .rt-d-i { fill: var(--pure); }
.app-route-ends {
  display: flex;
  justify-content: space-between;
  width: 137px;
  margin-top: 6px;
  font: 500 8px/1 var(--mono);
  color: var(--fg-3);
}

/* rewards */
.app-pts {
  padding: 10px;
  border: 1px solid var(--app-hair);
  border-radius: 12px;
  background: var(--app-card);
}
.app-pts-hd { display: flex; justify-content: space-between; font: 500 8.5px/1 var(--mono); color: var(--fg-3); }
.app-pts-tier { color: var(--cream); }
.app-pts-v { display: flex; align-items: baseline; gap: 5px; margin-top: 9px; }
.app-pts-n { font: 700 24px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.app-pts-u { font: 400 9.5px/1 var(--sans); color: var(--fg-2); }
.app-pts-plus {
  align-self: center;
  margin-left: auto;
  padding: 3px 5px;
  border-radius: 3px;
  background: var(--mint);
  color: #000;
  font: 600 9px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s, transform .45s var(--ease);
}
.app-pts-plus.is-on { opacity: 1; transform: none; }
.app-pts-bar { display: grid; grid-template-columns: repeat(24, 4px); gap: 2px; height: 6px; margin-top: 11px; }
.app-pts-bar i { background: #262626; }
.app-pts-bar i.is-on { background: var(--red); }
.app-pts-bar i.is-new { animation: app-cell .45s steps(2) backwards; }
/* the next reward gets its own line, so the catalogue names ("Amber Musk 100 ml") fit whole */
.app-pts-next {
  display: grid;
  gap: 4px;
  white-space: nowrap;
  margin-top: 8px;
  font: 400 8.5px/1.2 var(--sans);
  color: var(--fg-3);
}
.app-pts-goal { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app-pts-left { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--fg-2); }
.app-ent-i {
  display: grid;
  /* the date column fits "28 Oct" exactly, which leaves "Welcome bonus" its whole width */
  grid-template-columns: minmax(0, 1fr) 30px 40px;
  align-items: center;
  column-gap: 8px;
  height: 27px;
  border-top: 1px solid var(--app-hair);
  font: 400 9.5px/1 var(--sans);
}
.app-ent-i.is-new { animation: app-rise .5s var(--ease) backwards; }
.app-ent-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* an unlocked reward is always today's top row: its name takes the date's room */
.app-ent-i.is-unlock .app-ent-t { grid-column: 1 / 3; }
.app-ent-i.is-unlock .app-ent-d { display: none; }
.app-ent-d { font: 400 8px/1 var(--mono); color: var(--fg-3); }
.app-ent-p { justify-self: end; font: 600 9.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--mint); }
.app-ent-p.is-unlock { font-size: 8px; color: var(--cream); }

/* tab bar and home indicator */
.app-tabbar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 58px;
  padding-bottom: 14px;
  border-top: 1px solid #1c1c1c;
  background: #0d0d0d;
  transition: opacity .17s, background-color .4s, border-color .4s;
}
.app-tab {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  color: var(--fg-3);
  cursor: pointer;
  transition: color .25s;
}
.app-tab:hover { color: var(--fg-2); }
.app-tab:active .app-tab-ico { transform: scale(.9); }
.app-tab-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  transition: background-color .3s, transform .12s;
}
.app-tab-dot { position: absolute; top: 1px; right: 7px; width: 5px; height: 5px; background: var(--mint); opacity: 0; }
.app-tab.has-dot .app-tab-dot { opacity: 1; }
.app-tab-l { font: 500 8px/1 var(--sans); }
.app-tab.is-on { color: var(--red); }
.app-stage[data-platform="android"] .app-tabbar { border-top-color: transparent; background: #131313; }
.app-stage[data-platform="android"] .app-tab.is-on { color: var(--fg); }
.app-stage[data-platform="android"] .app-tab.is-on .app-tab-ico { background: rgba(255, 0, 37, .22); color: var(--red); }
.app-homebar {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 62px;
  height: 4px;
  margin-left: -31px;
  border-radius: 2px;
  background: var(--fg);
  opacity: .9;
  transition: width .5s var(--ease), margin .5s var(--ease), height .4s, opacity .4s;
}
.app-stage[data-platform="android"] .app-homebar { width: 44px; height: 3px; margin-left: -22px; opacity: .5; }

/* ---------- push notifications ---------- */
.app-ntfs { position: absolute; top: 30px; right: 6px; left: 6px; z-index: 6; height: 0; pointer-events: none; }
.app-ntf {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  grid-template-areas: "ico app when" "ico t t" "ico b b";
  column-gap: 8px;
  row-gap: 2px;
  padding: 8px 10px 9px 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(40, 40, 40, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform-origin: 50% 0;
  pointer-events: auto;
  cursor: pointer;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
  animation: app-ntf-in .6s cubic-bezier(.2, 1.3, .35, 1) backwards;
}
.app-ntf[data-depth="0"] { z-index: 2; }
.app-ntf[data-depth="1"] { z-index: 1; transform: translateY(13px) scale(.9); opacity: .6; }
.app-ntf.is-out { transform: translateY(-135%); opacity: 0; pointer-events: none; }
.app-ntf-ico {
  grid-area: ico;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 5px;
  background: var(--red);
  color: #000;
}
.app-ntf-app { grid-area: app; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 8px/1.25 var(--sans); color: var(--fg-2); }
.app-ntf-mono { font: 700 10px/1 var(--mono); color: #000; }
.app-ntf-when { grid-area: when; font: 400 8px/1.25 var(--sans); color: var(--fg-3); }
.app-ntf-t { grid-area: t; font: 600 9.5px/1.3 var(--sans); color: var(--fg); }
.app-ntf-b { grid-area: b; font: 400 9px/1.3 var(--sans); color: var(--fg-2); }
.app-stage[data-platform="android"] .app-ntf {
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-areas: "ico app" "ico t" "ico b";
  border-color: rgba(255, 255, 255, .05);
  border-radius: 10px;
  background: #1e1e1e;
}
.app-stage[data-platform="android"] .app-ntf-ico { border-radius: 50%; }
.app-stage[data-platform="android"] .app-ntf-app::after { content: " · now"; color: var(--fg-3); }
.app-stage[data-platform="android"] .app-ntf-when { display: none; }

/* ---------- pay sheet ---------- */
.app-pay { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.app-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); opacity: 0; transition: opacity .3s; }
.app-sheet {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: 4px;
  display: grid;
  gap: 8px;
  padding: 7px 14px 16px;
  border: 1px solid #272727;
  border-radius: 24px;
  background: #171717;
  transform: translateY(calc(100% + 8px));
  transition: transform .45s var(--ease), border-radius .5s var(--ease);
}
.app-screen.is-paying .app-pay { pointer-events: auto; }
.app-screen.is-paying .app-scrim { opacity: 1; }
.app-screen.is-paying .app-sheet { transform: none; }
.app-stage[data-platform="android"] .app-sheet { right: 0; bottom: 0; left: 0; border-width: 1px 0 0; border-radius: 18px 18px 0 0; }
.app-sheet-grab { justify-self: center; width: 28px; height: 3px; border-radius: 2px; background: #3a3a3a; }
.app-sheet-brand { font: 600 11px/1 var(--sans); }
.app-sheet-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #272727;
  font: 400 9px/1.2 var(--sans);
  color: var(--fg-2);
}
.app-sheet-row span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sheet-row span + span { flex: none; font: 500 9px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.app-sheet-total { color: var(--fg); }
.app-sheet-total span + span { font-weight: 700; }
.app-sheet-auth { display: grid; justify-items: center; gap: 9px; padding-top: 12px; border-top: 1px solid #272727; }
.app-sheet-glyph { display: grid; place-items: center; height: 33px; color: var(--fg); }
/* scans only while the sheet is up, not behind the screen edge */
.app-stage.is-live .app-screen.is-paying .app-sheet-glyph:not(.is-ok) { animation: app-scan 1s steps(2) infinite; }
.app-sheet-glyph.is-ok { color: var(--mint); }
.app-sheet-glyph.is-ok .app-px { animation: app-pop .4s var(--ease) backwards; }
.app-sheet-msg { font: 500 9px/1 var(--sans); color: var(--fg-2); }

/* ---------- motion ---------- */
@keyframes app-ntf-in { from { transform: translateY(-135%); opacity: 0; } }
@keyframes app-rise { from { transform: translateY(6px); opacity: 0; } }
@keyframes app-pop { from { transform: scale(.2); opacity: 0; } }
@keyframes app-cell { from { background: var(--pure); } }
@keyframes app-blink { 0%, 100% { opacity: .25; } 33% { opacity: 1; } }
@keyframes app-scan { 50% { opacity: .35; } }
@keyframes app-pin { 50% { fill: var(--pure); } }
@keyframes app-glow {
  0% { box-shadow: 0 0 0 0 rgba(255, 0, 37, .6); }
  70%, 100% { box-shadow: 0 0 0 5px rgba(255, 0, 37, 0); }
}

/* ---------- layouts by panel width ---------- */
/* 560 to 639: same three columns, tighter */
@container app-mod (max-width: 639px) {
  .app-stage { column-gap: 20px; padding-inline: 16px; }
  .app-seg-btn { gap: 6px; padding: 0 6px; font-size: .75rem; }
  .app-seg-btn::before { width: 5px; height: 5px; }
  .app-dot { column-gap: 8px; padding-inline: 9px 6px; }
  .app-log-t { font-size: .75rem; }
  .app-log-b, .app-note, .app-log-empty { font-size: .75rem; }
}
/* 440 to 559: controls and phone */
@container app-mod (max-width: 559px) {
  .app-stage {
    grid-template-columns: minmax(0, 216px) var(--ph-w);
    grid-template-areas: "ctl dev";
    column-gap: 28px;
    padding-inline: 20px;
  }
  .app-seg-btn { gap: 8px; padding: 0 10px; font-size: .8125rem; }
  .app-seg-btn::before { width: 6px; height: 6px; }
  .app-note { font-size: .8125rem; }
  .app-log { display: none; }
}
/* under 440: one row of controls above the phone */
@container app-mod (max-width: 439px) {
  .app-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ctl" "dev";
    row-gap: 14px;
    padding: 14px 14px 16px;
  }
  .app-ctl { padding: 0; }
  .app-ctl-top {
    grid-template-columns: minmax(0, 188px) auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .app-label, .app-note, .app-hint, .app-dot-num { display: none; }
  .app-seg-btn { gap: 6px; padding: 0 6px; font-size: .75rem; }
  .app-dots { grid-auto-flow: column; gap: 0; }
  .app-dot { grid-template-columns: 8px; justify-content: center; width: 36px; padding: 0; }
  .app-dot[aria-current="true"], .app-dot:hover { background: transparent; }
  .app-dot-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .app-dot-badge { position: absolute; top: 9px; right: 8px; width: 5px; height: 5px; padding: 0; border-radius: 0; font-size: 0; }
  /* on a phone the panel is the full width, so the phone inside it grows to be readable (250 x 505) */
  .app-phone { zoom: 1.25; }
}
@container app-mod (max-width: 300px) {
  .app-seg-btn::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app-stage *, .app-stage *::before, .app-stage *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* paused from the nav: the same as reduced motion, so pushes, steps and points land in place */
:root[data-motion="paused"] .app-stage *,
:root[data-motion="paused"] .app-stage *::before,
:root[data-motion="paused"] .app-stage *::after {
  animation: none !important;
  transition: none !important;
}