/* MyBlinkie Studio: scoped styles that inherit MyBlinkie's main theme. */
.mb-studio {
  --studio-purple: var(--bright-purple, #7b2ec9);
  --studio-pink: var(--rose-pink, #d633a8);
  --studio-deep: var(--deep-plum, #2f1746);
  --studio-muted: var(--muted, #766184);
  --studio-line: var(--border, rgba(123,46,201,.22));
  --studio-shadow: var(--shadow-soft, 0 8px 18px rgba(63,45,79,.09));
  width: 100%; max-width: 1180px; margin: 0 auto 1.5rem;
  padding: 10px 0 14px; color: var(--text-dark, #3f2d4f);
  font-family: 'Open Sans', Arial, sans-serif; line-height: 1.55;
}
.mb-studio *, .mb-studio *::before, .mb-studio *::after { box-sizing: border-box; }
.mb-studio .studio-intro { text-align:center; margin: 0 0 18px; }
.mb-studio .studio-intro .eyebrow { font-size:12px; letter-spacing:.14em; font-weight:800; color:var(--studio-pink); }
.mb-studio h2 {
  width:100%; text-align:center; color:var(--studio-deep); font-size:clamp(17px,2.6vw,23px);
  margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--studio-line);
  border-radius:14px; box-shadow:var(--studio-shadow);
  background:linear-gradient(135deg,#fff,var(--light-purple,#efe0ff));
}
.mb-studio .studio-intro h2 { margin: 8px 0; }
.mb-studio .studio-intro p { margin:6px auto; max-width:780px; color:var(--studio-muted); }
.mb-studio .studio-panel {
  width:100%; max-width:none; margin:0; padding:clamp(12px,2.5vw,24px);
  background:rgba(255,255,255,.96); border:1px solid var(--studio-line);
  border-radius:20px; box-shadow:var(--studio-shadow); text-align:left;
}
.mb-studio .studio-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.85fr); gap:20px; align-items:start; }
.mb-studio .studio-controls { display:grid; gap:24px; min-width:0; }
.mb-studio .studio-controls section { min-width:0; }
.mb-studio .studio-controls .color-section { border-top:1px solid var(--studio-line); padding-top:20px; }
.mb-studio label { display:block; margin:14px 0 6px; color:var(--studio-deep); font-weight:700; text-align:left; }
.mb-studio input[type="text"], .mb-studio input[type="number"], .mb-studio select {
  width:100%; padding:10px 12px; color:var(--text-dark,#3f2d4f); background:#fff;
  border:1px solid rgba(123,46,201,.28); border-radius:12px;
  font:inherit; font-size:14px; box-shadow:inset 0 1px 2px #00000008;
}
.mb-studio input:focus-visible, .mb-studio select:focus-visible, .mb-studio button:focus-visible {
  outline:3px solid rgba(214,51,168,.28); outline-offset:2px;
}
.mb-studio .note, .mb-studio .small, .mb-studio .style-hint { color:var(--studio-muted); font-size:13px; }
.mb-studio .note.compact { margin:5px 0 12px; }
.mb-studio .size-custom { margin-top:10px; padding:10px; border-left:3px solid var(--studio-pink); background:#fbf6ff; border-radius:8px; }
.mb-studio .color-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }
.mb-studio .color-row label { margin:0; }
.mb-studio .color-row input[type="color"] { width:74px; height:41px; padding:2px; border:1px solid var(--studio-line); border-radius:8px; background:#fff; cursor:pointer; }
.mb-studio .rainbow-note { font-size:13px; padding:10px 12px; margin:10px 0; color:var(--studio-deep); background:#fff0fa; border-left:3px solid var(--studio-pink); border-radius:8px; }
.mb-studio .rainbow-note[hidden], .mb-studio #border-color-controls[hidden], .mb-studio #textcolor2-row[hidden], .mb-studio #custom-fields[hidden] { display:none!important; }
.mb-studio .style-hint { margin:9px 0; }
.mb-studio .style-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:12px 0 18px; }
.mb-studio button.style-tile {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-width:0;
  padding:10px 5px; border:2px solid rgba(123,46,201,.2); border-radius:12px;
  background:linear-gradient(180deg,#fff,#fbf6ff); color:var(--studio-deep);
  font:700 12px 'Open Sans',Arial,sans-serif; text-align:center;
  box-shadow:0 3px 9px #321f4810; cursor:pointer; text-transform:none;
}
.mb-studio button.style-tile:hover { border-color:var(--studio-pink); filter:none; }
.mb-studio button.style-tile[aria-pressed="true"] { border-color:var(--studio-pink); background:#fff0fa; box-shadow:0 0 0 2px #d633a824; }
.mb-studio .style-tile canvas { display:block; max-width:100%; width:150px; height:35px; }
.mb-studio .style-tile span { text-align:center; }
.mb-studio .preview-section {
  min-width:0; position:sticky; top:15px; padding:15px;
  border:1px solid rgba(123,46,201,.25); border-radius:16px;
  background:linear-gradient(180deg,#fbf6ff,#f4e9ff); box-shadow:var(--studio-shadow); z-index:3;
}
.mb-studio .preview-section h2 { margin:0 0 7px; }
.mb-studio .preview-section .note { margin:0 0 12px; text-align:center; }
.mb-studio .preview-stage {
  width:100%; min-height:120px; padding:12px; display:flex; justify-content:center; align-items:center;
  border-radius:12px; border:1px solid #54435f; background:#171320; overflow:hidden;
}
.mb-studio .blinkie-preview { position:relative; flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.mb-studio #studio-animated-preview { display:block; }
.mb-studio .small { text-align:center; margin:7px 0; }
.mb-studio button.primary, .mb-studio a.primary {
  display:block; width:100%; margin:12px 0 0; padding:12px 15px; border:0; border-radius:999px;
  background:linear-gradient(135deg,var(--studio-purple),var(--studio-pink));
  color:#fff; font:800 14px 'Open Sans',Arial,sans-serif; text-decoration:none;
  text-transform:none; text-align:center; cursor:pointer;
  box-shadow:0 8px 20px rgba(123,46,201,.2);
}
.mb-studio button.primary:hover, .mb-studio a.primary:hover { filter:brightness(1.07); }
.mb-studio .studio-footnote { text-align:center; font-size:14px; margin-top:17px; }
.mb-studio .result { text-align:center; }
.mb-studio .result .preview-stage { margin:18px 0; overflow:auto; }
.mb-studio .result .preview-stage img { display:block; width:auto; height:auto; max-width:100%; image-rendering:auto; }
.mb-studio .result a.download { width:auto; display:inline-block; margin:0; }
@media (max-width:1050px) {
  .mb-studio .studio-layout { grid-template-columns:1fr; }
  .mb-studio .preview-section { position:sticky; top:0; grid-row:1; }
  .mb-studio .preview-section .note { display:none; }
  .mb-studio .preview-section .preview-stage { min-height:65px; padding:6px; }
  .mb-studio .preview-section h2 { font-size:16px; padding:6px; }
  .mb-studio .preview-section button.primary { padding:9px; margin-top:6px; }
}
@media (max-width:650px) {
  .mb-studio .studio-panel { padding:12px; }
  .mb-studio .preview-section { padding:9px; }
  .mb-studio .style-gallery { gap:7px; }
  .mb-studio .style-tile canvas { width:100%; height:auto; aspect-ratio:150/35; }
}

/* Matching set controls: restricted to Studio */
.mb-studio #set-fields[hidden]{display:none!important}
.mb-studio .set-section{border-top:1px solid rgba(123,46,201,.22);padding-top:16px}
.mb-studio #setlabels{display:block;width:100%;min-height:135px;resize:vertical;padding:11px 13px;border:1px solid rgba(123,46,201,.35);border-radius:12px;background:#fff;color:#3f2d4f;font:inherit;line-height:1.5}
.mb-studio #setlabels:focus-visible{outline:3px solid rgba(214,51,168,.22);border-color:#d633a8}
.mb-studio .result-set{display:grid;grid-template-columns:1fr;gap:18px;margin:18px 0}
.mb-studio .result-item{background:#fff;border:1px solid rgba(123,46,201,.22);border-radius:14px;padding:16px;min-width:0}
.mb-studio .result-item h3{margin:0 0 12px;font-size:1rem}
.mb-studio .result-item .preview-stage{margin:10px 0;min-height:90px;overflow:auto}
.mb-studio .result-item .download{margin:8px auto}

/* Studio border style heading below shape selector */
.mb-studio .studio-border-heading{margin:20px 0 5px;font-size:1.02rem;font-weight:800;color:var(--deep-plum,#2f1746);text-align:left;border:0;background:transparent;box-shadow:none;padding:0;}