.core-profile-page { max-width: 1200px; margin: 0 auto; }
.core-profile-grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.core-profile-stack { display: grid; gap: 18px; }
.core-profile-avatar-wrap { position: relative; width: 110px; margin: 0 auto; }
.core-profile-avatar { display: grid; width: 110px; height: 110px; place-items: center; overflow: hidden; border: 3px solid #3b82f6; border-radius: 999px; background: #18181b; color: #fff; font-size: 1.4rem; font-weight: 700; }
.core-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.core-avatar-action,
.core-avatar-delete { position: absolute; bottom: -4px; z-index: 2; width: 30px; height: 30px; min-width: 30px; padding: 0; cursor: pointer; border: 2px solid white; border-radius: 999px; }
.core-avatar-action { right: -4px; }
.core-avatar-delete { left: -4px; }
.dark .core-avatar-action,
.dark .core-avatar-delete { border-color: rgb(255 255 255 / .95); }
.core-profile-meta { display: grid; gap: 9px; margin-top: 18px; }
.core-profile-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e4e4e7; border-radius: .7rem; background: #fafafa; padding: .7rem .8rem; font-size: .875rem; }
.dark .core-profile-meta-row { border-color: #3f3f46; background: #242428; }
.core-profile-menu { margin-top: 16px; border-top: 1px solid #e4e4e7; }
.dark .core-profile-menu { border-color: #3f3f46; }
.core-profile-menu-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e4e4e7; padding: .9rem 0; transition: transform .16s ease; }
.dark .core-profile-menu-link { border-color: #3f3f46; }
.core-profile-menu-link:last-child { border-bottom: 0; }
.core-profile-menu-link:hover { transform: translateX(2px); }
.core-profile-menu-link > span:first-child { min-width: 0; }
.core-profile-menu-link > span:last-child { flex: 0 0 auto; }
.core-profile-page .kt-badge { flex: 0 0 auto; white-space: nowrap; }
.core-profile-menu-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: .65rem; background: rgb(59 130 246 / .13); color: #3b82f6; }
.core-profile-field { display: flex; min-height: 46px; align-items: center; gap: .65rem; border: 1px solid #d9dce3; border-radius: .7rem; background: white; padding: 0 .8rem; transition: border-color .16s ease, box-shadow .16s ease; }
.dark .core-profile-field { border-color: #3f3f46; background: #242428; }
.core-profile-field:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 3px rgb(59 130 246 / .11); }
.core-profile-field input { width: 100%; border: 0; outline: 0; background: transparent; color: inherit; }
.core-profile-field i { color: #71717a; }
.core-profile-field-locked { background: #f8fafc; color: #71717a; }
.core-profile-field-locked:focus-within { border-color: #d9dce3; box-shadow: none; }
.dark .core-profile-field-locked { border-color: #3f3f46; background: #202024; color: #a1a1aa; }
.core-profile-field input:-webkit-autofill,
.core-profile-field input:-webkit-autofill:hover,
.core-profile-field input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: #18181b; caret-color: #18181b; }
.dark .core-profile-field input:-webkit-autofill,
.dark .core-profile-field input:-webkit-autofill:hover,
.dark .core-profile-field input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px #242428 inset; -webkit-text-fill-color: #fafafa; caret-color: #fafafa; }
.core-card-actions { border-top: 1px solid rgb(24 24 27 / .06); }
.dark .core-card-actions { border-color: rgb(255 255 255 / .09); }
.core-mfa-qr { display: inline-flex; border: 1px solid #e4e4e7; border-radius: 1rem; background: white; padding: 12px; }
.core-recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.core-recovery-code { border: 1px dashed #a1a1aa; border-radius: .55rem; background: #fafafa; padding: .6rem; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.dark .core-recovery-code { border-color: #52525b; background: #242428; }
.core-otp-row { display: flex; justify-content: center; gap: 8px; }
.core-otp-input { width: 48px; height: 54px; border: 1px solid #d9dce3; border-radius: .65rem; background: white; color: #18181b; text-align: center; font-size: 1.35rem; font-weight: 700; outline: 0; }
.dark .core-otp-input, html[data-theme="dark"] .core-otp-input { border-color: #31415e; background: #0b1528; color: #fafafa; }
.core-otp-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgb(59 130 246 / .12); }
.core-mfa-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.core-mfa-status { flex: 0 0 auto; min-width: max-content; white-space: nowrap; }
.core-authenticator-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.core-authenticator-option { display: flex; align-items: center; gap: 12px; border: 1px solid #d9dce3; border-radius: .75rem; padding: 14px; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.core-authenticator-option:has(input:checked) { border-color: #3b82f6; background: rgb(59 130 246 / .07); box-shadow: 0 0 0 3px rgb(59 130 246 / .1); }
.core-authenticator-option input { width: 18px; height: 18px; accent-color: #3b82f6; }
.core-authenticator-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: .7rem; object-fit: cover; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.core-authenticator-option span { display: grid; gap: 2px; }
.core-authenticator-option small { color: var(--tw-prose-muted, #71717a); }
.dark .core-authenticator-option { border-color: #3f3f46; }
@media (min-width: 1024px) { .core-profile-grid { grid-template-columns: 340px minmax(0, 1fr); } .core-profile-aside { position: sticky; top: 92px; } }
@media (max-width: 520px) { .core-recovery-grid, .core-authenticator-options { grid-template-columns: 1fr; } .core-otp-input { width: 42px; height: 50px; } .core-mfa-card-header { min-height: 58px; padding-inline: 14px; } .core-mfa-card-header .kt-card-title { min-width: 0; font-size: .95rem; line-height: 1.2; } .core-mfa-status { padding: .25rem .5rem; font-size: .7rem; } }