:root{--wjs-card:#ffffff8c;--wjs-border:1px solid #1e2a45;--wjs-grad:linear-gradient(135deg,#d79c9c,#9333ea);--wjs-muted:#9aa7bd;--wjs-text:#f4513f;--wjs-r:12px;--wjs-ctl:34px}

/* make everything inside host use border-box to avoid unexpected overflow */
#wjs-host, #wjs-host *{box-sizing:border-box}

/* container wrap for studio (scoped to #wjs-host to avoid collisions) */
#wjs-host .wjs-wrap{max-width:1200px;margin:12px auto;padding:8px 12px;display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));font-family:Poppins,system-ui,-apple-system,"Noto Sans Devanagari",Mukta,Hind,sans-serif;color:var(--wjs-text);font-size:clamp(12px,1.6vw,13.5px);line-height:1.45}

/* cards */
#wjs-host .wjs-card{background:var(--wjs-card);border:1px solid transparent;border-radius:10px;padding:10px;background:linear-gradient(var(--wjs-card),var(--wjs-card)) padding-box,var(--wjs-grad) border-box;box-shadow:0 6px 16px rgba(0,0,0,.12);overflow:hidden}

/* help full width inside host */
#wjs-host .wjs-wrap > .wjs-help{grid-column:1 / -1 !important}

/* rows and small utilities */
#wjs-host .wjs-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#wjs-host .wjs-sep{height:1px;background:var(--wjs-grad);margin:10px 0}
#wjs-host .wjs-muted{color:var(--wjs-muted);font-size:11px}

/* canvas area wrapper - keep relative and prevent overflow on small screens */
#wjs-host .wjs-canvasWrap{position:relative;padding:8px;background:linear-gradient(180deg,#fff,#fff0);border-radius:8px;overflow:hidden}

/* responsive canvas: keep aspect ratio but ensure it never exceeds container width */
#wjs-host #wjs-canvas{width:100%;max-width:100%;height:auto;display:block;border:var(--wjs-border);border-radius:10px;background:#ffffff;margin:0 auto;touch-action:none;box-shadow:0 4px 14px rgba(0,0,0,.06)}

/* copy of earlier styles kept but scoped to #wjs-host */
#wjs-host .wjs-btn{background:#d34f9d;color:#fff;border:0;border-radius:8px;padding:6px 9px;min-height:30px;font-weight:700;cursor:pointer;font-size:12px}
#wjs-host .wjs-sec{background:#c54040}
#wjs-host .wjs-danger{background:#ef4444}

/* strips */
#wjs-host .wjs-strip-wrap{display:flex;flex-direction:column;gap:8px}
#wjs-host .wjs-strip-head{display:flex;align-items:center;justify-content:space-between}
#wjs-host .wjs-strip{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:6px;border:var(--wjs-border);border-radius:8px;background:#0c1324}
#wjs-host .wjs-strip .item{flex:0 0 auto;width:120px;height:78px;object-fit:cover;border-radius:8px;border:var(--wjs-border);cursor:pointer;background:#0e1424;scroll-snap-align:start}

/* layers panel */
#wjs-host .wjs-layerLine{display:flex;flex-direction:column;gap:6px;border:var(--wjs-border);background:#0b162b;border-radius:8px;padding:6px 7px;margin-top:6px;word-break:break-word}
#wjs-host .wjs-layerHead{display:flex;align-items:center;gap:6px;min-height:28px}
#wjs-host .wjs-handle{cursor:grab;user-select:none;font-size:14px;line-height:1}
#wjs-host .wjs-layerTitle{flex:1 1 auto;min-width:0;font-weight:700;font-size:12.5px;color:#dbe4ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wjs-host .wjs-headRight{margin-left:auto;display:flex;gap:6px;align-items:center}
#wjs-host .wjs-btnIcon{appearance:none;cursor:pointer;background:#16233d;color:#c9d7ff;border-radius:7px;min-width:34px;min-height:26px;padding:0 6px;font-weight:700;line-height:26px;font-size:12px}
#wjs-host .wjs-btnClose{width:26px;height:26px;border-radius:999px;border:0;background:#ef4444;color:#fff;font-weight:900;font-size:14px}
#wjs-host .wjs-layerLine.active{outline:3px solid #d2d500}
#wjs-host .wjs-layerLine.locked{opacity:.92}
#wjs-host .wjs-layerLine.locked .wjs-layerTitle::after{content:" 🔒";color:#dd2929;font-weight:700;font-size:11px}
#wjs-host .wjs-chip{display:inline-flex;align-items:center;gap:6px;padding:0 6px;height:26px;background:#0f1b32;border:var(--wjs-border);border-radius:999px;color:#dbe4ff;font-size:12px}
#wjs-host .wjs-chip input{accent-color:#60a5fa;height:22px}

/* text panel */
#wjs-host .panel{display:grid;grid-template-columns:1fr;gap:8px}
#wjs-host .tbox{width:100%;min-height:140px;font-size:16px;line-height:1.45;border-radius:9px;padding:8px}
#wjs-host .panelControls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#wjs-host .panelControls .ctrl{flex:1 1 150px;min-width:140px}
#wjs-host .panelControls label{display:block;font-size:12px;color:#9aa7bd;margin-bottom:4px}

/* compact editor */
#wjs-host .wjs-panel{display:grid;grid-template-columns:1fr;gap:8px;overflow:hidden}
#wjs-host .wjs-tbox{width:100%;max-width:100%;min-height:130px;resize:vertical;box-sizing:border-box;padding:8px;border-radius:8px;border:1px solid #1e2a45;background:#ecf0f8;color:#535353;line-height:1.4}
#wjs-host .wjs-panelControls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#wjs-host .wjs-panelControls .wjs-ctrl{flex:1 1 140px;min-width:140px}

/* small helper to visually indicate hidden layers in panel */
#wjs-host .wjs-layerLine .wjs-btnIcon[title="Hidden"], #wjs-host .wjs-layerLine[aria-hidden="true"]{opacity:.6;filter:grayscale(.4)}

/* make sure wjs-host not cause horizontal scroll on small screens */
#page, body, html { -webkit-text-size-adjust:100%; -ms-overflow-style:auto; }

/* host layout: prevent full-bleed overflow on very small screens */
#wjs-host{padding:8px;overflow:hidden}
#wjs-host .wjs-wrap{padding:6px;gap:8px}

/* Responsive adjustments */
/* tablet and below: 2 columns */
@media (max-width:1100px){
  #wjs-host .wjs-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
/* make strip items slightly larger when grid narrows */
  #wjs-host .wjs-strip .item{width:calc((100% - 24px)/3);height:86px}
}

/* mobile: single column, make canvas and panels full width and reduce paddings */
@media (max-width:740px){
  #wjs-host .wjs-wrap{grid-template-columns:1fr;padding:6px;gap:10px}
  #wjs-host .wjs-card{padding:8px;border-radius:9px}
  #wjs-host .wjs-strip .item{width:92px;height:72px}
  /* reduce margins to avoid double horizontal scroll */
  #wjs-host .wjs-canvasWrap{padding:6px;border-radius:8px}
  /* ensure bottom nav (if absolute) doesn't cover canvas controls - add bottom padding */
  #wjs-host .wjs-card:first-of-type{padding-bottom:72px}
  /* layers box should scroll internally if too tall */
  #wjs-host #wjs-layersBox{max-height:36vh;overflow:auto;padding-right:6px}
  /* ensure final download row remains visible and not cut */
  #wjs-host .wjs-row{flex-wrap:wrap}
}

/* safety: if any parent sets negative margin via 50vw trick, limit studio width and center it */
#wjs-host .wjs-wrap{max-width:1080px;margin-left:auto;margin-right:auto}

/* keep inputs and selects full width inside controls to avoid overflow */
#wjs-host select, #wjs-host input[type="color"], #wjs-host input[type="range"], #wjs-host input[type="number"]{max-width:100%}

/* small accessibility and touch targets */
#wjs-host .wjs-btnIcon, #wjs-host .wjs-btnClose{min-width:36px;min-height:36px;padding:6px;border-radius:8px}

/* final: ensure studio doesn't inherit global body overflow that causes horizontal scroll */
/* compact opacity number control: hide native spinners and make input narrow (scoped to host) */
html,body{overflow-x:hidden}