/* xPay (minimal): the xPay neon glass over the 7,777-tetrahedron torus, for xCoin (XID). */
:root {
  --glass: rgba(57,255,20,.03); --glass-strong: rgba(57,255,20,.06); --glass-input: rgba(57,255,20,.04);
  --stroke: rgba(127,255,0,.5); --stroke-light: rgba(127,255,0,.28); --stroke-subtle: rgba(127,255,0,.14);
  --blur-soft: 8px; --blur-med: 12px; --blur-strong: 18px;
  --shadow-sm: 0 2px 12px rgba(57,255,20,.06), 0 0 1px rgba(127,255,0,.25);
  --shadow-md: 0 8px 32px rgba(57,255,20,.08), 0 0 1px rgba(127,255,0,.35);
  --glow-neon: 0 0 12px rgba(57,255,20,.55), 0 0 36px rgba(57,255,20,.2);
  --text: rgba(255,255,255,.96); --text-secondary: rgba(255,255,255,.68); --text-muted: rgba(255,255,255,.42);
  --neon: #39FF14; --neon-2: #7FFF00; --red: #ff4d4d; --amber: #ffcc33;
  --bg: #050505;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: 'Orbitron', var(--font);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px;
  --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 14px; --spacing-lg: 20px; --spacing-xl: 28px;
  --transition-fast: .18s ease;
  --z-dropdown: 100; --z-modal: 1000; --z-overlay: 9000; --z-toast: 10000;
  --tab-h: 64px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); }
body { font-family: var(--font); color: var(--text); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; min-height: 100dvh; overflow-x: clip; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
#bgAnimCanvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
button { font: inherit; color: inherit; }
a { color: var(--neon); text-decoration: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid rgba(57,255,20,.6); outline-offset: 2px; }
.hidden, [hidden] { display: none !important; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-muted); }
.small { font-size: 13px; }

/* ── layout ── */
.view { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; min-height: 100dvh; padding: calc(env(safe-area-inset-top) + 16px) 16px calc(var(--tab-h) + env(safe-area-inset-bottom) + 20px); display: flex; flex-direction: column; gap: 12px; }
.view.no-tabs { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); justify-content: center; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 2px; }
.head h1, .head p { text-shadow: 0 1px 12px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9); }
.head h1 { margin: 0; font: 700 22px/1.2 var(--display); letter-spacing: .02em; }
.head p { margin: 2px 0 0; color: var(--text-muted); font-size: 13px; }

/* ── frosted glass ── */
.glass { border-radius: var(--radius-xl); border: 1px solid var(--stroke-light); background: rgba(0,0,0,.32); backdrop-filter: blur(var(--blur-strong)) saturate(1.2); -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(1.2); box-shadow: var(--shadow-md); padding: 18px; }
.glass.tight { padding: 12px 14px; }
.stack { display: grid; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.eyebrow { font: 600 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 18px; border-radius: var(--radius-md); border: 1px solid var(--stroke-light); background: rgba(0,0,0,.45); backdrop-filter: blur(var(--blur-med)); -webkit-backdrop-filter: blur(var(--blur-med)); color: var(--text); font-weight: 600; font-size: 15px; cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--neon); color: #000; border-color: rgba(127,255,0,.6); }
.btn-primary:not(:disabled):hover { box-shadow: var(--glow-neon); }
.btn-danger { border-color: rgba(255,77,77,.6); color: var(--red); }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.link { background: none; border: 0; padding: 4px; color: var(--neon); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn svg, .ico { width: 18px; height: 18px; flex: none; }
.ico-mask { display: inline-block; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }

/* ── inputs ── */
.field { display: grid; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.field .hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-muted); font-size: 12px; }
input, textarea, select { width: 100%; font: 16px var(--font); color: var(--text); background: var(--glass-input); border: 1px solid var(--stroke-light); border-radius: var(--radius-md); padding: 13px 14px; }
input:focus, textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(57,255,20,.15); }
textarea { font-family: var(--font-mono); resize: none; }
.input-row { display: flex; gap: 8px; } .input-row input { flex: 1; min-width: 0; }

