:root {
    --wallet-bg: #f4f6fb;
    --wallet-surface: #ffffff;
    --wallet-surface-soft: #f8f9fc;
    --wallet-text: #101828;
    --wallet-muted: #667085;
    --wallet-border: #e4e7ec;
    --wallet-primary: #5b4df5;
    --wallet-primary-hover: #4838e6;
    --wallet-success: #067647;
    --wallet-success-bg: #ecfdf3;
    --wallet-danger: #b42318;
    --wallet-danger-bg: #fef3f2;
    --wallet-warning: #b54708;
    --wallet-warning-bg: #fffaeb;
    --wallet-info: #175cd3;
    --wallet-info-bg: #eff8ff;
    --wallet-shadow: 0 18px 50px rgba(16, 24, 40, .08);
    --wallet-radius: 18px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--wallet-bg);
}

.wallet-body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--wallet-text);
    background:
        radial-gradient(circle at 8% 0, rgba(91, 77, 245, .10), transparent 30rem),
        radial-gradient(circle at 92% 20%, rgba(45, 212, 191, .08), transparent 26rem),
        var(--wallet-bg);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.wallet-app {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.wallet-shell {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.wallet-shell--auth {
    width: min(480px, calc(100% - 32px));
}

.wallet-header {
    position: sticky;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid rgba(228, 231, 236, .9);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px);
}

.wallet-header__inner {
    display: flex;
    min-height: 74px;
    align-items: center;
    gap: 28px;
}

.wallet-brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    color: var(--wallet-text);
    text-decoration: none;
}

.wallet-brand__mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #7367ff, #4435df);
    box-shadow: 0 8px 20px rgba(91, 77, 245, .28);
    font-size: 20px;
    font-weight: 800;
}

.wallet-brand strong,
.wallet-brand small {
    display: block;
    line-height: 1.05;
}

.wallet-brand strong {
    font-size: 17px;
    letter-spacing: -.02em;
}

