.te-settings { width: min(100%, 66rem); margin: 0 auto; padding: 1.5rem clamp(.85rem, 4vw, 2rem) 2rem; }
.te-settings-header { position: relative; padding: 1.65rem .2rem 2rem; }
.te-settings-header::after { content: ""; display: block; width: 4rem; height: 1px; margin-top: 1.5rem; background: linear-gradient(90deg, var(--te-champagne), transparent); }
.te-settings-eyebrow { margin: 0 0 .7rem; color: var(--te-champagne); font-size: .65rem; letter-spacing: .23em; }
.te-settings-title { margin: 0; color: var(--te-ink); font: 400 clamp(1.55rem, 5.5vw, 2.25rem)/1.5 var(--te-font-display); letter-spacing: .035em; }
.te-settings-intro { margin: .8rem 0 0; color: var(--te-muted); font-size: .85rem; }
.te-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.te-settings-card { min-width: 0; padding: 1.15rem clamp(.9rem, 3vw, 1.4rem); border: 1px solid var(--te-line-bright); border-radius: 1.4rem; background: var(--te-glass-soft); box-shadow: 0 8px 28px rgb(57 83 96 / 4%); }
@supports (backdrop-filter: blur(1px)) { .te-settings-card { backdrop-filter: blur(10px); } }
.te-settings-card__heading { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.te-settings-card__heading > svg { width: 1.35rem; height: 1.35rem; color: var(--te-champagne); flex: 0 0 auto; }
.te-settings-card__title { margin: 0; font: 500 1.07rem/1.5 var(--te-font-display); letter-spacing: .04em; }
.te-settings-card__intro { margin: .22rem 0 0; color: var(--te-muted); font-size: .75rem; line-height: 1.6; }
.te-settings-form, .te-settings-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.te-settings-fields:disabled { opacity: .66; }
.te-settings-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; padding: .85rem 0; border-top: 1px solid var(--te-line); }
.te-settings-field__words { min-width: 0; }
.te-settings-label { display: inline-block; color: var(--te-ink); font-size: .86rem; }
.te-settings-hint { margin: .15rem 0 0; font-size: .73rem; color: var(--te-muted); line-height: 1.6; }
.te-settings-control { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--te-line); border-radius: .8rem; color: var(--te-ink); background: var(--te-glass); font: inherit; font-size: .88rem; color-scheme: light dark; }
.te-settings-control:focus-visible { outline: 2px solid var(--te-accent); outline-offset: 3px; }
.te-settings-control[aria-invalid="true"] { border-color: var(--te-error); }
.te-settings-control[type="number"] { max-width: 9rem; }
.te-settings-field--toggle { grid-template-columns: minmax(0, 1fr) 44px; align-items: center; }
.te-settings-control[type="checkbox"] { appearance: none; position: relative; padding: 0; width: 44px; height: 44px; min-height: 44px; margin: 0; border: 0; border-radius: .6rem; background: transparent; cursor: pointer; }
.te-settings-control[type="checkbox"]::before { content: ""; position: absolute; width: 32px; height: 18px; top: 13px; left: 6px; border: 1px solid var(--te-line); border-radius: 99px; background: var(--te-line); }
.te-settings-control[type="checkbox"]::after { content: ""; position: absolute; width: 12px; height: 12px; top: 17px; left: 10px; border-radius: 50%; background: var(--te-surface); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.te-settings-control[type="checkbox"]:checked::before { background: var(--te-accent); }
.te-settings-control[type="checkbox"]:checked::after { left: 24px; }
.te-settings-footer { display: flex; align-items: center; gap: .8rem; justify-content: space-between; flex-wrap: wrap; margin-top: .8rem; }
.te-settings-state { flex: 1 1 9rem; margin: 0; color: var(--te-muted); font-size: .75rem; line-height: 1.65; min-height: 1.2em; }
.te-settings-save, .te-settings-link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; border: 1px solid var(--te-line); border-radius: 999px; padding: .5rem 1rem; background: var(--te-glass); color: var(--te-accent-strong); font: inherit; font-size: .8rem; cursor: pointer; }
.te-settings-save { flex: 0 0 auto; margin-left: auto; }
.te-settings-link { border-color: transparent; background: transparent; padding-inline: .5rem; }
.te-settings-link svg { width: 1rem; height: 1rem; }
.te-settings-save:disabled, .te-settings-link:disabled { opacity: .5; cursor: default; }
.te-settings-save:focus-visible, .te-settings-link:focus-visible { outline: 2px solid var(--te-accent); outline-offset: 3px; }
.te-settings-note { margin: .65rem 0 1rem; color: var(--te-muted); font-size: .8rem; line-height: 1.85; }
.te-settings-device { padding: .9rem 0; border-top: 1px solid var(--te-line); }
.te-settings-device__top { display: flex; align-items: start; justify-content: space-between; gap: .7rem; }
.te-settings-device__name { color: var(--te-ink); font-size: .88rem; overflow-wrap: anywhere; }
.te-settings-device__badge { flex: 0 0 auto; color: var(--te-accent); font-size: .68rem; border: 1px solid var(--te-line); border-radius: 999px; padding: .1rem .55rem; }
.te-settings-device__detail { margin: .3rem 0 0; color: var(--te-muted); font-size: .73rem; }
.te-settings-bottom { display: flex; justify-content: center; padding-top: 1.5rem; }
.te-settings-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Density changes spacing, never the 44px touch target or font size. */
:root[data-te-density="compact"] .te-settings-field { padding-block: .6rem; }
:root[data-te-density="compact"] .te-settings-card { padding-block: .9rem; }
:root[data-te-density="compact"] .te-chat-feed { gap: 12px; }
:root[data-te-density="compact"] .te-chat-message[data-compact="true"] { margin-top: -6px; }
:root[data-te-density="compact"] .te-memory-card { padding-block: .85rem; }
:root[data-te-density="compact"] .te-home-rooms { gap: .55rem; }
@media (max-width: 700px) { .te-settings-grid { grid-template-columns: minmax(0, 1fr); } .te-settings { padding-top: .8rem; } }
@media (prefers-reduced-transparency: reduce) { .te-settings-card { backdrop-filter: none; } }
@media (forced-colors: active) { .te-settings-card, .te-settings-control, .te-settings-save, .te-settings-device__badge { border: 1px solid CanvasText; } }
@media (forced-colors: active) { .te-settings-control[type="checkbox"] { appearance: auto; } .te-settings-control[type="checkbox"]::before, .te-settings-control[type="checkbox"]::after { display: none; } }