/* Quick Migrate · A SPINX Digital Product — brand fonts.
   Bundled locally (no remote requests). DM Sans and JetBrains Mono are variable
   fonts licensed under the SIL Open Font License 1.1 — see assets/fonts/OFL-*.txt. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   Quick Migrate theme tokens — LIGHT is the default; add `spinxqm-theme-dark`
   to <body> for the dark brand (toggled at runtime, persisted, see app.js).
   Every value is a literal per theme (no var()-of-var(), which wouldn't
   re-resolve under the dark class). The whole UI references these tokens.
   ===================================================================== */
:root {
  /* Brand palette — LIGHT (SPINX Digital light system) */
  --spinxqm-color-bg-primary:   #F7F6F2; /* Cloud White */
  --spinxqm-color-bg-surface:   #FFFFFF; /* Pure White  */
  --spinxqm-color-bg-elevated:  #FFFFFF;
  --spinxqm-color-accent:       #2167E8; /* Royal Blue  */
  --spinxqm-color-accent-hover: #1A5CBF; /* Deep Blue   */
  --spinxqm-color-accent-alt:   #0E9E72; /* Teal Green  */
  --spinxqm-color-text-primary: #1A1B1F; /* Ink         */
  --spinxqm-color-text-muted:   #6B6F7A; /* Smoke       */
  --spinxqm-color-border:       #E8E6E0; /* Stone       */
  --spinxqm-color-border-hover: #C9C6BD;
  --spinxqm-color-error:        #D93025;
  --spinxqm-color-warning:      #E07B00;
  --spinxqm-color-success:      #0E9E72;
  --spinxqm-color-info:         #2167E8;

  /* Typography (theme-independent) */
  --spinxqm-font-display: sans-serif;
  --spinxqm-font-body:    'DM Sans', 'Helvetica Neue', sans-serif;
  --spinxqm-font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --spinxqm-radius-pill: 100px;
  --spinxqm-radius:    14px;
  --spinxqm-radius-sm: 10px;
  /* One height for every single-line form control (input / select), so a select
     and a number field sitting in the same row can't disagree by a pixel or two
     of intrinsic content height. */
  --spinxqm-control-h: 40px;
  --spinxqm-space-2: 8px; --spinxqm-space-3: 12px; --spinxqm-space-4: 16px; --spinxqm-space-5: 20px; --spinxqm-space-6: 24px;

  /* Legacy tokens the whole UI references — LIGHT values */
  --spinxqm-bg:            #F7F6F2;
  /* Recessed surface for boxed fields (check-lists, exclusion textareas) so they
     read as sunk INTO the card rather than floating level with it. */
  --spinxqm-field-bg:      #F7F6F2;
  --spinxqm-surface:       #FFFFFF;
  --spinxqm-elevated:      #FFFFFF;
  --spinxqm-subtle:        #EDEBE5;
  --spinxqm-hover:         #E7E4DC;
  --spinxqm-text:          #1A1B1F;
  --spinxqm-muted:         #6B6F7A;
  --spinxqm-faint:         #9B9FA9;
  --spinxqm-border:        #E8E6E0;
  --spinxqm-border-hover:  #C9C6BD;
  --spinxqm-accent:        #2167E8;
  --spinxqm-accent-soft:   #EAF2FF;
  --spinxqm-accent-alt:    #0E9E72;
  --spinxqm-danger:        #D93025;
  --spinxqm-shadow:        0 12px 32px rgba(26, 27, 31, 0.10);

  /* Component helper tokens (theme-swapped) — LIGHT values */
  --spinxqm-canvas-glow:
    radial-gradient(900px 380px at 88% -8%, rgba(33, 103, 232, 0.06), transparent 60%),
    radial-gradient(700px 340px at -6% 4%, rgba(14, 158, 114, 0.05), transparent 55%);
  --spinxqm-header-bg:        linear-gradient(135deg, #FFFFFF 0%, #F1EFE9 100%);
  --spinxqm-header-glow:      rgba(33, 103, 232, 0.10);
  --spinxqm-btn-bg:           #FFFFFF;
  --spinxqm-btn-bg-hover:     #F2F0EA;
  --spinxqm-btn-border:       #E0DDD5;
  --spinxqm-btn-border-hover: #C9C6BD;
  --spinxqm-skeleton-1:       #EDEBE5;
  --spinxqm-skeleton-2:       #F7F6F2;
  --spinxqm-track:            #E8E6E0;
  --spinxqm-inset-line:       rgba(0, 0, 0, 0.05);
  --spinxqm-sample-before:    #6B6F7A;
  --spinxqm-logo-door:        #A8CBF5;
}

body.spinxqm-theme-dark {
  /* Brand palette — DARK (Obsidian / Signal Blue) */
  --spinxqm-color-bg-primary:   #16171A;
  --spinxqm-color-bg-surface:   #1E2026;
  --spinxqm-color-bg-elevated:  #2A2D35;
  --spinxqm-color-accent:       #4F8EF7;
  --spinxqm-color-accent-hover: #3B7EF0;
  --spinxqm-color-accent-alt:   #6FCFB0;
  --spinxqm-color-text-primary: #F4F3EF;
  --spinxqm-color-text-muted:   #8B8D96;
  --spinxqm-color-border:       rgba(255, 255, 255, 0.08);
  --spinxqm-color-border-hover: rgba(255, 255, 255, 0.16);
  --spinxqm-color-error:        #E84B41;
  --spinxqm-color-warning:      #F5A623;
  --spinxqm-color-success:      #6FCFB0;
  --spinxqm-color-info:         #4F8EF7;

  --spinxqm-bg:            #16171A;
  /* Darker than --spinxqm-surface (#1E2026), the card behind it — recessed, not raised. */
  --spinxqm-field-bg:      #141519;
  --spinxqm-surface:       #1E2026;
  --spinxqm-elevated:      #2A2D35;
  --spinxqm-subtle:        rgba(255, 255, 255, 0.05);
  --spinxqm-hover:         rgba(255, 255, 255, 0.10);
  --spinxqm-text:          #F4F3EF;
  --spinxqm-muted:         #8B8D96;
  --spinxqm-faint:         #6E727C;
  --spinxqm-border:        rgba(255, 255, 255, 0.08);
  --spinxqm-border-hover:  rgba(255, 255, 255, 0.16);
  --spinxqm-accent:        #4F8EF7;
  --spinxqm-accent-soft:   rgba(79, 142, 247, 0.16);
  --spinxqm-accent-alt:    #6FCFB0;
  --spinxqm-danger:        #E84B41;
  --spinxqm-shadow:        0 18px 48px rgba(0, 0, 0, 0.45);

  --spinxqm-canvas-glow:
    radial-gradient(900px 380px at 88% -8%, rgba(79, 142, 247, 0.10), transparent 60%),
    radial-gradient(700px 340px at -6% 4%, rgba(111, 207, 176, 0.06), transparent 55%);
  --spinxqm-header-bg:        linear-gradient(135deg, #20222B 0%, #1A1C22 100%);
  --spinxqm-header-glow:      rgba(79, 142, 247, 0.18);
  --spinxqm-btn-bg:           rgba(255, 255, 255, 0.07);
  --spinxqm-btn-bg-hover:     rgba(255, 255, 255, 0.14);
  --spinxqm-btn-border:       rgba(255, 255, 255, 0.16);
  --spinxqm-btn-border-hover: rgba(255, 255, 255, 0.32);
  --spinxqm-skeleton-1:       rgba(255, 255, 255, 0.04);
  --spinxqm-skeleton-2:       rgba(255, 255, 255, 0.10);
  --spinxqm-track:            rgba(255, 255, 255, 0.06);
  --spinxqm-inset-line:       rgba(255, 255, 255, 0.03);
  --spinxqm-sample-before:    rgba(244, 243, 239, 0.72);
  --spinxqm-logo-door:        #6FCFB0;
}

/* The plugin area is its own themed app surface inside wp-admin. */
.spinxqm-wrap {
  margin: 16px 20px 20px 2px;
  background: var(--spinxqm-bg);
  background-image: var(--spinxqm-canvas-glow);
  color: var(--spinxqm-text);
  font-family: var(--spinxqm-font-body);
  border: 1px solid var(--spinxqm-border);
  border-radius: var(--spinxqm-radius);
  padding: var(--spinxqm-space-6);
}
/* Native selects/option lists/scrollbars/date pickers follow the theme. */
.spinxqm-wrap, .spinxqm-modal, .spinxqm-process { color-scheme: light; }
body.spinxqm-theme-dark .spinxqm-wrap,
body.spinxqm-theme-dark .spinxqm-modal,
body.spinxqm-theme-dark .spinxqm-process { color-scheme: dark; }
.spinxqm-app { color: var(--spinxqm-text); font-family: var(--spinxqm-font-body); }
.spinxqm-wrap h1, .spinxqm-wrap h2, .spinxqm-wrap h3, .spinxqm-wrap h4 { font-family: var(--spinxqm-font-display); color: var(--spinxqm-text); }

.spinxqm-header-card {
  background: var(--spinxqm-header-bg);
  border: 1px solid var(--spinxqm-border);
  border-radius: var(--spinxqm-radius);
  padding: var(--spinxqm-space-6) var(--spinxqm-space-6) var(--spinxqm-space-6) var(--spinxqm-space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spinxqm-space-4);
  margin-bottom: var(--spinxqm-space-5);
  position: relative;
  overflow: hidden;
}
.spinxqm-header-card::after {
  content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px;
  background: radial-gradient(circle, var(--spinxqm-header-glow), transparent 65%); pointer-events: none;
}
.spinxqm-header-card h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.spinxqm-eyebrow {
  margin: 0 0 6px; color: var(--spinxqm-accent-alt); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--spinxqm-font-body);
}

/* Brand logo lockup in the header */
.spinxqm-brand { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.spinxqm-brand__mark { flex: none; display: block; border-radius: var(--spinxqm-radius-sm); }
.spinxqm-wordmark { font-family: var(--spinxqm-font-display); font-weight: 800; }
.spinxqm-wordmark > span { color: var(--spinxqm-accent); }

/* Logomark recolours with the active theme */
.spinxqm-brand__mark .spinxqm-logo-bg, .spinxqm-footer__mark .spinxqm-logo-bg { fill: var(--spinxqm-accent); }
.spinxqm-brand__mark .spinxqm-logo-door { stroke: var(--spinxqm-logo-door); }

/* Header actions + light/dark theme toggle */
.spinxqm-header-actions { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.spinxqm-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex: none;
  border-radius: var(--spinxqm-radius-pill);
  border: 1px solid var(--spinxqm-border);
  background: var(--spinxqm-surface);
  color: var(--spinxqm-muted);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .1s ease;
}
.spinxqm-theme-toggle:hover { color: var(--spinxqm-accent); border-color: var(--spinxqm-accent); }
.spinxqm-theme-toggle:active { transform: scale(.94); }
.spinxqm-theme-toggle:focus-visible { outline: 2px solid var(--spinxqm-accent); outline-offset: 2px; }
.spinxqm-theme-toggle__icon { display: block; }
.spinxqm-theme-toggle__sun { display: none; }
body.spinxqm-theme-dark .spinxqm-theme-toggle__moon { display: none; }
body.spinxqm-theme-dark .spinxqm-theme-toggle__sun { display: block; }

/* SPINX attribution footer */
.spinxqm-footer {
  display: flex; align-items: center; gap: 8px;
  margin-top: var(--spinxqm-space-5);
  padding-top: var(--spinxqm-space-4);
  border-top: 1px solid var(--spinxqm-border);
  color: var(--spinxqm-muted);
  font-size: 12px; letter-spacing: 0.02em;
}
.spinxqm-footer__mark { display: inline-flex; }
.spinxqm-footer a { color: var(--spinxqm-accent-alt); text-decoration: none; font-weight: 500; }
.spinxqm-footer a:hover { color: var(--spinxqm-accent); text-decoration: underline; }

/* Popups render at document.body (outside .spinxqm-wrap) — give them the brand
   surface, text colour and fonts so they match the active theme. (color-scheme
   is set per-theme above.) */
.spinxqm-modal,
.spinxqm-process {
  color: var(--spinxqm-text);
  font-family: var(--spinxqm-font-body);
}
.spinxqm-modal h1, .spinxqm-modal h2, .spinxqm-modal h3,
.spinxqm-process h1, .spinxqm-process h2, .spinxqm-process h3 { font-family: var(--spinxqm-font-display); color: var(--spinxqm-text); }
.spinxqm-modal__message, .spinxqm-modal__field, .spinxqm-modal label { color: var(--spinxqm-text); }
.spinxqm-modal a, .spinxqm-process a { color: var(--spinxqm-accent); }
.spinxqm-modal a:hover, .spinxqm-process a:hover { color: var(--spinxqm-color-accent-hover); }

/* Brand buttons — applied page-wide via `.wp-core-ui` (the scope WordPress uses
   for its own buttons). This overrides WP's button styles at equal specificity,
   covers every button on the Quick Migrate page INCLUDING popups that mount on
   document.body, and is contained to this page (admin.css only loads here).
   The React dashboard uses `.components-button`, which this never matches. */
.wp-core-ui .button,
.wp-core-ui .button-secondary {
  background: var(--spinxqm-btn-bg);
  border: 1px solid var(--spinxqm-btn-border);
  color: var(--spinxqm-text);
  border-radius: var(--spinxqm-radius-sm);
  font-family: var(--spinxqm-font-body);
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
}
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover {
  background: var(--spinxqm-btn-bg-hover);
  border-color: var(--spinxqm-btn-border-hover);
  color: var(--spinxqm-text);
}
.wp-core-ui .button-primary {
  background: var(--spinxqm-accent);
  border: 1px solid var(--spinxqm-accent);
  color: #fff;
  border-radius: var(--spinxqm-radius-sm);
  font-family: var(--spinxqm-font-body);
  font-weight: 600;
  text-shadow: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
  background: var(--spinxqm-color-accent-hover);
  border-color: var(--spinxqm-color-accent-hover);
  color: #fff;
}
.wp-core-ui .button:active,
.wp-core-ui .button-primary:active { transform: scale(.98); }
.wp-core-ui .button-large { padding: 6px 18px; height: auto; line-height: 2; font-size: 14px; }
.wp-core-ui .button-link { color: var(--spinxqm-accent); background: transparent; border: 0; box-shadow: none; }
.wp-core-ui .button-link:hover { color: var(--spinxqm-color-accent-hover); }
.wp-core-ui .button-link-delete { color: var(--spinxqm-danger); }
.wp-core-ui .button[disabled],
.wp-core-ui .button:disabled { opacity: .5; color: var(--spinxqm-muted); }
.wp-core-ui .button:focus-visible,
.wp-core-ui .button-primary:focus-visible { outline: 2px solid var(--spinxqm-accent); outline-offset: 2px; }

.spinxqm-tabs {
  position: sticky;
  top: 32px;
  z-index: 20;
  display: flex;
  gap: var(--spinxqm-space-2);
  background: var(--spinxqm-subtle);
  border: 1px solid var(--spinxqm-border);
  border-radius: 999px;
  padding: 6px;
  margin-bottom: var(--spinxqm-space-5);
  overflow-x: auto;
}
/* In dark mode --spinxqm-subtle is near-transparent (rgba white 0.05), so scrolled
   content bled through this sticky pill and overlapped the tab labels. Force an
   opaque background; the active tab (--spinxqm-surface) stays visibly distinct. */
body.spinxqm-theme-dark .spinxqm-tabs { background: var(--spinxqm-elevated); }
.spinxqm-tab {
  border: 0;
  background: transparent;
  color: var(--spinxqm-muted);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.spinxqm-tab:hover:not(.is-active) { background: var(--spinxqm-surface); color: var(--spinxqm-accent); }
/* The accent ring is an inset box-shadow, not a border: `.spinxqm-tab` is
   `border: 0`, so a real border would resize the pill as it activates. */
.spinxqm-tab.is-active { background: var(--spinxqm-surface); color: var(--spinxqm-text); box-shadow: var(--spinxqm-shadow), inset 0 0 0 1px var(--spinxqm-accent); }
.spinxqm-tab:focus-visible { outline: 2px solid var(--spinxqm-accent); outline-offset: 2px; }

.spinxqm-tab-panel { display: none; }
.spinxqm-tab-panel.is-active { display: block; animation: mpFadeIn .24s ease; }
@keyframes mpFadeIn { from { opacity: .5; transform: translateY(4px);} to {opacity:1; transform:none;} }

.spinxqm-card {
  background: var(--spinxqm-surface);
  border: 1px solid var(--spinxqm-border);
  border-radius: var(--spinxqm-radius);
  box-shadow: var(--spinxqm-shadow);
  margin-bottom: var(--spinxqm-space-4);
  overflow: hidden;
}
.spinxqm-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spinxqm-space-5);
  border-bottom: 1px solid var(--spinxqm-border);
}
.spinxqm-card__header h2 { margin: 0; font-size: 24px; }
.spinxqm-card > *:not(.spinxqm-card__header) { padding: var(--spinxqm-space-5); }

.spinxqm-badge {
  background: var(--spinxqm-accent-soft);
  color: var(--spinxqm-accent);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.spinxqm-badge--neutral { background: var(--spinxqm-subtle); color: var(--spinxqm-muted); border: 1px solid var(--spinxqm-border); }

.spinxqm-grid { display: grid; gap: var(--spinxqm-space-4); }
.spinxqm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spinxqm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Database card's inner panel grid: let each collapsible sub-panel take its natural
   height instead of stretching to its taller row-neighbour, so a collapsed panel
   (e.g. Backup before Find & Replace) next to an expanded one (Advanced Options)
   doesn't leave a tall empty box. */
[data-accordion-group="database"] .spinxqm-grid--2 { align-items: start; }

.spinxqm-action-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spinxqm-space-4); }
.spinxqm-action-tiles { display: flex; gap: var(--spinxqm-space-3); margin-top: var(--spinxqm-space-3); }
.spinxqm-tile {
  flex: 1;
  border: 1px solid var(--spinxqm-border);
  border-radius: var(--spinxqm-radius-sm);
  background: var(--spinxqm-elevated);
  color: var(--spinxqm-text);
  padding: 18px 12px;
  font-weight: 700;
  min-height: 84px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .1s ease;
}
.spinxqm-tile:hover { border-color: var(--spinxqm-border-hover); }
.spinxqm-tile:active { transform: scale(.99); }
.spinxqm-tile span { display:block; font-size:12px; margin-top:8px; color: var(--spinxqm-muted); }
.spinxqm-tile.is-locked { opacity: .6; cursor: not-allowed; }
.spinxqm-tile.is-active:hover { border-color: var(--spinxqm-accent); }

