/* =============================================================================
   ESS Advanced — WordPress skin for the JSONscan "Perchance Export Utility" plugin
   Source of truth: src/ess-wp/ess-wp-skin.css  (see src/README.md for the hosted URL
   and the rebuild recipe).

   Pairs with src/ess-wp/ess-wp-skin.js, which removes the plugin's dark-mode override
   <style id="jsonutil-frontend-inline-overrides"> block, strips the !important inline
   styles its JS writes onto the section tabs, marks the wrapper with `.ess-wp`, and
   mounts <ess-header current="chat-util" bleed> as the first child.

   Needs the shared kit alongside it: ess-theme.css (--ess-* tokens) + ess-header.js.

   Specificity note: the plugin ships light-mode rules like
     html:not(.wp-dark-mode-active) #jsonutil-frontend .jsonutil-section-panel { … !important }
   in admin/assets/frontend.css. Those out-specify a plain `#jsonutil-frontend`, so the
   handful of rules that must beat them (see "surface overrides") add `html body …` and the
   `.ess-wp` hook class. Everything else only needs the id prefix.
   ============================================================================= */

/* ---- 1. Page frame: dark page + the same inset card geometry as the Perchance apps ---- */

html:has(#jsonutil-frontend) {
  background: var(--ess-bg, #0a0a14);
  -webkit-text-size-adjust: 100%;
}

html body:has(#jsonutil-frontend) {
  margin: 0 !important;
  padding: 12px !important;
  background: var(--ess-bg, #0a0a14) !important;
  background-image: none !important;
  color: var(--ess-text, #e8e8f0);
  font-family: var(--ess-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif);
  box-sizing: border-box;
}

/* the plugin (shortcode output) becomes the card */
html body #jsonutil-frontend.jsonutil-frontend-wrap.ess-wp {
  width: min(1150px, 100%) !important;
  max-width: 1150px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding: 6px 14px 22px !important;
  background: var(--ess-card, #0e0e1c) !important;
  border: 1px solid var(--ess-border, #2b2b48) !important;
  border-radius: var(--ess-radius, 16px) !important;
  box-shadow: var(--ess-card-shadow, 0 0 0 6px rgba(43, 43, 72, 0.18), 0 14px 44px rgba(0, 0, 0, 0.55)) !important;
  color: var(--ess-text, #e8e8f0) !important;
  font-family: var(--ess-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif) !important;
  text-align: left;
  position: relative;
  color-scheme: dark;
}

/* the page is dark by design, so the floating WP Dark Mode switch has nothing to do */
body:has(#jsonutil-frontend) .wp-dark-mode-floating-switch,
body:has(#jsonutil-frontend) .wp-dark-mode-switch,
body:has(#jsonutil-frontend) .wp-dark-mode-switch-cta {
  display: none !important;
}

/* keep WP Dark Mode's filters out of the card (the plugin's own copy of this lived in
   the inline override block that the JS removes) */
html[data-wp-dark-mode-active] #jsonutil-frontend,
.wp-dark-mode-active #jsonutil-frontend,
html[data-wp-dark-mode-active] :is(#jsonutil-frontend, .jsonutil-modal) *,
.wp-dark-mode-active :is(#jsonutil-frontend, .jsonutil-modal) * {
  filter: none !important;
  -webkit-filter: none !important;
}

/* The WP theme sets `body { line-height: 24px; font-size: 16px }`. The shared <ess-header> is a
   custom element, so the page can style it from the light DOM (only its shadow *children* are
   isolated) — inherited text metrics flow through the host into the shadow tree. Its shadow styles
   only pin font-family, so an absolute inherited line-height made the nav tabs 40px tall here vs
   31.6px on the Perchance pages. Pin the inherited text metrics on the host element so the header
   is identical on both surfaces. (ess-header.js now normalizes these in :host too; this is the
   belt-and-braces copy for pages still on an older header build.) */
html body #jsonutil-frontend.ess-wp ess-header {
  font-size: 16px !important;
  line-height: normal !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* ---- 1b. Accent: this page stays in the blue/navy family, never violet ----
   The shared accent gradient (used by the active header pill, the active section tab,
   and the primary buttons) is blue #5b7cfa -> deeper blue #3655cf. The shared theme
   now sets that second stop too, so this page and the Perchance apps match. This scoped
   override is a redundant safety net: it keeps the WordPress page blue even if a
   stale/cached copy of the shared theme is still enqueued. Custom properties inherit
   into the shared header's shadow tree, so this targets ONLY the WordPress page. */
html:has(#jsonutil-frontend) {
  --ess-accent-2: #3655cf;
  --ess-accent-hover: #6f8cff;
}

/* ---- 2. Palette: point the plugin's own design tokens at the ESS tokens ---- */

html body #jsonutil-frontend,
html body .jsonutil-modal {
  --jsonutil-surface: var(--ess-surface, #16162a) !important;
  --jsonutil-surface-soft: #12121f !important;
  --jsonutil-surface-muted: var(--ess-surface-2, #1e1e37) !important;
  --jsonutil-border: var(--ess-border, #2b2b48) !important;
  --jsonutil-border-soft: #232340 !important;
  --jsonutil-text: var(--ess-text, #e8e8f0) !important;
  --jsonutil-text-muted: var(--ess-text-dim, rgba(232, 232, 240, 0.64)) !important;
  --jsonutil-link: #8fa6ff !important;
  --jsonutil-info-bg: var(--ess-accent-soft, rgba(91, 124, 250, 0.14)) !important;
  --jsonutil-info-text: #cfd8ff !important;
  --jsonutil-error-bg: rgba(248, 113, 113, 0.12) !important;
  --jsonutil-error-text: #fecaca !important;

  /* content-button palette: the darker navy used by the Perchance apps' own content
     buttons (.paste-btn/.clear-btn/.mini-btn on ess-adv-img-cvt), NOT the lighter
     --ess-surface-2 that the shared header pills use. Retune here in one place. */
  --ess-wp-btn-bg: #1a1a2e;
  --ess-wp-btn-bg-hover: #22223c;
  --ess-wp-btn-border: #3a3a52;
  --ess-wp-btn-border-hover: #4a4a70;
  --ess-wp-btn-text: #c8c8d8;
}

/* surfaces that the plugin pins with !important in frontend.css */
html body #jsonutil-frontend.jsonutil-frontend-wrap.ess-wp .jsonutil-section-panel,
html body #jsonutil-frontend.jsonutil-frontend-wrap.ess-wp .jsonutil-character-card {
  background: var(--ess-surface, #16162a) !important;
  border-color: var(--ess-border, #2b2b48) !important;
  color: var(--ess-text, #e8e8f0) !important;
}

html body #jsonutil-frontend.jsonutil-frontend-wrap.ess-wp .jsonutil-section-panel[data-section-panel="characters"],
html body #jsonutil-frontend.jsonutil-frontend-wrap.ess-wp .jsonutil-section-panel[data-section-panel="characters"] .jsonutil-character-card {
  background: var(--ess-card, #0e0e1c) !important;
  border-color: var(--ess-border, #2b2b48) !important;
}

/* ---- 3. Masthead: title + the plugin's help lines ---- */

:is(#jsonutil-frontend, .jsonutil-modal) > h2 {
  margin: 4px 0 10px !important;
  font-family: inherit !important;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.2px !important;
  text-align: center !important;
  color: var(--ess-text, #e8e8f0) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) > .jsonutil-frontend-help {
  max-width: 780px;
  margin: 0 auto 3px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-align: center !important;
  color: var(--ess-text-dim, rgba(232, 232, 240, 0.64)) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-frontend-help,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-maintenance-help,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-maintenance-note,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-name-generator-meta,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-char-excerpt,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-char-source,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-summary-history-count {
  color: var(--ess-text-dim, rgba(232, 232, 240, 0.64)) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) a,
.jsonutil-modal__inner a {
  color: var(--jsonutil-link) !important;
  text-decoration: none;
}

:is(#jsonutil-frontend, .jsonutil-modal) a:hover,
.jsonutil-modal__inner a:hover {
  color: var(--ess-accent-hover, #6f8cff) !important;
  text-decoration: underline;
}

/* ---- 4. Section switcher: same pill language as the shared header tabs ---- */

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-sections-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 14px 0 16px !important;
  padding: 8px 10px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--ess-surface, #16162a) !important;
  border: 1px solid var(--ess-border, #2b2b48) !important;
  border-radius: 12px !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-section-tab {
  border-radius: 9px !important;
  padding: 7px 10px !important;
  min-height: 0 !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.1px !important;
  text-transform: none !important;
  background: var(--ess-wp-btn-bg, #1a1a2e) !important;
  border: 1px solid var(--ess-wp-btn-border, #3a3a52) !important;
  color: var(--ess-wp-btn-text, #c8c8d8) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-section-tab:hover {
  background: var(--ess-wp-btn-bg-hover, #22223c) !important;
  border-color: var(--ess-wp-btn-border-hover, #4a4a70) !important;
  color: #fff !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-section-tab.is-active,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-section-tab[aria-selected="true"],
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-section-tab.is-active:hover,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-section-tab[aria-selected="true"]:hover {
  color: #fff !important;
  background: linear-gradient(180deg, var(--ess-accent, #5b7cfa), var(--ess-accent-2, #3655cf)) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 12px rgba(91, 124, 250, 0.38) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-section-tab:focus-visible {
  outline: 2px solid var(--ess-accent, #5b7cfa);
  outline-offset: 2px;
}

/* the two "jump to another tool" links sitting in the same strip */
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-sections-nav > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 7px 10px !important;
  min-height: 0 !important;
  border-radius: 9px !important;
  border: 1px dashed var(--ess-wp-btn-border, #3a3a52) !important;
  background: transparent !important;
  color: var(--ess-wp-btn-text, #c8c8d8) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-sections-nav > a:hover {
  border-style: solid !important;
  border-color: var(--ess-accent, #5b7cfa) !important;
  color: var(--ess-text, #e8e8f0) !important;
  background: var(--ess-accent-soft, rgba(91, 124, 250, 0.14)) !important;
  text-decoration: none !important;
}

/* ---- 5. Panels + cards ---- */

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-section-panel {
  border: 1px solid var(--ess-border, #2b2b48) !important;
  border-radius: var(--ess-radius-sm, 10px) !important;
  padding: 18px !important;
  background: var(--ess-surface, #16162a) !important;
  color: var(--ess-text, #e8e8f0) !important;
  box-shadow: none !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-section-panel h3 {
  margin: 0 0 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  color: var(--ess-text, #e8e8f0) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-section-panel h4 {
  color: var(--ess-text, #e8e8f0) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-uploader,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-character-tools,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-chat-tools,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-global-tools,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-maintenance,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-image-converter-card {
  border: 1px solid var(--ess-border, #2b2b48) !important;
  border-radius: var(--ess-radius-sm, 10px) !important;
  background: var(--ess-surface-2, #1e1e37) !important;
  color: var(--ess-text, #e8e8f0) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-imports,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-imports table,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-maintenance-preview,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-global-card,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-name-result-card,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-chat-sidebar {
  border: 1px solid var(--ess-border, #2b2b48) !important;
  border-radius: var(--ess-radius-sm, 10px) !important;
  background: var(--ess-surface, #16162a) !important;
  color: var(--ess-text, #e8e8f0) !important;
  overflow: hidden;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-imports th,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-imports td,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-maintenance-table th,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-maintenance-table td {
  border-bottom: 1px solid var(--ess-border, #2b2b48) !important;
  color: var(--ess-text, #e8e8f0) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-imports th,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-maintenance-table th {
  color: var(--ess-text-dim, rgba(232, 232, 240, 0.64)) !important;
  font-weight: 700 !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-count-badge {
  background: linear-gradient(180deg, var(--ess-accent, #5b7cfa), var(--ess-accent-2, #3655cf)) !important;
  border: 0 !important;
  color: #fff !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-character-card {
  border: 1px solid var(--ess-border, #2b2b48) !important;
  border-radius: var(--ess-radius-sm, 10px) !important;
  background: var(--ess-surface, #16162a) !important;
  box-shadow: none !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-character-card.is-library-selected {
  border-color: var(--ess-accent, #5b7cfa) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-character-actions {
  border-top: 1px solid var(--ess-border, #2b2b48) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-char-header-block,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-char-copy-command,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-complete-character-item:nth-child(odd) {
  border: 1px solid var(--ess-border-soft, #232340) !important;
  border-radius: var(--ess-radius-xs, 7px) !important;
  background: #12121f !important;
  color: var(--ess-text, #e8e8f0) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-char-header-block dt,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-complete-character-item dt,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-char-header-block dd,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-complete-character-item dd {
  color: var(--ess-text, #e8e8f0) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-char-header-block dt,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-complete-character-item dt {
  color: var(--ess-text-dim, rgba(232, 232, 240, 0.64)) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-role-instruction-subsection {
  border: 0 !important;
  border-left: 3px solid var(--ess-accent, #5b7cfa) !important;
  border-radius: 0 var(--ess-radius-xs, 7px) var(--ess-radius-xs, 7px) 0 !important;
  background: var(--ess-accent-soft, rgba(91, 124, 250, 0.14)) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-role-instruction-subsection strong {
  color: #cfd8ff !important;
}

/* ---- 6. Form controls + buttons ---- */

:is(#jsonutil-frontend, .jsonutil-modal) input[type="file"],
:is(#jsonutil-frontend, .jsonutil-modal) input[type="number"],
:is(#jsonutil-frontend, .jsonutil-modal) input[type="search"],
:is(#jsonutil-frontend, .jsonutil-modal) input[type="text"],
:is(#jsonutil-frontend, .jsonutil-modal) input[type="range"],
:is(#jsonutil-frontend, .jsonutil-modal) select,
:is(#jsonutil-frontend, .jsonutil-modal) textarea {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--ess-border-strong, #3c3c66) !important;
  border-radius: var(--ess-radius-xs, 7px) !important;
  background: #12121f !important;
  color: var(--ess-text, #e8e8f0) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  box-sizing: border-box;
  accent-color: var(--ess-accent, #5b7cfa);
}

:is(#jsonutil-frontend, .jsonutil-modal) input[type="range"] {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) select option {
  background: #12121f;
  color: var(--ess-text, #e8e8f0);
}

:is(#jsonutil-frontend, .jsonutil-modal) input[type="search"]::placeholder,
:is(#jsonutil-frontend, .jsonutil-modal) input[type="text"]::placeholder,
:is(#jsonutil-frontend, .jsonutil-modal) textarea::placeholder {
  color: var(--ess-text-faint, rgba(232, 232, 240, 0.4)) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) input[type="search"]:focus,
:is(#jsonutil-frontend, .jsonutil-modal) input[type="number"]:focus,
:is(#jsonutil-frontend, .jsonutil-modal) input[type="text"]:focus,
:is(#jsonutil-frontend, .jsonutil-modal) select:focus,
:is(#jsonutil-frontend, .jsonutil-modal) textarea:focus,
:is(#jsonutil-frontend, .jsonutil-modal) input[type="file"]:focus {
  outline: none !important;
  border-color: var(--ess-accent, #5b7cfa) !important;
  box-shadow: 0 0 0 3px var(--ess-accent-soft, rgba(91, 124, 250, 0.14)) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) input[type="file"]::file-selector-button {
  margin-right: 8px;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid var(--ess-wp-btn-border, #3a3a52);
  border-radius: var(--ess-radius-xs, 7px);
  background: var(--ess-wp-btn-bg, #1a1a2e);
  color: var(--ess-wp-btn-text, #c8c8d8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

:is(#jsonutil-frontend, .jsonutil-modal) input[type="file"]::file-selector-button:hover {
  background: var(--ess-wp-btn-bg-hover, #22223c);
  border-color: var(--ess-accent, #5b7cfa);
  color: #fff;
}

/* one deliberately low-specificity generic rule (the :where() wrapper contributes nothing),
   so the plugin's own class rules are beaten while every component rule below still wins */
:is(#jsonutil-frontend, .jsonutil-modal) :where(button, .button, input[type="button"], input[type="submit"]):not(:where(.jsonutil-section-tab, .jsonutil-thread-item)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px !important;
  padding: 7px 13px !important;
  border: 1px solid var(--ess-wp-btn-border, #3a3a52) !important;
  border-radius: var(--ess-radius-xs, 7px) !important;
  background: var(--ess-wp-btn-bg, #1a1a2e) !important;
  color: var(--ess-wp-btn-text, #c8c8d8) !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

:is(#jsonutil-frontend, .jsonutil-modal) :where(button, .button, input[type="button"], input[type="submit"]):not(:where(.jsonutil-section-tab, .jsonutil-thread-item)):hover {
  background: var(--ess-wp-btn-bg-hover, #22223c) !important;
  border-color: var(--ess-wp-btn-border-hover, #4a4a70) !important;
  color: #fff !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) :where(button, .button, input[type="button"], input[type="submit"]):not(:where(.jsonutil-section-tab, .jsonutil-thread-item)):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ess-accent-soft, rgba(91, 124, 250, 0.14)) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) :where(button, .button, input[type="button"], input[type="submit"]):not(:where(.jsonutil-section-tab, .jsonutil-thread-item))[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .button.button-primary,
:is(#jsonutil-frontend, .jsonutil-modal) button.button-primary {
  background: linear-gradient(180deg, var(--ess-accent, #5b7cfa), var(--ess-accent-2, #3655cf)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(91, 124, 250, 0.35) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .button.button-primary:hover,
:is(#jsonutil-frontend, .jsonutil-modal) button.button-primary:hover {
  background: linear-gradient(180deg, var(--ess-accent-hover, #6f8cff), #4a6be8) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 16px rgba(91, 124, 250, 0.45) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-delete-import,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-delete-import:hover {
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fecaca !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-delete-import {
  background: rgba(248, 113, 113, 0.12) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-delete-import:hover {
  background: rgba(248, 113, 113, 0.2) !important;
  border-color: #f87171 !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-favorite-toggle:not(.is-favorite) {
  background: var(--ess-surface-2, #1e1e37) !important;
  border-color: var(--ess-border-strong, #3c3c66) !important;
  color: var(--ess-text, #e8e8f0) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-favorite-toggle:not(.is-favorite):hover {
  background: var(--ess-surface-3, #262646) !important;
  border-color: #4a4a7a !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-favorite-toggle.is-favorite,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill-warn,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill-quality-good,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill--highlight-upgraded,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-char-indicator--upgraded {
  background: rgba(251, 191, 36, 0.14) !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
  color: #fde68a !important;
}

/* ---- 7. Notices, status + pills ---- */

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-status {
  margin: 10px 0 14px !important;
  padding: 10px 13px !important;
  border: 1px solid rgba(91, 124, 250, 0.4) !important;
  border-radius: var(--ess-radius-sm, 10px) !important;
  background: var(--ess-accent-soft, rgba(91, 124, 250, 0.14)) !important;
  color: var(--ess-text, #e8e8f0) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-status--error {
  border-color: rgba(248, 113, 113, 0.45) !important;
  background: rgba(248, 113, 113, 0.12) !important;
  color: #fecaca !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-status--success {
  border-color: rgba(52, 211, 153, 0.45) !important;
  background: rgba(52, 211, 153, 0.12) !important;
  color: #a7f3d0 !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-file-limit-note {
  border: 1px solid var(--ess-border, #2b2b48) !important;
  border-radius: var(--ess-radius-xs, 7px) !important;
  background: #12121f !important;
  color: var(--ess-text-dim, rgba(232, 232, 240, 0.64)) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-file-limit-note--warn,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-name-generator-warnings {
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  border-radius: var(--ess-radius-xs, 7px) !important;
  background: rgba(251, 191, 36, 0.12) !important;
  color: #fde68a !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-library-status.is-in-library {
  border: 1px solid rgba(52, 211, 153, 0.45) !important;
  background: rgba(52, 211, 153, 0.12) !important;
  color: #a7f3d0 !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-library-status.is-failed {
  color: #fca5a5 !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill {
  border: 1px solid var(--ess-border, #2b2b48) !important;
  border-radius: 999px !important;
  background: var(--ess-surface-2, #1e1e37) !important;
  color: var(--ess-text-dim, rgba(232, 232, 240, 0.64)) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill-role,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill-quality-high {
  background: rgba(52, 211, 153, 0.14) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  color: #a7f3d0 !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill-occupation {
  background: rgba(157, 107, 255, 0.16) !important;
  border-color: rgba(157, 107, 255, 0.45) !important;
  color: #ddd0ff !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill-affiliation {
  background: rgba(56, 189, 248, 0.14) !important;
  border-color: rgba(56, 189, 248, 0.42) !important;
  color: #bae6fd !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill-alignment,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-char-indicator--add-on,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill--highlight-add-on {
  background: rgba(129, 140, 248, 0.16) !important;
  border-color: rgba(129, 140, 248, 0.45) !important;
  color: #dbe0ff !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill-abilities,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill-quality-low,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill-msg {
  background: rgba(248, 113, 113, 0.14) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fecaca !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-pill-msg {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}

/* ---- 8. Chat history + image tools ---- */

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-thread-item {
  border: 1px solid var(--ess-border-soft, #232340) !important;
  border-radius: var(--ess-radius-xs, 7px) !important;
  background: #12121f !important;
  color: var(--ess-text, #e8e8f0) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-thread-item:hover {
  background: var(--ess-surface-2, #1e1e37) !important;
  border-color: var(--ess-border-strong, #3c3c66) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-thread-item--active,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-thread-item--active:hover {
  background: linear-gradient(180deg, var(--ess-accent, #5b7cfa), var(--ess-accent-2, #3655cf)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-thread-item--active .jsonutil-count-badge {
  color: #fff !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-chat-sidebar h4,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-chat-meta,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-chat-page-jump-wrap,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-chat-pagination span {
  color: var(--ess-text-dim, rgba(232, 232, 240, 0.64)) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-msg--user,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-msg--narrator,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-msg--character {
  border: 1px solid var(--ess-border-soft, #232340) !important;
  border-radius: var(--ess-radius-sm, 10px) !important;
  background: #12121f !important;
  color: var(--ess-text, #e8e8f0) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-msg--user {
  background: var(--ess-accent-soft, rgba(91, 124, 250, 0.14)) !important;
  border-color: rgba(91, 124, 250, 0.4) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-msg__avatar,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonscan-chat-image img,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-avatar-figure img {
  background: #12121f !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonscan-chat-image--placeholder {
  border: 1px dashed var(--ess-border-strong, #3c3c66) !important;
  background: #12121f !important;
  color: var(--ess-text-dim, rgba(232, 232, 240, 0.64)) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-image-converter-dropzone {
  border: 2px dashed var(--ess-border-strong, #3c3c66) !important;
  border-radius: var(--ess-radius-sm, 10px) !important;
  background: #12121f !important;
  color: var(--ess-text-dim, rgba(232, 232, 240, 0.64)) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-image-converter-dropzone:hover,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-image-converter-dropzone:focus,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-image-converter-dropzone.is-dragover {
  border-color: var(--ess-accent, #5b7cfa) !important;
  background: var(--ess-accent-soft, rgba(91, 124, 250, 0.14)) !important;
  color: var(--ess-text, #e8e8f0) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-image-converter-dropzone p,
:is(#jsonutil-frontend, .jsonutil-modal) .jsonscan-chat-image__placeholder {
  color: var(--ess-text-dim, rgba(232, 232, 240, 0.64)) !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-image-cropper-wrap {
  border-radius: var(--ess-radius-sm, 10px) !important;
  background: #12121f !important;
}

:is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-image-converter-preview img {
  border: 1px solid var(--ess-border, #2b2b48) !important;
  border-radius: var(--ess-radius-xs, 7px) !important;
  background: #12121f !important;
}

/* ---- 9. Modal ---- */

.jsonutil-modal {
  background: rgba(6, 6, 14, 0.72) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.jsonutil-modal__inner {
  border: 1px solid var(--ess-border, #2b2b48) !important;
  border-radius: var(--ess-radius, 16px) !important;
  padding: 20px !important;
  background: var(--ess-card, #0e0e1c) !important;
  color: var(--ess-text, #e8e8f0) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6) !important;
}

.jsonutil-modal__inner h2,
.jsonutil-modal__inner h3,
.jsonutil-modal__inner h4,
.jsonutil-modal__inner p,
.jsonutil-modal__inner li,
.jsonutil-modal__inner dd,
.jsonutil-modal__inner dt {
  color: var(--ess-text, #e8e8f0) !important;
}

.jsonutil-modal__close {
  color: var(--ess-text-dim, rgba(232, 232, 240, 0.64)) !important;
}

.jsonutil-modal__close:hover {
  color: #fff !important;
}

.jsonutil-modal pre {
  border: 1px solid var(--ess-border, #2b2b48) !important;
  border-radius: var(--ess-radius-xs, 7px) !important;
  background: #12121f !important;
  color: var(--ess-text, #e8e8f0) !important;
  font-family: var(--ess-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace) !important;
}

.jsonutil-modal-section > strong {
  color: var(--ess-text-dim, rgba(232, 232, 240, 0.64)) !important;
}

/* ---- 10. Scrollbars ---- */

:is(#jsonutil-frontend, .jsonutil-modal) ::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

:is(#jsonutil-frontend, .jsonutil-modal) ::-webkit-scrollbar-track {
  background: transparent;
}

:is(#jsonutil-frontend, .jsonutil-modal) ::-webkit-scrollbar-thumb {
  background: var(--ess-border-strong, #3c3c66);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

:is(#jsonutil-frontend, .jsonutil-modal) ::-webkit-scrollbar-thumb:hover {
  background: #4a4a7a;
}

/* ---- 11. Narrow screens ---- */

@media (max-width: 640px) {
  html body:has(#jsonutil-frontend) {
    padding: 8px !important;
  }

  html body #jsonutil-frontend.jsonutil-frontend-wrap.ess-wp {
    padding: 6px 10px 18px !important;
    border-radius: 13px !important;
  }

  :is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-section-panel {
    padding: 13px !important;
  }

  :is(#jsonutil-frontend, .jsonutil-modal) > h2 {
    font-size: 1.25rem !important;
  }

  :is(#jsonutil-frontend, .jsonutil-modal) .jsonutil-sections-nav {
    padding: 7px 8px !important;
  }
}