.settings-home,
.settings-tool-page {
  min-height: 100%;
  padding: 0 16px 24px;
  color: var(--text, #222);
  font-size: calc(14px * var(--font-scale, 1));
}

.settings-search-wrap { position: sticky; top: 0; z-index: 2; padding: 10px 0; background: #f2f2f2; }
.settings-search-wrap .search { width: 100%; box-sizing: border-box; }
.settings-section { margin: 0 -16px 12px; }
.settings-section-title,
.settings-tool-heading {
  margin: 0;
  padding: 14px 16px 8px;
  color: #777;
  font-size: 13px;
  font-weight: 500;
}
.settings-page-row {
  display: flex;
  width: 100%;
  min-height: 55px;
  box-sizing: border-box;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid #ececec;
  border-radius: 0;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.settings-page-row .grow { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.settings-page-row strong { font-size: 15px; font-weight: 400; }
.settings-page-row small { color: #888; font-size: 12px; line-height: 1.4; }
.settings-page-row .chevron { color: #aaa; font-size: 22px; line-height: 1; }
.settings-search-section { margin: 0 -16px 12px; }
.settings-empty { padding: 42px 16px; color: #999; text-align: center; }
.settings-empty span { font-size: 28px; }
.settings-footer { margin-top: 20px; }
.settings-privacy-links { margin: 12px -16px 0; padding: 8px 0; background: #fff; }

.settings-tool-page { padding-top: 16px; }
.settings-tool-page > p { margin: 8px 0 16px; color: #555; line-height: 1.65; }
.settings-tool-page .settings-muted { color: #888; font-size: 12px; }
.settings-status-card,
.settings-storage-total,
.settings-storage-local,
.settings-notice,
.settings-font-preview {
  margin: 0 0 16px;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
}
.settings-status-card { display: grid; gap: 10px; }
.settings-status-card > strong { font-size: 16px; }
.settings-status-card p,
.settings-storage-local p,
.settings-notice p { margin: 8px 0 0; color: #777; line-height: 1.6; }
.settings-status-pill { color: #8a6500; }
.settings-status-pill.is-ok { color: #27864a; }
.settings-status-pill.is-off { color: #aa4545; }
.settings-font-options { display: grid; gap: 8px; margin: 14px 0; }
.settings-font-options .btn { width: 100%; text-align: left; }
.settings-font-preview p { margin-bottom: 0; font-size: calc(15px * var(--font-scale, 1)); }
.settings-storage-total { display: grid; gap: 7px; }
.settings-storage-total small { color: #777; }
.settings-storage-total strong,
.settings-storage-local > strong { font-size: 22px; font-weight: 600; }
.settings-storage-total span { color: #888; font-size: 12px; line-height: 1.5; }
.settings-notice { border-left: 3px solid #d5d5d5; }
.settings-notice strong { font-size: 14px; }
.settings-chat-list { margin: 14px -16px 0; background: #fff; }
.settings-chat-list article { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #eee; }
.settings-chat-list article > span { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.settings-chat-list article strong { overflow: hidden; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.settings-chat-list article small { color: #888; }
.settings-chat-list .btn { flex: 0 0 auto; }
.settings-about-title { margin: 22px 0 8px; font-size: 21px; font-weight: 600; }
.settings-tool-page > .btn { margin: 6px 0 12px; }
.settings-tool-page > .settings-page-row { margin: 10px -16px; width: calc(100% + 32px); }

@media (max-width: 360px) {
  .settings-home, .settings-tool-page { padding-right: 12px; padding-left: 12px; }
  .settings-section, .settings-search-section, .settings-chat-list, .settings-privacy-links { margin-right: -12px; margin-left: -12px; }
  .settings-page-row { padding-right: 12px; padding-left: 12px; }
}