:root {
    --font-family-base: "SF Pro Text", "SF Pro", "SF Pro Display", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    --type-ramp-base-font-family: var(--font-family-base);
    --type-ramp-minus-1-font-family: var(--font-family-base);
    --type-ramp-plus-1-font-family: var(--font-family-base);
    --type-ramp-plus-2-font-family: var(--font-family-base);
    --type-ramp-plus-3-font-family: var(--font-family-base);
    --type-ramp-plus-4-font-family: var(--font-family-base);
    --body-font: var(--font-family-base);
    --font-size-title-l: 36px;
    --font-size-title-r: 24px;
    --font-size-title-s: 18px;
    --font-size-body-r: 14px;
    --font-size-body-l: 16px;
    --font-size-body-s: 12px;
    --font-size-body-min: 10px;
    --font-size-title-rpp: 24px;
    --line-height-title-l: 1;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-light: 300;
    --line-height-default: 1.6;

    --surface-0: #ffffff;
    --surface-1: #faf9f5;
    --surface-2: #f5f4ed;
    --surface-3: #f0eee6;
    --surface-5: #d1cfc5;

    --text-base: #141413;
    --text-title: #1f1e1d;
    --text-muted: #73726c;

    --accent-orange: #d97757;
    --accent-orange-bg: #f9ebe6;
    --accent-green: #788c5d;
    --accent-green-bg: #e8e9de;
    --accent-blue: #2f84d8;
    --accent-blue-bg: #eef4fb;

    --header-icon-filter-light: invert(46%) sepia(6%) saturate(412%) hue-rotate(12deg) brightness(89%) contrast(87%);
    --header-icon-filter-dark: invert(68%) sepia(6%) saturate(246%) hue-rotate(9deg) brightness(90%) contrast(86%);
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--surface-1);
    color: var(--text-base);
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-l);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-default);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
}

body:has(.app-layout.theme-dark),
body:has(.login-layout.theme-dark) {
    background: #262624;
}

@media (prefers-color-scheme: dark) {
    body:has(.app-layout.theme-system),
    body:has(.login-layout.theme-system) {
        background: #262624;
    }
}

.app-layout,
.login-layout,
fluent-design-theme,
fluent-body-content,
fluent-stack,
fluent-card,
fluent-nav-link,
fluent-dialog,
fluent-dialog-header,
fluent-dialog-body,
fluent-dialog-footer,
fluent-toast {
    font-family: var(--font-family-base);
}

* {
    box-sizing: border-box;
}

button,
input,
select,
textarea,
label,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
small {
    font-family: inherit;
    outline: none;
}
h1:focus {
    outline: none;
}

fluent-button::part(control),
fluent-text-field::part(control),
fluent-text-field::part(label),
fluent-number-field::part(control),
fluent-number-field::part(label),
fluent-select::part(control),
fluent-select::part(listbox),
fluent-text-area::part(control),
fluent-text-area::part(label),
fluent-badge::part(control),
fluent-message-bar::part(control),
fluent-dialog::part(control),
fluent-dialog-header::part(control),
fluent-dialog-body::part(control),
fluent-label,
fluent-option {
    font-family: var(--font-family-base);
    line-height: var(--line-height-default);
}

.typo-title-l {
    font-size: var(--font-size-title-l);
    line-height: var(--line-height-title-l);
    font-weight: var(--font-weight-light);
}

.typo-title-lp {
    font-size: var(--font-size-title-l);
    line-height: var(--line-height-title-l);
    font-weight: var(--font-weight-regular);
}

.typo-title-lpp {
    font-size: var(--font-size-title-l);
    line-height: var(--line-height-title-l);
    font-weight: var(--font-weight-semibold);
}

.typo-title-r {
    font-size: var(--font-size-title-r);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
}

.typo-title-rp {
    font-size: var(--font-size-title-r);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-regular);
}

.typo-title-rpp {
    font-size: var(--font-size-title-r);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-semibold);
}

.typo-title-s {
    font-size: var(--font-size-title-s);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
}

.typo-title-sp {
    font-size: var(--font-size-title-s);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-regular);
}

.typo-title-spp {
    font-size: var(--font-size-title-s);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-semibold);
}

.typo-body-l {
    font-size: var(--font-size-body-l);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
}

.typo-body-lp {
    font-size: var(--font-size-body-l);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-regular);
}

.typo-body-lpp {
    font-size: var(--font-size-body-l);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-semibold);
}

.typo-body-r {
    font-size: var(--font-size-body-r);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
}

.typo-body-rp {
    font-size: var(--font-size-body-r);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-regular);
}

.typo-body-rpp {
    font-size: var(--font-size-body-r);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-semibold);
}

.typo-body-s {
    font-size: var(--font-size-body-s);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
}

.typo-body-sp {
    font-size: var(--font-size-body-s);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-regular);
}

.typo-body-spp {
    font-size: var(--font-size-body-s);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-semibold);
}

.typo-body-min {
    font-size: var(--font-size-body-min);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
}

.typo-body-minp {
    font-size: var(--font-size-body-min);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-regular);
}

.typo-body-minpp {
    font-size: var(--font-size-body-min);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-semibold);
}

.login-layout,
.app-layout {
    min-height: 100dvh;
}

.mobile-shell {
    width: min(100%, 390px);
    margin: 0 auto;
    min-height: 100dvh;
    background: var(--surface-2);
    position: relative;
    overflow: hidden;
}

.app-header {
    height: 56px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-header-page {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    gap: 12px;
}

.brand-link {
    display: inline-flex;
    align-items: center;
}

.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.brand-logo--dark {
    display: none;
}

.header-action {
    color: var(--text-muted);
}

.header-action,
.header-action *,
.header-action svg,
.header-action svg * {
    fill: currentColor;
    stroke: currentColor;
}

.header-leading,
.header-action {
    width: 40px;
    height: 40px;
    border: 0;
    padding: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.header-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: var(--header-icon-filter-light);
}

.theme-dark .header-icon {
    filter: var(--header-icon-filter-dark);
}

.theme-system .header-icon {
    filter: var(--header-icon-filter-light);
}

@media (prefers-color-scheme: dark) {
    .theme-system .header-icon {
        filter: var(--header-icon-filter-dark);
    }
}

.header-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: var(--font-weight-semibold);
    color: var(--text-title);
    text-align: center;
}

.header-dot {
    width: 8px;
    height: 8px;
    position: absolute;
    top: 10px;
    right: 8px;
    border-radius: 999px;
    background: #bf4d43;
}

.header-avatar {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--surface-5);
    color: var(--text-title);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
    cursor: pointer;
}

.header-avatar:focus-visible {
    outline: 2px solid #d97757;
    outline-offset: 2px;
}

.app-body {
    height: calc(100vh - 10rem);
    padding: 1rem 2rem;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.app-body::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Hide scrollbars inside FluentBodyContent */
fluent-body-content,
fluent-body-content::part(content),
fluent-body-content > *,
.body-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

fluent-body-content::-webkit-scrollbar,
fluent-body-content > *::-webkit-scrollbar,
.body-content::-webkit-scrollbar {
    display: none;
}

.page-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.send-page-content {
    gap: 30px;
}

.home-page-content {
    gap: 30px;
}

.page-eyebrow {
    font-size: 11px;
    line-height: 1.4;
    color: #8e7058;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-title {
    margin: 4px 0 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--text-title);
    letter-spacing: -0.02em;
}

.wallet-hero .page-eyebrow {
    color: #d97757;
}

.wallet-hero .page-title {
    color: #161513;
}

.wallet-hero,
.section-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-page-content .wallet-hero,
.home-page-content .section-shell {
    gap: 16px;
}

.home-transactions-section {
    padding-bottom: 8px;
}

.app-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    box-sizing: border-box;
}

.app-alert__icon,
.app-alert__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.app-alert__text {
    font-family: var(--font-family-base);
    flex: 1 1 auto;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 400;
}

.app-alert__close {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.app-alert__mask {
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.app-alert--error,
.app-alert--warning {
    background: #f0e3dc;
    color: #bf4d43;
}

.app-alert--info {
    background: #f0eee6;
    color: #141413;
}

.app-alert--success {
    background: #ecebdf;
    color: #7a8166;
}

.home-warning-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f0e3dc;
    color: #bf4d43;
}

.home-warning-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.home-warning-alert-text {
    font-size: 12px;
    line-height: 1.6;
}
.quick-action-icon .quick-action-icon-mask {
    width: 24px;
    height: 24px;
}

.app-alert__mask,
.home-warning-alert-mask,
.quick-action-icon-mask,
.section-link-icon-mask {
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.home-info-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 10px;
    box-sizing: border-box;
    background: #f0eee6;
}

.home-info-alert-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.home-info-alert-text {
    color: #141413;
    font-size: 12px;
    line-height: 1.6;
}

.wallet-eyebrow-row,
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--accent-green-bg);
    color: var(--accent-green);
    font-size: 11px;
    line-height: 1;
    border-radius: 14px;
    padding: 6px 10px;
}

.status-pill-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.status-pill.success {
    background: var(--accent-green-bg);
    color: var(--accent-green);
}

.status-pill.warning {
    background: var(--accent-orange-bg);
    color: var(--accent-orange);
}

.balance-card {
    font-family: var(--font-family-base);
    background: #30302e;
    border-radius: 8px;
    height: 160px;
    padding: 32px 24px;
    color: #faf9f5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.balance-card-label {
    color: var(--accent-orange);
    font-size: 12px;
    line-height: 1.6;
    font-weight: 300;
}

.balance-card-amount-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.balance-card-currency {
    color: #73726c;
    font-size: 36px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: -0.01em;
}

.balance-card-amount {
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.01em;
    font-weight: 700;
}

.balance-card-meta {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    width: fit-content;
    max-width: 100%;
    border-radius: 14px;
    padding: 4px 10px;
    background: var(--accent-orange);
    color: #141413;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
}

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

.quick-action-card {
    border: 0;
    border-radius: 8px;
    padding: 12px 10px;
    background: #e3dacc;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-title);
    box-shadow: none;
    cursor: pointer;
}

.quick-action-card:focus-visible,
.section-link:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
}

