/**
 * ms-forms.css — modern design layer for streamer customization pages.
 *
 * Purpose: replace the ad-hoc card/form styling that grew across
 * kick-pages.css and twitch-pages.css with a coherent token-driven
 * system. Used by:
 *   • src/dashboard/templates/kick/alerts.ejs
 *   • src/dashboard/templates/twitch/alerts.ejs
 *   • src/dashboard/templates/kick/overlays.ejs
 *   • src/dashboard/templates/twitch/overlays.ejs
 *
 * Existing CSS classes (.settings-card, .setting-group, etc.) are NOT
 * removed — those still style the rest of the dashboard. New classes
 * here use the `.ms-` prefix to avoid collision and only apply where
 * the templates explicitly opt in.
 *
 * Naming: BEM-ish. .ms-card, .ms-card__header, .ms-card--accent, etc.
 */

/* ─── Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Spacing — 4-step scale */
  --ms-s-1:  4px;
  --ms-s-2:  8px;
  --ms-s-3: 12px;
  --ms-s-4: 16px;
  --ms-s-5: 20px;
  --ms-s-6: 24px;
  --ms-s-8: 32px;
  --ms-s-10: 40px;

  /* Radii — clear hierarchy: input < sub-card < card < page */
  --ms-r-1:  6px;
  --ms-r-2: 10px;
  --ms-r-3: 14px;
  --ms-r-4: 20px;

  /* Shadows — layered, modern. Each combines a tight close shadow with a
     softer ambient one so the depth reads at any zoom level. */
  --ms-shadow-subtle:  0 1px 2px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.10);
  --ms-shadow-soft:    0 4px 12px rgba(0, 0, 0, 0.20), 0 2px 4px rgba(0, 0, 0, 0.10);
  --ms-shadow-medium:  0 12px 28px rgba(0, 0, 0, 0.32), 0 4px 8px rgba(0, 0, 0, 0.16);
  --ms-shadow-glow-purple: 0 0 24px rgba(145, 70, 255, 0.25), 0 4px 16px rgba(0, 0, 0, 0.20);
  --ms-shadow-glow-green:  0 0 24px rgba( 83,252, 24, 0.20), 0 4px 16px rgba(0, 0, 0, 0.20);

  /* Surfaces — translucent on dark backgrounds so the page bg shows
     through subtly. Plays well with backdrop-filter. */
  --ms-surface-1: rgba(18, 21, 32, 0.72);
  --ms-surface-2: rgba(26, 30, 44, 0.82);
  --ms-surface-3: rgba(255, 255, 255, 0.04);
  --ms-surface-3-hover: rgba(255, 255, 255, 0.07);
  --ms-border:    1px solid rgba(255, 255, 255, 0.07);
  --ms-border-strong: 1px solid rgba(255, 255, 255, 0.12);
  --ms-border-focus: 1px solid rgba(145, 70, 255, 0.55);

  /* Typography */
  --ms-fg-1: #f1f5f9;
  --ms-fg-2: #cbd5e1;
  --ms-fg-3: #94a3b8;
  --ms-fg-4: #64748b;

  /* Brand */
  --ms-purple:       #9146FF;
  --ms-purple-soft:  rgba(145, 70, 255, 0.18);
  --ms-kick-green:   #53FC18;
  --ms-kick-soft:    rgba(83, 252, 24, 0.16);
  --ms-twitch:       #9146FF;
}

/* ─── ms-card: the base surface for every customization section ──── */
.ms-card {
  background: var(--ms-surface-1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: var(--ms-border);
  border-radius: var(--ms-r-3);
  box-shadow: var(--ms-shadow-soft);
  padding: var(--ms-s-6);
  margin-bottom: var(--ms-s-5);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.ms-card:focus-within {
  border-color: rgba(145, 70, 255, 0.30);
  box-shadow: var(--ms-shadow-medium);
}

.ms-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-s-3);
  margin-bottom: var(--ms-s-5);
  padding-bottom: var(--ms-s-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ms-card__header-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--ms-r-2);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(145, 70, 255, 0.22), rgba(145, 70, 255, 0.05));
  color: #c4b5fd;
  font-size: 16px;
  border: 1px solid rgba(145, 70, 255, 0.20);
}
.ms-card--kick .ms-card__header-icon {
  background: linear-gradient(135deg, rgba(83, 252, 24, 0.22), rgba(83, 252, 24, 0.04));
  color: #86efac;
  border-color: rgba(83, 252, 24, 0.22);
}
.ms-card__header-text { flex: 1; min-width: 0; }
.ms-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ms-fg-1);
  letter-spacing: 0.1px;
}
.ms-card__subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ms-fg-3);
  line-height: 1.5;
}

