.ui-icon { display: inline-block; width: var(--icon-size); height: var(--icon-size); flex: none; vertical-align: middle; }
.settings-modal {
    display: grid;
    grid-template-columns: var(--settings-columns);
    grid-template-rows: var(--settings-rows);
    width: min(100%, var(--settings-width));
    height: min(var(--settings-height), calc(var(--viewport-height) - var(--space-12)));
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--settings-radius);
    background: var(--settings-background);
    box-shadow: var(--settings-shadow);
    text-align: left;
    line-height: normal;
}
.settings-sidebar { display: flex; flex-direction: column; min-width: 0; padding: var(--space-3); background: var(--settings-sidebar-background); border-right: 1px solid var(--color-border); }
.settings-sidebar-title { padding: var(--settings-sidebar-title-padding); font-size: var(--settings-sidebar-title-size); color: var(--settings-subtle); font-weight: var(--settings-title-weight); }
.settings-tabs { display: grid; gap: var(--settings-tab-gap); }
.settings-tab {
    display: flex;
    align-items: center;
    gap: var(--settings-tab-icon-gap);
    min-height: var(--settings-tab-height);
    padding: 0 var(--settings-tab-inset);
    border: 0;
    border-radius: var(--settings-control-radius);
    background: transparent;
    text-align: left;
    color: var(--color-muted);
    font-size: var(--settings-tab-size);
    font-weight: var(--settings-tab-weight);
    transition: background var(--motion-fast), color var(--motion-fast);
}
.settings-tab:hover { background: var(--settings-surface); color: var(--color-text); }
.settings-tab[aria-selected='true'] { color: var(--color-text); background: var(--color-selected); }
.settings-tab[aria-selected='true'] .ui-icon { --i-fill: 1; --i-detail: color-mix(in srgb, var(--settings-sidebar-background), var(--color-lilac) 14%); color: var(--color-lilac); }
.settings-sidebar-footer { margin-top: auto; padding: var(--space-3); color: var(--settings-subtle); font-size: var(--font-xs); }
.settings-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.settings-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--settings-topbar-padding); flex: none; }
.settings-topbar h2 { font-size: var(--settings-title-size); font-weight: var(--settings-title-weight); line-height: 1.2; letter-spacing: normal; margin: 0; }
.settings-topbar p { color: var(--settings-subtle); font-size: var(--settings-subtitle-size); line-height: 1.3; margin: var(--settings-subtitle-gap) 0 0; }
.settings-close { width: var(--settings-close-size); min-height: var(--settings-close-size); height: var(--settings-close-size); border: 0; border-radius: var(--settings-control-radius); background: var(--settings-surface); color: var(--color-muted); }
.settings-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--settings-content-inset) var(--settings-content-inset); }
.settings-stack { display: grid; gap: var(--space-4); align-content: start; }
/* Вкладка «Фото»: свои отправленные в чате фото сеткой. */
.settings-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--space-24), 1fr)); gap: var(--space-2); }
.settings-photo { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-control); background: var(--settings-surface); }
.settings-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-normal) var(--motion-ease); }
.settings-photo:hover img { transform: scale(1.04); }
.settings-photo time { position: absolute; inset: auto 0 0; padding: var(--space-4) var(--space-2) var(--space-1); background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-size: var(--font-xs); }
.settings-photos-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-10) var(--space-4); border-radius: var(--settings-card-radius); background: var(--settings-surface); color: var(--color-muted); text-align: center; }
.settings-photos-empty > .ui-icon { width: var(--space-10); height: var(--space-10); color: var(--color-lilac); }
.settings-photos-empty strong { color: var(--color-text); }
.settings-photos-more { justify-self: center; }
.settings-claim {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--settings-card-gap);
    padding: var(--settings-claim-padding);
    border: 0;
    border-radius: var(--radius-control);
    background: var(--settings-claim-background);
    color: var(--color-text);
    text-align: left;
    transition: background var(--motion-fast);
}
.settings-claim:hover { background: var(--color-selected); }
.settings-claim > span { display: grid; gap: var(--space-1); min-width: 0; }
.settings-claim strong { font-size: var(--settings-claim-title-size); font-weight: 600; line-height: 1.2; }
.settings-claim span span { color: var(--settings-claim-description-color); font-size: var(--settings-claim-description-size); line-height: 1.42; }
.settings-claim img { flex: none; width: var(--settings-link-image); height: var(--settings-link-image); object-fit: contain; }
.settings-profile-card { display: flex; align-items: center; gap: var(--settings-card-gap); padding: var(--space-4); background: var(--settings-surface); border-radius: var(--settings-card-radius); }
.settings-profile-card img { flex: none; width: var(--settings-avatar-size); height: var(--settings-avatar-size); border-radius: 50%; }
.settings-profile-card div { min-width: 0; }
.settings-profile-card strong { display: block; font-size: var(--settings-profile-name-size); font-weight: var(--settings-profile-name-weight); overflow-wrap: anywhere; }
.settings-profile-card span { display: block; margin-top: var(--settings-subtitle-gap); font-size: var(--settings-subtitle-size); color: var(--settings-subtle); }
.settings-card { background: var(--settings-surface); border-radius: var(--settings-card-radius); overflow: hidden; }
.settings-detail { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--settings-row-inset) var(--space-4); }
.settings-detail + .settings-detail, .settings-link + .settings-link { border-top: 1px solid var(--color-border); }
.settings-detail > div { min-width: 0; }
.settings-label { display: block; color: var(--settings-subtle); font-size: var(--settings-detail-label-size); font-weight: var(--settings-title-weight); text-transform: uppercase; letter-spacing: .02em; margin-bottom: var(--settings-label-gap); }
.settings-value { display: block; font-size: var(--settings-detail-value-size); line-height: 1.4; overflow-wrap: anywhere; }
.settings-detail p, .settings-delete p { color: var(--settings-subtle); font-size: var(--settings-subtitle-size); line-height: 1.5; margin: var(--space-1) 0 0; }
.settings-edit { flex: none; width: var(--settings-close-size); min-height: var(--settings-close-size); border: 0; background: transparent; }
/* Переключатель настройки: нажимается вся строка, состояние видно по положению и цвету. */
.settings-switch-row { cursor: pointer; }
.settings-hint { display: block; margin-top: var(--space-1); color: var(--settings-subtle); font-size: var(--settings-subtitle-size); line-height: 1.5; }
.settings-switch {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    margin: 0;
    border-radius: 999px;
    background: var(--color-field);
    box-shadow: inset 0 0 0 1px var(--color-border-hover);
    cursor: pointer;
    appearance: none;
    transition: background var(--motion-fast), box-shadow var(--motion-fast);
}
.settings-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-muted);
    transition: transform var(--motion-normal) var(--motion-ease), background var(--motion-fast);
}
.settings-switch:checked { background: var(--mode-accent, var(--color-accent)); box-shadow: none; }
.settings-switch:checked::after { background: var(--color-on-accent, #fff); transform: translateX(18px); }
.settings-notice { padding: var(--settings-notice-padding); border-radius: var(--settings-card-radius); background: var(--settings-surface); color: var(--color-muted); font-size: var(--settings-notice-size); line-height: 1.55; }
.settings-delete { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--settings-card-radius); background: var(--settings-surface); }
.settings-delete h3 { margin: 0; font-size: var(--settings-delete-title-size); font-weight: 600; letter-spacing: normal; }
.settings-delete .btn-primary-outline { width: fit-content; min-height: var(--space-10); font-size: var(--font-md); border: 0; background: var(--settings-surface); }
.settings-link { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control-height); padding: var(--space-3) var(--space-4); border: 0; background: transparent; color: var(--color-text); font-size: var(--font-md); text-align: left; transition: background var(--motion-fast); }
.settings-link > span { flex: 1; }
.settings-link .ui-icon { color: var(--color-muted); }
.settings-link:hover { background: var(--settings-surface); }
.settings-logout { color: var(--color-muted); border-radius: var(--radius-control); }
.settings-text-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-lilac); margin-top: var(--space-2); font-size: var(--font-sm); }
.settings-error { color: var(--color-danger); font-size: var(--font-sm); margin: 0; }
.settings-modal button:disabled { opacity: .5; cursor: not-allowed; }
.settings-link[aria-busy='true']::after { content: ''; width: var(--space-4); height: var(--space-4); border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: control-spin var(--motion-pulse) linear infinite; }
.unavailable-icon { width: var(--space-16); height: var(--space-16); margin: 0 auto var(--space-5); display: grid; place-items: center; color: var(--color-lilac); border-radius: var(--radius-card); background: var(--color-selected); }
.unavailable-icon .ui-icon { width: var(--space-8); height: var(--space-8); }
.unavailable-modal h3 { font-size: var(--font-xl); margin: 0 0 var(--space-3); }
.unavailable-modal p { color: var(--color-muted); font-size: var(--font-md); margin-bottom: var(--space-6); }
@media (max-width: 760px) {
    .settings-sidebar { border-right: 0; border-bottom: 1px solid var(--color-border); }
    .settings-sidebar-title, .settings-sidebar-footer { display: none; }
    .settings-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-tab { justify-content: center; }
    .settings-topbar { padding: var(--space-4); }
    .settings-content { padding: var(--space-2) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom)); }
    .settings-claim img { width: var(--settings-avatar-size); height: var(--settings-avatar-size); }
}