/* ============================================================================
   CryptoPOS interactive demo — styling matched 1:1 to the Android app theme.
   Color tokens copied verbatim from ui/theme/Color.kt (LightPalette + Status*),
   spacing from Dimens.kt (4/8/12/16/24 scale, 6/8/12/16 radii).
   ========================================================================== */
:root {
  /* --- LightPalette (Color.kt) --- */
  --primary:#6750A4; --primary-container:#EADDFF; --on-primary-container:#21005D;
  --secondary:#625B71; --secondary-container:#E8DEF8; --on-secondary-container:#1D192B;
  --tertiary:#7D5260; --tertiary-container:#FFD8E4;
  --bg:#FEF7FF; --on-bg:#1D1B20; --surface:#FFFFFF; --on-surface:#1D1B20;
  --surface-variant:#F3EDF7; --on-surface-variant:#49454F; --outline:#CAC4D0; --error:#B3261E;
  /* --- semantic status tokens --- */
  --live-dot:#2E7D32; --demo-dot:#B26A00; --live-strong:#1B7A3D;
  --warn:#B26A00; --refund:#7C4DFF; --partial-refund:#9575CD; --usdc:#2775CA;
  /* --- chain brands --- */
  --c-bitcoin:#F7931A; --c-ethereum:#8E24AA; --c-solana:#00E5FF; --c-polygon:#8247E5;
  --c-monero:#FF6600; --c-tari:#C0179C; --c-minotari:#7E57C2;
  /* mode banner */
  --mainnet-bar:#A8322A; --on-mainnet-bar:#FFFFFF;
  /* page chrome (outside the phone) */
  --page-bg:#F4F1FA; --page-fg:#241f31; --page-muted:#5d5670; --page-card:#ffffff; --page-line:#e4def2;
  /* spacing */
  --s-xs:4px; --s-sm:8px; --s-md:12px; --s-lg:16px; --s-xl:24px;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:16px;
}
[data-theme="dark"] {
  --primary:#D0BCFF; --primary-container:#4F378B; --on-primary-container:#EADDFF;
  --secondary:#CCC2DC; --secondary-container:#4A4458; --on-secondary-container:#E8DEF8;
  --tertiary:#EFB8C8;
  --bg:#0B0E14; --on-bg:#E6EDF3; --surface:#161B22; --on-surface:#E6EDF3;
  --surface-variant:#21262D; --on-surface-variant:#C2CBD3; --outline:#3A434E; --error:#FF6B6B;
  --live-dot:#4CAF50; --demo-dot:#FFA000; --live-strong:#2E9E54;
  --page-bg:#0d1117; --page-fg:#e6edf3; --page-muted:#9aa6b2; --page-card:#161b22; --page-line:#2a323b;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--page-bg); color:var(--page-fg);
  -webkit-font-smoothing:antialiased; line-height:1.45;
}
code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.86em}

/* ---- page chrome ---- */
.demo-top{
  display:flex; align-items:center; gap:16px; padding:14px 22px;
  border-bottom:1px solid var(--page-line); position:sticky; top:0; background:var(--page-bg); z-index:5;
}
.demo-back{color:var(--page-muted); text-decoration:none; font-size:.9rem; white-space:nowrap}
.demo-back:hover{color:var(--page-fg)}
.demo-h1{font-size:1.05rem; margin:0; font-weight:700; flex:1}
.demo-top-controls{display:flex; gap:8px}
.demo-chip{
  font:inherit; font-size:.82rem; padding:6px 12px; border-radius:999px; cursor:pointer;
  background:var(--page-card); color:var(--page-fg); border:1px solid var(--page-line);
}
.demo-chip:hover{border-color:var(--primary)}

.demo-stage{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:28px;
  align-items:start; max-width:1240px; margin:0 auto; padding:26px 22px 60px;
}
.demo-explainer,.demo-side{position:sticky; top:78px}
.demo-lead{font-size:1rem; margin:0 0 14px}
.demo-hints{margin:0 0 14px; padding-left:18px; font-size:.9rem; color:var(--page-muted)}
.demo-hints li{margin:7px 0}
.demo-hints b{color:var(--page-fg)}
.demo-note{font-size:.82rem; color:var(--page-muted); background:var(--page-card);
  border:1px solid var(--page-line); border-left:3px solid var(--demo-dot); padding:10px 12px; border-radius:8px}
