/* nq-bundle.css — one shared bundle of the vendored nq registry component CSS
   (account-header, transaction-list, address-display, amount, fiat-amount,
   identicon, qr-code, status-screen, small-page, page-header, page-body,
   page-footer, close-button, address-input, copyable, amount-input, password-box,
   status-alert, account-list). Generated by concatenation for the kid
   app; requires nimiq-style.min.css (html{font-size:8px}, --nimiq-* vars).
   Fira Mono is self-hosted below (offline tablet) — the upstream Google Fonts
   @import from address-display.css is replaced by these @font-face rules. */

@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fira-mono-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fira-mono-latin-500.woff2') format('woff2');
}

/* ======== account-header/account-header.css ======== */
/* Nimiq Account Header (wallet AddressOverview header)
   Requires the legacy nimiq-style CSS (html{font-size:8px}, --nimiq-* vars,
   .nq-button-pill / .nq-button-s / .nq-icon) + Mulish & Fira Mono fonts.
   Composition of: AddressOverview.vue (.active-address + .actions),
   SearchBar.vue, StakingButton.vue (+ green CTA tooltip), StakingIcon.vue,
   vue-components Tooltip.vue (bottom subset).
   All selectors namespaced under .account-header. */

.account-header {
    /* wallet themes.scss defaults */
    --bg-primary: var(--nimiq-white);
    --text-16: rgba(31, 35, 72, 0.16);
    --text-22: rgba(31, 35, 72, 0.22);
    --light-blue-40: rgba(5, 130, 202, 0.4);
    --body-size: 2rem;
    --h1-size: 3rem;
    --large-button-size: 2rem;
    --attr-duration: 300ms;
    /* AddressOverview.vue layout vars (default: 1440px) */
    --padding: 4rem;
    --padding-bottom: 6rem;

    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-primary);
    color: var(--nimiq-blue);
    font-family: 'Mulish', sans-serif;
    /* composition chrome: room for the staking CTA tooltip (overlays the
       transaction list in the wallet) */
    padding-bottom: 9rem;
}

/* wallet global utilities */
.account-header .flex-row { display: flex; flex-direction: row; }
.account-header .ml-auto { margin-left: auto; }

/* ---- active address row ---- */
.account-header .active-address {
    flex-shrink: 0;
    align-items: center;
    padding: calc(var(--padding) + 2rem);
    padding-right: calc(var(--padding) + 4rem);
    padding-bottom: var(--padding-bottom);
}

.account-header .active-address .identicon-wrapper {
    position: relative;
    margin-right: 4rem;
}

.account-header .active-address .identicon {
    height: 11.25rem;
    width: 11.25rem;
    margin: -0.625rem 0; /* size identicon to be 90x80 px */
    flex-shrink: 0;
}
.account-header .identicon img { width: 100%; height: 100%; }

.account-header .active-address .meta {
    flex-grow: 1;
    min-width: 0;
}
.account-header .active-address .meta .flex-row { align-items: center; }

.account-header .active-address .address,
.account-header .active-address .label {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
}

.account-header .active-address .label,
.account-header .active-address .amount {
    --size: var(--h1-size);
    font-size: var(--size);
    margin-top: 0.25rem;
}

.account-header .active-address .address,
.account-header .active-address .fiat-amount {
    --size: var(--body-size);
    font-size: var(--size);
    opacity: 0.5;
}

.account-header .active-address .label {
    font-weight: 600;
    margin-bottom: 0.75rem;
    margin-right: 3rem;
    mask: linear-gradient(90deg, white, white calc(100% - 3rem), rgba(255,255,255, 0));
}

.account-header .active-address .address {
    word-spacing: -0.2em;
    font-family: 'Fira Mono', monospace;
    transition: opacity .3s var(--nimiq-ease);
}

.account-header .active-address .copyable {
    padding: 0.5rem 1rem;
    margin-left: -1rem;
    min-width: 0;
    margin-right: 3rem;
}

.account-header .active-address .fiat-amount { margin-left: auto; }

.account-header .active-address .amount,
.account-header .active-address .fiat-amount { flex-shrink: 0; }

.account-header .active-address .amount {
    font-weight: bold;
    margin-bottom: 0.5rem;
    white-space: nowrap;
}

.account-header .active-address .fiat-amount {
    font-weight: 600;
    line-height: 1;
}

/* ---- actions row ---- */
.account-header .actions {
    position: relative;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 0 var(--padding) 2rem;
    padding: 0 3rem 0 2rem;
}
.account-header .actions button { flex-shrink: 0; }
.account-header .actions .nq-button-pill { white-space: nowrap; }

.account-header .actions .vertical-separator {
    background: rgba(31, 35, 72, 0.15);
    border-radius: 2rem;
    width: 1.5px;
    height: 3rem;
    margin: 0.625rem .5rem 0.625rem 2rem;
}

.account-header .send,
.account-header .receive {
    margin: 0 0.5rem;
    align-items: center;
    padding: 1.125rem 2rem;
    height: unset;
    line-height: 1;
    border-radius: 500px;
    font-size: var(--large-button-size);
}
.account-header .send .nq-icon,
.account-header .receive .nq-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
}
.account-header .send { margin-left: 1.5rem; }
.account-header .send .nq-icon { transform: rotateZ(-90deg); }
.account-header .receive { margin-right: 0; }
.account-header .receive .nq-icon { transform: rotateZ(90deg); }

/* ---- search bar ---- */
.account-header .actions .container {
    width: 100%;
    min-width: 5.5rem;
}
.account-header .search-bar {
    --default-sb-width: clamp(5.5rem, 100%, 30rem);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    cursor: text;
    padding: 0.75rem 0;
    min-width: var(--default-sb-width);
    max-width: var(--default-sb-width);
}
.account-header .search-bar::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    box-shadow: inset 0 0 0 0.1875rem var(--text-16);
    border-radius: 500px;
    transition: box-shadow var(--attr-duration) var(--nimiq-ease);
}
.account-header .search-bar:hover::after {
    box-shadow: inset 0 0 0 0.1875rem var(--text-22);
}
.account-header .search-bar:focus-within { color: var(--nimiq-light-blue); }
.account-header .search-bar:focus-within > svg { opacity: 1; }
.account-header .search-bar:focus-within::after {
    box-shadow: inset 0 0 0 0.1875rem var(--light-blue-40);
}
.account-header .search-bar > svg {
    flex-grow: 0;
    margin-left: 1.75rem;
    margin-right: 1rem;
    flex-shrink: 0;
    opacity: 0.4;
    width: 1.75rem;
    height: 1.75rem;
    transition: opacity var(--attr-duration) var(--nimiq-ease);
}
.account-header .search-bar input {
    font-family: inherit;
    font-weight: 600;
    color: inherit;
    flex-grow: 1;
    border: 0;
    line-height: 2.75rem;
    font-size: var(--body-size);
    margin: 0;
    padding: 0;
    padding-right: 4rem;
    background: none;
    min-width: 0;
}
.account-header .search-bar input:focus { outline: none; }
.account-header .search-bar input::placeholder {
    font-weight: normal;
    color: inherit;
    opacity: 0.4;
}

