:root {
  --ground: #060807; --bg-soft: #0f1512; --card: #131815; --card-hi: #1b2220;
  --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.15);
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 30px rgba(0,0,0,0.34);
  --shadow-lift: 0 2px 8px rgba(0,0,0,0.5), 0 22px 50px rgba(0,0,0,0.5);
  --text: #ffffff; --text-2: #94a39a; --text-3: #5d6863;
  --green: #85d89e; --green-bright: #58c97e; --green-soft: rgba(133,216,158,0.12); --green-border: rgba(133,216,158,0.30);
  --amber: #eab36a; --amber-soft: rgba(234,179,106,0.13); --amber-border: rgba(234,179,106,0.34);
  --danger: #ef6a6a; --danger-soft: rgba(239,106,106,0.13); --danger-border: rgba(239,106,106,0.35);
  /* Build state — "not shipped yet". Deliberately NOT amber: amber already means
     decision state here (.dchip.review = CONFIRMATION_REQUIRED, .live.degraded,
     .event-badge.warn), and the roadmap frame renders directly above a monitor
     panel that uses it. Weight is matched to amber (9.7:1 vs 9.5:1 on --card) so
     the swap changes hue, not prominence. Change these three to restyle the whole
     roadmap surface — nothing downstream hardcodes the colour. */
  --violet: #c4b5fd; --violet-soft: rgba(196,181,253,0.13); --violet-border: rgba(196,181,253,0.34);
  --mono: "SF Mono", ui-monospace, "Menlo", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); background: var(--ground); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.5; }
a { color: inherit; text-decoration: none; } .mono { font-family: var(--mono); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 18px 24px 60px; }

/* top */
.top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; flex-shrink: 0; color: var(--text-2); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; transition: all 150ms ease; }
.back:hover { border-color: var(--green-border); color: var(--text); }
.brandline { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); display: inline-flex; align-items: center; gap: 8px; }
.brandline .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); flex-shrink: 0; }
h1.title { font-size: 26px; font-weight: 750; letter-spacing: -0.02em; margin: 20px 0 2px; }
.subtitle { color: var(--text-2); font-size: 14px; }

/* tabs */
.tabs { display: flex; gap: 10px; margin: 20px 0 0; flex-wrap: wrap; }
.tab { cursor: pointer; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; min-width: 240px; transition: all 150ms ease; font-family: var(--sans); color: var(--text); }
.tab:hover { border-color: var(--green-border); } .tab.active { border-color: var(--green-border); background: var(--card-hi); }
.tab .tnum { font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.06em; }
.tab .ttitle { font-weight: 650; font-size: 15px; margin-top: 3px; } .tab .tsub { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* toolbar */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 0; padding: 12px 4px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.progress { display: flex; gap: 6px; }
.progress .d { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: background 200ms ease; }
.progress .d.on { background: var(--green-bright); }
.btns { display: flex; gap: 8px; align-items: center; }
.toggle { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--card); }
.toggle[hidden] { display: none; }
.tg-opt { cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-3); padding: 5px 10px; border-radius: 6px; transition: all 140ms ease; }
.tg-opt:hover { color: var(--text); }
.tg-opt:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }
.tg-opt[data-mode="sim"].on { background: var(--card-hi); color: var(--text); font-weight: 700; }
.tg-opt[data-mode="live"].on { background: var(--green-soft); color: var(--green-bright); font-weight: 700; }
.btn { cursor: pointer; font-family: var(--sans); font-size: 13px; background: var(--card); border: 1px solid var(--border-strong); color: var(--text); padding: 8px 14px; border-radius: 9px; transition: all 140ms ease; }
.btn:hover { border-color: var(--green-border); } .btn.primary { background: var(--green-soft); color: var(--green); border-color: var(--green-border); font-weight: 600; }
.btn svg { width: 13px; height: 13px; vertical-align: -2px; }

