/* Guide "UI replays" (shared/guides/replay.js): small looping recreations of the Manager app's real screens,
   with demo data only. Scoped under .rp so it never touches the page around it. Dark like the app. */
.rp { --bg: #0A0A0A; --sf: #121315; --sf2: #1A1C1F; --ln: rgba(255,255,255,.08); --ln2: rgba(255,255,255,.16);
  --fg: #ECEEF1; --fg2: #C9CED6; --mu: #8A9099; --ch: #C9CCD1; --ch-hi: #FFFFFF; --buy: #26A69A; --sell: #EF5350; --good: #3DBE6E; --bad: #EF5350;
  position: relative; width: 100%; max-width: 320px; aspect-ratio: 9 / 15; margin: 0 auto; overflow: hidden; border-radius: 22px;
  background: var(--bg); border: 1px solid var(--ln2); color: var(--fg); font: 12px/1.35 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  contain: layout paint; isolation: isolate; user-select: none; -webkit-user-select: none; text-align: left; }
.rp * { box-sizing: border-box; }
.rp .num { font-family: inherit; font-variant-numeric: tabular-nums; }   /* the app's numbers, not a host page's mono */
.rp-scr { position: absolute; inset: 0; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.rp-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--ln); }
.rp-acct { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 11.5px; }
.rp-badge { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; padding: 2px 5px; border-radius: 5px; color: #0A0A0A; background: var(--accent); }
.rp-badge.demo { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #8D9198; }
.rp-ping { font-size: 9.5px; color: var(--mu); border: 1px solid var(--ln); border-radius: 999px; padding: 2px 7px; }
.rp-sec { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); margin-top: 2px; }
.rp-grid { display: grid; gap: 6px; }
.rp-g2 { grid-template-columns: 1fr 1fr; } .rp-g3 { grid-template-columns: repeat(3, 1fr); } .rp-g4 { grid-template-columns: repeat(4, 1fr); }
.rp-act { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 8px 9px; border-radius: 11px; background: var(--sf); border: 1px solid var(--ln);
  transition: transform .12s, border-color .2s, background .2s; min-height: 44px; justify-content: center; }
.rp-act b { font-size: 12.5px; font-weight: 650; } .rp-act small { font-size: 9.5px; color: var(--mu); }
.rp-act.pri { border-color: rgba(201, 204, 209,.42); background: linear-gradient(160deg, rgba(201, 204, 209,.11), transparent 62%), var(--sf); } .rp-act.pri b { color: var(--accent); }
.rp-act.sm { align-items: center; text-align: center; padding: 7px 4px; }
.rp-act.press, .rp-btn.press, .rp-chip.press, .rp-row.press { transform: scale(.95); border-color: var(--accent); }
.rp-btn { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 10px; border-radius: 10px; font-weight: 650; font-size: 11.5px;
  background: var(--sf2); border: 1px solid var(--ln2); color: var(--fg); transition: transform .12s, border-color .2s, background .2s; }
.rp-btn.prime { background: linear-gradient(180deg, #F4F5F6, var(--accent-2)); color: #0A0A0A; border-color: transparent; }
.rp-btn.red { color: #FF8A80; border-color: rgba(217,68,58,.5); background: transparent; }
.rp-inp { min-height: 34px; padding: 0 10px; border-radius: 10px; background: #08090B; border: 1px solid var(--ln2); display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--fg); }
.rp-inp:empty::before { content: attr(data-ph); color: var(--mu); font-weight: 400; font-size: 11.5px; }
.rp-inp.focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 255, 255,.15); }
.rp-inp.caret::after { content: ""; width: 1.5px; height: 14px; margin-left: 1px; background: var(--accent); animation: rpCaret 1s steps(1) infinite; }
@keyframes rpCaret { 50% { opacity: 0; } }
.rp-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; gap: 3px; border-radius: 10px; background: var(--sf); border: 1px solid var(--ln); }
.rp-seg span { text-align: center; padding: 5px 4px; border-radius: 7px; font-size: 10.5px; font-weight: 600; color: var(--mu); transition: background .25s, color .25s; }
.rp-seg span.on { background: var(--sf2); color: var(--fg); box-shadow: inset 0 0 0 1px var(--ln2); }
.rp-chip { display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--fg2);
  background: var(--sf); border: 1px solid var(--ln); transition: background .25s, color .25s, transform .12s; }
.rp-chip.on { background: var(--accent); color: #0A0A0A; border-color: transparent; }
.rp-chips { display: flex; gap: 5px; flex-wrap: wrap; }

/* trade cards */
.rp-list { display: flex; flex-direction: column; gap: 5px; }
.rp-pos { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 7px 9px; border-radius: 10px; background: var(--sf); border: 1px solid var(--ln);
  transition: opacity .45s, transform .45s, max-height .45s, padding .45s, margin .45s, border-color .3s; max-height: 70px; }
.rp-pos .h { display: flex; align-items: center; gap: 5px; font-weight: 650; font-size: 11.5px; }
.rp-side { font-size: 8px; font-weight: 800; letter-spacing: .08em; padding: 1px 4px; border-radius: 4px; border: 1px solid var(--ln2); color: var(--fg2); }
.rp-pos .pl { font-weight: 700; text-align: right; font-size: 12px; }
.rp-pos .px { grid-column: 1 / -1; display: flex; gap: 8px; font-size: 9.5px; color: var(--mu); }
.rp-pos .px b { color: var(--fg); font-weight: 600; transition: color .3s; }
.rp-pos .px b.chg { color: var(--accent); }
.rp-pos.gone { opacity: 0; transform: translateX(-30%); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -5px; border-color: transparent; }
.rp-pos.hl { border-color: var(--accent); }
.rp .pos { color: var(--good); } .rp .neg { color: var(--bad); }

/* the CLOSE ALL hold bar */
.rp-hold { position: relative; overflow: hidden; min-height: 46px; border-radius: 12px; border: 1px solid rgba(217,68,58,.5); background: rgba(217,68,58,.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #FFD9D6; }
.rp-hold b { position: relative; font-size: 12.5px; letter-spacing: .03em; } .rp-hold small { position: relative; font-size: 9.5px; opacity: .75; }
.rp-hold i { position: absolute; inset: 0; background: rgba(217,68,58,.6); transform: scaleX(0); transform-origin: left; }
.rp-hold.holding i { transform: scaleX(1); transition: transform 1s linear; }

/* mini chart */
.rp-chart { position: relative; height: 120px; border-radius: 10px; background: #000; border: 1px solid var(--ln); overflow: hidden; }
.rp-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rp-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--sell); transition: top .9s cubic-bezier(.3,.8,.2,1), border-color .4s, opacity .4s; }
.rp-line span { position: absolute; left: 5px; top: -13px; font-size: 8.5px; font-weight: 700; white-space: nowrap; }
.rp-line em { position: absolute; right: 0; top: -7px; font-style: normal; font-size: 8px; font-weight: 700; color: #fff; padding: 1px 4px; border-radius: 3px; }
.rp-line.entry { border-top-style: dotted; border-color: var(--buy); } .rp-line.entry span { color: var(--buy); } .rp-line.entry em { background: var(--buy); }
.rp-line.sl { border-color: var(--sell); } .rp-line.sl span { color: var(--sell); } .rp-line.sl em { background: var(--sell); }
.rp-line.tp { border-color: var(--buy); } .rp-line.tp span { color: var(--buy); } .rp-line.tp em { background: var(--buy); }
.rp-line.be { border-color: var(--accent); } .rp-line.be span { color: var(--accent); } .rp-line.be em { background: var(--accent-2); color: #0A0A0A; }
.rp-line.arm { border-top: 1.5px solid var(--accent); } .rp-line.arm span { color: var(--accent); } .rp-line.arm em { background: var(--accent-2); color: #0A0A0A; }
.rp-line.hide { opacity: 0; }

/* sheet, toast, banner */
.rp-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 10px 10px 14px; border-radius: 16px 16px 0 0; background: var(--sf2); border-top: 1px solid var(--ln2);
  display: flex; flex-direction: column; gap: 7px; transform: translateY(105%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.rp-sheet.in { transform: none; }
.rp-sheet::before { content: ""; width: 30px; height: 3px; border-radius: 3px; background: var(--ln2); margin: 0 auto 3px; }
.rp-sheet h4 { margin: 0; font-size: 13.5px; }
.rp-scrim { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .3s; }
.rp-scrim.in { opacity: 1; }
.rp-toast { position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 8; padding: 8px 10px; border-radius: 11px; background: #232831; border: 1px solid rgba(61,190,110,.5);
  display: flex; gap: 8px; align-items: center; transform: translateY(150%); transition: transform .4s cubic-bezier(.2,.8,.2,1); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.rp-toast.in { transform: none; }
.rp-toast i { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--good); display: grid; place-items: center; color: #08130C; font-style: normal; font-weight: 900; font-size: 11px; }
.rp-toast.warn { border-color: rgba(239,83,80,.6); } .rp-toast.warn i { background: var(--bad); color: #fff; }
.rp-toast b { display: block; font-size: 11.5px; } .rp-toast span { display: block; font-size: 9.5px; color: var(--fg2); }
.rp-banner { padding: 7px 9px; border-radius: 10px; font-size: 10px; font-weight: 600; background: rgba(239,83,80,.12); border: 1px solid rgba(239,83,80,.45); color: #FFB4AE;
  transition: opacity .4s, transform .4s; }
.rp-banner.hide { opacity: 0; transform: translateY(-6px); }
.rp-tag { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: rgba(255, 255, 255,.14); color: var(--accent); border: 1px solid rgba(255, 255, 255,.4); }

/* generic: a meter, a feed, a phone home screen */
.rp-meter { height: 8px; border-radius: 8px; background: var(--sf); border: 1px solid var(--ln); overflow: hidden; }
.rp-meter i { display: block; height: 100%; width: 0; background: var(--bad); transition: width 1.6s cubic-bezier(.3,.7,.3,1); }
.rp-feed { display: flex; flex-direction: column; gap: 5px; }
.rp-msg { padding: 7px 9px; border-radius: 10px; background: var(--sf); border: 1px solid var(--ln); font-size: 10.5px; color: var(--fg2); transition: opacity .4s, transform .4s; }
.rp-msg b { color: var(--fg); }
.rp-msg.pre { opacity: 0; transform: translateY(10px); }
.rp-home { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; padding: 18px 8px; }
.rp-app { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 8.5px; color: var(--fg2); }
.rp-app i { width: 40px; height: 40px; border-radius: 11px; background: var(--sf2); border: 1px solid var(--ln); }
.rp-app.pp i { background: radial-gradient(circle at 35% 30%, #FFFFFF, #C9CCD1 55%, #3A3D42); border: 0; }
.rp-app.new { animation: rpPop .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes rpPop { from { transform: scale(0); opacity: 0; } }
.rp-menu { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--sf2); border: 1px solid var(--ln2); }
.rp-menu span { padding: 8px 10px; font-size: 11px; border-top: 1px solid var(--ln); transition: background .2s; }
.rp-menu span:first-child { border-top: 0; }
.rp-menu span.press { background: rgba(255, 255, 255,.18); }
.rp-field { display: flex; flex-direction: column; gap: 3px; } .rp-field > span { font-size: 9.5px; color: var(--mu); }
.rp-big { font-size: 22px; font-weight: 750; letter-spacing: -.01em; }
.rp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rp-kpi { padding: 7px 8px; border-radius: 10px; background: var(--sf); border: 1px solid var(--ln); } .rp-kpi span { display: block; font-size: 8.5px; color: var(--mu); text-transform: uppercase; letter-spacing: .06em; } .rp-kpi b { font-size: 13px; }
.rp-lock { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(13,15,18,.96);
  opacity: 0; transition: opacity .35s; pointer-events: none; }
.rp-lock.in { opacity: 1; }
.rp-face { width: 54px; height: 54px; border-radius: 16px; border: 2px solid var(--accent); position: relative; }
.rp-face::before { content: ""; position: absolute; inset: 14px 12px; border-bottom: 2px solid var(--accent); border-radius: 0 0 14px 14px; }
.rp-face.ok { border-color: var(--good); } .rp-face.ok::before { border-color: var(--good); }
.rp-ladder { display: flex; flex-direction: column; gap: 4px; }
.rp-rung { display: flex; justify-content: space-between; padding: 5px 9px; border-radius: 8px; background: var(--sf); border: 1px solid var(--ln); font-size: 10.5px; font-weight: 600;
  transition: opacity .4s, transform .4s; }
.rp-rung.res { color: #9EA3AB; } .rp-rung.sup { color: var(--accent); } .rp-rung.pre { opacity: 0; transform: translateX(12px); }

/* the finger and its ripple */
.rp-finger { position: absolute; z-index: 20; left: 50%; top: 110%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: rgba(255, 255, 255,.32); border: 2px solid var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.5); pointer-events: none;
  transition: left .55s cubic-bezier(.3,.7,.2,1), top .55s cubic-bezier(.3,.7,.2,1), transform .12s, opacity .25s; }
.rp-finger.down { transform: scale(.78); }
.rp-ripple { position: absolute; z-index: 19; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--accent); pointer-events: none;
  animation: rpRipple .6s ease-out forwards; }
@keyframes rpRipple { to { transform: scale(6); opacity: 0; } }

/* replay button + instant (reduced motion / thumbnails) */
.rp-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rp-replay { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: transparent; color: #C9CED6; font: 600 12px/1 Inter, system-ui, sans-serif; cursor: pointer; opacity: .85; }
.rp-replay:hover { opacity: 1; } .rp-replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rp-replay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rp.instant *, .rp.instant *::before, .rp.instant *::after { transition: none !important; animation: none !important; }
.rp.instant .rp-finger { opacity: 0; }

/* the guide's step list, highlighted in sync (any page can use these classes) */
.g-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: gs; }
.g-steps li { counter-increment: gs; display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; color: #8A9099;
  transition: color .3s, background .3s, border-color .3s; }
.g-steps li::before { content: counter(gs); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  border: 1px solid rgba(255,255,255,.16); color: #C9CED6; transition: background .3s, color .3s, border-color .3s; }
.g-steps li.on { color: #ECEEF1; background: rgba(255, 255, 255,.07); border-color: rgba(255, 255, 255,.35); }
.g-steps li.on::before { background: #FFFFFF; color: #0A0A0A; border-color: transparent; }
.g-steps li.done::before { background: rgba(255, 255, 255,.2); color: #FFFFFF; border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .rp *, .g-steps li { transition: none !important; animation: none !important; } }