.spinxqm-accordion {
  border: 1px solid var(--spinxqm-border);
  border-radius: var(--spinxqm-radius-sm);
  overflow: hidden;
  background: var(--spinxqm-surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.spinxqm-accordion:hover { border-color: var(--spinxqm-border-hover); }
.spinxqm-accordion.is-open { box-shadow: inset 0 1px 0 var(--spinxqm-inset-line); }
.spinxqm-accordion__trigger {
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--spinxqm-subtle);
  padding: 14px 18px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  padding-right: 56px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--spinxqm-text);
  transition: background-color .15s ease, color .15s ease;
}
.spinxqm-accordion__trigger:hover { background: var(--spinxqm-hover); }
.spinxqm-accordion__trigger:focus-visible { outline: 2px solid var(--spinxqm-accent); outline-offset: -2px; }
.spinxqm-accordion.is-open .spinxqm-accordion__trigger { background: var(--spinxqm-accent-soft); color: var(--spinxqm-text); }
.spinxqm-accordion__title { font-size: 15px; letter-spacing: -0.005em; }
.spinxqm-accordion__hint { font-size: 12px; font-weight: 500; color: var(--spinxqm-muted); }
/* Circular toggle affordance behind the chevron. */
.spinxqm-accordion__trigger::before {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
  pointer-events: none;
}
.spinxqm-accordion__trigger:hover::before { background: rgba(21,101,216,.08); border-color: var(--spinxqm-border); }
.spinxqm-accordion.is-open .spinxqm-accordion__trigger::before { background: var(--spinxqm-accent-soft); border-color: transparent; }
/* Chevron — points down when collapsed, up when expanded. */
.spinxqm-accordion__trigger::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--spinxqm-muted);
  border-bottom: 2px solid var(--spinxqm-muted);
  transform: translateY(-65%) rotate(45deg);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .15s ease;
}
.spinxqm-accordion__trigger:hover::after { border-color: var(--spinxqm-text); }
.spinxqm-accordion.is-open .spinxqm-accordion__trigger::after {
  transform: translateY(-35%) rotate(225deg);
  border-color: var(--spinxqm-accent);
}
.spinxqm-accordion__content {
  display: block;
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  opacity: 0;
  transition: max-height .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease, padding .22s ease;
  will-change: max-height, opacity;
}
.spinxqm-accordion.is-open > .spinxqm-accordion__content {
  max-height: 4000px;
  opacity: 1;
  padding: 16px 18px 18px;
}
.spinxqm-check-stack label { display:block; margin-bottom: 10px; }

.spinxqm-card--accordion { overflow: hidden; position: relative; }
.spinxqm-card--accordion .spinxqm-accordion__trigger.spinxqm-card__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 18px 60px 18px 20px;
  border-bottom: 1px solid transparent;
  background: var(--spinxqm-surface);
}
.spinxqm-card--accordion .spinxqm-accordion__trigger.spinxqm-card__header .spinxqm-accordion__title { font-size: 18px; font-weight: 700; }
.spinxqm-card--accordion .spinxqm-accordion__trigger.spinxqm-card__header .spinxqm-accordion__hint { font-size: 12px; }
.spinxqm-card--accordion.is-open .spinxqm-accordion__trigger.spinxqm-card__header { border-bottom-color: var(--spinxqm-border); background: var(--spinxqm-surface); }
.spinxqm-card--accordion .spinxqm-accordion__trigger.spinxqm-card__header::before { right: 16px; }
.spinxqm-card--accordion .spinxqm-accordion__trigger.spinxqm-card__header::after { right: 26px; }