/* ---- staking button + green CTA tooltip ---- */
.account-header .staking-button {
    position: relative;
    height: 6.75rem;
    margin: -1.25rem 0;
}
.account-header .staking-button svg { font-size: 6.75rem; }
.account-header .staking-button.show-text {
    display: flex;
    align-items: center;
}
.account-header .stake {
    display: block;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.account-header .show-text .stake {
    display: flex;
    align-items: center;
    height: 4.25rem;
    border-radius: 20rem;
    padding-right: 1.875rem;
    justify-content: center;
}
.account-header .show-text .stake .staking-icon {
    margin-right: -1rem;
    margin-left: -.5rem;
}

.account-header .staking-icon { font-size: 0; }
.account-header .staking-icon path:nth-child(1),
.account-header .staking-icon path:nth-child(2),
.account-header .staking-icon path:nth-child(4) { opacity: 0; }

/* tooltip base (bottom-position subset of vue-components Tooltip) */
.account-header .tooltip {
    display: inline-block;
    position: relative;
    line-height: 1;
}
.account-header .tooltip .trigger {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    text-decoration: none;
    outline: none;
    cursor: default;
    color: inherit;
}
.account-header .tooltip .trigger::after {
    opacity: 0;
    content: '';
    display: block;
    position: absolute;
    width: 2.25rem;
    height: 2rem;
    left: calc(50% - 1.125rem);
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 18 16" xmlns="http://www.w3.org/2000/svg"><path d="M9 7.12c-.47 0-.93.2-1.23.64L3.2 14.29A4 4 0 0 1 0 16h18a4 4 0 0 1-3.2-1.7l-4.57-6.54c-.3-.43-.76-.64-1.23-.64z" fill="white"/></svg>');
    transition: opacity .3s var(--nimiq-ease), .3s visibility;
    transition-delay: 16ms;
    visibility: hidden;
    z-index: 1000;
}
.account-header .tooltip[class*='position-bottom'] .trigger::after {
    top: 100%;
    background: var(--background, var(--nimiq-blue));
}
.account-header .tooltip.shown .trigger::after {
    opacity: 1;
    visibility: visible;
}
.account-header .tooltip .tooltip-box {
    contain: layout paint style;
    position: absolute;
    color: white;
    background: var(--background, var(--nimiq-blue-bg));
    padding: 1.5rem;
    border-radius: .5rem;
    font-size: 1.75rem;
    line-height: 1.5;
    font-weight: 600;
    box-shadow: 0 1.125rem 2.275rem rgba(0, 0, 0, 0.11);
    z-index: 999;
}
.account-header .tooltip[class*='position-bottom'] .tooltip-box {
    transform: translateY(2rem);
}

/* green staking CTA tooltip (StakingButton.vue .staking-feature-tip) */
.account-header .tooltip.staking-feature-tip,
.account-header .tooltip.staking-feature-tip .trigger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    z-index: 3;
}
.account-header .tooltip.staking-feature-tip .trigger::after {
    background-color: var(--nimiq-green);
    transform: translateY(calc(-1rem + 1px));
}
.account-header .tooltip.staking-feature-tip .tooltip-box {
    background: var(--nimiq-green-bg);
    color: white;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    transform: translateY(1rem);
}

/* ======== transaction-list/transaction-list.css ======== */
/* Nimiq TransactionList — wallet transaction-history rows with month headers.
   Port of wallet TransactionListItem.vue scoped styles (+ TransactionList.vue
   .month-label and the wallet button.reset global), all namespaced under
   .transaction-list. Requires the Nimiq legacy stylesheet
   (nimiq-style.min.css: html{font-size:8px}, --nimiq-* vars) and Fira Mono
   for the address font. Set the list width on .transaction-list. */

.transaction-list {
    /* Wallet theme vars used by the component (wallet themes.scss) */
    --bg-primary: var(--nimiq-white);
    --body-size: 2rem;
    --small-size: 1.75rem;
    --label-size: 1.75rem;
    --small-label-size: 1.5rem;
    --text-50: rgba(31, 35, 72, 0.5);
    --text-12: rgba(31, 35, 72, 0.12);

    color: var(--nimiq-blue);
}

/* --- Month header (TransactionList.vue .month-label) --- */

.transaction-list .month-label {
    display: flex;
    flex-direction: row;
    padding: 5rem 2rem 2rem;
    justify-content: space-between;
    align-items: center;
}

.transaction-list .month-label label {
    letter-spacing: 1.5px;
    font-size: var(--label-size);
    line-height: 2rem;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0.4;
}

/* --- Row (TransactionListItem.vue) --- */

.transaction-list .transaction svg {
    display: block;
}

.transaction-list .transaction {
    /* wallet button.reset global, merged in (same specificity as the layout
       rule below would otherwise fight it) */
    outline: none;
    font-family: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: inherit;
    text-align: inherit;

    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    padding: 1.5rem 1rem;
    border: 0;
    background: transparent;
    border-radius: .75rem;
    cursor: pointer;
    transition: background 400ms var(--nimiq-ease);
    font-size: var(--body-size);
}

.transaction-list .transaction:hover,
.transaction-list .transaction:focus {
    background: var(--nimiq-highlight-bg);
}

.transaction-list .transaction:hover .identicon .cashlink-or-swap,
.transaction-list .transaction:focus .identicon .cashlink-or-swap {
    border-color: #F2F2F4;
}

.transaction-list .transaction > * {
    margin: 0rem 1rem;
}

.transaction-list .transaction .date {
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0.4;
    flex-grow: 0;
    letter-spacing: 0.0125em;
    line-height: 1;
    flex-shrink: 0;
}

.transaction-list .transaction .date > .month {
    font-size: var(--small-label-size);
    letter-spacing: 0.0667em;
    text-transform: uppercase;
}

.transaction-list .transaction .date,
.transaction-list .transaction .pending,
.transaction-list .transaction .new,
.transaction-list .transaction .invalid {
    width: 3.75rem;
    text-align: center;
    flex-shrink: 0;
}

.transaction-list .transaction .identicon {
    position: relative;
    width: 6rem;
    height: 6rem;
    flex-shrink: 0;
}

.transaction-list .transaction .identicon img {
    width: 100%;
    height: 100%;
}

.transaction-list .transaction .identicon .cashlink-or-swap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: -0.5rem;
    right: -0.125rem;
    color: white;
    background: var(--nimiq-blue-bg);
    border: 0.375rem solid var(--bg-primary);
    transition: border-color 400ms var(--nimiq-ease);
    border-radius: 2rem;
    height: 2.75rem;
    width: 2.75rem;
}

.transaction-list .transaction .data {
    flex-grow: 1;
    overflow: hidden;
    line-height: 1.4;
}

.transaction-list .transaction .data .label,
.transaction-list .transaction .data .address {
    white-space: nowrap;
    -webkit-mask: linear-gradient(90deg, white, white calc(100% - 3rem), rgba(255,255,255, 0));
    mask: linear-gradient(90deg, white, white calc(100% - 3rem), rgba(255,255,255, 0));
}

