/* Image to Pencil Sketch — focused workspace refresh */

body.image-tool-image_to_pencil_sketch main > .is-hero.oot-image-hero-card{
  width:min(1180px,calc(100% - 18px))!important;
  margin:14px auto 12px!important;
  padding:22px 24px 20px!important;
  border-radius:24px!important;
}
body.image-tool-image_to_pencil_sketch .oot-image-hero-card .is-hero-icon,
body.image-tool-image_to_pencil_sketch .oot-image-hero-card .is-kicker,
body.image-tool-image_to_pencil_sketch .oot-image-hero-card .is-badges{display:none!important;}
body.image-tool-image_to_pencil_sketch .oot-image-hero-card h1{
  margin:0 0 10px!important;
  font-size:clamp(1.95rem,4vw,3rem)!important;
  line-height:1.04!important;
}
body.image-tool-image_to_pencil_sketch .oot-image-hero-card>p:not(.is-eyebrow){
  max-width:980px!important;
  font-size:.98rem!important;
  line-height:1.6!important;
}
body.image-tool-image_to_pencil_sketch .is-breadcrumb{display:none!important;}
body.image-tool-image_to_pencil_sketch .is-app-shell{
  width:min(1280px,calc(100% - 18px))!important;
  max-width:1280px!important;
  margin:0 auto 16px!important;
  border-radius:26px!important;
  overflow:hidden!important;
  box-shadow:0 18px 44px rgba(15,23,42,.09)!important;
}
body.image-tool-image_to_pencil_sketch .is-app-heading{
  padding:18px 22px!important;
  background:linear-gradient(180deg,#f5faf8 0%,#edf5f2 100%)!important;
  border-bottom:1px solid #dbe7e2!important;
}
body.image-tool-image_to_pencil_sketch .is-app-heading h2{font-size:1.55rem!important;margin:0!important;}
body.image-tool-image_to_pencil_sketch .is-kicker{margin-bottom:6px!important;color:#0f9d87!important;font-size:.82rem!important;letter-spacing:.08em!important;}
body.image-tool-image_to_pencil_sketch .is-privacy-note{
  padding:8px 12px!important;
  border-radius:999px!important;
  background:#ffffff!important;
  border:1px solid #dbe7e2!important;
  color:#5f7483!important;
  font-size:.9rem!important;
}
body.image-tool-image_to_pencil_sketch .is-tool-app{
  padding:18px!important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdfd 100%)!important;
}

/* upload-first */
body.image-tool-image_to_pencil_sketch .is-tool-app:not(.has-image) .is-workspace{display:none!important;}
body.image-tool-image_to_pencil_sketch .is-tool-app:not(.has-image) .is-upload-panel{margin:0!important;}
body.image-tool-image_to_pencil_sketch .is-tool-app:not(.has-image) .is-upload-zone{
  min-height:240px!important;
  padding:28px 22px!important;
  border:2px dashed #96e2d2!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,#f9fcfb 0%,#f1f7f4 100%)!important;
  box-shadow:none!important;
  justify-content:center!important;
}
body.image-tool-image_to_pencil_sketch .is-tool-app:not(.has-image) .is-upload-icon{font-size:2.35rem!important;margin-bottom:4px!important;}
body.image-tool-image_to_pencil_sketch .is-tool-app:not(.has-image) #isUploadTitle{
  font-size:1.28rem!important;
  font-weight:900!important;
  color:#09263a!important;
}
body.image-tool-image_to_pencil_sketch .is-tool-app:not(.has-image) #isUploadHint{
  font-size:.96rem!important;
  color:#627786!important;
}
body.image-tool-image_to_pencil_sketch .is-tool-app:not(.has-image) .is-file-list:empty{display:none!important;}

