/* ── Settings Modal ─────────────────────────────── */
.settings-overlay{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(26,29,35,.45);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
.settings-overlay.open{opacity:1;pointer-events:auto}

.settings-modal{
  width:480px;max-width:92vw;max-height:80vh;
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg),0 0 0 1px var(--border-light);
  display:flex;flex-direction:column;
  transform:translateY(12px) scale(.97);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.settings-overlay.open .settings-modal{transform:translateY(0) scale(1)}

/* Header */
.sm-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px 16px;flex-shrink:0;
  border-bottom:1px solid var(--border-light);
}
.sm-title{font-size:15px;font-weight:700;color:var(--text)}
.sm-close{
  display:grid;place-items:center;width:28px;height:28px;
  border-radius:var(--r-sm);border:none;background:transparent;
  color:var(--text-muted);cursor:pointer;transition:all var(--tr);
}
.sm-close:hover{background:var(--bg);color:var(--text)}
.sm-close svg{width:16px;height:16px}

/* Body */
.sm-body{
  padding:20px 24px 24px;overflow-y:auto;
  display:flex;flex-direction:column;gap:24px;
}

/* Section in modal */
.sm-section-label{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);margin-bottom:12px;
}
.sm-field{
  display:flex;align-items:center;justify-content:space-between;
  min-height:36px;
}
.sm-field + .sm-field{margin-top:10px}
.sm-field-label{font-size:13px;font-weight:500;color:var(--text-secondary)}
.sm-field-hint{font-size:11px;color:var(--text-muted);margin-top:2px;line-height:1.3}

/* Reuse fc-dropdown inside modal */
.sm-field .fc-dropdown-btn{
  min-width:170px;text-align:left;
  font-size:12.5px;padding:6px 30px 6px 10px;
}
.sm-field .fc-dropdown-menu{min-width:170px}

/* Visual preset cards */
.sm-layout-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-top:8px;
}
.sm-layout-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 6px 10px;border-radius:var(--r);
  border:2px solid var(--border-light);
  background:var(--bg-inset);cursor:pointer;
  transition:all var(--tr);
}
.sm-layout-card:hover{border-color:var(--border-focus);background:var(--surface)}
.sm-layout-card.active{border-color:var(--primary);background:var(--primary-bg)}
.sm-layout-card.active .sm-lc-label{color:var(--primary)}
.sm-lc-icon{
  width:48px;height:36px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border-light);
  overflow:hidden;position:relative;
}
.sm-layout-card.active .sm-lc-icon{border-color:var(--primary-light)}
.sm-lc-label{font-size:10px;font-weight:600;color:var(--text-muted);text-align:center;line-height:1.2}

/* Mini layout diagrams inside .sm-lc-icon */
.sm-lc-icon svg{width:38px;height:28px}
.sm-lc-icon svg rect,.sm-lc-icon svg line{stroke:var(--text-muted);fill:none;stroke-width:.8}
.sm-lc-icon svg .filled{fill:var(--primary-light);stroke:var(--primary);opacity:.5}
.sm-layout-card.active .sm-lc-icon svg .filled{opacity:.8}