/* WSPRO — "ticket" skin, scoped to .stitch only (the Devices and Leaderboard pages). Everything else in the app keeps
   its own look (Geist, the regular --accent/--ink tokens): this file never touches a selector outside .stitch, so it
   cannot change how any other page renders. Dark/light follows the same toggle the rest of the app uses. */
.stitch {
  --st-paper: #E8EAF1; --st-card: #F7F8FB; --st-ink: #10131C; --st-ink-2: #4A5063; --st-line: #CBD0DE;
  --st-cobalt: #2A3DF0; --st-on-cobalt: #FFFFFF;
  --st-good: #14804A; --st-good-bg: #D3EFE0; --st-warn: #8A5200; --st-warn-bg: #FFE7B0; --st-bad: #B42318; --st-bad-bg: #FBD7D2;
  --st-f-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --st-f-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --st-f-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-family: var(--st-f-body); color: var(--st-ink);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .stitch {
    --st-paper: #0B0D14; --st-card: #151925; --st-ink: #EEF0F7; --st-ink-2: #9AA2BA; --st-line: #272C3D;
    --st-cobalt: #3043F2; --st-good: #4CC38A; --st-good-bg: #123325; --st-warn: #F2B441; --st-warn-bg: #392909; --st-bad: #FF8A7D; --st-bad-bg: #3C1713;
  }
}
html[data-theme="dark"] .stitch {
  --st-paper: #0B0D14; --st-card: #151925; --st-ink: #EEF0F7; --st-ink-2: #9AA2BA; --st-line: #272C3D;
  --st-cobalt: #3043F2; --st-good: #4CC38A; --st-good-bg: #123325; --st-warn: #F2B441; --st-warn-bg: #392909; --st-bad: #FF8A7D; --st-bad-bg: #3C1713;
}

/* ---- reskin the shared components this page still uses (cards, buttons, chips, inputs) ---- */
.stitch .card { background: var(--st-card); border-color: var(--st-line); border-radius: 18px; }
.stitch .hint { color: var(--st-ink-2); }
.stitch .empty { color: var(--st-ink-2); }
.stitch .card-title, .stitch h1, .stitch h2 { font-family: var(--st-f-display); font-weight: 800; letter-spacing: 0.01em; color: var(--st-ink); }
.stitch .btn { border-radius: 999px; font-weight: 700; }
.stitch .btn-primary { background: var(--st-cobalt); border-color: var(--st-cobalt); box-shadow: none; }
.stitch .btn-primary:hover { filter: brightness(1.1); box-shadow: none; }
.stitch .btn-secondary { background: transparent; border: 1.5px solid var(--st-ink); color: var(--st-ink); }
.stitch .btn-secondary:hover { background: var(--st-ink); color: var(--st-paper); }
.stitch .chip { border-radius: 999px; }
.stitch .link-btn { color: var(--st-cobalt); }
.stitch .seg { background: color-mix(in srgb, var(--st-ink) 7%, transparent); border-radius: 11px; }
.stitch .seg button[aria-pressed="true"] { background: var(--st-card); color: var(--st-ink); }
.stitch .input, .stitch .search .input { background: var(--st-paper); border-color: var(--st-line); color: var(--st-ink); border-radius: 12px; }
.stitch .dev-head { display: none; } /* the ticket rows below carry their own labels; no separate column header */
.stitch .eyebrow { font-family: var(--st-f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-ink-2); }

/* ---- page header: eyebrow + big title + one action ---- */
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.st-head h1 { margin: 2px 0 0; font-family: var(--st-f-display); font-weight: 800; font-size: clamp(28px, 4vw, 40px); letter-spacing: 0.01em; color: var(--st-ink); }

