/* Manrope, self-hosted (SIL Open Font License - see
   fonts/MANROPE-LICENSE.txt). Variable weight file: one face covers
   200-800. No font CDN, no external request of any kind. Manrope
   ships no italic face; browsers synthesize the oblique for <em>. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope.woff2") format("woff2");
}

/* Material 3-flavored tokens. Neutrals carry a slight warm bias toward
   the brand yellow rather than pure gray; the yellow itself (#FFC107)
   is the one fixed point, identical in both themes. */
:root {
  --bg: #FFFDF6;                 /* surface (editor, cards) */
  --bg-sidebar: #F4F0E5;         /* surface-container (drawer) */
  --bg-canvas: #E8E4DA;          /* page behind the app card */
  --surface-high: #ECE7D9;       /* inputs, chips, hovered rows */
  --code-bg: #F0EBDC;
  --border: #D8D2C4;             /* outline-variant */
  --text: #1D1B13;
  --text-muted: #6C675A;
  --accent: #FFC107;
  --on-accent: #241A00;
  --accent-tint: rgba(255, 193, 7, 0.22);
  --link: #8A6A00;              /* readable amber on light ground */
  --danger: #BA1A1A;
  --on-danger: #FFFFFF;
  --hover-layer: rgba(29, 27, 19, 0.07);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 3px 1px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 4px 8px 3px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Cool navy dark palette: #10141C is the main surface, #19212B
       the container "boxes" (drawer, code blocks); everything else is
       derived from the same hue family. The yellow is unchanged. */
    --bg: #10141C;
    --bg-sidebar: #19212B;
    --bg-canvas: #0A0D13;
    --surface-high: #212B38;
    --code-bg: #19212B;
    --border: #303B4A;
    --text: #E6EAF0;
    --text-muted: #93A0B0;
    --accent: #FFC107;
    --on-accent: #241A00;
    --accent-tint: rgba(255, 193, 7, 0.16);
    --link: #FFC107;            /* the brand yellow reads fine on dark */
    --danger: #FFB4AB;
    --on-danger: #690005;
    --hover-layer: rgba(230, 234, 240, 0.07);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px 1px rgba(0, 0, 0, 0.25);
    --shadow-3: 0 4px 8px 3px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-canvas);
  color: var(--text);
  font-size: 15px;
  /* 100vh is the *largest* possible viewport on mobile - it includes
     the strip behind the browser's collapsible address bar. Paired
     with overflow: hidden, that strip swallows anything pinned near
     the bottom of the screen (the FAB) whenever the address bar is
     visible, which on a real phone is most of the time. 100dvh tracks
     the actual visible viewport; the plain 100vh above is the
     fallback for browsers that don't support dvh yet. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Scrollbars in the app's own palette. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.screen {
  height: 100%;
  width: 100%;
  max-width: 1400px;
  border-radius: 24px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.30), 0 2px 10px rgba(0, 0, 0, 0.15);
  background: var(--bg);
}
#login-screen[hidden], #app-screen[hidden] { display: none; }

/* Full-bleed on phone widths, matching an installed PWA. */
@media (max-width: 640px) {
  body { padding: 0; }
  .screen { border-radius: 0; border: none; box-shadow: none; max-width: none; }
}

/* ---- Login ---- */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.login-card {
  width: 340px;
  padding: 36px 32px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 4px;
}
.brand-lockup img {
  border-radius: 8px;
  flex-shrink: 0;
}
.brand-lockup h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.login-card input {
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
}
.login-card input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}

.login-card button {
  margin-top: 8px;
  padding: 12px;
  border: none;
  border-radius: 100px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-1);
}
.login-card button:hover { box-shadow: var(--shadow-3); }

.error {
  color: var(--danger);
  font-size: 13px;
  margin: 0;
}

/* ---- App layout ---- */
#app-screen {
  display: flex;
  position: relative;
  overflow: hidden;
}

/* ---- Navigation drawer (sidebar) ---- */
.sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.16s ease, opacity 0.16s ease;
}

.sidebar.collapsed {
  width: 0;
  border-right: none;
  opacity: 0;
}

#sidebar-backdrop { display: none; }

