/* OceanofTools image-tools Workspace V2
   Opt-in common layout used only by flagged template-rendered image tools. */

html{max-width:100%;overflow-x:clip;}
body.oot-image-workspace-v2{
  max-width:100%;
  overflow-x:hidden!important;
}
body.oot-image-workspace-v2 main,
body.oot-image-workspace-v2 main>*{
  min-width:0;
}

/* Compact consistent hero */
body.oot-image-workspace-v2 main>.is-hero.oot-image-hero-card{
  width:min(1240px,calc(100% - 20px))!important;
  max-width:1240px!important;
  margin:12px auto 12px!important;
  padding:22px 24px 20px!important;
  border-radius:24px!important;
  text-align:left!important;
}
body.oot-image-workspace-v2 .oot-image-hero-card .is-hero-icon,
body.oot-image-workspace-v2 .oot-image-hero-card .is-eyebrow,
body.oot-image-workspace-v2 .oot-image-hero-card .is-badges{
  display:none!important;
}
body.oot-image-workspace-v2 .oot-image-hero-card h1{
  margin:0 0 9px!important;
  max-width:980px!important;
  font-size:clamp(1.95rem,4vw,3rem)!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
}
body.oot-image-workspace-v2 .oot-image-hero-card>p:not(.is-eyebrow){
  max-width:1040px!important;
  margin:0!important;
  font-size:.98rem!important;
  line-height:1.58!important;
}
body.oot-image-workspace-v2 .is-breadcrumb{display:none!important;}

/* Main tool card */
body.oot-image-workspace-v2 .is-app-shell{
  width:min(1400px,calc(100% - 20px))!important;
  max-width:1400px!important;
  margin:0 auto 14px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #dbe7e2!important;
  border-radius:26px!important;
  background:#fff!important;
  box-shadow:0 18px 44px rgba(15,23,42,.08)!important;
}
body.oot-image-workspace-v2 .is-app-heading{
  margin:0!important;
  padding:17px 20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  border-bottom:1px solid #dfe9e5!important;
  background:linear-gradient(180deg,#f5faf8 0%,#eef6f3 100%)!important;
}
body.oot-image-workspace-v2 .is-app-heading .is-kicker{
  margin:0 0 4px!important;
  color:#0f9d87!important;
  font-size:.76rem!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}
body.oot-image-workspace-v2 .is-app-heading h2{
  margin:0!important;
  color:#082338!important;
  font-size:1.48rem!important;
  line-height:1.18!important;
}
body.oot-image-workspace-v2 .is-privacy-note{
  max-width:460px!important;
  padding:8px 12px!important;
  border:1px solid #dbe7e2!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#607586!important;
  font-size:.86rem!important;
  line-height:1.4!important;
  text-align:center!important;
}
body.oot-image-workspace-v2 .is-tool-app{
  width:100%!important;
  min-width:0!important;
  padding:16px!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdfc 100%)!important;
}

/* Upload-first state */
body.oot-image-workspace-v2 .is-tool-app:not(.has-image) .is-workspace{
  display:none!important;
}
body.oot-image-workspace-v2 .is-tool-app:not(.has-image) .is-upload-panel{
  margin:0!important;
  width:100%!important;
}
body.oot-image-workspace-v2 .is-tool-app:not(.has-image) .is-upload-zone{
  width:100%!important;
  min-width:0!important;
  min-height:220px!important;
  padding:26px 20px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  text-align:center!important;
  border:2px dashed #8fddcd!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#fbfdfc 0%,#f2f8f6 100%)!important;
  box-shadow:none!important;
}
body.oot-image-workspace-v2 .is-tool-app:not(.has-image) .is-upload-icon{
  margin:0 0 2px!important;
  font-size:2.3rem!important;
  line-height:1!important;
}
body.oot-image-workspace-v2 .is-tool-app:not(.has-image) #isUploadTitle{
  font-size:1.2rem!important;
  font-weight:900!important;
  color:#0a2639!important;
}
body.oot-image-workspace-v2 .is-tool-app:not(.has-image) #isUploadHint{
  color:#647987!important;
  font-size:.94rem!important;
  line-height:1.45!important;
}
body.oot-image-workspace-v2 .is-upload-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:190px!important;
  min-height:46px!important;
  margin-top:6px!important;
  padding:0 18px!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#20c5aa 0%,#119a86 100%)!important;
  color:#fff!important;
  font-size:.95rem!important;
  font-weight:900!important;
  box-shadow:0 10px 22px rgba(17,154,134,.18)!important;
}
body.oot-image-workspace-v2 .is-file-list:empty{display:none!important;}

