.wp-block-nyaa-gradflow.nyaa-gradflow,
.nyaa-gradflow-editor {
  --nyaa-gradflow-min-height: 320px;
  --nyaa-gradflow-radius: 0px;
  --nyaa-gradflow-overlay-opacity: 0;
  --nyaa-gradflow-color-1: #e2624b;
  --nyaa-gradflow-color-2: #ffffff;
  --nyaa-gradflow-color-3: #1e229f;
  position: relative;
  min-height: var(--nyaa-gradflow-min-height);
  border-radius: var(--nyaa-gradflow-radius);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 140% at 12% 12%, color-mix(in srgb, var(--nyaa-gradflow-color-1) 85%, transparent), transparent 58%),
    radial-gradient(130% 130% at 88% 18%, color-mix(in srgb, var(--nyaa-gradflow-color-2) 86%, transparent), transparent 52%),
    radial-gradient(150% 150% at 52% 96%, color-mix(in srgb, var(--nyaa-gradflow-color-3) 90%, #000), #070d2b 72%);
}

.nyaa-gradflow__mount {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.nyaa-gradflow__mount canvas,
.nyaa-gradflow__canvas-element {
  display: block;
  width: 100%;
  height: 100%;
}

.wp-block-nyaa-gradflow.nyaa-gradflow.is-image .nyaa-gradflow__mount {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.wp-block-nyaa-gradflow.nyaa-gradflow.is-image .nyaa-gradflow__mount canvas,
.wp-block-nyaa-gradflow.nyaa-gradflow.is-image .nyaa-gradflow__canvas-element {
  display: none;
}

.nyaa-gradflow__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, var(--nyaa-gradflow-overlay-opacity)) 0%, rgba(0, 0, 0, calc(var(--nyaa-gradflow-overlay-opacity) * 0.75)) 100%);
}

.nyaa-gradflow__editor-note {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #ffffff;
  background: rgba(7, 13, 31, 0.4);
  font-size: 12px;
  line-height: 1.4;
  backdrop-filter: blur(2px);
}

.wp-block-nyaa-gradflow.nyaa-gradflow.is-fallback {
  background: #000;
}

.wp-block-nyaa-gradflow.nyaa-gradflow.is-fallback .nyaa-gradflow__mount {
  opacity: 0;
}

/* Full-screen background mode */
body:not(.wp-admin) .wp-block-post-content > .wp-block-nyaa-gradflow.nyaa-gradflow:not(.nyaa-gradflow--global),
body:not(.wp-admin) .entry-content > .wp-block-nyaa-gradflow.nyaa-gradflow:not(.nyaa-gradflow--global) {
  display: none !important;
}

/* Full-screen background mode */
body.has-nyaa-gradflow-bg {
  background: #f4eff7 !important;
}

body.has-nyaa-gradflow-bg .wp-site-blocks {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

body.has-nyaa-gradflow-bg .wp-site-blocks > * {
  position: relative;
  z-index: 2;
}

body.has-nyaa-gradflow-bg .wp-block-post-content > .wp-block-nyaa-gradflow.nyaa-gradflow:not(.nyaa-gradflow--global),
body.has-nyaa-gradflow-bg .entry-content > .wp-block-nyaa-gradflow.nyaa-gradflow:not(.nyaa-gradflow--global) {
  display: none !important;
}

body.has-nyaa-gradflow-bg .wp-block-nyaa-gradflow.nyaa-gradflow--global {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  max-width: none !important;
  margin: 0 !important;
  margin-inline: 0 !important;
  border-radius: 0;
  z-index: 0;
  pointer-events: none;
}

body.has-nyaa-gradflow-bg .wp-block-nyaa-gradflow.nyaa-gradflow--global.is-fallback {
  background: #000 !important;
}


.wp-block-nyaa-gradflow.nyaa-gradflow--preview {
  position: relative;
}

.settings_page_nyaa-gradflow-settings .nyaa-gradflow-settings-preview code {
  display: inline-block;
  margin-left: 10px;
  min-width: 78px;
}

.settings_page_nyaa-gradflow-settings .nyaa-gradflow-target-filters,
.settings_page_nyaa-gradflow-settings .nyaa-gradflow-page-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 16px 0;
}

.settings_page_nyaa-gradflow-settings .nyaa-gradflow-target-filters label,
.settings_page_nyaa-gradflow-settings .nyaa-gradflow-page-filters label {
  font-weight: 600;
}

.nyaa-gradflow-image-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#side-sortables .nyaa-gradflow-image-control {
  display: block;
}

#side-sortables .nyaa-gradflow-image-control .button {
  margin-top: 6px;
}