@media (max-width: 700px) {
  .sidebar {
    position: absolute; top: 0; left: 0; height: 100%;
    width: 84%; max-width: 330px; opacity: 1;
    z-index: 20; box-shadow: 2px 0 16px rgba(0, 0, 0, 0.25);
    transform: translateX(0);
    transition: transform 0.2s ease;
    border-radius: 0 24px 24px 0;
  }
  .sidebar.collapsed {
    width: 84%; max-width: 330px; opacity: 1;
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
  }
  #sidebar-backdrop.visible {
    display: block; position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.35); z-index: 15;
  }
  /* The single-row app bar doesn't fit on a narrow screen - wrap into
     two rows, with the action group on its own row above the title,
     the four groups spread edge to edge. */
  .editor-toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .toolbar-right {
    order: -1;
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    gap: 8px;
  }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--text);
}
.sidebar-brand img {
  border-radius: 6px;
}
.pin-btn {
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 100px;
  cursor: pointer;
}
.pin-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.pin-btn:hover { background: var(--hover-layer); color: var(--text); }
.pin-btn.active { color: var(--accent); }
.pin-btn.active svg { fill: var(--accent); }

/* Material search bar */
.sidebar-header {
  display: flex;
  gap: 6px;
  padding: 6px 14px 12px;
}

#search-box {
  flex: 1;
  padding: 11px 18px;
  border: none;
  border-radius: 100px;
  background: var(--surface-high);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  min-width: 0;
}
#search-box::placeholder { color: var(--text-muted); }
#search-box:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* Note list: Material drawer items - full-pill active state */
#note-list {
  list-style: none;
  margin: 0;
  padding: 4px 10px;
  overflow-y: auto;
  flex: 1;
}

#note-list li {
  padding: 11px 16px;
  border-radius: 100px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  margin-bottom: 2px;
}

#note-list li:hover { background: var(--hover-layer); }
#note-list li.active {
  background: var(--accent-tint);
  color: var(--text);
  font-weight: 700;
}

.sidebar-footer-actions {
  display: flex;
  gap: 8px;
  margin: 10px 14px 0;
}

.sidebar-text-btn {
  flex: 1;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sidebar-text-btn:hover {
  background: var(--hover-layer);
  color: var(--text);
}

.logout-btn {
  margin: 8px 14px 4px;
  padding: 9px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.logout-btn:hover { background: var(--hover-layer); color: var(--text); }

/* Sidebar footer: name + running version, linking to the repo - so
   which build is running is always one glance away. */
.version-link {
  display: block;
  text-align: center;
  margin: 0 14px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0.8;
}
.version-link:hover {
  color: var(--link);
  text-decoration: underline;
  opacity: 1;
}

.lightmorphic-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 0 auto 14px;
  background: var(--surface-high);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px 5px 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  font-size: 0.72rem;
  color: var(--text-muted);
  transition: background 150ms ease, border-color 150ms ease;
}
.lightmorphic-badge:hover { background: var(--hover-layer); border-color: var(--text-muted); }
.lightmorphic-badge img { display: block; height: 16px; width: auto; }
.lightmorphic-badge .external-link-icon { display: block; width: 10px; height: 10px; opacity: 0.6; }
.lightmorphic-badge .external-link-icon svg { width: 100%; height: 100%; }

.lightmorphic-badge img.lightmorphic-badge-logo-dark { display: none; }
.lightmorphic-badge img.lightmorphic-badge-logo-light { display: block; }
@media (prefers-color-scheme: dark) {
  .lightmorphic-badge img.lightmorphic-badge-logo-dark { display: block; }
  .lightmorphic-badge img.lightmorphic-badge-logo-light { display: none; }
}

/* ---- Extended FAB: the primary action, always in reach ---- */
.fab {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px 0 18px;
  height: 56px;
  border: none;
  border-radius: 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-3);
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.fab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.fab:hover { box-shadow: 0 6px 14px 4px rgba(0, 0, 0, 0.22), 0 2px 5px rgba(0, 0, 0, 0.2); }
.fab:active { transform: scale(0.97); }

/* ---- Editor pane ---- */
.editor-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.empty-state {
  padding: 16px 24px;
  color: var(--text-muted);
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}

.editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---- Top app bar ---- */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.menu-toggle-btn {
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 100px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-toggle-btn:hover { background: var(--hover-layer); }
.menu-toggle-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }

/* The brand mark lives in the app bar so it's always on screen -
   even with the drawer collapsed - without shouting. */
.appbar-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  opacity: 0.9;
}

#title-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.005em;
  outline: none;
  font-family: inherit;
  min-width: 0;
}

.toolbar-right {
  display: flex;
  align-items: center;
  /* One uniform gap between the four groups - undo/redo,
     Writer/Markdown, save state, delete - so they read as evenly
     spaced siblings, not a cluster. */
  gap: 20px;
  margin-left: auto;
  flex-shrink: 0;
}