/* ---- the "profile rule" identity card: the admin's required WhatsApp name/photo, full-size, not tucked in a modal ---- */
.st-idcard { position: relative; background: var(--st-card); border: 1px solid var(--st-line); border-radius: 18px; padding: 28px 22px 22px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.st-idcard::before { content: ""; position: absolute; top: 12px; left: 50%; width: 46px; height: 8px; margin-left: -23px; border-radius: 99px; background: var(--st-paper); border: 1px solid var(--st-line); }
.st-idrow { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.st-photo { position: relative; flex: none; width: 104px; height: 104px; border-radius: 14px; overflow: hidden; background: var(--st-paper); display: grid; place-items: center; }
.st-photo img { width: 100%; height: 100%; object-fit: cover; }
.st-photo.empty { border: 2px dashed var(--st-ink-2); background: transparent; color: var(--st-ink-2); }
.st-idmeta { min-width: 0; flex: 1; display: grid; gap: 6px; }
.st-rname { font-family: var(--st-f-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.02; letter-spacing: 0.01em; overflow-wrap: anywhere; color: var(--st-ink); }
.st-idcard .minis { display: flex; gap: 8px; flex-wrap: wrap; }
.st-rtext { margin: 0; font-size: 13.5px; color: var(--st-ink-2); max-width: 60ch; }
.st-steps { margin: 0; padding: 0 0 0 18px; font-size: 13px; color: var(--st-ink-2); display: grid; gap: 3px; }
.st-steps b { color: var(--st-ink); font-weight: 600; }
.st-meter { display: flex; gap: 6px; }
.st-meter i { flex: 1; height: 8px; border-radius: 4px; background: var(--st-line); }
.st-meter i.on { background: var(--st-good); }
.st-meter i.no { background: var(--st-bad); }
.st-meter i.unk { background: repeating-linear-gradient(90deg, var(--st-line) 0 4px, transparent 4px 7px); }
.st-idfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--st-ink-2); margin-top: 2px; }
.st-idfoot strong { color: var(--st-ink); white-space: nowrap; }
.st-stamp { display: none; position: absolute; right: 18px; top: 20px; transform: rotate(-8deg); border: 2.5px solid var(--st-good); color: var(--st-good); border-radius: 8px; padding: 2px 10px 0; font-family: var(--st-f-display); font-weight: 800; font-size: 20px; letter-spacing: 0.08em; }
.st-idcard.ok .st-stamp { display: block; }

/* ---- the balance "ticket" on Beranda ---- */
.st-ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 240px; border-radius: 18px; color: var(--st-on-cobalt); background: var(--st-cobalt);
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 1px, transparent 1px 10px); margin-bottom: 20px; }
.st-t-main { padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; }
.st-t-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.st-t-head .eyebrow { color: rgba(255,255,255,.72); }
.st-bal { display: flex; align-items: flex-start; gap: 8px; font-family: var(--st-f-display); font-weight: 800; line-height: .86; }
.st-bal .rp { font-size: clamp(20px, 2.6vw, 28px); padding-top: .35em; color: rgba(255,255,255,.72); font-weight: 600; }
.st-bal .amt { font-size: clamp(48px, 7vw, 84px); }
.st-t-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.st-sun { background: #FFD23F; color: #1A1500; border-color: #FFD23F; border-radius: 999px; font-weight: 700; }
.st-sun:hover { background: #fff; border-color: #fff; color: #1A1500; }
.st-ghost { border: 1.5px solid rgba(255,255,255,.6); color: #fff; border-radius: 999px; font-weight: 700; background: transparent; }
.st-ghost:hover { background: #fff; color: #1c2bb8; border-color: #fff; }
.st-t-note { font-size: 12.5px; color: rgba(255,255,255,.72); }
.st-stub { position: relative; border-left: 2px dashed rgba(255,255,255,.4); padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.st-stub::before, .st-stub::after { content: ""; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--st-paper); }
.st-stub::before { top: -11px; } .st-stub::after { bottom: -11px; }
.st-stub .eyebrow { color: rgba(255,255,255,.6); }
.st-stot { font-family: var(--st-f-mono); font-size: 17px; }
.st-spark { position: relative; }
.st-spark .spark { width: 100%; height: auto; }
.st-spark .spark-line { stroke: #fff; }
.st-spark .viz-dot { fill: #FFD23F; stroke: var(--st-cobalt); }
.st-axis { display: flex; justify-content: space-between; font-family: var(--st-f-mono); font-size: 11px; color: rgba(255,255,255,.72); }
@media (max-width: 640px) {
  .st-ticket { grid-template-columns: minmax(0, 1fr); }
  .st-stub { border-left: 0; border-top: 2px dashed rgba(255,255,255,.4); }
  .st-stub::before, .st-stub::after { top: -11px; bottom: auto; left: auto; }
  .st-stub::before { left: -11px; } .st-stub::after { right: -11px; }
}

/* ---- Referral: the code/link card ---- */
.st-ref { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 24px; border: 2px dashed var(--st-ink-2); border-radius: 18px; }
.st-code { display: flex; align-items: center; gap: 10px; font-family: var(--st-f-mono); font-size: 18px; font-weight: 500; background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 8px 8px 8px 16px; letter-spacing: .06em; margin-top: 4px; width: fit-content; }
@media (max-width: 640px) { .st-ref { grid-template-columns: minmax(0, 1fr); } }

/* ---- one linked number, as a ticket row ---- */
.st-dev { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 16px; padding: 18px 20px; display: grid; gap: 14px; }
.st-dev + .st-dev { margin-top: 14px; }
.st-dev-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.st-sig-wrap { position: relative; flex: none; width: 44px; height: 44px; }
.st-sig-wrap img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; background: var(--st-paper); }
.st-sig-wrap .blank { width: 44px; height: 44px; border-radius: 50%; border: 2px dashed var(--st-ink-2); display: grid; place-items: center; color: var(--st-ink-2); }
.st-sig { position: absolute; right: -7px; bottom: -6px; width: 22px; height: 22px; background: var(--st-card); border-radius: 6px; padding: 2px; }
.st-sig rect { fill: currentColor; }
.st-ph { font-family: var(--st-f-mono); font-size: 15.5px; font-weight: 500; }
.st-meta { font-size: 13px; color: var(--st-ink-2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.st-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px 2px 8px; font-size: 12px; font-weight: 700; }
.st-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-pill.sending { background: var(--st-good-bg); color: var(--st-good); }
.st-pill.ready { background: var(--st-paper); color: var(--st-ink-2); border: 1px solid var(--st-line); }
.st-pill.offline { background: var(--st-warn-bg); color: var(--st-warn); }
.st-pill.limited { background: var(--st-bad-bg); color: var(--st-bad); }
.st-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--st-line); color: var(--st-ink-2); }
.st-tag.ok { color: var(--st-good); border-color: var(--st-good); }
.st-tag.bad { color: var(--st-bad); border-color: var(--st-bad); background: var(--st-bad-bg); }
.st-tag svg { width: 11px; height: 11px; }

.st-prog { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.st-prog .track { flex: 1; height: 5px; border-radius: 3px; background: var(--st-line); overflow: hidden; min-width: 60px; }
.st-prog .fill { display: block; height: 100%; background: var(--st-cobalt); border-radius: 3px; }
.st-prog b { font-weight: 650; white-space: nowrap; }
.st-prog .earn { font-family: var(--st-f-mono); color: var(--st-ink-2); white-space: nowrap; }

.st-pace { border: 0; margin: 0; padding: 3px; display: inline-flex; border-radius: 999px; background: var(--st-paper); border: 1px solid var(--st-line); }
.st-pace label { position: relative; cursor: pointer; }
.st-pace input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.st-pace input:disabled { cursor: not-allowed; }
.st-pace:has(input:disabled) { opacity: 0.5; }
.st-pace span { display: block; padding: 5px 13px; border-radius: 999px; font-weight: 700; font-size: 12.5px; color: var(--st-ink-2); white-space: nowrap; }
.st-pace input:checked + span { color: #fff; }
.st-pace input[value="aman"]:checked + span { background: var(--st-good); }
.st-pace input[value="normal"]:checked + span { background: var(--st-ink); color: var(--st-paper); }
.st-pace input[value="brutal"]:checked + span { background: var(--st-bad); }
.st-pace input:focus-visible + span { outline: 2px solid var(--st-cobalt); outline-offset: 2px; }

.st-go { border: 0; border-radius: 999px; background: var(--st-cobalt); color: #fff; padding: 7px 16px; font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.st-go svg { width: 14px; height: 14px; }
.st-go:hover { filter: brightness(1.12); }
.st-go.on { background: transparent; color: var(--st-ink); border: 1.5px solid var(--st-ink); }
.st-go.locked { background: var(--st-paper); color: var(--st-ink-2); border: 1px dashed var(--st-ink-2); cursor: not-allowed; }
.st-go.alt { background: var(--st-warn-bg); color: var(--st-warn); }
.st-dev-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.st-dev-bottom .hint { font-size: 12.5px; margin: 0; }
.st-dev-bottom .hint.bad { color: var(--st-bad); }
@media (max-width: 760px) { .st-dev-top { grid-template-columns: auto minmax(0, 1fr); } .st-dev-top > .st-go-wrap { grid-column: 1 / -1; justify-self: start; } }
/* Leaderboard now has its own look (see assets/leaderboard-gold.css) instead of the ticket skin. */

/* ======== Devices: every number is a lit slab with real thickness; the pace and start controls are keycaps ========
   Depth lives on the card and the keys (a lip under each, a pressed state when chosen), not on the avatar. Dark/light follow the app toggle. */
.stitch {
  --k-top: #FFFFFF; --k-bot: #E4E8F1; --k-lip: #B3BBCF; --k-edge: rgba(255, 255, 255, .95);
  --k-tray-a: #CDD2E0; --k-tray-b: #DEE2EC; --slab: #BCC3D5; --amb: rgba(28, 36, 70, .26);
  --card-hi: #FFFFFF; --card-lo: #ECEFF6; --sheen: rgba(255, 255, 255, .85); --groove: rgba(16, 19, 28, .16);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .stitch {
    --k-top: #2D3450; --k-bot: #1B2133; --k-lip: #06080D; --k-edge: rgba(255, 255, 255, .15);
    --k-tray-a: #06080D; --k-tray-b: #0D1018; --slab: #04060A; --amb: rgba(0, 0, 0, .65);
    --card-hi: #1D2235; --card-lo: #121624; --sheen: rgba(150, 170, 255, .11); --groove: rgba(0, 0, 0, .55);
  }
}
html[data-theme="dark"] .stitch {
  --k-top: #2D3450; --k-bot: #1B2133; --k-lip: #06080D; --k-edge: rgba(255, 255, 255, .15);
  --k-tray-a: #06080D; --k-tray-b: #0D1018; --slab: #04060A; --amb: rgba(0, 0, 0, .65);
  --card-hi: #1D2235; --card-lo: #121624; --sheen: rgba(150, 170, 255, .11); --groove: rgba(0, 0, 0, .55);
}

/* the card: lit from the top, a solid lip underneath, a long soft shadow on the floor */
.stitch .st-dev {
  position: relative; --lift: 0px; --rx: 0deg; --ry: 0deg;
  background: linear-gradient(162deg, var(--card-hi) 0%, var(--card-lo) 72%);
  border-radius: 22px; padding: 20px 22px 22px;
  box-shadow: inset 0 1px 0 var(--k-edge), 0 0 0 1px var(--st-line), 0 6px 0 -1px var(--slab), 0 16px 22px -10px var(--amb), 0 34px 44px -26px var(--amb);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s cubic-bezier(.2, .8, .2, 1);
}
.stitch .st-dev + .st-dev { margin-top: 24px; }
.stitch .st-dev:hover { --lift: -4px; box-shadow: inset 0 1px 0 var(--k-edge), 0 0 0 1px var(--st-line), 0 9px 0 -1px var(--slab), 0 22px 28px -10px var(--amb), 0 44px 56px -26px var(--amb); }
.stitch .st-dev::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(460px circle at var(--mx, 25%) var(--my, 0%), var(--sheen), transparent 62%); }
.stitch .st-dev:hover::after { opacity: 1; }
/* a number that is sending right now shows it on the card's top edge; the others stay plain */
.stitch .st-dev.st-sending { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--st-good) 65%, white), 0 0 0 1px color-mix(in srgb, var(--st-good) 38%, var(--st-line)), 0 6px 0 -1px var(--slab), 0 16px 22px -10px var(--amb), 0 34px 44px -26px var(--amb); }
.stitch .st-dev.st-sending:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--st-good) 65%, white), 0 0 0 1px color-mix(in srgb, var(--st-good) 38%, var(--st-line)), 0 9px 0 -1px var(--slab), 0 22px 28px -10px var(--amb), 0 44px 56px -26px var(--amb); }
.stitch .st-dev > * { position: relative; z-index: 1; }

