/* Customer-facing account experience. Loaded last to isolate legacy CSS overrides. */
:root {
    --account-blue: #155eaa;
    --account-blue-dark: #104d8c;
    --account-green: #0f8a67;
    --account-amber: #b76808;
    --account-red: #c93636;
    --account-ink: #17233a;
    --account-muted: #68758a;
    --account-line: #dce5ef;
    --account-surface: #ffffff;
    --account-soft: #f5f8fc;
}

/* Bank and wallet accounts */
.payment-account-card {
    overflow: hidden;
    border: 1px solid var(--account-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(27, 56, 91, 0.07);
}

.payment-account-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--account-line);
    background: #f8fafd;
}

.payment-account-heading > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.payment-account-heading-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 7px;
    color: var(--account-blue);
    background: #e9f3fe;
}

.payment-account-heading h1,
.payment-account-heading p {
    margin: 0;
}

.payment-account-heading h1 {
    color: var(--account-ink);
    font-size: 1.08rem;
}

.payment-account-heading p {
    margin-top: 3px;
    color: var(--account-muted);
    font-size: 0.76rem;
}

.payment-account-heading > a {
    display: inline-flex;
    min-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 11px;
    border: 1px solid #b9d5ef;
    border-radius: 7px;
    color: var(--account-blue);
    background: #f2f8fe;
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
}

.payment-account-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
}

.payment-account-form .form-group-modern {
    min-width: 0;
    margin: 0;
}

.payment-account-form .form-control-modern {
    width: 100%;
    min-height: 46px;
    border-color: #d5e0eb;
    border-radius: 7px;
    font-size: 0.86rem;
}

.payment-provider-type {
    margin: 0;
    padding: 0;
    border: 0;
}

.payment-provider-type legend {
    margin: 0 0 9px;
    color: #3d4b61;
    font-size: 0.82rem;
    font-weight: 700;
}

.payment-provider-type > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.payment-provider-type label {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 58px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--account-line);
    border-radius: 7px;
    color: #445268;
    background: #fff;
    cursor: pointer;
}

.payment-provider-type label > .ui-icon {
    color: var(--account-blue);
}

.payment-provider-type label strong,
.payment-provider-type label small {
    display: block;
}

.payment-provider-type label strong { font-size: 0.82rem; }
.payment-provider-type label small { margin-top: 2px; color: var(--account-muted); font-size: 0.68rem; }
.payment-provider-type .purchase-option-input:checked + label { border-color: #8cbce9; color: var(--account-blue-dark); background: #edf6ff; }

.payment-field-note,
.payment-optional {
    display: block;
    margin-top: 5px;
    color: var(--account-muted);
    font-size: 0.68rem;
    font-weight: 400;
}

.payment-optional {
    display: inline;
    margin: 0 0 0 5px;
}

.wallet-qr-upload {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.8fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid #b9d5ef;
    border-radius: 7px;
    background: #f5f9fe;
}

.wallet-qr-copy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #3c4a60;
}

.wallet-qr-copy > .ui-icon { color: var(--account-blue); }
.wallet-qr-copy strong,
.wallet-qr-copy span { display: block; }
.wallet-qr-copy strong { font-size: 0.82rem; }
.wallet-qr-copy span { margin-top: 4px; color: var(--account-muted); font-size: 0.71rem; line-height: 1.45; }

.wallet-qr-drop {
    display: flex;
    min-width: 0;
    min-height: 62px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px dashed #84b5e4;
    border-radius: 7px;
    color: var(--account-blue);
    background: #fff;
    cursor: pointer;
}

.wallet-qr-drop input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wallet-qr-drop span { min-width: 0; }
.wallet-qr-drop strong,
.wallet-qr-drop small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-qr-drop strong { max-width: 250px; font-size: 0.76rem; }
.wallet-qr-drop small { margin-top: 2px; color: var(--account-muted); font-size: 0.65rem; }

.payment-account-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 4px;
}

.payment-account-cancel {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 8px 14px;
    border-radius: 7px;
    color: #56647a;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
}

.payment-account-actions .btn-auth-primary,
.payment-account-empty .btn-auth-primary {
    display: inline-flex;
    min-height: 42px;
    width: auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
}

.payment-account-list {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.payment-account-item {
    display: grid;
    grid-template-columns: 42px minmax(150px, 1fr) minmax(150px, 0.85fr) minmax(140px, 0.8fr);
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--account-line);
    border-radius: 7px;
    background: #fff;
}

.payment-account-logo {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 7px;
    color: var(--account-blue);
    background: #eaf4ff;
}