/* ---- Component "manifest" rows (Database / Media / Themes / Plugins / Core). Icon +
   title + path are grouped on the left (no title-left / path-far-right dead gap);
   ticking "Include" lights an accent spine down the card edge and fills the icon tile,
   so selected components read at a glance. Token-only — works in light and dark. */
.spinxqm-comp-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--spinxqm-radius-sm);
  background: var(--spinxqm-subtle);
  border: 1px solid var(--spinxqm-border);
  color: var(--spinxqm-muted);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.spinxqm-comp-icon svg { width: 21px; height: 21px; display: block; }
.spinxqm-comp-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Group icon + meta on the left; the chevron stays on the right (absolute ::after). */
.spinxqm-card--accordion .spinxqm-accordion__trigger.spinxqm-card__header {
  justify-content: flex-start;
  gap: 14px;
}
.spinxqm-card--accordion .spinxqm-accordion__trigger.spinxqm-card__header .spinxqm-accordion__hint {
  font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
}

/* Loaded — "Include" ticked: accent spine + lit icon tile. */
.spinxqm-card--accordion:has(.spinxqm-section-check input:checked),
.spinxqm-card:has(#spinxqm-include-database:checked) {
  border-color: var(--spinxqm-accent);
  box-shadow: inset 3px 0 0 0 var(--spinxqm-accent);
}
.spinxqm-card--accordion:has(.spinxqm-section-check input:checked) .spinxqm-comp-icon,
.spinxqm-card:has(#spinxqm-include-database:checked) .spinxqm-comp-icon {
  background: var(--spinxqm-accent-soft);
  border-color: transparent;
  color: var(--spinxqm-accent);
}
/* Backup and Find & Replace operate ON the database — it is implied and its Include toggle is
   hidden — so the Database card starts unchecked/collapsed like the others but must still read
   as active in these modes even though its checkbox is off. */
#spinxqm-app[data-active-mode="backup"] .spinxqm-card:has(#spinxqm-include-database),
#spinxqm-app[data-active-mode="find_replace"] .spinxqm-card:has(#spinxqm-include-database) {
  border-color: var(--spinxqm-accent);
  box-shadow: inset 3px 0 0 0 var(--spinxqm-accent);
}
#spinxqm-app[data-active-mode="backup"] .spinxqm-card:has(#spinxqm-include-database) .spinxqm-comp-icon,
#spinxqm-app[data-active-mode="find_replace"] .spinxqm-card:has(#spinxqm-include-database) .spinxqm-comp-icon {
  background: var(--spinxqm-accent-soft);
  border-color: transparent;
  color: var(--spinxqm-accent);
}
/* The Database Include toggle only applies to export; in backup and find & replace the database
   is implied, so hide the toggle so its (now default-unchecked) box can't suggest otherwise. */
#spinxqm-app[data-active-mode="backup"] #spinxqm-db-include-wrap,
#spinxqm-app[data-active-mode="find_replace"] #spinxqm-db-include-wrap {
  display: none;
}
@media (prefers-reduced-motion: reduce) { .spinxqm-comp-icon { transition: none; } }

/* Per-section "include" checkbox in each file accordion header (Media/Themes/
   Plugins/Core). Positioned absolutely so the trigger stays a DIRECT child of
   .spinxqm-accordion — the header layout, chevron and open-state CSS all rely on the
   `>` combinator. Default unchecked = that section is left out of the export. */
.spinxqm-section-check {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding-left: 18px;
  margin: 0;
  cursor: pointer;
}
.spinxqm-section-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  border: 2px solid var(--spinxqm-border-hover);
  border-radius: 6px;
  background: var(--spinxqm-surface);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.spinxqm-section-check input[type="checkbox"]:hover { border-color: var(--spinxqm-accent); }
.spinxqm-section-check input[type="checkbox"]:active { transform: scale(.94); }
.spinxqm-section-check input[type="checkbox"]:checked { background: var(--spinxqm-accent); border-color: var(--spinxqm-accent); }
/* Custom tick; also suppress WordPress core's own ::before dashicon checkmark. */
.spinxqm-section-check input[type="checkbox"]::before,
.spinxqm-section-check input[type="checkbox"]:checked::before { content: none; display: none; }
.spinxqm-section-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.spinxqm-section-check input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--spinxqm-accent-soft); }
@media (prefers-reduced-motion: reduce) {
  .spinxqm-section-check input[type="checkbox"] { transition: none; }
  .spinxqm-section-check input[type="checkbox"]:active { transform: none; }
}
/* File accordion header row: the section checkbox and the trigger sit on one
   flex line; the trigger fills the remaining width, so align-items handles the
   vertical centering of the checkbox against the title. */
.spinxqm-card--accordion > .spinxqm-accordion__bar { display: flex; align-items: stretch; padding: 0; }
.spinxqm-accordion__bar > .spinxqm-accordion__trigger { flex: 1 1 auto; }
.spinxqm-accordion__bar > .spinxqm-accordion__trigger.spinxqm-card__header { padding-left: 12px; }
@media (max-width: 600px) {
  .spinxqm-section-check { padding-left: 16px; }
}

.spinxqm-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 8px;
  margin-bottom: var(--spinxqm-space-4);
}
.spinxqm-section-header h2 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.spinxqm-section-header__sub { margin: 4px 0 0; color: var(--spinxqm-muted); font-size: 13px; }
.spinxqm-list-actions--header { gap: 4px; }
.spinxqm-list-actions--header .button-link { padding: 6px 10px; border-radius: 6px; font-weight: 600; }
.spinxqm-list-actions--header .button-link:hover { background: var(--spinxqm-accent-soft); color: var(--spinxqm-accent); }

/* Combined expand/collapse toggle — a single pill that alternates its label and
   flips its chevron once every accordion in the group is open. */
.spinxqm-accordion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--spinxqm-accent);
  background: var(--spinxqm-surface);
  border: 1px solid var(--spinxqm-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.spinxqm-accordion-toggle:hover { background: var(--spinxqm-accent-soft); border-color: var(--spinxqm-border-hover); }
.spinxqm-accordion-toggle__icon { display: inline-flex; transition: transform .25s ease; }
.spinxqm-accordion-toggle.is-expanded .spinxqm-accordion-toggle__icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .spinxqm-accordion-toggle, .spinxqm-accordion-toggle__icon { transition: none; }
}

.spinxqm-card--compact .spinxqm-card__header { padding-bottom: 12px; }
.spinxqm-card__sub { margin: 4px 0 0; color: var(--spinxqm-muted); font-size: 13px; }
.spinxqm-card__header > div { min-width: 0; }
.spinxqm-mode-row { padding: 18px 20px 20px; }
/* The operation is now chosen via the tile grid; the native select is a hidden source of truth. */
.spinxqm-mode-row select { display: none; }

.spinxqm-field-label { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--spinxqm-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.spinxqm-inline-info--soft { background: #f4f7fb; border-color: var(--spinxqm-border); color: var(--spinxqm-muted); margin-top: 14px; }

.spinxqm-pill--accent { background: var(--spinxqm-accent-soft); color: var(--spinxqm-accent); }

.spinxqm-fr-section { padding: 18px 20px; border-top: 1px solid var(--spinxqm-border); }
.spinxqm-fr-section:first-of-type { border-top: 0; }
.spinxqm-fr-section__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.spinxqm-fr-section__hint { font-size: 13px; color: var(--spinxqm-muted); }
.spinxqm-fr-cols { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; padding: 0 12px 6px; }
.spinxqm-fr-cols span:first-child { grid-column: 2; }
.spinxqm-fr-cols span:last-child { grid-column: 4; }
.spinxqm-fr-cols span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--spinxqm-muted); }
.spinxqm-fr-divider { height: 1px; background: var(--spinxqm-border); margin: 0 20px; }
.spinxqm-fr-empty { margin: 4px 0 12px; padding: 14px; text-align: center; font-size: 13px; color: var(--spinxqm-muted); background: var(--spinxqm-bg); border: 1px dashed var(--spinxqm-border); border-radius: var(--spinxqm-radius-sm); }
.spinxqm-fr-empty[hidden] { display: none; }
.spinxqm-fr-presets { display: flex; flex-direction: column; gap: 10px; }
.spinxqm-fr-preset {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  background: var(--spinxqm-subtle);
  border: 1px solid var(--spinxqm-border);
  border-radius: 10px;
  padding: 10px 12px;
}
.spinxqm-fr-preset__label { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 12px; font-weight: 700; color: var(--spinxqm-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.spinxqm-fr-preset__tag { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3; }
.spinxqm-fr-preset__tag--req { color: var(--spinxqm-danger); }
.spinxqm-fr-preset__tag--opt { color: var(--spinxqm-muted); font-weight: 600; }
.spinxqm-fr-preset input {
  border: 1px solid var(--spinxqm-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--spinxqm-surface);
  font-size: 13px;
}
.spinxqm-fr-preset input:focus { outline: none; border-color: var(--spinxqm-accent); box-shadow: 0 0 0 3px rgba(21,101,216,.16); }
.spinxqm-fr-arrow { color: var(--spinxqm-muted); font-size: 18px; line-height: 1; }

/* Inline validation: highlight an offending source/destination field. */
.spinxqm-fr-preset input.is-invalid, .spinxqm-fr-row input.is-invalid { border-color: var(--spinxqm-danger); box-shadow: 0 0 0 1px var(--spinxqm-danger); }

@media (max-width: 900px) {
  .spinxqm-fr-preset { grid-template-columns: 1fr; }
  .spinxqm-fr-arrow { display: none; }
  .spinxqm-fr-cols { display: none; }
}

.spinxqm-two-col-form { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.spinxqm-two-col-form label { font-weight:600; color: var(--spinxqm-muted); display:flex; flex-direction:column; gap:6px; }
.spinxqm-two-col-form input, .spinxqm-fr-row input, .spinxqm-search {
  border: 1px solid var(--spinxqm-border); border-radius: 10px; padding: 10px 12px;
}

/* ── Settings page: grouped, self-documenting layout ───────────────────── */
.spinxqm-card__subtitle { margin: 6px 0 0; font-size: 13px; color: var(--spinxqm-muted); max-width: 60ch; line-height: 1.5; }

.spinxqm-settings { display: flex; flex-direction: column; gap: 18px; }
.spinxqm-settings__group { border: 1px solid var(--spinxqm-border); border-radius: 14px; background: var(--spinxqm-surface); overflow: hidden; }
.spinxqm-settings__group-head { display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px; background: var(--spinxqm-bg); border-bottom: 1px solid var(--spinxqm-border); }
.spinxqm-settings__group-icon { font-size: 18px; line-height: 1.4; flex: none; }
.spinxqm-settings__group-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--spinxqm-text); }
.spinxqm-settings__group-desc { margin: 3px 0 0; font-size: 12.5px; color: var(--spinxqm-muted); line-height: 1.5; }

.spinxqm-settings__rows { display: flex; flex-direction: column; }
.spinxqm-settings__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: 6px 28px; align-items: center; padding: 15px 18px; }
.spinxqm-settings__row + .spinxqm-settings__row { border-top: 1px solid var(--spinxqm-border); }
.spinxqm-settings__row[hidden] { display: none; }
.spinxqm-settings__label { min-width: 0; }
.spinxqm-settings__label > label { display: inline-block; font-weight: 600; font-size: 13px; color: var(--spinxqm-text); cursor: pointer; }
.spinxqm-settings__hint { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--spinxqm-muted); }