.transaction-list .transaction .data .label {
    font-weight: 600;
}

.transaction-list .transaction .data .address {
    font-family: 'Fira Mono', monospace;
    word-spacing: -0.2em;
}

.transaction-list .transaction .data .time-and-message {
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--text-50);
    white-space: nowrap;
    -webkit-mask: linear-gradient(90deg, white, white calc(100% - 3rem), rgba(255,255,255, 0));
    mask: linear-gradient(90deg, white, white calc(100% - 3rem), rgba(255,255,255, 0));
}

.transaction-list .transaction .data .time-and-message .dot {
    margin: 0 0.875rem;
    opacity: 0.6;
}

/* --- Amounts column --- */

.transaction-list .transaction .amounts {
    --fiat-amount-height: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.4;
}

.transaction-list .transaction .amounts .amount {
    --size: var(--body-size);
    white-space: nowrap;
    font-weight: bold;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
}

.transaction-list .transaction .amounts > .fiat-amount {
    --size: var(--small-size);
    font-size: var(--size);
    font-weight: 600;
    opacity: 0.4;
    align-items: center;
    line-height: 1;
}

/* Fiat value still loading: breathing placeholder bar */
.transaction-list .transaction .amounts > .fiat-amount.fiat-loading {
    min-width: 4rem;
    height: 1.6rem;
    background-color: var(--text-12);
    border-radius: 0.5rem;
    animation: nq-tx-amount-loading-breathe 1s infinite;
}

@keyframes nq-tx-amount-loading-breathe {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.2; }
}

.transaction-list .transaction .amounts > .fiat-amount.fiat-unavailable {
    opacity: 0.3;
}

.transaction-list .transaction .amounts > * {
    white-space: nowrap;
    text-align: right;
}

/* Outgoing: dimmed plain amount with '-' prefix */
.transaction-list .transaction .amounts:not(.isIncoming):not(.signalling) .amount {
    opacity: 0.6;
}

.transaction-list .transaction .amounts:not(.isIncoming):not(.signalling) .amount::before {
    content: '-';
    margin-right: -0.1em;
}

/* Incoming: green tinted pill with '+' prefix */
.transaction-list .transaction .amounts.isIncoming .amount {
    color: var(--nimiq-green);
    background: rgba(33, 188, 165, 0.1);
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    margin-right: -0.75rem;
}

.transaction-list .transaction .amounts.isIncoming .amount::before {
    content: '+';
    margin-right: -0.1em;
}

/* ======== address-display/address-display.css ======== */
/* AddressDisplay — hardened grid build (from @nimiq/vue-components AddressDisplay.vue).
   The original used flex `width:33%` + space-between, which drifts when Fira Mono
   isn't loaded or the root font-size differs. This version locks the 3×3 with CSS Grid
   (the column count can never reflow) and self-imports Fira Mono so it can't fall back.
   Assumes the Nimiq style root font-size of 8px (html { font-size: 8px }); on a 16px-root
   modern page, set font-size/max-width in px or double the rem values. */
/* Fira Mono self-hosted above (offline) */

.address-display {
    display: grid;
    justify-items: center;
    width: 100%;
    box-sizing: content-box;
    color: rgba(31, 35, 72, .5); /* nimiq-blue with .5 opacity */
    font-size: 3rem;
    font-family: 'Fira Mono', monospace;
}

/* 3 columns at 33% + space-between exactly mirrors the upstream spacing, but grid
   pins the column count so a wide fallback glyph can never wrap or shove a block. */
.format-nimiq {
    grid-template-columns: repeat(3, 33%);
    justify-content: space-between;
    max-width: 28.25rem;
}

.format-ethereum {
    grid-template-columns: 1fr;
    max-width: 27rem;
}

.address-display.copyable:hover,
.address-display.copyable:focus,
.address-display.copyable.copied {
    font-weight: 500;
}

.chunk {
    margin: 0.875rem 0;
    line-height: 1.11;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap; /* a 4-char block never breaks */
}

.format-nimiq .chunk {
    text-transform: uppercase;
}

/* the &nbsp; renders zero-width so copy/paste keeps "NQ07 0000 …" intact */
.space {
    font-size: 0;
}

/* ======== amount/amount.css ======== */
/* Nimiq Amount — from @nimiq/vue-components Amount.vue */
.amount {
    white-space: nowrap;
}

/* Prefix '~ ' when the displayed value was rounded: <span class="amount approx"> */
.amount.approx::before {
    content: '~ ';
    opacity: 0.5;
}

/* ======== fiat-amount/fiat-amount.css ======== */
/* FiatAmount has no styles of its own upstream (FiatAmount.vue contains no <style> block).
   The .fiat-amount span inherits font-family, size and color from its surroundings —
   typically the Nimiq legacy stylesheet (css/legacy/nimiq-style.min.css) on the page. */
.fiat-amount {}

/* ======== identicon/identicon.css ======== */
/* Nimiq Identicon — from @nimiq/vue-components Identicon.vue.
   Size the identicon by setting width (and optionally height) on .identicon. */
.identicon {
    width: 10rem;
}

.identicon img {
    width: 100%;
    height: 100%;
}

/* ======== qr-code/qr-code.css ======== */
/* Nimiq QR code.
 * Upstream QrCode.vue ships NO component CSS — the visual is drawn entirely
 * onto the canvas by qr-creator. This file exists only as the extraction
 * convention placeholder; the .qr-code canvas needs no styling. */

/* ======== status-screen/status-screen.css ======== */
/* StatusScreen — Nimiq Hub full-card status overlay (loading/success/warning/error).
   Requires nimiq-style (legacy) for .nq-green-bg/.nq-blue-bg/.nq-orange-bg/.nq-red-bg gradients,
   .nq-h1/.nq-h2/.nq-text typography, .nq-icon sizing and .nq-button/.nq-link.
   All selectors namespaced under .status-screen. */

.status-screen {
    --status-screen-margin: .75rem;
    display: flex;
    flex-direction: column;
    border-radius: 0.625rem;
    width: calc(100% - 2 * var(--status-screen-margin));
    height: calc(100% - 2 * var(--status-screen-margin));
    margin: var(--status-screen-margin);
    z-index: 1000;
    position: relative;
    flex-grow: 1;
}

.status-screen .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    border-radius: 0.625rem;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.status-screen .icon-row,
.status-screen .status-row,
.status-screen .action-row {
    width: 100%;
    text-align: center;
}

.status-screen .success .icon-row {
    margin-top: 2rem;
}

.status-screen .status-row {
    --status-font-size: 2.5rem;
    margin-top: 2rem; /* Same as title margin-bottom, to equalize spacing to center icon */
    margin-bottom: 5rem;
    height: var(--status-font-size); /* 1 line of status text. For multiple lines, the text overflows to the top */
    position: relative;
}

.status-screen.small .status-row {
    margin-bottom: 2.5rem;
}