.payment-account-logo.is-wallet { color: #0f766e; background: #e9f7f5; }
.payment-account-main { min-width: 0; }
.payment-account-main > div { display: flex; align-items: center; gap: 7px; }
.payment-account-main h2 { margin: 0; color: var(--account-ink); font-size: 0.88rem; }
.payment-account-main > div span { padding: 3px 6px; border-radius: 999px; color: #607087; background: #f0f3f7; font-size: 0.61rem; font-weight: 700; }
.payment-account-main p { margin: 4px 0 0; color: #56647a; font-size: 0.72rem; }
.payment-account-number small,
.payment-account-number > span { display: block; }
.payment-account-number small { color: var(--account-muted); font-size: 0.65rem; }
.payment-account-number > span { margin-top: 3px; color: #2f3c50; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.payment-account-number button { display: inline-grid; width: 26px; height: 26px; margin-left: 4px; padding: 0; place-items: center; border: 0; border-radius: 6px; color: var(--account-blue); background: #edf5fd; }
.payment-account-number button.is-copied { color: #087454; background: #e3f7ef; }
.payment-account-meta { color: var(--account-muted); font-size: 0.7rem; }
.has-private-qr { display: inline-flex; align-items: center; gap: 5px; color: #0f766e; }

.payment-account-empty {
    padding: 36px 16px;
    text-align: center;
}
.payment-account-empty > span { display: grid; width: 54px; height: 54px; margin: 0 auto 12px; place-items: center; border-radius: 50%; color: var(--account-blue); background: #eaf4ff; }
.payment-account-empty h2 { margin: 0; color: var(--account-ink); font-size: 1rem; }
.payment-account-empty p { margin: 5px 0 14px; color: var(--account-muted); font-size: 0.76rem; }

@media (max-width: 767.98px) {
    .payment-account-heading { padding: 14px; align-items: flex-start; }
    .payment-account-heading p { display: none; }
    .payment-account-heading > a { min-height: 34px; padding: 6px 9px; }
    .payment-account-form { grid-template-columns: minmax(0, 1fr); padding: 14px; }
    .payment-provider-type > div { grid-template-columns: minmax(0, 1fr); }
    .wallet-qr-upload { grid-template-columns: minmax(0, 1fr); }
    .payment-account-actions { justify-content: stretch; }
    .payment-account-actions > * { flex: 1 1 0; justify-content: center; }
    .payment-account-list { padding: 12px; }
    .payment-account-item { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 12px; }
    .payment-account-logo { width: 38px; height: 38px; }
    .payment-account-number,
    .payment-account-meta { grid-column: 2; }
}

.ui-icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
}

.nav-link-v2 .ui-icon,
.dropdown-item-v2 .ui-icon,
.sidebar-nav-link-v2 .ui-icon {
    width: 18px;
    height: 18px;
}

.header-modern-v2 {
    background: #155eaa;
}

.header-modern-v2 .profile-dropdown-trigger-v2 {
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font: inherit;
    letter-spacing: 0;
    cursor: pointer;
}

.header-modern-v2 .profile-balance-v2 {
    display: none !important;
}

.header-modern-v2 .profile-dropdown-trigger-v2:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.45);
    outline-offset: 2px;
}

.header-modern-v2 .profile-dropdown-trigger-v2.dropdown-toggle::after,
.header-modern-v2 .dropdown-toggle-v2::after {
    display: none;
}

.header-modern-v2 .profile-menu-v2 {
    width: 370px;
    max-width: calc(100vw - 24px);
    padding: 0;
    border: 1px solid var(--account-line);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 42px rgba(24, 46, 78, 0.2);
}

.dropdown-header-v2 {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: var(--account-soft);
    border-bottom: 1px solid var(--account-line);
}

.dropdown-avatar-v2 {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: var(--account-blue);
    color: #fff;
    font-weight: 700;
}

.dropdown-user-info-v2 {
    min-width: 0;
}

.dropdown-user-info-v2 strong,
.dropdown-user-info-v2 small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-user-info-v2 strong {
    color: var(--account-ink);
    font-size: 0.95rem;
}

.dropdown-user-info-v2 small {
    margin-top: 2px;
    color: var(--account-blue);
    font-weight: 700;
}

.profile-security-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.profile-security-state.is-on {
    color: #087454;
    background: #dcf6ec;
}

.profile-security-state.is-off {
    color: #0f6f68;
    background: #e7f5f3;
}

.profile-menu-section {
    padding: 10px 14px;
    border-bottom: 1px solid var(--account-line);
}

.profile-menu-label {
    display: block;
    margin-bottom: 6px;
    color: var(--account-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.profile-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid #dbe6f2;
    border-radius: 7px;
    background: #f8fbff;
}

.profile-shortcut-grid > a {
    display: flex;
    min-width: 0;
    min-height: 52px;
    padding: 6px 3px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-right: 1px solid #dbe6f2;
    border-radius: 0;
    color: #39475d;
    text-align: center;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
}

.profile-shortcut-grid > a:last-child { border-right: 0; }

.profile-shortcut-grid > a .ui-icon {
    width: 18px;
    height: 18px;
    color: var(--account-blue);
}

.profile-shortcut-grid > a:hover,
.profile-shortcut-grid > a:focus-visible {
    background: #eaf4ff;
    color: var(--account-blue-dark);
}

.profile-shortcut-grid > a.needs-security {
    color: #284e50;
    background: #eef8f7;
}

.profile-shortcut-grid > a.needs-security .ui-icon {
    color: #167b73;
}

.profile-history-links > a {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    color: #34435a;
    text-decoration: none;
    font-size: 0.84rem;
}

.profile-history-links > a > .ui-icon:first-child {
    color: var(--account-blue);
    text-align: center;
}

.profile-history-links > a > .ui-icon:last-child {
    color: #98a6b8;
    font-size: 0.64rem;
}

.profile-menu-footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    align-items: stretch;
    gap: 6px;
    padding: 9px 10px 10px;
    border-top: 1px solid #e4ebf3;
    background: #f6f9fc;
}

.profile-menu-footer > a {
    display: flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 7px;
    border: 1px solid #dce6f0;
    border-radius: 7px;
    background: #fff;
    color: #44566d;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.profile-menu-footer > a .ui-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.profile-menu-footer > a:hover,
.profile-menu-footer > a:focus-visible {
    border-color: #a9c9e8;
    background: #edf6ff;
    color: #155da8;
}

.profile-menu-footer > a.is-admin {
    border-color: #cfe1f3;
    color: #155da8;
}

.profile-menu-footer > a.is-logout {
    border-color: #f0d6d9;
    background: #fffafa;
    color: #b33a44;
}

.profile-menu-footer > a.is-logout:hover,
.profile-menu-footer > a.is-logout:focus-visible {
    border-color: #e6aeb4;
    background: #fff0f1;
    color: #9f2530;
}

.home-account-section {
    padding: 20px 0 4px;
}

.home-account-panel,
.home-guest-panel {
    display: grid;
    grid-template-columns: minmax(190px, 1.2fr) minmax(165px, 0.85fr) minmax(210px, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid #dbe6f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(28, 61, 98, 0.07);
}

.home-account-identity,
.home-account-security,
.home-guest-copy {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.home-account-avatar,
.home-guest-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    color: #fff;
    background: var(--account-blue);
    font-weight: 700;
}

.home-account-panel small,
.home-guest-panel small {
    display: block;
    color: var(--account-muted);
    font-size: 0.76rem;
}

.home-account-panel strong,
.home-guest-panel strong {
    display: block;
    color: var(--account-ink);
    font-size: 0.94rem;
}

.home-account-balance {
    padding-left: 18px;
    border-left: 1px solid var(--account-line);
}

.home-account-balance strong {
    margin-top: 2px;
    color: var(--account-blue);
    font-size: 1.2rem;
}

.home-account-security {
    position: relative;
    padding: 10px 38px 10px 12px;
    border-radius: 7px;
    background: #eef8f4;
}

.home-account-security.needs-action { background: #fff6e7; }
.home-account-security > .ui-icon { color: var(--account-green); }
.home-account-security.needs-action > .ui-icon { color: var(--account-amber); }
.home-account-security > a { position: absolute; right: 13px; color: var(--account-blue); }

.home-account-links {
    display: flex;
    gap: 5px;
}

.home-account-links a {
    display: flex;
    min-width: 60px;
    min-height: 52px;
    padding: 6px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 7px;
    color: #4a5870;
    text-decoration: none;
    font-size: 0.7rem;
}

.home-account-links a:hover { background: #edf5fd; color: var(--account-blue); }

.home-guest-panel {
    grid-template-columns: minmax(0, 1fr) auto;
}

.home-guest-actions { display: flex; gap: 8px; }
.home-guest-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--account-blue);
    border-radius: 7px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.83rem;
}
.home-guest-login { color: var(--account-blue); background: #fff; }
.home-guest-register { color: #fff; background: var(--account-blue); }

.home-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.home-section-heading h2 { margin: 0; color: var(--account-ink); font-size: 1.25rem; }
.home-section-heading p { margin: 3px 0 0; color: var(--account-muted); font-size: 0.82rem; }
.home-section-heading > a { display: inline-flex; align-items: center; gap: 5px; color: var(--account-blue); text-decoration: none; font-weight: 700; font-size: 0.8rem; }

.home-actions-section {
    padding-top: 20px;
}

.home-account-section + .home-actions-section {
    padding-top: 14px;
}

.account-page-container {
    padding-top: 34px;
    padding-bottom: 46px;
}

.user-account-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 12px;
    padding: 5px;
    border: 1px solid var(--account-line);
    border-radius: 8px;
    background: #fff;
}

.user-account-nav > a {
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    color: #536176;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
}

.user-account-nav > a.active { background: #eaf4ff; color: var(--account-blue); }
.user-account-nav > a:hover { background: #f2f6fa; color: var(--account-blue); }
.user-account-nav .ui-icon { width: 17px; height: 17px; }

.two-factor-card {
    overflow: hidden;
    border: 1px solid var(--account-line);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(27, 56, 91, 0.08);
}

.profile-overview-row {
    display: grid;
    grid-template-columns: 52px minmax(190px, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 15px 18px;
    border: 1px solid var(--account-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(28, 61, 98, 0.06);
    overflow: hidden;
}

.profile-overview-avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    background: var(--account-blue);
    font-size: 1.05rem;
    font-weight: 700;
}

.profile-overview-identity {
    min-width: 0;
}

.profile-overview-identity h1,
.profile-overview-identity p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-overview-identity h1 {
    margin: 0;
    color: var(--account-ink);
    font-size: 1.05rem;
    letter-spacing: 0;
}

.profile-overview-identity p {
    margin: 2px 0;
    color: #4e5d72;
    font-size: 0.8rem;
}

.profile-overview-identity > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--account-muted);
    font-size: 0.72rem;
}

.profile-overview-balance {
    padding: 2px 22px;
    border-left: 1px solid var(--account-line);
    border-right: 1px solid var(--account-line);
}

.profile-overview-meta {
    display: grid;
    grid-template-columns: 150px 225px;
    align-items: center;
    min-width: 0;
}

.profile-overview-balance small,
.profile-overview-balance strong {
    display: block;
    white-space: nowrap;
}

.profile-overview-balance small {
    color: var(--account-muted);
    font-size: 0.72rem;
}

.profile-overview-balance strong {
    margin-top: 3px;
    color: var(--account-blue);
    font-size: 1.14rem;
}

.profile-overview-security {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 15px;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 8px 10px;
    border-radius: 7px;
    color: #116d54;
    background: #ebf8f3;
    text-decoration: none;
    min-width: 0;
}

.profile-overview-security.is-off {
    color: #0f6f68;
    background: #eaf7f5;
}

.profile-overview-security small,
.profile-overview-security strong {
    display: block;
}

.profile-overview-security small {
    font-size: 0.68rem;
    opacity: 0.78;
}

.profile-overview-security strong {
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.profile-details-card {
    overflow: hidden;
    border: 1px solid var(--account-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(27, 56, 91, 0.07);
}

.profile-details-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--account-line);
    background: #f8fafd;
}

.profile-details-heading h2 {
    margin: 0;
    color: var(--account-ink);
    font-size: 1.12rem;
    letter-spacing: 0;
}

.profile-details-heading p {
    margin: 3px 0 0;
    color: var(--account-muted);
    font-size: 0.78rem;
}

.profile-details-body {
    padding: 0;
}

.profile-details-body > .alert-modern {
    margin: 16px 20px 0;
}

.profile-form-redesign {
    display: block !important;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(245px, 0.75fr);
}

.profile-fields-section,
.profile-security-section {
    min-width: 0;
    padding: 22px;
}

.profile-security-section {
    border-left: 1px solid var(--account-line);
    background: #fbfcfe;
}

.profile-fields-section h3,
.profile-security-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 17px;
    color: var(--account-ink);
    font-size: 0.94rem;
    letter-spacing: 0;
}

.profile-fields-section h3 .ui-icon,
.profile-security-section h3 .ui-icon {
    color: var(--account-blue);
}

.profile-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.profile-fields-grid .form-group-modern {
    display: block !important;
    min-width: 0;
    margin: 0 !important;
}

.profile-email-field {
    grid-column: 1 / -1;
}

.profile-input-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid #d5e0eb;
    border-radius: 7px;
    background: #fff;
}

.profile-input-wrap:focus-within {
    border-color: #73aee4;
    box-shadow: 0 0 0 3px rgba(21, 94, 170, 0.1);
}

.profile-input-wrap.is-readonly {
    background: #f4f6f9;
}

.profile-input-wrap > .ui-icon {
    width: 17px;
    height: 17px;
    color: #6c7d92;
}

.profile-input-wrap .form-control-modern {
    width: 100% !important;
    min-width: 0;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.profile-email-field .form-text-muted {
    display: block;
    margin-top: 6px;
    color: var(--account-muted);
    font-size: 0.7rem;
}

.profile-security-status {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 13px;
    border: 1px solid #bfe6d8;
    border-radius: 7px;
    color: #116d54;
    background: #edf9f5;
}

.profile-security-status.is-off {
    border-color: #b3dad5;
    color: #0f6f68;
    background: #edf8f7;
}

.profile-security-status strong,
.profile-security-status span {
    display: block;
}

.profile-security-status strong {
    font-size: 0.8rem;
}

.profile-security-status span {
    margin-top: 4px;
    color: #637086;
    font-size: 0.72rem;
    line-height: 1.4;
}

.profile-security-link,
.profile-password-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--account-blue);
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 700;
}

.profile-security-link {
    border: 1px solid #b9d5ef;
    background: #f2f8fe;
}

.profile-password-link {
    justify-content: flex-start;
    color: #4f5e72;
}

.profile-security-link:hover,
.profile-password-link:hover {
    background: #e9f3fd;
    color: var(--account-blue-dark);
}

.profile-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 22px;
    border-top: 1px solid var(--account-line);
    background: #fafbfd;
}

.profile-form-actions > span {
    color: var(--account-muted);
    font-size: 0.72rem;
}

.profile-form-actions .btn-auth-primary {
    display: inline-flex;
    width: auto !important;
    min-width: 150px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
}

.two-factor-header {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    color: var(--account-ink);
    background: #f7faff;
    border-bottom: 1px solid var(--account-line);
}

.two-factor-header-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    color: #fff;
    background: var(--account-blue);
    font-size: 1.25rem;
}

.two-factor-header h1 { margin: 0; font-size: 1.35rem; letter-spacing: 0; }
.two-factor-header p { margin: 4px 0 0; color: var(--account-muted); font-size: 0.85rem; }

.two-factor-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.two-factor-status.is-on { color: #087454; background: #dcf6ec; }
.two-factor-status.is-off { color: #0f6f68; background: #e7f5f3; }

.two-factor-card > .profile-body { padding: 24px !important; }

.two-factor-setup {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.two-factor-qr {
    display: grid;
    place-items: center;
    width: 230px;
    min-height: 230px;
    padding: 14px;
    border: 1px solid var(--account-line);
    border-radius: 8px;
    background: #fff;
}

.two-factor-qr svg { display: block; width: 100%; height: auto; }
.two-factor-setup-content { min-width: 0; }
.two-factor-setup-content h4 { margin: 0 0 14px; color: var(--account-ink); font-size: 1.05rem; }

.two-factor-steps {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.two-factor-steps > div {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
}

.two-factor-steps span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    background: var(--account-blue);
    font-size: 0.74rem;
    font-weight: 700;
}
.two-factor-steps p { margin: 3px 0 0; color: #4f5d70; font-size: 0.82rem; line-height: 1.45; }

.two-factor-secret {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 11px 12px;
    overflow-wrap: anywhere;
    border: 1px dashed #8db8e2;
    border-radius: 6px;
    color: #154f87;
    background: #f1f7fd;
    font-size: 0.83rem;
}

.two-factor-secret-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px;
    margin: 6px 0 16px;
}

.two-factor-copy {
    display: inline-flex;
    min-width: 92px;
    min-height: 42px;
    padding: 8px 10px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #9fc4e8;
    border-radius: 6px;
    color: var(--account-blue);
    background: #fff;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    white-space: nowrap;
}

.two-factor-copy:hover,
.two-factor-copy:focus-visible {
    border-color: var(--account-blue);
    background: #edf6ff;
}

.two-factor-copy.is-copied {
    border-color: #8dd6bd;
    color: #087454;
    background: #ecf9f4;
}

.pricing-header > .ui-icon {
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

.two-factor-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.45fr);
    align-items: end;
    gap: 12px;
}

.two-factor-form .form-group-modern {
    display: block !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
}

.two-factor-form .form-control-modern { width: 100% !important; min-width: 0; }
.two-factor-form .btn-auth-primary {
    grid-column: 1 / -1;
    width: auto !important;
    min-width: 180px;
    justify-self: start;
    white-space: nowrap;
}

.two-factor-recovery {
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid #edc77d;
    border-radius: 8px;
    color: #664716;
    background: #fff9ea;
}
.two-factor-recovery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.two-factor-recovery-header strong {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}
.two-factor-recovery-copy-all {
    display: inline-flex;
    min-height: 36px;
    flex: 0 0 auto;
    padding: 7px 10px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #dfb45e;
    border-radius: 6px;
    color: #664716;
    background: #fff;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}
.two-factor-recovery-copy-all:hover,
.two-factor-recovery-copy-all:focus-visible { border-color: #bd862f; background: #fffdf7; }
.two-factor-recovery-copy-all.is-copied { border-color: #78c7aa; color: #087454; background: #ecf9f4; }
.two-factor-recovery p { margin: 7px 0 12px; font-size: 0.82rem; line-height: 1.45; }
.two-factor-recovery-plain { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: pre; border: 0; }
.two-factor-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.two-factor-code-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #f0dfbd;
    border-radius: 6px;
    background: #fff;
}
.two-factor-code-item code {
    min-width: 0;
    padding: 9px 8px;
    color: #334258;
    background: transparent;
    text-align: center;
}
.two-factor-code-item button {
    display: grid;
    width: 36px;
    padding: 0;
    place-items: center;
    border: 0;
    border-left: 1px solid #f0dfbd;
    color: #7b5c28;
    background: #fffaf0;
    cursor: pointer;
}
.two-factor-code-item button:hover,
.two-factor-code-item button:focus-visible { color: var(--account-blue); background: #f1f7fd; }
.two-factor-code-item button.is-copied { color: #087454; background: #ecf9f4; }

.two-factor-recovery-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #ecd9b2;
}

.two-factor-recovery-footer > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #77551e;
    font-size: 0.76rem;
    font-weight: 700;
}

.two-factor-recovery-finish {
    display: inline-flex;
    min-width: 104px;
    min-height: 40px;
    padding: 8px 14px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #087454;
    border-radius: 7px;
    color: #fff;
    background: #0b8060;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

.two-factor-recovery-finish:hover,
.two-factor-recovery-finish:focus-visible { color: #fff; background: #086b50; }

.two-factor-enabled {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #bce8d8;
    border-radius: 8px;
    background: #edf9f5;
}
.two-factor-enabled > .ui-icon { flex: 0 0 auto; color: var(--account-green); }
.two-factor-enabled strong,
.two-factor-enabled span { display: block; }
.two-factor-enabled span { margin-top: 2px; color: var(--account-muted); font-size: 0.8rem; }

.two-factor-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

.two-factor-action {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--account-line);
    border-radius: 8px;
    background: #fff;
}

.two-factor-action-header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 11px;
    padding: 17px 18px;
    list-style: none;
    cursor: pointer;
}

.two-factor-action-header::-webkit-details-marker { display: none; }
.two-factor-action-header:hover,
.two-factor-action-header:focus-visible { background: #f8fbff; }

.two-factor-action-chevron {
    display: grid;
    place-items: center;
    color: #718096;
    transition: transform 160ms ease;
}

.two-factor-action[open] .two-factor-action-chevron { transform: rotate(180deg); }

.two-factor-action-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    gap: 14px !important;
    padding: 16px 18px 18px;
    border-top: 1px solid var(--account-line);
    background: #fbfdff;
}

.two-factor-action-form > * { grid-column: 1 / -1; }

.two-factor-action-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 7px;
    color: var(--account-blue);
    background: #eaf3ff;
}

.two-factor-action-header h2 {
    margin: 0;
    color: var(--account-ink);
    font-size: 0.96rem;
    line-height: 1.3;
}

.two-factor-action-header p {
    margin: 3px 0 0;
    color: var(--account-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.two-factor-action-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
}

.two-factor-action .form-group-modern {
    display: block !important;
    min-width: 0;
    width: 100% !important;
    margin: 0 !important;
}

.two-factor-action .form-label-modern {
    margin-bottom: 5px;
    color: #3d4b61;
    font-size: 0.76rem;
    font-weight: 700;
}

.two-factor-action .form-control-modern {
    width: 100% !important;
    min-height: 44px;
    min-width: 0;
    border-radius: 7px;
}

.two-factor-action-submit {
    display: inline-flex;
    width: auto;
    min-height: 42px;
    padding: 9px 14px;
    align-items: center;
    justify-content: center;
    justify-self: start;
    gap: 7px;
    border: 1px solid #a8c9e9;
    border-radius: 7px;
    color: var(--account-blue-dark);
    background: #edf6ff;
    font-size: 0.8rem;
    font-weight: 700;
}

.two-factor-action-submit:hover,
.two-factor-action-submit:focus-visible {
    border-color: var(--account-blue);
    background: #e2f0ff;
}

.two-factor-danger {
    border-color: #ebd4d4;
    background: #fffdfd;
}

.two-factor-danger .two-factor-action-header:hover,
.two-factor-danger .two-factor-action-header:focus-visible,
.two-factor-danger .two-factor-action-form { background: #fffafa; }

.two-factor-danger .two-factor-action-icon {
    color: #b83232;
    background: #fff0f0;
}

.two-factor-action-submit.is-danger {
    border-color: #dc5555;
    color: #fff;
    background: #c93636;
}

.two-factor-action-submit.is-danger:hover,
.two-factor-action-submit.is-danger:focus-visible {
    border-color: #aa2929;
    background: #b52f2f;
}

@media (max-width: 991.98px) {
    .home-account-panel { grid-template-columns: 1fr 1fr; }
    .home-account-links { justify-content: flex-end; }
    .two-factor-setup { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
    .two-factor-qr { width: 200px; min-height: 200px; }
    .profile-overview-row { grid-template-columns: 52px minmax(0, 1fr); }
    .profile-overview-meta { grid-column: 1 / -1; grid-template-columns: 150px minmax(225px, 1fr); }
    .profile-form-grid { grid-template-columns: minmax(0, 1.35fr) minmax(225px, 0.75fr); }
}

@media (max-width: 767.98px) {
    .header-modern-v2 .profile-info-v2 { display: none !important; }
    .header-modern-v2 .profile-dropdown-trigger-v2 { gap: 5px; padding: 5px 8px; }
    .header-modern-v2 .profile-chevron-v2 { font-size: 0.65rem; }
    .header-modern-v2 .profile-menu-v2 { max-height: calc(100vh - 82px); overflow-y: auto; }

    .home-account-section { padding-top: 12px; }
    .home-account-panel { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
    .home-account-identity { grid-column: 1 / 2; }
    .home-account-balance { grid-column: 2 / 3; padding-left: 10px; }
    .home-account-security { grid-column: 1 / -1; }
    .home-account-links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); }
    .home-account-links a { min-height: 44px; flex-direction: row; }
    .home-guest-panel { gap: 12px; padding: 12px; }

    .account-page-container { padding-top: 18px; padding-bottom: 30px; }
    .two-factor-header { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; }
    .two-factor-header-icon { width: 44px; height: 44px; }
    .two-factor-header h1 { font-size: 1.12rem; }
    .two-factor-status { grid-column: 1 / -1; justify-self: start; }
    .two-factor-card > .profile-body { padding: 16px !important; }
    .two-factor-setup { grid-template-columns: 1fr; justify-items: center; }
    .two-factor-setup-content { width: 100%; }
    .two-factor-actions { grid-template-columns: 1fr; }
    .two-factor-action-submit { width: 100%; justify-self: stretch; }
    .two-factor-enabled { align-items: flex-start; }
    .profile-form-grid { grid-template-columns: 1fr; }
    .profile-security-section { border-top: 1px solid var(--account-line); border-left: 0; }
}

@media (max-width: 575.98px) {
    .header-modern-v2 .header-container-v2 {
        position: relative;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        min-height: 58px;
    }
    .header-modern-v2 .header-logo-v2 {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        max-width: 112px;
        transform: translate(-50%, -50%);
    }
    .header-modern-v2 .header-logo-v2:hover {
        transform: translate(-50%, -50%) scale(1.02);
    }
    .header-modern-v2 .logo-img-v2 {
        width: auto;
        max-width: 112px;
        height: 30px;
    }
    .header-modern-v2 .hamburger-btn-v2,
    .header-modern-v2 .header-auth-v2 {
        position: relative;
        z-index: 2;
    }
    .header-modern-v2 .profile-dropdown-trigger-v2 {
        width: auto;
        min-width: 48px;
        height: 36px;
        min-height: 36px;
        padding: 4px 7px !important;
        justify-content: center;
        gap: 4px !important;
        border-radius: 999px;
    }
    .header-modern-v2 .profile-avatar-v2 {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
        box-shadow: none;
    }
    .header-modern-v2 .profile-info-v2 { display: none !important; }
    .header-modern-v2 .profile-chevron-v2 {
        display: block !important;
        width: 11px;
        height: 11px;
        flex: 0 0 11px;
    }
    .header-modern-v2 .profile-menu-v2 { position: fixed !important; inset: 68px 8px auto 8px !important; width: auto; max-width: none; transform: none !important; }
    .profile-shortcut-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .home-guest-panel { grid-template-columns: 1fr; }
    .home-guest-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .home-section-heading { align-items: center; }
    .home-section-heading p { display: none; }

    .home-actions-section .home-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }
    .home-actions-section .home-action-card {
        min-width: 0;
        min-height: 112px !important;
        padding: 13px 10px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start;
        gap: 8px !important;
        border-radius: 8px !important;
    }
    .home-actions-section .home-action-icon {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        font-size: 0.92rem !important;
    }
    .home-actions-section .home-action-content { min-width: 0; }
    .home-actions-section .home-action-content strong { font-size: 0.84rem !important; line-height: 1.25; }
    .home-actions-section .home-action-content small {
        display: -webkit-box !important;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 0.68rem !important;
        line-height: 1.3;
    }
    .home-actions-section .home-action-arrow { display: none !important; }

    .user-account-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        overflow: visible;
    }
    .user-account-nav > a { min-width: 0; min-height: 38px; padding: 0 8px; }

    .two-factor-qr { width: 184px; min-height: 184px; }
    .two-factor-form { grid-template-columns: minmax(0, 1fr); }
    .two-factor-form .btn-auth-primary { grid-column: 1; width: 100% !important; min-width: 0; }
    .two-factor-code-grid { grid-template-columns: 1fr; }
    .two-factor-secret-row { grid-template-columns: minmax(0, 1fr) 42px; }
    .two-factor-copy { min-width: 42px; padding: 8px; }
    .two-factor-copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .two-factor-recovery-header { align-items: flex-start; }
    .two-factor-recovery-copy-all { min-width: 38px; padding: 7px; }
    .two-factor-recovery-copy-all span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .two-factor-recovery-footer { align-items: stretch; flex-direction: column; }
    .two-factor-recovery-finish { width: 100%; }
    .two-factor-action-header { grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 9px; padding: 14px; }
    .two-factor-action-icon { width: 34px; height: 34px; }
    .two-factor-action-form { gap: 12px; padding: 14px; }
    .two-factor-action .form-control-modern { min-height: 44px; font-size: 16px !important; }
    .two-factor-enabled { margin-bottom: 14px; padding: 12px; }
    .home-actions-section { padding-top: 14px; }
    .profile-overview-row {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 10px;
        padding: 13px;
    }
    .profile-overview-avatar { width: 46px; height: 46px; }
    .profile-overview-meta {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        border-top: 1px solid var(--account-line);
    }
    .profile-overview-balance {
        display: flex;
        min-width: 0;
        min-height: 44px;
        padding: 8px 2px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 0;
    }
    .profile-overview-balance small {
        white-space: normal;
        line-height: 1.2;
    }
    .profile-overview-balance strong {
        margin-top: 0;
        font-size: 1rem;
        text-align: right;
    }
    .profile-overview-security {
        min-height: 52px;
        width: 100%;
    }
    .profile-fields-section,
    .profile-security-section { padding: 17px; }
    .profile-fields-grid { grid-template-columns: 1fr; }
    .profile-email-field { grid-column: 1; }
    .profile-form-actions { align-items: stretch; padding: 13px 17px; flex-direction: column; }
    .profile-form-actions .btn-auth-primary { width: 100% !important; }
}

@media (max-width: 359.98px) {
    .header-modern-v2 .header-logo-v2,
    .header-modern-v2 .logo-img-v2 { max-width: 104px; }
    .header-modern-v2 .profile-avatar-v2 { display: grid !important; }
    .header-modern-v2 .profile-dropdown-trigger-v2 { gap: 4px !important; padding: 4px 6px !important; }
    .profile-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-shortcut-grid > a { min-height: 48px; }
    .profile-shortcut-grid > a:nth-child(2) { border-right: 0; }
    .profile-shortcut-grid > a:nth-child(-n + 2) { border-bottom: 1px solid #dbe6f2; }
    .profile-shortcut-grid > a:nth-child(3) { border-right: 1px solid #dbe6f2; }
    .home-account-panel { grid-template-columns: 1fr; }
    .home-account-identity,
    .home-account-balance,
    .home-account-security,
    .home-account-links { grid-column: 1; }
    .home-account-balance { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--account-line); }
}