/* ── home ── */
.balance-card { text-align: center; display: grid; gap: 6px; justify-items: center; padding: 22px 18px; }
.balance-card .logo { width: 44px; height: 44px; }
.bal { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; }
.bal b { font: 700 clamp(34px, 11vw, 48px)/1.05 var(--font-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bal span { font: 700 14px var(--display); color: var(--neon); letter-spacing: .1em; }
.bal-label { font: 600 11px var(--font); letter-spacing: .2em; color: var(--text-muted); text-transform: uppercase; }
.bal-note { font-size: 13px; color: var(--text-secondary); margin: 0; }
.addr-chip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.addr-chip .mono { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── xCoin mark (tetromino identicon) ── */
.mark { display: inline-block; line-height: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--stroke-light); background: #0b0f1a; flex: none; }
.mark svg { display: block; width: 100%; height: 100%; }

/* ── arithmetic ── */
.math { display: grid; gap: 0; font-variant-numeric: tabular-nums; }
.math > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--stroke-subtle); }
.math dt { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.math dt .op { display: inline-block; width: 1.3em; color: var(--neon); font-size: 15px; }
.math dd { margin: 0 0 0 auto; font: 700 16px var(--font-mono); }
.math .res { border: 1px solid var(--neon); border-radius: var(--radius-sm); background: rgba(57,255,20,.12); margin-top: 6px; padding: 9px; }
.math .res dt, .math .res dd { color: var(--neon); }
details.sum > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
details.sum > summary::-webkit-details-marker { display: none; }
details.sum > summary::after { content: '+'; color: var(--neon); font: 700 20px/1 var(--font-mono); }
details.sum[open] > summary::after { content: '−'; }
details.sum[open] > summary { margin-bottom: 8px; }
.pending { border-color: var(--neon); }
.tag { display: inline-block; font: 700 10px var(--font); letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; background: var(--neon); color: #000; }
.tag.dim { background: transparent; color: var(--amber); border: 1px solid var(--amber); }

/* ── lists ── */
.list { display: grid; }
.item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--stroke-subtle); color: inherit; text-decoration: none; }
.item:last-child { border-bottom: 0; }
.item-title { font-weight: 600; font-size: 15px; display: flex; gap: 6px; align-items: center; }
.item-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amt { font: 700 15px var(--font-mono); white-space: nowrap; text-align: right; }
.amt.in { color: var(--neon); }
.dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--stroke-light); }
.dot.in { background: rgba(57,255,20,.15); color: var(--neon); }
.dot svg { width: 16px; height: 16px; }
.day { font: 600 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); padding: 14px 0 4px; }
.list > .day:first-child { padding-top: 0; }
.empty { text-align: center; padding: 22px 8px; color: var(--text-muted); font-size: 14px; }
.notice { border: 1px solid var(--stroke-light); border-radius: var(--radius-md); padding: 11px 13px; font-size: 13px; background: rgba(0,0,0,.35); color: var(--text-secondary); }
.notice.bad { border-color: rgba(255,77,77,.7); color: #ffb3b3; }
.notice.warn { border-color: rgba(255,204,51,.6); color: #ffe39a; }
.notice.good { border-color: var(--neon); color: var(--text); }

/* ── send ── */
.quick { display: flex; gap: 8px; }
.quick .btn { flex: 1; }
.recipient { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.recipient .mono { font-size: 12px; word-break: break-all; color: var(--text-secondary); }
.review { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; }
.review dt { color: var(--text-muted); font-size: 13px; }
.review dd { margin: 0; text-align: right; font-weight: 600; word-break: break-all; }
.steps { display: flex; gap: 6px; }
.steps span { flex: 1; height: 3px; border-radius: 2px; background: var(--stroke-subtle); }
.steps span.on { background: var(--neon); box-shadow: 0 0 8px rgba(57,255,20,.5); }

/* ── receive: the orb cuts through the glass to the torus ── */
.orb-card { display: grid; justify-items: center; gap: 14px; text-align: center; min-height: 340px; align-content: center; }
.orb-spacer { width: 200px; height: 200px; }
.orb-portal { position: fixed; z-index: 5; width: 200px; height: 200px; cursor: pointer; touch-action: manipulation; }
.orb-portal canvas { width: 100%; height: 100%; display: block; }
.orb-lottie { position: fixed; left: -9999px; top: 0; width: 360px; height: 360px; pointer-events: none; }
.qr-face { width: 200px; height: 200px; background: #fff; border-radius: var(--radius-md); padding: 10px; display: grid; place-items: center; cursor: pointer; }
.qr-face canvas, .qr-face img { width: 180px !important; height: 180px !important; image-rendering: pixelated; }
.orb-hint { font-size: 12px; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; }

/* ── PIN pad ── */
.pin-screen { display: grid; gap: 22px; justify-items: center; text-align: center; }
.pin-screen h1 { margin: 0; font: 700 20px var(--display); letter-spacing: .04em; }
.pin-screen p { margin: 0; color: var(--text-secondary); font-size: 14px; max-width: 32ch; }
.pin-dots { display: flex; gap: 14px; height: 18px; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--neon); }
.pin-dots i.on { background: var(--neon); box-shadow: 0 0 10px rgba(57,255,20,.7); }
.pin-dots.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pinpad { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px; }
.pinpad button { width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--stroke-light); background: rgba(0,0,0,.4); backdrop-filter: blur(var(--blur-med)); -webkit-backdrop-filter: blur(var(--blur-med)); font: 500 28px var(--font); color: var(--text); cursor: pointer; }
.pinpad button:active { background: rgba(57,255,20,.25); }
.pinpad button.ghost { border-color: transparent; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 14px; color: var(--text-secondary); }
.pin-msg { min-height: 20px; font-size: 13px; color: var(--red); }
.pin-busy { display: flex; gap: 8px; align-items: center; color: var(--text-secondary); font-size: 13px; min-height: 20px; }
@media (max-height: 640px) { .pinpad { grid-template-columns: repeat(3, 64px); gap: 10px; } .pinpad button { width: 64px; height: 64px; font-size: 24px; } }

/* ── seed ── */
.seed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font: 600 15px var(--font-mono); }
.seed-grid span { text-align: center; padding: 8px 2px; border-radius: 8px; background: rgba(57,255,20,.06); border: 1px solid var(--stroke-subtle); -webkit-user-select: text; user-select: text; }
.seed-grid span i { display: block; font: 600 9px var(--font); color: var(--text-muted); font-style: normal; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-secondary); }
.check input { width: 20px; height: 20px; flex: none; accent-color: var(--neon); margin-top: 1px; }

