:root [hidden] { display:none; }

/* 单一母变量：主屏幕与设置共用纯色外壳，不使用阴影。 */
.shared-shell {
  background:var(--shell-bg);
  border:0;
  border-radius:var(--icon-radius);
  box-shadow:none;
}

.app-page {
  position:fixed;
  inset:0;
  height:var(--viewport-height);
  background:var(--page-bg);
  color:var(--page-text);
  display:flex;
  flex-direction:column;
  padding-top:var(--safe-top);
}

.page-nav {
  flex:none;
  display:flex;
  align-items:center;
  min-height:70px;
  padding:var(--edge) var(--grid-edge) 10px;
  gap:10px;
}
.page-nav h1 {
  margin:0;
  font-size:22px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.2px;
}
.page-nav button {
  display:grid;
  place-items:center;
  width:36px;
  height:40px;
  min-height:40px;
  padding:0;
  border:0;
  border-radius:12px;
  appearance:none;
  background:transparent;
  color:var(--page-text);
  margin-left:-7px;
  cursor:pointer;
}
.page-nav button:active { background:rgba(117,95,104,.07); }
.page-nav svg { width:24px; height:24px; }
#save-state {
  margin-left:auto;
  font-size:11px;
  color:var(--page-muted);
  letter-spacing:.15px;
}

.page-content {
  flex:1;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:9px var(--grid-edge) calc(24px + var(--safe-bottom));
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

/* 设置一级列表：一项一条，不再使用方块宫格。 */
.settings-grid {
  width:100%;
  max-width:760px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:11px;
  align-content:start;
}
.settings-card {
  width:100%;
  min-width:0;
  overflow:hidden;
}
.settings-card > summary {
  display:flex;
  align-items:center;
  width:100%;
  min-height:76px;
  padding:15px 16px;
  gap:13px;
  cursor:pointer;
  list-style:none;
  position:relative;
  user-select:none;
}
.settings-card > summary::-webkit-details-marker { display:none; }
.settings-card > summary .section-icon {
  width:27px;
  height:27px;
  flex:0 0 27px;
  color:#B59AA5;
  display:grid;
  place-items:center;
}
.section-icon svg { width:100%; height:100%; }
.settings-card > summary .section-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.settings-card > summary .section-title {
  font-size:15px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:.2px;
  color:var(--page-text);
}
.settings-card > summary .section-meta {
  max-width:56vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--page-muted);
  font-size:11px;
  line-height:1.3;
  font-weight:500;
}
.settings-card > summary .expand-mark {
  width:16px;
  height:16px;
  flex:0 0 16px;
  margin-left:auto;
  color:#B5A8AD;
  transition:transform 180ms cubic-bezier(.2,.8,.2,1);
}
.settings-card[open] > summary .expand-mark { transform:rotate(180deg); }
.settings-card[open] > summary { padding-bottom:14px; }

.card-body {
  padding:0 16px 18px;
  border-top:1px solid var(--page-line);
}
.settings-form {
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  padding-top:16px;
}
.field,
.provider-block,
.docs-link,
.note,
.actions,
.result { min-width:0; }
.full { grid-column:1/-1; }

.field {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:11.5px;
  line-height:1.4;
  color:var(--page-muted);
  font-weight:500;
}
.field > span { padding-left:2px; }
.field input,
.field select,
.field textarea {
  width:100%;
  min-width:0;
  border:1px solid var(--page-line);
  background:var(--page-control-bg);
  border-radius:14px;
  padding:12px 13px;
  min-height:46px;
  color:var(--page-text);
  font:inherit;
  font-size:14px;
  line-height:1.45;
  outline:0;
  appearance:none;
  -webkit-appearance:none;
  user-select:text;
  -webkit-user-select:text;
}
.field select {
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2397838A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px 18px;
}
.field textarea { resize:vertical; min-height:105px; }
.field input::placeholder,
.field textarea::placeholder { color:#BBAEB3; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color:#CDB8C0;
  background:#FFFDFE;
}
.field small,
.note {
  color:var(--page-muted);
  font-size:11px;
  line-height:1.72;
  margin:0;
  overflow-wrap:anywhere;
}

.toggle {
  min-height:54px;
  padding:0 13px;
  border:1px solid var(--page-line);
  border-radius:14px;
  background:var(--page-control-bg);
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:var(--page-text);
  font-size:13.5px;
  font-weight:550;
}
.toggle > span { padding:0; }
.toggle input {
  appearance:none;
  -webkit-appearance:none;
  width:42px;
  height:25px;
  min-height:25px;
  flex:0 0 42px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#E9DDE1;
  position:relative;
  cursor:pointer;
  transition:background 160ms ease;
}
.toggle input::after {
  content:"";
  display:block;
  width:19px;
  height:19px;
  position:absolute;
  top:3px;
  left:3px;
  border-radius:50%;
  background:#fff;
  transition:transform 160ms cubic-bezier(.2,.8,.2,1);
}
.toggle input:checked { background:var(--page-accent); }
.toggle input:checked::after { transform:translateX(17px); }

