/* User & App Settings workspace v1. Dedicated rules intentionally override the legacy 380px
   popup and the older full-screen mobile settings patches without changing other modals. */
#user-settings-modal.modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}
#user-settings-modal .modal-card.tm-user-settings-workspace {
  box-sizing: border-box !important;
  width: min(1050px, calc(100vw - 48px)) !important;
  max-width: 1050px !important;
  min-width: 0 !important;
  height: min(88dvh, 900px) !important;
  max-height: calc(100dvh - 48px) !important;
  min-height: 440px !important;
  padding: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left;
  color: var(--text-1);
  background: var(--surface-raised);
}
#user-settings-modal .tm-user-settings-workspace *,
#user-settings-modal .tm-user-settings-workspace *::before,
#user-settings-modal .tm-user-settings-workspace *::after { box-sizing: border-box; }
#user-settings-modal .tm-settings-topbar {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-1);
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  min-height: 80px;
}
#user-settings-modal .tm-settings-title-group { display:flex; align-items:center; gap:13px; min-width:0; }
#user-settings-modal .tm-settings-app-mark {
  display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px;
  background:color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border-1));
  border-radius:13px; color:var(--accent); font-size:26px;
}
#user-settings-modal .tm-settings-title-group h2 { font-size:19px; font-weight:800; margin:0 0 3px; line-height:1.2; }
#user-settings-modal .tm-settings-title-group span:not(.tm-settings-app-mark) { color:var(--text-muted, var(--grey)); font-size:12px; }
#user-settings-modal .tm-settings-close,
#user-settings-modal .tm-settings-done,
#user-settings-modal .tm-settings-back { cursor:pointer; border:1px solid var(--border-2); color:var(--text-1); background:var(--surface-2); font:inherit; }
#user-settings-modal .tm-settings-close { width:36px; height:36px; border-radius:11px; flex:0 0 36px; font-size:15px; }
#user-settings-modal .tm-settings-close:hover, #user-settings-modal .tm-settings-back:hover { border-color:var(--accent); }
#user-settings-modal .tm-settings-layout { display:grid; grid-template-columns:238px minmax(0,1fr); min-height:0; flex:1 1 auto; }
#user-settings-modal .tm-settings-sidebar {
  padding:22px 13px 18px; display:flex; flex-direction:column; min-width:0;
  min-height:0; overflow-y:auto; border-right:1px solid var(--border-1);
  background: color-mix(in srgb, var(--surface-2) 65%, var(--surface-raised));
}
#user-settings-modal .tm-settings-search-wrap { padding:0 8px 18px; }
#user-settings-modal .tm-settings-search-wrap label { display:block; font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--text-muted, var(--grey)); margin-bottom:7px; }
#user-settings-modal #tm-settings-search { width:100%; min-width:0; height:37px; padding:9px 11px; margin:0; font-size:13px; border-radius:10px; }
#user-settings-modal .tm-settings-nav-group { display:flex; flex-direction:column; gap:4px; }
#user-settings-modal .tm-settings-nav-btn {
  display:flex; align-items:center; gap:11px; text-align:left; width:100%;
  border:1px solid transparent; border-radius:11px;
  padding:11px 10px; background:transparent; color:var(--text-2);
  font:inherit; font-size:13px; font-weight:650; cursor:pointer; line-height:1.3;
  transition: background .15s ease, border-color .15s ease;
}
#user-settings-modal .tm-settings-nav-btn:hover { background:var(--surface-3); color:var(--text-1); }
#user-settings-modal .tm-settings-nav-btn.is-active {
  color:var(--text-1); background:color-mix(in srgb, var(--accent) 15%, var(--surface-2));
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border-1));
}
#user-settings-modal .tm-settings-nav-btn[hidden] { display:none !important; }
#user-settings-modal .tm-settings-nav-icon { flex:0 0 24px; font-size:18px; width:24px; text-align:center; color:var(--accent); }
#user-settings-modal .tm-settings-sidebar-note { margin:auto 8px 0; padding:18px 2px 0; color:var(--text-muted, var(--grey)); font-size:11px; line-height:1.5; }
#user-settings-modal .tm-settings-main {
  padding:30px 34px 48px;
  min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
}
#user-settings-modal .tm-settings-panel[hidden] { display:none !important; }
#user-settings-modal .tm-settings-panel { max-width:760px; margin:0 auto; }
#user-settings-modal .tm-settings-eyebrow { color:var(--accent); letter-spacing:.15em; font-size:10px; font-weight:800; }
#user-settings-modal .tm-settings-panel-header { margin-bottom:23px; }
#user-settings-modal .tm-settings-panel-header h3 { margin:7px 0 7px; font-size:25px; line-height:1.2; font-weight:800; }
#user-settings-modal .tm-settings-panel-header p { margin:0; line-height:1.55; color:var(--text-muted, var(--grey)); font-size:13px; }
#user-settings-modal .tm-settings-card {
  background:color-mix(in srgb, var(--surface-1) 95%, transparent);
  border:1px solid var(--border-2); padding:20px; border-radius:16px;
  min-width:0; margin:0 0 14px;
}
#user-settings-modal .tm-settings-card > p { font-size:13px; line-height:1.5; color:var(--text-muted, var(--grey)); }
#user-settings-modal .tm-settings-appearance > div:first-child { margin:0 !important; padding:16px !important; gap:18px !important; }
#user-settings-modal .tm-settings-appearance #theme-settings-summary { font-size:15px !important; }
#user-settings-modal .tm-settings-appearance #theme-settings-subtitle { font-size:13px !important; line-height:1.5; }
#user-settings-modal .tm-settings-card .btn-small { font-size:13px; min-height:36px; }
#user-settings-modal .tm-settings-identity-icon { width:62px; height:62px; border-radius:17px; background:color-mix(in srgb, var(--accent) 13%, var(--surface-2)); color:var(--accent); display:grid; place-items:center; font-size:27px; }
#user-settings-modal .tm-settings-account-card { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
#user-settings-modal .tm-settings-account-copy { flex:1 1 220px; display:grid; gap:5px; min-width:0; }
#user-settings-modal .tm-settings-account-copy strong { font-size:16px; }
#user-settings-modal .tm-settings-account-copy > span { color:var(--text-muted, var(--grey)); font-size:12px; }
#user-settings-modal .tm-settings-account-copy code { font-size:12px; overflow-wrap:anywhere; color:var(--text-2); }
#user-settings-modal .tm-settings-account-card > .btn-small { width:auto !important; margin:0 !important; padding:10px 13px !important; }
#user-settings-modal .tm-settings-subhead { margin:22px 0 12px; }
#user-settings-modal .tm-settings-subhead h4 { margin:0 0 4px; font-size:17px; }
#user-settings-modal .tm-settings-subhead p { margin:0; font-size:12px; color:var(--text-muted,var(--grey)); }
#user-settings-modal .tm-settings-shortcuts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#user-settings-modal .tm-settings-shortcuts button { display:grid; grid-template-columns:1fr auto; gap:5px 12px; padding:17px; color:var(--text-1); background:var(--surface-1); border:1px solid var(--border-2); border-radius:14px; text-align:left; cursor:pointer; font:inherit; }
#user-settings-modal .tm-settings-shortcuts button strong { font-size:14px; }
#user-settings-modal .tm-settings-shortcuts button span:nth-child(2) { color:var(--text-muted,var(--grey)); font-size:12px; grid-column:1; line-height:1.5; }
#user-settings-modal .tm-settings-shortcuts button span:last-child { grid-column:2; grid-row:1 / span 2; color:var(--accent); align-self:center; font-size:18px; }
#user-settings-modal .tm-settings-shortcuts button:hover { border-color:var(--accent); }
#user-settings-modal .tm-settings-notification-fields { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(170px,260px); gap:14px 20px !important; align-items:center; }
#user-settings-modal .tm-settings-notification-fields > label:not(.perm-check) { font-size:13px !important; font-weight:650; text-transform:none !important; color:var(--text-1) !important; }
#user-settings-modal .tm-settings-notification-fields > select { width:100%; min-width:0; margin:0; font-size:13px; }
#user-settings-modal .tm-settings-notification-fields > .perm-check,
#user-settings-modal .tm-settings-notification-fields > #notification-privacy-summary,
#user-settings-modal .tm-settings-notification-fields > div:last-child { grid-column:1 / -1; }
#user-settings-modal .tm-settings-notification-fields > #notification-privacy-summary { font-size:12px !important; }
#user-settings-modal .tm-settings-network > p { font-size:13px !important; line-height:1.6 !important; margin:0 0 14px !important; }
#user-settings-modal .tm-settings-network > div:first-of-type { padding:16px !important; gap:13px !important; margin-bottom:4px !important; }
#user-settings-modal .tm-settings-network label { color:var(--text-1); font-size:13px !important; line-height:1.4; cursor:pointer; }
#user-settings-modal #network-private-row { min-width:0; }
#user-settings-modal #network-node-input { min-width:0; width:100%; padding:10px 12px; font-size:13px; }
#user-settings-modal #network-status-summary { font-size:12px !important; line-height:1.6 !important; overflow-wrap:anywhere; }
#user-settings-modal .tm-settings-peer-head { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:20px 0 9px; }
#user-settings-modal .tm-settings-peer-head strong { font-size:13px; }
#user-settings-modal .tm-settings-peer-list { display:grid; gap:8px; font-size:12px; }
#user-settings-modal .tm-settings-peer-row { display:flex; gap:8px; align-items:center; padding:10px 12px; border:1px solid var(--border-2); border-radius:10px; background:var(--surface-2); min-width:0; }
#user-settings-modal .tm-settings-peer-row > div { flex:1; min-width:0; }
#user-settings-modal .tm-settings-peer-url { overflow-wrap:anywhere; font-size:12px; color:var(--text-1); }
#user-settings-modal .tm-settings-peer-meta { margin-top:4px; font-size:11px; color:var(--text-muted, var(--grey)); }
#user-settings-modal .tm-settings-peer-state { flex:0 0 auto; border:1px solid var(--border-2); border-radius:999px; padding:3px 7px; text-transform:capitalize; font-size:11px; }
#user-settings-modal .tm-settings-peer-state[data-state="connected"] { color:var(--accent); border-color:var(--accent); }
#user-settings-modal .tm-settings-setting-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,245px); align-items:center; gap:24px; }
#user-settings-modal .tm-settings-setting-row strong { font-size:14px; }
#user-settings-modal .tm-settings-setting-row p { font-size:12px; line-height:1.5; color:var(--text-muted,var(--grey)); margin:5px 0 0; }
#user-settings-modal .tm-settings-setting-row select { width:100%; min-width:0; margin:0 !important; font-size:13px; }
#user-settings-modal .tm-settings-footnote { color:var(--text-muted,var(--grey)); font-size:12px; line-height:1.5; }
#user-settings-modal .tm-settings-security > div:first-child { margin:0 !important; padding:17px !important; }
#user-settings-modal .tm-settings-security #authv2-status { font-size:13px !important; }
#user-settings-modal .tm-settings-security p { font-size:12px !important; line-height:1.6 !important; }
#user-settings-modal .tm-settings-danger-zone { margin-top:22px; border:1px solid color-mix(in srgb, var(--red) 45%, var(--border-2)); padding:20px; border-radius:15px; }
#user-settings-modal .tm-settings-danger-zone h4, #user-settings-modal .tm-settings-backups h4 { margin:0 0 8px; font-size:16px; }
#user-settings-modal .tm-settings-danger-zone p { font-size:12px; line-height:1.5; color:var(--text-muted,var(--grey)); margin:0 0 14px; }
#user-settings-modal .tm-settings-danger-zone > button { max-width:280px; margin:0 !important; width:100% !important; }
#user-settings-modal .tm-settings-backups > button { width:100% !important; max-width:440px; margin:0 0 24px !important; }
#user-settings-modal .tm-settings-backups > button:last-child { margin-bottom:0 !important; }
#user-settings-modal .tm-settings-footer {
  display:flex; gap:18px; align-items:center; justify-content:space-between;
  flex:0 0 auto; padding:12px 22px; border-top:1px solid var(--border-1);
  min-height:65px; background:var(--surface-raised);
}
#user-settings-modal .tm-settings-footer > span { min-width:0; font-size:11px; color:var(--text-muted,var(--grey)); line-height:1.4; }
#user-settings-modal .tm-settings-done { border-color:var(--accent); background:var(--accent); color:var(--surface-1); border-radius:10px; padding:9px 21px; font-size:13px; font-weight:800; }
#user-settings-modal .tm-settings-back { display:none; }
#user-settings-modal .tm-user-settings-workspace button:focus-visible,
#user-settings-modal .tm-user-settings-workspace input:focus-visible,
#user-settings-modal .tm-user-settings-workspace select:focus-visible { outline:2px solid var(--accent) !important; outline-offset:2px; }

