.lgb{
 --bg:#090f16;--panel:#101923;--panel2:#131e29;--line:#293845;--text:#edf3f8;--muted:#8795a3;
 --accent:#ff596b;--accent2:#ff8062;--ok:#78d99a;--warn:#e7bd69;
 width:100%;max-width:100%;min-width:0;margin:24px 0 70px;transform:none;color:var(--text);font-family:inherit;
 container-type:inline-size;
}
.lgb *{box-sizing:border-box}.lgb button,.lgb input,.lgb select,.lgb textarea{font:inherit}
.lgb-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#111b25,#0d151e)}
.lgb-title>span{display:block;color:#ff7584;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.lgb-title>div{display:flex;align-items:center;gap:10px;margin-top:5px}
.lgb-name{min-width:280px;max-width:520px;border:0;background:transparent;color:#fff;font-size:1.12rem;font-weight:900;outline:0}.lgb-save-state{color:#7d8b99;font-size:.67rem}.lgb-save-state.dirty{color:var(--warn)}
.lgb-top nav{display:flex;gap:7px}.lgb-top button,.layers button,.wide{min-height:38px;padding:7px 12px;border:1px solid #334554;border-radius:9px;background:#15202a;color:#e7edf2;font-weight:780;cursor:pointer}.lgb-top button.primary{border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}.lgb-top button:disabled{opacity:.3}
.lgb-access{margin-bottom:14px;padding:10px 14px;border:1px solid rgba(255,89,107,.25);border-radius:11px;background:rgba(255,89,107,.07);color:#c8d2db;font-size:.78rem}.lgb-access.ok{border-color:rgba(120,217,154,.25);background:rgba(120,217,154,.06)}.lgb-access a{color:#ff7b89;font-weight:800}
.lgb-grid{display:grid;grid-template-columns:260px minmax(0,1fr) 280px;min-height:780px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--bg)}
.lgb-left,.lgb-right{min-width:0;background:var(--panel)}.lgb-left{border-right:1px solid var(--line)}.lgb-right{border-left:1px solid var(--line);padding:15px;overflow-y:auto;max-height:calc(100vh - 90px);position:sticky;top:15px;align-self:start}
.lgb-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.lgb-tabs button{height:46px;border:0;border-bottom:2px solid transparent;background:transparent;color:#7f8d9b;font-size:.73rem;font-weight:850;cursor:pointer}.lgb-tabs button.active{border-bottom-color:var(--accent);color:#fff}
.lgb-panel{display:none;max-height:730px;overflow:auto;padding:14px}.lgb-panel.active{display:block}.lgb-panel h3{margin:15px 2px 9px;color:#cbd5de;font-size:.75rem}
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tools button{min-height:68px;padding:9px 6px;border:1px solid #293946;border-radius:11px;background:#131e29;color:#ff7180;font-size:1.03rem;font-weight:900;cursor:pointer}.tools button:hover{border-color:#526a7d;background:#192632}.tools b{display:block;margin-top:4px;color:#cbd5de;font-size:.67rem}
.lgb-vars details{margin-bottom:8px;border:1px solid #283845;border-radius:10px;background:#121d27}.lgb-vars summary{padding:10px;font-size:.72rem;font-weight:900;cursor:pointer}.lgb-vars details>button{display:flex;width:calc(100% - 12px);align-items:center;justify-content:space-between;gap:7px;margin:0 6px 6px;padding:8px;border:0;border-radius:8px;background:#192531;color:#dfe7ed;text-align:left;cursor:pointer}.lgb-vars b,.lgb-vars small{display:block}.lgb-vars b{font-size:.68rem}.lgb-vars small{margin-top:2px;color:#70808f;font-size:.55rem}.lgb-vars em{padding:2px 5px;border-radius:999px;background:rgba(255,89,107,.13);color:#ff7c8a;font-size:.52rem;font-style:normal;font-weight:900}
.template-card{display:flex;width:100%;align-items:center;gap:9px;margin-bottom:7px;padding:8px;border:1px solid #293946;border-radius:10px;background:#131e29;color:#e5ebf0;text-align:left;cursor:pointer}.template-card i{display:grid;width:58px;height:42px;place-items:center;background:#fff;color:#111;font-size:.55rem;font-style:normal}.template-card b,.template-card small{display:block}.template-card b{font-size:.68rem}.template-card small{margin-top:2px;color:#748391;font-size:.58rem}
.lgb-work{display:flex;min-width:0;flex-direction:column;background:#081019}
.lgb-toolbar{display:flex;min-height:64px;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;border-bottom:1px solid var(--line);background:#0e1720}.lgb-toolbar>div{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.lgb-toolbar label{display:grid;gap:4px;color:#82909d;font-size:.58rem;font-weight:800}.lgb-toolbar input,.lgb-toolbar select,.props input,.props select,.props textarea,.type-props input,.type-props select,.type-props textarea{min-height:34px;padding:6px 8px;border:1px solid #324351;border-radius:8px;background:#0a121a;color:#edf3f8;outline:0}.lgb-toolbar input{width:72px}.lgb-toolbar label:has(input[type=checkbox]){display:flex;align-items:center;gap:6px}.lgb-toolbar input[type=checkbox]{width:auto;min-height:auto}
.lgb-profile-note{display:flex;min-height:42px;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 13px;border-bottom:1px solid var(--line);background:#0c151e;color:#9aa7b4;font-size:.64rem}.lgb-profile-note b{padding:3px 7px;border-radius:999px;background:#1a2834;color:#dfe7ed;font-size:.56rem}.lgb-profile-note.status-verified b{background:rgba(120,217,154,.12);color:#91e0ad}.lgb-profile-note.status-subtype_required b,.lgb-profile-note.status-versioned b{background:rgba(231,189,105,.12);color:#eac978}.lgb-profile-note.status-manual_review b{background:rgba(113,167,214,.12);color:#8cbce5}.lgb-profile-note.status-locked b{background:rgba(255,89,107,.13);color:#ff7d8b}.lgb-profile-note small{color:#667685}
.lgb-canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 13px;border-bottom:1px solid var(--line);background:#0d151e;color:#6f7f8e;font-size:.6rem}.lgb-zoom{display:flex;gap:5px}.lgb-zoom button{min-width:34px;height:32px;padding:0 9px;border:1px solid #314351;border-radius:8px;background:#15212c;color:#e2e9ef;font-weight:850;cursor:pointer}.lgb-zoom-value{min-width:62px!important}
.lgb-stage{position:relative;display:flex;min-height:620px;height:calc(100vh - 345px);max-height:900px;align-items:center;justify-content:center;overflow:auto;padding:70px;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.045),transparent 38%),#070d14;cursor:default}.lgb-stage.pannable{cursor:grab}.lgb-stage.pannable:active{cursor:grabbing}.lgb-canvas{display:flex;min-width:100%;min-height:100%;align-items:center;justify-content:center}
.lgb-label{position:relative;flex:0 0 auto;overflow:hidden;background:#fff;color:#111;box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12);transform-origin:center}.lgb-label.grid{background-image:linear-gradient(to right,rgba(0,0,0,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.07) 1px,transparent 1px);background-size:var(--grid) var(--grid)}
.obj{position:absolute;display:flex;align-items:stretch;justify-content:stretch;min-width:4px;min-height:4px;transform-origin:center;user-select:none;touch-action:none;cursor:move}.obj.selected{outline:2px solid var(--accent);outline-offset:2px}.txt{width:100%;height:100%;overflow:hidden;white-space:pre-wrap;word-break:break-word}.variable{background:rgba(255,226,95,.10)}.code{display:block;width:100%;height:100%;fill:#000}.obj-image img{width:100%;height:100%;object-fit:contain}.image-placeholder{display:grid;width:100%;height:100%;place-items:center;border:1px dashed #7c8791;color:#4c5862;font-size:9px}.line-object{width:100%;margin:auto 0}.rect-object,.ellipse-object{width:100%;height:100%;border-style:solid}.ellipse-object{border-radius:50%}.filled-object{width:100%;height:100%}.clipart-object,.clipart-object svg{width:100%;height:100%}.clipart-object svg{display:block}.eac-object{display:grid;width:100%;height:100%;place-items:center;font-family:Arial;font-weight:950;letter-spacing:-.12em}.chz-object{display:grid;width:100%;height:100%;place-content:center;border:2px solid #111;border-radius:3px;color:#111;font-family:Arial;font-size:9px;font-weight:800;line-height:1.05;text-align:center}
.resize{position:absolute;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}.resize.nw{left:-6px;top:-6px;cursor:nwse-resize}.resize.ne{right:-6px;top:-6px;cursor:nesw-resize}.resize.sw{left:-6px;bottom:-6px;cursor:nesw-resize}.resize.se{right:-6px;bottom:-6px;cursor:nwse-resize}
.lgb-work footer{display:flex;min-height:36px;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;border-top:1px solid var(--line);background:#0d161f;color:#748493;font-size:.61rem}
.empty-props{padding-bottom:15px;border-bottom:1px solid var(--line)}.empty-props b{font-size:.78rem}.empty-props p{margin:5px 0 0;color:#7d8b99;font-size:.66rem}.props{padding-bottom:17px;border-bottom:1px solid var(--line)}.props>header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.props>header span{display:flex;gap:5px}.props>header button{width:30px;height:30px;border:1px solid #354654;border-radius:7px;background:#17222d;color:#e7edf2;cursor:pointer}.props label,.type-props label{display:grid;gap:4px;margin-bottom:8px;color:#8594a1;font-size:.58rem;font-weight:800}.four,.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.format-buttons{display:flex;gap:5px;margin:6px 0 10px}.format-buttons button{width:34px;height:31px;border:1px solid #334553;border-radius:7px;background:#15202a;color:#e5edf2;cursor:pointer}.format-buttons button.active{border-color:var(--accent);background:rgba(255,89,107,.12);color:#ff7c8a}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center}.check input{width:auto!important;min-height:auto!important}.help{color:#728190;font-size:.61rem;line-height:1.45}.wide{width:100%}.layers{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.preflight{margin-top:16px}.preflight>header{display:flex;align-items:center;justify-content:space-between;gap:8px}.preflight b{font-size:.72rem}.preflight small{color:#728190;font-size:.56rem}.preflight>div{display:grid;gap:6px;margin-top:9px}.preflight section,.preflight .ok{padding:8px 9px;border:1px solid #2a3a47;border-radius:9px;background:#111b24}.preflight section>b{display:block;margin-bottom:3px;font-size:.55rem;text-transform:uppercase}.preflight section p{margin:0;color:#bfc9d1;font-size:.61rem;line-height:1.4}.preflight section small{display:block;margin-top:4px}.pf-error{border-color:rgba(255,113,128,.3)!important}.pf-error>b{color:#ff7180}.pf-warning{border-color:rgba(231,189,105,.3)!important}.pf-warning>b{color:#e8c573}.pf-info>b{color:#83b5df}.ok{color:#93dfac;font-size:.62rem}
.lgb-modal[hidden],.lgb-clipart-modal[hidden]{display:none!important}.lgb-modal,.lgb-clipart-modal{position:fixed;inset:0;z-index:2147482000;display:grid;place-items:center;padding:20px}.lgb-modal>i,.lgb-clipart-modal>i{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}.lgb-modal article,.lgb-clipart-modal article{position:relative;z-index:2;width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:22px;border:1px solid #334654;border-radius:18px;background:#111b25;box-shadow:0 28px 90px rgba(0,0,0,.55)}.lgb-modal article>button,.lgb-clipart-modal header>button{float:right;width:32px;height:32px;border:0;border-radius:50%;background:#1d2a36;color:#fff;cursor:pointer}.lgb-clipart-modal article{width:min(820px,100%)}.lgb-clipart-modal header{display:flex;align-items:center;justify-content:space-between;gap:10px}.lgb-clipart-modal header small{display:block;margin-top:3px;color:#7b8996}.lgb-clipart-modal input[type=search]{width:100%;min-height:40px;margin:12px 0;padding:8px 10px;border:1px solid #344755;border-radius:9px;background:#0b131b;color:#fff}.lgb-clipart-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.lgb-clipart-grid button{display:grid;gap:7px;min-height:120px;place-items:center;padding:10px;border:1px solid #2c3c49;border-radius:11px;background:#15212c;color:#dfe7ed;cursor:pointer}.lgb-clipart-grid span{display:grid;width:56px;height:56px;place-items:center}.lgb-clipart-grid svg{width:100%;height:100%;color:#edf2f5}.lgb-clipart-grid b{font-size:.65rem;text-align:center}
.lgb-toast{position:fixed;z-index:2147482100;left:50%;bottom:25px;max-width:520px;padding:10px 14px;border:1px solid #3b4c5a;border-radius:10px;background:#121d27;color:#edf3f8;opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:.17s}.lgb-toast.show{opacity:1;transform:translate(-50%,0)}
.muted{color:#748391;font-size:.64rem}


@media(max-width:1120px){.lgb-grid{grid-template-columns:250px minmax(0,1fr)}.lgb-right{position:static;grid-column:1/-1;max-height:none;border-left:0;border-top:1px solid var(--line)}.lgb-stage{height:620px}}
@media(max-width:780px){.lgb-top{align-items:stretch;flex-direction:column}.lgb-grid{display:block}.lgb-panel{max-height:330px}.lgb-stage{height:65vh;min-height:480px;padding:42px 20px}.lgb-canvas-toolbar{align-items:flex-start;flex-direction:column}.lgb-clipart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* 0.4.0 — editor adapts to the CONTENT container, not 100vw */
@container (max-width: 1120px){
  .lgb-grid{grid-template-columns:240px minmax(0,1fr)}
  .lgb-right{
    position:static;
    grid-column:1/-1;
    max-height:none;
    border-left:0;
    border-top:1px solid var(--line)
  }
}
@container (max-width: 760px){
  .lgb-grid{display:block}
  .lgb-panel{max-height:340px}
}

/* free rotation */
.rotate-handle{
  position:absolute;
  z-index:15;
  left:50%;
  top:5px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  transform:translateX(-50%);
  border:2px solid #fff;
  border-radius:50%;
  background:#ff596b;
  color:#fff;
  box-shadow:0 2px 7px rgba(0,0,0,.35);
  font-style:normal;
  font-size:13px;
  line-height:1;
  cursor:grab;
  touch-action:none
}
.rotate-handle:active{cursor:grabbing}
.obj.locked{cursor:not-allowed}
.obj.locked.selected{outline-style:dashed}

/* clearer layer / lock controls */
.rotation-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:6px;
  align-items:end;
  margin:10px 0
}
.rotation-controls label{margin:0!important}
.rotation-controls button{
  height:34px;
  padding:0 8px;
  border:1px solid #334553;
  border-radius:7px;
  background:#15202a;
  color:#dfe7ed;
  font-weight:800;
  cursor:pointer
}
.object-actions{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #263744
}
.object-actions>b{
  display:block;
  margin-bottom:8px;
  color:#cbd5de;
  font-size:.64rem
}
.layer-buttons{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px
}
.layer-buttons button{
  display:grid;
  min-height:50px;
  place-items:center;
  padding:5px 2px;
  border:1px solid #334553;
  border-radius:8px;
  background:#15202a;
  color:#e6edf2;
  font-size:16px;
  cursor:pointer
}
.layer-buttons small{
  display:block;
  color:#7e8d9a;
  font-size:.48rem;
  line-height:1.1
}
.lock-button{
  display:flex;
  width:100%;
  min-height:38px;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:7px;
  border:1px solid #334553;
  border-radius:8px;
  background:#15202a;
  color:#dfe7ed;
  cursor:pointer
}
.lock-button.active{
  border-color:#e8b848;
  background:rgba(232,184,72,.10);
  color:#f1c75d
}

/* persistent media library */
.lgb-media-modal[hidden]{display:none!important}
.lgb-media-modal{
  position:fixed;
  inset:0;
  z-index:2147482000;
  display:grid;
  place-items:center;
  padding:20px
}
.lgb-media-modal>i{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px)
}
.lgb-media-modal>article{
  position:relative;
  z-index:2;
  width:min(900px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  padding:20px;
  border:1px solid #334654;
  border-radius:18px;
  background:#111b25;
  box-shadow:0 28px 90px rgba(0,0,0,.55)
}
.lgb-media-modal header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.lgb-media-modal header small{
  display:block;
  margin-top:4px;
  color:#7b8996
}
.lgb-media-modal header>button{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#1d2a36;
  color:#fff;
  cursor:pointer
}
.lgb-media-actions{
  margin:14px 0
}
.lgb-media-actions button{
  min-height:38px;
  padding:7px 12px;
  border:1px solid #3a4d5c;
  border-radius:8px;
  background:#17242f;
  color:#e7edf2;
  font-weight:800;
  cursor:pointer
}
.lgb-media-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px
}
.media-card{
  position:relative;
  overflow:hidden;
  border:1px solid #2c3d4a;
  border-radius:11px;
  background:#131f2a
}
.media-preview{
  display:grid;
  width:100%;
  aspect-ratio:1.35;
  place-items:center;
  padding:8px;
  border:0;
  border-bottom:1px solid #2c3d4a;
  background:#eef1f3;
  cursor:pointer
}
.media-preview img{
  max-width:100%;
  max-height:100%;
  object-fit:contain
}
.media-loading{
  color:#59656f;
  font-size:.62rem
}
.media-card>div{
  padding:8px 30px 8px 8px
}
.media-card b,.media-card small{display:block}
.media-card b{
  overflow:hidden;
  color:#dfe7ed;
  font-size:.62rem;
  text-overflow:ellipsis;
  white-space:nowrap
}
.media-card small{
  margin-top:3px;
  color:#748391;
  font-size:.52rem
}
.media-delete{
  position:absolute;
  right:6px;
  bottom:7px;
  width:24px;
  height:24px;
  border:0;
  border-radius:6px;
  background:#273642;
  color:#ff7d8b;
  cursor:pointer
}

/* clipart sections */
.lgb-clipart-grid{
  display:block!important
}
.clip-group{
  margin-bottom:18px
}
.clip-group h3{
  margin:0 0 8px;
  color:#cbd5de;
  font-size:.72rem
}
.clip-group>div{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px
}
.clip-group button{
  display:grid;
  gap:7px;
  min-height:112px;
  place-items:center;
  padding:9px;
  border:1px solid #2c3c49;
  border-radius:10px;
  background:#15212c;
  color:#dfe7ed;
  cursor:pointer
}
.clip-group button:hover{
  border-color:#536a7d;
  background:#1a2834
}
.clip-group span{
  display:grid;
  width:54px;
  height:54px;
  place-items:center
}
.clip-group svg{
  width:100%;
  height:100%;
  color:#edf2f5
}
.clip-group button b{
  font-size:.57rem;
  text-align:center
}

@container (max-width: 760px){
  .lgb-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clip-group>div{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* =========================================================
   0.5.0 — readable typography
   ========================================================= */
.lgb{
  font-size:15px;
}
.lgb-title>span{font-size:.78rem}
.lgb-name{font-size:1.25rem}
.lgb-save-state{font-size:.78rem}
.lgb-access{font-size:.9rem;line-height:1.55}
.lgb-tabs button{font-size:.84rem}
.lgb-panel h3{font-size:.86rem}
.tools b{font-size:.78rem}
.lgb-vars summary{font-size:.82rem}
.lgb-vars b{font-size:.79rem}
.lgb-vars small{font-size:.66rem}
.template-card b{font-size:.79rem}
.template-card small{font-size:.68rem}
.lgb-toolbar label{font-size:.7rem}
.lgb-profile-note{font-size:.75rem;line-height:1.45}
.lgb-profile-note b{font-size:.68rem}
.lgb-profile-note small{font-size:.68rem}
.lgb-canvas-toolbar{font-size:.7rem}
.lgb-work footer{font-size:.72rem}
.empty-props b{font-size:.9rem}
.empty-props p{font-size:.77rem;line-height:1.45}
.props label,.type-props label{font-size:.72rem}
.help{font-size:.72rem}
.object-actions>b{font-size:.75rem}
.layer-buttons small{font-size:.58rem}
.preflight b{font-size:.82rem}
.preflight small{font-size:.67rem}
.preflight section>b{font-size:.66rem}
.preflight section p{font-size:.74rem}
.ok{font-size:.74rem}
.muted{font-size:.75rem}

/* export */
.lgb-export-modal[hidden]{display:none!important}
.lgb-export-modal{
  position:fixed;
  inset:0;
  z-index:2147482000;
  display:grid;
  place-items:center;
  padding:20px
}
.lgb-export-modal>i{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px)
}
.lgb-export-modal>article{
  position:relative;
  z-index:2;
  width:min(760px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  padding:22px;
  border:1px solid #334654;
  border-radius:18px;
  background:#111b25;
  box-shadow:0 28px 90px rgba(0,0,0,.55)
}
.lgb-export-modal header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px
}
.lgb-export-modal header b{
  display:block;
  font-size:1rem
}
.lgb-export-modal header small{
  display:block;
  margin-top:4px;
  color:#81909d;
  font-size:.78rem
}
.lgb-export-modal header>button{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#1d2a36;
  color:#fff;
  cursor:pointer
}
.lgb-export-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}
.lgb-export-options>button{
  display:flex;
  min-height:170px;
  flex-direction:column;
  align-items:flex-start;
  padding:15px;
  border:1px solid #304250;
  border-radius:12px;
  background:#14202b;
  color:#dfe7ed;
  text-align:left;
  cursor:pointer
}
.lgb-export-options>button:hover{
  border-color:#5a7184;
  background:#192936
}
.lgb-export-options b{
  margin-bottom:8px;
  color:#fff;
  font-size:.9rem
}
.lgb-export-options span{
  flex:1;
  color:#9aa8b4;
  font-size:.76rem;
  line-height:1.5
}
.lgb-export-options small{
  margin-top:10px;
  color:#ff7e8c;
  font-size:.72rem;
  font-weight:850
}
.lgb-export-note{
  margin-top:13px;
  padding:11px 13px;
  border:1px solid rgba(231,189,105,.25);
  border-radius:10px;
  background:rgba(231,189,105,.06);
  color:#bfc8d0;
  font-size:.76rem;
  line-height:1.55
}

@container (max-width:720px){
  .lgb-export-options{grid-template-columns:1fr}
  .lgb-export-options>button{min-height:120px}
}


/* 0.6.0 — восстановление черновика */
.lgb-save-state.dirty{font-weight:800}
.lgb-modal article h2{margin:.35rem 0 .7rem;font-size:1.35rem}
.lgb-modal article p{color:#aeb9c3;font-size:.9rem;line-height:1.6}
.lgb-modal article .primary.link,
.lgb-modal article .link{
 display:inline-flex;min-height:40px;align-items:center;justify-content:center;
 margin:6px 7px 0 0;padding:8px 13px;border-radius:9px;text-decoration:none;font-weight:850
}
.lgb-modal article .primary.link{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}


/* ============================================================
   0.7.0 — full editor UX
   ============================================================ */

.lgb{
  --lgb-tools-width:286px;
  --lgb-inspector-width:348px;
  --lgb-workspace-width:100%;
  --lgb-workspace-height:780px;

  width:var(--lgb-workspace-width) !important;
  max-width:none !important;
  min-width:860px !important;
  margin:24px 0 64px !important;
  transform:none !important;
  container-type:normal !important;

  font-size:16px !important;
  line-height:1.45 !important;
}

.lgb *{
  scrollbar-width:thin;
  scrollbar-color:#526270 #111a23;
}

/* app shell */
.lgb-grid{
  display:grid !important;
  grid-template-columns:var(--lgb-tools-width) minmax(420px,1fr) var(--lgb-inspector-width) !important;
  width:100% !important;
  height:var(--lgb-workspace-height) !important;
  min-height:720px !important;
  max-height:none !important;
  overflow:hidden !important;
  align-items:stretch !important;
}

.lgb-left,
.lgb-work,
.lgb-right{
  min-width:0 !important;
  min-height:0 !important;
  height:100% !important;
}

.lgb-left{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

.lgb-right{
  position:static !important;
  grid-column:auto !important;
  align-self:stretch !important;
  height:100% !important;
  max-height:none !important;
  padding:18px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  border-left:1px solid var(--line) !important;
  border-top:0 !important;
}

.lgb-work{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

.lgb-panel{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:16px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* Top bar */
.lgb-top{
  min-height:82px !important;
  padding:16px 18px !important;
}

.lgb-title>span{
  font-size:13px !important;
}

.lgb-name{
  min-width:260px !important;
  font-size:20px !important;
}

.lgb-save-state{
  font-size:13px !important;
}

.lgb-top button{
  min-height:42px !important;
  padding:8px 14px !important;
  font-size:14px !important;
}

.lgb-access{
  padding:12px 15px !important;
  font-size:14px !important;
  line-height:1.5 !important;
}

/* left tools */
.lgb-tabs button{
  height:52px !important;
  font-size:14px !important;
}

.lgb-panel h3{
  margin:18px 2px 10px !important;
  font-size:14px !important;
}

.tools{
  gap:10px !important;
}

.tools button{
  min-height:82px !important;
  padding:10px 6px !important;
  font-size:21px !important;
}

.tools b{
  margin-top:6px !important;
  font-size:13px !important;
  line-height:1.25 !important;
}

.lgb-vars summary{
  font-size:14px !important;
}

.lgb-vars b{
  font-size:13px !important;
}

.lgb-vars small{
  font-size:12px !important;
}

.lgb-vars em{
  font-size:11px !important;
}

.template-card b{
  font-size:13px !important;
}

.template-card small{
  font-size:12px !important;
}

/* compact top toolbar */
.lgb-toolbar{
  display:flex !important;
  flex:0 0 auto !important;
  min-height:84px !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:12px 15px !important;
}

.lgb-toolbar-main{
  display:flex !important;
  flex:1 1 auto !important;
  align-items:end !important;
  gap:14px !important;
  min-width:0 !important;
}

.lgb-size-group{
  display:grid !important;
  grid-template-columns:130px 92px 92px !important;
  gap:8px !important;
  flex:0 0 auto !important;
}

.lgb-profile-field{
  flex:1 1 320px !important;
  min-width:240px !important;
  max-width:520px !important;
}

.lgb-subtype-field{
  flex:1 1 220px !important;
  min-width:180px !important;
  max-width:320px !important;
}

.lgb-toolbar label{
  position:relative !important;
  display:grid !important;
  gap:5px !important;
  margin:0 !important;
  color:#9aa8b5 !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}

.lgb-toolbar input,
.lgb-toolbar select{
  width:100% !important;
  height:40px !important;
  min-height:40px !important;
  padding:7px 10px !important;
  font-size:14px !important;
}

.lgb-mm-field span{
  position:absolute !important;
  right:8px !important;
  bottom:11px !important;
  color:#6f7d8a !important;
  font-size:11px !important;
  pointer-events:none !important;
}

.lgb-mm-field input{
  padding-right:29px !important;
}

.lgb-grid-toggle{
  display:flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  gap:7px !important;
  white-space:nowrap !important;
}

.lgb-grid-toggle input{
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
}

/* category note */
.lgb-profile-note{
  flex:0 0 auto !important;
  min-height:50px !important;
  padding:10px 15px !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

.lgb-profile-note b,
.lgb-profile-note small{
  font-size:12px !important;
}

/* canvas toolbar */
.lgb-canvas-toolbar{
  display:flex !important;
  flex:0 0 auto !important;
  min-height:52px !important;
  align-items:center !important;
  gap:12px !important;
  padding:8px 14px !important;
  font-size:13px !important;
}

.lgb-zoom{
  flex:0 0 auto !important;
}

.lgb-zoom button{
  height:36px !important;
  min-height:36px !important;
  font-size:14px !important;
}

.lgb-canvas-hint{
  flex:1 1 auto !important;
  color:#72818e !important;
  text-align:center !important;
  font-size:12px !important;
}

.lgb-fullscreen-btn{
  flex:0 0 auto !important;
  height:36px !important;
  padding:0 12px !important;
  border:1px solid #314351 !important;
  border-radius:8px !important;
  background:#15212c !important;
  color:#e5ecf2 !important;
  font-size:13px !important;
  font-weight:850 !important;
  cursor:pointer !important;
}

/* stage fills remaining height */
.lgb-stage{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  padding:42px !important;
  overflow:auto !important;
}

.lgb-canvas{
  min-width:100% !important;
  min-height:100% !important;
}

/* footer */
.lgb-work footer{
  flex:0 0 auto !important;
  min-height:42px !important;
  padding:7px 14px !important;
  font-size:12px !important;
}

/* inspector */
.empty-props b,
.props>header b{
  font-size:15px !important;
}

.empty-props p{
  margin-top:6px !important;
  font-size:13px !important;
  line-height:1.5 !important;
}

.props label,
.type-props label{
  margin-bottom:10px !important;
  color:#9aa7b3 !important;
  font-size:13px !important;
  line-height:1.25 !important;
}

.props input,
.props select,
.props textarea,
.type-props input,
.type-props select,
.type-props textarea{
  width:100% !important;
  height:40px !important;
  min-height:40px !important;
  padding:7px 10px !important;
  font-size:14px !important;
}

.props textarea,
.type-props textarea{
  height:auto !important;
  min-height:96px !important;
  resize:vertical !important;
}

.lgb-geometry{
  display:grid !important;
  gap:10px !important;
  margin-bottom:10px !important;
}

.lgb-geometry-row{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}

.lgb-geometry label{
  position:relative !important;
  margin:0 !important;
}

.lgb-geometry label>span{
  float:right !important;
  color:#697987 !important;
  font-size:11px !important;
  font-weight:600 !important;
}

.two{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}

/* Do not stretch simple numeric settings to a ridiculous width */
.type-props>label:has(input[type="number"]){
  max-width:180px !important;
}

.type-props>label:has(input[type="color"]){
  max-width:180px !important;
}

.type-props>label:has(input[data-tprop="barcodeText"]){
  max-width:none !important;
}

.type-props>label:has(input[data-tprop="quietZone"]){
  max-width:170px !important;
}

/* rotation inputs */
.rotation-controls{
  grid-template-columns:minmax(110px,1fr) 82px 82px !important;
  gap:7px !important;
  align-items:end !important;
}

.rotation-controls button{
  height:40px !important;
  font-size:13px !important;
}

/* Real rotation handle: ABOVE the selected object, not inside the barcode */
.rotate-handle{
  left:50% !important;
  top:-34px !important;
  width:24px !important;
  height:24px !important;
  transform:translateX(-50%) !important;
  border:2px solid #fff !important;
  border-radius:50% !important;
  background:#ff596b !important;
  color:#fff !important;
  font-size:14px !important;
  cursor:grab !important;
}

.rotate-handle::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:22px !important;
  width:1px !important;
  height:12px !important;
  transform:translateX(-50%) !important;
  background:#ff596b !important;
}

.rotate-handle:active{
  cursor:grabbing !important;
}

/* selection / handles easier to grab */
.resize{
  width:12px !important;
  height:12px !important;
}

.obj.selected{
  outline:2px solid #ff596b !important;
  outline-offset:1px !important;
}

/* layer controls */
.object-actions>b{
  font-size:13px !important;
}

.layer-buttons{
  gap:7px !important;
}

.layer-buttons button{
  min-height:58px !important;
  font-size:18px !important;
}

.layer-buttons small{
  font-size:11px !important;
}

.lock-button{
  min-height:42px !important;
  font-size:13px !important;
}

.help{
  font-size:12px !important;
  line-height:1.5 !important;
}

/* preflight */
.preflight>header b{
  font-size:14px !important;
}

.preflight>header small{
  font-size:12px !important;
}

.preflight section>b{
  font-size:12px !important;
}

.preflight section p{
  font-size:13px !important;
}

.preflight section small{
  font-size:11px !important;
}

.preflight .ok{
  font-size:13px !important;
}

/* fullscreen */
html.lgb-no-scroll,
body.lgb-no-scroll{
  overflow:hidden !important;
}

.lgb.is-fullscreen{
  position:fixed !important;
  z-index:2147481400 !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  min-width:0 !important;
  margin:0 !important;
  padding:10px !important;
  background:#080e15 !important;
}

body.admin-bar .lgb.is-fullscreen{
  top:32px !important;
  height:calc(100vh - 32px) !important;
}

.lgb.is-fullscreen .lgb-top{
  margin-bottom:8px !important;
}

.lgb.is-fullscreen .lgb-access{
  margin-bottom:8px !important;
}

.lgb.is-fullscreen .lgb-grid{
  height:calc(100% - 102px) !important;
  min-height:0 !important;
}

/* On desktop inspector NEVER falls below canvas.
   Only genuinely narrow devices switch to stacked mode. */
@media (max-width:900px){
  .lgb{
    width:100% !important;
    min-width:0 !important;
  }

  .lgb-grid{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
  }

  .lgb-left,
  .lgb-right{
    height:auto !important;
  }

  .lgb-panel{
    max-height:420px !important;
  }

  .lgb-stage{
    height:65vh !important;
    min-height:520px !important;
  }

  .lgb-toolbar{
    align-items:stretch !important;
    flex-direction:column !important;
  }

  .lgb-toolbar-main{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .lgb-size-group{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:782px){
  body.admin-bar .lgb.is-fullscreen{
    top:46px !important;
    height:calc(100vh - 46px) !important;
  }
}


/* ============================================================
   0.7.1 — overlays are portalled to body
   ============================================================ */

html.lgb-overlay-open,
body.lgb-overlay-open{
  overflow:hidden !important;
}

.lgb-modal,
.lgb-clipart-modal,
.lgb-media-modal,
.lgb-export-modal{
  --accent:#ff596b;
  --accent2:#ff8062;
  --line:#293845;
  --text:#edf3f8;

  position:fixed !important;
  z-index:2147483000 !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  margin:0 !important;
  padding:24px !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.lgb-modal[hidden],
.lgb-clipart-modal[hidden],
.lgb-media-modal[hidden],
.lgb-export-modal[hidden]{
  display:none !important;
}

.lgb-modal>i,
.lgb-clipart-modal>i,
.lgb-media-modal>i,
.lgb-export-modal>i{
  position:absolute !important;
  z-index:0 !important;
  inset:0 !important;
  background:rgba(3,7,11,.76) !important;
  backdrop-filter:none !important;
  cursor:default !important;
}

.lgb-modal>article,
.lgb-clipart-modal>article,
.lgb-media-modal>article,
.lgb-export-modal>article{
  position:relative !important;
  z-index:1 !important;
  inset:auto !important;
  float:none !important;
  transform:none !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
  border:1px solid #354858 !important;
  border-radius:16px !important;
  background:#111b25 !important;
  box-shadow:0 30px 90px rgba(0,0,0,.65) !important;
  color:#edf3f8 !important;
}

/* login/payment */
.lgb-modal>article{
  width:min(620px,calc(100vw - 40px)) !important;
  max-height:min(720px,calc(100vh - 48px)) !important;
  padding:24px !important;
  overflow:auto !important;
}

/* symbols/cliparts: large usable catalogue */
.lgb-clipart-modal>article{
  display:flex !important;
  width:min(1120px,calc(100vw - 48px)) !important;
  height:min(780px,calc(100vh - 48px)) !important;
  max-height:none !important;
  flex-direction:column !important;
  padding:20px !important;
  overflow:hidden !important;
}

.lgb-clipart-modal header{
  flex:0 0 auto !important;
  min-height:48px !important;
}

.lgb-clipart-modal input[type=search]{
  flex:0 0 auto !important;
  height:42px !important;
  margin:12px 0 14px !important;
  font-size:14px !important;
}

.lgb-clipart-grid{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  padding-right:5px !important;
}

.clip-group{
  margin-bottom:22px !important;
}

.clip-group h3{
  margin:0 0 10px !important;
  font-size:15px !important;
}

.clip-group>div{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:10px !important;
}

.clip-group button{
  min-height:126px !important;
  padding:12px 8px !important;
}

.clip-group span{
  width:62px !important;
  height:62px !important;
}

.clip-group button b{
  font-size:12px !important;
  line-height:1.25 !important;
}

/* media */
.lgb-media-modal>article{
  width:min(1040px,calc(100vw - 48px)) !important;
  max-height:calc(100vh - 48px) !important;
  padding:20px !important;
  overflow:auto !important;
}

/* export */
.lgb-export-modal>article{
  width:min(820px,calc(100vw - 48px)) !important;
  max-height:calc(100vh - 48px) !important;
  padding:22px !important;
  overflow:auto !important;
}

/* consistent close buttons */
.lgb-modal article>button[data-act="close"],
.lgb-clipart-modal header>button,
.lgb-media-modal header>button,
.lgb-export-modal header>button{
  display:grid !important;
  width:36px !important;
  height:36px !important;
  place-items:center !important;
  flex:0 0 36px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#1d2a36 !important;
  color:#fff !important;
  font-size:18px !important;
  cursor:pointer !important;
}

/* Prevent underlying support widget from competing visually */
body.lgb-overlay-open .labelgo-support-widget,
body.lgb-overlay-open [class*="support-widget"]{
  visibility:hidden !important;
}

@media(max-width:820px){
  .lgb-modal,
  .lgb-clipart-modal,
  .lgb-media-modal,
  .lgb-export-modal{
    padding:10px !important;
  }

  .lgb-clipart-modal>article{
    width:100% !important;
    height:calc(100vh - 20px) !important;
  }

  .clip-group>div{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* ============================================================
   0.7.2 — exact reference signs + better horizontal balance
   ============================================================ */

.lgb{
  --lgb-tools-width:300px !important;
  --lgb-inspector-width:330px !important;
}

/* The app may have a negative margin-left set by JS so it starts
   immediately after the theme sidebar instead of the centered article. */
.lgb{
  transition:width .08s linear, margin-left .08s linear;
}

.clipart-object{
  display:flex !important;
  width:100% !important;
  height:100% !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

.clipart-object img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  pointer-events:none !important;
  user-select:none !important;
}

.clip-group span{
  display:flex !important;
  width:78px !important;
  height:72px !important;
  align-items:center !important;
  justify-content:center !important;
}

.clip-group span img{
  display:block !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
}

.clip-group button{
  min-height:138px !important;
}

.clip-group button b{
  min-height:30px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Official/color marks should be seen against neutral light preview,
   close to the source library and easy to judge before placing. */
.clip-group button span{
  padding:5px !important;
  border-radius:7px !important;
  background:#f7f8f9 !important;
}

/* more horizontal room belongs to canvas, not inspector */
.lgb-grid{
  grid-template-columns:300px minmax(480px,1fr) 330px !important;
}

@media(max-width:1180px){
  .lgb{
    --lgb-tools-width:270px !important;
    --lgb-inspector-width:310px !important;
  }
  .lgb-grid{
    grid-template-columns:270px minmax(420px,1fr) 310px !important;
  }
}


/* 0.7.3 — exact clipart rendering, no legacy SVG */
.obj-clipart,
.obj-clipart .clipart-object{
  background:transparent !important;
}

.obj-clipart .clipart-object{
  display:block !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:visible !important;
  color:initial !important;
}

.obj-clipart .clipart-object>img{
  position:static !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  filter:none !important;
  clip-path:none !important;
  mask:none !important;
  image-rendering:auto !important;
}

.obj-clipart .clipart-object>svg{
  display:none !important;
}


/* ============================================================
   0.7.4 — expand editor to the LEFT only
   ============================================================ */

.lgb{
  box-sizing:border-box !important;
  overflow:visible !important;
}

/* Keep the app within its own calculated width.
   No extra right-side growth beyond the normal content boundary. */
.lgb-top,
.lgb-access,
.lgb-grid{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

.lgb-grid{
  grid-template-columns:286px minmax(520px,1fr) 318px !important;
}

/* Slightly more room for canvas, slightly less for side panels. */
.lgb{
  --lgb-tools-width:286px !important;
  --lgb-inspector-width:318px !important;
}

/* Prevent internal inputs from forcing the inspector wider. */
.lgb-right,
.lgb-right *,
.lgb-left,
.lgb-left *{
  min-width:0 !important;
}

.lgb-right input,
.lgb-right select,
.lgb-right textarea{
  max-width:100% !important;
}

@media(max-width:1180px){
  .lgb{
    --lgb-tools-width:260px !important;
    --lgb-inspector-width:300px !important;
  }

  .lgb-grid{
    grid-template-columns:260px minmax(440px,1fr) 300px !important;
  }
}


/* ============================================================
   0.7.5 — built-in asset path + left expansion fixes
   ============================================================ */

.obj-clipart img.clipart-load-error{
  visibility:hidden !important;
}

/* margin-left is intentionally set inline with !important by JS.
   This rule documents why: base `.lgb` margin itself is !important. */
@media(min-width:1101px){
  .lgb{
    will-change:margin-left,width;
  }
}