/* Skins: tokens + extension rules only. Structure never changes. */
/* Retro Street skin: one committed look, same in light and dark */
.app[data-skin="retro"] {
  --bg: #1d0f36;
  --surface: #120a20;
  --surface-2: #2a1748;
  --text: #fff7e6;
  --muted: #cbb9ea;
  --line: #fff7e6;
  --primary: #ffd23f;
  --on-primary: #160b26;
  --accent: #ff4fa3;
  --ok: #63ffa3;
  --danger: #ff6464;
  --focus: #5ce1ff;
  --ink: #000000;
  --shadow: 5px 5px 0 var(--ink);
  --shadow-press: 2px 2px 0 var(--ink);
  --radius: 6px;
  --radius-sm: 4px;
  --bw: 3px;
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --display-case: uppercase;
  --display-track: 0.02em;
  --app-bg:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(255, 79, 163, .22) 26px 28px) bottom / 100% 220px no-repeat,
    linear-gradient(180deg, #24104a 0%, #4a1766 30%, #9a2a73 55%, #e2516a 74%, #ff9a3c 90%, #ffc94a 100%);
  color-scheme: dark;
}

/* ---------- Retro Street extension rules ---------- */
.app[data-skin="retro"] .mute { background: var(--ink); border-color: var(--primary); border-radius: 4px; }
.app[data-skin="retro"] .shop { background: var(--surface); border-bottom: var(--bw) solid var(--ink); padding-block: 14px; margin-bottom: 10px; }
.app[data-skin="retro"] .mono { background: var(--accent); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 4px; transform: rotate(-4deg); font-weight: 400; }
.app[data-skin="retro"] .shop-name { font-weight: 400; color: var(--primary); font-size: 22px; }
.app[data-skin="retro"] .hud { display: block; font-family: var(--font-display); font-size: 26px; color: var(--text); text-shadow: 2px 2px 0 var(--ink); font-variant-numeric: tabular-nums; }
.app[data-skin="retro"] .progress i { height: 10px; border-radius: 0; background: rgba(0,0,0,.35); border: 2px solid var(--ink); }
.app[data-skin="retro"] .progress i.on { background: var(--ok); }
.app[data-skin="retro"] .q { font-weight: 400; font-size: 38px; line-height: 1; text-shadow: 3px 3px 0 var(--ink); }
.app[data-skin="retro"] .sub { color: var(--text); text-shadow: 1px 1px 0 var(--ink); }
.app[data-skin="retro"] .chip { background: var(--ink); color: var(--primary); border-color: var(--primary); border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; }
.app[data-skin="retro"] button.card:hover { border-color: var(--primary); }
.app[data-skin="retro"] button.card:active,
.app[data-skin="retro"] .btn:active,
.app[data-skin="retro"] .time:active { transform: translate(3px, 3px); box-shadow: var(--shadow-press); }
.app[data-skin="retro"] .svc-name, .app[data-skin="retro"] .strong { font-family: var(--font-display); font-weight: 400; font-size: 21px; text-transform: uppercase; letter-spacing: .02em; }
.app[data-skin="retro"] .svc-price { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--ok); }
.app[data-skin="retro"] .badge { background: var(--accent); color: var(--ink); border: 2px solid var(--ink); border-radius: 2px; transform: rotate(4deg); }
.app[data-skin="retro"] .any-icon { background: var(--primary); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 4px; }
.app[data-skin="retro"] .avatar { border-radius: 4px; border: var(--bw) solid var(--ink); font-weight: 400; box-shadow: 3px 3px 0 var(--ink); }
.app[data-skin="retro"] .day, .app[data-skin="retro"] .time { box-shadow: 3px 3px 0 var(--ink); }
.app[data-skin="retro"] .day[aria-pressed="true"] { background: var(--primary); color: var(--ink); border-color: var(--ink); }
.app[data-skin="retro"] .day strong, .app[data-skin="retro"] .time { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: .02em; }
.app[data-skin="retro"] .time { padding: 9px 0; }
.app[data-skin="retro"] .time:active { background: var(--primary); color: var(--ink); }
.app[data-skin="retro"] .group-label { color: var(--text); text-shadow: 1px 1px 0 var(--ink); }
.app[data-skin="retro"] .btn { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 22px; letter-spacing: .03em; border-color: var(--ink); color: var(--ink); box-shadow: var(--shadow); }
.app[data-skin="retro"] .btn.ghost, .app[data-skin="retro"] .btn.danger { background: var(--surface); color: var(--text); border-color: var(--line); }
.app[data-skin="retro"] .btn.danger { color: var(--danger); }
.app[data-skin="retro"] .cta { background: var(--surface); border-top: var(--bw) solid var(--ink); backdrop-filter: none; }
.app[data-skin="retro"] .input { background: var(--ink); color: var(--primary); font-weight: 600; }
.app[data-skin="retro"] .amount { font-weight: 400; color: var(--ok); text-shadow: 3px 3px 0 var(--ink); font-size: 52px; }
.app[data-skin="retro"] .timer b { font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--primary); text-shadow: 2px 2px 0 var(--ink); }
.app[data-skin="retro"] .timer { color: var(--text); }
.app[data-skin="retro"] .steps li::before { background: var(--primary); color: var(--ink); border-radius: 2px; }
.app[data-skin="retro"] details.credit summary,
.app[data-skin="retro"] details.qr summary,
.app[data-skin="retro"] .link { color: var(--primary); }
.app[data-skin="retro"] .check { display: none; }
.app[data-skin="retro"] .stamp {
  display: block; font-family: var(--font-display); font-size: 50px; line-height: .95; color: var(--primary);
  -webkit-text-stroke: 2px var(--ink); text-shadow: 5px 5px 0 var(--ink); transform: rotate(-4deg); text-wrap: balance;
  animation: stamp .55s cubic-bezier(.2, 1.6, .4, 1) both;
}
.app[data-skin="retro"] .done-hero .q { display: none; }
.app[data-skin="retro"] .plus { display: block; font-family: var(--font-display); font-size: 28px; color: var(--ok); text-shadow: 3px 3px 0 var(--ink); animation: rise .6s .45s ease-out both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-12deg) scale(2.4); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.app[data-skin="retro"] .screen.enter { animation: retroIn .2s steps(4) both; }
@keyframes retroIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.app[data-skin="retro"] .code-big { border-color: var(--primary); background: var(--ink); color: var(--primary); font-family: var(--font-display); font-weight: 400; font-size: 34px; }
.app[data-skin="retro"] .sim { border-color: var(--text); color: var(--text); }
.app[data-skin="retro"] .warn { background: #3a0f1f; border-color: var(--danger); }