/* ── settings ── */
.set-list { display: grid; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--stroke-subtle); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; font-size: 15px; color: var(--text); cursor: pointer; }
.set-row:last-child { border-bottom: 0; }
.set-row .val { color: var(--text-muted); font-size: 14px; }
.set-row.danger { color: var(--red); }
.set-row select { width: auto; padding: 6px 10px; font-size: 14px; }

/* ── tabs: the xPay SVG icons ── */
.tab-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dropdown); display: flex; justify-content: space-around; padding: 8px 0 calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--stroke-light); background: rgba(0,0,0,.9); backdrop-filter: blur(var(--blur-med)); -webkit-backdrop-filter: blur(var(--blur-med)); }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-muted); font-size: 11px; font-weight: 500; text-decoration: none; position: relative; }
.tab-item .ico-mask { width: 24px; height: 24px; }
.tab-item[aria-current="page"] { color: var(--neon); }
.tab-item[aria-current="page"] .ico-mask { filter: drop-shadow(0 0 6px rgba(57,255,20,.55)); }
.tab-item[aria-current="page"]::after { content: ''; position: absolute; top: -9px; left: 22%; right: 22%; height: 2px; border-radius: 2px; background: var(--neon); box-shadow: 0 0 8px rgba(57,255,20,.6); }

/* ── sheets, toast, scanner ── */
.sheet { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: end center; background: rgba(0,0,0,.55); }
.sheet > .glass { width: min(480px, 100%); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); max-height: 92dvh; overflow: auto; background: rgba(5,5,5,.82); }
.scan-video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--neon); background: #000; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 18px); transform: translateX(-50%); z-index: var(--z-toast); max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: var(--radius-md); border: 1px solid var(--neon); background: rgba(0,0,0,.85); backdrop-filter: blur(var(--blur-med)); -webkit-backdrop-filter: blur(var(--blur-med)); font-size: 14px; text-align: center; }
.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flash { 0% { color: var(--neon); text-shadow: 0 0 16px var(--neon); } 100% { text-shadow: none; } }
.flash { animation: flash 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .flash, .spinner, .pin-dots.shake { animation: none; } }

/* ── welcome ── */
.welcome { text-align: center; display: grid; gap: 14px; justify-items: center; }
.welcome img { width: 84px; height: 84px; }
.welcome h1 { margin: 0; font: 800 28px var(--display); letter-spacing: .04em; }
.welcome p { margin: 0; color: var(--text-secondary); font-size: 14px; }
.install-tip { font-size: 13px; color: var(--text-secondary); }
/* ── phone-only notice and install steps ── */
.how { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; text-align: left; font-size: 14px; color: var(--text-secondary); }
.how b { color: var(--text); }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; width: 100%; text-align: left; }
.view.no-tabs:has(.how-grid) { max-width: 760px; }

/* ═══ App behaviour on phones: no zoom on taps, no sideways panning ═══ */
html, body { max-width: 100%; overflow-x: hidden; overscroll-behavior: none; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { touch-action: pan-y; }                               /* vertical scrolling only; no pinch, no sideways drag */
button, a, .btn, .pinpad button, .tab-item, .orb-portal, .qr-face, .set-row, input, select, textarea { touch-action: manipulation; }
.entropy-screen, .entropy-canvas { touch-action: none; }    /* the finger-slide screen owns every gesture */
.view, .glass, .sheet > .glass { max-width: 100%; min-width: 0; }
.view > * { min-width: 0; }