.mu-settings-dialog {
  width: min(760px, calc(100vw - 32px));
  height: min(560px, calc(100dvh - 32px));
  max-width: none; max-height: none; padding: 0;
  color: var(--ink); background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.mu-settings-dialog::backdrop { background: rgba(12, 20, 30, .55); }
.mu-settings-dialog[open] { display: flex; flex-direction: column; }
.mu-settings-dialog [hidden] { display: none !important; }
.mu-settings-head {
  display: flex; align-items: center; gap: var(--s3); flex: none;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border-soft);
}
.mu-settings-head h2 { flex: 1; margin: 0; font-size: var(--fs-lg); }
.mu-settings-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.mu-settings-close { width: 28px; height: 28px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink-2); font-size: 20px; cursor: pointer; }
.mu-settings-close:hover { background: var(--bg-hover); color: var(--ink); }
.mu-settings-body { display: flex; min-height: 0; flex: 1; }
.mu-settings-rail { width: 206px; flex: none; padding: var(--s4) var(--s3);
  border-right: 1px solid var(--border-soft); background: var(--bg-sunken); }
.mu-settings-group { display: block; padding: 0 var(--s2); margin-bottom: 6px;
  color: var(--ink-muted); font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; }
.mu-settings-rail button { display: block; width: 100%; padding: 7px var(--s2);
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-2);
  font: inherit; font-size: var(--fs-md); text-align: left; cursor: pointer; }
.mu-settings-rail button:hover { background: var(--bg-hover); color: var(--ink); }
.mu-settings-rail button[aria-current="true"] { background: var(--primary-soft);
  color: var(--primary-hi); font-weight: 600; }
.mu-settings-content { flex: 1; min-width: 0; padding: var(--s5); overflow-y: auto; }
.mu-settings-content section { display: flex; flex-direction: column; gap: var(--s4); }
.mu-settings-content h3 { margin: 0; padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border-soft); font-size: var(--fs-lg); }
.mu-settings-field { display: flex; flex-direction: column; gap: 6px;
  max-width: 380px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; }
.mu-settings-field select, .mu-settings-inline button {
  min-height: 34px; padding: 0 var(--s3); border: 1px solid var(--border);
  border-radius: var(--r-field); background: var(--bg-surface); color: var(--ink);
  font: inherit; font-size: var(--fs-md); cursor: pointer;
}
.mu-settings-inline { display: flex; align-items: center; gap: var(--s2); }
.mu-settings-inline input[type="color"] { width: 52px; height: 34px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--r-field);
  background: var(--bg-surface); cursor: pointer; }
.mu-settings-inline button:disabled { opacity: .45; cursor: default; }
.mu-settings-note { max-width: 52ch; margin: 0; color: var(--ink-muted);
  font-size: var(--fs-sm); line-height: 1.5; }
.mu-settings-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3); font-size: var(--fs-md); }
.mu-settings-checks label { display: flex; align-items: center; gap: var(--s2); cursor: pointer; }
.mu-settings-checks input { accent-color: var(--primary); }
@media (max-width: 600px) {
  .mu-settings-rail { width: 128px; }
  .mu-settings-content { padding: var(--s3); }
  .mu-settings-checks { grid-template-columns: 1fr; }
}