/* Glass, ambient background, neon and motion. Shared by the website and the wallet. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-app); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); font: 15px/1.55 var(--font-sans); min-height: 100vh; overflow-x: hidden; }
img, svg { max-width: 100%; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mono { font-size: 12.5px; overflow-wrap: anywhere; color: var(--text-2); }

/* Ambient background: fixed, never interactive, cross-fades by opacity only. */
.fx-bg { position: fixed; inset: 0; height: 100lvh; z-index: -1; pointer-events: none; overflow: hidden; background: var(--bg-app); }
.fx-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2.4s ease; }
.fx-bg img.on { opacity: 1; }
.fx-bg::before { content: ""; position: absolute; inset: 0; background: var(--veil); z-index: 1; }
.fx-bg::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, var(--bg-app) 100%); }
.fx-bg .grain { position: absolute; inset: 0; z-index: 3; background: url("noise.webp") repeat; background-size: 128px 128px;
  opacity: .035; mix-blend-mode: overlay; }
[data-theme="light"] .fx-bg .grain { opacity: .05; mix-blend-mode: multiply; }

/* Glass surfaces: in-flow cards never use backdrop-filter. */
.glass { background: var(--glass-sheen), var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--glass-rim), var(--shadow); min-width: 0; }
.inset { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.float { background: var(--bg-float); border: 1px solid var(--line); box-shadow: var(--glass-rim), var(--shadow);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.1); backdrop-filter: blur(var(--blur)) saturate(1.1); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* Fields: dark wells. */
input, select, textarea { width: 100%; background: var(--bg-field); border: 1px solid var(--line); color: var(--text);
  padding: 12px 13px; border-radius: var(--radius-sm); font: inherit; min-height: 44px; }
input[type="radio"], input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--text); }
input[type="range"] { padding: 0; accent-color: var(--text); background: transparent; border: 0; }
select option { background: var(--g2); color: #fff; }
[data-theme="light"] select option { background: #fff; color: #000; }
textarea { resize: vertical; font-family: var(--font-mono); font-size: 13px; }
::placeholder { color: var(--text-3); }

/* Buttons. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border-radius: var(--radius-sm); font: 600 15px/1 var(--font-sans); cursor: pointer; text-decoration: none;
  border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--text);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), background .25s; }
.btn:hover { background: var(--bg-inset); }
.btn-primary { background: var(--btn-bg); color: var(--btn-text); border-color: transparent; }
.btn-primary:hover { background: var(--btn-bg); box-shadow: 0 0 0 1px var(--neon), 0 0 22px var(--neon-soft); }
.btn-danger { background: var(--danger-bg); color: var(--danger-text); border-color: transparent; }
.btn:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--neon), 0 0 18px var(--neon-soft) !important; }
[data-theme="light"] .btn-primary:hover { box-shadow: 0 0 0 2px #000, 0 8px 18px -8px rgba(0, 0, 0, .4); }

/* Neon: restrained. */
.glow { text-shadow: 0 0 28px var(--neon-soft), 0 0 2px rgba(255, 255, 255, .25); }
[data-theme="light"] .glow { text-shadow: none; }
.rail { position: relative; }
.rail.on::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--text); box-shadow: 0 0 12px var(--neon); }
[data-theme="light"] .rail.on::before { box-shadow: none; }

/* Preserved status colours (exact hues). On light glass they get a dark backing. */
.ok { color: var(--status-success) !important; }
.warn { color: var(--status-warning) !important; }
.bad { color: var(--status-error) !important; }
.err-site { color: var(--status-error-site) !important; }
[data-theme="light"] .ok, [data-theme="light"] .warn, [data-theme="light"] .bad, [data-theme="light"] .err-site {
  background: var(--status-backing); padding: 1px 7px; border-radius: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; box-shadow: 0 0 8px currentColor; }
.dot.live { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* Reveal on scroll (once). */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Weak devices and reduced motion/transparency: no blur, no cross-fades, no drift. */
html[data-fx="low"] .float { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg-float-solid); }
html[data-fx="low"] .modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .7); }
html[data-fx="low"] .fx-bg img { transition: none; }
html[data-fx="low"] .drift { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .drift, .dot.live { animation: none !important; }
  .fx-bg img { transition: none; }
}

/* Layout helpers. */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.row-flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-flex > *, .grid > * { min-width: 0; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chip-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chip-scroll::-webkit-scrollbar { display: none; }