.spinxqm-settings__control { justify-self: end; width: 100%; }
.spinxqm-settings__control input[type="text"],
.spinxqm-settings__control input[type="number"],
.spinxqm-settings__control select,
.spinxqm-settings__control textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--spinxqm-border); border-radius: 10px;
  padding: 9px 11px; font-size: 13px; background: var(--spinxqm-bg); color: var(--spinxqm-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.spinxqm-settings__control input[type="text"],
.spinxqm-settings__control input[type="number"],
.spinxqm-settings__control select { min-height: var(--spinxqm-control-h); }
.spinxqm-settings__control input[readonly] { color: var(--spinxqm-muted); cursor: default; }
.spinxqm-settings__control input:focus,
.spinxqm-settings__control select:focus,
.spinxqm-settings__control textarea:focus { outline: none; border-color: var(--spinxqm-accent); box-shadow: 0 0 0 3px var(--spinxqm-accent-soft); }
.spinxqm-settings__control textarea { resize: vertical; font-family: var(--spinxqm-font-mono, ui-monospace, monospace); line-height: 1.5; }
.spinxqm-settings .spinxqm-inline-fields { display: flex; gap: 8px; }
.spinxqm-settings .spinxqm-inline-fields input[type="number"] { max-width: 7rem; }

/* Full-width rows (long paths, exclusion textarea): stack control under the label. */
.spinxqm-settings__row--full { grid-template-columns: 1fr; }
.spinxqm-settings__row--full .spinxqm-settings__control { justify-self: stretch; }

/* Toggle rows: the switch sits right-aligned; no field box. */
.spinxqm-settings__row--toggle .spinxqm-settings__control { display: flex; justify-content: flex-end; width: auto; }

.spinxqm-settings__note { margin: 0; padding: 12px 18px; font-size: 12.5px; color: var(--spinxqm-muted); background: var(--spinxqm-accent-soft); border-top: 1px solid var(--spinxqm-border); }
.spinxqm-settings__note[hidden] { display: none; }

/* On-off switch */
.spinxqm-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.spinxqm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.spinxqm-switch__track { width: 42px; height: 24px; border-radius: 999px; background: var(--spinxqm-border-hover); transition: background .18s ease; flex: none; }
.spinxqm-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .18s ease; }
.spinxqm-switch input:checked + .spinxqm-switch__track { background: var(--spinxqm-accent); }
.spinxqm-switch input:checked + .spinxqm-switch__track::after { transform: translateX(18px); }
.spinxqm-switch input:focus-visible + .spinxqm-switch__track { outline: 2px solid var(--spinxqm-accent); outline-offset: 2px; }

@media (max-width: 782px) {
  .spinxqm-settings__row, .spinxqm-settings__row--toggle { grid-template-columns: 1fr; gap: 10px; }
  .spinxqm-settings__control, .spinxqm-settings__row--toggle .spinxqm-settings__control { justify-self: start; width: 100%; }
  .spinxqm-settings__row--toggle .spinxqm-settings__control { justify-content: flex-start; }
}

.spinxqm-list-tools { margin: 12px 0 12px 0; }
.spinxqm-list-actions { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0; }

.spinxqm-fr-row { display:grid; grid-template-columns: 1fr 1fr auto auto; gap: 10px; margin-bottom: 10px; align-items: center; }
.button-link-delete { color: var(--spinxqm-danger); border: 0; background: transparent; cursor: pointer; }

.spinxqm-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0;
  position: sticky;
  bottom: 0;
  background: var(--spinxqm-surface);
  padding: 14px 16px;
  border: 1px solid var(--spinxqm-border);
  border-radius: var(--spinxqm-radius);
  box-shadow: 0 -6px 18px rgba(2, 8, 23, 0.06);
  z-index: 5;
  backdrop-filter: blur(6px);
}
.spinxqm-actions-row .button[disabled] { opacity: .65; cursor: not-allowed; }
.spinxqm-actions-row .button { transition: opacity .18s ease, transform .18s ease; }
.spinxqm-actions-row .button[hidden] { display: none !important; }
.spinxqm-actions-row .button.is-visible { animation: mpBtnIn .22s cubic-bezier(.2,.8,.2,1); }
@keyframes mpBtnIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.spinxqm-inline-error {
  margin: -2px 0 12px;
  background: rgba(232, 75, 65, 0.12);
  border: 1px solid rgba(232, 75, 65, 0.32);
  color: var(--spinxqm-color-error);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
}
.spinxqm-empty-state { color: var(--spinxqm-muted); }
.spinxqm-help-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.spinxqm-help-grid > div { border: 1px solid var(--spinxqm-border); border-radius: var(--spinxqm-radius); padding: 14px 16px; background: var(--spinxqm-surface); }
.spinxqm-help-grid h3 { margin: 0 0 6px; font-size: 15px; }
.spinxqm-help-grid p { margin: 0; color: var(--spinxqm-muted); font-size: 13px; line-height: 1.55; }
.spinxqm-help-section { display: grid; gap: 6px; }
.spinxqm-help-section h3 { margin: 14px 0 4px; font-size: 15px; }
.spinxqm-help-section h3:first-child { margin-top: 0; }
.spinxqm-help-section > p { margin: 0; color: var(--spinxqm-muted); font-size: 13px; line-height: 1.6; }
.spinxqm-help-section code { font-size: 12px; }
.spinxqm-help-list { margin: 0 0 6px; padding-left: 20px; }
.spinxqm-help-list li { margin: 5px 0; color: var(--spinxqm-text); font-size: 13px; line-height: 1.6; }

/* ── Help page: guided, scannable guide ────────────────────────────────── */
/* Secondary "jump to" bar — sticks just under the main tab pill while scrolling. */
.spinxqm-help-nav {
  position: sticky; top: 88px; z-index: 15;
  display: flex; flex-wrap: nowrap; gap: 6px;
  margin: 0 0 18px; padding: 6px;
  background: var(--spinxqm-subtle); border: 1px solid var(--spinxqm-border); border-radius: 999px;
  overflow-x: auto; scrollbar-width: none;
}
.spinxqm-help-nav::-webkit-scrollbar { display: none; }
body.spinxqm-theme-dark .spinxqm-help-nav { background: var(--spinxqm-elevated); }
.spinxqm-help-nav a { flex: none; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; color: var(--spinxqm-muted); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.spinxqm-help-nav a:hover, .spinxqm-help-nav a:focus-visible { background: var(--spinxqm-surface); color: var(--spinxqm-accent); outline: none; }
/* Active pill mirrors the main tab strip — set by the scroll-spy in app.js. */
.spinxqm-help-nav a.is-active { background: var(--spinxqm-surface); color: var(--spinxqm-text); box-shadow: var(--spinxqm-shadow), inset 0 0 0 1px var(--spinxqm-accent); }
/* Anchor targets clear both sticky bars (admin bar + main tabs + jump bar). */
article[id^="help-"] { scroll-margin-top: 150px; }

.spinxqm-help-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.spinxqm-help-feature { display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--spinxqm-border); border-radius: 12px; padding: 15px 16px; background: var(--spinxqm-surface); }
.spinxqm-help-feature__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: var(--spinxqm-accent-soft); }
.spinxqm-help-feature h3 { margin: 0 0 4px; font-size: 14.5px; }
.spinxqm-help-feature p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--spinxqm-muted); }

.spinxqm-help-steps { list-style: none; counter-reset: spinxqm-step; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.spinxqm-help-steps li { position: relative; padding: 3px 0 0 40px; min-height: 26px; font-size: 13px; line-height: 1.6; color: var(--spinxqm-text); counter-increment: spinxqm-step; }
.spinxqm-help-steps li::before { content: counter(spinxqm-step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--spinxqm-accent); }

.spinxqm-help-callout { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--spinxqm-accent); background: var(--spinxqm-accent-soft); font-size: 13px; line-height: 1.55; color: var(--spinxqm-text); }

.spinxqm-help-cli { margin: 8px 0 6px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--spinxqm-border); background: var(--spinxqm-bg); display: flex; flex-direction: column; gap: 6px; overflow-x: auto; }
.spinxqm-help-cli code { font-family: var(--spinxqm-font-mono, ui-monospace, monospace); font-size: 12.5px; color: var(--spinxqm-text); white-space: nowrap; background: transparent; padding: 0; }
.spinxqm-help-cli code::before { content: "$ "; color: var(--spinxqm-accent); }

.spinxqm-help-faq { margin: 0; }
.spinxqm-help-faq > div { padding: 13px 0; border-top: 1px solid var(--spinxqm-border); }
.spinxqm-help-faq > div:first-child { border-top: 0; padding-top: 2px; }
.spinxqm-help-faq dt { margin: 0 0 4px; font-weight: 700; font-size: 13px; color: var(--spinxqm-text); }
.spinxqm-help-faq dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--spinxqm-muted); }

@media (max-width: 782px) { .spinxqm-help-features { grid-template-columns: 1fr; } }
.spinxqm-troubleshooting { margin:0; padding-left: 18px; }
.spinxqm-changelog { margin:0; padding-left:18px; }

.spinxqm-modal[hidden] { display:none; }
/* Above the process popup (z-index 100000) so confirm/prompt dialogs opened
   from within the popup (e.g. Cancel confirmation) are not hidden behind it. */
.spinxqm-modal { position: fixed; inset: 0; z-index: 100001; animation: mpModalFade .18s ease; }
.spinxqm-modal__backdrop { position:absolute; inset:0; background: rgba(8,9,11,.66); backdrop-filter: blur(3px); }
.spinxqm-modal__dialog {
  position: relative;
  width: min(720px, calc(100% - 32px));
  margin: 10vh auto;
  background: var(--spinxqm-elevated);
  border: 1px solid var(--spinxqm-border);
  border-radius: var(--spinxqm-radius);
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  animation: mpModalIn .22s cubic-bezier(.2,.8,.2,1);
}
.spinxqm-modal__actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }

.spinxqm-modal.is-entering .spinxqm-modal__dialog { opacity: 0; transform: translateY(8px) scale(.98); }
.spinxqm-modal.is-leaving { animation: mpModalFadeOut .16s ease forwards; }
.spinxqm-modal.is-leaving .spinxqm-modal__dialog { animation: mpModalOut .16s ease forwards; }
@keyframes mpModalIn { from { opacity:0; transform: translateY(8px) scale(.98); } to { opacity:1; transform: none; } }
@keyframes mpModalOut { from { opacity:1; transform: none; } to { opacity:0; transform: translateY(4px) scale(.98); } }
@keyframes mpModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpModalFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Process popup — shared batch progress UI (export/backup/find&replace) */
.spinxqm-process { position: fixed; inset: 0; z-index: 100000; animation: mpModalFade .18s ease; }
.spinxqm-process[hidden] { display: none; }
.spinxqm-process__backdrop { position: absolute; inset: 0; background: rgba(8,9,11,.66); backdrop-filter: blur(3px); }
.spinxqm-process__dialog {
  position: relative;
  width: min(560px, calc(100% - 32px));
  margin: 10vh auto;
  background: var(--spinxqm-elevated);
  border: 1px solid var(--spinxqm-border);
  border-radius: var(--spinxqm-radius);
  padding: 24px;
  box-shadow: 0 24px 60px rgba(2, 8, 23, 0.28);
  animation: mpModalIn .22s cubic-bezier(.2,.8,.2,1);
  outline: none;
}
.spinxqm-process__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.spinxqm-process__eyebrow { margin: 0 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--spinxqm-muted); font-weight: 700; }
.spinxqm-process__title { margin: 0; font-size: 20px; letter-spacing: -0.01em; color: var(--spinxqm-text); }
.spinxqm-process__sub { margin: 6px 0 0; color: var(--spinxqm-muted); font-size: 13px; line-height: 1.4; min-height: 18px; }
.spinxqm-process__timer { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--spinxqm-muted); background: var(--spinxqm-accent-soft); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }

.spinxqm-process__progress { margin-top: 20px; }
.spinxqm-process__pct-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.spinxqm-process__pct { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--spinxqm-accent); font-variant-numeric: tabular-nums; }
.spinxqm-process__size { font-size: 13px; color: var(--spinxqm-muted); font-variant-numeric: tabular-nums; }
.spinxqm-process__bar { position: relative; height: 10px; border-radius: 999px; background: var(--spinxqm-accent-soft); overflow: hidden; }
.spinxqm-process__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--spinxqm-accent); }
.spinxqm-process__metrics { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--spinxqm-muted); font-variant-numeric: tabular-nums; }
.spinxqm-process__metrics[hidden] { display: none; }
.spinxqm-process__metric:empty { display: none; }

/* Adaptive request-size stats (Max / Actual / Average · Total Requests). */
.spinxqm-process__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 14px; background: var(--spinxqm-border); border: 1px solid var(--spinxqm-border); border-radius: 10px; overflow: hidden; }
.spinxqm-process__stats[hidden] { display: none; }
.spinxqm-process__stat { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--spinxqm-surface); }
.spinxqm-process__stat-label { font-size: 11px; font-weight: 600; color: var(--spinxqm-muted); }
.spinxqm-process__stat-value { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .spinxqm-process__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.spinxqm-process__sections { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.spinxqm-process__chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--spinxqm-border); color: var(--spinxqm-muted); background: var(--spinxqm-surface); }
.spinxqm-process__chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--spinxqm-border); flex: none; }
.spinxqm-process__chip.is-running { color: var(--spinxqm-accent); border-color: var(--spinxqm-accent); background: var(--spinxqm-accent-soft); }
.spinxqm-process__chip.is-running .spinxqm-process__chip-dot { background: var(--spinxqm-accent); animation: mpProcessPulse 1.1s ease-in-out infinite; }
.spinxqm-process__chip.is-completed { color: var(--spinxqm-text); border-color: var(--spinxqm-accent-alt); }
.spinxqm-process__chip.is-completed .spinxqm-process__chip-dot { background: var(--spinxqm-accent-alt); position: relative; }
.spinxqm-process__chip.is-completed .spinxqm-process__chip-dot::after {
  content: ""; position: absolute; left: 2.5px; top: 1px;
  width: 2px; height: 4px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.spinxqm-process__chip.is-error { color: var(--spinxqm-danger); border-color: var(--spinxqm-danger); }
.spinxqm-process__chip.is-error .spinxqm-process__chip-dot { background: var(--spinxqm-danger); }

.spinxqm-process__success { text-align: center; margin-top: 22px; }
.spinxqm-process__check { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--spinxqm-accent); position: relative; animation: mpProcessPop .3s cubic-bezier(.2,.9,.3,1.2); }
.spinxqm-process__check::after { content: ""; position: absolute; left: 20px; top: 12px; width: 12px; height: 24px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); }
.spinxqm-process__success-text { margin: 0 0 14px; font-weight: 600; color: var(--spinxqm-text); }
.spinxqm-process__download-note { margin: 0; font-size: 13px; color: var(--spinxqm-muted); }
.spinxqm-process__result { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

.spinxqm-process__error { margin-top: 20px; padding: 12px 14px; border-radius: var(--spinxqm-radius-sm); background: rgba(220,38,38,.08); border: 1px solid var(--spinxqm-danger); color: var(--spinxqm-danger); font-size: 13px; }

.spinxqm-process__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

@keyframes mpProcessPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes mpProcessPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 600px) {
  .spinxqm-process__dialog { margin: 6vh auto; width: calc(100% - 16px); padding: 18px; }
  .spinxqm-process__actions { flex-direction: column; }
  .spinxqm-process__actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .spinxqm-process, .spinxqm-process__dialog, .spinxqm-process__fill, .spinxqm-process__check, .spinxqm-process__chip-dot { animation: none !important; transition: none !important; }
}

.spinxqm-modal--dynamic .spinxqm-modal__dialog--dynamic { width: min(480px, calc(100% - 32px)); padding: 0; overflow: hidden; }
.spinxqm-modal__head { padding: 20px 24px 0; }
.spinxqm-modal__head h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.spinxqm-modal__body { padding: 12px 24px 4px; }
.spinxqm-modal__message { margin: 8px 0 0; color: var(--spinxqm-muted); line-height: 1.5; }
.spinxqm-modal__field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--spinxqm-muted); }
.spinxqm-modal__field input {
  border: 1px solid var(--spinxqm-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--spinxqm-text);
  background: var(--spinxqm-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.spinxqm-modal__field input:focus {
  outline: none;
  border-color: var(--spinxqm-accent);
  box-shadow: 0 0 0 3px rgba(21,101,216,.18);
}
.spinxqm-modal__select {
  border: 1px solid var(--spinxqm-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--spinxqm-text);
  background: var(--spinxqm-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.spinxqm-modal__select:focus { outline: none; border-color: var(--spinxqm-accent); box-shadow: 0 0 0 3px rgba(21,101,216,.18); }
.spinxqm-modal__error { margin: 8px 0 0; color: var(--spinxqm-color-error); font-size: 13px; font-weight: 600; }

/* Choice modal: a small set of mutually-exclusive option buttons. */
.spinxqm-modal__choices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.spinxqm-modal__choice {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; text-align: left;
  padding: 12px 14px;
  background: var(--spinxqm-subtle);
  border: 1px solid var(--spinxqm-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.spinxqm-modal__choice:hover { background: var(--spinxqm-hover); border-color: var(--spinxqm-border-hover); }
.spinxqm-modal__choice:focus-visible { outline: none; border-color: var(--spinxqm-accent); box-shadow: 0 0 0 3px rgba(21,101,216,.18); }
.spinxqm-modal__choice--primary { border-color: var(--spinxqm-accent); }
.spinxqm-modal__choice-label { font-weight: 700; font-size: 14px; color: var(--spinxqm-text); }
.spinxqm-modal__choice-desc { font-size: 12px; color: var(--spinxqm-muted); line-height: 1.4; }
.spinxqm-modal--dynamic .spinxqm-modal__actions { padding: 16px 24px 20px; margin-top: 4px; border-top: 1px solid var(--spinxqm-border); background: var(--spinxqm-subtle); }
.spinxqm-modal__dialog--danger .spinxqm-modal__head h2 { color: var(--spinxqm-danger); }
.button-danger { background: var(--spinxqm-danger) !important; border-color: var(--spinxqm-danger) !important; color: #fff !important; }
.button-danger:hover, .button-danger:focus { background: #C9362D !important; border-color: #C9362D !important; }
.button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.button.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
  border-radius: 50%; animation: mpSpin .7s linear infinite;
}
@keyframes mpSpin { to { transform: rotate(360deg); } }

.spinxqm-toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: 99999; display:grid; gap:8px; pointer-events: none; }
#spinxqm-toast-stack-alert { bottom: 88px; }
.spinxqm-toast {
  background: var(--spinxqm-elevated);
  color: var(--spinxqm-text);
  border: 1px solid var(--spinxqm-border);
  border-left: 3px solid var(--spinxqm-accent);
  padding: 10px 14px 10px 14px;
  border-radius: 10px;
  font-weight: 500;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  animation: mpToastIn .22s cubic-bezier(.2,.8,.2,1);
  max-width: 360px;
}
.spinxqm-toast--info { border-left-color: var(--spinxqm-color-info); }
.spinxqm-toast--success { border-left-color: var(--spinxqm-color-success); }
.spinxqm-toast--error { border-left-color: var(--spinxqm-color-error); }
@keyframes mpToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.spinxqm-skeleton { height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--spinxqm-skeleton-1), var(--spinxqm-skeleton-2), var(--spinxqm-skeleton-1)); background-size: 200% 100%; animation: mpSkel 1.2s linear infinite; }
@keyframes mpSkel { from {background-position: 200% 0;} to {background-position: -200% 0;} }

@media (max-width: 1080px) {
  .spinxqm-grid--2, .spinxqm-grid--3, .spinxqm-action-groups, .spinxqm-two-col-form, .spinxqm-help-grid { grid-template-columns: 1fr; }
  .spinxqm-header-card { flex-direction: column; align-items:flex-start; gap: 10px; }
}
.spinxqm-check-list { max-height: 220px; overflow: auto; border: 1px solid var(--spinxqm-border); border-radius: 10px; padding: 8px; background: var(--spinxqm-field-bg); }
.spinxqm-check-list label { display: block; margin-bottom: 6px; }
.spinxqm-list .spinxqm-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--spinxqm-border);
  transition: background-color .15s ease, transform .18s ease, opacity .18s ease;
}
.spinxqm-list .spinxqm-item:last-child { border-bottom: 0; }
.spinxqm-list .spinxqm-item:hover { background-color: var(--spinxqm-subtle); }
.spinxqm-list .spinxqm-item.is-removing { opacity: 0; transform: translateX(8px); }
.spinxqm-item__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.spinxqm-item__title {
  background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--spinxqm-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spinxqm-item__title:hover, .spinxqm-item__title:focus { color: var(--spinxqm-accent); text-decoration: underline; outline: none; }
.spinxqm-item__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spinxqm-item__time { color: var(--spinxqm-muted); font-size: 12px; }
.spinxqm-item-actions { display: flex; gap: 10px; flex-shrink: 0; }
.spinxqm-item-actions .button-link, .spinxqm-item-actions .button-link-delete {
  font-weight: 600; padding: 4px 8px; border-radius: 6px; transition: background-color .15s ease;
}
.spinxqm-item-actions .button-link:hover { background: var(--spinxqm-accent-soft); }
.spinxqm-item-actions .button-link-delete:hover { background: rgba(232, 75, 65, 0.14); }

/* Profiles: leading type avatar so each row's kind (export / backup / find & replace…) is scannable at a glance. */
.spinxqm-item__avatar { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; border: 1px solid transparent; }
.spinxqm-item__avatar--ok { background: rgba(111, 207, 176, 0.14); color: var(--spinxqm-color-success); border-color: rgba(111, 207, 176, 0.3); }
.spinxqm-item__avatar--warn { background: rgba(245, 166, 35, 0.14); color: var(--spinxqm-color-warning); border-color: rgba(245, 166, 35, 0.3); }
.spinxqm-item__avatar--bad { background: rgba(232, 75, 65, 0.14); color: var(--spinxqm-color-error); border-color: rgba(232, 75, 65, 0.3); }
.spinxqm-item__avatar--accent { background: var(--spinxqm-accent-soft); color: var(--spinxqm-accent); border-color: var(--spinxqm-accent-soft); }
/* Decorative icons must not become the click target (the load handler reads event.target directly). */
.spinxqm-list .spinxqm-item svg { pointer-events: none; }
/* "Load" is the primary row action — tint it accent so it reads ahead of Rename/Delete. */
.spinxqm-item-actions .spinxqm-item__load { display: inline-flex; align-items: center; gap: 5px; color: var(--spinxqm-accent); }
.spinxqm-item-actions .spinxqm-item__load:hover { background: var(--spinxqm-accent-soft); }

/* Profiles "how it works" explainer banner. */
.spinxqm-explainer { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; margin-bottom: 16px; border: 1px solid var(--spinxqm-border); border-radius: 14px; background: var(--spinxqm-surface); }
.spinxqm-explainer__icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--spinxqm-accent-soft); color: var(--spinxqm-accent); }
.spinxqm-explainer__body { min-width: 0; flex: 1; }
.spinxqm-explainer__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--spinxqm-text); }
.spinxqm-explainer__text { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--spinxqm-muted); max-width: 74ch; }
.spinxqm-explainer__steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.spinxqm-explainer__step { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--spinxqm-border); border-radius: 10px; background: var(--spinxqm-bg); }
.spinxqm-explainer__num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--spinxqm-accent); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.spinxqm-explainer__step-title { display: block; font-weight: 600; font-size: 13px; color: var(--spinxqm-text); }
.spinxqm-explainer__step-desc { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--spinxqm-muted); }
@media (max-width: 782px) {
  .spinxqm-explainer { flex-direction: column; gap: 12px; }
  .spinxqm-explainer__steps { grid-template-columns: 1fr; }
}