/* decision + action hint */
.decision { display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin: 14px 0 0; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.decision.pop { animation: pop-in 280ms cubic-bezier(.34,1.4,.5,1); }
.decision.execute { border-color: var(--green-border); } .decision.review { border-color: var(--amber-border); } .decision.block { border-color: var(--danger-border); }
.dchip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; padding: 5px 10px; border-radius: 5px; flex-shrink: 0; }
.dchip.idle, .dchip.working { color: var(--text-3); border: 1px solid var(--border-strong); background: var(--bg-soft); }
.dchip.execute { color: var(--green-bright); border: 1px solid var(--green-border); background: var(--green-soft); }
.dchip.review { color: var(--amber); border: 1px solid var(--amber-border); background: var(--amber-soft); }
.dchip.block { color: var(--danger); border: 1px solid var(--danger-border); background: var(--danger-soft); }
.dtext { font-size: 14.5px; font-weight: 600; }
.action-hint { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--green); background: var(--green-soft); border: 1px solid var(--green-border); border-radius: 10px; padding: 10px 14px; }
.action-hint.processing { color: var(--text-2); background: var(--bg-soft); border-color: var(--border); font-weight: 500; }
.action-hint.done { color: var(--text-2); background: var(--bg-soft); border-color: var(--border); font-weight: 500; }
.action-hint strong { color: var(--text); }
.spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--green-bright); display: inline-block; animation: spin 0.8s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the click-guide cue */
.guide { animation: guidepulse 1.5s ease-in-out infinite; }
@keyframes guidepulse { 0% { box-shadow: 0 0 0 0 rgba(88,201,126,0.55); } 70% { box-shadow: 0 0 0 12px rgba(88,201,126,0); } 100% { box-shadow: 0 0 0 0 rgba(88,201,126,0); } }
[data-action] { cursor: pointer; transition: transform 140ms ease, filter 140ms ease; }
[data-action]:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* anchored click tooltip */
#appBody { position: relative; }
.tooltip { position: fixed; z-index: 60; width: max-content; max-width: 220px; background: #7fb8ff; color: #08243f; font-size: 12.5px; font-weight: 600; line-height: 1.4; padding: 9px 12px; border-radius: 10px; box-shadow: var(--shadow-lift); pointer-events: none; animation: tip-in 200ms ease; }
@keyframes tip-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.tooltip .tt-lead { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.72; display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
.tooltip::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); border: 7px solid transparent; }
.tooltip.rightside::after { right: 100%; border-right-color: #7fb8ff; }
.tooltip.leftside::after { left: 100%; border-left-color: #7fb8ff; }
.tooltip.belowside::after { top: auto; bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: #7fb8ff; }
.tooltip.aboveside::after { top: 100%; bottom: auto; left: 50%; transform: translateX(-50%); border-top-color: #7fb8ff; }

/* "how to use this demo" intro coach-mark (matches the portal walkthrough style) */
.demo-intro { position: fixed; z-index: 70; width: max-content; max-width: 300px; background: #1d2733; color: #eef3f0; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); padding: 14px 16px; animation: tip-in 200ms ease; }
.demo-intro::before { content: ''; position: absolute; bottom: 100%; left: 22px; border: 7px solid transparent; border-bottom-color: #1d2733; }
.demo-intro .di-lead { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #7fb8ff; margin-bottom: 7px; }
.demo-intro .di-body { font-size: 13px; line-height: 1.5; color: #c4d0cb; }
.demo-intro .di-body strong { color: #eef3f0; }
.demo-intro .di-btn { margin-top: 12px; cursor: pointer; background: #7fb8ff; color: #08243f; border: none; font-family: var(--sans); font-size: 12.5px; font-weight: 700; padding: 7px 15px; border-radius: 9px; }
.demo-intro .di-btn:hover { filter: brightness(1.06); }

/* per-scenario market-value bar + shared pop-in (used by the decision banner) */
@keyframes pop-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: none; } }
.value-bar { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 15px 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(133,216,158,0.12) 0%, rgba(133,216,158,0.03) 60%); border: 1px solid var(--green-border); font-size: 14px; line-height: 1.5; color: var(--text); }
.value-bar .vb-ic { color: var(--green); flex-shrink: 0; margin-top: 1px; }
.value-bar .vb-ic svg { width: 18px; height: 18px; }
.value-bar .vb-label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: 3px; }

/* stage / panes */
.stage { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; margin-top: 16px; }
.pane { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.pane-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.pane-brand { display: flex; align-items: center; gap: 10px; }
.pane-mark { width: 24px; height: 24px; border-radius: 7px; background: var(--green-soft); border: 1px solid var(--green-border); color: var(--green); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.pane-title { font-weight: 650; font-size: 14px; } .pane-role { font-size: 11px; color: var(--text-3); }
.live { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--green); border: 1px solid var(--green-border); border-radius: 5px; padding: 3px 7px; }
.live.real { color: var(--green-bright); border-color: var(--green-border); }
.live.degraded { color: var(--amber); border-color: var(--amber-border); }
.pane-body { padding: 16px; flex: 1; }

/* app components (phone / card / wallet / chat) */
/* Desktop browser-window frame (cfg.desktop demos) */
.desktop { width: 100%; max-width: 540px; margin: 0 auto; background: var(--card-hi); border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lift); }
.desktop-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.desktop-dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.desktop-dots i { width: 11px; height: 11px; border-radius: 50%; }
.desktop-dots i:nth-child(1) { background: #ff5f57; } .desktop-dots i:nth-child(2) { background: #febc2e; } .desktop-dots i:nth-child(3) { background: #28c840; }
.desktop-url { flex: 1; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--text-2); background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 4px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-spacer { width: 45px; flex-shrink: 0; }
.desktop-screen { padding: 22px 20px; background: var(--card); min-height: 380px; }

.phone { width: 292px; max-width: 292px; margin: 0 auto; background: #000; border: 1px solid rgba(255,255,255,0.14); border-radius: 40px; padding: 9px; box-shadow: var(--shadow-lift); position: relative; }
.phone::before { content: ''; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 74px; height: 20px; background: #000; border-radius: 11px; z-index: 4; }  /* dynamic island */
.phone::after { content: ''; position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); width: 88px; height: 4px; border-radius: 3px; background: var(--text-3); opacity: 0.7; z-index: 4; }  /* home indicator */
.phone-screen { position: relative; background: var(--card-hi); border-radius: 31px; min-height: 540px; padding: 46px 16px 30px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.phone-status { position: absolute; top: 15px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; line-height: 1; color: var(--text); font-family: var(--sans); z-index: 3; pointer-events: none; }
.phone-status .ps-time { font-variant-numeric: tabular-nums; line-height: 1; }
.phone-status .ps-ic { display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.phone-status .ps-ic svg { display: block; }
.phone-status .ps-bat { position: relative; font-size: 7px; font-weight: 700; line-height: 10px; padding: 0 2.5px; border: 1px solid currentColor; border-radius: 2.5px; opacity: 0.95; margin-right: 2.5px; }
.phone-status .ps-bat::after { content: ''; position: absolute; right: -2.5px; top: 50%; transform: translateY(-50%); width: 1.5px; height: 4px; background: currentColor; border-radius: 0 1.5px 1.5px 0; }
.phone-screen.has-nav { padding-bottom: 66px; }
.phone-nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-around; padding: 9px 6px 16px; background: var(--card); border-top: 1px solid var(--border); }
.phone-nav .pn-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 8.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-3); }
.phone-nav .pn-tab svg { width: 18px; height: 18px; }
.phone-nav .pn-tab.on { color: var(--green); }
.appcard { background: var(--card-hi); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin: 0 auto; }
/* When auto-wrapped inside a phone frame, appcard/chat sit flush (no card-in-a-phone double border). */
.phone-screen > .appcard { background: transparent; border: none; border-radius: 0; padding: 0; max-width: none; margin: 0; box-shadow: none; }
.phone-screen > .chat { flex: 1; }
.phone-screen > .claudeapp { flex: 1; min-height: 0; }
.appcard-head { display: flex; align-items: center; justify-content: space-between; }
/* elevated in-app header: brand mark + hairline + breathing room */
.app-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 13px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.app-name { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; } .app-sub { font-size: 11px; color: var(--text-3); font-family: var(--mono); }
.app-head .app-name { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.app-head .app-name::before { content: ''; width: 19px; height: 19px; border-radius: 6px; background: linear-gradient(140deg, var(--green-bright), var(--green)); box-shadow: 0 2px 7px rgba(88,201,126,0.4); flex-shrink: 0; }
.app-head .app-note { font-size: 10.5px; color: var(--text-3); font-family: var(--mono); letter-spacing: 0.02em; white-space: nowrap; }
.field { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.field-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--mono); }
.field-value { font-weight: 600; font-size: 15px; margin-top: 3px; } .field-value.amt { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.who { display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--green-soft); border: 1px solid var(--green-border); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 10px 12px; border-radius: 11px; }
.status-pill.ok { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-border); }
.status-pill.bad { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-border); }
.status-pill.work { background: var(--bg-soft); color: var(--text-2); border: 1px solid var(--border); }
.app-btn { text-align: center; padding: 13px; border-radius: 12px; font-weight: 700; font-size: 14px; background: linear-gradient(140deg, var(--green-bright) 0%, var(--green) 100%); color: #062813; box-shadow: 0 8px 20px rgba(88,201,126,0.22); }
.app-btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); box-shadow: none; }
.app-note { font-size: 12px; color: var(--text-2); } .powered { font-family: var(--mono); font-size: 10px; color: var(--text-3); text-align: center; letter-spacing: 0.06em; }
.balance { text-align: left; padding: 15px 16px; border-radius: 15px; background: linear-gradient(135deg, rgba(133,216,158,0.20) 0%, rgba(133,216,158,0.06) 45%, rgba(255,255,255,0.02) 100%); border: 1px solid var(--green-border); position: relative; overflow: hidden; }
.balance::before { content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(133,216,158,0.18) 0%, transparent 70%); pointer-events: none; }
.balance .b-label { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--mono); font-weight: 600; }
.balance .b-amt { font-size: 30px; font-weight: 750; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.method { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.method .m-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--bg-soft); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.method .m-ic svg { width: 16px; height: 16px; }
.method .m-t { font-weight: 650; font-size: 13px; } .method .m-s { font-size: 11px; color: var(--text-3); font-family: var(--mono); }
/* wallet home quick actions */
.wq { display: flex; gap: 9px; margin-top: 6px; }
.wq-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); font-size: 10.5px; font-weight: 600; text-align: center; }
.wq-btn .wq-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-soft); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.wq-btn .wq-ic svg { width: 17px; height: 17px; }
.wq-btn.hero { border-color: var(--green-border); background: var(--green-soft); color: var(--green); }
.wq-btn.hero .wq-ic { background: rgba(133,216,158,0.18); color: var(--green); }
/* camera scan viewfinder */
.scanview { position: relative; flex: 1; min-height: 232px; margin: 4px 0; border-radius: 16px; background: radial-gradient(120% 120% at 50% 40%, #0c110f 0%, #050706 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.scanview .qrimg { width: 128px; height: 128px; border-radius: 8px; box-shadow: 0 10px 34px rgba(0,0,0,0.55); position: relative; z-index: 1; }
.scan-frame { position: absolute; width: 172px; height: 172px; border-radius: 20px; box-shadow: 0 0 0 2px var(--green-bright), 0 0 0 2000px rgba(0,0,0,0.34); z-index: 2; }
.cashout-opts { display: flex; flex-direction: column; gap: 10px; }
.cashout { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; border: 1px solid var(--border-strong); border-radius: 11px; }
.cashout .co-t { font-weight: 650; font-size: 13.5px; } .cashout .co-s { font-size: 11.5px; color: var(--text-3); } .cashout .co-fee { font-family: var(--mono); font-size: 12px; color: var(--text-2); }

/* bank-app home: payment options list */
.pay-opts { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.pay-opt { display: flex; align-items: center; gap: 10px; padding: 12px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.pay-opt .po-ic { width: 31px; height: 31px; border-radius: 9px; background: var(--bg-soft); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pay-opt .po-ic svg { width: 16px; height: 16px; }
.pay-opt .po-t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; }
.pay-opt .po-s { display: block; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-3); margin-top: 3px; white-space: nowrap; }
.pay-opt .po-ch { color: var(--text-3); font-size: 16px; flex-shrink: 0; margin-left: auto; }
.pay-opt.hero { border-color: var(--green-border); background: var(--green-soft); }
.pay-opt.hero .po-ic { background: rgba(133,216,158,0.18); color: var(--green); }
.pay-opt.hero .po-s { color: var(--green); }
.pay-opt.hero .po-ch { color: var(--green); }

/* Claude mobile app (MCP / agent demos) */
.claudeapp { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.claude-top { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 0 11px; border-bottom: 1px solid var(--border); }
.claude-mark { color: #d97757; font-size: 15px; line-height: 1; }
.claude-name { font-weight: 650; font-size: 14px; letter-spacing: -0.01em; }
.claude-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px 1px; }
.claude-composer { display: flex; align-items: center; gap: 8px; margin-top: auto; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 21px; padding: 7px 7px 7px 15px; }
.claude-composer .cc-text { flex: 1; font-size: 13px; color: var(--text-3); }
.claude-composer .cc-send { width: 28px; height: 28px; border-radius: 50%; background: #d97757; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }

.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 90%; font-size: 13.5px; line-height: 1.45; }
.msg.user { align-self: flex-end; background: rgba(255,255,255,0.09); border-radius: 16px; padding: 9px 13px; }
[data-theme="light"] .msg.user { background: rgba(14,22,19,0.06); }
.msg.claude { align-self: stretch; color: var(--text); padding: 0 2px; }
.msg.agent { align-self: flex-start; background: var(--card-hi); border: 1px solid var(--border); border-radius: 14px; padding: 10px 13px; }
.msg-who { display: none; }
.toolcall { align-self: stretch; font-family: var(--mono); font-size: 11px; color: var(--text-2); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; display: flex; gap: 8px; align-items: center; }
.composer { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border-strong); border-radius: 12px; padding: 8px 8px 8px 13px; }
.composer .ctext { flex: 1; font-size: 13px; color: var(--text-2); }
.composer .send { background: var(--green-bright); color: #062813; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 9px; }

/* intent-vs-build cards (agent-commerce / flight demo) */
.intentline { align-self: stretch; font-size: 13px; font-style: italic; color: var(--text-2); border-left: 2px solid var(--border-strong); padding: 2px 0 2px 11px; }
.buildcard { align-self: stretch; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 11px; padding: 11px 12px; }
.buildcard .bc-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 7px; }
.buildcard .bc-row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11.5px; padding: 2px 0; }
.buildcard .bc-row .bc-k { color: var(--text-3); }
.buildcard.injected { background: var(--danger-soft); border-color: var(--danger-border); }
.buildcard.injected .bc-row span:last-child { color: var(--danger); }
.attest { align-self: stretch; border: 1px solid var(--green-border); background: var(--green-soft); border-radius: 12px; padding: 13px; }
.attest .at-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.attest .at-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; } .attest .at-row .k { color: var(--text-3); }
.attest .at-amt { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0; }
.attest .at-btns { display: flex; gap: 8px; margin-top: 11px; }
.attest .at-btn { flex: 1; text-align: center; padding: 10px; border-radius: 10px; font-weight: 700; font-size: 13px; }
.attest .at-btn.sign { background: var(--green-bright); color: #062813; }
.attest .at-btn.deny { background: var(--card); border: 1px solid var(--border-strong); color: var(--text-2); }
.gate { align-self: stretch; border-radius: 12px; padding: 13px; border: 1px solid var(--danger-border); background: var(--danger-soft); }
.gate.ok { border-color: var(--green-border); background: var(--green-soft); }
.gate-title { font-weight: 700; font-size: 13px; } .gate-body { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.gate-powered { font-family: var(--mono); font-size: 10px; color: var(--text-3); margin-top: 9px; letter-spacing: 0.06em; }
.confirm-card { align-self: stretch; border: 1px solid var(--border-strong); border-radius: 12px; padding: 13px; background: var(--card-hi); }
.cc-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; } .cc-row .k { color: var(--text-3); }
.cc-btn { text-align: center; margin-top: 10px; padding: 10px; border-radius: 10px; font-weight: 700; font-size: 13px; background: var(--green-bright); color: #062813; }

/* monitor */
.stats { display: flex; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; font-size: 10px; }
.stat-l { color: var(--text-3); } .stat-v { font-family: var(--mono); font-weight: 600; margin-left: 5px; } .stat-v.g { color: var(--green); } .stat-v.a { color: var(--amber); } .stat-v.r { color: var(--danger); }
.events { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; max-height: 460px; overflow-y: auto; scroll-behavior: smooth; }
.event.just-added { animation: ev-in 360ms ease; }
@keyframes ev-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.event { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: start; }
.event-time { font-family: var(--mono); font-size: 10px; color: var(--text-3); padding-top: 2px; }
.event-badge { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; background: var(--green-soft); color: var(--green); border: 1px solid var(--green-border); }
.event-badge.warn { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-border); }
.event-badge.danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.event-badge.spin { background: var(--bg-soft); color: var(--text-2); border-color: var(--border); }
.event-title { font-size: 12.5px; } .event-title strong { font-weight: 700; }
.event-detail { font-family: var(--mono); font-size: 11px; color: var(--text-2); margin-top: 3px; } .event-detail .k { color: var(--text-3); }
.pill { font-family: var(--mono); font-size: 10px; padding: 1px 5px; border-radius: 4px; } .pill.ok { background: var(--green-soft); color: var(--green); }
body.details-hidden .event-detail { display: none; } body.details-hidden .stats { display: none; }

@media (max-width: 820px) { .stage { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── Roadmap frame ────────────────────────────────────────
   Chrome for a scenario that belongs to the ViaSmartPay roadmap set. Rendered by
   demo-kit.js's roadmapFrameHTML() when the page is opened with ?rm=<id>, so it
   sits above the title on every step and on a deep link into the middle of a run.
   Amber throughout, to read as a different kind of thing from the green the
   current-build scenarios use. */
.rm-frame { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 10px 14px; background: var(--bg-soft);
  border: 1px solid var(--border); border-left: 3px solid var(--violet); border-radius: 10px; }
.rmf-main { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rmf-badge { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--violet); background: var(--violet-soft); border: 1px solid var(--violet-border);
  padding: 4px 9px; border-radius: 5px; transition: filter 140ms ease; }
.rmf-badge:hover { filter: brightness(1.15); }
.rmf-badge:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.rmf-pos { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.rmf-juris { font-family: var(--mono); font-size: 11px; color: var(--text-2);
  border-left: 1px solid var(--border-strong); padding-left: 10px; }
.rmf-steps { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rmf-nav { font-size: 12px; color: var(--text-2); background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 12px; max-width: 210px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; transition: all 150ms ease; }
a.rmf-nav:hover { border-color: var(--violet-border); color: var(--text); }
a.rmf-nav:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.rmf-nav.is-off { opacity: 0.4; }
@media (max-width: 560px) {
  .rm-frame { align-items: flex-start; }
  .rmf-juris { border-left: none; padding-left: 0; }
  .rmf-steps { width: 100%; }
  .rmf-nav { flex: 1; max-width: none; text-align: center; }
}

/* ── Dominica till: keypad + three-way split ─────────────────────
   Used by the roadmap tax scenario. The split rows are the point of the
   screen, so `.sp-row.state` and `.sp-row.net` are weighted above the
   surrounding rows rather than being ordinary list items. */
.kp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 2px; }
.kp .k { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border); font-size: 18px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text); }
.kp .k.wide { grid-column: span 2; }
.till-amt { text-align: center; font-size: 30px; font-weight: 750; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; padding: 4px 0 2px; }
.till-sub { text-align: center; font-size: 11.5px; color: var(--text-3); margin-top: -4px; }
.sp { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; }
.sp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: var(--bg-soft); padding: 9px 12px; font-size: 12.5px; }
.sp-row .k { color: var(--text-2); }
.sp-row .v { font-variant-numeric: tabular-nums; font-weight: 600; }
/* Neutral-strong, deliberately NOT violet: violet is the roadmap/build-state
   colour in the page chrome, and reusing it here for "the state's money" would
   repeat the amber collision this surface was moved off. */
.sp-row.state { background: var(--card-hi); box-shadow: inset 3px 0 0 var(--text-2); }
.sp-row.state .k, .sp-row.state .v { color: var(--text); font-weight: 650; }
.sp-row.net { background: var(--green-soft); }
.sp-row.net .k, .sp-row.net .v { color: var(--green); font-weight: 700; }
.sp-row.total { background: var(--card-hi); font-size: 13.5px; }
.sp-row.total .v { font-weight: 750; }
.sp-note { font-size: 11px; color: var(--text-3); margin-top: 6px; line-height: 1.45; }

/* ── Dominica government-charge catalogue + Treasury receipt ──────
   Catalogue rows carry a second line saying what the charge covers, so `.k` can
   hold a nested `.sub`. `.sp-row.pick` is the charge the walkthrough pays: it
   only has to read as selectable, because the kit adds its own `.guide` pulse to
   anything carrying [data-action]. */
.sp-row .k .sub { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 400;
  color: var(--text-3); line-height: 1.35; }
.sp-row.pick { background: var(--card-hi); }
.sp-row.pick .k, .sp-row.pick .v { color: var(--text); font-weight: 650; }
/* The receipt's verification code sits on the card itself, not in a camera view:
   `.scanview` is a dark viewfinder and would read as scanning something. */
.rcode { display: flex; justify-content: center; padding: 8px 0 2px; }
.rcode .qrimg { width: 104px; height: 104px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.rcpt-ref { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--text-2); margin-top: 5px; }