/* Settings/language feature styles. */ .settings-developer-card { margin-top: 4px; } .settings-developer-panel { margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(132, 157, 206, 0.22); } .settings-dev-avatar-modal-card { max-width: 520px; } .settings-dev-avatar-meta { min-height: 18px; font-size: 13px; color: #d9e7ff; } .settings-dev-avatar-error { min-height: 18px; color: #f0a9b3; } .settings-dev-avatar-result { gap: 8px; } /* ===== Выбор языка со стартового экрана ===== */ .language-screen { width: min(100%, 430px); margin-inline: auto; } .language-choice-card { padding: 16px; background: rgba(38, 43, 52, 0.74); border: 1px solid rgba(255, 255, 255, 0.10); } .language-choice-hint { margin: 0 0 4px; text-align: center; } .language-choice-grid { display: grid; gap: 10px; } .language-choice-option { min-height: 64px; padding: 0 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; border: 1px solid rgba(210, 222, 241, 0.16); border-radius: 16px; background: rgba(255, 255, 255, 0.035); box-shadow: none; color: #ffffff; text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: left; transform: none; transition: transform 90ms ease, box-shadow 90ms ease, background-color 90ms ease, filter 120ms ease; } .language-choice-option:hover { border-color: rgba(210, 222, 241, 0.16); background: rgba(255, 255, 255, 0.035); box-shadow: none; color: #ffffff; transform: none; filter: brightness(1.12); } .language-choice-option:active { color: #ffffff; background: rgba(0, 0, 0, 0.12); border: 0; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.58), inset 0 -1px 2px rgba(255, 255, 255, 0.08); transform: translateY(1px) scale(0.97); filter: brightness(0.9); } .language-choice-option:focus-visible { border: 1px solid rgba(210, 222, 241, 0.16); background: rgba(255, 255, 255, 0.035); box-shadow: none; color: #ffffff; outline: 2px solid rgba(255, 255, 255, 0.62); outline-offset: 2px; transform: none; } .language-choice-option.is-selected, .language-choice-option.is-selected:hover, .language-choice-option.is-selected:focus-visible { border: 1px solid rgba(92, 190, 255, 0.62); background: rgba(39, 141, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px rgba(39,141,255,.10); } .language-choice-option.is-selected:active { border: 1px solid rgba(92, 190, 255, 0.62); background: rgba(39, 141, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px rgba(39,141,255,.10); transform: translateY(1px) scale(0.97); filter: brightness(0.9); } .language-choice-name { font-size: 17px; font-weight: 650; } .language-choice-code { color: rgba(255,255,255,.5); font-size: 13px; font-weight: 700; letter-spacing: .08em; } /* ===== Вложенные настройки: тот же рамочный язык действий ===== */ .screen-content.settings-bordered-actions :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .settings-bordered-btn, .session-item, .profile-relative-suggest-item, .help-fab) { border: 1px solid rgba(183, 203, 235, 0.28); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 30%), rgba(8, 19, 42, .58); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 16px rgba(0,0,0,.18); color: #ffffff; text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-inline: 14px; transform: none; } .screen-content.settings-bordered-actions :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .settings-bordered-btn, .session-item, .profile-relative-suggest-item, .help-fab):hover { border-color: rgba(213, 225, 247, 0.42); background: linear-gradient(180deg, rgba(255,255,255,.075), transparent 30%), rgba(10, 24, 52, .68); color: #ffffff; transform: none; filter: brightness(1.12); } .screen-content.settings-bordered-actions :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .settings-bordered-btn, .session-item, .profile-relative-suggest-item, .help-fab):active { transform: none; filter: brightness(0.9); } /* Language selector: actual two-position switch with explicit confirmation. */ .language-segmented-control { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 4px; min-height: 58px; border: 1px solid rgba(190, 210, 238, .18); border-radius: 18px; background: rgba(12, 22, 40, .72); overflow: hidden; } .language-segmented-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border: 1px solid rgba(99, 190, 255, .52); border-radius: 14px; background: linear-gradient(180deg, rgba(76, 166, 255, .28), rgba(30, 105, 204, .20)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 18px rgba(63,160,255,.14); transition: transform 180ms ease; } .language-choice-card[data-language="en"] .language-segmented-thumb { transform: translateX(100%); } .language-segment { position: relative; z-index: 1; min-height: 50px; padding: 0 12px; border: 0; background: transparent; background-image: none; box-shadow: none; color: #fff; text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 16px; font-weight: 650; transition: transform 90ms ease, box-shadow 90ms ease, background-color 90ms ease, filter 120ms ease; } .language-segment:hover { color: #fff; background: transparent; border: 0; box-shadow: none; filter: brightness(1.12); } .language-segment:active { color: #fff; background: rgba(0, 0, 0, 0.12); border: 0; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.58), inset 0 -1px 2px rgba(255, 255, 255, 0.08); transform: translateY(1px) scale(0.97); filter: brightness(0.9); } .language-segment:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.62); outline-offset: 2px; } .language-segment::before, .language-segment::after { background: transparent; background-image: none; border-color: transparent; box-shadow: none; } .language-choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; } .language-choice-actions .shine-btn { height: 50px; } /* ===== Скрытые расширенные настройки ===== */ .settings-shine-logo-button { width: min(72vw, 280px); min-height: 118px; margin: 2px auto 10px; padding: 6px 12px; display: grid; place-items: center; border: 0; background: transparent; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; } .settings-shine-logo-button:hover, .settings-shine-logo-button:focus, .settings-shine-logo-button:active { border: 0; background: transparent; box-shadow: none; transform: none; } .settings-shine-logo-button:focus-visible { outline: 2px solid rgba(167, 205, 255, 0.7); outline-offset: 4px; border-radius: 22px; } .settings-shine-logo { display: block; width: 100%; max-height: 126px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 12px 30px rgba(73, 126, 216, 0.16)); } .settings-feature-toggle-row { min-height: 76px; padding: 15px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; cursor: pointer; } .settings-feature-toggle-copy { min-width: 0; display: grid; gap: 5px; } .settings-feature-toggle-title { font-size: 15px; font-weight: 700; color: rgba(246, 250, 255, 0.96); } .settings-feature-toggle-hint { font-size: 12px; line-height: 1.4; color: rgba(194, 210, 236, 0.68); } .settings-feature-switch { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; margin: 0; padding: 2px; border: 1px solid rgba(189, 207, 238, 0.26); border-radius: 999px; background: rgba(8, 17, 34, 0.72); box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.28); cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } .settings-feature-switch::after { content: ''; display: block; width: 22px; height: 22px; border-radius: 50%; background: rgba(235, 243, 255, 0.9); box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28); transition: transform 150ms ease; } .settings-feature-switch:checked { border-color: rgba(86, 174, 255, 0.6); background: rgba(38, 132, 237, 0.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 16px rgba(58, 148, 255, 0.12); } .settings-feature-switch:checked::after { transform: translateX(20px); background: #ffffff; } .settings-feature-switch:focus-visible { outline: 2px solid rgba(190, 220, 255, 0.82); outline-offset: 3px; }