/* ============================================================================
   DataNiva — glass Design panel for the Customization Studio.
   A foldable, movable glass wing that styles the WHOLE board or the SELECTED
   chart. Charts stay in the studio's own bottom Chart Library strip.
   Additive; remove the studio-design.* includes (and NIVA_DESIGN flag) to revert.
   ============================================================================ */
/* the glass Design panel replaces the old left settings menu */
#studio4 #s4leftmenus, #studio4 .s4-leftmenus{ display:none !important; }

#niva-design{
  position:absolute; top:10px; bottom:10px; z-index:60; width:290px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  background:linear-gradient(180deg,rgba(46,38,64,.62),rgba(20,15,31,.74));
  backdrop-filter:blur(20px) saturate(1.2); -webkit-backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 24px 70px -24px rgba(0,0,0,.7); text-shadow:0 1px 2px rgba(10,6,20,.5);
  transition:left .4s cubic-bezier(.2,.85,.3,1), width .4s cubic-bezier(.2,.85,.3,1);
  font-family:'Inter',sans-serif; color:#f4f0fc;
}
#niva-design.dz-dragging{ transition:none; }
#niva-design.dz-folded{ box-shadow:none; }   /* folded = slid off-screen; the launcher button is the handle */
.dz-content{ position:absolute; inset:0; display:flex; flex-direction:column; }

/* ✦ Design launcher — vertical tab on the middle of the left edge */
.dz-launch{ position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:61; display:none;
  border:1px solid rgba(255,255,255,.22); border-left:none; cursor:pointer; font-family:'Poppins',sans-serif; font-weight:700; font-size:.92rem; color:#3a2f52;
  background:linear-gradient(160deg,#e6c9a6,#d9a9c9); border-radius:0 16px 16px 0; padding:22px 11px; box-shadow:8px 0 26px -10px rgba(0,0,0,.55);
  writing-mode:vertical-rl; letter-spacing:.05em; }
.dz-launch.show{ display:inline-flex; align-items:center; gap:8px; }
.dz-launch:hover{ transform:translateY(-50%) translateX(2px); }

/* --- Tidy + Save & export live in the TOP TOOLBAR, never over the canvas --- */
#dz-toolcluster{ display:inline-flex; align-items:center; gap:8px; order:2; margin-left:8px; margin-bottom:2px; }
#studio4 #dz-toolcluster .s4-tidy,
#studio4 #dz-toolcluster #s4rightmenus{ position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; z-index:auto !important; width:auto !important; }
#studio4 .s4-rmenu-h{ border-right:1px solid var(--line) !important; border-radius:14px !important; }
/* the Save & export dropdown opens downward, aligned to the button's right edge */
#studio4 #dz-toolcluster .s4-rmenu.open .s4-rmenu-b{ right:0 !important; left:auto !important; bottom:auto !important; top:calc(100% + 8px) !important; margin:0 !important; }

/* the studio's own per-chart editor, relocated into the Design panel */
#studio4 #s4float:not(.dz-embed){ display:none !important; }
.dz-insphost{ margin-top:6px; }
#s4float.dz-embed{ display:block !important; position:static !important; inset:auto !important; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
  transform:none !important; width:100% !important; max-width:none !important; min-width:0 !important; max-height:none !important;
  background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; z-index:auto !important; }

.dz-head{ padding:14px 14px 11px; display:flex; align-items:center; gap:9px; color:#fff; border-bottom:1px solid rgba(255,255,255,.12); cursor:grab; }
#niva-design.dz-dragging .dz-head{ cursor:grabbing; }
.dz-head .ic{ width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,var(--st-accent,#9d8bc4),var(--k1,#7d92bd)); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.dz-head .t{ font-family:'Poppins',sans-serif; font-weight:700; font-size:.92rem; } .dz-head .s{ font-size:.62rem; color:rgba(244,240,252,.6); }
.dz-head .fold{ margin-left:auto; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:#fff; height:26px; padding:0 10px; border-radius:8px; cursor:pointer; font-size:.66rem; font-weight:700; flex:0 0 auto; }
.dz-head .fold:hover{ background:rgba(255,255,255,.2); }
.dz-body{ flex:1; overflow-y:auto; padding:12px 14px 18px; }
.dz-body::-webkit-scrollbar{ width:8px; } .dz-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:8px; }

.dz-scope{ display:flex; gap:3px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:3px; margin-bottom:13px; }
.dz-scope button{ flex:1; border:none; background:transparent; color:rgba(244,240,252,.6); font:inherit; font-size:.7rem; font-weight:700; padding:8px 5px; border-radius:9px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; }
.dz-scope button small{ font-weight:500; font-size:.54rem; } .dz-scope button.on{ background:linear-gradient(135deg,var(--st-accent,#9d8bc4),var(--k1,#7d92bd)); color:#fff; }

.dz-h{ font-family:'Poppins',sans-serif; font-weight:700; font-size:.72rem; color:#fff; margin:14px 2px 8px; }
.dz-h:first-of-type{ margin-top:2px; }
.dz-note{ font-size:.68rem; color:rgba(244,240,252,.6); background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.16); border-radius:10px; padding:12px; text-align:center; }
.dz-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.dz-sw{ aspect-ratio:1/1; border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,.2); transition:.14s; background-size:cover; }
.dz-sw:hover{ transform:scale(1.09); border-color:#fff; }
.dz-sw.none{ background:repeating-conic-gradient(rgba(255,255,255,.2) 0 25%, transparent 0 50%) 50%/10px 10px; }
.dz-pal{ display:flex; align-items:center; gap:9px; width:100%; cursor:pointer; margin-bottom:7px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:11px; padding:8px 10px; transition:.14s; }
.dz-pal:hover{ border-color:#fff; background:rgba(157,139,196,.16); }
.dz-dots{ display:flex; gap:4px; } .dz-dot{ width:16px; height:16px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.25) inset; }
.dz-pal-n{ font-size:.74rem; font-weight:600; }
.dz-list{ display:flex; flex-direction:column; gap:6px; }
.dz-opt{ border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:#f4f0fc; border-radius:10px; padding:9px 11px; text-align:left; cursor:pointer; font-size:.74rem; font-weight:600; transition:.14s; }
.dz-opt:hover{ border-color:#fff; background:rgba(157,139,196,.16); transform:translateX(2px); }
.dz-types{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.dz-type{ border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:#f4f0fc; border-radius:10px; padding:9px 6px; text-align:center; cursor:pointer; font-size:.7rem; font-weight:600; transition:.14s; }
.dz-type:hover{ border-color:#fff; background:rgba(157,139,196,.16); } .dz-type.on{ background:linear-gradient(135deg,var(--st-accent,#9d8bc4),var(--k1,#7d92bd)); border-color:transparent; color:#fff; }
.dz-danger{ color:#e0899a; border-color:rgba(224,137,154,.4); text-align:center; margin-top:10px; }
.dz-icons{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.dz-ic{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); border-radius:9px; color:#e9e3f5; cursor:pointer; transition:.14s; }
.dz-ic:hover{ border-color:#fff; background:rgba(157,139,196,.18); transform:translateY(-1px); }
.dz-ic svg{ width:16px; height:16px; }
.dz-toggle-row{ display:flex; align-items:center; justify-content:space-between; font-size:.74rem; font-weight:600; color:#f4f0fc; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); border-radius:10px; padding:10px 12px; }
.dz-toggle-row input{ width:16px; height:16px; accent-color:var(--st-accent,#9d8bc4); }
.dz-fld-name{ font-size:.66rem; color:rgba(244,240,252,.6); margin:0 0 10px; } .dz-fld-name b{ color:#fff; }
.dz-custom{ display:flex; align-items:center; gap:9px; margin-top:10px; font-size:.7rem; color:rgba(244,240,252,.8); }
.dz-custom input[type=color]{ width:30px; height:26px; border:1px solid rgba(255,255,255,.22); border-radius:7px; background:none; cursor:pointer; padding:0; }
.dz-toast{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); white-space:nowrap; background:rgba(16,12,24,.94); color:#fff; font-size:.68rem; font-weight:600; padding:6px 12px; border-radius:20px; border:1px solid rgba(255,255,255,.14); opacity:0; transition:.25s; pointer-events:none; z-index:6; }
.dz-toast.on{ opacity:1; }