/* Loaded image upload bar */
body.oot-image-workspace-v2 .is-tool-app.has-image .is-upload-panel{
  width:100%!important;
  margin:0 0 14px!important;
}
body.oot-image-workspace-v2 .is-tool-app.has-image .is-upload-zone{
  width:100%!important;
  min-width:0!important;
  min-height:68px!important;
  padding:11px 14px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  border:1px dashed #91dcca!important;
  border-radius:18px!important;
  background:#f6fbf9!important;
  text-align:left!important;
}
body.oot-image-workspace-v2 .is-tool-app.has-image .is-upload-icon{
  margin:0!important;
  font-size:1.35rem!important;
}
body.oot-image-workspace-v2 .is-tool-app.has-image #isUploadTitle{
  color:#0b2b3d!important;
  font-size:.96rem!important;
  font-weight:850!important;
}
body.oot-image-workspace-v2 .is-tool-app.has-image #isUploadHint{
  margin-left:auto!important;
  color:#687d89!important;
  font-size:.82rem!important;
}
body.oot-image-workspace-v2 .is-tool-app.has-image .is-upload-cta{
  min-width:auto!important;
  min-height:38px!important;
  margin:0!important;
  padding:0 13px!important;
  font-size:.85rem!important;
  box-shadow:none!important;
}
body.oot-image-workspace-v2 .is-file-list{
  width:100%!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:8px!important;
}
body.oot-image-workspace-v2 .is-file-pill{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* Before/after secondary upload */
body.oot-image-workspace-v2 .is-secondary-grid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  margin-top:10px!important;
}
body.oot-image-workspace-v2 .is-secondary-grid .is-upload-zone{
  width:100%!important;
  min-width:0!important;
  min-height:110px!important;
  padding:16px!important;
  border:1px dashed #b7c8d8!important;
  border-radius:18px!important;
  background:#f9fbfc!important;
}

