/* Desktop proportions follow the supplied full-screen settings reference. */
.settings-dialog {
  --settings-font: clamp(14px, .83vw, 16px);
  --settings-sidebar-bg: light-dark(#f8f8f7, #171717);
  --settings-frame-line: light-dark(#bdbdbb, #3b3b3b);
  --settings-divider-line: light-dark(#e1e1e0, #323232);
  --settings-header-line: light-dark(#ededec, #2b2b2b);
  width: clamp(960px, 60vw, 1536px);
  max-width: calc(100vw - 40px);
  height: 78dvh;
  min-height: 0;
  max-height: 1200px;
  border: 1px solid var(--settings-frame-line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgb(0 0 0 / .14), 0 2px 5px rgb(0 0 0 / .08);
  font-size: var(--settings-font);
  font-family: "Source Han Sans SC", "Microsoft YaHei UI", "PingFang SC", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  line-height: 1.5;
}
.settings-dialog::backdrop { background: rgb(0 0 0 / .38); backdrop-filter: blur(5px); }
.settings-dialog [hidden] { display: none !important; }
.settings-toast-region { top: auto; left: auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
.settings-shell { position: relative; grid-template-columns: 18.75% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.settings-sidebar { padding: .8em; background: var(--settings-sidebar-bg); border-right: 1px solid var(--settings-divider-line); }
.settings-search { min-height: 36px; height: 36px; margin-bottom: 20px; border-radius: 10px; }
.settings-search input { font-size: var(--settings-font); }
.settings-search svg { width: 1.1em; height: 1.1em; margin-left: .55em; }
.settings-search:focus-within, .settings-search:has(input:focus-visible) { border-color: var(--focus-ring); outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 18%, transparent); }
.settings-search-results {
  position: absolute; z-index: 3; top: calc(.8em + 42px); left: .8em;
  box-sizing: border-box; width: min(320px, calc(100% - 1.6em)); max-height: min(350px, 50dvh);
  padding: 5px; overflow-y: auto; border: 1px solid light-dark(#d6d6d5, #414141);
  border-radius: 14px; background: var(--surface);
  box-shadow: 0 14px 36px rgb(0 0 0 / .16), 0 2px 6px rgb(0 0 0 / .09);
  scrollbar-width: thin;
}
.settings-search-result {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px;
  padding: 8px 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text); font: inherit; line-height: 1.35; text-align: left; cursor: pointer;
}
.settings-search-result:hover, .settings-search-result.is-active { background: light-dark(#f1f1f0, #303030); }
.settings-search-result:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.settings-search-result-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 18px; color: var(--text-2); }
.settings-search-result-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.settings-search-result-body { display: grid; min-width: 0; gap: 1px; }
.settings-search-result-title, .settings-search-result-description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-search-result-description { color: var(--text-3); font-size: .86em; }
.settings-search-result mark { color: light-dark(#2869bd, #91bbff); background: transparent; font-weight: 600; }
.settings-search-results .settings-search-empty { margin: 10px 12px; font-size: .9em; }
.settings-sidebar-heading { padding: 0 8px 10px; }
.settings-sidebar-heading h2 { color: var(--text-3); font-family: inherit; font-size: .83em; font-weight: 400; }
.settings-nav { gap: 2px; }
.settings-nav-item { min-height: 32px; padding: 5px .5em; gap: .65em; border: 0; border-radius: 9px; font-size: var(--settings-font); line-height: 1.4; }
.settings-nav-item svg { width: 1.1em; height: 1.1em; }
.settings-nav-item span { white-space: nowrap; }
.settings-nav-item.is-active { background: color-mix(in srgb, var(--text) 12%, var(--surface)); box-shadow: none; }
.settings-main { position: relative; min-height: 0; }
.settings-main-header { height: clamp(50px, 3.3vw, 82px); box-sizing: border-box; align-items: center; justify-content: flex-end; padding: 0 16px; border: 0; border-bottom: 1px solid var(--settings-header-line); background: var(--surface); }
.settings-main-header > div { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.settings-close { width: 32px; height: 32px; margin: 0; }
.settings-content { flex: 1; box-sizing: border-box; padding: 8px clamp(26px, 1.4vw, 38px) 48px; scrollbar-gutter: stable; }
.settings-content { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-3) 55%, transparent) transparent; }
@supports selector(::-webkit-scrollbar) {
  .settings-content { scrollbar-width: auto; scrollbar-color: auto; }
  .settings-content::-webkit-scrollbar { width: 6px; }
  .settings-content::-webkit-scrollbar-track { background: transparent; }
  .settings-content::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-3) 55%, transparent); border-radius: 6px; }
  .settings-content::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
}
.settings-panel { padding-top: 0; animation: none; }
.settings-section + .settings-section { margin-top: 32px; }
.settings-sessions { margin-top: 8px; overflow-x: auto; scrollbar-width: thin; }
.settings-sessions-table { width: 100%; min-width: 680px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font: inherit; font-family: var(--font-body); text-align: left; }
.settings-session-device-col, .settings-session-location-col, .settings-session-updated-col { width: 26%; }
.settings-session-created-col { width: 22%; }
.settings-sessions-table th, .settings-sessions-table td { padding: 16px 18px 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); vertical-align: middle; font-weight: 400; line-height: 1.5; }
.settings-sessions-table th { padding-top: 8px; padding-bottom: 10px; color: var(--text-2); }
.settings-sessions-table td { color: var(--text-2); white-space: nowrap; }
.settings-sessions-table th:first-child, .settings-sessions-table td:first-child { padding-left: 16px; }
.settings-sessions-table td:first-child { color: var(--text); }
.settings-sessions-table th:last-child, .settings-sessions-table td:last-child { padding-right: 0; }
.settings-sessions-table tbody tr:last-child td { border-bottom: 0; }
.settings-session-device { display: flex; align-items: center; gap: 8px; min-width: 0; }
.settings-session-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-session-updated, .settings-session-controls, #settings-logout-all-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.settings-session-updated { flex-wrap: nowrap; justify-content: space-between; }
.settings-session-controls { flex: none; margin-left: auto; }
.settings-session button, #settings-logout-all-actions button { font: inherit; font-size: .94em; line-height: 1.4; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface); cursor: pointer; }
.settings-session td { transition: background-color 130ms ease; }
.settings-session:hover td, .settings-session:focus-within td, .settings-session.has-menu td { background: light-dark(#f2f2f2, #303030); border-bottom-color: transparent; }
.settings-session:hover td:first-child, .settings-session:focus-within td:first-child, .settings-session.has-menu td:first-child { border-radius: 10px 0 0 10px; }
.settings-session:hover td:last-child, .settings-session:focus-within td:last-child, .settings-session.has-menu td:last-child { border-radius: 0 10px 10px 0; }
.settings-session .settings-session-more { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--text); opacity: 0; pointer-events: none; }
.settings-session:hover .settings-session-more, .settings-session:focus-within .settings-session-more, .settings-session.has-menu .settings-session-more { opacity: 1; pointer-events: auto; }
.settings-session .settings-session-more:hover, .settings-session.has-menu .settings-session-more { background: light-dark(#e7e7e7, #404040); }
.settings-session-more svg { width: 18px; height: 18px; fill: currentColor; }
.settings-session button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.settings-session button:disabled, #settings-logout-all-actions button:disabled { opacity: .5; cursor: default; }
@media (hover: none) { .settings-session .settings-session-more { opacity: 1; pointer-events: auto; } }
.settings-session-menu { position: fixed; z-index: 5; box-sizing: border-box; width: 180px; padding: 5px; border: 1px solid light-dark(#d4d4d4, #484848); border-radius: 14px; background: var(--surface); box-shadow: 0 12px 28px rgb(0 0 0 / .16), 0 2px 5px rgb(0 0 0 / .08); font-family: var(--font-body); }
.settings-session-menu button { width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: light-dark(#b62929, #ff7777); font: inherit; text-align: left; cursor: pointer; }
.settings-session-menu button:hover, .settings-session-menu button:focus-visible { background: #cf3838; color: #fff; outline: 0; }
.settings-session-confirm { box-sizing: border-box; width: min(460px, calc(100vw - 32px)); padding: 26px 28px 24px; border: 1px solid light-dark(#d7d7d7, #474747); border-radius: 17px; background: var(--surface); color: var(--text); box-shadow: 0 18px 55px rgb(0 0 0 / .22); font: 16px/1.5 var(--font-body); }
.settings-session-confirm::backdrop { background: rgb(0 0 0 / .38); }
.settings-session-confirm h2 { margin: 0 0 6px; font: inherit; font-weight: 600; }
.settings-session-confirm p { margin: 0; color: var(--text-2); }
.settings-session-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.settings-session-confirm-actions button { min-height: 36px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.settings-session-confirm-actions #settings-session-confirm-submit { border-color: #cf3838; background: #cf3838; color: #fff; }
.settings-session-confirm-actions #settings-session-confirm-submit:hover { background: #b82f2f; }
.settings-session-confirm-actions button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.settings-current-session { display: inline-block; flex: none; color: light-dark(#215caa, #b6d4ff); background: light-dark(#cfe3ff, #233d5f); font-size: .83em; font-weight: 500; line-height: 1.4; padding: 3px 8px; border: 0; border-radius: 6px; }
#settings-logout-all-actions span { color: var(--text-3); font-size: .85em; }
.settings-panel-heading { padding: 0 0 14px; }
.settings-profile .settings-row { min-height: 48px; padding: 10px 0; }
.settings-row > [data-settings-account], .settings-row > [data-settings-status] { max-width: 45%; color: var(--text-2); text-align: right; overflow-wrap: anywhere; }
.settings-dialog h3, .settings-dialog h4 { font-family: inherit; }
.settings-panel-heading h3, .settings-group-title { font-size: 1.0625em; font-weight: 600; line-height: 1.4; }
.settings-panel-heading p, .settings-section-help { margin: 8px 0 0; color: var(--text-3); font-size: .875em; line-height: 1.55; }
.settings-group-title { margin: 2.75em 0 1.2em; }
.settings-row { min-height: 60px; padding: 14px 0; gap: 24px; box-sizing: border-box; border-top: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.settings-row:last-child { border-bottom: 0; }
.settings-row h4 { font-size: 1em; font-weight: 400; line-height: 1.5; }
.settings-row p { margin-top: 4px; font-size: .875em; color: var(--text-3); line-height: 1.55; }
.settings-choice-group { padding: 2px; gap: 2px; border: 0; background: var(--sunken); }
.settings-choice { white-space: nowrap; min-height: 30px; font-size: .94em; font-weight: 400; line-height: 1.4; padding: 4px 12px; }
.settings-choice.is-selected { font-weight: 400; }
.settings-inline-link, .settings-status, .settings-version { font-size: 1em; }
.settings-note { margin-top: 24px; background: transparent; border: 0; padding: 0; }
.settings-note p { font-size: .85em; color: var(--text-3); line-height: 1.6; }
.settings-dialog fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.settings-dialog input:not([type="checkbox"]):not([type="hidden"]), .settings-dialog select {
  box-sizing: border-box; min-width: 0; max-width: 100%; width: clamp(236px, 29%, 334px); min-height: 36px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--input-bg); color: var(--text); font: inherit; line-height: 1.4;
}
.settings-dialog .settings-search input[type="search"] { width: 100%; min-height: 0; padding: 0 10px; border: 0; border-radius: 0; background: transparent; }
.settings-dialog .settings-search input[type="search"]:focus-visible { outline: 0; }
.settings-dialog input:focus-visible, .settings-dialog select:focus-visible, .settings-save:focus-visible, .settings-view button:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 3px;
}
.settings-row-stack { flex-direction: column; align-items: stretch; gap: 12px; }
.settings-dialog .settings-row-stack input:not([type="checkbox"]):not([type="hidden"]) { width: 100%; }
.settings-checks { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: .94em; }
.settings-checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.settings-checks input { width: 16px; height: 16px; margin: 0; accent-color: var(--text-2); }
.settings-region-list { padding: 0; }
.settings-switch { position: relative; display: inline-flex; flex: none; width: 42px; height: 24px; cursor: pointer; }
.settings-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.settings-switch span { width: 100%; height: 100%; background: var(--border-strong); border-radius: 20px; transition: background-color 180ms ease; pointer-events: none; }
.settings-switch span::after { content: ""; position: absolute; width: 20px; height: 20px; top: 2px; left: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .14); transition: transform 180ms ease; }
.settings-switch input:checked + span { background: #2e7bdd; }
.settings-switch input:checked + span::after { transform: translateX(18px); }
.settings-switch input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.settings-dialog :disabled { cursor: wait; }
.settings-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; min-height: 44px; padding-top: 12px; box-sizing: border-box; }
.settings-feedback { margin: 0; color: var(--text-3); font-size: .85em; line-height: 1.6; overflow-wrap: anywhere; }
.settings-feedback[data-error="true"] { color: var(--danger, #bd4949); }
.settings-save, .settings-view button { appearance: none; padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: .94em; line-height: 1.4; white-space: nowrap; cursor: pointer; }
.settings-save:hover, .settings-view button:hover { background: var(--sunken); }
.settings-save:disabled, .settings-view button:disabled { opacity: .55; cursor: default; }
.settings-dialog fieldset[disabled] .settings-save { cursor: wait; }
.settings-actions .settings-save { min-width: 100px; }
[data-settings-form] .settings-save:not(:disabled) { background: var(--text); color: var(--surface); border-color: var(--text); }
[data-settings-form] .settings-save:not(:disabled):hover { background: var(--text-2); border-color: var(--text-2); }
.settings-view { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.settings-view > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.settings-view a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.settings-view a:hover { text-decoration: underline; }
.settings-view small { color: var(--text-3); font-size: .8em; }
.settings-view button { padding: 6px 10px; border-color: transparent; background: var(--sunken); font-size: .8em; }
.settings-view .settings-rename-input { width: 220px; }
.settings-view .settings-delete-note { color: var(--text-3); font-size: .85em; }
.settings-logout { margin-top: 48px; }
.settings-ai-directions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; padding: 12px 0; }
.settings-dialog textarea { box-sizing: border-box; width: 100%; min-height: 6em; padding: 12px; border: 1px solid var(--border); border-radius: 9px; resize: vertical; background: var(--input-bg); color: var(--text); font: inherit; line-height: 1.5; }
.settings-dialog textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.settings-feedback-page { max-width: 900px; margin: 32px auto; }
.settings-feedback-record { padding: 24px 0; border-bottom: 1px solid var(--border); }
.settings-feedback-record h2 { font-size: 17px; font-weight: 600; }
.settings-feedback-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.settings-feedback-pagination { display: flex; gap: 24px; padding: 24px 0; }
@media (max-width: 1000px) {
  .settings-dialog { width: calc(100vw - 40px); height: 84dvh; }
  .settings-shell { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .settings-dialog { width: calc(100vw - 24px); max-width: none; height: calc(100dvh - 32px); --settings-font: 15px; border-radius: 14px; }
  .settings-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .settings-sidebar { padding: 12px 48px 12px 12px; border-right: 0; border-bottom: 1px solid var(--settings-divider-line); }
  .settings-search { margin-bottom: 10px; }
  .settings-search-results { top: 60px; left: 12px; width: calc(100% - 24px); max-height: min(340px, 50dvh); }
  .settings-sidebar-heading { display: none; }
  .settings-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .settings-nav-item { width: auto; padding: 6px 9px; min-height: 32px; gap: 6px; font-size: 13px; }
  .settings-nav-item svg { width: 16px; height: 16px; }
  .settings-main { position: static; }
  .settings-main-header { position: absolute; top: 15px; right: 12px; height: 32px; padding: 0; border-bottom: 0; background: transparent; }
  .settings-content { padding: 26px 20px 32px; }
  .settings-row { flex-direction: row; align-items: center; gap: 12px; }
  .settings-row-stack { flex-direction: column; align-items: stretch; }
  .settings-row > [data-settings-account], .settings-row > [data-settings-status] { max-width: 100%; }
  .settings-row:has(select), .settings-row:has(input:not([type="checkbox"]):not([type="hidden"])), .settings-row:has(.settings-choice-group) { flex-wrap: wrap; }
  .settings-dialog select, .settings-row input:not([type="checkbox"]):not([type="hidden"]) { width: 100%; }
  .settings-group-title { margin-top: 40px; }
  .settings-view { flex-wrap: wrap; }
  .settings-row-link { flex-wrap: wrap; }
  .settings-ai-directions { grid-template-columns: minmax(0, 1fr); }
  .settings-row:has([data-settings-status]) { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .settings-switch span, .settings-switch span::after { transition: none; } }
html[data-motion="reduced"] .settings-switch span, html[data-motion="reduced"] .settings-switch span::after { transition: none; }