.quick-action-icon {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quick-action-icon {
    color: currentColor;
}

.icon-receive.quick-action-icon {
    background: var(--accent-green-bg);
}

.icon-send.quick-action-icon {
    background: var(--accent-orange-bg);
}

.icon-swap.quick-action-icon {
    background: var(--surface-0);
}

.quick-action-icon.icon-receive,
.quick-action-icon.icon-receive *,
.quick-action-icon.icon-receive svg,
.quick-action-icon.icon-receive svg * {
    color: var(--accent-green) !important;
    fill: var(--accent-green) !important;
    stroke: var(--accent-green) !important;
}

.quick-action-icon.icon-send,
.quick-action-icon.icon-send *,
.quick-action-icon.icon-send svg,
.quick-action-icon.icon-send svg * {
    color: var(--accent-orange) !important;
    fill: var(--accent-orange) !important;
    stroke: var(--accent-orange) !important;
}

.quick-action-icon.icon-swap,
.quick-action-icon.icon-swap *,
.quick-action-icon.icon-swap svg,
.quick-action-icon.icon-swap svg * {
    color: var(--accent-blue) !important;
    fill: var(--accent-blue) !important;
    stroke: var(--accent-blue) !important;
}

.quick-action-title {
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    color: var(--text-title);
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title {
    margin: 0;
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    color: #1f1e1d;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #73726c;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.section-link-icon {
    display: inline-flex;
    width: 12px;
    height: 12px;
}

.wallet-tx-list {
    width: 100%;
    border-radius: 8px;
    background: var(--surface-0);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(15, 15, 14, 0.06);
}

.wallet-tx-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 0 16px;
}

.wallet-tx-divider {
    height: 2px;
    background: #f5f4ed;
}

.wallet-tx-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.tx-leading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tx-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tx-icon-wrap.deposit {
    background: var(--accent-green-bg);
}

.tx-icon-wrap.deposit,
.tx-icon-wrap.deposit *,
.tx-icon-wrap.deposit svg,
.tx-icon-wrap.deposit svg * {
    color: var(--accent-green) !important;
    fill: var(--accent-green) !important;
    stroke: var(--accent-green) !important;
}

.tx-icon-wrap.withdrawal {
    background: var(--accent-orange-bg);
}

.tx-icon-wrap.withdrawal,
.tx-icon-wrap.withdrawal *,
.tx-icon-wrap.withdrawal svg,
.tx-icon-wrap.withdrawal svg * {
    color: var(--accent-orange) !important;
    fill: var(--accent-orange) !important;
    stroke: var(--accent-orange) !important;
}

.tx-title {
    font-size: 14px;
    color: var(--text-base);
    line-height: 1.6;
}

.tx-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.network-chip {
    height: 20px;
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1.6;
}

.network-chip.network-trc20 {
    background: var(--accent-green-bg);
    color: var(--accent-green);
}

.network-chip.network-erc20 {
    background: #f0e3dc;
    color: #bf4d43;
}

.wallet-tx-trailing {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    white-space: nowrap;
}

.tx-time,
.wallet-tx-status-text {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.6;
}

.tx-amount-value {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}

.wallet-status-badge {
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 10px;
    background: #f0eee6;
    color: #73726c;
    font-size: 10px;
    line-height: 1.6;
}

.amount.tx-amount-value.deposit {
    color: #788c5d;
}

.amount.tx-amount-value.withdrawal {
    color: #d97757;
}

/* Transaction Detail Dialog — label/value rows */
.tx-detail-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tx-detail-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--surface-3);
}

.tx-detail-row:last-child {
    border-bottom: none;
}

.tx-detail-label {
    flex-shrink: 0;
    min-width: 96px;
    font-size: var(--font-size-body-r);
    font-weight: var(--font-weight-regular);
    color: var(--text-muted);
    line-height: var(--line-height-default);
}

.tx-detail-value {
    font-size: var(--font-size-body-r);
    font-weight: var(--font-weight-semibold);
    color: var(--text-title);
    text-align: right;
    line-height: var(--line-height-default);
    word-break: break-all;
}

.tx-detail-mono {
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 12px;
    font-weight: var(--font-weight-regular);
}

.bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: min(100%, 390px);
    background: var(--surface-2);
    display: flex;
    justify-content: space-between;
    padding: 10px 8px 24px;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.08);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.bottom-nav-item {
    width: 74px;
    height: 66px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: #73726c;
    font-size: 11px;
}

.bottom-nav-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    color: currentColor;
}

