:root{
  --bg:#08050f;
  --panel:#100919;
  --panel-2:#0c0713;
  --panel-head:#130b20;
  --line:#30203f;
  --line-soft:#281a37;
  --text:#f8f4ff;
  --muted:#b89aca;
  --accent:#c05cff;
  --accent-2:#e13dcc;
  --control:#120b1d;
  --control-h:38px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 78% 0,rgba(91,26,169,.20),transparent 34%),linear-gradient(180deg,#090611,#050309 72%);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:14px}
body{padding:14px}
button,select,input,textarea{font:inherit;color:var(--text);background:var(--control);border:1px solid #44305b;border-radius:6px;outline:none}
button,select,input:not([type="checkbox"]):not([type="range"]):not([type="color"]),textarea,.upload-btn{min-height:var(--control-h)}
button{padding:7px 11px;font-weight:800;cursor:pointer}
button:hover,.upload-btn:hover,select:hover,input:hover,textarea:hover{border-color:#8d55bc}
button.primary{background:linear-gradient(135deg,#7b28d6,#d337cc);border-color:#b56df5}
button.full{width:100%}
select,input,textarea{width:100%;padding:7px 10px}
input[type=color]{width:100%;height:36px;padding:3px}
input[type=checkbox]{width:auto;accent-color:#a13fe7}
textarea{resize:vertical}
.hidden{display:none!important}.mt{margin-top:8px}.mt6{margin-top:6px}
.wrap{width:min(1720px,100%);margin:0 auto}

/* Site-style header */
.top-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:13px 16px;margin-bottom:12px;border:1px solid var(--line);background:linear-gradient(135deg,#0d0715,#130a20);border-radius:8px}
.brand-copy{min-width:0}.eyebrow,.site-title,.panel-title,.dock-header,.preview-title,.label{font-family:var(--c4tm30w-site-font,Rajdhani,sans-serif)}
.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#da62ff;font-weight:800}
.site-title{font-size:34px;line-height:1;margin:2px 0 3px;text-transform:uppercase;letter-spacing:.02em}.site-title span{color:#cf64ff}.brand-copy p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.4}
.header-badge{flex:none;border:1px solid #4c2f69;border-radius:999px;padding:7px 10px;font-size:11px;color:#d9b4f4}

/* Main two-column work area */
.dashboard-grid{display:grid;grid-template-columns:minmax(500px,550px) minmax(0,1fr);grid-template-areas:"p1 p3" "p2 p3" "bottom bottom";gap:12px;align-items:start}
.panel-1{grid-area:p1}.panel-2{grid-area:p2}.panel-3{grid-area:p3}
.panel{min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}
.panel-title{display:flex;align-items:center;gap:8px;margin:0;padding:9px 12px;background:var(--panel-head);border-bottom:1px solid var(--line-soft);font-size:19px;line-height:1.1;letter-spacing:.045em;text-transform:uppercase;color:#c765ff}
.panel-no{display:grid;place-items:center;width:23px;height:23px;flex:none;border:1px solid #785098;border-radius:50%;font-size:12px;color:#fff}
.panel-body{padding:11px 12px}
.label{display:block;margin:0 0 4px;color:#ead8f7;font-size:11px;font-weight:900;letter-spacing:.065em;text-transform:uppercase;line-height:1.15}
.small{color:var(--muted);font-size:11.5px;line-height:1.4}.muted-inline{color:var(--muted)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.triple{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:8px}
.option-item,.upload-btn{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid #3a2750;border-radius:6px;background:#160d22;font-size:12px}
.upload-btn{justify-content:center;font-weight:800;cursor:pointer;text-align:center}

/* Panel 2 */
.shape-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:10px}.shape-column{min-width:0}
.colour-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.colour-grid input[type=color]{height:36px}
.font-compact{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:7px;align-items:end}.font-grow{min-width:0}.font-upload{height:var(--control-h);line-height:1.1}
.texture-card-wide{padding:8px 9px;border:1px solid var(--line-soft);border-radius:7px;background:#140b20}
.texture-main{display:grid;grid-template-columns:minmax(0,1.35fr) 118px minmax(105px,.75fr);grid-template-areas:"copy upload status";gap:7px;align-items:center}.texture-copy{grid-area:copy}.texture-upload{grid-area:upload}.texture-status{grid-area:status;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;align-items:center;min-width:0}.texture-status .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-btn{min-height:30px;height:30px;padding:4px 8px}

/* Preview/editor */
.panel3-wide-layout{display:grid;gap:8px;padding:10px}.preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:5px}.preview-title{font-size:16px;font-weight:900;text-transform:uppercase}.preview-meta{font-size:11px;color:#c7a3dc}
.canvas-host{height:365px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:1px solid #2b1d3a;border-radius:7px;background:#030207}
.stage-viewport{position:relative;display:block}.stage{position:absolute;left:0;top:0;overflow:visible;transform-origin:top left;background:transparent}.canvas-tip{margin-top:5px;font-size:11px;color:#9d79b8}
.editor-controls-row{display:grid;grid-template-columns:245px minmax(0,1fr);gap:8px;align-items:start}
.editor-card{min-width:0;border:1px solid #2b1d3a;border-radius:7px;background:#0b0712;padding:9px}.dock-header{margin:0 0 6px;color:#c862ff;font-size:16px;text-transform:uppercase}
.selected-control-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.selected-wide{grid-column:span 2}.selected-control-grid textarea{min-height:38px}.selected-control-grid .danger{grid-column:1/-1}
.text-control-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.text-control-group{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:6px;align-items:center;min-height:42px;padding:5px;border:1px solid #2d1d3d;border-radius:6px;background:#130b1d}.text-control-group.has-text-field{grid-template-columns:minmax(108px,.9fr) minmax(90px,1fr) 36px}.text-control-group .option-item{min-height:30px;padding:4px 7px;background:transparent;border:0}.text-control-group input[type=text]{height:30px;min-height:30px;padding:4px 7px;font-size:12px}.compact-colour,.compact-colour input[type=color]{width:36px;min-width:36px}.compact-colour input[type=color]{height:30px;min-height:30px;padding:2px}

/* Canvas elements */
.widget-root{position:absolute;left:0;top:0;overflow:hidden}.widget-bg{position:absolute;inset:0;z-index:0;pointer-events:none}.editor-el{position:absolute;min-width:10px;min-height:10px;user-select:none;touch-action:none}.editor-el.selected{outline:1px dashed #fff;outline-offset:4px}.handle{position:absolute;width:10px;height:10px;right:-5px;bottom:-5px;border-radius:50%;background:#fff;border:2px solid #8d43e0;display:none}.editor-el.selected>.handle{display:block}.text-el{display:flex;align-items:center;overflow:visible!important;white-space:pre!important;word-break:normal;padding:2px;line-height:1;cursor:move}.frame-inner{position:relative;width:100%;height:100%;overflow:hidden}.frame-inner img,.frame-inner video{width:100%;height:100%;display:block;object-fit:cover}.placeholder{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.025),rgba(255,255,255,.025) 8px,rgba(255,255,255,.045) 8px,rgba(255,255,255,.045) 16px)}
.progress-shell{position:absolute;overflow:visible;z-index:20}.progress-empty,.progress-fill-wrap,.progress-fill,.progress-outline{position:absolute;inset:0}.progress-empty{z-index:0}.progress-fill-wrap{z-index:1;overflow:hidden}.progress-outline{z-index:3;pointer-events:none}.progress-fill{overflow:hidden}.masked{mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:contain;-webkit-mask-size:contain}.svg-progress{width:100%;height:100%;display:block;overflow:visible}.svg-progress path{vector-effect:non-scaling-stroke}

/* Bottom row: exact shared left/right edges, no nested dead space */
.bottom-grid{grid-area:bottom;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.bottom-grid>.panel{width:100%;height:100%}.panel-4,.panel-5{display:flex;flex-direction:column}.panel-4>.panel-body,.panel-5>.panel-body{flex:1}

/* Panel 4 */
.panel4-body{display:grid;grid-template-rows:auto 1fr;gap:8px}
.background-strip{display:grid;grid-template-columns:170px 132px minmax(0,1fr);gap:7px;align-items:end;padding:8px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel-2)}.background-note{align-self:center}
.asset-section{display:grid;grid-template-rows:auto auto auto;gap:7px;padding:8px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel-2)}.asset-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.asset-section-head .small{text-align:right}.asset-button-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.asset-button-grid>*{width:100%;min-width:0;min-height:36px;padding:5px 7px;font-size:12px;line-height:1.15}.asset-footnote{margin:0;font-size:10.8px}

/* Panel 5: content deliberately fills the matching card without blank cavity */
.export-panel-body{display:grid;grid-template-rows:auto auto auto 1fr;gap:8px;min-height:0}
.export-top-row{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:8px}.export-control,.export-port{min-width:0}.export-rights{margin:0;min-height:42px}.export-help{padding:8px 9px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel-2)}
.export-actions-clean{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-self:end}.export-actions-clean button{width:100%;height:40px;margin:0}.export-actions-clean button:only-child{grid-column:1/-1}

.maker-footer{padding:10px 0 2px;text-align:center;color:#725b8d;font-family:var(--c4tm30w-site-font,Rajdhani,sans-serif);font-size:11px}

@media(max-width:1250px){
  .dashboard-grid{grid-template-columns:minmax(460px,500px) minmax(0,1fr)}
  .texture-main{grid-template-columns:minmax(0,1fr) 115px;grid-template-areas:"copy upload" "status status"}
  .asset-button-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1050px){
  .dashboard-grid{grid-template-columns:1fr;grid-template-areas:"p1" "p2" "p3" "bottom"}
  .bottom-grid{grid-template-columns:1fr}
  .bottom-grid>.panel{height:auto}
  .editor-controls-row{grid-template-columns:1fr}
}
@media(max-width:760px){
  body{padding:8px}.top-bar{align-items:flex-start}.header-badge{display:none}.site-title{font-size:28px}
  .shape-grid,.row,.triple,.text-control-strip,.export-top-row{grid-template-columns:1fr}.font-compact{grid-template-columns:1fr}.colour-grid{grid-template-columns:repeat(3,1fr)}
  .panel3-wide-layout .canvas-host{height:320px}.selected-control-grid{grid-template-columns:1fr 1fr}.selected-wide{grid-column:1/-1}
  .text-control-group.has-text-field{grid-template-columns:minmax(105px,.85fr) minmax(90px,1fr) 36px}
  .background-strip{grid-template-columns:1fr}.asset-button-grid{grid-template-columns:1fr 1fr}.export-actions-clean{grid-template-columns:1fr}
}


/* v19 — annotated layout correction
   - Live Creation stretches to the same bottom edge as panels 1+2.
   - No artificial dead space in the bottom cards.
   - Background help text gets the wide column instead of the hidden colour slot.
   - Export controls form one compact aligned block. */

.dashboard-grid{
  align-items:stretch;
}
.panel-3{
  display:flex;
  flex-direction:column;
  height:100%;
}
.panel-3>.panel3-wide-layout{
  flex:1;
  min-height:0;
  grid-template-rows:minmax(0,1fr) auto;
}
.canvas-area{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.canvas-host{
  flex:1;
  height:auto;
  min-height:410px;
}
.editor-controls-row{
  align-self:stretch;
}

/* Bottom row: same top line and column widths, but each card only uses the height it needs. */
.bottom-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  align-items:start;
}
.bottom-grid>.panel{
  width:100%;
  height:auto;
  min-height:0;
}
.panel-4>.panel-body,
.panel-5>.panel-body{
  height:auto;
  flex:initial;
}

/* Panel 4 — keep the explanation in the wide right-hand space. */
.panel4-body{
  display:grid;
  grid-template-rows:auto auto;
  gap:8px;
}
.background-strip{
  display:grid;
  grid-template-columns:170px 120px minmax(0,1fr);
  grid-template-areas:"type colour note";
  gap:8px;
  align-items:center;
  padding:9px;
}
.background-strip>.bg-control:first-child{grid-area:type}
#bgSolidRow{grid-area:colour}
.background-note{
  grid-area:note;
  min-width:0;
  max-width:none;
  align-self:center;
  line-height:1.35;
}
.asset-section{
  height:auto;
  grid-template-rows:auto auto auto;
  gap:7px;
}

/* Panel 5 — compact two-row layout. No empty cavity. */
.export-panel-body{
  display:grid;
  grid-template-columns:minmax(260px,.9fr) minmax(340px,1.2fr) minmax(250px,.9fr);
  grid-template-areas:
    "mode rights action"
    "help help help";
  gap:8px 10px;
  align-items:center;
  padding:10px 12px;
  min-height:0;
}
.export-top-row{
  grid-area:mode;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:7px;
  align-items:end;
  min-width:0;
}
.export-top-row:has(.export-port:not(.hidden)){
  grid-template-columns:minmax(0,1fr) 150px;
}
.export-rights{
  grid-area:rights;
  margin:0;
  min-height:38px;
  height:100%;
  padding:7px 9px;
}
.export-help{
  grid-area:help;
  margin:0;
  min-height:0;
  padding:7px 9px;
  line-height:1.35;
}
.export-actions-clean{
  grid-area:action;
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  align-self:stretch;
  align-content:center;
}
.export-actions-clean button{
  width:100%;
  min-height:38px;
  height:38px;
  margin:0;
}

/* Keep all bottom-row inner borders and edges visually consistent. */
.background-strip,
.asset-section,
.export-help,
.export-rights{
  border-color:#2e1f3e;
  border-radius:6px;
}

@media(max-width:1250px){
  .canvas-host{min-height:390px}
  .export-panel-body{
    grid-template-columns:minmax(230px,.8fr) minmax(300px,1.1fr) minmax(220px,.8fr);
  }
}
@media(max-width:1050px){
  .panel-3{height:auto}
  .panel-3>.panel3-wide-layout{display:grid;grid-template-rows:auto auto}
  .canvas-host{height:340px;min-height:340px;flex:none}
  .bottom-grid{grid-template-columns:1fr}
  .export-panel-body{
    grid-template-columns:1fr;
    grid-template-areas:"mode" "rights" "help" "action";
  }
}
@media(max-width:760px){
  .background-strip{
    grid-template-columns:1fr;
    grid-template-areas:"type" "colour" "note";
  }
  .canvas-host{height:310px;min-height:310px}
}

/* v20 — spacing / visibility / export polish
   Match the site's compact card rhythm: no squeezed labels, no dead cavities,
   aligned controls, and predictable single-line desktop labels. */

/* Give Panel 2 enough room; reclaim a little width from the preview side. */
.dashboard-grid{
  grid-template-columns:minmax(560px,600px) minmax(0,1fr);
  gap:12px;
}

/* Keep live creation substantial but not oversized. */
.panel-3>.panel3-wide-layout{
  grid-template-rows:auto auto;
}
.canvas-host{
  height:338px;
  min-height:338px;
  flex:none;
}

/* ---------- Panel 2: labels stay on one line ---------- */
.shape-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:12px;
}
.colour-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.colour-grid .label,
.font-compact .label,
.shape-column>.label,
.shape-column .row .label{
  white-space:nowrap;
}
.colour-grid .label{
  font-size:10.5px;
  letter-spacing:.045em;
}
.font-compact{
  grid-template-columns:minmax(0,1fr) 132px;
  gap:8px;
}
.texture-card-wide{
  margin-top:9px;
}
.texture-main{
  grid-template-columns:minmax(0,1fr) 124px minmax(120px,.78fr);
  gap:8px;
}

/* ---------- Live editor: compact, even, no bulky cards ---------- */
.editor-controls-row{
  grid-template-columns:220px minmax(0,1fr);
  gap:10px;
}
.editor-card{
  padding:8px 9px;
}
.visibility-editor-card{
  overflow:hidden;
}
.text-control-strip{
  display:grid;
  grid-template-columns:minmax(150px,.82fr) minmax(175px,.95fr) minmax(235px,1.22fr) minmax(245px,1.28fr);
  gap:7px;
  align-items:stretch;
}
.text-control-group,
.text-control-group.has-text-field{
  min-width:0;
  min-height:38px;
  height:38px;
  padding:4px 5px;
  border:1px solid #2d1d3d;
  border-radius:6px;
  background:#120a1b;
  align-items:center;
}
.text-control-group{
  grid-template-columns:minmax(0,1fr) 32px;
}
.text-control-group.has-text-field{
  grid-template-columns:minmax(92px,.86fr) minmax(76px,1fr) 32px;
}
.text-control-group .option-item{
  min-width:0;
  min-height:28px;
  height:28px;
  padding:3px 5px;
  gap:6px;
  white-space:nowrap;
  overflow:hidden;
}
.text-control-group .option-item input[type=checkbox]{
  flex:none;
}
.text-control-group input[type=text]{
  min-width:0;
  height:28px;
  min-height:28px;
  padding:3px 6px;
  font-size:11.5px;
}
.compact-colour,
.compact-colour input[type=color]{
  width:32px;
  min-width:32px;
}
.compact-colour input[type=color]{
  height:28px;
  min-height:28px;
  padding:2px;
}

/* ---------- Bottom row: equal columns, content-height cards ---------- */
.bottom-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  align-items:start;
}
.bottom-grid>.panel{
  min-height:0;
  height:auto;
}

/* Panel 4: use the width instead of squeezing helper copy. */
.panel4-body{
  gap:8px;
}
.background-strip{
  display:grid;
  grid-template-columns:185px minmax(0,1fr);
  grid-template-areas:"type note";
  gap:12px;
  align-items:center;
  padding:8px 10px;
}
.background-strip>.bg-control:first-child{grid-area:type}
#bgSolidRow{
  grid-area:colour;
}
.background-strip:has(#bgSolidRow:not(.hidden)){
  grid-template-columns:185px 120px minmax(0,1fr);
  grid-template-areas:"type colour note";
}
.background-note{
  grid-area:note;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.25;
}
.asset-section{
  padding:8px 10px;
}
.asset-section-head{
  min-height:22px;
}
.asset-section-head .small{
  white-space:nowrap;
}
.asset-button-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

/* ---------- Export: one aligned tool row + help row ---------- */
.export-panel-body{
  display:grid;
  grid-template-columns:minmax(260px,.9fr) minmax(360px,1.22fr) minmax(300px,1fr);
  grid-template-areas:
    "mode rights actions"
    "help help help";
  gap:8px 10px;
  align-items:center;
  padding:10px 12px;
}
.export-top-row{
  grid-area:mode;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  min-width:0;
}
.export-top-row:has(.export-port:not(.hidden)){
  grid-template-columns:minmax(0,1fr) 142px;
}
.export-rights{
  grid-area:rights;
  height:38px;
  min-height:38px;
  padding:5px 9px;
  margin:0;
  line-height:1.2;
}
.export-rights span{
  min-width:0;
}
.export-actions-clean{
  grid-area:actions;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  align-items:stretch;
  align-self:stretch;
}
.export-actions-clean button{
  width:100%;
  min-width:0;
  height:38px;
  min-height:38px;
  margin:0;
  padding:5px 9px;
  white-space:normal;
  line-height:1.15;
}
.export-actions-clean button:only-child,
.export-actions-clean button.hidden + button:only-child{
  grid-column:1/-1;
}
/* The standalone state has only one visible button; make it use the whole action area. */
.export-actions-clean:has(#downloadStreamerTxt.hidden) #downloadHtml{
  grid-column:1/-1;
}
.export-help{
  grid-area:help;
  min-height:34px;
  margin:0;
  padding:7px 9px;
  display:flex;
  align-items:center;
}

/* Responsive fallbacks without creating cramped desktop UI. */
@media(max-width:1350px){
  .dashboard-grid{grid-template-columns:minmax(520px,560px) minmax(0,1fr)}
  .text-control-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .text-control-group,.text-control-group.has-text-field{height:40px}
  .export-panel-body{grid-template-columns:minmax(230px,.85fr) minmax(320px,1.15fr) minmax(250px,.9fr)}
}
@media(max-width:1120px){
  .dashboard-grid{grid-template-columns:1fr;grid-template-areas:"p1" "p2" "p3" "bottom"}
  .canvas-host{height:330px;min-height:330px}
  .editor-controls-row{grid-template-columns:1fr}
  .bottom-grid{grid-template-columns:1fr}
  .export-panel-body{grid-template-columns:1fr;grid-template-areas:"mode" "rights" "actions" "help"}
  .background-note{white-space:normal;overflow:visible}
}
@media(max-width:760px){
  .shape-grid,.row,.triple{grid-template-columns:1fr}
  .text-control-strip{grid-template-columns:1fr}
  .text-control-group,.text-control-group.has-text-field{height:auto;min-height:38px}
  .background-strip,.background-strip:has(#bgSolidRow:not(.hidden)){
    grid-template-columns:1fr;
    grid-template-areas:"type" "colour" "note";
  }
  .asset-section-head{align-items:flex-start;flex-direction:column;gap:2px}
  .asset-section-head .small{white-space:normal;text-align:left}
  .asset-button-grid{grid-template-columns:1fr 1fr}
}

/* v21 — usability / spacing / button visibility fix
   User-requested cleanup:
   - no overflow in Text / Visibility
   - export buttons fully visible and aligned
   - bottom-right export card uses space better
   - canvas background note no longer cramped
   - slightly larger preview presence, cleaner rhythm */

.dashboard-grid{
  grid-template-columns:minmax(540px,590px) minmax(0,1fr);
  gap:14px;
}

/* Live creation: keep preview dominant, use the lower strip properly. */
.panel-3>.panel3-wide-layout{
  gap:10px;
}
.canvas-host{
  height:360px;
  min-height:360px;
}
.editor-controls-row{
  grid-template-columns:210px minmax(0,1fr);
  gap:10px;
  align-items:stretch;
}
.editor-card{
  min-height:122px;
}
.visibility-editor-card{
  overflow:visible;
}
.text-control-strip{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.text-control-group,
.text-control-group.has-text-field{
  height:42px;
  min-height:42px;
  padding:5px 6px;
}
.text-control-group{
  grid-template-columns:minmax(0,1fr) 34px;
}
.text-control-group.has-text-field{
  grid-template-columns:minmax(96px,.82fr) minmax(96px,1fr) 34px;
}
.text-control-group .option-item{
  font-size:12px;
  white-space:nowrap;
}
.text-control-group input[type=text]{
  font-size:12px;
}
.compact-colour,
.compact-colour input[type=color]{
  width:34px;
  min-width:34px;
}
.compact-colour input[type=color]{
  height:30px;
  min-height:30px;
}

/* Panel 4: let the note breathe instead of squeezing it into a tiny box. */
.bottom-grid{
  grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);
  gap:14px;
}
.panel4-body{
  gap:10px;
}
.background-strip{
  grid-template-columns:180px minmax(0,1fr);
  grid-template-areas:
    "type note"
    "colour colour";
  gap:10px 12px;
  align-items:center;
}
#bgSolidRow{
  grid-area:colour;
}
.background-strip:has(#bgSolidRow.hidden){
  grid-template-areas:"type note";
}
.background-note{
  white-space:normal;
  overflow:visible;
  text-overflow:initial;
  line-height:1.35;
}
.asset-section{
  gap:8px;
}
.asset-button-grid{
  gap:7px;
}
.asset-button-grid > *,
.asset-button-grid .upload-btn{
  min-height:38px;
}

/* Export: clearer structure, no clipped button, no weird dead zone. */
.export-panel-body{
  grid-template-columns:minmax(0,1fr) 330px;
  grid-template-areas:
    "mode actions"
    "rights actions"
    "help help";
  gap:8px 12px;
  align-items:stretch;
}
.export-top-row{
  align-self:start;
}
.export-rights{
  height:auto;
  min-height:44px;
  display:flex;
  align-items:center;
}
.export-actions-clean{
  grid-area:actions;
  grid-template-columns:1fr;
  gap:8px;
  align-content:start;
  justify-items:stretch;
}
.export-actions-clean button{
  min-height:42px;
  height:42px;
  font-size:13px;
  line-height:1.15;
  white-space:normal;
  word-break:keep-all;
}
.export-help{
  min-height:40px;
  line-height:1.35;
}
.export-panel-body .label{
  white-space:nowrap;
}

/* Slightly cleaner panel 2 labels and controls. */
.panel-title{
  font-size:18px;
}
.colour-grid .label{
  font-size:10px;
}
.font-compact{
  grid-template-columns:minmax(0,1fr) 140px;
}
.texture-main{
  grid-template-columns:minmax(0,1fr) 132px minmax(128px,.8fr);
}

/* Desktop refinement for the exact reported layout width. */
@media (max-width: 1500px){
  .dashboard-grid{
    grid-template-columns:minmax(520px,560px) minmax(0,1fr);
  }
  .canvas-host{
    height:344px;
    min-height:344px;
  }
  .editor-controls-row{
    grid-template-columns:190px minmax(0,1fr);
  }
  .text-control-group.has-text-field{
    grid-template-columns:minmax(88px,.8fr) minmax(88px,1fr) 32px;
  }
  .export-panel-body{
    grid-template-columns:minmax(0,1fr) 300px;
  }
}

@media (max-width: 1280px){
  .dashboard-grid{
    grid-template-columns:1fr;
    grid-template-areas:"p1" "p2" "p3" "bottom";
  }
  .bottom-grid{
    grid-template-columns:1fr;
  }
  .editor-controls-row{
    grid-template-columns:1fr;
  }
  .export-panel-body{
    grid-template-columns:1fr;
    grid-template-areas:
      "mode"
      "rights"
      "actions"
      "help";
  }
}

@media (max-width: 860px){
  .text-control-strip{
    grid-template-columns:1fr;
  }
  .background-strip{
    grid-template-columns:1fr;
    grid-template-areas:"type" "note" "colour";
  }
}


/* v22 — Selected Element + Text/Visibility visual polish
   Do not squeeze the editor into a tiny sidebar. Keep controls readable at 100%. */

.editor-controls-row{
  grid-template-columns:minmax(390px,.9fr) minmax(0,1.25fr);
  gap:10px;
  align-items:start;
}

.editor-card{
  min-height:0;
  padding:10px 11px;
}

.selected-editor-card,
.visibility-editor-card{
  height:auto;
}

.selected-control-clean{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(130px,.9fr) 92px 92px;
  gap:7px 8px;
  align-items:end;
}

.selected-control-clean .label{
  margin-bottom:4px;
  font-size:10px;
  line-height:1;
  white-space:nowrap;
}

.selected-text-field{
  grid-column:1 / 3;
}
.selected-font-field{
  grid-column:3 / 5;
}
.selected-size-field{
  grid-column:1 / 2;
}
.selected-colour-field{
  grid-column:2 / 3;
  max-width:110px;
}

.selected-text-field textarea{
  width:100%;
  min-height:48px;
  height:48px;
  resize:none;
  line-height:1.25;
}

.selected-font-field select,
.selected-size-field input{
  width:100%;
}

.selected-colour-field input[type=color],
.selected-swatch input[type=color]{
  width:100%;
  min-width:0;
  height:36px;
  min-height:36px;
  padding:3px;
}

.selected-divider-label{
  grid-column:1 / -1;
  margin-top:2px;
  padding-top:6px;
  border-top:1px solid #251832;
  font-family:var(--c4tm30w-site-font,Rajdhani,sans-serif);
  color:#a97bc7;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.selected-mini input{
  width:100%;
  min-width:0;
}

.selected-swatch{
  min-width:0;
}

.selected-slider{
  min-width:0;
}

.selected-slider input[type=range]{
  width:100%;
  min-width:0;
}

.selected-delete{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
  padding-top:2px;
}

.selected-delete button{
  width:auto;
  min-width:190px;
  min-height:34px;
  padding:6px 12px;
}

/* Text visibility: four equal, readable cards instead of a long cramped strip. */
.text-control-strip{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.text-control-group,
.text-control-group.has-text-field{
  min-width:0;
  height:42px;
  min-height:42px;
  border-radius:6px;
}

.text-control-group{
  grid-template-columns:minmax(0,1fr) 34px;
}

.text-control-group.has-text-field{
  grid-template-columns:minmax(108px,.9fr) minmax(96px,1fr) 34px;
}

.text-control-group .option-item{
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
}

/* Prevent any field/button from leaking out of its panel. */
.selected-control-clean > *,
.text-control-strip > *,
.text-control-group > *,
.export-panel-body > *{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

@media(max-width:1450px){
  .editor-controls-row{
    grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr);
  }
  .selected-control-clean{
    grid-template-columns:minmax(0,1.25fr) minmax(120px,.85fr) 84px 84px;
  }
}

@media(max-width:1180px){
  .editor-controls-row{
    grid-template-columns:1fr;
  }
  .selected-control-clean{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .selected-text-field{grid-column:1 / 3}
  .selected-font-field{grid-column:3 / 5}
}

@media(max-width:760px){
  .selected-control-clean{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .selected-text-field,
  .selected-font-field,
  .selected-divider-label,
  .selected-delete{
    grid-column:1 / -1;
  }
  .text-control-strip{
    grid-template-columns:1fr;
  }
}


/* v25: live-data controls only.
   All existing v22 Goal Maker layout/editor visuals remain unchanged. */
.live-data-compact{
  border:1px solid #2e1f3e;
  border-radius:7px;
  background:#120a1b;
  padding:8px 9px;
  display:grid;
  gap:7px;
}
.live-data-compact-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.live-sb-check{
  margin:0;
  min-height:32px;
  padding:5px 8px;
  white-space:nowrap;
}
.live-data-note{
  padding:6px 8px;
  border:1px solid #3a2850;
  border-radius:6px;
  background:#170b22;
  line-height:1.3;
}
.direct-platform-compact{display:grid;gap:7px}
.temporary-ack-compact{
  margin:0;
  min-height:36px;
  padding:6px 8px;
  line-height:1.25;
}
.platform-compact-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.platform-compact-row label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:32px;
  padding:5px 7px;
  border:1px solid #3a2850;
  border-radius:6px;
  background:#160b21;
  font-weight:800;
  cursor:pointer;
}
.platform-compact-row label:has(input:checked){
  border-color:#b56df5;
  background:#211034;
}
.platform-compact-row .platform-disabled{opacity:.55;cursor:not-allowed}
.platform-login-compact{display:grid;gap:6px}
.platform-login-row{
  display:grid;
  grid-template-columns:80px minmax(0,1fr) 112px;
  gap:7px;
  align-items:center;
  padding:6px 7px;
  border:1px solid #2c1c3b;
  border-radius:6px;
  background:#100818;
}
.platform-login-name{
  font-family:var(--c4tm30w-site-font,Rajdhani,sans-serif);
  font-weight:900;
  text-transform:uppercase;
  color:#d4a0f6;
}
.platform-login-status{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:#bca9c8;
}
.platform-login-row button{
  min-height:30px;
  height:30px;
  padding:4px 7px;
  font-size:11px;
}
@media(max-width:760px){
  .live-data-compact-head{align-items:flex-start;flex-direction:column}
  .platform-compact-row{grid-template-columns:1fr 1fr}
  .platform-login-row{grid-template-columns:1fr}
}


/* v26 — real temporary-auth status additions. Existing v25/v22 visual layout remains. */
.temporary-login-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 105px;
  gap:7px;
  align-items:stretch;
}
.temporary-time{
  min-width:0;
}
.temporary-time .label{margin-bottom:4px}
.temporary-time select{width:100%;min-width:0}
.platform-login-row{
  grid-template-columns:80px minmax(0,1fr) 92px 108px;
}
.platform-login-timer{
  font-family:var(--c4tm30w-site-font,Rajdhani,sans-serif);
  font-weight:800;
  color:#d5a9ee;
  text-align:right;
  white-space:nowrap;
}
.platform-login-row.is-connected{
  border-color:#76419c;
  background:#160c21;
}
.platform-login-row.is-error{
  border-color:#783b5d;
}
.platform-login-status{
  white-space:normal;
  line-height:1.2;
}
@media(max-width:760px){
  .temporary-login-row{grid-template-columns:1fr}
  .platform-login-row{grid-template-columns:1fr}
  .platform-login-timer{text-align:left}
}

/* v27 direct platforms: Twitch + YouTube only */
.platform-compact-row.platform-two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.streamerbot-other-note{
  padding:5px 2px 1px;
  color:#b9a8c6;
}


/* v32 — permanent transparent canvas + compact Extra Elements layout */
.panel-4 .panel4-body{display:block}
.panel-4 .asset-section{
  display:grid;
  grid-template-rows:auto auto auto;
  gap:9px;
  padding:10px;
}
.panel-4 .asset-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.panel-4 .asset-section-head .small{
  max-width:58%;
  text-align:right;
}
.panel-4 .asset-button-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.panel-4 .asset-button-grid>*{min-height:38px}
.panel-4 .asset-button-grid>*:nth-child(6){grid-column:span 2}
.panel-4 .asset-footnote{padding-top:1px}

@media(max-width:1250px){
  .panel-4 .asset-button-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel-4 .asset-button-grid>*:nth-child(6){grid-column:span 1}
}
@media(max-width:760px){
  .panel-4 .asset-section-head{
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
  }
  .panel-4 .asset-section-head .small{
    max-width:none;
    text-align:left;
  }
  .panel-4 .asset-button-grid{grid-template-columns:1fr}
}


/* v33 — compact customer How to Use panel */
.howto-card{
  margin:12px 0 14px;
  padding:12px 14px;
  border:1px solid rgba(181,100,255,.34);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(36,19,49,.92),rgba(18,11,27,.92));
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.howto-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
.howto-head h2{
  margin:1px 0 0;
  font-family:var(--c4tm30w-site-font,Rajdhani,sans-serif);
  font-size:20px;
  line-height:1;
  letter-spacing:.04em;
}
.howto-output{
  flex:0 0 auto;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
  color:#d9c9e8;
  background:rgba(255,255,255,.035);
}
.howto-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.howto-step{
  min-width:0;
  display:grid;
  grid-template-columns:27px minmax(0,1fr);
  align-items:start;
  gap:8px;
  padding:8px 9px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}
.howto-step>span{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:8px;
  font-weight:900;
  font-size:12px;
  background:rgba(174,91,255,.16);
  border:1px solid rgba(191,122,255,.32);
}
.howto-step strong{
  display:block;
  margin-bottom:2px;
  font-size:12px;
  line-height:1.15;
}
.howto-step small{
  display:block;
  color:#bcaec7;
  font-size:11px;
  line-height:1.3;
}
.howto-obs{
  margin-top:8px;
  padding:8px 10px;
  border-left:3px solid rgba(192,112,255,.72);
  border-radius:7px;
  background:rgba(0,0,0,.17);
  color:#ddd3e4;
  font-size:11px;
  line-height:1.4;
}
.howto-obs span{
  display:block;
  margin-top:3px;
  color:#aFA1b8;
}

@media(max-width:1100px){
  .howto-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .howto-head{align-items:flex-start;flex-direction:column}
  .howto-grid{grid-template-columns:1fr}
  .howto-output{width:100%;text-align:center}
}


/* v34 - Streamer.bot single-ZIP export + readable export information */
.streamerbot-source-row{
  display:grid;
  grid-template-columns:minmax(180px,260px) minmax(0,1fr);
  gap:10px;
  align-items:end;
  width:100%;
}
.streamerbot-source-note{
  color:#d8c6e5 !important;
  line-height:1.4;
  padding-bottom:7px;
}
.export-mode-help,
.export-help{
  color:#eadff2 !important;
  font-size:12px !important;
  line-height:1.45 !important;
  opacity:1 !important;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.11);
}
.export-mode-help strong,
.export-help strong{
  color:#ffffff !important;
}
.export-actions-clean{
  grid-template-columns:1fr !important;
}
.export-actions-clean .primary{
  width:100%;
}
@media(max-width:760px){
  .streamerbot-source-row{grid-template-columns:1fr}
  .streamerbot-source-note{padding-bottom:0}
}

/* v36 - truthful live goal rule */
.truth-note{
  border:1px solid rgba(198,93,255,.35);
  background:rgba(198,93,255,.06);
  color:#efe3f7;
  padding:9px 11px;
  border-radius:7px;
  font-size:12px;
  line-height:1.4;
}
.truth-note strong{color:#fff}

/* v41 — download button below + support-first download flow */
.export-panel-body{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-areas:"mode" "rights" "help" "count" "actions" !important;
  gap:8px !important;
  align-items:stretch !important;
}
.export-top-row{grid-area:mode !important;}
.export-rights{grid-area:rights !important;}
.export-help{grid-area:help !important;}
.goal-maker-download-stat{
  grid-area:count;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:38px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:7px;
  background:rgba(255,255,255,.025);
  color:#d8c6e5;
  font-size:12px;
}
.goal-maker-download-stat strong{color:#fff;font-size:14px}
.export-actions-clean{
  grid-area:actions !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  width:100% !important;
}
.export-actions-clean button{width:100% !important;min-height:42px !important;}

.goal-maker-download-dialog{
  width:min(560px,calc(100vw - 32px));
  max-width:560px;
  padding:0;
  border:1px solid rgba(196,103,255,.45);
  border-radius:12px;
  background:#100817;
  color:#f7effc;
  box-shadow:0 24px 80px rgba(0,0,0,.65);
}
.goal-maker-download-dialog::backdrop{background:rgba(4,0,8,.78);backdrop-filter:blur(3px)}
.goal-maker-download-dialog-card{position:relative;margin:0;padding:22px}
.goal-maker-download-dialog .dialog-close{
  position:absolute;right:10px;top:9px;width:34px;height:34px;padding:0;border-radius:8px;
  font-size:22px;line-height:1;background:rgba(255,255,255,.05)
}
.goal-maker-download-dialog .eyebrow{
  margin:0 42px 5px 0;color:#d951ff;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:12px
}
.goal-maker-download-dialog h2{margin:0 42px 10px 0;color:#fff;font-size:22px}
.goal-maker-download-dialog p:not(.eyebrow){margin:0;color:#e2d3eb;line-height:1.5;font-size:13px}
.goal-maker-download-dialog .dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.goal-maker-download-dialog .button{
  display:flex;align-items:center;justify-content:center;min-height:42px;border:1px solid #5a3673;
  border-radius:7px;padding:8px 12px;color:#fff;text-decoration:none;background:#21102d;font-weight:800;cursor:pointer
}
.goal-maker-download-dialog .button.primary{background:linear-gradient(135deg,#7b28d6,#d337cc);border-color:#b56df5}
@media(max-width:620px){.goal-maker-download-dialog .dialog-actions{grid-template-columns:1fr}}

/* v42 — balanced Browser Source Export layout */
.export-panel-body{
  display:block !important;
}
.export-top-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(180px,.46fr) !important;
  gap:10px !important;
  align-items:end !important;
}
.export-rights{
  margin-top:8px !important;
}
.export-bottom-row{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.9fr);
  gap:12px;
  align-items:stretch;
  margin-top:8px;
}
.export-bottom-row .export-help{
  margin:0 !important;
  height:100%;
  min-height:86px;
  display:flex;
  align-items:center;
}
.export-download-side{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:8px;
  min-width:0;
}
.export-download-side .goal-maker-download-stat{
  margin:0;
  min-height:36px;
}
.export-download-side .export-actions-clean{
  display:block !important;
  width:100% !important;
  margin:0 !important;
}
.export-download-side .export-actions-clean button{
  width:100% !important;
  min-height:42px !important;
  height:100% !important;
}
@media(max-width:820px){
  .export-top-row{
    grid-template-columns:1fr !important;
  }
  .export-bottom-row{
    grid-template-columns:1fr;
  }
  .export-bottom-row .export-help{
    min-height:0;
  }
}

/* v43 — EXACT requested alignment:
   Download button sits LOWER, with its bottom aligned to the bottom of the rights row.
   Help text begins underneath both columns. */
.export-panel-body{
  display:block !important;
}
.export-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.95fr);
  gap:12px;
  align-items:stretch;
}
.export-left-stack{
  display:grid;
  grid-template-rows:auto auto;
  gap:8px;
  min-width:0;
}
.export-left-stack .export-top-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(180px,.46fr) !important;
  gap:10px !important;
  align-items:end !important;
}
.export-left-stack .export-rights{
  margin:0 !important;
  min-height:42px;
}
.export-main-grid .export-download-side{
  display:flex !important;
  flex-direction:column;
  justify-content:flex-end; /* this is the key: button is pushed DOWN */
  gap:8px;
  min-width:0;
}
.export-main-grid .goal-maker-download-stat{
  margin:0;
  min-height:36px;
}
.export-main-grid .export-actions-clean{
  display:block !important;
  width:100% !important;
  margin:0 !important;
}
.export-main-grid .export-actions-clean button{
  width:100% !important;
  min-height:42px !important;
}
.export-panel-body > .export-help{
  margin-top:8px !important;
  width:100%;
}
@media(max-width:820px){
  .export-main-grid{
    grid-template-columns:1fr;
  }
  .export-left-stack .export-top-row{
    grid-template-columns:1fr !important;
  }
  .export-main-grid .export-download-side{
    justify-content:initial;
  }
}

/* v45 custom goal configuration */
.custom-goal-config{
  padding:10px;
  border:1px solid rgba(205,82,255,.28);
  border-radius:8px;
  background:rgba(122,34,171,.045);
}
.custom-goal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
@media(max-width:760px){
  .custom-goal-grid{grid-template-columns:1fr}
}

/* v51 — Streamer.bot Goal Pack */
.goal-pack-panel{
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(196,103,255,.28);
  border-radius:9px;
  background:rgba(116,37,157,.045);
}
.goal-pack-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.goal-pack-head strong{display:block;color:#fff;font-size:14px}
.goal-pack-head small{display:block;margin-top:2px;color:#cdbbd9;line-height:1.35}
.goal-pack-count{
  flex:0 0 auto;min-width:62px;padding:4px 7px;border:1px solid rgba(255,255,255,.1);
  border-radius:999px;text-align:center;color:#f4e9fb;font-size:11px;background:rgba(255,255,255,.035)
}
.goal-pack-actions,.goal-pack-downloads{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.goal-pack-list{display:grid;gap:6px;margin-top:9px}
.goal-pack-empty{
  padding:9px;border:1px dashed rgba(255,255,255,.12);border-radius:7px;color:#a895b5;font-size:12px;text-align:center
}
.goal-pack-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 9px;
  border:1px solid rgba(255,255,255,.11);border-radius:7px;background:rgba(255,255,255,.025)
}
.goal-pack-card-title{display:flex;align-items:center;gap:7px;min-width:0}
.goal-pack-card-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:12px}
.goal-pack-badge{
  flex:0 0 auto;padding:2px 5px;border-radius:5px;background:rgba(188,71,255,.14);
  border:1px solid rgba(188,71,255,.25);color:#e4baf9;font-size:9px;font-weight:800;text-transform:uppercase
}
.goal-pack-card-meta{margin-top:2px;color:#bdaac9;font-size:10px}
.goal-pack-remove{width:30px;min-width:30px;height:30px;padding:0!important;font-size:17px;line-height:1}
.goal-pack-note{margin:8px 0 0!important;line-height:1.4}
.goal-pack-downloads button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:720px){.goal-pack-actions,.goal-pack-downloads{grid-template-columns:1fr}}

/* v52 — Goal Setup save + canvas refit */
.goal-setup-actions{display:grid;gap:7px;margin-top:8px}
.secondary-pack-save{
  border:1px solid rgba(210,103,255,.36)!important;
  background:rgba(171,65,226,.10)!important;
  color:#f2dcff!important;
}
.secondary-pack-save:hover{background:rgba(171,65,226,.17)!important}

/* v57 — restore Browser Source Export controls to compact v43/image-2 layout.
   Goal Pack sits BELOW the normal export controls instead of inside the left column. */
.export-main-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(300px,.95fr) !important;
  gap:12px !important;
  align-items:stretch !important;
}
.export-left-stack{
  display:grid !important;
  grid-template-rows:auto auto !important;
  gap:8px !important;
  min-width:0 !important;
}
.export-left-stack .export-top-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(180px,.46fr) !important;
  gap:10px !important;
  align-items:end !important;
}
.export-left-stack .export-rights{
  margin:0 !important;
  min-height:42px !important;
}
.export-main-grid .export-download-side{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  gap:8px !important;
  min-width:0 !important;
}
.export-main-grid .export-actions-clean,
.export-main-grid .export-actions-clean button{
  width:100% !important;
}
.export-panel-body > .export-help{
  margin-top:8px !important;
  width:100% !important;
}
.export-panel-body > .goal-pack-panel{
  width:100% !important;
  max-width:none !important;
  margin-top:10px !important;
  box-sizing:border-box !important;
}
.goal-pack-actions,.goal-pack-downloads{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
@media(max-width:820px){
  .export-main-grid{grid-template-columns:1fr !important;}
  .export-left-stack .export-top-row{grid-template-columns:1fr !important;}
  .export-main-grid .export-download-side{justify-content:initial !important;}
}
@media(max-width:620px){
  .goal-pack-actions,.goal-pack-downloads{grid-template-columns:1fr !important;}
}

.selected-inline-toggle{display:flex;align-items:center;gap:8px;font-size:12px;align-self:end;padding-bottom:4px}
#textColorBWrap.hidden{display:none}


/* v60 — move Extra Elements into the right editor area and give Export the full bottom width */
.editor-controls-row{
  grid-template-columns:minmax(420px,1.08fr) minmax(340px,.92fr) !important;
  gap:10px !important;
  align-items:start !important;
}
.editor-right-stack{
  display:grid;
  grid-template-rows:auto auto;
  gap:10px;
  min-width:0;
}
.editor-right-stack > *{min-width:0}
.extra-editor-card{
  display:flex;
  flex-direction:column;
}
.extra-editor-card .dock-header .panel-no{
  margin-right:8px;
}
.extra-editor-card .extra-asset-section{
  display:grid;
  grid-template-rows:auto auto auto;
  gap:8px;
  height:100%;
  padding:0;
  border:none;
  background:transparent;
}
.extra-editor-card .asset-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.extra-editor-card .asset-section-head .small{
  text-align:right;
  line-height:1.35;
}
.extra-editor-card .asset-button-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.extra-editor-card .asset-button-grid > *,
.extra-editor-card .asset-button-grid .upload-btn{
  min-height:38px;
  width:100%;
}
.extra-editor-card .asset-button-grid .upload-video-wide{
  grid-column:span 2;
}
.extra-editor-card .asset-footnote{
  margin:0;
}
.bottom-grid.bottom-grid-export-only{
  grid-template-columns:1fr !important;
}
.bottom-grid.bottom-grid-export-only > .panel{
  width:100%;
}
.panel-5-full .panel-body{
  width:100%;
}
.panel-5-full .export-main-grid{
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr) !important;
}
.panel-5-full .goal-pack-actions,
.panel-5-full .goal-pack-downloads{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
@media(max-width:1180px){
  .editor-controls-row{
    grid-template-columns:1fr !important;
  }
  .editor-right-stack{
    grid-template-rows:auto auto;
  }
}
@media(max-width:760px){
  .extra-editor-card .asset-button-grid{
    grid-template-columns:1fr;
  }
  .extra-editor-card .asset-button-grid .upload-video-wide{
    grid-column:span 1;
  }
  .extra-editor-card .asset-section-head{
    flex-direction:column;
  }
  .extra-editor-card .asset-section-head .small{
    text-align:left;
  }
  .panel-5-full .export-main-grid{
    grid-template-columns:1fr !important;
  }
  .panel-5-full .goal-pack-actions,
  .panel-5-full .goal-pack-downloads{
    grid-template-columns:1fr !important;
  }
}


/* v62 — canvas editing tools */
.selected-layer-buttons{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.selected-layer-buttons button{min-height:34px;padding:5px 6px;font-size:11px}
.selected-duplicate{grid-column:1/-1;display:flex}
.selected-duplicate button{width:100%;min-height:34px}
.snap-tools{margin-top:9px;padding-top:6px;border-top:1px solid #251832;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px;align-items:center}
.snap-tools .selected-divider-label{grid-column:1/-1;margin:0}
.snap-tools .option-item{font-size:11px;white-space:nowrap}
.snap-size{display:grid;grid-template-columns:auto minmax(70px,1fr);align-items:center;gap:8px;grid-column:1/-1}
.snap-size .label{margin:0;white-space:nowrap}.snap-size input{min-height:34px}
.canvas-host.grid-visible{background-image:linear-gradient(rgba(193,98,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(193,98,255,.10) 1px,transparent 1px);background-size:var(--goal-grid-size,10px) var(--goal-grid-size,10px)}
.editor-el.snap-active{outline:1px dashed rgba(221,140,255,.72);outline-offset:1px}
@media(max-width:760px){.selected-layer-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.snap-tools{grid-template-columns:1fr}}

/* v63 - text uses the same visible resize handle system as frames */
.text-el.selected > .handle{display:block !important;cursor:nwse-resize !important;}
.text-el{resize:none;}
.handle{z-index:9999;pointer-events:auto;}

/* v64 fixes: text uses same resize handle as shapes/images */
.editor-el.text-el > .handle{
  display:block;
  pointer-events:auto;
  z-index:9999;
}
.editor-el.text-el.selected{
  outline:1px dashed #fff;
}
.editor-el.text-el{
  position:absolute;
  box-sizing:border-box;
}


/* v67 — compact layout + object-aware controls + definitive text resize handle */
.dashboard-grid{display:grid!important;grid-template-columns:minmax(500px,550px) minmax(0,1fr)!important;grid-template-areas:"p1 p3" "p2 p3" "bottom bottom"!important;gap:10px 12px!important;align-items:start!important}
.panel-1,.panel-2{align-self:start!important;height:auto!important;min-height:0!important}
.panel-1 .panel-body,.panel-2 .panel-body{height:auto!important;min-height:0!important}
.panel-3{height:auto!important;align-self:start!important}
.panel-3>.panel3-wide-layout{min-height:0!important;grid-template-rows:auto auto!important}
.canvas-host{height:360px!important;min-height:360px!important;flex:none!important}
.editor-controls-row{align-items:start!important}
.selected-editor-card{height:auto!important;min-height:0!important}
.extra-editor-card,.visibility-editor-card{height:auto!important}

/* only show controls that make sense for the selected object */
#selectedControls .control-text-only,
#selectedControls .control-media-only,
#selectedControls .control-shape-only,
#selectedControls .control-appearance-only,
#selectedControls .control-nontext-only{display:none!important}
#selectedControls.editing-text .control-text-only{display:block!important}
#selectedControls.editing-media .control-media-only{display:block!important}
#selectedControls.editing-media .control-appearance-only{display:block!important}
#selectedControls.editing-media .control-nontext-only{display:flex!important}
#selectedControls.editing-shape .control-shape-only{display:block!important}
#selectedControls.editing-shape .control-appearance-only{display:block!important}
#selectedControls.editing-shape .control-nontext-only{display:flex!important}
#selectedControls.editing-progress .control-appearance-only,
#selectedControls.editing-progress .control-shape-only,
#selectedControls.editing-progress .control-media-only,
#selectedControls.editing-progress .control-nontext-only{display:none!important}

/* actual text resize dot: same geometry/interaction as every editor element */
.editor-el>.handle{position:absolute!important;right:-7px!important;bottom:-7px!important;width:14px!important;height:14px!important;border-radius:50%!important;background:#fff!important;border:3px solid #8d43e0!important;display:none!important;z-index:2147483647!important;pointer-events:auto!important;cursor:nwse-resize!important}
.editor-el.selected>.handle{display:block!important}
.text-el{overflow:visible!important;box-sizing:border-box!important}
.text-el.selected>.handle{display:block!important}

/* tighter selected editor spacing */
.selected-control-clean{gap:6px 7px!important}
.selected-divider-label{margin-top:0!important;padding-top:5px!important}
.selected-layer-buttons,.selected-duplicate{margin-top:1px!important}
.selected-delete{padding-top:0!important}
.extra-editor-card .asset-footnote{margin-top:0!important}

/* progress gradient second colour only when needed */
#progressColor2Wrap.hidden{display:none!important}
@media(max-width:1180px){.dashboard-grid{grid-template-columns:1fr!important;grid-template-areas:"p1" "p2" "p3" "bottom"!important}.canvas-host{height:330px!important;min-height:330px!important}}


/* v68 — text canvas clipping fix */
.stage{overflow:hidden!important;box-shadow:none!important}.editor-el.text-el{overflow:visible!important}
.editor-el.text-el{white-space:pre!important;word-break:normal!important;text-overflow:clip!important}
.editor-el.text-el.selected>.handle{display:block!important}

/* V87 — the blue border IS the exact logical export canvas, at any selected W x H. */
.stage{box-sizing:border-box!important;overflow:hidden!important;box-shadow:none!important}
.stage-viewport{overflow:visible!important}


/* V91 — the visible black preview area IS the full logical 900x500 canvas.
   No hidden inset, no extra side gutters, no editor-only inner boundary. */
.canvas-host{
  width:min(900px,100%)!important;
  aspect-ratio:900 / 500!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  overflow:hidden!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
}
.stage-viewport{margin:0!important;padding:0!important;overflow:visible!important;}
.stage{margin:0!important;box-shadow:none!important;overflow:hidden!important;}

/* ========================================================================== 
   V93 — UI POLISH / ALWAYS-VISIBLE CONTROLS
   --------------------------------------------------------------------------
   Visual-only pass. Intentionally DOES NOT style or override:
   .canvas-host, .stage-viewport, .stage, .widget-root, .editor-el,
   .progress-shell or any generated/export preview geometry.
   The black Live Creation preview/export workspace remains exactly as V92.
   ========================================================================== */

:root{
  --panel:#100919;
  --panel-2:#0b0711;
  --panel-head:#140b20;
  --line:#392548;
  --line-soft:#2b1c38;
  --text:#fbf8ff;
  --muted:#bea7cc;
  --accent:#c35dff;
  --accent-2:#ef45cf;
  --control:#120b1c;
  --control-2:#171022;
  --focus:#b760ef;
  --control-h:42px;
  --card-radius:12px;
  --soft-shadow:0 12px 30px rgba(0,0,0,.20);
}

html,body{
  max-width:100%;
  overflow-x:hidden;
}

body{
  padding:18px;
  background:
    radial-gradient(circle at 86% -5%,rgba(129,48,211,.18),transparent 32%),
    radial-gradient(circle at 10% 16%,rgba(219,55,201,.08),transparent 26%),
    linear-gradient(180deg,#090610 0%,#07040c 60%,#050308 100%);
}

.wrap{
  width:min(1860px,100%);
  margin:0 auto;
}

/* ---------- Header ---------- */
.top-bar{
  position:relative;
  gap:24px;
  padding:17px 19px;
  margin-bottom:14px;
  border:1px solid #3b254b;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(19,10,29,.98),rgba(12,7,19,.98));
  box-shadow:var(--soft-shadow),inset 0 1px 0 rgba(255,255,255,.025);
  overflow:hidden;
}
.top-bar::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
}
.site-title{
  font-size:36px;
  letter-spacing:.025em;
  text-shadow:0 0 20px rgba(195,93,255,.10);
}
.brand-copy p{
  max-width:940px;
  margin-top:6px;
  color:#c9b5d5;
  font-size:12.5px;
}
.header-badge{
  padding:8px 13px;
  border-color:#59356f;
  background:rgba(195,93,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
  white-space:nowrap;
}

/* ---------- Quick start ---------- */
.howto-card{
  margin:0 0 16px;
  padding:12px 14px 13px;
  border:1px solid #362244;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(20,11,30,.96),rgba(13,8,20,.96));
  box-shadow:0 10px 26px rgba(0,0,0,.14);
}
.howto-head{margin-bottom:9px}
.howto-output{
  border-color:#463058;
  background:#120b1b;
  color:#dfc9eb;
}
.howto-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
}
.howto-step{
  min-height:64px;
  padding:8px;
  border-color:#2e1f3b;
  background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.012));
}
.howto-step:hover{
  border-color:#523267;
  background:rgba(195,93,255,.035);
}
.howto-step>span{
  width:25px;
  height:25px;
  border-radius:50%;
  background:rgba(195,93,255,.12);
}
.howto-obs{
  margin-top:7px;
  background:#0c0812;
  border-left-color:#c05cff;
}

/* ---------- Main page rhythm ---------- */
.dashboard-grid{
  grid-template-columns:minmax(570px,620px) minmax(0,1fr)!important;
  gap:16px!important;
}
.panel{
  min-width:0;
  overflow:visible;
  border-color:#352243;
  border-radius:var(--card-radius);
  background:linear-gradient(180deg,#100919,#0d0814);
  box-shadow:0 10px 26px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.018);
}
.panel-title{
  position:relative;
  padding:11px 14px;
  border-bottom-color:#2c1c39;
  border-radius:var(--card-radius) var(--card-radius) 0 0;
  background:linear-gradient(90deg,#160c22,#120a1c);
  font-size:18px;
}
.panel-title::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,rgba(195,93,255,.42),transparent 72%);
}
.panel-no{
  width:24px;
  height:24px;
  border-color:#70478d;
  background:rgba(195,93,255,.08);
}
.panel-body{padding:13px 14px 14px}

/* ---------- Controls: readable, never clipped ---------- */
button,select,input,textarea,.upload-btn{
  max-width:100%;
  min-width:0;
}
button,select,input:not([type="checkbox"]):not([type="range"]):not([type="color"]),textarea,.upload-btn{
  min-height:var(--control-h);
}
button,select,input,textarea{
  border-color:#46305a;
  border-radius:8px;
  background:linear-gradient(180deg,#130c1d,#100918);
}
button,.upload-btn{
  transition:border-color .16s ease,background .16s ease,transform .08s ease,box-shadow .16s ease;
}
button:hover,.upload-btn:hover,select:hover,input:hover,textarea:hover{
  border-color:#8b50b4;
}
button:hover,.upload-btn:hover{
  background:#1a1025;
  box-shadow:0 5px 14px rgba(0,0,0,.16);
}
button:active,.upload-btn:active{transform:translateY(1px)}
button.primary{
  background:linear-gradient(135deg,#842ed8,#ce3ecb);
  border-color:#c66aff;
  box-shadow:0 6px 16px rgba(133,42,210,.16);
}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,.upload-btn:focus-within{
  border-color:var(--focus)!important;
  box-shadow:0 0 0 2px rgba(183,96,239,.16)!important;
}
select{
  white-space:nowrap;
  text-overflow:ellipsis;
}
textarea{
  min-height:64px;
  line-height:1.35;
}
.label{
  margin-bottom:5px;
  color:#e9d9f2;
  font-size:10.5px;
  letter-spacing:.075em;
  white-space:normal;
}
.small{
  color:#bfa9cc;
  line-height:1.45;
}
.row,.triple,.shape-grid,.colour-grid,.font-compact,.texture-main,.custom-goal-grid,.temporary-login-row,.streamerbot-source-row,
.platform-login-row,.export-main-grid,.export-top-row,.goal-pack-actions,.goal-pack-downloads{
  min-width:0;
}
.row{gap:10px}

.option-item,.upload-btn{
  min-width:0;
  border-color:#3b284d;
  background:#140c1f;
}
.option-item span{
  min-width:0;
  overflow-wrap:anywhere;
}

/* ---------- Setup / info cards ---------- */
.truth-note{
  padding:10px 11px;
  border-color:rgba(198,93,255,.28);
  background:linear-gradient(90deg,rgba(198,93,255,.075),rgba(198,93,255,.035));
}
.live-data-compact{
  padding:10px;
  gap:9px;
  border-color:#39254a;
  border-radius:9px;
  background:#0e0915;
}
.live-data-note,.platform-login-row{
  border-color:#342244;
  background:#120a1b;
}
.temporary-ack-compact{
  align-items:flex-start;
  white-space:normal;
}
.platform-login-status{
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
}
.goal-setup-actions{gap:8px;margin-top:10px}
.goal-setup-actions button{min-height:44px}

/* ---------- Shape / fill ---------- */
.shape-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:13px;
}
.colour-grid{gap:8px}
.colour-grid>div{min-width:0}
.colour-grid input[type=color],input[type=color]{border-radius:7px}
.font-compact{gap:8px}
.texture-card-wide{
  padding:9px 10px;
  border-color:#342244;
  border-radius:9px;
  background:#0e0915;
}
.texture-status .small{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
}

/* ---------- Selected Element / editor controls ---------- */
.editor-controls-row{
  grid-template-columns:minmax(520px,1.15fr) minmax(360px,.85fr)!important;
  gap:12px!important;
}
.editor-card{
  min-width:0;
  overflow:visible;
  padding:12px;
  border-color:#342244;
  border-radius:10px;
  background:linear-gradient(180deg,#0e0915,#0b0711);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}
.dock-header{
  margin-bottom:10px;
  font-size:15px;
  letter-spacing:.035em;
}
.selected-control-clean{
  grid-template-columns:minmax(190px,1.65fr) minmax(150px,.9fr) minmax(125px,.72fr) minmax(100px,.62fr)!important;
  gap:9px 10px!important;
  align-items:end;
}
.selected-text-field{grid-column:1 / 3!important}
.selected-font-field{grid-column:3 / 4!important}
.selected-size-field{grid-column:4 / 5!important}
.selected-text-field textarea{
  height:58px;
  min-height:58px;
  resize:vertical;
}
.selected-colour-field{
  grid-column:auto!important;
  max-width:none!important;
  min-width:0;
}
.selected-colour-field select,
.selected-colour-field input[type=color],
.selected-mini input,
.selected-swatch select,
.selected-swatch input,
.selected-slider input[type=range]{width:100%}
.selected-divider-label{
  margin-top:4px!important;
  padding-top:8px!important;
  border-top-color:#30203d;
  color:#b887d2;
  font-size:10.5px;
}
.selected-layer-buttons{
  gap:7px;
}
.selected-layer-buttons button,
.selected-duplicate button,
.selected-delete button{
  min-height:38px;
  border-radius:8px;
}
.selected-delete{
  justify-content:stretch;
}
.selected-delete button{
  width:100%;
  min-width:0;
  background:rgba(142,44,80,.10);
  border-color:#653047;
}
.selected-inline-toggle{
  min-height:38px;
  padding:7px 9px;
  white-space:normal;
}

/* ---------- Right editor stack ---------- */
.editor-right-stack{
  gap:12px;
}
.text-control-strip{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.text-control-group,
.text-control-group.has-text-field{
  height:auto;
  min-height:46px;
  padding:6px;
  border-color:#332143;
  background:#110a1a;
}
.text-control-group .option-item{
  height:auto;
  min-height:32px;
  overflow:visible;
  white-space:normal;
}
.text-control-group.has-text-field{
  grid-template-columns:minmax(105px,.9fr) minmax(96px,1fr) 36px;
}
.text-control-group input[type=text]{
  height:32px;
  min-height:32px;
}
.compact-colour,.compact-colour input[type=color]{
  width:36px;
  min-width:36px;
}
.compact-colour input[type=color]{height:32px;min-height:32px}
.extra-editor-card .extra-asset-section{
  gap:9px;
}
.extra-editor-card .asset-section-head{
  align-items:center;
}
.extra-editor-card .asset-section-head .small{
  max-width:58%;
  white-space:normal;
  text-align:right;
}
.extra-editor-card .asset-button-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.extra-editor-card .asset-button-grid>*{
  min-height:40px;
  white-space:normal;
  overflow-wrap:anywhere;
}
.snap-tools{
  margin-top:10px;
  padding-top:9px;
  gap:8px 10px;
}
.snap-tools .option-item{
  min-height:36px;
  white-space:normal;
}

/* ---------- Export ---------- */
.bottom-grid{margin-top:0}
.panel-5-full .export-main-grid{
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)!important;
  gap:14px!important;
}
.export-left-stack{gap:10px!important}
.export-main-grid .export-download-side{
  padding:10px;
  border:1px solid #332143;
  border-radius:10px;
  background:#0e0915;
}
.goal-maker-download-stat{
  min-height:42px;
  border-color:#38264a;
  background:#100a18;
}
.export-actions-clean button{
  min-height:44px!important;
  height:auto!important;
  padding:9px 12px;
}
.export-help{
  padding:9px 10px;
  border-radius:8px;
}
.goal-pack-panel{
  border-radius:10px;
}
.goal-pack-actions button,.goal-pack-downloads button{
  min-height:42px;
  white-space:normal;
}

/* ---------- Footer ---------- */
.maker-footer{
  padding:16px 0 4px;
  color:#856a99;
  letter-spacing:.035em;
}

/* ---------- Visibility / responsive safety ---------- */
.panel-body>*,
.editor-controls-row>*,
.editor-right-stack>*,
.selected-control-clean>*,
.text-control-strip>*,
.asset-button-grid>*,
.export-main-grid>*,
.export-left-stack>*,
.goal-pack-actions>*,
.goal-pack-downloads>*{
  min-width:0;
  max-width:100%;
}

@media(max-width:1580px){
  .howto-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashboard-grid{grid-template-columns:minmax(520px,560px) minmax(0,1fr)!important}
  .editor-controls-row{grid-template-columns:minmax(480px,1.08fr) minmax(330px,.92fr)!important}
  .selected-control-clean{grid-template-columns:minmax(170px,1.5fr) minmax(135px,.9fr) minmax(115px,.72fr) 90px!important}
}

@media(max-width:1280px){
  body{padding:12px}
  .dashboard-grid{
    grid-template-columns:1fr!important;
    grid-template-areas:"p1" "p2" "p3" "bottom"!important;
  }
  .editor-controls-row{grid-template-columns:1fr!important}
  .editor-right-stack{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .panel-5-full .export-main-grid{grid-template-columns:1fr!important}
  .howto-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:900px){
  .top-bar{align-items:flex-start;flex-direction:column}
  .header-badge{display:block;white-space:normal}
  .howto-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shape-grid,.row,.triple,.custom-goal-grid,.streamerbot-source-row,.temporary-login-row{grid-template-columns:1fr}
  .editor-right-stack{grid-template-columns:1fr}
  .selected-control-clean{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .selected-text-field,.selected-font-field,.selected-divider-label,.selected-layer-buttons,.selected-duplicate,.selected-delete{grid-column:1 / -1!important}
  .selected-size-field,.selected-colour-field{grid-column:auto!important}
  .text-control-strip{grid-template-columns:1fr}
  .extra-editor-card .asset-section-head{align-items:flex-start;flex-direction:column}
  .extra-editor-card .asset-section-head .small{max-width:none;text-align:left}
}

@media(max-width:620px){
  body{padding:8px}
  .site-title{font-size:30px}
  .top-bar,.howto-card,.panel{border-radius:10px}
  .howto-grid{grid-template-columns:1fr}
  .colour-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .font-compact,.texture-main,.platform-login-row{grid-template-columns:1fr}
  .texture-main{grid-template-areas:"copy" "upload" "status"}
  .selected-control-clean{grid-template-columns:1fr!important}
  .selected-text-field,.selected-font-field,.selected-size-field,.selected-colour-field,.selected-divider-label,.selected-mini,.selected-swatch,.selected-slider,.selected-layer-buttons,.selected-duplicate,.selected-delete,.selected-inline-toggle{grid-column:1 / -1!important}
  .selected-layer-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .extra-editor-card .asset-button-grid{grid-template-columns:1fr}
  .text-control-group.has-text-field{grid-template-columns:1fr 36px}
  .text-control-group.has-text-field .option-item{grid-column:1/-1}
  .goal-pack-actions,.goal-pack-downloads{grid-template-columns:1fr!important}
}

/* ========================================================================== 
   v94 — Text / Visibility moved beside Live Preview + containment polish
   IMPORTANT: no .canvas-host, .stage-viewport, .stage, widget, or preview-output
   styling is changed here. The live preview/export workspace remains untouched.
   ========================================================================== */

/* Live Creation top row: preview on the left, visibility controls on the right. */
.creation-top-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(292px,27%,340px);
  gap:12px;
  align-items:start;
  min-width:0;
}
.creation-top-row > *{
  min-width:0;
  max-width:100%;
}

/* The visibility card is now a compact, self-contained dock. */
.creation-top-row .visibility-editor-card{
  width:100%;
  min-width:0;
  overflow:hidden;
  padding:12px;
  border:1px solid #3a254b;
  border-radius:10px;
  background:linear-gradient(180deg,#100919,#0c0713);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 8px 20px rgba(0,0,0,.12);
}
.creation-top-row .visibility-editor-card .dock-header{
  margin:0 0 10px;
}

/* One clean row per visibility item. This prevents labels, text boxes and
   colour squares from escaping their cards at any normal desktop width. */
.creation-top-row .text-control-strip{
  display:grid;
  grid-template-columns:1fr!important;
  gap:8px;
  min-width:0;
}
.creation-top-row .text-control-group,
.creation-top-row .text-control-group.has-text-field{
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:48px;
  height:auto;
  padding:6px 7px;
  gap:7px;
  align-items:center;
  border:1px solid #382348;
  border-radius:8px;
  background:#120b1b;
  overflow:hidden;
}
.creation-top-row .text-control-group{
  grid-template-columns:minmax(0,1fr) 40px!important;
}
.creation-top-row .text-control-group.has-text-field{
  grid-template-columns:minmax(92px,.88fr) minmax(82px,1fr) 40px!important;
}
.creation-top-row .text-control-group > *{
  min-width:0;
  max-width:100%;
}
.creation-top-row .text-control-group .option-item{
  width:100%;
  min-width:0;
  min-height:34px;
  height:auto;
  margin:0;
  padding:5px 6px;
  gap:7px;
  border:0;
  background:transparent;
  white-space:normal;
  overflow:visible;
  overflow-wrap:anywhere;
  line-height:1.2;
}
.creation-top-row .text-control-group .option-item input[type=checkbox]{
  flex:0 0 auto;
}
.creation-top-row .text-control-group input[type=text]{
  width:100%;
  min-width:0;
  max-width:100%;
  height:34px;
  min-height:34px;
  padding:5px 8px;
  font-size:12px;
  text-overflow:ellipsis;
}
.creation-top-row .compact-colour{
  width:40px;
  min-width:40px;
  max-width:40px;
  height:34px;
  justify-self:end;
  overflow:hidden;
}
.creation-top-row .compact-colour input[type=color]{
  display:block;
  width:40px;
  min-width:40px;
  max-width:40px;
  height:34px;
  min-height:34px;
  padding:3px;
  border-radius:7px;
}

/* Text / Visibility no longer occupies the lower editor stack. Extra Elements
   therefore uses that column cleanly instead of leaving phantom grid space. */
.editor-right-stack{
  display:block!important;
  min-width:0;
}
.editor-right-stack .extra-editor-card{
  width:100%;
  min-width:0;
}

/* If the available width becomes genuinely small, move the visibility dock
   below the preview rather than crushing or clipping either side. */
@media(max-width:820px){
  .creation-top-row{
    grid-template-columns:1fr;
  }
  .creation-top-row .visibility-editor-card{
    overflow:visible;
  }
  .creation-top-row .text-control-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:620px){
  .creation-top-row .text-control-strip{
    grid-template-columns:1fr!important;
  }
  .creation-top-row .text-control-group.has-text-field{
    grid-template-columns:minmax(0,1fr) 40px!important;
  }
  .creation-top-row .text-control-group.has-text-field .option-item{
    grid-column:1/-1;
  }
}

/* ========================================================================== 
   v95 — Selected Element responsive containment repair
   Fixes the editor controls overflowing into Extra Elements at narrower
   desktop widths. The black preview/export canvas is intentionally untouched.
   ========================================================================== */

/* Give both lower Live Creation columns permission to shrink inside the grid. */
.editor-controls-row{
  grid-template-columns:minmax(0,1.38fr) minmax(290px,.82fr)!important;
  gap:12px!important;
  min-width:0;
}
.editor-controls-row > *,
.selected-editor-card,
.editor-right-stack,
.extra-editor-card{
  min-width:0!important;
  max-width:100%!important;
}

/* The selected-element editor must size from its OWN available width rather
   than hard minimum column widths based on the browser viewport. */
.selected-editor-card{
  container-type:inline-size;
  overflow:hidden;
}
.selected-control-clean{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:end!important;
}
.selected-control-clean > *{
  min-width:0!important;
  max-width:100%!important;
}

/* Polished top row: text gets space, font and size remain compact but never
   force the card wider than its allocated column. */
.selected-text-field{grid-column:1 / 3!important}
.selected-font-field{grid-column:3 / 4!important}
.selected-size-field{grid-column:4 / 5!important}

.selected-control-clean input,
.selected-control-clean select,
.selected-control-clean textarea,
.selected-control-clean button{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.selected-control-clean select,
.selected-control-clean input[type=number],
.selected-control-clean input[type=text]{
  width:100%!important;
  text-overflow:ellipsis;
}
.selected-control-clean textarea{
  width:100%!important;
  overflow-wrap:anywhere;
}

/* Keep four position fields and the four layer operations neatly contained. */
.selected-mini{grid-column:auto!important;min-width:0!important}
.selected-layer-buttons{
  grid-column:1 / -1!important;
  width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
}
.selected-layer-buttons button{
  width:100%!important;
  min-width:0!important;
  padding-inline:6px!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
}
.selected-duplicate,
.selected-delete{
  grid-column:1 / -1!important;
  width:100%!important;
  min-width:0!important;
}
.selected-duplicate button,
.selected-delete button{
  width:100%!important;
  min-width:0!important;
}

/* Make appearance/media controls fluid too, so selecting a box/image/video
   cannot reintroduce the same overflow problem. */
.selected-swatch,
.selected-slider,
.selected-inline-toggle,
.selected-colour-field{
  min-width:0!important;
  max-width:100%!important;
}
.selected-swatch select,
.selected-swatch input,
.selected-slider input,
.selected-colour-field select,
.selected-colour-field input{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}

/* Container-based fallbacks respond to the actual Selected Element card width,
   which is more reliable than viewport-only media queries in this dashboard. */
@container (max-width:470px){
  .selected-control-clean{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .selected-text-field,
  .selected-font-field,
  .selected-divider-label,
  .selected-layer-buttons,
  .selected-duplicate,
  .selected-delete{
    grid-column:1 / -1!important;
  }
  .selected-size-field,
  .selected-colour-field,
  .selected-mini,
  .selected-swatch,
  .selected-slider,
  .selected-inline-toggle{
    grid-column:auto!important;
  }
  .selected-layer-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@container (max-width:310px){
  .selected-control-clean{
    grid-template-columns:1fr!important;
  }
  .selected-control-clean > *,
  .selected-text-field,
  .selected-font-field,
  .selected-size-field,
  .selected-colour-field,
  .selected-divider-label,
  .selected-mini,
  .selected-swatch,
  .selected-slider,
  .selected-inline-toggle,
  .selected-layer-buttons,
  .selected-duplicate,
  .selected-delete{
    grid-column:1 / -1!important;
  }
  .selected-layer-buttons{
    grid-template-columns:1fr 1fr!important;
  }
}

/* At widths where the whole Live Creation lower row cannot comfortably hold
   two cards, stack Extra Elements BELOW Selected Element rather than allowing
   either card to overlap. Preview area remains unchanged. */
@media(max-width:1420px){
  .editor-controls-row{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .editor-right-stack,
  .extra-editor-card{
    width:100%!important;
  }
  .extra-editor-card .asset-button-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .extra-editor-card .upload-video-wide{
    grid-column:auto!important;
  }
}

@media(max-width:900px){
  .extra-editor-card .asset-button-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:560px){
  .extra-editor-card .asset-button-grid{
    grid-template-columns:1fr!important;
  }
}


/* ========================================================================== 
   v96 — Bottom-first help + compact 50/50 export workspace
   HOW TO USE moves out of the top workflow. The actual maker becomes execution-
   first. Black preview/canvas selectors are intentionally NOT touched here.
   ========================================================================== */

/* Bottom desktop composition: HOW TO USE = 50%, EXPORT = 50%. */
.bottom-utility-grid{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  align-items:start;
  grid-column:1 / -1;
}
.bottom-utility-grid > *{
  min-width:0;
  max-width:100%;
}
.bottom-utility-grid .bottom-grid{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.bottom-utility-grid .panel-5{
  width:100%!important;
  min-width:0!important;
  height:auto!important;
}

/* HOW TO USE: compact, readable, and intentionally lower on the page. */
.howto-card-bottom{
  width:100%;
  min-width:0;
  margin:0!important;
  padding:14px!important;
  border-radius:10px!important;
  align-self:start;
}
.howto-card-bottom .howto-head{
  margin-bottom:10px;
  gap:10px;
}
.howto-card-bottom .howto-head h2{
  font-size:19px;
  line-height:1;
  margin-top:2px;
}
.howto-card-bottom .howto-output{
  font-size:10px;
  padding:7px 9px;
  white-space:nowrap;
}
.howto-grid-compact{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}
.howto-card-bottom .howto-step{
  min-width:0;
  padding:9px!important;
  gap:8px!important;
  align-items:flex-start;
}
.howto-card-bottom .howto-step>span{
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  font-size:11px!important;
}
.howto-card-bottom .howto-step strong{
  display:block;
  font-size:11px!important;
  line-height:1.2;
  margin-bottom:3px;
}
.howto-card-bottom .howto-step small{
  display:block;
  font-size:10px!important;
  line-height:1.34!important;
  overflow-wrap:anywhere;
}
.howto-important{
  margin-top:8px;
  padding:9px 10px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:var(--panel-2);
  font-size:10px;
  line-height:1.4;
  color:var(--muted);
}
.howto-important strong{
  color:#fff;
  margin-right:4px;
}

/* Export card: compact controls with a deliberately smaller right action rail. */
.bottom-utility-grid .export-panel-body{
  display:block!important;
  min-width:0!important;
  padding:10px!important;
}
.bottom-utility-grid .export-main-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 178px!important;
  gap:9px!important;
  align-items:stretch!important;
  min-width:0!important;
}
.bottom-utility-grid .export-left-stack{
  min-width:0!important;
  display:grid!important;
  gap:7px!important;
}
.bottom-utility-grid .export-left-stack .export-top-row{
  grid-template-columns:minmax(0,1fr)!important;
  gap:7px!important;
}
.bottom-utility-grid .export-control,
.bottom-utility-grid .export-port{
  min-width:0!important;
}
.bottom-utility-grid .export-control select,
.bottom-utility-grid .export-port input{
  width:100%!important;
  min-width:0!important;
  height:36px!important;
  min-height:36px!important;
  padding-top:5px!important;
  padding-bottom:5px!important;
  font-size:11px!important;
}
.bottom-utility-grid .export-rights{
  min-width:0!important;
  min-height:38px!important;
  padding:7px 8px!important;
  font-size:10px!important;
  line-height:1.3!important;
}
.bottom-utility-grid .export-download-side{
  min-width:0!important;
  width:178px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  align-self:stretch!important;
}
.bottom-utility-grid .goal-maker-download-stat{
  min-width:0!important;
  min-height:36px!important;
  padding:7px 8px!important;
  font-size:10px!important;
}
.bottom-utility-grid .goal-maker-download-stat strong{
  font-size:13px!important;
}
.bottom-utility-grid .export-actions-clean{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin-top:auto!important;
}
.bottom-utility-grid .export-actions-clean button{
  width:100%!important;
  min-width:0!important;
  min-height:36px!important;
  height:auto!important;
  padding:8px 8px!important;
  font-size:10px!important;
  line-height:1.2!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

/* Keep JS-updated helper nodes in the DOM, but make HOW TO USE the single
   documentation source instead of repeating paragraphs throughout execution. */
.panel-1 .truth-note,
.panel-1 .streamerbot-source-note,
.panel-1 .streamerbot-other-note,
.texture-copy .small,
.extra-editor-card .asset-section-head .small,
.extra-editor-card .asset-footnote,
.bottom-utility-grid #exportModeHelp,
.bottom-utility-grid .goal-pack-note{
  display:none!important;
}

/* Goal Pack stays fully usable but visually compact inside the 50% export side. */
.bottom-utility-grid .goal-pack-panel{
  margin-top:9px!important;
  padding:9px!important;
  min-width:0!important;
}
.bottom-utility-grid .goal-pack-head{
  gap:8px!important;
  align-items:flex-start!important;
}
.bottom-utility-grid .goal-pack-head strong{
  font-size:12px!important;
}
.bottom-utility-grid .goal-pack-head small{
  font-size:9.5px!important;
  line-height:1.3!important;
}
.bottom-utility-grid .goal-pack-actions,
.bottom-utility-grid .goal-pack-downloads{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}
.bottom-utility-grid .goal-pack-actions button,
.bottom-utility-grid .goal-pack-downloads button{
  width:100%!important;
  min-width:0!important;
  min-height:34px!important;
  height:auto!important;
  padding:7px!important;
  font-size:10px!important;
  line-height:1.2!important;
  white-space:normal!important;
}
.bottom-utility-grid .goal-pack-list{
  max-height:190px;
  overflow:auto;
}
.bottom-utility-grid .goal-pack-empty,
.bottom-utility-grid .goal-pack-list *{
  overflow-wrap:anywhere;
}
.bottom-utility-grid .tiny-note{
  font-size:9px!important;
  line-height:1.25!important;
}

/* Keep the two-column bottom only while each half is genuinely useful. */
@media(max-width:1120px){
  .bottom-utility-grid{
    grid-template-columns:1fr!important;
  }
  .howto-grid-compact{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .bottom-utility-grid .export-main-grid{
    grid-template-columns:minmax(0,1fr) 200px!important;
  }
  .bottom-utility-grid .export-download-side{
    width:200px!important;
  }
}
@media(max-width:760px){
  .howto-grid-compact{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .bottom-utility-grid .export-main-grid{
    grid-template-columns:1fr!important;
  }
  .bottom-utility-grid .export-download-side{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    align-items:stretch!important;
  }
  .bottom-utility-grid .export-actions-clean{
    margin-top:0!important;
  }
}
@media(max-width:520px){
  .howto-grid-compact{
    grid-template-columns:1fr!important;
  }
  .howto-card-bottom .howto-head{
    flex-direction:column!important;
    align-items:flex-start!important;
  }
  .howto-card-bottom .howto-output{
    width:100%;
    text-align:center;
  }
  .bottom-utility-grid .export-download-side,
  .bottom-utility-grid .goal-pack-actions,
  .bottom-utility-grid .goal-pack-downloads{
    grid-template-columns:1fr!important;
  }
}

/* ========================================================================== 
   v97 — FIXED lower workspace: true 50/50 HOW TO USE + EXPORT
   Fixes the inherited .bottom-grid { grid-area:bottom } rule that created an
   implicit grid and pushed the Export panel down/right. Preview/canvas rules
   are intentionally untouched.
   ========================================================================== */

/* The entire lower section occupies the dashboard's full named bottom area. */
.dashboard-grid > .bottom-utility-grid{
  grid-area:bottom !important;
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  grid-template-rows:auto !important;
  column-gap:16px !important;
  row-gap:0 !important;
  align-items:start !important;
  justify-items:stretch !important;
  margin:0 !important;
  padding:0 !important;
}

/* Explicitly pin each half. */
.bottom-utility-grid > .howto-card-bottom{
  grid-area:auto !important;
  grid-column:1 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
}

/* IMPORTANT: reset the old .bottom-grid grid-area:bottom declaration. */
.bottom-utility-grid > .bottom-grid.bottom-grid-export-only{
  grid-area:auto !important;
  grid-column:2 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  align-self:start !important;
}

.bottom-utility-grid > .bottom-grid.bottom-grid-export-only > .panel-5{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
}

/* Keep HOW TO USE readable rather than tiny. */
.bottom-utility-grid .howto-grid-compact{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}
.bottom-utility-grid .howto-card-bottom{
  padding:14px !important;
}
.bottom-utility-grid .howto-card-bottom .howto-step{
  min-height:82px !important;
  padding:10px !important;
}
.bottom-utility-grid .howto-card-bottom .howto-step strong{
  font-size:12px !important;
}
.bottom-utility-grid .howto-card-bottom .howto-step small{
  font-size:10.5px !important;
  line-height:1.38 !important;
}

/* Export stays compact but uses its entire 50% half cleanly. */
.bottom-utility-grid .panel-5 .panel-body{
  width:100% !important;
  min-width:0 !important;
}
.bottom-utility-grid .panel-5 .export-main-grid{
  grid-template-columns:minmax(0,1fr) 190px !important;
  gap:10px !important;
  width:100% !important;
}
.bottom-utility-grid .panel-5 .export-download-side{
  width:190px !important;
  max-width:190px !important;
}
.bottom-utility-grid .panel-5 button,
.bottom-utility-grid .panel-5 .button{
  min-height:34px !important;
  height:auto !important;
  padding:7px 10px !important;
}
.bottom-utility-grid .panel-5 .goal-pack-actions button,
.bottom-utility-grid .panel-5 .goal-pack-downloads button{
  font-size:10px !important;
  line-height:1.2 !important;
}

/* Do not collapse the two equal halves too early. */
@media (max-width:980px){
  .dashboard-grid > .bottom-utility-grid{
    grid-template-columns:1fr !important;
    row-gap:12px !important;
  }
  .bottom-utility-grid > .howto-card-bottom,
  .bottom-utility-grid > .bottom-grid.bottom-grid-export-only{
    grid-column:1 !important;
    grid-row:auto !important;
  }
  .bottom-utility-grid .howto-grid-compact{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .bottom-utility-grid .panel-5 .export-main-grid{
    grid-template-columns:minmax(0,1fr) 190px !important;
  }
}

@media (max-width:640px){
  .bottom-utility-grid .howto-grid-compact{
    grid-template-columns:1fr !important;
  }
  .bottom-utility-grid .panel-5 .export-main-grid{
    grid-template-columns:1fr !important;
  }
  .bottom-utility-grid .panel-5 .export-download-side{
    width:100% !important;
    max-width:none !important;
  }
}

/* ========================================================================== 
   v98 — LEFT WORKFLOW STACK
   Panel 2 now sits directly below Panel 1 with a consistent working gap.
   The remaining vertical room below Panel 2 is intentionally left open so it
   can later hold an emote, mascot, tip, promo, or decorative block without
   disturbing the main maker. Preview/canvas rules are intentionally untouched.
   ========================================================================== */

/* Treat 1 + 2 as one real left-column stack instead of separate dashboard rows. */
.dashboard-grid{
  grid-template-columns:minmax(500px,550px) minmax(0,1fr) !important;
  grid-template-areas:
    "left p3"
    "bottom bottom" !important;
  grid-template-rows:auto auto !important;
  gap:12px !important;
  align-items:start !important;
}

.dashboard-grid > .goal-left-stack{
  grid-area:left !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  width:100% !important;
  min-width:0 !important;
  align-self:start !important;
  margin:0 !important;
  padding:0 !important;
}

/* Old grid-area declarations on the panels are irrelevant inside the stack. */
.goal-left-stack > .panel-1,
.goal-left-stack > .panel-2{
  grid-area:auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  align-self:stretch !important;
}

.goal-left-stack > .panel-1 + .panel-2{
  margin-top:0 !important;
}

.dashboard-grid > .panel-3{
  grid-area:p3 !important;
  min-width:0 !important;
  align-self:start !important;
}

.dashboard-grid > .bottom-utility-grid{
  grid-area:bottom !important;
  grid-column:1 / -1 !important;
  margin-top:0 !important;
}

/* On compact layouts, keep the logical order 1 → 2 → 3 → lower section. */
@media (max-width:1180px){
  .dashboard-grid{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "left"
      "p3"
      "bottom" !important;
    gap:12px !important;
  }

  .dashboard-grid > .goal-left-stack{
    gap:12px !important;
  }
}

/* ========================================================================== 
   v99 — DARK NATIVE DROPDOWNS + READABILITY FIX
   Keeps every native select menu visually consistent with the Goal Maker.
   This is UI-only: no preview/canvas/export rendering rules are changed.
   ========================================================================== */

/* Tell Chromium/Windows that these are dark form controls. This is important
   for the native popup list, which otherwise may be forced to a white OS
   surface even though the closed select itself is dark. */
select{
  color-scheme:dark;
  background-color:#120b1d;
  color:var(--text);
}

/* Native dropdown rows. Use solid colours here (not gradients), because the
   browser/OS popup renderer only reliably honors simple background colours. */
select option,
select optgroup{
  background-color:#120b1d;
  color:#f8f4ff;
  font:inherit;
}

select optgroup{
  color:#d9a8f5;
  font-weight:800;
}

select option:disabled{
  color:#7d688d;
  background-color:#100918;
}

/* Where the browser supports option-state styling, keep the highlighted row
   in the same purple family as the rest of the site. Windows may still draw
   its own system highlight while the menu is actively open. */
select option:checked{
  background-color:#6f2aa7;
  color:#ffffff;
}

/* Prevent dropdown text from becoming unreadable in forced/default browser
   schemes. */
@media (forced-colors:none){
  select,
  select option,
  select optgroup{
    -webkit-text-fill-color:currentColor;
  }
}

/* ========================================================================== 
   v100 — compact visibility + simplified extra elements
   Does NOT alter the preview canvas/stage geometry.
   ========================================================================== */

/* Text / Visibility: simple rows for title + target, stacked rows for
   percentage/extra text so every control remains inside the card. */
.creation-top-row .visibility-editor-card{
  padding:12px!important;
}
.creation-top-row .visibility-editor-card .text-control-strip{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
}
.creation-top-row .visibility-editor-card .visibility-simple-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 40px!important;
  gap:8px!important;
  align-items:center!important;
  min-height:46px!important;
}
.creation-top-row .visibility-editor-card .visibility-stacked-row{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
  align-items:stretch!important;
  min-height:0!important;
}
.creation-top-row .visibility-editor-card .visibility-stacked-row > .option-item{
  grid-column:1!important;
  width:100%!important;
  min-height:30px!important;
  padding:3px 5px!important;
}
.creation-top-row .visibility-editor-card .visibility-subrow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 40px!important;
  gap:8px!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
}
.creation-top-row .visibility-editor-card .visibility-subrow > input[type=text]{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:34px!important;
  min-height:34px!important;
}
.creation-top-row .visibility-editor-card .visibility-subrow .compact-colour{
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:34px!important;
}

/* Extra Elements: exactly six primary actions, compact and consistent. */
.extra-editor-card .extra-asset-section{
  min-width:0;
}
.extra-editor-card .asset-section-head{
  margin-bottom:8px!important;
}
.extra-editor-card .simplified-extra-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
}
.extra-editor-card .simplified-extra-grid > button,
.extra-editor-card .simplified-extra-grid > .upload-btn{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.15!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.extra-editor-card .simplified-extra-grid .upload-image-gif{
  grid-column:auto!important;
}
.extra-editor-card .uploaded-media-frame-toggle{
  width:100%!important;
  min-width:0!important;
  margin-top:9px!important;
  padding:9px 10px!important;
  border:1px solid #382348!important;
  border-radius:8px!important;
  background:#120b1b!important;
  white-space:normal!important;
}

/* Keep selected-element rotation available and readable for ALL selectable
   elements: text, images, video, boxes, lines and progress. */
.selected-control-clean .selected-slider:has(#rotation){
  grid-column:1 / -1!important;
  width:100%!important;
  min-width:0!important;
}
.selected-control-clean #rotation{
  width:100%!important;
  min-width:0!important;
}

@media(max-width:620px){
  .extra-editor-card .simplified-extra-grid{
    grid-template-columns:1fr!important;
  }
}

/* v102 — Selected Element text content is a single-line goal/text field.
   Keep the existing textarea + ID so all editor logic remains untouched,
   but visually match the height of the other controls. */
.selected-editor-card .selected-text-field textarea#editText{
  height:var(--control-h)!important;
  min-height:var(--control-h)!important;
  max-height:var(--control-h)!important;
  resize:none!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  line-height:1.2!important;
  padding:7px 10px!important;
}

/* ========================================================================== 
   v103 — BOTTOM 50/50 ALIGNMENT + CENTERED HOW-TO CARDS
   Keeps HOW TO USE on the left and Browser Source Export on the right.
   Both outer cards share the same top and bottom edge on desktop.
   The black preview/canvas and its rendering rules are intentionally untouched.
   ========================================================================== */

/* One clean shared bottom row: equal columns and equal outer-card height. */
.dashboard-grid > .bottom-utility-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:stretch!important;
  column-gap:16px!important;
}

.bottom-utility-grid > .howto-card-bottom,
.bottom-utility-grid > .bottom-grid.bottom-grid-export-only{
  align-self:stretch!important;
  height:100%!important;
  min-height:100%!important;
}

.bottom-utility-grid > .bottom-grid.bottom-grid-export-only{
  display:flex!important;
  flex-direction:column!important;
}

.bottom-utility-grid > .bottom-grid.bottom-grid-export-only > .panel-5{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  height:100%!important;
  min-height:100%!important;
}

.bottom-utility-grid > .bottom-grid.bottom-grid-export-only > .panel-5 > .panel-body{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  min-height:0!important;
}

/* HOW TO USE also stretches as one polished card; the final notice sits at
   the bottom so its bottom edge lines up visually with the export card. */
.bottom-utility-grid > .howto-card-bottom{
  display:flex!important;
  flex-direction:column!important;
}

.bottom-utility-grid .howto-grid-compact{
  flex:1 1 auto!important;
  align-content:start!important;
}

.bottom-utility-grid .howto-important{
  margin-top:auto!important;
}

/* Center the copy inside the six framed HOW TO cards. */
.bottom-utility-grid .howto-card-bottom .howto-step{
  align-items:center!important;
}

.bottom-utility-grid .howto-card-bottom .howto-step > div{
  width:100%!important;
  min-width:0!important;
  text-align:center!important;
}

.bottom-utility-grid .howto-card-bottom .howto-step strong,
.bottom-utility-grid .howto-card-bottom .howto-step small{
  text-align:center!important;
}

.bottom-utility-grid .howto-important{
  text-align:center!important;
}

/* Keep the download action rail at the far-right edge of the export half. */
.bottom-utility-grid .panel-5 .export-main-grid{
  grid-template-columns:minmax(0,1fr) 205px!important;
  width:100%!important;
}

.bottom-utility-grid .panel-5 .export-download-side{
  width:205px!important;
  max-width:205px!important;
  justify-self:end!important;
  margin-left:auto!important;
}

/* Let Goal Pack occupy the remaining vertical room cleanly instead of leaving
   an arbitrary gap above the card bottom. */
.bottom-utility-grid .panel-5 .goal-pack-panel{
  width:100%!important;
}

/* Once the two halves stack, equal-height forcing is no longer useful. */
@media (max-width:980px){
  .bottom-utility-grid > .howto-card-bottom,
  .bottom-utility-grid > .bottom-grid.bottom-grid-export-only,
  .bottom-utility-grid > .bottom-grid.bottom-grid-export-only > .panel-5{
    height:auto!important;
    min-height:0!important;
  }

  .bottom-utility-grid .panel-5 .export-download-side{
    width:190px!important;
    max-width:190px!important;
  }
}

@media (max-width:640px){
  .bottom-utility-grid .panel-5 .export-download-side{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
  }
}


/* ========================================================================== 
   v106 — SELECTED ELEMENT ALWAYS VISIBLE + CENTERED CONTROL CONTENT
   UI-only polish. Preview/export/fill rendering is intentionally unchanged.
   ========================================================================== */

/* Never collapse the Selected Element control area. JavaScript also keeps a
   sensible default canvas object selected after each rebuild. */
.selected-editor-card #selectedControls{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
}
.selected-editor-card #noneSelected{
  display:none!important;
}

/* Center the editable values inside their control frames. Section headings and
   field labels remain left-aligned so the editor is still quick to scan. */
.selected-editor-card .selected-control-clean input[type="text"],
.selected-editor-card .selected-control-clean input[type="number"],
.selected-editor-card .selected-control-clean textarea,
.selected-editor-card .selected-control-clean select{
  text-align:center!important;
}

.selected-editor-card .selected-control-clean select{
  text-align-last:center!important;
  padding-left:8px!important;
  padding-right:8px!important;
}

.selected-editor-card .selected-control-clean select option,
.selected-editor-card .selected-control-clean select optgroup{
  text-align:center;
}

/* The one-line text-content field should read visually centered in its box,
   including vertical placement. */
.selected-editor-card .selected-text-field textarea#editText{
  display:block!important;
  text-align:center!important;
  line-height:calc(var(--control-h) - 14px)!important;
  padding:7px 10px!important;
}

/* Every action label is centered inside its own frame. */
.selected-editor-card .selected-layer-buttons button,
.selected-editor-card .selected-duplicate button,
.selected-editor-card .selected-delete button{
  text-align:center!important;
  justify-content:center!important;
  align-items:center!important;
}

/* ========================================================================== 
   v112 — VISUAL RHYTHM / LIVE CREATION SPACING POLISH
   UI spacing only. The black 900x500 canvas, stage geometry, fill rendering,
   export rendering and JavaScript behavior are intentionally untouched.
   ========================================================================== */

/* Consistent page rhythm between major working cards. */
.dashboard-grid,
.dashboard-grid > .goal-left-stack{
  gap:14px!important;
}

/* Give Live Creation one consistent interior rhythm instead of several
   different 5/8/12px gaps fighting each other. */
.panel-3 > .panel3-wide-layout{
  padding:12px!important;
  gap:14px!important;
}

.creation-top-row{
  grid-template-columns:minmax(0,1fr) 286px!important;
  gap:14px!important;
  align-items:start!important;
}

.canvas-area{
  min-width:0!important;
}

/* Keep "900 x 500" attached to the preview title instead of floating at the
   far right beside Text / Visibility. This is metadata for the preview, so it
   should read as one header unit. */
.preview-head{
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  min-height:28px!important;
  margin:0 0 8px!important;
  padding:0 2px!important;
}
.preview-title{
  line-height:1.1!important;
}
.preview-meta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:24px!important;
  padding:3px 8px!important;
  border:1px solid #4a305d!important;
  border-radius:999px!important;
  background:#120b1b!important;
  color:#d8b7ea!important;
  font-size:10.5px!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.canvas-tip{
  margin:7px 2px 0!important;
  line-height:1.35!important;
}

/* Text / Visibility is a companion card to the preview, not part of the
   preview header. Keep its width stable and its internal spacing even. */
.creation-top-row .visibility-editor-card{
  width:286px!important;
  max-width:286px!important;
  margin:0!important;
  padding:12px!important;
  border-radius:10px!important;
}
.creation-top-row .visibility-editor-card .dock-header{
  margin:0 0 11px!important;
  line-height:1.1!important;
}
.creation-top-row .visibility-editor-card .text-control-strip{
  gap:9px!important;
}
.creation-top-row .visibility-editor-card .visibility-simple-row,
.creation-top-row .visibility-editor-card .visibility-stacked-row{
  padding:7px 8px!important;
  border-radius:8px!important;
}
.creation-top-row .visibility-editor-card .visibility-simple-row{
  min-height:48px!important;
}
.creation-top-row .visibility-editor-card .visibility-stacked-row{
  gap:7px!important;
}
.creation-top-row .visibility-editor-card .visibility-stacked-row > .option-item{
  min-height:28px!important;
  padding:2px 4px!important;
}
.creation-top-row .visibility-editor-card .visibility-subrow{
  gap:8px!important;
}

/* Lower Live Creation cards line up with the same spacing as the top row. */
.editor-controls-row{
  gap:14px!important;
  align-items:start!important;
}
.selected-editor-card,
.extra-editor-card{
  padding:11px!important;
  border-radius:10px!important;
}
.selected-editor-card .dock-header,
.extra-editor-card .dock-header{
  margin-bottom:10px!important;
}
.selected-control-clean{
  gap:9px!important;
}
.selected-control-clean .selected-divider-label{
  margin-top:2px!important;
  padding-top:8px!important;
}
.selected-layer-buttons{
  gap:8px!important;
}
.extra-editor-card .simplified-extra-grid{
  gap:8px!important;
}
.extra-editor-card .snap-tools{
  margin-top:12px!important;
  padding-top:11px!important;
}

/* Keep the 50/50 utility row visually tied together with the same page gap. */
.dashboard-grid > .bottom-utility-grid{
  column-gap:14px!important;
  row-gap:14px!important;
}

/* Compact desktops: preserve clean proportions before eventually stacking. */
@media (max-width:1320px){
  .creation-top-row{
    grid-template-columns:minmax(0,1fr) 270px!important;
  }
  .creation-top-row .visibility-editor-card{
    width:270px!important;
    max-width:270px!important;
  }
}

/* When Live Creation truly becomes too narrow, stack the visibility card and
   let it use the full width. The black preview itself remains untouched. */
@media (max-width:820px){
  .creation-top-row{
    grid-template-columns:1fr!important;
  }
  .creation-top-row .visibility-editor-card{
    width:100%!important;
    max-width:none!important;
  }
}

/* =============================================================
   v113 — CONSISTENT CHECKBOX SIZE
   Keep confirmation checkboxes from shrinking inside long flex labels.
   All site checkboxes now use the same visible 15 × 15 px control size.
   ============================================================= */
input[type="checkbox"]{
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  min-height:15px !important;
  flex:0 0 15px !important;
  margin:0 !important;
  padding:0 !important;
  accent-color:#a13fe7;
  vertical-align:middle;
}

/* Long confirmation rows must never squeeze their checkbox. */
.temporary-ack-compact > input[type="checkbox"],
.export-rights > input[type="checkbox"]{
  flex:0 0 15px !important;
  width:15px !important;
  height:15px !important;
}

/* ========================================================================== 
   v114 — LIVE CREATION CANVAS / VISIBILITY GAP FIX
   --------------------------------------------------------------------------
   The logical preview canvas remains exactly 900 × 500 and all editor/export
   behavior is untouched. The problem was the first grid column expanding wider
   than the capped 900px canvas-host, which left a large invisible gutter before
   Text / Visibility on wide screens. Cap that column to the canvas width so the
   companion card sits at the same 14px rhythm as the rest of Live Creation.
   ========================================================================== */
.creation-top-row{
  grid-template-columns:minmax(0,900px) 286px!important;
  justify-content:start!important;
  column-gap:14px!important;
}
.creation-top-row .canvas-area{
  width:100%!important;
  max-width:900px!important;
}
.creation-top-row .canvas-host{
  width:100%!important;
  max-width:900px!important;
}

@media (max-width:1320px){
  .creation-top-row{
    grid-template-columns:minmax(0,900px) 270px!important;
  }
}

@media (max-width:1180px){
  .creation-top-row{
    grid-template-columns:minmax(0,1fr) 270px!important;
  }
  .creation-top-row .canvas-area,
  .creation-top-row .canvas-host{
    max-width:none!important;
  }
}

@media (max-width:820px){
  .creation-top-row{
    grid-template-columns:1fr!important;
    row-gap:14px!important;
  }
}

/* ========================================================================== 
   v116 — WEBSITE 8-PANEL DESKTOP LAYOUT
   --------------------------------------------------------------------------
   Eight real cards:
   1 Goal Setup | 2 Shape, Line & Fill | 3 Live Creation | 4 Text / Visibility
   5 Selected Element | 6 Extra Elements | 7 How To Use | 8 Browser Source Export
   Layout-only. Goal logic, canvas logic, fill logic and export logic are untouched.
   ========================================================================== */
.dashboard-grid.dashboard-grid-v116{
  display:grid!important;
  grid-template-columns:minmax(360px,.82fr) minmax(560px,1.38fr) minmax(320px,.78fr)!important;
  grid-template-areas:
    "left live visibility"
    "left selected extra"
    "bottom bottom bottom"!important;
  grid-template-rows:auto auto auto!important;
  gap:14px!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
}
.dashboard-grid-v116 > .goal-left-stack{grid-area:left!important;display:flex!important;flex-direction:column!important;gap:14px!important;min-width:0!important;align-self:start!important}
.dashboard-grid-v116 > .panel-3{grid-area:live!important;min-width:0!important;align-self:stretch!important}
.dashboard-grid-v116 > .panel-4{grid-area:visibility!important;min-width:0!important;align-self:stretch!important}
.dashboard-grid-v116 > .panel-5-editor{grid-area:selected!important;min-width:0!important;align-self:stretch!important}
.dashboard-grid-v116 > .panel-6{grid-area:extra!important;min-width:0!important;align-self:stretch!important}
.dashboard-grid-v116 > .bottom-utility-grid{grid-area:bottom!important;grid-column:1/-1!important;min-width:0!important;margin:0!important}

/* Every top/middle card uses the same visual spacing rhythm. */
.dashboard-grid-v116 > .panel,
.dashboard-grid-v116 > .goal-left-stack > .panel{
  margin:0!important;
  min-width:0!important;
}
.dashboard-grid-v116 .panel-title{
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
}
.dashboard-grid-v116 .panel-no{
  flex:0 0 auto!important;
}

/* 3 — Live Creation: canvas is the focal point and no longer shares its card
   with Text / Visibility. The preview scales inside the available center column. */
.dashboard-grid-v116 > .panel-3 > .panel3-wide-layout{
  display:block!important;
  padding:10px!important;
  min-height:0!important;
}
.dashboard-grid-v116 > .panel-3 .creation-top-row{
  display:block!important;
  width:100%!important;
  min-width:0!important;
}
.dashboard-grid-v116 > .panel-3 .canvas-area{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
.dashboard-grid-v116 > .panel-3 .preview-head{
  margin-bottom:8px!important;
}
.dashboard-grid-v116 > .panel-3 .canvas-host{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:900/500!important;
}
.dashboard-grid-v116 > .panel-3 .canvas-tip{
  margin-top:8px!important;
  line-height:1.35!important;
}

/* 4 — Text / Visibility is its own real card. */
.dashboard-grid-v116 > .panel-4.visibility-editor-card{
  padding:0!important;
  overflow:hidden!important;
}
.dashboard-grid-v116 > .panel-4 .text-control-strip{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  padding:12px!important;
}
.dashboard-grid-v116 > .panel-4 .text-control-group{
  margin:0!important;
  min-width:0!important;
}
.dashboard-grid-v116 > .panel-4 .visibility-simple-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 42px!important;
  gap:8px!important;
  align-items:center!important;
  min-height:44px!important;
}
.dashboard-grid-v116 > .panel-4 .visibility-stacked-row{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
}
.dashboard-grid-v116 > .panel-4 .visibility-subrow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 42px!important;
  gap:8px!important;
  align-items:center!important;
}
.dashboard-grid-v116 > .panel-4 .visibility-subrow input[type=text]{width:100%!important;min-width:0!important}
.dashboard-grid-v116 > .panel-4 .compact-colour,
.dashboard-grid-v116 > .panel-4 .compact-colour input[type=color]{width:42px!important;min-width:42px!important}

/* 5 — Selected Element: full center width, compact but readable. */
.dashboard-grid-v116 > .panel-5-editor.selected-editor-card{
  padding:0!important;
  overflow:hidden!important;
}
.dashboard-grid-v116 > .panel-5-editor #noneSelected,
.dashboard-grid-v116 > .panel-5-editor #selectedControls{
  margin-left:12px!important;
  margin-right:12px!important;
}
.dashboard-grid-v116 > .panel-5-editor #selectedControls{
  margin-bottom:12px!important;
}

/* 6 — Extra Elements: independent right-column card. */
.dashboard-grid-v116 > .panel-6.extra-editor-card{
  padding:0!important;
  overflow:hidden!important;
}
.dashboard-grid-v116 > .panel-6 .asset-section,
.dashboard-grid-v116 > .panel-6 .snap-tools{
  margin-left:12px!important;
  margin-right:12px!important;
}
.dashboard-grid-v116 > .panel-6 .snap-tools{margin-bottom:12px!important}
.dashboard-grid-v116 > .panel-6 .simplified-extra-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}

/* 7 + 8 — keep the lower utilities as two distinct, equally important cards. */
.dashboard-grid-v116 > .bottom-utility-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:14px!important;
  align-items:stretch!important;
}
.dashboard-grid-v116 .howto-card-bottom,
.dashboard-grid-v116 .bottom-grid-export-only,
.dashboard-grid-v116 .bottom-grid-export-only > .panel-5{
  height:100%!important;
  min-height:0!important;
}
.dashboard-grid-v116 .howto-card-bottom h2#howtoTitle{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
}

/* Website-width responsive behavior: 3 columns -> 2 columns -> 1 column. */
@media(max-width:1450px){
  .dashboard-grid.dashboard-grid-v116{
    grid-template-columns:minmax(340px,.78fr) minmax(500px,1.35fr) minmax(285px,.72fr)!important;
    gap:12px!important;
  }
}
@media(max-width:1180px){
  .dashboard-grid.dashboard-grid-v116{
    grid-template-columns:minmax(330px,.8fr) minmax(0,1.2fr)!important;
    grid-template-areas:
      "left live"
      "left visibility"
      "selected extra"
      "bottom bottom"!important;
    align-items:start!important;
  }
  .dashboard-grid-v116 > .panel-4,
  .dashboard-grid-v116 > .panel-5-editor,
  .dashboard-grid-v116 > .panel-6{align-self:start!important}
}
@media(max-width:860px){
  .dashboard-grid.dashboard-grid-v116{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "left"
      "live"
      "visibility"
      "selected"
      "extra"
      "bottom"!important;
    gap:12px!important;
  }
  .dashboard-grid-v116 > .bottom-utility-grid{grid-template-columns:1fr!important}
  .dashboard-grid-v116 > .panel-3 .canvas-host{aspect-ratio:900/500!important}
}
@media(max-width:620px){
  .dashboard-grid-v116 > .panel-6 .simplified-extra-grid{grid-template-columns:1fr!important}
}

/* ========================================================================== 
   v117 — TEXT / VISIBILITY WIDTH + SELECTED ELEMENT FIT POLISH
   Layout-only fix. No goal/fill/export/Streamer.bot logic changed.
   ========================================================================== */

/* Give the editor its visual priority: left setup remains useful, Live Creation
   + Selected Element get the majority of the width, Text / Visibility becomes a
   compact utility rail instead of a huge third column. */
.dashboard-grid.dashboard-grid-v116{
  grid-template-columns:minmax(420px,.82fr) minmax(640px,1.72fr) minmax(250px,.54fr)!important;
  column-gap:14px!important;
}

/* Text / Visibility should size to its own content, not stretch to match the
   full height of the black preview card. */
.dashboard-grid-v116 > .panel-4.visibility-editor-card{
  align-self:start!important;
  height:auto!important;
  min-height:0!important;
}
.dashboard-grid-v116 > .panel-4 .text-control-strip{
  padding:10px!important;
  gap:7px!important;
}
.dashboard-grid-v116 > .panel-4 .visibility-simple-row{
  min-height:38px!important;
  grid-template-columns:minmax(0,1fr) 36px!important;
  gap:7px!important;
}
.dashboard-grid-v116 > .panel-4 .visibility-subrow{
  grid-template-columns:minmax(0,1fr) 36px!important;
  gap:7px!important;
}
.dashboard-grid-v116 > .panel-4 .compact-colour,
.dashboard-grid-v116 > .panel-4 .compact-colour input[type=color]{
  width:36px!important;
  min-width:36px!important;
}
.dashboard-grid-v116 > .panel-4 .option-item{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}

/* Selected Element must never be narrower than its own controls. All control
   rows use the actual card width and may wrap before anything can clip. */
.dashboard-grid-v116 > .panel-5-editor.selected-editor-card{
  align-self:start!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
}
.dashboard-grid-v116 > .panel-5-editor #selectedControls{
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:8px!important;
  padding:0!important;
}
.dashboard-grid-v116 > .panel-5-editor #selectedControls > *{
  min-width:0!important;
  max-width:100%!important;
}
.dashboard-grid-v116 > .panel-5-editor .selected-text-field{grid-column:span 6!important}
.dashboard-grid-v116 > .panel-5-editor .selected-font-field{grid-column:span 4!important}
.dashboard-grid-v116 > .panel-5-editor .selected-size-field{grid-column:span 2!important}
.dashboard-grid-v116 > .panel-5-editor .selected-colour-field{grid-column:span 4!important}
.dashboard-grid-v116 > .panel-5-editor .selected-divider-label{grid-column:1/-1!important}
.dashboard-grid-v116 > .panel-5-editor .selected-mini{grid-column:span 3!important}
.dashboard-grid-v116 > .panel-5-editor .selected-swatch{grid-column:span 4!important}
.dashboard-grid-v116 > .panel-5-editor .selected-slider{grid-column:1/-1!important}
.dashboard-grid-v116 > .panel-5-editor .selected-inline-toggle{grid-column:span 6!important}
.dashboard-grid-v116 > .panel-5-editor .selected-layer-buttons,
.dashboard-grid-v116 > .panel-5-editor .selected-duplicate,
.dashboard-grid-v116 > .panel-5-editor .selected-delete{grid-column:1/-1!important}
.dashboard-grid-v116 > .panel-5-editor .selected-layer-buttons{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:100%!important;
}
.dashboard-grid-v116 > .panel-5-editor input,
.dashboard-grid-v116 > .panel-5-editor select,
.dashboard-grid-v116 > .panel-5-editor textarea,
.dashboard-grid-v116 > .panel-5-editor button{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.dashboard-grid-v116 > .panel-5-editor .selected-layer-buttons button,
.dashboard-grid-v116 > .panel-5-editor .selected-duplicate button,
.dashboard-grid-v116 > .panel-5-editor .selected-delete button{
  min-height:36px!important;
  white-space:normal!important;
  overflow:visible!important;
}

/* Medium desktop: keep the visibility rail narrow while allowing the center
   editor to stay comfortably usable. */
@media(max-width:1500px) and (min-width:1181px){
  .dashboard-grid.dashboard-grid-v116{
    grid-template-columns:minmax(360px,.78fr) minmax(560px,1.55fr) minmax(240px,.52fr)!important;
    gap:12px!important;
  }
}

/* Once the center card truly gets narrow, simplify Selected Element into two
   readable columns instead of clipping buttons/inputs. */
@media(max-width:1320px) and (min-width:1181px){
  .dashboard-grid-v116 > .panel-5-editor #selectedControls{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
  .dashboard-grid-v116 > .panel-5-editor .selected-text-field{grid-column:1/-1!important}
  .dashboard-grid-v116 > .panel-5-editor .selected-font-field{grid-column:span 4!important}
  .dashboard-grid-v116 > .panel-5-editor .selected-size-field{grid-column:span 2!important}
  .dashboard-grid-v116 > .panel-5-editor .selected-colour-field{grid-column:span 2!important}
  .dashboard-grid-v116 > .panel-5-editor .selected-mini{grid-column:span 3!important}
  .dashboard-grid-v116 > .panel-5-editor .selected-inline-toggle{grid-column:span 3!important}
  .dashboard-grid-v116 > .panel-5-editor .selected-layer-buttons{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* The existing 2-column responsive breakpoint remains authoritative below
   1180px; just make Selected Element fully fluid there. */
@media(max-width:1180px){
  .dashboard-grid-v116 > .panel-5-editor #selectedControls{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .dashboard-grid-v116 > .panel-5-editor .selected-text-field{grid-column:1/-1!important}
  .dashboard-grid-v116 > .panel-5-editor .selected-font-field{grid-column:span 3!important}
  .dashboard-grid-v116 > .panel-5-editor .selected-size-field{grid-column:span 1!important}
  .dashboard-grid-v116 > .panel-5-editor .selected-colour-field{grid-column:span 2!important}
  .dashboard-grid-v116 > .panel-5-editor .selected-mini{grid-column:span 1!important}
  .dashboard-grid-v116 > .panel-5-editor .selected-inline-toggle{grid-column:span 2!important}
}

@media(max-width:700px){
  .dashboard-grid-v116 > .panel-5-editor #selectedControls{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .dashboard-grid-v116 > .panel-5-editor #selectedControls > *,
  .dashboard-grid-v116 > .panel-5-editor .selected-text-field,
  .dashboard-grid-v116 > .panel-5-editor .selected-font-field,
  .dashboard-grid-v116 > .panel-5-editor .selected-size-field,
  .dashboard-grid-v116 > .panel-5-editor .selected-colour-field,
  .dashboard-grid-v116 > .panel-5-editor .selected-divider-label,
  .dashboard-grid-v116 > .panel-5-editor .selected-swatch,
  .dashboard-grid-v116 > .panel-5-editor .selected-slider,
  .dashboard-grid-v116 > .panel-5-editor .selected-layer-buttons,
  .dashboard-grid-v116 > .panel-5-editor .selected-duplicate,
  .dashboard-grid-v116 > .panel-5-editor .selected-delete{grid-column:1/-1!important}
  .dashboard-grid-v116 > .panel-5-editor .selected-mini,
  .dashboard-grid-v116 > .panel-5-editor .selected-inline-toggle{grid-column:span 1!important}
  .dashboard-grid-v116 > .panel-5-editor .selected-layer-buttons{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ========================================================================== 
   v118 — MOBILE CONTAINMENT / BOTTOM PANELS FIX
   Layout-only. Keeps all Goal Maker logic and the fixed 900x500 output intact.
   ========================================================================== */
@media(max-width:860px){
  html,body{max-width:100%;overflow-x:hidden!important}
  body{padding:8px!important}
  .wrap,.dashboard-grid.dashboard-grid-v116,.dashboard-grid-v116 > *,
  .bottom-utility-grid,.bottom-utility-grid > *,
  .howto-card-bottom,.bottom-grid-export-only,.panel-5-full,
  .panel-body,.export-panel-body,.export-main-grid,.export-left-stack,
  .export-download-side,.goal-pack-panel,.goal-pack-head,
  .goal-pack-actions,.goal-pack-downloads{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Every one of the 8 main boxes is a true single-column mobile card. */
  .dashboard-grid.dashboard-grid-v116{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"left" "live" "visibility" "selected" "extra" "bottom"!important;
    gap:10px!important;
  }
  .dashboard-grid-v116 > .bottom-utility-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }

  /* How To Use: no second column can sit outside the viewport. */
  .howto-card-bottom{overflow:hidden!important;padding:12px!important}
  .howto-card-bottom .howto-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:7px!important;
  }
  .howto-card-bottom .howto-output{width:100%!important;text-align:center!important}
  .howto-card-bottom .howto-grid,
  .howto-card-bottom .howto-grid-compact{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
  }
  .howto-card-bottom .howto-step{
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:9px!important;
  }
  .howto-card-bottom .howto-step>div,
  .howto-card-bottom .howto-step strong,
  .howto-card-bottom .howto-step small,
  .howto-card-bottom .howto-important,
  .howto-card-bottom .howto-important span{
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  .howto-card-bottom .howto-important{
    display:block!important;
    width:100%!important;
    padding:9px!important;
  }

  /* Export: rights, download card and Goal Pack all stack inside the card. */
  .bottom-grid-export-only{overflow:hidden!important}
  .bottom-grid-export-only .panel-5-full{overflow:hidden!important}
  .bottom-grid-export-only .panel-body{padding:12px!important}
  .panel-5-full .export-main-grid,
  .export-main-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px!important;
  }
  .export-left-stack .export-top-row,
  .export-top-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  .export-rights{
    display:flex!important;
    align-items:flex-start!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow:hidden!important;
    padding:9px!important;
  }
  .export-rights input[type=checkbox]{flex:0 0 auto!important;margin-top:2px!important}
  .export-rights span{
    display:block!important;
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .export-main-grid .export-download-side{
    display:block!important;
    width:100%!important;
    padding:9px!important;
  }
  .export-main-grid .goal-maker-download-stat{width:100%!important;max-width:100%!important}
  .export-actions-clean,
  .goal-pack-actions,
  .goal-pack-downloads{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
    width:100%!important;
  }
  .export-actions-clean button,
  .goal-pack-actions button,
  .goal-pack-downloads button{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .goal-pack-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:7px!important;
  }
  .goal-pack-head>div,
  .goal-pack-head small,
  .goal-pack-note,
  .export-help{
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .goal-pack-count{align-self:flex-start!important}

  /* Selected Element: guarantee no button/input can exceed its mobile card. */
  .dashboard-grid-v116 > .panel-5-editor #selectedControls{
    grid-template-columns:minmax(0,1fr)!important;
    width:auto!important;
    margin-left:10px!important;
    margin-right:10px!important;
  }
  .dashboard-grid-v116 > .panel-5-editor #selectedControls > *{
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .dashboard-grid-v116 > .panel-5-editor .selected-layer-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  /* Extra Elements stays compact but cannot create horizontal overflow. */
  .dashboard-grid-v116 > .panel-6 .simplified-extra-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .dashboard-grid-v116 > .panel-6 .simplified-extra-grid > *,
  .dashboard-grid-v116 > .panel-6 .snap-tools > *{
    min-width:0!important;
    max-width:100%!important;
  }
}

@media(max-width:520px){
  .dashboard-grid-v116 > .panel-6 .simplified-extra-grid,
  .dashboard-grid-v116 > .panel-5-editor .selected-layer-buttons{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .panel-title{font-size:16px!important}
  .panel-body{padding:10px!important}
}


/* ==========================================================================
   v119 — MOBILE BOTTOM FLOW ORDER
   On stacked/tablet/mobile layouts the actionable Browser Source Export must
   come before the instructional How To Use card. Desktop keeps the balanced
   50/50 How To Use | Export row. UI order only; no export/goal logic changed.
   ========================================================================== */
@media (max-width:980px){
  .dashboard-grid > .bottom-utility-grid > .bottom-grid.bottom-grid-export-only{
    order:1 !important;
  }
  .dashboard-grid > .bottom-utility-grid > .howto-card-bottom{
    order:2 !important;
  }
}

/* ========================================================================== 
   v120 — RESTORE EXACT LIVE CREATION PREVIEW SIZE / DRAG AREA
   --------------------------------------------------------------------------
   Restore the proven V91/V92 canvas behavior after the v116 website layout
   accidentally allowed the black preview host to stretch wider than the real
   900 x 500 editor canvas. The visible black area and the draggable logical
   area are once again the SAME rectangle at every breakpoint.
   ========================================================================== */
.dashboard-grid-v116 > .panel-3 .canvas-area{
  width:min(900px,100%)!important;
  max-width:900px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.dashboard-grid-v116 > .panel-3 .preview-head,
.dashboard-grid-v116 > .panel-3 .canvas-tip{
  width:100%!important;
  max-width:900px!important;
}
.dashboard-grid-v116 > .panel-3 .canvas-host{
  width:min(900px,100%)!important;
  max-width:900px!important;
  aspect-ratio:900 / 500!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
}
.dashboard-grid-v116 > .panel-3 .stage-viewport{
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
.dashboard-grid-v116 > .panel-3 .stage{
  margin:0!important;
  overflow:hidden!important;
  transform-origin:top left!important;
}

/* On narrow screens the SAME 900:500 workspace scales down as one unit.
   Because fitStage() reads this host's exact width + height, the full visible
   black rectangle remains the full draggable text/shape area. */
@media(max-width:980px){
  .dashboard-grid-v116 > .panel-3 .canvas-area,
  .dashboard-grid-v116 > .panel-3 .canvas-host{
    width:100%!important;
    max-width:900px!important;
  }
}

/* ===== V122 — FONT FAMILY FULL-WIDTH LABEL + BUTTON BELOW ===== */
/* Keep the selected font name fully readable. The upload action belongs below it. */
.font-compact{
  display:grid;
  grid-template-columns:minmax(0,1fr)!important;
  gap:8px!important;
  align-items:stretch;
}
.font-compact .font-grow,
.font-compact #fontSelect,
.font-compact .font-upload{
  width:100%;
  min-width:0;
}
.font-compact #fontSelect{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.font-compact .font-upload{
  min-height:40px;
  justify-content:center;
}
/* The surrounding C4TM30W page supplies the single branded title. */
html.site-embedded .top-bar{display:none!important}