.undo-redo-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ---- Segmented Writer / Markdown control ---- */
.mode-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 100px;
  overflow: hidden;
}

.mode-btn {
  border: none;
  background: transparent;
  padding: 7px 16px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}
.mode-btn:hover { background: var(--hover-layer); }

.mode-btn.active {
  background: var(--accent-tint);
  color: var(--text);
  font-weight: 700;
}

.mode-sep { display: none; }

.save-indicator {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  /* Wide enough for the longest state ("saving…") so the swap to
     "saved" doesn't shift the neighboring groups. */
  min-width: 56px;
  text-align: center;
}

.icon-btn {
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 100px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--hover-layer); }
.icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; }
.icon-btn.danger:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.icon-btn.danger.confirming {
  width: auto;
  padding: 0 16px;
  background: var(--danger);
  color: var(--on-danger);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.icon-btn.danger.confirming:hover { background: var(--danger); color: var(--on-danger); }

/* ---- Format bar ---- */
.format-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  background: var(--bg);
}
/* Same specificity as the browser's [hidden] { display: none } - this
   attribute rule must exist or `display: flex` above wins the tie and
   the bar never hides in Markdown mode. */
.format-bar[hidden] { display: none; }
/* Same tie, same fix: .editor's own display: flex (below) otherwise
   beats [hidden], so the editor chrome (toolbar, blank canvas) stays
   visible behind the empty state before any note has ever been
   created. */
.editor[hidden] { display: none; }
.format-bar button {
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 100px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.format-bar button:hover { background: var(--hover-layer); }
.format-bar button svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }
.format-bar select {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 100px;
  height: 34px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 0 10px;
  cursor: pointer;
}
.format-bar .sep { width: 1px; align-self: stretch; background: var(--border); margin: 4px 6px; }

/* ---- Rendered note content ---- */
.md-alert { border-left: 4px solid var(--accent); background: rgba(255, 193, 7, 0.1); border-radius: 0 12px 12px 0; padding: 10px 16px; margin: 0.8em 0; }
.md-alert p { margin: 0.3em 0; }
.md-alert-title { font-weight: 700; color: var(--link); font-size: 13px; }
.md-alert-tip { border-color: #3fb950; background: rgba(63, 185, 80, 0.1); } .md-alert-tip .md-alert-title { color: #3fb950; }
.md-alert-important { border-color: #a371f7; background: rgba(163, 113, 247, 0.1); } .md-alert-important .md-alert-title { color: #a371f7; }
.md-alert-warning { border-color: #d29922; background: rgba(210, 153, 34, 0.1); } .md-alert-warning .md-alert-title { color: #d29922; }
.md-alert-caution { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); } .md-alert-caution .md-alert-title { color: var(--danger); }

.wysiwyg-container hr {
  border: none;
  border-top: 2px solid var(--border);
  margin: 1.2em 0;
}

.wysiwyg-container {
  flex: 1;
  overflow-y: auto;
  padding: 14px 32px 120px; /* bottom clearance for the FAB */
  outline: none;
  line-height: 1.6;
  font-size: 15px;
}

.wysiwyg-container code {
  background: var(--code-bg);
  padding: 1px 7px;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92em;
}
.wysiwyg-container pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0.6em 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.8;
  font-family: inherit; /* Manrope everywhere - browsers default <pre> to monospace */
}
.wysiwyg-container pre code {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  font-weight: 500;
}

.wysiwyg-container table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.6em 0;
  font-size: 0.95em;
}
.wysiwyg-container th,
.wysiwyg-container td {
  border: 1px solid var(--border);
  padding: 7px 12px;
}
.wysiwyg-container th {
  background: var(--code-bg);
  font-weight: 700;
  text-align: left;
}

.wysiwyg-container h1 { font-size: 27px; font-weight: 700; margin: 0.5em 0 0.3em; }
.wysiwyg-container h2 { font-size: 22px; font-weight: 700; margin: 0.5em 0 0.3em; }
.wysiwyg-container h3 { font-size: 18px; font-weight: 700; margin: 0.5em 0 0.3em; }
.wysiwyg-container h4,
.wysiwyg-container h5,
.wysiwyg-container h6 { font-size: 15px; font-weight: 700; margin: 0.5em 0 0.3em; color: var(--text-muted); }
/* pre-line matters: soft breaks are literal \n characters in paragraph
   text, and this is what renders them as visible line breaks (matching
   GitHub's own GFM rendering). Do not remove.

   Paragraph breaks are NOT margins: the parser renders them as real
   <br><br> blank lines inside one <p>, so the caret can land on the
   blank line exactly like in the Markdown textarea. The margin here
   only separates a text run from real blocks (headings, lists, code)
   - never from another text paragraph. */
