/* ===== DataNiva 5-min Dashboard — canvas look like the customization studio ===== */
#studio .panel-inner{ height:100vh; max-height:100vh; padding:0; overflow:hidden; }
.s5-root{ --sline:#332a45; height:100vh; display:flex; flex-direction:column; box-sizing:border-box;
  padding:66px clamp(14px,2.6vw,30px) 14px; color:#ece7f6; font-family:'Inter',sans-serif;
  background:radial-gradient(80% 60% at 12% -8%, rgba(157,139,196,.10), transparent 60%), #17141f; }
.s5-root h1,.s5-cell .s5-w-hd,.s5-kpi{ font-family:'Poppins',sans-serif; }

/* top chrome (dark) */
.s5-top{ position:relative; flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:0 4px 10px; }
.s5-viewsw{ display:inline-flex; gap:2px; padding:3px; background:rgba(28,20,40,.6); border:1px solid var(--sline); border-radius:999px; }
.s5-viewsw button{ border:0; background:transparent; color:#a89cbf; font:inherit; font-weight:700; font-size:.74rem; padding:6px 13px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.s5-viewsw button.on{ background:linear-gradient(135deg,#8a6fc0,#c9738f); color:#fff; }
.s5-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.s5-menuwrap{ position:relative; }
.s5-edit{ background:linear-gradient(135deg,#8a6fc0,#c9738f); color:#fff; }
.s5-pill{ border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:6px 13px; background:linear-gradient(135deg,#e0bb8f,#d9a9b6); color:#3a2a2a; font:inherit; font-weight:800; font-size:.72rem; letter-spacing:.02em; cursor:pointer; box-shadow:0 8px 20px -10px rgba(0,0,0,.5); transition:filter .15s; }
.s5-pill:hover{ filter:brightness(1.06); }
.s5-sizemenu{ position:absolute; top:42px; right:0; z-index:20; display:none; min-width:150px;
  background:linear-gradient(180deg,#231d31,#1a1526); border:1px solid var(--sline); border-radius:12px; padding:6px; box-shadow:0 24px 56px -26px rgba(0,0,0,.85); }
.s5-sizemenu.open{ display:block; }
.s5-sizemenu button{ display:block; width:100%; text-align:left; border:1px solid transparent; background:transparent; color:#ece7f6; font:inherit; font-size:.82rem; font-weight:600; padding:8px 11px; border-radius:8px; cursor:pointer; }
.s5-sizemenu button:hover{ background:rgba(255,255,255,.05); }
.s5-sizemenu button.on{ color:#e0bb8f; border-color:var(--sline); font-weight:800; }

/* stage = dark board frame (like the customization canvas frame) */
.s5-stage{ flex:1 1 auto; min-height:0; position:relative; border:1px solid var(--sline); border-radius:16px; overflow:hidden;
  background:#0e0a15; background-image:radial-gradient(60% 60% at 50% 30%, rgba(157,139,196,.07), transparent 70%); box-shadow:0 30px 80px -46px rgba(0,0,0,.85); }
.s5-view{ position:absolute; inset:0; display:flex; flex-direction:column; }
.s5-view.hide{ display:none; }

.s5-tabs{ flex:0 0 auto; display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:12px 14px; border-bottom:1px solid var(--sline); }
.s5-tabs::-webkit-scrollbar{ height:0; }
.s5-tab{ flex:0 0 auto; border:1px solid var(--sline); background:rgba(255,255,255,.03); color:#a89cbf; font:inherit; font-weight:700; font-size:.78rem; padding:8px 14px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.s5-tab:hover{ color:#ece7f6; }
.s5-tab.on{ background:linear-gradient(135deg,#8a6fc0,#c9738f); color:#fff; border-color:transparent; }

/* the light artboard (canvas), sized to the chosen aspect and centred */
.s5-boardwrap{ flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:10px; overflow:hidden; }
/* fixed-size artboard, scaled to fit (like the customization studio) */
.s5-board{ box-sizing:border-box; transform-origin:center center; flex:0 0 auto;
  background:#f6f4fb; background-image:linear-gradient(rgba(20,15,40,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,15,40,.05) 1px,transparent 1px); background-size:32px 32px;
  border-radius:8px; box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.10); padding:18px; display:flex; flex-direction:column; overflow:hidden; }

/* editable free-form canvas of real .s4-w widget tiles, fills the artboard */
.s5-canvas{ position:relative; flex:1 1 auto; min-height:0; width:100%; }
.s5-w{ min-height:0; overflow:hidden; }
.s5-w .s4-w-hd{ cursor:grab; }
.s5-w .s4-w-hd:active{ cursor:grabbing; }
.s5-w.s5-kpi .s4-w-body{ display:flex; align-items:center; justify-content:center; }
.s5-wdel{ margin-left:6px; border:0; background:transparent; color:rgba(255,255,255,.72); cursor:pointer; font-size:.78rem; line-height:1; padding:0 2px; opacity:0; transition:opacity .12s; }
.s5-w:hover .s5-wdel{ opacity:1; }
.s5-wdel:hover{ color:#fff; }
.s5-rz{ position:absolute; right:2px; bottom:2px; width:16px; height:16px; cursor:nwse-resize; border-radius:0 0 6px 0; opacity:0; transition:opacity .12s;
  background:linear-gradient(135deg,transparent 46%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.55) 60%,transparent 60%,transparent 72%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.55) 86%,transparent 86%); }
.s5-w:hover .s5-rz{ opacity:.9; }
.s5-hint{ flex:0 0 auto; text-align:center; font-size:.68rem; color:#6d6488; padding:7px 0 1px; letter-spacing:.01em; }
.s5-ghost{ background:linear-gradient(135deg,#efe7fb,#e7edfb) !important; color:#4a3f68 !important; }
.s5-empty{ margin:auto; color:#6f6689; font-style:italic; }