/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · genre: modern-minimal · tone: confident · anchor hue: violet · structural fingerprint: account-settings workbench · nav: N1 · footer: Ft1 · slop: pass (42-45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49, 50-57) */

.profile-page {
    --profile-paper: var(--mystic-paper, #fbf9ff);
    --profile-surface: color-mix(in oklab, var(--mystic-paper, #fbf9ff) 76%, transparent);
    --profile-surface-strong: var(--mystic-paper, #fbf9ff);
    --profile-ink: var(--mystic-deep, #171126);
    --profile-muted: color-mix(in oklab, var(--mystic-deep, #171126) 58%, var(--mystic-paper, #fbf9ff));
    --profile-rule: color-mix(in oklab, var(--mystic-violet, #7c3aed) 18%, transparent);
    --profile-accent: var(--mystic-violet, #7c3aed);
    --profile-accent-soft: color-mix(in oklab, var(--mystic-violet, #7c3aed) 9%, transparent);
    padding: 30px 0 70px;
}

.profile-page__container { max-width: 1120px; }
.profile-page__card {
    overflow: hidden;
    border: 1px solid var(--profile-rule) !important;
    border-radius: 28px !important;
    background: var(--profile-surface) !important;
    box-shadow: 0 18px 60px rgba(91, 46, 145, .10) !important;
    backdrop-filter: blur(18px);
}
.profile-page__body { padding: 0 !important; }
.profile-page__intro {
    position: relative;
    margin: 0 !important;
    padding: 42px clamp(24px, 5vw, 72px) 36px;
    background: linear-gradient(135deg, rgba(124, 58, 237, .10), rgba(196, 93, 232, .04));
    border-bottom: 1px solid var(--profile-rule);
}
.profile-page__intro:after {
    content: "";
    position: absolute;
    right: 8%;
    top: 28px;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(124, 58, 237, .18);
    border-radius: 50%;
    pointer-events: none;
}
.profile-page__eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: var(--profile-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}
.profile-page__title {
    position: relative;
    z-index: 1;
    margin: 0 0 10px !important;
    color: var(--profile-ink) !important;
    font-size: clamp(28px, 4vw, 42px) !important;
    line-height: 1.05;
    letter-spacing: -.045em;
}
.profile-page__description {
    position: relative;
    z-index: 1;
    max-width: 620px;
    color: var(--profile-muted) !important;
    font-size: 15px !important;
    line-height: 1.6;
}
.profile-page__form { padding: 18px clamp(24px, 5vw, 72px) 30px; }
.profile-page__form > .card-footer:first-of-type { display: none !important; }
.profile-page__form > .row {
    align-items: center;
    margin: 0 !important;
    padding: 22px 0;
    border-bottom: 1px solid var(--profile-rule);
}
.profile-page__form > .row:last-of-type { border-bottom: 0; }
.profile-page__form > .row > label {
    color: var(--profile-ink) !important;
    font-size: 14px !important;
    letter-spacing: -.01em;
}
.profile-page__form > .row > label:after {
    content: "";
    display: block;
    width: 24px;
    height: 3px;
    margin-top: 9px;
    border-radius: 99px;
    background: var(--profile-accent);
    opacity: .45;
}
.profile-page__form .form-control,
.profile-page__form .form-select {
    min-height: 48px;
    border: 1px solid var(--profile-rule) !important;
    border-radius: 14px !important;
    background: var(--profile-surface-strong) !important;
    color: var(--profile-ink) !important;
    box-shadow: none !important;
}
.profile-page__form .form-control:focus { border-color: rgba(124, 58, 237, .6) !important; box-shadow: 0 0 0 4px var(--profile-accent-soft) !important; }
.profile-page__form .form-control-solid { background: var(--profile-accent-soft) !important; color: var(--profile-muted) !important; }
.profile-page__form .text-gray-500 { color: var(--profile-muted) !important; }
.profile-page__form .btn-primary,
.profile-page__form .modern-sendcode-btn {
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(124, 58, 237, .20) !important;
}
.profile-page__form .btn-light-primary { border: 1px solid var(--profile-rule) !important; border-radius: 13px !important; background: var(--profile-accent-soft) !important; color: var(--profile-accent) !important; }
.profile-page__form .card-footer { padding: 28px 0 0 !important; border-top: 0 !important; }
.profile-page__form .card-footer .btn { min-height: 46px; padding: 0 22px; }
.profile-page__form .switch-container,
.profile-page__form .fv-row { min-width: 0; }
.profile-page__form .input-group-modern { gap: 10px; }
.profile-page__form .modern-input { height: 48px; padding: 0 15px; border-radius: 14px !important; }

body.dark-mode .profile-page,
html.dark-mode .profile-page {
    --profile-paper: var(--mystic-deep, #11091e);
    --profile-surface: color-mix(in oklab, var(--mystic-night, #24123e) 82%, transparent);
    --profile-surface-strong: color-mix(in oklab, var(--mystic-deep, #11091e) 88%, var(--mystic-night, #24123e));
    --profile-ink: var(--mystic-paper, #f4edff);
    --profile-muted: var(--mystic-muted, #bba9ce);
    --profile-rule: var(--mystic-rule, rgba(204, 153, 255, .20));
    --profile-accent: var(--mystic-lilac, #d9b8ff);
    --profile-accent-soft: color-mix(in oklab, var(--mystic-violet, #7c3aed) 18%, transparent);
}
body.dark-mode .profile-page__card,
html.dark-mode .profile-page__card { box-shadow: 0 20px 70px rgba(0, 0, 0, .24) !important; }
body.dark-mode .profile-page__intro,
html.dark-mode .profile-page__intro { background: linear-gradient(135deg, color-mix(in oklab, var(--mystic-violet, #7c3aed) 22%, transparent), color-mix(in oklab, var(--mystic-night, #24123e) 78%, transparent)); }
body.dark-mode .profile-page__form .form-control-solid,
html.dark-mode .profile-page__form .form-control-solid { color: #cdb9dc !important; }

@media (max-width: 767.98px) {
    .profile-page { padding: 18px 0 40px; }
    .profile-page__card { border-radius: 22px !important; }
    .profile-page__intro { padding: 30px 22px 26px; }
    .profile-page__intro:after { right: -38px; top: 18px; width: 100px; height: 100px; }
    .profile-page__form { padding: 8px 22px 24px; }
    .profile-page__form > .row { display: block; padding: 18px 0; }
    .profile-page__form > .row > label { display: block; margin-bottom: 12px; padding: 0; }
    .profile-page__form > .row > label:after { margin-top: 7px; }
    .profile-page__form > .row > .col-lg-8 { padding: 0; }
    .profile-page__form .input-group-modern { flex-wrap: wrap; }
    .profile-page__form .input-group-modern .modern-input { flex: 1 1 100%; width: 100%; }
    .profile-page__form .modern-sendcode-btn { width: 100%; }
    .profile-page__form .card-footer { display: grid !important; grid-template-columns: 1fr; gap: 10px; }
    .profile-page__form .card-footer .btn { width: 100%; margin: 0 !important; }
}

.two-factor-settings .two-factor-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--profile-rule);
    border-radius: 999px;
    color: var(--profile-muted);
    background: var(--profile-surface-strong);
    font-size: 13px;
    font-weight: 700;
}
.two-factor-settings .two-factor-status--enabled {
    color: #15803d;
    border-color: rgba(34, 197, 94, .28);
    background: rgba(34, 197, 94, .09);
}
.two-factor-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--profile-muted);
}
.two-factor-status--enabled .two-factor-status__dot { background: #22c55e; }
.two-factor-help { margin: 10px 0 14px; color: var(--profile-muted); font-size: 13px; }
.two-factor-disable-row,
.two-factor-enable-row {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 520px;
}
.two-factor-disable-row .form-control,
.two-factor-enable-row .form-control { max-width: 220px; }
.two-factor-setup {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--profile-rule);
    border-radius: 18px;
    background: var(--profile-surface);
}
.two-factor-setup[hidden],
.two-factor-recovery[hidden] { display: none !important; }
.two-factor-setup__qr-wrap {
    flex: 0 0 150px;
    display: grid;
    place-items: center;
    min-height: 150px;
    border-radius: 14px;
    background: #fff;
}
.two-factor-setup__qr { display: block; width: 140px; height: 140px; }
.two-factor-setup__content { min-width: 0; }
.two-factor-setup__content h4,
.two-factor-recovery h4 { margin: 0 0 7px; color: var(--profile-ink); font-size: 16px; }
.two-factor-setup__content p,
.two-factor-recovery p { margin: 0 0 12px; color: var(--profile-muted); font-size: 13px; }
.two-factor-secret {
    display: block;
    margin-bottom: 14px;
    padding: 10px 12px;
    overflow-wrap: anywhere;
    border: 1px dashed var(--profile-rule);
    border-radius: 10px;
    color: var(--profile-accent);
    background: var(--profile-accent-soft);
    font-size: 12px;
}
.two-factor-recovery {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(34, 197, 94, .28);
    border-radius: 18px;
    background: rgba(34, 197, 94, .07);
}
.two-factor-recovery__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.two-factor-recovery__list code {
    display: block;
    padding: 9px 10px;
    border: 1px solid var(--profile-rule);
    border-radius: 9px;
    color: var(--profile-ink);
    background: var(--profile-surface-strong);
    text-align: center;
    letter-spacing: .08em;
}
body.dark-mode .two-factor-settings .two-factor-status--enabled,
html.dark-mode .two-factor-settings .two-factor-status--enabled { color: #86efac; }
body.dark-mode .two-factor-setup__qr-wrap,
html.dark-mode .two-factor-setup__qr-wrap { box-shadow: 0 8px 24px rgba(0, 0, 0, .24); }
@media (max-width: 767.98px) {
    .two-factor-disable-row,
    .two-factor-enable-row,
    .two-factor-setup { align-items: stretch; flex-direction: column; }
    .two-factor-disable-row .form-control,
    .two-factor-enable-row .form-control { max-width: none; width: 100%; }
    .two-factor-setup__qr-wrap { flex-basis: auto; width: 100%; }
    .two-factor-recovery__list { grid-template-columns: 1fr; }
}