@media (max-width: 820px) and (min-width: 641px) {
  #user-settings-modal .tm-settings-layout { grid-template-columns:200px minmax(0,1fr); }
  #user-settings-modal .tm-settings-main { padding:25px 24px 32px; }
}
@media (max-width: 640px) {
  body.user-settings-open #user-settings-modal.modal-overlay,
  #user-settings-modal.modal-overlay {
    inset:0 !important; padding:0 !important;
    height:100dvh !important; max-height:100dvh !important; min-height:100dvh !important;
    align-items:stretch !important; justify-content:stretch !important;
  }
  body.user-settings-open #user-settings-modal .modal-card.tm-user-settings-workspace,
  #user-settings-modal .modal-card.tm-user-settings-workspace {
    width:100vw !important; max-width:100vw !important; min-width:0 !important;
    height:100dvh !important; max-height:100dvh !important; min-height:0 !important;
    margin:0 !important; padding:0 !important; border-radius:0 !important;
    overflow:hidden !important;
  }
  #user-settings-modal .tm-settings-topbar { padding:calc(10px + env(safe-area-inset-top)) 17px 10px; min-height:71px; }
  #user-settings-modal .tm-settings-layout { display:block; overflow:hidden; min-height:0; }
  #user-settings-modal .tm-settings-sidebar { width:100%; height:100%; max-height:100%; border:0; padding:17px 15px 25px; }
  #user-settings-modal .tm-settings-nav-btn { min-height:48px; font-size:14px; }
  #user-settings-modal .tm-settings-main { display:none; height:100%; max-height:100%; padding:16px 18px 28px; overflow-y:auto !important; }
  #user-settings-modal .tm-user-settings-workspace[data-settings-view="panel"] .tm-settings-sidebar { display:none; }
  #user-settings-modal .tm-user-settings-workspace[data-settings-view="panel"] .tm-settings-main { display:block; }
  #user-settings-modal .tm-settings-back { display:inline-flex; align-items:center; border-radius:10px; font-size:12px; padding:8px 11px; margin-bottom:18px; }
  #user-settings-modal .tm-settings-panel-header h3 { font-size:22px; }
  #user-settings-modal .tm-settings-shortcuts { grid-template-columns:1fr; }
  #user-settings-modal .tm-settings-footer { padding:11px 16px calc(11px + env(safe-area-inset-bottom)); min-height:65px; }
  #user-settings-modal .tm-settings-footer > span { font-size:10px; }
  #user-settings-modal .tm-settings-notification-fields { grid-template-columns:minmax(0,1fr); gap:7px !important; }
  #user-settings-modal .tm-settings-notification-fields > select { margin-bottom:12px; }
  #user-settings-modal .tm-settings-setting-row { grid-template-columns:minmax(0,1fr); gap:12px; }
  #user-settings-modal .tm-settings-card { padding:14px; }
  #user-settings-modal .tm-settings-account-card > button { width:100% !important; }
  #user-settings-modal .tm-settings-peer-row { flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce) {
  #user-settings-modal .tm-settings-nav-btn { transition:none; }
}