.wysiwyg-container p { margin: 0.6em 0; white-space: pre-line; }
.wysiwyg-container > p:first-child { margin-top: 0; }
.wysiwyg-container ul,
.wysiwyg-container ol { padding-left: 24px; margin: 0.5em 0; }
.wysiwyg-container ul.task-list { list-style: none; padding-left: 4px; }
.wysiwyg-container ul.task-list li { display: flex; align-items: baseline; gap: 6px; }
.wysiwyg-container ul.task-list input[type="checkbox"] { accent-color: var(--accent); }
.wysiwyg-container blockquote {
  border-left: 3px solid var(--accent);
  margin: 0.6em 0;
  padding: 2px 0 2px 14px;
  color: var(--text-muted);
}
.wysiwyg-container a { color: var(--link); text-underline-offset: 2px; }
.wysiwyg-container img { max-width: 100%; border-radius: 12px; }
.wysiwyg-container sup.footnote-ref { color: var(--link); font-size: 0.75em; }
.wysiwyg-container .footnotes { margin-top: 1.2em; font-size: 13px; color: var(--text-muted); }
.wysiwyg-container .footnotes hr { margin-bottom: 0.8em; }
.wysiwyg-container .footnotes ol { padding-left: 20px; }

.raw-textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  padding: 20px 32px 120px; /* bottom clearance for the FAB */
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
}

/* ---- Search results ---- */
#search-results { flex: 1; overflow-y: auto; padding: 10px 14px; }
#search-results .results-heading { padding: 8px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
#search-results .result-item {
  padding: 12px 16px;
  border-radius: 16px;
  cursor: pointer;
  margin-bottom: 2px;
}
#search-results .result-item:hover { background: var(--hover-layer); }
#search-results .result-title { font-size: 15px; font-weight: 600; }

/* Mobile compaction for the app-bar action groups. Lives at the END
   of the file on purpose: these override component rules of equal
   specificity above, and in CSS a tie is won by source order - placed
   earlier, they'd silently lose and the delete button overflows off
   the right edge of a phone screen. */
@media (max-width: 700px) {
  .editor-toolbar { padding-left: 12px; padding-right: 12px; }
  .mode-toggle { flex-shrink: 0; }
  .mode-btn { padding: 6px 10px; font-size: 12px; }
  .save-indicator { min-width: 44px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- Settings dialog ---- */
.settings-btn {
  flex: none;
  width: 100%;
  margin: 8px 14px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.settings-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex-shrink: 0; }

.settings-dialog {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0;
  width: min(480px, 92vw);
  max-height: 86vh;
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-3);
}
.settings-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }

.settings-form { display: flex; flex-direction: column; max-height: 86vh; overflow-y: auto; }

.settings-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.settings-header h2 { margin: 0; font-size: 17px; }

.settings-section {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-section:last-child { border-bottom: none; }
.settings-section h3 { margin: 0; font-size: 14px; }
.settings-section-header { display: flex; align-items: center; justify-content: space-between; }

.settings-section label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.settings-optional { font-weight: 500; text-transform: none; letter-spacing: 0; }
.settings-section input:not([type="checkbox"]),
.settings-command {
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-high);
  color: var(--text);
  resize: none;
}
.settings-section input:focus, .settings-command:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}
.settings-command { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; }

.settings-copy-row { display: flex; gap: 8px; align-items: flex-start; }
.settings-copy-row input, .settings-copy-row textarea { flex: 1; min-width: 0; }

.settings-copy-btn {
  flex-shrink: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.settings-copy-btn:hover { background: var(--hover-layer); color: var(--text); }

.settings-btn-primary {
  padding: 11px;
  border: none;
  border-radius: 100px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.settings-btn-primary:hover { box-shadow: var(--shadow-1); }

.settings-btn-danger {
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: transparent;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.settings-btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }

.settings-hint { margin: 0; font-size: 12px; color: var(--text-muted); font-weight: 500; }

/* Connect/disconnect switch */
.mcp-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.mcp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mcp-switch-track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 100px;
  background: var(--border);
  transition: background 150ms ease;
  flex-shrink: 0;
}
.mcp-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--shadow-1);
  transition: transform 150ms ease;
}
.mcp-switch input:checked + .mcp-switch-track { background: var(--accent); }
.mcp-switch input:checked + .mcp-switch-track .mcp-switch-thumb { transform: translateX(16px); }
.mcp-switch input:focus-visible + .mcp-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }