/* =============================================================================
 * Nimiq UI Kit — chrome / layout styles (the kit's own UI, not the design system)
 * Dimensions in px to stay independent of @nimiq/style's 8px rem grid.
 * ========================================================================== */

* { box-sizing: border-box; }

/* Fluid type scale — clamp(min, viewport, max). Desktop max = original sizes,
   so nothing changes on wide screens; the min/vw floor kicks in on phones. */
:root {
  --fs-hero-h1: clamp(28px, 6vw, 40px);
  --fs-hero-p:  clamp(16px, 2.4vw, 18px);
  --fs-h2:      clamp(22px, 4vw, 28px);
  --fs-h3:      clamp(16px, 2.2vw, 18px);
  --fs-lede:    clamp(15px, 1.6vw, 16px);
}

html, body { margin: 0; }
body.kit-body {
  font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1F2348;
  background: #F4F4F4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: #0582CA; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Shell --------------------------------------------------------------- */
.kit-shell { display: flex; min-height: 100vh; }

/* --- Sidebar ------------------------------------------------------------- */
.kit-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 288px;
  background: #1F2348;
  background-image: radial-gradient(100% 100% at bottom right, #260133, #1F2348);
  color: #fff; display: flex; flex-direction: column; z-index: 20;
}
.kit-brand { display: flex; align-items: center; gap: 12px; padding: 24px 24px 16px; }
.kit-brand svg, .kit-brand img { width: 32px; height: 32px; }
.kit-brand-title { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.kit-brand-sub { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.6; margin-top: 2px; }

.kit-search-wrap { padding: 4px 20px 12px; }
.kit-search {
  width: 100%; border: none; outline: none; border-radius: 8px;
  background: rgba(255,255,255,0.1); color: #fff;
  padding: 10px 14px; font-family: inherit; font-size: 14px;
}
.kit-search::placeholder { color: rgba(255,255,255,0.5); }
.kit-search:focus { background: rgba(255,255,255,0.16); box-shadow: 0 0 0 2px rgba(12,166,254,0.5); }

.kit-nav { overflow-y: auto; padding: 4px 12px 32px; flex: 1; }
.kit-nav-group { margin-top: 18px; }
.kit-nav-group-title {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  opacity: 0.45; padding: 4px 12px; font-weight: 700;
}
.kit-nav a {
  display: block; color: rgba(255,255,255,0.72); font-size: 14px;
  padding: 6px 12px; border-radius: 6px; text-decoration: none; transition: background .15s, color .15s;
}
.kit-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.kit-nav a.active { background: rgba(12,166,254,0.18); color: #fff; box-shadow: inset 2px 0 0 #0CA6FE; }
.kit-nav a.hidden-by-search { display: none; }

/* --- Main ---------------------------------------------------------------- */
.kit-main { margin-left: 288px; flex: 1; min-width: 0; }
.kit-container { max-width: 1080px; margin: 0 auto; padding: 40px 48px 120px; }

.kit-hero { padding: 24px 0 8px; }
.kit-hero h1 { font-size: var(--fs-hero-h1); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.kit-hero p { font-size: var(--fs-hero-p); color: rgba(31,35,72,0.6); margin: 0 0 4px; max-width: 62ch; }
.kit-hero-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.kit-hero-links a { font-size: 15px; font-weight: 600; }

/* --- Sections ------------------------------------------------------------ */
.kit-section { padding-top: 56px; scroll-margin-top: 24px; }
.kit-section > h2 {
  font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.kit-section-lede { color: rgba(31,35,72,0.6); font-size: var(--fs-lede); margin: 0 0 20px; max-width: 68ch; }
.kit-provenance {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: rgba(31,35,72,0.45);
  background: rgba(31,35,72,0.06); padding: 3px 9px; border-radius: 20px; vertical-align: middle;
}
.kit-subsection { margin-top: 36px; }
.kit-subsection > h3 { font-size: var(--fs-h3); font-weight: 700; margin: 0 0 14px; }
.kit-note { font-size: 14px; color: rgba(31,35,72,0.55); margin: 10px 0; }
.kit-note code, .kit-inline-code {
  font-family: 'Fira Mono', monospace; font-size: 0.88em;
  background: rgba(31,35,72,0.07); padding: 1px 6px; border-radius: 4px;
}

/* --- Cards / panels ------------------------------------------------------ */
.kit-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 28px rgba(0,0,0,0.06); padding: 24px; }

/* --- Color swatches ------------------------------------------------------ */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.swatch {
  border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06); cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.swatch:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.12); }
.swatch-chip { height: 76px; }
.swatch-meta { padding: 10px 12px; }
.swatch-name { font-weight: 700; font-size: 14px; text-transform: capitalize; }
.swatch-val { font-family: 'Fira Mono', monospace; font-size: 12px; color: rgba(31,35,72,0.55); margin-top: 2px; }
.swatch-var { font-family: 'Fira Mono', monospace; font-size: 11px; color: rgba(31,35,72,0.4); margin-top: 1px; }

/* opacity ladder */
.ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.ladder-cell { border-radius: 8px; overflow: hidden; text-align: center; background:#fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); cursor: pointer; }
.ladder-chip { height: 44px; }
.ladder-label { font-family: 'Fira Mono', monospace; font-size: 11px; padding: 5px 0; color: rgba(31,35,72,0.6); }

/* --- Gradients ----------------------------------------------------------- */
.gradient-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.gradient-tile {
  height: 120px; border-radius: 12px; padding: 14px; display: flex; align-items: flex-end;
  color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}

/* --- Type specimens ------------------------------------------------------ */
.type-row { display: flex; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(31,35,72,0.08); }
.type-row:last-child { border-bottom: none; }
.type-spec { flex: 1; min-width: 0; }
.type-meta { font-family: 'Fira Mono', monospace; font-size: 12px; color: rgba(31,35,72,0.5); white-space: nowrap; text-align: right; }

/* --- Spacing / radius / shadow demos ------------------------------------- */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.spec-cell { text-align: center; font-size: 13px; }
.spec-box { background: var(--nimiq-light-blue, #0582CA); border-radius: 4px; margin: 0 auto 8px; }
.radius-box { width: 96px; height: 96px; background: radial-gradient(100% 100% at bottom right, #265DD7, #0582CA); margin: 0 auto 8px; }
.shadow-box { width: 120px; height: 80px; background:#fff; border-radius: 10px; margin: 12px auto 16px; }
.spec-meta { font-family: 'Fira Mono', monospace; font-size: 12px; color: rgba(31,35,72,0.55); }

/* --- Icons --------------------------------------------------------------- */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.icon-cell {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px;
  border-radius: 10px; cursor: pointer; transition: background .12s; text-align: center;
}
.icon-cell:hover { background: rgba(31,35,72,0.05); }
.icon-cell svg { width: 24px; height: 24px; color: #1F2348; }
.icon-cell .icon-name { font-family: 'Fira Mono', monospace; font-size: 10.5px; color: rgba(31,35,72,0.55); word-break: break-word; }
.icon-grid.on-dark { background: #1F2348; background-image: radial-gradient(100% 100% at bottom right, #260133, #1F2348); border-radius: 12px; padding: 12px; }
.icon-grid.on-dark .icon-cell svg { color: #fff; }
.icon-grid.on-dark .icon-cell .icon-name { color: rgba(255,255,255,0.6); }
.icon-grid.on-dark .icon-cell:hover { background: rgba(255,255,255,0.08); }
/* Extended (nimiq-icons) set — preserve each icon's own aspect ratio. */
#icon-grid-nimiq svg { width: auto; height: 22px; max-width: 30px; }

/* --- Demo blocks (CSS + Vue components) ---------------------------------- */
.demo { border: 1px solid rgba(31,35,72,0.1); border-radius: 12px; overflow: hidden; margin-bottom: 20px; background:#fff; }
.demo-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px 16px; border-bottom: 1px solid rgba(31,35,72,0.08); }
.demo-title { font-weight: 700; font-size: 15px; }
.demo-title small { font-weight: 400; color: rgba(31,35,72,0.45); font-family:'Fira Mono',monospace; font-size: 12px; margin-left: 8px; }
.demo-stage { padding: 28px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.demo-stage.center { justify-content: center; }
.demo-stage.dark { background: #1F2348; background-image: radial-gradient(100% 100% at bottom right, #260133, #1F2348); }
.demo-stage.checker { background-image: linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%); background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0; }
.demo-knobs { display: flex; flex-wrap: wrap; gap: 14px; padding: 14px 16px; background: rgba(31,35,72,0.03); border-top: 1px solid rgba(31,35,72,0.06); }
.knob { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.knob label { font-weight: 600; color: rgba(31,35,72,0.6); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; }
.knob input[type=text], .knob input[type=number], .knob select {
  font-family: inherit; font-size: 13px; padding: 6px 8px; border-radius: 6px;
  border: none; box-shadow: inset 0 0 0 1.5px rgba(31,35,72,0.14); background:#fff; color:#1F2348; min-width: 120px;
}
.knob.check { flex-direction: row; align-items: center; gap: 6px; }

/* --- Code blocks --------------------------------------------------------- */
.code-wrap { position: relative; }
pre.code {
  margin: 0; padding: 16px 18px; background: #1a1d3a; color: #e6e8f0;
  font-family: 'Fira Mono', monospace; font-size: 12.5px; line-height: 1.6;
  overflow-x: auto; border-radius: 0;
}
.demo pre.code { border-top: 1px solid rgba(31,35,72,0.08); }
pre.code .tok-tag { color: #ff9db0; }
pre.code .tok-attr { color: #ffd479; }
pre.code .tok-str { color: #9ae6b4; }
pre.code .tok-cmt { color: #7a7fa6; }

/* --- Copy button + toast ------------------------------------------------- */
.copy-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2; border: none; cursor: pointer;
  background: rgba(255,255,255,0.12); color: #fff; border-radius: 6px; padding: 5px 10px;
  font-family: inherit; font-size: 11px; font-weight: 600; transition: background .15s;
}
.copy-btn:hover { background: rgba(255,255,255,0.24); }
.copy-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #21BCA5; color: #fff; padding: 10px 20px; border-radius: 500px; font-weight: 600; font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 100;
}
.copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Utility playgrounds ------------------------------------------------- */
.play { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.play-controls { display: flex; flex-direction: column; gap: 12px; }
.play-out {
  background: rgba(31,35,72,0.04); border-radius: 10px; padding: 18px; font-family: 'Fira Mono', monospace;
  font-size: 14px; min-height: 60px; word-break: break-word;
}
.play-out .ok { color: #21BCA5; } .play-out .bad { color: #D94432; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(31,35,72,0.55); }
.field input, .field select {
  font-family: inherit; font-size: 14px; padding: 9px 12px; border-radius: 8px; border: none;
  box-shadow: inset 0 0 0 1.5px rgba(31,35,72,0.14); background:#fff; color:#1F2348;
}
.field input:focus, .field select:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(5,130,202,0.5); }

/* --- Patterns ------------------------------------------------------------ */
.pattern-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 20px; }

/* --- Resources ----------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.res-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14px; }
.res-table th, .res-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(31,35,72,0.08); }
.res-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(31,35,72,0.45); }
.res-table code { font-family: 'Fira Mono', monospace; font-size: 12.5px; }

/* --- Vue-component demo tweaks ------------------------------------------- */
/* AmountInput keeps an off-screen width-measurement node whose placeholder
   text ("Width") only becomes transparent after its maxWidth computes. Force
   it transparent so the helper text never flashes in a static demo. */
.amount-input .full-width { color: transparent !important; }
/* Let overlay components (Tooltip) escape the demo card instead of being clipped. */
.demo.allow-overflow, .demo.allow-overflow .demo-stage { overflow: visible; }
/* Identicon playground output fits its 120px box. */
#iqon-out svg { display: block; width: 100%; height: 100%; }
/* AccountList / AccountSelector hover caret: the component hard-codes top:3.625rem,
   which sits too low for the kit's row height — center it (margin, not transform,
   so the component's slide-in transform animation still works). */
.account-entry .caret { top: 50% !important; margin-top: -1rem !important; }
/* Contain BottomOverlay (position:fixed) inside its demo box instead of the viewport. */
.bottom-overlay-demo .bottom-overlay { position: absolute; }

/* --- Brand logo — the real Nimiq lockup (gold signet + NIMIQ wordmark),
   reproduced from the live wallet (public/blocking.css). Gold gradient keeps
   the signet legible on both light and dark surfaces. -------------------- */
.nq-logo-lockup { display: inline-flex; align-items: center; line-height: 1; }
.nq-logo-signet {
  display: inline-block; flex: 0 0 auto;
  background: url('data:image/svg+xml,<svg width="27" height="24" viewBox="0 0 27 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26.7 10.88l-5.63-9.76A2.25 2.25 0 0 0 19.12 0H7.87c-.8 0-1.54.43-1.94 1.13L.3 10.88c-.4.7-.4 1.55 0 2.24l5.63 9.76c.4.7 1.14 1.12 1.94 1.12h11.25c.8 0 1.55-.43 1.95-1.13l5.63-9.75c.4-.7.4-1.55 0-2.24z" fill="url(%23nqlogo)"/><defs><radialGradient id="nqlogo" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-26.9977 0 0 -24 27 24)"><stop stop-color="%23EC991C"/><stop offset="1" stop-color="%23E9B213"/></radialGradient></defs></svg>') no-repeat center / contain;
}
.nq-logo-wordmark { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-left: -0.09em; }
.nq-logo-lg .nq-logo-signet { width: 44px; height: 44px; margin-right: 17px; }
.nq-logo-lg .nq-logo-wordmark { font-size: 33px; }
/* Monochrome signet — the nq-hexagon icon, inheriting currentColor. */
.nq-logo-signet-mono { display: inline-block; flex: 0 0 auto; }
.nq-logo-lg .nq-logo-signet-mono { width: 44px; height: 44px; margin-right: 17px; }

/* --- Off-canvas drawer: menu button + scrim ------------------------------ */
/* z-index order: scrim (15) < menu button (16) < sidebar/drawer (20). So an
   open drawer covers the button, and the darkened scrim sits over the content. */
.kit-menu-btn {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 16; border: none; cursor: pointer;
  background: #1F2348; color: #fff; width: 44px; height: 44px; border-radius: 10px; font-size: 20px;
}
.kit-menu-btn:focus-visible { outline: 3px solid #0CA6FE; outline-offset: 2px; }
.kit-scrim {
  position: fixed; inset: 0; z-index: 15; background: rgba(31,35,72,0.5);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--nimiq-ease, ease);
}
.kit-scrim.show { opacity: 1; pointer-events: auto; }
.kit-scrim:focus-visible { outline: 3px solid #0CA6FE; outline-offset: -3px; }
.kit-nav a:focus-visible { outline: 2px solid #0CA6FE; outline-offset: -2px; }

/* --- Keyboard focus for the click-to-copy cells (role=button, tabindex=0) - */
.swatch:focus-visible,
.ladder-cell:focus-visible,
.gradient-tile:focus-visible,
.icon-cell:focus-visible,
#iqon-random:focus-visible {
  outline: 3px solid #0CA6FE; outline-offset: 2px;
}

/* --- Touch-safe demos: never let a fixed-size component template push the page
   wider than the viewport — but DON'T cap the component itself. Components like
   SmallPage already set `width:100%; max-width:52.5rem`; capping them here would
   override that smaller max-width and let them stretch to the full column on wide
   screens. So cap only the mount WRAPPERS, and let the stage scroll horizontally
   if a truly fixed-width child still overflows (.allow-overflow demos opt out via
   their higher-specificity `overflow:visible` rule above). ------------------ */
.demo, .demo-stage { max-width: 100%; }
.demo-stage > *,
.demo-stage .vue-mount-inner { max-width: 100%; min-width: 0; }
.demo-stage { overflow-x: auto; }

/* --- Responsive breakpoints (aligned to Nimiq's tablet:960 / mobile:768 tokens) - */
/* Tablet ≤960px — the fixed sidebar becomes an off-canvas drawer. */
@media (max-width: 960px) {
  .kit-sidebar {
    transform: translateX(-100%);
    transition: transform .25s var(--nimiq-ease, ease);
    box-shadow: 0 0 60px rgba(0,0,0,0.4);
  }
  .kit-sidebar.open { transform: translateX(0); }
  .kit-main { margin-left: 0; }
  .kit-menu-btn { display: block; }
  .kit-container { padding: 72px 32px 100px; }
  .play { grid-template-columns: 1fr; }
}

/* Mobile ≤768px — tighten chrome and stack the type specimen rows. */
@media (max-width: 768px) {
  .kit-container { padding: 72px 20px 88px; }
  .kit-hero { padding: 12px 0 4px; }
  .kit-section { padding-top: 44px; }
  .kit-card { padding: 20px; }
  .demo-stage { padding: 18px; gap: 14px; }
  .demo-knobs { padding: 12px 14px; }
  .type-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .type-meta { text-align: left; white-space: normal; }
}

/* Small phone ≤480px — smaller cells, tighter gaps, single-column where 2-up crowds. */
@media (max-width: 480px) {
  .kit-container { padding: 68px 14px 72px; }
  .swatch-grid   { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .ladder        { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
  .gradient-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .spec-grid     { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 12px; }
  .icon-grid     { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 4px; }
  .icon-cell     { padding: 12px 6px; }
  .kit-card      { padding: 16px; }
  .demo-stage    { padding: 14px; }
  #identicons .field { min-width: 0 !important; }
}

/* =============================================================================
 * Wallet-Hub-Keyguard reproductions — CSS
 * Faithful static reproductions from nimiq/wallet, nimiq/hub, nimiq/keyguard.
 * ========================================================================== */

/* --- sbb --- */
/* sbb — SwapBalanceBar (faithful static reproduction of
   src/components/swap/SwapBalanceBar.vue). Fixed demo: LEFT = NIM (green),
   RIGHT = BTC (orange). All source rem values converted to px x8 (1rem = 8px).
   SVG viewBox coordinates left unchanged. */

.sbb-root {
    /* token bridge with self-contained fallbacks */
    --sbb-blue: var(--nimiq-blue, #1F2348);
    --sbb-green: var(--nimiq-green, #21BCA5);
    --sbb-bitcoin: var(--bitcoin-orange, #F7931A);
    --sbb-usdc: var(--usdc-blue, #2775CA);
    --sbb-usdt: var(--usdt-green, #009393);
    --sbb-right: var(--sbb-bitcoin);  /* active right-side asset colour — switched by the selector, defaults to BTC */
    --sbb-lightblue-bg: var(--nimiq-light-blue-bg, radial-gradient(100% 100% at bottom right, #265DD7, #0582CA));
    --sbb-text-50: var(--text-50, rgba(31, 35, 72, 0.5));
    --sbb-text-20: var(--text-20, rgba(31, 35, 72, 0.2));
    --sbb-ease: var(--nimiq-ease, cubic-bezier(0.25, 0, 0, 1));

    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 16px; /* room for scale + equilibrium dot */
    font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    color: var(--sbb-blue);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    box-sizing: border-box;
}
.sbb-root *,
.sbb-root *::before,
.sbb-root *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ header */
.sbb-header {
    display: flex;
    flex-direction: row;
    height: 42px;              /* 5.25rem */
    justify-content: space-between;
    column-gap: 8px;           /* 1rem */
}

.sbb-currency {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
    align-items: center;
}
.sbb-currency .sbb-cicon {
    grid-row: 1 / span 2;
    width: 42px;               /* 5.25rem */
    height: 42px;
    align-self: center;
}
.sbb-clabel {
    font-weight: 600;
    line-height: 21px;         /* 2.625rem */
    white-space: nowrap;
}
.sbb-amount {
    color: var(--sbb-text-50);
    font-size: 14px;           /* --small-size 1.75rem */
    font-weight: 600;
    white-space: nowrap;
}

.sbb-left {
    grid-template-columns: auto auto;
    column-gap: 12px;          /* nimiq 1.5rem */
    margin-left: 8px;          /* nimiq.left 1rem */
}
.sbb-right {
    grid-template-columns: auto auto;
    column-gap: 16px;          /* bitcoin 2rem */
}
.sbb-right .sbb-clabel,
.sbb-right .sbb-amount { text-align: right; }
.sbb-right .sbb-cicon { grid-column: 2; }

.sbb-left .sbb-cicon { color: var(--sbb-green); }
.sbb-right .sbb-cicon { color: var(--sbb-right); }

/* ------------------------------------------------------ connecting lines */
.sbb-connecting-lines {
    position: relative;
    margin-top: 4px;           /* .5rem */
    margin-bottom: -24px;      /* -3rem  (bars overlap up into the lines) */
    padding-left: 28px;        /* 3.5rem */
    pointer-events: none;
    line-height: 0;
    z-index: 0;
}
.sbb-curve {
    display: inline-block;
    overflow: visible;
    vertical-align: top;
}
.sbb-curve path {
    fill: none;
    stroke: var(--sbb-blue);
    stroke-width: 1.5;
    opacity: 0.24;
    overflow: visible;
    transition-duration: 100ms;
    transition-property: d;
}
.sbb-curve-right {
    position: absolute;
    top: 0;
    right: 20px;               /* 2.5rem */
    transform: rotateY(180deg);
}

/* ------------------------------------------------------------- balance bar */
.sbb-bar-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    z-index: 1;
}

.sbb-bar {
    position: relative;
    height: 36px;              /* 4.5rem */
    flex: 0 1 0;
    min-width: 0;
    background-color: currentColor;
    border: 2px solid currentColor;   /* .25rem */
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    transform: translate3d(0, 0, 0);
    transition: opacity 300ms;
}
.sbb-animating .sbb-bar { transition: opacity 300ms, flex-grow 300ms; }

.sbb-bar-left {
    color: var(--sbb-green);
    justify-content: flex-end;
    margin-right: 3px;         /* .375rem */
    /* first-child: outer (left) end fully rounded, inner (right) end small */
    border-radius: 40px 9.6px 9.6px 40px;   /* 5rem / 1.2rem */
}
.sbb-bar-right {
    color: var(--sbb-right);
    justify-content: flex-start;
    /* last-child: outer (right) end fully rounded, inner (left) end small */
    border-radius: 9.6px 40px 40px 9.6px;
}

.sbb-change {
    height: 100%;
    width: 0;
    border-radius: 2px;        /* .25rem */
    transform: translate3d(0, 0, 0);
    background-repeat: repeat-x;
    background-size: auto 100%;
    /* swap-change-background.svg (9x36 diagonal hatch), inlined */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 36' width='9' height='36' fill='none'%3E%3Cpath d='M.87 0L.65.38 0 1.5v4.8L3.63 0H.87zm4.5 0l-.22.38L0 9.3v4.79L8.13 0H5.37zM9 1.5L0 17.1v4.79l9-15.6V1.5zm0 7.8L0 24.89v4.8l9-15.6v-4.8zm0 7.8L0 32.67V36h.85l.22-.38L9 21.9v-4.8zm0 7.79L2.59 36h2.76l.22-.38L9 29.68v-4.8zm0 7.8L7.09 36H9v-3.32z' fill='%23fff'/%3E%3C/svg%3E");
}
.sbb-bar-left .sbb-change { background-position: top left; }
.sbb-bar-right .sbb-change { background-position: top right; }
.sbb-animating .sbb-change { transition: width 300ms; }

/* --------------------------------------------------------------- separator */
.sbb-separator {
    width: 2px;                /* .25rem */
    margin-right: 3px;         /* .375rem */
    height: 84px;              /* 10.5rem */
    position: relative;
    flex-shrink: 0;
    touch-action: none;
    z-index: 2;
    background-image: var(--sbb-lightblue-bg);
}

.sbb-handle {
    height: 32px;              /* 4rem */
    width: 32px;
    border-radius: 100%;
    /* horizontal-double-arrow.svg (16x8) centered on white, inlined */
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' fill='none' viewBox='0 0 16 8'%3E%3Cpath fill='%231F2348' d='M15.1 3.42a.7.7 0 010 1.18l-4.02 2.6A.7.7 0 0110 6.62V1.4a.7.7 0 011.08-.59l4.02 2.61zM.9 4.6a.7.7 0 010-1.18L4.92.82A.7.7 0 016 1.4v5.22a.7.7 0 01-1.08.58L.9 4.6z'/%3E%3C/svg%3E") no-repeat center;
    box-shadow:
        0px 4px 16px rgba(0, 0, 0, 0.07),
        0px 1.5px 3px rgba(0, 0, 0, 0.05),
        0px 0.3368px 2px rgba(0, 0, 0, 0.025);
    position: absolute;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
    cursor: grab;
    touch-action: none;
    z-index: 3;
}
.sbb-handle:active { cursor: grabbing; }

/* ----------------------------------------------------------- slide hints */
.sbb-slidehint {
    display: flex;
    flex-direction: row;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms var(--sbb-ease);
    z-index: 2;
}
.sbb-slidehint.sbb-hint-visible { opacity: 1; }
.sbb-slidehint-right { left: 19px; }        /* 2.375rem */
.sbb-slidehint-left {
    right: 19px;
    transform: translateY(-50%) rotateY(180deg);
}

.sbb-slidehint svg {
    height: 7px;               /* .875rem */
    width: auto;
    transform: translateX(0);
    animation-name: sbb-fade-n-translate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
.sbb-slidehint svg:not(:first-child) { margin-left: 4px; } /* .5rem */
.sbb-slidehint svg:nth-child(1) { opacity: 0.5; animation-delay: 0ms; }
.sbb-slidehint svg:nth-child(2) { opacity: 0.35; animation-delay: 100ms; }
.sbb-slidehint svg:nth-child(3) { opacity: 0.2; animation-delay: 200ms; }
.sbb-slidehint svg path { fill: currentColor; }

@keyframes sbb-fade-n-translate {
    100% {
        opacity: 0;
        transform: translateX(6px);  /* .75rem */
    }
}

/* ------------------------------------------------------------------- scale */
.sbb-scale {
    display: flex;
    flex-direction: row;
    margin-top: -8px;          /* -1rem */
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.sbb-tenth {
    height: 8px;               /* 1rem */
    line-height: 8px;
    flex: 1 1 0;
    font-weight: bold;
    font-size: 13px;           /* 1.625rem */
    letter-spacing: 0.5px;     /* .0625rem */
    color: var(--sbb-text-50);
}
.sbb-tenth:not(:last-child) { border-right: 1.5px solid var(--sbb-text-20); } /* .1875rem */
.sbb-tenth:last-child { text-align: right; }
.sbb-tenth > div {
    transition-property: visibility, opacity;
    transition-duration: 300ms;
}
.sbb-tenth > div.sbb-hidden { opacity: 0; }

/* ------------------------------------------------------- equilibrium point */
.sbb-equilibrium {
    height: 4px;               /* .5rem */
    width: 4px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    bottom: 2px;               /* .25rem */
    opacity: 1;
    transform: translateX(-50%);
    background-image: var(--sbb-lightblue-bg);
    transition: opacity 0.3s var(--sbb-ease);
    z-index: 2;
}
.sbb-equilibrium.sbb-hidden { opacity: 0; }

/* --------------------------------------------------------------------------- *
 * sbb / swa — asset selector (compact segmented pills).
 * A small NIM<->crypto asset switcher placed on the light demo background,
 * above each swap stage. Default (BTC) pill is highlighted in the asset colour.
 * The active pill's brand colour is supplied per-button via the --pill-color
 * custom property (see the inline styles in index.html).
 * --------------------------------------------------------------------------- */
.sbb-select,
.swa-select {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 14px 16px 2px;
}
.sbb-select-pill,
.swa-select-pill {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 7px 15px;
    border-radius: 500px;
    color: rgba(31, 35, 72, 0.55);
    background: rgba(31, 35, 72, 0.06);
    transition: background 0.15s var(--nimiq-ease, cubic-bezier(0.25, 0, 0, 1)),
                color 0.15s var(--nimiq-ease, cubic-bezier(0.25, 0, 0, 1)),
                box-shadow 0.15s var(--nimiq-ease, cubic-bezier(0.25, 0, 0, 1));
}
.sbb-select-pill:hover,
.swa-select-pill:hover {
    color: rgba(31, 35, 72, 0.9);
    background: rgba(31, 35, 72, 0.1);
}
.sbb-select-pill:focus-visible,
.swa-select-pill:focus-visible {
    outline: 2px solid var(--pill-color, #0582CA);
    outline-offset: 2px;
}
.sbb-select-pill.is-active,
.sbb-select-pill.is-active:hover,
.swa-select-pill.is-active,
.swa-select-pill.is-active:hover {
    color: #fff;
    background: var(--pill-color, #1F2348);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.13);
}

/* --- swi --- */
/* swi — swap icons (SwapIcon / SwapSmallIcon / SwapMediumIcon), copied verbatim from source SVGs */

.swi-root {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 40px;
    /* icons are stroke:currentColor — tint the whole row */
    color: var(--nimiq-light-blue, #0582CA);
    font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.swi-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0;
}

.swi-icon {
    display: block;
    color: inherit;
    overflow: visible;
}

.swi-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-50, rgba(31, 35, 72, 0.5));
    text-align: center;
}

.swi-dim {
    font-family: "Fira Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-40, rgba(31, 35, 72, 0.4));
}

/* --- swa --- */
/* =====================================================================
   swa — Atomic Swap animation (static reproduction of the Nimiq wallet's
   SwapAnimation.vue). Zero-build, self-contained. All selectors and
   @keyframes are prefixed `swa-`. Source rem values are converted to px
   (1rem = 8px). SVG viewBox coordinates and path data are left unchanged.
   ===================================================================== */

.swa-root {
    /* Design tokens */
    --nimiq-blue: #1F2348;
    --nimiq-green: #21BCA5;
    --bitcoin-orange: #F7931A;
    --usdc-blue: #2775CA;
    --usdt-green: #009393;
    --nimiq-orange: #FC8702;
    --nimiq-ease: cubic-bezier(0.25, 0, 0, 1);

    box-sizing: border-box;
    position: relative;
    width: min(92vw, 544px);
    min-height: 556px;
    margin: 24px auto;
    padding: 48px;                       /* ~48px per spec (6rem) */
    overflow: hidden;
    border-radius: 8px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;

    /* The component supplies its OWN Nimiq-blue radial-gradient background */
    background: var(--nimiq-blue);
    background-image: radial-gradient(100% 100% at top left, #260133, #1F2348);
    color: #fff;

    font-family: 'Muli', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.swa-root *,
.swa-root *::before,
.swa-root *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */
.swa-header {
    transition: opacity 0.5s var(--nimiq-ease);
}

.swa-h1 {
    font-size: 24px;                     /* 3rem */
    font-weight: bold;
    line-height: 1;
    margin: 0;
}

.swa-notice {
    margin: 12px auto 0;                 /* 1.5rem */
    max-width: 288px;                    /* 36rem */
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    opacity: 0.6;
}

/* ------------------------------------------------------------------ */
/* Animation stage                                                    */
/* ------------------------------------------------------------------ */
.swa-animation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;                 /* 3rem — counteracts amount's negative bottom margin */

    transition: transform 1s var(--nimiq-ease);
}

.swa-spinner {
    height: 52px;                        /* 6.5rem */
    width: 52px;
    overflow: visible;
    transition: opacity 0.5s var(--nimiq-ease);
}

.swa-spinner circle {
    animation: swa-spinner-rotate reverse 1s linear infinite;
}
.swa-spinner circle:first-of-type { transform-origin: 50% 0%; }
.swa-spinner circle:last-of-type  { transform-origin: 50% 100%; }

.swa-left,
.swa-right {
    height: 96px;                        /* 12rem */
    transition: transform 1s var(--nimiq-ease), opacity 0.5s var(--nimiq-ease);
    z-index: 1;
}

.swa-piece {
    height: 100%;
    width: auto;
    display: block;
}

.swa-fill {
    opacity: 0;
}

.swa-info-icon {
    transition: stroke 1s var(--nimiq-ease) 1.6s;
}

/* Identicon frame gets a subtle 15% up-scale, exactly like the source */
.swa-identicon-border {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.15);
}

.swa-piece-container .swa-swap-amount {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.3;
    /* Negative bottom margin reduces gap to bottom-positioned label */
    margin: 8px 8px -24px;               /* 1rem 1rem -3rem */
    transition: opacity 0.5s var(--nimiq-ease);
}

.swa-piece-container .swa-swap-amount .swa-arrow {
    margin-right: 8px;                   /* 1rem */
    flex: none;
}

.swa-right .swa-piece-container .swa-swap-amount {
    justify-content: flex-end;
}

/* ================================================================== */
/* State machine — direction is fixed to left-to-right (NIM -> BTC).  */
/* Class names mirror the source's animationClassName values.         */
/* ================================================================== */

/* --- sign-swap : pieces zoomed in and pushed to the edges --------- */
.swa-animation.swa-sign-swap {
    transform: scale(1.94);
}
.swa-animation.swa-sign-swap .swa-left  { transform: translate3d(-120px, 0, 0); }  /* -15rem */
.swa-animation.swa-sign-swap .swa-right { transform: translate3d(120px, 0, 0); }   /* +15rem */

/* --- spinner keeps rotating during every state except settle ------ */
.swa-animation.swa-sign-swap .swa-spinner,
.swa-animation.swa-await-incoming .swa-spinner,
.swa-animation.swa-create-outgoing .swa-spinner,
.swa-animation.swa-await-secret .swa-spinner,
.swa-animation.swa-complete .swa-spinner {
    animation: swa-spinner-rotate 2.5s linear infinite;
}

/* --- resting (zoomed out) positions ------------------------------- */
.swa-animation.swa-await-incoming .swa-left,
.swa-animation.swa-create-outgoing .swa-left,
.swa-animation.swa-await-secret .swa-left  { transform: translate3d(-20px, 0, 0); }  /* -2.5rem */
.swa-animation.swa-await-incoming .swa-right,
.swa-animation.swa-create-outgoing .swa-right,
.swa-animation.swa-await-secret .swa-right { transform: translate3d(20px, 0, 0); }   /* +2.5rem */

/* --- pulsating wireframe of the piece currently being locked ------ */
/* left-to-right: await-incoming -> right (incoming), create-outgoing -> left (outgoing) */
.swa-animation.swa-await-incoming .swa-right .swa-lines > *,
.swa-animation.swa-create-outgoing .swa-left .swa-lines > * {
    animation: swa-pulsate 2s infinite;
}
.swa-animation.swa-await-incoming .swa-right .swa-lines > *:nth-child(1),
.swa-animation.swa-create-outgoing .swa-left .swa-lines > *:nth-child(1)  { animation-delay: 0s; }
.swa-animation.swa-await-incoming .swa-right .swa-lines > *:nth-child(2),
.swa-animation.swa-create-outgoing .swa-left .swa-lines > *:nth-child(2)  { animation-delay: 0.2s; }
.swa-animation.swa-await-incoming .swa-right .swa-lines > *:nth-child(3),
.swa-animation.swa-create-outgoing .swa-left .swa-lines > *:nth-child(3)  { animation-delay: 0.4s; }
.swa-animation.swa-await-incoming .swa-right .swa-lines > *:nth-child(4),
.swa-animation.swa-create-outgoing .swa-left .swa-lines > *:nth-child(4)  { animation-delay: 0.6s; }
.swa-animation.swa-await-incoming .swa-right .swa-lines > *:nth-child(5),
.swa-animation.swa-create-outgoing .swa-left .swa-lines > *:nth-child(5)  { animation-delay: 0.8s; }
.swa-animation.swa-await-incoming .swa-right .swa-lines > *:nth-child(6),
.swa-animation.swa-create-outgoing .swa-left .swa-lines > *:nth-child(6)  { animation-delay: 1s; }
.swa-animation.swa-await-incoming .swa-right .swa-lines > *:nth-child(7),
.swa-animation.swa-create-outgoing .swa-left .swa-lines > *:nth-child(7)  { animation-delay: 1.2s; }
.swa-animation.swa-await-incoming .swa-right .swa-lines > *:nth-child(8),
.swa-animation.swa-create-outgoing .swa-left .swa-lines > *:nth-child(8)  { animation-delay: 1.4s; }
.swa-animation.swa-await-incoming .swa-right .swa-lines > *:nth-child(9),
.swa-animation.swa-create-outgoing .swa-left .swa-lines > *:nth-child(9)  { animation-delay: 1.6s; }
.swa-animation.swa-await-incoming .swa-right .swa-lines > *:nth-child(10),
.swa-animation.swa-create-outgoing .swa-left .swa-lines > *:nth-child(10) { animation-delay: 1.8s; }

.swa-animation.swa-await-incoming .swa-right .swa-swap-amount,
.swa-animation.swa-create-outgoing .swa-left .swa-swap-amount {
    opacity: 0.5;
    animation: swa-pulsate 2s infinite 0.2s;
}

/* --- wireframe recolours to the asset colour, then holds ---------- */
/* left-to-right: create-outgoing -> right, await-secret -> left */
.swa-animation.swa-create-outgoing .swa-right .swa-lines > *,
.swa-animation.swa-await-secret .swa-left .swa-lines > * {
    opacity: 0.5;
    animation: swa-strokeColorChange 1s 1;
    animation-fill-mode: forwards !important;
}
.swa-animation.swa-create-outgoing .swa-right .swa-lines > *:nth-child(1),
.swa-animation.swa-await-secret .swa-left .swa-lines > *:nth-child(1)  { animation-delay: 0s; }
.swa-animation.swa-create-outgoing .swa-right .swa-lines > *:nth-child(2),
.swa-animation.swa-await-secret .swa-left .swa-lines > *:nth-child(2)  { animation-delay: 0.2s; }
.swa-animation.swa-create-outgoing .swa-right .swa-lines > *:nth-child(3),
.swa-animation.swa-await-secret .swa-left .swa-lines > *:nth-child(3)  { animation-delay: 0.4s; }
.swa-animation.swa-create-outgoing .swa-right .swa-lines > *:nth-child(4),
.swa-animation.swa-await-secret .swa-left .swa-lines > *:nth-child(4)  { animation-delay: 0.6s; }
.swa-animation.swa-create-outgoing .swa-right .swa-lines > *:nth-child(5),
.swa-animation.swa-await-secret .swa-left .swa-lines > *:nth-child(5)  { animation-delay: 0.8s; }
.swa-animation.swa-create-outgoing .swa-right .swa-lines > *:nth-child(6),
.swa-animation.swa-await-secret .swa-left .swa-lines > *:nth-child(6)  { animation-delay: 1s; }
.swa-animation.swa-create-outgoing .swa-right .swa-lines > *:nth-child(7),
.swa-animation.swa-await-secret .swa-left .swa-lines > *:nth-child(7)  { animation-delay: 1.2s; }
.swa-animation.swa-create-outgoing .swa-right .swa-lines > *:nth-child(8),
.swa-animation.swa-await-secret .swa-left .swa-lines > *:nth-child(8)  { animation-delay: 1.4s; }
.swa-animation.swa-create-outgoing .swa-right .swa-lines > *:nth-child(9),
.swa-animation.swa-await-secret .swa-left .swa-lines > *:nth-child(9)  { animation-delay: 1.6s; }
.swa-animation.swa-create-outgoing .swa-right .swa-lines > *:nth-child(10),
.swa-animation.swa-await-secret .swa-left .swa-lines > *:nth-child(10) { animation-delay: 1.8s; }

/* --- solid silhouette (fill) fades in ----------------------------- */
.swa-animation.swa-create-outgoing .swa-right .swa-fill,
.swa-animation.swa-await-secret .swa-fill,
.swa-animation.swa-settle-incoming .swa-fill,
.swa-animation.swa-complete .swa-fill {
    transition: opacity 1s var(--nimiq-ease) 1.6s;
    opacity: 1;
}
.swa-animation.swa-create-outgoing .swa-right .swa-swap-amount,
.swa-animation.swa-await-secret .swa-swap-amount,
.swa-animation.swa-settle-incoming .swa-swap-amount,
.swa-animation.swa-complete .swa-swap-amount {
    opacity: 0.5;
}

/* --- settle-incoming : pieces slide together and interlock -------- */
.swa-animation.swa-settle-incoming {
    transition-duration: 1.2s;
    transition-delay: 1s;
    transition-timing-function: ease;
}
.swa-animation.swa-settle-incoming .swa-spinner {
    transform: rotate(-32deg);           /* position of the puzzle-piece holes */
}

.swa-animation.swa-settle-incoming .swa-left,
.swa-animation.swa-complete .swa-left {
    animation: swa-piece-left-in-out 1s 1 var(--nimiq-ease) forwards;
}
.swa-animation.swa-settle-incoming .swa-right,
.swa-animation.swa-complete .swa-right {
    animation: swa-piece-right-in-out 1s 1 var(--nimiq-ease) forwards;
}
.swa-animation.swa-settle-incoming .swa-swap-amount,
.swa-animation.swa-complete .swa-swap-amount {
    opacity: 0;
    transition-duration: 0.8s;
}

/* --- complete : zoom in, fade everything out --------------------- */
.swa-animation.swa-complete {
    transform: scale(1.94);
}
.swa-animation.swa-complete .swa-spinner,
.swa-animation.swa-complete .swa-left,
.swa-animation.swa-complete .swa-right {
    transition: opacity 1s var(--nimiq-ease);
    opacity: 0;
}

/* ------------------------------------------------------------------ */
/* Footer                                                             */
/* ------------------------------------------------------------------ */
.swa-footer {
    margin-top: 24px;                    /* 3rem */
    text-align: center;
    transition: opacity 0.5s var(--nimiq-ease);
}

.swa-step {
    font-size: 20px;                     /* nq-h2 = 2.5rem */
    font-weight: normal;
    margin-bottom: 16px;                 /* 2rem */
    min-height: 24px;
}

.swa-dont-close {
    margin: 0 auto 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nimiq-orange);
}

/* ------------------------------------------------------------------ */
/* Success overlay (nq-green-bg + white checkmark)                    */
/* ------------------------------------------------------------------ */
.swa-success {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    opacity: 0;
    pointer-events: none;
    transition: opacity 1s var(--nimiq-ease);

    /* nq-green-bg */
    background: radial-gradient(100% 100% at bottom right, #41A38E, #21BCA5);
    color: #fff;
}

.swa-root.swa-is-complete .swa-success {
    opacity: 1;
    pointer-events: all;
}

.swa-check {
    width: 72px;                         /* 9rem */
    height: 72px;
    color: #fff;
}

.swa-success-title {
    line-height: 1;
    margin: 40px 0 0;                    /* 5rem top */
    font-size: 24px;
    font-weight: bold;
}

/* ------------------------------------------------------------------ */
/* Reset guard — used by the JS loop to snap back to the start with   */
/* no visible transition/animation between `complete` and `sign-swap` */
/* ------------------------------------------------------------------ */
.swa-root.swa-no-anim .swa-success,
.swa-root.swa-no-anim .swa-animation,
.swa-root.swa-no-anim .swa-animation * {
    transition: none !important;
    animation: none !important;
}

/* ================================================================== */
/* @keyframes — copied verbatim from the source (rem -> px), prefixed */
/* ================================================================== */
@keyframes swa-spinner-rotate {
    0%   { transform: rotate(-32deg); }
    100% { transform: rotate(calc(360deg - 32deg)); }
}

@keyframes swa-pulsate {
    0%   { opacity: .25; }
    50%  { opacity: .5; }
    100% { opacity: .25; }
}

@keyframes swa-strokeColorChange {
    0%   { stroke: #fff; }
    100% { stroke: currentColor; opacity: 1; }
}

@keyframes swa-piece-left-in-out {
    0%  { transform: translate3d(-20px, 0, 0); }   /* -2.5rem */
    to  { transform: translate3d(58px, 0, 0); }    /* +7.25rem */
}

@keyframes swa-piece-right-in-out {
    0%  { transform: translate3d(20px, 0, 0); }    /* +2.5rem */
    to  { transform: translate3d(-58px, 0, 0); }   /* -7.25rem */
}

@media (prefers-reduced-motion: reduce) {
    .swa-root * { animation-duration: 0.001ms !important; }
}

/* --- lgu --- */
/* ============================================================================
   lgu — Ledger connect UI (looping animation)
   Reproduced from Nimiq Hub `src/components/LedgerUi.vue`.
   Self-contained, zero-build. All device / cable / screen art is inline
   `data:image/svg+xml,…` (white line-art), copied VERBATIM from source.
   All @keyframes copied VERBATIM (names prefixed `lgu-`).
   CSS vars renamed --ledger-* -> --lgu-*.
   Dark component: supplies its own Nimiq-blue radial-gradient card background.
   ============================================================================ */

/* ---- Card / stage -------------------------------------------------------- */

.lgu-root {
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 5%; /* width-relative so the card is font-size-independent + responsive */
    border-radius: 10px;
    overflow: hidden;
    /* Nimiq-blue radial-gradient (nq-blue-bg). Task spec: "at top left".
       (The authentic --nimiq-blue-bg token uses "at bottom right".) */
    background-color: #1F2348;
    background-image: radial-gradient(100% 100% at top left, #260133, #1F2348);
    color: #fff;
    text-align: center;

    /* --- animation / layout tokens (renamed from --ledger-*) --- */
    --lgu-connect-animation-step-duration: 3s;
    --lgu-container-width: 52%;
    --lgu-scale-factor: 1.62;
    --lgu-y-offset: 0rem; /* unit can't be omitted here */
    --lgu-opacity: .3;
}

.lgu-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.lgu-stage::before {
    /* Aspect-lock the stage (5 : 2) with the same padding-top idiom the source
       uses for the device, for universal support without the aspect-ratio prop. */
    content: "";
    display: block;
    padding-top: 40%;
}

/* ---- Device container (aspect-locked) ------------------------------------ */

.lgu-device-container {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--lgu-container-width);
    transform: translate(-50%, calc(-50% + var(--lgu-y-offset)));
}

.lgu-device-container::before {
    /* fixed aspect ratio */
    content: "";
    display: block;
    padding-top: 21%;
}

.lgu-device-container * {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ---- Opacity container + cable + device --------------------------------- */

.lgu-opacity-container {
    /* the lgu-device-container size and screen sizes were initially chosen such
       that the opacity container has exactly the size of the lgu-device-container
       at scale factor 2. For other factors adapt size. */
    top: calc(50% * (1 - 2 / var(--lgu-scale-factor)));
    left: calc(50% * (1 - 2 / var(--lgu-scale-factor)));
    width: calc(100% * (2 / var(--lgu-scale-factor)));
    height: calc(100% * (2 / var(--lgu-scale-factor)));
    transform: scale(var(--lgu-scale-factor)) translateX(27.3%);
    opacity: var(--lgu-opacity);
}

.lgu-device,
.lgu-cable {
    top: 0;
    width: 100%;
    height: 100%;
}

.lgu-device {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290 61" fill="white"><path d="M145.5 46C137 46 130 39 130 30.5S137 15 145.5 15 161 22 161 30.5 154 46 145.5 46zm0-29c-7.4 0-13.5 6.1-13.5 13.5S138.1 44 145.5 44 159 37.9 159 30.5 152.9 17 145.5 17z"/><path d="M285.5 3H107V2a2 2 0 0 0-2-2H89a2 2 0 0 0-2 2v1H41V2a2 2 0 0 0-2-2H23a2 2 0 0 0-2 2v1H4C1.8 3 0 4.8 0 7v47c0 2.2 1.8 4 4 4h281.5c2.5 0 4.5-2 4.5-4.5v-46c0-2.5-2-4.5-4.5-4.5zM102 40.9c0 1.1-.9 2.1-2 2.1H28c-1.1 0-2-.9-2-2.1V20.1c0-1.1.9-2.1 2-2.1h72c1.1 0 2 .9 2 2.1v20.8zm186 12.6c0 1.4-1.1 2.5-2.5 2.5h-140C131.4 56 120 44.6 120 30.5S131.4 5 145.5 5h140c1.4 0 2.5 1.1 2.5 2.5v46z"/></svg>');
}

.lgu-cable {
    right: 94.2%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290 61"><path fill="white" d="M289.3 38.5c0 1.4-1 2.5-2 2.5h-18c-1.2 0-2-1.1-2-2.5v-16c0-1.4.8-2.5 2-2.5h18c1 0 2 1.1 2 2.5z" opacity=".7"/><path fill="%231f2348" d="M284.3 27h-8c-.7 0-1-.4-1-1s.3-1 1-1h8c.5 0 1 .4 1 1s-.5 1-1 1zM284.3 36h-8c-.7 0-1-.4-1-1s.3-1 1-1h8c.5 0 1 .4 1 1s-.5 1-1 1z" opacity=".5"/><path fill="white" d="M269.3 18h-27c-2.9 0-5 2.4-5 5.4V29H1.3v3h236v5.6c0 3 2.1 5.4 5 5.4h27c1 0 2-1 2-2.2V20.2c0-1.2-1-2.2-2-2.2z"/></svg>');
}

/* ---- Screens (stacked, hidden until their step/illustration) ------------- */

.lgu-screen {
    top: 10%;
    left: 24.25%;
    width: 51%;
    height: 77%;
    justify-content: center;
    align-items: center;
    display: none;
}

.lgu-screen-pin {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 114 37.5"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.2 17.5l-2.7 2.7-2.8-2.7M101.8 20.2l2.7-2.7 2.8 2.7"/><text fill="white" font-family="sans-serif" font-size="10" transform="translate(36.4 13.5)">PIN code</text></svg>');
}

.lgu-pin-dot {
    position: unset;
    margin: 1%;
    margin-top: 13%;
    width: 5%;
    height: 15.7%;
}

.nimiq .lgu-screen-dashboard {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 114 37.5"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M103.5 16.2l2.7 2.7-2.7 2.8m-93 .1L7.8 19l2.7-2.8M40.2 14.5h3.6m26.4 0h3.6"/><text font-family="sans-serif" font-size="11.2" transform="translate(41.3 32.3)">Nimiq</text><path d="M27.3 14.8h-.6v1.9h.2c.7 0 2.2 0 2.2-.9 0-.8-1-1-1.8-1zm1.4-1.7c0-.8-.9-.9-1.5-.9h-.5V14h.1c.7 0 1.9 0 1.9-.9z"/><path d="M27.5 7.5a7 7 0 0 0-7 7c0 3.9 3.1 7 7 7s7-3.1 7-7a7 7 0 0 0-7-7zm3.3 8.4c-.1 1.4-1.2 1.7-2.6 1.9v1.4h-.9v-1.4h-.7v1.4h-.8v-1.4h-1.7l.2-1h.7c.3 0 .3-.2.3-.3v-3.8c0-.2-.2-.4-.5-.4h-.6v-.9H26V9.9h.8v1.5h.7V9.9h.9v1.4c1.1.1 2 .4 2.1 1.4 0 .8-.3 1.2-.8 1.5.7.2 1.2.6 1.1 1.7zm33.5-2l-3.1-5.3c-.2-.4-.6-.6-1.1-.6h-6.3c-.4 0-.9.2-1.1.6l-3.1 5.3c-.2.4-.2.8 0 1.2l3.1 5.3c.2.4.6.6 1.1.6h6.3c.4 0 .9-.2 1.1-.6l3.1-5.3c.3-.4.3-.8 0-1.2zm22.2-6.4a7 7 0 0 0-7 7c0 3.9 3.1 7 7 7s7-3.1 7-7a7 7 0 0 0-7-7zm0 11.5l-3-4 3 1.8 3-1.8-3 4zm0-2.8l-3-1.7 3-4.5 3 4.5-3 1.7z"/></svg>');
}

.bitcoin .lgu-screen-dashboard {
    background-image: url('data:image/svg+xml,<svg fill="white" viewBox="0 0 114 37.5" xmlns="http://www.w3.org/2000/svg"><path d="M35 13.9l-3.1-5.3c-.2-.4-.6-.6-1.1-.6h-6.3c-.4 0-1 .2-1.1.6l-3.1 5.3c-.2.4-.2.8 0 1.2l3 5.3c.3.4.7.6 1.2.6h6.3c.4 0 .9-.2 1-.6l3.2-5.3c.3-.4.3-.8 0-1.2z"/><path d="M103.5 16.2l2.7 2.7-2.7 2.8m-93 .1L7.8 19l2.7-2.8m29.7-1.7h3.6m26.4 0h3.6" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><text x="40.2" y="32.3" font-family="sans-serif" font-size="11.2">Bitcoin</text><path d="M57 7.5a7 7 0 00-7 7c0 3.9 3 7 7 7s7-3.1 7-7a7 7 0 00-7-7zm-1.6 2.4h.8v1.5h.7V9.9h1v1.4c1 .1 2 .4 2 1.4 0 .8-.3 1.2-.8 1.5.7.2 1.2.6 1.1 1.7 0 1.4-1.2 1.7-2.6 1.9v1.4h-.9v-1.4H56v1.4h-.8v-1.4h-1.7l.2-1h.7c.3 0 .3-.2.3-.3v-3.8c0-.2-.2-.4-.5-.4h-.6v-.9h1.8zm.7 2.3V14h.1c.7 0 2 0 2-.9 0-.8-1-.9-1.6-.9zm0 2.6v1.9h.2c.7 0 2.2 0 2.2-.9 0-.8-1-1-1.8-1zM86.5 7.5a7 7 0 00-7 7c0 3.9 3.1 7 7 7s7-3.1 7-7a7 7 0 00-7-7zm0 2.5l3 4.5-3 1.7-3-1.7 3-4.5zm-3 5l3 1.8 3-1.8-3 4-3-4z"/></svg>');
}

.nimiq .lgu-screen-app {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114 37.5"><g fill="white" stroke-width=".4"><path d="M34.2 17.7l-5.4-9.3a2.1 2.1 0 0 0-1.9-1.1H16.2a2.1 2.1 0 0 0-1.9 1L9 17.8a2.1 2.1 0 0 0 0 2.1l5.3 9.3a2.1 2.1 0 0 0 1.9 1.1h10.7a2.1 2.1 0 0 0 1.9-1l5.4-9.4a2.1 2.1 0 0 0 0-2.1zM53.2 12h2.4v13.5h-1.8l-7.4-9.4v9.4h-2.3V12H46l7.3 9.5zM60.2 25.6V12h2.5v13.6zM78.7 12h2v13.5h-2.2v-8.4l-3.7 8.4h-1.6l-3.7-8.4v8.4h-2.1V12h2L74 22.6zM85.3 25.6V12h2.5v13.6zM104.5 22.4a5.7 5.7 0 0 1-2.9 2.8 7.5 7.5 0 0 0 1.1 1.4 13.6 13.6 0 0 0 1.5 1.4l-1.8 1.3a10.4 10.4 0 0 1-1.7-1.6 11.4 11.4 0 0 1-1.4-2h-.6a7 7 0 0 1-3.5-.8 5.6 5.6 0 0 1-2.3-2.5 8.4 8.4 0 0 1-.8-3.7 8 8 0 0 1 .8-3.7 5.7 5.7 0 0 1 2.3-2.4 7.8 7.8 0 0 1 7 0 5.6 5.6 0 0 1 2.3 2.4 8 8 0 0 1 .8 3.7 8.3 8.3 0 0 1-.8 3.7zm-8.8 0a4.2 4.2 0 0 0 6 0c.7-.8 1.1-2 1.1-3.7s-.4-2.8-1-3.7a4.2 4.2 0 0 0-6.1 0c-.8.9-1.1 2.1-1.1 3.7s.3 2.9 1 3.8z"/></g></svg>');
}

.bitcoin .lgu-screen-app {
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 114 37.5" xmlns="http://www.w3.org/2000/svg"><path d="M21.6 7.3A11.5 11.5 0 0010 18.8c0 6.4 5 11.4 11.5 11.4 6.4 0 11.4-5 11.4-11.4A11.5 11.5 0 0021.6 7.3zm-2.5 4h1.3v2.4h1.2v-2.5H23v2.3c1.8.2 3.2.7 3.4 2.3 0 1.3-.5 2-1.3 2.5 1.1.3 2 1 1.8 2.8-.2 2.3-2 2.7-4.3 3v2.4h-1.5v-2.3h-1.1v2.3h-1.3v-2.3H16l.3-1.7h1.2c.5 0 .5-.3.5-.5v-6.2c0-.3-.4-.6-.8-.6h-1v-1.5h3zm1.2 3.7v3h.1c1.2 0 3.1 0 3.1-1.5 0-1.3-1.4-1.5-2.4-1.5zm0 4.3v3h.3c1.1 0 3.6 0 3.6-1.4 0-1.3-1.6-1.6-3-1.6zm73.3 6.2v-6.7-1.4l-.1-1.3h2.2l.2 1.9h-.2q.4-1 1.3-1.6.9-.5 2-.5 3.4 0 3.4 3.9v5.7h-2.3V20q0-1.1-.5-1.7-.4-.5-1.3-.5-1 0-1.7.7t-.7 1.8v5.3zm-4.8 0v-9.4H91v9.4zm-.2-13.7h2.6v2.3h-2.6zM82 25.7q-1.5 0-2.6-.6-1-.6-1.6-1.7-.6-1.1-.6-2.6t.6-2.6q.6-1.1 1.6-1.7 1.1-.6 2.6-.6 1.4 0 2.5.6 1 .6 1.7 1.7.6 1 .6 2.6 0 1.5-.6 2.6-.6 1-1.7 1.7-1 .6-2.5.6zm0-1.8q1.2 0 1.8-.8.6-.8.6-2.3 0-1.5-.6-2.3-.6-.8-1.8-.8-1.2 0-1.8.8-.7.8-.7 2.3 0 1.5.7 2.3.6.8 1.8.8zm-9.4 1.8q-1.5 0-2.6-.6-1-.6-1.6-1.7-.6-1-.6-2.6 0-1.5.6-2.6t1.7-1.7q1.1-.6 2.6-.6 1 0 2 .3.9.3 1.5.9l-.7 1.6q-.6-.5-1.3-.7-.7-.3-1.3-.3-1.3 0-2 .8t-.7 2.3q0 1.5.7 2.3.7.8 2 .8.6 0 1.3-.3.7-.2 1.3-.7l.7 1.6q-.7.6-1.6.9-1 .3-2 .3zM60 17.9V16h6.6V18zm6.6 5.7v1.9l-.7.1h-.8q-1.6 0-2.5-.8-.8-1-.8-2.6v-8.4l2.3-.8v9q0 .7.2 1.1.2.4.6.5.3.2.7.2h.5l.5-.2zm-10.3 2V16h2.3v9.4zm-.1-13.8h2.6v2.3h-2.6zM43.7 25.5V12.3h5.8q2 0 3.3.9 1.1.9 1.1 2.5 0 1.1-.6 2t-1.7 1q1.3.2 2 1 .7 1 .7 2.2 0 1.7-1.2 2.7-1.2 1-3.4 1zm2.4-1.8h3.4q1.3 0 1.9-.5.6-.5.6-1.5t-.6-1.5-2-.5h-3.3zm0-5.8h3q1.3 0 2-.5.6-.5.6-1.4 0-1-.7-1.4-.6-.5-1.9-.5h-3z" fill="white" stroke-width=".4"/></svg>');
}

/* FIX: source data-URI was malformed here — it read `data:image/svg+xml,svg xmlns…`
   (missing the leading `<` before `svg`). The `<` is restored below so the SVG is
   valid, matching the well-formed confirm-transaction / confirm-message URIs. */
.lgu-screen-confirm-address {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 114 37.5"><text font-family="sans-serif" font-size="11" transform="translate(36.5 16.5)"><tspan x="0" y="0">Confirm </tspan><tspan x="-.9" y="12">Address</tspan></text><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.2 21.2l-5.5-5.5m5.5.1l-5.5 5.5m98.5-5.5l-5.5 5.5-2.5-2.5"/></svg>');
}

.lgu-device-container[illustration="confirm-address"] .lgu-screen-confirm-address {
    display: block;
}

.lgu-screen-confirm-transaction {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 114 37.5"><text font-family="sans-serif" font-size="11" transform="translate(36.5 16.5)"><tspan x="0" y="0">Confirm </tspan><tspan x="-10.2" y="12">Transaction</tspan></text><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.2 21.2l-5.5-5.5m5.5.1l-5.5 5.5m98.5-5.5l-5.5 5.5-2.5-2.5"/></svg>');
}

.lgu-device-container[illustration="confirm-transaction"] .lgu-screen-confirm-transaction {
    display: block;
}

.lgu-screen-confirm-message {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 114 37.5"><text font-family="sans-serif" font-size="11" transform="translate(36.5 16.5)"><tspan x="0" y="0">Confirm </tspan><tspan x="-3" y="12">Message</tspan></text><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.2 21.2l-5.5-5.5m5.5.1l-5.5 5.5m98.5-5.5l-5.5 5.5-2.5-2.5"/></svg>');
}

.lgu-device-container[illustration="confirm-message"] .lgu-screen-confirm-message {
    display: block;
}

/* ---- Connect Animation (looping steps 1 -> 2 -> 3) ----------------------- */

.lgu-device-container[illustration="connecting"][connect-animation-step="1"] .lgu-opacity-container {
    animation: lgu-fade-in var(--lgu-connect-animation-step-duration) both;
}
.lgu-device-container[illustration="connecting"][connect-animation-step="1"] .lgu-cable {
    animation: lgu-connect-cable var(--lgu-connect-animation-step-duration) both;
}

.lgu-device-container[illustration="connecting"][connect-animation-step="2"] .lgu-opacity-container {
    animation: lgu-scale var(--lgu-connect-animation-step-duration) both;
}
.lgu-device-container[illustration="connecting"][connect-animation-step="2"] .lgu-screen-pin {
    animation: lgu-show-screen-pin var(--lgu-connect-animation-step-duration) both;
    display: flex;
}
.lgu-device-container[illustration="connecting"][connect-animation-step="2"] .lgu-pin-dot {
    animation: lgu-show-pin-dot var(--lgu-connect-animation-step-duration) both;
}

.lgu-device-container[illustration="connecting"][connect-animation-step="3"] .lgu-opacity-container {
    animation: lgu-fade-out var(--lgu-connect-animation-step-duration) both;
}
.lgu-device-container[illustration="connecting"][connect-animation-step="3"] .lgu-screen-dashboard {
    /* The dashboard animation duration spans two steps but can be cut after the first step. */
    animation: lgu-show-screen-dashboard calc(2 * var(--lgu-connect-animation-step-duration)) both;
    display: flex;
}
.lgu-device-container[illustration="connecting"][connect-animation-step="3"] .lgu-screen-app {
    animation: lgu-show-screen-app var(--lgu-connect-animation-step-duration) both;
    display: flex;
}

/* ---- @keyframes (VERBATIM from source; names prefixed lgu-) --------------- */

@keyframes lgu-connect-cable {
    0% {
        transform: translateX(-50%);
    }
    75%, 100% {
        transform: translateX(0);
    }
}

@keyframes lgu-fade-in {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    10%, 100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes lgu-scale {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    25%, 100% {
        opacity: var(--lgu-opacity);
        transform: scale(var(--lgu-scale-factor)) translateX(27.3%);
    }
}

@keyframes lgu-fade-out {
    0%, 95% {
        opacity: var(--lgu-opacity);
    }
    100% {
        opacity: 0;
    }
}

@keyframes lgu-show-screen-pin {
    0% {
        opacity: 0;
        transform: scale(calc(1 / var(--lgu-scale-factor))) translateX(-105%);
    }
    5% {
        opacity: 1;
    }
    25% {
        transform: scale(1);
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes lgu-show-pin-dot {
    0%, 12% {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="30" height="3" x="1" y="28" fill="white" ry="1.5"/></svg>');
    }
    17%, 100% {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="15" fill="white"/></svg>');
    }
}

/* This animation is designed for a duration of two animation steps to run in sync
   with the app animation if it runs over 2 steps but the actual animation happens
   within the first animation step and the second animation step is just transparency
   such that the animation can also be cut after the first step. */
@keyframes lgu-show-screen-dashboard {
    0% {
        opacity: 0;
    }
    2.5%, 25% {
        opacity: 1;
    }
    27.5%, 100% {
        opacity: 0;
    }
}

@keyframes lgu-show-screen-app {
    0%, 55% {
        opacity: 0;
    }
    60%, 95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Retained VERBATIM from source for completeness. Used by the connect-button /
   wrong-app code paths in the original Hub component, which are out of scope for
   this looping demo, so no selector references them here. */
@keyframes lgu-show-screen-app-double-duration {
    0%, 27.5% {
        opacity: 0;
    }
    30%, 97.5% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes lgu-connect-button-pulsate {
    100% {
        background-color: rgba(255, 255, 255, var(--lgu-opacity));
    }
}

/* ---- PIN-dot staggered wave delays (VERBATIM from source) ---------------- */

.lgu-root .lgu-pin-dot:nth-child(2) {
    animation-delay: calc(1 * var(--lgu-connect-animation-step-duration) / 1.15 / 8) !important;
}
.lgu-root .lgu-pin-dot:nth-child(3) {
    animation-delay: calc(2 * var(--lgu-connect-animation-step-duration) / 1.15 / 8) !important;
}
.lgu-root .lgu-pin-dot:nth-child(4) {
    animation-delay: calc(3 * var(--lgu-connect-animation-step-duration) / 1.15 / 8) !important;
}
.lgu-root .lgu-pin-dot:nth-child(5) {
    animation-delay: calc(4 * var(--lgu-connect-animation-step-duration) / 1.15 / 8) !important;
}
.lgu-root .lgu-pin-dot:nth-child(6) {
    animation-delay: calc(5 * var(--lgu-connect-animation-step-duration) / 1.15 / 8) !important;
}
.lgu-root .lgu-pin-dot:nth-child(7) {
    animation-delay: calc(6 * var(--lgu-connect-animation-step-duration) / 1.15 / 8) !important;
}
.lgu-root .lgu-pin-dot:nth-child(8) {
    animation-delay: calc(7 * var(--lgu-connect-animation-step-duration) / 1.15 / 8) !important;
}

/* --- lofc --- */
/* ==========================================================================
   lofc — Nimiq Login File CARD (static)
   Pure-CSS reproduction of the canvas-rendered account card in Keyguard
   src/lib/LoginFile.js + LoginFileConfig.js.

   Canvas is 630 x 1060; every dimension below is a source value x0.3
   (render 189 x 318). Overlay elements are absolutely positioned inside the
   inner panel using (canvasCoord - BORDER_WIDTH) x 0.3, i.e. panel-relative.
   Color / corner / opacityLines / opacityDate copied VERBATIM per variant.
   ========================================================================== */

/* ---- light stage ------------------------------------------------------- */
.lofc-stage {
    min-height: 100vh;
    margin: 0;
    padding: 40px 24px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background: #f8f8f9;
    background-image: radial-gradient(circle at 50% 30%, #ffffff 0%, #eef0f2 100%);
    font-family: 'Muli', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---- outer white card = component root (OUTER_RADIUS 24 x0.3 = 7.2) ---- */
.lofc-root {
    position: relative;
    width: 189px;    /* 630  x0.3 */
    height: 318px;   /* 1060 x0.3 */
    background: #ffffff;
    border-radius: 7.2px;
    box-shadow: 0 18px 38px rgba(31, 35, 72, 0.18), 0 2px 6px rgba(31, 35, 72, 0.10);
}

/* ---- inner gradient panel (inset BORDER_WIDTH 12 x0.3 = 3.6;
        RADIUS 16 x0.3 = 4.8) --------------------------------------------- */
.lofc-panel {
    position: absolute;
    top: 3.6px;
    left: 3.6px;
    right: 3.6px;
    bottom: 3.6px;
    border-radius: 4.8px;
    overflow: hidden;
    color: #ffffff;
}

/* per-variant gradient + opacity tokens (VERBATIM from LoginFileConfig.js).
   141% 141% at bottom right reproduces the canvas radial gradient whose
   radius is the panel diagonal (base color lands on the far corner). */
.lofc-panel.lofc-teal {
    background: radial-gradient(141% 141% at bottom right, #41A38E, #21BCA5);
    --lofc-lines: 0.15;
    --lofc-date: 0.55;
}
.lofc-panel.lofc-blue {
    background: radial-gradient(141% 141% at bottom right, #265DD7, #0582CA);
    --lofc-lines: 0.1;
    --lofc-date: 0.45;
}
.lofc-panel.lofc-orange {
    background: radial-gradient(141% 141% at bottom right, #FD6216, #FC8702);
    --lofc-lines: 0.15;
    --lofc-date: 0.6;
}

/* ---- security waves: drawn at (12,12) size 606x576 -> panel (0,0) ------- */
.lofc-waves {
    position: absolute;
    top: 0;
    left: 0;
    width: 181.8px;   /* 606 x0.3 (= full panel width) */
    height: 172.8px;  /* 576 x0.3 */
    opacity: var(--lofc-lines);
}

/* ---- Nimiq wordmark: drawn at (116,86) size 398x48 --------------------- */
.lofc-wordmark {
    position: absolute;
    top: 22.2px;      /* (86-12)  x0.3 */
    left: 31.2px;     /* (116-12) x0.3 */
    width: 119.4px;   /* 398 x0.3 */
    height: 14.4px;   /* 48  x0.3 */
}

/* ---- centered account label: baseline canvas y=200 -------------------- */
.lofc-label {
    position: absolute;
    top: 47.8px;      /* baseline (200-12)x0.3=56.4, minus ascent */
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10.8px; /* 36 x0.3 */
    line-height: 10.8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    padding: 0 10.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- vertical date on the right edge: rotated -90deg ------------------- */
.lofc-date {
    position: absolute;
    top: 213.9px;     /* (725-12) x0.3 */
    left: 178.2px;    /* (606-12) x0.3 */
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center;
    font-size: 7.2px; /* 24 x0.3 */
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    color: rgba(255, 255, 255, var(--lofc-date));
}

/* ---- key icon: drawn at (244,291) size 150x158, opacity .6 ------------- */
.lofc-key {
    position: absolute;
    top: 83.7px;      /* (291-12) x0.3 */
    left: 69.6px;     /* (244-12) x0.3 */
    width: 45px;      /* 150 x0.3 */
    height: 47.4px;   /* 158 x0.3 */
    opacity: 0.6;
}

/* ---- QR block: image drawn at (150,548) size 330x330 ------------------ */
.lofc-qr {
    position: absolute;
    top: 160.8px;     /* (548-12) x0.3 */
    left: 41.4px;     /* (150-12) x0.3 (= horizontally centered) */
    width: 99px;      /* 330 x0.3 */
    height: 99px;
}

/* ---- warning line: baseline canvas y=972 ------------------------------ */
.lofc-warning {
    position: absolute;
    top: 281.3px;     /* baseline (972-12)x0.3=288, minus ascent */
    left: 0;
    right: 0;
    text-align: center;
    font-size: 8.4px; /* 28 x0.3 */
    line-height: 8.4px;
    font-weight: 600;
    color: #ffffff;
}

/* ---- optional caption under each card (stage chrome, not part of card) - */
.lofc-caption {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #1f2348;
    opacity: 0.55;
}
.lofc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- lofa --- */
/* ==========================================================================
   lofa — Nimiq Login File DRAW-IN ANIMATION
   Reproduced verbatim from Keyguard: src/components/LoginFileAnimation.css
   All selectors + @keyframes prefixed `lofa-`. Source order preserved so the
   step-cascade resolves identically (equal-specificity rules, last-wins).
   Base line color #D2D3DA. Rendered at ~1.6x (114x186 -> 182x297).
   ========================================================================== */

/* ---- light stage ------------------------------------------------------- */
.lofa-stage {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f9;
    background-image: radial-gradient(circle at 50% 40%, #ffffff 0%, #eef0f2 100%);
}

/* ---- component (verbatim, prefixed) ------------------------------------ */
.lofa-root {
    width: 182px;
    height: 297px;
    position: relative;
}

.lofa-root .lofa-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.64, 0, 0.78, 0);
}

.lofa-root svg {
    color: #D2D3DA;
    width: 100%;
    height: 100%;
    position: relative;
}

.lofa-root .lofa-border:nth-child(1) { stroke-dasharray: 92 440 585 0; animation: lofa-border-1 3s ease-in-out infinite; }
.lofa-root .lofa-border:nth-child(2) { stroke-dasharray: 0 102 50 585; animation: lofa-border-2 3s ease-in-out infinite; }
.lofa-root .lofa-border:nth-child(3) { stroke-dasharray: 0 230 195 585; animation: lofa-border-3 3s ease-in-out infinite; }

@keyframes lofa-border-1 {
    from { stroke-dasharray: 62 440 585 0; }
    50%  { stroke-dasharray: 122 440 585 0; }
    to   { stroke-dasharray: 62 440 585 0; }
}

@keyframes lofa-border-2 {
    from { stroke-dasharray: 0 72 50 585; }
    50%  { stroke-dasharray: 0 132 50 585; }
    to   { stroke-dasharray: 0 72 50 585; }
}

@keyframes lofa-border-3 {
    from { stroke-dasharray: 0 200 195 585; }
    50%  { stroke-dasharray: 0 260 195 585; }
    to   { stroke-dasharray: 0 200 195 585; }
}

.lofa-root.lofa-step-1 .lofa-border:nth-child(1),
.lofa-root.lofa-step-1 .lofa-border:nth-child(2),
.lofa-root.lofa-step-1 .lofa-border:nth-child(3),
.lofa-root.lofa-colored .lofa-border { animation: none; }

.lofa-root .lofa-border {
    transition: stroke-dasharray 0.3s, opacity 0.3s 0.12s;
}

.lofa-root .lofa-title,
.lofa-root .lofa-date {
    transition: stroke 0.3s;
}

.lofa-root .lofa-logo,
.lofa-root .lofa-key {
    transition: opacity 0.3s, fill 0.3s;
}

.lofa-root .lofa-waves * {
    stroke-dasharray: 0 124;
}

.lofa-root .lofa-key,
.lofa-root .lofa-qr {
    opacity: 0;
}

.lofa-root .lofa-qr {
    transition: opacity 0.3s;
}

.lofa-root.lofa-step-1 .lofa-border:nth-child(1) { stroke-dasharray: 92 430 585 0; }
.lofa-root.lofa-step-1 .lofa-border:nth-child(3) { stroke-dasharray: 0 220 205 585; }

.lofa-root.lofa-step-2 .lofa-border:nth-child(3) { stroke-dasharray: 0 200 225 585; }

.lofa-root.lofa-step-3 .lofa-border:nth-child(3) { stroke-dasharray: 0 180 245 585; }

.lofa-root.lofa-step-4 .lofa-border:nth-child(1) { stroke-dasharray: 94 410 585 0; }
.lofa-root.lofa-step-4 .lofa-border:nth-child(3) { stroke-dasharray: 0 160 265 585; }

.lofa-root.lofa-step-5 .lofa-border:nth-child(1) { stroke-dasharray: 94 375 585 0; }

.lofa-root.lofa-step-6 .lofa-border:nth-child(1) { stroke-dasharray: 102 367 585 0; }

.lofa-root.lofa-step-7 .lofa-border:nth-child(1) { stroke-dasharray: 102 350 585 0; }
.lofa-root.lofa-step-7 .lofa-border:nth-child(3) { stroke-dasharray: 0 160 282 585; }

.lofa-root.lofa-step-8 .lofa-border:nth-child(1), .lofa-root.lofa-colored .lofa-border:nth-child(1) { stroke-dasharray: 102 345 585 0; }
.lofa-root.lofa-step-8 .lofa-border:nth-child(3), .lofa-root.lofa-colored .lofa-border:nth-child(3) { stroke-dasharray: 0 152 295 585; }
.lofa-root.lofa-step-8 .lofa-key { opacity: 1; }

.lofa-root.lofa-step-1 .lofa-qr:nth-child(1),
.lofa-root.lofa-step-2 .lofa-qr:nth-child(2),
.lofa-root.lofa-step-3 .lofa-qr:nth-child(3),
.lofa-root.lofa-step-4 .lofa-qr:nth-child(4),
.lofa-root.lofa-step-5 .lofa-qr:nth-child(5),
.lofa-root.lofa-step-6 .lofa-qr:nth-child(6),
.lofa-root.lofa-step-7 .lofa-qr:nth-child(7),
.lofa-root.lofa-step-8 .lofa-qr:nth-child(8) { opacity: 1; }

.lofa-root.lofa-colored .lofa-background {
    opacity: 1;
}

.lofa-root.lofa-colored .lofa-border {
    opacity: 0;
}

.lofa-root.lofa-colored .lofa-waves,
.lofa-root.lofa-colored .lofa-title,
.lofa-root.lofa-colored .lofa-date {
    stroke: rgba(255, 255, 255, 0.5);
}

.lofa-root.lofa-colored .lofa-waves * {
    stroke-dasharray: 124 124;
    transition: stroke-dasharray 1s ease-in;
}

.lofa-root.lofa-colored .lofa-waves path:nth-child(1) { transition-delay: 0.48s; }
.lofa-root.lofa-colored .lofa-waves path:nth-child(2) { transition-delay: 0.28s; }
.lofa-root.lofa-colored .lofa-waves path:nth-child(3) { transition-delay: 0.46s; }
.lofa-root.lofa-colored .lofa-waves path:nth-child(4) { transition-delay: 0.26s; }
.lofa-root.lofa-colored .lofa-waves path:nth-child(5) { transition-delay: 0.44s; }
.lofa-root.lofa-colored .lofa-waves path:nth-child(6) { transition-delay: 0.24s; }
.lofa-root.lofa-colored .lofa-waves path:nth-child(7) { transition-delay: 0.42s; }
.lofa-root.lofa-colored .lofa-waves path:nth-child(8) { transition-delay: 0.22s; }
.lofa-root.lofa-colored .lofa-waves path:nth-child(9) { transition-delay: 0.40s; }
.lofa-root.lofa-colored .lofa-waves path:nth-child(10){ transition-delay: 0.20s; }

.lofa-root.lofa-colored .lofa-logo {
    fill: rgba(255, 255, 255, 0.5);
}

.lofa-root.lofa-colored .lofa-key {
    opacity: 1;
    fill: rgba(255, 255, 255, 0.4);
}

.lofa-root.lofa-colored .lofa-qr {
    transition: opacity 0.3s, stroke 0s 0.3s;
    stroke: rgba(255, 255, 255, 0.6);
}

/* ---- account-color backgrounds ----------------------------------------
   radial-gradient(<corner> -> <color>) from bottom-right; 141% 141% places
   the base color exactly at the opposite (top-left) corner, matching the
   canvas gradient (radius = panel diagonal). Hex pairs copied VERBATIM from
   Keyguard LoginFileConfig.js (color / corner).
   ----------------------------------------------------------------------- */
.lofa-background.lofa-c0 { background: radial-gradient(141% 141% at bottom right, #FD6216, #FC8702); } /* orange */
.lofa-background.lofa-c1 { background: radial-gradient(141% 141% at bottom right, #CC3047, #D94432); } /* red    */
.lofa-background.lofa-c2 { background: radial-gradient(141% 141% at bottom right, #EC991C, #E9B213); } /* yellow */
.lofa-background.lofa-c3 { background: radial-gradient(141% 141% at bottom right, #260133, #1F2348); } /* indigo */
.lofa-background.lofa-c4 { background: radial-gradient(141% 141% at bottom right, #265DD7, #0582CA); } /* blue   */
.lofa-background.lofa-c5 { background: radial-gradient(141% 141% at bottom right, #4D4C96, #5F4B8B); } /* purple */
.lofa-background.lofa-c6 { background: radial-gradient(141% 141% at bottom right, #41A38E, #21BCA5); } /* teal   */
.lofa-background.lofa-c7 { background: radial-gradient(141% 141% at bottom right, #E0516B, #FA7268); } /* pink   */
.lofa-background.lofa-c8 { background: radial-gradient(141% 141% at bottom right, #70B069, #88B04B); } /* green  */
.lofa-background.lofa-c9 { background: radial-gradient(141% 141% at bottom right, #724147, #795548); } /* brown  */

/* --- bcb --- */
/* =============================================================================
 * bcb — Backup-code chat bubbles
 * Reproduced from Nimiq Keyguard:
 *   src/components/BackupCodesIllustration.{js,css}
 *   src/components/BackupCodesIllustrationBase.{js,css}
 * Zero-build, self-contained. Every selector + @keyframes prefixed `bcb`.
 * UNITS: source rem -> px x8 (px-valued source stays px). SVG/mask/gradients VERBATIM.
 * ========================================================================== */


/* --bcb-zoom registered so the zoom (and everything derived from it via calc)
 * can be smoothly transitioned. Source drove the zoom through the View
 * Transition API; here we animate the custom property directly. */
@property --bcb-zoom {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

/* ---- stage (light) --------------------------------------------------------- */

.bcb-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    width: 100%;
    max-width: 528px;
    margin: 0 auto;
    padding: 40px 32px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(31, 35, 72, 0.07), 0 2px 8px rgba(31, 35, 72, 0.04);
}

.bcb-caption {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(31, 35, 72, 0.4);
}

/* ---- illustration root (was .backup-codes-illustration-base) --------------- */

.bcb-root {
    contain: size layout paint style;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 208px; /* 26rem */
    padding: 0;
}

/* ---- message-bubble variables (rem -> px x8) ------------------------------- */

.bcb-root .bcb-bubble {
    --bcb-zoom: 1;
    /* to avoid rendering at sub-pixel precision, we round values */
    --bcb-message-bubble-width: round(calc(216px * var(--bcb-zoom)), 1px);
    --bcb-message-bubble-min-height: round(calc(96px * var(--bcb-zoom)), 1px);
    --bcb-message-bubble-padding: round(calc(12px * var(--bcb-zoom)), 1px);
    --bcb-message-bubble-padding-bottom: round(calc(20px * var(--bcb-zoom)), 1px);
    --bcb-label-font-size: round(calc(14px * var(--bcb-zoom)), 1px);
    --bcb-label-margin-bottom: round(calc(8px * var(--bcb-zoom)), 1px);
    --bcb-code-font-size: round(calc(14px * var(--bcb-zoom)), 1px);
    --bcb-counter-size: round(calc(24px * var(--bcb-zoom)), 1px);
    --bcb-counter-offset: round(calc(24px * var(--bcb-zoom) * .4), 1px);
    --bcb-counter-font-size: round(calc(12px * var(--bcb-zoom)), 1px);
    --bcb-counter-checkmark-size: round(calc(10px * var(--bcb-zoom)), 1px);
}

/* fallback if rounding is not supported */
@supports not (width: round(1.2px, 1px)) {
    .bcb-root .bcb-bubble {
        --bcb-message-bubble-width: calc(216px * var(--bcb-zoom));
        --bcb-message-bubble-min-height: calc(96px * var(--bcb-zoom));
        --bcb-message-bubble-padding: calc(12px * var(--bcb-zoom));
        --bcb-message-bubble-padding-bottom: calc(20px * var(--bcb-zoom));
        --bcb-label-font-size: calc(14px * var(--bcb-zoom));
        --bcb-label-margin-bottom: calc(8px * var(--bcb-zoom));
        --bcb-code-font-size: calc(14px * var(--bcb-zoom));
        --bcb-counter-size: calc(24px * var(--bcb-zoom));
        --bcb-counter-offset: calc(24px * var(--bcb-zoom) * .4);
        --bcb-counter-font-size: calc(12px * var(--bcb-zoom));
        --bcb-counter-checkmark-size: calc(10px * var(--bcb-zoom));
    }
}

/* Slightly reduced non-zoomed code font-size to keep most codes on two lines. */
.bcb-root .bcb-bubble:not(.bcb-zoomed) {
    --bcb-code-font-size: calc(14px * var(--bcb-zoom) * .995); /* no rounding on purpose */
}

/* ---- common message-bubble styles ----------------------------------------- */

.bcb-root .bcb-bubble {
    position: absolute;

    width: var(--bcb-message-bubble-width);
    min-height: var(--bcb-message-bubble-min-height); /* min-height so code may break into 3 lines */
    padding: var(--bcb-message-bubble-padding);
    padding-bottom: var(--bcb-message-bubble-padding-bottom);

    line-height: 1;
    transform: translate(0px, 0px);
    filter: drop-shadow(0 0 calc(20px * var(--bcb-zoom)) rgba(0, 0, 0, 0.3))
        drop-shadow(0 calc(1.34px * var(--bcb-zoom)) calc(4.47px * var(--bcb-zoom)) rgba(59, 76, 106, 0.0775))
        drop-shadow(0 calc(0.4px * var(--bcb-zoom)) calc(1.33px * var(--bcb-zoom)) rgba(59, 76, 106, 0.0525));

    transition:
        transform .5s var(--nimiq-ease),
        opacity .4s var(--nimiq-ease),
        --bcb-zoom .5s var(--nimiq-ease);
}

/* ---- background (separate element with mask-image so drop-shadow isn't cut) */

.bcb-root .bcb-bubble .bcb-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    /* mask stretches to the bubble box; SVGs use preserveAspectRatio="none" */
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.bcb-root .bcb-bubble.bcb-code-1 .bcb-background {
    /* left message bubble (tail bottom-left) */
    background-image: radial-gradient(141.42% 141.42% at 100% 100%, #693BC4 0%, #8F3FD5 100%);
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 96" preserveAspectRatio="none"><path d="M0 3a3 3 0 0 1 3-3h210a3 3 0 0 1 3 3v75.9a3 3 0 0 1-3 3H24.5a3 3 0 0 0-1.8.6l-18 13A3 3 0 0 1 0 93z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 96" preserveAspectRatio="none"><path d="M0 3a3 3 0 0 1 3-3h210a3 3 0 0 1 3 3v75.9a3 3 0 0 1-3 3H24.5a3 3 0 0 0-1.8.6l-18 13A3 3 0 0 1 0 93z"/></svg>');
}
.bcb-root .bcb-bubble.bcb-code-2 .bcb-background {
    /* right message bubble (tail bottom-right) */
    background-image: radial-gradient(141.42% 141.42% at 0% 100%, #DC1845 0%, #F33F68 100%);
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 96" preserveAspectRatio="none"><path d="M216 3a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3v75.9a3 3 0 0 0 3 3h188.5a3 3 0 0 1 1.8.6l18 13A3 3 0 0 0 216 93z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 96" preserveAspectRatio="none"><path d="M216 3a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3v75.9a3 3 0 0 0 3 3h188.5a3 3 0 0 1 1.8.6l18 13A3 3 0 0 0 216 93z"/></svg>');
}

/* ---- label and backup code ------------------------------------------------ */

.bcb-root .bcb-bubble .bcb-label {
    margin-bottom: var(--bcb-label-margin-bottom);
    font-size: var(--bcb-label-font-size);
    font-weight: 500;
    line-height: 1;
    color: rgba(255, 255, 255, .6);
}

.bcb-root .bcb-bubble .bcb-code-text {
    font-size: var(--bcb-code-font-size);
    /* Source uses `inherit` (Muli sans); kit renders the code monospace per spec. */
    font-family: 'Fira Mono', 'Andale Mono', monospace;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.0095em; /* best effort to limit the code to two lines */
    word-break: break-all;
    overflow-wrap: anywhere;
    color: white;
}

/* ---- counter circle ------------------------------------------------------- */

.bcb-root .bcb-bubble::after,
.bcb-root .bcb-bubble .bcb-background::after {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: var(--bcb-counter-size);
    height: var(--bcb-counter-size);
    top: calc(-1 * var(--bcb-counter-offset));
    left: calc(-1 * var(--bcb-counter-offset));
    border-radius: 50%;
    font-size: var(--bcb-counter-font-size);
    font-weight: 700;
    background-color: white;
}
.bcb-root .bcb-bubble.bcb-code-1::after {
    content: '1';
    color: #8D3FD4;
}
.bcb-root .bcb-bubble.bcb-code-2::after {
    content: '2';
    color: #F33E67;
}
.bcb-root .bcb-bubble .bcb-background::after {
    /* Copy of the counter on the (masked) background, only to cast a soft shadow
       onto the bubble without overlapping the bubble's own drop-shadow. */
    content: '';
    filter: drop-shadow(0 0 calc(20px * var(--bcb-zoom)) rgba(0, 0, 0, 0.2))
        drop-shadow(0 calc(1.34px * var(--bcb-zoom)) calc(4.47px * var(--bcb-zoom)) rgba(59, 76, 106, 0.1775))
        drop-shadow(0 calc(0.4px * var(--bcb-zoom)) calc(1.33px * var(--bcb-zoom)) rgba(59, 76, 106, 0.1525));
}

/* ---- message-bubble states ------------------------------------------------ */

.bcb-root .bcb-bubble:is(.bcb-masked, .bcb-loading) .bcb-label {
    color: white;
}
.bcb-root .bcb-bubble:is(.bcb-masked, .bcb-loading) .bcb-code-text {
    /* Redact the code: transparent text over a rounded box background per text line. */
    line-height: 1.2;
    color: transparent;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 20" preserveAspectRatio="none"><rect opacity="0.15" width="192" height="14" y="3" rx="3" fill="white"/></svg>');
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    user-select: none;
    pointer-events: none;
}
.bcb-root .bcb-bubble:is(.bcb-masked, .bcb-loading) .bcb-code-text:empty::after {
    /* Placeholder content if no code is set yet */
    content: '----------------------------------------------------------';
}

.bcb-root .bcb-bubble:not(.bcb-faded).bcb-loading .bcb-code-text {
    animation: bcb-loading-animation .8s cubic-bezier(.76, .29, .29, .76) alternate infinite;
}

@keyframes bcb-loading-animation {
    from { opacity: 1; }
    to { opacity: .6; }
}

.bcb-root .bcb-bubble.bcb-faded {
    filter: none;
    opacity: .1;
}
.bcb-root .bcb-bubble.bcb-faded .bcb-background {
    background: white !important;
}
.bcb-root .bcb-bubble.bcb-faded::after,
.bcb-root .bcb-bubble.bcb-faded .bcb-background::after {
    content: '' !important;
    background-image: none !important;
    filter: none;
}

.bcb-root .bcb-bubble.bcb-zoomed {
    --bcb-zoom: calc(10 / 7);
}
.bcb-root .bcb-bubble.bcb-zoomed .bcb-code-text {
    line-height: 1.35;
}

.bcb-root:not(.bcb-success) .bcb-bubble.bcb-complete.bcb-code-1 .bcb-background {
    background-image: radial-gradient(100% 100% at 100% 100%, #41A38E 0%, #21BCA5 100%);
}
.bcb-root:not(.bcb-success) .bcb-bubble.bcb-complete.bcb-code-2 .bcb-background {
    background-image: radial-gradient(100% 100% at 0% 100%, #41A38E 0%, #21BCA5 100%);
}
.bcb-root .bcb-bubble.bcb-complete::after {
    /* replace counter with a checkmark icon */
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" fill="none"><path stroke="%2313b59d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1 3.3 9 1 6.7"/></svg>');
    background-size: var(--bcb-counter-checkmark-size);
    background-repeat: no-repeat;
    background-position: center;
}

/* ---- per-step message-bubble positioning (rem -> px x8) -------------------- */

.bcb-root.bcb-intro .bcb-code-1,
.bcb-root.bcb-success .bcb-code-1 {
    transform: translate(-36px, -28px);
}
.bcb-root.bcb-intro .bcb-code-2,
.bcb-root.bcb-success .bcb-code-2 {
    transform: translate(36px, 28px);
}

.bcb-root.bcb-send-code-1 .bcb-code-2,
.bcb-root.bcb-send-code-1-confirm .bcb-code-2 {
    transform: translate(100px, 42px);
    z-index: -1;
}

.bcb-root.bcb-send-code-2 .bcb-code-1,
.bcb-root.bcb-send-code-2-confirm .bcb-code-1 {
    transform: translate(-100px, -42px);
}

/* ---- reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .bcb-root .bcb-bubble {
        transition: none;
    }
}

/* --- rwg --- */
/* =============================================================================
 * rwg — 24-word Recovery Words grid
 * Reproduced from Nimiq Keyguard: src/components/RecoveryWords.{js,css}
 * Zero-build, self-contained. Every selector prefixed `rwg`.
 * UNITS: source rem -> px x8.
 * ADAPTED for a LIGHT stage (source styles target a dark background).
 * ========================================================================== */


/* ---- stage (light) --------------------------------------------------------- */

.rwg-stage {
    box-sizing: border-box;
    width: 100%;
    max-width: 552px;
    margin: 0 auto;
    padding: 32px 24px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(31, 35, 72, 0.07), 0 2px 8px rgba(31, 35, 72, 0.04);
}

.rwg-caption {
    margin: 0 4px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(31, 35, 72, 0.4);
}

/* ---- grid (was .recovery-words .word-section) ----------------------------- */

.rwg-root {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden; /* prevent scrollbar from showing when input shakes */
    width: 100%;
    box-sizing: border-box;
}

/* ---- word cell (was .recovery-words .word) -------------------------------- */

.rwg-word {
    margin: 4px;              /* .5rem */
    flex: 1 0 25%;
    /* 4px margins make a literal 25% basis overflow to 3 columns; capping the
       used width keeps the intended 4-column grid with the 4px gutters. */
    max-width: calc(25% - 8px);
    box-sizing: border-box;
    position: relative;
    height: 40px;            /* 5rem */
    line-height: 40px;       /* 5rem */
    border-radius: 4px;      /* .5rem */
    color: var(--nimiq-blue);
    white-space: nowrap;
}

/* LIGHT-stage fill. Source (dark bg) uses rgba(255,255,255,0.1). */
.rwg-word.rwg-complete {
    background-color: rgba(31, 35, 72, 0.06);
}

.rwg-word .rwg-word-number {
    flex-grow: 0;
    margin: 0 8px;           /* 0 1rem */
    opacity: 0.3;
    font-weight: 600;
    font-size: 14px;         /* 1.75rem */
}

.rwg-word .rwg-word-content {
    flex-grow: 1;
    font-size: 16px;         /* 2rem */
}

/* --- ppb --- */
/* =============================================================================
 * ppb — PIN / password dots input + eye toggle + hexagon loading spinner
 * Reproduced from Nimiq Keyguard:
 *   src/components/PasswordInput.js / .css
 *   src/components/PasswordBox.js   / .css   (loading spinner SVG)
 * Self-contained, zero-build. Source rem -> px on the 8px grid (1rem = 8px).
 * Every selector + @keyframes is prefixed `ppb`.
 * ========================================================================== */


/* ---- Page + light stage (mirrors the kit's .demo / .demo-stage) --------- */
.ppb-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: #f3f4f7;
    color: var(--nimiq-blue);
    font-family: var(--nimiq-font-family);
    -webkit-font-smoothing: antialiased;
}

.ppb-demo {
    width: 520px;
    max-width: 100%;
    border: 1px solid rgba(31, 35, 72, 0.1);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.ppb-demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(31, 35, 72, 0.08);
}

.ppb-demo-title {
    font-weight: 700;
    font-size: 15px;
}

.ppb-demo-title small {
    font-weight: 400;
    color: rgba(31, 35, 72, 0.45);
    font-family: 'Fira Mono', monospace;
    font-size: 12px;
    margin-left: 8px;
}

.ppb-stage {
    padding: 48px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 44px;
}

.ppb-caption {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(31, 35, 72, 0.4);
    margin-top: 16px;
}

/* ---- Password input ----------------------------------------------------- *
 * PasswordInput.css: font-size 3rem, letter-spacing 1.25rem, padding 0 2.75rem
 * -> 24px / 10px / 0 22px on the 8px grid. Adapted onto a kit-style white
 * .nq-input box (source uses box-shadow:none on a coloured PasswordBox bg).   */
.ppb-password-input {
    width: 360px;
    max-width: 100%;
}

.ppb-input-container {
    position: relative;
    width: 100%;
}

.ppb-input {
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    margin: 0;
    border: none;
    outline: none;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(31, 35, 72, 0.14);
    border-radius: 8px;
    color: var(--nimiq-blue);
    font-family: var(--nimiq-font-family);
    font-size: 24px;
    letter-spacing: 10px;
    padding: 0 22px;
    transition: box-shadow 0.2s var(--nimiq-ease);
}

.ppb-input::placeholder {
    letter-spacing: 10px;
    color: rgba(31, 35, 72, 0.3);
    opacity: 1;
}

.ppb-input:hover {
    box-shadow: inset 0 0 0 1.5px rgba(31, 35, 72, 0.24);
}

.ppb-input:focus {
    box-shadow: inset 0 0 0 2px var(--nimiq-light-blue);
}

/* Revealed (type=text): tighten the tracking like the source */
.ppb-input[type="text"] {
    letter-spacing: 2px;
}

/* Suppress the browser's own reveal/clear glyph — the eye button owns that */
.ppb-input::-ms-reveal,
.ppb-input::-ms-clear {
    display: none;
}

/* ---- Eye show / hide toggle -------------------------------------------- *
 * SVG glyphs copied verbatim from @nimiq/style nq-view / nq-view-off.
 * .ppb-is-visible  = nq-view-off (crossed eye) — shown while password is text
 * .ppb-not-visible = nq-view     (open eye)    — shown while password is masked */
.ppb-eye-button {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: var(--nimiq-blue);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
}

.ppb-eye-button:hover {
    opacity: 1;
}

.ppb-icon {
    display: block;
    width: 24px;
    height: 24px;
}

.ppb-eye-button:not(.ppb-visible) .ppb-is-visible,
.ppb-eye-button.ppb-visible .ppb-not-visible {
    display: none;
}

/* ---- Hexagon loading spinner ------------------------------------------- *
 * SVG paths + stroke-dasharray copied VERBATIM from PasswordBox.js.
 * The source drives motion from a global animation (common.css animates
 * stroke-dashoffset); per spec the kit adds a rotation keyframe instead.      */
.ppb-loading-spinner {
    color: var(--nimiq-light-blue);
    overflow: visible;
    transform-origin: center;
    animation: ppb-spin 1.5s linear infinite;
}

@keyframes ppb-spin {
    to { transform: rotate(360deg); }
}

/* --- bdb --- */
/* =============================================================================
 * bdb — BalanceDistributionBar (static display variant)
 * Reproduced from Nimiq Keyguard:
 *   src/components/BalanceDistributionBar.js / .css
 *   src/assets/swap-change-background.svg   (diagonal-hatch change overlay)
 * Self-contained, zero-build. Source rem -> px on the 8px grid (1rem = 8px).
 * Every selector is prefixed `bdb`. No @keyframes (static display bar).
 * ========================================================================== */


/* ---- Page + light stage (mirrors the kit's .demo / .demo-stage) --------- */
.bdb-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: #f3f4f7;
    color: var(--nimiq-blue);
    font-family: var(--nimiq-font-family);
    -webkit-font-smoothing: antialiased;
}

.bdb-demo {
    width: 640px;
    max-width: 100%;
    border: 1px solid rgba(31, 35, 72, 0.1);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.bdb-demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(31, 35, 72, 0.08);
}

.bdb-demo-title {
    font-weight: 700;
    font-size: 15px;
}

.bdb-demo-title small {
    font-weight: 400;
    color: rgba(31, 35, 72, 0.45);
    font-family: 'Fira Mono', monospace;
    font-size: 12px;
    margin-left: 8px;
}

.bdb-stage {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 28px;
}

/* ---- Legend ------------------------------------------------------------- */
.bdb-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: rgba(31, 35, 72, 0.7);
}

.bdb-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bdb-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ---- BalanceDistributionBar --------------------------------------------- *
 * BalanceDistributionBar.css, rem -> px:
 *   root  height 3.5rem -> 28px
 *   bar   height 2.5rem -> 20px · radius .5rem -> 4px · margin-right .375rem -> 3px
 *   sep   width .25rem -> 2px · height 3.5rem -> 28px · radius 1rem -> 8px
 *   ends  2rem -> 16px                                                        */
.bdb-root {
    height: 28px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.bdb-bar {
    height: 20px;
    min-width: 2px;
    border-radius: 4px;
    margin-right: 3px;
    opacity: 0.25;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.bdb-bar.active {
    opacity: 1;
}

/* Colours — BTC/USDC/USDT from source; NIM tones added per kit spec */
.bdb-bar.btc  { background-color: var(--bitcoin-orange); } /* #F7931A */
.bdb-bar.usdc { background-color: var(--usdc-blue); }      /* #2775CA */
.bdb-bar.usdt { background-color: var(--usdt-green); }     /* #009393 */
.bdb-bar.nim-green { background-color: var(--nimiq-green); }
.bdb-bar.nim-gold  { background-color: var(--nimiq-gold); }

.bdb-bar:last-child {
    margin-right: 0;
    justify-content: flex-start;
}

/* Hatched "change / growth" overlay — swap-change-background.svg verbatim,
   embedded as a data URI (white diagonal stripes), repeated horizontally. */
.bdb-change {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 36' width='9' height='36' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M.87 0L.65.38 0 1.5v4.8L3.63 0H.87zm4.5 0l-.22.38L0 9.3v4.79L8.13 0H5.37zM9 1.5L0 17.1v4.79l9-15.6V1.5zm0 7.8L0 24.89v4.8l9-15.6v-4.8zm0 7.8L0 32.67V36h.85l.22-.38L9 21.9v-4.8zm0 7.79L2.59 36h2.76l.22-.38L9 29.68v-4.8zm0 7.8L7.09 36H9v-3.32z' fill='%23fff' stroke='none'/%3E%3C/svg%3E") repeat-x;
    height: calc(100% - 4px);
    margin: 0 2px;
    border-radius: 1px;
}

.bdb-separator {
    width: 2px;
    height: 28px;
    background: rgba(31, 35, 72, 0.3);
    border-radius: 8px;
    margin-right: 3px;
    flex-shrink: 0;
}

/* Outer end-caps — first/last segment get the big rounded ends */
.bdb-root > div:first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.bdb-root > div:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* --- Integration fixes: adapt two reproductions to the kit's flex demo stage --- */
/* BalanceDistributionBar: give the flex root a width so its %-segments resolve
   (in Keyguard the surrounding layout supplied the width). */
.bdb-root { width: 480px; }
/* Hexagon spinner: use Keyguard's authentic stroke-dashoffset "chase" (the builder
   rigidly rotated the whole SVG, which read as a spinning fragment rather than a
   hexagon). Keyframes lifted verbatim from keyguard src/common.css. */
.ppb-loading-spinner { animation: none; }
.ppb-big-hex   { stroke-dashoffset: -40.5; animation: ppb-loading-big-hex 4s cubic-bezier(0.76,0.29,0.29,0.76) infinite; }
.ppb-small-hex { stroke-dashoffset: 13;    animation: ppb-loading-small-hex 4s cubic-bezier(0.76,0.29,0.29,0.76) infinite; }
@keyframes ppb-loading-big-hex {
  0%{stroke-dashoffset:-40.5} 17%{stroke-dashoffset:-15.08} 33%{stroke-dashoffset:10.33} 50%{stroke-dashoffset:35.75} 67%{stroke-dashoffset:61.17} 83%{stroke-dashoffset:86.58} 100%{stroke-dashoffset:112}
}
@keyframes ppb-loading-small-hex {
  0%{stroke-dashoffset:13} 17%{stroke-dashoffset:38.42} 33%{stroke-dashoffset:63.84} 50%{stroke-dashoffset:89.25} 67%{stroke-dashoffset:114.66} 83%{stroke-dashoffset:140.08} 100%{stroke-dashoffset:165.5}
}
/* Vue QrCode renders to <canvas> (raster) — render at 2x and scale to 160px so it's sharp on retina, matching the wallet's own technique. */
#vc-qr-mount canvas { width: 160px !important; height: 160px !important; }
/* Login File card: the mounted Vue QrCode canvas fills the 99x99 QR box (2x render, scaled = sharp). */
.lofc-qr { overflow: hidden; }
.lofc-qr canvas { width: 100% !important; height: 100% !important; display: block; }
.lofc-warning { font-weight: 700; }