/* Existing notification control wrapper remains intact for compatibility. */
#user-settings-modal .tm-settings-notification-fields > div:first-child {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(170px,260px);
  align-items:center;
  gap:14px 20px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}
#user-settings-modal .tm-settings-notification-fields > div:first-child > label:not(.perm-check) {
  font-size:13px !important;
  font-weight:650;
  text-transform:none !important;
  color:var(--text-1) !important;
}
#user-settings-modal .tm-settings-notification-fields > div:first-child > select {
  width:100%;
  min-width:0;
  margin:0;
  font-size:13px;
}
#user-settings-modal .tm-settings-notification-fields > div:first-child > .perm-check,
#user-settings-modal .tm-settings-notification-fields > div:first-child > #notification-privacy-summary,
#user-settings-modal .tm-settings-notification-fields > div:first-child > div:last-child {
  grid-column:1 / -1;
}
@media (max-width:820px) and (min-width:641px) {
  body.user-settings-open #user-settings-modal.modal-overlay {
    align-items:center !important; justify-content:center !important;
    padding:24px !important; overflow:hidden !important;
  }
  body.user-settings-open #user-settings-modal .modal-card.tm-user-settings-workspace {
    width:calc(100vw - 48px) !important;
    max-width:1050px !important;
    height:min(88dvh,900px) !important;
    max-height:calc(100dvh - 48px) !important;
    min-height:440px !important;
    margin:auto !important;
    overflow:hidden !important;
    padding:0 !important;
    border-radius:22px !important;
  }
}
@media (max-width:640px) {
  #user-settings-modal .tm-settings-notification-fields > div:first-child {
    grid-template-columns:minmax(0,1fr);
    gap:7px !important;
  }
  #user-settings-modal .tm-settings-notification-fields > div:first-child > select { margin-bottom:12px; }
}

/* Child editors and authentication dialogs sit above mobile settings. */
#theme-settings-modal,
#authv2-enable-modal,
#authv2-change-modal { z-index:2147483400 !important; }