.spinxqm-empty-state--rich { padding: 28px 16px; text-align: center; }
.spinxqm-empty-state--rich strong { display: block; color: var(--spinxqm-text); font-size: 15px; margin-bottom: 6px; }
.spinxqm-empty-state--rich p { margin: 0; color: var(--spinxqm-muted); font-size: 13px; }
.spinxqm-progress__bar { width:100%; height:10px; background: var(--spinxqm-track); border-radius:999px; overflow:hidden; }
.spinxqm-progress__bar span { display:block; height:100%; background:linear-gradient(90deg, var(--spinxqm-accent), var(--spinxqm-accent-alt)); transition:width .2s ease; }
.spinxqm-progress p { margin:10px 0 0; }
#spinxqm-preview-modal table { width:100%; border-collapse:collapse; margin-top:10px; }
#spinxqm-preview-modal th,#spinxqm-preview-modal td { border:1px solid var(--spinxqm-border); padding:8px; text-align:left; font-size:12px; }

.spinxqm-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.spinxqm-main { min-width: 0; }

.spinxqm-breadcrumb {
  margin-bottom: 12px;
  color: var(--spinxqm-muted);
  font-size: 13px;
  min-height: 20px;
  font-weight: 600;
}
.spinxqm-breadcrumb:not(:empty) {
  display: inline-block;
  background: var(--spinxqm-accent-soft);
  color: var(--spinxqm-accent);
  padding: 4px 12px;
  border-radius: 999px;
}
.spinxqm-action-row select { width: 100%; max-width: 320px; min-height: var(--spinxqm-control-h); border: 1px solid var(--spinxqm-border); border-radius: 8px; padding: 0 10px; }
.spinxqm-choice-stack label { display: block; margin-bottom: 12px; }
.spinxqm-note-box { padding: 4px 0; }
.spinxqm-note-box p { color: var(--spinxqm-muted); max-width: 700px; }
.spinxqm-inline-info { background: rgba(79, 142, 247, 0.12); border: 1px solid rgba(79, 142, 247, 0.32); color: var(--spinxqm-text); padding: 10px 12px; border-radius: 8px; }
.spinxqm-warning-note { margin: 20px 20px 18px; background: rgba(245, 166, 35, 0.12); border: 1px solid rgba(245, 166, 35, 0.34); border-radius: 8px; padding: 10px 12px; color: var(--spinxqm-color-warning); }
.spinxqm-panel-only-findreplace[hidden], .spinxqm-panel-only-export[hidden] { display: none !important; }

.spinxqm-modal__dialog--wide { width: min(980px, calc(100% - 32px)); }

/* Notices (preview warnings, info) */
.spinxqm-notice { padding: 12px 14px; border-radius: var(--spinxqm-radius-sm); font-size: 13px; line-height: 1.45; margin: 14px 0; border: 1px solid var(--spinxqm-border); }
.spinxqm-notice--warn { background: rgba(245, 166, 35, 0.12); border-color: rgba(245, 166, 35, 0.45); color: var(--spinxqm-text); }
.spinxqm-notice--warn strong { color: var(--spinxqm-color-warning); }
.spinxqm-notice--info { background: var(--spinxqm-accent-soft); border-color: var(--spinxqm-accent); color: var(--spinxqm-text); }

/* Find & Replace preview summary */
.spinxqm-preview-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 4px; }
.spinxqm-preview-stat { flex: 1 1 120px; background: var(--spinxqm-accent-soft); border: 1px solid var(--spinxqm-border); border-radius: var(--spinxqm-radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.spinxqm-preview-stat__num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--spinxqm-accent); font-variant-numeric: tabular-nums; }
.spinxqm-preview-stat__label { font-size: 12px; color: var(--spinxqm-text); opacity: .85; }
.spinxqm-preview-table__caption { margin: 14px 0 0; font-size: 12px; color: var(--spinxqm-muted); }
.spinxqm-preview-table-wrap { max-height: 340px; overflow: auto; border: 1px solid var(--spinxqm-border); border-radius: var(--spinxqm-radius-sm); margin-top: 6px; }
.spinxqm-preview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spinxqm-preview-table th, .spinxqm-preview-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--spinxqm-border); vertical-align: top; color: var(--spinxqm-text); }
.spinxqm-preview-table thead th { position: sticky; top: 0; background: var(--spinxqm-elevated); z-index: 1; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--spinxqm-muted); }
.spinxqm-preview-table tbody tr:last-child td { border-bottom: none; }
/* Grouped table label (one row per table, spanning its matched columns) */
.spinxqm-preview-table__tname { font-weight: 700; color: var(--spinxqm-text); background: var(--spinxqm-subtle); border-right: 1px solid var(--spinxqm-border); white-space: nowrap; }
.spinxqm-preview-row--group > td, .spinxqm-preview-row--group > th { border-top: 2px solid var(--spinxqm-border); }
.spinxqm-preview-table tbody tr:first-child > td, .spinxqm-preview-table tbody tr:first-child > th { border-top: 0; }
.spinxqm-preview-num { font-variant-numeric: tabular-nums; color: var(--spinxqm-text); }
/* Before / after diff cells — readable, with the new value highlighted in teal */
.spinxqm-preview-sample { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--spinxqm-font-mono); font-size: 12px; color: var(--spinxqm-sample-before); }
.spinxqm-preview-sample--after { color: var(--spinxqm-accent-alt); }
@media (max-width: 600px) { .spinxqm-preview-stat { flex-basis: 100%; } }
.spinxqm-job-head, .spinxqm-job-stats { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.spinxqm-job-head h2 { margin: 0; font-size: 34px; font-weight: 500; }
#spinxqm-job-percent { font-size: 34px; color: var(--spinxqm-accent); margin: 8px 0; }
.spinxqm-job-meta { display:flex; gap:16px; margin: 8px 0 0; color: var(--spinxqm-muted); font-size: 13px; }
.spinxqm-job-table-wrap { border: 1px solid var(--spinxqm-border); border-radius: 10px; max-height: 260px; overflow: auto; margin-top: 14px; }
.spinxqm-job-table-wrap table { width: 100%; border-collapse: collapse; }
.spinxqm-job-table-wrap th, .spinxqm-job-table-wrap td { padding: 10px 12px; border-bottom: 1px solid var(--spinxqm-border); text-align: left; font-size: 13px; }

.spinxqm-check-list label { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.spinxqm-check-list.is-readonly { background: var(--spinxqm-subtle); opacity: .8; }
.spinxqm-check-list.is-readonly label span::after { content: " (read-only)"; color: var(--spinxqm-muted); font-size: 11px; }

/* A label wrapping a checkbox/radio toggles it, so the whole label — text
   included — must carry the pointer cursor, not just the box. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) { cursor: pointer; }
label:has(> input[type="checkbox"]:disabled),
label:has(> input[type="radio"]:disabled) { cursor: not-allowed; }

.spinxqm-fr-rows { margin-bottom: 12px; }
.spinxqm-fr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; }
.spinxqm-fr-actions { display: flex; align-items: center; justify-content: flex-start; margin-top: 4px; }
#spinxqm-add-row {
  margin-top: 0;
  min-width: 150px;
  min-height: var(--spinxqm-control-h);
  border-radius: 10px;
  border-color: rgba(79, 142, 247, 0.5);
  color: var(--spinxqm-accent);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}
#spinxqm-add-row:hover,
#spinxqm-add-row:focus {
  border-color: var(--spinxqm-accent);
  color: var(--spinxqm-accent);
  box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.18);
}
.spinxqm-add-row-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--spinxqm-accent-soft);
  color: var(--spinxqm-accent);
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 1280px) {
  .spinxqm-layout { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
  .spinxqm-fr-row { grid-template-columns: 1fr; }
  .spinxqm-fr-actions { width: 100%; }
  #spinxqm-add-row { width: 100%; justify-content: center; }
}

/* =========================================================
   React Dashboard (wp.components island)
   ========================================================= */
.spinxqm-dashboard { display: flex; flex-direction: column; gap: var(--spinxqm-space-5, 1.25rem); }
.spinxqm-dashboard--loading { align-items: center; justify-content: center; padding: 48px 16px; }
.spinxqm-dashboard--loading .spinxqm-muted { margin-top: 12px; }
.spinxqm-dashboard__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spinxqm-space-4, 1rem); }
.spinxqm-dashboard__action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.spinxqm-dashboard__warnings { margin: 0; padding-left: 1.25rem; color: var(--spinxqm-muted); }

/* Stat card (React-rendered via wp.components/Card) */
.spinxqm-stat-card { transition: box-shadow .18s ease, transform .18s ease; }
.spinxqm-stat-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); }
.spinxqm-stat-card__label { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--spinxqm-muted); font-weight: 600; }
.spinxqm-stat-card__value { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--spinxqm-text); letter-spacing: -0.01em; }
.spinxqm-stat-card__hint { margin: 6px 0 0; font-size: 12px; color: var(--spinxqm-muted); }
.spinxqm-dashboard-card__bar { margin-top: 12px; height: 6px; border-radius: 999px; overflow: hidden; background: var(--spinxqm-border); }
.spinxqm-dashboard-card__bar span { display: block; height: 100%; background: var(--spinxqm-accent); transition: width 0.2s ease; }
.spinxqm-dashboard-card__bar span.is-warning { background: var(--spinxqm-color-warning); }
.spinxqm-dashboard-card__bar span.is-danger { background: var(--spinxqm-color-error); }