.status-screen .status {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0 2rem;
    font-size: var(--status-font-size);
    font-weight: normal;
    line-height: 1.2;
    opacity: 1;
}

.status-screen.small .status {
    /* on small layout center multiple lines vertically instead of overflowing to the top */
    transform: translateY(calc(50% - var(--status-font-size) / 2));
}

.status-screen .status-row.transition .status {
    transition: transform 500ms, opacity 500ms;
}

.status-screen .status-row.transition .status.current {
    transform: translateY(-100%);
    opacity: 0;
}

.status-screen.small .status-row.transition .status.current {
    /* on small layout move message less to avoid that it flies over half the screen */
    transform: translateY(calc(-1 * var(--status-font-size)));
}

.status-screen .status-row:not(.transition) .status.next {
    transform: translateY(100%);
    opacity: 0;
}

.status-screen .spacer {
    padding-top: 2rem;
}

.status-screen .success .spacer {
    padding-top: 6rem;
}

.status-screen .spacer.with-main-action {
    padding-bottom: 8rem;
}

.status-screen .spacer.with-alternative-action {
    margin-bottom: 2rem;
}

.status-screen .action-row {
    padding-bottom: 2rem;
}

.status-screen .action-row .nq-link {
    color: white;
    font-size: 2rem;
}

/* FADE transitions (used by the Vue component when switching states) */

.status-screen .fade-loading-leave-active,
.status-screen .fade-result-leave-active {
    transition: opacity 300ms;
}

.status-screen .fade-loading-enter-active,
.status-screen .fade-result-enter-active {
    transition: opacity 700ms 300ms;
}

.status-screen .fade-loading-enter,
.status-screen .fade-loading-enter-from,
.status-screen .fade-loading-leave-to,
.status-screen .fade-result-enter,
.status-screen .fade-result-enter-from,
.status-screen .fade-result-leave-to {
    opacity: 0;
}

/* Global (unscoped) part of upstream StatusScreen.vue, verbatim */

.status-screen .title {
    line-height: 1;
    margin-top: 4rem;
    white-space: pre-line;
}

.status-screen.small .title {
    margin-top: 3rem;
    margin-bottom: 2rem;
    font-size: 2.5rem;
}

.status-screen .icon-row .nq-icon {
    margin: auto;
}

.status-screen .success .nq-icon {
    font-size: 9rem;
}

.status-screen .warning .nq-icon {
    font-size: 10rem;
}

.status-screen .error .nq-icon {
    font-size: 12rem;
}

.status-screen .icon-row .title,
.status-screen .icon-row .message {
    margin-left: auto;
    margin-right: auto;
}

.status-screen .icon-row .title {
    max-width: 80%;
    line-height: 1.4;
}

.status-screen .message {
    max-width: 70%;
    opacity: 1;
}

.status-screen.exit-transition .success .icon-row {
    animation: success-title-slide 1s;
}

@keyframes success-title-slide {
    from { transform: translateY(8rem); }
    to   { transform: translateY(0); }
}

/* Optional entry animation that components can apply on the status-screen */
.status-screen.grow-from-bottom-button {
    position: absolute;
    animation: status-screen-grow-from-bottom-button .6s forwards cubic-bezier(0.25, 0, 0, 1);
    overflow: hidden;
}

@keyframes status-screen-grow-from-bottom-button {
    0%,
    20% {
        max-width: calc(100% - 12rem);
        max-height: 7.5rem;
        bottom: calc(4.25rem - var(--status-screen-margin));
        left: calc(6rem - var(--status-screen-margin));
        border-radius: 4rem;
    }

    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        max-width: calc(100% - 2 * var(--status-screen-margin));
        max-height: calc(100% - 2 * var(--status-screen-margin));
        bottom: 0;
        left: 0;
        border-radius: 0.5rem;
    }
}

/* ======== small-page/small-page.css ======== */
/* SmallPage — requires nimiq-style (legacy) for .nq-card, .nq-card-header, .nq-card-body */
.small-page {
    width: 100%;
    max-width: 52.5rem; /* 420px */
    height: 70.5rem; /* 564px */
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin: 0 1.25rem;
}

/* ======== page-header/page-header.css ======== */
/* Nimiq PageHeader (requires nimiq-style: .nq-card, .nq-card-header, .nq-h1, .nq-icon) */
.page-header {
    position: relative;
}

.page-header-back-button {
    font-size: 3rem;
    position: absolute;
    left: 4rem;
    padding-top: .25rem;
    opacity: 0.4;
    transition: opacity .3s var(--nimiq-ease), transform .3s var(--nimiq-ease);
    color: inherit;
}

.page-header-back-button svg {
    display: block;
}

.page-header-back-button:hover,
.page-header-back-button:focus {
    opacity: 1;
    transform: translate3D(-0.375rem, 0, 0);
    outline: none;
}

@media (max-width: 450px) {
    .page-header-back-button,
    /* Don't move button left on mobile */
    .page-header-back-button:hover,
    .page-header-back-button:focus {
        left: 3rem;
        transform: none;
    }
}

/* Enlarged hit area for the back button */
.page-header-back-button::after {
    content: '';
    display: block;
    position: absolute;
    left: -1.5rem;
    top: -1.5rem;
    right: -1.5rem;
    bottom: -1.5rem;
}

.progress-indicator {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    padding: 0.5rem;
    position: absolute;
    left: 0;
    top: 0;
}

.progress-indicator .indicator {
    flex-grow: 1;
    height: 0.5rem;
    border-radius: 0.25rem;
    background: #e5e5e5;
    margin: 0.5rem;
}

.progress-indicator .indicator.active {
    background: #24bdb6;
}

.page-header.has-progress-indicator h1,
.page-header.has-progress-indicator .page-header-back-button {
    margin-top: 1rem;
}

/* ======== page-body/page-body.css ======== */
/* page-body — scrollable content area of a card page.
   Requires the legacy framework stylesheet (nimiq-style.min.css) for the
   .nq-card-body padding rules, and a flex-column parent (e.g. .small-page). */
.page-body {
    flex-grow: 1;
    overflow-y: auto;
}

/* ======== page-footer/page-footer.css ======== */
/* PageFooter — bottom action area of a Nimiq page/card.
   Requires nimiq-style (nq-card-footer, nq-button). */
.page-footer {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-sizing: border-box;
}

.page-footer .nq-button {
    margin: 2rem 4.75rem 3rem;
}

/* ======== close-button/close-button.css ======== */
/* Nimiq CloseButton (requires nimiq-style: .nq-button-s, .nq-icon, --nimiq-ease).
   Upstream scoped CSS targeted the bare `button` element; namespaced here under
   .close-button so the snippet can coexist with other components on one page. */
.close-button {
    font-size: 3rem;
    padding: 0;
    background: none !important;
    height: 3rem;
}

/* Round hover/hit halo (the ::before hit-area box comes from .nq-button-s) */
.close-button::before {
    border-radius: 50%;
}

.close-button .nq-icon {
    opacity: .2;
    transition: opacity .3s var(--nimiq-ease);
}

