/* Settings refresh. All rules stay within this page's existing controls. */
.settings-page.settings-page-v2 {
    --st-bg: #F6FBFF;
    --st-surface: #FFFFFF;
    --st-alt: #F1F5F9;
    --st-ink: #222222;
    --st-secondary: #475569;
    --st-muted: #64748B;
    --st-border: #E0E0E0;
    --st-input: #9AA6B2;
    --st-accent: #0174B1;
    --st-on-accent: #FFFFFF;
    --st-selected: #E3F5FF;
    --st-off: #7A8797;
    --st-danger: #C62828;
    --st-danger-bg: #FDECEC;
    --st-danger-border: #F3B9B9;
    --st-success: #166534;
    --st-success-bg: #E8F6EE;
    --st-success-border: #A7DBBE;
    --st-warning: #5C4300;
    --st-warning-bg: #FFF6E0;
    --st-warning-border: #F2D28B;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(120px + var(--topnav-inset-top, 0px)) 24px 64px;
    background: var(--st-bg);
    color: var(--st-ink);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.5;
}
body.dark-mode .settings-page.settings-page-v2, html.dark-mode .settings-page.settings-page-v2 {
    --st-bg: #0F1620;
    --st-surface: #1B2330;
    --st-alt: #2E3A4A;
    --st-ink: #F1F5F9;
    --st-secondary: #CBD3DC;
    --st-muted: #94A3B2;
    --st-border: #2E3A4A;
    --st-input: #56677C;
    --st-accent: #00B4FF;
    --st-on-accent: #0F1620;
    --st-selected: #12364B;
    --st-off: #6B7A8C;
    --st-danger: #FF8A80;
    --st-danger-bg: #3A1F24;
    --st-danger-border: #6E3036;
    --st-success: #86EFAC;
    --st-success-bg: #133024;
    --st-success-border: #245C40;
    --st-warning: #FBE3A6;
    --st-warning-bg: #33290F;
    --st-warning-border: #6B5420;
}
.settings-page.settings-page-v2 *, .settings-page.settings-page-v2 *::before, .settings-page.settings-page-v2 *::after { box-sizing: border-box; }
.settings-page.settings-page-v2 :is(button, input, select) { font-family: inherit; }
.settings-page.settings-page-v2 :is(button, input, select):focus-visible { outline: 3px solid var(--st-accent); outline-offset: 3px; }
.settings-page.settings-page-v2 button:disabled { opacity: .55; cursor: not-allowed; }
.settings-page.settings-page-v2 .settings-container { max-width: 1040px; margin: 0 auto; min-width: 0; }
.settings-page.settings-page-v2 .settings-heading { margin-bottom: 24px; }
.settings-page.settings-page-v2 .settings-heading h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.settings-page.settings-page-v2 .settings-heading p { margin: 4px 0 0; color: var(--st-secondary); }
.settings-page.settings-page-v2 .settings-layout { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-page.settings-page-v2 .settings-tabs { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(96px + var(--topnav-inset-top, 0px)); padding: 8px; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 14px; box-shadow: 0 1px 2px rgb(2 6 23 / 5%); }
.settings-page.settings-page-v2 .settings-tab { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--st-ink); font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.settings-page.settings-page-v2 .settings-tab i { width: 20px; font-size: 18px; text-align: center; }
.settings-page.settings-page-v2 .settings-tab:hover { background: var(--st-alt); }
.settings-page.settings-page-v2 .settings-tab.active { background: var(--st-selected); color: var(--st-accent); font-weight: 600; }
.settings-page.settings-page-v2 .settings-mobile-nav { display: none; }
.settings-page.settings-page-v2 .settings-panel { min-width: 0; }
.settings-page.settings-page-v2 .settings-section { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.settings-page.settings-page-v2 .settings-card { min-width: 0; padding: 24px; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 14px; box-shadow: 0 1px 2px rgb(2 6 23 / 5%); }
.settings-page.settings-page-v2 .settings-card-header { display: flex; align-items: flex-start; gap: 12px; }
.settings-page.settings-page-v2 .settings-card-header > i { display: flex; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--st-selected); color: var(--st-accent); font-size: 18px; }
.settings-page.settings-page-v2 .settings-card-header > div { min-width: 0; }
.settings-page.settings-page-v2 .settings-card-header h2 { margin: 0; color: var(--st-ink); font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.settings-page.settings-page-v2 .settings-card-header p { margin: 2px 0 0; color: var(--st-secondary); font-size: 14px; line-height: 1.45; }
.settings-page.settings-page-v2 .settings-card-content { margin-top: 20px; }
.settings-page.settings-page-v2 .avatar-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.settings-page.settings-page-v2 .avatar-preview-container { position: relative; flex: 0 0 88px; width: 88px; height: 88px; }
.settings-page.settings-page-v2 .avatar-preview-img { display: block; width: 88px; height: 88px; border: 1px solid var(--st-border); border-radius: 50%; object-fit: cover; }
.settings-page.settings-page-v2 .avatar-actions { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 184px; }
.settings-page.settings-page-v2 .avatar-action-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.settings-page.settings-page-v2 .btn-upload { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px 12px; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-surface); color: var(--st-ink); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.settings-page.settings-page-v2 .btn-upload:focus-within { outline: 3px solid var(--st-accent); outline-offset: 3px; }
.settings-page.settings-page-v2 .avatar-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.settings-page.settings-page-v2 .avatar-remove-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-surface); color: var(--st-danger); cursor: pointer; }
.settings-page.settings-page-v2 .avatar-info { margin: 0; color: var(--st-muted); font-size: 13px; }
.settings-page.settings-page-v2 .avatar-upload-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: rgb(15 22 32 / 65%); color: #fff; font-size: 11px; }
.settings-page.settings-page-v2 .avatar-upload-overlay p { margin: 4px 0 0; }
.settings-page.settings-page-v2 .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-page.settings-page-v2 .form-row > .form-group:only-child { grid-column: 1 / -1; }
.settings-page.settings-page-v2 .form-group { min-width: 0; margin-bottom: 16px; }
.settings-page.settings-page-v2 .form-group label, .settings-page.settings-page-v2 .settings-mobile-nav label { display: block; margin-bottom: 6px; color: var(--st-ink); font-size: 14px; font-weight: 600; }
.settings-page.settings-page-v2 :is(.form-input, .form-select, .settings-mobile-nav select) { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--st-input); border-radius: 8px; background-color: var(--st-surface); color: var(--st-ink); font-size: 15px; line-height: 1.4; }
.settings-page.settings-page-v2 :is(.form-input, .form-select, .settings-mobile-nav select):focus { background-color: var(--st-surface); border-color: var(--st-accent); }
.settings-page.settings-page-v2 .form-input::placeholder { color: var(--st-muted); }
.settings-page.settings-page-v2 .form-hint { display: flex; gap: 8px; margin-top: -8px; color: var(--st-muted); font-size: 13px; line-height: 1.45; }
.settings-page.settings-page-v2 .form-hint i { flex: 0 0 auto; }
.settings-page.settings-page-v2 .form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.settings-page.settings-page-v2 :is(.btn-primary, .km-btn, .delete-account-btn, .blocked-btn-secondary, .blocked-unblock-btn) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-surface); color: var(--st-ink); font-size: 15px; font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer; }
.settings-page.settings-page-v2 :is(.btn-primary, .km-btn-primary) { border-color: var(--st-accent); background: var(--st-accent); color: var(--st-on-accent); box-shadow: none; transform: none; }
.settings-page.settings-page-v2 :is(.btn-upload, .avatar-remove-btn, .blocked-btn-secondary, .blocked-unblock-btn, .km-btn-secondary):hover { border-color: var(--st-accent); }
.settings-page.settings-page-v2 :is(.btn-primary, .km-btn-primary, .delete-account-btn):hover:not(:disabled) { filter: brightness(.94); transform: none; box-shadow: none; }
.settings-page.settings-page-v2 .password-requirements { padding: 14px; border-radius: 8px; background: var(--st-alt); }
.settings-page.settings-page-v2 .password-requirements h4 { margin: 0 0 8px; color: var(--st-secondary); font-size: 14px; font-weight: 600; }
.settings-page.settings-page-v2 .password-requirements ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.settings-page.settings-page-v2 .password-requirements li { display: flex; align-items: baseline; gap: 8px; color: var(--st-muted); font-size: 13px; }
.settings-page.settings-page-v2 .password-requirements li.valid { color: var(--st-success); }
.settings-page.settings-page-v2 .visibility-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-page.settings-page-v2 .visibility-option { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; min-height: 76px; padding: 14px; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-surface); color: var(--st-ink); text-align: left; cursor: pointer; }
.settings-page.settings-page-v2 .visibility-option.active { border-color: var(--st-accent); background: var(--st-selected); }
.settings-page.settings-page-v2 .visibility-option > i { grid-row: 1 / 3; color: var(--st-accent); font-size: 20px; }
.settings-page.settings-page-v2 .option-label { font-size: 15px; font-weight: 600; }
.settings-page.settings-page-v2 .option-desc { color: var(--st-secondary); font-size: 13px; line-height: 1.4; }
.settings-page.settings-page-v2 .toggle-row { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 0; }
.settings-page.settings-page-v2 .toggle-row + .toggle-row { border-top: 1px solid var(--st-border); }
.settings-page.settings-page-v2 .toggle-info { display: flex; flex: 1; order: 1; flex-direction: column; gap: 2px; min-width: 0; }
.settings-page.settings-page-v2 .toggle-label { display: flex; align-items: center; gap: 6px; color: var(--st-ink); font-size: 15px; font-weight: 600; line-height: 1.35; }
.settings-page.settings-page-v2 .toggle-desc { color: var(--st-secondary); font-size: 14px; line-height: 1.45; }
.settings-page.settings-page-v2 .toggle-switch { position: relative; display: block; flex: 0 0 44px; order: 2; width: 44px; height: 44px; margin: 0; }
.settings-page.settings-page-v2 .toggle-switch input { position: absolute; z-index: 1; inset: 0; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.settings-page.settings-page-v2 .toggle-slider { position: absolute; top: 10px; left: 0; right: 0; height: 24px; border-radius: 12px; background: var(--st-off); pointer-events: none; }
.settings-page.settings-page-v2 .toggle-slider::before { position: absolute; content: ''; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 15%); transition: transform 120ms ease; }
.settings-page.settings-page-v2 .toggle-switch input:checked + .toggle-slider { background: var(--st-accent); }
.settings-page.settings-page-v2 .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.settings-page.settings-page-v2 .toggle-switch input:focus-visible + .toggle-slider { outline: 3px solid var(--st-accent); outline-offset: 3px; }
.settings-page.settings-page-v2 .settings-notification-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-page.settings-page-v2 .settings-section-divider { display: flex; align-items: center; gap: 12px; margin: 8px 0 -4px; color: var(--st-secondary); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.settings-page.settings-page-v2 .settings-section-divider::after { content: ''; flex: 1; height: 1px; background: var(--st-border); }
.settings-page.settings-page-v2 .settings-section-divider > i { display: none; }
.settings-page.settings-page-v2 .settings-alert { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--st-border); border-radius: 8px; font-size: 14px; line-height: 1.5; }
.settings-page.settings-page-v2 .settings-card .settings-alert { margin-bottom: 16px; }
.settings-page.settings-page-v2 .settings-alert > span { flex: 1; min-width: 0; }
.settings-page.settings-page-v2 .settings-alert.success { background: var(--st-success-bg); border-color: var(--st-success-border); color: var(--st-success); }
.settings-page.settings-page-v2 .settings-alert.error { background: var(--st-danger-bg); border-color: var(--st-danger-border); color: var(--st-danger); }
.settings-page.settings-page-v2 .settings-alert.warning { background: var(--st-warning-bg); border-color: var(--st-warning-border); color: var(--st-warning); }
.settings-page.settings-page-v2 .settings-alert.info { background: var(--st-selected); border-color: var(--st-input); color: var(--st-secondary); }
.settings-page.settings-page-v2 .alert-close { display: flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.settings-page.settings-page-v2 .delete-account-card { border-color: var(--st-danger-border); }
.settings-page.settings-page-v2 .delete-account-copy { margin: 0 0 16px; color: var(--st-secondary); }
.settings-page.settings-page-v2 .delete-account-ack { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin-top: 16px; color: var(--st-ink); cursor: pointer; }
.settings-page.settings-page-v2 .delete-account-ack input { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--st-accent); }
.settings-page.settings-page-v2 .delete-account-btn { border-color: var(--st-danger); background: var(--st-danger); color: var(--st-surface); }
.settings-page.settings-page-v2 .km-settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 12px; }
.settings-page.settings-page-v2 .km-settings-hint { margin: 0; color: var(--st-muted); font-size: 13px; }
.settings-page.settings-page-v2 .km-error, .settings-page.settings-page-v2 .blocked-error { color: var(--st-danger); }
.settings-page.settings-page-v2 .blocked-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.settings-page.settings-page-v2 .blocked-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.settings-page.settings-page-v2 .blocked-item + .blocked-item { border-top: 1px solid var(--st-border); }
.settings-page.settings-page-v2 .blocked-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.settings-page.settings-page-v2 .blocked-avatar { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--st-alt); color: var(--st-muted); object-fit: cover; }
.settings-page.settings-page-v2 .blocked-name { display: flex; flex-direction: column; min-width: 0; color: var(--st-ink); font-weight: 600; overflow-wrap: anywhere; }
.settings-page.settings-page-v2 .blocked-handle { color: var(--st-muted); font-size: 13px; font-weight: 400; }
.settings-page.settings-page-v2 .blocked-unblock-btn { flex-shrink: 0; padding-inline: 14px; }
.settings-page.settings-page-v2 .blocked-loading { display: flex; align-items: center; gap: 12px; color: var(--st-muted); }
.settings-page.settings-page-v2 .blocked-empty { margin: 0; color: var(--st-muted); }
.settings-page.settings-page-v2 .stg-appearance-title { margin: 0; font-size: 17px; font-weight: 700; }
.settings-page.settings-page-v2 .stg-appearance-desc { margin: 4px 0 20px; color: var(--st-secondary); font-size: 14px; }
.settings-page.settings-page-v2 .stg-appearance-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 10px; border-top: 1px solid var(--st-border); }
.settings-page.settings-page-v2 .stg-appearance-copy { display: flex; flex-direction: column; gap: 2px; }
.settings-page.settings-page-v2 .stg-appearance-label { font-weight: 600; }
.settings-page.settings-page-v2 .stg-appearance-hint { color: var(--st-secondary); font-size: 14px; }
.settings-page.settings-page-v2 .theme-toggle-button { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--st-border); border-radius: 8px; color: var(--st-ink); }
.settings-page.settings-page-v2 .settings-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 300px; padding: 32px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-surface); color: var(--st-secondary); }
.settings-page.settings-page-v2 .settings-loading p { margin: 0; }
.settings-page.settings-page-v2 :is(.settings-loading-spinner, .btn-spinner, .avatar-upload-spinner) { display: inline-block; flex-shrink: 0; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: settings-spin .8s linear infinite; }
.settings-page.settings-page-v2 .settings-loading-spinner { width: 32px; height: 32px; color: var(--st-accent); }
@keyframes settings-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) and (min-width: 769px) {
    .settings-page.settings-page-v2 .settings-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
    .settings-page.settings-page-v2 .settings-notification-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    .settings-page.settings-page-v2 { padding: calc(104px + var(--topnav-inset-top, 0px)) 16px calc(104px + env(safe-area-inset-bottom, 0px)); }
    .settings-page.settings-page-v2 .settings-heading { margin-bottom: 20px; }
    .settings-page.settings-page-v2 .settings-heading h1 { font-size: 24px; }
    .settings-page.settings-page-v2 .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .settings-page.settings-page-v2 .settings-tabs { display: none; }
    .settings-page.settings-page-v2 .settings-mobile-nav { display: block; }
    .settings-page.settings-page-v2 .settings-mobile-nav select { min-height: 48px; font-weight: 600; }
    .settings-page.settings-page-v2 .settings-card { padding: 16px; }
    .settings-page.settings-page-v2 .settings-notification-grid, .settings-page.settings-page-v2 .form-row, .settings-page.settings-page-v2 .password-requirements ul { grid-template-columns: minmax(0, 1fr); }
    .settings-page.settings-page-v2 .form-row { gap: 0; }
    .settings-page.settings-page-v2 :is(.form-input, .form-select, .settings-mobile-nav select) { font-size: 16px; }
    .settings-page.settings-page-v2 .form-actions > button { width: 100%; }
    .settings-page.settings-page-v2 .km-settings-actions { flex-direction: column; }
    .settings-page.settings-page-v2 .km-settings-actions > button { width: 100%; }
}
@media (max-width: 360px) {
    .settings-page.settings-page-v2 .visibility-options { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .settings-page.settings-page-v2 *, .settings-page.settings-page-v2 *::before, .settings-page.settings-page-v2 *::after { animation: none !important; transition: none !important; }
}