/* ─── ms-section: visual sub-group inside a card ─────────────────── */
.ms-section {
  margin-bottom: var(--ms-s-5);
}
.ms-section:last-child {
  margin-bottom: 0;
}
.ms-section__head {
  display: flex;
  align-items: center;
  gap: var(--ms-s-2);
  margin-bottom: var(--ms-s-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ms-fg-3);
}
.ms-section__head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent);
}
.ms-section__head i { color: #c4b5fd; font-size: 12px; }

/* ─── ms-grid: responsive 2-column field grid ────────────────────── */
.ms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ms-s-4);
}
.ms-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-grid__full { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .ms-grid, .ms-grid--3 { grid-template-columns: 1fr; }
}

/* ─── ms-field: label + input combo ──────────────────────────────── */
.ms-field {
  display: flex;
  flex-direction: column;
  gap: var(--ms-s-2);
  min-width: 0;
}
.ms-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ms-s-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--ms-fg-2);
  letter-spacing: 0.1px;
}
.ms-field__hint {
  font-size: 11px;
  color: var(--ms-fg-4);
  font-weight: 400;
}
.ms-field__value {
  font-size: 12px;
  color: #c4b5fd;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(145, 70, 255, 0.10);
  padding: 1px 8px;
  border-radius: var(--ms-r-1);
}

/* ─── Inputs (text / select) ─────────────────────────────────────── */
.ms-input,
.ms-select,
.ms-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--ms-surface-3);
  border: var(--ms-border);
  border-radius: var(--ms-r-1);
  color: var(--ms-fg-1);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.ms-input:hover,
.ms-select:hover,
.ms-textarea:hover {
  background: var(--ms-surface-3-hover);
  border-color: rgba(255,255,255,0.12);
}
.ms-input:focus,
.ms-select:focus,
.ms-textarea:focus {
  border-color: rgba(145, 70, 255, 0.55);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.15);
}
.ms-textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.ms-input::placeholder, .ms-textarea::placeholder { color: var(--ms-fg-4); }

/* ─── Range slider ───────────────────────────────────────────────── */
.ms-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.ms-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ms-purple);
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(145,70,255,0.18), 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.ms-range:hover::-webkit-slider-thumb { transform: scale(1.1); }
.ms-range::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ms-purple);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ─── Color input ────────────────────────────────────────────────── */
.ms-color {
  display: flex;
  align-items: center;
  gap: var(--ms-s-2);
  padding: 6px 10px 6px 6px;
  background: var(--ms-surface-3);
  border: var(--ms-border);
  border-radius: var(--ms-r-1);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.ms-color:hover { background: var(--ms-surface-3-hover); border-color: rgba(255,255,255,0.12); }
.ms-color input[type="color"] {
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--ms-r-1);
  padding: 0;
}
.ms-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.ms-color input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
.ms-color__hex {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12px;
  color: var(--ms-fg-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─── 3×3 Position picker ────────────────────────────────────────── */
.ms-position-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  width: 200px;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--ms-r-2);
  padding: 8px;
}
.ms-position-picker__cell {
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  cursor: pointer;
  transition: all 140ms ease;
  position: relative;
}
.ms-position-picker__cell:hover {
  background: rgba(145,70,255,0.12);
  border-color: rgba(145,70,255,0.30);
}
.ms-position-picker__cell::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  transition: all 140ms ease;
}
.ms-position-picker__cell:hover::after { background: rgba(145,70,255,0.7); }
.ms-position-picker__cell.is-active {
  background: rgba(145,70,255,0.20);
  border-color: rgba(145,70,255,0.60);
  box-shadow: inset 0 0 0 1px rgba(145,70,255,0.25);
}
.ms-position-picker__cell.is-active::after {
  background: var(--ms-purple);
  box-shadow: 0 0 8px rgba(145,70,255,0.7);
  width: 8px; height: 8px;
}