.close-button:hover .nq-icon,
.close-button:active .nq-icon,
.close-button:focus .nq-icon {
    opacity: .4;
}

/* Optional: pin to the top-right corner of a positioned parent (modal/overlay) */
.close-button.top-right {
    position: absolute;
    top: 2rem;
    right: 2rem;
}

/* ======== address-input/address-input.css ======== */
/* AddressInput — Nimiq address entry field (static visual)
   Requires: nimiq-style (css vars --nimiq-blue, --nimiq-light-blue, --nimiq-ease; html { font-size: 8px })
   and the Fira Mono font. */

.address-input {
    --font-size: 3rem;
    --block-height: 4.125rem;
    --block-width: 8.5rem;
    --block-gap-v: 0.75rem;
    --block-gap-h: 1rem;

    contain: size layout paint style;
    width: calc(3 * var(--block-width) + 3 * var(--block-gap-h));
    height: calc(3 * var(--block-height) + 3.5 * var(--block-gap-v));
    position: relative;
    background: white;

    border-radius: 0.5rem;
    --border-color: rgba(31, 35, 72, 0.1); /* Based on Nimiq Blue */
    box-shadow: inset 0 0 0 1.5px var(--border-color);
    transition: box-shadow .2s ease, height 0.3s var(--nimiq-ease);
    overflow: hidden;
}

.address-input:hover {
    --border-color: rgba(31, 35, 72, 0.14); /* Based on Nimiq Blue */
}

.address-input:focus-within {
    --border-color: rgba(5, 130, 202, 0.4); /* Based on Nimiq Light Blue */
}

.address-input textarea {
    --line-height: calc(var(--block-height) + var(--block-gap-v));

    contain: size layout paint style;
    position: absolute;
    width: 100%;
    height: calc(3 * var(--line-height));
    line-height: var(--line-height);
    top: calc(var(--font-size) / 24 + var(--block-gap-v) / 2);
    left: calc(var(--font-size) / 24 * 5 + var(--block-gap-h) / 2);
    padding: 0;
    margin: 0;
    border: none;
    outline: unset !important;
    resize: none;
    overflow: hidden;
    z-index: 1;
    font-family: Fira Mono, 'monospace';
    font-size: var(--font-size);
    letter-spacing: calc(1.8rem - 0.6em);
    word-spacing: calc(var(--block-gap-h) / 2);
    color: var(--nimiq-blue);
    background: transparent;
    transition: color 0.2s ease;
}

.address-input textarea:focus {
    color: var(--nimiq-light-blue);
}

.address-input.display-as-nim-address textarea {
    text-transform: uppercase;
    /* Mask so text/selections are only visible within the blocks */
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 123"><rect x="-1" y="6" width="62" height="28"/><rect x="79" y="6" width="62" height="28"/><rect x="159" y="6" width="62" height="28"/><rect x="-1" y="47" width="62" height="28"/><rect x="79" y="47" width="62" height="28"/><rect x="159" y="47" width="62" height="28"/><rect x="-1" y="88" width="62" height="28"/><rect x="79" y="88" width="62" height="28"/><rect x="159" y="88" width="62" height="28"/></svg>');
}

@supports (mix-blend-mode: screen) {
    .address-input.display-as-nim-address textarea {
        color: black; /* the actual color is applied per block via the .color-overlay mix-blend-mode */
    }

    .address-input.display-as-nim-address textarea::selection {
        color: white;
        background: #561a51; /* with mix-blend-mode yields a color close to the default */
    }

    .address-input.display-as-nim-address textarea::-moz-selection {
        background: #411d68; /* with mix-blend-mode yields a color close to the default */
    }

    .address-input .color-overlay {
        contain: size layout paint style;
        position: absolute;
        width: calc(var(--block-width) - .5rem);
        height: calc(var(--block-height) - .5rem);
        mix-blend-mode: screen;
        z-index: 1;
        pointer-events: none;
    }
}

.address-input ::-webkit-input-placeholder {
    opacity: .6;
    transition: color .2s var(--nimiq-ease);
}
.address-input ::-moz-placeholder {
    opacity: .6;
    transition: color .2s var(--nimiq-ease);
}
.address-input ::placeholder {
    opacity: .6;
    transition: color .2s var(--nimiq-ease);
}

.address-input textarea:focus::-webkit-input-placeholder {
    color: var(--nimiq-light-blue);
}
.address-input textarea:focus::-moz-placeholder {
    color: var(--nimiq-light-blue);
}
.address-input textarea:focus::placeholder {
    color: var(--nimiq-light-blue);
}

.address-input .grid {
    contain: size layout paint style;
    position: absolute;
    top: calc(var(--font-size) / 24 * 8 + var(--block-gap-v) / 2);
    left: calc(var(--font-size) / 24 * 5 + var(--block-gap-h) / 2);
    stroke: var(--border-color);
    transition: stroke .2s ease, opacity 0.2s ease;
}

.address-input textarea:focus ~ .grid {
    opacity: 0.5;
}

/* ======== copyable/copyable.css ======== */
/* Copyable — Nimiq legacy style
 * Requires nimiq-style.min.css (defines --nimiq-light-blue, --nimiq-light-blue-bg,
 * --nimiq-ease and the 8px rem base) and the Mulish font.
 * Markup:
 *   <div class="copyable" tabindex="0">
 *     <div class="background"></div>
 *     YOUR CONTENT
 *     <div class="tooltip">Copied</div>
 *   </div>
 * Toggle the "copied" class on .copyable for ~800ms after copying to show the tooltip.
 */

.copyable {
    position: relative;
    padding: 1.5rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .3s var(--nimiq-ease);
}

.copyable:hover,
.copyable:focus,
.copyable.copied {
    color: var(--nimiq-light-blue) !important;
    outline: none;
}

.copyable .background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: var(--nimiq-light-blue-bg);
    border-radius: .5rem;
    opacity: 0;
    transition: opacity .3s var(--nimiq-ease);
}

.copyable:hover .background,
.copyable:focus .background,
.copyable.copied .background {
    opacity: .07;
}

.copyable .tooltip {
    pointer-events: none;
    font-size: 1.75rem;
    padding: 0.75rem 1rem;
    background: var(--nimiq-light-blue-bg);
    position: absolute;
    top: -5rem;
    left: 50%;
    margin-left: -3.75rem; /* half width of tooltip */
    border-radius: .5rem;
    color: white;
    font-weight: 600;
    line-height: 1.1;
    box-shadow:
        0px 2px 2.5px rgba(31, 35, 72, 0.02),
        0px 7px 8.5px rgba(31, 35, 72, 0.04),
        0px 18px 38px rgba(31, 35, 72, 0.07);

    /* Animated styles */
    transform: translate3d(0, 1rem, 0);
    opacity: 0;

    transition: transform .3s var(--nimiq-ease), opacity .3s var(--nimiq-ease);
    transition-delay: .2s;
}

