/* ===========================================================================
 * BMRPH Magnet Studio — embedded studio styles.
 *
 * Extracted from the internal magnet-studio.html <style> block. The :root
 * palette is remapped to the Blue Morpho brand:
 *   accent  → teal  #00a79d
 *   hover   → teal  #00827a
 *   base    → black #000
 *   surfaces/text → neutral greys / white
 * No yellow anywhere (the old --sel yellow selection is now brand teal).
 *
 * All rules are scoped under #bmrph-studio so the studio can be dropped onto a
 * full-screen WordPress template without colliding with theme/Elementor CSS.
 * ======================================================================== */

#bmrph-studio{
  --bg:#000;            /* page field (black) */
  --panel:#0e0f12;      /* control rail */
  --panel2:#16181d;     /* grouped cards */
  --line:#24272e;       /* hairlines / borders */
  --text:#f2f4f7;       /* primary text (near-white) */
  --muted:#9aa3b2;      /* secondary text */
  --accent:#00a79d;     /* BMRPH teal */
  --accent2:#00827a;    /* BMRPH teal — hover/active */
  --teal:#00a79d;       /* frame default (brand teal) */
  --warn:#c9d2de;       /* "note" text — neutral grey, no yellow */
  --sel:#00a79d;        /* selection highlight (brand teal, was yellow) */

  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  z-index:1;
}

#bmrph-studio *{box-sizing:border-box;}

#bmrph-studio header{
  display:flex;align-items:baseline;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--line);background:var(--panel);
  flex:0 0 auto;
}
#bmrph-studio header h1{font-size:16px;margin:0;font-weight:600;}
#bmrph-studio header .tag{color:var(--muted);font-size:12px;}

#bmrph-studio .wrap{
  display:grid;grid-template-columns:1fr 340px;
  flex:1 1 auto;min-height:0;
}

#bmrph-studio .stage{
  display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;
  background-color:#08090b;
  background-image:linear-gradient(45deg,#121317 25%,transparent 25%),linear-gradient(-45deg,#121317 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#121317 75%),linear-gradient(-45deg,transparent 75%,#121317 75%);
  background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;
}

#bmrph-studio canvas#bmrph-view{
  width:auto;height:100%;max-height:100%;max-width:100%;aspect-ratio:1/1;
  box-shadow:0 8px 40px rgba(0,0,0,.6);cursor:grab;
}
#bmrph-studio canvas#bmrph-view.dragging{cursor:grabbing;}

#bmrph-studio .panel{
  background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:16px;
}

#bmrph-studio .group{
  border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:14px;background:var(--panel2);
}
#bmrph-studio .group h2{
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px;
}

#bmrph-studio label{display:block;font-size:12px;color:var(--muted);margin:8px 0 4px;}

#bmrph-studio button{
  appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--text);
  border-radius:7px;padding:8px 10px;font-size:13px;cursor:pointer;width:100%;
}
#bmrph-studio button:hover{border-color:var(--accent);}
#bmrph-studio button.primary{background:var(--accent);border-color:var(--accent);color:#001a18;font-weight:600;}
#bmrph-studio button.primary:hover{background:var(--accent2);border-color:var(--accent2);}
#bmrph-studio button.on{background:var(--accent);border-color:var(--accent);color:#001a18;font-weight:600;}

#bmrph-studio .row{display:flex;gap:8px;}
#bmrph-studio .row>*{flex:1;}

#bmrph-studio input[type=range]{width:100%;accent-color:var(--accent);}
#bmrph-studio input[type=number],
#bmrph-studio select{
  width:100%;background:#08090d;border:1px solid var(--line);color:var(--text);
  border-radius:6px;padding:7px 8px;font-size:13px;
}
#bmrph-studio input[type=color]{
  width:100%;height:34px;background:#08090d;border:1px solid var(--line);border-radius:6px;
}

#bmrph-studio .check{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:13px;}
#bmrph-studio .check input{width:16px;height:16px;accent-color:var(--accent);}

#bmrph-studio .hint{font-size:11px;color:var(--muted);margin-top:6px;}
#bmrph-studio .note{font-size:11px;color:var(--warn);margin-top:6px;line-height:1.4;}
#bmrph-studio .readout{font-variant-numeric:tabular-nums;color:var(--text);float:right;}

#bmrph-studio a.file{display:none;}

#bmrph-studio .seg{display:flex;gap:0;border:1px solid var(--line);border-radius:7px;overflow:hidden;}
#bmrph-studio .seg button{border:0;border-radius:0;border-right:1px solid var(--line);}
#bmrph-studio .seg button:last-child{border-right:0;}