/* ─────────────────────────────────────────────────────────────
   设置 #/settings 的页面专属样式（对应 public/js/views/settings.js）
   先用 base.css 的布局类和 components.css 的组件；这里只放这一页独有的排布。
   规则同全站：只引用 tokens.css 变量，类名以 .settings- 开头避免串味。
   ───────────────────────────────────────────────────────────── */
.settings-intro { padding: var(--s-2) var(--s-1) var(--s-5); }
.settings-intro p { margin-top: var(--s-2); }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.settings-grid > *, .settings-grid .card, .settings-preference > *, .settings-fields > * { min-width: 0; }
.settings-form { display: flex; flex-direction: column; gap: var(--s-5); }
.settings-preference { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); }
.settings-preference .segmented { width: 100%; }
.settings-preference > div > p + p { margin-top: var(--s-1); }
.settings-goal { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.settings-goal__amount { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-title); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.settings-tags { display: flex; flex-direction: column; gap: var(--s-4); }
.settings-tag { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.settings-tag p { overflow-wrap: anywhere; }
.settings-export { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.settings-export .btn { flex: 1 1 auto; }
.settings-shortcuts { display: flex; flex-wrap: wrap; gap: var(--s-4); color: var(--ink-2); font-size: var(--fs-sub); }
.settings-editor-list { display: flex; flex-direction: column; gap: var(--s-4); }
.settings-edit-item { padding: var(--s-4); background: var(--surface-2); border-radius: var(--r-md); --on: var(--surface-2); --fill: var(--surface-3); --fill-hover: var(--line-strong); }
.settings-edit-item__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-3); }
.settings-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.settings-error { color: var(--neg); font-size: var(--fs-sub); }
.settings-filename { overflow-wrap: anywhere; }
@media (min-width: 600px) { .settings-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .settings-grid { grid-template-columns: minmax(0, 1fr) var(--col-side); gap: var(--s-6); } }