.copyable .tooltip::after {
    content: '';
    display: block;
    position: absolute;
    width: 2.25rem;
    height: 2rem;
    left: calc(50% - 1.125rem);
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 18 16" xmlns="http://www.w3.org/2000/svg"><path d="M9 7.12c-.47 0-.93.2-1.23.64L3.2 14.29A4 4 0 0 1 0 16h18a4 4 0 0 1-3.2-1.7l-4.57-6.54c-.3-.43-.76-.64-1.23-.64z" fill="white"/></svg>');
    z-index: 1000; /* move above tooltip-box's box-shadow */
    background: #1A6AD2;
    transform: rotate(180deg) translateY(-0.75rem);
}

.copyable.copied .tooltip {
    transition-delay: 0s;
    pointer-events: all;
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ======== amount-input/amount-input.css ======== */
/* Nimiq AmountInput — requires @nimiq/style (nq-input) and the Mulish font. */

.amount-input {
    display: flex;
    align-items: baseline;
    justify-content: center;
    width: 100%;
    font-size: 8rem;
    color: rgba(31, 35, 72, 0.5); /* Based on Nimiq Blue */
    transition: color .2s var(--nimiq-ease);
}

.amount-input.has-value {
    color: var(--nimiq-blue);
}

.amount-input.focussed {
    color: var(--nimiq-light-blue);
}

.amount-input form {
    display: flex;
}

.amount-input .label-input {
    position: relative;
    overflow: hidden; /* limit width-finder width to parent available width */
    max-width: 100%;
    height: 100%;
}

.amount-input .width-finder {
    position: absolute;
    color: transparent;
    pointer-events: none;
    user-select: none;
    white-space: pre;
    padding: 1.25rem;
}

.amount-input .full-width {
    width: 1000px;
}

.amount-input input {
    padding: 0 0.25rem;
    max-width: 100%;
    text-align: center;
    transition: width 50ms ease-out, color .2s var(--nimiq-ease);
}

.amount-input .nim {
    margin-left: 1rem;
    font-size: 4rem;
    font-weight: 700;
    line-height: 4.5rem;
}

/* ======== password-box/password-box.css ======== */
/* Nimiq password-box — the Keyguard PIN/password unlock box. Requires
   css/legacy/nimiq-style.min.css (nq-input, nq-button, nq-light-blue-bg, --nimiq-ease).
   Verbatim from Keyguard PasswordBox.css + PasswordInput.css + the .actionbox and
   loading-spinner rules from common.css; the hexagon keyframes are prefixed
   password-box-* and upstream's global loading gate (body.loading + .page:target) is
   scoped to a .loading class on the box itself. States:
     .input-eligible  enough characters entered; input rises, submit button fades in
     .loading         everything hides except the hexagon spinner (while unlocking)
     .hide-input      no password required; button only
     eye-button .visible  password shown as plain text (input type="text") */

/* common.css .actionbox — verbatim (single-class selector so the .password-box padding
   below overrides it by order, as upstream) */
.password-box {
    width: 100%;
    padding: 1.25rem;
    border-radius: 0.625rem;
    text-align: center;
}

/* PasswordInput.css — verbatim */
.password-box .password-input {
    width: 100%;
    margin: 2rem 0;
}

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

.password-box .password-input input {
    padding: 0 2.75rem;
    box-shadow: none !important;
    font-size: 3rem;
    letter-spacing: 1.25rem;
    color: inherit !important;
}

.password-box .password-input input::placeholder {
    letter-spacing: 1.25rem;
    color: rgba(255, 255, 255, 0.5) !important;
}

.password-box .password-input input[type="text"] {
    letter-spacing: 0.25rem;
}

.password-box .password-input .eye-button {
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 3rem;
    height: 3rem;
    background-size: 3rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity .3s ease;
}

.password-box .password-input .eye-button:hover {
    opacity: 1;
}

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

/* PasswordBox.css — verbatim (the swap-authorization overlay and the PasswordSetterBox
   "SETTER" section are omitted; their elements aren't part of the plain PasswordBox) */
.password-box {
    position: relative;
    padding: 5.5rem 1.25rem 1.25rem;
}

.password-box .prompt {
    margin-top: -2.75rem;
    line-height: 1;
    pointer-events: none;
}

.password-box .password-input {
    margin: 5rem 0 4.5rem 0;
}

.password-box .password-input .input-container {
    position: static;
}

.password-box .password-input .input-wrapper {
    transition: transform 300ms var(--nimiq-ease)!important;
}

.password-box.input-eligible .password-input .input-wrapper {
    transform: translate(0, -3.5rem);
}

.password-box .password-input input {
    text-align: center;
    width: 100%;
}

.password-box .password-input .eye-button {
    top: 1.5rem;
    left: 2rem;
}

.password-box.hide-input .prompt,
.password-box.hide-input .password-input {
    display: none;
    margin: 0;
}

.password-box .submit {
    margin: -6.375rem auto 0.75rem;
    opacity: 0;
    transition:
        transform 450ms cubic-bezier(.25,0,0,1), /* From @nimiq/style */
        box-shadow 450ms cubic-bezier(.25,0,0,1), /* From @nimiq/style */
        color .3s cubic-bezier(.25,0,0,1), /* From @nimiq/style */
        opacity 150ms var(--nimiq-ease);
    pointer-events: none;
}

.password-box.input-eligible .submit,
.password-box.hide-input .submit {
    opacity: 1;
    transition-delay: 75ms;
    pointer-events: all;
}

.password-box .skip {
    opacity: 1;
    margin-top: -3.5rem;
}

.password-box.input-eligible .skip {
    opacity: 0;
    pointer-events: none;
}

/* common.css loading-spinner rules — verbatim, keyframes prefixed */
.password-box .loading-spinner {
    position: absolute;
    display: none;
    left: calc(50% - 3.375rem);
    bottom: calc(50% - 3.125rem);
}

.password-box.hide-input .loading-spinner {
    bottom: 3rem;  /* 2rem button margin + 1 rem to center */
    color: white;
}

.password-box .loading-spinner .big-hex {
    stroke-dashoffset: -40.5;
    animation: password-box-big-hex 4s cubic-bezier(0.76, 0.29, 0.29, 0.76) infinite;
}

.password-box .loading-spinner .small-hex {
    stroke-dashoffset: 13;
    animation: password-box-small-hex 4s cubic-bezier(0.76, 0.29, 0.29, 0.76) infinite;
}

@keyframes password-box-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 password-box-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 }
}

@media (prefers-reduced-motion: reduce) {
    /* the spinner freezes at its stylesheet dash offsets (the 0% keyframes) */
    .password-box .loading-spinner .big-hex,
    .password-box .loading-spinner .small-hex {
        animation: none;
    }
}

/* Loading gate — upstream common.css flips this via body.loading + .page:target:
       body.loading .password-box > *:not(.loading-spinner) { visibility: hidden }
       body.loading .page:target .password-box > .loading-spinner { display: flex; z-index: 1 }
   scoped here to a .loading class on the box itself. */
.password-box.loading > *:not(.loading-spinner) {
    visibility: hidden;
}

