/* Visual layer for the existing wallet. All routes and business controls stay shared. */
:root {
    color-scheme: dark;
    --bg: #101212;
    --bg-2: #101212;
    --panel: #171a1a;
    --panel-strong: #1b1f1f;
    --panel-soft: #202525;
    --line: #2b3030;
    --line-strong: #545f60;
    --text: #f4f6f6;
    --muted: #9da6aa;
    --cyan: #72dfdf;
    --blue: #72dfdf;
    --green: #5cdda0;
    --red: #f08088;
    --pink: #f08088;
    --violet: #b6b6cb;
    --amber: #e5bd78;
    --primary: #f0f4f4;
    --on-primary: #121818;
    --accent-soft: #193435;
    --income-soft: #163427;
    --danger-soft: #3a2025;
    --shadow: 0 12px 40px #00000025;
    --radius: 8px;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --bg-2: #ffffff;
    --panel: #f7f8fa;
    --panel-strong: #ffffff;
    --panel-soft: #f0f2f5;
    --line: #e9ebef;
    --line-strong: #c6cbd3;
    --text: #14191f;
    --muted: #68717e;
    --cyan: #246bfd;
    --blue: #246bfd;
    --green: #098553;
    --red: #c63f52;
    --pink: #c63f52;
    --violet: #6562aa;
    --amber: #906211;
    --primary: #246bfd;
    --on-primary: #ffffff;
    --accent-soft: #eef4ff;
    --income-soft: #e5f7ef;
    --danger-soft: #fff0f2;
    --shadow: 0 12px 40px #181d2810;
}