.bottom-nav-icon-mask {
    width: 100%;
    height: 100%;
    display: block;
    background-color: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.bottom-nav-item,
.bottom-nav-item *,
.bottom-nav-item svg,
.bottom-nav-item svg * {
    fill: currentColor;
    stroke: currentColor;
}

.bottom-nav-item.active {
    color: #d97757;
    font-weight: 700;
}

.bottom-nav-item:not(.active) .bottom-nav-icon {
    color: #73726c;
}

.bottom-nav-item.active .bottom-nav-icon {
    color: #d97757;
}

.bottom-nav-item.active .bottom-nav-icon {
    transform: translateY(-1px);
}

.page-header-block {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.segment-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 4px;
    border-radius: 12px;
    background: var(--surface-3);
}

.segment-item {
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.segment-item.active {
    background: var(--surface-0);
    color: var(--text-title);
    box-shadow: 0 6px 14px rgba(15, 15, 14, 0.08);
}

.receive-segment-control {
    gap: 0;
    padding: 3px;
    border-radius: 22px;
    background: #d1cfc5;
}

.receive-segment-item {
    height: 38px;
    border-radius: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    color: #1f1e1d;
    box-shadow: none;
}

.receive-segment-item.active {
    background: #30302e;
    color: #faf9f5;
    box-shadow: none;
}

.receive-segment-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.receive-segment-dot.dot-trc20 {
    background: #7d975b;
}

.receive-segment-dot.dot-erc20 {
    background: #ac5c42;
}

.receive-warning-bar {
    margin-top: 0;
}

.receive-qr-surface {
    width: 260px;
    height: 260px;
    margin: 24px auto 0;
    border-radius: 16px;
    background: #faf9f5;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.receive-qr-container {
    width: 220px;
    height: 220px;
    border-radius: 10px;
    background: #f0eee6;
}

.receive-qr-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.qr-logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: #f0eee6;
    padding: 4px;
    border-radius: 4px;
    pointer-events: none;
    display: block;
}

.receive-qr-placeholder {
    width: 220px;
    height: 220px;
    border-radius: 10px;
    background: #f0eee6;
    color: #8b877d;
    font-size: 12px;
    line-height: 1.6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.receive-address-card{
    border: 1px solid #d1cfc5;
    border-radius: 8px;
    background: #f0eee6;
}

.receive-address-section {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.receive-address-card {
    min-height: 64px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.receive-address-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.receive-address-label {
    font-size: 10px;
    line-height: 1;
    color: #73726c;
}

.receive-address-value {
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    color: #0f0f0e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.receive-address-value.missing {
    color: #8b877d;
}

.receive-copy-icon-button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 18px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #faf9f5;
    color: #5e5d59;
    cursor: pointer;
}

.receive-copy-icon-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.receive-copy-icon-mask {
    width: 24px;
    height: 24px;
    display: block;
    background-color: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.receive-info-strip {
    border-radius: 8px;
    background: #f0eee6;
    min-height: 64px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.receive-info-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5e5d59;
    flex: 0 0 auto;
}

.receive-info-icon-mask {
    width: 16px;
    height: 16px;
    display: block;
    background-color: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.receive-info-text {
    font-family: var(--font-family-base);
    color: #3d3d3a;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 400;
}

.receive-qr-card,
.form-panel,
.summary-panel,
.history-card {
    border-radius: 16px;
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    box-shadow: 0 10px 24px rgba(15, 15, 14, 0.04);
}

.receive-qr-card {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.receive-network-line {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.receive-network-name {
    font-size: 13px;
    color: var(--text-muted);
}

.qr-frame {
    width: 100%;
    padding: 22px;
    border-radius: 16px;
    background: var(--surface-1);
    display: flex;
    justify-content: center;
}

.qr-container {
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--surface-0);
    overflow: hidden;
}

.address-panel {
    border: 1px solid var(--surface-3);
    border-radius: 16px;
    background: var(--surface-0);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.address-panel-label {
    font-size: 12px;
    color: var(--text-muted);
}

.address-readonly-field {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--surface-5);
    background: var(--surface-1);
    color: var(--text-base);
    font-family: var(--font-family-base);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;
}

.address-panel-note {
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted);
}

.receive-copy-button::part(control) {
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
    background: #0f0f0e;
    border: 1px solid #0f0f0e;
    color: var(--surface-1);
}

.form-panel,
.summary-panel {
    padding: 16px;
}

.send-form-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-field-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field-label {
    font-size: 12px;
    line-height: 1.4;
    color: #6d6a63;
    font-weight: 500;
}

.send-select-wrap {
    position: relative;
}

.send-network-dot {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
}

.send-network-dot.network-trc20 {
    background: #788c5d;
}

.send-network-dot.network-erc20 {
    background: #bf4d43;
}

.send-select-chevron {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #6d6a63;
    pointer-events: none;
}

.send-select-chevron-mask,
.send-submit-icon-mask {
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--icon-url);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.send-select,
.send-input {
    width: 100%;
    min-height: 48px;
    border-radius: 6px;
    border: 1px solid #c2c0b6;
    background: #faf9f5;
    color: #141413;
    font-size: 16px;
    font-weight: 400;
    padding: 0 12px;
    outline: none;
    box-shadow: none;
}

.send-select {
    appearance: none;
    -webkit-appearance: none;
    min-height: 52px;
    border-radius: 8px;
    border-color: #d1cfc5;
    background: #f0eee6;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    padding-left: 36px;
    padding-right: 44px;
}

.send-input {
    font-size: 16px;
    line-height: 1.4;
}

.send-input::placeholder,
.send-select,
.send-select option {
    color: #141413;
}

.send-input::placeholder {
    font-weight: 400;
    color: #76746d;
}

.send-input-address {
    box-shadow: 1px 1px 6px rgba(15, 15, 14, 0.08);
    padding-right: 44px;
}

.send-select:focus,
.send-input:focus {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.16);
}

.send-input-mono {
    font-family: var(--font-family-base);
    font-size: 16px;
    line-height: 1.4;
}

.send-address-field {
    position: relative;
}

.send-address-scan-button {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #76746d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 3;
}

.send-address-scan-button:hover {
    color: #141413;
    background: rgba(15, 15, 14, 0.05);
}

.send-address-scan-button:disabled {
    opacity: 0.45;
    cursor: progress;
}

.send-address-scan-icon-mask {
    display: block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.send-amount-input {
    min-height: 68px;
    border-radius: 8px;
    border-color: #d1cfc5;
    background: #f0eee6;
    box-shadow: none;
    padding-right: 84px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.form-panel fluent-text-field,
.form-panel fluent-number-field {
    --neutral-fill-input-rest: var(--surface-1);
    --neutral-fill-input-hover: #fffdf8;
    --neutral-fill-input-active: var(--surface-1);
    --neutral-stroke-rest: #d8d2c7;
    --neutral-stroke-hover: #c9c2b7;
    --neutral-stroke-focus: var(--accent-orange);
    --control-corner-radius: 14px;
}

.form-panel fluent-text-field::part(control),
.form-panel fluent-number-field::part(control) {
    min-height: 54px;
    border-radius: 14px;
    border: 1px solid #d8d2c7;
    background: var(--surface-1);
    box-shadow: none;
}

.form-panel fluent-text-field::part(label),
.form-panel fluent-number-field::part(label) {
    color: #7c6757;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.form-panel fluent-text-field:focus-within::part(control),
.form-panel fluent-number-field:focus-within::part(control) {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.16);
}

.amount-input-wrap {
    position: relative;
}

.ghost-pill {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 56px;
    height: 28px;
    border: 1px solid var(--accent-orange);
    border-radius: 999px;
    padding: 0;
    background: transparent;
    color: var(--accent-orange);
    font-size: 10px;
    font-weight: 600;
}

.send-submit-button {
    display: block;
    width: 100%;
    margin-top: 6px;
    --accent-fill-rest: #0f0f0e;
    --accent-fill-hover: #0f0f0e;
    --accent-fill-active: #0f0f0e;
    --accent-foreground-rest: #f0eee6;
    --accent-foreground-hover: #f0eee6;
    --accent-foreground-active: #f0eee6;
}

.send-submit-button::part(control) {
    width: 100%;
    min-height: 52px;
    height: 52px;
    border-radius: 6px;
    background: #0f0f0e;
    border: 1px solid #0f0f0e;
    color: var(--surface-1);
}

.send-submit-content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.send-submit-icon {
    width: 24px;
    height: 24px;
    color: currentColor;
}

.send-submit-button[disabled]::part(control) {
    background: #c2c0b6 !important;
    border-color: #c2c0b6 !important;
    color: #f0eee6 !important;
    opacity: 1 !important;
}

.send-submit-button[disabled] {
    --accent-fill-rest: #c2c0b6;
    --accent-fill-hover: #c2c0b6;
    --accent-fill-active: #c2c0b6;
    --accent-foreground-rest: #f0eee6;
    --accent-foreground-hover: #f0eee6;
    --accent-foreground-active: #f0eee6;
    --neutral-fill-rest: #c2c0b6;
    --neutral-fill-hover: #c2c0b6;
    --neutral-fill-active: #c2c0b6;
    --neutral-foreground-disabled: #f0eee6;
    opacity: 1;
}

.send-submit-button[disabled] .send-submit-content,
.send-submit-button[disabled] .send-submit-icon,
.send-submit-button[disabled] .send-submit-icon-mask {
    color: #f0eee6 !important;
}

body.omw-qr-scanning {
    overflow: hidden;
}

.omw-qr-scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 15, 14, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.omw-qr-scan-card {
    width: min(92vw, 420px);
    border-radius: 24px;
    background: var(--surface-1);
    color: var(--text-base);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.omw-qr-scan-header {
    padding: 18px 18px 14px;
}

.omw-qr-scan-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-title);
    letter-spacing: -0.02em;
}

.omw-qr-scan-subtitle {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.omw-qr-scan-video-shell {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #0f0f0e;
}

.omw-qr-scan-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.omw-qr-scan-frame {
    position: absolute;
    inset: 16%;
    border-radius: 20px;
    border: 2px solid rgba(250, 249, 245, 0.86);
    box-shadow: 0 0 0 999px rgba(15, 15, 14, 0.28) inset;
}

.omw-qr-scan-note {
    padding: 14px 18px 0;
    min-height: 24px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.omw-qr-scan-actions {
    display: flex;
    gap: 10px;
    padding: 16px 18px 18px;
}

.omw-qr-scan-button {
    min-height: 44px;
    border-radius: 12px;
    padding: 0 14px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.omw-qr-scan-button--secondary {
    flex: 1 1 auto;
    border-color: #d1cfc5;
    background: transparent;
    color: var(--text-base);
}

.omw-qr-scan-button--secondary:hover {
    background: rgba(15, 15, 14, 0.05);
}

.omw-qr-scan-upload-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 18px;
}

.omw-qr-scan-file {
    display: none;
}

.omw-qr-scan-button--primary {
    width: 100%;
    background: #141413;
    color: #f0eee6;
}

.omw-qr-scan-button--primary:hover {
    background: #0f0f0e;
}

.omw-qr-scan-support {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.history-filter-tabs {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    min-height: 29px;
}

.history-filter-button {
    position: relative;
    border: 0;
    padding: 0 8px 8px;
    background: transparent;
    color: #3d3d3a;
    font-size: 16px;
    line-height: 18px;
    font-weight: 500;
}

.history-filter-button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: transparent;
}

.history-filter-button.active {
    color: #0f0f0e;
}

.history-filter-button.active::after {
    background: var(--accent-orange);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--surface-3);
}

.summary-row:last-child {
    border-bottom: 0;
}

.summary-panel {
    background: #f0eee6;
    border: 0;
    box-shadow: none;
}

.send-fee-card {
    padding: 0;
    border-radius: 8px;
    background: #faf9f5;
    overflow: hidden;
}

.send-fee-row {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.send-fee-row--network {
    padding-top: 9px;
}

.send-fee-row--total {
    min-height: 56px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.send-fee-label {
    font-size: 11px;
    line-height: 1;
    color: #73726c;
    font-weight: 400;
}

.send-fee-value-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.send-fee-value,
.send-fee-unit {
    font-size: 14px;
    line-height: 1;
    color: #141413;
    font-weight: 400;
}

.send-fee-unit {
    width: 40px;
    text-align: right;
}

.send-fee-divider {
    width: 100%;
    height: 2px;
    background: #f5f4ed;
}

.send-fee-total-label {
    font-size: 14px;
    line-height: 1;
    color: #141413;
    font-weight: 400;
}

.send-fee-total-value {
    font-size: 14px;
    line-height: 1;
    color: #1f1e1d;
    font-weight: 700;
}

.summary-label {
    font-size: 12px;
    color: var(--text-muted);
}

.summary-row .amount {
    font-size: 16px;
    color: #22211f;
}

.summary-row.total .amount {
    color: var(--text-title);
    font-weight: 700;
}

.send-inline-alert {
    margin: 0 0.5rem 0.5rem 0.5rem ;
    width: calc(100% - 16px);
}

.form-field-label-base {
    color: #141413;
    font-weight: 400;
}

.history-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-top: 30px;
}

.history-date-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-date-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.6;
    padding: 0 4px;
}

.history-tx-approval {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 8px 16px 12px;
}

.history-approve-button {
    --accent-fill-rest: #0f0f0e;
    --accent-fill-hover: #2a2724;
    --accent-fill-active: #0f0f0e;
    --accent-foreground-rest: #f0eee6;
    --accent-foreground-hover: #f0eee6;
    --accent-foreground-active: #f0eee6;
}

.history-approve-button::part(control) {
    background: #0f0f0e;
    border-color: #0f0f0e;
    color: #f0eee6;
    border-radius: 6px;
}

.history-dialog-button {
    cursor: pointer;
}

.history-dialog-button::part(control) {
    cursor: pointer;
}

.history-approve-button[disabled]::part(control) {
    background: #c2c0b6 !important;
    border-color: #c2c0b6 !important;
    color: #f0eee6 !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

.history-dialog-button[disabled] {
    cursor: not-allowed;
}

.history-dialog-button[disabled]::part(control) {
    cursor: not-allowed;
}

.history-reject-button::part(control) {
    border-radius: 6px;
}

.profile-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.profile-card-link:focus-visible {
    outline: none;
}

.profile-card-link:focus-visible .profile-card {
    outline: 2px solid #d97757;
    outline-offset: 2px;
}

.profile-card {
    border: 0;
    background: var(--surface-0);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 16px;
    box-shadow: 0 0 7.5px rgba(0, 0, 0, 0.1);
}

.profile-card-link .profile-card {
    cursor: pointer;
}

.profile-card::part(control) {
    border: 0 !important;
}

.profile-copy {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.profile-avatar {
    min-width: 56px;
    height: 56px;
    border-radius: 28px;
    background: var(--surface-3);
    border: 1px solid var(--surface-5);
    color: var(--text-title);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    letter-spacing: 0.02em;
}

.profile-avatar-large {
    min-width: 72px;
    height: 72px;
    border-radius: 36px;
    font-size: 24px;
}

.profile-name {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-base);
}

.profile-email {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

.profile-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.profile-note {
    font-size: 11px;
    color: var(--text-muted);
}

.account-page-content {
    gap: 20px;
}

.account-summary-card {
    padding: 20px 18px;
}

.account-address-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-address-card {
    min-height: 0;
    padding: 14px 16px;
    align-items: flex-start;
}

.account-address-card .receive-address-main {
    gap: 6px;
}

.account-address-card .receive-copy-icon-button {
    margin-top: 2px;
}

.account-address-value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-all;
    line-height: 1.4;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-section-title {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.settings-group {
    border: 1px solid var(--surface-5);
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
}

.settings-group-stack {
    overflow: visible;
}

.settings-row {
    min-height: 54px;
    height: 54px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-base);
    border-bottom: 1px solid var(--surface-5);
}

.settings-row:last-child {
    border-bottom: 0;
}

.settings-row.static-row {
    background: transparent;
}

.settings-row.settings-row-tall {
    min-height: 64px;
    height: auto;
    padding: 10px 16px;
}

.settings-stack-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--surface-5);
}

.settings-stack-panel-editor {
    margin: 8px;
    padding: 14px 16px 16px;
    border: 1px solid var(--surface-5);
    border-radius: 10px;
    background: var(--surface-1);
}

.settings-panel-heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.settings-form-label {
    font-size: 12px;
    color: var(--text-muted);
}

.settings-input {
    width: 100%;
    height: 38px;
    border-radius: 6px;
    border: 1px solid var(--surface-5);
    background: var(--surface-0);
    color: var(--text-base);
    padding: 0 10px;
    font-size: 13px;
}

.omw-password-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.omw-password-input {
    padding-right: 40px;
}

.omw-password-fluent {
    width: 100%;
}

.omw-password-field .omw-password-fluent::part(control) {
    padding-right: 40px;
}

.omw-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: #76746d;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
}

.omw-password-toggle:hover {
    color: #141413;
}

.omw-password-toggle__icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: currentColor;
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--icon-url);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.settings-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-action-button {
    width: 100%;
}

.settings-action-row .settings-action-button {
    width: auto;
}

.settings-inline-note {
    font-size: 12px;
    color: var(--text-muted);
}

.settings-secret-text {
    width: 100%;
    min-height: 84px;
    resize: vertical;
    border-radius: 6px;
    border: 1px solid var(--surface-5);
    background: var(--surface-0);
    color: var(--text-base);
    padding: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.4;
}

.settings-wallet-message,
.settings-wallet-error {
    margin: 8px 0 0;
    font-size: 12px;
}

.settings-wallet-message {
    color: #236a4b;
}

.settings-wallet-error {
    color: #bf4d43;
}

.settings-row.compact-row {
    min-height: 54px;
    height: 54px;
}

.settings-icon {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: var(--accent-orange);
    color: var(--surface-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.settings-icon-google {
    background: transparent;
}

.settings-icon-image {
    width: 36px;
    height: 36px;
    display: block;
}

.settings-icon-mask {
    width: 24px;
    height: 24px;
    display: block;
    color: inherit;
    background-color: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.settings-icon svg,
.settings-icon svg,
.settings-icon svg * {
    color: currentColor !important;
    fill: none !important;
    stroke: currentColor !important;
}

.settings-icon.tone-orange {
    background: var(--accent-orange);
    color: var(--surface-1);
}

.settings-icon.tone-green {
    background: var(--accent-orange);
    color: var(--surface-1);
}

.settings-icon.tone-blue {
    background: var(--accent-orange);
    color: var(--surface-1);
}

.settings-icon.tone-neutral {
    background: var(--accent-orange);
    color: var(--surface-1);
}

.settings-copy {
    font-size: 14px;
    color: var(--text-base);
    line-height: 1;
    font-weight: 500;
}

.settings-copy-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.settings-row-end {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #5e5d59;
}

.settings-disclosure-button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.settings-disclosure-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.settings-disclosure-button:focus-visible {
    outline: 2px solid #d97757;
    outline-offset: 2px;
}

.settings-chevron {
    width: 24px;
    height: 24px;
    display: block;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--icon-url);
    mask-position: center;
    mask-repeat: no-repeat;
    transition: transform 0.16s ease;
}

.settings-chevron-expanded {
    transform: rotate(90deg);
}

.theme-row-end {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.settings-subcopy {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted);
    display: none;
}

.settings-meta {
    font-size: 11px;
    line-height: 1;
    color: var(--text-muted);
}

.settings-copy-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.status-chip {
    font-size: 11px;
    color: var(--text-muted);
}

.status-chip.completed {
    color: var(--accent-green);
}

.status-chip.failed {
    color: #bf4d43;
}

.settings-switch {
    width: 38px;
    height: 22px;
    padding: 2px;
    border-radius: 12px;
    border: 2px solid #d97757;
    background: #faf9f5;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.settings-switch-thumb {
    width: 14px;
    height: 14px;
    border-radius: 10px;
    background: #d97757;
    display: block;
}

.settings-switch.selected {
    padding: 2px;
    border-color: #d97757;
    background: #d97757;
    justify-content: flex-end;
}

.settings-switch.selected .settings-switch-thumb {
    background: #faf9f5;
}

.settings-switch:disabled,
.settings-switch.disabled {
    background: #dedcd1;
    border-color: #dedcd1;
    opacity: 0.88;
    cursor: default;
}

.settings-switch:disabled .settings-switch-thumb,
.settings-switch.disabled .settings-switch-thumb {
    background: #f5f4ed;
}

.theme-mode-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.theme-mode-button {
    border: 1px solid var(--surface-5);
    border-radius: 999px;
    background: var(--surface-0);
    color: var(--text-muted);
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 700;
}

.theme-mode-button.active {
    background: #0f0f0e;
    border-color: #0f0f0e;
    color: var(--surface-1);
}

.settings-option-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-option-item {
    width: 100%;
    border: 1px solid var(--surface-5);
    border-radius: 10px;
    background: var(--surface-0);
    color: var(--text-base);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
}

.settings-option-item.active {
    border-color: #d97757;
    background: #fff7f2;
}

.settings-option-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-option-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-base);
}

.settings-option-meta {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.settings-option-check {
    width: 18px;
    height: 18px;
    display: block;
    background-color: #d97757;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
    flex-shrink: 0;
}

.settings-whitelist-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.settings-whitelist-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--surface-5);
    border-radius: 10px;
    background: var(--surface-0);
}

.settings-whitelist-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.settings-whitelist-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-whitelist-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-base);
    line-height: 1.3;
}

.settings-whitelist-address {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    word-break: break-all;
}

.settings-whitelist-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.settings-whitelist-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #f4efe7;
    color: #7c5a4d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.settings-whitelist-chip.verified {
    background: #ecebdf;
    color: #6b7554;
}