/* progress: a groove with a lit fill; while sending, a light runs along the fill */
.stitch .st-prog .track { height: 9px; border-radius: 6px; background: var(--groove); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35), 0 1px 0 var(--k-edge); }
.stitch .st-prog .fill { border-radius: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--st-cobalt) 70%, white) 0%, var(--st-cobalt) 55%, color-mix(in srgb, var(--st-cobalt) 82%, black) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
/* While sending, a light runs along the fill. It is a separate layer that only moves sideways (transform), so the browser does not repaint the bar
   on every frame; animating background-position here made pages with many sending numbers stutter. */
.stitch .st-prog .fill { position: relative; overflow: hidden; }
.stitch .st-dev.st-sending .st-prog .fill::after { content: ""; position: absolute; inset: 0; width: 60%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .5) 50%, transparent 100%); transform: translateX(-100%); animation: st-run 1.9s linear infinite; will-change: transform; }
@keyframes st-run { from { transform: translateX(-100%); } to { transform: translateX(170%); } }

/* keycaps: a tray with three raised keys; the chosen one is pressed in and lit in its own colour */
.stitch .st-pace { padding: 6px 6px 9px; gap: 6px; border: 0; border-radius: 18px; background: linear-gradient(180deg, var(--k-tray-a), var(--k-tray-b)); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .4), 0 1px 0 var(--k-edge); }
.stitch .st-pace span {
  padding: 9px 18px; border-radius: 13px; color: var(--st-ink-2); font-weight: 750; letter-spacing: .01em;
  background: linear-gradient(180deg, var(--k-top) 0%, var(--k-bot) 100%);
  box-shadow: inset 0 1px 0 var(--k-edge), 0 3px 0 var(--k-lip), 0 7px 9px -3px rgba(0, 0, 0, .4);
  transition: transform .16s cubic-bezier(.3, 1.5, .5, 1), box-shadow .16s, background .2s, color .2s;
}
.stitch .st-pace label:hover span { transform: translateY(-1px); color: var(--st-ink); }
.stitch .st-pace label:active span { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--k-edge), 0 1px 0 var(--k-lip), 0 2px 3px -1px rgba(0, 0, 0, .4); }
.stitch .st-pace input:checked + span { transform: translateY(2px); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .28); }
.stitch .st-pace input[value="aman"]:checked + span { background: linear-gradient(180deg, color-mix(in srgb, var(--st-good) 72%, white) 0%, var(--st-good) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 4px rgba(0, 0, 0, .18), 0 1px 0 color-mix(in srgb, var(--st-good) 50%, black); }
.stitch .st-pace input[value="normal"]:checked + span { color: var(--st-paper); background: linear-gradient(180deg, color-mix(in srgb, var(--st-ink) 80%, white) 0%, var(--st-ink) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 4px rgba(0, 0, 0, .25), 0 1px 0 color-mix(in srgb, var(--st-ink) 55%, black); text-shadow: none; }
.stitch .st-pace input[value="brutal"]:checked + span { background: linear-gradient(180deg, color-mix(in srgb, var(--st-bad) 70%, white) 0%, var(--st-bad) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 4px rgba(0, 0, 0, .2), 0 1px 0 color-mix(in srgb, var(--st-bad) 50%, black); }
.stitch .st-pace input:focus-visible + span { outline: 2px solid var(--st-cobalt); outline-offset: 3px; }
.stitch .st-pace:has(input:disabled) span { box-shadow: inset 0 1px 0 var(--k-edge), 0 1px 0 var(--k-lip); transform: translateY(2px); }

/* start / pause: the same key, in cobalt */
.stitch .st-go { position: relative; padding: 10px 20px; border-radius: 14px; font-weight: 750; margin-bottom: 4px; transition: transform .16s cubic-bezier(.3, 1.5, .5, 1), box-shadow .16s, filter .2s;
  background: linear-gradient(180deg, color-mix(in srgb, var(--st-cobalt) 68%, white) 0%, var(--st-cobalt) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 0 color-mix(in srgb, var(--st-cobalt) 50%, black), 0 9px 12px -4px color-mix(in srgb, var(--st-cobalt) 55%, black); }
.stitch .st-go:hover { filter: none; transform: translateY(-1px); }
.stitch .st-go:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 0 color-mix(in srgb, var(--st-cobalt) 50%, black), 0 2px 4px -2px rgba(0, 0, 0, .4); }
.stitch .st-go.on { color: var(--st-ink); border: 0; background: linear-gradient(180deg, var(--k-top), var(--k-bot)); box-shadow: inset 0 1px 0 var(--k-edge), 0 4px 0 var(--k-lip), 0 9px 12px -4px rgba(0, 0, 0, .4); }
.stitch .st-go.on:active { box-shadow: inset 0 1px 0 var(--k-edge), 0 1px 0 var(--k-lip); }
.stitch .st-go.alt { background: linear-gradient(180deg, color-mix(in srgb, var(--st-warn-bg) 70%, white), var(--st-warn-bg)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 color-mix(in srgb, var(--st-warn) 55%, var(--st-warn-bg)), 0 9px 12px -4px rgba(0, 0, 0, .35); }
.stitch .st-go.locked { border: 0; box-shadow: inset 0 1px 0 var(--k-edge), 0 2px 0 var(--k-lip); background: linear-gradient(180deg, var(--k-top), var(--k-bot)); }

@media (prefers-reduced-motion: reduce) {
  .stitch .st-dev, .stitch .st-pace span, .stitch .st-go { transition: none; }
  .stitch .st-dev.st-sending .st-prog .fill { animation: none; }
}
@media (max-width: 760px) { .stitch .st-dev:hover { --lift: 0px; } }

/* narrow phones: the cards keep their depth but give the keys and the progress row room */
@media (max-width: 480px) {
  .stitch .st-dev { padding: 16px 14px 18px; }
  .stitch .st-pace { max-width: 100%; gap: 4px; padding: 5px 5px 8px; }
  .stitch .st-pace span { padding: 8px 9px; font-size: 12px; }
  .stitch .st-prog { flex-wrap: wrap; row-gap: 8px; }
  .stitch .st-prog .track { flex: 1 1 100%; order: 3; }
}

/* ======== Devices: the WhatsApp profile rule card, as a lit slab with a raised photo and keycap buttons ======== */
.stitch .st-idcard {
  --lift: 0px; border: 0; border-radius: 28px; padding: 36px 28px 28px; margin-bottom: 32px;
  background: linear-gradient(162deg, var(--card-hi) 0%, var(--card-lo) 74%);
  box-shadow: inset 0 1px 0 var(--k-edge), 0 0 0 1px var(--st-line), 0 8px 0 -1px var(--slab), 0 24px 30px -12px var(--amb), 0 50px 64px -30px var(--amb);
  transform: perspective(1200px) translateY(var(--lift));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1);
}
.stitch .st-idcard:hover { --lift: -4px; box-shadow: inset 0 1px 0 var(--k-edge), 0 0 0 1px var(--st-line), 0 12px 0 -1px var(--slab), 0 30px 36px -12px var(--amb), 0 60px 76px -30px var(--amb); }
.stitch .st-idcard::before { top: 13px; width: 54px; height: 9px; margin-left: -27px; border: 0; background: var(--groove); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45), 0 1px 0 var(--k-edge); }
.stitch .st-idcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(520px circle at 12% 0%, var(--sheen), transparent 60%); }
.stitch .st-idcard > * { position: relative; z-index: 1; }

/* the photo: a print standing off the card, with a bezel, a lip and a pane of gloss */
.stitch .st-photo { border-radius: 18px; transform: rotate(-2.2deg); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
  box-shadow: 0 0 0 4px var(--k-top), 0 0 0 5px var(--st-line), 0 9px 0 4px var(--k-lip), 0 22px 26px -6px var(--amb); }
.stitch .st-idcard:hover .st-photo { transform: rotate(0deg) translateY(-2px); }
.stitch .st-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 38%); }
.stitch .st-photo.empty { box-shadow: 0 0 0 4px var(--k-top), 0 0 0 5px var(--st-line); }
.stitch .st-rname { text-shadow: 0 1px 0 var(--k-edge); }