/* Dashboard stat-card: icon chip beside the value + status-pill in the hint. */
.spinxqm-stat-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.spinxqm-stat-card__icon { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--spinxqm-accent-soft); color: var(--spinxqm-accent); }
.spinxqm-stat-card__icon svg { display: block; }
.spinxqm-stat-card__icon--ok { background: rgba(111, 207, 176, 0.14); color: var(--spinxqm-color-success); }
.spinxqm-stat-card__icon--warn { background: rgba(245, 166, 35, 0.14); color: var(--spinxqm-color-warning); }
.spinxqm-stat-card__icon--bad { background: rgba(232, 75, 65, 0.14); color: var(--spinxqm-color-error); }
.spinxqm-stat-card__hint .spinxqm-pill { vertical-align: middle; }

/* Dashboard "Quick actions": descriptive, clickable tiles (icon + title + one-line what-it-does). */
.spinxqm-quick-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 12px; }
.spinxqm-quick-tile { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 16px; border: 1px solid var(--spinxqm-border); border-radius: 12px; background: var(--spinxqm-surface); cursor: pointer; font-family: inherit; appearance: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.spinxqm-quick-tile:hover { border-color: var(--spinxqm-accent); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10); transform: translateY(-1px); }
.spinxqm-quick-tile:focus-visible { outline: 2px solid var(--spinxqm-accent); outline-offset: 2px; }
.spinxqm-quick-tile__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--spinxqm-accent-soft); color: var(--spinxqm-accent); }
.spinxqm-quick-tile__icon svg { display: block; }
.spinxqm-quick-tile__body { min-width: 0; }
.spinxqm-quick-tile__title { display: block; font-weight: 700; font-size: 14px; color: var(--spinxqm-text); }
.spinxqm-quick-tile__desc { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--spinxqm-muted); }
.spinxqm-quick-tile--primary { border-color: var(--spinxqm-accent); background: var(--spinxqm-accent-soft); }
.spinxqm-quick-tile--primary .spinxqm-quick-tile__icon { background: var(--spinxqm-accent); color: #fff; }
/* Selected operation tile (Migrate tab picker). */
.spinxqm-quick-tile.is-active { border-color: var(--spinxqm-accent); background: var(--spinxqm-accent-soft); box-shadow: 0 0 0 1px var(--spinxqm-accent); }
.spinxqm-quick-tile.is-active .spinxqm-quick-tile__icon { background: var(--spinxqm-accent); color: #fff; }

/* Skeleton placeholder during JS bootstrap */
.spinxqm-dashboard--skeleton { opacity: .55; pointer-events: none; }
.spinxqm-dashboard--skeleton .spinxqm-card { padding: 18px; }

/* wp.components integration — keep our card visual tokens consistent */
#spinxqm-dashboard-root .components-card {
  border-radius: var(--spinxqm-radius) !important;
  border: 1px solid var(--spinxqm-border) !important;
  box-shadow: var(--spinxqm-shadow) !important;
  background: var(--spinxqm-surface) !important;
}
#spinxqm-dashboard-root .components-card__header {
  border-bottom: 1px solid var(--spinxqm-border) !important;
  background: transparent !important;
  padding: 16px 20px !important;
}
#spinxqm-dashboard-root .components-card__body { padding: 18px 20px !important; }
#spinxqm-dashboard-root .components-button.is-primary { background: var(--spinxqm-accent); color: #fff; }
#spinxqm-dashboard-root .components-button.is-primary:hover { background: var(--spinxqm-color-accent-hover); }
#spinxqm-dashboard-root .components-notice { margin: 0 0 0 0; border-radius: var(--spinxqm-radius-sm); }
/* wp.components renders with WP-default (dark) text — recolor for the dark surface. */
#spinxqm-dashboard-root { color: var(--spinxqm-text); }
#spinxqm-dashboard-root .components-card,
#spinxqm-dashboard-root .components-card__header,
#spinxqm-dashboard-root .components-card__body,
#spinxqm-dashboard-root .components-card h1,
#spinxqm-dashboard-root .components-card h2,
#spinxqm-dashboard-root .components-card h3 { color: var(--spinxqm-text); }
/* Tertiary + secondary React buttons ship as bare text, which reads as a link
   rather than a button. Give them the same 1px outline the non-React
   `.wp-core-ui .button` carries. The border is an inset box-shadow —
   wp.components' own borders are too, so there is no layout shift and no fight
   with its `border: 0`. */
#spinxqm-dashboard-root .components-button.is-tertiary,
#spinxqm-dashboard-root .components-button.is-secondary {
  color: var(--spinxqm-accent);
  background: var(--spinxqm-btn-bg);
  box-shadow: inset 0 0 0 1px var(--spinxqm-btn-border);
  border-radius: var(--spinxqm-radius-sm);
  transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}
#spinxqm-dashboard-root .components-button.is-tertiary:hover:not(:disabled),
#spinxqm-dashboard-root .components-button.is-secondary:hover:not(:disabled) {
  background: var(--spinxqm-accent-soft);
  box-shadow: inset 0 0 0 1px var(--spinxqm-accent);
  color: var(--spinxqm-accent);
}
#spinxqm-dashboard-root .components-button.is-destructive,
#spinxqm-dashboard-root .components-button.is-tertiary.is-destructive { color: var(--spinxqm-danger); }
#spinxqm-dashboard-root .components-button.is-destructive:hover:not(:disabled) {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--spinxqm-danger);
  color: var(--spinxqm-danger);
}
#spinxqm-dashboard-root .components-button.is-primary { border-radius: var(--spinxqm-radius-sm); }
#spinxqm-dashboard-root .components-button:disabled,
#spinxqm-dashboard-root .components-button[aria-disabled="true"] { opacity: .6; }

/* ---------- Onboarding Guide (@wordpress/components Guide) ----------
   admin.css loads ONLY on the plugin page, so targeting .components-guide
   here can't leak to the rest of wp-admin. The Guide modal mounts on <body>
   (which carries body.spinxqm-theme-dark), so --spinxqm-* tokens resolve per theme. */
.components-modal__frame.spinxqm-guide {
  width: min(94vw, 560px) !important;
  max-width: 560px !important;
  background: var(--spinxqm-surface) !important;
  border: 1px solid var(--spinxqm-border) !important;
  border-radius: var(--spinxqm-radius) !important;
  box-shadow: 0 24px 64px -16px var(--spinxqm-shadow) !important;
  overflow: hidden;
  color: var(--spinxqm-text);
}
.spinxqm-guide .components-modal__content { padding: 0 !important; margin: 0 !important; }
.spinxqm-guide .components-guide__container { margin: 0; min-height: 0; }
.spinxqm-guide .components-guide__page { display: flex; flex-direction: column; min-height: 0; }

/* Hero — accent icon chip + eyebrow */
.spinxqm-onboard-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 36px 0;
  text-align: center;
}
.spinxqm-onboard-hero__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--spinxqm-accent-soft);
  color: var(--spinxqm-accent);
}
.spinxqm-onboard-hero__chip svg { display: block; }
.spinxqm-onboard-hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--spinxqm-accent);
}

/* Content */
.spinxqm-onboard-page { padding: 14px 40px 4px; max-width: none; text-align: center; }
.spinxqm-onboard-page h2 { margin: 0 0 10px; font-size: 23px; font-weight: 700; letter-spacing: -0.01em; color: var(--spinxqm-text); }
.spinxqm-onboard-page p { margin: 0 auto 10px; max-width: 44ch; color: var(--spinxqm-muted); line-height: 1.65; font-size: 14px; }
.spinxqm-onboard-page__note {
  margin: 16px auto 0 !important;
  padding: 10px 14px;
  border-radius: var(--spinxqm-radius-sm);
  background: var(--spinxqm-accent-soft);
  color: var(--spinxqm-text) !important;
  font-size: 13px;
  text-align: left;
}