.demo-side h2{font-size:1rem; margin:0 0 8px}
.demo-side h3{font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--page-muted); margin:16px 0 6px}
#side-context{font-size:.9rem; color:var(--page-muted); min-height:3em}
.demo-state{
  background:var(--page-card); border:1px solid var(--page-line); border-radius:8px;
  padding:10px 12px; font-size:.78rem; white-space:pre-wrap; word-break:break-word; color:var(--page-fg);
}
.demo-side-foot{font-size:.76rem; color:var(--page-muted); margin-top:14px}

/* ============================ THE PHONE ============================ */
.phone{justify-self:center}
.phone-bezel{
  width:392px; background:#0a0a0c; border-radius:46px; padding:12px;
  box-shadow:0 20px 50px rgba(20,12,40,.32), inset 0 0 0 2px #26222e; position:relative;
}
.phone-notch{position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:120px; height:26px; background:#0a0a0c; border-radius:0 0 16px 16px; z-index:3; display:flex;
  align-items:center; justify-content:center}
.phone-notch .cam{width:11px; height:11px; border-radius:50%; background:#1b1b22; box-shadow:inset 0 0 0 2px #2b2b34}
.device{
  position:relative; width:368px; height:790px; background:var(--bg); color:var(--on-bg);
  border-radius:36px; overflow:hidden; display:flex; flex-direction:column;
}
.statusbar{display:flex; justify-content:space-between; align-items:center; padding:8px 22px 2px;
  font-size:.72rem; color:var(--on-bg); flex:0 0 auto}
.sb-icons{letter-spacing:2px; opacity:.7}
.screen{flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:0; -webkit-overflow-scrolling:touch}
.screen::-webkit-scrollbar{width:0}
.navpill{position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:108px; height:4px; border-radius:3px; background:var(--on-bg); opacity:.32}

/* ---- app chrome inside screen ---- */
.appbar{display:flex; align-items:center; gap:12px; padding:10px 16px 6px}
.appbar .menu{font-size:1.2rem; opacity:.85; line-height:1}
.appbar .brand{font-size:1.2rem; font-weight:600; flex:1; letter-spacing:-.01em}
.modepill{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700;
  padding:5px 12px; border-radius:999px}
.modepill .dot{width:7px; height:7px; border-radius:50%}
.modepill.mainnet{background:#e7f3ea; color:#1c5a2c} .modepill.mainnet .dot{background:var(--live-dot)}
.modepill.testnet{background:#e6eefb; color:#234e87} .modepill.testnet .dot{background:#2979FF}
.modepill.demo{background:#fcefd6; color:#7a5300} .modepill.demo .dot{background:var(--demo-dot)}
.subtitle-bar{padding:0 16px 4px; font-size:.74rem; color:var(--on-surface-variant)}
.mainnet-bar{background:var(--mainnet-bar); color:var(--on-mainnet-bar); text-align:center;
  font-size:.74rem; font-weight:700; letter-spacing:.04em; padding:6px 8px; margin:2px 0 0}
.mainnet-bar .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:#fff; margin-right:7px; vertical-align:middle}

/* content scroll padding */
.scrollwrap{padding:8px 16px 18px}

/* ---- bottom nav ---- */
.bottomnav{display:flex; flex:0 0 auto; border-top:1px solid var(--outline);
  background:var(--surface); padding:6px 0 4px}
.navitem{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.62rem; color:var(--on-surface-variant); cursor:pointer; padding:4px 0; border:0; background:none}
.navitem .ico{width:22px; height:22px; display:grid; place-items:center}
.navitem.active{color:var(--primary)}
.navitem.active .ico{background:var(--secondary-container); border-radius:999px}
.navitem .badge{position:absolute; transform:translate(14px,-6px); background:var(--error); color:#fff;
  font-size:.5rem; font-weight:700; padding:1px 4px; border-radius:6px}
.navitem-wrap{position:relative; flex:1; display:flex}

/* ============================ TERMINAL ============================ */
.today{display:flex; justify-content:space-between; align-items:center; background:var(--surface-variant);
  border-radius:var(--r-md); padding:9px 14px; margin:4px 0 10px; font-size:.8rem}
.today .big{font-weight:800; font-size:1rem}
.duecard{background:var(--surface); border:1px solid var(--outline); border-radius:var(--r-lg);
  padding:12px 14px; margin-bottom:10px}
.duecard .row{display:flex; justify-content:space-between; align-items:flex-start}
.duecard .lbl{font-size:.66rem; letter-spacing:.04em; color:var(--on-surface-variant)}
.duecard .amount{font-size:2rem; font-weight:800; color:var(--primary); font-variant-numeric:tabular-nums; line-height:1.1}
.duecard .rate{text-align:right; font-size:.66rem; color:var(--on-surface-variant)}
.duecard .rate .live{color:var(--live-dot)}
.duecard .paywith{font-size:.74rem; color:var(--on-surface-variant); margin-top:6px}
.cartline{display:flex; justify-content:space-between; align-items:center; background:var(--surface);
  border:1px solid var(--outline); border-radius:var(--r-md); padding:8px 12px; margin-bottom:10px; font-size:.84rem}
.cartline .qty{display:flex; align-items:center; gap:6px}

.subtabs{display:flex; background:var(--surface-variant); border-radius:var(--r-md); padding:3px; margin-bottom:10px}
.subtab{flex:1; text-align:center; font-size:.78rem; font-weight:700; padding:8px; border-radius:var(--r-sm);
  cursor:pointer; color:var(--on-surface-variant); border:0; background:none}
.subtab.active{background:var(--primary); color:#fff}

.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.key{height:54px; border-radius:var(--r-md); background:var(--surface-variant); border:1px solid transparent;
  font-size:1.3rem; font-weight:600; color:var(--on-surface); cursor:pointer; display:grid; place-items:center;
  transition:background .08s, transform .04s}
.key:active{transform:scale(.97)}
.key:hover{border-color:var(--outline)}
.key.clear{background:#fdeceb; color:var(--error)}
.key.back{grid-column:1 / span 3; height:46px; background:var(--surface-variant); color:var(--primary);
  font-size:.92rem; font-weight:600; gap:8px}
.gasnote{text-align:center; font-size:.72rem; color:var(--on-surface-variant); margin:10px 0}

.charge{width:100%; border:0; border-radius:var(--r-lg); padding:15px; font-size:.92rem; font-weight:700;
  color:#fff; background:var(--primary); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px}
.charge.live{background:var(--live-strong)}
.charge:disabled{background:var(--surface-variant); color:var(--on-surface-variant); cursor:not-allowed}

/* chain selector */
.chainsel{margin:12px 0 6px}
.chainsel .seclabel{font-size:.64rem; letter-spacing:.08em; font-weight:700; color:var(--on-surface-variant); margin:6px 0}
.chaingrid{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
.chaincard{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; cursor:pointer;
  border:1.5px solid var(--outline); border-radius:var(--r-md); background:var(--surface); font-size:.62rem}
.chaincard.sel{border-color:var(--primary); background:var(--secondary-container)}
.coinglyph{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff;
  font-size:.6rem; font-weight:800}
.tokrow{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.tokpill{font-size:.7rem; font-weight:700; padding:5px 12px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--outline); background:var(--surface); color:var(--on-surface)}
.tokpill.sel{border-color:var(--primary); background:var(--primary); color:#fff}

/* ============================ COINS GALLERY ============================ */
.sechead{font-size:.8rem; font-weight:800; letter-spacing:.06em; margin:6px 0 2px}
.secsub{font-size:.76rem; color:var(--on-surface-variant); margin:0 0 12px}
.gallery{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{background:var(--surface); border:1px solid var(--tile-brand,var(--outline)); border-radius:var(--r-lg);
  padding:14px; cursor:pointer; display:flex; flex-direction:column; gap:8px}
.tile:hover{box-shadow:0 2px 10px rgba(103,80,164,.14)}
.tile .head{display:flex; align-items:center; gap:8px}
.tile .name{font-weight:700; font-size:.86rem} .tile .sym{font-size:.66rem; color:var(--on-surface-variant)}
.tile .status{display:flex; align-items:center; gap:5px; font-size:.66rem; color:var(--on-surface-variant)}
.tile .status .dot{width:8px; height:8px; border-radius:50%}
.tile .status .dot.live{background:var(--live-dot)} .tile .status .dot.demo{background:var(--demo-dot)}
.tile.span2{grid-column:1 / -1} /* lone trailing tile spans full width (matches app D1 fix) */

/* dialog */
.dlg-scrim{position:absolute; inset:0; background:rgba(20,12,40,.45); display:grid; place-items:center; z-index:20}
.dialog{width:84%; background:var(--bg); border-radius:24px; padding:20px; box-shadow:0 16px 40px rgba(0,0,0,.4)}
.dialog h3{margin:0 0 14px; font-size:1.1rem}
.dialog .seclabel{font-size:.62rem; letter-spacing:.08em; font-weight:700; color:var(--on-surface-variant); margin:8px 0 6px}
.presets{display:flex; gap:6px; flex-wrap:wrap}
.preset{font-size:.74rem; font-weight:700; padding:6px 14px; border-radius:999px; cursor:pointer;
  border:0; background:var(--surface-variant); color:var(--on-surface-variant)}
.preset.sel{background:var(--primary); color:#fff}
.amountfield{width:100%; margin:10px 0; padding:11px 12px; border-radius:var(--r-md); font:inherit;
  border:1px solid var(--outline); background:var(--surface); color:var(--on-surface)}
.amountfield:focus{outline:none; border-color:var(--primary)}
.dlg-help{font-size:.72rem; color:var(--on-surface-variant); margin:2px 0 4px}
.dlg-err{font-size:.72rem; color:var(--error); margin:4px 0}
.dlg-actions{display:flex; justify-content:flex-end; align-items:center; gap:14px; margin-top:14px}
.dlg-go{border:0; border-radius:999px; padding:10px 20px; font-weight:700; color:#fff; background:var(--primary); cursor:pointer}
.dlg-cancel{border:0; background:none; color:var(--primary); font-weight:700; cursor:pointer; font-size:.86rem}

/* ============================ LIVE TRACKER ============================ */
.tracker-idle{display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 24px}
.tracker-idle h2{font-size:1.05rem; margin:0 0 8px}
.tracker-idle p{font-size:.86rem; color:var(--on-surface-variant); margin:0 0 22px; max-width:300px}
.idle-card{width:100%; max-width:330px; border:2px solid var(--outline); border-radius:28px; padding:26px;
  background:var(--surface-variant); display:flex; flex-direction:column; align-items:center; gap:14px}
.idle-card .qrico{width:64px; height:64px; border-radius:50%; background:var(--primary); display:grid; place-items:center; color:#fff; font-size:1.4rem}

.cancelbar{margin:8px 16px; background:#fdeceb; border:1px solid #f3c0bc; border-radius:var(--r-lg);
  padding:12px; text-align:center; font-weight:700; color:var(--on-surface); cursor:pointer; font-size:.86rem}
.session{margin:6px 16px 16px; background:var(--surface); border:1px solid var(--outline);
  border-radius:var(--r-lg); padding:18px; display:flex; flex-direction:column; align-items:center; gap:14px}
.session .shead{display:flex; justify-content:space-between; align-items:center; width:100%; font-size:.66rem; font-weight:700}
.session .shead .left{color:var(--primary); display:flex; align-items:center; gap:8px}
.session .shead .chain{color:var(--secondary)}
.modebadge{font-size:.6rem; font-weight:800; letter-spacing:.05em; padding:3px 9px; border-radius:999px; border:1px solid}
.modebadge.live{color:var(--live-dot); border-color:var(--live-dot); background:#e9f5ec}
.modebadge.sim{color:var(--demo-dot); border-color:var(--demo-dot); background:#fcefd6}

.qr{width:200px; height:200px; border:1px solid var(--outline); border-radius:var(--r-lg); padding:8px; background:#fff}
.qr canvas{width:100%; height:100%; display:block; image-rendering:pixelated}
.amt-big{font-size:1.7rem; font-weight:800; color:var(--primary); text-align:center; font-variant-numeric:tabular-nums}
.amt-sub{font-size:.82rem; color:var(--on-surface-variant); text-align:center}
.addrcard{width:100%; background:var(--surface-variant); border:1px solid var(--outline); border-radius:var(--r-md); padding:11px}
.addrcard .lbl{font-size:.62rem; color:var(--on-surface-variant)}
.addrcard .row{display:flex; justify-content:space-between; align-items:center; gap:8px}
.addrcard .val{font-family:ui-monospace,monospace; font-size:.74rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.copybtn{border:0; background:none; color:var(--primary); cursor:pointer; font-size:.9rem}

.simbox{width:100%; background:rgba(103,80,164,.06); border:1px solid rgba(103,80,164,.22); border-radius:var(--r-md); padding:12px}
.simbox .sh{display:flex; align-items:center; gap:6px; font-size:.66rem; font-weight:800; color:var(--secondary); margin-bottom:6px}
.simbox .sx{font-size:.66rem; color:var(--on-surface-variant); margin-bottom:10px}
.simgrid{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.simbtn{border:0; border-radius:var(--r-sm); padding:9px 4px; font-size:.68rem; font-weight:700; cursor:pointer}
.simbtn.fast{background:var(--secondary); color:#fff}
.simbtn.slow{background:var(--surface-variant); color:var(--on-surface)}
.simbtn.failgas{background:#f6d7d4; color:#7a1d16}
.simbtn.faildbl{background:var(--error); color:#fff}
.btn-outline{width:100%; border:1px solid var(--outline); background:none; border-radius:var(--r-md); padding:12px;
  font-weight:700; color:var(--error); cursor:pointer; font-size:.84rem}

/* mempool / confirming */
.bigcircle{width:80px; height:80px; border-radius:50%; background:var(--surface-variant); display:grid; place-items:center;
  font-size:1.3rem; font-weight:800; color:var(--primary)}
.bigcircle.secondary{color:var(--secondary)}
.statehead{font-size:1.15rem; font-weight:900; letter-spacing:.02em; text-align:center}
.progress{width:100%; height:6px; border-radius:3px; background:var(--surface-variant); overflow:hidden}
.progress > i{display:block; height:100%; background:var(--primary); transition:width .5s}
.progress.secondary > i{background:var(--secondary)}
.detailcard{width:100%; background:var(--surface-variant); border-radius:var(--r-md); padding:11px; font-size:.74rem}
.detailcard .r{display:flex; justify-content:space-between; gap:8px; padding:2px 0}
.detailcard .r .k{color:var(--on-surface-variant)} .detailcard .r .v{font-family:ui-monospace,monospace}
.detailcard .r .v.sim{color:var(--demo-dot); font-weight:700; font-family:inherit}
.statusline{font-size:.82rem; color:var(--primary); text-align:center}

/* receipt */
.receipt{margin:6px 16px 16px; background:#fff; color:#1d1b20; border:1px solid var(--outline);
  border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:ui-monospace,monospace}
.receipt .check{width:54px; height:54px; border-radius:50%; background:var(--live-dot); display:grid; place-items:center; color:#fff; font-size:1.6rem; margin-bottom:6px; font-family:system-ui}
.receipt .rtitle{font-weight:800; letter-spacing:.08em; font-size:1rem}
.receipt .rmerchant{font-size:.7rem; color:#7a7580; letter-spacing:.1em}
.receipt .rsim{font-size:.66rem; color:var(--demo-dot); font-weight:700; text-align:center}
.receipt .rdiv{color:#cfc9d6; letter-spacing:1px; font-size:.7rem; align-self:stretch; text-align:center; overflow:hidden; white-space:nowrap}
.receipt .rrow{display:flex; justify-content:space-between; align-self:stretch; font-size:.7rem; gap:10px}
.receipt .rrow .k{color:#6b6675} .receipt .rrow .v{text-align:right; word-break:break-all}
.receipt .rtotal{display:flex; justify-content:space-between; align-self:stretch; align-items:baseline}
.receipt .rtotal .k{font-weight:800; font-size:.78rem} .receipt .rtotal .v{font-weight:800; font-size:1.2rem; font-family:system-ui}
.receipt .rfoot{font-size:.56rem; color:#b3aebd; letter-spacing:.08em; text-align:center; margin-top:4px}
.receipt .rbtn{margin-top:12px; width:100%; background:#111016; color:#fff; border:0; border-radius:var(--r-md); padding:13px; font-weight:700; cursor:pointer; font-family:system-ui; letter-spacing:.04em}
.receipt .rwarn{color:var(--warn); font-weight:700}

/* failed */
.failed{margin:6px 16px; background:#fdf3f2; border:1px solid #f0c8c4; border-radius:var(--r-lg); padding:26px 20px;
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.failed .x{width:64px; height:64px; border-radius:50%; background:var(--error); color:#fff; display:grid; place-items:center; font-size:1.8rem}
.failed h2{margin:0; color:var(--error); font-size:1.2rem; letter-spacing:.02em}
.failed .reason{width:100%; background:var(--surface-variant); border-radius:var(--r-md); padding:12px; text-align:left}
.failed .reason .k{font-size:.7rem; font-weight:700}
.failed .reason .v{font-family:ui-monospace,monospace; font-size:.82rem; color:var(--error)}
.failed p{font-size:.82rem; color:var(--on-surface-variant); margin:0}
.failed .fbtn{width:100%; background:var(--error); color:#fff; border:0; border-radius:var(--r-md); padding:13px; font-weight:700; cursor:pointer}

/* donation */
.donation .notice{width:100%; background:rgba(125,82,96,.14); border:1px solid rgba(125,82,96,.4);
  border-radius:var(--r-md); padding:11px; font-size:.76rem; display:flex; gap:8px; align-items:center}

/* ============================ HISTORY ============================ */
.ledgerhead{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px}
.ledgerhead .ttl{font-size:.82rem; font-weight:800; letter-spacing:.06em}
.ledgerhead .sub{font-size:.66rem; color:var(--on-surface-variant)}
.ledgerhead .acts{display:flex; gap:14px} .ledgerhead .acts button{border:0; background:none; cursor:pointer; font-size:1.1rem; color:var(--on-surface-variant)}
.ledgerhead .acts .del{color:var(--error)}
.recon{border:1px solid rgba(46,125,50,.5); border-radius:var(--r-lg); padding:13px; margin-bottom:12px}
.recon .rl{font-size:.62rem; font-weight:700; letter-spacing:.05em}
.recon .rbig{font-size:1.3rem; font-weight:900; color:var(--live-dot)}
.recon .rmuted{font-size:.66rem; color:var(--on-surface-variant); margin-top:3px}
.histrow{background:var(--surface); border:1px solid var(--outline); border-radius:var(--r-md); padding:13px; margin-bottom:8px}
.histrow .top{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.histrow .sdot{width:8px; height:8px; border-radius:50%}
.histrow .pair{font-size:.66rem; font-weight:700; color:var(--secondary)}
.histrow .stat{font-size:.6rem; font-weight:700}
.histrow .ts{font-size:.64rem; color:var(--on-surface-variant); margin-top:3px}
.histrow .memo{font-size:.84rem; font-weight:700; margin-top:6px}
.histrow .rate{font-size:.64rem; color:var(--on-surface-variant)}
.histrow .amt{font-size:.95rem; font-weight:800; color:var(--primary); font-family:ui-monospace,monospace; float:right}
.histrow .hash{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--outline); margin-top:8px; padding-top:6px; font-size:.64rem; color:var(--on-surface-variant); font-family:ui-monospace,monospace}
.emptystate{display:flex; flex-direction:column; align-items:center; text-align:center; padding:50px 24px; color:var(--on-surface-variant)}
.emptystate .ico{font-size:3rem; opacity:.4}

/* ============================ SETTINGS ============================ */
.setcard{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--outline);
  border-radius:var(--r-lg); padding:15px; margin-bottom:12px; cursor:pointer}
.setcard .ico{width:42px; height:42px; border-radius:var(--r-md); background:var(--secondary-container); display:grid; place-items:center; color:var(--primary); font-size:1.1rem}
.setcard .body{flex:1}
.setcard .t{font-weight:700; font-size:.92rem}
.setcard .d{font-size:.72rem; color:var(--on-surface-variant)}
.setcard .chev{color:var(--on-surface-variant)}
.subhead{display:flex; align-items:center; gap:10px; padding:6px 0 12px}
.subhead .back{border:0; background:none; font-size:1.1rem; cursor:pointer; color:var(--on-surface)}
.subhead .t{font-size:.82rem; font-weight:800; letter-spacing:.06em}
.modecard{border:1px solid var(--outline); border-radius:var(--r-lg); padding:14px; margin-bottom:12px}
.modecard.sel{border-color:var(--primary); background:rgba(103,80,164,.06)}
.modecard .ml{font-size:.62rem; font-weight:700; letter-spacing:.06em; color:var(--secondary)}
.modecard .mstate{font-size:.92rem; font-weight:700; margin:4px 0 10px}
.modebtns{display:flex; gap:8px}
.modebtns .mb{flex:1; border:0; border-radius:var(--r-md); padding:11px; font-weight:700; font-size:.78rem; cursor:pointer; background:var(--surface-variant); color:var(--on-surface)}
.modebtns .mb.sel{background:var(--primary); color:#fff}
.setinfo{font-size:.74rem; color:var(--on-surface-variant); margin:8px 2px}

/* product catalog (Terminal subtab + Store) */
.catalog{display:flex; flex-direction:column; gap:8px}
.prodcard{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--outline);
  border-radius:var(--r-md); padding:11px 12px}
.pico{width:34px; height:34px; border-radius:var(--r-sm); background:var(--surface-variant); display:grid; place-items:center; font-size:1.05rem}
.pico.sm{width:28px; height:28px; font-size:.9rem}
.pbody{flex:1} .pn{font-weight:700; font-size:.84rem} .pc{font-size:.68rem; color:var(--on-surface-variant)}
.padd{width:30px; height:30px; border-radius:50%; border:0; background:var(--primary); color:#fff; font-size:1.1rem; cursor:pointer; line-height:1}
.storeprod{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--surface-variant)}
.storeprod:first-of-type{border-top:0} .star{color:var(--on-surface-variant)}

/* settings: payment-rail rows + fields */
.railrow{background:var(--surface); border:1px solid var(--outline); border-radius:var(--r-md); padding:12px; margin-bottom:8px}
.rl-head{display:flex; justify-content:space-between; align-items:center; gap:8px}
.rl-name{font-weight:700; font-size:.86rem} .rl-sub{font-size:.68rem; color:var(--on-surface-variant)}
.railchip{font-size:.6rem; font-weight:800; letter-spacing:.04em; padding:4px 9px; border-radius:999px; border:1px solid; white-space:nowrap}
.railchip.ready{color:var(--live-dot); border-color:var(--live-dot); background:#e9f5ec}
.railchip.demo{color:var(--demo-dot); border-color:var(--demo-dot); background:#fcefd6}
.railchip.needs{color:var(--demo-dot); border-color:var(--demo-dot); background:#fcefd6}
.fieldbox{border:1px solid var(--outline); border-radius:var(--r-md); padding:11px 12px; font-size:.84rem; margin:4px 0 6px; background:var(--surface)}

/* responsive: collapse side panels under the phone on narrow screens */
@media (max-width:1080px){
  .demo-stage{grid-template-columns:1fr; justify-items:center}
  .demo-explainer,.demo-side{position:static; max-width:420px}
  .demo-side{order:3}
}