.settings-whitelist-chip.pending {
    background: #f7e7df;
    color: #bf4d43;
}

.settings-whitelist-verify-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-whitelist-remove::part(control) {
    min-height: 30px;
    border-radius: 999px;
    color: #bf4d43;
}

.settings-signout-button {
    display: block;
    width: 100%;
    margin-top: 22px;
}

.settings-signout-button::part(control) {
    width: 100%;
    min-height: 52px;
    border-radius: 6px;
    border: 1px solid #0f0f0e;
    background: var(--surface-0);
    color: #0f0f0e;
}

.settings-version {
    margin: 12px 0 0;
    text-align: center;
    color: #73726c;
    font-size: 12px;
    line-height: 1.6;
}

.login-page {
    min-height: 100dvh;
    padding: 0 16px;
}

.login-page-shell {
    width: min(100%, 390px);
    height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--surface-2);
}

.login-brand-block {
    text-align: center;
    padding-top: 64px;
}

.login-brand-tagline {
    color: var(--text-muted);
    font-size: var(--font-size-body-s);
    line-height: 1.6;
    margin: 0;
}

.login-brand-logo {
    width: 189px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.login-brand-logo--dark {
    display: none;
}

.login-card {
    background: var(--surface-1);
    border: 1px solid #e7e3d8;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(15, 15, 14, 0.05);
}

.login-form-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 2rem;
    box-shadow: none;
}

.login-panel-head {
    margin: 1rem auto;
}

.login-title-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
}

.login-plain-title {
    margin: 0;
    font-size: var(--font-size-title-r);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.02em;
    color: var(--text-title);
    background-color: transparent;
    text-decoration: none;
}


.login-inline-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--accent-orange);
    border-radius: 999px;
    border-radius: 0.875rem;
    background: #F9EBE6;
    color: var(--accent-orange);
    font-size: var(--font-size-body-min);
    line-height: 1;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.login-card-kicker {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-orange);
    font-weight: 600;
}

.login-card-title {
    font-size: var(--font-size-title-rpp);
    line-height: 1.2;
    margin-top: 4px;
    color: var(--text-title);
    font-weight: var(--font-weight-semibold);
}

.login-card-subtitle {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: var(--font-size-body-s);
    line-height: 1.6;
    text-align: center;
}

.login-feature-card {
    margin: 14px 0 8px;
    border: 1px solid var(--surface-5);
    background: var(--surface-1);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.login-feature-label {
    color: var(--text-muted);
    font-size: 14px;
}

.login-feature-value {
    margin-top: 2px;
    font-size: 14px;
    color: var(--text-title);
    font-weight: 600;
}

.login-feature-chip {
    border: 1px solid #edc1b0;
    color: var(--accent-orange);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    background: #fdf4ef;
}

.login-form-grid {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    gap: 20px;
}

.login-input-panel {
    display: flex;
    flex-direction: column;
}

.login-input-panel > fluent-text-field {
    margin-top: 0;
    margin-bottom: 0;
}

.login-input-panel > .login-input-hint {
    display: block;
}

.login-input-label {
    font-size: var(--font-size-body-s);
    color: var(--text-base);
    margin-left: 0.5rem;
}

.login-input-hint,
.login-footer-copy {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

.login-actions-inline {
    display: flex;
    justify-content: flex-end;
}

.login-page fluent-text-field {
    display: block;
    width: 100%;
    height: 48px !important;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    --accent-fill-rest: transparent;
    --accent-fill-hover: transparent;
    --accent-fill-active: transparent;
    --focus-stroke-outer: transparent;
    --focus-stroke-inner: transparent;
    --neutral-stroke-rest: var(--surface-5);
    --neutral-stroke-hover: #c2c0b6;
    --neutral-stroke-focus: var(--accent-orange);
}

.login-page fluent-text-field::part(control) {
    height: 48px !important;
    border-radius: 8px;
    border: 1px solid #c2c0b6;
    background: var(--surface-0);
    color: var(--text-base);
    font-size: 14px;
    box-shadow: none !important;
    outline: none !important;
}

.login-page fluent-text-field::part(control):-webkit-autofill,
.login-page fluent-text-field::part(control):-webkit-autofill:hover,
.login-page fluent-text-field::part(control):-webkit-autofill:focus,
.login-page fluent-text-field::part(control):-webkit-autofill:active {
    -webkit-text-fill-color: var(--text-base) !important;
    caret-color: var(--text-base);
    border: 1px solid #c2c0b6;
    box-shadow: 0 0 0 1000px var(--surface-0) inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

.login-page fluent-text-field::part(root) {
    background: transparent;
}

.login-page fluent-text-field:focus-within::part(control) {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.16) !important;
}

.login-primary-button::part(control) {
    background: #0f0f0e;
    color: var(--surface-1);
    border-radius: 6px;
    width: 100%;
    min-height: 52px;
    height: 52px;
    border: 1px solid #0f0f0e;
}

.login-secondary-button::part(control) {
    border-radius: 6px;
    width: 100%;
    min-height: 52px;
    height: 52px;
    border: 1px solid #0f0f0e;
    background: var(--surface-0);
    color: #0f0f0e;
}

fluent-button.login-primary-button,
fluent-button.login-secondary-button {
    display: block;
    width: 100%;
}

fluent-button.login-primary-button {
    color: var(--surface-1);
}

fluent-button.login-secondary-button {
    color: #0f0f0e;
}

.auth-button-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 24px;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
}

.auth-button-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: currentColor;
}

.auth-button-icon-mask {
    width: 100%;
    height: 100%;
    display: block;
    background-color: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.auth-button-image {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

fluent-button.login-primary-button {
    min-height: 52px;
}

fluent-button.login-secondary-button {
    min-height: 52px;
}

/* Loading state: FluentButton renders <span class="[cls] loading-button"> wrapper when Loading=true.
   The inner fluent-button gets class="accent disabled" and loses its original class name.
   So [loading] attribute selectors never match — target via span.loading-button instead. */
span.login-primary-button.loading-button,
span.login-secondary-button.loading-button {
    display: block !important;
    width: 100% !important;
    position: relative;
    min-height: 52px;
}

span.login-primary-button.loading-button fluent-button,
span.login-secondary-button.loading-button fluent-button {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
}

span.login-primary-button.loading-button fluent-button::part(control) {
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    background: #0f0f0e;
    color: var(--surface-1);
    border-radius: 6px;
    border: 1px solid #0f0f0e;
    box-sizing: border-box;
    opacity: 0.85;
}

span.login-secondary-button.loading-button fluent-button::part(control) {
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    background: var(--surface-0);
    color: #0f0f0e;
    border-radius: 6px;
    border: 1px solid #0f0f0e;
    box-sizing: border-box;
    opacity: 0.85;
}

span.loading-button fluent-progress-ring {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px !important;
    height: 20px !important;
    pointer-events: none;
}

.login-tertiary-button::part(control),
.login-actions-inline fluent-button::part(control) {
    color: var(--accent-orange);
    font-size: 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.login-actions-inline {
    margin-top: 2px;
    margin-bottom: 12px;
}

.login-info-strip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #F0EEE6;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: var(--font-size-body-s);
    color: var(--text-title);
    line-height: 1.6;
}

.login-info-icon {
    width: 20px;
    height: 20px;
    filter: invert(46%) sepia(8%) saturate(220%) hue-rotate(8deg) brightness(92%) contrast(85%);
}

.login-error-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    box-sizing: border-box;
    background: #f0e3dc;
}

.login-error-alert-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.login-error-alert-text {
    flex: 1 1 auto;
    color: #bf4d43;
    font-size: 12px;
    line-height: 1.6;
}

.login-success-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    box-sizing: border-box;
    background: #ecebdf;
    color: #7a8166;
}