/* Preview first, settings second */
body.oot-image-workspace-v2 .is-workspace{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 380px!important;
  gap:16px!important;
  align-items:start!important;
}
body.oot-image-workspace-v2 .is-preview-panel,
body.oot-image-workspace-v2 .is-controls{
  min-width:0!important;
  border:1px solid #dbe7e2!important;
  border-radius:22px!important;
  box-shadow:0 10px 26px rgba(15,23,42,.05)!important;
}
body.oot-image-workspace-v2 .is-preview-panel{
  grid-column:1!important;
  grid-row:1!important;
  overflow:hidden!important;
  background:#fff!important;
}
body.oot-image-workspace-v2 .is-controls{
  grid-column:2!important;
  grid-row:1!important;
  position:sticky!important;
  top:78px!important;
  max-height:none!important;
  overflow:visible!important;
  padding:15px!important;
  background:linear-gradient(180deg,#f7fbf9 0%,#f2f7f5 100%)!important;
}
body.oot-image-workspace-v2 .is-controls-heading{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  margin-bottom:12px!important;
  padding:0 2px!important;
}
body.oot-image-workspace-v2 .is-controls-heading>span{
  display:grid!important;
  place-items:center!important;
  width:32px!important;
  height:32px!important;
  border-radius:10px!important;
  background:#e8f6f2!important;
}
body.oot-image-workspace-v2 .is-controls-heading strong{
  display:block!important;
  color:#082338!important;
  font-size:1.08rem!important;
  line-height:1.25!important;
}
body.oot-image-workspace-v2 .is-controls-heading small{
  display:block!important;
  margin-top:2px!important;
  color:#687c88!important;
  font-size:.8rem!important;
  line-height:1.35!important;
}
body.oot-image-workspace-v2 .is-preview-toolbar{
  padding:14px 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  border-bottom:1px solid #e4ece8!important;
  background:#fbfdfc!important;
}
body.oot-image-workspace-v2 .is-preview-toolbar strong{
  color:#082338!important;
  font-size:1.06rem!important;
}
body.oot-image-workspace-v2 #isDimensions{
  color:#607586!important;
  font-size:.84rem!important;
  text-align:right!important;
}
body.oot-image-workspace-v2 .is-preview-stage{
  width:100%!important;
  min-width:0!important;
  min-height:470px!important;
  height:auto!important;
  max-height:none!important;
  padding:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:auto!important;
  background:
    linear-gradient(45deg,#eef4f2 25%,transparent 25%),
    linear-gradient(-45deg,#eef4f2 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eef4f2 75%),
    linear-gradient(-45deg,transparent 75%,#eef4f2 75%)!important;
  background-size:24px 24px!important;
  background-position:0 0,0 12px,12px -12px,-12px 0!important;
}
body.oot-image-workspace-v2 #isCanvas{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:min(70vh,760px)!important;
  margin:auto!important;
  object-fit:contain!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 10px 26px rgba(15,23,42,.12)!important;
}
body.oot-image-workspace-v2 #isOverlayLayer{
  inset:16px!important;
}
body.oot-image-workspace-v2 .is-result-panel{
  width:100%!important;
  min-width:0!important;
  overflow:auto!important;
  padding:0 16px 16px!important;
}

/* Controls */
body.oot-image-workspace-v2 #isControls{
  width:100%!important;
  min-width:0!important;
}
body.oot-image-workspace-v2 .is-control-group{
  width:100%!important;
  min-width:0!important;
  margin:0 0 11px!important;
  padding:13px!important;
  border:1px solid #dbe7e2!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:none!important;
}
body.oot-image-workspace-v2 .is-control-group label{
  width:100%!important;
  min-width:0!important;
  color:#173044!important;
  font-size:.9rem!important;
  font-weight:800!important;
}
body.oot-image-workspace-v2 .is-control-group label>span:first-child{
  min-width:0!important;
}
body.oot-image-workspace-v2 .is-control-group small,
body.oot-image-workspace-v2 .is-control-group output{
  color:#0f9d87!important;
  font-weight:850!important;
}
body.oot-image-workspace-v2 .is-control-group input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),
body.oot-image-workspace-v2 .is-control-group select,
body.oot-image-workspace-v2 .is-control-group textarea{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
body.oot-image-workspace-v2 .is-control-group input[type=range]{
  width:100%!important;
  max-width:100%!important;
  accent-color:#14a58d!important;
}
body.oot-image-workspace-v2 .is-control-group input[type=color]{
  width:54px!important;
  height:42px!important;
  padding:2px!important;
  border:1px solid #d4e1dc!important;
  border-radius:10px!important;
}
body.oot-image-workspace-v2 .is-check{
  display:flex!important;
  align-items:flex-start!important;
  gap:9px!important;
}
body.oot-image-workspace-v2 .is-check input{
  flex:0 0 auto!important;
  margin-top:2px!important;
}
body.oot-image-workspace-v2 .is-inline-controls{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
}
body.oot-image-workspace-v2 .is-actions{
  width:100%!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
  margin-top:12px!important;
}
body.oot-image-workspace-v2 .is-actions .is-btn{
  width:100%!important;
  min-height:46px!important;
  border-radius:13px!important;
  font-weight:850!important;
}
body.oot-image-workspace-v2 .is-btn-primary{
  background:linear-gradient(135deg,#21c7ab 0%,#109983 100%)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 10px 22px rgba(16,153,131,.18)!important;
}
body.oot-image-workspace-v2 .is-btn-success{
  background:linear-gradient(135deg,#12345b 0%,#1b507e 100%)!important;
  color:#fff!important;
  border-color:transparent!important;
}
body.oot-image-workspace-v2 .is-status{
  width:100%!important;
  margin:10px 0 0!important;
  padding:10px 12px!important;
  border:1px solid #dbe7e2!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#617885!important;
  font-size:.84rem!important;
  line-height:1.45!important;
}

/* Tool-specific generated content stays responsive */
body.oot-image-workspace-v2 .is-palette,
body.oot-image-workspace-v2 .is-thumb-grid,
body.oot-image-workspace-v2 .is-variation-grid,
body.oot-image-workspace-v2 .is-tile-grid,
body.oot-image-workspace-v2 .is-related-grid,
body.oot-image-workspace-v2 .is-feature-grid,
body.oot-image-workspace-v2 .is-steps{
  min-width:0!important;
}
body.oot-image-workspace-v2 .is-before-after{
  width:100%!important;
  max-width:100%!important;
}
body.oot-image-workspace-v2 .is-data-table{
  min-width:560px!important;
}
body.oot-image-workspace-v2 .is-result-panel:has(.is-data-table){
  overflow-x:auto!important;
}
body.oot-image-workspace-v2 .is-code-box{
  max-width:100%!important;
}

/* Global real rating always lives under the editor */
body.oot-image-workspace-v2 .oot-template-rating-slot{
  width:min(1400px,calc(100% - 20px))!important;
  max-width:1400px!important;
  min-width:0!important;
  margin:0 auto 16px!important;
}
body.oot-image-workspace-v2 .oot-template-rating-slot:empty{
  display:none!important;
}
body.oot-image-workspace-v2 .oot-template-rating-slot #ootRatingMount{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  min-width:0!important;
}

/* Documentation/content */
body.oot-image-workspace-v2 .is-content{
  width:min(1400px,calc(100% - 20px))!important;
  max-width:1400px!important;
  min-width:0!important;
  margin:0 auto 28px!important;
  gap:16px!important;
}
body.oot-image-workspace-v2 .is-content-card{
  min-width:0!important;
  border-radius:20px!important;
  padding:clamp(20px,3vw,28px)!important;
}

@media (max-width:1100px){
  body.oot-image-workspace-v2 .is-workspace{
    grid-template-columns:minmax(0,1fr) 340px!important;
  }
}

@media (max-width:860px){
  html,body.oot-image-workspace-v2{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  body.oot-image-workspace-v2 main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  body.oot-image-workspace-v2 main>.is-hero.oot-image-hero-card,
  body.oot-image-workspace-v2 .is-app-shell,
  body.oot-image-workspace-v2 .oot-template-rating-slot,
  body.oot-image-workspace-v2 .is-content{
    width:calc(100% - 12px)!important;
    max-width:calc(100% - 12px)!important;
    min-width:0!important;
    margin-left:6px!important;
    margin-right:6px!important;
  }
  body.oot-image-workspace-v2 main>.is-hero.oot-image-hero-card{
    margin-top:8px!important;
    margin-bottom:8px!important;
    padding:17px 15px!important;
    border-radius:18px!important;
  }
  body.oot-image-workspace-v2 .oot-image-hero-card h1{
    font-size:clamp(1.7rem,8vw,2.15rem)!important;
    line-height:1.08!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  body.oot-image-workspace-v2 .oot-image-hero-card>p:not(.is-eyebrow){
    font-size:.91rem!important;
    line-height:1.52!important;
  }
  body.oot-image-workspace-v2 .is-app-shell{
    border-radius:18px!important;
  }
  body.oot-image-workspace-v2 .is-app-heading{
    width:100%!important;
    min-width:0!important;
    padding:14px!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:9px!important;
  }
  body.oot-image-workspace-v2 .is-app-heading h2{
    font-size:1.26rem!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  body.oot-image-workspace-v2 .is-privacy-note{
    width:100%!important;
    max-width:100%!important;
    padding:8px 10px!important;
    border-radius:14px!important;
    white-space:normal!important;
    text-align:left!important;
    font-size:.79rem!important;
  }
  body.oot-image-workspace-v2 .is-tool-app{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:10px!important;
    overflow:hidden!important;
  }
  body.oot-image-workspace-v2 .is-tool-app:not(.has-image) .is-upload-zone{
    min-height:185px!important;
    padding:20px 13px!important;
    border-radius:18px!important;
  }
  body.oot-image-workspace-v2 .is-upload-cta{
    width:min(100%,300px)!important;
    min-width:0!important;
  }
  body.oot-image-workspace-v2 .is-tool-app.has-image .is-upload-zone{
    min-height:auto!important;
    padding:11px 12px!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:5px!important;
  }
  body.oot-image-workspace-v2 .is-tool-app.has-image #isUploadHint{
    margin-left:0!important;
    width:100%!important;
  }
  body.oot-image-workspace-v2 .is-tool-app.has-image .is-upload-cta{
    width:100%!important;
    justify-content:center!important;
    margin-top:5px!important;
  }
  body.oot-image-workspace-v2 .is-secondary-grid .is-upload-zone{
    min-height:100px!important;
  }
  body.oot-image-workspace-v2 .is-workspace{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  body.oot-image-workspace-v2 .is-preview-panel{
    order:1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    border-radius:18px!important;
  }
  body.oot-image-workspace-v2 .is-controls{
    order:2!important;
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:12px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  body.oot-image-workspace-v2 .is-preview-toolbar{
    padding:12px!important;
    align-items:flex-start!important;
  }
  body.oot-image-workspace-v2 #isDimensions{
    max-width:48%!important;
    white-space:normal!important;
  }
  body.oot-image-workspace-v2 .is-preview-stage{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:280px!important;
    max-height:none!important;
    padding:9px!important;
    overflow:auto!important;
  }
  body.oot-image-workspace-v2 #isCanvas{
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:55vh!important;
    min-width:0!important;
    border-radius:11px!important;
  }
  body.oot-image-workspace-v2 #isOverlayLayer{
    inset:9px!important;
  }
  body.oot-image-workspace-v2 .is-result-panel{
    max-width:100%!important;
    padding:0 10px 10px!important;
  }
  body.oot-image-workspace-v2 .is-control-group{
    max-width:100%!important;
    padding:12px!important;
    border-radius:14px!important;
  }
  body.oot-image-workspace-v2 .is-inline-controls{
    grid-template-columns:1fr!important;
  }
  body.oot-image-workspace-v2 .is-actions{
    grid-template-columns:1fr!important;
  }
  body.oot-image-workspace-v2 .is-actions .is-btn{
    width:100%!important;
    max-width:100%!important;
  }
  body.oot-image-workspace-v2 .oot-template-rating-slot{
    margin-top:0!important;
    margin-bottom:12px!important;
  }
  body.oot-image-workspace-v2 .oot-template-rating-slot #ootRatingMount,
  body.oot-image-workspace-v2 .oot-template-rating-slot #ootRatingMount>*{
    max-width:100%!important;
    min-width:0!important;
  }
  body.oot-image-workspace-v2 .is-content{
    gap:12px!important;
  }
  body.oot-image-workspace-v2 .is-content-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:17px!important;
    border-radius:17px!important;
  }
  body.oot-image-workspace-v2 .is-feature-grid,
  body.oot-image-workspace-v2 .is-steps,
  body.oot-image-workspace-v2 .is-related-grid,
  body.oot-image-workspace-v2 .is-two-column,
  body.oot-image-workspace-v2 .is-secondary-grid,
  body.oot-image-workspace-v2 .is-thumb-grid,
  body.oot-image-workspace-v2 .is-variation-grid,
  body.oot-image-workspace-v2 .is-tile-grid,
  body.oot-image-workspace-v2 .is-palette{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:380px){
  body.oot-image-workspace-v2 main>.is-hero.oot-image-hero-card,
  body.oot-image-workspace-v2 .is-app-shell,
  body.oot-image-workspace-v2 .oot-template-rating-slot,
  body.oot-image-workspace-v2 .is-content{
    width:calc(100% - 8px)!important;
    max-width:calc(100% - 8px)!important;
    margin-left:4px!important;
    margin-right:4px!important;
  }
  body.oot-image-workspace-v2 .is-tool-app{padding:8px!important;}
  body.oot-image-workspace-v2 .is-preview-stage{min-height:240px!important;}
  body.oot-image-workspace-v2 .is-app-heading h2{font-size:1.18rem!important;}
  body.oot-image-workspace-v2 .oot-image-hero-card h1{font-size:1.62rem!important;}
}