html { scrollbar-gutter: stable; scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body::before { display: none; }
*, *::before, *::after { letter-spacing: 0; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:disabled { opacity: .48; cursor: wait; }
a { text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
}
.ui-icon { width: 22px; height: 22px; display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.icon-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 44px; padding: 10px;
    border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
}
.icon-button:hover { color: var(--text); background: var(--panel-soft); }
.icon-button[aria-busy="true"] .ui-icon { animation: wallet-spin 1s linear infinite; }
@keyframes wallet-spin { to { transform: rotate(360deg); } }

/* One navigation geometry on every page and in both themes. */
:root .top-nav {
    height: 88px; min-height: 88px; padding: 0 40px;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    gap: 20px; border-bottom: 1px solid var(--line); background: var(--bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
:root .brand { gap: 12px; font-weight: 700; }
:root .brand-mark { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 8px; box-shadow: none; }
.brand-type { display: grid; gap: 1px; line-height: 1.2; }
.brand-type strong { font-size: 23px; font-weight: 750; }
.brand-type small { font-size: 10px; color: var(--muted); font-weight: 650; }
:root .nav-center { display: flex; gap: 6px; }
:root .nav-link { width: 104px; min-width: 104px; max-width: 104px; height: 44px; min-height: 44px; padding: 0 4px; border: 0; border-radius: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; background: transparent; }
:root .nav-link:hover { color: var(--text); background: var(--panel); }
:root .nav-link.active { color: var(--cyan); background: var(--accent-soft); box-shadow: none; }
.nav-user { gap: 4px; }
.nav-user .account-name { font-size: 12px; margin-right: 12px; max-width: 128px; }
.nav-user .icon-button:last-child { color: var(--text); }
:root .mobile-nav { display: none; }
:root .page-wrap { width: min(1160px, calc(100% - 80px)); padding: 32px 0 64px; }
:root .page-wrap > section + section { margin-top: 28px; }
:root .page-hero { align-items: center; margin-bottom: 28px; gap: 16px; }
:root .page-hero h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.35; text-shadow: none; }
:root .page-hero p { font-size: 13px; margin-top: 6px; }
:root .hero-address { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: transparent; border-radius: 0; font-size: 12px; }
.hero-address .ui-icon { width: 16px; height: 16px; }

/* Wallet overview, icon actions and one ledger surface. */
.wallet-home { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.35fr); grid-template-areas: "overview activity" "shortcuts activity" "facts activity"; column-gap: 64px; row-gap: 24px; align-items: start; padding: 22px 0; }
.wallet-overview { grid-area: overview; min-width: 0; }
.balance-heading { display: flex; align-items: center; gap: 2px; color: var(--muted); min-height: 28px; font-size: 14px; }
.balance-heading .icon-button { width: 38px; height: 36px; flex-basis: 38px; }
.balance-heading .ui-icon { width: 20px; height: 20px; }
.wallet-balance { display: flex; align-items: baseline; gap: 12px; min-width: 0; margin: 8px 0 6px; flex-wrap: wrap; }
.wallet-balance #balance-main { display: block; font-size: 52px; font-weight: 720; color: var(--text); margin: 0; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wallet-balance #balance-main.compact-value { font-size: 34px; }
.wallet-balance > span { font-size: 18px; color: var(--muted); }
.wallet-identity { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px; min-height: 36px; }
.wallet-identity .icon-button { width: 36px; height: 36px; flex-basis: 36px; padding: 8px; }
.wallet-identity .ui-icon { width: 18px; height: 18px; }
.wallet-primary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
:root .wallet-primary-actions .btn, :root .wallet-primary-actions .btn.primary { height: 56px; min-height: 56px; font-size: 18px; font-weight: 650; gap: 12px; border-radius: 8px; }
[data-theme="dark"] .wallet-primary-actions .btn:not(.primary) { background: transparent; border-color: var(--line-strong); }
.wallet-primary-actions .ui-icon { width: 26px; height: 26px; }
.wallet-shortcuts { grid-area: shortcuts; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.wallet-shortcuts a { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; min-height: 76px; color: var(--text); padding: 6px 0; border-radius: 8px; }
.wallet-shortcuts a:hover { background: var(--panel); }
.wallet-shortcuts .ui-icon { width: 28px; height: 28px; }
.wallet-shortcuts span { font-size: 13px; white-space: nowrap; }
.wallet-facts { grid-area: facts; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); padding: 22px 0; gap: 0; }
.wallet-facts > div { min-width: 0; padding: 0 14px; border-left: 1px solid var(--line); text-align: center; }
.wallet-facts > div:first-child { border-left: 0; padding-left: 0; }
.wallet-facts > div:last-child { padding-right: 0; }
.wallet-facts span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.wallet-facts strong { display: block; font-size: 21px; font-weight: 650; overflow-wrap: anywhere; }
.wallet-facts small { color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.wallet-activity { grid-area: activity; min-width: 0; border-left: 1px solid var(--line); padding-left: 40px; }
:root .wallet-activity .panel-head { flex-direction: row; align-items: center; margin-bottom: 8px; min-height: 44px; }
.activity-tools { display: flex; align-items: center; gap: 8px; }
:root .activity-tools .text-link { margin: 0; gap: 4px; font-size: 14px; font-weight: 500; }
.activity-tools .text-link .ui-icon { width: 16px; height: 16px; }
:root #recent-list, :root #history-list { gap: 0; display: block; }
:root .ledger-summary { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; }
:root .ledger-summary:hover { background: var(--panel); transform: none; }
.transaction-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--panel-soft); color: var(--text); }
.income .transaction-icon { background: var(--income-soft); color: var(--green); }
.transaction-icon .ui-icon { width: 22px; height: 22px; }
:root .ledger-summary-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; }
.transaction-label { min-width: 0; }
:root .ledger-summary strong { font-size: 15px; font-weight: 600; line-height: 1.5; }
:root .ledger-summary-main span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.transaction-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .ledger-amount { text-align: right; min-width: 0; }
:root .ledger-amount strong { white-space: nowrap; }
:root .ledger-amount.positive strong { color: var(--green); }
:root .ledger-amount.negative strong { color: var(--text); }
.transaction-chevron { color: var(--muted); grid-column: 3; grid-row: 1; }
.transaction-chevron .ui-icon { width: 16px; height: 16px; }
:root .ledger-summary-foot { display: flex; grid-column: 2 / -1; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; margin: 0; }
#recent-list .ledger-summary-foot, #recent-list .transaction-balance { display: none; }
:root #recent-list .ledger-summary { min-height: 86px; }
:root .pending-label { display: inline-block; color: var(--amber); font-size: 10px; font-weight: 500; margin-left: 6px; }
.pending .transaction-icon { background: var(--panel-soft); color: var(--amber); }
.wallet-empty { display: grid; justify-items: center; gap: 12px; padding: 56px 12px; }
.wallet-empty .ui-icon { width: 32px; height: 32px; }
.wallet-empty strong { font-weight: 500; }
[data-theme="dark"] .wallet-shortcuts .ui-icon { color: var(--cyan); }