.login-success-alert-icon,
.login-success-alert-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.login-success-alert-text {
    flex: 1 1 auto;
    color: inherit;
    font-size: 12px;
    line-height: 1.6;
}

.login-success-alert-close {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.login-success-alert-mask {
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

.login-error-alert-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
}

.login-error-alert-close img {
    width: 20px;
    height: 20px;
    display: block;
}

.login-error-alert-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

@media (max-width: 420px) {

    .quick-action-grid {
        gap: 8px;
    }

    .quick-action-card {
        min-height: 78px;
    }

    .login-page {
        padding: 0 25px;
    }

    .login-card-title {
        font-size: 24px;
    }
}

/* Dark Mode Support */
.app-layout.theme-dark,
.login-layout.theme-dark {
    --surface-0: #2a2a28;
    --surface-1: #302f2d;
    --surface-2: #30302E;
    --surface-3: #3d3c36;
    --surface-5: #4a4844;
    --text-base: #ece8e0;
    --text-title: #faf9f5;
    --text-muted: #a39f97;
}

.login-layout.theme-dark .login-page {
    background: #30302e;
}

.login-layout.theme-dark .login-brand-logo--light {
    display: none;
}

.login-layout.theme-dark .login-brand-logo--dark {
    display: inline-block;
}

.login-layout.theme-dark .login-brand-tagline {
    color: #faf9f5;
    font-weight: 300;
}

.login-layout.theme-dark .login-plain-title {
    color: #f0eee6;
}

.login-layout.theme-dark .login-inline-chip {
    background: #443029;
    border-color: #ac5c42;
    color: #ac5c42;
}

.login-layout.theme-dark .login-card-subtitle,
.login-layout.theme-dark .login-input-hint,
.login-layout.theme-dark .login-footer-copy {
    color: #9c9a92;
}

.login-layout.theme-dark .login-input-label {
    color: #faf9f5;
}

.login-layout.theme-dark .login-card {
    background: #302f2d;
    border: 1px solid #3d3c36;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.login-layout.theme-dark .login-page fluent-text-field::part(control) {
    background: #262624;
    color: #f0eee6;
    border: 1px solid #3d3d3a;
}

.login-layout.theme-dark .login-page fluent-text-field::part(control):-webkit-autofill,
.login-layout.theme-dark .login-page fluent-text-field::part(control):-webkit-autofill:hover,
.login-layout.theme-dark .login-page fluent-text-field::part(control):-webkit-autofill:focus,
.login-layout.theme-dark .login-page fluent-text-field::part(control):-webkit-autofill:active {
    -webkit-text-fill-color: #f0eee6 !important;
    caret-color: #f0eee6;
    border: 1px solid #3d3d3a;
    box-shadow: 0 0 0 1000px #262624 inset !important;
}

.login-layout.theme-dark .login-page fluent-text-field {
    --neutral-stroke-rest: #3d3d3a;
    --neutral-stroke-hover: #4a4844;
    --neutral-stroke-focus: #ac5c42;
}

.login-layout.theme-dark .login-page fluent-text-field:focus-within::part(control) {
    border-color: #ac5c42;
    box-shadow: 0 0 0 2px rgba(172, 92, 66, 0.24) !important;
}

.login-layout.theme-dark .login-page fluent-text-field::part(label),
.login-layout.theme-dark .login-page fluent-text-field::part(control)::placeholder {
    color: #9c9a92;
}

.login-layout.theme-dark .login-error-alert {
    background: rgba(191, 77, 67, 0.2);
}

.login-layout.theme-dark .app-alert--error,
.login-layout.theme-dark .app-alert--warning {
    background: rgba(191, 77, 67, 0.2);
    color: #f6cdc4;
}

.login-layout.theme-dark .app-alert--info {
    background: #3b3934;
    color: #ece8e0;
}

.login-layout.theme-dark .app-alert--success {
    background: rgba(122, 129, 102, 0.2);
    color: #dbe3bf;
}

.login-layout.theme-dark .login-error-alert-text {
    color: #f6cdc4;
}

.login-layout.theme-dark .login-success-alert {
    background: rgba(122, 129, 102, 0.2);
    color: #dbe3bf;
}

.login-layout.theme-dark .login-primary-button::part(control) {
    background: #dedcd1;
    color: #3d3d3a;
    border: 1px solid #dedcd1;
}

.login-layout.theme-dark fluent-button.login-primary-button {
    color: #3d3d3a;
}

.login-layout.theme-dark fluent-button.login-primary-button:hover::part(control),
.login-layout.theme-dark fluent-button.login-primary-button:focus-visible::part(control) {
    background: #e8e6dc;
    border-color: #e8e6dc;
    box-shadow: 0 5px 7.5px rgba(0, 0, 0, 0.25);
}

.login-layout.theme-dark fluent-button.login-primary-button:active::part(control) {
    background: #f0eee6;
    border-color: #f0eee6;
    box-shadow: none;
}

.login-layout.theme-dark fluent-button.login-primary-button[disabled]::part(control),
.login-layout.theme-dark fluent-button.login-primary-button[aria-disabled="true"]::part(control) {
    background: #9c9a92;
    border-color: #9c9a92;
    color: #d1cfc5;
    box-shadow: none;
}

.login-layout.theme-dark fluent-button.login-primary-button[disabled],
.login-layout.theme-dark fluent-button.login-primary-button[aria-disabled="true"] {
    color: #d1cfc5;
}

.login-layout.theme-dark span.login-primary-button.loading-button fluent-button::part(control) {
    background: #f0eee6;
    border-color: #f0eee6;
    color: #3d3d3a;
    opacity: 0.85;
}

.login-layout.theme-dark .login-secondary-button::part(control) {
    background: #262624;
    border: 1px solid #9c9a92;
    color: #9c9a92;
}

.login-layout.theme-dark fluent-button.login-secondary-button {
    color: #9c9a92;
}

.login-layout.theme-dark .login-tertiary-button::part(control),
.login-layout.theme-dark .login-actions-inline fluent-button::part(control) {
    color: #ac5c42;
}

.login-layout.theme-dark .login-info-strip {
    background: #3d3d3a;
    color: #faf9f5;
}

.login-layout.theme-dark .login-info-icon {
    filter: invert(67%) sepia(4%) saturate(192%) hue-rotate(8deg) brightness(92%) contrast(86%);
}

.app-layout.theme-dark .balance-card {
    background: #dedcd1;
    color: #141413;
}

.app-layout.theme-dark .balance-card-currency {
    color: #9c9a92;
}

.app-layout.theme-dark .balance-card-label {
    color: #ac5c42;
    font-weight: 400;
}

.app-layout.theme-dark .balance-card-meta {
    background: #ac5c42;
    color: #faf9f5;
}

.app-layout.theme-dark .home-warning-alert {
    background: #3e3330;
    color: #BF4D43;
}

.app-layout.theme-dark .app-alert--error,
.app-layout.theme-dark .app-alert--warning {
    background: #3e3330;
    color: #BF4D43;
}

.app-layout.theme-dark .app-alert--info {
    background: #3D3D3A;
    color: #ece8e0;
}

.app-layout.theme-dark .app-alert--success {
    background: rgba(122, 129, 102, 0.2);
    color: #dbe3bf;
}

.app-layout.theme-dark .status-pill.success {
    background: #353a2d;
    color: #7d975b;
}

.app-layout.theme-dark .quick-action-card {
    background: #af9f85;
    color: #faf9f5;
}

.app-layout.theme-dark .quick-action-title {
    color: #f0eee6;
}

.app-layout.theme-dark .quick-action-icon.icon-receive {
    background: #353a2d;
}

.app-layout.theme-dark .quick-action-icon.icon-send {
    background: #443029;
}

.app-layout.theme-dark .quick-action-icon.icon-swap {
    background: #262624;
}

.app-layout.theme-dark .segment-control {
    background: #2a2a28;
}

.app-layout.theme-dark .segment-item.active {
    background: #3d3c36;
    color: #faf9f5;
    box-shadow: none;
}

.app-layout.theme-dark .receive-qr-card,
.app-layout.theme-dark .address-panel,
.app-layout.theme-dark .form-panel,
.app-layout.theme-dark .summary-panel,
.app-layout.theme-dark .history-card,
.app-layout.theme-dark .settings-row.static-row {
    background: #302f2d;
    border-color: #4a4844;
}

.app-layout.theme-dark .qr-frame,
.app-layout.theme-dark .ghost-pill {
    background: #2a2a28;
}

.app-layout.theme-dark .send-select,
.app-layout.theme-dark .send-input {
    background: #262624;
    border-color: #3d3d3a;
    color: #faf9f5;
}

.app-layout.theme-dark .send-select,
.app-layout.theme-dark .send-select option,
.app-layout.theme-dark .send-input::placeholder {
    color: #9c9a92;
}

.app-layout.theme-dark .send-input {
    color: #faf9f5;
}

.app-layout.theme-dark .omw-password-toggle,
.login-layout.theme-dark .omw-password-toggle {
    color: #9c9a92;
}

.app-layout.theme-dark .omw-password-toggle:hover,
.login-layout.theme-dark .omw-password-toggle:hover {
    color: #faf9f5;
}

.app-layout.theme-dark .form-field-label {
    color: #9c9a92;
}

.app-layout.theme-dark .form-field-label-base {
    color: #faf9f5;
}

.app-layout.theme-dark .send-select-wrap .send-network-dot.network-trc20 {
    background: #7d975b;
}

.app-layout.theme-dark .send-select-wrap .send-network-dot.network-erc20 {
    background: #ac5c42;
}

.app-layout.theme-dark .send-select-chevron {
    color: #b0aea5;
}

.app-layout.theme-dark .send-select {
    background: #3d3d3a;
}

.app-layout.theme-dark .send-amount-input {
    background: #3d3d3a;
    border-color: #3d3d3a;
    color: #faf9f5;
}

.app-layout.theme-dark .ghost-pill {
    background: #443029;
    border-color: #ac5c42;
    color: #ac5c42;
}

.app-layout.theme-dark .send-fee-card {
    background: #0f0f0e;
}

.app-layout.theme-dark .send-fee-label {
    color: #9c9a92;
}

.app-layout.theme-dark .send-fee-value,
.app-layout.theme-dark .send-fee-unit,
.app-layout.theme-dark .send-fee-total-label {
    color: #faf9f5;
}

.app-layout.theme-dark .send-fee-total-value {
    color: #f0eee6;
}

.app-layout.theme-dark .send-fee-divider {
    background: #30302e;
}

.app-layout.theme-dark .send-inline-alert {
    background: #3e3330;
    color: #d75448;
}

.app-layout.theme-dark .send-submit-button[disabled]::part(control) {
    background: #3d3d3a !important;
    border-color: #3d3d3a !important;
    color: #1a1918 !important;
}

.app-layout.theme-dark .send-submit-button[disabled] .send-submit-content,
.app-layout.theme-dark .send-submit-button[disabled] .send-submit-icon,
.app-layout.theme-dark .send-submit-button[disabled] .send-submit-icon-mask {
    color: #1a1918 !important;
}

.app-layout.theme-dark .receive-segment-control {
    background: #262624;
}

.app-layout.theme-dark .receive-segment-item {
    color: #f0eee6;
}

.app-layout.theme-dark .receive-segment-item.active {
    background: #dedcd1;
    color: #141413;
}

.app-layout.theme-dark .receive-warning-bar {
    background: #262624;
}

.app-layout.theme-dark .receive-qr-surface {
    background: #262624;
}

.app-layout.theme-dark .receive-address-card {
    background: #262624;
    border-color: #3D3D3A;
}

.app-layout.theme-dark .receive-info-strip {
    background: #3D3D3A;
}

.app-layout.theme-dark .receive-address-label {
    color: #9c9a92;
}

.app-layout.theme-dark .receive-address-value,
.app-layout.theme-dark .receive-info-icon {
    color: #faf9f5;
}

.app-layout.theme-dark .receive-info-text {
    color: #faf9f5;
}

.app-layout.theme-dark .receive-address-value.missing,
.app-layout.theme-dark .receive-qr-placeholder {
    color: #9c9a92;
}

.app-layout.theme-dark .receive-copy-icon-button {
    background: #3d3d3a;
    color: #f5f4ed;
}

.app-layout.theme-dark .send-select:focus,
.app-layout.theme-dark .send-input:focus {
    border-color: var(--accent-orange);
}

.app-layout.theme-dark .qr-container {
    background: #262624;
}

.app-layout.theme-dark .address-readonly-field,
.app-layout.theme-dark .theme-mode-button {
    background: #2a2a28;
    border-color: #4a4844;
    color: #ece8e0;
}

.app-layout.theme-dark .theme-mode-button.active {
    background: #f5f4ed;
    border-color: #f5f4ed;
    color: #0f0f0e;
}

.app-layout.theme-dark .receive-copy-button::part(control) {
    background: #f5f4ed;
    border-color: #f5f4ed;
    color: #0f0f0e;
}

.app-layout.theme-dark .form-panel fluent-text-field,
.app-layout.theme-dark .form-panel fluent-number-field {
    --neutral-fill-input-rest: #262522;
    --neutral-fill-input-hover: #2c2a27;
    --neutral-fill-input-active: #262522;
    --neutral-stroke-rest: #4a4844;
    --neutral-stroke-hover: #5a5853;
}

.app-layout.theme-dark .form-panel fluent-text-field::part(control),
.app-layout.theme-dark .form-panel fluent-number-field::part(control) {
    border-color: #4a4844;
    background: #262522;
}

.app-layout.theme-dark .form-panel fluent-text-field::part(label),
.app-layout.theme-dark .form-panel fluent-number-field::part(label) {
    color: #baab9d;
}

.app-layout.theme-dark .wallet-tx-list,
.app-layout.theme-dark .tx-card.wallet-tx-card,
.app-layout.theme-dark .profile-card {
    background: #0F0F0E;
}

.app-layout.theme-dark .wallet-tx-divider {
    background: #30302e;
}

.app-layout.theme-dark .section-title {
    color: #faf9f5;
}

.app-layout.theme-dark .section-link {
    color: #9c9a92;
}

.app-layout.theme-dark .mobile-shell,
.app-layout.theme-dark .app-body,
.app-layout.theme-dark .home-page-content {
    background: #30302e;
}

.app-layout.theme-dark .brand-logo--light {
    display: none;
}

.app-layout.theme-dark .brand-logo--dark {
    display: inline-block;
}

.app-layout.theme-dark .tx-icon-wrap.deposit {
    background: #353a2d;
}

.app-layout.theme-dark .tx-icon-wrap.deposit,
.app-layout.theme-dark .tx-icon-wrap.deposit *,
.app-layout.theme-dark .tx-icon-wrap.deposit svg,
.app-layout.theme-dark .tx-icon-wrap.deposit svg * {
    color: #7d975b !important;
    fill: #7d975b !important;
    stroke: #7d975b !important;
}

.app-layout.theme-dark .tx-icon-wrap.withdrawal {
    background: #443029;
}

.app-layout.theme-dark .tx-icon-wrap.withdrawal,
.app-layout.theme-dark .tx-icon-wrap.withdrawal *,
.app-layout.theme-dark .tx-icon-wrap.withdrawal svg,
.app-layout.theme-dark .tx-icon-wrap.withdrawal svg * {
    color: #ac5c42 !important;
    fill: #ac5c42 !important;
    stroke: #ac5c42 !important;
}

.app-layout.theme-dark .home-info-alert {
    background: #3b3934;
}

.app-layout.theme-dark .home-info-alert-text {
    color: #ece8e0;
}

.app-layout.theme-dark .network-chip.network-trc20 {
    background: #353a2d;
    color: #7d975b;
}

.app-layout.theme-dark .network-chip.network-erc20 {
    background: #3e3330;
    color: #bf4d43;
}

.app-layout.theme-dark .amount.tx-amount-value.deposit {
    color: #7d975b;
}

.app-layout.theme-dark .amount.tx-amount-value.withdrawal {
    color: #ac5c42;
}

.app-layout.theme-dark .wallet-status-badge {
    background: #1f1f1c;
    color: #a6a39a;
}

.app-layout.theme-dark .wallet-tx-status-text,
.app-layout.theme-dark .tx-time {
    color: #a6a39a;
}

.app-layout.theme-dark .settings-group {
    border-color: #4a4844;
}

.app-layout.theme-dark .settings-row {
    border-color: #4a4844;
    color: #ece8e0;
}

.app-layout.theme-dark .settings-icon {
    background: #ac5c42;
    color: #141413;
    box-shadow: none;
}

.app-layout.theme-dark .settings-icon.tone-orange {
    background: #ac5c42;
    color: #141413;
}

.app-layout.theme-dark .settings-icon.tone-green {
    background: #ac5c42;
    color: #141413;
}

.app-layout.theme-dark .settings-icon.tone-blue {
    background: #ac5c42;
    color: #141413;
}

.app-layout.theme-dark .settings-icon.tone-neutral {
    background: #ac5c42;
    color: #141413;
}

.app-layout.theme-dark .settings-row-end {
    color: #b0aea5;
}

.app-layout.theme-dark .settings-disclosure-button:focus-visible {
    outline-color: #ac5c42;
}

.app-layout.theme-dark .settings-switch {
    border-color: #ac5c42;
    background: #262624;
}

.app-layout.theme-dark .settings-switch-thumb {
    background: #ac5c42;
}

.app-layout.theme-dark .settings-switch.selected {
    border-color: #ac5c42;
    background: #ac5c42;
}

.app-layout.theme-dark .settings-switch.selected .settings-switch-thumb {
    background: #FAF9F5;
}

.app-layout.theme-dark .settings-option-item {
    border-color: #4a4844;
    background: #262624;
}

.app-layout.theme-dark .settings-option-item.active {
    border-color: #ac5c42;
    background: #302a26;
}

.app-layout.theme-dark .settings-option-title {
    color: #ece8e0;
}

.app-layout.theme-dark .settings-option-check {
    background-color: #ac5c42;
}

.app-layout.theme-dark .settings-whitelist-item {
    background: #262624;
    border-color: #4a4844;
}

.app-layout.theme-dark .settings-whitelist-title {
    color: #ece8e0;
}

.app-layout.theme-dark .settings-whitelist-address {
    color: #b0aea5;
}

.app-layout.theme-dark .settings-whitelist-chip {
    background: #3b3934;
    color: #e7c1b3;
}

.app-layout.theme-dark .settings-whitelist-chip.verified {
    background: #353a2d;
    color: #b9c99a;
}

.app-layout.theme-dark .settings-whitelist-chip.pending {
    background: #3e3330;
    color: #f0b9af;
}

.app-layout.theme-dark .settings-whitelist-remove::part(control) {
    color: #f0b9af;
}

.whitelist-page-content {
    padding-top: 8px;
    padding-bottom: 132px;
}

.whitelist-add-button {
    position: fixed;
    left: max(16px, calc(50% - 179px));
    bottom: 136px;
    z-index: 5;
}

.whitelist-add-button::part(control) {
    min-width: 108px;
    min-height: 46px;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.app-layout.theme-dark .settings-switch:disabled,
.app-layout.theme-dark .settings-switch.disabled {
    background: #4d4c48;
    border-color: #4d4c48;
}

.app-layout.theme-dark .settings-switch:disabled .settings-switch-thumb,
.app-layout.theme-dark .settings-switch.disabled .settings-switch-thumb {
    background: #30302e;
}

.app-layout.theme-dark .settings-signout-button::part(control) {
    background: #262624;
    border-color: #9c9a92;
    color: #9c9a92;
}

.app-layout.theme-dark .settings-signout-button .send-submit-content,
.app-layout.theme-dark .settings-signout-button .send-submit-icon,
.app-layout.theme-dark .settings-signout-button .send-submit-icon-mask {
    color: #9c9a92;
}

.app-layout.theme-dark .history-filter-button {
    color: #9c9a92;
}

.app-layout.theme-dark .history-filter-button.active {
    color: #ffffff;
}

.app-layout.theme-dark .history-approve-button {
    --accent-fill-rest: #f0eee6;
    --accent-fill-hover: #dedcd1;
    --accent-fill-active: #f0eee6;
    --accent-foreground-rest: #0f0f0e;
    --accent-foreground-hover: #0f0f0e;
    --accent-foreground-active: #0f0f0e;
}

.app-layout.theme-dark .history-approve-button::part(control) {
    background: #f0eee6;
    border-color: #f0eee6;
    color: #0f0f0e;
}

.app-layout.theme-dark .bottom-nav {
    background: #302f2d;
    border-color: #4a4844;
}

.app-layout.theme-dark .bottom-nav-item {
    color: #5e5d59;
}

.app-layout.theme-dark .bottom-nav-item.active {
    color: #ac5c42;
}

.app-layout.theme-dark .bottom-nav-item:not(.active) .bottom-nav-icon {
    color: #c2c0b6;
}

.app-layout.theme-dark .bottom-nav-item.active .bottom-nav-icon {
    color: #ac5c42;
}

.app-layout.theme-dark .header-title {
    color: #faf9f5;
}

.app-layout.theme-dark .header-avatar {
    background: #5e5d59;
    color: #9c9a92;
}

.login-layout.theme-dark .verify-email-page {
    background: #2d2c29;
}

.login-layout.theme-dark .verify-email-button-secondary {
    border-color: #ece8e0;
    background: #302f2d;
    color: #ece8e0;
}

@media (prefers-color-scheme: dark) {
    .app-layout.theme-system,
    .login-layout.theme-system {
        --surface-0: #2a2a28;
        --surface-1: #302f2d;
        --surface-2: #36352f;
        --surface-3: #3d3c36;
        --surface-5: #4a4844;

        --text-base: #ece8e0;
        --text-title: #faf9f5;
        --text-muted: #a39f97;
    }

    .login-layout.theme-system .login-page {
        background: #30302e;
    }

    .login-layout.theme-system .login-brand-logo--light {
        display: none;
    }

    .login-layout.theme-system .login-brand-logo--dark {
        display: inline-block;
    }

    .login-layout.theme-system .login-brand-tagline {
        color: #faf9f5;
        font-weight: 300;
    }

    .login-layout.theme-system .login-plain-title {
        color: #f0eee6;
    }

    .login-layout.theme-system .login-inline-chip {
        background: #443029;
        border-color: #ac5c42;
        color: #ac5c42;
    }

    .login-layout.theme-system .login-card-subtitle,
    .login-layout.theme-system .login-input-hint,
    .login-layout.theme-system .login-footer-copy {
        color: #9c9a92;
    }

    .login-layout.theme-system .login-input-label {
        color: #faf9f5;
    }

    .login-layout.theme-system .login-card {
        background: #302f2d;
        border: 1px solid #3d3c36;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    }

    .login-layout.theme-system .login-page fluent-text-field::part(control) {
        background: #262624;
        color: #f0eee6;
        border: 1px solid #3d3d3a;
    }

    .login-layout.theme-system .login-page fluent-text-field::part(control):-webkit-autofill,
    .login-layout.theme-system .login-page fluent-text-field::part(control):-webkit-autofill:hover,
    .login-layout.theme-system .login-page fluent-text-field::part(control):-webkit-autofill:focus,
    .login-layout.theme-system .login-page fluent-text-field::part(control):-webkit-autofill:active {
        -webkit-text-fill-color: #f0eee6 !important;
        caret-color: #f0eee6;
        border: 1px solid #3d3d3a;
        box-shadow: 0 0 0 1000px #262624 inset !important;
    }

    .login-layout.theme-system .login-page fluent-text-field {
        --neutral-stroke-rest: #3d3d3a;
        --neutral-stroke-hover: #4a4844;
        --neutral-stroke-focus: #ac5c42;
    }

    .login-layout.theme-system .login-page fluent-text-field:focus-within::part(control) {
        border-color: #ac5c42;
        box-shadow: 0 0 0 2px rgba(172, 92, 66, 0.24) !important;
    }

    .login-layout.theme-system .login-page fluent-text-field::part(label),
    .login-layout.theme-system .login-page fluent-text-field::part(control)::placeholder {
        color: #9c9a92;
    }

    .login-layout.theme-system .login-error-alert {
        background: rgba(191, 77, 67, 0.2);
    }

    .login-layout.theme-system .app-alert--error,
    .login-layout.theme-system .app-alert--warning {
        background: rgba(191, 77, 67, 0.2);
        color: #f6cdc4;
    }

    .login-layout.theme-system .app-alert--info {
        background: #3b3934;
        color: #ece8e0;
    }

    .login-layout.theme-system .app-alert--success {
        background: rgba(122, 129, 102, 0.2);
        color: #dbe3bf;
    }

    .login-layout.theme-system .login-error-alert-text {
        color: #f6cdc4;
    }

    .login-layout.theme-system .login-success-alert {
        background: rgba(122, 129, 102, 0.2);
        color: #dbe3bf;
    }

    .app-layout.theme-system .app-alert--error,
    .app-layout.theme-system .app-alert--warning {
        background: #3e3330;
        color: #BF4D43;
    }

    .app-layout.theme-system .app-alert--info {
        background: #3b3934;
        color: #ece8e0;
    }

    .app-layout.theme-system .app-alert--success {
        background: rgba(122, 129, 102, 0.2);
        color: #dbe3bf;
    }

    .app-layout.theme-system .status-pill.success {
        background: #353a2d;
        color: #7d975b;
    }

    .login-layout.theme-system .login-primary-button::part(control) {
        background: #dedcd1;
        color: #3d3d3a;
        border: 1px solid #dedcd1;
    }

    .login-layout.theme-system fluent-button.login-primary-button {
        color: #3d3d3a;
    }

    .login-layout.theme-system fluent-button.login-primary-button:hover::part(control),
    .login-layout.theme-system fluent-button.login-primary-button:focus-visible::part(control) {
        background: #e8e6dc;
        border-color: #e8e6dc;
        box-shadow: 0 5px 7.5px rgba(0, 0, 0, 0.25);
    }

    .login-layout.theme-system fluent-button.login-primary-button:active::part(control) {
        background: #f0eee6;
        border-color: #f0eee6;
        box-shadow: none;
    }

    .login-layout.theme-system fluent-button.login-primary-button[disabled]::part(control),
    .login-layout.theme-system fluent-button.login-primary-button[aria-disabled="true"]::part(control) {
        background: #9c9a92;
        border-color: #9c9a92;
        color: #d1cfc5;
        box-shadow: none;
    }

    .login-layout.theme-system fluent-button.login-primary-button[disabled],
    .login-layout.theme-system fluent-button.login-primary-button[aria-disabled="true"] {
        color: #d1cfc5;
    }

    .login-layout.theme-system span.login-primary-button.loading-button fluent-button::part(control) {
        background: #f0eee6;
        border-color: #f0eee6;
        color: #3d3d3a;
        opacity: 0.85;
    }

    .login-layout.theme-system .login-secondary-button::part(control) {
        background: #262624;
        border: 1px solid #9c9a92;
        color: #9c9a92;
    }

    .login-layout.theme-system fluent-button.login-secondary-button {
        color: #9c9a92;
    }

    .login-layout.theme-system .login-tertiary-button::part(control),
    .login-layout.theme-system .login-actions-inline fluent-button::part(control) {
        color: #ac5c42;
    }

    .login-layout.theme-system .login-info-strip {
        background: #3d3d3a;
        color: #faf9f5;
    }

    .login-layout.theme-system .login-info-icon {
        filter: invert(67%) sepia(4%) saturate(192%) hue-rotate(8deg) brightness(92%) contrast(86%);
    }

    .app-layout.theme-system .balance-card {
        background: #dedcd1;
        color: #141413;
    }

    .app-layout.theme-system .balance-card-currency {
        color: #9c9a92;
    }

    .app-layout.theme-system .balance-card-label {
        color: #ac5c42;
    }

    .app-layout.theme-system .balance-card-meta {
        background: #ac5c42;
        color: #faf9f5;
    }

    .app-layout.theme-system .home-warning-alert {
        background: #3e3330;
        color: #BF4D43;
    }

    .app-layout.theme-system .quick-action-card {
        background: #af9f85;
        color: #faf9f5;
    }

    .app-layout.theme-system .quick-action-title {
        color: #f0eee6;
    }

    .app-layout.theme-system .quick-action-icon.icon-receive {
        background: #353a2d;
    }

    .app-layout.theme-system .quick-action-icon.icon-send {
        background: #443029;
    }

    .app-layout.theme-system .quick-action-icon.icon-swap {
        background: #262624;
    }

    .app-layout.theme-system .segment-control {
        background: #2a2a28;
    }

    .app-layout.theme-system .segment-item.active {
        background: #3d3c36;
        color: #faf9f5;
        box-shadow: none;
    }

    .app-layout.theme-system .receive-qr-card,
    .app-layout.theme-system .address-panel,
    .app-layout.theme-system .form-panel,
    .app-layout.theme-system .summary-panel,
    .app-layout.theme-system .history-card,
    .app-layout.theme-system .settings-row.static-row {
        background: #302f2d;
        border-color: #4a4844;
    }

    .app-layout.theme-system .qr-frame,
    .app-layout.theme-system .ghost-pill {
        background: #2a2a28;
    }

    .app-layout.theme-system .send-select,
    .app-layout.theme-system .send-input {
        background: #262624;
        border-color: #3d3d3a;
        color: #faf9f5;
    }

    .app-layout.theme-system .send-select,
    .app-layout.theme-system .send-select option,
    .app-layout.theme-system .send-input::placeholder {
        color: #9c9a92;
    }

    .app-layout.theme-system .send-input {
        color: #faf9f5;
    }

    .app-layout.theme-system .omw-password-toggle,
    .login-layout.theme-system .omw-password-toggle {
        color: #9c9a92;
    }

    .app-layout.theme-system .omw-password-toggle:hover,
    .login-layout.theme-system .omw-password-toggle:hover {
        color: #faf9f5;
    }

    .app-layout.theme-system .form-field-label {
        color: #9c9a92;
    }

    .app-layout.theme-system .form-field-label-base {
        color: #faf9f5;
    }

    .app-layout.theme-system .send-select-wrap .send-network-dot.network-trc20 {
        background: #7d975b;
    }

    .app-layout.theme-system .send-select-wrap .send-network-dot.network-erc20 {
        background: #ac5c42;
    }

    .app-layout.theme-system .send-select-chevron {
        color: #b0aea5;
    }

    .app-layout.theme-system .send-select {
        background: #3d3d3a;
    }

    .app-layout.theme-system .send-amount-input {
        background: #3d3d3a;
        border-color: #3d3d3a;
        color: #faf9f5;
    }

    .app-layout.theme-system .ghost-pill {
        background: #443029;
        border-color: #ac5c42;
        color: #ac5c42;
    }

    .app-layout.theme-system .send-fee-card {
        background: #0f0f0e;
    }

    .app-layout.theme-system .send-fee-label {
        color: #9c9a92;
    }

    .app-layout.theme-system .send-fee-value,
    .app-layout.theme-system .send-fee-unit,
    .app-layout.theme-system .send-fee-total-label {
        color: #faf9f5;
    }

    .app-layout.theme-system .send-fee-total-value {
        color: #f0eee6;
    }

    .app-layout.theme-system .send-fee-divider {
        background: #30302e;
    }

    .app-layout.theme-system .send-inline-alert {
        background: #3e3330;
        color: #d75448;
    }

    .app-layout.theme-system .send-submit-button[disabled]::part(control) {
        background: #3d3d3a !important;
        border-color: #3d3d3a !important;
        color: #1a1918 !important;
    }

    .app-layout.theme-system .send-submit-button[disabled] .send-submit-content,
    .app-layout.theme-system .send-submit-button[disabled] .send-submit-icon,
    .app-layout.theme-system .send-submit-button[disabled] .send-submit-icon-mask {
        color: #1a1918 !important;
    }

    .app-layout.theme-system .receive-segment-control {
        background: #262624;
    }

    .app-layout.theme-system .receive-segment-item {
        color: #f0eee6;
    }

    .app-layout.theme-system .receive-segment-item.active {
        background: #dedcd1;
        color: #141413;
    }

    .app-layout.theme-system .receive-warning-bar {
        background: #262624;
    }

    .app-layout.theme-system .receive-qr-surface {
        background: #262624;
    }

    .app-layout.theme-system .receive-address-card,
    .app-layout.theme-system .receive-info-strip {
        background: #262624;
        border-color: #3d3d3a;
    }

    .app-layout.theme-system .receive-address-label {
        color: #9c9a92;
    }

    .app-layout.theme-system .receive-address-value,
    .app-layout.theme-system .receive-info-icon {
        color: #faf9f5;
    }

    .app-layout.theme-system .receive-info-text {
        color: #faf9f5;
    }

    .app-layout.theme-system .receive-address-value.missing,
    .app-layout.theme-system .receive-qr-placeholder {
        color: #9c9a92;
    }

    .app-layout.theme-system .receive-copy-icon-button {
        background: #3d3d3a;
        color: #f5f4ed;
    }

    .app-layout.theme-system .qr-container {
        background: #262624;
    }

    .app-layout.theme-system .address-readonly-field,
    .app-layout.theme-system .theme-mode-button {
        background: #2a2a28;
        border-color: #4a4844;
        color: #ece8e0;
    }

    .app-layout.theme-system .theme-mode-button.active {
        background: #f5f4ed;
        border-color: #f5f4ed;
        color: #0f0f0e;
    }

    .app-layout.theme-system .receive-copy-button::part(control) {
        background: #f5f4ed;
        border-color: #f5f4ed;
        color: #0f0f0e;
    }

    .app-layout.theme-system .form-panel fluent-text-field,
    .app-layout.theme-system .form-panel fluent-number-field {
        --neutral-fill-input-rest: #262522;
        --neutral-fill-input-hover: #2c2a27;
        --neutral-fill-input-active: #262522;
        --neutral-stroke-rest: #4a4844;
        --neutral-stroke-hover: #5a5853;
    }

    .app-layout.theme-system .form-panel fluent-text-field::part(control),
    .app-layout.theme-system .form-panel fluent-number-field::part(control) {
        border-color: #4a4844;
        background: #262522;
    }

    .app-layout.theme-system .form-panel fluent-text-field::part(label),
    .app-layout.theme-system .form-panel fluent-number-field::part(label) {
        color: #baab9d;
    }

    .app-layout.theme-system .wallet-tx-list,
    .app-layout.theme-system .tx-card.wallet-tx-card {
        background: #11110f;
    }

    .app-layout.theme-system .wallet-tx-divider {
        background: #30302e;
    }

    .app-layout.theme-system .section-title {
        color: #faf9f5;
    }

    .app-layout.theme-system .section-link {
        color: #9c9a92;
    }

    .app-layout.theme-system .mobile-shell,
    .app-layout.theme-system .app-body,
    .app-layout.theme-system .home-page-content {
        background: #30302e;
    }

    .app-layout.theme-system .brand-logo--light {
        display: none;
    }

    .app-layout.theme-system .brand-logo--dark {
        display: inline-block;
    }

    .app-layout.theme-system .tx-icon-wrap.deposit {
        background: #353a2d;
    }

    .app-layout.theme-system .tx-icon-wrap.deposit,
    .app-layout.theme-system .tx-icon-wrap.deposit *,
    .app-layout.theme-system .tx-icon-wrap.deposit svg,
    .app-layout.theme-system .tx-icon-wrap.deposit svg * {
        color: #7d975b !important;
        fill: #7d975b !important;
        stroke: #7d975b !important;
    }

    .app-layout.theme-system .tx-icon-wrap.withdrawal {
        background: #443029;
    }

    .app-layout.theme-system .tx-icon-wrap.withdrawal,
    .app-layout.theme-system .tx-icon-wrap.withdrawal *,
    .app-layout.theme-system .tx-icon-wrap.withdrawal svg,
    .app-layout.theme-system .tx-icon-wrap.withdrawal svg * {
        color: #ac5c42 !important;
        fill: #ac5c42 !important;
        stroke: #ac5c42 !important;
    }

    .app-layout.theme-system .home-info-alert {
        background: #3b3934;
    }

    .app-layout.theme-system .home-info-alert-text {
        color: #ece8e0;
    }

    .app-layout.theme-system .network-chip.network-trc20 {
        background: #353a2d;
        color: #7d975b;
    }

    .app-layout.theme-system .network-chip.network-erc20 {
        background: #3e3330;
        color: #bf4d43;
    }

    .app-layout.theme-system .amount.tx-amount-value.deposit {
        color: #7d975b;
    }

    .app-layout.theme-system .amount.tx-amount-value.withdrawal {
        color: #ac5c42;
    }

    .app-layout.theme-system .wallet-status-badge {
        background: #1f1f1c;
        color: #a6a39a;
    }

    .app-layout.theme-system .wallet-tx-status-text,
    .app-layout.theme-system .tx-time {
        color: #a6a39a;
    }

    .app-layout.theme-system .profile-card {
        background: #302f2d;
    }

    .app-layout.theme-system .settings-group {
        border-color: #4a4844;
    }

    .app-layout.theme-system .settings-row {
        border-color: #4a4844;
        color: #ece8e0;
    }

    .app-layout.theme-system .settings-icon {
        background: #ac5c42;
        color: #141413;
        box-shadow: none;
    }

    .app-layout.theme-system .settings-icon.tone-orange {
        background: #ac5c42;
        color: #141413;
    }

    .app-layout.theme-system .settings-icon.tone-green {
        background: #ac5c42;
        color: #141413;
    }

    .app-layout.theme-system .settings-icon.tone-blue {
        background: #ac5c42;
        color: #141413;
    }

    .app-layout.theme-system .settings-icon.tone-neutral {
        background: #ac5c42;
        color: #141413;
    }

    .app-layout.theme-system .settings-row-end {
        color: #b0aea5;
    }

    .app-layout.theme-system .settings-switch {
        border-color: #ac5c42;
        background: #262624;
    }

    .app-layout.theme-system .settings-switch-thumb {
        background: #ac5c42;
    }

    .app-layout.theme-system .settings-switch.selected {
        border-color: #ac5c42;
        background: #ac5c42;
    }

    .app-layout.theme-system .settings-switch.selected .settings-switch-thumb {
        background: #262624;
    }

    .app-layout.theme-system .settings-switch:disabled,
    .app-layout.theme-system .settings-switch.disabled {
        background: #4d4c48;
        border-color: #4d4c48;
    }

    .app-layout.theme-system .settings-switch:disabled .settings-switch-thumb,
    .app-layout.theme-system .settings-switch.disabled .settings-switch-thumb {
        background: #30302e;
    }

    .app-layout.theme-system .settings-signout-button::part(control) {
        background: #262624;
        border-color: #9c9a92;
        color: #9c9a92;
    }

    .app-layout.theme-system .settings-signout-button .send-submit-content,
    .app-layout.theme-system .settings-signout-button .send-submit-icon,
    .app-layout.theme-system .settings-signout-button .send-submit-icon-mask {
        color: #9c9a92;
    }

    .app-layout.theme-system .history-filter-button {
        color: #9c9a92;
    }

    .app-layout.theme-system .history-filter-button.active {
        color: #ffffff;
    }

    .app-layout.theme-system .history-approve-button {
        --accent-fill-rest: #f0eee6;
        --accent-fill-hover: #dedcd1;
        --accent-fill-active: #f0eee6;
        --accent-foreground-rest: #0f0f0e;
        --accent-foreground-hover: #0f0f0e;
        --accent-foreground-active: #0f0f0e;
    }

    .app-layout.theme-system .history-approve-button::part(control) {
        background: #f0eee6;
        border-color: #f0eee6;
        color: #0f0f0e;
    }

    .app-layout.theme-system .bottom-nav {
        background: #302f2d;
        border-color: #4a4844;
    }

    .app-layout.theme-system .bottom-nav-item {
        color: #5e5d59;
    }

    .app-layout.theme-system .bottom-nav-item.active {
        color: #ac5c42;
    }

    .app-layout.theme-system .bottom-nav-item:not(.active) .bottom-nav-icon {
        color: #c2c0b6;
    }

    .app-layout.theme-system .bottom-nav-item.active .bottom-nav-icon {
        color: #ac5c42;
    }

    .app-layout.theme-system .header-avatar {
        background: #5e5d59;
        color: #9c9a92;
    }
}

/* Email Verification Page */
.verify-email-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--surface-0);
    padding: 24px;
}

.verify-email-header {
    text-align: center;
    margin-bottom: 64px;
    margin-top: 32px;
}

.verify-email-tagline {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    font-family: var(--font-family-base);
}

.verify-email-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    max-width: 345px;
}