/* ─── Shadow chips (named presets as visual buttons) ─────────────── */
.ms-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ms-chip {
  flex: 1;
  min-width: 60px;
  padding: 8px 6px;
  background: var(--ms-surface-3);
  border: var(--ms-border);
  border-radius: var(--ms-r-1);
  color: var(--ms-fg-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  cursor: pointer;
  transition: all 140ms ease;
  text-align: center;
}
.ms-chip:hover {
  background: var(--ms-surface-3-hover);
  border-color: rgba(255,255,255,0.14);
  color: var(--ms-fg-1);
}
.ms-chip.is-active {
  background: rgba(145,70,255,0.14);
  border-color: rgba(145,70,255,0.55);
  color: #c4b5fd;
}

/* ─── Live preview pane ──────────────────────────────────────────── */
.ms-preview {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.02), transparent),
    repeating-conic-gradient(rgba(255,255,255,0.018) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
  border: var(--ms-border);
  border-radius: var(--ms-r-2);
  height: 220px;
  position: relative;
  overflow: hidden;
}
.ms-preview__hint {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ms-fg-4);
  pointer-events: none;
}
.ms-preview__alert {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.ms-preview__alert-img {
  width: 48px; height: 48px;
  border-radius: 6px;
  background: linear-gradient(135deg, #c4b5fd, #9146FF);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: white;
}
.ms-preview__alert-text {
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  font-size: 14px;
}

/* ─── GIF/Sound input rows ───────────────────────────────────────── */
.ms-input-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.ms-input-row .ms-input { flex: 1; }
.ms-input-row .ms-btn { flex-shrink: 0; }

/* ─── Buttons ────────────────────────────────────────────────────── */
.ms-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--ms-surface-3);
  border: var(--ms-border-strong);
  border-radius: var(--ms-r-1);
  color: var(--ms-fg-1);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 140ms ease;
}
.ms-btn:hover { background: var(--ms-surface-3-hover); border-color: rgba(145, 70, 255, 0.35); }
.ms-btn:active { transform: translateY(1px); }
.ms-btn--primary {
  background: linear-gradient(135deg, #9146FF, #7c3aed);
  border-color: transparent;
  color: white;
  box-shadow: var(--ms-shadow-glow-purple);
}
.ms-btn--primary:hover { background: linear-gradient(135deg, #a855f7, #9146FF); }
.ms-btn--accent-kick {
  background: linear-gradient(135deg, #53FC18, #2eb820);
  border-color: transparent;
  color: #052e0c;
  box-shadow: var(--ms-shadow-glow-green);
}
.ms-btn--ghost { background: transparent; }

/* ─── Style preset bar (one-click theme apply) ───────────────────── */
.ms-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: var(--ms-s-3) var(--ms-s-4);
  background: linear-gradient(135deg, rgba(145, 70, 255, 0.06), rgba(83, 252, 24, 0.04));
  border: 1px solid rgba(145, 70, 255, 0.18);
  border-radius: var(--ms-r-2);
  margin-bottom: var(--ms-s-4);
}
.ms-presets__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ms-fg-3);
  font-weight: 700;
  margin-right: var(--ms-s-2);
}
.ms-presets__label i { color: #c4b5fd; }
.ms-preset {
  padding: 6px 12px;
  background: var(--ms-surface-3);
  border: var(--ms-border-strong);
  border-radius: 999px;
  color: var(--ms-fg-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ms-preset:hover {
  background: rgba(145, 70, 255, 0.12);
  border-color: rgba(145, 70, 255, 0.45);
  color: #fff;
  transform: translateY(-1px);
}
.ms-preset__swatch {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

/* ─── AI assist button (sparkle indicator) ───────────────────────── */
.ms-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(145, 70, 255, 0.18), rgba(196, 181, 253, 0.10));
  border: 1px solid rgba(145, 70, 255, 0.40);
  border-radius: var(--ms-r-1);
  color: #c4b5fd;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms ease;
  position: relative;
}
.ms-ai-btn::before {
  content: '✨';
  font-size: 12px;
  filter: drop-shadow(0 0 4px rgba(196, 181, 253, 0.6));
}
.ms-ai-btn:hover {
  background: linear-gradient(135deg, rgba(145, 70, 255, 0.30), rgba(196, 181, 253, 0.18));
  border-color: rgba(145, 70, 255, 0.70);
  color: #fff;
  box-shadow: 0 0 18px rgba(145, 70, 255, 0.32);
}
.ms-ai-btn:disabled {
  opacity: 0.6; cursor: not-allowed;
}
.ms-ai-btn.is-loading::before {
  content: '⟳';
  animation: ms-spin 1s linear infinite;
}
@keyframes ms-spin { to { transform: rotate(360deg); } }

/* ─── Variable insert chips ──────────────────────────────────────── */
.ms-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.ms-vars__chip {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--ms-fg-3);
  cursor: pointer;
  transition: all 120ms ease;
}
.ms-vars__chip:hover {
  background: rgba(145, 70, 255, 0.14);
  border-color: rgba(145, 70, 255, 0.45);
  color: #c4b5fd;
}

/* ─── Event Card v2 (collapsible, branded) ───────────────────────── */
.ms-event {
  background: var(--ms-surface-2);
  border: var(--ms-border);
  border-left: 3px solid var(--ms-event-accent, #9146FF);
  border-radius: var(--ms-r-2);
  margin-bottom: var(--ms-s-3);
  overflow: hidden;
  transition: border-color 200ms ease;
}
.ms-event:hover { border-color: rgba(255, 255, 255, 0.14); }

.ms-event__head {
  display: flex;
  align-items: center;
  gap: var(--ms-s-3);
  padding: var(--ms-s-3) var(--ms-s-4);
  cursor: pointer;
  user-select: none;
  transition: background 140ms ease;
}
.ms-event__head:hover { background: rgba(255, 255, 255, 0.02); }
.ms-event__icon {
  width: 28px; height: 28px;
  border-radius: var(--ms-r-1);
  display: grid;
  place-items: center;
  background: var(--ms-event-accent-soft, rgba(145, 70, 255, 0.15));
  color: var(--ms-event-accent, #c4b5fd);
  font-size: 13px;
  flex-shrink: 0;
}
.ms-event__title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ms-event__title-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ms-fg-1);
}
.ms-event__title-preview {
  font-size: 11px;
  color: var(--ms-fg-4);
  font-style: italic;
  font-family: 'JetBrains Mono', Consolas, monospace;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-event__toggle {
  display: flex;
  align-items: center;
  gap: var(--ms-s-3);
  flex-shrink: 0;
}
.ms-event__chevron {
  color: var(--ms-fg-4);
  font-size: 12px;
  transition: transform 200ms ease;
}
.ms-event.is-open .ms-event__chevron { transform: rotate(180deg); color: var(--ms-fg-2); }

.ms-event__body {
  padding: 0 var(--ms-s-4) var(--ms-s-4);
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 0;
}
.ms-event.is-open .ms-event__body { display: block; }

/* Image preview */
.ms-event__img-preview {
  display: block;
  margin-top: 8px;
  max-width: 120px;
  max-height: 80px;
  border-radius: var(--ms-r-1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}
.ms-event__img-preview[src=""], .ms-event__img-preview:not([src]) { display: none; }

/* ─── AI Suggestions Modal ───────────────────────────────────────── */
.ms-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 14, 0.82);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.ms-modal.is-open { display: flex; }
.ms-modal__panel {
  background: rgba(20, 22, 36, 0.96);
  border: 1px solid rgba(145, 70, 255, 0.30);
  border-radius: var(--ms-r-3);
  box-shadow: var(--ms-shadow-medium), 0 0 60px rgba(145, 70, 255, 0.15);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ms-modal-in 200ms ease-out;
}
@keyframes ms-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ms-modal__head {
  padding: var(--ms-s-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: var(--ms-s-3);
}
.ms-modal__title { font-size: 16px; font-weight: 600; color: var(--ms-fg-1); }
.ms-modal__title small { display: block; font-size: 12px; color: var(--ms-fg-3); font-weight: 400; margin-top: 2px; }
.ms-modal__close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--ms-fg-3);
  font-size: 20px;
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: var(--ms-r-1);
  transition: all 140ms ease;
}
.ms-modal__close:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.ms-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ms-s-5);
}
.ms-suggestion {
  padding: var(--ms-s-4);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--ms-r-2);
  margin-bottom: var(--ms-s-3);
  cursor: pointer;
  transition: all 160ms ease;
  position: relative;
}
.ms-suggestion:hover {
  background: rgba(145, 70, 255, 0.06);
  border-color: rgba(145, 70, 255, 0.40);
  transform: translateX(2px);
}
.ms-suggestion__num {
  position: absolute;
  top: 12px; left: 12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(145, 70, 255, 0.15);
  color: #c4b5fd;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.ms-suggestion__text {
  margin-left: 36px;
  font-size: 13px;
  color: var(--ms-fg-1);
  line-height: 1.5;
}
.ms-suggestion__action {
  margin-left: 36px;
  margin-top: 6px;
  font-size: 11px;
  color: #c4b5fd;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 140ms ease;
}
.ms-suggestion:hover .ms-suggestion__action { opacity: 1; }
.ms-modal__loading,
.ms-modal__empty {
  text-align: center;
  padding: var(--ms-s-8) var(--ms-s-4);
  color: var(--ms-fg-3);
  font-size: 13px;
}
.ms-modal__loading i { font-size: 22px; margin-bottom: var(--ms-s-3); display: block; color: #c4b5fd; }
.ms-modal__footer {
  padding: var(--ms-s-3) var(--ms-s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  color: var(--ms-fg-4);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ms-modal__footer .ms-pill {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(145, 70, 255, 0.12);
  color: #c4b5fd;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

/* ─── Sticky save bar ────────────────────────────────────────────── */
.ms-savebar {
  position: sticky;
  bottom: 0;
  margin-top: var(--ms-s-6);
  padding: var(--ms-s-4) var(--ms-s-6);
  background: rgba(15, 17, 27, 0.92);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ms-r-3) var(--ms-r-3) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-s-4);
  z-index: 5;
  box-shadow: var(--ms-shadow-medium);
}
.ms-savebar__hint {
  font-size: 12px;
  color: var(--ms-fg-3);
}