/* Shared controls use semantic tokens, including the mobile navigation. */
:root .btn, :root .ghost-icon { height: 44px; min-height: 44px; padding: 0 18px; font-size: 14px; font-weight: 600; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--text); box-shadow: none; line-height: 1.3; }
:root .btn:hover, :root .ghost-icon:hover { border-color: var(--line-strong); background: var(--panel); transform: none; }
:root .btn.primary, :root .btn.full, :root .auth-tabs button.active { height: 48px; min-height: 48px; background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
:root .btn.primary:hover { opacity: .87; }
:root .btn.small { height: 36px; min-height: 36px; padding: 0 12px; font-size: 12px; }
:root .btn.danger { background: var(--danger-soft); color: var(--red); border-color: transparent; }
:root .text-link { display: inline-flex; align-items: center; color: var(--cyan); font-weight: 500; }
:root .panel-head .text-link { margin-top: 0; }
:root .input, :root .select, :root .textarea { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; min-height: 48px; padding: 12px 14px; font-size: 15px; font-weight: 400; }
:root .input:focus, :root .select:focus, :root .textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--accent-soft); }
:root[data-theme="light"] .panel .input, :root[data-theme="light"] .panel .select, :root[data-theme="light"] .panel .textarea { background: var(--bg); border-color: #d7dce4; }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: .8; }
:root .form-grid { gap: 20px; }
:root .form-grid label { font-weight: 500; gap: 8px; }
:root .field-hint { font-weight: 400; font-size: 12px; }
:root .field-hint.strong { color: var(--amber); }
:root .segmented { display: inline-flex; gap: 4px; padding: 4px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; width: fit-content; }
:root .segmented .btn { min-width: 102px; border-color: transparent; background: transparent; color: var(--muted); }
:root .segmented .btn[aria-pressed="true"] { background: var(--bg); color: var(--text); border-color: var(--line); }
:root .panel, :root .panel.subtle { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 24px 0; box-shadow: none; backdrop-filter: none; }
:root .grid > .panel { padding: 24px; background: var(--panel); border: 0; border-radius: 8px; }
:root .panel .panel { padding: 20px 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
:root .panel-title { font-size: 19px; font-weight: 650; line-height: 1.4; }
:root .panel-head { gap: 16px; margin-bottom: 20px; }
:root .eyebrow { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
:root .grid, :root .block-list { gap: 24px; }
:root .stat-card { min-height: 104px; border-radius: 8px; border: 1px solid var(--line); box-shadow: none; background: var(--panel); padding: 18px; }
:root .stat-card strong { font-size: 25px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
:root .stat-card span, :root .stat-card small { font-size: 12px; font-weight: 400; }
:root .quick-grid { gap: 16px; margin: 0 0 28px; }
:root .action-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; background: var(--panel); box-shadow: none; border: 1px solid var(--line); border-radius: 8px; padding: 22px; min-height: 138px; }
:root .action-card:hover { background: var(--accent-soft); border-color: var(--line-strong); transform: none; }
.action-card > .ui-icon { width: 28px; height: 28px; margin-bottom: 8px; color: var(--cyan); }
:root .action-card strong { font-size: 16px; font-weight: 650; }
:root .action-card span { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); font-weight: 400; }
:root .notice, :root .code-box, :root .secret-box { background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; line-height: 1.7; box-shadow: none; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
:root .notice.subtle { background: transparent; }
:root .code-box, :root .secret-box { word-break: break-word; }
:root .status-pill, :root .tag { color: var(--cyan); background: var(--accent-soft); border: 0; font-size: 11px; font-weight: 500; min-height: 26px; }
:root .list-item, :root .node-detail-item, :root .code-table > div, :root .kv-grid > div, :root .block-tx-item, :root .ledger-item { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
:root .list-item.selected { background: var(--accent-soft); }
:root .list-item strong { font-weight: 600; }
:root .list-item span { word-break: normal; overflow-wrap: anywhere; }
:root .block-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; padding: 20px; }
:root .clickable:hover { background: var(--panel-soft); transform: none; }
:root .block-card code, :root .code-table code, :root .kv-grid code, :root .ledger-grid code, :root .block-tx-grid code { color: var(--muted); }
:root .node-type-card { padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
:root .rule-list { font-size: 13px; font-weight: 400; line-height: 1.8; }
:root .button-row { gap: 12px; }
:root .tabs, :root .auth-tabs { border: 0; background: var(--panel-soft); border-radius: 8px; }
:root .tab, :root .auth-tabs button { border-radius: 6px; font-weight: 600; color: var(--muted); }
:root .tab.active { background: var(--bg); color: var(--text); }
:root .table th { background: var(--panel); color: var(--muted); font-weight: 500; }
:root .table td, :root .table th { border-color: var(--line); }
:root .dialog-backdrop, :root .scanner-modal { background: #00000080; backdrop-filter: blur(4px); }
:root .dialog-card, :root .scanner-card { border-radius: 8px; background: var(--panel-strong); border: 1px solid var(--line); box-shadow: var(--shadow); }
:root .scanner-frame { border-color: var(--cyan); box-shadow: 0 0 0 999px #00000050; border-radius: 8px; }
:root .toast { position: static; display: block; width: auto; background: var(--panel-strong); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); font-size: 13px; }
:root .toast.ok { border-color: var(--green); }
:root .toast.error { border-color: var(--red); }
:root .positive { color: var(--green); }
:root .negative { color: var(--red); }
:root .receive-panel { max-width: 440px; margin-inline: auto; text-align: center; border: 0; padding-top: 16px; justify-items: center; gap: 12px; }
.receive-token-logo { width: 48px; height: 48px; margin-bottom: 0; }
:root .qr-shell { width: min(100%, 280px); margin: 24px auto; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
:root .qr-shell canvas, :root .qr-shell img { display: block; width: 100%; border-radius: 0; }
:root .receive-panel .qr-shell { margin: 12px auto; }
.receive-note { color: var(--muted); font-size: 12px; }
.receive-panel .code-box { text-align: left; font-size: 12px; }
.receive-panel > .btn { width: 100%; margin-top: 16px; }

/* Authentication keeps its current login, registration and recovery fields. */
:root .auth-shell { width: min(1040px, calc(100% - 64px)); min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 80px; padding: 48px 0; align-items: center; }
:root .auth-brand { padding: 0; }
:root .brand-orbit { width: 72px; height: 72px; border: 0; border-radius: 8px; box-shadow: none; background: transparent; }
:root .auth-brand h1 { font-size: 44px; font-weight: 700; text-shadow: none; margin: 28px 0 16px; }
:root .auth-brand p { color: var(--muted); font-size: 15px; line-height: 1.8; }
:root .auth-shell > .auth-card { display: block; width: 100%; min-height: 0; padding: 32px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; backdrop-filter: none; }
:root .feature-grid { gap: 16px; }
:root .feature-grid > div { min-height: 0; padding: 12px 0; background: transparent; border: 0; border-radius: 0; }
:root .feature-grid strong { font-size: 13px; font-weight: 600; }
:root .feature-grid span { font-size: 11px; }
:root .password-wrap { grid-template-columns: minmax(0, 1fr) 64px; }
:root .password-wrap .ghost-icon { padding-inline: 8px; white-space: nowrap; }
:root .phone-row { grid-template-columns: 118px minmax(0, 1fr); }
:root .auth-card .auth-app-download { width: 100%; min-height: 48px; height: auto; margin-top: 20px; padding: 12px 16px; gap: 10px; background: var(--panel-soft); color: var(--text); border: 1px solid var(--line); text-align: center; }
.auth-app-download .ui-icon { width: 20px; height: 20px; flex-shrink: 0; }

@media (max-width: 1100px) {
    :root .top-nav { padding-inline: 28px; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 16px; }
    :root .nav-link { width: 92px; min-width: 92px; max-width: 92px; }
    .nav-user .account-name { display: none; }
    .wallet-home { column-gap: 32px; }
    .wallet-activity { padding-left: 28px; }
    .wallet-balance #balance-main { font-size: 40px; }
    :root .ledger-summary-main { gap: 8px; }
    :root .ledger-summary strong { font-size: 14px; }
}

@media (max-width: 768px) {
    html { scrollbar-gutter: auto; }
    :root .top-nav { height: 76px; min-height: 76px; padding: 0 20px; grid-template-columns: 1fr auto; gap: 12px; border-bottom: 0; }
    :root .nav-center { display: none; }
    :root .brand { gap: 10px; }
    :root .brand-mark { width: 42px; height: 42px; }
    .brand-type strong { font-size: 22px; }
    .brand-type small { font-size: 9px; }
    :root .nav-user .brand-type, :root .nav-user .account-name { display: none; }
    :root .nav-user { gap: 0; }
    :root .nav-user .icon-button { width: 40px; flex-basis: 40px; }
    :root .page-wrap { width: calc(100% - 40px); max-width: 600px; padding: 16px 0 calc(102px + env(safe-area-inset-bottom)); }
    :root .page-hero { margin-bottom: 20px; align-items: flex-start; }
    :root .page-hero h1 { font-size: 25px; }
    :root .hero-address { padding: 0; font-size: 11px; }
    :root .page-wrap > section + section { margin-top: 24px; }
    :root .mobile-nav {
        position: fixed; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        left: 0; right: 0; bottom: 0; width: 100%; max-width: none;
        height: calc(76px + env(safe-area-inset-bottom)); min-height: 76px;
        padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); gap: 8px;
        background: var(--bg); border: 0; border-top: 1px solid var(--line);
        border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 40;
    }
    :root .mobile-nav a.nav-link {
        display: grid; position: relative; grid-template-rows: 27px 18px; align-content: center;
        align-items: center; justify-items: center; height: 60px; min-height: 60px;
        width: 100%; min-width: 0; max-width: none; gap: 4px; padding: 4px 0;
        border: 0; border-radius: 0; background: transparent; color: var(--muted); box-shadow: none;
    }
    :root .mobile-nav .mobile-nav-icon, :root[data-theme] .mobile-nav .nav-link .mobile-nav-icon { display: grid; place-items: center; width: 27px; height: 27px; color: inherit; }
    :root .mobile-nav .ui-icon { width: 25px; height: 25px; }
    :root .mobile-nav .nav-label { font-size: 12px; font-weight: 500; line-height: 18px; }
    :root .mobile-nav a.nav-link.active { color: var(--cyan); background: transparent; border: 0; box-shadow: none; }
    :root .mobile-nav a.nav-link.active .ui-icon { stroke-width: 2.2; }
    :root .mobile-nav a.nav-link.active .nav-label { font-weight: 700; }
    .wallet-home { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "overview" "shortcuts" "facts" "activity"; gap: 16px; padding: 0; }
    .balance-heading { min-height: 28px; font-size: 13px; }
    .balance-heading .icon-button { height: 28px; }
    .wallet-balance { margin: 6px 0 2px; gap: 10px; }
    .wallet-balance #balance-main { font-size: 42px; line-height: 1.25; }
    .wallet-balance #balance-main.compact-value { font-size: 28px; }
    .wallet-balance > span { font-size: 17px; }
    .wallet-identity { font-size: 14px; }
    .wallet-primary-actions { margin-top: 16px; }
    .wallet-shortcuts { gap: 4px; }
    .wallet-shortcuts a { min-height: 70px; gap: 9px; }
    .wallet-shortcuts .ui-icon { width: 28px; height: 28px; }
    .wallet-shortcuts span { font-size: 13px; }
    .wallet-facts { padding: 15px 0; min-height: 80px; }
    .wallet-facts > div { padding-inline: 10px; }
    .wallet-facts span { font-size: 13px; margin-bottom: 4px; }
    .wallet-facts strong { font-size: 21px; line-height: 1.25; }
    .wallet-facts small { font-size: 10px; }
    .wallet-activity { border: 0; padding: 0; }
    :root .wallet-activity .panel-head { min-height: 36px; margin-bottom: 0; }
    .wallet-activity .activity-tools { gap: 2px; }
    .wallet-activity .panel-title { font-size: 20px; }
    :root .ledger-summary { grid-template-columns: 40px minmax(0, 1fr) 12px; gap: 10px; padding: 16px 0; }
    .transaction-icon { width: 40px; height: 40px; }
    :root #recent-list .ledger-summary { min-height: 76px; }
    :root .ledger-summary-main { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    :root .ledger-summary strong { font-size: 16px; }
    :root .ledger-summary-main span { font-size: 12px; }
    :root .ledger-summary-foot { grid-column: 2 / -1; font-size: 10px; flex-wrap: wrap; gap: 4px 12px; }
    .transaction-chevron .ui-icon { width: 12px; height: 12px; }
    #history-list .ledger-summary-main { grid-template-columns: minmax(0, 1fr); }
    #history-list .ledger-amount { text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
    :root .grid.cols-2, :root .grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
    :root .grid.cols-4, :root .quick-grid.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :root .grid, :root .quick-grid { gap: 16px; }
    :root .panel, :root .panel.subtle { padding: 20px 0; }
    :root .grid > .panel { padding: 20px; }
    :root .panel-head { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 12px; }
    :root .panel-head .button-row, :root .panel-head .toolbar { width: auto; }
    :root .panel-title { font-size: 18px; }
    :root .stat-card { min-height: 92px; padding: 16px; }
    :root .stat-card strong { font-size: 22px; }
    :root .action-card { min-height: 138px; padding: 18px 16px; gap: 6px; }
    :root .action-card strong { font-size: 15px; }
    :root .action-card span { font-size: 11px; }
    :root .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    :root .code-table > div { grid-template-columns: 1fr auto; padding: 14px 0; gap: 8px 12px; }
    .code-table > div > code { grid-column: 1 / -1; grid-row: 2; }
    :root .search-row { grid-template-columns: 1fr 1fr; }
    :root .search-row .input { grid-column: 1 / -1; }
    :root .mobile-only { display: inline-flex !important; }
    :root .node-detail-item { grid-template-columns: 100px minmax(0, 1fr); padding: 12px 0; }
    :root .input, :root .select, :root .textarea { font-size: 16px; }
    :root .toast-stack { left: 20px; right: 20px; bottom: calc(90px + env(safe-area-inset-bottom)); }
    :root .toast { max-width: 100%; }
    :root .auth-shell { width: min(440px, calc(100% - 40px)); grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 36px 0; align-content: center; }
    :root .auth-brand h1 { font-size: 32px; margin: 18px 0 10px; }
    :root .brand-orbit { width: 56px; height: 56px; }
    :root .auth-brand p { font-size: 13px; }
    :root .feature-grid { display: none; }
    :root .auth-shell > .auth-card { padding: 24px 20px; }
    :root .phone-row { grid-template-columns: 118px minmax(0, 1fr); gap: 8px; }
}

@media (max-width: 360px) {
    :root .page-wrap { width: calc(100% - 32px); }
    :root .top-nav { padding-inline: 16px; }
    .wallet-balance #balance-main { font-size: 36px; }
    .wallet-primary-actions { gap: 10px; }
    .wallet-shortcuts span { font-size: 11px; }
    .wallet-facts strong { font-size: 19px; }
    :root .ledger-summary { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
    .transaction-icon { width: 34px; height: 34px; }
    .transaction-chevron { display: none; }
    :root .ledger-summary strong { font-size: 13px; }
    :root .grid > .panel { padding: 16px; }
}

.client-authorization { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); min-width: 0; }
.authorization-heading, .authorization-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.authorization-heading h3 { margin: 0; font-size: 18px; }
.authorization-field { padding: 8px 0 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.authorization-field code { display: block; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; user-select: all; }
.authorization-command-label { display: block; margin-top: 24px; font-weight: 700; }
:root .authorization-command { width: 100%; min-height: 144px; margin: 8px 0 16px; font: 13px/1.6 Consolas, monospace; overflow-wrap: anywhere; word-break: break-all; white-space: pre-wrap; resize: vertical; }
.client-authorization .button-row { gap: 12px; flex-wrap: wrap; }
.client-authorization .muted { margin: 8px 0 12px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