.verify-email-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: 100%;
}

.verify-email-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-title);
    text-align: center;
    margin: 0 0 16px 0;
    font-family: var(--font-family-base);
}

.verify-email-icon {
    width: 72px;
    height: 72px;
    margin: 16px 0;
    color: var(--text-muted);
}

.verify-email-icon-container {
    width: 72px;
    height: 72px;
    margin: 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verify-email-icon-mask {
    display: block;
    width: 72px;
    height: 72px;
    background-color: var(--text-muted);
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.verify-email-alert-icon-mask {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: #bf4d43;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.verify-email-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--accent-orange-bg);
    border-radius: 10px;
    padding: 12px 14px;
    width: 100%;
}

.verify-email-alert-icon {
    flex-shrink: 0;
    color: #bf4d43;
}

.verify-email-alert-text {
    font-size: 12px;
    color: #bf4d43;
    margin: 0;
    line-height: 1.6;
    font-family: var(--font-family-base);
}

.verify-email-button {
    width: 100%;
    height: 52px;
    min-height: 52px;
    border-radius: 6px;
}

.verify-email-button-secondary {
    width: 100%;
    height: 52px;
    min-height: 52px;
    border-radius: 6px;
    border: 1px solid var(--text-base);
    background: var(--surface-0);
    color: var(--text-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (prefers-color-scheme: dark) {
    .login-layout.theme-system .verify-email-page {
        background: #2d2c29;
    }

    .login-layout.theme-system .verify-email-button-secondary {
        border-color: #ece8e0;
        background: #302f2d;
        color: #ece8e0;
    }
}