/* after upload */
body.image-tool-image_to_pencil_sketch .is-tool-app.has-image .is-upload-panel{margin-bottom:14px!important;}
body.image-tool-image_to_pencil_sketch .is-tool-app.has-image .is-upload-zone{
  min-height:76px!important;
  padding:14px 18px!important;
  border:2px dashed #96e2d2!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#f9fcfb 0%,#f1f7f4 100%)!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:12px!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
body.image-tool-image_to_pencil_sketch .is-tool-app.has-image .is-upload-icon{font-size:1.55rem!important;margin:0!important;}
body.image-tool-image_to_pencil_sketch .is-tool-app.has-image #isUploadTitle{font-size:1rem!important;}
body.image-tool-image_to_pencil_sketch .is-tool-app.has-image #isUploadHint{font-size:.88rem!important;}
body.image-tool-image_to_pencil_sketch .is-tool-app.has-image .is-upload-zone span:last-of-type{margin-left:auto!important;}
body.image-tool-image_to_pencil_sketch .is-file-list{margin-top:10px!important;}
body.image-tool-image_to_pencil_sketch .is-file-item,
body.image-tool-image_to_pencil_sketch .is-file-list > div{
  background:#fff!important;border:1px solid #dbe7e2!important;border-radius:14px!important;padding:10px 12px!important;
}

body.image-tool-image_to_pencil_sketch .is-workspace{
  display:grid!important;
  grid-template-columns:minmax(0,1.45fr) 370px!important;
  gap:18px!important;
  align-items:start!important;
}
body.image-tool-image_to_pencil_sketch .is-preview-panel,
body.image-tool-image_to_pencil_sketch .is-controls{
  border:1px solid #dbe7e2!important;
  border-radius:24px!important;
  box-shadow:0 12px 28px rgba(15,23,42,.06)!important;
}
body.image-tool-image_to_pencil_sketch .is-preview-panel{
  background:#fff!important;
  overflow:hidden!important;
}
body.image-tool-image_to_pencil_sketch .is-controls{
  position:sticky!important;
  top:88px!important;
  padding:18px!important;
  background:linear-gradient(180deg,#f7fbf9 0%,#f2f7f5 100%)!important;
  max-height:none!important;
  overflow:visible!important;
}
body.image-tool-image_to_pencil_sketch .is-preview-toolbar{
  padding:16px 18px!important;
  border-bottom:1px solid #e4ece8!important;
  background:linear-gradient(180deg,#ffffff 0%,#f9fbfb 100%)!important;
}
body.image-tool-image_to_pencil_sketch .is-preview-toolbar strong{font-size:1.12rem!important;color:#082338!important;}
body.image-tool-image_to_pencil_sketch #isDimensions{font-size:.9rem!important;color:#5f7483!important;}
body.image-tool-image_to_pencil_sketch .is-preview-stage{
  min-height:520px!important;
  height:auto!important;
  max-height:none!important;
  padding:18px!important;
  background:
    linear-gradient(45deg,#edf4f1 25%,transparent 25%),
    linear-gradient(-45deg,#edf4f1 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#edf4f1 75%),
    linear-gradient(-45deg,transparent 75%,#edf4f1 75%)!important;
  background-size:24px 24px!important;
  background-position:0 0,0 12px,12px -12px,-12px 0!important;
}
body.image-tool-image_to_pencil_sketch #isCanvas{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:min(72vh,760px)!important;
  margin:0 auto!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 12px 26px rgba(15,23,42,.12)!important;
}
body.image-tool-image_to_pencil_sketch #isOverlayLayer{inset:18px!important;}
body.image-tool-image_to_pencil_sketch .is-result-panel{padding:0 18px 18px!important;}
body.image-tool-image_to_pencil_sketch .is-control-group{
  margin-bottom:14px!important;
  padding:15px!important;
  border:1px solid #dbe7e2!important;
  border-radius:18px!important;
  background:#fff!important;
}
body.image-tool-image_to_pencil_sketch .is-control-group label,
body.image-tool-image_to_pencil_sketch .is-control-group legend,
body.image-tool-image_to_pencil_sketch .is-control-group strong{font-weight:800!important;color:#082338!important;}
body.image-tool-image_to_pencil_sketch .is-control-group p{margin:0!important;color:#5f7483!important;}
body.image-tool-image_to_pencil_sketch input[type="range"]{width:100%!important;accent-color:#17a389!important;}
body.image-tool-image_to_pencil_sketch .is-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  margin-top:14px!important;
}
body.image-tool-image_to_pencil_sketch .is-btn,
body.image-tool-image_to_pencil_sketch .is-actions .is-btn{
  width:100%!important;
  min-height:48px!important;
  border-radius:14px!important;
  font-weight:800!important;
}
body.image-tool-image_to_pencil_sketch .is-btn-primary{
  background:linear-gradient(135deg,#21c8ad 0%, #119b87 100%)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 12px 24px rgba(17,155,135,.2)!important;
}
body.image-tool-image_to_pencil_sketch .is-btn-success{
  background:linear-gradient(135deg,#0f2a4d 0%, #173b69 100%)!important;
  color:#fff!important;
  border-color:transparent!important;
}
body.image-tool-image_to_pencil_sketch .is-status{
  margin-top:12px!important;
  padding:12px 14px!important;
  border:1px solid #dbe7e2!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#5f7483!important;
}

/* content cleanup */
body.image-tool-image_to_pencil_sketch .is-content{
  width:min(1280px,calc(100% - 18px))!important;
  margin:0 auto 28px!important;
  gap:16px!important;
}
body.image-tool-image_to_pencil_sketch .is-content-card{border-radius:22px!important;}

@media (max-width: 1080px){
  body.image-tool-image_to_pencil_sketch .is-workspace{grid-template-columns:1fr!important;}
  body.image-tool-image_to_pencil_sketch .is-controls{position:static!important;}
}
@media (max-width: 640px){
  body.image-tool-image_to_pencil_sketch main > .is-hero.oot-image-hero-card{
    width:calc(100% - 12px)!important;
    margin:10px auto 10px!important;
    padding:18px 16px!important;
    border-radius:18px!important;
  }
  body.image-tool-image_to_pencil_sketch .oot-image-hero-card h1{font-size:2rem!important;line-height:1.06!important;}
  body.image-tool-image_to_pencil_sketch .oot-image-hero-card>p:not(.is-eyebrow){font-size:.94rem!important;line-height:1.55!important;}
  body.image-tool-image_to_pencil_sketch .is-app-shell,
  body.image-tool-image_to_pencil_sketch .is-content{width:calc(100% - 12px)!important;}
  body.image-tool-image_to_pencil_sketch .is-app-heading{padding:16px!important;gap:10px!important;}
  body.image-tool-image_to_pencil_sketch .is-app-heading h2{font-size:1.28rem!important;}
  body.image-tool-image_to_pencil_sketch .is-privacy-note{font-size:.84rem!important;width:100%!important;}
  body.image-tool-image_to_pencil_sketch .is-tool-app{padding:12px!important;}
  body.image-tool-image_to_pencil_sketch .is-tool-app:not(.has-image) .is-upload-zone{min-height:190px!important;padding:20px 14px!important;}
  body.image-tool-image_to_pencil_sketch .is-tool-app.has-image .is-upload-zone{
    min-height:auto!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    text-align:left!important;
  }
  body.image-tool-image_to_pencil_sketch .is-tool-app.has-image .is-upload-zone span:last-of-type{margin-left:0!important;}
  body.image-tool-image_to_pencil_sketch .is-preview-stage{min-height:280px!important;padding:12px!important;}
  body.image-tool-image_to_pencil_sketch #isCanvas{max-height:52vh!important;border-radius:14px!important;}
  body.image-tool-image_to_pencil_sketch .is-controls{padding:14px!important;border-radius:18px!important;}
  body.image-tool-image_to_pencil_sketch .is-control-group{padding:13px!important;border-radius:16px!important;}
  body.image-tool-image_to_pencil_sketch .is-content-card{padding:18px!important;border-radius:18px!important;}
}

/* ===== Mobile definitive reflow ===== */
@media (max-width: 640px){
  body.image-tool-image_to_pencil_sketch{
    overflow-x:hidden!important;
  }
  body.image-tool-image_to_pencil_sketch main,
  body.image-tool-image_to_pencil_sketch .is-app-shell,
  body.image-tool-image_to_pencil_sketch .is-tool-app,
  body.image-tool-image_to_pencil_sketch .is-upload-panel,
  body.image-tool-image_to_pencil_sketch .is-upload-zone,
  body.image-tool-image_to_pencil_sketch .is-workspace,
  body.image-tool-image_to_pencil_sketch .is-preview-panel,
  body.image-tool-image_to_pencil_sketch .is-controls,
  body.image-tool-image_to_pencil_sketch .is-content{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  body.image-tool-image_to_pencil_sketch main > .is-hero.oot-image-hero-card{
    width:calc(100% - 10px)!important;
    max-width:none!important;
    margin:6px auto 8px!important;
    padding:15px 14px!important;
    border-radius:16px!important;
  }
  body.image-tool-image_to_pencil_sketch .oot-image-hero-card h1{
    font-size:1.45rem!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
    margin-bottom:7px!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  body.image-tool-image_to_pencil_sketch .oot-image-hero-card>p:not(.is-eyebrow){
    font-size:.82rem!important;
    line-height:1.45!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  body.image-tool-image_to_pencil_sketch .is-app-shell{
    width:calc(100% - 10px)!important;
    max-width:none!important;
    margin:0 auto 12px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  body.image-tool-image_to_pencil_sketch .is-app-heading{
    width:100%!important;
    padding:14px!important;
    gap:9px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  body.image-tool-image_to_pencil_sketch .is-app-heading h2{
    font-size:1.18rem!important;
    line-height:1.25!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  body.image-tool-image_to_pencil_sketch .is-privacy-note{
    width:100%!important;
    max-width:100%!important;
    padding:9px 11px!important;
    border-radius:14px!important;
    font-size:.79rem!important;
    line-height:1.42!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }

  body.image-tool-image_to_pencil_sketch .is-tool-app{
    width:100%!important;
    padding:10px!important;
    overflow:hidden!important;
  }
  body.image-tool-image_to_pencil_sketch .is-upload-panel{
    width:100%!important;
    margin:0 0 10px!important;
  }
  body.image-tool-image_to_pencil_sketch .is-upload-zone{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    overflow:hidden!important;
  }

  /* Once an image is loaded, keep upload/change-image control compact. */
  body.image-tool-image_to_pencil_sketch .is-tool-app.has-image .is-upload-zone{
    min-height:62px!important;
    padding:10px 12px!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    row-gap:2px!important;
    align-items:center!important;
  }
  body.image-tool-image_to_pencil_sketch .is-tool-app.has-image .is-upload-icon{
    grid-row:1 / span 2!important;
    grid-column:1!important;
    font-size:1.25rem!important;
  }
  body.image-tool-image_to_pencil_sketch .is-tool-app.has-image #isUploadTitle{
    grid-column:2!important;
    grid-row:1!important;
    font-size:.92rem!important;
    line-height:1.25!important;
  }
  body.image-tool-image_to_pencil_sketch .is-tool-app.has-image #isUploadHint{
    grid-column:2!important;
    grid-row:2!important;
    margin:0!important;
    font-size:.74rem!important;
    line-height:1.3!important;
  }
  body.image-tool-image_to_pencil_sketch .is-file-list{
    width:100%!important;
    margin-top:8px!important;
    overflow:hidden!important;
  }
  body.image-tool-image_to_pencil_sketch .is-file-list > *{
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Critical mobile order: preview first, then controls/actions. */
  body.image-tool-image_to_pencil_sketch .is-workspace{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    overflow:visible!important;
  }
  body.image-tool-image_to_pencil_sketch .is-preview-panel{
    order:1!important;
    width:100%!important;
    border-radius:17px!important;
    overflow:hidden!important;
  }
  body.image-tool-image_to_pencil_sketch .is-controls{
    order:2!important;
    width:100%!important;
    position:static!important;
    top:auto!important;
    margin:0!important;
    padding:10px!important;
    border-radius:17px!important;
    overflow:hidden!important;
  }
  body.image-tool-image_to_pencil_sketch .is-preview-toolbar{
    width:100%!important;
    padding:11px 12px!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:4px 10px!important;
  }
  body.image-tool-image_to_pencil_sketch .is-preview-toolbar strong{
    font-size:.98rem!important;
  }
  body.image-tool-image_to_pencil_sketch #isDimensions{
    font-size:.76rem!important;
    margin-left:auto!important;
  }
  body.image-tool-image_to_pencil_sketch .is-preview-stage{
    width:100%!important;
    min-height:220px!important;
    max-height:none!important;
    height:auto!important;
    padding:8px!important;
    overflow:auto!important;
  }
  body.image-tool-image_to_pencil_sketch #isCanvas{
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:48vh!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }

  body.image-tool-image_to_pencil_sketch #isControls{
    width:100%!important;
    min-width:0!important;
  }
  body.image-tool-image_to_pencil_sketch .is-control-group{
    width:100%!important;
    min-width:0!important;
    margin:0 0 9px!important;
    padding:11px!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }
  body.image-tool-image_to_pencil_sketch .is-control-group label,
  body.image-tool-image_to_pencil_sketch .is-control-group strong{
    font-size:.9rem!important;
    line-height:1.3!important;
  }
  body.image-tool-image_to_pencil_sketch input[type="range"]{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:8px 0 0!important;
  }
  body.image-tool-image_to_pencil_sketch .is-actions{
    width:100%!important;
    margin-top:9px!important;
    gap:8px!important;
  }
  body.image-tool-image_to_pencil_sketch .is-actions .is-btn{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    padding:0 12px!important;
    font-size:.9rem!important;
  }
  body.image-tool-image_to_pencil_sketch .is-status{
    width:100%!important;
    margin-top:9px!important;
    padding:10px 11px!important;
    font-size:.79rem!important;
    line-height:1.4!important;
  }

  body.image-tool-image_to_pencil_sketch .is-content{
    width:calc(100% - 10px)!important;
    max-width:none!important;
    margin:0 auto 18px!important;
    gap:10px!important;
  }
  body.image-tool-image_to_pencil_sketch .is-content-card{
    padding:15px!important;
    border-radius:16px!important;
  }
}