/* ========= SETTINGS ========= */
.settings-section { margin-bottom: 28px; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-size: .88rem; font-weight: 600; color: var(--text); }
.settings-row-sub { font-size: .78rem; color: var(--text2); margin-top: 2px; }
.theme-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .2s;
  position: relative;
}
.theme-swatch.active { border-color: var(--accent); transform: scale(1.15); }
.theme-swatch::after { content: attr(title); position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: .65rem; white-space: nowrap; color: var(--text2); }

/* ========= FORMS ========= */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: .82rem; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.form-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .88rem;
  transition: border-color .2s;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,229,200,.08); }
.form-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .88rem;
  cursor: pointer;
}
textarea.form-input { resize: vertical; min-height: 120px; font-family: var(--font-mono); }

/* ========= TOAST ========= */
#toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .82rem;
  color: var(--text);
  box-shadow: var(--shadow);
  transform: translateX(120px);
  opacity: 0;
  transition: all .3s;
  max-width: 280px;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--accent2); }


/* ========= DISPLAY OPTIONS (page-wide) ========= */
/* UI Scale */
body[data-ui-scale="compact"] { font-size: 13px; }
body[data-ui-scale="normal"]  { font-size: 15px; }
body[data-ui-scale="large"]   { font-size: 17px; }

/* Sidebar width responds to ui-scale */
body[data-ui-scale="compact"] #sidebar { width: 200px; }
body[data-ui-scale="compact"] #main-wrap { margin-left: 200px; }
body[data-ui-scale="large"]   #sidebar { width: 260px; }
body[data-ui-scale="large"]   #main-wrap { margin-left: 260px; }

/* Page density */
body[data-density="compact"] .page { padding: 16px 20px; }
body[data-density="compact"] .card { padding: 14px; }
body[data-density="compact"] .settings-row { padding: 10px 0; }
body[data-density="compact"] .nav-btn { padding: 8px 12px; }

body[data-density="comfortable"] .page { padding: 32px 36px; }
body[data-density="comfortable"] .card { padding: 20px; }

body[data-density="spacious"] .page { padding: 48px 52px; }
body[data-density="spacious"] .card { padding: 28px; }
body[data-density="spacious"] .settings-row { padding: 18px 0; }
body[data-density="spacious"] .nav-btn { padding: 13px 14px; }

/* UI Font family */
body[data-ui-font="sora"]    { --font-ui: 'Sora', sans-serif; }
body[data-ui-font="mono"]    { --font-ui: 'JetBrains Mono', monospace; }
body[data-ui-font="system"]  { --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
body[data-ui-font="serif"]   { --font-ui: 'Playfair Display', Georgia, serif; }