/* Scoped settings window; never changes the page backdrop or main navigation. */
html.profile-settings-modal-open { overflow: hidden; }
body.account-page #profile-panel #profile-settings-dialog:not([open]) { display: none; }
body.account-page #profile-panel #profile-settings-dialog {
 box-sizing: border-box; width: min(1120px,calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0 24px 22px; overflow: auto;
 color: #eee5d9; border: 1px solid #b858587e; border-radius: 22px;
 background: radial-gradient(ellipse at top left,#791d2c33,transparent 60%),linear-gradient(135deg,#100d10f7,#160b0ff7); box-shadow: 0 24px 100px #000b,inset 0 0 0 5px #39151b25;
 scrollbar-width: thin; scrollbar-color: #873039 #140d11;
}
#profile-settings-dialog::backdrop { background: #0009; }
body.account-page #profile-panel #profile-settings-dialog .settings-dialog-header { position: relative; display: flex; align-items: center; gap: 18px; padding: 24px 64px 24px 8px; isolation: isolate; }
body.account-page #profile-panel #profile-settings-dialog .settings-dialog-header::before { content: ''; position: absolute; z-index: -1; inset: 0 -24px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg,#170c10 25%,#130c10a6 65%,#130c1066),url('images/black_swordsman.jpg') right 27%/550px auto no-repeat; opacity: .62; pointer-events: none; }
body.account-page #profile-panel #profile-settings-dialog .settings-title-symbol { flex-shrink: 0; color: #ed4054; font: 56px/1 Georgia,serif; text-shadow: 0 0 22px #f52c4c88; }
body.account-page #profile-panel #profile-settings-dialog #settings-dialog-title { font: 700 clamp(26px,3vw,38px)/1.2 Georgia,serif !important; letter-spacing: .015em; margin: 0 0 7px; color: #f4ead6; }
body.account-page #profile-panel #profile-settings-dialog #settings-dialog-title em { color: #ce3b4f; font-style: normal; }
body.account-page #profile-panel #profile-settings-dialog #settings-dialog-description { margin: 0; color: #c6bec6; font: 16px/1.55 Georgia,serif; }
body.account-page #profile-panel #profile-settings-dialog .settings-close { position: absolute; top: 22px; right: 4px; display: grid; place-items: center; padding: 0; width: 46px; height: 46px; min-height: 46px; border-radius: 15px !important; font-size: 30px; background: #140d10 !important; border-color: #b8866266 !important; }
body.account-page #profile-panel #profile-settings-dialog #profile-settings { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; margin: 0; }
body.account-page #profile-panel #profile-settings-dialog #profile-settings>summary { display: none; }
body.account-page #profile-panel #profile-settings-dialog svg { width: 24px; height: 24px; flex-shrink: 0; }
body.account-page #profile-panel #profile-settings-dialog .settings-email-section { border: 1px solid #98615829; border-radius: 16px; padding: 18px 22px; background: #08080b65; }
body.account-page #profile-panel #profile-settings-dialog .settings-email-section h3,
body.account-page #profile-panel #profile-settings-dialog .settings-field-title,
body.account-page #profile-panel #profile-settings-dialog .settings-avatar-group legend { display: flex; align-items: center; gap: 18px; color: #eee9e3; font: 700 18px/1.5 Georgia,serif !important; margin: 0 0 10px; }
body.account-page #profile-panel #profile-settings-dialog .settings-email-section h3 svg,
body.account-page #profile-panel #profile-settings-dialog .settings-field-title svg,
body.account-page #profile-panel #profile-settings-dialog .settings-avatar-group legend svg { color: #fb5868; filter: drop-shadow(0 0 7px #f8385560); }
body.account-page #profile-panel #profile-settings-dialog .settings-email-row { margin-left: 42px; display: flex; align-items: center; gap: 15px; padding: 14px 18px; min-height: 52px; box-sizing: border-box; background: #0b090cc9; border: 1px solid #86727a60; border-radius: 13px; }
body.account-page #profile-panel #profile-settings-dialog #profile-email { margin: 0; color: #eee5dc; font: 17px/1.5 Georgia,serif; overflow-wrap: anywhere; min-width: 0; }
body.account-page #profile-panel #profile-settings-dialog .settings-email-state { margin-left: auto; flex-shrink: 0; font: 13px/1.5 Arial,sans-serif; color: #e0bb84; }
body.account-page #profile-panel #profile-settings-dialog .settings-email-state[data-confirmed=true] { color: #66c58a; }
body.account-page #profile-panel #profile-settings-dialog #profile-form { margin: 0; padding: 0; }
body.account-page #profile-panel #profile-settings-dialog .settings-name-label { display: block; margin: 20px 22px 18px; }
body.account-page #profile-panel #profile-settings-dialog .settings-name-row { position: relative; display: flex; align-items: center; margin-left: 42px; border: 1px solid #b664688c; border-radius: 13px; background: linear-gradient(90deg,#34121880,#08090ac9 45%); box-shadow: inset 2px 0 #f14b5d,0 0 13px #e3394b0d; }
body.account-page #profile-panel #profile-settings-dialog .settings-name-symbol { display: grid; place-items: center; color: #ff7c95; position: absolute; left: 17px; pointer-events: none; }
body.account-page #profile-panel #profile-settings-dialog input[name=display_name] { border: 0; border-radius: 13px; padding: 15px 78px 15px 62px; min-height: 58px; color: #fff2e6; background: transparent; font: 700 18px/1.5 Georgia,serif; }
body.account-page #profile-panel #profile-settings-dialog .settings-name-row:focus-within { border-color: #f47682; box-shadow: 0 0 0 3px #d93a531b,inset 2px 0 #ff526d; }
body.account-page #profile-panel #profile-settings-dialog input[name=display_name]:focus-visible { outline: none; }
body.account-page #profile-panel #profile-settings-dialog .settings-name-counter { position: absolute; right: 18px; pointer-events: none; color: #aa9daa; font: 13px/1.5 Arial,sans-serif; }
body.account-page #profile-panel #profile-settings-dialog .settings-name-help { display: block; margin: 6px 0 0 42px; color: #a59b9f; font: 12px/1.5 Arial,sans-serif; }
body.account-page #profile-panel #profile-settings-dialog .settings-avatar-group { min-width: 0; box-sizing: border-box; border: 1px solid #9861583d; border-radius: 17px; padding: 15px 20px 17px; margin: 0 0 12px; background: linear-gradient(135deg,#180e1266,#0b090d66); }
body.account-page #profile-panel #profile-settings-dialog .settings-avatar-group legend { float: left; width: 100%; padding: 0; }
body.account-page #profile-panel #profile-settings-dialog .avatar-upload { clear: both; display: flex; gap: 35px; align-items: center; border: 1px solid #ad4e5060; border-radius: 14px; padding: 16px 24px; margin: 0; background: linear-gradient(90deg,#240e1699,#100c12db 40%,#150b1199),url('images/eclipse.jpg') right center/cover no-repeat; }
body.account-page #profile-panel #profile-settings-dialog .settings-avatar-frame { position: relative; width: 124px; height: 124px; flex: 0 0 124px; }
body.account-page #profile-panel #profile-settings-dialog #avatar-preview { display: block; width: 124px; height: 124px; box-sizing: border-box; border: 3px solid #f06376; box-shadow: 0 0 0 4px #86223440,0 0 25px #e9434c30; border-radius: 50%; object-fit: cover; }
body.account-page #profile-panel #profile-settings-dialog .settings-avatar-edit { display: grid; place-items: center; position: absolute; right: -8px; bottom: 2px; width: 43px; height: 43px; min-height: 43px; padding: 8px; border-radius: 50% !important; background: #280e16 !important; border-color: #df556477 !important; }
body.account-page #profile-panel #profile-settings-dialog #avatar-upload-button { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 12px 22px; border-radius: 15px !important; background: linear-gradient(115deg,#801829b3,#1c0c14ed 65%) !important; border-color: #ed526bba !important; color: #fff0e5 !important; font: 700 16px/1.5 Georgia,serif; }
body.account-page #profile-panel #profile-settings-dialog .avatar-upload .account-note { font: 14px/1.65 Georgia,serif; color: #c4bdc7; margin: 14px 0 0; }
body.account-page #profile-panel #profile-settings-dialog .avatar-preset-label { margin: 17px 0 0; color: #eee5d8; font: 16px/1.5 Georgia,serif; }
body.account-page #profile-panel #profile-settings-dialog .avatar-options { align-items: center; gap: 16px; margin-top: 12px; }
body.account-page #profile-panel #profile-settings-dialog .avatar-options label { margin: 0; }
body.account-page #profile-panel #profile-settings-dialog .avatar-options img { width: 64px; height: 64px; border: 2px solid #85737955; box-sizing: border-box; transition: border-color .2s,box-shadow .2s; }
body.account-page #profile-panel #profile-settings-dialog .avatar-options input:checked+img { border: 3px solid #ff6172; box-shadow: 0 0 0 4px #a5293b30,0 0 18px #e93c4c44; }
body.account-page #profile-panel #profile-settings-dialog .settings-avatar-extra { width: 64px; height: 64px; min-height: 64px; border-radius: 50% !important; padding: 0; font-size: 32px; font-weight: 300; color: #cfc4cd !important; }
body.account-page #profile-panel #profile-settings-dialog .settings-save { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 62px; margin: 12px 0 0; width: 100%; padding: 13px 20px; border-radius: 16px !important; font: 700 21px/1.5 Georgia,serif !important; background: linear-gradient(110deg,#80182cb8,#2c101bbf 60%,#84182b9c) !important; border: 1px solid #ff6578b3 !important; box-shadow: inset 0 1px 7px #fb5a6566,0 0 22px #e6324321 !important; }
body.account-page #profile-panel #profile-settings-dialog .settings-save svg { width: 26px; height: 26px; color: #ff97a7; }
body.account-page #profile-panel #profile-settings-dialog #settings-save-status { font: 14px/1.6 Arial,sans-serif; color: #e7c798; margin: 12px 0; }
body.account-page #profile-panel #profile-settings-dialog #settings-save-status[data-error=true] { color: #ff9ead; }
body.account-page #profile-panel #profile-settings-dialog #settings-save-status:empty,
body.account-page #profile-panel #profile-settings-dialog #profile-save-feedback:empty { display: none; }
body.account-page #profile-panel #profile-settings-dialog #profile-save-feedback { padding: 0 5px; font-size: 14px; }
@media(max-width:600px) {
 body.account-page #profile-panel #profile-settings-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 0 14px 16px; border-radius: 18px; }
 body.account-page #profile-panel #profile-settings-dialog .settings-dialog-header { padding: 20px 40px 20px 0; gap: 10px; }
 body.account-page #profile-panel #profile-settings-dialog .settings-dialog-header::before { inset: 0 -14px; }
 body.account-page #profile-panel #profile-settings-dialog .settings-title-symbol { font-size: 36px; }
 body.account-page #profile-panel #profile-settings-dialog #settings-dialog-title { font-size: 25px; }
 body.account-page #profile-panel #profile-settings-dialog #settings-dialog-description { font-size: 14px; }
 body.account-page #profile-panel #profile-settings-dialog .settings-close { width: 36px; height: 36px; min-height: 36px; right: -2px; top: 17px; }
 body.account-page #profile-panel #profile-settings-dialog .settings-email-section { padding: 14px; }
 body.account-page #profile-panel #profile-settings-dialog .settings-email-row { margin: 0; padding: 12px; flex-wrap: wrap; gap: 5px; }
 body.account-page #profile-panel #profile-settings-dialog #profile-email { font-size: 15px; width: 100%; }
 body.account-page #profile-panel #profile-settings-dialog .settings-email-state { margin: 0; font-size: 12px; }
 body.account-page #profile-panel #profile-settings-dialog .settings-name-label { margin: 18px 4px; }
 body.account-page #profile-panel #profile-settings-dialog .settings-name-row,
 body.account-page #profile-panel #profile-settings-dialog .settings-name-help { margin-left: 0; }
 body.account-page #profile-panel #profile-settings-dialog .settings-avatar-group { padding: 14px; }
 body.account-page #profile-panel #profile-settings-dialog .avatar-upload { flex-direction: column; gap: 22px; padding: 18px 12px; }
 body.account-page #profile-panel #profile-settings-dialog .avatar-upload>div:last-child { width: 100%; text-align: center; }
 body.account-page #profile-panel #profile-settings-dialog #avatar-upload-button { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }
 body.account-page #profile-panel #profile-settings-dialog .avatar-options { gap: 10px; justify-content: center; }
 body.account-page #profile-panel #profile-settings-dialog .avatar-options img,
 body.account-page #profile-panel #profile-settings-dialog .settings-avatar-extra { width: 52px; height: 52px; min-height: 52px; }
 body.account-page #profile-panel #profile-settings-dialog .settings-save { min-height: 54px; font-size: 18px !important; }
}