header.topbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--surface-1); }
  header.topbar h1 { font-size: 16px; margin:0; }
  header.topbar nav { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
  header.topbar nav a { color: var(--text-secondary); text-decoration:none; font-size:13px; }
  header.topbar nav a:hover { color: var(--accent); }
  header.topbar .who { font-size: 13px; color: var(--text-secondary); }
  header.topbar button { background:none; border:1px solid var(--border); border-radius:8px; padding:6px 12px; font-size:12.5px; color: var(--text-secondary); }
  .section-card { background: var(--surface-1); border:1px solid var(--border); border-radius: 14px; padding: 24px; box-shadow: var(--card-shadow); margin-top: 20px; }
  .section-card h2 { margin:0 0 4px; font-size: 17px; }
  .section-card p.sub { margin: 0 0 18px; }
  .status-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding: 4px 0; }
  .status-badge { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding: 6px 12px; border-radius: 999px; }
  .status-badge.on { background: rgba(27,175,122,0.12); color: #0a6b4c; }
  .status-badge.off { background: rgba(137,135,129,0.15); color: var(--text-secondary); }
  .status-badge svg { flex-shrink:0; }
  .setup-step { display:none; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--gridline); }
  .setup-step.show { display:block; }
  .qr-wrap { text-align:center; margin: 6px 0 16px; }
  .qr-wrap img { width: 190px; height: 190px; border: 1px solid var(--border); border-radius: 10px; background:#fff; padding: 10px; }
  .secret-fallback { font-size:12.5px; color: var(--text-secondary); text-align:center; margin: 0 0 4px; }
  .secret-fallback code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: var(--surface-page); border:1px solid var(--border); border-radius:6px; padding:2px 7px; font-size:12.5px; letter-spacing: .5px; user-select: all; }
  .backup-codes {
    display:grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin: 14px 0;
    background: var(--surface-page); border:1px solid var(--border); border-radius: 10px; padding: 16px 18px;
  }
  .backup-codes code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .5px; }
  .backup-warning {
    font-size: 12.5px; color: #8a6300; background: rgba(224,160,0,0.12); border: 1px solid rgba(224,160,0,0.28);
    border-radius: 8px; padding: 10px 12px; margin: 12px 0;
  }
  .inline-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
  .inline-actions button { width:auto; margin-top:0; }
  .danger-zone { border-top: 1px solid var(--gridline); margin-top: 20px; padding-top: 16px; }
  .password-confirm-row { display:none; margin-top: 14px; }
  .password-confirm-row.show { display:block; }
  .pref-group { margin-bottom: 18px; }
  .pref-group h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 600; }
  .pref-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
  /* shared.css's generic "label { margin: 14px 0 5px }" (for real form fields elsewhere on this
     page) also applies here since .pref-toggle IS a <label> -- its mismatched top/bottom margin
     was nudging the label+checkbox down relative to the drag handle, which has no such margin. */
  .pref-toggle { display:flex; align-items:center; gap:8px; font-size: 13.5px; white-space:nowrap; margin:0; }
  .pref-list { display:flex; flex-direction:column; gap:4px; max-width:440px; }
  .pref-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; border:1px solid var(--border); background: var(--surface-page); cursor: grab; }
  .pref-row.dragging { opacity:0.4; }
  .pref-row .pref-drag-handle { color: var(--text-muted); font-size:14px; line-height:1; user-select:none; flex:none; }
  .pref-row .pref-toggle { flex:1; justify-content:space-between; min-width:0; }
  .pref-toggle-label { overflow:hidden; text-overflow:ellipsis; }
  /* shared.css sets a blanket "input, select { width:100% }" for real form fields elsewhere on
     this page -- without this override it also stretches these small checkboxes to fill their
     flex container (very visible once .pref-toggle got a definite width via flex:1), squeezing
     the label text down to almost nothing. */
  .pref-toggle input[type="checkbox"] { width:auto; flex:none; }
  /* Delete-account page (delete-account.html) */
  .delete-facts { margin: 0 0 14px; padding-left: 20px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
  .delete-facts li { margin: 5px 0; }
  .delete-h3 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 600; }
  .secondary-link { align-self:center; font-size: 13.5px; color: var(--text-secondary); text-decoration: none; }
  .secondary-link:hover { color: var(--accent); }

  /* Account page two-column layout (Oct 2026). Independent columns, so a tall card (two-factor
     setup, display preferences) doesn't leave a gap beside it. */
  .account-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 24px; align-items:start; }
  .account-col { min-width:0; }
  .account-col .pref-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .account-col .pref-toggle { white-space: normal; }
  @media (max-width: 860px) { .account-grid { grid-template-columns: minmax(0,1fr); } }