/* ── Page demos ────────────────────────────────────────────────────────────────────────────────

   The player a page's ▶ opens (and a page's first visit), and the replica of the page inside it.
   See Pages/Demo: FeatureDemoPlayer, ReplicaStage, and the replicas under Pages/Demo/Replica.
   Ported from TrukZone Owner's demo.css (TTMTserverapp1/TrukZoneOwner/wwwroot/css/demo.css).

   ── Its own names ──
   The player's classes are fd-, the replicas' rp-. The app's stylesheets already hold generic
   names (.card, .row, .tab …) that a replica would silently pick up, and a demo class would just
   as silently restyle a real page. So the replicas are drawn with their own small kit below, in
   the app's colours — a copy of the page that does not move when a page's stylesheet does.

   ── Two colour schemes on one screen, on purpose ──
   The PLAYER is dark, the way a video is: a frame around something to watch. The REPLICA inside
   it is the page as the till shows it, in the light theme.  */

.fd-player {
  --fd-ink: #eef2f7;
  --fd-dim: #a3afc0;
  --fd-line: rgba(255, 255, 255, 0.16);
  --fd-brand: #AB1385;
  --fd-ring: #f59e0b;
  --fd-glow: rgba(171, 19, 133, 0.38);

  position: fixed; inset: 0; z-index: 10500;   /* over the app's modals (1050–1065) and its toasts (10000) */
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: max(0.6rem, env(safe-area-inset-top)) 1rem max(0.8rem, env(safe-area-inset-bottom));
  background: radial-gradient(120% 70% at 50% 0%, #3a1640 0%, #140d22 58%, #0a0812 100%);
  color: var(--fd-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  /* Nothing in here scrolls, and a swipe must not scroll the page behind it. Taps still click. */
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none; user-select: none;
  animation: fd-fade 0.25s ease both;
}
.fd-player button { font-family: inherit; touch-action: manipulation; cursor: pointer; }

/* Inside the locked-feature sheet rather than over the screen: the sheet is the frame. */
.fd-player.fd-player--embed {
  position: relative; inset: auto; z-index: auto;
  height: min(60vh, 560px); min-height: 380px;
  padding: 0.6rem 0.8rem 0.8rem;
  border-radius: 16px;
  animation: none;
}

/* ── The bars: one per scene ── */

.fd-prog { display: flex; gap: 4px; }
.fd-seg { position: relative; flex: 1; height: 16px; margin: 0; padding: 0; border: 0; background: none; }
.fd-seg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 4px;
  border-radius: 2px; background: rgba(255, 255, 255, 0.22);
}
.fd-seg-fill {
  position: absolute; left: 0; top: 6px; height: 4px; width: 0;
  border-radius: 2px; background: #fff;
}
.fd-seg.done .fd-seg-fill { width: 100%; }
/* The duration is the scene's, set inline — an inline declaration beats this shorthand's 0s. */
.fd-seg.now .fd-seg-fill { animation: fd-fill linear forwards; }
.fd-prog.paused .fd-seg.now .fd-seg-fill { animation-play-state: paused; }

/* ── The title row ── */

.fd-top { display: flex; align-items: center; gap: 0.65rem; }
.fd-top-ico {
  flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  font-size: 1.5rem; border-radius: 12px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--fd-line);
}
.fd-top-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fd-top-title { font-size: 1.1rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-top-sub { font-size: 0.8rem; color: var(--fd-dim); }
.fd-x {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--fd-line); background: rgba(255, 255, 255, 0.06);
  color: var(--fd-ink); font-size: 1.05rem;
}

/* ── The stage ── */

.fd-stage { position: relative; flex: 1; min-height: 0; }
.fd-stage.ended .fd-rphone { filter: brightness(0.55); }

/* "Sample data", where the notch would be: these are not his figures. */
.fd-sample {
  position: absolute; top: -7px; left: 50%; z-index: 3; transform: translateX(-50%);
  padding: 0.08rem 0.55rem; border-radius: 999px;
  background: var(--fd-brand); color: #fff;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none;
}