/* keycaps for the two actions */
.stitch .st-idcard .minis { gap: 12px; padding-bottom: 4px; }
.stitch .st-idcard .btn {
  min-height: 46px; padding: 0 20px; border: 0; border-radius: 15px; font-weight: 750; letter-spacing: .01em; color: var(--st-ink); gap: 8px;
  background: linear-gradient(180deg, var(--k-top) 0%, var(--k-bot) 100%);
  box-shadow: inset 0 1px 0 var(--k-edge), 0 4px 0 var(--k-lip), 0 10px 14px -4px rgba(0, 0, 0, .4);
  transition: transform .16s cubic-bezier(.3, 1.5, .5, 1), box-shadow .16s;
}
.stitch .st-idcard .btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, var(--k-top) 0%, var(--k-bot) 100%); color: var(--st-ink); }
.stitch .st-idcard .btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--k-edge), 0 1px 0 var(--k-lip), 0 3px 5px -2px rgba(0, 0, 0, .4); }
.stitch .st-idcard .btn.st-key-main {
  color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  background: linear-gradient(180deg, color-mix(in srgb, var(--st-cobalt) 68%, white) 0%, var(--st-cobalt) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 0 color-mix(in srgb, var(--st-cobalt) 50%, black), 0 12px 16px -4px color-mix(in srgb, var(--st-cobalt) 55%, black);
}
.stitch .st-idcard .btn.st-key-main:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--st-cobalt) 68%, white) 0%, var(--st-cobalt) 100%); color: #fff; }
.stitch .st-idcard .btn.st-key-main:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 0 color-mix(in srgb, var(--st-cobalt) 50%, black), 0 3px 6px -2px rgba(0, 0, 0, .4); }
.stitch .st-idcard .btn.is-loading { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 color-mix(in srgb, var(--st-cobalt) 50%, black); }