/* 供应商不再隐藏在原生下拉框：直接展成清晰的长条选择列表。 */
.provider-block {
  display:flex;
  flex-direction:column;
  gap:9px;
}
.provider-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 2px;
  color:var(--page-muted);
  font-size:11.5px;
  font-weight:500;
}
.provider-count { font-size:10.5px; }
.provider-options {
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
}
.provider-option {
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 13px;
  border:1px solid var(--page-line);
  border-radius:14px;
  appearance:none;
  -webkit-appearance:none;
  background:var(--page-control-bg);
  color:var(--page-text);
  font:inherit;
  font-size:13px;
  font-weight:560;
  text-align:left;
  cursor:pointer;
}
.provider-option::before {
  content:"";
  width:16px;
  height:16px;
  flex:0 0 16px;
  border:1.5px solid #C8B6BD;
  border-radius:50%;
  background:transparent;
}
.provider-option[aria-pressed="true"] {
  border-color:#C9B4BC;
  background:#FFFDFE;
}
.provider-option[aria-pressed="true"]::before {
  border:5px solid var(--page-accent);
  background:#fff;
}

.docs-link {
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 13px;
  border:1px solid var(--page-line);
  border-radius:14px;
  background:var(--page-control-bg);
  color:var(--page-text);
  font-size:12px;
  font-weight:560;
  text-decoration:none;
}
.docs-link::after {
  content:"↗";
  color:#A58F98;
  font-size:14px;
  line-height:1;
}

.note {
  padding:0 2px;
}
.note a {
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid #CCBCC2;
}

.actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  align-items:stretch;
}
.actions button,
.actions .file-button,
.result a {
  width:100%;
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 12px;
  border:1px solid var(--page-line);
  border-radius:14px;
  appearance:none;
  -webkit-appearance:none;
  background:var(--page-control-bg);
  color:var(--page-text);
  font:inherit;
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
}
.actions button.primary {
  border-color:var(--page-accent);
  background:var(--page-accent);
  color:#fff;
}
.actions button:active,
.actions .file-button:active,
.provider-option:active,
.docs-link:active { transform:scale(.985); }
button:disabled { cursor:wait; opacity:.48; }
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline:2px solid #AA929C;
  outline-offset:2px;
}

.result {
  margin-top:14px;
  padding:13px;
  border:1px solid var(--page-line);
  border-radius:14px;
  background:#FFFDFE;
  color:var(--page-text);
  font-size:11.5px;
  line-height:1.7;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
  user-select:text;
  -webkit-user-select:text;
}
.result:empty { display:none; }
.result img {
  display:block;
  max-width:100%;
  height:auto;
  border-radius:14px;
  margin-top:12px;
}
.result audio { max-width:100%; width:100%; margin-top:10px; }
.result pre { white-space:pre-wrap; margin:0; font-size:11px; }

#toast {
  position:fixed;
  z-index:30;
  left:50%;
  bottom:calc(25px + var(--safe-bottom));
  transform:translateX(-50%);
  background:#5F5156;
  color:#fff;
  padding:11px 16px;
  border:0;
  border-radius:14px;
  box-shadow:none;
  font-size:11.5px;
  max-width:85vw;
  width:max-content;
}

dialog {
  color:var(--page-text);
  width:min(390px,calc(100vw - 36px));
  max-width:none;
  padding:22px;
  border:0;
  border-radius:20px;
  background:#FFFDFE;
  box-shadow:none;
}
dialog::backdrop { background:rgba(84,65,72,.16); }
dialog h2 { margin:0 0 12px; font-size:17px; font-weight:650; }
dialog p { font-size:12.5px; line-height:1.75; white-space:pre-wrap; }

.model-picker {
  display:block;
  max-width:100%;
  margin-top:12px;
  font-size:14px;
  padding:11px 13px;
  border:1px solid var(--page-line);
  background:var(--page-control-bg);
  border-radius:14px;
}

@media (min-width:640px) {
  .settings-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:360px) {
  .page-content { padding-inline:15px; }
  .page-nav { padding-inline:15px; }
  .settings-card > summary { padding-inline:14px; }
  .card-body { padding-inline:14px; }
  .actions { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .toggle input,
  .toggle input::after,
  .settings-card > summary .expand-mark { transition:none; }
}