/* Shared background-module card presentation. State/open-close is JS-owned. */
.nstudio-page .nstudio-background-feature-card[data-nstudio-background-theme]{
  --nstudio-bg-head:#f6f7f7;
  --nstudio-bg-head-active:#eceeee;
  --nstudio-bg-border:#d8dddd;
  --nstudio-bg-border-active:#bfc8c5;
  --nstudio-bg-text:#46524e;
  background:#fff;
  border-color:var(--nstudio-bg-border);
}
.nstudio-page .nstudio-background-feature-card[data-nstudio-background-theme]>.nstudio-background-feature-head{
  background:var(--nstudio-bg-head);
  color:var(--nstudio-bg-text);
}
.nstudio-page .nstudio-background-feature-card[data-nstudio-background-theme].is-enabled{
  border-color:var(--nstudio-bg-border-active);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--nstudio-bg-border-active) 28%,transparent);
}
.nstudio-page .nstudio-background-feature-card[data-nstudio-background-theme].is-enabled>.nstudio-background-feature-head{
  background:var(--nstudio-bg-head-active);
  border-bottom:1px solid var(--nstudio-bg-border-active);
}
.nstudio-page .nstudio-background-feature-card[data-nstudio-background-theme="green"]{
  --nstudio-bg-head:#eef7f2;--nstudio-bg-head-active:#dceee5;--nstudio-bg-border:#cfe2d7;--nstudio-bg-border-active:#9fc4ae;--nstudio-bg-text:#416a56;
}
.nstudio-page .nstudio-background-feature-card[data-nstudio-background-theme="blue"]{
  --nstudio-bg-head:#eef5fb;--nstudio-bg-head-active:#dcebf6;--nstudio-bg-border:#d0dfeb;--nstudio-bg-border-active:#9ebfd8;--nstudio-bg-text:#3e6480;
}
.nstudio-page .nstudio-background-feature-card[data-nstudio-background-theme="yellow"]{
  --nstudio-bg-head:#fff8df;--nstudio-bg-head-active:#f6e9b8;--nstudio-bg-border:#eadfae;--nstudio-bg-border-active:#d2b85d;--nstudio-bg-text:#756225;
}
.nstudio-page .nstudio-background-feature-card[data-nstudio-background-theme="purple"]{
  --nstudio-bg-head:#f6f0fb;--nstudio-bg-head-active:#e9dcf4;--nstudio-bg-border:#e0d2eb;--nstudio-bg-border-active:#b99dce;--nstudio-bg-text:#66507b;
}

/* Shared background-card component.
 * This is the visual owner used by both the iframe and background Mirrors. */
.nstudio-page .nstudio-background-feature-card{
  overflow:hidden;
  border:1px solid #e0e6e3;
  border-radius:12px;
  background:#f7f9f8;
  box-shadow:none;
}
.nstudio-page .nstudio-background-feature-head{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:52px;
  padding:10px 12px;
  margin:0;
  border:0;
  font-size:13px;
  font-weight:700;
  color:#2d3935;
  cursor:pointer;
  user-select:none;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.nstudio-page .nstudio-background-feature-card:not([data-nstudio-background-theme])>.nstudio-background-feature-head{background:transparent;color:#4f5f59}
.nstudio-page .nstudio-background-feature-head input{width:17px;height:17px;margin:0;flex:0 0 auto}
.nstudio-page .nstudio-background-feature-icon{display:flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.72)}
.nstudio-page .nstudio-background-feature-icon i{margin:0}
.nstudio-page .nstudio-background-feature-copy{display:flex;flex-direction:column;gap:1px;min-width:0}
.nstudio-page .nstudio-background-feature-copy strong{font-size:12px}
.nstudio-page .nstudio-background-feature-copy small{font-size:12px;font-weight:400;color:#596761;line-height:1.5}
.nstudio-page .nstudio-background-option-section{padding:2px 12px 13px;background:#fff}
.nstudio-page .nstudio-background-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;font-size:13px;font-weight:800;color:#2d3935}
.nstudio-page .nstudio-background-settings-heading small{font-size:12px;font-weight:400;color:#596761;line-height:1.5}
.nstudio-page .nstudio-background-feature-card:not([data-nstudio-background-theme]).is-enabled{border-color:#8ea59d;box-shadow:0 0 0 1px rgba(89,117,106,.14)}
.nstudio-page .nstudio-background-feature-card:not([data-nstudio-background-theme]).is-enabled>.nstudio-background-feature-head{background:#edf5f1;border-bottom:1px solid #d8e5df}
.nstudio-page .nstudio-background-feature-card .nstudio-background-option-section{border-top:1px solid #e6ece8}
.nstudio-page .nstudio-background-feature-card:not([data-nstudio-background-theme]).is-enabled .nstudio-background-option-section.is-open{border-top-color:#d1dcd7}
.nstudio-page .nstudio-background-feature-card:not([data-nstudio-background-theme]){background:#fff;border:1px solid #e0e6e3}
.nstudio-page .nstudio-background-feature-card>.nstudio-background-option-section{background:#fff;border-top:1px solid #e4e9e6}

/* External background cards: readable without turning every control oversized. */
.nstudio-page.nstudio-ui-mirror-root .nstudio-background-feature-head{
  min-height:58px;
  padding:12px 14px;
  gap:10px;
  font-size:15px;
  color:#2f403a;
}
.nstudio-page.nstudio-ui-mirror-root .nstudio-background-feature-copy{gap:3px}
.nstudio-page.nstudio-ui-mirror-root .nstudio-background-feature-copy strong{
  font-size:15px;
  line-height:1.35;
  color:#2d4039;
}
.nstudio-page.nstudio-ui-mirror-root .nstudio-background-feature-copy small{
  font-size:14px;
  line-height:1.45;
  color:#4e5f59;
}
.nstudio-page.nstudio-ui-mirror-root .nstudio-background-option-section{
  padding:6px 14px 16px;
}
/* "ぼかし設定 / 文様設定 / 背景デザイン" repeats information already
 * present in the card heading on the embedded page. */
.nstudio-page.nstudio-ui-mirror-root .nstudio-background-settings-heading{display:none}