.wallet-brand small {
    margin-top: 4px;
    color: var(--wallet-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.wallet-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wallet-nav a,
.wallet-link-button {
    padding: 9px 11px;
    border: 0;
    border-radius: 10px;
    color: #475467;
    background: transparent;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.wallet-nav a:hover,
.wallet-link-button:hover {
    color: var(--wallet-primary);
    background: #f2f0ff;
}

.wallet-nav--guest {
    margin-left: auto;
}

.wallet-nav .wallet-nav__accent {
    padding-inline: 15px;
    color: #fff;
    background: var(--wallet-primary);
}

.wallet-nav .wallet-nav__accent:hover {
    color: #fff;
    background: var(--wallet-primary-hover);
}

.wallet-user-menu {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: 12px;
}

.wallet-user-menu__identity {
    display: grid;
    text-align: right;
}

.wallet-user-menu__identity strong {
    font-size: 14px;
}

.wallet-user-menu__identity small {
    overflow: hidden;
    max-width: 220px;
    color: var(--wallet-muted);
    font-size: 12px;
    text-overflow: ellipsis;
}

.wallet-main {
    flex: 1;
    padding: 40px 0 64px;
}

.wallet-body--guest .wallet-main {
    display: flex;
    align-items: center;
    padding-block: 56px;
}

.wallet-card {
    padding: 28px;
    border: 1px solid rgba(228, 231, 236, .94);
    border-radius: var(--wallet-radius);
    background: var(--wallet-surface);
    box-shadow: var(--wallet-shadow);
}

.wallet-card--auth {
    padding: 32px;
}

.wallet-card__header {
    margin-bottom: 26px;
}

.wallet-card__header h1,
.wallet-card__header h2,
.wallet-title {
    margin: 0;
    font-weight: 760;
    letter-spacing: -.035em;
}

.wallet-card__header h1,
.wallet-title {
    font-size: clamp(25px, 4vw, 34px);
    line-height: 1.12;
}

.wallet-card__header p {
    margin: 9px 0 0;
    color: var(--wallet-muted);
}

.wallet-grid {
    display: grid;
    gap: 20px;
}

.wallet-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wallet-form {
    display: grid;
    gap: 18px;
}

.wallet-field {
    display: grid;
    gap: 7px;
}

.wallet-field > label,
.wallet-label {
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.wallet-input,
.wallet-select,
.wallet-textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #d0d5dd;
    border-radius: 11px;
    outline: none;
    color: var(--wallet-text);
    background: #fff;
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.wallet-textarea {
    min-height: 100px;
    resize: vertical;
}

.wallet-input:focus,
.wallet-select:focus,
.wallet-textarea:focus {
    border-color: #8176ff;
    box-shadow: 0 0 0 4px rgba(91, 77, 245, .12);
}

.wallet-input::placeholder,
.wallet-textarea::placeholder {
    color: #98a2b3;
}

.wallet-button {
    display: inline-flex;
    min-height: 48px;
    padding: 11px 18px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #fff;
    background: var(--wallet-primary);
    box-shadow: 0 8px 20px rgba(91, 77, 245, .2);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.wallet-button:hover {
    color: #fff;
    background: var(--wallet-primary-hover);
    transform: translateY(-1px);
}

.wallet-button:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.wallet-button--secondary {
    border-color: var(--wallet-border);
    color: #344054;
    background: #fff;
    box-shadow: none;
}

.wallet-button--secondary:hover {
    color: var(--wallet-text);
    background: var(--wallet-surface-soft);
}

.wallet-button--danger {
    background: var(--wallet-danger);
}

.wallet-button--full {
    width: 100%;
}

.wallet-alert {
    margin-bottom: 20px;
    padding: 13px 15px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px;
}

.wallet-alert--success {
    border-color: #abefc6;
    color: var(--wallet-success);
    background: var(--wallet-success-bg);
}

.wallet-alert--error {
    border-color: #fecdca;
    color: var(--wallet-danger);
    background: var(--wallet-danger-bg);
}

.wallet-alert--warning {
    border-color: #fedf89;
    color: var(--wallet-warning);
    background: var(--wallet-warning-bg);
}

.wallet-alert--info {
    border-color: #b2ddff;
    color: var(--wallet-info);
    background: var(--wallet-info-bg);
}

.wallet-muted {
    color: var(--wallet-muted);
}

.wallet-help {
    color: var(--wallet-muted);
    font-size: 12px;
}

.wallet-auth-links {
    display: flex;
    margin-top: 22px;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    color: var(--wallet-muted);
    font-size: 13px;
}

.wallet-auth-links a,
.wallet-inline-link {
    color: var(--wallet-primary);
    font-weight: 650;
    text-decoration: none;
}

.wallet-auth-links a:hover,
.wallet-inline-link:hover {
    text-decoration: underline;
}

.wallet-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #475467;
    font-size: 13px;
}

.wallet-checkbox input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--wallet-primary);
}

.wallet-security-qr {
    display: grid;
    place-items: center;
    padding: 18px;
    border: 1px solid var(--wallet-border);
    border-radius: 16px;
    background: #fff;
}

.wallet-security-qr img {
    display: block;
    width: min(240px, 100%);
    height: auto;
}

.wallet-secret {
    display: block;
    overflow-wrap: anywhere;
    padding: 12px 14px;
    border: 1px dashed #c7c2ff;
    border-radius: 10px;
    color: #3e31bf;
    background: #f5f3ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    letter-spacing: .08em;
    text-align: center;
}

.wallet-steps {
    margin: 0;
    padding-left: 20px;
    color: #475467;
}

.wallet-steps li + li {
    margin-top: 8px;
}

.wallet-recovery-list {
    display: grid;
    margin: 22px 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
}

.wallet-recovery-list li {
    padding: 11px 12px;
    border: 1px solid var(--wallet-border);
    border-radius: 10px;
    background: var(--wallet-surface-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
}

.wallet-footer {
    padding: 22px 0;
    border-top: 1px solid rgba(228, 231, 236, .85);
    color: var(--wallet-muted);
    background: rgba(255, 255, 255, .55);
    font-size: 12px;
}

.wallet-footer__inner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

@media (max-width: 900px) {
    .wallet-nav:not(.wallet-nav--guest) {
        display: none;
    }

    .wallet-user-menu__identity {
        display: none;
    }
}

@media (max-width: 640px) {
    .wallet-shell {
        width: min(100% - 24px, 1180px);
    }

    .wallet-header__inner {
        min-height: 66px;
    }

    .wallet-nav--guest a:first-child {
        display: none;
    }

    .wallet-nav .wallet-nav__accent {
        padding-inline: 11px;
    }

    .wallet-main,
    .wallet-body--guest .wallet-main {
        padding-block: 28px 44px;
    }

    .wallet-card,
    .wallet-card--auth {
        padding: 22px 18px;
        border-radius: 15px;
    }

    .wallet-grid--two,
    .wallet-recovery-list {
        grid-template-columns: 1fr;
    }

    .wallet-footer__inner {
        display: grid;
    }
}

@media print {
    .wallet-header,
    .wallet-footer,
    .wallet-alert,
    .wallet-button {
        display: none !important;
    }

    .wallet-body,
    .wallet-card {
        background: #fff;
        box-shadow: none;
    }
}