.password-box.loading > .loading-spinner {
    display: flex;
    z-index: 1;
}

/* ======== status-alert/status-alert.css ======== */
/* Status Alert — the real Nimiq alert/callout block.
   Source: nimiq-ui packages/nimiq-vitepress-theme/src/assets/github-callouts.css
   (.custom-block.github-alert), renamed/namespaced under .nq-status-alert.
   Porting notes:
   - rem converted to px at the upstream 16px root (1rem 1.25rem -> 16px 20px),
     and font-size: 16px pinned on the root so the block renders identically
     under @nimiq/style's html { font-size: 8px }.
   - nimiq-css --colors-* tokens inlined (light-mode halves of light-dark()
     from nimiq-css/src/css/colors.css) since the legacy framework lacks them.
   - The upstream docs full-bleed quirk (translateX(-8px) + width +16px) is
     kept verbatim; delete that pair if you don't want the 8px bleed. */

.nq-status-alert {
  /* nimiq-css color tokens (light mode), scoped to the component */
  --colors-blue:       oklch(0.5849 0.1438 244.29);
  --colors-blue-400:   oklch(0.9545 0.0167 236.69);
  --colors-blue-500:   oklch(0.9109 0.0327 232.24);
  --colors-green:      oklch(0.6932 0.1245 178.48);
  --colors-green-400:  oklch(0.9637 0.017 187.9);
  --colors-green-500:  oklch(0.9307 0.034 185.2);
  --colors-orange:     oklch(0.7387 0.179 56.67);
  --colors-orange-400: oklch(0.951 0.0221 74.1);
  --colors-orange-500: oklch(0.9396 0.0436 71.7);
  --colors-red:        oklch(0.598 0.1886 30.3);
  --colors-red-400:    oklch(0.9544 0.0166 26.65);
  --colors-red-500:    oklch(0.9112 0.0328 27.11);
  --colors-purple:     oklch(0.4629 0.1027 296.59);
  --colors-purple-400: oklch(0.9494 0.0083 301.35);
  --colors-purple-500: oklch(0.8984 0.0181 300.04);

  background: var(--bg-color);
  --margin-min-em: 1.5;
  --margin-max-em: 2;
  padding: 16px 20px;            /* upstream: 1rem 1.25rem @ 16px root */
  margin-top: calc(var(--margin-min-em) * 1em);
  margin-bottom: calc(var(--margin-max-em) * 1em);
  border-radius: 8px;
  outline: 1.5px solid var(--ring-color);
  outline-offset: -1.5px;
  font-size: 16px;               /* pin the upstream docs base size */
  font-weight: 600;
  transform: translateX(-8px);   /* upstream docs full-bleed quirk */
  width: calc(100% + 16px);
  color: var(--text-color);
}

.nq-status-alert .alert-title {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0;
  margin-bottom: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: var(--label-color);
}

.nq-status-alert .alert-title::before {
  content: '';
  position: relative;
  display: inline-block;
  mask: var(--icon) no-repeat 100% 100%;
  background-color: var(--text-color);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: inherit;
  width: 1em;
  height: 1em;
}

/* note = info (blue) */
.nq-status-alert.note {
  --label-color: color-mix(in oklch, var(--colors-blue) 70%, transparent);
  --text-color: var(--colors-blue);
  --bg-color: var(--colors-blue-400);
  --ring-color: var(--colors-blue-500);
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 17"><path stroke="currentColor" stroke-width="1.5" d="m16.824 7.603-3.335-5.92A1.33 1.33 0 0 0 12.335 1H5.666c-.475 0-.915.26-1.153.683l-3.335 5.92a1.397 1.397 0 0 0 0 1.367l3.335 5.92a1.325 1.325 0 0 0 1.153.683h6.668a1.323 1.323 0 0 0 1.154-.683l3.334-5.92c.24-.424.24-.943.002-1.367Z"/><path fill="currentColor" d="M10 12a1 1 0 1 1-2 0V9a1 1 0 0 1 2 0v3Z"/><rect width="2" height="2" x="10" y="7" fill="currentColor" rx="1" transform="rotate(-180 10 7)"/></svg>');
}

/* important (purple) */
.nq-status-alert.important {
  --label-color: color-mix(in oklch, var(--colors-purple) 80%, transparent);
  --text-color: var(--colors-purple);
  --bg-color: var(--colors-purple-400);
  --ring-color: var(--colors-purple-500);
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 17"><path stroke="currentColor" stroke-width="1.5" d="m1.178 8.97 3.334 5.92a1.332 1.332 0 0 0 1.156.683h6.667c.476 0 .916-.26 1.154-.683l3.334-5.92a1.397 1.397 0 0 0 0-1.366l-3.334-5.92A1.324 1.324 0 0 0 12.336 1H5.667a1.324 1.324 0 0 0-1.153.683L1.18 7.603c-.24.424-.24.943-.002 1.367Z"/><path fill="currentColor" d="M8.002 5.573a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0v-3Z"/><rect width="2" height="2" x="8.002" y="10.573" fill="currentColor" rx="1"/></svg>');
}

/* warning (orange) */
.nq-status-alert.warning {
  --label-color: color-mix(in oklch, var(--colors-orange) 70%, transparent);
  --text-color: var(--colors-orange);
  --bg-color: var(--colors-orange-400);
  --ring-color: var(--colors-orange-500);
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 9 12"><path fill="currentColor" d="M3.818.074a.658.658 0 0 0-.756.108.616.616 0 0 0-.12.736 5.017 5.017 0 0 1 .02 4.628.127.127 0 0 1-.113.063.13.13 0 0 1-.112-.066 2.766 2.766 0 0 1-.288-.789.376.376 0 0 0-.248-.28.393.393 0 0 0-.373.06A4.349 4.349 0 0 0 .327 6.727a4.256 4.256 0 0 0 .07 2.637 3.94 3.94 0 0 0 1.547 1.964 4.09 4.09 0 0 0 2.443.669c2.178 0 3.7-1.08 4.18-2.96.71-2.773-1.033-7.04-4.749-8.962Zm2.44 8.993a1.658 1.658 0 0 1-.618 1.057 1.734 1.734 0 0 1-1.189.365c-.41 0-.809-.14-1.127-.4a1.705 1.705 0 0 1-.6-1.014.246.246 0 0 1 .076-.226.259.259 0 0 1 .236-.063c.258-.004.51-.07.736-.195.225-.123.414-.3.55-.514a1.133 1.133 0 0 0 .234-1.238.247.247 0 0 1 .03-.286.259.259 0 0 1 .284-.072c.494.219.897.592 1.148 1.06a2.33 2.33 0 0 1 .24 1.525Z"/></svg>');
}