.fd-paused {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.4rem; pointer-events: none;
}
.fd-replay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0.8rem 1.4rem; border: 0; border-radius: 999px;
  background: rgba(8, 12, 21, 0.88); color: #fff; font-size: 1.05rem; font-weight: 700;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.3);
}

/* ── Caption, controls, the way out ── */

.fd-cap {
  min-height: 4.35em; padding: 0 0.4rem;
  font-size: 1.08rem; font-weight: 600; line-height: 1.45; text-align: center;
  animation: fd-cap 0.5s ease both;
}

.fd-ctrls { display: flex; justify-content: center; align-items: center; gap: 1rem; }
.fd-ctl {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--fd-line); background: rgba(255, 255, 255, 0.06);
  color: var(--fd-ink); font-size: 1.4rem; line-height: 1;
}
.fd-ctl:disabled { opacity: 0.35; cursor: default; }
.fd-ctl.off { opacity: 0.7; }
.fd-ctl-main { width: 54px; height: 54px; border: 0; background: #fff; color: #140d22; font-size: 1.1rem; font-weight: 900; }

.fd-novoice { text-align: center; font-size: 0.8rem; color: var(--fd-dim); }

.fd-acts { display: flex; gap: 0.6rem; }
.fd-act {
  flex: 1; min-height: 52px; padding: 0.4rem 0.6rem; border-radius: 14px;
  font-size: 1rem; font-weight: 700; line-height: 1.2;
}
.fd-act:active { transform: scale(0.98); }
.fd-act.go { background: var(--fd-brand); color: #fff; border: 0; }

/* On a tablet the phone is small in the middle of a wide stage: keep the caption and the button
   to the phone's width rather than the screen's. */
@media (min-width: 700px) {
  .fd-cap, .fd-ctrls, .fd-acts, .fd-novoice { width: 100%; max-width: 560px; align-self: center; }
}

/* ── Chapters ──
   A long demo's bars are its chapters — a page's tabs — each named under it; the intro before
   the first chapter is a short bar with no name. The bar in play fills from where this beat
   starts to where it ends. */
.fd-chapters .fd-seg { height: auto; min-height: 16px; padding-bottom: 1px; text-align: left; min-width: 0; }
.fd-chapters .fd-seg.intro { flex: 0.3; }
.fd-chapters .fd-seg.now .fd-seg-fill { animation-name: fd-fill-part; }
.fd-seg-l {
  display: block; margin-top: 15px;
  font-size: 0.68rem; font-weight: 700; color: var(--fd-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fd-seg.now .fd-seg-l { color: #fff; }
@keyframes fd-fill-part { from { width: var(--from); } to { width: var(--to); } }
/* Many chapters — Settings has thirteen — leave each name a few letters: name only the one
   playing, across the bars beside it. */
.fd-chapters.many .fd-seg-l { visibility: hidden; }
.fd-chapters.many .fd-seg.now .fd-seg-l { visibility: visible; overflow: visible; position: relative; z-index: 1; }

/* ── A replica beat ──
   The page at a phone's real size, scaled to the stage by posdemo.js (fit) — see ReplicaStage.
   The frame is the drawn phone's; the screen inside is clipped to its corners. */
.fd-rstage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fd-rphone {
  position: relative; flex: none; width: 200px; height: 400px;
  border-radius: 26px; background: #05070c;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.18),
              0 24px 60px -12px rgba(0, 0, 0, 0.7),
              0 0 80px -10px var(--fd-glow);
  animation: fd-fade 0.4s ease both;
}
.fd-rclip { position: absolute; inset: 7px; overflow: hidden; border-radius: 19px; background: #F7F8FA; }
.fd-rvp {
  position: absolute; left: 0; top: 0; width: 390px; height: 780px;
  transform-origin: 0 0; overflow: hidden; background: #F7F8FA;
}
.fd-rscroll {
  position: absolute; inset: 0; overflow: hidden;
  text-align: left;
  -webkit-user-select: none; user-select: none;
  animation: fd-rview 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* The spotlight: a ring round what the beat is about, and everything outside it dimmed by the
   ring's own shadow. Moved every frame by posdemo.js, so no transition on its box. */
.fd-rlayer { position: absolute; inset: 0; z-index: 2000; overflow: hidden; pointer-events: none; }
.fd-rring {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 14px;
  box-shadow: 0 0 0 3px var(--fd-ring), 0 0 0 4000px rgba(8, 12, 21, 0.34);
  opacity: 0; transition: opacity 0.3s ease;
}
.fd-rring.on { opacity: 1; }
.fd-rfinger {
  position: absolute; left: 0; top: 0; font-size: 46px; line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  opacity: 0; transition: opacity 0.25s ease;
}
.fd-rfinger.on { opacity: 1; }
.fd-rfinger.press { animation: fd-press 0.45s ease-out; }
.fd-rtap {
  position: absolute; width: 74px; height: 74px; margin: -37px 0 0 -37px;
  border-radius: 50%; background: rgba(245, 158, 11, 0.5); opacity: 0;
}
.fd-rtap.go { animation: fd-tap 0.9s ease-out; }

@keyframes fd-rview { from { opacity: 0; transform: translateX(5%); } to { opacity: 1; transform: none; } }
@keyframes fd-press { 0% { transform: scale(1); } 40% { transform: scale(0.82) translateY(3px); } 100% { transform: scale(1); } }

/* ── A short phone ──
   A 360 × 640 handset left the replica small under full-size controls. The frame round it gives
   way first: tighter rows and smaller buttons. */
@media (max-height: 720px) {
  .fd-player { gap: 0.4rem; }
  .fd-top-ico { width: 2.2rem; height: 2.2rem; font-size: 1.25rem; }
  .fd-x { width: 40px; height: 40px; }
  .fd-cap { min-height: 3em; font-size: 0.98rem; line-height: 1.38; }
  .fd-ctl { width: 40px; height: 40px; font-size: 1.25rem; }
  .fd-ctl-main { width: 46px; height: 46px; }
  .fd-act { min-height: 46px; font-size: 0.95rem; }
}

/* ── Motion ── */

@keyframes fd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fd-fill { from { width: 0; } to { width: 100%; } }
@keyframes fd-cap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fd-tap {
  0% { transform: scale(0.2); opacity: 0; }
  15% { transform: scale(0.45); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Motion off: the scenes still change and the ring still says where to look — it just does not
   pulse or slide. The bars keep their timing; they ARE the clock. */
@media (prefers-reduced-motion: reduce) {
  .fd-player, .fd-player *:not(.fd-seg-fill) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── ▶ beside a page's title: watch how it works ──
   See DemoPlayButton. Round and outlined in the brand colour, so it reads as a play button and
   not as one of the page's own actions. */
.fd-play {
  flex: none; display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 30px; height: 30px; padding: 0 0.65rem 0 0.3rem; margin: 0;
  border-radius: 999px; border: 1.5px solid var(--mp-brand, #AB1385);
  background: var(--mp-surface, #fff); color: var(--mp-brand, #AB1385);
  font-size: 0.8rem; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap;
  vertical-align: middle;
}
.fd-play-ico {
  width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--mp-brand, #AB1385); color: #fff; font-size: 0.62rem; padding-left: 1px;
}
.fd-play:active { transform: scale(0.95); }

/* ── Settings › Feature Demos ── */

.fd-card-list { display: flex; flex-direction: column; gap: 0.5rem; }
.fd-card-row {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left;
  padding: 0.7rem 0.85rem; border-radius: 12px;
  border: 1px solid var(--mp-line, #E3E7ED); background: var(--mp-surface, #fff); color: inherit;
}
.fd-card-ico { font-size: 1.4rem; width: 2rem; text-align: center; }
.fd-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fd-card-title { font-weight: 700; }
.fd-card-sub { font-size: 0.8rem; color: var(--mp-muted, #666E7C); }
.fd-card-go { color: var(--mp-brand, #AB1385); font-weight: 800; }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   The replicas' kit — rp-
   ════════════════════════════════════════════════════════════════════════════════════════════ */

.rp-app {
  --rp-brand: #AB1385;
  --rp-brand-soft: #F7E3F1;
  --rp-blue: #0d6efd;
  --rp-ink: #171A21;
  --rp-ink2: #454D5C;
  --rp-muted: #666E7C;
  --rp-line: #E3E7ED;
  --rp-bg: #F7F8FA;
  --rp-surface: #fff;
  --rp-good: #198754;
  --rp-warn: #ffc107;
  --rp-danger: #dc3545;

  position: relative; width: 390px; height: 780px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--rp-bg); color: var(--rp-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: 15px; line-height: 1.35;
}
.rp-app * { box-sizing: border-box; }

/* The phone's own status bar, and the app's purple bar under it. */
.rp-status {
  flex: none; height: 40px; padding: 12px 26px 0; display: flex; justify-content: space-between;
  background: #fff; font-size: 14px; font-weight: 700;
}
.rp-bar {
  flex: none; height: 54px; padding: 0 14px; display: flex; align-items: center; gap: 10px;
  background: var(--rp-brand); color: #fff;
}
.rp-logo {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(160deg, #fde68a, #f59e0b); font-size: 19px;
}
.rp-brand-t { font-size: 17px; font-weight: 500; letter-spacing: 0.03em; }
.rp-burger { margin-left: auto; font-size: 26px; line-height: 1; padding: 4px 6px; border-radius: 8px; }

/* LoginDisplay's row: Settings, Summary, Notifications, User Profile. */
.rp-icons {
  flex: none; display: flex; justify-content: space-around; padding: 8px 4px 6px;
  background: #fff; border-bottom: 1px solid var(--rp-line);
}
.rp-ic { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 600; color: var(--rp-ink2); }
.rp-ic b { font-size: 19px; line-height: 1.1; font-weight: 400; }

.rp-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px; }
.rp-body.pad-bottom { padding-bottom: 150px; }

.rp-h { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; font-size: 21px; font-weight: 800; }
.rp-h .rp-play {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 4px;
  border-radius: 999px; border: 1.5px solid var(--rp-brand); color: var(--rp-brand); font-size: 12px; font-weight: 700;
}
.rp-h .rp-play i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--rp-brand); color: #fff; font-style: normal; font-size: 9px; }

.rp-row { display: flex; align-items: center; gap: 8px; }
.rp-row.wrap { flex-wrap: wrap; }
.rp-row.between { justify-content: space-between; }
.rp-gap { height: 10px; }
.rp-grow { flex: 1; min-width: 0; }
.rp-muted { color: var(--rp-muted); }
.rp-small { font-size: 12.5px; }
.rp-bold { font-weight: 700; }
.rp-num { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.rp-right { text-align: right; }

.rp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 12px; border-radius: 8px; border: 1.5px solid transparent;
  font-size: 14px; font-weight: 600; white-space: nowrap; background: #e9ecef; color: var(--rp-ink);
}
.rp-btn.sm { min-height: 30px; padding: 3px 9px; font-size: 12.5px; border-radius: 7px; }
.rp-btn.lg { min-height: 46px; font-size: 16px; }
.rp-btn.block { display: flex; width: 100%; }
.rp-btn.pri { background: var(--rp-blue); color: #fff; }
.rp-btn.brand { background: var(--rp-brand); color: #fff; }
.rp-btn.ok { background: var(--rp-good); color: #fff; }
.rp-btn.warn { background: var(--rp-warn); color: #1f2328; }
.rp-btn.danger { background: var(--rp-danger); color: #fff; }
.rp-btn.info { background: #0dcaf0; color: #10262c; }
.rp-btn.grey { background: #6c757d; color: #fff; }
.rp-btn.out { background: #fff; color: var(--rp-blue); border-color: var(--rp-blue); }
.rp-btn.out-brand { background: #fff; color: var(--rp-brand); border-color: var(--rp-brand); }
.rp-btn.out-danger { background: #fff; color: var(--rp-danger); border-color: var(--rp-danger); }
.rp-btn.out-grey { background: #fff; color: #495057; border-color: #adb5bd; }
.rp-btn.round { width: 50px; height: 50px; border-radius: 50%; padding: 0; font-size: 28px; font-weight: 400; }

.rp-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.rp-label { font-size: 12.5px; font-weight: 600; color: var(--rp-ink2); }
.rp-input {
  width: 100%; min-height: 40px; padding: 8px 11px; border-radius: 8px; border: 1px solid #ced4da;
  background: #fff; color: var(--rp-ink); font: inherit; font-size: 15px;
}
.rp-input::placeholder { color: #9aa1ad; }
.rp-input.sel { position: relative; padding-right: 28px; }
.rp-select {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 40px; padding: 8px 11px; border-radius: 8px; border: 1px solid #ced4da; background: #fff; font-size: 15px;
}
.rp-select::after { content: "⌄"; color: var(--rp-muted); font-size: 16px; line-height: 0.6; }
.rp-select.sm { min-height: 34px; padding: 5px 10px; font-size: 14px; }

.rp-card { background: #fff; border: 1px solid var(--rp-line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.rp-card.flat { box-shadow: none; }
.rp-card-t { font-weight: 800; font-size: 15.5px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }

.rp-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: #e9ecef; color: #343a40; white-space: nowrap;
}
.rp-badge.ok { background: #d1e7dd; color: #0f5132; }
.rp-badge.warn { background: #fff3cd; color: #664d03; }
.rp-badge.danger { background: #f8d7da; color: #842029; }
.rp-badge.info { background: #cfe2ff; color: #084298; }
.rp-badge.brand { background: var(--rp-brand); color: #fff; }
.rp-badge.dark { background: #6c757d; color: #fff; }

/* A segmented control — the pages' btn-group of radios. */
.rp-seg { display: flex; border: 1.5px solid var(--rp-blue); border-radius: 9px; overflow: hidden; }
.rp-seg > span { flex: 1; text-align: center; padding: 8px 6px; font-size: 14px; font-weight: 600; color: var(--rp-blue); background: #fff; white-space: nowrap; }
.rp-seg > span + span { border-left: 1.5px solid var(--rp-blue); }
.rp-seg > span.on { background: var(--rp-blue); color: #fff; }

/* Tabs along the top of a page — Settings' tab bar. */
/* Pinned under the app bar while the page scrolls under it, as the real tab bar is. */
.rp-tabs { position: sticky; top: -12px; z-index: 3; display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--rp-line); background: #fff; margin: 0 -12px 12px; padding: 0 8px; scrollbar-width: none; }
.rp-tabs::-webkit-scrollbar { display: none; }
.rp-tab { flex: none; padding: 10px 10px 8px; border-bottom: 3px solid transparent; font-size: 13.5px; font-weight: 600; color: var(--rp-muted); white-space: nowrap; }
.rp-tab.on { color: var(--rp-brand); border-bottom-color: var(--rp-brand); }
/* Settings' section bar: back to the list, and the section open. */
.rp-stbar { position: sticky; top: -12px; z-index: 3; display: flex; align-items: center; gap: 10px; margin: 0 -12px 12px; padding: 10px 12px; border-bottom: 1px solid var(--rp-line); background: #fff; }
.rp-stbar-back { flex: none; color: var(--rp-brand); font-weight: 700; font-size: 14px; }
.rp-stbar-t { flex: 1; min-width: 0; text-align: center; margin-right: 60px; font-weight: 800; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rp-switch { flex: none; position: relative; width: 40px; height: 23px; border-radius: 999px; background: #ced4da; }
.rp-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.rp-switch.on { background: var(--rp-blue); }
.rp-switch.on::after { left: 19px; }

.rp-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.rp-table th { background: #EFF2F6; color: var(--rp-ink2); text-align: left; font-weight: 700; padding: 7px 7px; white-space: nowrap; }
.rp-table td { padding: 8px 7px; border-bottom: 1px solid var(--rp-line); vertical-align: middle; }
.rp-table .rp-right { text-align: right; }
.rp-tablebox { border: 1px solid var(--rp-line); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }

.rp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.rp-stat { background: #fff; border: 1px solid var(--rp-line); border-radius: 12px; padding: 10px 12px; }
.rp-stat-l { font-size: 12px; color: var(--rp-muted); font-weight: 600; }
.rp-stat-v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rp-stat.hero { grid-column: span 2; background: var(--rp-brand); color: #fff; border: 0; }
.rp-stat.hero .rp-stat-l { color: rgba(255,255,255,.8); }
.rp-stat.hero .rp-stat-v { font-size: 26px; }

.rp-bars { display: flex; align-items: flex-end; gap: 5px; height: 110px; padding-top: 6px; }
.rp-bars > i { flex: 1; border-radius: 4px 4px 0 0; background: var(--rp-brand); opacity: 0.85; }
.rp-bars > i.lo { opacity: 0.45; }

/* ── The Sale screen's pieces ── */

.rp-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 12px; }
.rp-chip {
  padding: 7px 15px; border-radius: 999px; border: 2px solid var(--rp-brand); color: var(--rp-brand);
  font-weight: 700; font-size: 15px; background: #fff;
}
.rp-chip.on { background: var(--rp-brand); color: #fff; box-shadow: 0 4px 10px -4px rgba(171, 19, 133, 0.6); }

.rp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.rp-tiles.three { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rp-tile { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; color: #fff; }
.rp-tile-art { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; }
.rp-tile-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.62) 100%); }
.rp-tile-price {
  position: absolute; top: 6px; right: 6px; z-index: 1; padding: 2px 6px; border-radius: 6px;
  background: rgba(255,255,255,.95); color: #111; font-size: 12px; font-weight: 700; font-family: ui-monospace, Menlo, monospace;
}
.rp-tile-name { position: absolute; left: 7px; right: 5px; bottom: 6px; z-index: 1; font-weight: 700; font-size: 13.5px; line-height: 1.15; }
.rp-tile.added { box-shadow: inset 0 0 0 3px #22c55e; }

/* The bill folded at the bottom, as on a phone. */
.rp-cartbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 6px 18px 18px; background: #fff; border-top: 1px solid var(--rp-line);
  box-shadow: 0 -6px 16px -10px rgba(0,0,0,.25);
}
.rp-cartbar-arrow { text-align: center; color: #24406E; font-size: 18px; line-height: 1; }
.rp-cartline { display: flex; justify-content: space-between; font-size: 16px; padding: 2px 0; }
.rp-cartline b { color: #24406E; font-size: 17px; }

.rp-scrim { position: absolute; inset: 0; z-index: 8; background: rgba(15, 18, 30, 0.38); }
.rp-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: 64px; z-index: 9;
  overflow-y: auto; padding: 16px 14px 28px; background: #fff;
  border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px -10px rgba(0,0,0,.4);
  animation: rp-rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.rp-sheet.mid { top: 210px; }
.rp-sheet-h { display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.rp-sheet-x { font-size: 18px; color: var(--rp-muted); }
@keyframes rp-rise { from { transform: translateY(40%); opacity: 0.4; } to { transform: none; opacity: 1; } }

.rp-billitem { border: 1px solid var(--rp-line); border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; }
.rp-billitem-n { font-weight: 700; margin-bottom: 6px; }
.rp-qty { display: inline-flex; align-items: center; border: 1px solid #ced4da; border-radius: 8px; overflow: hidden; }
.rp-qty span { width: 30px; text-align: center; padding: 4px 0; color: #495057; background: #f1f3f5; }
.rp-qty b { width: 34px; text-align: center; font-weight: 700; }
.rp-x { width: 30px; height: 26px; border-radius: 6px; background: var(--rp-danger); color: #fff; display: grid; place-items: center; font-size: 13px; }
.rp-totline { display: flex; justify-content: space-between; font-weight: 700; padding: 2px 0; }
.rp-change { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--rp-warn); font-weight: 700; }

/* ── The menu, slid in from the left ── */

.rp-drawer {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 9; width: 80%;
  display: flex; flex-direction: column; background: #fff; box-shadow: 10px 0 30px -10px rgba(0,0,0,.45);
  animation: rp-slide 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.rp-drawer-h { flex: none; height: 104px; padding: 46px 20px 0; display: flex; align-items: center; gap: 10px; background: var(--rp-brand); color: #fff; }
.rp-drawer-list { flex: 1; overflow: hidden; padding: 8px; }
.rp-nav { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 8px; font-size: 17px; font-weight: 500; color: #2b3240; }
.rp-nav b { width: 26px; text-align: center; font-size: 20px; font-weight: 400; }
.rp-nav.on { background: #E8EDF6; color: #1B3157; font-weight: 600; }
@keyframes rp-slide { from { transform: translateX(-60%); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* ── Online orders' cards ── */

.rp-order { background: #fff; border: 1px solid var(--rp-line); border-left: 5px solid #6c757d; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.rp-order.pending { border-left-color: #f59e0b; }
.rp-order.accepted { border-left-color: #0d6efd; }
.rp-order.preparing { border-left-color: #8b5cf6; }
.rp-order.out { border-left-color: #0891b2; }
.rp-order.payment { border-left-color: #dc2626; }
.rp-order.done { border-left-color: #16a34a; }
.rp-order-amt { font-size: 18px; font-weight: 800; }
.rp-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* A tiny map for the dispatch view. */
.rp-map { position: relative; height: 330px; border-radius: 12px; overflow: hidden; background: #e8efe3; border: 1px solid var(--rp-line); }
.rp-map-road { position: absolute; background: #fff; box-shadow: 0 0 0 1px #d7dfd2; }
.rp-pin { position: absolute; transform: translate(-50%, -100%); font-size: 28px; line-height: 1; }
.rp-pin.on { filter: drop-shadow(0 0 0 #f59e0b) drop-shadow(0 0 6px #f59e0b); }
.rp-pin-l { position: absolute; transform: translate(-50%, 4px); padding: 1px 6px; border-radius: 6px; background: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.2); white-space: nowrap; }

/* ── Catalogue pieces ── */

.rp-dragchips { display: flex; gap: 8px; overflow: hidden; padding: 4px 0 10px; }
.rp-dragchip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--rp-line); background: #fff; font-weight: 700; font-size: 14px; }
.rp-dragchip i { color: var(--rp-muted); font-style: normal; }
.rp-dragchip.lift { transform: translateX(52px) rotate(-3deg); box-shadow: 0 8px 18px -6px rgba(0,0,0,.35); border-color: var(--rp-brand); }

.rp-catcard { position: relative; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--rp-line); }
.rp-catcard-art { height: 88px; display: grid; place-items: center; font-size: 40px; }
.rp-catcard-n { padding: 7px 8px; font-weight: 700; font-size: 13.5px; text-align: center; }
.rp-photo { height: 120px; border-radius: 12px; display: grid; place-items: center; font-size: 56px; margin-bottom: 10px; }

.rp-prodcard { background: #fff; border: 1px solid var(--rp-line); border-radius: 12px; overflow: hidden; }
.rp-prodcard-art { height: 82px; display: grid; place-items: center; font-size: 38px; }
.rp-prodcard-b { padding: 6px 8px 8px; }
.rp-prodcard-n { font-weight: 700; font-size: 13.5px; }
.rp-prodcard-p { font-size: 13px; color: var(--rp-good); font-weight: 700; }

.rp-search { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid #ced4da; background: #fff; }
.rp-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; background: transparent; color: var(--rp-ink); min-width: 0; }
.rp-search span { color: var(--rp-muted); }

.rp-kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--rp-line); font-size: 14px; }
.rp-kv:last-child { border-bottom: 0; }
.rp-kv > span:first-child { color: var(--rp-muted); }

.rp-setrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rp-line); }
.rp-setrow:last-child { border-bottom: 0; }
.rp-setrow-t { flex: 1; min-width: 0; }
.rp-setrow-t b { display: block; font-size: 14.5px; }
.rp-setrow-t span { display: block; font-size: 12px; color: var(--rp-muted); }

.rp-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-swatches i { width: 34px; height: 34px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.rp-swatches i.on { outline: 3px solid var(--rp-ink); outline-offset: 2px; }

.rp-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0; }
.rp-pager span { min-width: 32px; height: 30px; padding: 0 8px; border-radius: 7px; display: grid; place-items: center; border: 1px solid #adb5bd; font-size: 13px; font-weight: 600; color: #495057; background: #fff; }
.rp-pager span.on { background: var(--rp-blue); border-color: var(--rp-blue); color: #fff; }