/* the steps sit in a sunken panel; the compliance meter is a row of lit pills */
.stitch .st-steps { padding: 16px 20px 16px 38px; border-radius: 18px; background: color-mix(in srgb, var(--st-ink) 5%, transparent); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .16), 0 1px 0 var(--k-edge); }
.stitch .st-meter i { height: 11px; border-radius: 6px; background: var(--groove); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35), 0 1px 0 var(--k-edge); }
.stitch .st-meter i.on { background: linear-gradient(180deg, color-mix(in srgb, var(--st-good) 70%, white), var(--st-good)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 color-mix(in srgb, var(--st-good) 50%, black); }
.stitch .st-meter i.no { background: linear-gradient(180deg, color-mix(in srgb, var(--st-bad) 70%, white), var(--st-bad)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 color-mix(in srgb, var(--st-bad) 50%, black); }

@media (max-width: 480px) {
  .stitch .st-idcard { padding: 34px 16px 22px; }
  .stitch .st-idcard .minis .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .stitch .st-idcard, .stitch .st-photo, .stitch .st-idcard .btn { transition: none; }
}

@media (max-width: 480px) {
  .stitch .st-idrow { flex-direction: column; align-items: stretch; gap: 22px; }
  .stitch .st-photo { width: 112px; height: 112px; }
  .stitch .st-idmeta { width: 100%; }
  .stitch .st-idcard .minis .btn { min-width: 0; max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-block: 10px; }
}