/* tip = success (green) */
.nq-status-alert.tip {
  --label-color: color-mix(in oklch, var(--colors-green) 70%, transparent);
  --text-color: var(--colors-green);
  --bg-color: var(--colors-green-400);
  --ring-color: var(--colors-green-500);
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 11 14"><path stroke="currentColor" d="M5.5 1.002C3.015 1.002 1 2.921 1 5.288c0 1.223.761 2.327 1.727 3.108.52.42.898 1.02.898 1.689 0 .506.41.917.918.917h1.914c.507 0 .918-.41.918-.917 0-.67.378-1.268.898-1.69C9.24 7.616 10 6.512 10 5.289c0-2.367-2.015-4.286-4.5-4.286Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7 13.002H4"/></svg>');
}

/* caution = error (red) */
.nq-status-alert.caution {
  --label-color: color-mix(in oklch, var(--colors-red) 70%, transparent);
  --bg-color: var(--colors-red-400);
  --text-color: var(--colors-red);
  --ring-color: var(--colors-red-500);
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12"><path fill="currentColor" d="M9.499 8.8c0-.47.12-.93.35-1.34l1.18-2.1a.75.75 0 0 0 .1-.59.79.79 0 0 0-.37-.48.87.87 0 0 0-.63-.1.82.82 0 0 0-.51.36l-1.5 2.23.89-4.6a.74.74 0 0 0-.09-.62.85.85 0 0 0-.87-.36.85.85 0 0 0-.54.35c-.06.1-.1.2-.11.3l-.93 3.89V.78c0-.2-.09-.4-.24-.55a.85.85 0 0 0-.59-.23.85.85 0 0 0-.58.23.76.76 0 0 0-.24.55v4.96l-.93-4.08a.8.8 0 0 0-.66-.64.87.87 0 0 0-.63.13.8.8 0 0 0-.34.53c-.02.1 0 .2.02.31l.89 5.84-1.64-1.36a.86.86 0 0 0-1.16.05.76.76 0 0 0 .04 1.1l2.9 3.65a2.49 2.49 0 0 0 1.79.73h1.93c1.95 0 2.47-1.45 2.47-3.2Z"/></svg>');
}

.nq-status-alert p {
  margin-top: 0;
  margin-bottom: 0.5em;
}

.nq-status-alert p:last-child {
  margin-bottom: 0;
}

.nq-status-alert p a {
  color: currentColor;
  text-decoration: underline;
}

.nq-status-alert p pre,
.nq-status-alert p code {
  color: currentColor;
  background-color: var(--ring-color);
}

.nq-status-alert p code {
  font-size: 0.95em;
}

/* ======== account-list/account-list.css ======== */
/* Nimiq AccountList — identicon + label + balance account-chooser rows.
   Port of @nimiq/vue-components AccountList.vue (+ its Account/Identicon/Amount
   row internals), all selectors namespaced under .account-list.
   Requires the Nimiq legacy stylesheet (nimiq-style.min.css) for the
   --nimiq-* CSS variables and .nq-icon sizing. Row layout only (the list
   never renders Account's column/cashlink variants). */

.account-list {
    flex-grow: 1;
}

/* --- Row entries (AccountList.vue) --- */

.account-list .account-entry {
    display: block;
    transition: background-color .3s var(--nimiq-ease);
    border-radius: 0.5rem;
    margin: 0.5rem 2rem;
    position: relative;
    color: inherit;
    text-decoration: none;
}

.account-list .account-entry .identicon img {
    transform: scale(0.9);
    transition: transform .45s var(--nimiq-ease);
}

.account-list .account-entry .label,
.account-list .account-entry .balance {
    transition: opacity .3s var(--nimiq-ease), color .3s var(--nimiq-ease), margin-right .45s var(--nimiq-ease);
}

.account-list .account-entry .caret,
.account-list .account-entry .tooltip {
    position: absolute;
    right: 2rem;
    top: 3.625rem;
    font-size: 2rem;
}

.account-list .account-entry .caret {
    transform: translateX(3rem);
    opacity: 0;
    transition: transform .45s var(--nimiq-ease), opacity .35s .1s var(--nimiq-ease);
}

.account-list a.account-entry:focus {
    outline: none;
}

.account-list a.account-entry:focus::after {
    content: "";
    position: absolute;
    left: -0.625rem;
    top: -0.625rem;
    right: -0.625rem;
    bottom: -0.625rem;
    border: 0.25rem solid rgba(5, 130, 202, 0.5); /* Based on Nimiq Light Blue */
    border-radius: 1rem;
    pointer-events: none;
}

.account-list a.account-entry:hover,
.account-list a.account-entry:focus {
    background-color: rgba(31, 35, 72, 0.06); /* Based on Nimiq Blue */
}

.account-list a.account-entry:hover .identicon img,
.account-list a.account-entry:focus .identicon img {
    transform: scale(1);
}

.account-list a.account-entry:hover .label,
.account-list a.account-entry:hover .balance,
.account-list a.account-entry:focus .label,
.account-list a.account-entry:focus .balance {
    opacity: 1;
}

.account-list a.account-entry:hover .balance,
.account-list a.account-entry:focus .balance,
.account-list .account-entry.has-tooltip .balance {
    margin-right: 3rem; /* make space for caret or tooltip trigger */
}

.account-list a.account-entry:hover .balance,
.account-list a.account-entry:focus .balance {
    color: var(--nimiq-green);
}

.account-list a.account-entry:hover .caret,
.account-list a.account-entry:focus .caret {
    transform: translateX(0);
    opacity: 0.23;
}

.account-list .account-entry.disabled {
    cursor: not-allowed;
}

.account-list .account-entry.disabled .identicon,
.account-list .account-entry.disabled .label,
.account-list .account-entry.disabled .balance {
    opacity: 0.2;
}

.account-list .account-entry.highlight-insufficient-balance .balance {
    color: var(--nimiq-red);
    opacity: 1;
}

/* --- Row content (Account.vue, row layout) --- */

.account-list .account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 2rem;
    box-sizing: border-box;
    flex-shrink: 0;
    font-size: 2rem;
    line-height: 1.2;
    overflow: hidden; /* hide chevron right on hover */
    width: 100%;
    flex-direction: row;
}

.account-list .identicon-and-label {
    display: flex;
    align-items: center;
    flex-direction: row;
    overflow: hidden;
    min-width: 5.625rem;
    flex-grow: 1;
}

.account-list .identicon {
    flex-shrink: 0;
    position: relative;
    width: 5.625rem;
    height: 5.625rem;
    margin-right: 1.5rem;
}

/* Identicon.vue */
.account-list .identicon img {
    width: 100%;
    height: 100%;
}

.account-list .label {
    overflow: hidden;
    opacity: 0.7;
    padding-left: 1rem;
    white-space: nowrap;
    font-weight: 600;
    mask-image: linear-gradient(90deg , white, white calc(100% - 3rem), rgba(255,255,255, 0));
    flex-grow: 1;
}

.account-list .label.address-font {
    font-family: "Fira Mono", "Andale Mono", monospace;
    font-weight: normal;
    text-transform: uppercase;
}

.account-list .balance {
    flex-shrink: 0;
    margin-left: 1rem;
    font-weight: bold;
    opacity: 0.7;
}

/* Amount.vue */
.account-list .amount {
    white-space: nowrap;
}