/* Footer — flow under content (WP makes it absolute by default), brand dots + buttons */
.spinxqm-guide .components-guide__footer {
  position: static;
  height: auto;
  margin: 0;
  padding: 16px 0 55px 0;
  border-top: 1px solid var(--spinxqm-border);
  background: var(--spinxqm-subtle);
}
.spinxqm-guide .components-guide__page-control { margin: 0; }
.spinxqm-guide .components-guide__page-control li { margin: 0 3px; }
.spinxqm-guide .components-guide__page-control svg { fill: var(--spinxqm-border-hover); transition: fill .15s ease; }
.spinxqm-guide .components-guide__page-control [aria-current="step"] svg { fill: var(--spinxqm-accent); }
.spinxqm-guide .components-button.is-primary { background: var(--spinxqm-accent); color: #fff; border-radius: var(--spinxqm-radius-sm); }
.spinxqm-guide .components-button.is-primary:hover { background: var(--spinxqm-color-accent-hover, var(--spinxqm-accent)); }
.spinxqm-guide .components-button.is-tertiary,
.spinxqm-guide .components-button.is-secondary {
  color: var(--spinxqm-accent);
  background: var(--spinxqm-btn-bg);
  box-shadow: inset 0 0 0 1px var(--spinxqm-btn-border);
  border-radius: var(--spinxqm-radius-sm);
}
.spinxqm-guide .components-button.is-tertiary:hover:not(:disabled),
.spinxqm-guide .components-button.is-secondary:hover:not(:disabled) {
  background: var(--spinxqm-accent-soft);
  box-shadow: inset 0 0 0 1px var(--spinxqm-accent);
  color: var(--spinxqm-accent);
}
@media (prefers-reduced-motion: reduce) {
  .spinxqm-guide .components-guide__page-control svg { transition: none; }
}
.spinxqm-table-wrap { overflow-x: auto; }
.spinxqm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spinxqm-table th, .spinxqm-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--spinxqm-border, #e5e7eb); }
.spinxqm-table th { font-weight: 600; color: var(--spinxqm-muted); }
.spinxqm-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.spinxqm-pill--ok { background: rgba(111, 207, 176, 0.14); color: var(--spinxqm-color-success); border: 1px solid rgba(111, 207, 176, 0.3); }
.spinxqm-pill--bad { background: rgba(232, 75, 65, 0.14); color: var(--spinxqm-color-error); border: 1px solid rgba(232, 75, 65, 0.3); }
.spinxqm-pill--warn { background: rgba(245, 166, 35, 0.14); color: var(--spinxqm-color-warning); border: 1px solid rgba(245, 166, 35, 0.3); }
.spinxqm-pill--neutral { background: var(--spinxqm-subtle); color: var(--spinxqm-muted); border: 1px solid var(--spinxqm-border); }

/* =========================================================
   A11y — focus management, busy state, screen-reader helpers
   ========================================================= */
.spinxqm-app :focus-visible,
.spinxqm-app a:focus-visible,
.spinxqm-app button:focus-visible,
.spinxqm-app input:focus-visible,
.spinxqm-app select:focus-visible,
.spinxqm-app textarea:focus-visible {
  outline: 2px solid var(--spinxqm-accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.spinxqm-app .button-link:focus-visible,
.spinxqm-app .button-link-delete:focus-visible { outline-offset: 1px; }
.spinxqm-tab-panel[tabindex="-1"]:focus { outline: none; }

/* WP's `.wp-core-ui .button { display:inline-block }` (0,2,0) overrides the
   `[hidden]` attribute, so `el.hidden = true` wouldn't actually hide a button.
   This `[hidden]` rule (0,3,0) out-specifies it so hidden buttons stay hidden. */
.wp-core-ui .button[hidden] { display: none; }

.spinxqm-actions-row[aria-busy="true"] .button { opacity: .7; cursor: progress; }
[aria-busy="true"] { pointer-events: none; }
/* The process popup is aria-busy WHILE running, but its controls
   (Pause/Resume, Cancel, Retry, Done) must stay clickable the whole time. */
[aria-busy="true"] .spinxqm-process__actions,
[aria-busy="true"] .spinxqm-process__actions .button { pointer-events: auto; }

/* Make the cosmetic chevron strictly decorative */
.spinxqm-accordion__trigger::after { pointer-events: none; }

/* Hidden but accessible to AT */
.spinxqm-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =========================================================
   Reduced motion — kill non-essential animations
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .spinxqm-accordion__content { transition: none !important; }
  .spinxqm-modal, .spinxqm-modal__dialog, .spinxqm-toast { animation: none !important; }
}

/* =========================================================
   Sub-600 responsive — phones in portrait
   ========================================================= */
@media (max-width: 600px) {
  .spinxqm-wrap { margin: 8px 6px 0 2px; }
  .spinxqm-header-card { padding: 16px; border-radius: 12px; }
  .spinxqm-header-card h1 { font-size: 22px; }
  /* Wrap the primary tab bar so every tab is visible at once instead of hidden
     behind a horizontal scroll; a rounded-rect reads better than a pill once wrapped. */
  .spinxqm-tabs {
    top: 12px; padding: 5px; gap: 3px;
    flex-wrap: wrap; justify-content: center;
    overflow-x: visible; border-radius: 16px;
  }
  .spinxqm-tab { padding: 7px 11px; font-size: 12.5px; white-space: nowrap; }
  /* Help "jump to" bar: wrap it too, and drop stickiness on phones so it can't
     collide with the now-taller wrapped tab bar. */
  .spinxqm-help-nav { position: static; flex-wrap: wrap; overflow-x: visible; border-radius: 16px; }
  article[id^="help-"] { scroll-margin-top: 140px; }

  .spinxqm-card { border-radius: 12px; }
  .spinxqm-card__header { padding: 14px 16px; }
  .spinxqm-card__header h2 { font-size: 18px; }
  .spinxqm-card > *:not(.spinxqm-card__header) { padding: 14px 16px; }
  .spinxqm-card--accordion .spinxqm-accordion__trigger.spinxqm-card__header { padding: 14px 16px; }

  .spinxqm-grid--2, .spinxqm-grid--3 { grid-template-columns: 1fr; gap: 12px; }

  /* Operation picker + dashboard quick-actions: two compact columns on phones so
     every operation is reachable with far less scrolling than a single tall stack. */
  .spinxqm-mode-row { padding: 14px 14px 16px; }
  .spinxqm-quick-tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .spinxqm-quick-tile { padding: 12px 10px; gap: 10px; }
  .spinxqm-quick-tile__icon { width: 32px; height: 32px; }
  .spinxqm-quick-tile__icon svg { width: 18px; height: 18px; }
  .spinxqm-quick-tile__title { font-size: 13px; }
  .spinxqm-quick-tile__desc { font-size: 11px; margin-top: 2px; }

  /* Keep the type avatar beside the title and wrap the row actions onto their own
     line — far more compact than stacking the avatar on a line of its own. */
  .spinxqm-list .spinxqm-item {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px;
  }
  .spinxqm-item__main { flex: 1 1 auto; }
  .spinxqm-item-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 4px; }
  .spinxqm-item-actions .button-link,
  .spinxqm-item-actions .button-link-delete { padding: 6px 10px; }
  .spinxqm-item__title { white-space: normal; }

  .spinxqm-actions-row {
    flex-direction: column;
    padding: 12px;
    border-radius: 12px;
  }
  .spinxqm-actions-row .button { width: 100%; justify-content: center; }

  .spinxqm-fr-preset { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .spinxqm-fr-arrow { display: none; }
  .spinxqm-fr-row { grid-template-columns: 1fr; }

  .spinxqm-modal__dialog { margin: 6vh auto; width: calc(100% - 16px); }
  .spinxqm-modal__dialog--wide { width: calc(100% - 16px); }
  .spinxqm-modal--dynamic .spinxqm-modal__dialog--dynamic { width: calc(100% - 16px); }
  .spinxqm-modal__head, .spinxqm-modal__body, .spinxqm-modal__actions { padding-left: 18px; padding-right: 18px; }

  .spinxqm-toast-stack { right: 8px; left: 8px; bottom: 12px; }
  #spinxqm-toast-stack-alert { bottom: 68px; }
  .spinxqm-toast { max-width: none; }

  .spinxqm-check-list { max-height: 180px; }
  .spinxqm-job-head h2 { font-size: 22px; }
  #spinxqm-job-percent { font-size: 24px; }
}

/* =========================================================
   Dark-first form controls inside the Quick Migrate app surface.
   (Scoped so the React dashboard's wp.components keep their own styling.)
   ========================================================= */
/* Form controls — scoped to `.wp-core-ui` (matches WP's own input/select scope)
   so the dark fields + light text win over WordPress's defaults across the whole
   page and inside body-level popups. The dashboard reset below uses an ID, which
   outranks these, so wp.components controls keep their native styling. */
.wp-core-ui input[type="text"],
.wp-core-ui input[type="search"],
.wp-core-ui input[type="number"],
.wp-core-ui input[type="url"],
.wp-core-ui input[type="date"],
.wp-core-ui input[type="email"],
.wp-core-ui input[type="password"],
.wp-core-ui input[type="tel"],
.wp-core-ui select,
.wp-core-ui textarea {
  background: var(--spinxqm-elevated);
  border: 1px solid var(--spinxqm-border-hover);
  color: var(--spinxqm-text);
  border-radius: var(--spinxqm-radius-sm);
}
/* Single-line controls share one height. `min-height` (not `height`) so a field
   that needs to grow still can; `box-sizing` so the border is inside it. */
.wp-core-ui input[type="text"],
.wp-core-ui input[type="search"],
.wp-core-ui input[type="number"],
.wp-core-ui input[type="url"],
.wp-core-ui input[type="date"],
.wp-core-ui input[type="email"],
.wp-core-ui input[type="password"],
.wp-core-ui input[type="tel"],
.wp-core-ui select:not([multiple]):not([size]) {
  box-sizing: border-box;
  min-height: var(--spinxqm-control-h);
  line-height: 1.4;
}
/* The selected value and the native dropdown options both readable on dark.
   The native <option> popup (Chrome/Windows) does NOT reliably resolve
   var(--spinxqm-color-*) from the dark-themed cascade — it fell back to near-black
   ink on the dark popup (unreadable). Pin LITERAL per-theme colours (light default
   + a body.spinxqm-theme-dark override that out-specifies it) plus color-scheme so the
   dropdown is always legible. Literals are required here precisely because the
   variable indirection is what breaks in the native popup. */
.wp-core-ui select { color: var(--spinxqm-text); color-scheme: light; }
.wp-core-ui select option,
.wp-core-ui select optgroup {
  background-color: #FFFFFF;
  color: #1A1B1F;
}
/* `.wp-core-ui` lives on <body> itself, so these MUST be a compound selector —
   `body.spinxqm-theme-dark .wp-core-ui` (descendant) matches nothing and silently
   left every select on the light popup + light text colour in dark mode.
   `-webkit-text-fill-color` is needed alongside `color`: with appearance:none,
   Chrome paints the closed select's value with the fill colour it derived from
   the (previously light) color-scheme, ignoring `color`. */
body.spinxqm-theme-dark.wp-core-ui select {
  color-scheme: dark;
  color: #F4F3EF;
  -webkit-text-fill-color: #F4F3EF;
}
body.spinxqm-theme-dark.wp-core-ui select option,
body.spinxqm-theme-dark.wp-core-ui select optgroup {
  background-color: #2A2D35;
  color: #F4F3EF;
}
/* Dropdown chevron. The `background:` shorthand above replaces WP core's arrow
   image, leaving a select that looks like a text input — so draw our own and
   suppress the UA one with appearance:none. Multi/list selects keep native
   rendering (no arrow to draw). The stroke must be a LITERAL per theme: a data
   URI is a separate document and cannot resolve var(--spinxqm-muted). */
.wp-core-ui select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236B6F7A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 34px;
}
body.spinxqm-theme-dark.wp-core-ui select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238B8D96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Boxed multi-line fields sit recessed in their card, like the check-lists. */
.wp-core-ui textarea { background: var(--spinxqm-field-bg); }
.wp-core-ui input::placeholder,
.wp-core-ui textarea::placeholder { color: var(--spinxqm-muted); }
.wp-core-ui input:focus,
.wp-core-ui select:focus,
.wp-core-ui textarea:focus {
  border-color: var(--spinxqm-accent);
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.18);
  outline: none;
}
#spinxqm-dashboard-root input,
#spinxqm-dashboard-root select,
#spinxqm-dashboard-root textarea { background: initial; color: initial; }
/* wp.components draws its own select chrome — hand the arrow back to the UA. */
#spinxqm-dashboard-root select { appearance: auto; -webkit-appearance: auto; padding-right: initial; }

.spinxqm-fr-preset input { background: var(--spinxqm-elevated); color: var(--spinxqm-text); }
.spinxqm-inline-info--soft { background: var(--spinxqm-subtle); color: var(--spinxqm-muted); }
.spinxqm-empty-state--rich strong { color: var(--spinxqm-text); }
.spinxqm-mode-row select { background: var(--spinxqm-elevated); color: var(--spinxqm-text); }
.spinxqm-mode-row select:hover,.spinxqm-mode-row select:active, .spinxqm-mode-row select:focus{
  color: var(--spinxqm-text); 
}

span.spinxqm-section-check__label {
    padding-left: 10px;
}


.spinxqm-theme-dark input[type="color"],
.spinxqm-theme-dark input[type="date"],
.spinxqm-theme-dark input[type="datetime-local"],
.spinxqm-theme-dark input[type="datetime"],
.spinxqm-theme-dark input[type="email"],
.spinxqm-theme-dark input[type="month"],
.spinxqm-theme-dark input[type="number"],
.spinxqm-theme-dark input[type="password"],
.spinxqm-theme-dark input[type="search"],
.spinxqm-theme-dark input[type="tel"],
.spinxqm-theme-dark input[type="text"],
.spinxqm-theme-dark input[type="time"],
.spinxqm-theme-dark input[type="url"],
.spinxqm-theme-dark input[type="week"],
.spinxqm-theme-dark select,
.spinxqm-theme-dark textarea {
    background-color: #1e1e1e;
    color: var(--spinxqm-text);
}